From 9f849a1d4be647a046fe4f90af4612f3bc913143 Mon Sep 17 00:00:00 2001
From: cylewaitforit <cyle@cylewaitfor.it>
Date: Thu, 5 Mar 2026 08:47:22 -0600
Subject: [PATCH] docs(ui): add ButtonGroup stories to storybook

---
 app/components/Button/Base.stories.ts        |  60 ----------
 app/components/Button/Base.vue               |   7 ++
 app/components/Button/ButtonBase.stories.ts  | 116 +++++++++++++++++++
 app/components/Button/ButtonGroup.stories.ts | 106 +++++++++++++++++
 app/components/Button/Group.vue              |   7 ++
 5 files changed, 236 insertions(+), 60 deletions(-)
 delete mode 100644 app/components/Button/Base.stories.ts
 create mode 100644 app/components/Button/ButtonBase.stories.ts
 create mode 100644 app/components/Button/ButtonGroup.stories.ts

diff --git a/app/components/Button/Base.stories.ts b/app/components/Button/Base.stories.ts
deleted file mode 100644
index 9de0744377..0000000000
--- a/app/components/Button/Base.stories.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import type { Meta, StoryObj } from '@storybook-vue/nuxt'
-import Component from './Base.vue'
-
-const meta = {
-  component: Component,
-} satisfies Meta<typeof Component>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Primary: Story = {
-  args: {
-    default: 'Primary Button',
-  },
-}
-
-export const Secondary: Story = {
-  args: {
-    default: 'Secondary Button',
-    variant: 'secondary',
-  },
-}
-
-export const Small: Story = {
-  args: {
-    default: 'Small Button',
-    size: 'small',
-    variant: 'secondary',
-  },
-}
-
-export const Disabled: Story = {
-  args: {
-    default: 'Disabled Button',
-    disabled: true,
-  },
-}
-
-export const WithIcon: Story = {
-  args: {
-    default: 'Search',
-    classicon: 'i-lucide:search',
-    variant: 'secondary',
-  },
-}
-
-export const WithKeyboardShortcut: Story = {
-  args: {
-    ariaKeyshortcuts: '/',
-    default: 'Search',
-    variant: 'secondary',
-  },
-}
-
-export const Block: Story = {
-  args: {
-    block: true,
-    default: 'Full Width Button',
-  },
-}
diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index f37d57be06..88464d6986 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -1,6 +1,13 @@
 <script setup lang="ts">
 import type { IconClass } from '~/types'
 
+/**
+ * A base button component that supports multiple variants, sizes, and states as well as icons and keyboard shortcuts.
+ */
+defineOptions({
+  name: 'ButtonBase',
+})
+
 const props = withDefaults(
   defineProps<{
     disabled?: boolean
diff --git a/app/components/Button/ButtonBase.stories.ts b/app/components/Button/ButtonBase.stories.ts
new file mode 100644
index 0000000000..db18a72d63
--- /dev/null
+++ b/app/components/Button/ButtonBase.stories.ts
@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from '@storybook-vue/nuxt'
+import ButtonBase from './Base.vue'
+
+const meta = {
+  component: ButtonBase,
+  parameters: {
+    docs: {
+      source: {
+        type: 'dynamic',
+        transform: (code: string) =>
+          code.replace(/<Base\b/g, '<ButtonBase').replace(/<\/Base>/g, '</ButtonBase>'),
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ButtonBase>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    default: 'Button Text',
+  },
+}
+
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+  },
+  render: args => ({
+    components: { ButtonBase },
+    setup() {
+      return { args }
+    },
+    template: `<ButtonBase v-bind="args">{{ $t("nav.settings") }}</ButtonBase>`,
+  }),
+}
+
+export const Secondary: Story = {
+  args: {
+    variant: 'secondary',
+  },
+  render: args => ({
+    components: { ButtonBase },
+    setup() {
+      return { args }
+    },
+    template: `<ButtonBase v-bind="args">{{ $t("nav.settings") }}</ButtonBase>`,
+  }),
+}
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+  },
+  render: args => ({
+    components: { ButtonBase },
+    setup() {
+      return { args }
+    },
+    template: `<ButtonBase v-bind="args">{{ $t("nav.settings") }}</ButtonBase>`,
+  }),
+}
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+  render: args => ({
+    components: { ButtonBase },
+    setup() {
+      return { args }
+    },
+    template: `<ButtonBase v-bind="args">{{ $t("nav.settings") }}</ButtonBase>`,
+  }),
+}
+
+export const WithIcon: Story = {
+  args: {
+    classicon: 'i-lucide:search',
+  },
+  render: args => ({
+    components: { ButtonBase },
+    setup() {
+      return { args }
+    },
+    template: `<ButtonBase v-bind="args">{{ $t("search.button") }}</ButtonBase>`,
+  }),
+}
+
+export const WithKeyboardShortcut: Story = {
+  args: {
+    ariaKeyshortcuts: '/',
+  },
+  render: args => ({
+    components: { ButtonBase },
+    setup() {
+      return { args }
+    },
+    template: `<ButtonBase v-bind="args">{{ $t("search.button") }}</ButtonBase>`,
+  }),
+}
+
+export const Block: Story = {
+  args: {
+    block: true,
+  },
+  render: args => ({
+    components: { ButtonBase },
+    setup() {
+      return { args }
+    },
+    template: `<ButtonBase v-bind="args">{{ $t("nav.settings") }}</ButtonBase>`,
+  }),
+}
diff --git a/app/components/Button/ButtonGroup.stories.ts b/app/components/Button/ButtonGroup.stories.ts
new file mode 100644
index 0000000000..7dbddccaab
--- /dev/null
+++ b/app/components/Button/ButtonGroup.stories.ts
@@ -0,0 +1,106 @@
+import type { Meta, StoryObj } from '@storybook-vue/nuxt'
+import ButtonBase from './Base.vue'
+import ButtonGroup from './Group.vue'
+
+const meta = {
+  component: ButtonGroup,
+  parameters: {
+    docs: {
+      source: {
+        type: 'dynamic',
+        transform: (code: string) =>
+          code
+            .replace(/<Base\b/g, '<ButtonBase')
+            .replace(/<\/Base>/g, '</ButtonBase>')
+            .replace(/<Group\b/g, '<ButtonGroup')
+            .replace(/<\/Group>/g, '</ButtonGroup>'),
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ButtonGroup>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  parameters: {
+    docs: {
+      source: {
+        code: `
+        <template>
+            <ButtonGroup>
+                <ButtonBase>Back</ButtonBase>
+                <ButtonBase>Settings</ButtonBase>
+                <ButtonBase>Compare</ButtonBase>
+            </ButtonGroup>
+        </template>
+        `,
+      },
+    },
+  },
+  render: () => ({
+    components: { ButtonBase, ButtonGroup },
+    template: `
+      <ButtonGroup>
+        <ButtonBase>{{ $t('nav.back') }}</ButtonBase>
+        <ButtonBase>{{ $t('nav.settings') }}</ButtonBase>
+        <ButtonBase>{{ $t('nav.compare') }}</ButtonBase>
+      </ButtonGroup>
+    `,
+  }),
+}
+
+export const WithVariants: Story = {
+  parameters: {
+    docs: {
+      source: {
+        code: `
+        <template>
+            <ButtonGroup>
+                <ButtonBase variant="primary">Back</ButtonBase>
+                <ButtonBase variant="primary">Settings</ButtonBase>
+                <ButtonBase variant="primary">Compare</ButtonBase>
+            </ButtonGroup>
+        </template>
+        `,
+      },
+    },
+  },
+  render: () => ({
+    components: { ButtonBase, ButtonGroup },
+    template: `
+      <ButtonGroup>
+        <ButtonBase variant="primary">{{ $t('nav.back') }}</ButtonBase>
+        <ButtonBase variant="primary">{{ $t('nav.settings') }}</ButtonBase>
+        <ButtonBase variant="primary">{{ $t('nav.compare') }}</ButtonBase>
+      </ButtonGroup>
+    `,
+  }),
+}
+
+export const WithIcons: Story = {
+  parameters: {
+    docs: {
+      source: {
+        code: `
+        <template>
+            <ButtonGroup>
+                <ButtonBase variant="secondary" classicon="i-lucide:x">Close</ButtonBase>
+                <ButtonBase variant="secondary" classicon="i-lucide:search">Search</ButtonBase>
+            </ButtonGroup>
+        </template>
+        `,
+      },
+    },
+  },
+  render: () => ({
+    components: { ButtonBase, ButtonGroup },
+    template: `
+      <ButtonGroup>
+        <ButtonBase variant="secondary" classicon="i-lucide:x">{{ $t('common.close') }}</ButtonBase>
+        <ButtonBase variant="secondary" classicon="i-lucide:search">{{ $t('filters.search') }}</ButtonBase>
+      </ButtonGroup>
+    `,
+  }),
+}
diff --git a/app/components/Button/Group.vue b/app/components/Button/Group.vue
index 71f280f020..97c1723187 100644
--- a/app/components/Button/Group.vue
+++ b/app/components/Button/Group.vue
@@ -1,4 +1,11 @@
 <script setup lang="ts">
+/**
+ * Use `ButtonGroup` to group multiple buttons together with connected borders.
+ */
+defineOptions({
+  name: 'ButtonGroup',
+})
+
 const props = defineProps<{
   as?: string | Component
 }>()