basic storybook config (primer#1678)

docs/.storybook/main.js

@@ -0,0 +1,11 @@
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-a11y',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/preset-scss',
+    '@whitespace/storybook-addon-html',
+    'storybook-addon-designs'
+  ]
+}

docs/.storybook/preview-head.html

@@ -0,0 +1,15 @@
+<style>
+  .story-wrap {
+    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
+      Helvetica Neue, sans-serif;
+    color: var(--color-fg-default);
+    background-color: var(--color-canvas-default);
+    padding: 1rem;
+  }
+
+  .theme-wrap {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+    height: 100vh;
+  }
+</style>

docs/.storybook/preview.js

@@ -0,0 +1,120 @@
+import '../../src/docs.scss'
+import '../../src/index.scss'
+import '../../src/base/index.scss'
+
+export const parameters = {
+  actions: {argTypesRegex: '^on[A-Z].*'},
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/
+    },
+    expanded: true
+  },
+
+  layout: 'fullscreen',
+  html: {
+    root: '#story' // target id for html tab (should be direct parent of <Story /> for easy copy/paste)
+  }
+}
+
+export const globalTypes = {
+  theme: {
+    name: 'Theme',
+    description: 'Switch themes',
+    defaultValue: 'light',
+    toolbar: {
+      icon: 'circlehollow',
+      items: ['light', 'light_protanopia', 'dark', 'dark_dimmed', 'dark_high_contrast', 'dark_protanopia', 'all'],
+      showName: true
+    }
+  }
+}
+
+export const decorators = [
+  (Story, context) => {
+    if (context.globals.theme === 'all') {
+      return (
+        <div class="theme-wrap">
+          <div data-color-mode="light" data-light-theme="light" className="story-wrap" id="story">
+            <Story {...context} />
+          </div>
+
+          <div data-color-mode="light" data-light-theme="light_protanopia" className="story-wrap" id="story">
+            <Story {...context} />
+          </div>
+
+          <div data-color-mode="dark" data-dark-theme="dark" className="story-wrap" id="story">
+            <Story {...context} />
+          </div>
+
+          <div data-color-mode="dark" data-dark-theme="dark_dimmed" className="story-wrap" id="story">
+            <Story {...context} />
+          </div>
+
+          <div data-color-mode="dark" data-dark-theme="dark_high_contrast" className="story-wrap" id="story">
+            <Story {...context} />
+          </div>
+
+          <div data-color-mode="dark" data-dark-theme="dark_protanopia" className="story-wrap" id="story">
+            <Story {...context} />
+          </div>
+        </div>
+      )
+    }
+
+    if (context.globals.theme === 'light') {
+      return (
+        <div data-color-mode="light" data-light-theme="light" className="story-wrap" id="story">
+          <Story {...context} />
+        </div>
+      )
+    }
+
+    if (context.globals.theme === 'light_protanopia') {
+      return (
+        <div data-color-mode="light" data-light-theme="light_protanopia" className="story-wrap" id="story">
+          <Story {...context} />
+        </div>
+      )
+    }
+
+    if (context.globals.theme === 'dark') {
+      return (
+        <div data-color-mode="dark" data-dark-theme="dark" className="story-wrap" id="story">
+          <Story {...context} />
+        </div>
+      )
+    }
+
+    if (context.globals.theme === 'dark_dimmed') {
+      return (
+        <div data-color-mode="dark" data-dark-theme="dark_dimmed" className="story-wrap" id="story">
+          <Story {...context} />
+        </div>
+      )
+    }
+
+    if (context.globals.theme === 'dark_high_contrast') {
+      return (
+        <div data-color-mode="dark" data-dark-theme="dark_high_contrast" className="story-wrap" id="story">
+          <Story {...context} />
+        </div>
+      )
+    }
+
+    if (context.globals.theme === 'dark_protanopia') {
+      return (
+        <div data-color-mode="dark" data-dark-theme="dark_protanopia" className="story-wrap" id="story">
+          <Story {...context} />
+        </div>
+      )
+    }
+
+    return (
+      <div className="story-wrap" id="story">
+        <Story {...context} />
+      </div>
+    )
+  }
+]

docs/package.json

@@ -6,7 +6,9 @@
     "clean": "gatsby clean",
     "develop": "ln -sf ../dist . && gatsby develop -H 0.0.0.0",
     "build-content": "gatsby build --prefix-paths",
-    "build": "./script/now-build.sh"
+    "build": "./script/now-build.sh",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "dependencies": {
     "@babel/preset-react": "^7.10.4",
@@ -20,6 +22,7 @@
     "autoprefixer": "10.3.7",
     "babel-preset-gatsby": "^1.14.0",
     "chroma-js": "^2.1.2",
+    "clsx": "^1.1.1",
     "core-js": "^3.18.2",
     "gatsby": "2.32.13",
     "gatsby-plugin-alias-imports": "^1.0.5",
@@ -43,5 +46,18 @@
   },
   "engines": {
     "node": ">= 10.x"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.15.8",
+    "@storybook/addon-a11y": "6.3.10",
+    "@storybook/addon-actions": "^6.3.12",
+    "@storybook/addon-essentials": "^6.3.12",
+    "@storybook/addon-links": "^6.3.12",
+    "@storybook/addon-postcss": "2.0.0",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "6.3.12",
+    "@whitespace/storybook-addon-html": "^5.0.0",
+    "babel-loader": "^8.2.2",
+    "storybook-addon-designs": "6.2.0"
   }
 }

docs/src/stories/Button.stories.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import clsx from 'clsx'
+
+export default {
+  title: 'Components/Button',
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=4371%3A7128'
+    }
+  },
+  argTypes: {
+    variant: {
+      options: [0, 1, 2, 3], // iterator
+      mapping: [null, 'btn-primary', 'btn-outline', 'btn-danger'], // values
+      control: {
+        type: 'select',
+        labels: ['default', 'primary', 'outline', 'danger']
+      },
+      defaultValue: ''
+    },
+    label: {
+      defaultValue: 'Button',
+      type: 'string',
+      name: 'label',
+      description: 'string'
+    }
+  }
+}
+
+const Template = ({label, variant}) => (
+  <>
+    <button className={clsx('btn', variant && `${variant}`)}>{label}</button>
+  </>
+)
+
+export const Button = Template.bind({})

docs/src/stories/GettingStarted.stories.mdx

@@ -0,0 +1,17 @@
+import {Meta} from '@storybook/addon-docs'
+
+<Meta title="Getting Started" />
+
+# Local development
+
+Run `yarn storybook` from root. A local server will run, and any changes made to CSS and/or stories will auto-reload the page.
+
+# Storybook config
+
+Config files live in [.storybook](docs/.storybook)
+
+[main.js](docs/.storybook/main.js): addons
+
+[preview.js](docs/.storybook/preview.js): customizations, decorators, global CSS imports
+
+[preview-head.html](docs/.storybook/preview-head.html): story-level "global" styles (within the story iframe)