feat: add storybook

hirosystems · Jun 11, 2021 · a3413f8 · a3413f8
1 parent 822bbb4
commit a3413f8
Show file tree

Hide file tree

Showing 11 changed files with 6,287 additions and 228 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -0,0 +1,13 @@
+module.exports = {
+  stories: ['../packages/ui/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  typescript: {
+    check: false,
+    checkOptions: {},
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      propFilter: prop => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
+    },
+  },
+};
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -0,0 +1,10 @@
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}
diff --git a/package.json b/package.json
@@ -11,8 +11,13 @@
     "@octokit/core": "^3.3.0",
     "@stacks/eslint-config": "^1.0.7",
     "@stacks/prettier-config": "^0.0.7",
+    "@storybook/addon-actions": "^6.2.9",
+    "@storybook/addon-essentials": "^6.2.9",
+    "@storybook/addon-links": "^6.2.9",
+    "@storybook/react": "^6.2.9",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "babel-loader": "^8.2.2",
     "eslint": "^7.21.0",
     "eslint-plugin-react": "^7.20.6",
     "husky": "^4.2.5",
@@ -58,7 +63,9 @@
     "changeset:version": "changeset version",
     "release": "yarn build && yarn changeset:publish",
     "version": "lerna bootstrap",
-    "postinstall": "patch-package"
+    "postinstall": "patch-package",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "workspaces": [
     "packages/**"

diff --git a/packages/ui-core/src/components/component/index.tsx b/packages/ui-core/src/components/component/index.tsx
@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 import { jsx, css } from '@emotion/react';
 import { As, PropsWithAs } from '../..';

diff --git a/packages/ui-theme/src/typography.ts b/packages/ui-theme/src/typography.ts
@@ -1,119 +1,119 @@
 const _typography = {
-    letterSpacings: {
-        tighter: '-0.02em',
-        tight: '-0.01em',
-        normal: '0',
-        wide: '0.025em',
-        wider: '0.05em',
-        widest: '0.1em',
-    },
-    lineHeights: {
-        normal: 'normal',
-        none: '1',
-        shorter: '1.333',
-        short: '1.4',
-        base: '1.5',
-        tall: '1.625',
-        taller: '2',
-    },
-    fontWeights: {
-        hairline: 100,
-        thin: 200,
-        light: 300,
-        normal: 400,
-        medium: 500,
-        semibold: 600,
-        bold: 700,
-        extrabold: 800,
-        black: 900,
-    },
-    fonts: {
-        heading:
-            '"Open Sauce", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-        body:
-            '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-        mono: 'SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace',
-    },
-    fontSizes: [
-        '12px',
-        '14px',
-        '16px',
-        '20px',
-        '24px',
-        '28px',
-        '32px',
-        '36px',
-        '48px',
-        '64px',
-        '96px',
-        '128px',
-    ],
+  letterSpacings: {
+    tighter: '-0.02em',
+    tight: '-0.01em',
+    normal: '0',
+    wide: '0.025em',
+    wider: '0.05em',
+    widest: '0.1em',
+  },
+  lineHeights: {
+    normal: 'normal',
+    none: '1',
+    shorter: '1.333',
+    short: '1.4',
+    base: '1.5',
+    tall: '1.625',
+    taller: '2',
+  },
+  fontWeights: {
+    hairline: 100,
+    thin: 200,
+    light: 300,
+    normal: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+    extrabold: 800,
+    black: 900,
+  },
+  fonts: {
+    heading:
+      '"Open Sauce", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+    body:
+      '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+    mono: 'SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace',
+  },
+  fontSizes: [
+    '12px',
+    '14px',
+    '16px',
+    '20px',
+    '24px',
+    '28px',
+    '32px',
+    '36px',
+    '48px',
+    '64px',
+    '96px',
+    '128px',
+  ],
 };
 
 const displayLarge = {
-    fontWeight: _typography.fontWeights.semibold,
-    fontSize: _typography.fontSizes[4],
-    lineHeight: _typography.lineHeights.shorter, // 1.333
-    letterSpacing: '-0.02em',
+  fontWeight: _typography.fontWeights.semibold,
+  fontSize: _typography.fontSizes[4],
+  lineHeight: _typography.lineHeights.shorter, // 1.333
+  letterSpacing: '-0.02em',
 };
 const displaySmall = {
-    fontWeight: _typography.fontWeights.medium,
-    fontSize: _typography.fontSizes[3],
-    lineHeight: _typography.lineHeights.short, // 1.4
-    letterSpacing: '-0.02em',
+  fontWeight: _typography.fontWeights.medium,
+  fontSize: _typography.fontSizes[3],
+  lineHeight: _typography.lineHeights.short, // 1.4
+  letterSpacing: '-0.02em',
 };
 const bodyLarge = {
-    fontWeight: _typography.fontWeights.normal,
-    fontSize: _typography.fontSizes[2],
-    lineHeight: _typography.lineHeights.base, // 1.5 (24)
-    letterSpacing: '-0.01em',
+  fontWeight: _typography.fontWeights.normal,
+  fontSize: _typography.fontSizes[2],
+  lineHeight: _typography.lineHeights.base, // 1.5 (24)
+  letterSpacing: '-0.01em',
 };
 const bodyLargeMedium = {
-    ...bodyLarge,
-    fontWeight: _typography.fontWeights.medium,
+  ...bodyLarge,
+  fontWeight: _typography.fontWeights.medium,
 };
 const bodySmall = {
-    fontWeight: _typography.fontWeights.normal,
-    fontSize: _typography.fontSizes[1],
-    lineHeight: _typography.lineHeights.short, // 1.4 (19.6)
-    letterSpacing: '-0.01em',
+  fontWeight: _typography.fontWeights.normal,
+  fontSize: _typography.fontSizes[1],
+  lineHeight: _typography.lineHeights.short, // 1.4 (19.6)
+  letterSpacing: '-0.01em',
 };
 const bodySmallMedium = {
-    ...bodySmall,
-    fontWeight: _typography.fontWeights.medium,
+  ...bodySmall,
+  fontWeight: _typography.fontWeights.medium,
 };
 const caption = {
-    fontSize: _typography.fontSizes[0],
-    lineHeight: _typography.lineHeights.shorter, // 1.333 (16)
-    letterSpacing: '0.00em',
+  fontSize: _typography.fontSizes[0],
+  lineHeight: _typography.lineHeights.shorter, // 1.333 (16)
+  letterSpacing: '0.00em',
 };
 const captionMedium = {
-    ...bodySmall,
-    fontWeight: _typography.fontWeights.medium,
+  ...bodySmall,
+  fontWeight: _typography.fontWeights.medium,
 };
 
 export const textStyles = {
-    display: {
-        large: displayLarge,
-        small: displaySmall,
-    },
-    body: {
-        large: {
-            ...bodyLarge,
-            medium: bodyLargeMedium,
-        },
-        small: {
-            ...bodySmall,
-            medium: bodySmallMedium,
-        },
+  display: {
+    large: displayLarge,
+    small: displaySmall,
+  },
+  body: {
+    large: {
+      ...bodyLarge,
+      medium: bodyLargeMedium,
     },
-    caption: {
-        ...caption,
-        medium: captionMedium,
+    small: {
+      ...bodySmall,
+      medium: bodySmallMedium,
     },
+  },
+  caption: {
+    ...caption,
+    medium: captionMedium,
+  },
 } as const;
 
 export const typography = {
-    ..._typography,
-    textStyles,
+  ..._typography,
+  textStyles,
 };
diff --git a/packages/ui/src/box/index.tsx b/packages/ui/src/box/index.tsx
@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 import { jsx, css } from '@emotion/react';
 import * as React from 'react';

diff --git a/packages/ui/src/button/button.stories.tsx b/packages/ui/src/button/button.stories.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import { Button } from './index';
+import type { ButtonProps } from './types';
+
+export default {
+  title: 'Example/Button',
+  component: Button,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as Meta;
+
+const Template: Story<ButtonProps> = args => <Button {...args} />;
+
+// ButtonModes
+export const Primary = Template.bind({});
+Primary.args = {
+  mode: 'primary',
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  mode: 'secondary',
+};
+
+export const Tertiary = Template.bind({});
+Secondary.args = {
+  mode: 'tertiary',
+};
+
+// ButtonVariants
+export const Link = Template.bind({});
+Link.args = {
+  variant: 'link',
+};
+
+export const Solid = Template.bind({});
+Solid.args = {
+  variant: 'solid',
+};
+
+// ButtonSizes
+export const Large = Template.bind({});
+Large.args = {
+  size: 'lg',
+};
+
+export const Medium = Template.bind({});
+Medium.args = {
+  size: 'md',
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  size: 'sm',
+};
diff --git a/packages/ui/src/css-reset/index.tsx b/packages/ui/src/css-reset/index.tsx
@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 import { jsx, Global, css } from '@emotion/react';
 import preflight from './preflight';

diff --git a/packages/ui/src/css-reset/preflight.tsx b/packages/ui/src/css-reset/preflight.tsx
@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 import { css } from '@emotion/react';
 

diff --git a/packages/ui/src/spinner.tsx b/packages/ui/src/spinner.tsx
@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 import { jsx, keyframes } from '@emotion/react';
 import { ForwardRefExoticComponentWithAs, forwardRefWithAs } from '@stacks/ui-core';