@justeattakeaway/pie-webc 0.3.1 → 0.4.0

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,25 +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).
 
+
+## For maintainers
+
+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```
+
+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.
+
+
 ## 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).
+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/components/assistive-text.d.ts

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-assistive-text';

package/components/assistive-text.js

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-assistive-text';

package/components/card.d.ts

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-card';

package/components/card.js

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-card';

package/components/checkbox.d.ts

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-checkbox';

package/components/checkbox.js

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-checkbox';

package/components/chip.d.ts

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-chip';

package/components/chip.js

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-chip';

package/components/cookie-banner.d.ts

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-cookie-banner';

package/components/cookie-banner.js

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-cookie-banner';

package/components/divider.d.ts

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-divider';

package/components/divider.js

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-divider';

package/components/form-label.d.ts

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-form-label';

package/components/form-label.js

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-form-label';

package/components/icon-button.d.ts

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-icon-button';

package/components/icon-button.js

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-icon-button';

package/components/input.d.ts

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-input';

package/components/input.js

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-input';

package/components/link.d.ts

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-link';

package/components/link.js

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-link';

package/components/notification.d.ts

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-notification';

package/components/notification.js

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-notification';

package/components/spinner.d.ts

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-spinner';

package/components/spinner.js

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-spinner';

package/components/switch.d.ts

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-switch';

package/components/switch.js

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-switch';

package/components/tag.d.ts

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-tag';

package/components/tag.js

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-tag';

package/package.json

@@ -1,13 +1,23 @@
 {
   "name": "@justeattakeaway/pie-webc",
   "description": "Component bundle containing all PIE web components",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "type": "module",
   "files": [
     "**/*.js",
     "**/*.d.ts"
   ],
   "exports": {
+    "./components/assistive-text.js": {
+      "import": "./components/assistive-text.js",
+      "require": "./components/assistive-text.js",
+      "types": "./components/assistive-text.d.ts"
+    },
+    "./react/assistive-text.js": {
+      "import": "./react/assistive-text.js",
+      "require": "./react/assistive-text.js",
+      "types": "./react/assistive-text.d.ts"
+    },
     "./components/button.js": {
       "import": "./components/button.js",
       "require": "./components/button.js",
@@ -18,6 +28,96 @@
       "require": "./react/button.js",
       "types": "./react/button.d.ts"
     },
+    "./components/card.js": {
+      "import": "./components/card.js",
+      "require": "./components/card.js",
+      "types": "./components/card.d.ts"
+    },
+    "./react/card.js": {
+      "import": "./react/card.js",
+      "require": "./react/card.js",
+      "types": "./react/card.d.ts"
+    },
+    "./components/checkbox.js": {
+      "import": "./components/checkbox.js",
+      "require": "./components/checkbox.js",
+      "types": "./components/checkbox.d.ts"
+    },
+    "./react/checkbox.js": {
+      "import": "./react/checkbox.js",
+      "require": "./react/checkbox.js",
+      "types": "./react/checkbox.d.ts"
+    },
+    "./components/chip.js": {
+      "import": "./components/chip.js",
+      "require": "./components/chip.js",
+      "types": "./components/chip.d.ts"
+    },
+    "./react/chip.js": {
+      "import": "./react/chip.js",
+      "require": "./react/chip.js",
+      "types": "./react/chip.d.ts"
+    },
+    "./components/cookie-banner.js": {
+      "import": "./components/cookie-banner.js",
+      "require": "./components/cookie-banner.js",
+      "types": "./components/cookie-banner.d.ts"
+    },
+    "./react/cookie-banner.js": {
+      "import": "./react/cookie-banner.js",
+      "require": "./react/cookie-banner.js",
+      "types": "./react/cookie-banner.d.ts"
+    },
+    "./components/divider.js": {
+      "import": "./components/divider.js",
+      "require": "./components/divider.js",
+      "types": "./components/divider.d.ts"
+    },
+    "./react/divider.js": {
+      "import": "./react/divider.js",
+      "require": "./react/divider.js",
+      "types": "./react/divider.d.ts"
+    },
+    "./components/form-label.js": {
+      "import": "./components/form-label.js",
+      "require": "./components/form-label.js",
+      "types": "./components/form-label.d.ts"
+    },
+    "./react/form-label.js": {
+      "import": "./react/form-label.js",
+      "require": "./react/form-label.js",
+      "types": "./react/form-label.d.ts"
+    },
+    "./components/icon-button.js": {
+      "import": "./components/icon-button.js",
+      "require": "./components/icon-button.js",
+      "types": "./components/icon-button.d.ts"
+    },
+    "./react/icon-button.js": {
+      "import": "./react/icon-button.js",
+      "require": "./react/icon-button.js",
+      "types": "./react/icon-button.d.ts"
+    },
+    "./components/input.js": {
+      "import": "./components/input.js",
+      "require": "./components/input.js",
+      "types": "./components/input.d.ts"
+    },
+    "./react/input.js": {
+      "import": "./react/input.js",
+      "require": "./react/input.js",
+      "types": "./react/input.d.ts"
+    },
+    "./components/link.js": {
+      "import": "./components/link.js",
+      "require": "./components/link.js",
+      "types": "./components/link.d.ts"
+    },
+    "./react/link.js": {
+      "import": "./react/link.js",
+      "require": "./react/link.js",
+      "types": "./react/link.d.ts"
+    },
     "./components/modal.js": {
       "import": "./components/modal.js",
       "require": "./components/modal.js",
@@ -27,24 +127,82 @@
       "import": "./react/modal.js",
       "require": "./react/modal.js",
       "types": "./react/modal.d.ts"
+    },
+    "./components/notification.js": {
+      "import": "./components/notification.js",
+      "require": "./components/notification.js",
+      "types": "./components/notification.d.ts"
+    },
+    "./react/notification.js": {
+      "import": "./react/notification.js",
+      "require": "./react/notification.js",
+      "types": "./react/notification.d.ts"
+    },
+    "./components/spinner.js": {
+      "import": "./components/spinner.js",
+      "require": "./components/spinner.js",
+      "types": "./components/spinner.d.ts"
+    },
+    "./react/spinner.js": {
+      "import": "./react/spinner.js",
+      "require": "./react/spinner.js",
+      "types": "./react/spinner.d.ts"
+    },
+    "./components/switch.js": {
+      "import": "./components/switch.js",
+      "require": "./components/switch.js",
+      "types": "./components/switch.d.ts"
+    },
+    "./react/switch.js": {
+      "import": "./react/switch.js",
+      "require": "./react/switch.js",
+      "types": "./react/switch.d.ts"
+    },
+    "./components/tag.js": {
+      "import": "./components/tag.js",
+      "require": "./components/tag.js",
+      "types": "./components/tag.d.ts"
+    },
+    "./react/tag.js": {
+      "import": "./react/tag.js",
+      "require": "./react/tag.js",
+      "types": "./react/tag.d.ts"
     }
   },
+  "bin": {
+    "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-button": "0.47.3",
-    "@justeattakeaway/pie-modal": "0.42.4"
+    "@justeattakeaway/pie-assistive-text": "0.3.6",
+    "@justeattakeaway/pie-button": "0.47.4",
+    "@justeattakeaway/pie-card": "0.19.4",
+    "@justeattakeaway/pie-checkbox": "0.2.0",
+    "@justeattakeaway/pie-chip": "0.6.2",
+    "@justeattakeaway/pie-cookie-banner": "0.19.6",
+    "@justeattakeaway/pie-divider": "0.13.4",
+    "@justeattakeaway/pie-form-label": "0.13.4",
+    "@justeattakeaway/pie-icon-button": "0.28.5",
+    "@justeattakeaway/pie-input": "0.19.0",
+    "@justeattakeaway/pie-link": "0.17.4",
+    "@justeattakeaway/pie-modal": "0.42.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"
   },
   "volta": {
     "extends": "../../../package.json"

package/react/assistive-text.d.ts

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-assistive-text/dist/react.js';

package/react/assistive-text.js

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-assistive-text/dist/react.js';

package/react/card.d.ts

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-card/dist/react.js';

package/react/card.js

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-card/dist/react.js';

package/react/checkbox.d.ts

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-checkbox/dist/react.js';

package/react/checkbox.js

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-checkbox/dist/react.js';

package/react/chip.d.ts

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-chip/dist/react.js';

package/react/chip.js

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-chip/dist/react.js';

package/react/cookie-banner.d.ts

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-cookie-banner/dist/react.js';

package/react/cookie-banner.js

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-cookie-banner/dist/react.js';

package/react/divider.d.ts

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-divider/dist/react.js';

package/react/divider.js

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-divider/dist/react.js';

package/react/form-label.d.ts

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-form-label/dist/react.js';

package/react/form-label.js

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-form-label/dist/react.js';

package/react/icon-button.d.ts

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-icon-button/dist/react.js';

package/react/icon-button.js

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-icon-button/dist/react.js';

package/react/input.d.ts

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-input/dist/react.js';

package/react/input.js

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-input/dist/react.js';

package/react/link.d.ts

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-link/dist/react.js';

package/react/link.js

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-link/dist/react.js';

package/react/notification.d.ts

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-notification/dist/react.js';

package/react/notification.js

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-notification/dist/react.js';

package/react/spinner.d.ts

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-spinner/dist/react.js';

package/react/spinner.js

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-spinner/dist/react.js';

package/react/switch.d.ts

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-switch/dist/react.js';

package/react/switch.js

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-switch/dist/react.js';

package/react/tag.d.ts

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-tag/dist/react.js';

package/react/tag.js

@@ -0,0 +1 @@
+export * from '@justeattakeaway/pie-tag/dist/react.js';

package/src/componentService.js

@@ -0,0 +1,182 @@
+import chalk from 'chalk';
+
+export class ComponentService {
+    constructor (fs, path) {
+        this.fs = fs;
+        this.path = path;
+    }
+
+    /**
+     * Helper function to get some frequently-used paths for the script.
+     * @param {string} workingDir - The current working directory.
+     * @returns {Object} - An object containing useful paths for the script.
+     */
+    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,
+        };
+    }
+
+    /**
+     * Checks if a directory exists and creates it if it doesn't.
+     * @param {string} dir - The directory to create if it doesn't exist.
+     */
+    ensureDirectoryExists (dir) {
+        if (!this.fs.existsSync(dir)) {
+            this.fs.mkdirSync(dir, { recursive: true });
+        }
+    }
+
+    /**
+     * Reads and returns the package.json file at the given path,
+     * making sure that the `exports` and `dependencies` fields are present.
+     * @param {string} packageJsonPath - Path to the package.json file, including the file name.
+     * @returns - The prepared package.json object.
+     */
+    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;
+    }
+
+    /**
+     * Verifies that the script is run from the root of the monorepo
+     * and that the package name matches the expected package name.
+     * @param {string} workingDir - The working directory from which the script is being run.
+     * @param {*} expectedPackageName - The expected package name for the directory the script should be run from.
+     */
+    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.'));
+        }
+    }
+
+    /**
+     * Creates the exports for a component to be added to the pie-webc package.json.
+     * @param {string} componentName - The name of the component to create exports for, omitting the `'pie-'` prefix.
+     * @returns {Object} - An object containing the exports for the component.
+     */
+    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;
+    }
+
+    /**
+     * Writes a `.js` and `.d.ts` file for the given component to the target directory.
+     * @param {*} componentName - The name of the component to write files for, omitting the `'pie-'` prefix.
+     * @param {*} target - An object containing the target directory and the export path.
+     * @param {*} target.dir - The target directory to write the files to.
+     * Either `'components'` or `'react'`.
+     * @param {*} target.exportPath - The export path for the component.
+     * For react components, this should be the path to the react.js file including the package name, e.g., `'@justeattakeaway/pie-button/dist/react.js'`.
+     * Otherwise, this should be the package name, e.g., `'@justeattakeaway/pie-button'`.
+     */
+    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);
+    }
+
+    /**
+     * Writes the package.json file to the given path.
+     * @param {string} path - The path to write the package.json file to.
+     * @param {Object} content - The content to write to the package.json file.
+     */
+    writePackageJson (path, content) {
+        this.fs.writeFileSync(path, `${JSON.stringify(content, null, 2)}\n`);
+    }
+
+    /**
+     * Processes all components in the components directory, adding them to the pie-webc package.
+     * @param {*} workingDir - The working directory from which the script is run.
+     * @param {*} excludedFolders - An array of folder names to exclude from the processing.
+     * By default, any folder starting with 'pie-' will be processed, unless excluded.
+     * @param {*} packageJson - The package.json object to update with the new dependencies and exports.
+     * @returns - The updated package.json object.
+     */
+    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);
+
+            // Add the component to dependencies
+            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,33 @@
+#!/usr/bin/env node
+import fs from 'fs';
+import path from 'path';
+import chalk from 'chalk';
+
+import { ComponentService } from './componentService.js';
+
+/**
+ * The main entry point of the script which adds all components to the pie-webc package.
+ * @param {*} fs - Node.js file system module
+ * @param {*} path - Node.js path module
+ */
+const addComponents = (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!'));
+};
+
+// Run the script
+addComponents(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/**/*'
+        ],
+    },
+});