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

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

@@ -5,30 +5,94 @@ const meta = {
   title: 'UI/Textarea',
   component: Textarea,
   argTypes: {
+    modelValue: { control: 'text' },
+    autocomplete: { control: 'text' },
+    rows: { control: 'number' },
+    invalid: { control: 'boolean' },
+    class: { control: 'text' },
     disabled: { control: 'boolean' },
     readonly: { control: 'boolean' },
-    invalid: { control: 'boolean' },
   },
   args: {
+    modelValue: '',
+    autocomplete: '',
+    rows: undefined,
+    invalid: false,
+    class: '',
     disabled: false,
     readonly: false,
-    invalid: false,
   },
+  render: args => ({
+    components: { Textarea },
+    setup: () => ({ args }),
+    template: `
+      <div class="max-w-sm">
+        <Textarea v-bind="args" placeholder="Type your message here..." />
+      </div>
+    `,
+  }),
 } satisfies Meta
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  render: args => ({
+export const Default: Story = {}
+
+export const Controlled: Story = {
+  render: () => ({
+    components: { Textarea },
+    setup () {
+      const value = ref('')
+      return { value }
+    },
+    template: `
+      <div class="max-w-sm space-y-2">
+        <Textarea v-model="value" placeholder="Type your message here..." />
+        <div class="text-sm text-muted-foreground">Value: {{ value }}</div>
+      </div>
+    `,
+  }),
+}
+
+export const WithRows: Story = {
+  render: () => ({
+    components: { Textarea },
+    template: `
+      <div class="max-w-sm">
+        <Textarea :rows="6" placeholder="6 rows of height" />
+      </div>
+    `,
+  }),
+}
+
+export const Invalid: Story = {
+  render: () => ({
+    components: { Textarea },
+    template: `
+      <div class="max-w-sm">
+        <Textarea invalid model-value="Invalid content" />
+      </div>
+    `,
+  }),
+}
+
+export const Disabled: Story = {
+  render: () => ({
+    components: { Textarea },
+    template: `
+      <div class="max-w-sm">
+        <Textarea disabled model-value="Disabled textarea" />
+      </div>
+    `,
+  }),
+}
+
+export const Readonly: Story = {
+  render: () => ({
     components: { Textarea },
-    setup: () => ({ args }),
     template: `
       <div class="max-w-sm">
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
-          <Textarea v-bind="args" placeholder="Type your message here..." />
-        </section>
+        <Textarea readonly model-value="Readonly content" />
       </div>
     `,
   }),

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Textarea as ShadcnTextarea } from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/textarea'
+import { Textarea as ShadcnTextarea } from '../../shadcn/textarea'
 import type { TextareaProps } from './types'
 
 defineOptions({ inheritAttrs: false })

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

@@ -3,15 +3,38 @@ import { toast } from 'vue-sonner'
 import Button from '../Button/index.vue'
 import Toast from './index.vue'
 
+const positions = [ 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center' ] as const
+
 const meta = {
   title: 'UI/Toast',
   component: Toast,
+  argTypes: {
+    position: { control: 'select', options: positions },
+  },
+  args: {
+    position: 'bottom-right',
+  },
+  render: args => ({
+    components: { Toast, Button },
+    setup () {
+      const show = () => toast('This is a toast')
+      return { args, show }
+    },
+    template: `
+      <div class="space-y-4">
+        <Toast v-bind="args" />
+        <Button variant="outline" @click="show">Show Toast</Button>
+      </div>
+    `,
+  }),
 } satisfies Meta<typeof Toast>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Default: Story = {}
+
+export const Types: Story = {
   render: () => ({
     components: { Toast, Button },
     setup () {
@@ -20,28 +43,58 @@ export const Default: Story = {
       const showError = () => toast.error('Something went wrong')
       const showInfo = () => toast.info('Here is some information')
       const showWarning = () => toast.warning('Please be careful')
-      const showWithDescription = () => toast('Event created', { description: 'Your event has been scheduled for tomorrow at 3:00 PM.' })
-      return { showDefault, showSuccess, showError, showInfo, showWarning, showWithDescription }
+      return { showDefault, showSuccess, showError, showInfo, showWarning }
     },
     template: `
-      <div class="space-y-10">
+      <div>
         <Toast position="bottom-right" />
+        <div class="flex flex-wrap gap-3">
+          <Button variant="outline" @click="showDefault">Default</Button>
+          <Button variant="outline" @click="showSuccess">Success</Button>
+          <Button variant="outline" @click="showError">Error</Button>
+          <Button variant="outline" @click="showInfo">Info</Button>
+          <Button variant="outline" @click="showWarning">Warning</Button>
+        </div>
+      </div>
+    `,
+  }),
+}
 
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Toast Types</h3>
-          <div class="flex flex-wrap gap-3">
-            <Button variant="outline" @click="showDefault">Default</Button>
-            <Button variant="outline" @click="showSuccess">Success</Button>
-            <Button variant="outline" @click="showError">Error</Button>
-            <Button variant="outline" @click="showInfo">Info</Button>
-            <Button variant="outline" @click="showWarning">Warning</Button>
-          </div>
-        </section>
+export const WithDescription: Story = {
+  render: () => ({
+    components: { Toast, Button },
+    setup () {
+      const show = () => toast('Event created', {
+        description: 'Your event has been scheduled for tomorrow at 3:00 PM.',
+      })
+      return { show }
+    },
+    template: `
+      <div>
+        <Toast position="bottom-right" />
+        <Button variant="outline" @click="show">Show Toast with Description</Button>
+      </div>
+    `,
+  }),
+}
 
-        <section>
-          <h3 class="mb-4 text-lg font-medium">With Description</h3>
-          <Button variant="outline" @click="showWithDescription">Show Toast with Description</Button>
-        </section>
+export const Positions: Story = {
+  render: () => ({
+    components: { Toast, Button },
+    setup () {
+      const current = ref<typeof positions[number]>('bottom-right')
+      const show = (pos: typeof positions[number]) => {
+        current.value = pos
+        nextTick(() => toast(`Toast at ${pos}`))
+      }
+      return { positions, current, show }
+    },
+    template: `
+      <div>
+        <Toast :position="current" />
+        <div class="flex flex-wrap gap-3">
+          <Button v-for="p in positions" :key="p" variant="outline" @click="show(p)">{{ p }}</Button>
+        </div>
       </div>
     `,
   }),

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Toaster as ShadcnSonner } from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/sonner'
+import { Toaster as ShadcnSonner } from '../../shadcn/sonner'
 import 'vue-sonner/style.css'
 import type { ToastProps } from './types'
 

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

@@ -2,61 +2,68 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import Button from '../Button/index.vue'
 import Tooltip from './index.vue'
 
+const positions = [ 'top', 'bottom', 'left', 'right' ] as const
+
 const meta = {
   title: 'UI/Tooltip',
   component: Tooltip,
   argTypes: {
+    text: { control: 'text' },
+    position: { control: 'select', options: positions },
     disabled: { control: 'boolean' },
+    disableClosingTrigger: { control: 'boolean' },
   },
   args: {
+    text: 'This is a tooltip',
+    position: 'top',
     disabled: false,
+    disableClosingTrigger: false,
   },
+  render: args => ({
+    components: { Tooltip, Button },
+    setup: () => ({ args }),
+    template: `
+      <Tooltip v-bind="args">
+        <Button variant="outline">Hover me</Button>
+      </Tooltip>
+    `,
+  }),
 } satisfies Meta<typeof Tooltip>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  render: args => ({
+export const Default: Story = {}
+
+export const Positions: Story = {
+  render: () => ({
     components: { Tooltip, Button },
-    setup: () => ({ args }),
     template: `
-      <div class="space-y-10">
-        <!-- Controlled -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
-          <Tooltip text="This is a tooltip" v-bind="args">
-            <Button variant="outline">Hover me</Button>
-          </Tooltip>
-        </section>
-
-        <!-- Positions -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Positions</h3>
-          <div class="flex flex-wrap items-center gap-4 py-10 justify-center">
-            <Tooltip text="Top tooltip" position="top">
-              <Button variant="outline">Top</Button>
-            </Tooltip>
-            <Tooltip text="Bottom tooltip" position="bottom">
-              <Button variant="outline">Bottom</Button>
-            </Tooltip>
-            <Tooltip text="Left tooltip" position="left">
-              <Button variant="outline">Left</Button>
-            </Tooltip>
-            <Tooltip text="Right tooltip" position="right">
-              <Button variant="outline">Right</Button>
-            </Tooltip>
-          </div>
-        </section>
-
-        <!-- Long Text -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Long Text</h3>
-          <Tooltip text="This is a longer tooltip message that demonstrates how the tooltip handles multi-line content and wraps properly within its container.">
-            <Button variant="outline">Long Tooltip</Button>
-          </Tooltip>
-        </section>
+      <div class="flex flex-wrap items-center gap-4 py-10 justify-center">
+        <Tooltip text="Top tooltip" position="top">
+          <Button variant="outline">Top</Button>
+        </Tooltip>
+        <Tooltip text="Bottom tooltip" position="bottom">
+          <Button variant="outline">Bottom</Button>
+        </Tooltip>
+        <Tooltip text="Left tooltip" position="left">
+          <Button variant="outline">Left</Button>
+        </Tooltip>
+        <Tooltip text="Right tooltip" position="right">
+          <Button variant="outline">Right</Button>
+        </Tooltip>
       </div>
     `,
   }),
 }
+
+export const LongText: Story = {
+  render: () => ({
+    components: { Tooltip, Button },
+    template: `
+      <Tooltip text="This is a longer tooltip message that demonstrates how the tooltip handles multi-line content and wraps properly within its container.">
+        <Button variant="outline">Long Tooltip</Button>
+      </Tooltip>
+    `,
+  }),
+}

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

@@ -4,7 +4,7 @@ import {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/tooltip'
+} from '../../shadcn/tooltip'
 import type { TooltipProps } from './types'
 
 const props = withDefaults(defineProps<TooltipProps>(), {

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

@@ -1,59 +1,94 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import WebLink from './index.vue'
 
+const targets = [ '_self', '_blank', '_parent', '_top' ] as const
+
 const meta = {
   title: 'UI/WebLink',
   component: WebLink,
+  argTypes: {
+    href: { control: 'text' },
+    to: { control: 'object' },
+    target: { control: 'select', options: targets },
+    unstyled: { control: 'boolean' },
+    externalIcon: { control: 'boolean' },
+    class: { control: 'text' },
+  },
+  args: {
+    href: 'https://example.com',
+    to: undefined,
+    target: undefined,
+    unstyled: false,
+    externalIcon: true,
+    class: '',
+  },
+  render: args => ({
+    components: { WebLink },
+    setup: () => ({ args }),
+    template: `
+      <WebLink v-bind="args">Visit Example.com</WebLink>
+    `,
+  }),
 } satisfies Meta<typeof WebLink>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Default: Story = {}
+
+export const ExternalLink: Story = {
   render: () => ({
     components: { WebLink },
     template: `
-      <div class="space-y-10">
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Internal Link</h3>
-          <WebLink href="/dashboard">Go to Dashboard</WebLink>
-        </section>
-
-        <section>
-          <h3 class="mb-4 text-lg font-medium">External Link</h3>
-          <WebLink href="https://example.com">Visit Example.com</WebLink>
-          <p class="mt-1 text-sm text-muted-foreground">External links automatically open in a new tab and show a trailing icon.</p>
-        </section>
-
-        <section>
-          <h3 class="mb-4 text-lg font-medium">External Link without Icon</h3>
-          <WebLink href="https://example.com" :externalIcon="false">No trailing icon</WebLink>
-        </section>
-
-        <section>
-          <h3 class="mb-4 text-lg font-medium">With Explicit Target</h3>
-          <WebLink href="https://example.com" target="_self">Same Tab External Link</WebLink>
-        </section>
-
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Unstyled</h3>
-          <div class="flex flex-col gap-2">
-            <WebLink href="/settings" unstyled>Unstyled internal link (no color or underline)</WebLink>
-            <WebLink href="https://example.com" unstyled>Unstyled external link (icon still shows)</WebLink>
-          </div>
-        </section>
-
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Inline Usage</h3>
-          <p class="text-sm">
-            Please read our
-            <WebLink href="https://example.com/terms">Terms of Service</WebLink>
-            and
-            <WebLink href="https://example.com/privacy">Privacy Policy</WebLink>
-            before continuing.
-          </p>
-        </section>
+      <div>
+        <WebLink href="https://example.com">Visit Example.com</WebLink>
+        <p class="mt-1 text-sm text-muted-foreground">External links automatically open in a new tab and show a trailing icon.</p>
       </div>
     `,
   }),
 }
+
+export const ExternalWithoutIcon: Story = {
+  render: () => ({
+    components: { WebLink },
+    template: `
+      <WebLink href="https://example.com" :externalIcon="false">No trailing icon</WebLink>
+    `,
+  }),
+}
+
+export const WithExplicitTarget: Story = {
+  render: () => ({
+    components: { WebLink },
+    template: `
+      <WebLink href="https://example.com" target="_self">Same Tab External Link</WebLink>
+    `,
+  }),
+}
+
+export const Unstyled: Story = {
+  render: () => ({
+    components: { WebLink },
+    template: `
+      <div class="flex flex-col gap-2">
+        <WebLink href="/settings" unstyled>Unstyled internal link (no color or underline)</WebLink>
+        <WebLink href="https://example.com" unstyled>Unstyled external link (icon still shows)</WebLink>
+      </div>
+    `,
+  }),
+}
+
+export const InlineUsage: Story = {
+  render: () => ({
+    components: { WebLink },
+    template: `
+      <p class="text-sm">
+        Please read our
+        <WebLink href="https://example.com/terms">Terms of Service</WebLink>
+        and
+        <WebLink href="https://example.com/privacy">Privacy Policy</WebLink>
+        before continuing.
+      </p>
+    `,
+  }),
+}

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

@@ -6,7 +6,7 @@ const props = withDefaults(defineProps<WebLinkProps>(), {
   href: undefined,
   to: undefined,
   target: undefined,
-  externalIcon: true,
+  externalIcon: false,
   class: undefined,
 })
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polymarbot/nuxt-layer-shadcn-ui",
-  "version": "0.1.9",
+  "version": "0.2.0w",
   "description": "Nuxt layer providing shadcn-vue based UI components",
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -42,5 +42,5 @@
     "vue-i18n": "^11",
     "vue-router": "^4 || ^5"
   },
-  "gitHead": "2330486301c717cc44e2d04a2eaf57a600da77fc"
+  "gitHead": "5833c3657a24919d861e91dac1b19afe3ad84ccf"
 }

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

@@ -1,71 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import { RadioGroup } from '../../shadcn/radio-group'
-import Radio from './index.vue'
-
-const meta = {
-  title: 'UI/Radio',
-  component: Radio,
-  argTypes: {
-    disabled: { control: 'boolean' },
-  },
-  args: {
-    disabled: false,
-  },
-} satisfies Meta<typeof Radio>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  render: args => ({
-    components: { RadioGroup, Radio },
-    setup () {
-      const selected = ref('option1')
-      const plan = ref('free')
-      return { args, selected, plan }
-    },
-    template: `
-      <div class="space-y-10">
-        <!-- Controlled -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
-          <RadioGroup v-model="selected" :disabled="args.disabled" class="flex flex-col gap-3">
-            <label class="flex items-center gap-2 cursor-pointer">
-              <Radio value="option1" />
-              <span class="text-sm">Option 1</span>
-            </label>
-            <label class="flex items-center gap-2 cursor-pointer">
-              <Radio value="option2" />
-              <span class="text-sm">Option 2</span>
-            </label>
-            <label class="flex items-center gap-2 cursor-pointer">
-              <Radio value="option3" />
-              <span class="text-sm">Option 3</span>
-            </label>
-          </RadioGroup>
-          <div class="mt-2 text-sm text-muted-foreground">Selected: {{ selected }}</div>
-        </section>
-
-        <!-- Plan Selection -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Plan Selection</h3>
-          <RadioGroup v-model="plan" class="flex flex-col gap-3">
-            <label class="flex items-center gap-2 cursor-pointer">
-              <Radio value="free" />
-              <span class="text-sm">Free - $0/month</span>
-            </label>
-            <label class="flex items-center gap-2 cursor-pointer">
-              <Radio value="pro" />
-              <span class="text-sm">Pro - $9/month</span>
-            </label>
-            <label class="flex items-center gap-2 cursor-pointer">
-              <Radio value="enterprise" />
-              <span class="text-sm">Enterprise - $29/month</span>
-            </label>
-          </RadioGroup>
-          <div class="mt-2 text-sm text-muted-foreground">Plan: {{ plan }}</div>
-        </section>
-      </div>
-    `,
-  }),
-}

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

@@ -1,10 +0,0 @@
-<script setup lang="ts">
-import { RadioGroupItem } from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/radio-group'
-import type { RadioProps } from './types'
-
-defineProps<RadioProps>()
-</script>
-
-<template>
-  <RadioGroupItem />
-</template>

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

@@ -1,3 +0,0 @@
-import type { RadioGroupItemProps } from 'reka-ui'
-
-export interface RadioProps extends /* @vue-ignore */ RadioGroupItemProps {}