@justeattakeaway/pie-webc-core 0.24.2 → 0.25.1

package/README.md

@@ -46,6 +46,8 @@ export class MyComponent extends RtlMixin(LitElement) implements MyComponentProp
   // ...
 }
 ```
+## Internals
+The folder `internals` contains Typescript files that are to be imported into Pie Web Components and build into the bundles for each component. Everything else in this package is designed to be a one-time imported externalised dependency in applications using the web components to prevent duplication of code. The code in `internals` is the exception to this that contains things that must be included in each component bundle.
 
 ## Dependencies
 

package/package.json

@@ -1,18 +1,25 @@
 {
   "name": "@justeattakeaway/pie-webc-core",
-  "version": "0.24.2",
+  "version": "0.25.1",
   "description": "PIE design system base classes, mixins and utilities for web components",
   "type": "module",
   "main": "dist/index.js",
   "author": "Just Eat Takeaway.com - Design System Team",
   "license": "Apache-2.0",
+  "files": [
+    "src/decorators",
+    "src/functions",
+    "src/interfaces",
+    "src/mixins",
+    "src/types",
+    "index.ts"
+  ],
   "scripts": {
     "build": "run -T vite build",
     "lint:scripts": "run -T eslint .",
     "lint:scripts:fix": "run -T eslint . --fix",
     "test": "run -T vitest run --config ../../../vite.config.js",
     "test:ci": "yarn test",
-    "test:browsers-setup": "npx playwright-lit-setup",
     "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
     "test:browsers:ci": "yarn test:browsers",
     "test:watch": "run -T vitest"
@@ -21,7 +28,7 @@
     "lit": "3.2.0"
   },
   "devDependencies": {
-    "@justeattakeaway/pie-components-config": "0.18.0"
+    "@justeattakeaway/pie-components-config": "0.19.1"
   },
   "volta": {
     "extends": "../../../package.json"

package/.eslintignore

@@ -1,5 +0,0 @@
-.turbo
-dist
-node_modules
-test-results
-lit-browsers-report

package/.turbo/turbo-build.log

@@ -1,7 +0,0 @@
-vite v5.3.6 building for production...
-transforming...
-✓ 16 modules transformed.
-rendering chunks...
-computing gzip size...
-dist/index.js  2.69 kB │ gzip: 1.22 kB
-✓ built in 104ms

package/CHANGELOG.md

@@ -1,208 +0,0 @@
-# Changelog
-
-## 0.24.2
-
-### Patch Changes
-
-- [Fixed] - Imports to align with new linting rule ([#1622](https://github.com/justeattakeaway/pie/pull/1622)) by [@xander-marjoram](https://github.com/xander-marjoram)
-
-  [Removed] - Empty lines at the start of some files
-
-## 0.24.1
-
-### Patch Changes
-
-- [Changed] - Suggested package updates for security ([#1953](https://github.com/justeattakeaway/pie/pull/1953)) by [@xander-marjoram](https://github.com/xander-marjoram)
-
-## 0.24.0
-
-### Minor Changes
-
-- [Changed] - Update default props generic helper type to include all props by default ([#1582](https://github.com/justeattakeaway/pie/pull/1582)) by [@xander-marjoram](https://github.com/xander-marjoram)
-
-  [Changed] - Naming of generic type
-  [Added] - JSDoc comment
-
-## 0.23.0
-
-### Minor Changes
-
-- [Added] - Generic type for components default props ([#1451](https://github.com/justeattakeaway/pie/pull/1451)) by [@fernandofranca](https://github.com/fernandofranca)
-
-## 0.22.0
-
-### Minor Changes
-
-- [Changed] - Updated Lit from 3.1.2 to 3.1.3 ([#1427](https://github.com/justeattakeaway/pie/pull/1427)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-## 0.21.1
-
-### Patch Changes
-
-- [Removed] - Unneeded `bundledJetDeps` array (patch versions are required because pie-components-config is a dev dependency) ([#1378](https://github.com/justeattakeaway/pie/pull/1378)) by [@xander-marjoram](https://github.com/xander-marjoram)
-
-## 0.21.0
-
-### Minor Changes
-
-- [Added] - Bundle visualiser that runs during build for webc icons, webc core and our components ([#1391](https://github.com/justeattakeaway/pie/pull/1391)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-## 0.20.0
-
-### Minor Changes
-
-- [Changed] - Update tsconfig target to es2021 ([#1341](https://github.com/justeattakeaway/pie/pull/1341)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-## 0.19.1
-
-### Patch Changes
-
-- [Changed] - Updated lit to `3.1.2` ([#1300](https://github.com/justeattakeaway/pie/pull/1300)) by [@renovate](https://github.com/apps/renovate)
-
-## 0.19.0
-
-### Minor Changes
-
-- [Added] - dispatchCustomEvent helper function. ([#1272](https://github.com/justeattakeaway/pie/pull/1272)) by [@dandel10n](https://github.com/dandel10n)
-
-## 0.18.0
-
-### Minor Changes
-
-- [Added] - PIEInputElement interface ([#1257](https://github.com/justeattakeaway/pie/pull/1257)) by [@fernandofranca](https://github.com/fernandofranca)
-
-## 0.17.1
-
-### Patch Changes
-
-- [Changed] - Updated Lit to 3.1.1 ([#1178](https://github.com/justeattakeaway/pie/pull/1178)) by [@renovate](https://github.com/apps/renovate)
-
-## 0.17.0
-
-### Minor Changes
-
-- [Added] - new wrapNativeEvent function to standardise how we structure custom versions of native browser events such as 'change' ([#1173](https://github.com/justeattakeaway/pie/pull/1173)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-## 0.16.0
-
-### Minor Changes
-
-- [Removed] - unused LitElementMixin type as we do not need it anywhere ([#1145](https://github.com/justeattakeaway/pie/pull/1145)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-- [Changed] - Added `@justeattakeaway/pie-wrapper-react` as a devDependency as `build` now relies on the publish `add-react-wrapper` executable ([#1144](https://github.com/justeattakeaway/pie/pull/1144)) by [@siggerzz](https://github.com/siggerzz)
-
-- [Changed] - Use proper interface keyword for RTLmixin interface. Was using a class before which is incorrect. ([#1145](https://github.com/justeattakeaway/pie/pull/1145)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-## 0.15.0
-
-### Minor Changes
-
-- [Changed] - Updated LitElement imports where it is only used as a type to include the 'type' keyword (fixes a TS error in some consumers) ([#1143](https://github.com/justeattakeaway/pie/pull/1143)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-## 0.14.0
-
-### Minor Changes
-
-- [Added] - Form Control Mixin for adding native form association behaviour to web components ([#1142](https://github.com/justeattakeaway/pie/pull/1142)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-- [Changed] - Re organised test structure and added playwright testing ([#1142](https://github.com/justeattakeaway/pie/pull/1142)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-## 0.13.0
-
-### Minor Changes
-
-- [Added] - Build webc-core using vite ([#1037](https://github.com/justeattakeaway/pie/pull/1037)) by [@xander-marjoram](https://github.com/xander-marjoram)
-
-- [Changed] - Move lit dependency from storybook to webc-core ([#1037](https://github.com/justeattakeaway/pie/pull/1037)) by [@xander-marjoram](https://github.com/xander-marjoram)
-
-## 0.12.0
-
-### Minor Changes
-
-- [Changed] - `@validPropertyValues` and `@requiredProperty` decorators to support Lit 3. ([#1027](https://github.com/justeattakeaway/pie/pull/1027)) by [@raoufswe](https://github.com/raoufswe)
-
-## 0.12.0-next.0
-
-### Minor Changes
-
-- [Changed] - `@validPropertyValues` and `@requiredProperty` decorators to support Lit 3. ([#1025](https://github.com/justeattakeaway/pie/pull/1025)) by [@raoufswe](https://github.com/raoufswe)
-
-## 0.11.0
-
-### Minor Changes
-
-- [Added] - defineCustomElement helper function to protect against duplicate component registration errors ([#905](https://github.com/justeattakeaway/pie/pull/905)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-## 0.10.0
-
-### Minor Changes
-
-- [Fixed] - License removed from packages ([#869](https://github.com/justeattakeaway/pie/pull/869)) by [@kevinrodrigues](https://github.com/kevinrodrigues)
-
-## 0.9.1
-
-### Patch Changes
-
-- [Changed] - Align author field for all packages ([#852](https://github.com/justeattakeaway/pie/pull/852)) by [@xander-marjoram](https://github.com/xander-marjoram)
-
-## 0.9.0
-
-### Minor Changes
-
-- [Changed] - Rewrite RTL mixin to remove the dir property. The LitElement base class is a subclass of HTMLElement, so a Lit component inherits all of the standard HTMLElement properties and methods. This means that the dir property is already available on the component and we don't need to add it again. [Reference](https://lit.dev/docs/components/defining/#a-lit-component-is-an-html-element). During SSR, if no dir is provided, it will be inferred from the document.documentElement once it's instantiated on the client. ([#818](https://github.com/justeattakeaway/pie/pull/818)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-- [Changed] - Removed the DependantMap type and replaced all references with Lit's own PropertyValues helper. This provides exactly the same strongly typed map for a component's properties which makes our own type a little redundant. [Reference](https://lit.dev/docs/components/lifecycle/#typescript-types-for-changedproperties) ([#818](https://github.com/justeattakeaway/pie/pull/818)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-## 0.8.0
-
-### Minor Changes
-
-- [Changed] - Update RTL mixin to infer dir by default and document ([#745](https://github.com/justeattakeaway/pie/pull/745)) by [@raoufswe](https://github.com/raoufswe)
-
-## 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
-
-- [Removed] - Function for CSS loading in Safari visual tests due to fix on Percy side. ([#575](https://github.com/justeattakeaway/pie/pull/575)) by [@JoshuaNg2332](https://github.com/JoshuaNg2332)
-
-## 0.4.0
-
-### Minor Changes
-
-- [Added] - New function to fix CSS loading in Safari Percy tests ([#534](https://github.com/justeattakeaway/pie/pull/534)) by [@siggerzz](https://github.com/siggerzz)
-
-## 0.3.0
-
-### Minor Changes
-
-- [Added] - new WebComponentTestWrapper test component for adding labels to visual tests ([#519](https://github.com/justeattakeaway/pie/pull/519)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-- [Added] - a helper module to generate all prop variants of a given component ([#499](https://github.com/justeattakeaway/pie/pull/499)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-- [Added] - `required` property decorator ([#530](https://github.com/justeattakeaway/pie/pull/530)) by [@raoufswe](https://github.com/raoufswe)
-
-- [Changed] - Make pie-webc-core public ([#523](https://github.com/justeattakeaway/pie/pull/523)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-## 0.2.0
-
-### Minor Changes
-
-- [Added] - Property validation decorator ([#491](https://github.com/justeattakeaway/pie/pull/491)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-## 0.1.0
-
-### Minor Changes
-
-- [Added] - RTL Mixin and base project ([#478](https://github.com/justeattakeaway/pie/pull/478)) by [@jamieomaguire](https://github.com/jamieomaguire)

package/declaration.d.ts

@@ -1,9 +0,0 @@
-declare module '*.scss' {
-    const content: Record<string, string>;
-    export default content;
-}
-
-declare module '*.scss?inline' {
-    const content: Record<string, string>;
-    export default content;
-}

package/playwright-lit.config.ts

@@ -1,18 +0,0 @@
-import { defineConfig, devices } from '@sand4rt/experimental-ct-web';
-import { getPlaywrightConfig as getPlaywrightConfigOG } from '@justeattakeaway/pie-components-config';
-import type { PlaywrightTestConfig } from '@playwright/test';
-
-const getPlaywrightConfig = () : PlaywrightTestConfig => ({
-    ...getPlaywrightConfigOG(),
-    projects: [
-        {
-            name: 'component:chrome',
-            use: {
-                ...devices['Desktop Chrome'],
-            },
-            testMatch: ['**/test/**/*.browser.spec.ts'],
-        },
-    ],
-});
-
-export default defineConfig(getPlaywrightConfig());

package/src/test/decorators/required-property.spec.ts

@@ -1,73 +0,0 @@
-import {
-    beforeEach,
-    afterEach,
-    describe,
-    it,
-    expect,
-    vi,
-} from 'vitest';
-
-import { requiredProperty } from '../../decorators/required-property';
-
-describe('requiredProperty', () => {
-    let consoleErrorSpy: unknown;
-
-    beforeEach(() => {
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
-    });
-
-    afterEach(() => {
-        vi.restoreAllMocks();
-    });
-
-    // Mock class to test the decorator
-    class MockComponent {
-        @requiredProperty('mock-component')
-            color?: string | null;
-    }
-
-    it('should log an error if the property is undefined', () => {
-        // Arrange
-        const mockComponent = new MockComponent();
-
-        // Act
-        mockComponent.color = undefined;
-
-        // Assert
-        expect(consoleErrorSpy).toHaveBeenCalled();
-    });
-
-    it('should log an error if the property is null', () => {
-        // Arrange
-        const mockComponent = new MockComponent();
-
-        // Act
-        mockComponent.color = null;
-
-        // Assert
-        expect(consoleErrorSpy).toHaveBeenCalled();
-    });
-
-    it('should log an error if the property is an empty string', () => {
-        // Arrange
-        const mockComponent = new MockComponent();
-
-        // Act
-        mockComponent.color = '';
-
-        // Assert
-        expect(consoleErrorSpy).toHaveBeenCalled();
-    });
-
-    it('should not log an error if the property is a non-empty string', () => {
-        // Arrange
-        const mockComponent = new MockComponent();
-
-        // Act
-        mockComponent.color = 'blue';
-
-        // Assert
-        expect(consoleErrorSpy).not.toHaveBeenCalled();
-    });
-});

package/src/test/decorators/valid-property-values.spec.ts

@@ -1,68 +0,0 @@
-import {
-    beforeEach,
-    afterEach,
-    describe,
-    it,
-    expect,
-    vi,
-} from 'vitest';
-
-import { validPropertyValues } from '../../decorators/valid-property-values';
-
-describe('validPropertyValues', () => {
-    let consoleErrorSpy: unknown;
-
-    beforeEach(() => {
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
-    });
-
-    afterEach(() => {
-        vi.restoreAllMocks();
-    });
-
-    // Mock class to test the decorator
-    class MockComponent {
-        @validPropertyValues('mock-component', ['red', 'green', 'blue'], 'red')
-            color = 'red';
-    }
-
-    it('should allow value to be updated with a valid value', () => {
-        // Arrange
-        const mockComponent = new MockComponent();
-
-        // Act
-        mockComponent.color = 'green';
-
-        // Assert
-        expect(mockComponent.color).toBe('green');
-        expect(consoleErrorSpy).not.toHaveBeenCalled();
-    });
-
-    it('should fallback to the default value if an invalid value is assigned', () => {
-        // Arrange
-        const mockComponent = new MockComponent();
-
-        // Act
-        mockComponent.color = 'yellow';
-
-        // Assert
-        expect(mockComponent.color).toBe('red');
-        expect(consoleErrorSpy).toHaveBeenCalled();
-    });
-
-    it('should log an error message if an invalid value is assigned', () => {
-        // Arrange
-        const mockComponent = new MockComponent();
-
-        // Act
-        mockComponent.color = 'yellow';
-
-        // Assert
-        expect(consoleErrorSpy).toHaveBeenCalledWith(
-            '<mock-component> Invalid value "yellow" provided for property "color".',
-            'Must be one of: red | green | blue.',
-            'Falling back to default value: "red"',
-        );
-    });
-});

package/src/test/functions/defineCustomElement.spec.ts

@@ -1,81 +0,0 @@
-/* eslint-disable max-classes-per-file */
-import { LitElement } from 'lit';
-import {
-    vi, expect, it,
-} from 'vitest';
-import { defineCustomElement } from '../../functions/defineCustomElement';
-
-it('should call console.warn when a component is defined twice', () => {
-    // Arrange
-    class MockComponentA extends LitElement {}
-
-    const warnSpy = vi.spyOn(console, 'warn');
-    const errorSpy = vi.spyOn(console, 'error');
-
-    // Act
-    defineCustomElement('mock-component-a', MockComponentA);
-    defineCustomElement('mock-component-a', MockComponentA);
-
-    // Assert
-    const [[warning]] = warnSpy.mock.calls;
-
-    expect(warnSpy).toHaveBeenCalledOnce();
-    expect(warning).toMatch('PIE Web Component: "mock-component-a" has already been defined. Please ensure the component is only being defined once in your application.');
-    expect(errorSpy).not.toHaveBeenCalled();
-    expect(customElements.get('mock-component-a')).toBe(MockComponentA);
-});
-
-it('should define the component without warnings when called once', () => {
-    // Arrange
-    class MockComponentB extends LitElement {}
-
-    const warnSpy = vi.spyOn(console, 'warn');
-    const errorSpy = vi.spyOn(console, 'error');
-
-    // Act
-    defineCustomElement('mock-component-b', MockComponentB);
-
-    // Assert
-    expect(warnSpy).not.toHaveBeenCalled();
-    expect(errorSpy).not.toHaveBeenCalled();
-    expect(customElements.get('mock-component-b')).toBe(MockComponentB);
-});
-
-it('should warn when defining the same component name with a different class', () => {
-    // Arrange
-    class MockComponentC extends LitElement {}
-
-    class MockComponentD extends LitElement {}
-
-    const warnSpy = vi.spyOn(console, 'warn');
-    const errorSpy = vi.spyOn(console, 'error');
-
-    // Act
-    defineCustomElement('mock-component-c', MockComponentC);
-    defineCustomElement('mock-component-c', MockComponentD);
-
-    // Assert
-    const [[warning]] = warnSpy.mock.calls;
-
-    expect(warnSpy).toHaveBeenCalledOnce();
-    expect(warning).toMatch('PIE Web Component: "mock-component-c" has already been defined. Please ensure the component is only being defined once in your application.');
-    expect(errorSpy).not.toHaveBeenCalled();
-    expect(customElements.get('mock-component-c')).toBe(MockComponentC);
-});
-
-it('Should correctly accept component classes that use multiple levels of inheritance', () => {
-    // Arrange
-    class MockComponentE extends LitElement {}
-    class MockComponentF extends MockComponentE {}
-
-    const warnSpy = vi.spyOn(console, 'warn');
-    const errorSpy = vi.spyOn(console, 'error');
-
-    // Act
-    defineCustomElement('mock-component-f', MockComponentF);
-
-    // Assert
-    expect(warnSpy).not.toHaveBeenCalled();
-    expect(errorSpy).not.toHaveBeenCalled();
-    expect(customElements.get('mock-component-f')).toBe(MockComponentF);
-});

package/src/test/functions/dispatchCustomElement/MockComponent.ts

@@ -1,28 +0,0 @@
-import { LitElement, html } from 'lit';
-import { property } from 'lit/decorators.js';
-import { defineCustomElement } from '../../../functions/defineCustomElement.js';
-import { dispatchCustomEvent } from '../../../functions/dispatchCustomEvent.js';
-
-const componentSelector = 'dispatch-custom-event-mock';
-
-export class MockComponent extends LitElement {
-    @property({ type: String })
-    public eventName = 'pie-mock-event';
-
-    render () {
-        return html`
-            <button
-                @click="${() => dispatchCustomEvent(this, this.eventName)}"
-                data-test-id="dispatch-custom-event-mock">
-                Component with the event to dispatch
-            </button>`;
-    }
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        [componentSelector]: MockComponent;
-    }
-}
-
-defineCustomElement(componentSelector, MockComponent);

package/src/test/functions/dispatchCustomElement/dispatchCustomEvent.browser.spec.ts

@@ -1,45 +0,0 @@
-import { test, expect } from '@sand4rt/experimental-ct-web';
-import { MockComponent } from './MockComponent.ts';
-
-test.describe('dispatchCustomEvent function', () => {
-    test('should dispatch an event when clicked', async ({ mount, page }) => {
-        // Arrange
-        const events : Array<Event> = [];
-
-        await mount(MockComponent, {
-            on: {
-                'pie-mock-event': (event: Event) => events.push(event),
-            },
-        });
-
-        // Act
-        await page.locator('[data-test-id="dispatch-custom-event-mock"]').click();
-
-        // Assert
-        expect(events).toHaveLength(1);
-    });
-
-    test('should call console.warn when event name do not start with "pie-"', async ({ mount, page }) => {
-        // Arrange
-        let result = '';
-        const expected = 'A custom event name should start with `pie-`';
-
-        await mount(MockComponent, {
-            props: {
-                eventName: 'mock-event',
-            },
-        });
-
-        page.on('console', (msg) => {
-            if (msg.type() === 'warning') {
-                result = msg.text();
-            }
-        });
-
-        // Act
-        await page.locator('[data-test-id="dispatch-custom-event-mock"]').click();
-
-        // Assert
-        expect(result).toMatch(expected);
-    });
-});

package/src/test/mixins/formControlMixin/MockComponent.ts

@@ -1,19 +0,0 @@
-import { LitElement, html } from 'lit';
-import { FormControlMixin } from '../../../mixins/formControl/formControlMixin.ts';
-import { defineCustomElement } from '../../../functions/defineCustomElement.ts';
-
-const componentSelector = 'form-control-mixin-mock';
-
-export class MockComponent extends FormControlMixin(LitElement) {
-    render () {
-        return html`<div>Form Control Component</div>`;
-    }
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        [componentSelector]: MockComponent;
-    }
-}
-
-defineCustomElement(componentSelector, MockComponent);

package/src/test/mixins/formControlMixin/formControlMixin.browser.spec.ts

@@ -1,76 +0,0 @@
-import { test, expect } from '@sand4rt/experimental-ct-web';
-import { MockComponent } from './MockComponent.ts';
-
-test.describe('FormControlMixin', () => {
-    // IMPORTANT: Mounting and Unmounting the component before each test ensures that any tests that do not explicitly
-    // mount the component will still have it available in Playwright's cache (loaded and registered in the test browser)
-    test.beforeEach(async ({ mount }) => {
-        const component = await mount(MockComponent);
-        await component.unmount();
-    });
-
-    test.describe('form property', () => {
-        test.describe('when no form exists', () => {
-            test('should not have an associated form', async ({ page, mount }) => {
-                // Arrange
-                await mount(MockComponent);
-
-                const isFormAssociated = await page.evaluate(() => {
-                    const component = document.querySelector('form-control-mixin-mock');
-                    const form = component?.form;
-
-                    return !!form;
-                });
-
-                // Assert
-                expect(isFormAssociated).toBe(false);
-            });
-        });
-
-        test.describe('when inside of a form', () => {
-            test('should return the associated form', async ({ page }) => {
-                // Arrange
-                await page.setContent(`
-                    <form id="testForm" action="/foo" method="POST">
-                        <input type="text" id="username" name="username" required>
-                        <input type="password" id="password" name="password" required>
-                        <form-control-mixin-mock></form-control-mixin-mock>
-                    </form>
-                `);
-
-                const formId = await page.evaluate(() => {
-                    const component = document.querySelector('form-control-mixin-mock');
-                    const form = component?.form;
-
-                    return form?.id;
-                });
-
-                // Assert
-                expect(formId).toContain('testForm');
-            });
-        });
-
-        test.describe('when not inside of an existing form', () => {
-            test('should not have an associated form', async ({ page }) => {
-                // Arrange
-                await page.setContent(`
-                    <form id="siblingForm" action="/foo" method="POST">
-                        <input type="text" id="username" name="username" required>
-                        <input type="password" id="password" name="password" required>
-                    </form>
-                    <form-control-mixin-mock></form-control-mixin-mock>
-                `);
-
-                const isFormAssociated = await page.evaluate(() => {
-                    const component = document.querySelector('form-control-mixin-mock');
-                    const form = component?.form;
-
-                    return !!form;
-                });
-
-                // Assert
-                expect(isFormAssociated).toBe(false);
-            });
-        });
-    });
-});

package/src/test/mixins/rtlMixin/rtlMixin.client.spec.ts

@@ -1,92 +0,0 @@
-import {
-    LitElement, html, nothing,
-} from 'lit';
-
-import {
-    describe,
-    it,
-    expect,
-    vi,
-} from 'vitest';
-
-import { RtlMixin } from '../../../index';
-
-const scenarios = [
-    { dir: 'ltr', isRTL: false },
-    { dir: 'rtl', isRTL: true },
-    { dir: 'auto', isRTL: false }
-];
-
-vi.mock('lit', async () => ({
-    ...((await vi.importActual('lit')) as Array<unknown>),
-    isServer: false,
-}));
-
-describe('RtlMixin', () => {
-    const componentSelector = 'rtl-mixin-mock';
-
-    class MockComponent extends RtlMixin(LitElement) {
-        render () {
-            const { isRTL, dir } = this;
-            return html`<div dir="${dir || nothing}">${isRTL ? 'RTL Mode' : 'LTR Mode'}</div>`;
-        }
-    }
-
-    customElements.define(componentSelector, MockComponent);
-
-    function getMockInstance (): MockComponent {
-        return document.body.querySelector(componentSelector) as MockComponent;
-    }
-
-    describe('when running in the browser', () => {
-        describe('when the dir attribute is set via the component', () => {
-            scenarios.forEach(({ dir, isRTL }) => {
-                it(`should reflect ${isRTL ? 'RTL' : 'LTR'} if the component dir attribute is set to ${dir}`, () => {
-                    // Arrange
-                    document.body.innerHTML = `<rtl-mixin-mock dir="${dir}"></rtl-mixin-mock>`;
-                    const component = getMockInstance();
-
-                    // Assert
-                    expect(component.isRTL).toBe(isRTL);
-                });
-            });
-        });
-
-        describe('when the dir attribute is set via the root document and no attribute provided to the component', () => {
-            scenarios.forEach(({ dir, isRTL }) => {
-                it(`should reflect ${isRTL ? 'RTL' : 'LTR'} if the root document dir attribute is set to ${dir}`, () => {
-                    // Arrange
-                    document.documentElement.setAttribute('dir', dir);
-                    document.body.innerHTML = '<rtl-mixin-mock></rtl-mixin-mock>'; // component doesn't set dir
-                    const component = getMockInstance();
-
-                    // Assert
-                    expect(component.isRTL).toBe(isRTL);
-                });
-            });
-        });
-
-        it('should prefer the dir value of the component over the root document when both are set', () => {
-            // Arrange
-            const rootDir = 'ltr';
-            const componentDir = 'rtl';
-            document.documentElement.setAttribute('dir', rootDir);
-            document.body.innerHTML = `<rtl-mixin-mock dir="${componentDir}"></rtl-mixin-mock>`;
-            const component = getMockInstance();
-
-            // Assert
-            expect(component.isRTL).toBeTruthy();
-        });
-
-        it('should reflect the root document dir attribute if `auto` is provided to the component', () => {
-            // Arrange
-            const rootDir = 'ltr';
-            document.documentElement.setAttribute('dir', rootDir);
-            document.body.innerHTML = '<rtl-mixin-mock dir="auto"></rtl-mixin-mock>';
-            const component = getMockInstance();
-
-            // Assert
-            expect(component.isRTL).toBeFalsy();
-        });
-    });
-});

package/src/test/mixins/rtlMixin/rtlMixin.server.spec.ts

@@ -1,62 +0,0 @@
-import {
-    LitElement, html, nothing,
-} from 'lit';
-
-import {
-    describe,
-    it,
-    expect,
-    vi,
-} from 'vitest';
-
-import { RtlMixin } from '../../../index';
-
-const scenarios = [
-    { dir: 'ltr', isRTL: false },
-    { dir: 'rtl', isRTL: true },
-    { dir: 'auto', isRTL: false }
-];
-
-vi.mock('lit', async () => ({
-    ...((await vi.importActual('lit')) as Array<unknown>),
-    isServer: true,
-}));
-
-describe('RtlMixin', () => {
-    const componentSelector = 'rtl-mixin-mock';
-
-    class MockComponent extends RtlMixin(LitElement) {
-        render () {
-            const { isRTL, dir } = this;
-            return html`<div dir="${dir || nothing}">${isRTL ? 'RTL Mode' : 'LTR Mode'}</div>`;
-        }
-    }
-
-    customElements.define(componentSelector, MockComponent);
-
-    function getMockInstance (): MockComponent {
-        return document.body.querySelector(componentSelector) as MockComponent;
-    }
-
-    describe('when running on the server', () => {
-        it('should return false for isRTL when dir is not set', () => {
-            // Arrange
-            document.body.innerHTML = '<rtl-mixin-mock></rtl-mixin-mock>';
-            const component = getMockInstance();
-
-            // Assert
-            expect(component.isRTL).toBeFalsy();
-        });
-
-        scenarios.forEach(({ dir, isRTL }) => {
-            it(`should reflect ${isRTL ? 'RTL' : 'LTR'} if the component dir attribute is set to ${dir} when running on the server`, () => {
-                // Arrange
-                document.body.innerHTML = `<rtl-mixin-mock dir="${dir}"></rtl-mixin-mock>`;
-                const component = getMockInstance();
-
-                // Assert
-                expect(component.isRTL).toBe(isRTL);
-            });
-        });
-    });
-});

package/tsconfig.json

@@ -1,8 +0,0 @@
-{
-  "extends": "@justeattakeaway/pie-components-config/tsconfig.json",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "rootDir": ".",
-  },
-  "include": ["src/**/*.ts", "./declaration.d.ts", "test/**/*.ts", "index.ts", "playwright-lit.config.ts"],
-}

package/vite.config.js

@@ -1,32 +0,0 @@
-import { defineConfig } from 'vite';
-import { visualizer } from 'rollup-plugin-visualizer';
-
-export default defineConfig({
-    build: {
-        lib: {
-            entry: {
-                index: 'src/index.ts',
-            },
-            formats: ['es'],
-        },
-        rollupOptions: {
-            external: (id) => /^lit/.test(id),
-        },
-    },
-    test: {
-        dir: '.',
-        environment: 'jsdom',
-        globals: true,
-        exclude: [
-            '**/test/{accessibility,component,system,visual}/*.spec.{js,ts}',
-            '**/test/**/*.browser.spec.{js,ts}',
-            '**/node_modules/**/*'
-        ],
-    },
-    plugins: [
-        visualizer({
-            gzipSize: true,
-            brotliSize: true,
-        })
-    ],
-});