@justeattakeaway/pie-webc 0.0.0-snapshot-release-20240614124349 → 0.0.0-snapshot-release-20240619133108

package/package.json

@@ -1,13 +1,194 @@
 {
   "name": "@justeattakeaway/pie-webc",
   "description": "Component bundle containing all PIE web components",
-  "version": "0.0.0-snapshot-release-20240614124349",
+  "version": "0.0.0-snapshot-release-20240619133108",
   "type": "module",
   "files": [
-    "components",
-    "react",
+    "**/*.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",
+      "types": "./components/button.d.ts"
+    },
+    "./react/button.js": {
+      "import": "./react/button.js",
+      "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/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",
+      "types": "./components/modal.d.ts"
+    },
+    "./react/modal.js": {
+      "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"
+    },
+    "./components/text-input.js": {
+      "import": "./components/text-input.js",
+      "require": "./components/text-input.js",
+      "types": "./components/text-input.d.ts"
+    },
+    "./react/text-input.js": {
+      "import": "./react/text-input.js",
+      "require": "./react/text-input.js",
+      "types": "./react/text-input.d.ts"
+    },
+    "./components/textarea.js": {
+      "import": "./components/textarea.js",
+      "require": "./components/textarea.js",
+      "types": "./components/textarea.d.ts"
+    },
+    "./react/textarea.js": {
+      "import": "./react/textarea.js",
+      "require": "./react/textarea.js",
+      "types": "./react/textarea.d.ts"
+    },
+    "./components/toast.js": {
+      "import": "./components/toast.js",
+      "require": "./components/toast.js",
+      "types": "./components/toast.d.ts"
+    },
+    "./react/toast.js": {
+      "import": "./react/toast.js",
+      "require": "./react/toast.js",
+      "types": "./react/toast.d.ts"
+    }
+  },
   "bin": {
     "add-components": "./src/index.js"
   },
@@ -27,29 +208,28 @@
   },
   "dependencies": {
     "@justeattakeaway/pie-assistive-text": "0.4.1",
-    "@justeattakeaway/pie-button": "0.47.6",
+    "@justeattakeaway/pie-button": "0.0.0-snapshot-release-20240619133108",
     "@justeattakeaway/pie-card": "0.19.5",
     "@justeattakeaway/pie-checkbox": "0.5.0",
-    "@justeattakeaway/pie-chip": "0.6.4",
-    "@justeattakeaway/pie-cookie-banner": "0.20.2",
+    "@justeattakeaway/pie-chip": "0.0.0-snapshot-release-20240619133108",
+    "@justeattakeaway/pie-cookie-banner": "0.0.0-snapshot-release-20240619133108",
     "@justeattakeaway/pie-divider": "0.13.5",
     "@justeattakeaway/pie-form-label": "0.13.5",
-    "@justeattakeaway/pie-icon-button": "0.28.7",
+    "@justeattakeaway/pie-icon-button": "0.0.0-snapshot-release-20240619133108",
     "@justeattakeaway/pie-link": "0.17.5",
-    "@justeattakeaway/pie-modal": "0.43.0",
-    "@justeattakeaway/pie-notification": "0.9.1",
-    "@justeattakeaway/pie-spinner": "0.6.5",
+    "@justeattakeaway/pie-modal": "0.0.0-snapshot-release-20240619133108",
+    "@justeattakeaway/pie-notification": "0.0.0-snapshot-release-20240619133108",
+    "@justeattakeaway/pie-spinner": "0.0.0-snapshot-release-20240619133108",
     "@justeattakeaway/pie-switch": "0.29.8",
     "@justeattakeaway/pie-tag": "0.9.6",
     "@justeattakeaway/pie-text-input": "0.22.2",
-    "@justeattakeaway/pie-textarea": "0.0.0",
-    "@justeattakeaway/pie-toast": "0.0.0"
+    "@justeattakeaway/pie-textarea": "0.1.0",
+    "@justeattakeaway/pie-toast": "0.1.0"
   },
   "volta": {
     "extends": "../../../package.json"
   },
   "sideEffects": [
-    "components/*.js",
-    "react/*.js"
+    "**/*.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/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/**/*'
+        ],
+    },
+});