@polymarbot/nuxt-layer-shadcn-ui 0.1.10 → 0.2.0

package/app/components/ui/ButtonGroup/index.stories.ts

@@ -7,12 +7,45 @@ import ButtonGroup from './index.vue'
 const meta = {
   title: 'UI/ButtonGroup',
   component: ButtonGroup,
+  argTypes: {
+    class: { control: 'text' },
+  },
+  args: {
+    class: '',
+  },
+  render: args => ({
+    components: { ButtonGroup, Button },
+    setup: () => ({ args }),
+    template: `
+      <ButtonGroup v-bind="args">
+        <Button variant="outline">Left</Button>
+        <Button variant="outline">Center</Button>
+        <Button variant="outline">Right</Button>
+      </ButtonGroup>
+    `,
+  }),
 } satisfies Meta<typeof ButtonGroup>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Default: Story = {}
+
+export const WithIcons: Story = {
+  render: () => ({
+    components: { ButtonGroup, Button, Icon },
+    template: `
+      <ButtonGroup>
+        <Button variant="outline" size="icon"><Icon name="bold" /></Button>
+        <Button variant="outline" size="icon"><Icon name="italic" /></Button>
+        <Button variant="outline" size="icon"><Icon name="underline" /></Button>
+        <Button variant="outline" size="icon"><Icon name="strikethrough" /></Button>
+      </ButtonGroup>
+    `,
+  }),
+}
+
+export const InputWithButton: Story = {
   render: () => ({
     components: { ButtonGroup, Button, Input, Icon },
     setup () {
@@ -20,56 +53,35 @@ export const Default: Story = {
       return { search }
     },
     template: `
-      <div class="space-y-10">
-        <!-- Button Group -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Buttons</h3>
-          <ButtonGroup>
-            <Button variant="outline">Left</Button>
-            <Button variant="outline">Center</Button>
-            <Button variant="outline">Right</Button>
-          </ButtonGroup>
-        </section>
-
-        <!-- With Icons -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">With Icons</h3>
-          <ButtonGroup>
-            <Button variant="outline" size="icon"><Icon name="bold" /></Button>
-            <Button variant="outline" size="icon"><Icon name="italic" /></Button>
-            <Button variant="outline" size="icon"><Icon name="underline" /></Button>
-            <Button variant="outline" size="icon"><Icon name="strikethrough" /></Button>
-          </ButtonGroup>
-        </section>
-
-        <!-- Input + Button -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Input + Button</h3>
-          <ButtonGroup>
-            <Input v-model="search" placeholder="Search..." />
-            <Button variant="outline"><Icon name="search" /></Button>
-          </ButtonGroup>
-        </section>
+      <ButtonGroup>
+        <Input v-model="search" placeholder="Search..." />
+        <Button variant="outline"><Icon name="search" /></Button>
+      </ButtonGroup>
+    `,
+  }),
+}
 
-        <!-- Button + Input + Button -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Button + Input + Button</h3>
-          <ButtonGroup>
-            <Button variant="outline" size="icon"><Icon name="minus" /></Button>
-            <Input class="w-20 text-center" model-value="5" />
-            <Button variant="outline" size="icon"><Icon name="plus" /></Button>
-          </ButtonGroup>
-        </section>
+export const ButtonWithInputWithButton: Story = {
+  render: () => ({
+    components: { ButtonGroup, Button, Input, Icon },
+    template: `
+      <ButtonGroup>
+        <Button variant="outline" size="icon"><Icon name="minus" /></Button>
+        <Input class="w-20 text-center" model-value="5" />
+        <Button variant="outline" size="icon"><Icon name="plus" /></Button>
+      </ButtonGroup>
+    `,
+  }),
+}
 
-        <!-- Mixed Variants -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Mixed Variants</h3>
-          <ButtonGroup>
-            <Button variant="outline">Save</Button>
-            <Button>Submit</Button>
-          </ButtonGroup>
-        </section>
-      </div>
+export const MixedVariants: Story = {
+  render: () => ({
+    components: { ButtonGroup, Button },
+    template: `
+      <ButtonGroup>
+        <Button variant="outline">Save</Button>
+        <Button>Submit</Button>
+      </ButtonGroup>
     `,
   }),
 }

package/app/components/ui/Card/index.stories.ts

@@ -5,61 +5,69 @@ import Card from './index.vue'
 const meta = {
   title: 'UI/Card',
   component: Card,
+  argTypes: {
+    title: { control: 'text' },
+  },
+  args: {
+    title: 'Card Title',
+  },
+  render: args => ({
+    components: { Card },
+    setup: () => ({ args }),
+    template: `
+      <Card v-bind="args" class="max-w-md">
+        <p>This card has a title prop set.</p>
+      </Card>
+    `,
+  }),
 } satisfies Meta<typeof Card>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  render: args => ({
-    components: { Card, Button },
-    setup: () => ({ args }),
-    template: `
-      <div class="space-y-10 max-w-md">
-        <!-- Basic Card -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Basic Card</h3>
-          <Card>
-            <p>This is a basic card with default content only.</p>
-          </Card>
-        </section>
+export const Default: Story = {}
 
-        <!-- Card with Title -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Card with Title</h3>
-          <Card title="Card Title">
-            <p>This card has a title prop set.</p>
-          </Card>
-        </section>
+export const WithTitle: Story = {
+  render: () => ({
+    components: { Card },
+    template: `
+      <Card title="Card Title" class="max-w-md">
+        <p>This card has a title prop set.</p>
+      </Card>
+    `,
+  }),
+}
 
-        <!-- Card with Custom Header -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Card with Custom Header</h3>
-          <Card>
-            <template #header>
-              <div class="flex items-center justify-between">
-                <span class="text-lg font-semibold">Custom Header</span>
-                <Button variant="ghost" size="sm">Action</Button>
-              </div>
-            </template>
-            <p>This card uses the header slot for a custom layout.</p>
-          </Card>
-        </section>
+export const CustomHeader: Story = {
+  render: () => ({
+    components: { Card, Button },
+    template: `
+      <Card class="max-w-md">
+        <template #header>
+          <div class="flex items-center justify-between">
+            <span class="text-lg font-semibold">Custom Header</span>
+            <Button variant="ghost" size="sm">Action</Button>
+          </div>
+        </template>
+        <p>This card uses the header slot for a custom layout.</p>
+      </Card>
+    `,
+  }),
+}
 
-        <!-- Card with Footer -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Card with Footer</h3>
-          <Card title="Settings">
-            <p>Update your account settings here.</p>
-            <template #footer>
-              <div class="w-full flex justify-end gap-2">
-                <Button variant="outline">Cancel</Button>
-                <Button>Save</Button>
-              </div>
-            </template>
-          </Card>
-        </section>
-      </div>
+export const WithFooter: Story = {
+  render: () => ({
+    components: { Card, Button },
+    template: `
+      <Card title="Settings" class="max-w-md">
+        <p>Update your account settings here.</p>
+        <template #footer>
+          <div class="w-full flex justify-end gap-2">
+            <Button variant="outline">Cancel</Button>
+            <Button>Save</Button>
+          </div>
+        </template>
+      </Card>
     `,
   }),
 }

package/app/components/ui/Card/index.vue

@@ -5,7 +5,7 @@ import {
   CardFooter as ShadcnCardFooter,
   CardHeader as ShadcnCardHeader,
   CardTitle as ShadcnCardTitle,
-} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/card'
+} from '../../shadcn/card'
 import type { CardProps } from './types'
 
 defineProps<CardProps>()

package/app/components/ui/Checkbox/index.stories.ts

@@ -4,64 +4,87 @@ import Checkbox from './index.vue'
 const meta = {
   title: 'UI/Checkbox',
   component: Checkbox,
+  argTypes: {
+    modelValue: { control: 'select', options: [ true, false, 'indeterminate' ]},
+    defaultValue: { control: 'select', options: [ true, false, 'indeterminate' ]},
+    disabled: { control: 'boolean' },
+    required: { control: 'boolean' },
+    name: { control: 'text' },
+    value: { control: 'text' },
+  },
+  args: {
+    modelValue: false,
+    defaultValue: false,
+    disabled: false,
+    required: false,
+    name: '',
+    value: '',
+  },
+  render: args => ({
+    components: { Checkbox },
+    setup: () => ({ args }),
+    template: `
+      <label class="flex items-center gap-2 cursor-pointer">
+        <Checkbox v-bind="args" />
+        <span class="text-sm">Accept terms and conditions</span>
+      </label>
+    `,
+  }),
 } satisfies Meta<typeof Checkbox>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Default: Story = {}
+
+export const Checked: Story = {
   render: () => ({
     components: { Checkbox },
     setup () {
-      const checked = ref(false)
-      const checkedOn = ref(true)
-      return { checked, checkedOn }
+      const checked = ref(true)
+      return { checked }
     },
     template: `
-      <div class="space-y-10">
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Basic</h3>
-          <label class="flex items-center gap-2 cursor-pointer">
-            <Checkbox v-model="checked" />
-            <span class="text-sm">Accept terms and conditions</span>
-          </label>
-          <div class="mt-2 text-sm text-muted-foreground">Value: {{ checked }}</div>
-        </section>
-
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Checked</h3>
-          <label class="flex items-center gap-2 cursor-pointer">
-            <Checkbox v-model="checkedOn" />
-            <span class="text-sm">Enable notifications</span>
-          </label>
-          <div class="mt-2 text-sm text-muted-foreground">Value: {{ checkedOn }}</div>
-        </section>
+      <div>
+        <label class="flex items-center gap-2 cursor-pointer">
+          <Checkbox v-model="checked" />
+          <span class="text-sm">Enable notifications</span>
+        </label>
+        <div class="mt-2 text-sm text-muted-foreground">Value: {{ checked }}</div>
+      </div>
+    `,
+  }),
+}
 
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Indeterminate</h3>
-          <label class="flex items-center gap-2 cursor-pointer">
-            <Checkbox model-value="indeterminate" />
-            <span class="text-sm">Select all items</span>
-          </label>
-        </section>
+export const Indeterminate: Story = {
+  render: () => ({
+    components: { Checkbox },
+    template: `
+      <label class="flex items-center gap-2 cursor-pointer">
+        <Checkbox model-value="indeterminate" />
+        <span class="text-sm">Select all items</span>
+      </label>
+    `,
+  }),
+}
 
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Disabled</h3>
-          <div class="flex flex-col gap-3">
-            <label class="flex items-center gap-2 cursor-not-allowed opacity-50">
-              <Checkbox :model-value="false" disabled />
-              <span class="text-sm">Unchecked disabled</span>
-            </label>
-            <label class="flex items-center gap-2 cursor-not-allowed opacity-50">
-              <Checkbox :model-value="true" disabled />
-              <span class="text-sm">Checked disabled</span>
-            </label>
-            <label class="flex items-center gap-2 cursor-not-allowed opacity-50">
-              <Checkbox model-value="indeterminate" disabled />
-              <span class="text-sm">Indeterminate disabled</span>
-            </label>
-          </div>
-        </section>
+export const Disabled: Story = {
+  render: () => ({
+    components: { Checkbox },
+    template: `
+      <div class="flex flex-col gap-3">
+        <label class="flex items-center gap-2 cursor-not-allowed opacity-50">
+          <Checkbox :model-value="false" disabled />
+          <span class="text-sm">Unchecked disabled</span>
+        </label>
+        <label class="flex items-center gap-2 cursor-not-allowed opacity-50">
+          <Checkbox :model-value="true" disabled />
+          <span class="text-sm">Checked disabled</span>
+        </label>
+        <label class="flex items-center gap-2 cursor-not-allowed opacity-50">
+          <Checkbox model-value="indeterminate" disabled />
+          <span class="text-sm">Indeterminate disabled</span>
+        </label>
       </div>
     `,
   }),

package/app/components/ui/Checkbox/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Checkbox as ShadcnCheckbox } from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/checkbox'
+import { Checkbox as ShadcnCheckbox } from '../../shadcn/checkbox'
 import type { CheckboxProps } from './types'
 
 defineProps<CheckboxProps>()

package/app/components/ui/CopyButton/index.stories.ts

@@ -1,55 +1,113 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import CopyButton from './index.vue'
 
+const variants = [ 'default', 'destructive', 'outline', 'secondary', 'ghost', 'link' ] as const
+const sizes = [ 'sm', 'default', 'lg', 'icon-sm', 'icon', 'icon-lg' ] as const
+
 const meta = {
   title: 'UI/CopyButton',
   component: CopyButton,
   argTypes: {
     copy: { control: 'text' },
-    variant: { control: 'select', options: [ 'default', 'destructive', 'outline', 'secondary', 'ghost' ]},
-    size: { control: 'select', options: [ 'default', 'sm', 'lg', 'icon' ]},
+    beforeCopyText: { control: 'text' },
+    afterCopyText: { control: 'text' },
+    variant: { control: 'select', options: variants },
+    size: { control: 'select', options: sizes },
+    rounded: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    loading: { control: 'boolean' },
   },
   args: {
     copy: 'Hello, World!',
+    beforeCopyText: '',
+    afterCopyText: '',
     variant: 'outline',
+    size: 'default',
+    rounded: false,
+    disabled: false,
+    loading: false,
   },
+  render: args => ({
+    components: { CopyButton },
+    setup: () => ({ args }),
+    template: '<CopyButton v-bind="args">Copy Text</CopyButton>',
+  }),
 } satisfies Meta<typeof CopyButton>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  render: args => ({
+export const Default: Story = {}
+
+export const IconOnly: Story = {
+  render: () => ({
+    components: { CopyButton },
+    template: `
+      <div class="flex items-center gap-4">
+        <CopyButton copy="Hello, World!" variant="outline" />
+        <CopyButton copy="Hello, World!" variant="ghost" />
+        <CopyButton copy="Hello, World!" variant="secondary" />
+      </div>
+    `,
+  }),
+}
+
+export const WithLabel: Story = {
+  render: () => ({
     components: { CopyButton },
-    setup: () => ({ args }),
     template: `
-      <div class="space-y-10">
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Icon Only (default)</h3>
-          <div class="flex items-center gap-4">
-            <CopyButton v-bind="args" />
-            <CopyButton v-bind="args" variant="ghost" />
-            <CopyButton v-bind="args" variant="secondary" />
-          </div>
-        </section>
-
-        <section>
-          <h3 class="mb-4 text-lg font-medium">With Label</h3>
-          <div class="flex items-center gap-4">
-            <CopyButton v-bind="args">Copy Text</CopyButton>
-            <CopyButton v-bind="args" variant="secondary">Copy Address</CopyButton>
-          </div>
-        </section>
-
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Sizes</h3>
-          <div class="flex items-center gap-4">
-            <CopyButton v-bind="args" size="sm">Small</CopyButton>
-            <CopyButton v-bind="args" size="default">Default</CopyButton>
-            <CopyButton v-bind="args" size="lg">Large</CopyButton>
-          </div>
-        </section>
+      <div class="flex items-center gap-4">
+        <CopyButton copy="Hello, World!" variant="outline">Copy Text</CopyButton>
+        <CopyButton copy="123 Main St" variant="secondary">Copy Address</CopyButton>
       </div>
     `,
   }),
 }
+
+export const Variants: Story = {
+  render: () => ({
+    components: { CopyButton },
+    setup: () => ({ variants }),
+    template: `
+      <div class="flex flex-wrap items-center gap-3">
+        <CopyButton
+          v-for="v in variants"
+          :key="v"
+          :variant="v"
+          copy="Hello, World!"
+        >
+          {{ v }}
+        </CopyButton>
+      </div>
+    `,
+  }),
+}
+
+export const Sizes: Story = {
+  render: () => ({
+    components: { CopyButton },
+    template: `
+      <div class="flex items-center gap-4">
+        <CopyButton copy="Hello, World!" variant="outline" size="sm">Small</CopyButton>
+        <CopyButton copy="Hello, World!" variant="outline" size="default">Default</CopyButton>
+        <CopyButton copy="Hello, World!" variant="outline" size="lg">Large</CopyButton>
+      </div>
+    `,
+  }),
+}
+
+export const CustomTooltipText: Story = {
+  render: () => ({
+    components: { CopyButton },
+    template: `
+      <CopyButton
+        copy="secret-token-123"
+        before-copy-text="Click to copy token"
+        after-copy-text="Token copied!"
+        variant="outline"
+      >
+        Copy Token
+      </CopyButton>
+    `,
+  }),
+}