Big refactor: all things working

.storybook-react/main.ts

@@ -0,0 +1,16 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["./stories/**/*.stories.ts"],
+  staticDirs: ["./static"],
+  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  core: {
+    disableTelemetry: true,
+  }
+};
+export default config;
+

.storybook-react/preview.ts

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

.storybook-react/stories/button.stories.ts

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '../../components/react';
+
+const meta = {
+  title: 'Button',
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+
+export const Template: StoryObj = {
+  args: {
+    innerHTML: "Click me",
+    variant: "primary",
+    disabled: false,
+    onClick: () => console.log("Click!")
+  },
+  argTypes: {
+    variant: {
+      options: ["default", "primary", "success", "neutral", "warning", "danger", "text"],
+      control: {
+        type: "select",
+      },
+    },
+    size: {
+      options: ["small", "medium", "large"],
+      control: {
+        type: "select",
+      },
+    },
+    outline: {
+      options: [true, false],
+      control: {
+        type: "radio",
+      },
+    },
+    pill: {
+      options: [true, false],
+      control: {
+        type: "radio",
+      },
+    },
+    disabled: {
+      options: [true, false],
+      control: {
+        type: "radio",
+      },
+    },
+    caret: {
+      options: [true, false],
+      control: {
+        type: "radio",
+      },
+    },
+    loading: {
+      options: [true, false],
+      control: {
+        type: "radio",
+      },
+    },
+  },
+};
+
+

.storybook-react/stories/header.stories.ts

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { hrefTo } from '@storybook/addon-links';
+import { Header } from '../../components/react/index';
+
+const defaultLogo = "";
+
+const twoTab = [
+  {
+    label: 'GO TO HEADER PAGE',
+    clickEvent: async () => {
+      const url = await hrefTo('Button', 'Template');
+      window.location.href = url;
+    }
+  },
+  {
+    label: 'GO TO TRACKING PAGE',
+    clickEvent: async () => {
+      const url = await hrefTo('Tracking', 'Template');
+      window.location.href = url;
+    }
+  }
+];
+
+const meta = {
+  title: 'Header',
+  component: Header,
+  args: {
+    size: "small",
+    title: "",
+    logo: defaultLogo,
+    drawer: true,
+    tabs: twoTab,
+  },
+  argTypes: {
+    size: {
+      options: ["large", "medium", "small"],
+      control: {
+        type: "select",
+      },
+    },
+    title: {
+      options: ["", "Tasking Manager", "FMTM", "Drone Tasking Manager"],
+      control: {
+        type: "select",
+      },
+    },
+    logo: {
+      options: [defaultLogo, "data:image/png;base64,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"],
+      control: {
+        type: "select",
+      },
+    },
+    drawer: {
+      options: [true, false],
+      control: {
+        type: "radio",
+      },
+    },
+    tabs: {
+      options: {
+        '2 Tabs': twoTab,
+      },
+      control: {
+        type: "select",
+      },
+    },
+  },
+} satisfies Meta<typeof Header>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Template: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {},
+};
+

.storybook-react/stories/logo.ts

@@ -0,0 +1,18 @@
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Logo } from '../../components/react/index';
+
+const meta = {
+  title: 'Logo',
+  component: Logo,
+} satisfies Meta<typeof Logo>;
+
+export default meta;
+
+export const Template: StoryObj = {
+  args: {},
+  argTypes: {},
+};
+
+

.storybook-react/stories/toolbar.stories.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Toolbar } from '../../components/react/index';
+
+const meta = {
+  title: 'Toolbar',
+  component: Toolbar,
+  argTypes: {},
+} satisfies Meta<typeof Toolbar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Template: Story = {
+  args: {},
+};
+

.storybook/main.ts

@@ -8,6 +8,8 @@ const config: StorybookConfig = {
     name: "@storybook/web-components-vite",
     options: {},
   },
-  docs: {},
+  core: {
+    disableTelemetry: true,
+  }
 };
 export default config;

.storybook/stories/button.stories.ts

@@ -4,6 +4,10 @@ import type { Meta, StoryObj } from "@storybook/web-components";
 import "../../components/index";
 import { html } from "lit";
 
+import registerBundledIcons from "../../components/icons";
+
+registerBundledIcons();
+
 const meta: Meta = {
   title: "Button",
   component: "hot-button",
@@ -14,45 +18,100 @@ export const Template: StoryObj = {
   args: {
     text: "Click Me",
     variant: "default",
+    size: "medium",
     disabled: false,
+    style: "",
+    href: "",
   },
   argTypes: {
     variant: {
-      options: ["default", "primary", "success", "neutral", "warning", "danger"],
+      options: ["default", "primary", "success", "neutral", "warning", "danger", "text"],
+      control: {
+        type: "select",
+      },
+    },
+    size: {
+      options: ["small", "medium", "large"],
       control: {
         type: "select",
       },
     },
+    outline: {
+      options: [true, false],
+      control: {
+        type: "radio",
+      },
+    },
+    pill: {
+      options: [true, false],
+      control: {
+        type: "radio",
+      },
+    },
+    prefix: {
+      options: [true, false],
+      control: {
+        type: "radio",
+      },
+    },
+    suffix: {
+      options: [true, false],
+      control: {
+        type: "radio",
+      },
+    },
+    icon: {
+      options: [true, false],
+      control: {
+        type: "radio",
+      },
+    },
     disabled: {
       options: [true, false],
       control: {
         type: "radio",
       },
     },
-  },
-  parameters: {
-    showToast: () => {
-      const alert = document.getElementById("click-toast");
-      if (alert) {
-        alert.show();
-      }
+    circle: {
+      options: [true, false],
+      control: {
+        type: "radio",
+      },
+    },
+    caret: {
+      options: [true, false],
+      control: {
+        type: "radio",
+      },
+    },
+    loading: {
+      options: [true, false],
+      control: {
+        type: "radio",
+      },
     },
   },
   render: (args, { parameters }) => {
     return html`
-      <h1>Button</h1>
       <hot-button
         variant="${args.variant}"
-        @click=${() => {parameters.showToast()}}
+        ?outline="${args.outline}"
+        size="${args.size}"
+        ?pill="${args.pill}"
+        ?circle="${args.circle}"
+        @click=${() => {console.log("click!")}}
         ?disabled=${args.disabled}
-      >${args.text}</hot-button>
-
-      <br>
-      <br>
-      <sl-alert id="click-toast" variant="success" duration="3000" closable>
-        <sl-icon slot="icon" name="check2-circle"></sl-icon>
-        You clicked the button.
-      </sl-alert>
+        style=${args.style}
+        ?prefix=${args.prefix}
+        ?caret=${args.caret}
+        ?loading=${args.loading}
+        href="${args.href}"
+        target="_blank"
+      >
+        ${args.prefix ? html`<sl-icon slot="prefix" library="bundled" name="person-circle"></sl-icon>` : ""}
+        ${args.suffix ? html`<sl-icon slot="prefix" library="bundled" name="list"></sl-icon>` : ""}
+        ${args.icon ? html`<sl-icon library="bundled" name="person-circle"></sl-icon>` : args.text}
+      </hot-button>
     `;
   },
 };