refactor: Add storybook + initial story

bryphe-coder · bryphe-coder · commit 718a1e7dc198 · 2022-02-01T03:22:45.000Z
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -0,0 +1,25 @@
+const path = require('path')
+
+module.exports = {
+  "stories": [
+    "../site/**/*.stories.mdx",
+    "../site/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+  ],
+   babel: async (options) => ({
+    ...options,
+    "plugins": ["@babel/plugin-proposal-class-properties"]
+    // any extra options you want to set
+  }),
+  webpackFinal: async (config) => {
+    config.resolve.modules = [
+      path.resolve(__dirname, ".."),
+      "node_modules",
+    ]
+
+    return config;
+  }
+}
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -0,0 +1,23 @@
+import ThemeProvider from "@material-ui/styles/ThemeProvider"
+import { withThemes } from '@react-theming/storybook-addon'
+import { light, dark } from '../site/theme'
+import { addDecorator } from 'node_modules/@storybook/react'
+
+addDecorator(withThemes(
+  ThemeProvider,
+  [light, dark]
+))
+
+export const parameters = {
+  actions: { 
+    argTypesRegex: "^on[A-Z].*",
+    argTypesRegex: "^handle[A-Z].*",
+ },
+  controls: {
+    expanded: true,
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}
diff --git a/package.json b/package.json
@@ -12,13 +12,19 @@
     "format:write": "prettier --write '**/*.{css,html,js,json,jsx,md,ts,tsx,yaml,yml}' && sql-formatter -l postgresql ./database/query.sql -o ./database/query.sql",
     "lint": "jest --selectProjects lint",
     "lint:fix": "FIX=true yarn lint",
+    "storybook": "start-storybook -p 6006 -s ./site/static",
     "test": "jest --selectProjects test",
     "test:coverage": "jest --selectProjects test --collectCoverage"
   },
   "devDependencies": {
     "@material-ui/core": "4.9.4",
     "@material-ui/icons": "4.5.1",
     "@material-ui/lab": "4.0.0-alpha.42",
+    "@react-theming/storybook-addon": "1.1.3",
+    "@storybook/addon-actions": "6.3.12",
+    "@storybook/addon-essentials": "6.3.12",
+    "@storybook/addon-links": "6.3.12",
+    "@storybook/react": "6.3.12",
     "@testing-library/react": "12.1.2",
     "@types/express": "4.17.13",
     "@types/jest": "27.4.0",
diff --git a/site/components/Button/LoadingButton.stories.tsx b/site/components/Button/LoadingButton.stories.tsx
@@ -0,0 +1,26 @@
+import { Story } from "@storybook/react"
+import React from "react"
+import { LoadingButton, LoadingButtonProps } from "./LoadingButton"
+
+export default {
+  title: "Button/LoadingButton",
+  component: LoadingButton,
+  argTypes: {
+    loading: { control: { type: "boolean" } },
+    children: { control: "text", defaultValue: "Create workspace" },
+  },
+}
+
+const Template: Story<LoadingButtonProps> = (args) => <LoadingButton {...args} />
+
+export const Loading = Template.bind({})
+Loading.args = {
+  variant: "contained",
+  loading: true,
+}
+
+export const NotLoading = Template.bind({})
+NotLoading.args = {
+  variant: "contained",
+  loading: false
+}
diff --git a/yarn.lock b/yarn.lock
