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/app/components/ui/button.tsx

@@ -1,7 +1,7 @@
 import { Slot } from '@radix-ui/react-slot'
 import { cva, type VariantProps } from 'class-variance-authority'
 import * as React from 'react'
-
+ 
 import { cn } from '#app/utils/misc.tsx'
 
 const buttonVariants = cva(