Skip to content

Commit af0440f

Browse files
thebuilderthebuilder
authored
feat: switch to vitest and storybook vite (#549)
1 parent d61319a commit af0440f

17 files changed

Lines changed: 2806 additions & 2554 deletions

‎.babelrc‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎.eslintrc.js‎

Lines changed: 224 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
/**
2+
* Based on: eslint-config-react-app
3+
* */
4+
module.exports = {
5+
env: {
6+
browser: true,
7+
commonjs: true,
8+
es6: true,
9+
node: true,
10+
},
11+
parserOptions: {
12+
ecmaVersion: 2018,
13+
sourceType: 'module',
14+
ecmaFeatures: {
15+
jsx: true,
16+
},
17+
},
18+
settings: {
19+
react: {
20+
version: 'detect',
21+
},
22+
},
23+
parser: '@typescript-eslint/parser',
24+
extends: ['plugin:react-hooks/recommended'],
25+
plugins: ['import', 'jsx-a11y', 'react', '@typescript-eslint'],
26+
rules: {
27+
// http://eslint.org/docs/rules/
28+
'array-callback-return': 'warn',
29+
'dot-location': ['warn', 'property'],
30+
eqeqeq: ['warn', 'smart'],
31+
'new-parens': 'warn',
32+
'no-caller': 'warn',
33+
'no-cond-assign': ['warn', 'except-parens'],
34+
'no-const-assign': 'warn',
35+
'no-control-regex': 'warn',
36+
'no-console': ['warn', { allow: ['warn', 'error'] }],
37+
'no-delete-var': 'warn',
38+
'no-dupe-args': 'warn',
39+
'no-dupe-keys': 'warn',
40+
'no-duplicate-case': 'warn',
41+
'no-empty-character-class': 'warn',
42+
'no-empty-pattern': 'warn',
43+
'no-eval': 'warn',
44+
'no-ex-assign': 'warn',
45+
'no-extend-native': 'warn',
46+
'no-extra-bind': 'warn',
47+
'no-extra-label': 'warn',
48+
'no-fallthrough': 'warn',
49+
'no-func-assign': 'warn',
50+
'no-implied-eval': 'warn',
51+
'no-invalid-regexp': 'warn',
52+
'no-iterator': 'warn',
53+
'no-label-var': 'warn',
54+
'no-labels': ['warn', { allowLoop: true, allowSwitch: false }],
55+
'no-lone-blocks': 'warn',
56+
'no-loop-func': 'warn',
57+
'no-mixed-operators': [
58+
'warn',
59+
{
60+
groups: [
61+
['&', '|', '^', '~', '<<', '>>', '>>>'],
62+
['==', '!=', '===', '!==', '>', '>=', '<', '<='],
63+
['&&', '||'],
64+
['in', 'instanceof'],
65+
],
66+
allowSamePrecedence: false,
67+
},
68+
],
69+
'no-multi-str': 'warn',
70+
'no-native-reassign': 'warn',
71+
'no-negated-in-lhs': 'warn',
72+
'no-new-func': 'warn',
73+
'no-new-object': 'warn',
74+
'no-new-symbol': 'warn',
75+
'no-new-wrappers': 'warn',
76+
'no-obj-calls': 'warn',
77+
'no-octal': 'warn',
78+
'no-octal-escape': 'warn',
79+
// TODO: Remove this option in the next major release of CRA.
80+
// https://eslint.org/docs/user-guide/migrating-to-6.0.0#-the-no-redeclare-rule-is-now-more-strict-by-default
81+
'no-redeclare': ['warn', { builtinGlobals: false }],
82+
'no-regex-spaces': 'warn',
83+
'no-restricted-syntax': ['warn', 'WithStatement'],
84+
'no-script-url': 'warn',
85+
'no-self-assign': 'warn',
86+
'no-self-compare': 'warn',
87+
'no-sequences': 'warn',
88+
'no-shadow-restricted-names': 'warn',
89+
'no-sparse-arrays': 'warn',
90+
'no-template-curly-in-string': 'warn',
91+
'no-this-before-super': 'warn',
92+
'no-throw-literal': 'warn',
93+
'no-unexpected-multiline': 'warn',
94+
'no-unreachable': 'wa' + 'rn',
95+
'no-unused-expressions': [
96+
'error',
97+
{
98+
allowShortCircuit: true,
99+
allowTernary: true,
100+
allowTaggedTemplates: true,
101+
},
102+
],
103+
'no-unused-labels': 'warn',
104+
'no-useless-computed-key': 'warn',
105+
'no-useless-concat': 'warn',
106+
'no-useless-escape': 'warn',
107+
'no-useless-rename': [
108+
'warn',
109+
{
110+
ignoreDestructuring: false,
111+
ignoreImport: false,
112+
ignoreExport: false,
113+
},
114+
],
115+
'no-with': 'warn',
116+
'no-whitespace-before-property': 'warn',
117+
'require-yield': 'warn',
118+
'rest-spread-spacing': ['warn', 'never'],
119+
strict: ['warn', 'never'],
120+
'unicode-bom': ['warn', 'never'],
121+
'use-isnan': 'warn',
122+
'valid-typeof': 'warn',
123+
'no-restricted-properties': [
124+
'error',
125+
{
126+
object: 'require',
127+
property: 'ensure',
128+
message:
129+
'Please use import() instead. More info: https://facebook.github.io/create-react-app/docs/code-splitting',
130+
},
131+
{
132+
object: 'System',
133+
property: 'import',
134+
message:
135+
'Please use import() instead. More info: https://facebook.github.io/create-react-app/docs/code-splitting',
136+
},
137+
],
138+
'getter-return': 'warn',
139+
140+
// https://github.com/benmosher/eslint-plugin-import/tree/master/docs/rules
141+
'import/first': 'error',
142+
'import/no-amd': 'error',
143+
'import/no-webpack-loader-syntax': 'error',
144+
145+
// https://github.com/yannickcr/eslint-plugin-react/tree/master/docs/rules
146+
'react/forbid-foreign-prop-types': ['warn', { allowInPropTypes: true }],
147+
'react/jsx-no-comment-textnodes': 'warn',
148+
'react/jsx-no-duplicate-props': 'warn',
149+
'react/jsx-no-target-blank': 'warn',
150+
'react/jsx-no-undef': 'error',
151+
'react/jsx-pascal-case': [
152+
'warn',
153+
{
154+
allowAllCaps: true,
155+
ignore: [],
156+
},
157+
],
158+
'react/jsx-uses-react': 'warn',
159+
'react/jsx-uses-vars': 'warn',
160+
'react/no-danger-with-children': 'warn',
161+
// Disabled because of undesirable warnings
162+
// See https://github.com/facebook/create-react-app/issues/5204 for
163+
// blockers until its re-enabled
164+
// 'react/no-deprecated': 'warn',
165+
'react/no-direct-mutation-state': 'warn',
166+
'react/no-is-mounted': 'warn',
167+
'react/no-typos': 'error',
168+
'react/require-render-return': 'error',
169+
'react/style-prop-object': 'warn',
170+
171+
// https://github.com/evcohen/eslint-plugin-jsx-a11y/tree/master/docs/rules
172+
'jsx-a11y/accessible-emoji': 'warn',
173+
'jsx-a11y/alt-text': 'warn',
174+
'jsx-a11y/anchor-has-content': 'warn',
175+
'jsx-a11y/anchor-is-valid': [
176+
'warn',
177+
{
178+
aspects: ['invalidHref'],
179+
},
180+
],
181+
'jsx-a11y/aria-activedescendant-has-tabindex': 'warn',
182+
'jsx-a11y/aria-props': 'warn',
183+
'jsx-a11y/aria-proptypes': 'warn',
184+
'jsx-a11y/aria-role': 'warn',
185+
'jsx-a11y/aria-unsupported-elements': 'warn',
186+
'jsx-a11y/heading-has-content': 'warn',
187+
'jsx-a11y/iframe-has-title': 'warn',
188+
'jsx-a11y/img-redundant-alt': 'warn',
189+
'jsx-a11y/no-access-key': 'warn',
190+
'jsx-a11y/no-distracting-elements': 'warn',
191+
'jsx-a11y/no-redundant-roles': 'warn',
192+
'jsx-a11y/role-has-required-aria-props': 'warn',
193+
'jsx-a11y/role-supports-aria-props': 'warn',
194+
'jsx-a11y/scope': 'warn',
195+
196+
// TypeScript's `noFallthroughCasesInSwitch` option is more robust (#6906)
197+
'default-case': 'off',
198+
// 'tsc' already handles this (https://github.com/typescript-eslint/typescript-eslint/issues/291)
199+
'no-dupe-class-members': 'off',
200+
// 'tsc' already handles this (https://github.com/typescript-eslint/typescript-eslint/issues/477)
201+
'no-undef': 'off',
202+
203+
// Add TypeScript specific rules (and turn off ESLint equivalents)
204+
'@typescript-eslint/no-array-constructor': 'warn',
205+
'@typescript-eslint/no-namespace': 'error',
206+
'@typescript-eslint/no-use-before-define': [
207+
'warn',
208+
{
209+
functions: false,
210+
classes: false,
211+
variables: false,
212+
typedefs: false,
213+
},
214+
],
215+
'@typescript-eslint/no-unused-vars': [
216+
'warn',
217+
{
218+
args: 'none',
219+
ignoreRestSiblings: true,
220+
},
221+
],
222+
'@typescript-eslint/no-useless-constructor': 'warn',
223+
},
224+
};

‎.storybook/main.js‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
module.exports = {
2+
// features: {
3+
// storyStoreV7: true,
4+
// },
25
stories: [
36
'../src/stories/**/*.@(story|stories).mdx',
47
'../src/stories/**/*.@(story|stories).@(ts|tsx|js|jsx)',
@@ -18,6 +21,28 @@ module.exports = {
1821
},
1922
],
2023
core: {
21-
builder: 'webpack5',
24+
builder: '@storybook/builder-vite',
25+
},
26+
/**
27+
* In preparation for the vite build plugin, add the needed config here.
28+
* @param config {import('vite').UserConfig}
29+
*/
30+
async viteFinal(config) {
31+
// The build fails to correctly minify the `ansi-to-html` module with esbuild, so we fallback to Terser.
32+
// It's a package used by "Storybook" for the Webpreview, so it's interesting why it fails.
33+
config.build.minify = 'terser';
34+
35+
if (config.optimizeDeps) {
36+
config.optimizeDeps.include = [
37+
...config.optimizeDeps.include,
38+
'@storybook/react/dist/esm/client/docs/config',
39+
'@storybook/react/dist/esm/client/preview/config',
40+
'@storybook/addon-docs/preview.js',
41+
'@storybook/addon-actions/preview.js',
42+
'@storybook/theming',
43+
'intersection-observer',
44+
];
45+
}
46+
return config;
2247
},
2348
};

‎.storybook/manager.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import { addons } from '@storybook/addons';
22
import { themes } from '@storybook/theming';
33
import { themeOptions } from './theme';
4+
import { ignoreErrorMessages } from './utils/ignore-errors';
45

56
addons.setConfig({
67
theme: {
78
...themes.dark,
89
...themeOptions,
910
},
1011
});
12+
13+
ignoreErrorMessages();

‎.storybook/preview.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import 'intersection-observer';
22
import 'tailwindcss/tailwind.css';
33
import { themes } from '@storybook/theming';
4+
import { ignoreErrorMessages } from './utils/ignore-errors';
45

56
export const parameters = {
67
docs: {
@@ -10,3 +11,7 @@ export const parameters = {
1011
expanded: true,
1112
},
1213
};
14+
15+
if (process.env.NODE_ENV !== 'test') {
16+
ignoreErrorMessages();
17+
}

‎.storybook/utils/ignore-errors.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/**
2+
* Storybook logs out some errors that are just noise for us, since we can't really do anything about it.
3+
* Instead of them cluttering the console, we filter them out by overwriting the `console.error` object.
4+
**/
5+
export const ignoreErrorMessages = () => {
6+
const logError = console.error.bind(console);
7+
const ignoreErrors = [
8+
'Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead.',
9+
'The pseudo class',
10+
];
11+
console.error = (...args) => {
12+
if (
13+
ignoreErrors.some((ignore) => {
14+
return args[0].startsWith(ignore);
15+
})
16+
) {
17+
return;
18+
}
19+
logError(...args);
20+
};
21+
};

0 commit comments

Comments
 (0)