build: add storybook

- add default svelte storybook using yarn sb init
 - add nip07plugin state for Navbar and navbar.stories.ts

.storybook/main.ts

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

.storybook/preview.ts

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

package.json

@@ -7,15 +7,27 @@
     "build": "vite build",
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "devDependencies": {
+    "@storybook/addon-essentials": "^7.4.5",
+    "@storybook/addon-interactions": "^7.4.5",
+    "@storybook/addon-links": "^7.4.5",
+    "@storybook/blocks": "^7.4.5",
+    "@storybook/svelte": "^7.4.5",
+    "@storybook/sveltekit": "^7.4.5",
+    "@storybook/testing-library": "^0.2.1",
     "@sveltejs/adapter-auto": "^2.0.0",
     "@sveltejs/adapter-node": "^1.2.3",
     "@sveltejs/kit": "^1.5.0",
     "@tailwindcss/typography": "^0.5.10",
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.30",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.4.5",
     "svelte": "^3.54.0",
     "svelte-check": "^3.0.1",
     "tailwindcss": "^3.3.3",

src/lib/components/Navbar.stories.ts

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Navbar from '$lib/components/navbar.svelte';
+
+// More on how to set up stories at: https://storybook.js.org/docs/svelte/writing-stories/introduction
+const meta = {
+  title: 'Navbar',
+  component: Navbar,
+  tags: ['autodocs'],
+  argTypes: {
+    nip07plugin: { control: 'boolean' },
+  },
+} satisfies Meta<Navbar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/svelte/writing-stories/args
+export const Default: Story = {
+  args: {
+  },
+};
+
+export const NoNIP07: Story = {
+  args: {
+    nip07plugin: false,
+  },
+};
+
+export const NIP07Exists: Story = {
+  args: {
+    nip07plugin: true,
+  },
+};

src/lib/components/navbar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  export let nip07plugin: boolean = false;
 </script>
 
 <div class="navbar bg-neutral">
@@ -10,7 +11,11 @@
     </h4>
   </div>
   <div class="flex-none gap-4">
-    <div class="btn btn-primary normal-case">Sign up</div>
-    <div class="btn btn-outline normal-case">Login</div>
+    {#if !nip07plugin}
+      <div class="btn btn-primary normal-case">
+        Sign up
+      </div>
+    {/if}
+    <button class="btn btn-outline normal-case">Login</button>
   </div>
 </div>