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

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

@@ -2,68 +2,112 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import Input from '../Input/index.vue'
 import FormItem from './index.vue'
 
+const orientations = [ 'vertical', 'horizontal', 'responsive' ] as const
+
 const meta = {
   title: 'UI/FormItem',
   component: FormItem,
+  argTypes: {
+    label: { control: 'text' },
+    error: { control: 'text' },
+    description: { control: 'text' },
+    required: { control: 'boolean' },
+    orientation: { control: 'select', options: orientations },
+    class: { control: 'text' },
+  },
+  args: {
+    label: 'Name',
+    error: '',
+    description: '',
+    required: false,
+    orientation: 'vertical',
+    class: '',
+  },
+  render: args => ({
+    components: { FormItem, Input },
+    setup: () => ({ args }),
+    template: `
+      <div class="max-w-md">
+        <FormItem v-bind="args">
+          <Input placeholder="Enter value" />
+        </FormItem>
+      </div>
+    `,
+  }),
 } satisfies Meta<typeof FormItem>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Default: Story = {}
+
+export const Required: Story = {
   render: () => ({
     components: { FormItem, Input },
     setup () {
-      const name = ref('')
       const email = ref('')
-      return { name, email }
+      return { email }
     },
     template: `
-      <div class="space-y-10 max-w-md">
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Basic</h3>
-          <FormItem label="Name">
-            <Input v-model="name" placeholder="Enter your name" />
-          </FormItem>
-        </section>
+      <div class="max-w-md">
+        <FormItem label="Email" required>
+          <Input v-model="email" placeholder="Enter your email" />
+        </FormItem>
+      </div>
+    `,
+  }),
+}
 
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Required</h3>
-          <FormItem label="Email" required>
-            <Input v-model="email" placeholder="Enter your email" />
-          </FormItem>
-        </section>
+export const WithError: Story = {
+  render: () => ({
+    components: { FormItem, Input },
+    template: `
+      <div class="max-w-md">
+        <FormItem label="Username" required error="Username is already taken">
+          <Input model-value="admin" />
+        </FormItem>
+      </div>
+    `,
+  }),
+}
 
-        <section>
-          <h3 class="mb-4 text-lg font-medium">With Error</h3>
-          <FormItem label="Username" required error="Username is already taken">
-            <Input model-value="admin" />
-          </FormItem>
-        </section>
+export const WithDescription: Story = {
+  render: () => ({
+    components: { FormItem, Input },
+    template: `
+      <div class="max-w-md">
+        <FormItem label="Password" description="Must be at least 8 characters long">
+          <Input type="password" placeholder="Enter password" />
+        </FormItem>
+      </div>
+    `,
+  }),
+}
 
-        <section>
-          <h3 class="mb-4 text-lg font-medium">With Description</h3>
-          <FormItem label="Password" description="Must be at least 8 characters long">
-            <Input type="password" placeholder="Enter password" />
-          </FormItem>
-        </section>
+export const Horizontal: Story = {
+  render: () => ({
+    components: { FormItem, Input },
+    template: `
+      <div class="max-w-md">
+        <FormItem label="Display Name" orientation="horizontal">
+          <Input placeholder="Enter display name" />
+        </FormItem>
+      </div>
+    `,
+  }),
+}
 
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Horizontal Orientation</h3>
-          <FormItem label="Display Name" orientation="horizontal">
-            <Input placeholder="Enter display name" />
+export const Responsive: Story = {
+  render: () => ({
+    components: { FormItem, Input },
+    template: `
+      <div class="max-w-md">
+        <div class="@container/field-group resize-x overflow-auto rounded border border-dashed border-border bg-card p-4" style="min-width: 200px;">
+          <FormItem label="Address" orientation="responsive" description="Your mailing address">
+            <Input placeholder="Enter address" />
           </FormItem>
-        </section>
-
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Responsive Orientation</h3>
-          <p class="mb-2 text-sm text-muted-foreground">Drag the right edge to resize ↔</p>
-          <div class="@container/field-group resize-x overflow-auto rounded border border-dashed border-border bg-card p-4" style="min-width: 200px;">
-            <FormItem label="Address" orientation="responsive" description="Your mailing address">
-              <Input placeholder="Enter address" />
-            </FormItem>
-          </div>
-        </section>
+        </div>
+        <p class="mt-2 text-sm text-muted-foreground">Drag the right edge to resize horizontally.</p>
       </div>
     `,
   }),

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

@@ -5,7 +5,7 @@ import {
   FieldDescription,
   FieldError,
   FieldLabel,
-} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/field'
+} from '../../shadcn/field'
 import type { FormItemProps } from './types'
 
 const props = defineProps<FormItemProps>()

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

@@ -1,53 +1,64 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import Help from './index.vue'
 
+const positions = [ 'top', 'bottom', 'left', 'right' ] as const
+
 const meta = {
   title: 'UI/Help',
   component: Help,
+  argTypes: {
+    text: { control: 'text' },
+    position: { control: 'select', options: positions },
+  },
+  args: {
+    text: 'This is a helpful tooltip',
+    position: 'top',
+  },
+  render: args => ({
+    components: { Help },
+    setup: () => ({ args }),
+    template: '<Help v-bind="args" />',
+  }),
 } satisfies Meta<typeof Help>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Default: Story = {}
+
+export const Positions: Story = {
   render: () => ({
     components: { Help },
     template: `
-      <div class="space-y-10">
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Basic</h3>
-          <Help text="This is a helpful tooltip" />
-        </section>
-
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Positions</h3>
-          <div class="flex items-center gap-8 py-10 justify-center">
-            <div class="flex flex-col items-center gap-2">
-              <Help text="Top tooltip" position="top" />
-              <span class="text-sm text-muted-foreground">Top</span>
-            </div>
-            <div class="flex flex-col items-center gap-2">
-              <Help text="Bottom tooltip" position="bottom" />
-              <span class="text-sm text-muted-foreground">Bottom</span>
-            </div>
-            <div class="flex flex-col items-center gap-2">
-              <Help text="Left tooltip" position="left" />
-              <span class="text-sm text-muted-foreground">Left</span>
-            </div>
-            <div class="flex flex-col items-center gap-2">
-              <Help text="Right tooltip" position="right" />
-              <span class="text-sm text-muted-foreground">Right</span>
-            </div>
-          </div>
-        </section>
+      <div class="flex items-center gap-8 py-10 justify-center">
+        <div class="flex flex-col items-center gap-2">
+          <Help text="Top tooltip" position="top" />
+          <span class="text-sm text-muted-foreground">Top</span>
+        </div>
+        <div class="flex flex-col items-center gap-2">
+          <Help text="Bottom tooltip" position="bottom" />
+          <span class="text-sm text-muted-foreground">Bottom</span>
+        </div>
+        <div class="flex flex-col items-center gap-2">
+          <Help text="Left tooltip" position="left" />
+          <span class="text-sm text-muted-foreground">Left</span>
+        </div>
+        <div class="flex flex-col items-center gap-2">
+          <Help text="Right tooltip" position="right" />
+          <span class="text-sm text-muted-foreground">Right</span>
+        </div>
+      </div>
+    `,
+  }),
+}
 
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Inline with Label</h3>
-          <div class="flex items-center gap-1">
-            <span class="text-sm font-medium">API Key</span>
-            <Help text="Your unique API key for authentication" />
-          </div>
-        </section>
+export const InlineWithLabel: Story = {
+  render: () => ({
+    components: { Help },
+    template: `
+      <div class="flex items-center gap-1">
+        <span class="text-sm font-medium">API Key</span>
+        <Help text="Your unique API key for authentication" />
       </div>
     `,
   }),

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

@@ -1,6 +1,15 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import Icon from './index.vue'
 
+const commonIcons = [
+  'house', 'search', 'settings', 'user', 'mail', 'bell',
+  'heart', 'star', 'plus', 'minus', 'check', 'x',
+  'chevron-left', 'chevron-right', 'chevron-up', 'chevron-down',
+  'arrow-left', 'arrow-right', 'arrow-up', 'arrow-down',
+  'eye', 'eye-off', 'trash-2', 'pencil', 'copy', 'download',
+  'upload', 'share', 'link', 'external-link', 'info', 'triangle-alert',
+]
+
 const meta = {
   title: 'UI/Icon',
   component: Icon,
@@ -10,58 +19,47 @@ const meta = {
   args: {
     name: 'house',
   },
+  render: args => ({
+    components: { Icon },
+    setup: () => ({ args }),
+    template: '<Icon v-bind="args" />',
+  }),
 } satisfies Meta<typeof Icon>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-const commonIcons = [
-  'house', 'search', 'settings', 'user', 'mail', 'bell',
-  'heart', 'star', 'plus', 'minus', 'check', 'x',
-  'chevron-left', 'chevron-right', 'chevron-up', 'chevron-down',
-  'arrow-left', 'arrow-right', 'arrow-up', 'arrow-down',
-  'eye', 'eye-off', 'trash-2', 'pencil', 'copy', 'download',
-  'upload', 'share', 'link', 'external-link', 'info', 'triangle-alert',
-]
+export const Default: Story = {}
 
-export const Default: Story = {
-  render: args => ({
+export const CommonIcons: Story = {
+  render: () => ({
     components: { Icon },
-    setup: () => ({ args, commonIcons }),
+    setup: () => ({ commonIcons }),
     template: `
-      <div class="space-y-10">
-        <!-- Controlled -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
-          <Icon v-bind="args" />
-        </section>
-
-        <!-- Common Icons -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Common Icons</h3>
-          <div class="grid grid-cols-8 gap-4">
-            <div
-              v-for="name in commonIcons"
-              :key="name"
-              class="flex flex-col items-center gap-2 rounded-md border p-3"
-            >
-              <Icon :name="name" class="size-5" />
-              <span class="text-xs text-muted-foreground">{{ name }}</span>
-            </div>
-          </div>
-        </section>
+      <div class="grid grid-cols-8 gap-4">
+        <div
+          v-for="name in commonIcons"
+          :key="name"
+          class="flex flex-col items-center gap-2 rounded-md border p-3"
+        >
+          <Icon :name="name" class="size-5" />
+          <span class="text-xs text-muted-foreground">{{ name }}</span>
+        </div>
+      </div>
+    `,
+  }),
+}
 
-        <!-- Sizes -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Sizes</h3>
-          <div class="flex items-end gap-4">
-            <Icon name="star" class="size-3" />
-            <Icon name="star" class="size-4" />
-            <Icon name="star" class="size-5" />
-            <Icon name="star" class="size-6" />
-            <Icon name="star" class="size-8" />
-          </div>
-        </section>
+export const Sizes: Story = {
+  render: () => ({
+    components: { Icon },
+    template: `
+      <div class="flex items-end gap-4">
+        <Icon name="star" class="size-3" />
+        <Icon name="star" class="size-4" />
+        <Icon name="star" class="size-5" />
+        <Icon name="star" class="size-6" />
+        <Icon name="star" class="size-8" />
       </div>
     `,
   }),

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

@@ -6,68 +6,122 @@ const meta = {
   title: 'UI/Input',
   component: Input,
   argTypes: {
+    modelValue: { control: 'text' },
+    autocomplete: { control: 'text' },
     disabled: { control: 'boolean' },
     readonly: { control: 'boolean' },
     invalid: { control: 'boolean' },
   },
   args: {
+    modelValue: '',
+    autocomplete: 'off',
     disabled: false,
     readonly: false,
     invalid: false,
   },
-} satisfies Meta
+  render: args => ({
+    components: { Input },
+    setup: () => ({ args }),
+    template: `
+      <Input v-bind="args" placeholder="Type something..." class="max-w-sm" />
+    `,
+  }),
+} satisfies Meta<typeof Input>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  render: args => ({
-    components: { Input, Icon },
+export const Default: Story = {}
+
+export const Controlled: Story = {
+  render: () => ({
+    components: { Input },
     setup () {
       const value = ref('')
-      const withPrefix = ref('')
-      const withSuffix = ref('')
-      const password = ref('')
-      return { args, value, withPrefix, withSuffix, password }
+      return { value }
     },
     template: `
-      <div class="space-y-10 max-w-sm">
-        <!-- Controlled -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
-          <Input v-model="value" v-bind="args" placeholder="Enter your name..." />
-          <div class="mt-2 text-sm text-muted-foreground">Value: {{ value }}</div>
-        </section>
+      <div class="max-w-sm space-y-2">
+        <Input v-model="value" placeholder="Enter your name..." />
+        <div class="text-sm text-muted-foreground">Value: {{ value }}</div>
+      </div>
+    `,
+  }),
+}
 
-        <!-- With Prefix Icon -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">With Prefix Icon</h3>
-          <Input v-model="withPrefix" placeholder="Search...">
-            <template #prefix>
-              <Icon name="search" />
-            </template>
-          </Input>
-          <div class="mt-2 text-sm text-muted-foreground">Value: {{ withPrefix }}</div>
-        </section>
+export const WithPrefix: Story = {
+  render: () => ({
+    components: { Input, Icon },
+    setup () {
+      const value = ref('')
+      return { value }
+    },
+    template: `
+      <div class="max-w-sm space-y-2">
+        <Input v-model="value" placeholder="Search...">
+          <template #prefix>
+            <Icon name="search" />
+          </template>
+        </Input>
+        <div class="text-sm text-muted-foreground">Value: {{ value }}</div>
+      </div>
+    `,
+  }),
+}
 
-        <!-- With Suffix Icon -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">With Suffix Icon</h3>
-          <Input v-model="withSuffix" placeholder="Email">
-            <template #suffix>
-              <Icon name="mail" />
-            </template>
-          </Input>
-          <div class="mt-2 text-sm text-muted-foreground">Value: {{ withSuffix }}</div>
-        </section>
+export const WithSuffix: Story = {
+  render: () => ({
+    components: { Input, Icon },
+    setup () {
+      const value = ref('')
+      return { value }
+    },
+    template: `
+      <div class="max-w-sm space-y-2">
+        <Input v-model="value" placeholder="Email">
+          <template #suffix>
+            <Icon name="mail" />
+          </template>
+        </Input>
+        <div class="text-sm text-muted-foreground">Value: {{ value }}</div>
+      </div>
+    `,
+  }),
+}
 
-        <!-- Password -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Password</h3>
-          <Input v-model="password" type="password" placeholder="Password" />
-          <div class="mt-2 text-sm text-muted-foreground">Value: {{ password }}</div>
-        </section>
+export const Password: Story = {
+  render: () => ({
+    components: { Input },
+    setup () {
+      const value = ref('')
+      return { value }
+    },
+    template: `
+      <div class="max-w-sm space-y-2">
+        <Input v-model="value" type="password" placeholder="Password" />
+        <div class="text-sm text-muted-foreground">Value: {{ value }}</div>
       </div>
     `,
   }),
 }
+
+export const Disabled: Story = {
+  render: () => ({
+    components: { Input },
+    template: '<Input disabled placeholder="Disabled input" class="max-w-sm" />',
+  }),
+}
+
+export const Readonly: Story = {
+  render: () => ({
+    components: { Input },
+    template: '<Input readonly modelValue="Read-only value" class="max-w-sm" />',
+  }),
+}
+
+export const Invalid: Story = {
+  render: () => ({
+    components: { Input },
+    template: '<Input invalid modelValue="Invalid value" class="max-w-sm" />',
+  }),
+}

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

@@ -4,7 +4,7 @@ import {
   InputGroupAddon,
   InputGroupButton,
   InputGroupInput,
-} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/input-group'
+} from '../../shadcn/input-group'
 import type { InputProps } from './types'
 
 defineOptions({ inheritAttrs: false })