chore: include react components in twenty-ui test config (#4709)

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

Part of https://github.com/twentyhq/twenty/issues/4766

- Re-generates some of the twenty-ui test and storybook config with Nx
- Includes tsx files in twenty-ui tests and compiles them with swc

---------

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

nx.json

@@ -39,6 +39,24 @@
         "{workspaceRoot}/.eslintrc.js",
         "{workspaceRoot}/tools/eslint-rules/**/*"
       ]
+    },
+    "@nx/vite:test": {
+      "cache": true,
+      "inputs": ["default", "^default"]
+    },
+    "@nx/vite:build": {
+      "cache": true,
+      "dependsOn": ["^build"],
+      "inputs": ["default", "^default"]
+    },
+    "storybook:build": {
+      "cache": true,
+      "inputs": [
+        "default",
+        "^default",
+        "{projectRoot}/.storybook/**/*",
+        "{projectRoot}/tsconfig.storybook.json"
+      ]
     }
   },
   "installation": {
@@ -54,21 +72,10 @@
       }
     }
   },
-  "plugins": [
-    {
-      "plugin": "@nx/storybook/plugin",
-      "options": {
-        "buildStorybookTargetName": "build-storybook",
-        "serveStorybookTargetName": "storybook",
-        "testStorybookTargetName": "test-storybook",
-        "staticStorybookTargetName": "static-storybook"
-      }
-    }
-  ],
   "tasksRunnerOptions": {
     "default": {
       "options": {
-        "cacheableOperations": ["build-storybook"]
+        "cacheableOperations": ["storybook:build"]
       }
     }
   },

packages/twenty-ui/.storybook/main.ts

@@ -3,17 +3,18 @@ import { StorybookConfig } from '@storybook/react-vite';
 const config: StorybookConfig = {
   stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
   addons: [
+    '@storybook/addon-links',
     '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
     '@storybook/addon-interactions',
+    '@storybook/addon-coverage',
     '@storybook/addon-themes',
+    'storybook-addon-cookie',
+    'storybook-addon-pseudo-states',
   ],
   framework: {
     name: '@storybook/react-vite',
-    options: {
+    options: {},
-      builder: {
-        viteConfigPath: 'vite.config.ts',
-      },
-    },
   },
 };
 

packages/twenty-ui/jest.config.ts

@@ -1,11 +1,23 @@
-/* eslint-disable */
+import { JestConfigWithTsJest } from 'ts-jest';
-export default {
+
+const jestConfig: JestConfigWithTsJest = {
   displayName: 'twenty-ui',
   preset: '../../jest.preset.js',
-  testEnvironment: 'node',
+  setupFilesAfterEnv: ['./setupTests.ts'],
+  transformIgnorePatterns: ['../../node_modules/'],
   transform: {
-    '^.+\\.[tj]s$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],
+    '^.+\\.[tj]sx?$': [
+      '@swc/jest',
+      {
+        jsc: {
+          parser: { syntax: 'typescript', tsx: true },
+          transform: { react: { runtime: 'automatic' } },
         },
-  moduleFileExtensions: ['ts', 'js', 'html'],
+      },
+    ],
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   coverageDirectory: '../../coverage/packages/twenty-ui',
 };
+
+export default jestConfig;

packages/twenty-ui/project.json

@@ -17,6 +17,7 @@
       ],
       "outputs": ["{projectRoot}/src/index.ts", "{projectRoot}/src/*/index.ts"],
       "options": {
+        "outputPath": "{projectRoot}/dist",
         "command": "npx ts-node --esm {projectRoot}/scripts/generateBarrels.ts"
       }
     },
@@ -37,9 +38,38 @@
     },
     "test": {
       "executor": "@nx/jest:jest",
-      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "outputs": ["{projectRoot}/coverage"],
       "options": {
-        "jestConfig": "packages/twenty-ui/jest.config.ts"
+        "jestConfig": "{projectRoot}/jest.config.ts"
+      }
+    },
+    "storybook:dev": {
+      "executor": "@nx/storybook:storybook",
+      "options": {
+        "port": 6007,
+        "configDir": "{projectRoot}/.storybook"
+      },
+      "configurations": {
+        "ci": { "quiet": true }
+      }
+    },
+    "storybook:build": {
+      "executor": "@nx/storybook:build",
+      "outputs": ["{options.outputDir}"],
+      "options": {
+        "outputDir": "{projectRoot}/storybook-static",
+        "configDir": "{projectRoot}/.storybook"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "storybook:test": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "test-storybook -c {projectRoot}/.storybook --url=http://localhost:6007"
       }
     }
   },

packages/twenty-ui/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

packages/twenty-ui/src/components/Pill/__stories__/Pill.stories.ts

@@ -1,20 +1,18 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { ComponentDecorator } from '../../testing/decorators/ComponentDecorator';
+import { ComponentDecorator } from '../../../testing/decorators/ComponentDecorator';
-
+import { Pill } from '../Pill';
-import { Pill } from './Pill';
 
 const meta: Meta<typeof Pill> = {
-  title: 'UI/Display/Pill/Pill',
+  title: 'UI/Display/Pill',
   component: Pill,
+  decorators: [ComponentDecorator],
+  args: {
+    label: 'Soon',
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof Pill>;
 
-export const Default: Story = {
+export const Default: Story = {};
-  args: {
-    label: 'Soon',
-  },
-  decorators: [ComponentDecorator],
-};

packages/twenty-ui/src/nx-react.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="@nx/react/typings/cssmodule.d.ts" />
+/// <reference types="@nx/react/typings/image.d.ts" />
+/// <reference types="@nx/react/typings/styled-jsx.d.ts" />

packages/twenty-ui/src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />

packages/twenty-ui/tsconfig.json

@@ -9,7 +9,7 @@
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
-    "jsx": "react"
+    "jsx": "react-jsx"
   },
   "files": [],
   "include": [],

packages/twenty-ui/tsconfig.spec.json

@@ -9,7 +9,9 @@
     "jest.config.ts",
     "src/**/*.d.ts",
     "src/**/*.spec.ts",
+    "src/**/*.spec.tsx",
     "src/**/*.test.ts",
+    "src/**/*.test.tsx",
     "vite.config.ts"
   ]
 }

packages/twenty-ui/vite.config.ts

@@ -1,5 +1,6 @@
 /// <reference types='vitest' />
 import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import react from '@vitejs/plugin-react-swc';
 import * as path from 'path';
 import { defineConfig } from 'vite';
 import dts from 'vite-plugin-dts';
@@ -9,6 +10,7 @@ export default defineConfig({
   cacheDir: '../../node_modules/.vite/packages/twenty-ui',
 
   plugins: [
+    react(),
     nxViteTsPaths(),
     dts({
       entryRoot: 'src',