Update storybook V5

.storybook/config.tsx

@@ -6,17 +6,13 @@ import { addDecorator, configure } from '@storybook/react';
 import * as React from 'react';
 import { withThemes } from 'storybook-styled-components';
 import { createGlobalStyle, css } from 'styled-components';
-import { globalStyle } from '../packages/theme';
+import { globalStyle } from '../packages/theme/';
 import { combinedWithComponent } from '../packages/theme/src';
-import crmTheme from '../packages/theme/src/theme/crm/';
+import crmTheme from '../packages/theme/src/theme/crm';
 import componentTheme from '../packages/theme/src/theme/crm/components';
 import mainTheme from '../packages/theme/src/theme/default';
 
-function loadStories() {
-  req.keys().forEach(filename => req(filename));
-}
-
-const themes = {
+const vitalThemes = {
   Main: combinedWithComponent(mainTheme),
   CRM: combinedWithComponent(crmTheme, componentTheme),
 };
@@ -39,55 +35,14 @@ const GlobalStyle = createGlobalStyle`
   ${fontFamily};
 `;
 
-export const baseFonts = {
-  fontFamily:
-    '-apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Lucida Grande", "Arial", sans-serif',
-  color: '#444',
-  WebkitFontSmoothing: 'antialiased',
-};
-
-export const monoFonts = {
-  fontFamily:
-    '"Operator Mono", "Fira Code Retina", "Fira Code", "FiraCode-Retina", "Andale Mono", "Lucida Console", Consolas, Monaco, monospace',
-  color: '#444',
-  WebkitFontSmoothing: 'antialiased',
-};
-
 addDecorator(withInfo);
 addDecorator(
   withOptions({
-    hierarchySeparator: /\//,
-    hierarchyRootSeparator: /\|/,
     name: 'Vital UI Kit React',
     url: '#',
     addonPanelInRight: false,
     sortStoriesByKind: true,
     sidebarAnimations: false,
-    theme: {
-      mainBackground: '#112 linear-gradient(to right, #112, #333)',
-      mainBorder: '1px solid rgba(255,255,255,0.1)',
-      mainBorderColor: 'rgba(255,255,255,0.1)',
-      mainBorderRadius: 4,
-      mainFill: 'rgba(255,255,255,0.1)',
-      barFill: 'rgba(0,0,0,1)',
-      barSelectedColor: 'rgba(255,255,255,0.4)',
-      inputFill: 'rgba(0,0,0,1)',
-      mainTextFace: baseFonts.fontFamily,
-      mainTextColor: '#efefef',
-      dimmedTextColor: 'rgba(255,255,255,0.4)',
-      highlightColor: '#9fdaff',
-      successColor: '#0edf62',
-      failColor: '#ff3f3f',
-      warnColor: 'orange',
-      mainTextSize: 13,
-      monoTextFace: monoFonts.fontFamily,
-      layoutMargin: 10,
-      overlayBackground:
-        'linear-gradient(to bottom right, rgba(17, 17, 34, 0.6), rgba(51, 51, 51, 0.8))',
-      brand: {
-        background: 'rgba(0,0,0,1)',
-      },
-    },
     styles: stylesheet => ({
       ...stylesheet,
       button: {
@@ -103,18 +58,18 @@ addDecorator(
 );
 
 addDecorator(story => (
-  // <ThemeProvider<typeof crmTheme>
-  //   theme={crmTheme}
-  //   componentTheme={componentTheme}
-  // >
-  // {/* </ThemeProvider> */}
   <>
     <GlobalStyle />
     {story()}
   </>
 ));
-addDecorator(withThemes(themes));
+addDecorator(withThemes(vitalThemes));
 // automatically import all files ending in *.stories.js
 // @ts-ignore
 const req = require.context('../packages', true, /.stories.tsx$/);
+
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
 configure(loadStories, module);

.storybook/webpack.config.js

@@ -1,18 +1,18 @@
 const path = require('path');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
-module.exports = (defaultConfig, env, config) => {
+module.exports = ({ config, mode }) => {
   //babel-loader@8 installed and @babel/core@7
-  defaultConfig.module.rules[0].use[0].loader = require.resolve(
+  config.module.rules[0].use[0].loader = require.resolve(
     'babel-loader',
   );
 
-  defaultConfig.module.rules[0].use[0].options.presets = [
+  config.module.rules[0].use[0].options.presets = [
     require.resolve('@babel/preset-react'),
     require.resolve('@babel/preset-env'),
   ];
 
   // any plugin you want to add
-  defaultConfig.module.rules[0].use[0].options.plugins = [
+  config.module.rules[0].use[0].options.plugins = [
     require.resolve('@babel/plugin-proposal-object-rest-spread'),
     require.resolve('babel-plugin-styled-components'),
   ];
@@ -70,3 +70,43 @@ module.exports = (defaultConfig, env, config) => {
   config.resolve.extensions.push('.ts', '.tsx', '.json');
   return config;
 };
+// const path = require('path');
+// module.exports = ({ config }) => {
+//   config.module.rules.push({
+//     test: /\.(ts|tsx)$/,
+//     use: [
+//       {
+//         loader: require.resolve('babel-loader'),
+//         options: {
+//           babelrc: false,
+//           presets: [
+//             [
+//               'react-app',
+//               {
+//                 flow: false,
+//                 typescript: true,
+//               },
+//             ],
+//           ],
+//           plugins: ['babel-plugin-styled-components'],
+//         },
+//       },
+//       {
+//         loader: require.resolve('react-docgen-typescript-loader'),
+//       },
+//       {
+//         loader: require.resolve(
+//           '@storybook/addon-storysource/loader',
+//         ),
+//         options: { parser: 'typescript' },
+//       },
+//     ],
+//   });
+//   config.resolve.plugins = [
+//     new TsconfigPathsPlugin({
+//       configFile: 'tsconfig.storybook.json',
+//     }),
+//   ];
+//   config.resolve.extensions.push('.ts', '.tsx');
+//   return config;
+// };

examples/speed/package.json

@@ -4,13 +4,13 @@
   "private": true,
   "homepage": "./",
   "dependencies": {
-    "@vital-ui/react": "*",
+    "@vital-ui/react": "latest",
     "formik": "^0.11.11",
     "rc-color-picker": "^1.2.6",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
     "react-markdown": "^3.3.0",
-    "react-scripts": "^1.1.4",
+    "react-scripts": "2.1.8",
     "styled-components": "4.1.3"
   },
   "scripts": {
@@ -20,7 +20,10 @@
     "eject": "react-scripts eject",
     "now-build": "yarn run build"
   },
-  "devDependencies": {
-    "eslint": "^5.0.1"
-  }
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
 }

examples/speed/src/App.jsx

@@ -18,6 +18,11 @@ const GlobalStyle = createGlobalStyle`
   ${globalStyle.reset};
   ${globalStyle.vitalTypographyStyle};
   ${globalStyle.robotoFontFamily};
+
+  body {
+    font-family: 'Roboto', 'Helvetica', 'PingFang TC', 'Arial',
+      'sans-serif', 'Microsoft JhengHei', 'Heiti TC';
+  }
 `;
 
 class App extends PureComponent {
@@ -26,31 +31,34 @@ class App extends PureComponent {
   };
 
   render() {
+    console.log(globalStyle.robotoFontFamily);
     return (
       <ThemeProvider
         theme={{
           ...defaultTheme,
           ...colorPaletteGenerator(this.state.newColor),
         }}
       >
-        <Layout>
+        <React.Fragment>
           <GlobalStyle />
-          <Layout.Header>
-            <Header
-              onChangeColor={color => {
-                this.setState({
-                  newColor: color,
-                });
-              }}
-            />
-          </Layout.Header>
-          <Layout.Sidebar style={{ overflow: 'scroll' }}>
-            <Nav />
-          </Layout.Sidebar>
-          <Layout.Content>
-            <Main />
-          </Layout.Content>
-        </Layout>
+          <Layout>
+            <Layout.Header>
+              <Header
+                onChangeColor={color => {
+                  this.setState({
+                    newColor: color,
+                  });
+                }}
+              />
+            </Layout.Header>
+            <Layout.Sidebar style={{ overflow: 'scroll' }}>
+              <Nav />
+            </Layout.Sidebar>
+            <Layout.Content>
+              <Main />
+            </Layout.Content>
+          </Layout>
+        </React.Fragment>
       </ThemeProvider>
     );
   }