feat: add storybook (#45)

* feat: add storybook

* update: lockfile

Author: sosweetham

infrastructure/eid-wallet/.gitignore

@@ -8,3 +8,5 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+
+*storybook.log

infrastructure/eid-wallet/.storybook/main.ts

@@ -0,0 +1,26 @@
+import type { StorybookConfig } from "@storybook/sveltekit";
+
+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: string): any {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+const config: StorybookConfig = {
+  // add back support for .svelte files when addon csf works
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|ts)"],
+  addons: [
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-svelte-csf"),
+    getAbsolutePath("@chromatic-com/storybook"),
+    getAbsolutePath("@storybook/experimental-addon-test"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/sveltekit"),
+    options: {},
+  },
+};
+export default config;

infrastructure/eid-wallet/.storybook/preview.ts

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

infrastructure/eid-wallet/.storybook/vitest.setup.ts

@@ -0,0 +1,9 @@
+import { beforeAll } from 'vitest';
+import { setProjectAnnotations } from '@storybook/sveltekit';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+const project = setProjectAnnotations([projectAnnotations]);
+
+beforeAll(project.beforeAll);

infrastructure/eid-wallet/package.json

@@ -9,7 +9,9 @@
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "tauri": "tauri"
+    "tauri": "tauri",
+    "storybook": "svelte-kit sync && storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "license": "MIT",
   "dependencies": {
@@ -20,20 +22,34 @@
     "tailwind-merge": "^3.0.2"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^3",
+    "@storybook/addon-essentials": "^8.6.7",
+    "@storybook/addon-svelte-csf": "^5.0.0-next.28",
+    "@storybook/blocks": "^8.6.7",
+    "@storybook/experimental-addon-test": "^8.6.7",
+    "@storybook/svelte": "^8.6.7",
+    "@storybook/sveltekit": "^8.6.7",
+    "@storybook/test": "^8.6.7",
     "@sveltejs/adapter-static": "^3.0.6",
     "@sveltejs/kit": "^2.9.0",
     "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "@tauri-apps/cli": "^2",
+    "@types/node": "^22.13.10",
+    "@vitest/browser": "^3.0.9",
+    "@vitest/coverage-v8": "^3.0.9",
+    "playwright": "^1.51.1",
+    "storybook": "^8.6.7",
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/typography": "^0.5.16",
     "@tailwindcss/vite": "^4.0.14",
-    "@tauri-apps/cli": "^2",
     "autoprefixer": "^10.4.21",
     "daisyui": "^5.0.6",
     "postcss": "^8.5.3",
     "svelte": "^5.0.0",
     "svelte-check": "^4.0.0",
     "tailwindcss": "^4.0.14",
     "typescript": "~5.6.2",
-    "vite": "^6.0.3"
+    "vite": "^6.0.3",
+    "vitest": "^3.0.9"
   }
 }

infrastructure/eid-wallet/src/stories/Button.stories.svelte

@@ -0,0 +1,31 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Button from './Button.svelte';
+  import { fn } from '@storybook/test';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    title: 'Example/Button',
+    component: Button,
+    tags: ['autodocs'],
+    argTypes: {
+      backgroundColor: { control: 'color' },
+      size: {
+        control: { type: 'select' },
+        options: ['small', 'medium', 'large'],
+      },
+    },
+    args: {
+      onClick: fn(),
+    }
+  });
+</script>
+
+<!-- More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -->
+<Story name="Primary" args={{ primary: true, label: 'Button' }} />
+
+<Story name="Secondary" args={{ label: 'Button' }} />
+
+<Story name="Large" args={{ size: 'large', label: 'Button' }} />
+
+<Story name="Small" args={{ size: 'small', label: 'Button' }} />

infrastructure/eid-wallet/src/stories/Button.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import './button.css';
+
+  interface Props {
+    /** 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?: 'small' | 'medium' | 'large';
+    /** Button contents */
+    label: string;
+    /** The onclick event handler */
+    onClick?: () => void;
+  }
+  
+  const { primary = false, backgroundColor, size = 'medium', label, onClick }: Props = $props();
+</script>
+
+<button
+  type="button"
+  class={['storybook-button', `storybook-button--${size}`].join(' ')}
+  class:storybook-button--primary={primary}
+  class:storybook-button--secondary={!primary}
+  style:background-color={backgroundColor}
+  onclick={onClick}
+>
+  {label}
+</button>