@justeattakeaway/pie-webc 0.0.0-snapshot-release-20240502093622 → 0.0.0-snapshot-release-20240513075515

package/README.md

@@ -8,17 +8,20 @@
   </a>
 </p>
 
+
 # Table of Contents
 
 1. [Introduction](#pie-webc)
 2. [Installation](#installation)
 3. [Contributing](#contributing)
 
+
 ## pie-webc
 
-`pie-webc` is a bundle that contains all PIE web components built using the Lit library.
+`pie-webc` is a wrapper package which contains **all** PIE web components.
+
+This means that after installing this package as a dependency, you can use as many PIE web components as you like, without bloating your application with unused code, or slowing it down with unnecessary component registrations in the browser.
 
-This package can be easily integrated into various frontend frameworks and customized through a set of properties.
 
 ## Installation
 
@@ -32,35 +35,43 @@ $ npm i @justeattakeaway/pie-webc
 $ yarn add @justeattakeaway/pie-webc
 ```
 
+
 ## Importing components
 
-Simply import each one individually using its specific entrypoint.
+Simply import each component individually using its specific entrypoint.
 
 ```js
 import '@justeattakeaway/pie-webc/components/button.js';
 import '@justeattakeaway/pie-webc/components/modal.js';
 ```
 
-And for React applications:
+Or for React applications:
 
-```jsx
+```js
 import { PieButton } from '@justeattakeaway/pie-webc/react/button.js';
 import { PieModal } from '@justeattakeaway/pie-webc/react/modal.js';
 ```
 
-
 For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).
 
-## Contributing
 
-Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).
+## For maintainers
 
-## How it works
-There is a command that can be run to add all pie components to this package. The command is:
+There is a command that can be run (from the root of the monorepo) which adds all PIE components to this package:
 
 ```npx add-components```
 
-When run, a script will find each pie component and create `js` and `d.ts` files them in both `components` and `react` directories. The script will also update the `exports` field in the `package.json` file to include the new components and add the latest version of each component to the `dependencies` field.
+This does the following:
+1. Loops through the (root) `packages/components` folder to find all of the PIE components, ignoring non-component folders, helper packages, and this package itself.
+2. Adds a `.js` and `.d.ts` file for each component to both the `components` and `react` directories (inside `pie-webc`).
+3. Adds entries for each component to the `exports` field in `pie-webc/package.json`.
+4. Adds entries for each component to the `dependencies` field in `pie-webc/package.json`, using the current (latest) version.
+
+**Generally, there should be no need to run this script.** The only time it should be run is when a new component is created using the [component generator](../../tools/generator-pie-component/README.md). The generator runs this script automatically after creating a new component.
+
+`changeset` should also make sure that the versions of components are up-to-date.
 
-Generally, there should be no need to run this script. The only time it should be run is when we generated a new component using the component generator. The generator will take care of running this script automatically, so it should be a rare occurrence that it needs to be run manually.
 
+## Contributing
+
+Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development).

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-webc",
   "description": "Component bundle containing all PIE web components",
-  "version": "0.0.0-snapshot-release-20240502093622",
+  "version": "0.0.0-snapshot-release-20240513075515",
   "type": "module",
   "files": [
     "**/*.js",
@@ -170,20 +170,21 @@
     }
   },
   "bin": {
-    "add-components": "./add-components.js"
+    "add-components": "./src/index.js"
   },
   "scripts": {
     "lint:scripts": "run -T eslint .",
     "lint:scripts:fix": "yarn lint:scripts --fix",
     "lint:style": "echo \"Error: no scss / css to lint\" && exit 0",
     "lint:style:fix": "yarn lint:style --fix",
-    "test": "echo \"Error: no test specified\" && exit 0",
+    "test": "run -T vitest run --config ./vite.config.js",
     "test:ci": "yarn test"
   },
   "author": "Just Eat Takeaway.com - Design System Team",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@justeattakeaway/pie-components-config": "0.16.0"
+    "@justeattakeaway/pie-components-config": "0.16.0",
+    "chalk": "5.3.0"
   },
   "dependencies": {
     "@justeattakeaway/pie-assistive-text": "0.3.6",
@@ -195,10 +196,10 @@
     "@justeattakeaway/pie-divider": "0.13.4",
     "@justeattakeaway/pie-form-label": "0.13.4",
     "@justeattakeaway/pie-icon-button": "0.28.5",
-    "@justeattakeaway/pie-input": "0.18.2",
+    "@justeattakeaway/pie-input": "0.19.0",
     "@justeattakeaway/pie-link": "0.17.4",
     "@justeattakeaway/pie-modal": "0.42.5",
-    "@justeattakeaway/pie-notification": "0.5.5",
+    "@justeattakeaway/pie-notification": "0.6.0",
     "@justeattakeaway/pie-spinner": "0.6.4",
     "@justeattakeaway/pie-switch": "0.29.4",
     "@justeattakeaway/pie-tag": "0.9.5"

package/src/componentService.js

@@ -0,0 +1,132 @@
+import chalk from 'chalk';
+
+export class ComponentService {
+    constructor (fs, path) {
+        this.fs = fs;
+        this.path = path;
+    }
+
+    getPathShortcuts (workingDir) {
+        const componentsSourceDir = this.path.resolve(workingDir, 'packages/components');
+        const pieWebcDir = this.path.join(componentsSourceDir, 'pie-webc');
+        const componentsTargetDir = this.path.join(pieWebcDir, 'components');
+        const reactTargetDir = this.path.join(pieWebcDir, 'react');
+        const pieWebcPackageJsonPath = this.path.join(pieWebcDir, 'package.json');
+
+        return {
+            componentsSourceDir,
+            componentsTargetDir,
+            reactTargetDir,
+            pieWebcPackageJsonPath,
+        };
+    }
+
+    ensureDirectoryExists (dir) {
+        if (!this.fs.existsSync(dir)) {
+            this.fs.mkdirSync(dir, { recursive: true });
+        }
+    }
+
+    readAndPreparePackageJson (packageJsonPath) {
+        const packageJsonData = this.fs.readFileSync(packageJsonPath, 'utf-8');
+        const packageJson = JSON.parse(packageJsonData);
+        packageJson.exports = packageJson.exports || {};
+        packageJson.dependencies = packageJson.dependencies || {};
+
+        return packageJson;
+    }
+
+    verifyRootDirectory (workingDir, expectedPackageName) {
+        const packageJsonPath = this.path.join(workingDir, 'package.json');
+
+        if (!this.fs.existsSync(packageJsonPath)) {
+            throw new Error(chalk.redBright('Please run this script from the root of the monorepo.'));
+        }
+
+        const packageJson = JSON.parse(this.fs.readFileSync(packageJsonPath, 'utf8'));
+
+        if (packageJson.name !== expectedPackageName) {
+            throw new Error(chalk.redBright('Incorrect package: Please run this script from the root of the monorepo.'));
+        }
+    }
+
+    createPackageJsonExports (componentName) {
+        const exports = {
+            [`./components/${componentName}.js`]: {
+                import: `./components/${componentName}.js`,
+                require: `./components/${componentName}.js`,
+                types: `./components/${componentName}.d.ts`,
+            },
+            [`./react/${componentName}.js`]: {
+                import: `./react/${componentName}.js`,
+                require: `./react/${componentName}.js`,
+                types: `./react/${componentName}.d.ts`,
+            },
+        };
+
+        return exports;
+    }
+
+    writeFilesForComponent (componentName, target) {
+        const jsFilePath = this.path.join(target.dir, `${componentName}.js`);
+        const tsFilePath = this.path.join(target.dir, `${componentName}.d.ts`);
+
+        const fileContent = `export * from '${target.exportPath}';\n`;
+        this.fs.writeFileSync(jsFilePath, fileContent);
+        this.fs.writeFileSync(tsFilePath, fileContent);
+    }
+
+    writePackageJson (path, content) {
+        this.fs.writeFileSync(path, `${JSON.stringify(content, null, 2)}\n`);
+    }
+
+    processComponents (workingDir, excludedFolders, packageJson) {
+        const newPackageJson = { ...packageJson };
+        const {
+            componentsSourceDir, componentsTargetDir, reactTargetDir,
+        } = this.getPathShortcuts(workingDir);
+
+        this.fs.readdirSync(componentsSourceDir).forEach((folder) => {
+            if (!folder.startsWith('pie-')) {
+                return;
+            }
+            if (excludedFolders.includes(folder)) {
+                console.info(chalk.yellow(`Excluding: ${chalk.white(folder)}`));
+                return;
+            }
+
+            const fullFolderPath = this.path.join(componentsSourceDir, folder);
+            const componentName = folder.replace('pie-', '');
+            const packageName = `@justeattakeaway/${folder}`;
+            const componentPackageJsonPath = this.path.join(fullFolderPath, 'package.json');
+            const componentPackageJsonData = this.fs.readFileSync(componentPackageJsonPath, 'utf-8');
+            const componentPackageJson = JSON.parse(componentPackageJsonData);
+
+            newPackageJson.dependencies[packageName] = componentPackageJson.version;
+
+            const targets = [
+                {
+                    dir: componentsTargetDir,
+                    exportPath: packageName,
+                },
+                {
+                    dir: reactTargetDir,
+                    exportPath: `${packageName}/dist/react.js`,
+                }
+            ];
+
+            console.info(chalk.gray(`Adding:    ${chalk.white(folder)}`));
+
+            targets.forEach((target) => {
+                this.writeFilesForComponent(componentName, target);
+            });
+
+            newPackageJson.exports = {
+                ...newPackageJson.exports,
+                ...this.createPackageJsonExports(componentName),
+            };
+        });
+
+        return newPackageJson;
+    }
+}

package/src/index.js

@@ -0,0 +1,27 @@
+#!/usr/bin/env node
+import fs from 'fs';
+import path from 'path';
+import chalk from 'chalk';
+
+import { ComponentService } from './componentService.js';
+
+const main = (fs, path) => {
+    const workingDir = process.cwd();
+    const componentService = new ComponentService(fs, path);
+    componentService.verifyRootDirectory(workingDir, 'pie-monorepo');
+
+    const { componentsTargetDir, reactTargetDir, pieWebcPackageJsonPath } = componentService.getPathShortcuts(workingDir);
+
+    componentService.ensureDirectoryExists(componentsTargetDir);
+    componentService.ensureDirectoryExists(reactTargetDir);
+
+    const pieWebcPackageJson = componentService.readAndPreparePackageJson(pieWebcPackageJsonPath);
+
+    const excludedFolders = ['pie-webc', 'pie-webc-core', 'pie-webc-testing'];
+    const updatedPackageJson = componentService.processComponents(workingDir, excludedFolders, pieWebcPackageJson);
+
+    componentService.writePackageJson(pieWebcPackageJsonPath, updatedPackageJson);
+    console.info(chalk.green('\nAll components added to pie-webc!'));
+};
+
+main(fs, path);

package/test/componentService.spec.js

@@ -0,0 +1,309 @@
+import { ComponentService } from '../src/componentService';
+
+describe('ComponentService', () => {
+    let fsMock;
+    let pathMock;
+    let componentService;
+
+    beforeEach(() => {
+        fsMock = {
+            existsSync: vi.fn(),
+            mkdirSync: vi.fn(),
+            readdirSync: vi.fn(),
+            readFileSync: vi.fn(),
+            writeFileSync: vi.fn(),
+        };
+
+        pathMock = {
+            join: vi.fn(),
+            resolve: vi.fn(),
+        };
+
+        pathMock.join.mockImplementation((...args) => args.join('/'));
+        pathMock.resolve.mockImplementation((...args) => args.join('/'));
+
+        // Suppress console output
+        vi.spyOn(console, 'info').mockImplementation(() => {}); // eslint-disable-line @typescript-eslint/no-empty-function
+    });
+
+    describe('ensureDirectoryExists', () => {
+        it('should create a directory if it does not exist', () => {
+            // Arrange
+            fsMock.existsSync.mockReturnValue(false);
+            componentService = new ComponentService(fsMock, pathMock);
+
+            // Act
+            componentService.ensureDirectoryExists('dir');
+
+            // Assert
+            expect(fsMock.mkdirSync).toHaveBeenCalledWith('dir', { recursive: true });
+        });
+
+        it('should not create a directory if it already exists', () => {
+            // Arrange
+            fsMock.existsSync.mockReturnValue(true);
+            componentService = new ComponentService(fsMock, pathMock);
+
+            // Act
+            componentService.ensureDirectoryExists('dir');
+
+            // Assert
+            expect(fsMock.mkdirSync).not.toHaveBeenCalled();
+        });
+    });
+
+    describe('readAndPreparePackageJson', () => {
+        it('should return the packageJson with empty exports and dependencies objects if they do not exist', () => {
+            // Arrange
+            fsMock.readFileSync.mockReturnValue('{}');
+            componentService = new ComponentService(fsMock, pathMock);
+
+            // Act
+            const result = componentService.readAndPreparePackageJson('packageJsonPath');
+
+            // Assert
+            expect(result.exports).toEqual({});
+            expect(result.dependencies).toEqual({});
+        });
+
+        it('should return the packageJson with existing exports and dependencies objects if they exist', () => {
+            // Arrange
+            fsMock.readFileSync.mockReturnValue('{"exports": {"exportKey": "exportValue"}, "dependencies": {"depKey": "depValue"}}');
+            componentService = new ComponentService(fsMock, pathMock);
+
+            // Act
+            const result = componentService.readAndPreparePackageJson('/path/to/package.json');
+
+            // Assert
+            expect(result.exports).toEqual({ exportKey: 'exportValue' });
+            expect(result.dependencies).toEqual({ depKey: 'depValue' });
+        });
+    });
+
+    describe('verifyRootDirectory', () => {
+        beforeEach(() => {
+            pathMock.join.mockReturnValue('');
+        });
+
+        it('should throw an error if there is no package.json file in the working directory', () => {
+            // Arrange
+            fsMock.existsSync.mockReturnValue(false);
+            componentService = new ComponentService(fsMock, pathMock);
+
+            // Act & Assert
+            const testFn = () => componentService.verifyRootDirectory('workingDir', 'expectedPackageName');
+            expect(testFn).toThrowError('Please run this script from the root of the monorepo.');
+        });
+
+        it('should throw an error if the package.json does not match the expected name', () => {
+            // Arrange
+            fsMock.existsSync.mockReturnValue(true);
+            fsMock.readFileSync.mockReturnValue('{"name": "wrongPackageName"}');
+            componentService = new ComponentService(fsMock, pathMock);
+
+            // Act & Assert
+            const testFn = () => componentService.verifyRootDirectory('workingDir', 'expectedPackageName');
+            expect(testFn).toThrowError('Incorrect package: Please run this script from the root of the monorepo.');
+        });
+
+        it('should not throw any errors if the package.json name matches the expected name', () => {
+            // Arrange
+            fsMock.existsSync.mockReturnValue(true);
+            fsMock.readFileSync.mockReturnValue('{"name": "expectedPackageName"}');
+            componentService = new ComponentService(fsMock, pathMock);
+
+            // Act & Assert
+            const testFn = () => componentService.verifyRootDirectory('workingDir', 'expectedPackageName');
+            expect(testFn).not.toThrow();
+        });
+    });
+
+    describe('createPackageJsonExports', () => {
+        it('should return an object with exports for the component', () => {
+            // Arrange
+            componentService = new ComponentService(fsMock, pathMock);
+
+            // Act
+            const result = componentService.createPackageJsonExports('component-name');
+
+            // Assert
+            expect(result).toEqual({
+                './components/component-name.js': {
+                    import: './components/component-name.js',
+                    require: './components/component-name.js',
+                    types: './components/component-name.d.ts',
+                },
+                './react/component-name.js': {
+                    import: './react/component-name.js',
+                    require: './react/component-name.js',
+                    types: './react/component-name.d.ts',
+                },
+            });
+        });
+    });
+
+    describe('writeFilesForComponent', () => {
+        it('should write the component files to the target directory', () => {
+            // Arrange
+            componentService = new ComponentService(fsMock, pathMock);
+            const target = {
+                dir: 'componentsTargetDir',
+                exportPath: 'packageName',
+            };
+
+            // Act
+            componentService.writeFilesForComponent('component-name', target);
+
+            // Assert
+            expect(fsMock.writeFileSync).toHaveBeenCalledWith('componentsTargetDir/component-name.js', "export * from 'packageName';\n");
+            expect(fsMock.writeFileSync).toHaveBeenCalledWith('componentsTargetDir/component-name.d.ts', "export * from 'packageName';\n");
+        });
+    });
+
+    describe('writePackageJson', () => {
+        it('should write the stringified content to the specified path', () => {
+            // Arrange
+            componentService = new ComponentService(fsMock, pathMock);
+            const packageJson = { name: 'package-name', version: '1.0.0' };
+
+            // Act
+            componentService.writePackageJson('path/to/package.json', packageJson);
+
+            // Assert
+            expect(fsMock.writeFileSync).toHaveBeenCalledWith('path/to/package.json', '{\n  "name": "package-name",\n  "version": "1.0.0"\n}\n');
+        });
+    });
+
+    describe('processComponents', () => {
+        let excludedFolders;
+        let workingDir;
+
+        beforeEach(() => {
+            excludedFolders = [];
+            workingDir = 'workingDir';
+
+            fsMock.readFileSync.mockReturnValue('{"version": "1.1.1"}'); // Component package.json
+            fsMock.readdirSync.mockReturnValue(['pie-component-name']); // Default, overridden by some tests
+        });
+
+        it('should ignore non-component folders', () => {
+            // Arrange
+            fsMock.readdirSync.mockReturnValue(['not-a-component']);
+            componentService = new ComponentService(fsMock, pathMock);
+
+            // Act
+            componentService.processComponents(workingDir, excludedFolders, {});
+
+            // Assert
+            expect(fsMock.writeFileSync).not.toHaveBeenCalled();
+        });
+
+        it('should ignore excluded folders', () => {
+            // Arrange
+            fsMock.readdirSync.mockReturnValue(['pie-excluded']);
+            componentService = new ComponentService(fsMock, pathMock);
+
+            excludedFolders = ['pie-excluded'];
+
+            // Act
+            componentService.processComponents(workingDir, excludedFolders, {});
+
+            // Assert
+            expect(fsMock.writeFileSync).not.toHaveBeenCalled();
+        });
+
+        it('should add components as dependencies to the package.json', () => {
+            // Arrange
+            componentService = new ComponentService(fsMock, pathMock);
+            const spy = vi.spyOn(componentService, 'writeFilesForComponent');
+
+            // Act
+            componentService.processComponents(workingDir, excludedFolders, { dependencies: {} });
+
+            // Assert
+            expect(spy).toHaveBeenCalledWith('component-name', {
+                dir: 'workingDir/packages/components/pie-webc/components',
+                exportPath: '@justeattakeaway/pie-component-name',
+            });
+
+            expect(spy).toHaveBeenCalledWith('component-name', {
+                dir: 'workingDir/packages/components/pie-webc/react',
+                exportPath: '@justeattakeaway/pie-component-name/dist/react.js',
+            });
+        });
+
+        it('should add exports for each component to the package.json', () => {
+            // Arrange
+            componentService = new ComponentService(fsMock, pathMock);
+            const rootPackageJson = { dependencies: {} };
+
+            // Act
+            const { exports } = componentService.processComponents(workingDir, excludedFolders, rootPackageJson);
+
+            // Assert
+            expect(Object.keys(exports)).toHaveLength(2);
+            expect(Object.keys(exports)).toContain('./components/component-name.js');
+            expect(Object.keys(exports)).toContain('./react/component-name.js');
+            // Content of the exports object is tested in createPackageJsonExports
+        });
+
+        it('should preserve existing exports in the package.json', () => {
+            // Arrange
+            componentService = new ComponentService(fsMock, pathMock);
+            const rootPackageJson = {
+                dependencies: {},
+                exports: {
+                    './components/existing-component.js': {},
+                    './react/existing-component.js': {},
+                },
+            };
+
+            // Act
+            const { exports } = componentService.processComponents(workingDir, excludedFolders, rootPackageJson);
+
+            // Assert
+            expect(Object.keys(exports)).toContain('./components/existing-component.js');
+            expect(Object.keys(exports)).toContain('./react/existing-component.js');
+            expect(Object.keys(exports)).toHaveLength(4);
+        });
+
+        it('should override existing exports in the package.json', () => {
+            // Arrange
+            componentService = new ComponentService(fsMock, pathMock);
+            const rootPackageJson = {
+                dependencies: {},
+                exports: {
+                    './components/component-name.js': {},
+                    './react/component-name.js': {},
+                },
+            };
+
+            // Act
+            const { exports } = componentService.processComponents(workingDir, excludedFolders, rootPackageJson);
+
+            // Assert
+            expect(Object.keys(exports)).toContain('./components/component-name.js');
+            expect(Object.keys(exports)).toContain('./react/component-name.js');
+            expect(Object.keys(exports)).toHaveLength(2);
+        });
+
+        it('should preserve existing dependencies in the package.json', () => {
+            // Arrange
+            fsMock.readdirSync.mockReturnValue(['pie-new-component']);
+
+            componentService = new ComponentService(fsMock, pathMock);
+            const rootPackageJson = {
+                dependencies: { '@justeattakeaway/pie-existing-component': '1.0.0' },
+            };
+
+            // Act
+            const { dependencies } = componentService.processComponents(workingDir, excludedFolders, rootPackageJson);
+
+            // Assert
+            expect(dependencies).toEqual({
+                '@justeattakeaway/pie-existing-component': '1.0.0',
+                '@justeattakeaway/pie-new-component': '1.1.1',
+            });
+        });
+    });
+});

package/vite.config.js

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+    test: {
+        dir: '.',
+        environment: 'node',
+        globals: true,
+        exclude: [
+            '**/node_modules/**/*'
+        ],
+    },
+});

package/add-components.js

@@ -1,90 +0,0 @@
-#!/usr/bin/env node
-import fs from 'fs';
-import path from 'path';
-
-const workingDir = process.cwd();
-
-// Function to check if the script is run from the expected directory
-function verifyRootDirectory (expectedPackageName) {
-    const packageJsonPath = path.join(workingDir, 'package.json');
-    if (!fs.existsSync(packageJsonPath)) {
-        console.error('Error: Please run this script from the root of the monorepo.');
-        process.exit(1);
-    }
-
-    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
-    if (packageJson.name !== expectedPackageName) {
-        console.error('Error: Please run this script from the root of the monorepo.');
-        process.exit(1);
-    }
-}
-
-// Ensure the script is run from the root of the monorepo
-verifyRootDirectory('pie-monorepo');
-
-const componentsSourceDir = path.resolve('packages/components');
-const pieWebcDir = path.join(componentsSourceDir, 'pie-webc');
-const componentsTargetDir = path.join(pieWebcDir, 'components');
-const reactTargetDir = path.join(pieWebcDir, 'react');
-const pieWebcPackageJsonPath = path.join(pieWebcDir, 'package.json');
-const excludedFolders = ['pie-webc', 'pie-webc-core', 'pie-webc-testing'];
-
-// Read and parse the package.json of pie-webc
-const pieWebcPackageJsonData = fs.readFileSync(pieWebcPackageJsonPath, 'utf-8');
-const pieWebcPackageJson = JSON.parse(pieWebcPackageJsonData);
-pieWebcPackageJson.exports = pieWebcPackageJson.exports || {};
-pieWebcPackageJson.dependencies = pieWebcPackageJson.dependencies || {};
-
-// Ensure target 'components' and 'react' directories exist
-if (!fs.existsSync(componentsTargetDir)) {
-    fs.mkdirSync(componentsTargetDir, { recursive: true });
-}
-
-if (!fs.existsSync(reactTargetDir)) {
-    fs.mkdirSync(reactTargetDir, { recursive: true });
-}
-
-// Loop over all pie component packages and add them to pie-webc
-fs.readdirSync(componentsSourceDir).forEach((folder) => {
-    if (folder.startsWith('pie-') && !excludedFolders.includes(folder)) {
-        const fullFolderPath = path.join(componentsSourceDir, folder);
-        const componentName = folder.replace('pie-', '');
-        const packageName = `@justeattakeaway/${folder}`;
-        const componentPackageJsonPath = path.join(fullFolderPath, 'package.json');
-        const componentPackageJsonData = fs.readFileSync(componentPackageJsonPath, 'utf-8');
-        const componentPackageJson = JSON.parse(componentPackageJsonData);
-
-        // Add the component package as a dependency to pie-webc
-        pieWebcPackageJson.dependencies[packageName] = componentPackageJson.version;
-
-        const targets = [
-            { dir: componentsTargetDir, type: 'components', exportPath: packageName },
-            { dir: reactTargetDir, type: 'react', exportPath: `${packageName}/dist/react.js` }
-        ];
-
-        // Create the js and d.ts files for the component in the target directories
-        targets.forEach((target) => {
-            const jsFilePath = path.join(target.dir, `${componentName}.js`);
-            const tsFilePath = path.join(target.dir, `${componentName}.d.ts`);
-
-            const fileContent = `export * from '${target.exportPath}';\n`;
-            fs.writeFileSync(jsFilePath, fileContent);
-            fs.writeFileSync(tsFilePath, fileContent);
-
-            if (!pieWebcPackageJson.exports) {
-                pieWebcPackageJson.exports = {};
-            }
-
-            // Update exports in the pie-webc package.json to include the component
-            pieWebcPackageJson.exports[`./${target.type}/${componentName}.js`] = {
-                import: `./${target.type}/${componentName}.js`,
-                require: `./${target.type}/${componentName}.js`,
-                types: `./${target.type}/${componentName}.d.ts`,
-            };
-        });
-    }
-});
-
-// Write updates back to the package.json
-fs.writeFileSync(pieWebcPackageJsonPath, `${JSON.stringify(pieWebcPackageJson, null, 2)}\n`);
-console.info('All components added to pie-webc');