Skip to content

Commit 16e8f48

Browse files
marbemacmarbemac
authored
chore: upgrade storybook (#186)
* chore: upgrade storybook, remove node-sass * missed this * require node >= 14 * use webpack 5 * meh, move to node 16 * bump stoplight/eslint-config * chore: run lint fix
1 parent 8b842f5 commit 16e8f48

20 files changed

+4876
-4852
lines changed

‎.circleci/config.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ version: 2
33
jobs:
44
test_node:
55
docker:
6-
- image: circleci/node:12
6+
- image: cimg/node:16.13
77
steps:
88
- checkout
99
- run: yarn

‎.storybook/addons.js

-1
This file was deleted.

‎.storybook/config.js

-3
This file was deleted.

‎.storybook/main.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
module.exports = {
2+
framework: '@storybook/react',
3+
stories: ['../src/__stories__/*.tsx'],
4+
addons: ['@storybook/addon-essentials'],
5+
core: {
6+
builder: "webpack5"
7+
}
8+
};

‎.storybook/manager.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { addons } from '@storybook/addons';
2+
import customTheme from './theme';
3+
4+
addons.setConfig({
5+
theme: customTheme,
6+
panelPosition: 'right',
7+
});

‎.storybook/preview-head.html

+4-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,4 @@
1-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
1+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
2+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap" rel="stylesheet" />
3+
<link rel="preconnect" href="https://kit.fontawesome.com" crossorigin="anonymous" />
4+
<script src="https://kit.fontawesome.com/1e1f25269b.js" crossorigin="anonymous" data-auto-replace-svg="nest"></script>

‎.storybook/preview.jsx

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import * as React from 'react';
2+
import { Box, Provider as MosaicProvider } from '@stoplight/mosaic';
3+
import { Title, Subtitle, Description, Primary, ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
4+
import customTheme from './theme';
5+
import { injectStyles } from '@stoplight/mosaic';
6+
7+
export const globalTypes = {
8+
theme: {
9+
name: 'Theme',
10+
description: 'Global theme for components',
11+
defaultValue: 'light',
12+
toolbar: {
13+
icon: 'circlehollow',
14+
items: ['light', 'dark'],
15+
},
16+
},
17+
};
18+
19+
const MosaicProviderDecorator = Story => {
20+
injectStyles();
21+
22+
return (
23+
<MosaicProvider>
24+
<Box mx="auto" py={20} px={8} style={{ maxWidth: 800 }}>
25+
<Story />
26+
</Box>
27+
</MosaicProvider>
28+
);
29+
};
30+
31+
export const decorators = [MosaicProviderDecorator];
32+
33+
export const parameters = {
34+
docs: {
35+
page: () => (
36+
<>
37+
<Title />
38+
<Subtitle />
39+
<Description />
40+
<Primary />
41+
<ArgsTable story={PRIMARY_STORY} />
42+
</>
43+
),
44+
theme: customTheme,
45+
},
46+
storySort: {
47+
order: ['Default'],
48+
},
49+
};

‎.storybook/theme.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { create } from '@storybook/theming/create';
2+
3+
export default create({
4+
base: 'light',
5+
6+
// brand
7+
brandTitle: 'JSON Schema Viewer',
8+
brandUrl: 'https://stoplight.io',
9+
brandImage: 'https://stoplight.io/images/home/logo-blue-black.png',
10+
11+
// UI
12+
appBg: 'white',
13+
appContentBg: 'white',
14+
appBorderColor: '#ced9e0',
15+
appBorderRadius: 0,
16+
colorSecondary: '#008eff',
17+
18+
// Typography
19+
fontBase:
20+
"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
21+
fontCode: "Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace",
22+
});

‎.storybook/webpack.config.js

-10
This file was deleted.

‎package.json

+21-16
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"**/*"
1818
],
1919
"engines": {
20-
"node": ">=10.18"
20+
"node": ">=16"
2121
},
2222
"scripts": {
2323
"build": "sl-scripts bundle --sourcemap",
@@ -29,7 +29,7 @@
2929
"release": "sl-scripts release",
3030
"release.docs": "sl-scripts release:docs",
3131
"release.dryRun": "sl-scripts release --dry-run --debug",
32-
"storybook": "start-storybook -p 9001",
32+
"storybook": "start-storybook -p 6006",
3333
"test": "jest",
3434
"test.prod": "yarn lint && yarn test --coverage --maxWorkers=2",
3535
"test.update": "yarn test --updateSnapshot",
@@ -55,15 +55,19 @@
5555
"lodash": "^4.17.19"
5656
},
5757
"devDependencies": {
58-
"@sambego/storybook-state": "^1.3.6",
58+
"@babel/core": "^7.16.12",
5959
"@size-limit/preset-big-lib": "^4.11.0",
60-
"@stoplight/eslint-config": "^1.2.0",
60+
"@stoplight/eslint-config": "3.0.0",
6161
"@stoplight/markdown-viewer": "^5.3.3",
6262
"@stoplight/mosaic": "^1.12.6",
6363
"@stoplight/mosaic-code-viewer": "^1.12.6",
6464
"@stoplight/scripts": "9.2.0",
65-
"@stoplight/storybook-config": "^2.0.6",
6665
"@stoplight/types": "^12.3.0",
66+
"@storybook/addon-essentials": "^6.4.14",
67+
"@storybook/builder-webpack5": "^6.4.14",
68+
"@storybook/core": "6.4.14",
69+
"@storybook/manager-webpack5": "^6.4.14",
70+
"@storybook/react": "^6.4.14",
6771
"@types/classnames": "^2.2.11",
6872
"@types/enzyme": "^3.10.8",
6973
"@types/jest": "^26.0.18",
@@ -72,31 +76,32 @@
7276
"@types/react": "16.9.56",
7377
"@types/react-dom": "16.9.13",
7478
"@types/treeify": "^1.0.0",
75-
"@typescript-eslint/eslint-plugin": "^4.9.1",
76-
"@typescript-eslint/parser": "^4.9.1",
79+
"@typescript-eslint/eslint-plugin": "^5.7.0",
80+
"@typescript-eslint/parser": "^5.7.0",
7781
"babel-jest": "^26.6.3",
7882
"babel-loader": "^8.2.2",
7983
"copyfiles": "^2.4.1",
8084
"enzyme": "^3.11.0",
8185
"enzyme-adapter-react-16": "^1.15.5",
8286
"enzyme-to-json": "^3.6.1",
83-
"eslint": "^7.15.0",
84-
"eslint-plugin-import": "^2.20.2",
85-
"eslint-plugin-jest": "^24.1.3",
86-
"eslint-plugin-prettier": "^3.1.3",
87-
"eslint-plugin-react": "^7.21.5",
88-
"eslint-plugin-react-hooks": "^4.2.0",
89-
"eslint-plugin-simple-import-sort": "^5.0.2",
87+
"eslint": "^8.4.1",
88+
"eslint-plugin-import": "^2.25.3",
89+
"eslint-plugin-jest": "^25.3.0",
90+
"eslint-plugin-prettier": "^4.0.0",
91+
"eslint-plugin-react": "^7.27.1",
92+
"eslint-plugin-react-hooks": "^4.3.0",
93+
"eslint-plugin-simple-import-sort": "^7.0.0",
9094
"jest": "^26.6.2",
9195
"jest-enzyme": "^7.1.2",
92-
"prettier": "^2.2.1",
96+
"prettier": "^2.5.1",
9397
"react": "^16.14.0",
9498
"react-dom": "^16.14.0",
9599
"rollup-plugin-terser": "^5.3.0",
96100
"size-limit": "^4.11.0",
97101
"treeify": "^1.1.0",
98102
"ts-jest": "^26.4.4",
99-
"typescript": "^4.0.5"
103+
"typescript": "4.5.5",
104+
"webpack": "^5.67.0"
100105
},
101106
"lint-staged": {
102107
"*.{ts,tsx}$": [

‎src/__stories__/Combiners.tsx

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { Story } from '@storybook/react';
2+
import { JSONSchema4 } from 'json-schema';
3+
import React from 'react';
4+
5+
import { JsonSchemaProps, JsonSchemaViewer } from '../components/JsonSchemaViewer';
6+
7+
const defaultSchema = require('../__fixtures__/default-schema.json');
8+
const allOfSchema = require('../__fixtures__/combiners/allOfs/base.json');
9+
const allOfComplexSchema = require('../__fixtures__/combiners/allOfs/complex.json');
10+
const oneOfWithArraySchema = require('../__fixtures__/combiners/oneof-with-array-type.json');
11+
const oneOfWithArraySchema2 = require('../__fixtures__/combiners/oneof-within-array-item.json');
12+
const anyOfObject = require('../__fixtures__/combiners/anyOf.json');
13+
14+
export default {
15+
component: JsonSchemaViewer,
16+
argTypes: {},
17+
};
18+
19+
const Template: Story<JsonSchemaProps> = ({ schema = defaultSchema as JSONSchema4, ...args }) => (
20+
<JsonSchemaViewer schema={schema} {...args} />
21+
);
22+
23+
export const SimpleAllOf = Template.bind({});
24+
SimpleAllOf.args = { schema: allOfSchema as JSONSchema4 };
25+
26+
export const CircularAllOf = Template.bind({});
27+
CircularAllOf.args = { schema: allOfComplexSchema as JSONSchema4 };
28+
29+
export const ArrayOneOf = Template.bind({});
30+
ArrayOneOf.args = { schema: oneOfWithArraySchema as JSONSchema4, renderRootTreeLines: true };
31+
32+
export const ArrayOneOf2 = Template.bind({});
33+
ArrayOneOf2.args = { schema: oneOfWithArraySchema2 as JSONSchema4, renderRootTreeLines: true };
34+
35+
export const ObjectAnyOf = Template.bind({});
36+
ObjectAnyOf.args = { schema: anyOfObject as JSONSchema4 };

‎src/__stories__/Default.tsx

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import { Box, Button, Flex, InvertTheme } from '@stoplight/mosaic';
2+
import { Story } from '@storybook/react';
3+
import { JSONSchema4 } from 'json-schema';
4+
import React from 'react';
5+
6+
import { JsonSchemaProps, JsonSchemaViewer } from '../components/JsonSchemaViewer';
7+
8+
const defaultSchema = require('../__fixtures__/default-schema.json');
9+
const stressSchema = require('../__fixtures__/stress-schema.json');
10+
const arrayOfComplexObjects = require('../__fixtures__/arrays/of-complex-objects.json');
11+
12+
export default {
13+
component: JsonSchemaViewer,
14+
argTypes: {},
15+
};
16+
17+
const Template: Story<JsonSchemaProps> = ({ schema = defaultSchema as JSONSchema4, ...args }) => (
18+
<JsonSchemaViewer schema={schema} {...args} />
19+
);
20+
21+
export const Default = Template.bind({});
22+
23+
export const CustomRowAddon = Template.bind({});
24+
CustomRowAddon.args = {
25+
renderRowAddon: () => (
26+
<Flex h="full" alignItems="center">
27+
<Button pl={1} mr={1} size="sm" appearance="minimal" icon="bullseye" />
28+
<input type="checkbox" />
29+
</Flex>
30+
),
31+
};
32+
33+
export const ArrayOfObjects = Template.bind({});
34+
ArrayOfObjects.args = { schema: arrayOfComplexObjects as JSONSchema4, renderRootTreeLines: true };
35+
36+
export const StressTest = Template.bind({});
37+
StressTest.args = { schema: stressSchema as JSONSchema4, defaultExpandedDepth: 7 };
38+
39+
export const ErrorBoundary = Template.bind({});
40+
ErrorBoundary.args = {
41+
schema: {
42+
'null (throws error)': null,
43+
'object (recovers from error)': defaultSchema,
44+
},
45+
};
46+
47+
export const InvalidTypes = Template.bind({});
48+
InvalidTypes.args = {
49+
schema: {
50+
type: 'object',
51+
// @ts-ignore
52+
properties: {
53+
id: {
54+
type: 'string',
55+
},
56+
address: {
57+
type: [
58+
// @ts-ignore
59+
'null',
60+
// @ts-ignore
61+
{
62+
type: 'object',
63+
properties: {
64+
taskId: {
65+
type: 'string',
66+
format: 'uuid',
67+
},
68+
},
69+
},
70+
],
71+
},
72+
},
73+
},
74+
};
75+
InvalidTypes.storyName = 'Invalid types';
76+
77+
export const DarkMode: Story<JsonSchemaProps> = ({ schema = defaultSchema as JSONSchema4, ...args }) => (
78+
<InvertTheme>
79+
<Box bg="canvas">
80+
<JsonSchemaViewer schema={schema} {...args} />
81+
</Box>
82+
</InvertTheme>
83+
);

0 commit comments

Comments
 (0)