chore: add config

.github/workflows/actions/task-cache/action.yaml

@@ -24,8 +24,6 @@ runs:
         path: |
           .cache
           .nx/cache
-          node_modules/.cache
-          packages/*/node_modules/.cache
         key: tasks-cache-${{ github.ref_name }}-${{ inputs.tag }}-${{ steps.tasks-key.outputs.key }}${{ inputs.suffix }}-${{ github.sha }}
         restore-keys: |
           tasks-cache-${{ github.ref_name }}-${{ inputs.tag }}-${{ steps.tasks-key.outputs.key }}${{ inputs.suffix }}-

.github/workflows/ci-chrome-extension.yaml

@@ -29,4 +29,4 @@ jobs:
       - name: Install dependencies
         uses: ./.github/workflows/actions/yarn-install
       - name: Chrome Extension / Run build
-        run: npx nx build twenty-chrome-extension
+        run: npx nx build twenty-chrome-extension

.github/workflows/ci-front.yaml

@@ -94,25 +94,28 @@ jobs:
     strategy:
       matrix:
         task: [lint, typecheck, test]
-    env:
-      REACT_APP_SERVER_BASE_URL: http://localhost:3000
     steps:
       - name: Cancel Previous Runs
         uses: styfle/cancel-workflow-action@0.11.0
         with:
           access_token: ${{ github.token }}
-      - name: Fetch local actions and base branch history
+      - name: Fetch custom Github Actions and base branch history
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - name: Install dependencies
         uses: ./.github/workflows/actions/yarn-install
-      - name: Front / Restore Task Cache
+      - name: Front / Restore ${{ matrix.task }} task cache
         uses: ./.github/workflows/actions/task-cache
         with:
           tag: scope:frontend
           tasks: ${{ matrix.task }}
-      - name: Front / Run task
+      - name: Reset .env
+        uses: ./.github/workflows/actions/nx-affected
+        with:
+          tag: scope:frontend
+          tasks: reset:env
+      - name: Run ${{ matrix.task }} task
         uses: ./.github/workflows/actions/nx-affected
         with:
           tag: scope:frontend

.github/workflows/ci-server.yaml

@@ -28,7 +28,7 @@ jobs:
         ports:
           - 5432:5432
     steps:
-      - name: Fetch local actions and base branch history
+      - name: Fetch custom Github Actions and base branch history
         uses: actions/checkout@v4
         with:
           fetch-depth: 0

.github/workflows/ci-storybook.yaml

@@ -0,0 +1,92 @@
+name: CI Storybook
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - 'package.json'
+      - 'packages/twenty-front/**'
+      - 'packages/twenty-ui/**'
+  pull_request:
+    paths:
+      - 'package.json'
+      - 'packages/twenty-front/**'
+      - 'packages/twenty-ui/**'
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  front-sb-build:
+    runs-on: ubuntu-latest
+    env:
+      REACT_APP_SERVER_BASE_URL: http://localhost:3000
+    steps:
+      - name: Cancel Previous Runs
+        uses: styfle/cancel-workflow-action@0.11.0
+        with:
+          access_token: ${{ github.token }}
+      - name: Fetch local actions
+        uses: actions/checkout@v4
+      - name: Install dependencies
+        uses: ./.github/workflows/actions/yarn-install
+      - name: Front / Restore Storybook Task Cache
+        uses: ./.github/workflows/actions/task-cache
+        with:
+          tag: scope:frontend
+          tasks: storybook:build
+      - name: Front / Write .env
+        run: npx nx reset:env twenty-front
+      - name: Front / Build storybook
+        run: npx nx storybook:build twenty-front
+  front-sb-test:
+    runs-on: ci-8-cores
+    needs: front-sb-build
+    strategy:
+      matrix:
+        storybook_scope: [pages, modules]
+    env:
+      REACT_APP_SERVER_BASE_URL: http://localhost:3000
+    steps:
+      - name: Fetch local actions
+        uses: actions/checkout@v4
+      - name: Install dependencies
+        uses: ./.github/workflows/actions/yarn-install
+      - name: Install Playwright
+        run: cd packages/twenty-front && npx playwright install
+      - name: Front / Restore Storybook Task Cache
+        uses: ./.github/workflows/actions/task-cache
+        with:
+          tag: scope:frontend
+          tasks: storybook:build
+      - name: Front / Write .env
+        run: npx nx reset:env twenty-front
+      - name: Run storybook tests
+        run: npx nx storybook:static:test twenty-front --configuration=${{ matrix.storybook_scope }}
+  front-chromatic-deployment:
+    if: contains(github.event.pull_request.labels.*.name, 'run-chromatic') || github.event_name == 'push'
+    needs: front-sb-build
+    runs-on: ubuntu-latest
+    env:
+      REACT_APP_SERVER_BASE_URL: http://127.0.0.1:3000
+      CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Install dependencies
+        uses: ./.github/workflows/actions/yarn-install
+      - name: Front / Restore Storybook Task Cache
+        uses: ./.github/workflows/actions/task-cache
+        with:
+          tag: scope:frontend
+          tasks: storybook:build
+      - name: Front / Write .env
+        run: |
+          cd packages/twenty-front
+          touch .env
+          echo "REACT_APP_SERVER_BASE_URL: $REACT_APP_SERVER_BASE_URL" >> .env
+      - name: Publish to Chromatic
+        run: |
+          npx nx run twenty-front:chromatic:ci
+  

package.json

@@ -187,6 +187,7 @@
   "devDependencies": {
     "@babel/core": "^7.14.5",
     "@babel/preset-react": "^7.14.5",
+    "@crxjs/vite-plugin": "^1.0.14",
     "@docusaurus/module-type-aliases": "^3.1.0",
     "@docusaurus/tsconfig": "3.1.0",
     "@graphql-codegen/cli": "^3.3.1",
@@ -232,6 +233,7 @@
     "@types/bcrypt": "^5.0.0",
     "@types/better-sqlite3": "^7.6.8",
     "@types/bytes": "^3.1.1",
+    "@types/chrome": "^0.0.267",
     "@types/crypto-js": "^4.2.2",
     "@types/deep-equal": "^1.0.1",
     "@types/express": "^4.17.13",

packages/twenty-chrome-extension/.eslintrc.cjs

@@ -1,6 +1,6 @@
 module.exports = {
   extends: ['../../.eslintrc.cjs', '../../.eslintrc.react.cjs'],
-  ignorePatterns: ['!**/*', 'node_modules', 'dist', 'src/generated/*.tsx'],
+  ignorePatterns: ['!**/*', '**/generated*/*'],
   overrides: [
     {
       files: ['*.ts', '*.tsx'],

packages/twenty-chrome-extension/.prettierignore

@@ -0,0 +1 @@
+src/generated

packages/twenty-chrome-extension/package.json

@@ -5,15 +5,6 @@
   "version": "0.0.1",
   "type": "module",
   "scripts": {
-    "lint": "eslint . --report-unused-disable-directives --max-warnings 0 --config .eslintrc.cjs",
-    "graphql:generate": "graphql-codegen",
-    "fmt": "prettier --check \"src/**/*.ts\" \"src/**/*.tsx\"",
-    "fmt:fix": "prettier --cache --write \"src/**/*.ts\" \"src/**/*.tsx\""
-  },
-  "dependencies": {
-    "@types/chrome": "^0.0.256"
-  },
-  "devDependencies": {
-    "@crxjs/vite-plugin": "^1.0.14"
+    "build": "npx vite build"
   }
 }

packages/twenty-chrome-extension/project.json

@@ -2,20 +2,67 @@
   "name": "twenty-chrome-extension",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
+  "tags": ["scope:frontend"],
   "targets": {
     "build": {
-      "executor": "nx:run-commands",
+      "outputs": ["{options.outputPath}"],
       "options": {
-        "cwd": "packages/twenty-chrome-extension",
-        "commands": ["rimraf ./dist", "tsc", "vite build"]
+        "outputPath": "{projectRoot}/dist"
       }
     },
     "start": {
+      "executor": "@nx/vite:dev-server",
+      "options": {
+        "buildTarget": "twenty-chrome-extension:build",
+        "hmr": true
+      }
+    },
+    "preview": {
+      "executor": "@nx/vite:preview-server",
+      "options": {
+        "buildTarget": "twenty-chrome-extension:build",
+        "port": 3001,
+        "open": true
+      }
+    },
+    "reset:env": {
+      "executor": "nx:run-commands",
+      "inputs": ["{projectRoot}/.env.example"],
+      "outputs": ["{projectRoot}/.env"],
+      "cache": true,
+      "options": {
+        "cwd": "{projectRoot}",
+        "command": "cp .env.example .env"
+      }
+    },
+    "typecheck": {},
+    "lint": {
+      "options": {
+        "lintFilePatterns": [
+          "{projectRoot}/src/**/*.{ts,tsx,json}",
+          "{projectRoot}/package.json"
+        ],
+        "maxWarnings": 0,
+        "reportUnusedDisableDirectives": "error"
+      },
+      "configurations": {
+        "ci": { "eslintConfig": "{projectRoot}/.eslintrc-ci.cjs" },
+        "fix": {}
+      }
+    },
+    "fmt": {
+      "options": {
+        "files": "src"
+      },
+      "configurations": {
+        "fix": {}
+      }
+    },
+    "graphql:generate": {
       "executor": "nx:run-commands",
-      "dependsOn": ["build"],
       "options": {
-        "cwd": "packages/twenty-chrome-extension",
-        "command": "VITE_MODE=development vite"
+        "cwd": "{projectRoot}",
+        "command": "graphql-codegen"
       }
     }
   }

packages/twenty-chrome-extension/tsconfig.app.json

@@ -1,14 +1,11 @@
 {
   "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../.cache/tsc"
-  },
   "exclude": [
     "**/*.spec.ts",
     "**/*.test.ts",
     "**/*.spec.tsx",
     "**/*.test.tsx",
     "jest.config.ts"
   ],
-  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
 }

packages/twenty-chrome-extension/tsconfig.json

@@ -1,15 +1,16 @@
 {
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
+    "outDir": "../../.cache/tsc",
     "target": "ES2022",
     "useDefineForClassFields": true,
     "lib": ["ES2022", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
     "esModuleInterop": true,
-    "baseUrl": ".",
     "paths": {
-      "@/*": ["src/options/modules/*"],
-      "~/*": ["src/*"]
+      "@/*": ["packages/twenty-chrome-extension/src/options/modules/*"],
+      "~/*": ["packages/twenty-chrome-extension/src/*"]
     },
 
     /* Bundler mode */

packages/twenty-chrome-extension/tsconfig.spec.json

@@ -1,10 +1,10 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "outDir": "../../.cache/tsc",
     "types": ["jest", "node"]
   },
   "include": [
+    "codegen.ts",
     "vite.config.ts",
     "jest.config.ts",
     "**/*.test.ts",

packages/twenty-chrome-extension/vite.config.ts

@@ -19,6 +19,9 @@ const viteManifestHack: Plugin & {
 
 export default defineConfig(() => {
   return {
+    root: __dirname,
+    cacheDir: '../../node_modules/.vite/packages/twenty-chrome-extension',
+
     build: {
       emptyOutDir: true,
       outDir: 'dist',

yarn.lock

@@ -15896,13 +15896,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/chrome@npm:^0.0.256":
-  version: 0.0.256
-  resolution: "@types/chrome@npm:0.0.256"
+"@types/chrome@npm:^0.0.267":
+  version: 0.0.267
+  resolution: "@types/chrome@npm:0.0.267"
   dependencies:
     "@types/filesystem": "npm:*"
     "@types/har-format": "npm:*"
-  checksum: 35b3d2c92a3888cc14e5961421233003407a95078bf9b2f30c52a90470dae02588560bff1733ed3e7a8e9f12a1d0c5a6bae0ca30b6acdb3d723e1c2f29c8e861
+  checksum: baa2e526c86e0c092668eff8fdca35c3eea09f0cded9bab86d692ae3834955bfa49d3c064c51b003406099cce73060872c8c824ceef526c72a446c863a2b520c
   languageName: node
   linkType: hard
 
@@ -46242,9 +46242,6 @@ __metadata:
 "twenty-chrome-extension@workspace:packages/twenty-chrome-extension":
   version: 0.0.0-use.local
   resolution: "twenty-chrome-extension@workspace:packages/twenty-chrome-extension"
-  dependencies:
-    "@crxjs/vite-plugin": "npm:^1.0.14"
-    "@types/chrome": "npm:^0.0.256"
   languageName: unknown
   linkType: soft
 
@@ -46353,6 +46350,7 @@ __metadata:
     "@chakra-ui/accordion": "npm:^2.3.0"
     "@chakra-ui/system": "npm:^2.6.0"
     "@codesandbox/sandpack-react": "npm:^2.13.5"
+    "@crxjs/vite-plugin": "npm:^1.0.14"
     "@docusaurus/core": "npm:^3.1.0"
     "@docusaurus/module-type-aliases": "npm:^3.1.0"
     "@docusaurus/preset-classic": "npm:^3.1.0"
@@ -46439,6 +46437,7 @@ __metadata:
     "@types/bcrypt": "npm:^5.0.0"
     "@types/better-sqlite3": "npm:^7.6.8"
     "@types/bytes": "npm:^3.1.1"
+    "@types/chrome": "npm:^0.0.267"
     "@types/crypto-js": "npm:^4.2.2"
     "@types/deep-equal": "npm:^1.0.1"
     "@types/dompurify": "npm:^3.0.5"