admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Move frontend to Vite 5 (#2775)

Browse Source 
* merge squashed

- A couple of CJS modules into ESM (config mostly)
- Vite complains about node.js modules: fixed `useIsMatchingLocation.ts`
	> or use rollupOptions in vite.config.ts
	> ref: f0e4f59d97/vite.config.js (L6)
- Adjust Storybook to work with Vite: use @storybook/test
- Use SWC for jest tranformations
- Remove unused deps:
	- ts-jest: replaced with @swc/jest, typecheck by `tsc`
	- babel plugins
	- @svgr/plugin-jsx: not used
	- @testing-library/user-event: handled by @storybook/test
	- @typescript-eslint/utils: was not plugged in
	- tsup, esbuild-plugin-svgr: will look into that later
- Install Vite required deps, and remove craco/webpack deps
- Adjust SVG to work with Vite as components
- Fixed `Step.tsx`: I dont know if one should be swaped for the other,
  but there should be no slash
- Initial formating and linting:
	- removed empty object params
	- sorting imports, etc..

* prettier: fix pattern

* coverage: sb coverage report isnt working

* Add missing pieces

* `yarn lint --fix`

* fix: scripts permissions

* tsc: cut errors in half

* fix: remove `react-app-env.d.ts`

* tsc: all fixed, except `react-data-grid` types issue

* eslint: ignore env-config.js

* eslint: Align ci with config

* msw: bypass testing warnings

ref: https://stackoverflow.com/questions/68024935/msw-logging-warnings-for-unhandled-supertest-requests

* rebase: and fix things

* Adjust to current `graphql-codegen` no ESM support

* Remove vite plugin and use built-in methods

* rebase: and some fixes

* quick fix + `corepack use yarn@1.22.19`

* Fix build errors

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Aasim Attia
2023-12-10 17:22:43 +02:00
committed by GitHub
parent f24541beda
commit a70a9281eb
132 changed files with 4428 additions and 8978 deletions
Download Patch File Download Diff File Expand all files Collapse all files

213
front/package.json
View File

@ -2,6 +2,37 @@
"name": "twenty",
"version": "0.2.1",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"dev:clean": "yarn dev --force",
"build": "tsc && vite build && yarn build:inject-runtime-env",
"build:inject-runtime-env": "./scripts/inject-runtime-env.sh",
"preview": "vite preview",
"eslint-plugin:setup": "cd ../packages/eslint-plugin-twenty/ && yarn && yarn build && cd ../../front/ && yarn upgrade eslint-plugin-twenty",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"fmt:fix": "prettier --cache --write \"src/**/*.ts\" \"src/**/*.tsx\"",
"fmt": "prettier --check \"src/**/*.ts\" \"src/**/*.tsx\"",
"test": "jest",
"coverage": "jest --coverage",
"storybook:modules:dev": "STORYBOOK_SCOPE=modules yarn storybook:dev",
"storybook:dev": "storybook dev -p 6006 --no-open",
"storybook:pages:dev": "STORYBOOK_SCOPE=pages yarn storybook:dev",
"storybook:docs:dev": "STORYBOOK_SCOPE=ui-docs yarn storybook:dev",
"storybook:build": "storybook build",
"storybook:modules:build": "STORYBOOK_SCOPE=modules yarn storybook:build",
"storybook:pages:build": "STORYBOOK_SCOPE=pages yarn storybook:build",
"storybook:docs:build": "STORYBOOK_SCOPE=ui-docs yarn storybook:build",
"storybook:test": "test-storybook",
"storybook:test-slow": "test-storybook --maxWorkers=3",
"storybook:coverage": "yarn storybook:test-slow --coverage && npx nyc report --reporter=lcov -t coverage/storybook --report-dir coverage/storybook --check-coverage",
"storybook:modules:coverage": "STORYBOOK_SCOPE=modules yarn storybook:coverage",
"storybook:pages:coverage": "STORYBOOK_SCOPE=pages yarn storybook:coverage",
"graphql:data:generate": "dotenv cross-var graphql-codegen -- --config codegen.cjs",
"graphql:metadata:generate": "dotenv cross-var graphql-codegen -- --config codegen-metadata.cjs",
"chromatic": "dotenv cross-var npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN",
"install": "yarn eslint-plugin:setup"
},
"dependencies": {
"@air/react-drag-to-select": "^5.0.8",
"@apollo/client": "^3.7.17",
@ -15,11 +46,9 @@
"@hello-pangea/dnd": "^16.2.0",
"@hookform/resolvers": "^3.1.1",
"@sniptt/guards": "^0.2.0",
"@swc/core": "^1.3.100",
"@swc/jest": "^0.2.29",
"@tabler/icons-react": "^2.30.0",
"@types/node": "^16.18.4",
"@types/react": "^18.0.25",
"@types/react-dom": "^18.0.9",
"@types/react-helmet-async": "^1.0.3",
"afterframe": "^1.0.2",
"apollo-upload-client": "^17.0.0",
"date-fns": "^2.30.0",
@ -57,43 +86,79 @@
"ts-key-enum": "^2.0.12",
"type-fest": "^4.1.0",
"uuid": "^9.0.0",
"vite-tsconfig-paths": "^4.2.1",
"xlsx-ugnis": "^0.19.3",
"zod": "^3.22.2"
},
"scripts": {
"start": "PORT=3001 craco start --max-warnings=0",
"build:inject-runtime-env": "./scripts/inject-runtime-env.sh",
"build": "craco build && yarn build:inject-runtime-env",
"test": "craco test",
"coverage": "craco test --coverage .",
"lint": "eslint src --max-warnings=0",
"eslint-plugin:setup": "cd ../packages/eslint-plugin-twenty/ && yarn && yarn build && cd ../../front/ && yarn upgrade eslint-plugin-twenty",
"storybook:dev": "storybook dev -p 6006 -s ../public",
"storybook:test": "test-storybook",
"storybook:test-slow": "test-storybook --maxWorkers=3",
"storybook:build": "storybook build -s public",
"storybook:coverage": "test-storybook --coverage --maxWorkers=3 && npx nyc report --reporter=lcov -t coverage/storybook --report-dir coverage/storybook --check-coverage",
"storybook:modules:dev": "STORYBOOK_SCOPE=modules yarn storybook:dev",
"storybook:pages:dev": "STORYBOOK_SCOPE=pages yarn storybook:dev",
"storybook:docs:dev": "STORYBOOK_SCOPE=ui-docs yarn storybook:dev",
"storybook:modules:build": "STORYBOOK_SCOPE=modules yarn storybook:build",
"storybook:pages:build": "STORYBOOK_SCOPE=pages yarn storybook:build",
"storybook:docs:build": "STORYBOOK_SCOPE=ui-docs yarn storybook:build",
"storybook:modules:coverage": "STORYBOOK_SCOPE=modules yarn storybook:coverage",
"storybook:pages:coverage": "STORYBOOK_SCOPE=pages yarn storybook:coverage",
"graphql:data:generate": "dotenv cross-var graphql-codegen -- --config codegen.js",
"graphql:metadata:generate": "dotenv cross-var graphql-codegen -- --config codegen-metadata.js",
"chromatic": "dotenv cross-var npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN",
"install": "yarn eslint-plugin:setup"
"devDependencies": {
"@graphql-codegen/cli": "^3.3.1",
"@graphql-codegen/client-preset": "^4.1.0",
"@graphql-codegen/typescript": "^3.0.4",
"@graphql-codegen/typescript-operations": "^3.0.4",
"@graphql-codegen/typescript-react-apollo": "^3.3.7",
"@storybook/addon-actions": "^7.6.3",
"@storybook/addon-coverage": "^1.0.0",
"@storybook/addon-essentials": "^7.6.3",
"@storybook/addon-interactions": "^7.6.3",
"@storybook/addon-links": "^7.6.3",
"@storybook/addon-onboarding": "^1.0.9",
"@storybook/addon-themes": "^7.6.3",
"@storybook/blocks": "^7.6.3",
"@storybook/react": "^7.6.3",
"@storybook/react-vite": "^7.6.3",
"@storybook/test": "^7.6.3",
"@storybook/test-runner": "^0.16.0",
"@testing-library/jest-dom": "^6.1.5",
"@testing-library/react": "^13.4.0",
"@types/apollo-upload-client": "^17.0.2",
"@types/deep-equal": "^1.0.1",
"@types/jest": "^29.5.10",
"@types/js-cookie": "^3.0.3",
"@types/lodash.camelcase": "^4.3.7",
"@types/lodash.debounce": "^4.0.7",
"@types/lodash.kebabcase": "^4.1.7",
"@types/lodash.snakecase": "^4.1.9",
"@types/luxon": "^3.3.0",
"@types/node": "^20.10.0",
"@types/react": "^18.2.39",
"@types/react-datepicker": "^4.11.2",
"@types/react-dom": "^18.2.15",
"@types/scroll-into-view": "^1.16.0",
"@types/uuid": "^9.0.1",
"@typescript-eslint/eslint-plugin": "^6.10.0",
"@typescript-eslint/parser": "^6.10.0",
"@vitejs/plugin-react-swc": "^3.5.0",
"chromatic": "^6.18.0",
"concurrently": "^8.0.1",
"cross-var": "^1.1.0",
"dotenv-cli": "^7.2.1",
"eslint": "^8.53.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-prefer-arrow": "^1.2.3",
"eslint-plugin-prettier": "^5.0.1",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.4",
"eslint-plugin-simple-import-sort": "^10.0.0",
"eslint-plugin-storybook": "^0.6.15",
"eslint-plugin-twenty": "file:../packages/eslint-plugin-twenty",
"eslint-plugin-unused-imports": "^3.0.0",
"http-server": "^14.1.1",
"jest": "29.7.0",
"jest-environment-jsdom": "29.7.0",
"msw": "1.3.2",
"msw-storybook-addon": "^1.10.0",
"prettier": "^3.1.0",
"storybook": "^7.6.3",
"storybook-addon-cookie": "^3.1.0",
"storybook-addon-pseudo-states": "^2.1.2",
"typescript": "^5.2.2",
"vite": "^5.0.0",
"vite-plugin-svgr": "^4.2.0"
},
"overrides": {
"react-refresh": "0.14.0"
},
"jest": {
"testMatch": [
"<rootDir>/**/*.test.ts",
"<rootDir>/**/*.test.tsx"
]
"engines": {
"node": "^18.16.0",
"npm": "please-use-yarn"
},
"browserslist": {
"production": [
@ -107,76 +172,8 @@
"last 1 safari version"
]
},
"devDependencies": {
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"@craco/craco": "^7.1.0",
"@graphql-codegen/cli": "^3.3.1",
"@graphql-codegen/client-preset": "^4.1.0",
"@graphql-codegen/typescript": "^3.0.4",
"@graphql-codegen/typescript-operations": "^3.0.4",
"@graphql-codegen/typescript-react-apollo": "^3.3.7",
"@storybook/addon-actions": "^7.0.22",
"@storybook/addon-coverage": "^0.0.8",
"@storybook/addon-essentials": "^7.0.22",
"@storybook/addon-interactions": "^7.0.22",
"@storybook/addon-links": "^7.0.22",
"@storybook/addon-styling": "^1.3.0",
"@storybook/jest": "^0.1.0",
"@storybook/node-logger": "^7.0.22",
"@storybook/react": "^7.0.22",
"@storybook/react-webpack5": "^7.0.22",
"@storybook/test-runner": "^0.10.0",
"@storybook/testing-library": "^0.1.0",
"@svgr/plugin-jsx": "^8.1.0",
"@svgr/webpack": "^8.0.1",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/apollo-upload-client": "^17.0.2",
"@types/deep-equal": "^1.0.1",
"@types/jest": "^27.5.2",
"@types/js-cookie": "^3.0.3",
"@types/lodash.camelcase": "^4.3.7",
"@types/lodash.debounce": "^4.0.7",
"@types/lodash.kebabcase": "^4.1.7",
"@types/lodash.snakecase": "^4.1.9",
"@types/luxon": "^3.3.0",
"@types/react-datepicker": "^4.11.2",
"@types/scroll-into-view": "^1.16.0",
"@types/uuid": "^9.0.1",
"@typescript-eslint/eslint-plugin": "^6.7.5",
"@typescript-eslint/parser": "^6.7.5",
"@typescript-eslint/utils": "^6.7.0",
"babel-plugin-named-exports-order": "^0.0.2",
"chromatic": "^6.18.0",
"concurrently": "^8.0.1",
"cross-var": "^1.1.0",
"dotenv-cli": "^7.2.1",
"esbuild-plugin-svgr": "^2.1.0",
"eslint": "^8.28.0",
"eslint-config-prettier": "^8.5.0",
"eslint-config-standard-with-typescript": "^23.0.0",
"eslint-plugin-prefer-arrow": "^1.2.3",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.31.11",
"eslint-plugin-simple-import-sort": "^10.0.0",
"eslint-plugin-storybook": "^0.6.12",
"eslint-plugin-twenty": "file:../packages/eslint-plugin-twenty",
"eslint-plugin-unused-imports": "^3.0.0",
"http-server": "^14.1.1",
"msw": "1.3.2",
"msw-storybook-addon": "^1.10.0",
"prettier": "^2.8.0",
"react-scripts": "5.0.1",
"storybook": "^7.0.22",
"storybook-addon-cookie": "^3.0.1",
"storybook-addon-pseudo-states": "^2.1.0",
"ts-jest": "^29.1.0",
"tsup": "^7.2.0",
"typescript": "^5.2.2",
"webpack": "^5.75.0"
},
"msw": {
"workerDirectory": "public"
}
}
},
"packageManager": "yarn@1.22.19+sha256.732620bac8b1690d507274f025f3c6cfdc3627a84d9642e38a07452cc00e0f2e"
}