@justeattakeaway/pie-webc-core 0.5.0 → 0.7.0

package/.eslintignore

@@ -0,0 +1,3 @@
+.turbo
+dist
+node_modules

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.7.0
+
+### Minor Changes
+
+- [Changed] - Add js/ts linting and fix errors ([#653](https://github.com/justeattakeaway/pie/pull/653)) by [@jamieomaguire](https://github.com/jamieomaguire)
+
+## 0.6.0
+
+### Minor Changes
+
+- [Changed] - Improve TS typings in RTL mixin and provde extendable prop interface for components ([#623](https://github.com/justeattakeaway/pie/pull/623)) by [@jamieomaguire](https://github.com/jamieomaguire)
+
 ## 0.5.0
 
 ### Minor Changes

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@justeattakeaway/pie-webc-core",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "PIE design system base classes, mixins and utilities for web components",
   "type": "module",
   "main": "index.ts",
   "author": "JustEatTakeaway - Design System Web Team",
   "license": "Apache-2.0",
   "scripts": {
+    "lint:scripts": "run -T eslint .",
+    "lint:scripts:fix": "run -T eslint . --fix",
     "test": "run -T vitest run"
   },
   "volta": {

package/src/index.ts

@@ -1,4 +1,3 @@
 export * from './mixins';
 export * from './decorators';
-export * from './test-helpers';
 export * from './type-helpers';

package/src/mixins/rtl/rtlMixin.ts

@@ -2,18 +2,30 @@
 import { LitElement } from 'lit';
 import { property } from 'lit/decorators/property.js';
 
+// According to TS, "A mixin class must have a constructor with a single rest parameter of type 'any[]'."
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 type Constructor<T> = new (...args: any[]) => T;
 
-declare class RTLInterface {
-    dir: string;
+type htmlDirAttribute = 'ltr' | 'rtl' | 'auto';
+
+/**
+ * Any component property interface that implements RTL should extend this interface. See the ModalProps interface for an example of this.
+ */
+export interface RTLComponentProps {
+    dir: htmlDirAttribute
+}
+
+// This is just used by the dynamically constructed class below and does not need to be imported or referenced anywhere else
+declare class _RTLInterface {
+    dir: htmlDirAttribute;
     isRTL: boolean;
 }
 
 export const RtlMixin =
     <T extends Constructor<LitElement>>(superClass: T) => {
-        class RTLElement extends superClass {
-            @property({ type: String })
-                dir = '';
+        class RTLElement extends superClass implements _RTLInterface {
+            @property({ type: String, reflect: true })
+                dir : htmlDirAttribute = 'ltr';
 
             /**
              * Returns true if the element is in Right to Left mode.
@@ -37,5 +49,5 @@ export const RtlMixin =
             }
         }
 
-        return RTLElement as Constructor<RTLInterface> & T;
+        return RTLElement as Constructor<_RTLInterface> & T;
     };

package/tsconfig.json

@@ -25,6 +25,6 @@
       "experimentalDecorators": true,
       "forceConsistentCasingInFileNames": true
   },
-  "include": ["src/**/*.ts","./declaration.d.ts", "test/**/*.ts"],
+  "include": ["src/**/*.ts","./declaration.d.ts", "test/**/*.ts", "index.ts"],
   "exclude": []
 }

package/src/test-helpers/components/index.ts

@@ -1 +0,0 @@
-export * from './web-component-test-wrapper/WebComponentTestWrapper';

package/src/test-helpers/components/web-component-test-wrapper/WebComponentTestWrapper.ts

@@ -1,78 +0,0 @@
-import { LitElement, html, unsafeCSS } from 'lit';
-import { property } from 'lit/decorators.js';
-import styles from './webComponentTestWrapper.scss?inline';
-
-/**
- * This is a Web Component used for visual testing purposes.
- * It allows us to wrap a component we'd like to test in a container
- * that displays the component's props as a label.
- *
- * Alternatively, this component supports a page mode. In this mode,
- * the test component is not wrapped and labelled, however you can add
- * any amount of HTML to the page to help with testing. This useful for components
- * such as Modal and Dialog components where we need to test the component in the context of
- * the page markup.
- *
- * Components can be tested without this, but it's useful if your tests
- * require additional markup when testing a component.
- */
-export class WebComponentTestWrapper extends LitElement {
-    static styles = unsafeCSS(styles);
-
-    /**
-     * The prop key and values to display above the component.
-     * This should be a single string representing a comma separated list of prop key/value pairs.
-     * Such as: 'size: small, isFullWidth: true'
-     */
-    @property({ type: String })
-        propKeyValues = '';
-
-    /**
-     * Use in combination with the `pageMarkup` named slot to render the component alongside additional HTML
-     * to test the component in the context of the page.
-     */
-    @property({ type: Boolean })
-        pageMode = false;
-
-    // Renders a string such as 'size: small, isFullWidth: true'
-    // as HTML such as:
-    // <p class="c-webComponentTestWrapper-label"><b>size</b>: <code>small</code></p>
-    // <p class="c-webComponentTestWrapper-label"><b>isFullWidth</b>: <code>true</code></p>
-    _renderPropKeyValues () {
-        return this.propKeyValues.split(',').map((propKeyValueString) => {
-            const [key, value] = propKeyValueString.split(':');
-
-            return html`<p class="c-webComponentTestWrapper-label"><b>${key}</b>: <code>${value}</code></p>`;
-        });
-    }
-
-    render () {
-        if (this.pageMode) {
-            return html`
-            <div>
-                <slot name="component"></slot>
-                <slot name="pageMarkup"></slot>
-            </div>`;
-        }
-
-        return html`
-            <div class="c-webComponentTestWrapper">
-                ${this._renderPropKeyValues()}
-                <div class="c-webComponentTestWrapper-slot">
-                    <slot name="component"></slot>
-                </div>
-            </div>`;
-    }
-}
-
-const componentSelector = 'web-component-test-wrapper';
-
-if (!customElements.get(componentSelector)) {
-    customElements.define(componentSelector, WebComponentTestWrapper);
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        [componentSelector]: WebComponentTestWrapper;
-    }
-}

package/src/test-helpers/components/web-component-test-wrapper/webComponentTestWrapper.scss

@@ -1,20 +0,0 @@
-.c-webComponentTestWrapper {
-    padding-block: var(--dt-spacing-c);
-    padding-inline: var(--dt-spacing-e);
-    font-family: var(--dt-font-interactive-m-family);
-    font-size: calc(var(--dt-font-size-20) * 1px);
-    border: 1px solid var(--dt-color-background-dark);
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-}
-
-.c-webComponentTestWrapper-label {
-    margin-block: var(--dt-spacing-c);
-}
-
-.c-webComponentTestWrapper-slot {
-    padding: var(--dt-spacing-c);
-    border: 1px dashed var(--dt-color-background-dark);
-    grid-column: 1 / 3;
-    margin-block-start: var(--dt-spacing-c);
-}

package/src/test-helpers/defs.ts

@@ -1,15 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-export type PropObject = {
-    [key: string]: any;
-};
-
-export type WebComponentPropValues = {
-    [key: string]: any;
-};
-
-export type WebComponentTestInput = {
-    propValues: WebComponentPropValues;
-    renderedString: string;
-};
-
-export type WebComponentRenderFn = (propVals: WebComponentPropValues) => string;

package/src/test-helpers/get-all-prop-combos.ts

@@ -1,83 +0,0 @@
-import { PropObject, WebComponentPropValues } from './defs';
-
-/**
- * Generate all possible combinations of properties for a given object.
- *
- * @param {PropObject} obj - The object containing properties for which combinations are to be generated.
- * Each property value can any data type.
- *
- * @returns {WebComponentPropValues[]} An array of objects, where each object is a unique combination of web component property values.
- */
-export const getAllPropCombinations = (obj: PropObject): WebComponentPropValues[] => {
-    const propertyKeys = Object.keys(obj);
-    const combinationsOfPropValues: WebComponentPropValues[] = [];
-
-    // This function generates combinations of properties from a given object.
-    // It does this by recursively concatenating each property value to an 'accumulatedPropertyValues' array,
-    // and adding the resulting combination to a 'WebComponentPropValues' array when it reaches the end of the keys.
-    function generatePropCombinations (accumulatedPropertyValues: any[], i: number): void {
-    // When 'i' equals the length of 'keys', we've reached the end of the keys.
-    // This means we've formed a complete combination.
-        if (i === propertyKeys.length) {
-            // Create an empty object to hold the current WebComponentPropValues.
-            const combo: WebComponentPropValues = {};
-            // Loop over the 'accumulatedPropertyValues' array, which contains the property values for this combination.
-            for (let j = 0; j < accumulatedPropertyValues.length; j++) {
-            // Assign each value to the corresponding key in the 'combo' object.
-                combo[propertyKeys[j]] = accumulatedPropertyValues[j];
-            }
-            // Add this combination to the 'combinationsOfPropValues' array.
-            combinationsOfPropValues.push(combo);
-            // End the recursion for this branch.
-            return;
-        }
-
-        // Get the current key and its values from the input object.
-        const propertyKey = propertyKeys[i];
-        const propertyValues = obj[propertyKey];
-
-        if (typeof propertyValues === 'boolean') {
-            // If the values for this key are a boolean, we generate two combinations:
-            // one with the value 'true', and one with the value 'false'.
-            generatePropCombinations([...accumulatedPropertyValues, true], i + 1);
-            generatePropCombinations([...accumulatedPropertyValues, false], i + 1);
-        } else if (Array.isArray(propertyValues)) {
-            // If the values for this key are an array, we generate a combination for each value in the array.
-            for (let j = 0; j < propertyValues.length; j++) {
-                generatePropCombinations([...accumulatedPropertyValues, propertyValues[j]], i + 1);
-            }
-        } else {
-            // If the values for this key are neither a boolean nor an array,
-            // we simply generate a single combination with the value as is.
-            generatePropCombinations([...accumulatedPropertyValues, propertyValues], i + 1);
-        }
-    }
-
-    generatePropCombinations([], 0);
-
-    return combinationsOfPropValues;
-};
-
-/**
- * Splits an array of component prop combinations by a particular property value.
- *
- * @param {WebComponentPropValues[]} propValueCombinations - The array of combinations to split.
- * @param {string} property - The property to split by.
- *
- * @returns {Record<string, WebComponentPropValues[]>} An object mapping each unique property value to the combinations that have it.
- */
-export const splitCombinationsByPropertyValue = (propValueCombinations: WebComponentPropValues[], property: string): Record<string, WebComponentPropValues[]> => propValueCombinations
-    .reduce((splitCombinations: Record<string, WebComponentPropValues[]>, combination: WebComponentPropValues) => {
-        const propertyValue = combination[property];
-        const propertyValueKey = String(propertyValue);
-
-        if (!(propertyValueKey in splitCombinations)) {
-            splitCombinations[propertyValueKey] = [];
-        }
-
-        // Add the current combination to the array for its property value
-        splitCombinations[propertyValueKey].push(combination);
-
-        return splitCombinations;
-    }, {});
-

package/src/test-helpers/index.ts

@@ -1,4 +0,0 @@
-export * from './get-all-prop-combos';
-export * from './defs';
-export * from './rendering';
-export * from './components';

package/src/test-helpers/rendering.ts

@@ -1,10 +0,0 @@
-import { WebComponentPropValues, WebComponentTestInput, WebComponentRenderFn } from './defs';
-
-export function createTestWebComponent (propVals: WebComponentPropValues, componentRenderFn: WebComponentRenderFn): WebComponentTestInput {
-    const testComponent: WebComponentTestInput = {
-        propValues: propVals,
-        renderedString: componentRenderFn(propVals),
-    };
-
-    return testComponent;
-}