storybook

.github/workflows/chromatic.yml

@@ -0,0 +1,18 @@
+name: "Chromatic"
+on: push
+
+jobs:
+  chromatic:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          cache: "npm"
+          node-version-file: ".nvmrc"
+      - run: npm ci
+      - run: npm run chromatic --exit-once-uploaded --auto-accept-changes main
+        env:
+          CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.gitignore

@@ -11,4 +11,6 @@ node_modules
 yarn.lock
 docs
 
-/dist
+/dist
+*storybook.log
+storybook-static

.storybook/main.ts

@@ -0,0 +1,14 @@
+import type { StorybookConfig } from '@storybook/html-vite';
+
+const config: StorybookConfig = {
+	"stories": [
+		"../src/**/*.mdx",
+		"../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+	],
+	"addons": [],
+	"framework": {
+		"name": "@storybook/html-vite",
+		"options": {}
+	}
+};
+export default config;

.storybook/preview.ts

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

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+ }

eslint.config.mjs

@@ -1,3 +1,5 @@
+import storybook from "eslint-plugin-storybook";
+
 import globals from "globals";
 import tsPlugin from "@typescript-eslint/eslint-plugin";
 import tsParser from "@typescript-eslint/parser";
@@ -80,7 +82,7 @@ const mdcs = {
 
 export default [
 	{
-		files: [ "src/**/*.ts" ],
+		files: [ "**/*.ts", "**/*.mjs" ],
 		// ignores: [],
 		languageOptions: {
 			parser: tsParser,
@@ -118,5 +120,4 @@ export default [
 			],
 			"key-spacing": [ 0 ],
 		},
-	},
-];
+	}, ...storybook.configs[ "flat/recommended" ] ];