@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-barcode/WakaBarcode.stories.tsx

@@ -0,0 +1,227 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaBarcode } from './index'
+
+const meta: Meta<typeof WakaBarcode> = {
+  title: 'Components/Display/WakaBarcode',
+  component: WakaBarcode,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A barcode generator component supporting multiple formats with customizable appearance.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    format: {
+      control: 'select',
+      options: ['CODE128', 'CODE39', 'EAN13', 'EAN8', 'UPC', 'ITF14'],
+      description: 'Barcode format',
+    },
+    width: {
+      control: { type: 'range', min: 100, max: 400, step: 20 },
+      description: 'Width in pixels',
+    },
+    height: {
+      control: { type: 'range', min: 40, max: 150, step: 10 },
+      description: 'Height in pixels',
+    },
+    displayValue: {
+      control: 'boolean',
+      description: 'Show text below barcode',
+    },
+    lineColor: {
+      control: 'color',
+      description: 'Bar color',
+    },
+    background: {
+      control: 'color',
+      description: 'Background color',
+    },
+    showActions: {
+      control: 'boolean',
+      description: 'Show download and copy actions',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaBarcode>
+
+export const Default: Story = {
+  args: {
+    value: 'ABC-12345',
+    format: 'CODE128',
+  },
+}
+
+export const WithActions: Story = {
+  args: {
+    value: 'ABC-12345',
+    format: 'CODE128',
+    showActions: true,
+  },
+}
+
+export const Formats: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div className="text-center">
+        <WakaBarcode value="HELLO123" format="CODE128" />
+        <p className="text-xs text-muted-foreground mt-2">CODE128</p>
+      </div>
+      <div className="text-center">
+        <WakaBarcode value="HELLO123" format="CODE39" />
+        <p className="text-xs text-muted-foreground mt-2">CODE39</p>
+      </div>
+    </div>
+  ),
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div className="text-center">
+        <WakaBarcode value="ABC-123" width={150} height={50} />
+        <p className="text-xs text-muted-foreground mt-2">Small (150x50)</p>
+      </div>
+      <div className="text-center">
+        <WakaBarcode value="ABC-123" width={200} height={80} />
+        <p className="text-xs text-muted-foreground mt-2">Medium (200x80)</p>
+      </div>
+      <div className="text-center">
+        <WakaBarcode value="ABC-123" width={300} height={100} />
+        <p className="text-xs text-muted-foreground mt-2">Large (300x100)</p>
+      </div>
+    </div>
+  ),
+}
+
+export const CustomColors: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-6">
+      <div className="text-center">
+        <WakaBarcode value="ABC-123" lineColor="#000000" background="#FFFFFF" />
+        <p className="text-xs text-muted-foreground mt-2">Default</p>
+      </div>
+      <div className="text-center">
+        <WakaBarcode value="ABC-123" lineColor="#1E40AF" background="#DBEAFE" />
+        <p className="text-xs text-muted-foreground mt-2">Blue</p>
+      </div>
+      <div className="text-center">
+        <WakaBarcode value="ABC-123" lineColor="#15803D" background="#DCFCE7" />
+        <p className="text-xs text-muted-foreground mt-2">Green</p>
+      </div>
+      <div className="text-center">
+        <WakaBarcode value="ABC-123" lineColor="#DC2626" background="#FEE2E2" />
+        <p className="text-xs text-muted-foreground mt-2">Red</p>
+      </div>
+    </div>
+  ),
+}
+
+export const NoText: Story = {
+  render: () => (
+    <div className="flex gap-8">
+      <div className="text-center">
+        <WakaBarcode value="ABC-123" displayValue={true} />
+        <p className="text-xs text-muted-foreground mt-2">With Text</p>
+      </div>
+      <div className="text-center">
+        <WakaBarcode value="ABC-123" displayValue={false} />
+        <p className="text-xs text-muted-foreground mt-2">No Text</p>
+      </div>
+    </div>
+  ),
+}
+
+export const FontSizes: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div className="text-center">
+        <WakaBarcode value="ABC-123" fontSize={10} />
+        <p className="text-xs text-muted-foreground mt-2">Font Size 10</p>
+      </div>
+      <div className="text-center">
+        <WakaBarcode value="ABC-123" fontSize={14} />
+        <p className="text-xs text-muted-foreground mt-2">Font Size 14 (Default)</p>
+      </div>
+      <div className="text-center">
+        <WakaBarcode value="ABC-123" fontSize={18} height={100} />
+        <p className="text-xs text-muted-foreground mt-2">Font Size 18</p>
+      </div>
+    </div>
+  ),
+}
+
+export const ProductLabel: Story = {
+  render: () => (
+    <div className="border rounded-lg p-4 w-[280px]">
+      <div className="text-center">
+        <h3 className="font-semibold">Product Name</h3>
+        <p className="text-sm text-muted-foreground">SKU: PRD-001</p>
+        <div className="mt-4">
+          <WakaBarcode value="PRD-001-2024" width={240} height={70} />
+        </div>
+        <p className="text-lg font-bold mt-2">$29.99</p>
+      </div>
+    </div>
+  ),
+}
+
+export const ShippingLabel: Story = {
+  render: () => (
+    <div className="border-2 border-dashed rounded-lg p-6 w-[350px]">
+      <div className="border-b pb-4 mb-4">
+        <p className="text-xs text-muted-foreground">FROM:</p>
+        <p className="font-medium">Warehouse A</p>
+        <p className="text-sm">123 Industrial Ave, City</p>
+      </div>
+      <div className="border-b pb-4 mb-4">
+        <p className="text-xs text-muted-foreground">TO:</p>
+        <p className="font-medium">John Doe</p>
+        <p className="text-sm">456 Main St, Town</p>
+      </div>
+      <div className="flex justify-center">
+        <WakaBarcode value="SHIP-2024-001234" width={280} height={80} />
+      </div>
+      <p className="text-xs text-muted-foreground text-center mt-2">
+        Tracking: SHIP-2024-001234
+      </p>
+    </div>
+  ),
+}
+
+export const InventoryTag: Story = {
+  render: () => (
+    <div className="border rounded p-3 w-[200px] bg-yellow-50">
+      <div className="text-center">
+        <p className="text-xs font-bold text-yellow-800">INVENTORY</p>
+        <WakaBarcode
+          value="INV-A1-001"
+          width={160}
+          height={50}
+          fontSize={10}
+          margin={5}
+        />
+        <div className="flex justify-between text-xs mt-2">
+          <span>Loc: A1</span>
+          <span>Qty: 50</span>
+        </div>
+      </div>
+    </div>
+  ),
+}
+
+export const BatchGeneration: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-4">
+      {['ITEM-001', 'ITEM-002', 'ITEM-003', 'ITEM-004'].map((code) => (
+        <div key={code} className="border rounded p-2 text-center">
+          <WakaBarcode value={code} width={150} height={50} fontSize={10} />
+        </div>
+      ))}
+    </div>
+  ),
+}

package/src/components/waka-bottom-sheet/WakaBottomSheet.stories.tsx

@@ -0,0 +1,408 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaBottomSheet, useBottomSheet } from './index'
+import * as React from 'react'
+import { Button } from '../button'
+import { MapPin, Navigation, Clock, Star, Phone, Share2, Heart, MessageSquare } from 'lucide-react'
+
+const meta: Meta<typeof WakaBottomSheet> = {
+  title: 'Components/Display/WakaBottomSheet',
+  component: WakaBottomSheet,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'A mobile-friendly bottom sheet component with snap points, drag gestures, and customization options.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'flat', 'glass'],
+      description: 'Visual variant',
+    },
+    showHandle: {
+      control: 'boolean',
+      description: 'Show drag handle',
+    },
+    showBackdrop: {
+      control: 'boolean',
+      description: 'Show backdrop overlay',
+    },
+    closeOnBackdropClick: {
+      control: 'boolean',
+      description: 'Close when clicking backdrop',
+    },
+    blockScroll: {
+      control: 'boolean',
+      description: 'Block page scroll when open',
+    },
+    hapticFeedback: {
+      control: 'boolean',
+      description: 'Enable haptic feedback',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaBottomSheet>
+
+export const Default: Story = {
+  args: {
+    snapPoints: [25, 50, 90],
+  },
+  render: (args) => {
+    const [open, setOpen] = React.useState(false)
+    return (
+      <div className="h-[600px] bg-muted/30 p-8">
+        <Button onClick={() => setOpen(true)}>Open Bottom Sheet</Button>
+        <WakaBottomSheet
+          {...args}
+          open={open}
+          onOpenChange={setOpen}
+        >
+          <div className="space-y-4">
+            <h3 className="font-semibold text-lg">Bottom Sheet</h3>
+            <p className="text-muted-foreground">
+              Drag the handle to resize or swipe down to close.
+            </p>
+            <div className="space-y-2">
+              {Array.from({ length: 10 }).map((_, i) => (
+                <div key={i} className="p-3 bg-muted rounded-lg">
+                  Item {i + 1}
+                </div>
+              ))}
+            </div>
+          </div>
+        </WakaBottomSheet>
+      </div>
+    )
+  },
+}
+
+export const Variants: Story = {
+  render: () => {
+    const [variant, setVariant] = React.useState<'default' | 'flat' | 'glass'>('default')
+    const [open, setOpen] = React.useState(false)
+
+    return (
+      <div className="h-[600px] bg-gradient-to-br from-blue-500 to-purple-600 p-8">
+        <div className="flex gap-2">
+          {(['default', 'flat', 'glass'] as const).map((v) => (
+            <Button
+              key={v}
+              variant={variant === v ? 'default' : 'secondary'}
+              onClick={() => {
+                setVariant(v)
+                setOpen(true)
+              }}
+            >
+              {v.charAt(0).toUpperCase() + v.slice(1)}
+            </Button>
+          ))}
+        </div>
+        <WakaBottomSheet
+          open={open}
+          onOpenChange={setOpen}
+          variant={variant}
+          snapPoints={[30, 60]}
+        >
+          <div className="space-y-4">
+            <h3 className="font-semibold text-lg">Variant: {variant}</h3>
+            <p className="text-muted-foreground">
+              This sheet uses the "{variant}" variant style.
+            </p>
+          </div>
+        </WakaBottomSheet>
+      </div>
+    )
+  },
+}
+
+export const LocationCard: Story = {
+  render: () => {
+    const [open, setOpen] = React.useState(false)
+
+    return (
+      <div className="h-[600px] bg-gray-200 p-8">
+        <p className="text-center text-muted-foreground mb-4">
+          Simulating a map view
+        </p>
+        <Button onClick={() => setOpen(true)}>
+          <MapPin className="h-4 w-4 mr-2" />
+          View Location Details
+        </Button>
+        <WakaBottomSheet
+          open={open}
+          onOpenChange={setOpen}
+          snapPoints={[35, 70, 95]}
+          defaultSnapPoint={0}
+          header={
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <div className="flex">
+                  {[1, 2, 3, 4, 5].map((star) => (
+                    <Star key={star} className={`h-4 w-4 ${star <= 4 ? 'text-yellow-500 fill-yellow-500' : 'text-muted'}`} />
+                  ))}
+                </div>
+                <span className="text-sm text-muted-foreground">(128 reviews)</span>
+              </div>
+              <div className="flex gap-2">
+                <Button variant="ghost" size="icon">
+                  <Heart className="h-4 w-4" />
+                </Button>
+                <Button variant="ghost" size="icon">
+                  <Share2 className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+          }
+          footer={
+            <div className="flex gap-2">
+              <Button variant="outline" className="flex-1">
+                <Phone className="h-4 w-4 mr-2" />
+                Call
+              </Button>
+              <Button className="flex-1">
+                <Navigation className="h-4 w-4 mr-2" />
+                Directions
+              </Button>
+            </div>
+          }
+        >
+          <div className="space-y-4">
+            <div>
+              <h2 className="font-bold text-xl">Central Park Coffee</h2>
+              <p className="text-muted-foreground">Specialty Coffee Shop</p>
+            </div>
+            <div className="flex items-center gap-2 text-sm">
+              <Clock className="h-4 w-4 text-green-600" />
+              <span className="text-green-600">Open</span>
+              <span className="text-muted-foreground">· Closes 9:00 PM</span>
+            </div>
+            <div className="flex items-center gap-2 text-sm text-muted-foreground">
+              <MapPin className="h-4 w-4" />
+              <span>123 Park Avenue, New York, NY 10001</span>
+            </div>
+            <div className="border-t pt-4">
+              <h3 className="font-semibold mb-2">About</h3>
+              <p className="text-sm text-muted-foreground">
+                A cozy coffee shop located in the heart of the city, offering artisan
+                coffee, fresh pastries, and a peaceful atmosphere for work or relaxation.
+              </p>
+            </div>
+            <div className="border-t pt-4">
+              <h3 className="font-semibold mb-2">Popular Items</h3>
+              <div className="space-y-2">
+                <div className="flex justify-between">
+                  <span>House Blend Coffee</span>
+                  <span className="text-muted-foreground">$4.50</span>
+                </div>
+                <div className="flex justify-between">
+                  <span>Avocado Toast</span>
+                  <span className="text-muted-foreground">$12.00</span>
+                </div>
+                <div className="flex justify-between">
+                  <span>Matcha Latte</span>
+                  <span className="text-muted-foreground">$6.00</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </WakaBottomSheet>
+      </div>
+    )
+  },
+}
+
+export const ActionSheet: Story = {
+  render: () => {
+    const [open, setOpen] = React.useState(false)
+
+    const actions = [
+      { icon: <Share2 className="h-5 w-5" />, label: 'Share', onClick: () => console.log('Share') },
+      { icon: <Heart className="h-5 w-5" />, label: 'Add to Favorites', onClick: () => console.log('Favorite') },
+      { icon: <MessageSquare className="h-5 w-5" />, label: 'Send Message', onClick: () => console.log('Message') },
+    ]
+
+    return (
+      <div className="h-[600px] bg-muted/30 p-8">
+        <Button onClick={() => setOpen(true)}>Show Actions</Button>
+        <WakaBottomSheet
+          open={open}
+          onOpenChange={setOpen}
+          snapPoints={[40]}
+          showBackdrop
+        >
+          <div className="space-y-1">
+            {actions.map((action) => (
+              <button
+                key={action.label}
+                onClick={() => {
+                  action.onClick()
+                  setOpen(false)
+                }}
+                className="w-full flex items-center gap-3 p-4 hover:bg-muted rounded-lg transition-colors"
+              >
+                {action.icon}
+                <span className="font-medium">{action.label}</span>
+              </button>
+            ))}
+            <div className="border-t my-2" />
+            <button
+              onClick={() => setOpen(false)}
+              className="w-full flex items-center justify-center p-4 text-destructive hover:bg-destructive/10 rounded-lg transition-colors"
+            >
+              Cancel
+            </button>
+          </div>
+        </WakaBottomSheet>
+      </div>
+    )
+  },
+}
+
+export const WithHook: Story = {
+  render: () => {
+    const sheet = useBottomSheet({
+      defaultSnapPoint: 0,
+      onOpenChange: (open) => console.log('Sheet open:', open),
+      onSnapPointChange: (index) => console.log('Snap point:', index),
+    })
+
+    return (
+      <div className="h-[600px] bg-muted/30 p-8 space-y-4">
+        <div className="flex gap-2">
+          <Button onClick={() => sheet.openSheet()}>Open</Button>
+          <Button variant="outline" onClick={() => sheet.openSheet(1)}>
+            Open at 50%
+          </Button>
+          <Button variant="outline" onClick={sheet.toggleSheet}>
+            Toggle
+          </Button>
+        </div>
+        <p className="text-sm text-muted-foreground">
+          Current snap point: {sheet.snapPoint}
+        </p>
+        <WakaBottomSheet
+          open={sheet.open}
+          onOpenChange={sheet.onOpenChange}
+          snapPoint={sheet.snapPoint}
+          onSnapPointChange={sheet.onSnapPointChange}
+          snapPoints={[25, 50, 90]}
+        >
+          <div className="space-y-4">
+            <h3 className="font-semibold text-lg">Using useBottomSheet Hook</h3>
+            <p className="text-muted-foreground">
+              This sheet is controlled programmatically via the hook.
+            </p>
+            <div className="flex gap-2 flex-wrap">
+              <Button variant="outline" size="sm" onClick={() => sheet.onSnapPointChange(0)}>
+                25%
+              </Button>
+              <Button variant="outline" size="sm" onClick={() => sheet.onSnapPointChange(1)}>
+                50%
+              </Button>
+              <Button variant="outline" size="sm" onClick={() => sheet.onSnapPointChange(2)}>
+                90%
+              </Button>
+            </div>
+          </div>
+        </WakaBottomSheet>
+      </div>
+    )
+  },
+}
+
+export const ProductQuickView: Story = {
+  render: () => {
+    const [open, setOpen] = React.useState(false)
+
+    return (
+      <div className="h-[600px] bg-muted/30 p-8">
+        <div className="grid grid-cols-2 gap-4 max-w-md">
+          {[1, 2, 3, 4].map((i) => (
+            <div
+              key={i}
+              className="border rounded-lg p-4 bg-background cursor-pointer hover:shadow-md transition-shadow"
+              onClick={() => setOpen(true)}
+            >
+              <div className="aspect-square bg-muted rounded mb-2" />
+              <p className="font-medium">Product {i}</p>
+              <p className="text-muted-foreground text-sm">$99.00</p>
+            </div>
+          ))}
+        </div>
+        <WakaBottomSheet
+          open={open}
+          onOpenChange={setOpen}
+          snapPoints={[60, 95]}
+          footer={
+            <Button className="w-full">Add to Cart - $99.00</Button>
+          }
+        >
+          <div className="space-y-4">
+            <div className="aspect-video bg-muted rounded-lg" />
+            <div>
+              <h2 className="font-bold text-xl">Premium Wireless Headphones</h2>
+              <p className="text-2xl font-bold text-primary mt-2">$99.00</p>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="flex">
+                {[1, 2, 3, 4, 5].map((star) => (
+                  <Star key={star} className={`h-4 w-4 ${star <= 4 ? 'text-yellow-500 fill-yellow-500' : 'text-muted'}`} />
+                ))}
+              </div>
+              <span className="text-sm text-muted-foreground">(256 reviews)</span>
+            </div>
+            <div>
+              <h3 className="font-semibold mb-2">Description</h3>
+              <p className="text-sm text-muted-foreground">
+                Experience crystal-clear audio with our premium wireless headphones.
+                Features active noise cancellation, 30-hour battery life, and
+                comfortable over-ear design for all-day listening.
+              </p>
+            </div>
+            <div>
+              <h3 className="font-semibold mb-2">Color</h3>
+              <div className="flex gap-2">
+                {['bg-black', 'bg-white border', 'bg-blue-600', 'bg-rose-500'].map((color) => (
+                  <button
+                    key={color}
+                    className={`w-8 h-8 rounded-full ${color}`}
+                  />
+                ))}
+              </div>
+            </div>
+          </div>
+        </WakaBottomSheet>
+      </div>
+    )
+  },
+}
+
+export const NoBackdrop: Story = {
+  render: () => {
+    const [open, setOpen] = React.useState(false)
+    return (
+      <div className="h-[600px] bg-muted/30 p-8">
+        <Button onClick={() => setOpen(true)}>Open Without Backdrop</Button>
+        <WakaBottomSheet
+          open={open}
+          onOpenChange={setOpen}
+          snapPoints={[30, 60]}
+          showBackdrop={false}
+        >
+          <div className="space-y-4">
+            <h3 className="font-semibold text-lg">No Backdrop</h3>
+            <p className="text-muted-foreground">
+              This sheet doesn't have a backdrop overlay.
+              You can still interact with the content behind.
+            </p>
+          </div>
+        </WakaBottomSheet>
+      </div>
+    )
+  },
+}