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

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

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

@@ -1,74 +1,114 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import InputCurrency from './index.vue'
 
+const currencyDisplays = [ 'symbol', 'narrowSymbol', 'code', 'name' ] as const
+
 const meta = {
   title: 'UI/InputCurrency',
   component: InputCurrency,
   argTypes: {
-    disabled: { control: 'boolean' },
+    currency: { control: 'text' },
+    currencyDisplay: { control: 'select', options: currencyDisplays },
   },
   args: {
-    disabled: false,
+    currency: 'JPY',
+    currencyDisplay: 'symbol',
   },
-} satisfies Meta
+  render: args => ({
+    components: { InputCurrency },
+    setup () {
+      const value = ref(1000)
+      return { args, value }
+    },
+    template: `
+      <div class="max-w-xs">
+        <InputCurrency v-model="value" v-bind="args" />
+        <div class="mt-2 text-sm text-muted-foreground">Value: {{ value }}</div>
+      </div>
+    `,
+  }),
+} satisfies Meta<typeof InputCurrency>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  render: args => ({
+export const Default: Story = {}
+
+export const UsdSymbol: Story = {
+  render: () => ({
     components: { InputCurrency },
     setup () {
-      const jpy = ref(1000)
-      const usd = ref(49.99)
-      const eurCode = ref(29.99)
-      const cadSymbol = ref(79.99)
-      const cadNarrow = ref(79.99)
-      const jpyName = ref(5000)
-      return { args, jpy, usd, eurCode, cadSymbol, cadNarrow, jpyName }
+      const value = ref(49.99)
+      return { value }
     },
     template: `
-      <div class="space-y-10 max-w-xs">
-        <!-- Controlled -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
-          <InputCurrency v-model="jpy" v-bind="args" />
-          <div class="mt-2 text-sm text-muted-foreground">Value: {{ jpy }}</div>
-        </section>
-
-        <!-- USD (symbol) -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">USD (symbol)</h3>
-          <InputCurrency v-model="usd" currency="USD" />
-          <div class="mt-2 text-sm text-muted-foreground">Value: {{ usd }}</div>
-        </section>
+      <div class="max-w-xs">
+        <InputCurrency v-model="value" currency="USD" />
+        <div class="mt-2 text-sm text-muted-foreground">Value: {{ value }}</div>
+      </div>
+    `,
+  }),
+}
 
-        <!-- EUR (code display) -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">EUR (code display)</h3>
-          <InputCurrency v-model="eurCode" currency="EUR" currencyDisplay="code" />
-          <div class="mt-2 text-sm text-muted-foreground">Value: {{ eurCode }}</div>
-        </section>
+export const EurCodeDisplay: Story = {
+  render: () => ({
+    components: { InputCurrency },
+    setup () {
+      const value = ref(29.99)
+      return { value }
+    },
+    template: `
+      <div class="max-w-xs">
+        <InputCurrency v-model="value" currency="EUR" currencyDisplay="code" />
+        <div class="mt-2 text-sm text-muted-foreground">Value: {{ value }}</div>
+      </div>
+    `,
+  }),
+}
 
-        <!-- CAD symbol vs narrowSymbol -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">CAD (symbol → CA$)</h3>
-          <InputCurrency v-model="cadSymbol" currency="CAD" currencyDisplay="symbol" />
-          <div class="mt-2 text-sm text-muted-foreground">Value: {{ cadSymbol }}</div>
-        </section>
+export const CadSymbol: Story = {
+  render: () => ({
+    components: { InputCurrency },
+    setup () {
+      const value = ref(79.99)
+      return { value }
+    },
+    template: `
+      <div class="max-w-xs">
+        <InputCurrency v-model="value" currency="CAD" currencyDisplay="symbol" />
+        <div class="mt-2 text-sm text-muted-foreground">Value: {{ value }}</div>
+      </div>
+    `,
+  }),
+}
 
-        <section>
-          <h3 class="mb-4 text-lg font-medium">CAD (narrowSymbol → $)</h3>
-          <InputCurrency v-model="cadNarrow" currency="CAD" currencyDisplay="narrowSymbol" />
-          <div class="mt-2 text-sm text-muted-foreground">Value: {{ cadNarrow }}</div>
-        </section>
+export const CadNarrowSymbol: Story = {
+  render: () => ({
+    components: { InputCurrency },
+    setup () {
+      const value = ref(79.99)
+      return { value }
+    },
+    template: `
+      <div class="max-w-xs">
+        <InputCurrency v-model="value" currency="CAD" currencyDisplay="narrowSymbol" />
+        <div class="mt-2 text-sm text-muted-foreground">Value: {{ value }}</div>
+      </div>
+    `,
+  }),
+}
 
-        <!-- JPY (name display) -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">JPY (name display)</h3>
-          <InputCurrency v-model="jpyName" currencyDisplay="name" />
-          <div class="mt-2 text-sm text-muted-foreground">Value: {{ jpyName }}</div>
-        </section>
+export const JpyNameDisplay: Story = {
+  render: () => ({
+    components: { InputCurrency },
+    setup () {
+      const value = ref(5000)
+      return { value }
+    },
+    template: `
+      <div class="max-w-xs">
+        <InputCurrency v-model="value" currencyDisplay="name" />
+        <div class="mt-2 text-sm text-muted-foreground">Value: {{ value }}</div>
       </div>
     `,
   }),

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

@@ -5,51 +5,115 @@ const meta = {
   title: 'UI/InputNumber',
   component: InputNumber,
   argTypes: {
+    min: { control: 'number' },
+    max: { control: 'number' },
+    step: { control: 'number' },
+    placeholder: { control: 'text' },
+    showButtons: { control: 'boolean' },
     disabled: { control: 'boolean' },
     invalid: { control: 'boolean' },
-    showButtons: { control: 'boolean' },
   },
   args: {
+    min: undefined,
+    max: undefined,
+    step: 1,
+    placeholder: '',
+    showButtons: true,
     disabled: false,
     invalid: false,
-    showButtons: true,
   },
+  render: args => ({
+    components: { InputNumber },
+    setup () {
+      const value = ref(0)
+      return { args, value }
+    },
+    template: `
+      <div class="max-w-xs">
+        <InputNumber v-model="value" v-bind="args" />
+        <div class="mt-2 text-sm text-muted-foreground">Value: {{ value }}</div>
+      </div>
+    `,
+  }),
 } satisfies Meta<typeof InputNumber>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  render: args => ({
+export const Default: Story = {}
+
+export const WithMinMax: Story = {
+  render: () => ({
+    components: { InputNumber },
+    setup () {
+      const value = ref(5)
+      return { value }
+    },
+    template: `
+      <div class="max-w-xs">
+        <InputNumber v-model="value" :min="0" :max="10" />
+        <div class="mt-2 text-sm text-muted-foreground">Value: {{ value }}</div>
+      </div>
+    `,
+  }),
+}
+
+export const CustomStep: Story = {
+  render: () => ({
+    components: { InputNumber },
+    setup () {
+      const value = ref(0)
+      return { value }
+    },
+    template: `
+      <div class="max-w-xs">
+        <InputNumber v-model="value" :step="5" />
+        <div class="mt-2 text-sm text-muted-foreground">Value: {{ value }}</div>
+      </div>
+    `,
+  }),
+}
+
+export const WithoutButtons: Story = {
+  render: () => ({
+    components: { InputNumber },
+    setup () {
+      const value = ref(0)
+      return { value }
+    },
+    template: `
+      <div class="max-w-xs">
+        <InputNumber v-model="value" :showButtons="false" />
+      </div>
+    `,
+  }),
+}
+
+export const Disabled: Story = {
+  render: () => ({
+    components: { InputNumber },
+    setup () {
+      const value = ref(0)
+      return { value }
+    },
+    template: `
+      <div class="max-w-xs">
+        <InputNumber v-model="value" disabled />
+      </div>
+    `,
+  }),
+}
+
+export const Invalid: Story = {
+  render: () => ({
     components: { InputNumber },
     setup () {
-      const basic = ref(0)
-      const minMax = ref(5)
-      const stepped = ref(0)
-      return { args, basic, minMax, stepped }
+      const value = ref(0)
+      return { value }
     },
     template: `
-      <div class="space-y-10 max-w-xs">
-        <!-- Controlled -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
-          <InputNumber v-model="basic" v-bind="args" />
-          <div class="mt-2 text-sm text-muted-foreground">Value: {{ basic }}</div>
-        </section>
-
-        <!-- With Min / Max -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">With Min / Max (0 - 10)</h3>
-          <InputNumber v-model="minMax" :min="0" :max="10" />
-          <div class="mt-2 text-sm text-muted-foreground">Value: {{ minMax }}</div>
-        </section>
-
-        <!-- Custom Step -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Custom Step (5)</h3>
-          <InputNumber v-model="stepped" :step="5" />
-          <div class="mt-2 text-sm text-muted-foreground">Value: {{ stepped }}</div>
-        </section>
+      <div class="max-w-xs">
+        <InputNumber v-model="value" invalid />
       </div>
     `,
   }),

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

@@ -5,7 +5,7 @@ import {
   NumberFieldDecrement,
   NumberFieldIncrement,
   NumberFieldInput,
-} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/number-field'
+} from '../../shadcn/number-field'
 import type { InputNumberProps } from './types'
 
 const props = withDefaults(defineProps<InputNumberProps>(), {

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

@@ -12,12 +12,6 @@ const meta = {
     disabled: false,
     length: 6,
   },
-} satisfies Meta<typeof InputOtp>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
   render: args => ({
     components: { InputOtp },
     setup () {
@@ -36,4 +30,9 @@ export const Default: Story = {
       </div>
     `,
   }),
-}
+} satisfies Meta<typeof InputOtp>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}

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

@@ -3,7 +3,7 @@ import {
   PinInput,
   PinInputGroup,
   PinInputSlot,
-} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/pin-input'
+} from '../../shadcn/pin-input'
 import type { InputOtpProps } from './types'
 
 withDefaults(defineProps<InputOtpProps>(), {

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

@@ -10,12 +10,6 @@ const meta = {
   args: {
     disabled: false,
   },
-} satisfies Meta
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
   render: args => ({
     components: { InputPercent },
     setup () {
@@ -29,4 +23,9 @@ export const Default: Story = {
       </div>
     `,
   }),
-}
+} satisfies Meta
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}