Setup the foundation for Twenty UI library. (twentyhq#4423)

* feat: create a separate package for twenty-ui, extract the pill component with hard-coded theme values into it, and use the component inside twenty-front to complete the setup * feat: extract the light and the dark theme into twenty-ui and update the AppThemeProvider component inside twenty-front to consume themes from twenty-ui * fix: create a decorator inside preview.tsx to provide a default theme to storybook development server * fix: remove redundant type declarations and revert back the naming convention for theme declarations * fix: introduce a default value for pill label within the story for development server * fix: introduce the nx script into package.json for twenty-ui and resolve imports for theme type within the package * fix: remove the pill component from the twenty-front package along with the story for it * fix: revert the package versions to those before running the nx cli command for storybook init * feat: update readme to include details for building the ui library and starting the storybook development server * fix: include details about twenty-ui inside jest.config for twenty-front to complete front-jest job * - Added preview head for font - Added theme addon for light/dark switch - Added ComponentDecorator --------- Co-authored-by: Lucas Bordeau <[email protected]>
arnavsaxena17 · Mar 13, 2024 · 5262ece · 5262ece
1 parent eec6aec
commit 5262ece
Show file tree

Hide file tree

Showing 70 changed files with 2,601 additions and 146 deletions.
diff --git a/.gitignore b/.gitignore
@@ -19,4 +19,6 @@
 coverage
 .vercel
 
-**/**/logs/**
+**/**/logs/**
+
+storybook-static
diff --git a/nx.json b/nx.json
@@ -2,38 +2,26 @@
   "targetDefaults": {
     "build": {
       "cache": true,
-      "dependsOn": [
-        "^build"
-      ]
+      "dependsOn": ["^build"]
     },
     "start": {
       "cache": true,
-      "dependsOn": [
-        "^build"
-      ]
+      "dependsOn": ["^build"]
     },
     "lint": {
       "cache": true
     },
     "test": {
       "cache": true,
-      "dependsOn": [
-        "^build"
-      ]
+      "dependsOn": ["^build"]
     },
     "test:e2e": {
       "cache": true,
-      "dependsOn": [
-        "^build"
-      ]
+      "dependsOn": ["^build"]
     },
     "@nx/jest:jest": {
       "cache": true,
-      "inputs": [
-        "default",
-        "^default",
-        "{workspaceRoot}/jest.preset.js"
-      ],
+      "inputs": ["default", "^default", "{workspaceRoot}/jest.preset.js"],
       "options": {
         "passWithNoTests": true
       },
@@ -46,10 +34,7 @@
     },
     "@nx/vite:test": {
       "cache": true,
-      "inputs": [
-        "default",
-        "^default"
-      ]
+      "inputs": ["default", "^default"]
     }
   },
   "installation": {
@@ -67,5 +52,23 @@
         "unitTestRunner": "none"
       }
     }
+  },
+  "plugins": [
+    {
+      "plugin": "@nx/storybook/plugin",
+      "options": {
+        "buildStorybookTargetName": "build-storybook",
+        "serveStorybookTargetName": "storybook",
+        "testStorybookTargetName": "test-storybook",
+        "staticStorybookTargetName": "static-storybook"
+      }
+    }
+  ],
+  "tasksRunnerOptions": {
+    "default": {
+      "options": {
+        "cacheableOperations": ["build-storybook"]
+      }
+    }
   }
-}
+}
diff --git a/package.json b/package.json
@@ -51,6 +51,7 @@
     "@sentry/tracing": "^7.99.0",
     "@sniptt/guards": "^0.2.0",
     "@stoplight/elements": "^8.0.5",
+    "@storybook/icons": "^1.2.9",
     "@swc/jest": "^0.2.29",
     "@tabler/icons-react": "^2.44.0",
     "@types/facepaint": "^1.2.5",
@@ -192,22 +193,28 @@
     "@nx/jest": "17.2.8",
     "@nx/js": "17.2.8",
     "@nx/react": "17.2.8",
+    "@nx/storybook": "^17.2.8",
     "@nx/vite": "17.2.8",
+    "@nx/web": "17.2.8",
     "@storybook/addon-actions": "^7.6.3",
     "@storybook/addon-coverage": "^1.0.0",
     "@storybook/addon-essentials": "^7.6.7",
     "@storybook/addon-interactions": "^7.6.7",
     "@storybook/addon-links": "^7.6.7",
     "@storybook/addon-onboarding": "^1.0.10",
-    "@storybook/addon-themes": "^7.6.7",
+    "@storybook/addon-themes": "^8.0.0",
     "@storybook/blocks": "^7.6.3",
+    "@storybook/core-server": "7.6.3",
+    "@storybook/jest": "^0.2.3",
     "@storybook/react": "^7.6.3",
     "@storybook/react-vite": "^7.6.3",
     "@storybook/test": "^7.6.3",
     "@storybook/test-runner": "^0.16.0",
+    "@storybook/testing-library": "^0.2.2",
     "@stylistic/eslint-plugin": "^1.5.0",
     "@swc-node/register": "~1.6.7",
     "@swc/core": "~1.3.100",
+    "@swc/helpers": "~0.5.2",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "14.0.0",
     "@types/apollo-upload-client": "^17.0.2",
@@ -245,6 +252,7 @@
     "@typescript-eslint/parser": "^6.10.0",
     "@typescript-eslint/utils": "^6.9.1",
     "@vitejs/plugin-react-swc": "^3.5.0",
+    "@vitest/ui": "~0.34.6",
     "chromatic": "^6.18.0",
     "concurrently": "^8.2.2",
     "cross-var": "^1.1.0",
@@ -268,6 +276,7 @@
     "http-server": "^14.1.1",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
+    "jest-environment-node": "^29.4.1",
     "jest-fetch-mock": "^3.0.3",
     "jsdom": "~22.1.0",
     "msw": "^2.0.11",
@@ -290,7 +299,8 @@
     "vite": "^5.0.0",
     "vite-plugin-checker": "^0.6.2",
     "vite-plugin-dts": "~2.3.0",
-    "vite-plugin-svgr": "^4.2.0"
+    "vite-plugin-svgr": "^4.2.0",
+    "vitest": "~0.34.6"
   },
   "engines": {
     "node": "^18.17.1",
@@ -315,6 +325,7 @@
       "packages/twenty-docs",
       "packages/twenty-server",
       "packages/twenty-emails",
+      "packages/twenty-ui",
       "packages/twenty-utils",
       "packages/twenty-zapier",
       "packages/twenty-website",

diff --git a/packages/twenty-front/jest.config.ts b/packages/twenty-front/jest.config.ts
@@ -9,6 +9,7 @@ export default {
   moduleNameMapper: {
     '~/(.+)': '<rootDir>/src/$1',
     '@/(.+)': '<rootDir>/src/modules/$1',
+    'twenty-ui': '<rootDir>/../twenty-ui/src/index.ts',
     '@testing/(.+)': '<rootDir>/src/testing/$1',
     '\\.(jpg|jpeg|png|gif|webp|svg|svg\\?react)$':
       '<rootDir>/__mocks__/imageMock.js',

diff --git a/packages/twenty-front/src/modules/settings/components/SettingsNavigationCard.tsx b/packages/twenty-front/src/modules/settings/components/SettingsNavigationCard.tsx
@@ -1,10 +1,10 @@
 import { ReactNode } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { Pill } from 'twenty-ui';
 
 import { IconChevronRight } from '@/ui/display/icon';
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
-import { Pill } from '@/ui/display/pill/components/Pill';
 import { Card } from '@/ui/layout/card/components/Card';
 import { CardContent } from '@/ui/layout/card/components/CardContent';
 

diff --git a/packages/twenty-front/src/modules/ui/input/button/components/Button.tsx b/packages/twenty-front/src/modules/ui/input/button/components/Button.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { Pill } from 'twenty-ui';
 
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
-import { Pill } from '@/ui/display/pill/components/Pill';
 
 export type ButtonSize = 'medium' | 'small';
 export type ButtonPosition = 'standalone' | 'left' | 'middle' | 'right';

diff --git a/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx b/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { Pill } from 'twenty-ui';
 
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
-import { Pill } from '@/ui/display/pill/components/Pill';
 
 type TabProps = {
   id: string;

diff --git a/packages/twenty-front/src/modules/ui/theme/components/AppThemeProvider.tsx b/packages/twenty-front/src/modules/ui/theme/components/AppThemeProvider.tsx
@@ -1,7 +1,5 @@
 import { ThemeProvider } from '@emotion/react';
-
-import { THEME_DARK } from '@/ui/theme/constants/ThemeDark';
-import { THEME_LIGHT } from '@/ui/theme/constants/ThemeLight';
+import { THEME_DARK, THEME_LIGHT } from 'twenty-ui';
 
 import { useColorScheme } from '../hooks/useColorScheme';
 import { useSystemColorScheme } from '../hooks/useSystemColorScheme';

diff --git a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationComponent.tsx b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationComponent.tsx
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
+import { Pill } from 'twenty-ui';
 
 import { IconArrowUpRight, IconBolt } from '@/ui/display/icon';
-import { Pill } from '@/ui/display/pill/components/Pill';
 import { Button } from '@/ui/input/button/components/Button';
 import { SettingsIntegration } from '~/pages/settings/integrations/types/SettingsIntegration';
 

diff --git a/packages/twenty-front/tsconfig.json b/packages/twenty-front/tsconfig.json
@@ -10,7 +10,8 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/modules/*"],
-      "~/*": ["src/*"]
+      "~/*": ["src/*"],
+      "twenty-ui": ["../twenty-ui/src/index.ts"]
     },
 
     /* Bundler mode */
@@ -27,7 +28,7 @@
     "noUnusedLocals": false,
     "noUnusedParameters": false,
     "noFallthroughCasesInSwitch": true,
-    "forceConsistentCasingInFileNames": true
+    "forceConsistentCasingInFileNames": true,
   },
   "files": [],
   "include": [],

diff --git a/packages/twenty-front/tsup.ui.index.tsx b/packages/twenty-front/tsup.ui.index.tsx
@@ -15,7 +15,6 @@ export * from './src/modules/ui/display/checkmark/components/AnimatedCheckmark'
 export * from './src/modules/ui/display/chip/components/Chip'
 export * from './src/modules/ui/display/chip/components/EntityChip'
 export * from './src/modules/ui/display/icon/components/IconAddressBook'
-export * from './src/modules/ui/display/pill/components/Pill'
 export * from './src/modules/ui/display/tag/components/Tag'
 export * from './src/modules/ui/display/tooltip/AppTooltip'
 export * from './src/modules/ui/display/tooltip/OverflowingTextWithTooltip'

diff --git a/packages/twenty-ui/.eslintrc.json b/packages/twenty-ui/.eslintrc.json
@@ -0,0 +1,25 @@
+{
+  "extends": ["../../.eslintrc.js"],
+  "ignorePatterns": ["!**/*", "storybook-static"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": "error"
+      }
+    }
+  ]
+}
diff --git a/packages/twenty-ui/.gitignore b/packages/twenty-ui/.gitignore
@@ -0,0 +1 @@
+dist
diff --git a/packages/twenty-ui/.storybook/main.tsx b/packages/twenty-ui/.storybook/main.tsx
@@ -0,0 +1,24 @@
+import { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-themes',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {
+      builder: {
+        viteConfigPath: 'vite.config.ts',
+      },
+    },
+  },
+};
+
+export default config;
+
+// To customize your Vite configuration you can use the viteFinal field.
+// Check https://storybook.js.org/docs/react/builders/vite#configuration
+// and https://nx.dev/recipes/storybook/custom-builder-configs
diff --git a/packages/twenty-ui/.storybook/preview-head.html b/packages/twenty-ui/.storybook/preview-head.html
@@ -0,0 +1,34 @@
+<link
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
+  rel="stylesheet"
+/>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.7/iframeResizer.contentWindow.min.js"></script>
+
+<style type="text/css">
+body {
+  margin: 0;
+  font-family: 'Inter', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+html {
+  font-size: 13px;
+}
+.sbdocs-wrapper {
+  padding: 0 !important;
+}
+*::-webkit-scrollbar {
+    height: 4px;
+    width: 4px;
+  }
+
+  *::-webkit-scrollbar-corner {
+    background-color: transparent;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background-color: transparent;
+    border-radius: 2px;
+  }
+</style>
diff --git a/packages/twenty-ui/.storybook/preview.tsx b/packages/twenty-ui/.storybook/preview.tsx
@@ -0,0 +1,21 @@
+import { ThemeProvider } from '@emotion/react';
+import { withThemeFromJSXProvider } from '@storybook/addon-themes';
+import { Preview, ReactRenderer } from '@storybook/react';
+
+import { THEME_DARK, THEME_LIGHT } from '../src/theme/index';
+
+const preview: Preview = {
+  // TODO: Add toggle for darkTheme.
+  decorators: [
+    withThemeFromJSXProvider<ReactRenderer>({
+      themes: {
+        light: THEME_LIGHT,
+        dark: THEME_DARK,
+      },
+      defaultTheme: 'light',
+      Provider: ThemeProvider,
+    }),
+  ],
+};
+
+export default preview;
diff --git a/packages/twenty-ui/README.md b/packages/twenty-ui/README.md
@@ -0,0 +1,15 @@
+# Twenty UI
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `yarn nx build twenty-ui` to build the library.
+
+## Storybook Server
+
+Run `yarn nx start twenty-ui` to start the storybook development server on `localhost:6006`.
+
+## Running unit tests
+
+Run `yarn nx test twenty-ui` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/packages/twenty-ui/jest.config.ts b/packages/twenty-ui/jest.config.ts
@@ -0,0 +1,11 @@
+/* eslint-disable */
+export default {
+  displayName: 'twenty-ui',
+  preset: '../../jest.preset.js',
+  testEnvironment: 'node',
+  transform: {
+    '^.+\\.[tj]s$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],
+  },
+  moduleFileExtensions: ['ts', 'js', 'html'],
+  coverageDirectory: '../../coverage/packages/twenty-ui',
+};