refactor: Add storybook + initial story (#118)

This hooks up `storybook`, which the front-end team has enjoyed using in the v1 codebase - it makes it quick and easy to view and test components in isolation.

The `<LoadingButton />` has a simple story added now, so if you run `yarn storybook`, you can preview it in various states:

![2022-01-31 19 24 24](https://user-images.githubusercontent.com/88213859/151908656-27dac0a8-9c6e-4353-ad25-3eafee979bd4.gif)

This will be helpful as we bring more front-end devs to help build v2 out.

.github/workflows/coder.yaml

@@ -198,6 +198,9 @@ jobs:
       - run: yarn build
         working-directory: site
 
+      - run: yarn storybook:build
+        working-directory: site
+
       - run: yarn test:coverage
         working-directory: site
 

.gitignore

@@ -19,6 +19,7 @@ yarn-error.log
 site/.eslintcache
 site/.next/
 site/node_modules/
+site/storybook-static/
 site/yarn-error.log
 coverage/
 

site/.eslintignore

@@ -5,4 +5,5 @@ node_modules
 vendor
 out
 coverage
-.next
+.next
+storybook-static

site/.prettierignore

@@ -14,3 +14,4 @@ yarn-error.log
 .next/
 coverage/
 out/
+storybook-static/

site/.storybook/main.js

@@ -0,0 +1,16 @@
+const path = require("path")
+
+module.exports = {
+  stories: ["../**/*.stories.mdx", "../**/*.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
+  },
+}

site/.storybook/preview.js

@@ -0,0 +1,20 @@
+import ThemeProvider from "@material-ui/styles/ThemeProvider"
+import { withThemes } from "@react-theming/storybook-addon"
+import { light, dark } from "../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$/,
+    },
+  },
+}

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,
+}

site/jest.config.js

@@ -41,5 +41,6 @@ module.exports = {
     "!<rootDir>/next-env.d.ts",
     "!<rootDir>/next.config.js",
     "!<rootDir>/out/**/*.*",
+    "!<rootDir>/storybook-static/**/*.*",
   ],
 }

site/package.json

@@ -12,13 +12,20 @@
     "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 ./static",
+    "storybook:build": "build-storybook",
     "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",