chore: add script to generate twenty-ui barrels before build (#4707)

Split from https://github.com/twentyhq/twenty/pull/4518

Part of #4766 

Adds a script to auto-generate twenty-ui exports in `index.ts` files.

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-ui/package.json

@@ -7,6 +7,6 @@
   "scripts": {
     "nx": "NX_DEFAULT_PROJECT=twenty-ui node ../../node_modules/nx/bin/nx.js",
     "start": "storybook dev -p 6006",
-    "build": "storybook build"
+    "build": "npx vite build"
   }
 }

packages/twenty-ui/project.json

@@ -5,10 +5,19 @@
   "projectType": "library",
   "targets": {
     "build": {
-      "executor": "@nx/vite:build",
+      "dependsOn": ["^build", "generateBarrels"]
-      "outputs": ["{options.outputPath}"],
+    },
+    "generateBarrels": {
+      "executor": "nx:run-commands",
+      "cache": true,
+      "inputs": [
+        "{projectRoot}/src/**/*.{ts,tsx}",
+        "!{projectRoot}/src/**/*.(spec|test).{ts,tsx}",
+        "!{projectRoot}/src/**/*.stories.{ts,tsx}"
+      ],
+      "outputs": ["{projectRoot}/src/index.ts", "{projectRoot}/src/*/index.ts"],
       "options": {
-        "outputPath": "packages/twenty-ui/dist"
+        "command": "npx ts-node --esm {projectRoot}/scripts/generateBarrels.ts"
       }
     },
     "lint": {

packages/twenty-ui/scripts/generateBarrels.ts

@@ -0,0 +1,90 @@
+import * as fs from 'fs';
+import path from 'path';
+
+const extensions = ['.ts', '.tsx'];
+const excludedExtensions = [
+  '.test.ts',
+  '.test.tsx',
+  '.spec.ts',
+  '.spec.tsx',
+  '.stories.ts',
+  '.stories.tsx',
+];
+const excludedDirectories = [
+  '__tests__',
+  '__mocks__',
+  '__stories__',
+  'internal',
+];
+const srcPath = path.resolve('packages/twenty-ui/src');
+
+const getSubDirectoryPaths = (directoryPath: string) =>
+  fs
+    .readdirSync(directoryPath)
+    .filter(
+      (fileOrDirectoryName) =>
+        !excludedDirectories.includes(fileOrDirectoryName) &&
+        fs
+          .statSync(path.join(directoryPath, fileOrDirectoryName))
+          .isDirectory(),
+    )
+    .map((subDirectoryName) => path.join(directoryPath, subDirectoryName));
+
+const getDirectoryPathsRecursive = (directoryPath: string): string[] => [
+  directoryPath,
+  ...getSubDirectoryPaths(directoryPath).flatMap(getDirectoryPathsRecursive),
+];
+
+const getFilesPaths = (directoryPath: string) =>
+  fs
+    .readdirSync(directoryPath)
+    .filter(
+      (filePath) =>
+        fs.statSync(path.join(directoryPath, filePath)).isFile() &&
+        !filePath.startsWith('index.') &&
+        extensions.some((extension) => filePath.endsWith(extension)) &&
+        excludedExtensions.every(
+          (excludedExtension) => !filePath.endsWith(excludedExtension),
+        ),
+    );
+
+const moduleDirectories = getSubDirectoryPaths(srcPath);
+
+moduleDirectories.forEach((moduleDirectoryPath) => {
+  const directoryPaths = getDirectoryPathsRecursive(moduleDirectoryPath);
+
+  const moduleExports = directoryPaths
+    .flatMap((directoryPath) => {
+      const directFilesPaths = getFilesPaths(directoryPath);
+
+      return directFilesPaths.map((filePath) => {
+        const fileName = filePath.split('.').slice(0, -1).join('.');
+        return `export * from './${path.relative(
+          moduleDirectoryPath,
+          path.join(directoryPath, fileName),
+        )}';`;
+      });
+    })
+    .sort((a, b) => a.localeCompare(b))
+    .join('\n');
+
+  fs.writeFileSync(
+    path.join(moduleDirectoryPath, 'index.ts'),
+    `${moduleExports}\n`,
+    'utf-8',
+  );
+});
+
+const mainBarrelExports = moduleDirectories
+  .map(
+    (moduleDirectoryPath) =>
+      `export * from './${path.relative(srcPath, moduleDirectoryPath)}';`,
+  )
+  .sort((a, b) => a.localeCompare(b))
+  .join('\n');
+
+fs.writeFileSync(
+  path.join(srcPath, 'index.ts'),
+  `${mainBarrelExports}\n`,
+  'utf-8',
+);

packages/twenty-ui/src/components/index.ts

@@ -1 +1 @@
-export { Pill } from './Pill/Pill';
+export * from './Pill/Pill';

packages/twenty-ui/src/index.ts

@@ -1,4 +1,5 @@
 export * from './components';
 export * from './display';
+export * from './testing';
 export * from './theme';
 export * from './utilities';

packages/twenty-ui/src/testing/index.ts

@@ -0,0 +1,2 @@
+export * from './ComponentStorybookLayout';
+export * from './decorators/ComponentDecorator';

packages/twenty-ui/src/theme/index.ts

@@ -1,5 +1,34 @@
-import { THEME_DARK } from './constants/ThemeDark';
+export * from './constants/AccentDark';
-import { THEME_LIGHT } from './constants/ThemeLight';
+export * from './constants/AccentLight';
-
+export * from './constants/Animation';
-export type ThemeType = typeof THEME_LIGHT;
+export * from './constants/BackgroundDark';
-export { THEME_DARK, THEME_LIGHT };
+export * from './constants/BackgroundLight';
+export * from './constants/Blur';
+export * from './constants/BorderCommon';
+export * from './constants/BorderDark';
+export * from './constants/BorderLight';
+export * from './constants/BoxShadowDark';
+export * from './constants/BoxShadowLight';
+export * from './constants/Colors';
+export * from './constants/FontCommon';
+export * from './constants/FontDark';
+export * from './constants/FontLight';
+export * from './constants/GrayScale';
+export * from './constants/HoverBackground';
+export * from './constants/Icon';
+export * from './constants/MainColorNames';
+export * from './constants/MainColors';
+export * from './constants/MobileViewport';
+export * from './constants/Modal';
+export * from './constants/OverlayBackground';
+export * from './constants/Rgba';
+export * from './constants/SecondaryColors';
+export * from './constants/TagDark';
+export * from './constants/TagLight';
+export * from './constants/Text';
+export * from './constants/TextInputStyle';
+export * from './constants/ThemeCommon';
+export * from './constants/ThemeDark';
+export * from './constants/ThemeLight';
+export * from './provider/ThemeProvider';
+export * from './types/ThemeType';

packages/twenty-ui/src/theme/types/ThemeType.ts

@@ -0,0 +1,3 @@
+import { THEME_LIGHT } from '../constants/ThemeLight';
+
+export type ThemeType = typeof THEME_LIGHT;

packages/twenty-ui/tsconfig.json

@@ -5,6 +5,7 @@
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "noImplicitOverride": true,
+    "esModuleInterop": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,