From 5cf906c523afdb2443c4929fa610d4f29e3ef7f2 Mon Sep 17 00:00:00 2001 From: panagiotis vourtsis Date: Tue, 28 Nov 2023 09:25:54 +0200 Subject: [PATCH] feat: vite upgrade --- .babelrc.json | 39 - .eslintignore | 3 +- .eslintrc.json | 23 +- .gitignore | 2 + .storybook/addons.ts | 24 - .storybook/main.ts | 94 +- .storybook/manager-head.html | 14 +- .storybook/manager.ts | 17 + .storybook/preview-head.html | 22 +- .storybook/preview.tsx | 188 +- build-storybook.log | 641 - globals.d.ts | 2 +- jest.config.js | 18 - package.json | 146 +- rollup.config.js | 55 +- .../CheckBox/tests/Checkbox.test.tsx | 6 +- src/components/Chip/Chip.test.tsx | 4 +- src/components/DatePicker/DatePicker.test.tsx | 18 +- src/components/DatePicker/Day/Day.test.tsx | 4 +- .../OverlayComponent.test.tsx | 10 +- .../MonthWrapper/MonthWrapper.test.tsx | 5 +- .../DropdownButton/DropdownButton.test.tsx | 20 +- src/components/Filter/Filter.test.tsx | 74 +- src/components/Modal/Modal.test.tsx | 12 +- .../Notification/Notification.test.tsx | 66 +- .../NumberField/NumberField.test.tsx | 36 +- src/components/Overlay/Overlay.test.tsx | 6 +- src/components/Radio/Radio.test.tsx | 5 +- src/components/Select/Select.test.tsx | 84 +- src/components/Switch/Switch.test.tsx | 6 +- src/components/Table/Table.test.tsx | 23 +- src/components/Tag/Tag.test.tsx | 6 +- src/components/TextField/TextField.test.tsx | 8 +- .../ThemeProvider/ThemeProvider.test.tsx | 4 +- src/components/Toast/Toast.test.tsx | 6 +- src/components/TopAppBar/TopAppBar.test.tsx | 13 +- .../TruncatedContent.test.tsx | 6 +- .../__tests__/useSearchQueryParams.test.ts | 9 +- src/hooks/useBreakpoints.test.ts | 17 +- src/test/setup.ts | 47 +- src/types.d.ts | 14 +- src/vite-env.d.ts | 4 + tsconfig.json | 56 +- tsconfig.node.json | 10 + vite.config.d.ts | 2 + vite.config.ts | 97 + yarn.lock | 11359 +++++++--------- 47 files changed, 5759 insertions(+), 7566 deletions(-) delete mode 100644 .babelrc.json delete mode 100644 .storybook/addons.ts create mode 100644 .storybook/manager.ts delete mode 100644 build-storybook.log delete mode 100644 jest.config.js create mode 100644 src/vite-env.d.ts create mode 100644 tsconfig.node.json create mode 100644 vite.config.d.ts create mode 100644 vite.config.ts diff --git a/.babelrc.json b/.babelrc.json deleted file mode 100644 index e4bccdacd..000000000 --- a/.babelrc.json +++ /dev/null @@ -1,39 +0,0 @@ -{ - "presets": [ - [ - "@babel/preset-react", - { "runtime": "automatic", "importSource": "@emotion/react" } - ], - [ - "@babel/preset-env", - { - "loose": true, - "shippedProposals": true - } - ], - "@babel/preset-typescript", - "@emotion/babel-preset-css-prop" - ], - "plugins": [ - "@emotion", - [ - "module-resolver", - { - "extensions": [".ts", ".tsx", ".js", ".jsx"], - "root": ["./src"] - } - ], - [ - "@babel/plugin-proposal-private-property-in-object", - { - "loose": "true" - } - ] - ], - "ignore": ["./src/storybook.test.ts", "**/*.stories.tsx", "**/*.stories.storyshot"], - "env": { - "test": { - "plugins": ["@babel/plugin-transform-runtime", "require-context-hook"] - } - } -} diff --git a/.eslintignore b/.eslintignore index c18f758b4..a25598dcb 100644 --- a/.eslintignore +++ b/.eslintignore @@ -10,5 +10,6 @@ server **/*.test.ts **/*.test.tsx __mocks__ -./jest.config.js +./vite.config.ts ./rollup.config.js +!.storybook diff --git a/.eslintrc.json b/.eslintrc.json index cb145b5ee..ec96b8cd5 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -5,9 +5,10 @@ "plugin:@typescript-eslint/recommended", "plugin:react-hooks/recommended", "plugin:react/recommended", - "plugin:import/typescript" + "plugin:import/typescript", + "plugin:storybook/recommended" ], - "plugins": ["react", "@emotion", "@typescript-eslint", "import"], + "plugins": ["react", "@emotion", "@typescript-eslint", "import", "unused-imports"], "env": { "node": true, "browser": true, @@ -16,11 +17,17 @@ "es6": true }, "rules": { + "no-unused-vars": "off", // or "@typescript-eslint/no-unused-vars": "off", + "unused-imports/no-unused-imports": "error", + "unused-imports/no-unused-vars": [ + "warn", + { "vars": "all", "varsIgnorePattern": "^_", "args": "after-used", "argsIgnorePattern": "^_" } + ], + "@typescript-eslint/consistent-type-imports": "error", "react/no-unknown-property": ["error", { "ignore": ["css"] }], /* React rules */ "react/no-direct-mutation-state": "error", "react/no-unused-prop-types": "warn", - "react/no-unknown-property": ["error", { "ignore": ["css"] }], "react/self-closing-comp": [ "warn", { @@ -30,6 +37,8 @@ ], "react/prop-types": "off", "react/button-has-type": "warn", + + "@typescript-eslint/no-explicit-any": ["off"], "react/no-array-index-key": "warn", "react/no-render-return-value": 0, "react/boolean-prop-naming": [ @@ -41,6 +50,14 @@ ], /* JSX rules */ "react/jsx-key": "error", + "react/jsx-curly-brace-presence": ["error", "never"], + // Since we are using React 17+ we no longer need these + "react/jsx-uses-react": "off", + "react/react-in-jsx-scope": "off", + "react/no-children-prop": "off", + + "react-hooks/rules-of-hooks": "error", + "react-hooks/exhaustive-deps": "warn", /* eslint basic rules */ "padding-line-between-statements": [ "error", diff --git a/.gitignore b/.gitignore index 6fcb72f65..cb07c0504 100644 --- a/.gitignore +++ b/.gitignore @@ -33,3 +33,5 @@ build-storybook.log /typeDocs ./bundle-analysis.html + +vite.config.ts* diff --git a/.storybook/addons.ts b/.storybook/addons.ts deleted file mode 100644 index 258919a20..000000000 --- a/.storybook/addons.ts +++ /dev/null @@ -1,24 +0,0 @@ -import '@storybook/addon-docs/register'; -import { addons } from '@storybook/addons'; -// import '@storybook/addon-actions/register'; -// import '@storybook/addon-links/register'; -import { create } from '@storybook/theming'; -// import logo from "./logo.png"; - -const theme = create({ - base: 'light', - // brandImage: logo, - brandUrl: 'https://designlab.orfium.com', - barSelectedColor: '#175BF5', - brandTitle: 'Ictinus Design System', - barTextColor: 'rgb(153, 153, 153)', -}); - -addons.setConfig({ - theme, - viewMode: 'docs', - previewTabs: { - 'storybook/docs/panel': { index: -1 }, - canvas: { title: 'Sandbox' }, - }, -}); diff --git a/.storybook/main.ts b/.storybook/main.ts index f9b2d177a..b50b7baaa 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,7 +1,5 @@ -import '@babel/polyfill'; - -const fs = require('fs'); -const path = require('path'); +import fs from 'fs'; +import path from 'path'; function getPackageDir(filepath: string) { let currDir = path.dirname(require.resolve(filepath)); @@ -21,71 +19,55 @@ function getPackageDir(filepath: string) { module.exports = { stories: [ - '../docs/WELCOME.stories.@(md|mdx)', - '../docs/GETTING_STARTED.stories.@(md|mdx)', - '../docs/system/THEME.stories.@(md|mdx)', - '../docs/system/COLOR-UTILITY.stories.@(md|mdx)', - '../docs/guides/*.stories.@(md|mdx)', - '../docs/tokens/TOKENS.stories.@(md|mdx)', - '../docs/tokens/globals/*.stories.@(md|mdx)', - '../docs/tokens/*.stories.@(md|mdx)', - '../docs/system/*.stories.@(md|mdx)', - '../src/**/*.stories.@(ts|tsx|mdx)', + '../docs/WELCOME.mdx', + '../docs/GETTING_STARTED.mdx', + '../docs/system/THEME.mdx', + '../docs/system/COLOR-UTILITY.mdx', + '../docs/guides/*.mdx', + '../docs/tokens/TOKENS.mdx', + '../docs/tokens/globals/*.mdx', + '../docs/tokens/*.mdx', + '../docs/system/*.mdx', + '../src/**/*.@(mdx|stories.@(ts|tsx))', ], + addons: [ - '@storybook/addon-actions/register', + // '@storybook/addon-actions/register', + '@storybook/addon-interactions', '@storybook/addon-links', '@storybook/addon-viewport', '@storybook/addon-knobs', - '@storybook/addon-a11y', - '@storybook/addon-storysource/register', + '@storybook/addon-a11y', // '@storybook/addon-storysource/register', '@storybook/addon-docs', 'storybook-addon-pseudo-states', - 'storybook-addon-designs', + '@storybook/addon-designs', + '@storybook/addon-mdx-gfm', ], + staticDirs: ['../public'], - core: { - builder: 'webpack5', - }, - webpackFinal: async (config: any) => { - // do mutation to the config - // Edit config with care. Make sure to preserve the following config options: - // * entry - // * output - const rules = config.module.rules; - const fileLoaderRule = rules.find((rule: any) => rule.test.test('.svg')); - fileLoaderRule.exclude = /\.svg$/; + env: (config: any) => ({ + ...config, + STORYBOOK_ENV: 'true', + }), - config.module.rules[0].use[0].options.presets = [ - ...config.module.rules[0].use[0].options.presets, - require.resolve('@emotion/babel-preset-css-prop'), - ]; + docs: { + inlineStories: true, + defaultName: 'Overview', - rules.push({ - test: /\.(png|jpe?g|gif)$/i, - use: [ - { - loader: 'file-loader', - }, - ], - }); - rules.push({ - test: /\.svg$/, - issuer: /\.tsx?$/, - use: ['@svgr/webpack'], - }); + story: { + canvas: { sourceState: 'shown' }, + source: { type: 'code' }, + }, + }, - config.module.rules.push({ - test: /\.svg$/, - issuer: /\.style.ts?$/, - use: ['url-loader'], - }); + typescript: { + // also valid 'react-docgen-typescript' | false + reactDocgen: 'react-docgen-typescript', + }, - return config; + framework: { + name: '@storybook/react-vite', + options: {}, }, - env: (config: any) => ({ - ...config, - STORYBOOK_ENV: 'true', - }), }; diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html index e432a2444..11cdcdd3d 100644 --- a/.storybook/manager-head.html +++ b/.storybook/manager-head.html @@ -5,6 +5,7 @@