@polymarbot/nuxt-layer-shadcn-ui 0.3.10 → 0.4.0

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

@@ -32,6 +32,9 @@ const meta = {
     iconPosition: { control: 'select', options: [ 'start', 'end' ]},
     loading: { control: 'boolean' },
     disabled: { control: 'boolean' },
+    href: { control: 'text' },
+    target: { control: 'text' },
+    class: { control: 'text' },
   },
   args: {
     variant: 'default',
@@ -41,6 +44,9 @@ const meta = {
     iconPosition: 'start',
     loading: false,
     disabled: false,
+    href: '',
+    target: '',
+    class: '',
   },
   render: args => ({
     components: { Button },
@@ -57,7 +63,23 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 export const Default: Story = {}
 
 export const Variants: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Button variant="default">default</Button>
+  <Button variant="destructive">destructive</Button>
+  <Button variant="outline">outline</Button>
+  <Button variant="secondary">secondary</Button>
+  <Button variant="ghost">ghost</Button>
+  <Button variant="link">link</Button>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Button },
     setup: () => ({ variants }),
@@ -70,7 +92,23 @@ export const Variants: Story = {
 }
 
 export const Sizes: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Button size="sm">sm</Button>
+  <Button size="default">default</Button>
+  <Button size="lg">lg</Button>
+  <Button size="icon-sm"><Icon name="plus" /></Button>
+  <Button size="icon"><Icon name="plus" /></Button>
+  <Button size="icon-lg"><Icon name="plus" /></Button>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Button, Icon },
     setup: () => ({ sizes }),
@@ -86,7 +124,21 @@ export const Sizes: Story = {
 }
 
 export const WithIcons: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Button icon="mail">Login with Email</Button>
+  <Button icon="chevron-right" iconPosition="end" variant="secondary">Next</Button>
+  <Button icon="trash-2" variant="destructive">Delete</Button>
+  <Button icon="plus" size="icon" variant="outline" />
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Button },
     template: `
@@ -101,7 +153,21 @@ export const WithIcons: Story = {
 }
 
 export const Loading: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Button loading icon="mail">Login with Email</Button>
+  <Button loading icon="chevron-right" iconPosition="end" variant="secondary">Next</Button>
+  <Button loading icon="trash-2" variant="destructive">Delete</Button>
+  <Button loading icon="plus" size="icon" variant="outline" />
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Button },
     template: `
@@ -116,7 +182,23 @@ export const Loading: Story = {
 }
 
 export const Disabled: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Button variant="default" disabled>default</Button>
+  <Button variant="destructive" disabled>destructive</Button>
+  <Button variant="outline" disabled>outline</Button>
+  <Button variant="secondary" disabled>secondary</Button>
+  <Button variant="ghost" disabled>ghost</Button>
+  <Button variant="link" disabled>link</Button>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Button },
     setup: () => ({ variants }),
@@ -129,7 +211,22 @@ export const Disabled: Story = {
 }
 
 export const Rounded: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Button rounded>Rounded</Button>
+  <Button rounded variant="outline">Outline</Button>
+  <Button rounded variant="secondary">Secondary</Button>
+  <Button rounded size="icon" variant="outline" icon="plus" />
+  <Button rounded size="icon" variant="secondary" icon="sun" />
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Button },
     template: `
@@ -145,7 +242,19 @@ export const Rounded: Story = {
 }
 
 export const LinkButtons: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Button href="/dialog" variant="outline">Internal Link</Button>
+  <Button href="https://example.com" icon="external-link" iconPosition="end">External Link</Button>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Button },
     template: `

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

@@ -34,7 +34,23 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 export const Default: Story = {}
 
 export const WithIcons: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<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>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { ButtonGroup, Button, Icon },
     template: `
@@ -49,7 +65,21 @@ export const WithIcons: Story = {
 }
 
 export const InputWithButton: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <ButtonGroup>
+    <Input v-model="search" placeholder="Search..." />
+    <Button variant="outline"><Icon name="search" /></Button>
+  </ButtonGroup>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { ButtonGroup, Button, Input, Icon },
     setup () {
@@ -66,7 +96,22 @@ export const InputWithButton: Story = {
 }
 
 export const ButtonWithInputWithButton: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<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>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { ButtonGroup, Button, Input, Icon },
     template: `
@@ -80,7 +125,21 @@ export const ButtonWithInputWithButton: Story = {
 }
 
 export const MixedVariants: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <ButtonGroup>
+    <Button variant="outline">Save</Button>
+    <Button>Submit</Button>
+  </ButtonGroup>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { ButtonGroup, Button },
     template: `

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

@@ -29,20 +29,27 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 
 export const Default: Story = {}
 
-export const WithTitle: Story = {
-  parameters: noControls,
-  render: () => ({
-    components: { Card },
-    template: `
-      <Card title="Card Title" class="max-w-md">
-        <p>This card has a title prop set.</p>
-      </Card>
-    `,
-  }),
-}
-
 export const CustomHeader: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<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>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Card, Button },
     template: `
@@ -60,7 +67,26 @@ export const CustomHeader: Story = {
 }
 
 export const WithFooter: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<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>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Card, Button },
     template: `

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

@@ -40,7 +40,21 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 export const Default: Story = {}
 
 export const Checked: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <label class="flex items-center gap-2 cursor-pointer">
+    <Checkbox v-model="checked" />
+    <span class="text-sm">Enable notifications</span>
+  </label>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Checkbox },
     setup () {
@@ -60,7 +74,21 @@ export const Checked: Story = {
 }
 
 export const Indeterminate: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <label class="flex items-center gap-2 cursor-pointer">
+    <Checkbox model-value="indeterminate" />
+    <span class="text-sm">Select all items</span>
+  </label>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Checkbox },
     template: `
@@ -73,7 +101,29 @@ export const Indeterminate: Story = {
 }
 
 export const Disabled: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <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>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Checkbox },
     template: `

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

@@ -42,7 +42,20 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 export const Default: Story = {}
 
 export const IconOnly: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <CopyButton copy="Hello, World!" variant="outline" />
+  <CopyButton copy="Hello, World!" variant="ghost" />
+  <CopyButton copy="Hello, World!" variant="secondary" />
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { CopyButton },
     template: `
@@ -56,7 +69,19 @@ export const IconOnly: Story = {
 }
 
 export const WithLabel: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <CopyButton copy="Hello, World!" variant="outline">Copy Text</CopyButton>
+  <CopyButton copy="123 Main St" variant="secondary">Copy Address</CopyButton>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { CopyButton },
     template: `
@@ -69,7 +94,23 @@ export const WithLabel: Story = {
 }
 
 export const Variants: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <CopyButton copy="Hello, World!" variant="default">default</CopyButton>
+  <CopyButton copy="Hello, World!" variant="destructive">destructive</CopyButton>
+  <CopyButton copy="Hello, World!" variant="outline">outline</CopyButton>
+  <CopyButton copy="Hello, World!" variant="secondary">secondary</CopyButton>
+  <CopyButton copy="Hello, World!" variant="ghost">ghost</CopyButton>
+  <CopyButton copy="Hello, World!" variant="link">link</CopyButton>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { CopyButton },
     setup: () => ({ variants }),
@@ -89,7 +130,20 @@ export const Variants: Story = {
 }
 
 export const Sizes: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <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>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { CopyButton },
     template: `
@@ -103,7 +157,25 @@ export const Sizes: Story = {
 }
 
 export const CustomTooltipText: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <CopyButton
+    copy="secret-token-123"
+    before-copy-text="Click to copy token"
+    after-copy-text="Token copied!"
+    variant="outline"
+  >
+    Copy Token
+  </CopyButton>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { CopyButton },
     template: `