chore(docs): introduce storybook and migrate react-tabs examples (#873)

.circleci/config.yml

@@ -45,6 +45,7 @@ jobs:
       NODE_DEBUG: gh-pages
     steps:
       - *attach_workspace
+      - run: yarn build:storybook
       - run: yarn lerna run build:demo --concurrency=1 # prevent out-of-memory
       - run: utils/scripts/deploy.js
 

.eslintrc.json

@@ -58,7 +58,13 @@
       }
     },
     {
-      "files": ["*.spec.{js,ts,tsx}", "utils/**/*.{js,ts,tsx}", "styleguide.config.js"],
+      "files": ["packages/*/src/index.ts"],
+      "rules": {
+        "no-duplicate-imports": "off"
+      }
+    },
+    {
+      "files": ["*.spec.{js,ts,tsx}", "utils/**/*.{js,ts,tsx}", ".storybook/**/*.{js,ts,tsx}", "styleguide.config.js"],
       "rules": {
         "garden-local/require-default-theme": "off",
         "@typescript-eslint/no-var-requires": "off"

.storybook/babel.config.js

@@ -0,0 +1,39 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+const path = require('path');
+const { readdirSync } = require('fs');
+const storybookBabelConfig = require('@storybook/core/dist/server/common/babel');
+
+const PACKAGE_NAMES = readdirSync(path.resolve(__dirname, '../packages')).filter(
+  name => name !== '.template'
+);
+
+module.exports = {
+  sourceType: 'unambiguous',
+  presets: [...storybookBabelConfig.presets],
+  plugins: [
+    ...storybookBabelConfig.plugins,
+    'babel-plugin-styled-components',
+    [
+      'module-resolver',
+      {
+        root: ['../'],
+        alias: PACKAGE_NAMES.reduce((previousValue, packageName) => {
+          previousValue[`@zendeskgarden/react-${packageName}`] = `./packages/${packageName}/src`;
+
+          return previousValue;
+        }, {})
+      }
+    ]
+  ],
+  env: {
+    production: {
+      plugins: [['react-remove-properties', { properties: [/data-test/u] }]]
+    }
+  }
+};

.storybook/gardenTheme.js

@@ -0,0 +1,24 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import { create } from '@storybook/theming/create';
+import { DEFAULT_THEME } from '../packages/theming/src';
+
+export const managerTheme = create({
+  base: 'dark',
+  fontBase: DEFAULT_THEME.fonts.system,
+  fontCode: DEFAULT_THEME.fonts.mono,
+  brandTitle: 'React Components / Zendesk Garden',
+  brandUrl: 'https://zendeskgarden.github.io/react-components/storybook',
+  brandImage: './images/garden.svg'
+});
+
+export const previewTheme = create({
+  base: 'light',
+  fontBase: DEFAULT_THEME.fonts.system,
+  fontCode: DEFAULT_THEME.fonts.mono
+});

.storybook/main.js

@@ -0,0 +1,66 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+const path = require('path');
+const webpack = require('webpack');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const TS_CONFIG_PATH = path.resolve(__dirname, '../tsconfig.json');
+
+module.exports = {
+  stories: ['../packages/*/stories/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-a11y'],
+  typescript: {
+    check: true,
+    checkOptions: {
+      configFile: TS_CONFIG_PATH
+    },
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      /**
+       * Ensure that HTMLAttributes are not included in prop-sheets
+       */
+      propFilter: prop => (prop.parent ? !/node_modules/u.test(prop.parent.fileName) : true)
+    }
+  },
+  webpackFinal: config => {
+    config.module.rules.push({
+      test: /\.tsx?$/u,
+      loaders: [
+        {
+          loader: 'eslint-loader',
+          options: {
+            emitWarning: true
+          }
+        }
+      ],
+      enforce: 'pre'
+    });
+
+    config.module.rules.push({
+      test: /\.svg$/u,
+      use: [
+        {
+          loader: '@svgr/webpack',
+          options: {
+            externalConfig: path.resolve('../.svgo.yml')
+          }
+        }
+      ]
+    });
+
+    config.plugins.push(
+      new webpack.DefinePlugin({
+        PACKAGE_VERSION: JSON.stringify('storybook')
+      })
+    );
+
+    config.resolve.plugins.push(new TsconfigPathsPlugin({ configFile: TS_CONFIG_PATH }));
+
+    return config;
+  }
+};

.storybook/manager-head.html

@@ -0,0 +1 @@
+<link rel="icon" href="https://zendeskgarden.github.io/favicon.ico" />

.storybook/manager.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import { addons } from '@storybook/addons';
+import { managerTheme } from './gardenTheme';
+
+addons.setConfig({
+  theme: managerTheme,
+  /**
+   * Show the controls addon by default
+   */
+  selectedPanel: 'controls'
+});

.storybook/preview-head.html

@@ -0,0 +1 @@
+<link href="https://zendeskgarden.github.io/css-components/bedrock/index.css" rel="stylesheet" disabled />

.storybook/preview.js

@@ -0,0 +1,81 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import React from 'react';
+import styled, { createGlobalStyle } from 'styled-components';
+import { previewTheme } from './gardenTheme';
+import { ThemeProvider, DEFAULT_THEME } from '../packages/theming/src';
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*', layout: 'centered' },
+  backgrounds: { disable: true },
+  docs: {
+    theme: previewTheme
+  }
+};
+
+const GlobalPreviewStyling = createGlobalStyle`
+  body {
+    background-color: ${p => p.theme.colors.background};
+    color: ${p => p.theme.colors.foreground};
+    font-family: ${p => p.theme.fonts.system};
+    font-size: ${p => p.theme.fontSizes.md};
+  }
+`;
+
+const StyledExampleWrapper = styled.div`
+  direction: ${p => (p.theme.rtl ? 'rtl' : 'ltr')};
+  padding: ${p => p.theme.space.xl};
+`;
+
+const withThemeProvider = (Story, context) => {
+  const rtl = context.globals.locale === 'rtl';
+
+  if (context.globals.bedrock === 'enabled') {
+    document.querySelector('link[href$="bedrock/index.css"]').removeAttribute('disabled');
+  } else {
+    document.querySelector('link[href$="bedrock/index.css"]').setAttribute('disabled', true);
+  }
+
+  return (
+    <ThemeProvider theme={{ ...DEFAULT_THEME, rtl }}>
+      <GlobalPreviewStyling />
+      <StyledExampleWrapper>
+        <Story />
+      </StyledExampleWrapper>
+    </ThemeProvider>
+  );
+};
+
+export const decorators = [withThemeProvider];
+
+export const globalTypes = {
+  locale: {
+    name: 'direction',
+    description: 'Locale direction',
+    defaultValue: 'ltr',
+    toolbar: {
+      icon: 'globe',
+      items: [
+        { value: 'ltr', title: 'LTR' },
+        { value: 'rtl', title: 'RTL' }
+      ]
+    }
+  },
+  bedrock: {
+    name: 'bedrock',
+    description: 'CSS Bedrock',
+    defaultValue: 'disabled',
+    toolbar: {
+      icon: 'paintbrush',
+      items: [
+        { value: 'disabled', title: 'Bedrock disabled' },
+        { value: 'enabled', title: 'Bedrock enabled' }
+      ]
+    }
+  }
+};

demo/index.html

@@ -141,7 +141,7 @@ <h1 class="c-main__title">React Components</h1>
               <a class="u-fg-inherit" href="tables">Tables</a>
             </div>
             <div class="u-mb-sm">
-              <a class="u-fg-inherit" href="tabs">Tabs</a>
+              <a class="u-fg-inherit" href="storybook/?path=/story/components-tabs--default">Tabs</a>
             </div>
             <div class="u-mb-sm">
               <a class="u-fg-inherit" href="tags">Tags</a>

package.json

@@ -7,20 +7,22 @@
     "build:analyze": "ANALYZE_BUNDLE=true yarn build:single",
     "build:demo": "lerna run build:demo --stream",
     "build:single": "utils/scripts/scoped-npm-command.js --script build",
+    "build:storybook": "build-storybook -s ./utils/styleguide/public -o ./demo/storybook",
     "format": "prettier-package-json --write && yarn format:package_json --write && yarn format:js --write && yarn format:md --write",
     "format:all": "prettier-package-json --list-different && yarn format:package_json --list-different && yarn format:js --check && yarn format:md --check",
     "format:js": "prettier --loglevel warn '{packages,utils}/**/*.{js,ts,tsx}' '!packages/**/dist/**'",
     "format:md": "prettier --loglevel warn 'packages/**/*.md'",
     "format:package_json": "lerna exec -- prettier-package-json",
     "postinstall": "lerna bootstrap",
     "lint": "yarn lint:css && yarn lint:js && yarn lint:md",
-    "lint:css": "stylelint '{packages,utils}/**/*.{js,ts,tsx}' '!packages/**/*.spec.{js,ts,tsx}' '!packages/**/dist/**'",
-    "lint:js": "eslint packages/*/src/ utils/ --ext js,ts,tsx --max-warnings 0",
-    "lint:md": "markdownlint README.md docs/*.md packages/*/examples/*.md packages/*/src/**/*.md packages/*/README.md",
+    "lint:css": "stylelint '{packages,utils,stories}/**/*.{js,ts,tsx}' '!packages/**/*.spec.{js,ts,tsx}' '!packages/**/dist/**'",
+    "lint:js": "eslint packages/*/src/ utils/ .storybook/ --ext js,ts,tsx --max-warnings 0",
+    "lint:md": "markdownlint README.md docs/*.md stories/**/*.md packages/*/examples/*.md packages/*/src/**/*.md packages/*/README.md",
     "new": "utils/scripts/new.js",
     "prepare": "yarn build",
     "start": "utils/scripts/scoped-npm-command.js --script start",
     "start:demo": "live-server demo",
+    "start:storybook": "start-storybook -s ./utils/styleguide/public -p 6006",
     "tag": "utils/scripts/tag.js",
     "test": "yarn test:all --watch",
     "test:all": "jest --config=utils/test/jest.config.js",
@@ -40,6 +42,13 @@
     "@rollup/plugin-commonjs": "15.0.0",
     "@rollup/plugin-node-resolve": "9.0.0",
     "@rollup/plugin-replace": "2.3.3",
+    "@storybook/addon-a11y": "6.0.21",
+    "@storybook/addon-actions": "6.0.21",
+    "@storybook/addon-essentials": "6.0.21",
+    "@storybook/addon-links": "6.0.21",
+    "@storybook/addons": "6.0.21",
+    "@storybook/react": "6.0.21",
+    "@storybook/theming": "6.0.21",
     "@svgr/rollup": "5.4.0",
     "@svgr/webpack": "5.4.0",
     "@testing-library/jest-dom": "5.11.4",
@@ -63,6 +72,7 @@
     "babel-eslint": "10.1.0",
     "babel-jest": "26.3.0",
     "babel-loader": "8.1.0",
+    "babel-plugin-module-resolver": "4.0.0",
     "babel-plugin-react-remove-properties": "0.3.0",
     "babel-plugin-styled-components": "1.11.1",
     "chalk": "4.1.0",
@@ -83,6 +93,7 @@
     "eslint-plugin-react": "7.20.6",
     "eslint-plugin-react-hooks": "4.1.0",
     "execa": "4.0.3",
+    "fork-ts-checker-webpack-plugin": "5.1.0",
     "fuzzy": "0.1.3",
     "github-markdown-css": "4.0.0",
     "glob": "7.1.6",
@@ -109,6 +120,7 @@
     "react": "16.13.1",
     "react-docgen-typescript": "1.14.1",
     "react-dom": "16.13.1",
+    "react-is": "16.13.1",
     "react-styleguidist": "8.0.6",
     "react-test-renderer": "16.13.1",
     "regenerator-runtime": "0.13.7",
@@ -129,6 +141,7 @@
     "temp": "0.9.1",
     "ts-jest": "26.3.0",
     "ts-loader": "8.0.3",
+    "tsconfig-paths-webpack-plugin": "3.3.0",
     "typescript": "3.8.3",
     "webpack": "4.44.1"
   },

packages/tabs/.size-snapshot.json

@@ -19,21 +19,21 @@
     }
   },
   "index.cjs.js": {
-    "bundled": 15747,
-    "minified": 11065,
-    "gzipped": 3237
+    "bundled": 15683,
+    "minified": 11012,
+    "gzipped": 3225
   },
   "index.esm.js": {
-    "bundled": 14658,
-    "minified": 10139,
-    "gzipped": 3117,
+    "bundled": 14602,
+    "minified": 10094,
+    "gzipped": 3102,
     "treeshaked": {
       "rollup": {
-        "code": 8359,
-        "import_statements": 457
+        "code": 8338,
+        "import_statements": 460
       },
       "webpack": {
-        "code": 9895
+        "code": 9871
       }
     }
   }