chore: update storybook configuration

.gitignore

@@ -1,10 +1,12 @@
 # General ignores
 .env
-demo
 node_modules
 utils/storybook/coverage
 *.log
 
 # Package specific
 packages/**/dist
 package-lock.json
+
+# Demo specific
+demo/**/*

.husky/pre-commit

@@ -1,5 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn lint-staged
-yarn lerna run build --since main
+yarn lint-staged && yarn build --since HEAD --exclude-dependents && git add packages/**/.size-snapshot.json

.storybook/babel.config.js

@@ -0,0 +1,38 @@
+/**
+ * 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 { getStorybookBabelConfig } = require('@storybook/core-common');
+
+const config = getStorybookBabelConfig();
+
+const PACKAGE_NAMES = readdirSync(path.resolve(__dirname, '../packages')).filter(
+  name => name !== '.template'
+);
+
+module.exports = {
+  sourceType: 'unambiguous',
+  presets: [...config.presets],
+  plugins: [
+    ...config.plugins,
+    'babel-plugin-styled-components',
+    [
+      'module-resolver',
+      {
+        root: ['../'],
+        alias: PACKAGE_NAMES.reduce((previousValue, packageName) => {
+          previousValue[
+            `@zendeskgarden/container-${packageName}`
+          ] = `./packages/${packageName}/src`;
+
+          return previousValue;
+        }, {})
+      }
+    ]
+  ]
+};

.storybook/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

.storybook/main.js

@@ -5,13 +5,39 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
+const path = require('path');
+const { DefinePlugin } = require('webpack');
+const postcss = require('postcss');
+const tailwindcss = require('tailwindcss');
+const autoprefixer = require('autoprefixer');
+
+const options = {
+  backgrounds: false,
+  docs: process.env.BROWSER ? process.env.BROWSER.toUpperCase() !== 'IE11' : true,
+  measure: false,
+  outline: false,
+  viewport: false
+};
+
 module.exports = {
-  stories: ['../packages/**/*.stories.@(tsx|mdx)'],
+  stories: [
+    '../packages/*/demo/**/*.stories.@(js|jsx|ts|tsx|mdx)',
+    '../packages/*/*.stories.@(tsx|mdx)'
+  ],
   addons: [
-    { name: '@storybook/addon-essentials', options: { viewport: false } },
-    '@storybook/addon-a11y',
-    '@storybook/addon-storysource',
-    '@storybook/addon-postcss'
+    { name: '@storybook/addon-essentials', options },
+    {
+      name: '@storybook/addon-postcss',
+      options: {
+        postcssLoaderOptions: {
+          implementation: postcss,
+          postcssOptions: {
+            plugins: [tailwindcss(path.resolve(__dirname, 'tailwind.config.js')), autoprefixer()]
+          }
+        }
+      }
+    },
+    '@storybook/addon-a11y'
   ],
   core: {
     builder: 'webpack5'
@@ -21,6 +47,15 @@ module.exports = {
     // to support IE11, we need to ensure the manager UI bundle is ES5 compatible
     config.target = ['web', 'es5'];
 
+    return config;
+  },
+  webpackFinal: config => {
+    config.plugins.push(
+      new DefinePlugin({
+        PACKAGE_VERSION: JSON.stringify('storybook')
+      })
+    );
+
     return config;
   }
 };

.storybook/manager.js

@@ -10,6 +10,7 @@ import { create } from '@storybook/theming';
 import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
 addons.setConfig({
+  panelPosition: 'right',
   theme: create({
     brandTitle: 'Zendesk Garden React Containers',
     brandUrl: 'https://github.com/zendeskgarden/react-containers',

.storybook/preview.js

@@ -6,37 +6,41 @@
  */
 
 import React from 'react';
+import { createGlobalStyle } from 'styled-components';
 import { create } from '@storybook/theming/create';
-import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 
-/**
- * Center "Docs" previews
- * See: https://github.com/storybookjs/storybook/issues/7227#issuecomment-680332161
- */
-export const decorators = [
-  Story => (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        overflow: 'auto'
-      }}
-    >
-      <div style={{ margin: 'auto', maxHeight: '100%' }}>
-        <Story />
-      </div>
-    </div>
-  )
-];
+import './index.css';
 
 export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
   backgrounds: {
     default: DEFAULT_THEME.colors.base,
     grid: { disable: true }
   },
+  controls: {
+    hideNoControlsWarning: true,
+    sort: 'alpha'
+  },
   docs: {
     theme: create({
       base: DEFAULT_THEME.colors.base
     })
-  }
+  },
+  layout: 'centered'
 };
+
+const GlobalStyle = createGlobalStyle`
+  :focus {
+    outline-color: ${p => getColor('primaryHue', 600, p.theme)};
+  }
+`;
+
+export const decorators = [
+  Story => (
+    <>
+      <GlobalStyle />
+      <Story />
+    </>
+  )
+];

.storybook/tailwind.config.js

@@ -0,0 +1,15 @@
+/**
+ * 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 gardenTailwindCss = require('@zendeskgarden/tailwindcss');
+
+module.exports = {
+  content: [`${path.resolve(__dirname, '../packages')}/*/demo/**/*.{mdx,tsx}`],
+  plugins: [gardenTailwindCss],
+  safelist: process.env.NODE_ENV === 'development' ? [{ pattern: /.*/u }] : []
+};

package.json

@@ -16,7 +16,7 @@
     "lint:md": "markdownlint README.md packages/*/src/**/*.md packages/*/src/*.md packages/*/README.md",
     "new": "utils/scripts/new.js",
     "prepare": "yarn build",
-    "start": "start-storybook -p 6006",
+    "start": "start-storybook --no-version-updates -p 6006",
     "start:demo": "yarn build:demo && live-server demo",
     "tag": "lerna version --conventional-commits --force-git-tag",
     "test": "yarn test:all --watch",
@@ -40,7 +40,6 @@
     "@storybook/addon-a11y": "6.4.13",
     "@storybook/addon-essentials": "6.4.13",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/addon-storysource": "6.4.13",
     "@storybook/builder-webpack5": "6.4.13",
     "@storybook/manager-webpack5": "6.4.13",
     "@storybook/react": "6.4.13",
@@ -61,10 +60,13 @@
     "@zendeskgarden/eslint-config": "27.0.0",
     "@zendeskgarden/react-theming": "8.47.2",
     "@zendeskgarden/scripts": "1.4.0",
+    "@zendeskgarden/tailwindcss": "3.0.1",
     "acorn-jsx": "5.3.2",
+    "autoprefixer": "10.4.2",
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "27.4.6",
     "babel-loader": "8.2.3",
+    "babel-plugin-module-resolver": "4.1.0",
     "babel-plugin-styled-components": "2.0.2",
     "commander": "8.3.0",
     "core-js": "3.20.3",
@@ -87,6 +89,7 @@
     "markdownlint-cli": "0.30.0",
     "ora": "5.4.1",
     "popper.js": "1.16.1",
+    "postcss": "8.4.6",
     "prettier": "2.5.1",
     "prettier-package-json": "2.6.0",
     "react": "17.0.2",
@@ -101,6 +104,7 @@
     "rollup-plugin-size-snapshot": "0.12.0",
     "rollup-plugin-typescript2": "0.31.1",
     "styled-components": "5.3.3",
+    "tailwindcss": "3.0.19",
     "ts-jest": "27.1.3",
     "ts-loader": "8.3.0",
     "typescript": "4.5.4",

packages/.template/tsconfig.build.json

@@ -5,7 +5,9 @@
     "declarationDir": "dist/typings",
     "declaration": true,
     "sourceMap": false,
-    "noEmit": false
+    "noEmit": false,
+    "paths": {}
+
   },
   "include": ["src/**/*"],
   "exclude": ["**/*.spec.tsx", "**/*.spec.ts"]

packages/accordion/tsconfig.build.json

@@ -5,7 +5,8 @@
     "declarationDir": "dist/typings",
     "declaration": true,
     "sourceMap": false,
-    "noEmit": false
+    "noEmit": false,
+    "paths": {}
   },
   "include": ["src/**/*"],
   "exclude": ["**/*.spec.tsx", "**/*.spec.ts"]

packages/breadcrumb/tsconfig.build.json

@@ -5,7 +5,9 @@
     "declarationDir": "dist/typings",
     "declaration": true,
     "sourceMap": false,
-    "noEmit": false
+    "noEmit": false,
+    "paths": {}
+
   },
   "include": ["src/**/*"],
   "exclude": ["**/*.spec.tsx", "**/*.spec.ts"]

packages/buttongroup/tsconfig.build.json

@@ -5,7 +5,9 @@
     "declarationDir": "dist/typings",
     "declaration": true,
     "sourceMap": false,
-    "noEmit": false
+    "noEmit": false,
+    "paths": {}
+
   },
   "include": ["src/**/*"],
   "exclude": ["**/*.spec.tsx", "**/*.spec.ts"]

packages/field/tsconfig.build.json

@@ -5,7 +5,9 @@
     "declarationDir": "dist/typings",
     "declaration": true,
     "sourceMap": false,
-    "noEmit": false
+    "noEmit": false,
+    "paths": {}
+
   },
   "include": ["src/**/*"],
   "exclude": ["**/*.spec.tsx", "**/*.spec.ts"]

packages/focusjail/tsconfig.build.json

@@ -5,7 +5,9 @@
     "declarationDir": "dist/typings",
     "declaration": true,
     "sourceMap": false,
-    "noEmit": false
+    "noEmit": false,
+    "paths": {}
+
   },
   "include": ["src/**/*"],
   "exclude": ["**/*.spec.tsx", "**/*.spec.ts"]

packages/grid/tsconfig.build.json

@@ -5,7 +5,9 @@
     "declarationDir": "dist/typings",
     "declaration": true,
     "sourceMap": false,
-    "noEmit": false
+    "noEmit": false,
+    "paths": {}
+
   },
   "include": ["src/**/*"],
   "exclude": ["**/*.spec.tsx", "**/*.spec.ts"]