implemented Storybook dependancies and working also

.eslintrc.cjs

@@ -1,6 +1,6 @@
 /* eslint-env node */
 module.exports = {
-    extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
+    extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:storybook/recommended'],
     parser: '@typescript-eslint/parser',
     plugins: ['@typescript-eslint'],
     root: true,

.gitignore

@@ -1,2 +1,3 @@
 node_modules
-/lib
+/lib
+*storybook.log

.storybook/main.ts

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

.storybook/preview.ts

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

dist/components/Button.stories.d.ts

@@ -0,0 +1,60 @@
+/// <reference types="react" />
+import type { StoryObj } from "@storybook/react";
+declare const meta: {
+    title: string;
+    component: (props: {
+        children: import("react").ReactNode;
+        onClick?: (() => void) | undefined;
+        className?: string | undefined;
+        style?: import("react").CSSProperties | undefined;
+        size?: "small" | "medium" | "large" | undefined;
+        isLoading?: boolean | undefined;
+    }) => import("react").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        size: {
+            control: {
+                type: "select";
+                options: string[];
+            };
+        };
+        isLoading: {
+            control: {
+                type: "boolean";
+            };
+        };
+        style: {
+            control: {
+                type: "object";
+            };
+        };
+        children: {
+            control: {
+                type: "text";
+            };
+        };
+        className: {
+            control: {
+                type: "text";
+            };
+        };
+        onClick: {
+            action: string;
+        };
+    };
+    args: {
+        onClick: import("@vitest/spy").Mock<[], void>;
+        children: string;
+        size: "medium";
+        isLoading: false;
+        style: {};
+        className: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const medium: Story;
+export declare const small: Story;

dist/settings/Header.d.ts

@@ -20,7 +20,7 @@ interface NavRightContent {
 }
 interface HeaderProps {
     children: React.ReactNode;
-    logo: string;
+    logo: React.ReactNode;
     className: string;
     breadcrumbs: Array<{
         title: React.ReactNode;

dist/settings/Header.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Header from "./Header";
+declare const meta: Meta<typeof Header>;
+export default meta;
+type Story = StoryObj<typeof Header>;
+export declare const FirstHeader: Story;

dist/stories/Button.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import './button.css';
+interface ButtonProps {
+    /**
+     * 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;
+    /**
+     * Optional click handler
+     */
+    onClick?: () => void;
+}
+/**
+ * Primary UI component for user interaction
+ */
+export declare const Button: ({ primary, size, backgroundColor, label, ...props }: ButtonProps) => React.JSX.Element;
+export {};

dist/stories/Header.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import './header.css';
+type User = {
+    name: string;
+};
+interface HeaderProps {
+    user?: User;
+    onLogin?: () => void;
+    onLogout?: () => void;
+    onCreateAccount?: () => void;
+}
+export declare const Header: ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => React.JSX.Element;
+export {};

dist/stories/Page.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import './page.css';
+export declare const Page: React.FC;

dist/stories/Page.stories.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC<{}>;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LoggedOut: Story;
+export declare const LoggedIn: Story;