From b201b5e01d874643cb5418b10d6228aa0a84751e Mon Sep 17 00:00:00 2001
From: Daniel Riera <driera@livefront.com>
Date: Mon, 13 Jan 2025 13:00:08 -0500
Subject: [PATCH 1/8] PM-14051 -initial storybook set up -Initial stories and
 folder structure

---
 .../content/components/.storybook/main.ts     |  68 +++++++++++
 .../action-button.stories.ts                  |  29 +++++
 .../badge-button.stories.ts                   |  29 +++++
 .../close-button.stories.ts                   |  27 +++++
 .../edit-button.stories.ts                    |  29 +++++
 .../stories/cipher/cipher-action.stories.ts   |  33 +++++
 .../stories/cipher/cipher-icon.stories.ts     |  35 ++++++
 .../cipher/cipher-indicator-icon.stories.ts   |  35 ++++++
 package-lock.json                             | 113 +++++++++++++++++-
 package.json                                  |   3 +
 10 files changed, 396 insertions(+), 5 deletions(-)
 create mode 100644 apps/browser/src/autofill/content/components/.storybook/main.ts
 create mode 100644 apps/browser/src/autofill/content/components/stories/buttons/action-button-stories/action-button.stories.ts
 create mode 100644 apps/browser/src/autofill/content/components/stories/buttons/badge-button-stories/badge-button.stories.ts
 create mode 100644 apps/browser/src/autofill/content/components/stories/buttons/close-button-stories/close-button.stories.ts
 create mode 100644 apps/browser/src/autofill/content/components/stories/buttons/edit-button-stories/edit-button.stories.ts
 create mode 100644 apps/browser/src/autofill/content/components/stories/cipher/cipher-action.stories.ts
 create mode 100644 apps/browser/src/autofill/content/components/stories/cipher/cipher-icon.stories.ts
 create mode 100644 apps/browser/src/autofill/content/components/stories/cipher/cipher-indicator-icon.stories.ts

diff --git a/apps/browser/src/autofill/content/components/.storybook/main.ts b/apps/browser/src/autofill/content/components/.storybook/main.ts
new file mode 100644
index 00000000000..ea796b6fd26
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/.storybook/main.ts
@@ -0,0 +1,68 @@
+import { dirname, join } from "path";
+import type { StorybookConfig } from "@storybook/web-components-webpack5";
+import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";
+import remarkGfm from "remark-gfm";
+
+const getAbsolutePath = (value: string): string =>
+  dirname(require.resolve(join(value, "package.json")));
+
+const config: StorybookConfig = {
+  stories: ["../stories/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
+  addons: [
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-a11y"),
+    getAbsolutePath("@storybook/addon-designs"),
+    getAbsolutePath("@storybook/addon-interactions"),
+    {
+      name: "@storybook/addon-docs",
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/web-components-webpack5"),
+    options: {
+      legacyRootApi: true,
+    },
+  },
+  core: {
+    disableTelemetry: true,
+  },
+  env: (existingConfig) => ({
+    ...existingConfig,
+    FLAGS: JSON.stringify({}),
+  }),
+  webpackFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve.plugins = [new TsconfigPathsPlugin()] as any;
+    }
+
+    if (config.module && config.module.rules) {
+      config.module.rules.push({
+        test: /\.(ts|tsx)$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: require.resolve("babel-loader"),
+            options: {
+              presets: [
+                require.resolve("@babel/preset-env"),
+                require.resolve("@babel/preset-typescript"),
+              ],
+            },
+          },
+        ],
+      });
+    }
+    return config;
+  },
+  docs: {},
+};
+
+export default config;
diff --git a/apps/browser/src/autofill/content/components/stories/buttons/action-button-stories/action-button.stories.ts b/apps/browser/src/autofill/content/components/stories/buttons/action-button-stories/action-button.stories.ts
new file mode 100644
index 00000000000..542a9c69e0f
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/stories/buttons/action-button-stories/action-button.stories.ts
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from "@storybook/web-components";
+
+import { ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+
+import { ActionButton } from "../../../buttons/action-button";
+
+export default {
+  title: "Components/Buttons/Action Button",
+  argTypes: {
+    buttonText: { control: "text" },
+    disabled: { control: "boolean" },
+    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
+    buttonAction: { control: false },
+  },
+  args: {
+    buttonText: "Click Me",
+    disabled: false,
+    theme: ThemeTypes.Light,
+    buttonAction: () => alert("Clicked"),
+  },
+} as Meta;
+
+type Story = StoryObj;
+
+const Template = (args: any) => ActionButton({ ...args });
+
+export const Default: Story = {
+  render: Template,
+};
diff --git a/apps/browser/src/autofill/content/components/stories/buttons/badge-button-stories/badge-button.stories.ts b/apps/browser/src/autofill/content/components/stories/buttons/badge-button-stories/badge-button.stories.ts
new file mode 100644
index 00000000000..8a7558deb08
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/stories/buttons/badge-button-stories/badge-button.stories.ts
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from "@storybook/web-components";
+
+import { ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+
+import { BadgeButton } from "../../../buttons/badge-button";
+
+export default {
+  title: "Components/Buttons/Badge Button",
+  argTypes: {
+    buttonText: { control: "text" },
+    disabled: { control: "boolean" },
+    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
+    buttonAction: { control: false },
+  },
+  args: {
+    buttonText: "Click Me",
+    disabled: false,
+    theme: ThemeTypes.Light,
+    buttonAction: () => alert("Clicked"),
+  },
+} as Meta;
+
+type Story = StoryObj;
+
+const Template = (args: any) => BadgeButton({ ...args });
+
+export const Default: Story = {
+  render: Template,
+};
diff --git a/apps/browser/src/autofill/content/components/stories/buttons/close-button-stories/close-button.stories.ts b/apps/browser/src/autofill/content/components/stories/buttons/close-button-stories/close-button.stories.ts
new file mode 100644
index 00000000000..453d8abeffa
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/stories/buttons/close-button-stories/close-button.stories.ts
@@ -0,0 +1,27 @@
+import { Meta, StoryObj } from "@storybook/web-components";
+
+import { ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+
+import { CloseButton } from "../../../buttons/close-button";
+
+export default {
+  title: "Components/Buttons/Close Button",
+  argTypes: {
+    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
+    handleCloseNotification: { control: false },
+  },
+  args: {
+    theme: ThemeTypes.Light,
+    handleCloseNotification: () => {
+      alert("Close button clicked!");
+    },
+  },
+} as Meta;
+
+type Story = StoryObj;
+
+const Template = (args: any) => CloseButton({ ...args });
+
+export const Default: Story = {
+  render: Template,
+};
diff --git a/apps/browser/src/autofill/content/components/stories/buttons/edit-button-stories/edit-button.stories.ts b/apps/browser/src/autofill/content/components/stories/buttons/edit-button-stories/edit-button.stories.ts
new file mode 100644
index 00000000000..670cf9825f8
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/stories/buttons/edit-button-stories/edit-button.stories.ts
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from "@storybook/web-components";
+
+import { ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+
+import { EditButton } from "../../../buttons/edit-button";
+
+export default {
+  title: "Components/Buttons/Edit Button",
+  argTypes: {
+    buttonText: { control: "text" },
+    disabled: { control: "boolean" },
+    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
+    buttonAction: { control: false },
+  },
+  args: {
+    buttonText: "Click Me",
+    disabled: false,
+    theme: ThemeTypes.Light,
+    buttonAction: () => alert("Clicked"),
+  },
+} as Meta;
+
+type Story = StoryObj;
+
+const Template = (args: any) => EditButton({ ...args });
+
+export const Default: Story = {
+  render: Template,
+};
diff --git a/apps/browser/src/autofill/content/components/stories/cipher/cipher-action.stories.ts b/apps/browser/src/autofill/content/components/stories/cipher/cipher-action.stories.ts
new file mode 100644
index 00000000000..b65abecd9ac
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/stories/cipher/cipher-action.stories.ts
@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from "@storybook/web-components";
+
+import { ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+
+import { NotificationTypes } from "../../../../notification/abstractions/notification-bar";
+import { CipherAction } from "../../../components/cipher/cipher-action";
+
+export default {
+  title: "Components/Cipher/Cipher Action",
+  argTypes: {
+    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
+    notificationType: {
+      control: "select",
+      options: [NotificationTypes.Change, NotificationTypes.Add],
+    },
+    handleAction: { control: false },
+  },
+  args: {
+    theme: ThemeTypes.Light,
+    notificationType: NotificationTypes.Change,
+    handleAction: () => {
+      alert("Action triggered!");
+    },
+  },
+} as Meta;
+
+type Story = StoryObj;
+
+const Template = (args: any) => CipherAction({ ...args });
+
+export const Default: Story = {
+  render: Template,
+};
diff --git a/apps/browser/src/autofill/content/components/stories/cipher/cipher-icon.stories.ts b/apps/browser/src/autofill/content/components/stories/cipher/cipher-icon.stories.ts
new file mode 100644
index 00000000000..b8695528ee5
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/stories/cipher/cipher-icon.stories.ts
@@ -0,0 +1,35 @@
+import { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+
+import { ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+
+import { CipherIcon } from "../../cipher/cipher-icon";
+
+export default {
+  title: "Components/Cipher/Cipher Icon",
+  argTypes: {
+    color: { control: "color" },
+    size: { control: "text" },
+    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
+    uri: { control: "text" },
+  },
+  args: {
+    size: "50px",
+    theme: ThemeTypes.Light,
+    uri: "",
+  },
+} as Meta;
+
+type Story = StoryObj;
+
+const Template = (args: any) => {
+  return html`
+    <div style="width: ${args.size}; height: ${args.size}; overflow: hidden;">
+      ${CipherIcon({ ...args })}
+    </div>
+  `;
+};
+
+export const Default: Story = {
+  render: Template,
+};
diff --git a/apps/browser/src/autofill/content/components/stories/cipher/cipher-indicator-icon.stories.ts b/apps/browser/src/autofill/content/components/stories/cipher/cipher-indicator-icon.stories.ts
new file mode 100644
index 00000000000..09e9600c533
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/stories/cipher/cipher-indicator-icon.stories.ts
@@ -0,0 +1,35 @@
+import { Meta, StoryObj } from "@storybook/web-components";
+
+import { ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+
+import { CipherInfoIndicatorIcons } from "../../cipher/cipher-indicator-icons";
+
+export default {
+  title: "Components/Cipher/Cipher Indicator Icon",
+  argTypes: {
+    isBusinessOrg: { control: "boolean" },
+    isFamilyOrg: { control: "boolean" },
+    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
+  },
+  args: {
+    theme: ThemeTypes.Light,
+    isBusinessOrg: true,
+    isFamilyOrg: false,
+  },
+  parameters: {
+    controls: {
+      exclude: ["isFamilyOrg"],
+    },
+  },
+} as Meta;
+
+type Story = StoryObj;
+
+const Template = (args: any) => {
+  args.isFamilyOrg = !args.isBusinessOrg;
+  return CipherInfoIndicatorIcons({ ...args });
+};
+
+export const Default: Story = {
+  render: Template,
+};
diff --git a/package-lock.json b/package-lock.json
index 591478d3516..7f98ef00e07 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -86,6 +86,7 @@
         "@angular/elements": "18.2.13",
         "@babel/core": "7.24.9",
         "@babel/preset-env": "7.24.8",
+        "@babel/preset-typescript": "7.26.0",
         "@compodoc/compodoc": "1.1.26",
         "@electron/notarize": "2.5.0",
         "@electron/rebuild": "3.7.1",
@@ -99,6 +100,7 @@
         "@storybook/angular": "8.4.7",
         "@storybook/manager-api": "8.4.7",
         "@storybook/theming": "8.4.7",
+        "@storybook/web-components-webpack5": "8.4.7",
         "@types/argon2-browser": "1.18.4",
         "@types/chrome": "0.0.280",
         "@types/firefox-webext-browser": "120.0.4",
@@ -2730,9 +2732,9 @@
       }
     },
     "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.25.9.tgz",
-      "integrity": "sha512-kSMlyUVdWe25rEsRGviIgOWnoT/nfABVWlqt9N19/dIPWViAOW2s9wznP5tURbs/IDuNk4gPy3YdYRgH3uxhBw==",
+      "version": "7.26.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.26.5.tgz",
+      "integrity": "sha512-RS+jZcRdZdRFzMyr+wcsaqOmld1/EqTghfaBGQQd/WnRdzdlvSZ//kF7U8VQTxf1ynZ4cjUcYgjVGx13ewNPMg==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -3155,7 +3157,6 @@
       "integrity": "sha512-ld6oezHQMZsZfp6pWtbjaNDF2tiiCYYDqQszHt5VV437lewP9aSi2Of99CK0D0XB21k7FLgnLcmQKyKzynfeAA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
       },
@@ -3282,7 +3283,6 @@
       "integrity": "sha512-hjMgRy5hb8uJJjUcdWunWVcoi9bGpJp8p5Ol1229PoN6aytsLwNMgmdftO23wnCLMfVmTwZDWMPNq/D1SY60JQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
       },
@@ -4118,6 +4118,39 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-transform-typescript": {
+      "version": "7.26.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.26.5.tgz",
+      "integrity": "sha512-GJhPO0y8SD5EYVCy2Zr+9dSZcEgaSmq5BLR0Oc25TOEhC+ba49vUAGZFjy8v79z9E1mdldq4x9d1xgh4L1d5dQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.25.9",
+        "@babel/helper-create-class-features-plugin": "^7.25.9",
+        "@babel/helper-plugin-utils": "^7.26.5",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.25.9",
+        "@babel/plugin-syntax-typescript": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-typescript/node_modules/@babel/helper-annotate-as-pure": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.25.9.tgz",
+      "integrity": "sha512-gv7320KBUFJz1RnylIg5WWYPRXKZ884AGkYpgpWW02TH66Dl+HaC1t1CKd0z3R4b6hdYEcmrNZHUmfCP+1u3/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/plugin-transform-unicode-escapes": {
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.25.9.tgz",
@@ -4342,6 +4375,26 @@
         "@babel/core": "^7.0.0-0 || ^8.0.0-0 <8.0.0"
       }
     },
+    "node_modules/@babel/preset-typescript": {
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.26.0.tgz",
+      "integrity": "sha512-NMk1IGZ5I/oHhoXEElcm+xUnL/szL6xflkFZmoEU9xj1qSJXpiS7rsspYo92B4DRCDvZn2erT5LdsCeXAKNCkg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.25.9",
+        "@babel/helper-validator-option": "^7.25.9",
+        "@babel/plugin-syntax-jsx": "^7.25.9",
+        "@babel/plugin-transform-modules-commonjs": "^7.25.9",
+        "@babel/plugin-transform-typescript": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/runtime": {
       "version": "7.25.0",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.0.tgz",
@@ -9034,6 +9087,56 @@
         "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
       }
     },
+    "node_modules/@storybook/web-components": {
+      "version": "8.4.7",
+      "resolved": "https://registry.npmjs.org/@storybook/web-components/-/web-components-8.4.7.tgz",
+      "integrity": "sha512-zR/bUWGkS5uxvqfXnW082ScrC4y5UrTdE1VKasezLGi5bTLub2hz8JP87PJgtWrq+mdrdmkLGzv5O4iJ/tlMAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@storybook/components": "8.4.7",
+        "@storybook/global": "^5.0.0",
+        "@storybook/manager-api": "8.4.7",
+        "@storybook/preview-api": "8.4.7",
+        "@storybook/theming": "8.4.7",
+        "tiny-invariant": "^1.3.1",
+        "ts-dedent": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "lit": "^2.0.0 || ^3.0.0",
+        "storybook": "^8.4.7"
+      }
+    },
+    "node_modules/@storybook/web-components-webpack5": {
+      "version": "8.4.7",
+      "resolved": "https://registry.npmjs.org/@storybook/web-components-webpack5/-/web-components-webpack5-8.4.7.tgz",
+      "integrity": "sha512-RgLFQB7F4FOX5nOK3byaCo5Gs8nKMq1uNswOXdHSgZKfJfaZxmyMMGmnVUmOOLECsxyREokHwRDKma8SgFrRRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@storybook/builder-webpack5": "8.4.7",
+        "@storybook/web-components": "8.4.7",
+        "@types/node": "^22.0.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "lit": "^2.0.0 || ^3.0.0",
+        "storybook": "^8.4.7"
+      }
+    },
     "node_modules/@szmarczak/http-timer": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-4.0.6.tgz",
diff --git a/package.json b/package.json
index 3dcb2c142ed..09ce8fda14e 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "lint:dep-ownership": "tsc --project ./scripts/tsconfig.json && node ./scripts/dist/dep-ownership.js",
     "docs:json": "compodoc -p ./tsconfig.json -e json -d . --disableRoutesGraph",
     "storybook": "ng run components:storybook",
+    "storybook:lit": "storybook dev -p 6006 -c apps/browser/src/autofill/content/components/.storybook",
     "build-storybook": "ng run components:build-storybook",
     "build-storybook:ci": "ng run components:build-storybook --webpack-stats-json",
     "postinstall": "patch-package"
@@ -46,6 +47,7 @@
     "@angular/elements": "18.2.13",
     "@babel/core": "7.24.9",
     "@babel/preset-env": "7.24.8",
+    "@babel/preset-typescript": "7.26.0",
     "@compodoc/compodoc": "1.1.26",
     "@electron/notarize": "2.5.0",
     "@electron/rebuild": "3.7.1",
@@ -59,6 +61,7 @@
     "@storybook/angular": "8.4.7",
     "@storybook/manager-api": "8.4.7",
     "@storybook/theming": "8.4.7",
+    "@storybook/web-components-webpack5": "8.4.7",
     "@types/argon2-browser": "1.18.4",
     "@types/chrome": "0.0.280",
     "@types/firefox-webext-browser": "120.0.4",

From c6fe1f5ceb7f18cb2d04f8314f4ab019012d3bc6 Mon Sep 17 00:00:00 2001
From: Daniel Riera <driera@livefront.com>
Date: Mon, 13 Jan 2025 14:21:21 -0500
Subject: [PATCH 2/8] clean up typing on existing stories

---
 .../action-button.stories.ts                  | 17 +++++++-----
 .../badge-button.stories.ts                   | 17 +++++++-----
 .../close-button.stories.ts                   | 14 +++++-----
 .../edit-button.stories.ts                    | 16 +++++++-----
 .../stories/cipher/cipher-action.stories.ts   | 15 ++++++-----
 .../stories/cipher/cipher-icon.stories.ts     | 17 +++++++-----
 .../cipher/cipher-indicator-icon.stories.ts   | 26 +++++++++----------
 7 files changed, 72 insertions(+), 50 deletions(-)

diff --git a/apps/browser/src/autofill/content/components/stories/buttons/action-button-stories/action-button.stories.ts b/apps/browser/src/autofill/content/components/stories/buttons/action-button-stories/action-button.stories.ts
index 542a9c69e0f..59b7852a7f7 100644
--- a/apps/browser/src/autofill/content/components/stories/buttons/action-button-stories/action-button.stories.ts
+++ b/apps/browser/src/autofill/content/components/stories/buttons/action-button-stories/action-button.stories.ts
@@ -1,9 +1,16 @@
 import { Meta, StoryObj } from "@storybook/web-components";
 
-import { ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
 
 import { ActionButton } from "../../../buttons/action-button";
 
+type Args = {
+  buttonText: string;
+  disabled: boolean;
+  theme: Theme;
+  buttonAction: (e: Event) => void;
+};
+
 export default {
   title: "Components/Buttons/Action Button",
   argTypes: {
@@ -18,12 +25,10 @@ export default {
     theme: ThemeTypes.Light,
     buttonAction: () => alert("Clicked"),
   },
-} as Meta;
-
-type Story = StoryObj;
+} as Meta<Args>;
 
-const Template = (args: any) => ActionButton({ ...args });
+const Template = (args: Args) => ActionButton({ ...args });
 
-export const Default: Story = {
+export const Default: StoryObj<Args> = {
   render: Template,
 };
diff --git a/apps/browser/src/autofill/content/components/stories/buttons/badge-button-stories/badge-button.stories.ts b/apps/browser/src/autofill/content/components/stories/buttons/badge-button-stories/badge-button.stories.ts
index 8a7558deb08..ca4d091f460 100644
--- a/apps/browser/src/autofill/content/components/stories/buttons/badge-button-stories/badge-button.stories.ts
+++ b/apps/browser/src/autofill/content/components/stories/buttons/badge-button-stories/badge-button.stories.ts
@@ -1,9 +1,16 @@
 import { Meta, StoryObj } from "@storybook/web-components";
 
-import { ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
 
 import { BadgeButton } from "../../../buttons/badge-button";
 
+type Args = {
+  buttonAction: (e: Event) => void;
+  buttonText: string;
+  disabled?: boolean;
+  theme: Theme;
+};
+
 export default {
   title: "Components/Buttons/Badge Button",
   argTypes: {
@@ -18,12 +25,10 @@ export default {
     theme: ThemeTypes.Light,
     buttonAction: () => alert("Clicked"),
   },
-} as Meta;
-
-type Story = StoryObj;
+} as Meta<Args>;
 
-const Template = (args: any) => BadgeButton({ ...args });
+const Template = (args: Args) => BadgeButton({ ...args });
 
-export const Default: Story = {
+export const Default: StoryObj<Args> = {
   render: Template,
 };
diff --git a/apps/browser/src/autofill/content/components/stories/buttons/close-button-stories/close-button.stories.ts b/apps/browser/src/autofill/content/components/stories/buttons/close-button-stories/close-button.stories.ts
index 453d8abeffa..050aebbd366 100644
--- a/apps/browser/src/autofill/content/components/stories/buttons/close-button-stories/close-button.stories.ts
+++ b/apps/browser/src/autofill/content/components/stories/buttons/close-button-stories/close-button.stories.ts
@@ -1,9 +1,13 @@
 import { Meta, StoryObj } from "@storybook/web-components";
 
-import { ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
 
 import { CloseButton } from "../../../buttons/close-button";
 
+type Args = {
+  handleCloseNotification: (e: Event) => void;
+  theme: Theme;
+};
 export default {
   title: "Components/Buttons/Close Button",
   argTypes: {
@@ -16,12 +20,10 @@ export default {
       alert("Close button clicked!");
     },
   },
-} as Meta;
-
-type Story = StoryObj;
+} as Meta<Args>;
 
-const Template = (args: any) => CloseButton({ ...args });
+const Template = (args: Args) => CloseButton({ ...args });
 
-export const Default: Story = {
+export const Default: StoryObj<Args> = {
   render: Template,
 };
diff --git a/apps/browser/src/autofill/content/components/stories/buttons/edit-button-stories/edit-button.stories.ts b/apps/browser/src/autofill/content/components/stories/buttons/edit-button-stories/edit-button.stories.ts
index 670cf9825f8..d84ec7c17a0 100644
--- a/apps/browser/src/autofill/content/components/stories/buttons/edit-button-stories/edit-button.stories.ts
+++ b/apps/browser/src/autofill/content/components/stories/buttons/edit-button-stories/edit-button.stories.ts
@@ -1,9 +1,15 @@
 import { Meta, StoryObj } from "@storybook/web-components";
 
-import { ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
 
 import { EditButton } from "../../../buttons/edit-button";
 
+type Args = {
+  buttonAction: (e: Event) => void;
+  buttonText: string;
+  disabled?: boolean;
+  theme: Theme;
+};
 export default {
   title: "Components/Buttons/Edit Button",
   argTypes: {
@@ -18,12 +24,10 @@ export default {
     theme: ThemeTypes.Light,
     buttonAction: () => alert("Clicked"),
   },
-} as Meta;
-
-type Story = StoryObj;
+} as Meta<Args>;
 
-const Template = (args: any) => EditButton({ ...args });
+const Template = (args: Args) => EditButton({ ...args });
 
-export const Default: Story = {
+export const Default: StoryObj<Args> = {
   render: Template,
 };
diff --git a/apps/browser/src/autofill/content/components/stories/cipher/cipher-action.stories.ts b/apps/browser/src/autofill/content/components/stories/cipher/cipher-action.stories.ts
index b65abecd9ac..71c4e199329 100644
--- a/apps/browser/src/autofill/content/components/stories/cipher/cipher-action.stories.ts
+++ b/apps/browser/src/autofill/content/components/stories/cipher/cipher-action.stories.ts
@@ -1,10 +1,15 @@
 import { Meta, StoryObj } from "@storybook/web-components";
 
-import { ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
 
 import { NotificationTypes } from "../../../../notification/abstractions/notification-bar";
 import { CipherAction } from "../../../components/cipher/cipher-action";
 
+type Args = {
+  handleAction?: (e: Event) => void;
+  notificationType: typeof NotificationTypes.Change | typeof NotificationTypes.Add;
+  theme: Theme;
+};
 export default {
   title: "Components/Cipher/Cipher Action",
   argTypes: {
@@ -22,12 +27,10 @@ export default {
       alert("Action triggered!");
     },
   },
-} as Meta;
-
-type Story = StoryObj;
+} as Meta<Args>;
 
-const Template = (args: any) => CipherAction({ ...args });
+const Template = (args: Args) => CipherAction({ ...args });
 
-export const Default: Story = {
+export const Default: StoryObj<Args> = {
   render: Template,
 };
diff --git a/apps/browser/src/autofill/content/components/stories/cipher/cipher-icon.stories.ts b/apps/browser/src/autofill/content/components/stories/cipher/cipher-icon.stories.ts
index b8695528ee5..26032de9dcd 100644
--- a/apps/browser/src/autofill/content/components/stories/cipher/cipher-icon.stories.ts
+++ b/apps/browser/src/autofill/content/components/stories/cipher/cipher-icon.stories.ts
@@ -1,10 +1,17 @@
 import { Meta, StoryObj } from "@storybook/web-components";
 import { html } from "lit";
 
-import { ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
 
 import { CipherIcon } from "../../cipher/cipher-icon";
 
+type Args = {
+  color: string;
+  size: string;
+  theme: Theme;
+  uri?: string;
+};
+
 export default {
   title: "Components/Cipher/Cipher Icon",
   argTypes: {
@@ -18,11 +25,9 @@ export default {
     theme: ThemeTypes.Light,
     uri: "",
   },
-} as Meta;
-
-type Story = StoryObj;
+} as Meta<Args>;
 
-const Template = (args: any) => {
+const Template = (args: Args) => {
   return html`
     <div style="width: ${args.size}; height: ${args.size}; overflow: hidden;">
       ${CipherIcon({ ...args })}
@@ -30,6 +35,6 @@ const Template = (args: any) => {
   `;
 };
 
-export const Default: Story = {
+export const Default: StoryObj<Args> = {
   render: Template,
 };
diff --git a/apps/browser/src/autofill/content/components/stories/cipher/cipher-indicator-icon.stories.ts b/apps/browser/src/autofill/content/components/stories/cipher/cipher-indicator-icon.stories.ts
index 09e9600c533..9b0f7f7293b 100644
--- a/apps/browser/src/autofill/content/components/stories/cipher/cipher-indicator-icon.stories.ts
+++ b/apps/browser/src/autofill/content/components/stories/cipher/cipher-indicator-icon.stories.ts
@@ -1,9 +1,16 @@
 import { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
 
-import { ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
 
 import { CipherInfoIndicatorIcons } from "../../cipher/cipher-indicator-icons";
 
+type Args = {
+  isBusinessOrg?: boolean;
+  isFamilyOrg?: boolean;
+  theme: Theme;
+};
+
 export default {
   title: "Components/Cipher/Cipher Indicator Icon",
   argTypes: {
@@ -16,20 +23,11 @@ export default {
     isBusinessOrg: true,
     isFamilyOrg: false,
   },
-  parameters: {
-    controls: {
-      exclude: ["isFamilyOrg"],
-    },
-  },
-} as Meta;
+} as Meta<Args>;
 
-type Story = StoryObj;
-
-const Template = (args: any) => {
-  args.isFamilyOrg = !args.isBusinessOrg;
-  return CipherInfoIndicatorIcons({ ...args });
-};
+const Template: StoryObj<Args>["render"] = (args) =>
+  html`<div>${CipherInfoIndicatorIcons({ ...args })}</div>`;
 
-export const Default: Story = {
+export const Default: StoryObj<Args> = {
   render: Template,
 };

From 599ae8ebf19a19830a622c0a7abb371b93662dd0 Mon Sep 17 00:00:00 2001
From: Daniel Riera <driera@livefront.com>
Date: Mon, 13 Jan 2025 16:44:06 -0500
Subject: [PATCH 3/8] add icons file

---
 .../components/stories/icons/icons.stories.ts | 66 +++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 apps/browser/src/autofill/content/components/stories/icons/icons.stories.ts

diff --git a/apps/browser/src/autofill/content/components/stories/icons/icons.stories.ts b/apps/browser/src/autofill/content/components/stories/icons/icons.stories.ts
new file mode 100644
index 00000000000..6b92da3af32
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/stories/icons/icons.stories.ts
@@ -0,0 +1,66 @@
+import { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+
+import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+
+import * as Icons from "../../icons";
+
+type Args = {
+  color?: string;
+  disabled?: boolean;
+  theme: Theme;
+  size: number;
+  iconLink: URL;
+};
+
+export default {
+  title: "Components/Icons",
+  argTypes: {
+    iconLink: { control: "text" },
+    color: { control: "color" },
+    disabled: { control: "boolean" },
+    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
+    size: { control: "number", min: 10, max: 100, step: 1 },
+  },
+  args: {
+    iconLink: new URL("https://bitwarden.com"),
+    disabled: false,
+    theme: ThemeTypes.Light,
+    size: 50,
+  },
+} as Meta<Args>;
+
+const Template = (args: Args, IconComponent: (props: Args) => ReturnType<typeof html>) => html`
+  <div
+    style="width: ${args.size}px; height: ${args.size}px; display: flex; align-items: center; justify-content: center;"
+  >
+    ${IconComponent({ ...args })}
+  </div>
+`;
+
+const createIconStory = (iconName: keyof typeof Icons): StoryObj<Args> => {
+  const story = {
+    render: (args) => Template(args, Icons[iconName]),
+  } as StoryObj<Args>;
+
+  if (iconName !== "BrandIconContainer") {
+    story.argTypes = {
+      iconLink: { table: { disable: true } },
+    };
+  }
+
+  return story;
+};
+
+export const AngleDownIcon = createIconStory("AngleDown");
+export const BusinessIcon = createIconStory("Business");
+export const BrandIcon = createIconStory("BrandIconContainer");
+export const CloseIcon = createIconStory("Close");
+export const ExclamationTriangleIcon = createIconStory("ExclamationTriangle");
+export const FamilyIcon = createIconStory("Family");
+export const FolderIcon = createIconStory("Folder");
+export const GlobeIcon = createIconStory("Globe");
+export const PartyHornIcon = createIconStory("PartyHorn");
+export const PencilSquareIcon = createIconStory("PencilSquare");
+export const ShieldIcon = createIconStory("Shield");
+export const UserIcon = createIconStory("User");

From b7a256437d00dc8a567d4ac21c3b43ede854dcd3 Mon Sep 17 00:00:00 2001
From: Daniel Riera <driera@livefront.com>
Date: Tue, 14 Jan 2025 10:44:56 -0500
Subject: [PATCH 4/8]  assign packages to autofill

---
 .github/renovate.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.github/renovate.json b/.github/renovate.json
index 776c66af68e..ada213d6078 100644
--- a/.github/renovate.json
+++ b/.github/renovate.json
@@ -104,6 +104,7 @@
       "matchPackageNames": [
         "@babel/core",
         "@babel/preset-env",
+        "@babel/preset-typescript",
         "@bitwarden/sdk-internal",
         "@electron/fuses",
         "@electron/notarize",
@@ -134,6 +135,7 @@
         "node-ipc",
         "pkg",
         "rxjs",
+        "@storybook/web-components-webpack5",
         "tsconfig-paths-webpack-plugin",
         "type-fest",
         "typescript",

From 2ca6a04db2f2f5f9aaf009c3b1ef7f155148e110 Mon Sep 17 00:00:00 2001
From: Daniel Riera <driera@livefront.com>
Date: Tue, 14 Jan 2025 11:59:23 -0500
Subject: [PATCH 5/8] row stories

---
 .../components/stories/icons/icons.stories.ts |  2 +-
 .../stories/rows/action-row.stories.ts        | 31 +++++++++++++++++++
 .../stories/rows/button-row.stories.ts        | 25 +++++++++++++++
 .../stories/rows/item-row.stories.ts          | 28 +++++++++++++++++
 4 files changed, 85 insertions(+), 1 deletion(-)
 create mode 100644 apps/browser/src/autofill/content/components/stories/rows/action-row.stories.ts
 create mode 100644 apps/browser/src/autofill/content/components/stories/rows/button-row.stories.ts
 create mode 100644 apps/browser/src/autofill/content/components/stories/rows/item-row.stories.ts

diff --git a/apps/browser/src/autofill/content/components/stories/icons/icons.stories.ts b/apps/browser/src/autofill/content/components/stories/icons/icons.stories.ts
index 6b92da3af32..20c88a59246 100644
--- a/apps/browser/src/autofill/content/components/stories/icons/icons.stories.ts
+++ b/apps/browser/src/autofill/content/components/stories/icons/icons.stories.ts
@@ -14,7 +14,7 @@ type Args = {
 };
 
 export default {
-  title: "Components/Icons",
+  title: "Components/Icons/Icons",
   argTypes: {
     iconLink: { control: "text" },
     color: { control: "color" },
diff --git a/apps/browser/src/autofill/content/components/stories/rows/action-row.stories.ts b/apps/browser/src/autofill/content/components/stories/rows/action-row.stories.ts
new file mode 100644
index 00000000000..4b100764205
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/stories/rows/action-row.stories.ts
@@ -0,0 +1,31 @@
+import { Meta, StoryObj } from "@storybook/web-components";
+
+import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+
+import { ActionRow } from "../../rows/action-row";
+
+type Args = {
+  itemText: string;
+  handleAction: (e: Event) => void;
+  theme: Theme;
+};
+
+export default {
+  title: "Components/Rows/Action Row",
+  argTypes: {
+    itemText: { control: "text" },
+    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
+    handleAction: { control: false },
+  },
+  args: {
+    itemText: "Action Item",
+    theme: ThemeTypes.Light,
+    handleAction: () => alert("Action triggered"),
+  },
+} as Meta<Args>;
+
+const Template = (args: Args) => ActionRow({ ...args });
+
+export const Default: StoryObj<Args> = {
+  render: Template,
+};
diff --git a/apps/browser/src/autofill/content/components/stories/rows/button-row.stories.ts b/apps/browser/src/autofill/content/components/stories/rows/button-row.stories.ts
new file mode 100644
index 00000000000..3283c2798a3
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/stories/rows/button-row.stories.ts
@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from "@storybook/web-components";
+
+import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+
+import { ButtonRow } from "../../rows/button-row";
+
+type Args = {
+  theme: Theme;
+};
+
+export default {
+  title: "Components/Rows/Button Row",
+  argTypes: {
+    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
+  },
+  args: {
+    theme: ThemeTypes.Light,
+  },
+} as Meta<Args>;
+
+const Template = (args: Args) => ButtonRow({ ...args });
+
+export const Default: StoryObj<Args> = {
+  render: Template,
+};
diff --git a/apps/browser/src/autofill/content/components/stories/rows/item-row.stories.ts b/apps/browser/src/autofill/content/components/stories/rows/item-row.stories.ts
new file mode 100644
index 00000000000..fbb65201986
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/stories/rows/item-row.stories.ts
@@ -0,0 +1,28 @@
+import { Meta, StoryObj } from "@storybook/web-components";
+import { TemplateResult } from "lit";
+
+import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+
+import { ItemRow } from "../../rows/item-row";
+
+type Args = {
+  theme: Theme;
+  children: TemplateResult | TemplateResult[];
+};
+
+export default {
+  title: "Components/Rows/Item Row",
+  argTypes: {
+    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
+    children: { control: "object" },
+  },
+  args: {
+    theme: ThemeTypes.Light,
+  },
+} as Meta<Args>;
+
+const Template = (args: Args) => ItemRow({ ...args });
+
+export const Default: StoryObj<Args> = {
+  render: Template,
+};

From c1cf94703418e4715385da22da5b8f60376cce2b Mon Sep 17 00:00:00 2001
From: Daniel Riera <driera@livefront.com>
Date: Tue, 14 Jan 2025 14:13:47 -0500
Subject: [PATCH 6/8] row storiescd

---
 .../content/components/.storybook/main.ts     |  2 +-
 .../action-button.stories.ts                  | 34 ----------
 .../badge-button.stories.ts                   | 34 ----------
 .../close-button.stories.ts                   | 29 --------
 .../edit-button.stories.ts                    | 33 ----------
 .../stories/cipher/cipher-action.stories.ts   | 36 ----------
 .../stories/cipher/cipher-icon.stories.ts     | 40 -----------
 .../cipher/cipher-indicator-icon.stories.ts   | 33 ----------
 .../components/stories/icons/icons.stories.ts | 66 -------------------
 .../stories/rows/action-row.stories.ts        | 31 ---------
 .../stories/rows/button-row.stories.ts        | 25 -------
 .../stories/rows/item-row.stories.ts          | 28 --------
 12 files changed, 1 insertion(+), 390 deletions(-)
 delete mode 100644 apps/browser/src/autofill/content/components/stories/buttons/action-button-stories/action-button.stories.ts
 delete mode 100644 apps/browser/src/autofill/content/components/stories/buttons/badge-button-stories/badge-button.stories.ts
 delete mode 100644 apps/browser/src/autofill/content/components/stories/buttons/close-button-stories/close-button.stories.ts
 delete mode 100644 apps/browser/src/autofill/content/components/stories/buttons/edit-button-stories/edit-button.stories.ts
 delete mode 100644 apps/browser/src/autofill/content/components/stories/cipher/cipher-action.stories.ts
 delete mode 100644 apps/browser/src/autofill/content/components/stories/cipher/cipher-icon.stories.ts
 delete mode 100644 apps/browser/src/autofill/content/components/stories/cipher/cipher-indicator-icon.stories.ts
 delete mode 100644 apps/browser/src/autofill/content/components/stories/icons/icons.stories.ts
 delete mode 100644 apps/browser/src/autofill/content/components/stories/rows/action-row.stories.ts
 delete mode 100644 apps/browser/src/autofill/content/components/stories/rows/button-row.stories.ts
 delete mode 100644 apps/browser/src/autofill/content/components/stories/rows/item-row.stories.ts

diff --git a/apps/browser/src/autofill/content/components/.storybook/main.ts b/apps/browser/src/autofill/content/components/.storybook/main.ts
index ea796b6fd26..740a3e6c5c5 100644
--- a/apps/browser/src/autofill/content/components/.storybook/main.ts
+++ b/apps/browser/src/autofill/content/components/.storybook/main.ts
@@ -7,7 +7,7 @@ const getAbsolutePath = (value: string): string =>
   dirname(require.resolve(join(value, "package.json")));
 
 const config: StorybookConfig = {
-  stories: ["../stories/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
+  stories: ["../stories/**/*.lit-stories.@(js|jsx|ts|tsx)"],
   addons: [
     getAbsolutePath("@storybook/addon-links"),
     getAbsolutePath("@storybook/addon-essentials"),
diff --git a/apps/browser/src/autofill/content/components/stories/buttons/action-button-stories/action-button.stories.ts b/apps/browser/src/autofill/content/components/stories/buttons/action-button-stories/action-button.stories.ts
deleted file mode 100644
index 59b7852a7f7..00000000000
--- a/apps/browser/src/autofill/content/components/stories/buttons/action-button-stories/action-button.stories.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Meta, StoryObj } from "@storybook/web-components";
-
-import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
-
-import { ActionButton } from "../../../buttons/action-button";
-
-type Args = {
-  buttonText: string;
-  disabled: boolean;
-  theme: Theme;
-  buttonAction: (e: Event) => void;
-};
-
-export default {
-  title: "Components/Buttons/Action Button",
-  argTypes: {
-    buttonText: { control: "text" },
-    disabled: { control: "boolean" },
-    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
-    buttonAction: { control: false },
-  },
-  args: {
-    buttonText: "Click Me",
-    disabled: false,
-    theme: ThemeTypes.Light,
-    buttonAction: () => alert("Clicked"),
-  },
-} as Meta<Args>;
-
-const Template = (args: Args) => ActionButton({ ...args });
-
-export const Default: StoryObj<Args> = {
-  render: Template,
-};
diff --git a/apps/browser/src/autofill/content/components/stories/buttons/badge-button-stories/badge-button.stories.ts b/apps/browser/src/autofill/content/components/stories/buttons/badge-button-stories/badge-button.stories.ts
deleted file mode 100644
index ca4d091f460..00000000000
--- a/apps/browser/src/autofill/content/components/stories/buttons/badge-button-stories/badge-button.stories.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Meta, StoryObj } from "@storybook/web-components";
-
-import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
-
-import { BadgeButton } from "../../../buttons/badge-button";
-
-type Args = {
-  buttonAction: (e: Event) => void;
-  buttonText: string;
-  disabled?: boolean;
-  theme: Theme;
-};
-
-export default {
-  title: "Components/Buttons/Badge Button",
-  argTypes: {
-    buttonText: { control: "text" },
-    disabled: { control: "boolean" },
-    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
-    buttonAction: { control: false },
-  },
-  args: {
-    buttonText: "Click Me",
-    disabled: false,
-    theme: ThemeTypes.Light,
-    buttonAction: () => alert("Clicked"),
-  },
-} as Meta<Args>;
-
-const Template = (args: Args) => BadgeButton({ ...args });
-
-export const Default: StoryObj<Args> = {
-  render: Template,
-};
diff --git a/apps/browser/src/autofill/content/components/stories/buttons/close-button-stories/close-button.stories.ts b/apps/browser/src/autofill/content/components/stories/buttons/close-button-stories/close-button.stories.ts
deleted file mode 100644
index 050aebbd366..00000000000
--- a/apps/browser/src/autofill/content/components/stories/buttons/close-button-stories/close-button.stories.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Meta, StoryObj } from "@storybook/web-components";
-
-import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
-
-import { CloseButton } from "../../../buttons/close-button";
-
-type Args = {
-  handleCloseNotification: (e: Event) => void;
-  theme: Theme;
-};
-export default {
-  title: "Components/Buttons/Close Button",
-  argTypes: {
-    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
-    handleCloseNotification: { control: false },
-  },
-  args: {
-    theme: ThemeTypes.Light,
-    handleCloseNotification: () => {
-      alert("Close button clicked!");
-    },
-  },
-} as Meta<Args>;
-
-const Template = (args: Args) => CloseButton({ ...args });
-
-export const Default: StoryObj<Args> = {
-  render: Template,
-};
diff --git a/apps/browser/src/autofill/content/components/stories/buttons/edit-button-stories/edit-button.stories.ts b/apps/browser/src/autofill/content/components/stories/buttons/edit-button-stories/edit-button.stories.ts
deleted file mode 100644
index d84ec7c17a0..00000000000
--- a/apps/browser/src/autofill/content/components/stories/buttons/edit-button-stories/edit-button.stories.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Meta, StoryObj } from "@storybook/web-components";
-
-import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
-
-import { EditButton } from "../../../buttons/edit-button";
-
-type Args = {
-  buttonAction: (e: Event) => void;
-  buttonText: string;
-  disabled?: boolean;
-  theme: Theme;
-};
-export default {
-  title: "Components/Buttons/Edit Button",
-  argTypes: {
-    buttonText: { control: "text" },
-    disabled: { control: "boolean" },
-    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
-    buttonAction: { control: false },
-  },
-  args: {
-    buttonText: "Click Me",
-    disabled: false,
-    theme: ThemeTypes.Light,
-    buttonAction: () => alert("Clicked"),
-  },
-} as Meta<Args>;
-
-const Template = (args: Args) => EditButton({ ...args });
-
-export const Default: StoryObj<Args> = {
-  render: Template,
-};
diff --git a/apps/browser/src/autofill/content/components/stories/cipher/cipher-action.stories.ts b/apps/browser/src/autofill/content/components/stories/cipher/cipher-action.stories.ts
deleted file mode 100644
index 71c4e199329..00000000000
--- a/apps/browser/src/autofill/content/components/stories/cipher/cipher-action.stories.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Meta, StoryObj } from "@storybook/web-components";
-
-import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
-
-import { NotificationTypes } from "../../../../notification/abstractions/notification-bar";
-import { CipherAction } from "../../../components/cipher/cipher-action";
-
-type Args = {
-  handleAction?: (e: Event) => void;
-  notificationType: typeof NotificationTypes.Change | typeof NotificationTypes.Add;
-  theme: Theme;
-};
-export default {
-  title: "Components/Cipher/Cipher Action",
-  argTypes: {
-    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
-    notificationType: {
-      control: "select",
-      options: [NotificationTypes.Change, NotificationTypes.Add],
-    },
-    handleAction: { control: false },
-  },
-  args: {
-    theme: ThemeTypes.Light,
-    notificationType: NotificationTypes.Change,
-    handleAction: () => {
-      alert("Action triggered!");
-    },
-  },
-} as Meta<Args>;
-
-const Template = (args: Args) => CipherAction({ ...args });
-
-export const Default: StoryObj<Args> = {
-  render: Template,
-};
diff --git a/apps/browser/src/autofill/content/components/stories/cipher/cipher-icon.stories.ts b/apps/browser/src/autofill/content/components/stories/cipher/cipher-icon.stories.ts
deleted file mode 100644
index 26032de9dcd..00000000000
--- a/apps/browser/src/autofill/content/components/stories/cipher/cipher-icon.stories.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Meta, StoryObj } from "@storybook/web-components";
-import { html } from "lit";
-
-import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
-
-import { CipherIcon } from "../../cipher/cipher-icon";
-
-type Args = {
-  color: string;
-  size: string;
-  theme: Theme;
-  uri?: string;
-};
-
-export default {
-  title: "Components/Cipher/Cipher Icon",
-  argTypes: {
-    color: { control: "color" },
-    size: { control: "text" },
-    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
-    uri: { control: "text" },
-  },
-  args: {
-    size: "50px",
-    theme: ThemeTypes.Light,
-    uri: "",
-  },
-} as Meta<Args>;
-
-const Template = (args: Args) => {
-  return html`
-    <div style="width: ${args.size}; height: ${args.size}; overflow: hidden;">
-      ${CipherIcon({ ...args })}
-    </div>
-  `;
-};
-
-export const Default: StoryObj<Args> = {
-  render: Template,
-};
diff --git a/apps/browser/src/autofill/content/components/stories/cipher/cipher-indicator-icon.stories.ts b/apps/browser/src/autofill/content/components/stories/cipher/cipher-indicator-icon.stories.ts
deleted file mode 100644
index 9b0f7f7293b..00000000000
--- a/apps/browser/src/autofill/content/components/stories/cipher/cipher-indicator-icon.stories.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Meta, StoryObj } from "@storybook/web-components";
-import { html } from "lit";
-
-import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
-
-import { CipherInfoIndicatorIcons } from "../../cipher/cipher-indicator-icons";
-
-type Args = {
-  isBusinessOrg?: boolean;
-  isFamilyOrg?: boolean;
-  theme: Theme;
-};
-
-export default {
-  title: "Components/Cipher/Cipher Indicator Icon",
-  argTypes: {
-    isBusinessOrg: { control: "boolean" },
-    isFamilyOrg: { control: "boolean" },
-    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
-  },
-  args: {
-    theme: ThemeTypes.Light,
-    isBusinessOrg: true,
-    isFamilyOrg: false,
-  },
-} as Meta<Args>;
-
-const Template: StoryObj<Args>["render"] = (args) =>
-  html`<div>${CipherInfoIndicatorIcons({ ...args })}</div>`;
-
-export const Default: StoryObj<Args> = {
-  render: Template,
-};
diff --git a/apps/browser/src/autofill/content/components/stories/icons/icons.stories.ts b/apps/browser/src/autofill/content/components/stories/icons/icons.stories.ts
deleted file mode 100644
index 20c88a59246..00000000000
--- a/apps/browser/src/autofill/content/components/stories/icons/icons.stories.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import { Meta, StoryObj } from "@storybook/web-components";
-import { html } from "lit";
-
-import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
-
-import * as Icons from "../../icons";
-
-type Args = {
-  color?: string;
-  disabled?: boolean;
-  theme: Theme;
-  size: number;
-  iconLink: URL;
-};
-
-export default {
-  title: "Components/Icons/Icons",
-  argTypes: {
-    iconLink: { control: "text" },
-    color: { control: "color" },
-    disabled: { control: "boolean" },
-    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
-    size: { control: "number", min: 10, max: 100, step: 1 },
-  },
-  args: {
-    iconLink: new URL("https://bitwarden.com"),
-    disabled: false,
-    theme: ThemeTypes.Light,
-    size: 50,
-  },
-} as Meta<Args>;
-
-const Template = (args: Args, IconComponent: (props: Args) => ReturnType<typeof html>) => html`
-  <div
-    style="width: ${args.size}px; height: ${args.size}px; display: flex; align-items: center; justify-content: center;"
-  >
-    ${IconComponent({ ...args })}
-  </div>
-`;
-
-const createIconStory = (iconName: keyof typeof Icons): StoryObj<Args> => {
-  const story = {
-    render: (args) => Template(args, Icons[iconName]),
-  } as StoryObj<Args>;
-
-  if (iconName !== "BrandIconContainer") {
-    story.argTypes = {
-      iconLink: { table: { disable: true } },
-    };
-  }
-
-  return story;
-};
-
-export const AngleDownIcon = createIconStory("AngleDown");
-export const BusinessIcon = createIconStory("Business");
-export const BrandIcon = createIconStory("BrandIconContainer");
-export const CloseIcon = createIconStory("Close");
-export const ExclamationTriangleIcon = createIconStory("ExclamationTriangle");
-export const FamilyIcon = createIconStory("Family");
-export const FolderIcon = createIconStory("Folder");
-export const GlobeIcon = createIconStory("Globe");
-export const PartyHornIcon = createIconStory("PartyHorn");
-export const PencilSquareIcon = createIconStory("PencilSquare");
-export const ShieldIcon = createIconStory("Shield");
-export const UserIcon = createIconStory("User");
diff --git a/apps/browser/src/autofill/content/components/stories/rows/action-row.stories.ts b/apps/browser/src/autofill/content/components/stories/rows/action-row.stories.ts
deleted file mode 100644
index 4b100764205..00000000000
--- a/apps/browser/src/autofill/content/components/stories/rows/action-row.stories.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Meta, StoryObj } from "@storybook/web-components";
-
-import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
-
-import { ActionRow } from "../../rows/action-row";
-
-type Args = {
-  itemText: string;
-  handleAction: (e: Event) => void;
-  theme: Theme;
-};
-
-export default {
-  title: "Components/Rows/Action Row",
-  argTypes: {
-    itemText: { control: "text" },
-    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
-    handleAction: { control: false },
-  },
-  args: {
-    itemText: "Action Item",
-    theme: ThemeTypes.Light,
-    handleAction: () => alert("Action triggered"),
-  },
-} as Meta<Args>;
-
-const Template = (args: Args) => ActionRow({ ...args });
-
-export const Default: StoryObj<Args> = {
-  render: Template,
-};
diff --git a/apps/browser/src/autofill/content/components/stories/rows/button-row.stories.ts b/apps/browser/src/autofill/content/components/stories/rows/button-row.stories.ts
deleted file mode 100644
index 3283c2798a3..00000000000
--- a/apps/browser/src/autofill/content/components/stories/rows/button-row.stories.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Meta, StoryObj } from "@storybook/web-components";
-
-import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
-
-import { ButtonRow } from "../../rows/button-row";
-
-type Args = {
-  theme: Theme;
-};
-
-export default {
-  title: "Components/Rows/Button Row",
-  argTypes: {
-    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
-  },
-  args: {
-    theme: ThemeTypes.Light,
-  },
-} as Meta<Args>;
-
-const Template = (args: Args) => ButtonRow({ ...args });
-
-export const Default: StoryObj<Args> = {
-  render: Template,
-};
diff --git a/apps/browser/src/autofill/content/components/stories/rows/item-row.stories.ts b/apps/browser/src/autofill/content/components/stories/rows/item-row.stories.ts
deleted file mode 100644
index fbb65201986..00000000000
--- a/apps/browser/src/autofill/content/components/stories/rows/item-row.stories.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Meta, StoryObj } from "@storybook/web-components";
-import { TemplateResult } from "lit";
-
-import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
-
-import { ItemRow } from "../../rows/item-row";
-
-type Args = {
-  theme: Theme;
-  children: TemplateResult | TemplateResult[];
-};
-
-export default {
-  title: "Components/Rows/Item Row",
-  argTypes: {
-    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
-    children: { control: "object" },
-  },
-  args: {
-    theme: ThemeTypes.Light,
-  },
-} as Meta<Args>;
-
-const Template = (args: Args) => ItemRow({ ...args });
-
-export const Default: StoryObj<Args> = {
-  render: Template,
-};

From 66a440f2f1d27d91e9e601ef880deaf3b0357a83 Mon Sep 17 00:00:00 2001
From: Daniel Riera <driera@livefront.com>
Date: Tue, 14 Jan 2025 15:19:41 -0500
Subject: [PATCH 7/8] -change file nnames to avoid rendering in main storybook
 instance - fix folder structure to set prep for doc creation

---
 .github/renovate.json                         |  4 +-
 .../action-button.lit-stories.ts              | 34 ++++++++++
 .../badge-button.lit-stories.ts               | 34 ++++++++++
 .../close-button.lit-stories.ts               | 29 ++++++++
 .../edit-button.lit-stories.ts                | 33 ++++++++++
 .../cipher-action.lit-stories.ts              | 36 ++++++++++
 .../cipher-icon.lit-stories.ts                | 40 +++++++++++
 .../cipher-indicator-icon.lit-stories.ts      | 33 ++++++++++
 .../stories/icons/icons.lit-stories.ts        | 66 +++++++++++++++++++
 .../body-stories/body.lit-stories.ts          | 53 +++++++++++++++
 .../footer-stories/footer.lit-stories.ts      | 32 +++++++++
 .../header-stories/header.lit-stories.ts      | 33 ++++++++++
 .../action-row.lit-stories.ts                 | 31 +++++++++
 .../button-row.lit-stories.ts                 | 25 +++++++
 .../item-row-stories/item-row.lit-stories.ts  | 28 ++++++++
 15 files changed, 509 insertions(+), 2 deletions(-)
 create mode 100644 apps/browser/src/autofill/content/components/stories/buttons/action-button-stories/action-button.lit-stories.ts
 create mode 100644 apps/browser/src/autofill/content/components/stories/buttons/badge-button-stories/badge-button.lit-stories.ts
 create mode 100644 apps/browser/src/autofill/content/components/stories/buttons/close-button-stories/close-button.lit-stories.ts
 create mode 100644 apps/browser/src/autofill/content/components/stories/buttons/edit-button-stories/edit-button.lit-stories.ts
 create mode 100644 apps/browser/src/autofill/content/components/stories/ciphers/cipher-action-stories/cipher-action.lit-stories.ts
 create mode 100644 apps/browser/src/autofill/content/components/stories/ciphers/cipher-icon-stories/cipher-icon.lit-stories.ts
 create mode 100644 apps/browser/src/autofill/content/components/stories/ciphers/cipher-inidcator-icon-stories/cipher-indicator-icon.lit-stories.ts
 create mode 100644 apps/browser/src/autofill/content/components/stories/icons/icons.lit-stories.ts
 create mode 100644 apps/browser/src/autofill/content/components/stories/notification/body-stories/body.lit-stories.ts
 create mode 100644 apps/browser/src/autofill/content/components/stories/notification/footer-stories/footer.lit-stories.ts
 create mode 100644 apps/browser/src/autofill/content/components/stories/notification/header-stories/header.lit-stories.ts
 create mode 100644 apps/browser/src/autofill/content/components/stories/rows/action-row-stories/action-row.lit-stories.ts
 create mode 100644 apps/browser/src/autofill/content/components/stories/rows/button-row-stories/button-row.lit-stories.ts
 create mode 100644 apps/browser/src/autofill/content/components/stories/rows/item-row-stories/item-row.lit-stories.ts

diff --git a/.github/renovate.json b/.github/renovate.json
index ada213d6078..dd1697575f2 100644
--- a/.github/renovate.json
+++ b/.github/renovate.json
@@ -75,6 +75,7 @@
     },
     {
       "matchPackageNames": [
+        "@babel/preset-typescript",
         "@emotion/css",
         "@webcomponents/custom-elements",
         "concurrently",
@@ -86,6 +87,7 @@
         "prettier",
         "prettier-plugin-tailwindcss",
         "rimraf",
+        "@storybook/web-components-webpack5",
         "tabbable",
         "tldts",
         "wait-on"
@@ -104,7 +106,6 @@
       "matchPackageNames": [
         "@babel/core",
         "@babel/preset-env",
-        "@babel/preset-typescript",
         "@bitwarden/sdk-internal",
         "@electron/fuses",
         "@electron/notarize",
@@ -135,7 +136,6 @@
         "node-ipc",
         "pkg",
         "rxjs",
-        "@storybook/web-components-webpack5",
         "tsconfig-paths-webpack-plugin",
         "type-fest",
         "typescript",
diff --git a/apps/browser/src/autofill/content/components/stories/buttons/action-button-stories/action-button.lit-stories.ts b/apps/browser/src/autofill/content/components/stories/buttons/action-button-stories/action-button.lit-stories.ts
new file mode 100644
index 00000000000..59b7852a7f7
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/stories/buttons/action-button-stories/action-button.lit-stories.ts
@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from "@storybook/web-components";
+
+import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+
+import { ActionButton } from "../../../buttons/action-button";
+
+type Args = {
+  buttonText: string;
+  disabled: boolean;
+  theme: Theme;
+  buttonAction: (e: Event) => void;
+};
+
+export default {
+  title: "Components/Buttons/Action Button",
+  argTypes: {
+    buttonText: { control: "text" },
+    disabled: { control: "boolean" },
+    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
+    buttonAction: { control: false },
+  },
+  args: {
+    buttonText: "Click Me",
+    disabled: false,
+    theme: ThemeTypes.Light,
+    buttonAction: () => alert("Clicked"),
+  },
+} as Meta<Args>;
+
+const Template = (args: Args) => ActionButton({ ...args });
+
+export const Default: StoryObj<Args> = {
+  render: Template,
+};
diff --git a/apps/browser/src/autofill/content/components/stories/buttons/badge-button-stories/badge-button.lit-stories.ts b/apps/browser/src/autofill/content/components/stories/buttons/badge-button-stories/badge-button.lit-stories.ts
new file mode 100644
index 00000000000..ca4d091f460
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/stories/buttons/badge-button-stories/badge-button.lit-stories.ts
@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from "@storybook/web-components";
+
+import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+
+import { BadgeButton } from "../../../buttons/badge-button";
+
+type Args = {
+  buttonAction: (e: Event) => void;
+  buttonText: string;
+  disabled?: boolean;
+  theme: Theme;
+};
+
+export default {
+  title: "Components/Buttons/Badge Button",
+  argTypes: {
+    buttonText: { control: "text" },
+    disabled: { control: "boolean" },
+    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
+    buttonAction: { control: false },
+  },
+  args: {
+    buttonText: "Click Me",
+    disabled: false,
+    theme: ThemeTypes.Light,
+    buttonAction: () => alert("Clicked"),
+  },
+} as Meta<Args>;
+
+const Template = (args: Args) => BadgeButton({ ...args });
+
+export const Default: StoryObj<Args> = {
+  render: Template,
+};
diff --git a/apps/browser/src/autofill/content/components/stories/buttons/close-button-stories/close-button.lit-stories.ts b/apps/browser/src/autofill/content/components/stories/buttons/close-button-stories/close-button.lit-stories.ts
new file mode 100644
index 00000000000..050aebbd366
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/stories/buttons/close-button-stories/close-button.lit-stories.ts
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from "@storybook/web-components";
+
+import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+
+import { CloseButton } from "../../../buttons/close-button";
+
+type Args = {
+  handleCloseNotification: (e: Event) => void;
+  theme: Theme;
+};
+export default {
+  title: "Components/Buttons/Close Button",
+  argTypes: {
+    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
+    handleCloseNotification: { control: false },
+  },
+  args: {
+    theme: ThemeTypes.Light,
+    handleCloseNotification: () => {
+      alert("Close button clicked!");
+    },
+  },
+} as Meta<Args>;
+
+const Template = (args: Args) => CloseButton({ ...args });
+
+export const Default: StoryObj<Args> = {
+  render: Template,
+};
diff --git a/apps/browser/src/autofill/content/components/stories/buttons/edit-button-stories/edit-button.lit-stories.ts b/apps/browser/src/autofill/content/components/stories/buttons/edit-button-stories/edit-button.lit-stories.ts
new file mode 100644
index 00000000000..d84ec7c17a0
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/stories/buttons/edit-button-stories/edit-button.lit-stories.ts
@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from "@storybook/web-components";
+
+import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+
+import { EditButton } from "../../../buttons/edit-button";
+
+type Args = {
+  buttonAction: (e: Event) => void;
+  buttonText: string;
+  disabled?: boolean;
+  theme: Theme;
+};
+export default {
+  title: "Components/Buttons/Edit Button",
+  argTypes: {
+    buttonText: { control: "text" },
+    disabled: { control: "boolean" },
+    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
+    buttonAction: { control: false },
+  },
+  args: {
+    buttonText: "Click Me",
+    disabled: false,
+    theme: ThemeTypes.Light,
+    buttonAction: () => alert("Clicked"),
+  },
+} as Meta<Args>;
+
+const Template = (args: Args) => EditButton({ ...args });
+
+export const Default: StoryObj<Args> = {
+  render: Template,
+};
diff --git a/apps/browser/src/autofill/content/components/stories/ciphers/cipher-action-stories/cipher-action.lit-stories.ts b/apps/browser/src/autofill/content/components/stories/ciphers/cipher-action-stories/cipher-action.lit-stories.ts
new file mode 100644
index 00000000000..26b18b8ec7d
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/stories/ciphers/cipher-action-stories/cipher-action.lit-stories.ts
@@ -0,0 +1,36 @@
+import { Meta, StoryObj } from "@storybook/web-components";
+
+import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+
+import { NotificationTypes } from "../../../../../notification/abstractions/notification-bar";
+import { CipherAction } from "../../../cipher/cipher-action";
+
+type Args = {
+  handleAction?: (e: Event) => void;
+  notificationType: typeof NotificationTypes.Change | typeof NotificationTypes.Add;
+  theme: Theme;
+};
+export default {
+  title: "Components/Cipher/Cipher Action",
+  argTypes: {
+    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
+    notificationType: {
+      control: "select",
+      options: [NotificationTypes.Change, NotificationTypes.Add],
+    },
+    handleAction: { control: false },
+  },
+  args: {
+    theme: ThemeTypes.Light,
+    notificationType: NotificationTypes.Change,
+    handleAction: () => {
+      alert("Action triggered!");
+    },
+  },
+} as Meta<Args>;
+
+const Template = (args: Args) => CipherAction({ ...args });
+
+export const Default: StoryObj<Args> = {
+  render: Template,
+};
diff --git a/apps/browser/src/autofill/content/components/stories/ciphers/cipher-icon-stories/cipher-icon.lit-stories.ts b/apps/browser/src/autofill/content/components/stories/ciphers/cipher-icon-stories/cipher-icon.lit-stories.ts
new file mode 100644
index 00000000000..198be6e390e
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/stories/ciphers/cipher-icon-stories/cipher-icon.lit-stories.ts
@@ -0,0 +1,40 @@
+import { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+
+import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+
+import { CipherIcon } from "../../../cipher/cipher-icon";
+
+type Args = {
+  color: string;
+  size: string;
+  theme: Theme;
+  uri?: string;
+};
+
+export default {
+  title: "Components/Cipher/Cipher Icon",
+  argTypes: {
+    color: { control: "color" },
+    size: { control: "text" },
+    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
+    uri: { control: "text" },
+  },
+  args: {
+    size: "50px",
+    theme: ThemeTypes.Light,
+    uri: "",
+  },
+} as Meta<Args>;
+
+const Template = (args: Args) => {
+  return html`
+    <div style="width: ${args.size}; height: ${args.size}; overflow: hidden;">
+      ${CipherIcon({ ...args })}
+    </div>
+  `;
+};
+
+export const Default: StoryObj<Args> = {
+  render: Template,
+};
diff --git a/apps/browser/src/autofill/content/components/stories/ciphers/cipher-inidcator-icon-stories/cipher-indicator-icon.lit-stories.ts b/apps/browser/src/autofill/content/components/stories/ciphers/cipher-inidcator-icon-stories/cipher-indicator-icon.lit-stories.ts
new file mode 100644
index 00000000000..8e73f50fbfd
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/stories/ciphers/cipher-inidcator-icon-stories/cipher-indicator-icon.lit-stories.ts
@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+
+import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+
+import { CipherInfoIndicatorIcons } from "../../../cipher/cipher-indicator-icons";
+
+type Args = {
+  isBusinessOrg?: boolean;
+  isFamilyOrg?: boolean;
+  theme: Theme;
+};
+
+export default {
+  title: "Components/Cipher/Cipher Indicator Icon",
+  argTypes: {
+    isBusinessOrg: { control: "boolean" },
+    isFamilyOrg: { control: "boolean" },
+    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
+  },
+  args: {
+    theme: ThemeTypes.Light,
+    isBusinessOrg: true,
+    isFamilyOrg: false,
+  },
+} as Meta<Args>;
+
+const Template: StoryObj<Args>["render"] = (args) =>
+  html`<div>${CipherInfoIndicatorIcons({ ...args })}</div>`;
+
+export const Default: StoryObj<Args> = {
+  render: Template,
+};
diff --git a/apps/browser/src/autofill/content/components/stories/icons/icons.lit-stories.ts b/apps/browser/src/autofill/content/components/stories/icons/icons.lit-stories.ts
new file mode 100644
index 00000000000..20c88a59246
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/stories/icons/icons.lit-stories.ts
@@ -0,0 +1,66 @@
+import { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+
+import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+
+import * as Icons from "../../icons";
+
+type Args = {
+  color?: string;
+  disabled?: boolean;
+  theme: Theme;
+  size: number;
+  iconLink: URL;
+};
+
+export default {
+  title: "Components/Icons/Icons",
+  argTypes: {
+    iconLink: { control: "text" },
+    color: { control: "color" },
+    disabled: { control: "boolean" },
+    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
+    size: { control: "number", min: 10, max: 100, step: 1 },
+  },
+  args: {
+    iconLink: new URL("https://bitwarden.com"),
+    disabled: false,
+    theme: ThemeTypes.Light,
+    size: 50,
+  },
+} as Meta<Args>;
+
+const Template = (args: Args, IconComponent: (props: Args) => ReturnType<typeof html>) => html`
+  <div
+    style="width: ${args.size}px; height: ${args.size}px; display: flex; align-items: center; justify-content: center;"
+  >
+    ${IconComponent({ ...args })}
+  </div>
+`;
+
+const createIconStory = (iconName: keyof typeof Icons): StoryObj<Args> => {
+  const story = {
+    render: (args) => Template(args, Icons[iconName]),
+  } as StoryObj<Args>;
+
+  if (iconName !== "BrandIconContainer") {
+    story.argTypes = {
+      iconLink: { table: { disable: true } },
+    };
+  }
+
+  return story;
+};
+
+export const AngleDownIcon = createIconStory("AngleDown");
+export const BusinessIcon = createIconStory("Business");
+export const BrandIcon = createIconStory("BrandIconContainer");
+export const CloseIcon = createIconStory("Close");
+export const ExclamationTriangleIcon = createIconStory("ExclamationTriangle");
+export const FamilyIcon = createIconStory("Family");
+export const FolderIcon = createIconStory("Folder");
+export const GlobeIcon = createIconStory("Globe");
+export const PartyHornIcon = createIconStory("PartyHorn");
+export const PencilSquareIcon = createIconStory("PencilSquare");
+export const ShieldIcon = createIconStory("Shield");
+export const UserIcon = createIconStory("User");
diff --git a/apps/browser/src/autofill/content/components/stories/notification/body-stories/body.lit-stories.ts b/apps/browser/src/autofill/content/components/stories/notification/body-stories/body.lit-stories.ts
new file mode 100644
index 00000000000..36e9ef3505b
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/stories/notification/body-stories/body.lit-stories.ts
@@ -0,0 +1,53 @@
+import { Meta, StoryObj } from "@storybook/web-components";
+
+import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+import { CipherType } from "@bitwarden/common/vault/enums";
+import { CipherRepromptType } from "@bitwarden/common/vault/enums/cipher-reprompt-type";
+
+import { NotificationType } from "../../../../../notification/abstractions/notification-bar";
+import { CipherData } from "../../../cipher/types";
+import { NotificationBody } from "../../../notification/body";
+
+type Args = {
+  ciphers: CipherData[];
+  notificationType: NotificationType;
+  theme: Theme;
+};
+
+export default {
+  title: "Components/Notification/Notification Body",
+  argTypes: {
+    ciphers: { control: "object" },
+    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
+    notificationType: {
+      control: "select",
+      options: ["add", "change", "unlock", "fileless-import"],
+    },
+  },
+  args: {
+    ciphers: [
+      {
+        id: "1",
+        name: "Example Cipher",
+        type: CipherType.Login,
+        favorite: false,
+        reprompt: CipherRepromptType.None,
+        icon: {
+          imageEnabled: true,
+          image: "",
+          fallbackImage: "https://example.com/fallback.png",
+          icon: "icon-class",
+        },
+        login: { username: "user@example.com", passkey: null },
+      },
+    ],
+    theme: ThemeTypes.Light,
+    notificationType: "change",
+  },
+} as Meta<Args>;
+
+const Template = (args: Args) => NotificationBody({ ...args });
+
+export const Default: StoryObj<Args> = {
+  render: Template,
+};
diff --git a/apps/browser/src/autofill/content/components/stories/notification/footer-stories/footer.lit-stories.ts b/apps/browser/src/autofill/content/components/stories/notification/footer-stories/footer.lit-stories.ts
new file mode 100644
index 00000000000..5afd7b7fbdd
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/stories/notification/footer-stories/footer.lit-stories.ts
@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from "@storybook/web-components";
+
+import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+
+import { NotificationType } from "../../../../../notification/abstractions/notification-bar";
+import { NotificationFooter } from "../../../notification/footer";
+
+type Args = {
+  notificationType: NotificationType;
+  theme: Theme;
+};
+
+export default {
+  title: "Components/Notification/Notification Footer",
+  argTypes: {
+    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
+    notificationType: {
+      control: "select",
+      options: ["add", "change", "unlock", "fileless-import"],
+    },
+  },
+  args: {
+    theme: ThemeTypes.Light,
+    notificationType: "add",
+  },
+} as Meta<Args>;
+
+const Template = (args: Args) => NotificationFooter({ ...args });
+
+export const Default: StoryObj<Args> = {
+  render: Template,
+};
diff --git a/apps/browser/src/autofill/content/components/stories/notification/header-stories/header.lit-stories.ts b/apps/browser/src/autofill/content/components/stories/notification/header-stories/header.lit-stories.ts
new file mode 100644
index 00000000000..dabfab5629e
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/stories/notification/header-stories/header.lit-stories.ts
@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from "@storybook/web-components";
+
+import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+
+import { NotificationHeader } from "../../../notification/header";
+
+type Args = {
+  message: string;
+  standalone: boolean;
+  theme: Theme;
+  handleCloseNotification: (e: Event) => void;
+};
+
+export default {
+  title: "Components/Notification/Notification Header",
+  argTypes: {
+    message: { control: "text" },
+    standalone: { control: "boolean" },
+    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
+  },
+  args: {
+    message: "This is a notification message",
+    standalone: true,
+    theme: ThemeTypes.Light,
+    handleCloseNotification: () => alert("Close Clicked"),
+  },
+} as Meta<Args>;
+
+const Template = (args: Args) => NotificationHeader({ ...args });
+
+export const Default: StoryObj<Args> = {
+  render: Template,
+};
diff --git a/apps/browser/src/autofill/content/components/stories/rows/action-row-stories/action-row.lit-stories.ts b/apps/browser/src/autofill/content/components/stories/rows/action-row-stories/action-row.lit-stories.ts
new file mode 100644
index 00000000000..243f10a3cef
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/stories/rows/action-row-stories/action-row.lit-stories.ts
@@ -0,0 +1,31 @@
+import { Meta, StoryObj } from "@storybook/web-components";
+
+import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+
+import { ActionRow } from "../../../rows/action-row";
+
+type Args = {
+  itemText: string;
+  handleAction: (e: Event) => void;
+  theme: Theme;
+};
+
+export default {
+  title: "Components/Rows/Action Row",
+  argTypes: {
+    itemText: { control: "text" },
+    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
+    handleAction: { control: false },
+  },
+  args: {
+    itemText: "Action Item",
+    theme: ThemeTypes.Light,
+    handleAction: () => alert("Action triggered"),
+  },
+} as Meta<Args>;
+
+const Template = (args: Args) => ActionRow({ ...args });
+
+export const Default: StoryObj<Args> = {
+  render: Template,
+};
diff --git a/apps/browser/src/autofill/content/components/stories/rows/button-row-stories/button-row.lit-stories.ts b/apps/browser/src/autofill/content/components/stories/rows/button-row-stories/button-row.lit-stories.ts
new file mode 100644
index 00000000000..9161215a385
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/stories/rows/button-row-stories/button-row.lit-stories.ts
@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from "@storybook/web-components";
+
+import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+
+import { ButtonRow } from "../../../rows/button-row";
+
+type Args = {
+  theme: Theme;
+};
+
+export default {
+  title: "Components/Rows/Button Row",
+  argTypes: {
+    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
+  },
+  args: {
+    theme: ThemeTypes.Light,
+  },
+} as Meta<Args>;
+
+const Template = (args: Args) => ButtonRow({ ...args });
+
+export const Default: StoryObj<Args> = {
+  render: Template,
+};
diff --git a/apps/browser/src/autofill/content/components/stories/rows/item-row-stories/item-row.lit-stories.ts b/apps/browser/src/autofill/content/components/stories/rows/item-row-stories/item-row.lit-stories.ts
new file mode 100644
index 00000000000..f44cc8b7b90
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/stories/rows/item-row-stories/item-row.lit-stories.ts
@@ -0,0 +1,28 @@
+import { Meta, StoryObj } from "@storybook/web-components";
+import { TemplateResult } from "lit";
+
+import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+
+import { ItemRow } from "../../../rows/item-row";
+
+type Args = {
+  theme: Theme;
+  children: TemplateResult | TemplateResult[];
+};
+
+export default {
+  title: "Components/Rows/Item Row",
+  argTypes: {
+    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
+    children: { control: "object" },
+  },
+  args: {
+    theme: ThemeTypes.Light,
+  },
+} as Meta<Args>;
+
+const Template = (args: Args) => ItemRow({ ...args });
+
+export const Default: StoryObj<Args> = {
+  render: Template,
+};

From f4958c398657d5d683f29cecd3a6a19d19ad2d28 Mon Sep 17 00:00:00 2001
From: Daniel Riera <driera@livefront.com>
Date: Tue, 14 Jan 2025 15:41:58 -0500
Subject: [PATCH 8/8] remove babel loader

---
 .github/renovate.json                         |  1 -
 .../content/components/.storybook/main.ts     |  8 +--
 package-lock.json                             | 56 +------------------
 package.json                                  |  1 -
 4 files changed, 3 insertions(+), 63 deletions(-)

diff --git a/.github/renovate.json b/.github/renovate.json
index dd1697575f2..74c88a66c77 100644
--- a/.github/renovate.json
+++ b/.github/renovate.json
@@ -75,7 +75,6 @@
     },
     {
       "matchPackageNames": [
-        "@babel/preset-typescript",
         "@emotion/css",
         "@webcomponents/custom-elements",
         "concurrently",
diff --git a/apps/browser/src/autofill/content/components/.storybook/main.ts b/apps/browser/src/autofill/content/components/.storybook/main.ts
index 740a3e6c5c5..ff263f95c2b 100644
--- a/apps/browser/src/autofill/content/components/.storybook/main.ts
+++ b/apps/browser/src/autofill/content/components/.storybook/main.ts
@@ -49,13 +49,7 @@ const config: StorybookConfig = {
         exclude: /node_modules/,
         use: [
           {
-            loader: require.resolve("babel-loader"),
-            options: {
-              presets: [
-                require.resolve("@babel/preset-env"),
-                require.resolve("@babel/preset-typescript"),
-              ],
-            },
+            loader: require.resolve("ts-loader"),
           },
         ],
       });
diff --git a/package-lock.json b/package-lock.json
index 7f98ef00e07..24a29863528 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -86,7 +86,6 @@
         "@angular/elements": "18.2.13",
         "@babel/core": "7.24.9",
         "@babel/preset-env": "7.24.8",
-        "@babel/preset-typescript": "7.26.0",
         "@compodoc/compodoc": "1.1.26",
         "@electron/notarize": "2.5.0",
         "@electron/rebuild": "3.7.1",
@@ -3157,6 +3156,7 @@
       "integrity": "sha512-ld6oezHQMZsZfp6pWtbjaNDF2tiiCYYDqQszHt5VV437lewP9aSi2Of99CK0D0XB21k7FLgnLcmQKyKzynfeAA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
       },
@@ -3283,6 +3283,7 @@
       "integrity": "sha512-hjMgRy5hb8uJJjUcdWunWVcoi9bGpJp8p5Ol1229PoN6aytsLwNMgmdftO23wnCLMfVmTwZDWMPNq/D1SY60JQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
       },
@@ -4118,39 +4119,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-typescript": {
-      "version": "7.26.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.26.5.tgz",
-      "integrity": "sha512-GJhPO0y8SD5EYVCy2Zr+9dSZcEgaSmq5BLR0Oc25TOEhC+ba49vUAGZFjy8v79z9E1mdldq4x9d1xgh4L1d5dQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.25.9",
-        "@babel/helper-create-class-features-plugin": "^7.25.9",
-        "@babel/helper-plugin-utils": "^7.26.5",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.25.9",
-        "@babel/plugin-syntax-typescript": "^7.25.9"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-typescript/node_modules/@babel/helper-annotate-as-pure": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.25.9.tgz",
-      "integrity": "sha512-gv7320KBUFJz1RnylIg5WWYPRXKZ884AGkYpgpWW02TH66Dl+HaC1t1CKd0z3R4b6hdYEcmrNZHUmfCP+1u3/g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/types": "^7.25.9"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@babel/plugin-transform-unicode-escapes": {
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.25.9.tgz",
@@ -4375,26 +4343,6 @@
         "@babel/core": "^7.0.0-0 || ^8.0.0-0 <8.0.0"
       }
     },
-    "node_modules/@babel/preset-typescript": {
-      "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.26.0.tgz",
-      "integrity": "sha512-NMk1IGZ5I/oHhoXEElcm+xUnL/szL6xflkFZmoEU9xj1qSJXpiS7rsspYo92B4DRCDvZn2erT5LdsCeXAKNCkg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.25.9",
-        "@babel/helper-validator-option": "^7.25.9",
-        "@babel/plugin-syntax-jsx": "^7.25.9",
-        "@babel/plugin-transform-modules-commonjs": "^7.25.9",
-        "@babel/plugin-transform-typescript": "^7.25.9"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/@babel/runtime": {
       "version": "7.25.0",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.0.tgz",
diff --git a/package.json b/package.json
index 09ce8fda14e..290daf95f70 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,6 @@
     "@angular/elements": "18.2.13",
     "@babel/core": "7.24.9",
     "@babel/preset-env": "7.24.8",
-    "@babel/preset-typescript": "7.26.0",
     "@compodoc/compodoc": "1.1.26",
     "@electron/notarize": "2.5.0",
     "@electron/rebuild": "3.7.1",