Move Storybook back to root again (#111)

* move everything back to root

* strip magic from storybook-components. Adjust root package scripts

* Mute typings for withReadme

* Fix netlify build path

* Fix storybook decorator injection condition

packages/flame/.storybook/components/ExampleBox.js → .storybook/components/ExampleBox.js

@@ -1,44 +1,41 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import { css } from '@styled-system/css';
+import React from 'react';
 
 const BoxColumn = ({ ...restProps }) => (
   <div
-    css={css({
+    style={{
       display: 'inline-block',
       width: '192px',
-      mr: 2,
-      mb: 2,
       textAlign: 'center',
-    })}
+    }}
+    className="fl-mb-2 fl-mr-2"
     {...restProps}
   />
 );
 
 const BoxExample = ({ ...restProps }) => (
   <div
-    css={css({
-      p: 2,
-      borderTopLeftRadius: 'radius-1',
-      borderTopRightRadius: 'radius-1',
+    style={{
       border: '1px solid #e1e4e5',
       backgroundColor: '#f3f3f3',
-    })}
+      borderTopLeftRadius: '.1875rem',
+      borderTopRightRadius: '.1875rem',
+    }}
+    className="fl-p-2"
     {...restProps}
   />
 );
 
 const BoxCode = ({ ...restProps }) => (
   <div
-    css={css({
+    style={{
       padding: '.75rem',
       borderBottomLeftRadius: '.1875rem',
       borderBottomRightRadius: '.1875rem',
       borderLeft: '1px solid #e1e4e5',
       borderRight: '1px solid #e1e4e5',
       borderBottom: '1px solid #e1e4e5',
       background: '#fff',
-    })}
+    }}
     {...restProps}
   />
 );

packages/flame/.storybook/components/SpacedGroup.d.ts → .storybook/components/SpacedGroup.d.ts

@@ -1,4 +1,4 @@
-import { FlameFlexProps } from '../../src/Core';
+import { FlameFlexProps } from '../../packages/flame/src/Core';
 
 export interface SpacedGroupProps extends FlameFlexProps {}
 export const SpacedGroup: React.FC<SpacedGroupProps>;

packages/flame/.storybook/components/SpacedGroup.js → .storybook/components/SpacedGroup.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { Box, Flex } from '../../src/Core';
+import { Box, Flex } from '../../packages/flame/src/Core';
 
 const SpacedGroup = ({ flexDirection = 'row', children, ...restProps }) => {
   const nextChildren = React.Children.map(children, (child, index) => {

.storybook/components/Ul.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const Ul = (...restProps) => (
+  <ul
+    style={{
+      listStyle: 'none',
+      margin: 'none',
+      padding: 'none',
+    }}
+    {...restProps}
+  />
+);
+
+export { Ul };

packages/flame/.storybook/main.js → .storybook/main.js

@@ -5,8 +5,15 @@ const sass = require('sass');
 const packageInfo = require('../package.json');
 
 module.exports = {
-  stories: ['../src/**/story.tsx'],
-  addons: ['storybook-readme/register', '@storybook/addon-actions/register'],
+  stories: [
+    '../packages/flame/src/**/story.tsx',
+    '../packages/flame-css/stories/*.stories.@(mdx|tsx)',
+  ],
+  addons: [
+    'storybook-readme/register',
+    '@storybook/addon-actions/register',
+    '@storybook/addon-docs',
+  ],
   webpackFinal: config => {
     config.module.rules.push({
       test: /\.(ts|tsx)$/,
@@ -49,7 +56,10 @@ module.exports = {
           loader: require.resolve('postcss-loader'),
           options: {
             ident: 'postcss',
-            plugins: () => [atImport(), autoprefixer({ browsers: packageInfo.browserslist })],
+            plugins: () => [
+              atImport(),
+              autoprefixer({ overrideBrowserslist: packageInfo.browserslist }),
+            ],
           },
         },
         {

packages/flame-css/.storybook/preview-head.html → .storybook/preview-head.html

@@ -8,6 +8,7 @@
       display: none;
     }
   }
+  html,
   body {
     font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif;
   }

packages/flame/.storybook/preview.js → .storybook/preview.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { addDecorator, addParameters } from '@storybook/react';
 import { Global } from '@emotion/core';
-import { FlameTheme, FlameGlobalStyles, Box } from '../src/Core';
-import { Select } from '../src/Select';
+import { FlameTheme, FlameGlobalStyles, Box } from '../packages/flame/src/Core';
+import { Select } from '../packages/flame/src/Select';
 // @TODO: Fix stories that are still using css classes and flush this
 import './stories.scss';
 
@@ -48,7 +48,13 @@ class FlameStyling extends React.Component {
   }
 }
 
-const FlameStylingDecorator = storyFn => <FlameStyling>{storyFn()}</FlameStyling>;
+const FlameStylingDecorator = (storyFn, context) => {
+  if (!context.id.includes('flame-css')) {
+    return <FlameStyling>{storyFn()}</FlameStyling>;
+  }
+
+  return storyFn();
+};
 
 const headers = ['Theme', 'Components'];
 

packages/flame/.storybook/stories.scss → .storybook/stories.scss

@@ -1,4 +1,5 @@
-@import '../../packages/flame-tokens/partials/index.scss';
+@import '../packages/flame-tokens/partials/index.scss';
+@import '../packages/flame-css/src/index.scss';
 
 // Required imports for state placeholders use
 
@@ -11,27 +12,27 @@
 }
 
 .example {
-  margin-bottom: $cr-spacing-2;
+  margin-bottom: $fl-spacing-2;
 }
 
 .example--col {
   display: inline-block;
   width: 192px;
-  margin-right: $cr-spacing-2;
+  margin-right: $fl-spacing-2;
   text-align: center;
 }
 
 .example__block {
-  padding: $cr-spacing-2;
-  border-top-left-radius: $cr-radius-1;
-  border-top-right-radius: $cr-radius-1;
+  padding: $fl-spacing-2;
+  border-top-left-radius: $fl-radius-1;
+  border-top-right-radius: $fl-radius-1;
   border: 1px solid $cr-snow-300;
   background-color: $cr-snow-200;
 }
 
 .example__block--full-rounded {
-  border-bottom-left-radius: $cr-radius-1;
-  border-bottom-right-radius: $cr-radius-1;
+  border-bottom-left-radius: $fl-radius-1;
+  border-bottom-right-radius: $fl-radius-1;
 }
 
 .example__block--gray {
@@ -49,7 +50,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: $cr-spacing-2 0;
+  padding: $fl-spacing-2 0;
   color: $cr-maple;
 }
 
@@ -60,17 +61,17 @@
 .example__block--dashed::after {
   border-left: 2px dashed $cr-maple;
   content: '';
-  padding: $cr-spacing-2 $cr-spacing-1;
+  padding: $fl-spacing-2 $fl-spacing-1;
 }
 
 .example__block--dashed::before {
   border-right: 2px dashed $cr-maple;
   content: '';
-  padding: $cr-spacing-2 $cr-spacing-1;
+  padding: $fl-spacing-2 $fl-spacing-1;
 }
 
 .example__code {
-  padding: $cr-spacing-2;
+  padding: $fl-spacing-2;
   border-bottom-left-radius: $cr-radius-1;
   border-bottom-right-radius: $cr-radius-1;
   border-left: 1px solid $cr-snow-300;
@@ -119,7 +120,7 @@
 .sibling-spacing {
   > *:first-child,
   > * + * {
-    margin-right: $cr-spacing-2;
+    margin-right: $fl-spacing-2;
   }
 }
 
@@ -133,14 +134,14 @@
 
 .flag-wrapper {
   display: inline-block;
-  padding: $cr-spacing-1;
+  padding: $fl-spacing-1;
 
   span {
     display: block;
   }
 
   svg {
-    padding: $cr-spacing-1;
+    padding: $fl-spacing-1;
 
     &:hover {
       background: rgba(255, 192, 203, 0.5);
@@ -150,7 +151,7 @@
 
 .flag-sprite-listing {
   svg {
-    padding: $cr-spacing-1;
+    padding: $fl-spacing-1;
   }
 }
 
@@ -180,7 +181,7 @@
 
   td,
   th {
-    padding: $cr-spacing-1;
+    padding: $fl-spacing-1;
     border-bottom: 1px solid $cr-snow-300;
 
     &:not(:first-child) {
@@ -189,7 +190,7 @@
   }
 
   th {
-    padding: $cr-spacing-2 $cr-spacing-1;
+    padding: $fl-spacing-2 $fl-spacing-1;
   }
 }
 

netlify.toml

@@ -1,4 +1,4 @@
 [build]
   command = "yarn build:storybook"
-  publish = "packages/flame/storybook-static"
+  publish = "storybook-static"
   environment = { YARN_VERSION = "1.17.3" }

package.json

@@ -19,10 +19,10 @@
     "test:ci": "yarn test --coverage --runInBand && codecov",
     "typecheck": "tsc",
     "precommit": "lint-staged",
-    "dev": "yarn && concurrently --kill-others 'yarn dev:tokens' 'yarn dev:themes' 'lerna exec --scope \"@lightspeed/flame\" yarn storybook'",
+    "dev": "yarn && concurrently --kill-others 'yarn dev:tokens' 'yarn dev:themes' 'yarn start-storybook -p 6006'",
     "dev:themes": "chokidar './packages/flame/themes/**/*.ts' -c 'lerna run --scope @lightspeed/flame build:themes'",
     "dev:tokens": "chokidar './packages/flame-tokens/src/*.ts' -c 'lerna run --scope @lightspeed/flame-tokens prepublish'",
-    "build:storybook": "yarn bootstrap && lerna exec --scope \"@lightspeed/flame\" yarn build-storybook",
+    "build:storybook": "yarn bootstrap && build-storybook -c .storybook",
     "lerna:version": "lerna version --no-push",
     "lerna:version:revert": "./scripts/revert-lerna-version",
     "version": "node ./scripts/prepare-release",
@@ -31,12 +31,13 @@
     "release-and-publish": "yarn release && yarn lerna:publish && lerna run --scope @lightspeed/flame release",
     "generate": "plop",
     "docgen": "node ./scripts/docgen",
-    "percy": "lerna exec --scope \"@lightspeed/flame\" yarn percy"
+    "percy": "build-storybook -c .storybook && percy-storybook --widths=1280"
   },
   "dependencies": {
     "@emotion/core": "^10.0.9",
     "@emotion/styled": "^10.0.9",
     "@styled-system/theme-get": "5.0.16",
+    "@styled-system/css": "^5.1.5",
     "emotion-theming": "^10.0.7",
     "polished": "^2.3.0",
     "prop-types": "^15.6.0",
@@ -57,6 +58,11 @@
     "@lightspeed/config-prettier": "^0.1.2",
     "@lightspeed/config-typescript": "^0.2.0",
     "@lightspeed/eslint-config": "^1.1.1",
+    "@percy/storybook": "^3.2.0",
+    "@storybook/addon-actions": "^5.3.19",
+    "@storybook/addon-docs": "^5.3.19",
+    "@storybook/addons": "^5.3.19",
+    "@storybook/react": "^5.3.19",
     "@testing-library/react": "^10.0.5",
     "@testing-library/jest-dom": "^5.9.0",
     "@types/classnames": "^2.2.7",
@@ -65,7 +71,6 @@
     "@types/luxon": "^1.15.2",
     "@types/react": "^16.8.23",
     "@types/react-test-renderer": "^16.8.3",
-    "@types/storybook-readme": "^5.0.3",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^26.0.1",
     "babel-loader": "^8.0.4",
@@ -93,6 +98,10 @@
     "postcss-loader": "^2.1.5",
     "prettier": "^1.16.1",
     "react-test-renderer": "^16.8.6",
+    "sass": "^1.14.3",
+    "sass-loader": "^7.1.0",
+    "style-loader": "^0.21.0",
+    "storybook-readme": "^5.0.8",
     "typescript": "^3.5.3",
     "webpack": "^4.41.2",
     "webpack-cli": "^2.1.3",