@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-drawer/WakaDrawer.stories.tsx

@@ -0,0 +1,437 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaDrawer, useDrawer, DrawerHeader, DrawerBody, DrawerFooter } from './index'
+import * as React from 'react'
+import { Button } from '../button'
+import { Settings, User, Bell, Shield, CreditCard, LogOut, Menu, Filter, X } from 'lucide-react'
+
+const meta: Meta<typeof WakaDrawer> = {
+  title: 'Components/Display/WakaDrawer',
+  component: WakaDrawer,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A slide-out drawer component with multiple positions, sizes, and customization options.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    position: {
+      control: 'select',
+      options: ['left', 'right', 'top', 'bottom'],
+      description: 'Position of the drawer',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg', 'xl', 'full'],
+      description: 'Size of the drawer',
+    },
+    showCloseButton: {
+      control: 'boolean',
+      description: 'Show close button',
+    },
+    closeOnOverlayClick: {
+      control: 'boolean',
+      description: 'Close when clicking overlay',
+    },
+    showOverlay: {
+      control: 'boolean',
+      description: 'Show overlay backdrop',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaDrawer>
+
+export const Default: Story = {
+  args: {
+    title: 'Drawer Title',
+    description: 'This is a drawer description.',
+  },
+  render: (args) => {
+    const [open, setOpen] = React.useState(false)
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>Open Drawer</Button>
+        <WakaDrawer
+          {...args}
+          open={open}
+          onOpenChange={setOpen}
+        >
+          <p>Drawer content goes here.</p>
+        </WakaDrawer>
+      </>
+    )
+  },
+}
+
+export const Positions: Story = {
+  render: () => {
+    const [position, setPosition] = React.useState<'left' | 'right' | 'top' | 'bottom'>('right')
+    const [open, setOpen] = React.useState(false)
+
+    return (
+      <div className="space-y-4">
+        <div className="flex gap-2">
+          {(['left', 'right', 'top', 'bottom'] as const).map((pos) => (
+            <Button
+              key={pos}
+              variant={position === pos ? 'default' : 'outline'}
+              onClick={() => {
+                setPosition(pos)
+                setOpen(true)
+              }}
+            >
+              {pos.charAt(0).toUpperCase() + pos.slice(1)}
+            </Button>
+          ))}
+        </div>
+        <WakaDrawer
+          open={open}
+          onOpenChange={setOpen}
+          position={position}
+          title={`${position.charAt(0).toUpperCase() + position.slice(1)} Drawer`}
+          description="This drawer slides in from the selected position."
+        >
+          <p>Drawer content for {position} position.</p>
+        </WakaDrawer>
+      </div>
+    )
+  },
+}
+
+export const Sizes: Story = {
+  render: () => {
+    const [size, setSize] = React.useState<'sm' | 'md' | 'lg' | 'xl' | 'full'>('md')
+    const [open, setOpen] = React.useState(false)
+
+    return (
+      <div className="space-y-4">
+        <div className="flex gap-2 flex-wrap">
+          {(['sm', 'md', 'lg', 'xl', 'full'] as const).map((s) => (
+            <Button
+              key={s}
+              variant={size === s ? 'default' : 'outline'}
+              onClick={() => {
+                setSize(s)
+                setOpen(true)
+              }}
+            >
+              {s.toUpperCase()}
+            </Button>
+          ))}
+        </div>
+        <WakaDrawer
+          open={open}
+          onOpenChange={setOpen}
+          size={size}
+          title={`Size: ${size.toUpperCase()}`}
+          description="Demonstrating different drawer sizes."
+        >
+          <p>This drawer has size "{size}".</p>
+        </WakaDrawer>
+      </div>
+    )
+  },
+}
+
+export const WithFooter: Story = {
+  render: () => {
+    const [open, setOpen] = React.useState(false)
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>Open with Footer</Button>
+        <WakaDrawer
+          open={open}
+          onOpenChange={setOpen}
+          title="Edit Profile"
+          description="Make changes to your profile information."
+          footer={
+            <>
+              <Button variant="outline" onClick={() => setOpen(false)}>
+                Cancel
+              </Button>
+              <Button onClick={() => setOpen(false)}>
+                Save Changes
+              </Button>
+            </>
+          }
+        >
+          <div className="space-y-4">
+            <div>
+              <label className="text-sm font-medium">Name</label>
+              <input
+                type="text"
+                className="w-full mt-1 px-3 py-2 border rounded-md"
+                defaultValue="John Doe"
+              />
+            </div>
+            <div>
+              <label className="text-sm font-medium">Email</label>
+              <input
+                type="email"
+                className="w-full mt-1 px-3 py-2 border rounded-md"
+                defaultValue="john@example.com"
+              />
+            </div>
+            <div>
+              <label className="text-sm font-medium">Bio</label>
+              <textarea
+                className="w-full mt-1 px-3 py-2 border rounded-md"
+                rows={3}
+                defaultValue="Software developer passionate about React."
+              />
+            </div>
+          </div>
+        </WakaDrawer>
+      </>
+    )
+  },
+}
+
+export const NavigationMenu: Story = {
+  render: () => {
+    const [open, setOpen] = React.useState(false)
+
+    const menuItems = [
+      { icon: <User className="h-5 w-5" />, label: 'Profile', href: '#' },
+      { icon: <Settings className="h-5 w-5" />, label: 'Settings', href: '#' },
+      { icon: <Bell className="h-5 w-5" />, label: 'Notifications', href: '#' },
+      { icon: <Shield className="h-5 w-5" />, label: 'Security', href: '#' },
+      { icon: <CreditCard className="h-5 w-5" />, label: 'Billing', href: '#' },
+    ]
+
+    return (
+      <>
+        <Button variant="ghost" size="icon" onClick={() => setOpen(true)}>
+          <Menu className="h-5 w-5" />
+        </Button>
+        <WakaDrawer
+          open={open}
+          onOpenChange={setOpen}
+          position="left"
+          size="sm"
+          title="Menu"
+        >
+          <nav className="space-y-1">
+            {menuItems.map((item) => (
+              <a
+                key={item.label}
+                href={item.href}
+                className="flex items-center gap-3 px-3 py-2 rounded-md hover:bg-muted transition-colors"
+                onClick={() => setOpen(false)}
+              >
+                {item.icon}
+                <span>{item.label}</span>
+              </a>
+            ))}
+          </nav>
+          <div className="mt-auto pt-4 border-t">
+            <button className="flex items-center gap-3 px-3 py-2 w-full text-destructive hover:bg-destructive/10 rounded-md transition-colors">
+              <LogOut className="h-5 w-5" />
+              <span>Sign out</span>
+            </button>
+          </div>
+        </WakaDrawer>
+      </>
+    )
+  },
+}
+
+export const FilterPanel: Story = {
+  render: () => {
+    const [open, setOpen] = React.useState(false)
+    const [filters, setFilters] = React.useState({
+      category: '',
+      priceRange: [0, 100],
+      inStock: false,
+    })
+
+    return (
+      <>
+        <Button variant="outline" onClick={() => setOpen(true)}>
+          <Filter className="h-4 w-4 mr-2" />
+          Filters
+        </Button>
+        <WakaDrawer
+          open={open}
+          onOpenChange={setOpen}
+          position="right"
+          title="Filters"
+          description="Refine your search results"
+          footer={
+            <>
+              <Button
+                variant="outline"
+                onClick={() =>
+                  setFilters({ category: '', priceRange: [0, 100], inStock: false })
+                }
+              >
+                Reset
+              </Button>
+              <Button onClick={() => setOpen(false)}>Apply Filters</Button>
+            </>
+          }
+        >
+          <div className="space-y-6">
+            <div>
+              <label className="text-sm font-medium">Category</label>
+              <select
+                className="w-full mt-1 px-3 py-2 border rounded-md"
+                value={filters.category}
+                onChange={(e) =>
+                  setFilters({ ...filters, category: e.target.value })
+                }
+              >
+                <option value="">All Categories</option>
+                <option value="electronics">Electronics</option>
+                <option value="clothing">Clothing</option>
+                <option value="books">Books</option>
+                <option value="home">Home & Garden</option>
+              </select>
+            </div>
+            <div>
+              <label className="text-sm font-medium">Price Range</label>
+              <div className="flex items-center gap-2 mt-1">
+                <input
+                  type="number"
+                  className="w-full px-3 py-2 border rounded-md"
+                  placeholder="Min"
+                  value={filters.priceRange[0]}
+                  onChange={(e) =>
+                    setFilters({
+                      ...filters,
+                      priceRange: [Number(e.target.value), filters.priceRange[1]],
+                    })
+                  }
+                />
+                <span>-</span>
+                <input
+                  type="number"
+                  className="w-full px-3 py-2 border rounded-md"
+                  placeholder="Max"
+                  value={filters.priceRange[1]}
+                  onChange={(e) =>
+                    setFilters({
+                      ...filters,
+                      priceRange: [filters.priceRange[0], Number(e.target.value)],
+                    })
+                  }
+                />
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              <input
+                type="checkbox"
+                id="inStock"
+                checked={filters.inStock}
+                onChange={(e) =>
+                  setFilters({ ...filters, inStock: e.target.checked })
+                }
+              />
+              <label htmlFor="inStock" className="text-sm">
+                Only show in-stock items
+              </label>
+            </div>
+          </div>
+        </WakaDrawer>
+      </>
+    )
+  },
+}
+
+export const WithHook: Story = {
+  render: () => {
+    const drawer = useDrawer({
+      onOpen: () => console.log('Drawer opened'),
+      onClose: () => console.log('Drawer closed'),
+    })
+
+    return (
+      <div className="space-y-4">
+        <div className="flex gap-2">
+          <Button onClick={drawer.openDrawer}>Open</Button>
+          <Button variant="outline" onClick={drawer.toggleDrawer}>Toggle</Button>
+        </div>
+        <WakaDrawer
+          {...drawer}
+          title="Using useDrawer Hook"
+          description="This drawer is controlled by the useDrawer hook."
+        >
+          <p>The drawer state is managed by the hook.</p>
+          <Button
+            variant="outline"
+            className="mt-4"
+            onClick={drawer.closeDrawer}
+          >
+            Close Drawer
+          </Button>
+        </WakaDrawer>
+      </div>
+    )
+  },
+}
+
+export const NoOverlay: Story = {
+  render: () => {
+    const [open, setOpen] = React.useState(false)
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>Open Without Overlay</Button>
+        <WakaDrawer
+          open={open}
+          onOpenChange={setOpen}
+          showOverlay={false}
+          title="No Overlay"
+          description="This drawer doesn't have a backdrop overlay."
+        >
+          <p>You can still interact with the page content behind.</p>
+        </WakaDrawer>
+      </>
+    )
+  },
+}
+
+export const CustomContent: Story = {
+  render: () => {
+    const [open, setOpen] = React.useState(false)
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>Open Custom Drawer</Button>
+        <WakaDrawer
+          open={open}
+          onOpenChange={setOpen}
+          size="lg"
+        >
+          <div className="h-full flex flex-col">
+            <div className="p-4 border-b flex items-center justify-between">
+              <h2 className="font-semibold text-lg">Custom Layout</h2>
+              <Button variant="ghost" size="icon" onClick={() => setOpen(false)}>
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+            <div className="flex-1 overflow-auto p-4">
+              <p className="text-muted-foreground mb-4">
+                This drawer uses custom layout without the built-in header/footer.
+              </p>
+              <div className="grid grid-cols-2 gap-4">
+                {Array.from({ length: 6 }).map((_, i) => (
+                  <div key={i} className="border rounded-lg p-4 bg-muted/30">
+                    Card {i + 1}
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div className="p-4 border-t bg-muted/30">
+              <Button className="w-full" onClick={() => setOpen(false)}>
+                Done
+              </Button>
+            </div>
+          </div>
+        </WakaDrawer>
+      </>
+    )
+  },
+}

package/src/components/waka-env-var-editor/WakaEnvVarEditor.stories.tsx

@@ -0,0 +1,263 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaEnvVarEditor, defaultEnvVariables } from './index'
+import type { EnvVariable } from './index'
+import * as React from 'react'
+
+const simpleVariables: EnvVariable[] = [
+  { key: 'NODE_ENV', value: 'development' },
+  { key: 'PORT', value: '3000' },
+  { key: 'DEBUG', value: 'true' },
+]
+
+const productionVariables: EnvVariable[] = [
+  { key: 'NODE_ENV', value: 'production', isRequired: true },
+  { key: 'DATABASE_URL', value: 'postgresql://prod-user:secure-pass@db.example.com:5432/production', isSecret: true, isRequired: true },
+  { key: 'REDIS_URL', value: 'redis://redis.example.com:6379', isSecret: true },
+  { key: 'API_KEY', value: 'pk_live_1234567890abcdefghijklmnopqrstuvwxyz', isSecret: true, isRequired: true },
+  { key: 'SECRET_KEY', value: 'sk_live_9876543210zyxwvutsrqponmlkjihgfedcba', isSecret: true, isRequired: true },
+  { key: 'LOG_LEVEL', value: 'warn' },
+  { key: 'SENTRY_DSN', value: 'https://abc123@sentry.io/12345', isSecret: true },
+  { key: 'ENABLE_METRICS', value: 'true' },
+]
+
+const variablesWithSources: EnvVariable[] = [
+  { key: 'DATABASE_URL', value: 'postgresql://localhost:5432/dev', source: 'local', isSecret: true },
+  { key: 'DATABASE_URL', value: 'postgresql://staging-db:5432/staging', source: 'staging', isSecret: true },
+  { key: 'DATABASE_URL', value: 'postgresql://prod-db:5432/production', source: 'production', isSecret: true },
+  { key: 'API_KEY', value: 'dev_key_123', source: 'local', isSecret: true },
+  { key: 'API_KEY', value: 'staging_key_456', source: 'staging', isSecret: true },
+  { key: 'API_KEY', value: 'prod_key_789', source: 'production', isSecret: true },
+]
+
+const incompleteVariables: EnvVariable[] = [
+  { key: 'NODE_ENV', value: 'production', isRequired: true },
+  { key: 'DATABASE_URL', value: '', isSecret: true, isRequired: true },
+  { key: 'API_KEY', value: '', isSecret: true, isRequired: true },
+  { key: 'OPTIONAL_VAR', value: '' },
+]
+
+const meta: Meta<typeof WakaEnvVarEditor> = {
+  title: 'Components/DevOps/WakaEnvVarEditor',
+  component: WakaEnvVarEditor,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'An environment variable editor with secret masking, import/export, search, and validation for required variables.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    readOnly: {
+      control: 'boolean',
+      description: 'Read-only mode',
+    },
+    showSource: {
+      control: 'boolean',
+      description: 'Show source column',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaEnvVarEditor>
+
+export const Default: Story = {
+  args: {
+    variables: defaultEnvVariables,
+  },
+  render: (args) => (
+    <div className="w-[700px] h-[500px]">
+      <WakaEnvVarEditor
+        {...args}
+        onChange={(vars) => console.log('Change:', vars)}
+        onSave={(vars) => console.log('Save:', vars)}
+        onExport={() => console.log('Export')}
+      />
+    </div>
+  ),
+}
+
+export const Simple: Story = {
+  render: () => (
+    <div className="w-[700px] h-[400px]">
+      <WakaEnvVarEditor
+        variables={simpleVariables}
+        title="Development Variables"
+        onChange={(vars) => console.log('Change:', vars)}
+        onSave={(vars) => console.log('Save:', vars)}
+      />
+    </div>
+  ),
+}
+
+export const Production: Story = {
+  render: () => (
+    <div className="w-[700px] h-[500px]">
+      <WakaEnvVarEditor
+        variables={productionVariables}
+        title="Production Environment"
+        onChange={(vars) => console.log('Change:', vars)}
+        onSave={(vars) => console.log('Save:', vars)}
+        onExport={() => console.log('Export')}
+      />
+    </div>
+  ),
+}
+
+export const WithSources: Story = {
+  render: () => (
+    <div className="w-[750px] h-[500px]">
+      <p className="text-sm text-muted-foreground mb-4">
+        Variables from different environments
+      </p>
+      <WakaEnvVarEditor
+        variables={variablesWithSources}
+        showSource
+        title="Multi-Environment Variables"
+        onChange={(vars) => console.log('Change:', vars)}
+      />
+    </div>
+  ),
+}
+
+export const MissingRequired: Story = {
+  render: () => (
+    <div className="w-[700px] h-[400px]">
+      <p className="text-sm text-muted-foreground mb-4">
+        Shows warning indicators for empty required variables
+      </p>
+      <WakaEnvVarEditor
+        variables={incompleteVariables}
+        title="Incomplete Configuration"
+        onChange={(vars) => console.log('Change:', vars)}
+        onSave={(vars) => console.log('Save:', vars)}
+      />
+    </div>
+  ),
+}
+
+export const ReadOnly: Story = {
+  render: () => (
+    <div className="w-[700px] h-[500px]">
+      <WakaEnvVarEditor
+        variables={productionVariables}
+        readOnly
+        title="Production Variables (Read Only)"
+        onExport={() => console.log('Export')}
+      />
+    </div>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [variables, setVariables] = React.useState<EnvVariable[]>(simpleVariables)
+    const [saved, setSaved] = React.useState(false)
+
+    const handleSave = (vars: EnvVariable[]) => {
+      console.log('Saving:', vars)
+      setSaved(true)
+      setTimeout(() => setSaved(false), 2000)
+    }
+
+    return (
+      <div className="w-[700px] h-[500px]">
+        {saved && (
+          <div className="mb-4 p-2 bg-green-500/10 border border-green-500/30 rounded text-sm text-green-500">
+            Variables saved successfully!
+          </div>
+        )}
+        <WakaEnvVarEditor
+          variables={variables}
+          onChange={setVariables}
+          onSave={handleSave}
+          onExport={() => {
+            const content = variables
+              .map((v) => `${v.key}=${v.value}`)
+              .join('\n')
+            console.log('Export content:\n', content)
+            alert('Check console for exported content')
+          }}
+          title="Interactive Editor"
+        />
+      </div>
+    )
+  },
+}
+
+export const Empty: Story = {
+  render: () => (
+    <div className="w-[700px] h-[400px]">
+      <WakaEnvVarEditor
+        variables={[]}
+        title="No Variables"
+        onChange={(vars) => console.log('Change:', vars)}
+        onSave={(vars) => console.log('Save:', vars)}
+      />
+    </div>
+  ),
+}
+
+export const ManyVariables: Story = {
+  render: () => {
+    const manyVars: EnvVariable[] = Array.from({ length: 30 }, (_, i) => ({
+      key: `VARIABLE_${i + 1}`,
+      value: `value_${i + 1}`,
+      isSecret: i % 3 === 0,
+      isRequired: i % 5 === 0,
+    }))
+
+    return (
+      <div className="w-[700px] h-[600px]">
+        <WakaEnvVarEditor
+          variables={manyVars}
+          title="Large Configuration"
+          onChange={(vars) => console.log('Change:', vars)}
+          onSave={(vars) => console.log('Save:', vars)}
+          onExport={() => console.log('Export')}
+        />
+      </div>
+    )
+  },
+}
+
+export const ConfigurationPanel: Story = {
+  render: () => {
+    const [variables, setVariables] = React.useState<EnvVariable[]>(defaultEnvVariables)
+
+    return (
+      <div className="p-6 rounded-xl border bg-card">
+        <div className="flex items-center justify-between mb-6">
+          <div>
+            <h2 className="text-xl font-bold">Application Configuration</h2>
+            <p className="text-sm text-muted-foreground">Environment: Production</p>
+          </div>
+          <div className="flex items-center gap-2 text-sm">
+            <span className="text-muted-foreground">{variables.length} variables</span>
+            <span className="text-muted-foreground">•</span>
+            <span className="text-yellow-500">{variables.filter((v) => v.isSecret).length} secrets</span>
+          </div>
+        </div>
+
+        <div className="w-[650px]">
+          <WakaEnvVarEditor
+            variables={variables}
+            onChange={setVariables}
+            onSave={(vars) => {
+              console.log('Saving configuration:', vars)
+              alert(`Saved ${vars.length} variables!`)
+            }}
+            onExport={() => {
+              const content = variables
+                .map((v) => `${v.key}=${v.isSecret ? '***' : v.value}`)
+                .join('\n')
+              console.log('Export (secrets masked):\n', content)
+            }}
+          />
+        </div>
+      </div>
+    )
+  },
+}