Skip to content

Commit b6804cd

Browse files
tajotajo
committed
Update all deps and fix lint/tsc
1 parent e1a54b5 commit b6804cd

24 files changed

+5196
-3685
lines changed

‎.eslintrc.js

+19-19
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,34 @@
1+
// eslint-disable-next-line header/header
12
module.exports = {
2-
plugins: [
3-
'header',
4-
],
5-
parser: "@typescript-eslint/parser", // Specifies the ESLint parser
3+
plugins: ['header'],
4+
parser: '@typescript-eslint/parser', // Specifies the ESLint parser
65
extends: [
7-
"plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
8-
"plugin:@typescript-eslint/recommended", // Uses the recommended rules from the @typescript-eslint/eslint-plugin
9-
"prettier/@typescript-eslint", // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
10-
"plugin:prettier/recommended" // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
6+
'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
7+
'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
8+
'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
119
],
1210
parserOptions: {
1311
ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
14-
sourceType: "module", // Allows for the use of imports
12+
sourceType: 'module', // Allows for the use of imports
1513
ecmaFeatures: {
16-
jsx: true // Allows for the parsing of JSX
17-
}
14+
jsx: true, // Allows for the parsing of JSX
15+
},
1816
},
1917
rules: {
2018
// Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
2119
// e.g. "@typescript-eslint/explicit-function-return-type": "off",
22-
"react/prop-types": "off",
23-
"@typescript-eslint/ban-ts-ignore": "off",
24-
"@typescript-eslint/explicit-function-return-type": "off",
25-
"@typescript-eslint/no-explicit-any": "off",
26-
"@typescript-eslint/no-empty-function": "off",
20+
'react/prop-types': 'off',
21+
'@typescript-eslint/ban-ts-ignore': 'off',
22+
'@typescript-eslint/explicit-function-return-type': 'off',
23+
'@typescript-eslint/no-explicit-any': 'off',
24+
'@typescript-eslint/no-empty-function': 'off',
25+
'@typescript-eslint/ban-ts-comment': 'off',
26+
'@typescript-eslint/explicit-module-boundary-types': 'off',
2727
'header/header': [2, 'LICENSE-HEAD'],
2828
},
2929
settings: {
3030
react: {
31-
version: "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
32-
}
33-
}
31+
version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
32+
},
33+
},
3434
};

‎.storybook/webpack.config.js

+1-9
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,4 @@
11
module.exports = ({config}) => {
2-
config.module.rules.push({
3-
test: /\.(ts|tsx)$/,
4-
use: [
5-
{
6-
loader: require.resolve('awesome-typescript-loader'),
7-
},
8-
],
9-
});
10-
config.resolve.extensions.push('.ts', '.tsx');
2+
config.node = { fs: 'empty' };
113
return config;
124
};

‎examples/__tests__/basic.test.ts

+9-9
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,11 @@ export default () => {
3535
await page.click('#size_compact');
3636
const fontSize = await page.$eval(
3737
'#example-btn',
38-
e => (e as any).style['font-size']
38+
(e) => (e as any).style['font-size']
3939
);
4040
expect(fontSize).toBe('14px');
4141
const editorTextarea = await page.$('[data-testid="rv-editor"] textarea');
42-
const text = await page.evaluate(el => el.value, editorTextarea);
42+
const text = await page.evaluate((el) => el.value, editorTextarea);
4343
expect(text).toBe(codeOutput);
4444
});
4545

@@ -57,11 +57,11 @@ export default () => {
5757
await page.click('#disabled');
5858
const isDisabled = await page.$eval(
5959
'#example-btn',
60-
e => (e as any).disabled
60+
(e) => (e as any).disabled
6161
);
6262
expect(isDisabled).toBeTruthy();
6363
const editorTextarea = await page.$('[data-testid="rv-editor"] textarea');
64-
const text = await page.evaluate(el => el.value, editorTextarea);
64+
const text = await page.evaluate((el) => el.value, editorTextarea);
6565
expect(text).toBe(codeOutput);
6666
});
6767

@@ -86,7 +86,7 @@ export default () => {
8686
text: childrenPropValue,
8787
});
8888
const editorTextarea = await page.$('[data-testid="rv-editor"] textarea');
89-
const text = await page.evaluate(el => el.value, editorTextarea);
89+
const text = await page.evaluate((el) => el.value, editorTextarea);
9090
expect(text).toBe(codeOutput);
9191
});
9292

@@ -119,7 +119,7 @@ export default () => {
119119
});
120120
expect(text).toBe('foo');
121121
const editorTextarea = await page.$('[data-testid="rv-editor"] textarea');
122-
const editorText = await page.evaluate(el => el.value, editorTextarea);
122+
const editorText = await page.evaluate((el) => el.value, editorTextarea);
123123
expect(editorText).toBe(codeOutput);
124124
});
125125
});
@@ -159,7 +159,7 @@ export default () => {
159159
await page.waitFor(300); // waiting for debounce
160160
await page.click('[data-testid="rv-format"]');
161161
const editorTextarea = await page.$('[data-testid="rv-editor"] textarea');
162-
const text = await page.evaluate(el => el.value, editorTextarea);
162+
const text = await page.evaluate((el) => el.value, editorTextarea);
163163
expect(text).toBe(formattedCode);
164164
});
165165
});
@@ -190,12 +190,12 @@ export default () => {
190190
await page.waitFor(300); // waiting for debounce
191191
const isButtonDisabled = await page.$eval(
192192
'#example-btn',
193-
e => (e as any).disabled
193+
(e) => (e as any).disabled
194194
);
195195
expect(isButtonDisabled).toBeTruthy();
196196
const isDisabledChecked = await page.$eval(
197197
'#disabled',
198-
el => (el as any).checked
198+
(el) => (el as any).checked
199199
);
200200
expect(isDisabledChecked).toBeTruthy();
201201
});

‎examples/__tests__/custom-prop.test.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export default () => {
3131
);
3232
}`;
3333
const editorTextarea = await page.$('[data-testid="rv-editor"] textarea');
34-
const text = await page.evaluate(el => el.value, editorTextarea);
34+
const text = await page.evaluate((el) => el.value, editorTextarea);
3535
expect(text).toBe(codeOutput);
3636
});
3737

@@ -50,10 +50,10 @@ export default () => {
5050
}`;
5151
await page.click('#heart-4');
5252
await page.waitFor(300); // debounce time
53-
const inputValue = await page.$eval('input', e => (e as any).value);
53+
const inputValue = await page.$eval('input', (e) => (e as any).value);
5454
expect(inputValue).toBe('4');
5555
const editorTextarea = await page.$('[data-testid="rv-editor"] textarea');
56-
const text = await page.evaluate(el => el.value, editorTextarea);
56+
const text = await page.evaluate((el) => el.value, editorTextarea);
5757
expect(text).toBe(codeOutput);
5858
});
5959
});

‎examples/__tests__/state-hook.test.ts

+7-7
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,11 @@ export default () => {
3636
await page.waitFor(300); // waiting for debounce
3737

3838
const valueKnob = await page.$('[data-testid="rv-knob-value"] textarea');
39-
const valueText = await page.evaluate(el => el.value, valueKnob);
39+
const valueText = await page.evaluate((el) => el.value, valueKnob);
4040
expect(valueText).toBe('HelloFoo');
4141

4242
const editorTextarea = await page.$('[data-testid="rv-editor"] textarea');
43-
const text = await page.evaluate(el => el.value, editorTextarea);
43+
const text = await page.evaluate((el) => el.value, editorTextarea);
4444
expect(text).toBe(codeOutput);
4545
});
4646

@@ -63,11 +63,11 @@ export default () => {
6363
await page.waitFor(300); // waiting for debounce
6464

6565
const input = await page.$('#example-input');
66-
const inputValue = await page.evaluate(el => el.value, input);
66+
const inputValue = await page.evaluate((el) => el.value, input);
6767
expect(inputValue).toBe('HelloFoo');
6868

6969
const editorTextarea = await page.$('[data-testid="rv-editor"] textarea');
70-
const text = await page.evaluate(el => el.value, editorTextarea);
70+
const text = await page.evaluate((el) => el.value, editorTextarea);
7171
expect(text).toBe(codeOutput);
7272
});
7373

@@ -98,19 +98,19 @@ export default () => {
9898
);
9999
}`;
100100
const initialEditor = await page.evaluate(
101-
el => el.value,
101+
(el) => el.value,
102102
await page.$('[data-testid="rv-editor"] textarea')
103103
);
104104
expect(initialEditor).toBe(initialCode);
105105

106106
await page.click('#editable');
107107
const isDisabled = await page.$eval(
108108
'#example-input',
109-
e => (e as any).disabled
109+
(e) => (e as any).disabled
110110
);
111111
expect(isDisabled).toBeTruthy();
112112
const resultEditor = await page.evaluate(
113-
el => el.value,
113+
(el) => el.value,
114114
await page.$('[data-testid="rv-editor"] textarea')
115115
);
116116
expect(resultEditor).toBe(resultCode);

‎examples/__tests__/theming.test.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export default () => {
3434
);
3535
}`;
3636
const initialEditor = await page.evaluate(
37-
el => el.value,
37+
(el) => el.value,
3838
await page.$('[data-testid="rv-editor"] textarea')
3939
);
4040
expect(initialEditor).toBe(initialCode);
@@ -47,7 +47,7 @@ export default () => {
4747
'hotpink'
4848
);
4949
const hotpinkEditor = await page.evaluate(
50-
el => el.value,
50+
(el) => el.value,
5151
await page.$('[data-testid="rv-editor"] textarea')
5252
);
5353
expect(hotpinkEditor).toBe(hotpinkCode);
@@ -56,13 +56,13 @@ export default () => {
5656
it('should reset provider values and get the initial state of code and component', async () => {
5757
await page.click('[data-testid="rv-reset"]');
5858
const editor = await page.evaluate(
59-
el => el.value,
59+
(el) => el.value,
6060
await page.$('[data-testid="rv-editor"] textarea')
6161
);
6262
expect(editor).toBe(initialCode);
6363
const background = await page.$eval(
6464
'#example-btn',
65-
e => (e as any).style['background']
65+
(e) => (e as any).style['background']
6666
);
6767
expect(background).toBe('rgb(39, 110, 241)');
6868
});

‎examples/__tests__/view.test.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export default () => {
2929
);
3030
}`;
3131
const text = await page.evaluate(
32-
el => el.value,
32+
(el) => el.value,
3333
await page.$('[data-testid="rv-editor"] textarea')
3434
);
3535
expect(text).toBe(codeOutput);

‎examples/custom-prop.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const Slider: React.FC<{
4242
set: (val: number, propName: string) => void;
4343
}> = ({value, set}) => {
4444
// debouncing the knob value so it's always interactive
45-
const [rangeValue, setRangeValue] = useValueDebounce(value, val =>
45+
const [rangeValue, setRangeValue] = useValueDebounce(value, (val) =>
4646
set(val, 'value')
4747
);
4848
return (
@@ -63,7 +63,7 @@ const Slider: React.FC<{
6363
max="5"
6464
step="1"
6565
value={rangeValue as number}
66-
onChange={e => {
66+
onChange={(e) => {
6767
setRangeValue(parseInt(e.target.value, 10));
6868
}}
6969
/>

‎examples/showcase-components/rating.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ export const Rating: React.FC<TRatingProps> = ({value, onChange}) => {
6767
tabIndex={0}
6868
style={{display: 'flex', flexWrap: 'nowrap', padding: 0}}
6969
>
70-
{[...Array(5).keys()].map(index => (
70+
{[...Array(5).keys()].map((index) => (
7171
<Heart
7272
key={index}
7373
active={hovered === 0 ? value > index : hovered > index}

‎examples/theming.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export const getActiveTheme = (
4444
initialValues: {[key: string]: string}
4545
) => {
4646
const activeValues: {[key: string]: string} = {};
47-
Object.keys(initialValues).forEach(key => {
47+
Object.keys(initialValues).forEach((key) => {
4848
activeValues[key] = initialValues[key];
4949
if (values && values[key]) {
5050
activeValues[key] = values[key];
@@ -58,7 +58,7 @@ export const getThemeDiff = (
5858
initialValues: {[key: string]: string}
5959
) => {
6060
const diff: {[key: string]: string} = {};
61-
Object.keys(values).forEach(key => {
61+
Object.keys(values).forEach((key) => {
6262
if (
6363
initialValues[key] &&
6464
values[key] &&
@@ -86,7 +86,7 @@ const ColorInput: React.FC<TColorInputProps> = ({
8686
>
8787
<div style={{width: '160px'}}>
8888
<Editor
89-
onChange={val => {
89+
onChange={(val) => {
9090
setColor(val);
9191
}}
9292
data-testid={themeKey}
@@ -126,13 +126,13 @@ const ThemeEditor: React.FC<TThemeEditorProps> = ({theme, set}) => {
126126
return (
127127
<React.Fragment>
128128
<H3>Theme Editor</H3>
129-
{themeKeys.map(key => {
129+
{themeKeys.map((key) => {
130130
return (
131131
<ColorInput
132132
key={key}
133133
themeKey={key}
134134
globalColor={activeTheme[key]}
135-
globalSet={color => {
135+
globalSet={(color) => {
136136
const diff = getThemeDiff(
137137
{
138138
...theme,
@@ -155,16 +155,16 @@ export const provider = {
155155
// write a visitor that gets the provider value out of the AST tree
156156
parse: (astRoot: t.File): TProviderValue => {
157157
const newThemeValues: Partial<TTheme> = {};
158-
traverse(astRoot, {
158+
traverse(astRoot as any, {
159159
JSXOpeningElement(path) {
160160
const identifier = path.node.name as t.JSXIdentifier;
161161
const attrs = path.node.attributes as t.JSXAttribute[];
162162
if (identifier.name === 'ThemeProvider' && attrs.length > 0) {
163-
const colorsAttr = attrs.find(attr => attr.name.name === 'colors');
163+
const colorsAttr = attrs.find((attr) => attr.name.name === 'colors');
164164
if (colorsAttr) {
165165
const colors = (colorsAttr.value as any).expression.properties;
166166
colors.forEach((prop: t.ObjectProperty) => {
167-
const name: keyof typeof defaultTheme = prop.key.name;
167+
const name: keyof typeof defaultTheme = (prop.key as any).name;
168168
const value = (prop.value as t.StringLiteral).value;
169169
if (defaultTheme[name] !== value) {
170170
newThemeValues[name] = value;

0 commit comments

Comments
 (0)