Storybook

.storybook/main.js

@@ -0,0 +1,39 @@
+const path = require("path");
+module.exports = {
+  // ref: https://storybook.js.org/docs/ember/configure/typescript#mainjs-configuration
+  typescript: {
+    check: false,
+    checkOptions: {},
+    reactDocgen: "react-docgen-typescript",
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      propFilter: (prop) =>
+        prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
+    },
+  },
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/preset-create-react-app",
+    "storybook-tailwind-dark-mode",
+  ],
+
+  // Tell webpack to apply tailwind to postcss loader
+  webpackFinal: async (config) => {
+    config.module.rules.push({
+      test: /\.css$/,
+      use: [
+        {
+          loader: "postcss-loader",
+          options: {
+            ident: "postcss",
+            plugins: [require("tailwindcss"), require("autoprefixer")],
+          },
+        },
+      ],
+      include: path.resolve(__dirname, "../"),
+    });
+    return config;
+  },
+};

.storybook/preview.js

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

package.json

@@ -41,10 +41,22 @@
     "build": "craco build",
     "lint": "eslint ./src/**/*.ts ./src/**/*.tsx",
     "test": "craco test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "storybook": "start-storybook -p 6006 -s public",
+    "build-storybook": "build-storybook -s public"
   },
   "eslintConfig": {
-    "extends": "react-app"
+    "extends": "react-app",
+    "overrides": [
+      {
+        "files": [
+          "**/*.stories.*"
+        ],
+        "rules": {
+          "import/no-anonymous-default-export": "off"
+        }
+      }
+    ]
   },
   "browserslist": {
     "production": [
@@ -58,10 +70,20 @@
       "last 1 safari version"
     ]
   },
+  "resolutions": {
+    "babel-loader": "8.1.0"
+  },
   "devDependencies": {
+    "@storybook/addon-actions": "^6.2.9",
+    "@storybook/addon-essentials": "^6.2.9",
+    "@storybook/addon-links": "^6.2.9",
+    "@storybook/node-logger": "^6.2.9",
+    "@storybook/preset-create-react-app": "^3.1.7",
+    "@storybook/react": "^6.2.9",
     "@types/lodash.uniqby": "^4.7.6",
     "autoprefixer": "^9",
     "postcss": "^7",
+    "storybook-tailwind-dark-mode": "^1.0.9",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat"
   }
 }

src/components/Button/Button.stories.tsx

@@ -0,0 +1,33 @@
+import { Story, Meta } from "@storybook/react";
+
+import { Button, ButtonProps } from "./Button";
+
+export default {
+  title: "components/Button",
+  component: Button,
+  argTypes: {
+    disabled: { control: { type: "boolean" } },
+    loading: { control: { type: "boolean" } },
+    className: { control: { type: "text" } },
+  },
+} as Meta;
+
+const Template: Story<ButtonProps> = (args) => <Button {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  children: "Click me",
+  intent: "primary",
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  ...Primary.args,
+  loading: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  ...Primary.args,
+  disabled: true,
+};

src/components/Button/Button.tsx

@@ -3,11 +3,22 @@ import LoadingSpinner from "../LoadingSpinner/LoadingSpinner";
 
 type ButtonIntent = "neutral" | "primary" | "positive" | "destructive";
 
-type ButtonProps = {
+export type ButtonProps = {
   children: React.ReactNode;
   className?: string;
+  /**
+   * Intent affects the appearance of the button
+   */
   intent?: ButtonIntent;
+  /**
+   * Whether or not the button should be disabled. Clicking a disabled button
+   * has no effect.
+   */
   disabled?: boolean;
+  /**
+   * Whether or not to show a loading spinner within the button. This also
+   * prevents further clicks on the button
+   */
   loading?: boolean;
 } & React.DetailedHTMLProps<
   React.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -21,7 +32,7 @@ const colorClasses: Record<ButtonIntent, string> = {
   destructive: "bg-red-700 text-white",
 };
 
-const Button = ({
+export const Button = ({
   children,
   className = "",
   intent = "neutral",
@@ -43,7 +54,6 @@ const Button = ({
         }
       )}
       onClick={(e) => {
-        console.log("activate");
         !loading && onClick && onClick(e);
       }}
       {...rest}