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

@@ -1,33 +1,45 @@
 {
-	"name": "hello",
+  "name": "hello",
-	"version": "0.0.1",
+  "version": "0.0.1",
-	"private": true,
+  "private": true,
-	"scripts": {
+  "scripts": {
-		"dev": "vite dev",
+    "dev": "vite dev",
-		"build": "vite build",
+    "build": "vite build",
-		"preview": "vite preview",
+    "preview": "vite preview",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "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",
-	"devDependencies": {
+    "build-storybook": "storybook build"
-		"@sveltejs/adapter-auto": "^2.0.0",
+  },
-		"@sveltejs/adapter-node": "^1.2.3",
+  "devDependencies": {
-		"@sveltejs/kit": "^1.5.0",
+    "@storybook/addon-essentials": "^7.4.5",
-		"@tailwindcss/typography": "^0.5.10",
+    "@storybook/addon-interactions": "^7.4.5",
-		"autoprefixer": "^10.4.16",
+    "@storybook/addon-links": "^7.4.5",
-		"postcss": "^8.4.30",
+    "@storybook/blocks": "^7.4.5",
-		"svelte": "^3.54.0",
+    "@storybook/svelte": "^7.4.5",
-		"svelte-check": "^3.0.1",
+    "@storybook/sveltekit": "^7.4.5",
-		"tailwindcss": "^3.3.3",
+    "@storybook/testing-library": "^0.2.1",
-		"tslib": "^2.4.1",
+    "@sveltejs/adapter-auto": "^2.0.0",
-		"typescript": "^5.0.0",
+    "@sveltejs/adapter-node": "^1.2.3",
-		"vite": "^4.2.0"
+    "@sveltejs/kit": "^1.5.0",
-	},
+    "@tailwindcss/typography": "^0.5.10",
-	"type": "module",
+    "autoprefixer": "^10.4.16",
-	"dependencies": {
+    "postcss": "^8.4.30",
-		"@nostr-dev-kit/ndk": "^1.3.0",
+    "react": "^18.2.0",
-		"@nostr-dev-kit/ndk-svelte": "^1.3.0",
+    "react-dom": "^18.2.0",
-		"@nostr-dev-kit/ndk-svelte-components": "^1.3.0",
+    "storybook": "^7.4.5",
-		"daisyui": "^3.8.0"
+    "svelte": "^3.54.0",
-	}
+    "svelte-check": "^3.0.1",
+    "tailwindcss": "^3.3.3",
+    "tslib": "^2.4.1",
+    "typescript": "^5.0.0",
+    "vite": "^4.2.0"
+  },
+  "type": "module",
+  "dependencies": {
+    "@nostr-dev-kit/ndk": "^1.3.0",
+    "@nostr-dev-kit/ndk-svelte": "^1.3.0",
+    "@nostr-dev-kit/ndk-svelte-components": "^1.3.0",
+    "daisyui": "^3.8.0"
+  }
 }

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>
+    {#if !nip07plugin}
-    <div class="btn btn-outline normal-case">Login</div>
+      <div class="btn btn-primary normal-case">
+        Sign up
+      </div>
+    {/if}
+    <button class="btn btn-outline normal-case">Login</button>
   </div>
 </div>