Integrating Storybook

heat-stack/.eslintignore

@@ -1,3 +1,4 @@
 public/pyodide-env/
 public/build
-build/index.js
+build/index.js
+public/heat-stack/storybook-static

heat-stack/.eslintrc.cjs

@@ -4,11 +4,7 @@ const appFiles = ['app/**']
 
 /** @type {import('@types/eslint').Linter.BaseConfig} */
 module.exports = {
-	extends: [
-		'@remix-run/eslint-config',
-		'@remix-run/eslint-config/node',
-		'prettier',
-	],
+	extends: ['@remix-run/eslint-config', '@remix-run/eslint-config/node', 'prettier', 'plugin:storybook/recommended'],
 	rules: {
 		// playwright requires destructuring in fixtures even if you don't use anything 🤷‍♂️
 		'no-empty-pattern': 'off',

heat-stack/.storybook/main.ts

@@ -0,0 +1,23 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  "stories": [
+    "../stories/**/*.mdx",
+    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions"
+  ],
+  "framework": {
+    "name": "@storybook/react-vite",
+    "options": {}
+  },
+  "docs": {
+    "autodocs": "tag"
+  },
+  staticDirs: ['../public'],
+};
+export default config;

heat-stack/.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/react'
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+       color: /(background|color)$/i,
+       date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

heat-stack/package.json

@@ -28,7 +28,9 @@
     "test:e2e:run": "cross-env CI=true playwright test",
     "test:e2e:install": "npx playwright install --with-deps chromium",
     "typecheck": "tsc",
-    "validate": "run-p \"test -- --run\" lint typecheck test:e2e:run"
+    "validate": "run-p \"test -- --run\" lint typecheck test:e2e:run",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build -o heat-stack/public/storybook-static"
   },
   "eslintIgnore": [
     "/node_modules",
@@ -38,7 +40,6 @@
     "/server-build"
   ],
   "dependencies": {
-
     "@conform-to/react": "^0.9.1",
     "@conform-to/zod": "^0.9.1",
     "@epic-web/cachified": "^4.0.0",
@@ -86,8 +87,8 @@
     "intl-parse-accept-language": "^1.0.0",
     "isbot": "^3.7.1",
     "litefs-js": "^1.1.2",
-    "lucide-react": "^0.292.0",
     "lru-cache": "^10.1.0",
+    "lucide-react": "^0.292.0",
     "morgan": "^1.10.0",
     "prisma": "^5.6.0",
     "pyodide": "0.24.1",
@@ -117,6 +118,14 @@
     "@remix-run/serve": "^2.3.1",
     "@remix-run/testing": "^2.3.1",
     "@sly-cli/sly": "^1.4.10",
+    "@storybook/addon-essentials": "^7.6.10",
+    "@storybook/addon-interactions": "^7.6.10",
+    "@storybook/addon-links": "^7.6.10",
+    "@storybook/addon-onboarding": "^1.0.11",
+    "@storybook/blocks": "^7.6.10",
+    "@storybook/react": "^7.6.10",
+    "@storybook/react-vite": "^7.6.10",
+    "@storybook/test": "^7.6.10",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
@@ -143,6 +152,7 @@
     "esbuild": "^0.19.8",
     "eslint": "^8.54.0",
     "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-storybook": "^0.6.15",
     "fs-extra": "^11.2.0",
     "jsdom": "^22.1.0",
     "msw": "2.0.9",
@@ -153,6 +163,7 @@
     "prettier-plugin-sql": "^0.17.0",
     "prettier-plugin-tailwindcss": "^0.5.7",
     "remix-flat-routes": "^0.6.2",
+    "storybook": "^7.6.10",
     "tsx": "^4.6.0",
     "typescript": "^5.3.2",
     "vite": "^5.0.4",

heat-stack/stories/Button.stories.ts

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from './Button.tsx';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  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' },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+
+//variants seem like they'd make for a decent starting point for stories
+// for args, I think variant and size should work
+
+// export const Primary: Story = {
+//   args: {
+//     primary: true,
+//     label: 'Button',
+//   },
+// };
+
+// export const Secondary: Story = {
+//   args: {
+//     label: 'Button',
+//   },
+// };
+
+// export const Large: Story = {
+//   args: {
+//     size: 'large',
+//     label: 'Button',
+//   },
+// };
+
+// export const Small: Story = {
+//   args: {
+//     size: 'small',
+//     label: 'Button',
+//   },
+// };
+
+export const Default: Story = {
+  args: {
+    variant: 'default',
+    size: 'default',
+    label: 'Button',
+  }
+};

heat-stack/stories/Button.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import './button.css';
+
+interface ButtonProps {
+  /**
+   * Is this the principal call to action on the page?
+   */
+  primary?: boolean;
+  /**
+   * What background color to use
+   */
+  backgroundColor?: string;
+  /**
+   * How large should the button be?
+   */
+  size?: 'default' | 'wide' | 'sm' | 'lg' | 'pill' | 'icon';
+  /**
+   * Button contents
+   */
+  label: string;
+  /**
+   * Optional click handler
+   */
+  variant: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
+  onClick?: () => void;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({
+  primary = false,
+  size = 'default',
+  backgroundColor,
+  label,
+  ...props
+}: ButtonProps) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      style={{ backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};