@polymarbot/nuxt-layer-shadcn-ui 0.1.9 → 0.2.0-w

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

@@ -1,32 +1,25 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import type { ButtonSize, ButtonVariant } from './types'
 import Icon from '../Icon/index.vue'
 import Button from './index.vue'
 
-type ButtonVariant
-  = | 'default'
-    | 'destructive'
-    | 'outline'
-    | 'secondary'
-    | 'ghost'
-    | 'link'
-type ButtonSize = 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg'
-
-const variants: ButtonVariant[] = [
+const variants = [
   'default',
   'destructive',
   'outline',
   'secondary',
   'ghost',
   'link',
-]
-const sizes: ButtonSize[] = [
+] as const satisfies readonly ButtonVariant[]
+
+const sizes = [
   'sm',
   'default',
   'lg',
   'icon-sm',
   'icon',
   'icon-lg',
-]
+] as const satisfies readonly ButtonSize[]
 
 const meta = {
   title: 'UI/Button',
@@ -49,96 +42,107 @@ const meta = {
     loading: false,
     disabled: false,
   },
+  render: args => ({
+    components: { Button },
+    setup: () => ({ args }),
+    template: '<Button v-bind="args">Button</Button>',
+  }),
 } satisfies Meta<typeof Button>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  args: {
-    loading: false,
-  },
+export const Default: Story = {}
 
-  render: args => ({
-    components: { Button, Icon },
-    setup: () => ({ args, variants, sizes }),
+export const Variants: Story = {
+  render: () => ({
+    components: { Button },
+    setup: () => ({ variants }),
     template: `
-      <div class="space-y-10">
-        <!-- Controlled -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
-          <Button v-bind="args">Button</Button>
-        </section>
-
-        <!-- Variants -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Variants</h3>
-          <div class="flex flex-wrap items-center gap-3">
-            <Button v-for="v in variants" :key="v" :variant="v">{{ v }}</Button>
-          </div>
-        </section>
+      <div class="flex flex-wrap items-center gap-3">
+        <Button v-for="v in variants" :key="v" :variant="v">{{ v }}</Button>
+      </div>
+    `,
+  }),
+}
 
-        <!-- Sizes -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Sizes</h3>
-          <div class="flex flex-wrap items-center gap-3">
-            <Button v-for="s in sizes" :key="s" :size="s">
-              <Icon v-if="s.startsWith('icon')" name="plus" />
-              <template v-else>{{ s }}</template>
-            </Button>
-          </div>
-        </section>
+export const Sizes: Story = {
+  render: () => ({
+    components: { Button, Icon },
+    setup: () => ({ sizes }),
+    template: `
+      <div class="flex flex-wrap items-center gap-3">
+        <Button v-for="s in sizes" :key="s" :size="s">
+          <Icon v-if="s.startsWith('icon')" name="plus" />
+          <template v-else>{{ s }}</template>
+        </Button>
+      </div>
+    `,
+  }),
+}
 
-        <!-- With Icons -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">With Icons</h3>
-          <div class="flex flex-wrap items-center gap-3">
-            <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" />
-          </div>
-        </section>
+export const WithIcons: Story = {
+  render: () => ({
+    components: { Button },
+    template: `
+      <div class="flex flex-wrap items-center gap-3">
+        <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" />
+      </div>
+    `,
+  }),
+}
 
-        <!-- Loading -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Loading</h3>
-          <div class="flex flex-wrap items-center gap-3">
-            <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" />
-          </div>
-        </section>
+export const Loading: Story = {
+  render: () => ({
+    components: { Button },
+    template: `
+      <div class="flex flex-wrap items-center gap-3">
+        <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" />
+      </div>
+    `,
+  }),
+}
 
-        <!-- Disabled -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Disabled</h3>
-          <div class="flex flex-wrap items-center gap-3">
-            <Button v-for="v in variants" :key="v" :variant="v" disabled>{{ v }}</Button>
-          </div>
-        </section>
+export const Disabled: Story = {
+  render: () => ({
+    components: { Button },
+    setup: () => ({ variants }),
+    template: `
+      <div class="flex flex-wrap items-center gap-3">
+        <Button v-for="v in variants" :key="v" :variant="v" disabled>{{ v }}</Button>
+      </div>
+    `,
+  }),
+}
 
-        <!-- Rounded -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Rounded</h3>
-          <div class="flex flex-wrap items-center gap-3">
-            <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" />
-          </div>
-        </section>
+export const Rounded: Story = {
+  render: () => ({
+    components: { Button },
+    template: `
+      <div class="flex flex-wrap items-center gap-3">
+        <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" />
+      </div>
+    `,
+  }),
+}
 
-        <!-- Link Buttons -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Link Buttons</h3>
-          <div class="flex flex-wrap items-center gap-3">
-            <Button href="/dialog" variant="outline">Internal Link</Button>
-            <Button href="https://example.com" icon="chevron-right" iconPosition="end">External Link</Button>
-          </div>
-        </section>
+export const LinkButtons: Story = {
+  render: () => ({
+    components: { Button },
+    template: `
+      <div class="flex flex-wrap items-center gap-3">
+        <Button href="/dialog" variant="outline">Internal Link</Button>
+        <Button href="https://example.com" icon="external-link" iconPosition="end">External Link</Button>
       </div>
     `,
   }),

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button as ShadcnButton } from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/button'
+import { Button as ShadcnButton } from '../../shadcn/button'
 import WebLink from '@polymarbot/nuxt-layer-shadcn-ui/app/components/ui/WebLink/index.vue'
 import type { ButtonProps } from './types'
 

package/app/components/ui/Button/types.ts

@@ -1,6 +1,9 @@
-import type { ButtonVariants } from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/button'
+import type { ButtonVariants } from '../../shadcn/button'
 import type { RouteLocationRaw } from 'vue-router'
 
+export type ButtonVariant = NonNullable<ButtonVariants['variant']>
+export type ButtonSize = NonNullable<ButtonVariants['size']>
+
 export interface ButtonProps extends /* @vue-ignore */ ButtonVariants {
   loading?: boolean
   disabled?: boolean

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>()