Setup the foundation for Twenty UI library. (#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 <bordeau.lucas@gmail.com>

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",