feat: add storybook

.changeset/proud-gifts-knock.md

@@ -0,0 +1,7 @@
+---
+'@stacks/ui': minor
+'@stacks/ui-core': minor
+'@stacks/ui-theme': minor
+---
+
+This adds storybook to the ui library!

.storybook/main.js

@@ -0,0 +1,17 @@
+module.exports = {
+  stories: ['../packages/ui/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  babel: config => {
+    config.presets[2][1] = { runtime: 'classic' };
+    return config;
+  },
+  typescript: {
+    check: false,
+    checkOptions: {},
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      propFilter: prop => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
+    },
+  },
+};

.storybook/preview.js

@@ -0,0 +1,10 @@
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

package.json

@@ -11,6 +11,10 @@
     "@octokit/core": "3.5.1",
     "@stacks/eslint-config": "1.0.9",
     "@stacks/prettier-config": "0.0.8",
+    "@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.11",
     "@types/react-dom": "17.0.8",
     "eslint": "7.29.0",
@@ -49,7 +53,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/**"

packages/ui-theme/src/typography.ts

@@ -30,7 +30,8 @@ const _typography = {
   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"',
+    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: [

packages/ui/src/button/button.stories.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import { Button } from './index';
+import type { ButtonProps } from './types';
+
+export default {
+  title: 'Button',
+  component: Button,
+} as Meta;
+
+const Template: Story<ButtonProps> = args => {
+  return <Button {...args} height="40px" width="120px" />;
+};
+
+// Modes
+export const Primary = Template.bind({});
+Primary.args = {
+  mode: 'primary',
+  children: 'Primary',
+  variant: 'solid',
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  mode: 'secondary',
+  children: 'Secondary',
+};
+
+export const Tertiary = Template.bind({});
+Tertiary.args = {
+  mode: 'tertiary',
+  children: 'Tertiary',
+};