chore: add storybook

Author: funbunch

.gitignore

@@ -10,3 +10,6 @@ coverage
 cypress/screenshots
 cypress/videos
 cypress/downloads/downloads.htm
+
+*storybook.log
+storybook-static

client/.storybook/main.js

@@ -0,0 +1,20 @@
+import { join, dirname } from "path";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+const config = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [],
+  framework: {
+    name: getAbsolutePath("@storybook/react-vite"),
+    options: {},
+  },
+};
+export default config;

client/.storybook/preview.js

@@ -0,0 +1,13 @@
+/** @type { import('@storybook/react-vite').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

client/package.json

@@ -7,7 +7,8 @@
   "scripts": {
     "start": "vite",
     "dev": "vite",
-    "build": "vite build"
+    "build": "vite build",
+    "storybook": "storybook dev -p 6006"
   },
   "dependencies": {
     "date-fns": "^2.29.3",
@@ -18,11 +19,14 @@
     "react-router-dom": "^6.13.0"
   },
   "devDependencies": {
+    "@storybook/react-vite": "^9.0.12",
     "@vitejs/plugin-react": "^4.4.1",
     "autoprefixer": "^10.4.13",
     "axios": "^1.1.3",
     "http-proxy-middleware": "^2.0.6",
     "postcss": "^8.4.18",
+    "prop-types": "^15.8.1",
+    "storybook": "^9.0.12",
     "tailwindcss": "^3.2.2",
     "vite": "^6.3.5",
     "vite-plugin-istanbul": "^7.0.0"

client/src/stories/Button.jsx

@@ -0,0 +1,43 @@
+import React from "react";
+
+import PropTypes from "prop-types";
+
+import "./button.css";
+
+/** Primary UI component for user interaction */
+export const Button = ({
+  primary = false,
+  backgroundColor = null,
+  size = "medium",
+  label,
+  ...props
+}) => {
+  const mode = primary
+    ? "storybook-button--primary"
+    : "storybook-button--secondary";
+  return (
+    <button
+      type="button"
+      className={["storybook-button", `storybook-button--${size}`, mode].join(
+        " "
+      )}
+      style={backgroundColor && { backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};
+
+Button.propTypes = {
+  /** Is this the principal call to action on the page? */
+  primary: PropTypes.bool,
+  /** What background color to use */
+  backgroundColor: PropTypes.string,
+  /** How large should the button be? */
+  size: PropTypes.oneOf(["small", "medium", "large"]),
+  /** Button contents */
+  label: PropTypes.string.isRequired,
+  /** Optional click handler */
+  onClick: PropTypes.func,
+};

client/src/stories/Button.stories.js

@@ -0,0 +1,49 @@
+import { fn } from "storybook/test";
+
+import { Button } from "./Button";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+export default {
+  title: "Example/Button",
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered",
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    backgroundColor: { control: "color" },
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: { onClick: fn() },
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary = {
+  args: {
+    primary: true,
+    label: "Button",
+  },
+};
+
+export const Secondary = {
+  args: {
+    label: "Button",
+  },
+};
+
+export const Large = {
+  args: {
+    size: "large",
+    label: "Button",
+  },
+};
+
+export const Small = {
+  args: {
+    size: "small",
+    label: "Button",
+  },
+};

client/src/stories/button.css

@@ -0,0 +1,30 @@
+.storybook-button {
+  display: inline-block;
+  cursor: pointer;
+  border: 0;
+  border-radius: 3em;
+  font-weight: 700;
+  line-height: 1;
+  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+.storybook-button--primary {
+  background-color: #555ab9;
+  color: white;
+}
+.storybook-button--secondary {
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+  background-color: transparent;
+  color: #333;
+}
+.storybook-button--small {
+  padding: 10px 16px;
+  font-size: 12px;
+}
+.storybook-button--medium {
+  padding: 11px 20px;
+  font-size: 14px;
+}
+.storybook-button--large {
+  padding: 12px 24px;
+  font-size: 16px;
+}