diff --git a/.storybook/config.tsx b/.storybook/config.tsx index f12e4263b..b72ea8247 100644 --- a/.storybook/config.tsx +++ b/.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 => ( - // - // theme={crmTheme} - // componentTheme={componentTheme} - // > - // {/* */} <> {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); diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index a8e40e2f9..97b7f896b 100644 --- a/.storybook/webpack.config.js +++ b/.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; +// }; diff --git a/examples/speed/package.json b/examples/speed/package.json index dee1367af..8657ea314 100644 --- a/examples/speed/package.json +++ b/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" + ] } diff --git a/examples/speed/src/App.jsx b/examples/speed/src/App.jsx index 3d6625f92..b38d399af 100644 --- a/examples/speed/src/App.jsx +++ b/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,6 +31,7 @@ class App extends PureComponent { }; render() { + console.log(globalStyle.robotoFontFamily); return ( - + - -
{ - this.setState({ - newColor: color, - }); - }} - /> - - -