@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-segmented-control/WakaSegmentedControl.stories.tsx

@@ -0,0 +1,309 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaSegmentedControl, useSegmentedControl } from './index'
+import type { SegmentOption } from './index'
+import * as React from 'react'
+import { List, Grid, LayoutGrid, Sun, Moon, Monitor, AlignLeft, AlignCenter, AlignRight, AlignJustify } from 'lucide-react'
+
+const meta: Meta<typeof WakaSegmentedControl> = {
+  title: 'Components/Display/WakaSegmentedControl',
+  component: WakaSegmentedControl,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A segmented control component for switching between related options with an animated indicator.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size of the control',
+    },
+    variant: {
+      control: 'select',
+      options: ['default', 'pills'],
+      description: 'Visual variant',
+    },
+    fullWidth: {
+      control: 'boolean',
+      description: 'Take full width of container',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the control',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaSegmentedControl>
+
+const viewOptions: SegmentOption[] = [
+  { value: 'list', label: 'List' },
+  { value: 'grid', label: 'Grid' },
+  { value: 'gallery', label: 'Gallery' },
+]
+
+export const Default: Story = {
+  args: {
+    options: viewOptions,
+  },
+  render: (args) => {
+    const [value, setValue] = React.useState('list')
+    return (
+      <WakaSegmentedControl
+        {...args}
+        value={value}
+        onChange={setValue}
+      />
+    )
+  },
+}
+
+export const Sizes: Story = {
+  render: () => {
+    const [value, setValue] = React.useState('list')
+    return (
+      <div className="space-y-6">
+        <div>
+          <p className="text-sm text-muted-foreground mb-2">Small</p>
+          <WakaSegmentedControl
+            options={viewOptions}
+            value={value}
+            onChange={setValue}
+            size="sm"
+          />
+        </div>
+        <div>
+          <p className="text-sm text-muted-foreground mb-2">Medium (Default)</p>
+          <WakaSegmentedControl
+            options={viewOptions}
+            value={value}
+            onChange={setValue}
+            size="md"
+          />
+        </div>
+        <div>
+          <p className="text-sm text-muted-foreground mb-2">Large</p>
+          <WakaSegmentedControl
+            options={viewOptions}
+            value={value}
+            onChange={setValue}
+            size="lg"
+          />
+        </div>
+      </div>
+    )
+  },
+}
+
+export const Variants: Story = {
+  render: () => {
+    const [value, setValue] = React.useState('list')
+    return (
+      <div className="space-y-6">
+        <div>
+          <p className="text-sm text-muted-foreground mb-2">Default (Animated Indicator)</p>
+          <WakaSegmentedControl
+            options={viewOptions}
+            value={value}
+            onChange={setValue}
+            variant="default"
+          />
+        </div>
+        <div>
+          <p className="text-sm text-muted-foreground mb-2">Pills</p>
+          <WakaSegmentedControl
+            options={viewOptions}
+            value={value}
+            onChange={setValue}
+            variant="pills"
+          />
+        </div>
+      </div>
+    )
+  },
+}
+
+export const WithIcons: Story = {
+  render: () => {
+    const optionsWithIcons: SegmentOption[] = [
+      { value: 'list', label: 'List', icon: <List className="h-4 w-4" /> },
+      { value: 'grid', label: 'Grid', icon: <Grid className="h-4 w-4" /> },
+      { value: 'gallery', label: 'Gallery', icon: <LayoutGrid className="h-4 w-4" /> },
+    ]
+
+    const [value, setValue] = React.useState('list')
+    return (
+      <WakaSegmentedControl
+        options={optionsWithIcons}
+        value={value}
+        onChange={setValue}
+      />
+    )
+  },
+}
+
+export const IconOnly: Story = {
+  render: () => {
+    const iconOnlyOptions: SegmentOption[] = [
+      { value: 'left', label: '', icon: <AlignLeft className="h-4 w-4" /> },
+      { value: 'center', label: '', icon: <AlignCenter className="h-4 w-4" /> },
+      { value: 'right', label: '', icon: <AlignRight className="h-4 w-4" /> },
+      { value: 'justify', label: '', icon: <AlignJustify className="h-4 w-4" /> },
+    ]
+
+    const [value, setValue] = React.useState('left')
+    return (
+      <WakaSegmentedControl
+        options={iconOnlyOptions}
+        value={value}
+        onChange={setValue}
+      />
+    )
+  },
+}
+
+export const ThemeSwitcher: Story = {
+  render: () => {
+    const themeOptions: SegmentOption[] = [
+      { value: 'light', label: 'Light', icon: <Sun className="h-4 w-4" /> },
+      { value: 'dark', label: 'Dark', icon: <Moon className="h-4 w-4" /> },
+      { value: 'system', label: 'System', icon: <Monitor className="h-4 w-4" /> },
+    ]
+
+    const [value, setValue] = React.useState('system')
+    return (
+      <div className="border rounded-lg p-6 w-[400px]">
+        <h3 className="font-semibold mb-4">Appearance</h3>
+        <WakaSegmentedControl
+          options={themeOptions}
+          value={value}
+          onChange={setValue}
+          fullWidth
+        />
+        <p className="text-sm text-muted-foreground mt-4">
+          Current theme: <span className="font-medium capitalize">{value}</span>
+        </p>
+      </div>
+    )
+  },
+}
+
+export const FullWidth: Story = {
+  render: () => {
+    const [value, setValue] = React.useState('list')
+    return (
+      <div className="w-[400px]">
+        <WakaSegmentedControl
+          options={viewOptions}
+          value={value}
+          onChange={setValue}
+          fullWidth
+        />
+      </div>
+    )
+  },
+}
+
+export const WithDisabledOptions: Story = {
+  render: () => {
+    const optionsWithDisabled: SegmentOption[] = [
+      { value: 'free', label: 'Free' },
+      { value: 'pro', label: 'Pro' },
+      { value: 'enterprise', label: 'Enterprise', disabled: true },
+    ]
+
+    const [value, setValue] = React.useState('free')
+    return (
+      <WakaSegmentedControl
+        options={optionsWithDisabled}
+        value={value}
+        onChange={setValue}
+      />
+    )
+  },
+}
+
+export const Disabled: Story = {
+  render: () => {
+    const [value, setValue] = React.useState('list')
+    return (
+      <WakaSegmentedControl
+        options={viewOptions}
+        value={value}
+        onChange={setValue}
+        disabled
+      />
+    )
+  },
+}
+
+export const WithHook: Story = {
+  render: () => {
+    const { value, onChange, selectNext, selectPrevious } = useSegmentedControl(viewOptions, 'list')
+
+    return (
+      <div className="space-y-4 w-[400px]">
+        <WakaSegmentedControl
+          options={viewOptions}
+          value={value}
+          onChange={onChange}
+        />
+        <div className="flex gap-2">
+          <button
+            onClick={selectPrevious}
+            className="px-3 py-1 text-sm border rounded hover:bg-muted"
+          >
+            Previous
+          </button>
+          <button
+            onClick={selectNext}
+            className="px-3 py-1 text-sm border rounded hover:bg-muted"
+          >
+            Next
+          </button>
+        </div>
+        <p className="text-sm text-muted-foreground">
+          Selected: <span className="font-medium capitalize">{value}</span>
+        </p>
+      </div>
+    )
+  },
+}
+
+export const PricingToggle: Story = {
+  render: () => {
+    const billingOptions: SegmentOption[] = [
+      { value: 'monthly', label: 'Monthly' },
+      { value: 'yearly', label: 'Yearly (Save 20%)' },
+    ]
+
+    const [billing, setBilling] = React.useState('monthly')
+    const price = billing === 'monthly' ? 29 : 23
+
+    return (
+      <div className="text-center space-y-6 w-[400px]">
+        <WakaSegmentedControl
+          options={billingOptions}
+          value={billing}
+          onChange={setBilling}
+          variant="pills"
+        />
+        <div className="border rounded-lg p-6">
+          <h3 className="font-semibold text-lg">Pro Plan</h3>
+          <div className="mt-4">
+            <span className="text-4xl font-bold">${price}</span>
+            <span className="text-muted-foreground">/month</span>
+          </div>
+          {billing === 'yearly' && (
+            <p className="text-sm text-green-600 mt-2">You save $72/year!</p>
+          )}
+        </div>
+      </div>
+    )
+  },
+}

package/src/components/waka-server-rack/WakaServerRack.stories.tsx

@@ -0,0 +1,382 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaServerRack, WakaServerRackDemo } from './index'
+import type { ServerUnit } from './index'
+import * as React from 'react'
+
+const sampleServers: ServerUnit[] = [
+  {
+    id: 'srv-001',
+    name: 'Web Server 01',
+    unit: 40,
+    height: 2,
+    status: 'online',
+    cpu: 45,
+    ram: 62,
+    disk: 34,
+    network: { in: 850, out: 420 },
+  },
+  {
+    id: 'srv-002',
+    name: 'Database Primary',
+    unit: 37,
+    height: 3,
+    status: 'online',
+    cpu: 78,
+    ram: 85,
+    disk: 67,
+    network: { in: 1200, out: 980 },
+  },
+  {
+    id: 'srv-003',
+    name: 'Cache Server',
+    unit: 35,
+    height: 2,
+    status: 'warning',
+    cpu: 92,
+    ram: 88,
+    disk: 45,
+    network: { in: 2100, out: 1850 },
+  },
+  {
+    id: 'srv-004',
+    name: 'API Gateway',
+    unit: 33,
+    height: 1,
+    status: 'online',
+    cpu: 34,
+    ram: 41,
+    disk: 22,
+    network: { in: 3500, out: 3200 },
+  },
+  {
+    id: 'srv-005',
+    name: 'Worker Node 01',
+    unit: 31,
+    height: 2,
+    status: 'online',
+    cpu: 56,
+    ram: 67,
+    disk: 41,
+  },
+  {
+    id: 'srv-006',
+    name: 'Worker Node 02',
+    unit: 29,
+    height: 2,
+    status: 'offline',
+    cpu: 0,
+    ram: 0,
+    disk: 41,
+  },
+  {
+    id: 'srv-007',
+    name: 'Storage Array',
+    unit: 25,
+    height: 4,
+    status: 'online',
+    cpu: 12,
+    ram: 24,
+    disk: 89,
+    network: { in: 500, out: 4500 },
+  },
+  {
+    id: 'srv-008',
+    name: 'Backup Server',
+    unit: 22,
+    height: 3,
+    status: 'maintenance',
+    cpu: 5,
+    ram: 15,
+    disk: 72,
+  },
+]
+
+const meta: Meta<typeof WakaServerRack> = {
+  title: 'Components/DevOps/WakaServerRack',
+  component: WakaServerRack,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A 3D server rack visualization with status LEDs, CPU/RAM/Disk metrics, hover tooltips, and selection state.',
+      },
+    },
+    backgrounds: { default: 'dark' },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    totalUnits: {
+      control: { type: 'number', min: 10, max: 48, step: 1 },
+      description: 'Total rack units available',
+    },
+    showMetrics: {
+      control: 'boolean',
+      description: 'Show CPU/RAM/Disk metrics bars',
+    },
+    animated: {
+      control: 'boolean',
+      description: 'Enable animations',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaServerRack>
+
+export const Default: Story = {
+  args: {
+    servers: sampleServers,
+    totalUnits: 42,
+    showMetrics: true,
+    animated: true,
+  },
+  render: (args) => (
+    <div className="p-8 bg-zinc-950 rounded-2xl">
+      <WakaServerRack {...args} />
+    </div>
+  ),
+}
+
+export const Demo: Story = {
+  render: () => <WakaServerRackDemo />,
+}
+
+export const WithSelection: Story = {
+  render: () => {
+    const [selected, setSelected] = React.useState<string | null>('srv-002')
+
+    return (
+      <div className="p-8 bg-zinc-950 rounded-2xl">
+        <div className="mb-4 text-zinc-300 text-sm">
+          Selected: {selected || 'None'}
+        </div>
+        <WakaServerRack
+          servers={sampleServers}
+          totalUnits={42}
+          selectedServer={selected || undefined}
+          onServerClick={(id) => setSelected(prev => prev === id ? null : id)}
+          showMetrics
+          animated
+        />
+      </div>
+    )
+  },
+}
+
+export const StatusStates: Story = {
+  render: () => {
+    const statusServers: ServerUnit[] = [
+      { id: 's1', name: 'Online Server', unit: 10, height: 2, status: 'online', cpu: 45, ram: 60, disk: 30 },
+      { id: 's2', name: 'Warning Server', unit: 8, height: 2, status: 'warning', cpu: 92, ram: 88, disk: 75 },
+      { id: 's3', name: 'Offline Server', unit: 6, height: 2, status: 'offline', cpu: 0, ram: 0, disk: 0 },
+      { id: 's4', name: 'Maintenance', unit: 4, height: 2, status: 'maintenance', cpu: 5, ram: 10, disk: 20 },
+    ]
+
+    return (
+      <div className="p-8 bg-zinc-950 rounded-2xl">
+        <h3 className="text-zinc-100 font-semibold mb-4">Server Status States</h3>
+        <WakaServerRack
+          servers={statusServers}
+          totalUnits={12}
+          showMetrics
+          animated
+        />
+      </div>
+    )
+  },
+}
+
+export const HighDensity: Story = {
+  render: () => {
+    const denseServers: ServerUnit[] = Array.from({ length: 20 }, (_, i) => ({
+      id: `srv-${i + 1}`,
+      name: `Server ${String(i + 1).padStart(2, '0')}`,
+      unit: i * 2 + 1,
+      height: 1,
+      status: ['online', 'online', 'online', 'warning', 'online'][Math.floor(Math.random() * 5)] as ServerUnit['status'],
+      cpu: Math.floor(Math.random() * 80) + 10,
+      ram: Math.floor(Math.random() * 70) + 20,
+      disk: Math.floor(Math.random() * 60) + 10,
+    }))
+
+    return (
+      <div className="p-8 bg-zinc-950 rounded-2xl">
+        <h3 className="text-zinc-100 font-semibold mb-4">High Density 1U Servers</h3>
+        <WakaServerRack
+          servers={denseServers}
+          totalUnits={42}
+          showMetrics={false}
+          animated
+        />
+      </div>
+    )
+  },
+}
+
+export const SmallRack: Story = {
+  render: () => {
+    const smallServers: ServerUnit[] = [
+      { id: 's1', name: 'App Server', unit: 8, height: 2, status: 'online', cpu: 55, ram: 72, disk: 45 },
+      { id: 's2', name: 'DB Server', unit: 5, height: 3, status: 'online', cpu: 68, ram: 81, disk: 62 },
+      { id: 's3', name: 'NAS', unit: 1, height: 4, status: 'online', cpu: 15, ram: 30, disk: 88 },
+    ]
+
+    return (
+      <div className="p-8 bg-zinc-950 rounded-2xl">
+        <h3 className="text-zinc-100 font-semibold mb-4">12U Cabinet</h3>
+        <WakaServerRack
+          servers={smallServers}
+          totalUnits={12}
+          showMetrics
+          animated
+        />
+      </div>
+    )
+  },
+}
+
+export const NoMetrics: Story = {
+  render: () => (
+    <div className="p-8 bg-zinc-950 rounded-2xl">
+      <WakaServerRack
+        servers={sampleServers}
+        totalUnits={42}
+        showMetrics={false}
+        animated
+      />
+    </div>
+  ),
+}
+
+export const NoAnimations: Story = {
+  render: () => (
+    <div className="p-8 bg-zinc-950 rounded-2xl">
+      <WakaServerRack
+        servers={sampleServers}
+        totalUnits={42}
+        showMetrics
+        animated={false}
+      />
+    </div>
+  ),
+}
+
+export const HighLoad: Story = {
+  render: () => {
+    const highLoadServers: ServerUnit[] = sampleServers.map(server => ({
+      ...server,
+      cpu: Math.min(100, server.cpu + 40),
+      ram: Math.min(100, server.ram + 30),
+      disk: Math.min(100, server.disk + 20),
+      status: server.status === 'online' && server.cpu > 70 ? 'warning' : server.status,
+    }))
+
+    return (
+      <div className="p-8 bg-zinc-950 rounded-2xl">
+        <div className="mb-4">
+          <span className="text-red-400 text-sm font-medium">⚠️ High load detected</span>
+        </div>
+        <WakaServerRack
+          servers={highLoadServers}
+          totalUnits={42}
+          showMetrics
+          animated
+        />
+      </div>
+    )
+  },
+}
+
+export const DataCenterDashboard: Story = {
+  render: () => {
+    const [selected, setSelected] = React.useState<string | null>(null)
+    const selectedServer = sampleServers.find(s => s.id === selected)
+
+    return (
+      <div className="flex gap-6 p-6 bg-zinc-950 rounded-2xl">
+        <div>
+          <h3 className="text-zinc-100 font-semibold mb-2">Rack A-01</h3>
+          <p className="text-zinc-500 text-sm mb-4">
+            {sampleServers.filter(s => s.status === 'online').length} online,{' '}
+            {sampleServers.filter(s => s.status === 'warning').length} warning,{' '}
+            {sampleServers.filter(s => s.status === 'offline').length} offline
+          </p>
+          <WakaServerRack
+            servers={sampleServers}
+            totalUnits={42}
+            selectedServer={selected || undefined}
+            onServerClick={(id) => setSelected(prev => prev === id ? null : id)}
+            showMetrics
+            animated
+          />
+        </div>
+
+        {selectedServer && (
+          <div className="w-64 p-4 bg-zinc-900 rounded-lg border border-zinc-700">
+            <h4 className="font-semibold text-zinc-100 mb-4">{selectedServer.name}</h4>
+            <div className="space-y-3 text-sm">
+              <div className="flex justify-between">
+                <span className="text-zinc-400">Status</span>
+                <span className={
+                  selectedServer.status === 'online' ? 'text-green-400' :
+                  selectedServer.status === 'warning' ? 'text-yellow-400' :
+                  selectedServer.status === 'offline' ? 'text-red-400' :
+                  'text-blue-400'
+                }>
+                  {selectedServer.status.charAt(0).toUpperCase() + selectedServer.status.slice(1)}
+                </span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-zinc-400">Position</span>
+                <span className="text-zinc-200">U{selectedServer.unit}-U{selectedServer.unit + selectedServer.height - 1}</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-zinc-400">Size</span>
+                <span className="text-zinc-200">{selectedServer.height}U</span>
+              </div>
+              <div className="border-t border-zinc-700 my-3" />
+              <div className="space-y-2">
+                <div className="flex justify-between items-center">
+                  <span className="text-zinc-400">CPU</span>
+                  <div className="flex items-center gap-2">
+                    <div className="w-20 h-1.5 rounded-full bg-zinc-800">
+                      <div
+                        className="h-full rounded-full bg-blue-500"
+                        style={{ width: `${selectedServer.cpu}%` }}
+                      />
+                    </div>
+                    <span className="text-zinc-200 w-8 text-right">{selectedServer.cpu}%</span>
+                  </div>
+                </div>
+                <div className="flex justify-between items-center">
+                  <span className="text-zinc-400">RAM</span>
+                  <div className="flex items-center gap-2">
+                    <div className="w-20 h-1.5 rounded-full bg-zinc-800">
+                      <div
+                        className="h-full rounded-full bg-purple-500"
+                        style={{ width: `${selectedServer.ram}%` }}
+                      />
+                    </div>
+                    <span className="text-zinc-200 w-8 text-right">{selectedServer.ram}%</span>
+                  </div>
+                </div>
+                <div className="flex justify-between items-center">
+                  <span className="text-zinc-400">Disk</span>
+                  <div className="flex items-center gap-2">
+                    <div className="w-20 h-1.5 rounded-full bg-zinc-800">
+                      <div
+                        className="h-full rounded-full bg-cyan-500"
+                        style={{ width: `${selectedServer.disk}%` }}
+                      />
+                    </div>
+                    <span className="text-zinc-200 w-8 text-right">{selectedServer.disk}%</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    )
+  },
+}