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

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 = {}

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

@@ -14,12 +14,6 @@ const meta = {
     min: 0,
     max: 100,
   },
-} satisfies Meta<typeof InputRange>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
   render: args => ({
     components: { InputRange },
     setup () {
@@ -34,4 +28,9 @@ export const Default: Story = {
       </div>
     `,
   }),
-}
+} satisfies Meta<typeof InputRange>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}

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

@@ -4,32 +4,32 @@ import Loading from './index.vue'
 const meta = {
   title: 'UI/Loading',
   component: Loading,
+  argTypes: {
+    class: { control: 'text' },
+  },
+  args: {
+    class: '',
+  },
+  render: args => ({
+    components: { Loading },
+    setup: () => ({ args }),
+    template: '<Loading :class="args.class" />',
+  }),
 } satisfies Meta<typeof Loading>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  render: args => ({
+export const Default: Story = {}
+
+export const CustomSize: Story = {
+  render: () => ({
     components: { Loading },
-    setup: () => ({ args }),
     template: `
-      <div class="space-y-10">
-        <!-- Default -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Default</h3>
-          <Loading />
-        </section>
-
-        <!-- Custom Size -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Custom Size</h3>
-          <div class="flex items-end gap-6">
-            <Loading class="size-6" />
-            <Loading class="size-10" />
-            <Loading class="size-16" />
-          </div>
-        </section>
+      <div class="flex items-end gap-6">
+        <Loading class="size-6" />
+        <Loading class="size-10" />
+        <Loading class="size-16" />
       </div>
     `,
   }),

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

@@ -10,17 +10,9 @@ const meta = {
   args: {
     hideTitle: false,
   },
-} satisfies Meta<typeof Markdown>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
   render: args => ({
     components: { Markdown },
-    setup () {
-      return { args }
-    },
+    setup: () => ({ args }),
     template: `
       <Markdown v-bind="args">
         <h1>Document Title</h1>
@@ -49,4 +41,9 @@ console.log(greeting)</code></pre>
       </Markdown>
     `,
   }),
-}
+} satisfies Meta<typeof Markdown>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}