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

Author: marbemac

.circleci/config.yml

@@ -3,7 +3,7 @@ version: 2
 jobs:
   test_node:
     docker:
-      - image: circleci/node:12
+      - image: cimg/node:16.13
     steps:
       - checkout
       - run: yarn

.storybook/addons.js

@@ -0,0 +1,8 @@
+module.exports = {
+  framework: '@storybook/react',
+  stories: ['../src/__stories__/*.tsx'],
+  addons: ['@storybook/addon-essentials'],
+  core: {
+    builder: "webpack5"
+  }
+};

.storybook/config.js

@@ -0,0 +1,7 @@
+import { addons } from '@storybook/addons';
+import customTheme from './theme';
+
+addons.setConfig({
+  theme: customTheme,
+  panelPosition: 'right',
+});

.storybook/main.js

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

.storybook/manager.js

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { Box, Provider as MosaicProvider } from '@stoplight/mosaic';
+import { Title, Subtitle, Description, Primary, ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
+import customTheme from './theme';
+import { injectStyles } from '@stoplight/mosaic';
+
+export const globalTypes = {
+  theme: {
+    name: 'Theme',
+    description: 'Global theme for components',
+    defaultValue: 'light',
+    toolbar: {
+      icon: 'circlehollow',
+      items: ['light', 'dark'],
+    },
+  },
+};
+
+const MosaicProviderDecorator = Story => {
+  injectStyles();
+
+  return (
+    <MosaicProvider>
+      <Box mx="auto" py={20} px={8} style={{ maxWidth: 800 }}>
+        <Story />
+      </Box>
+    </MosaicProvider>
+  );
+};
+
+export const decorators = [MosaicProviderDecorator];
+
+export const parameters = {
+  docs: {
+    page: () => (
+      <>
+        <Title />
+        <Subtitle />
+        <Description />
+        <Primary />
+        <ArgsTable story={PRIMARY_STORY} />
+      </>
+    ),
+    theme: customTheme,
+  },
+  storySort: {
+    order: ['Default'],
+  },
+};

.storybook/preview-head.html

@@ -0,0 +1,22 @@
+import { create } from '@storybook/theming/create';
+
+export default create({
+  base: 'light',
+
+  // brand
+  brandTitle: 'JSON Schema Viewer',
+  brandUrl: 'https://stoplight.io',
+  brandImage: 'https://stoplight.io/images/home/logo-blue-black.png',
+
+  // UI
+  appBg: 'white',
+  appContentBg: 'white',
+  appBorderColor: '#ced9e0',
+  appBorderRadius: 0,
+  colorSecondary: '#008eff',
+
+  // Typography
+  fontBase:
+    "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
+  fontCode: "Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace",
+});

.storybook/preview.jsx

@@ -17,7 +17,7 @@
     "**/*"
   ],
   "engines": {
-    "node": ">=10.18"
+    "node": ">=16"
   },
   "scripts": {
     "build": "sl-scripts bundle --sourcemap",
@@ -29,7 +29,7 @@
     "release": "sl-scripts release",
     "release.docs": "sl-scripts release:docs",
     "release.dryRun": "sl-scripts release --dry-run --debug",
-    "storybook": "start-storybook -p 9001",
+    "storybook": "start-storybook -p 6006",
     "test": "jest",
     "test.prod": "yarn lint && yarn test --coverage --maxWorkers=2",
     "test.update": "yarn test --updateSnapshot",
@@ -55,15 +55,19 @@
     "lodash": "^4.17.19"
   },
   "devDependencies": {
-    "@sambego/storybook-state": "^1.3.6",
+    "@babel/core": "^7.16.12",
     "@size-limit/preset-big-lib": "^4.11.0",
-    "@stoplight/eslint-config": "^1.2.0",
+    "@stoplight/eslint-config": "3.0.0",
     "@stoplight/markdown-viewer": "^5.3.3",
     "@stoplight/mosaic": "^1.12.6",
     "@stoplight/mosaic-code-viewer": "^1.12.6",
     "@stoplight/scripts": "9.2.0",
-    "@stoplight/storybook-config": "^2.0.6",
     "@stoplight/types": "^12.3.0",
+    "@storybook/addon-essentials": "^6.4.14",
+    "@storybook/builder-webpack5": "^6.4.14",
+    "@storybook/core": "6.4.14",
+    "@storybook/manager-webpack5": "^6.4.14",
+    "@storybook/react": "^6.4.14",
     "@types/classnames": "^2.2.11",
     "@types/enzyme": "^3.10.8",
     "@types/jest": "^26.0.18",
@@ -72,31 +76,32 @@
     "@types/react": "16.9.56",
     "@types/react-dom": "16.9.13",
     "@types/treeify": "^1.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.9.1",
-    "@typescript-eslint/parser": "^4.9.1",
+    "@typescript-eslint/eslint-plugin": "^5.7.0",
+    "@typescript-eslint/parser": "^5.7.0",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
     "copyfiles": "^2.4.1",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
     "enzyme-to-json": "^3.6.1",
-    "eslint": "^7.15.0",
-    "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-jest": "^24.1.3",
-    "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-react": "^7.21.5",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-simple-import-sort": "^5.0.2",
+    "eslint": "^8.4.1",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jest": "^25.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.27.1",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-simple-import-sort": "^7.0.0",
     "jest": "^26.6.2",
     "jest-enzyme": "^7.1.2",
-    "prettier": "^2.2.1",
+    "prettier": "^2.5.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "rollup-plugin-terser": "^5.3.0",
     "size-limit": "^4.11.0",
     "treeify": "^1.1.0",
     "ts-jest": "^26.4.4",
-    "typescript": "^4.0.5"
+    "typescript": "4.5.5",
+    "webpack": "^5.67.0"
   },
   "lint-staged": {
     "*.{ts,tsx}$": [