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

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

@@ -1,55 +1,113 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import CopyButton from './index.vue'
 
+const variants = [ 'default', 'destructive', 'outline', 'secondary', 'ghost', 'link' ] as const
+const sizes = [ 'sm', 'default', 'lg', 'icon-sm', 'icon', 'icon-lg' ] as const
+
 const meta = {
   title: 'UI/CopyButton',
   component: CopyButton,
   argTypes: {
     copy: { control: 'text' },
-    variant: { control: 'select', options: [ 'default', 'destructive', 'outline', 'secondary', 'ghost' ]},
-    size: { control: 'select', options: [ 'default', 'sm', 'lg', 'icon' ]},
+    beforeCopyText: { control: 'text' },
+    afterCopyText: { control: 'text' },
+    variant: { control: 'select', options: variants },
+    size: { control: 'select', options: sizes },
+    rounded: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    loading: { control: 'boolean' },
   },
   args: {
     copy: 'Hello, World!',
+    beforeCopyText: '',
+    afterCopyText: '',
     variant: 'outline',
+    size: 'default',
+    rounded: false,
+    disabled: false,
+    loading: false,
   },
+  render: args => ({
+    components: { CopyButton },
+    setup: () => ({ args }),
+    template: '<CopyButton v-bind="args">Copy Text</CopyButton>',
+  }),
 } satisfies Meta<typeof CopyButton>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  render: args => ({
+export const Default: Story = {}
+
+export const IconOnly: Story = {
+  render: () => ({
+    components: { CopyButton },
+    template: `
+      <div class="flex items-center gap-4">
+        <CopyButton copy="Hello, World!" variant="outline" />
+        <CopyButton copy="Hello, World!" variant="ghost" />
+        <CopyButton copy="Hello, World!" variant="secondary" />
+      </div>
+    `,
+  }),
+}
+
+export const WithLabel: Story = {
+  render: () => ({
     components: { CopyButton },
-    setup: () => ({ args }),
     template: `
-      <div class="space-y-10">
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Icon Only (default)</h3>
-          <div class="flex items-center gap-4">
-            <CopyButton v-bind="args" />
-            <CopyButton v-bind="args" variant="ghost" />
-            <CopyButton v-bind="args" variant="secondary" />
-          </div>
-        </section>
-
-        <section>
-          <h3 class="mb-4 text-lg font-medium">With Label</h3>
-          <div class="flex items-center gap-4">
-            <CopyButton v-bind="args">Copy Text</CopyButton>
-            <CopyButton v-bind="args" variant="secondary">Copy Address</CopyButton>
-          </div>
-        </section>
-
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Sizes</h3>
-          <div class="flex items-center gap-4">
-            <CopyButton v-bind="args" size="sm">Small</CopyButton>
-            <CopyButton v-bind="args" size="default">Default</CopyButton>
-            <CopyButton v-bind="args" size="lg">Large</CopyButton>
-          </div>
-        </section>
+      <div class="flex items-center gap-4">
+        <CopyButton copy="Hello, World!" variant="outline">Copy Text</CopyButton>
+        <CopyButton copy="123 Main St" variant="secondary">Copy Address</CopyButton>
       </div>
     `,
   }),
 }
+
+export const Variants: Story = {
+  render: () => ({
+    components: { CopyButton },
+    setup: () => ({ variants }),
+    template: `
+      <div class="flex flex-wrap items-center gap-3">
+        <CopyButton
+          v-for="v in variants"
+          :key="v"
+          :variant="v"
+          copy="Hello, World!"
+        >
+          {{ v }}
+        </CopyButton>
+      </div>
+    `,
+  }),
+}
+
+export const Sizes: Story = {
+  render: () => ({
+    components: { CopyButton },
+    template: `
+      <div class="flex items-center gap-4">
+        <CopyButton copy="Hello, World!" variant="outline" size="sm">Small</CopyButton>
+        <CopyButton copy="Hello, World!" variant="outline" size="default">Default</CopyButton>
+        <CopyButton copy="Hello, World!" variant="outline" size="lg">Large</CopyButton>
+      </div>
+    `,
+  }),
+}
+
+export const CustomTooltipText: Story = {
+  render: () => ({
+    components: { CopyButton },
+    template: `
+      <CopyButton
+        copy="secret-token-123"
+        before-copy-text="Click to copy token"
+        after-copy-text="Token copied!"
+        variant="outline"
+      >
+        Copy Token
+      </CopyButton>
+    `,
+  }),
+}

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

@@ -1,9 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import type { DataTableColumn } from './types'
-import DataTableRaw from './index.vue'
-
-// Cast generic component for Storybook compatibility
-const DataTable = DataTableRaw as any
+import DataTable from './index.vue'
 
 interface User {
   id: number
@@ -30,37 +27,122 @@ const basicColumns: DataTableColumn[] = [
   { field: 'status', title: 'Status', width: '100px' },
 ]
 
+const sortableColumns: DataTableColumn[] = [
+  { field: 'name', title: 'Name', width: '120px', sortable: true },
+  { field: 'email', title: 'Email', minWidth: '200px' },
+  { field: 'role', title: 'Role', width: '100px', sortable: true },
+  { field: 'amount', title: 'Amount', width: '120px', type: 'currency', sortable: true },
+  { field: 'createdAt', title: 'Created', width: '140px', type: 'date', sortable: true },
+]
+
+const typeColumns: DataTableColumn[] = [
+  { field: 'name', title: 'Name', width: '120px' },
+  { field: 'amount', title: 'Amount', width: '120px', type: 'currency' },
+  { field: 'createdAt', title: 'Date', width: '140px', type: 'date' },
+  { field: 'status', title: 'Empty', width: '100px', type: 'empty' },
+]
+
+const slotColumns: DataTableColumn[] = [
+  { field: 'name', title: 'Name', width: '120px' },
+  { field: 'email', title: 'Email', minWidth: '200px' },
+  { field: 'status', title: 'Status', width: '120px' },
+  { field: 'amount', title: 'Amount', width: '120px' },
+]
+
+const frozenColumns: DataTableColumn[] = [
+  { field: 'name', title: 'Name', width: '120px', fixed: 'left' },
+  { field: 'email', title: 'Email', width: '250px', fixed: 'left' },
+  { field: 'role', title: 'Role', width: '150px' },
+  { field: 'status', title: 'Status', width: '150px' },
+  { field: 'amount', title: 'Amount', width: '150px' },
+  { field: 'createdAt', title: 'Created', width: '180px', type: 'date' },
+  { field: 'id', title: 'Actions', width: '100px', fixed: 'right' },
+]
+
 const meta = {
   title: 'UI/DataTable',
-  component: DataTable,
+  component: DataTable as any,
   argTypes: {
+    selectionMode: { control: 'select', options: [ undefined, 'single', 'multiple' ]},
     loading: { control: 'boolean' },
+    sortBy: { control: 'text' },
+    sortOrder: { control: 'select', options: [ null, 1, -1 ]},
   },
   args: {
+    selectionMode: undefined,
     loading: false,
+    sortBy: null,
+    sortOrder: null,
   },
+  render: args => ({
+    components: { DataTable: DataTable as any },
+    setup: () => ({ args, data: sampleData, basicColumns }),
+    template: `
+      <div class="w-full">
+        <DataTable :data="data" :columns="basicColumns" v-bind="args" />
+      </div>
+    `,
+  }),
 } satisfies Meta
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  render: args => ({
-    components: { DataTable },
+export const Default: Story = {}
+
+export const SingleSelection: Story = {
+  render: () => ({
+    components: { DataTable: DataTable as any },
+    setup () {
+      const selection = ref<User | null>(null)
+      return { data: sampleData, basicColumns, selection }
+    },
+    template: `
+      <div class="w-full">
+        <DataTable
+          :data="data"
+          :columns="basicColumns"
+          selectionMode="single"
+          v-model:selection="selection"
+        />
+        <div class="mt-2 text-sm text-muted-foreground">
+          Selected: {{ selection?.name ?? 'none' }}
+        </div>
+      </div>
+    `,
+  }),
+}
+
+export const MultipleSelection: Story = {
+  render: () => ({
+    components: { DataTable: DataTable as any },
+    setup () {
+      const selection = ref<User[]>([])
+      return { data: sampleData, basicColumns, selection }
+    },
+    template: `
+      <div class="w-full">
+        <DataTable
+          :data="data"
+          :columns="basicColumns"
+          selectionMode="multiple"
+          v-model:selection="selection"
+        />
+        <div class="mt-2 text-sm text-muted-foreground">
+          Selected: {{ selection.length > 0 ? selection.map(r => r.name).join(', ') : 'none' }}
+        </div>
+      </div>
+    `,
+  }),
+}
+
+export const Sortable: Story = {
+  render: () => ({
+    components: { DataTable: DataTable as any },
     setup () {
-      const singleSelection = ref(null)
-      const multipleSelection = ref([])
       const sortBy = ref<string | null>(null)
       const sortOrder = ref<number | null>(null)
 
-      const sortableColumns: DataTableColumn[] = [
-        { field: 'name', title: 'Name', width: '120px', sortable: true },
-        { field: 'email', title: 'Email', minWidth: '200px' },
-        { field: 'role', title: 'Role', width: '100px', sortable: true },
-        { field: 'amount', title: 'Amount', width: '120px', type: 'currency', sortable: true },
-        { field: 'createdAt', title: 'Created', width: '140px', type: 'date', sortable: true },
-      ]
-
       const sortedData = computed(() => {
         if (!sortBy.value || !sortOrder.value) return sampleData
         return [ ...sampleData ].sort((a, b) => {
@@ -72,159 +154,127 @@ export const Default: Story = {
         })
       })
 
-      const typeColumns: DataTableColumn[] = [
-        { field: 'name', title: 'Name', width: '120px' },
-        { field: 'amount', title: 'Amount', width: '120px', type: 'currency' },
-        { field: 'createdAt', title: 'Date', width: '140px', type: 'date' },
-        { field: 'status', title: 'Empty', width: '100px', type: 'empty' },
-      ]
-
-      const slotColumns: DataTableColumn[] = [
-        { field: 'name', title: 'Name', width: '120px' },
-        { field: 'email', title: 'Email', minWidth: '200px' },
-        { field: 'status', title: 'Status', width: '120px' },
-        { field: 'amount', title: 'Amount', width: '120px' },
-      ]
-
-      const frozenColumns: DataTableColumn[] = [
-        { field: 'name', title: 'Name', width: '120px', fixed: 'left' },
-        { field: 'email', title: 'Email', width: '250px', fixed: 'left' },
-        { field: 'role', title: 'Role', width: '150px' },
-        { field: 'status', title: 'Status', width: '150px' },
-        { field: 'amount', title: 'Amount', width: '150px', type: 'currency' },
-        { field: 'createdAt', title: 'Created', width: '180px', type: 'date' },
-        { field: 'id', title: 'Actions', width: '100px', fixed: 'right' },
-      ]
-
-      return {
-        args,
-        data: sampleData,
-        basicColumns,
-        sortableColumns,
-        typeColumns,
-        slotColumns,
-        frozenColumns,
-        singleSelection,
-        multipleSelection,
-        sortBy,
-        sortOrder,
-        sortedData,
-      }
+      return { sortableColumns, sortBy, sortOrder, sortedData }
     },
     template: `
-      <div class="w-full space-y-10">
-        <!-- Controlled -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
-          <DataTable :data="data" :columns="basicColumns" v-bind="args" />
-        </section>
-
-        <!-- Single Selection -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Single Selection</h3>
-          <DataTable
-            :data="data"
-            :columns="basicColumns"
-            selectionMode="single"
-            v-model:selection="singleSelection"
-          />
-          <div class="mt-2 text-sm text-muted-foreground">
-            Selected: {{ singleSelection?.name ?? 'none' }}
-          </div>
-        </section>
-
-        <!-- Multiple Selection -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Multiple Selection</h3>
-          <DataTable
-            :data="data"
-            :columns="basicColumns"
-            selectionMode="multiple"
-            v-model:selection="multipleSelection"
-          />
-          <div class="mt-2 text-sm text-muted-foreground">
-            Selected: {{ multipleSelection.length > 0 ? multipleSelection.map(r => r.name).join(', ') : 'none' }}
-          </div>
-        </section>
-
-        <!-- Sortable -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Sortable Columns</h3>
-          <DataTable
-            :data="sortedData"
-            :columns="sortableColumns"
-            v-model:sortBy="sortBy"
-            v-model:sortOrder="sortOrder"
-          />
-          <div class="mt-2 text-sm text-muted-foreground">
-            Sort: {{ sortBy ?? 'none' }} / {{ sortOrder ?? 'none' }}
-          </div>
-        </section>
-
-        <!-- Column Types -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Column Types (text, currency, date, empty)</h3>
-          <DataTable :data="data" :columns="typeColumns" />
-        </section>
-
-        <!-- Custom Slots -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Custom Cell Slots</h3>
-          <DataTable :data="data" :columns="slotColumns">
-            <template #status="{ value }">
-              <span
-                :class="[
-                  'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
-                  value === 'active'
-                    ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
-                    : 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200',
-                ]"
-              >
-                {{ value }}
-              </span>
-            </template>
-            <template #amount="{ value }">
-              <span class="font-mono font-medium">\${{ Number(value).toFixed(2) }}</span>
-            </template>
-          </DataTable>
-        </section>
-
-        <!-- Empty State -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Empty State</h3>
-          <DataTable :data="[]" :columns="basicColumns" />
-        </section>
-
-        <!-- Footer Slot -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Footer Slot</h3>
-          <DataTable :data="data" :columns="slotColumns">
-            <template #footer>
-              <tr class="h-12 border-t text-sm font-medium">
-                <td class="px-4">Total</td>
-                <td class="px-4" colspan="2"></td>
-                <td class="px-4 font-mono">\${{ data.reduce((sum, r) => sum + r.amount, 0).toFixed(2) }}</td>
-              </tr>
-            </template>
-          </DataTable>
-        </section>
-
-        <!-- Frozen Columns -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Frozen Columns (scroll horizontally)</h3>
-          <div class="max-w-[600px]">
-            <DataTable
-              :data="data"
-              :columns="frozenColumns"
-              selectionMode="multiple"
-              v-model:selection="multipleSelection"
+      <div class="w-full">
+        <DataTable
+          :data="sortedData"
+          :columns="sortableColumns"
+          v-model:sortBy="sortBy"
+          v-model:sortOrder="sortOrder"
+        />
+        <div class="mt-2 text-sm text-muted-foreground">
+          Sort: {{ sortBy ?? 'none' }} / {{ sortOrder ?? 'none' }}
+        </div>
+      </div>
+    `,
+  }),
+}
+
+export const ColumnTypes: Story = {
+  render: () => ({
+    components: { DataTable: DataTable as any },
+    setup: () => ({ data: sampleData, typeColumns }),
+    template: `
+      <div class="w-full">
+        <DataTable :data="data" :columns="typeColumns" />
+      </div>
+    `,
+  }),
+}
+
+export const CustomSlots: Story = {
+  render: () => ({
+    components: { DataTable: DataTable as any },
+    setup: () => ({ data: sampleData, slotColumns }),
+    template: `
+      <div class="w-full">
+        <DataTable :data="data" :columns="slotColumns">
+          <template #status="{ value }">
+            <span
+              :class="[
+                'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
+                value === 'active'
+                  ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
+                  : 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200',
+              ]"
             >
-              <template #id>
-                <button class="text-sm text-primary underline">Edit</button>
-              </template>
-            </DataTable>
-          </div>
-        </section>
+              {{ value }}
+            </span>
+          </template>
+          <template #amount="{ value }">
+            <span class="font-mono font-medium">\${{ Number(value).toFixed(2) }}</span>
+          </template>
+        </DataTable>
+      </div>
+    `,
+  }),
+}
+
+export const EmptyState: Story = {
+  render: () => ({
+    components: { DataTable: DataTable as any },
+    setup: () => ({ basicColumns }),
+    template: `
+      <div class="w-full">
+        <DataTable :data="[]" :columns="basicColumns" />
+      </div>
+    `,
+  }),
+}
+
+export const FooterSlot: Story = {
+  render: () => ({
+    components: { DataTable: DataTable as any },
+    setup: () => ({ data: sampleData, slotColumns }),
+    template: `
+      <div class="w-full">
+        <DataTable :data="data" :columns="slotColumns">
+          <template #footer>
+            <tr class="h-12 border-t text-sm font-medium">
+              <td class="px-4">Total</td>
+              <td class="px-4" colspan="2"></td>
+              <td class="px-4 font-mono">\${{ data.reduce((sum, r) => sum + r.amount, 0).toFixed(2) }}</td>
+            </tr>
+          </template>
+        </DataTable>
+      </div>
+    `,
+  }),
+}
+
+export const FrozenColumns: Story = {
+  render: () => ({
+    components: { DataTable: DataTable as any },
+    setup () {
+      const selection = ref<User[]>([])
+      return { data: sampleData, frozenColumns, selection }
+    },
+    template: `
+      <div class="max-w-[600px]">
+        <DataTable
+          :data="data"
+          :columns="frozenColumns"
+          selectionMode="multiple"
+          v-model:selection="selection"
+        >
+          <template #id>
+            <button class="text-sm text-primary underline">Edit</button>
+          </template>
+        </DataTable>
+      </div>
+    `,
+  }),
+}
+
+export const Loading: Story = {
+  render: () => ({
+    components: { DataTable: DataTable as any },
+    setup: () => ({ data: sampleData, basicColumns }),
+    template: `
+      <div class="w-full">
+        <DataTable :data="data" :columns="basicColumns" loading />
       </div>
     `,
   }),

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

@@ -10,7 +10,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/table'
+} from '../../shadcn/table'
 import type {
   DataTableColumn,
   DataTableProps,