@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-database-card/WakaDatabaseCard.stories.tsx

@@ -0,0 +1,306 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaDatabaseCard, defaultDatabase, defaultDatabases } from './index'
+import type { DatabaseInfo, DatabaseType, DatabaseStatus } from './index'
+import * as React from 'react'
+
+const criticalDatabase: DatabaseInfo = {
+  id: 'critical',
+  name: 'overloaded-db',
+  type: 'postgresql',
+  version: '15.4',
+  host: 'db.example.com',
+  port: 5432,
+  status: 'critical',
+  role: 'primary',
+  metrics: {
+    connectionsActive: 95,
+    connectionsMax: 100,
+    queriesPerSecond: 2500,
+    slowQueries: 45,
+    avgQueryTime: 250,
+    cacheHitRate: 75.5,
+    storageUsed: 180 * 1024 * 1024 * 1024,
+    storageTotal: 200 * 1024 * 1024 * 1024,
+    replicationLag: 2500,
+    uptime: 5 * 24 * 3600,
+  },
+  replicas: 2,
+  tags: ['production', 'critical'],
+}
+
+const warningDatabase: DatabaseInfo = {
+  id: 'warning',
+  name: 'busy-db',
+  type: 'mysql',
+  version: '8.0',
+  host: 'mysql.example.com',
+  port: 3306,
+  status: 'warning',
+  role: 'primary',
+  metrics: {
+    connectionsActive: 72,
+    connectionsMax: 100,
+    queriesPerSecond: 800,
+    slowQueries: 15,
+    avgQueryTime: 85,
+    storageUsed: 150 * 1024 * 1024 * 1024,
+    storageTotal: 200 * 1024 * 1024 * 1024,
+    uptime: 30 * 24 * 3600,
+  },
+  tags: ['staging'],
+}
+
+const offlineDatabase: DatabaseInfo = {
+  id: 'offline',
+  name: 'maintenance-db',
+  type: 'postgresql',
+  version: '14.9',
+  host: 'backup-db.example.com',
+  port: 5432,
+  status: 'offline',
+  role: 'standalone',
+  metrics: {
+    connectionsActive: 0,
+    connectionsMax: 50,
+    queriesPerSecond: 0,
+    slowQueries: 0,
+    avgQueryTime: 0,
+    storageUsed: 50 * 1024 * 1024 * 1024,
+    storageTotal: 100 * 1024 * 1024 * 1024,
+  },
+  lastBackup: new Date(Date.now() - 24 * 3600000),
+  tags: ['backup', 'maintenance'],
+}
+
+const syncingDatabase: DatabaseInfo = {
+  id: 'syncing',
+  name: 'replica-db-1',
+  type: 'postgresql',
+  version: '15.4',
+  host: 'replica-1.example.com',
+  port: 5432,
+  status: 'syncing',
+  role: 'replica',
+  metrics: {
+    connectionsActive: 15,
+    connectionsMax: 100,
+    queriesPerSecond: 250,
+    slowQueries: 0,
+    avgQueryTime: 8,
+    storageUsed: 85 * 1024 * 1024 * 1024,
+    storageTotal: 200 * 1024 * 1024 * 1024,
+    replicationLag: 500,
+    uptime: 2 * 24 * 3600,
+  },
+}
+
+const meta: Meta<typeof WakaDatabaseCard> = {
+  title: 'Components/DevOps/WakaDatabaseCard',
+  component: WakaDatabaseCard,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A database status card with connection metrics, storage usage, query stats, replication info, and health indicators.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    detailed: {
+      control: 'boolean',
+      description: 'Show detailed metrics',
+    },
+    compact: {
+      control: 'boolean',
+      description: 'Compact row mode',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaDatabaseCard>
+
+export const Default: Story = {
+  args: {
+    database: defaultDatabase,
+  },
+  render: (args) => (
+    <div className="w-[450px]">
+      <WakaDatabaseCard
+        {...args}
+        onRefresh={() => console.log('Refresh')}
+        onClick={() => console.log('Click')}
+      />
+    </div>
+  ),
+}
+
+export const Detailed: Story = {
+  render: () => (
+    <div className="w-[450px]">
+      <WakaDatabaseCard
+        database={defaultDatabase}
+        detailed
+        onRefresh={() => console.log('Refresh')}
+      />
+    </div>
+  ),
+}
+
+export const AllStatuses: Story = {
+  render: () => {
+    const databases: DatabaseInfo[] = [
+      { ...defaultDatabase, status: 'healthy' },
+      warningDatabase,
+      criticalDatabase,
+      offlineDatabase,
+      syncingDatabase,
+    ]
+
+    return (
+      <div className="grid grid-cols-1 gap-4 w-[450px]">
+        {databases.map((db) => (
+          <WakaDatabaseCard key={db.id} database={db} compact />
+        ))}
+      </div>
+    )
+  },
+}
+
+export const AllTypes: Story = {
+  render: () => {
+    const types: DatabaseType[] = ['postgresql', 'mysql', 'mongodb', 'redis', 'elasticsearch']
+
+    return (
+      <div className="grid grid-cols-1 gap-4 w-[500px]">
+        {types.map((type) => (
+          <WakaDatabaseCard
+            key={type}
+            database={{
+              ...defaultDatabase,
+              id: type,
+              name: `${type}-db`,
+              type,
+            }}
+            compact
+          />
+        ))}
+      </div>
+    )
+  },
+}
+
+export const Critical: Story = {
+  render: () => (
+    <div className="w-[450px]">
+      <p className="text-sm text-muted-foreground mb-4">
+        Database with critical status (high connections, storage, slow queries)
+      </p>
+      <WakaDatabaseCard
+        database={criticalDatabase}
+        detailed
+        onRefresh={() => console.log('Refresh')}
+      />
+    </div>
+  ),
+}
+
+export const Warning: Story = {
+  render: () => (
+    <div className="w-[450px]">
+      <WakaDatabaseCard
+        database={warningDatabase}
+        detailed
+        onRefresh={() => console.log('Refresh')}
+      />
+    </div>
+  ),
+}
+
+export const Offline: Story = {
+  render: () => (
+    <div className="w-[450px]">
+      <WakaDatabaseCard
+        database={offlineDatabase}
+        detailed
+      />
+    </div>
+  ),
+}
+
+export const Syncing: Story = {
+  render: () => (
+    <div className="w-[450px]">
+      <p className="text-sm text-muted-foreground mb-4">
+        Replica database currently syncing with primary
+      </p>
+      <WakaDatabaseCard
+        database={syncingDatabase}
+        detailed
+        onRefresh={() => console.log('Refresh')}
+      />
+    </div>
+  ),
+}
+
+export const Compact: Story = {
+  render: () => (
+    <div className="space-y-2 w-[500px]">
+      {defaultDatabases.map((db) => (
+        <WakaDatabaseCard
+          key={db.id}
+          database={db}
+          compact
+          onClick={() => console.log('Click:', db.name)}
+        />
+      ))}
+    </div>
+  ),
+}
+
+export const NoActions: Story = {
+  render: () => (
+    <div className="w-[450px]">
+      <p className="text-sm text-muted-foreground mb-4">
+        Read-only view without action buttons
+      </p>
+      <WakaDatabaseCard database={defaultDatabase} detailed />
+    </div>
+  ),
+}
+
+export const DatabaseDashboard: Story = {
+  render: () => {
+    const allDatabases = [...defaultDatabases, criticalDatabase, syncingDatabase]
+
+    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">Database Fleet</h2>
+            <p className="text-sm text-muted-foreground">Production Environment</p>
+          </div>
+          <div className="flex items-center gap-2 text-sm">
+            <span className="text-green-500 font-medium">3 healthy</span>
+            <span className="text-muted-foreground">•</span>
+            <span className="text-yellow-500 font-medium">1 warning</span>
+            <span className="text-muted-foreground">•</span>
+            <span className="text-red-500 font-medium">1 critical</span>
+          </div>
+        </div>
+
+        <div className="space-y-2 w-[550px]">
+          {allDatabases.map((db) => (
+            <WakaDatabaseCard
+              key={db.id}
+              database={db}
+              compact
+              onClick={() => console.log('Click:', db.name)}
+            />
+          ))}
+        </div>
+      </div>
+    )
+  },
+}

package/src/components/waka-date-range-picker/WakaDateRangePicker.stories.tsx

@@ -0,0 +1,339 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaDateRangePicker, type WakaDateRange } from './index'
+import * as React from 'react'
+import { subDays, startOfMonth, endOfMonth } from 'date-fns'
+
+const meta: Meta<typeof WakaDateRangePicker> = {
+  title: 'Components/Forms/WakaDateRangePicker',
+  component: WakaDateRangePicker,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A date range picker with presets, dual calendar view, and day count.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size of the component',
+    },
+    numberOfMonths: {
+      control: 'number',
+      description: 'Number of months to display',
+    },
+    showPresets: {
+      control: 'boolean',
+      description: 'Show preset date ranges',
+    },
+    clearable: {
+      control: 'boolean',
+      description: 'Allow clearing the selection',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the picker',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaDateRangePicker>
+
+export const Default: Story = {
+  render: function DateRangePickerDemo() {
+    const [range, setRange] = React.useState<WakaDateRange | undefined>()
+
+    return (
+      <div className="w-[300px]">
+        <WakaDateRangePicker
+          value={range}
+          onChange={setRange}
+          placeholder="Select date range"
+        />
+      </div>
+    )
+  },
+}
+
+export const WithPresets: Story = {
+  render: function PresetsDemo() {
+    const [range, setRange] = React.useState<WakaDateRange | undefined>()
+
+    return (
+      <div className="w-[300px]">
+        <WakaDateRangePicker
+          value={range}
+          onChange={setRange}
+          showPresets
+          placeholder="Select date range"
+        />
+      </div>
+    )
+  },
+}
+
+export const WithInitialValue: Story = {
+  render: function InitialValueDemo() {
+    const [range, setRange] = React.useState<WakaDateRange | undefined>({
+      from: subDays(new Date(), 7),
+      to: new Date(),
+    })
+
+    return (
+      <div className="w-[300px]">
+        <WakaDateRangePicker
+          value={range}
+          onChange={setRange}
+          showPresets
+        />
+      </div>
+    )
+  },
+}
+
+export const SingleMonth: Story = {
+  render: function SingleMonthDemo() {
+    const [range, setRange] = React.useState<WakaDateRange | undefined>()
+
+    return (
+      <div className="w-[300px]">
+        <WakaDateRangePicker
+          value={range}
+          onChange={setRange}
+          numberOfMonths={1}
+          showPresets={false}
+          placeholder="Single month view"
+        />
+      </div>
+    )
+  },
+}
+
+export const WithMinMax: Story = {
+  render: function MinMaxDemo() {
+    const [range, setRange] = React.useState<WakaDateRange | undefined>()
+    const today = new Date()
+    const minDate = startOfMonth(today)
+    const maxDate = endOfMonth(today)
+
+    return (
+      <div className="w-[300px]">
+        <WakaDateRangePicker
+          value={range}
+          onChange={setRange}
+          minDate={minDate}
+          maxDate={maxDate}
+          showPresets={false}
+          placeholder="This month only"
+        />
+        <p className="text-xs text-muted-foreground mt-2">
+          Restricted to current month
+        </p>
+      </div>
+    )
+  },
+}
+
+export const CustomPresets: Story = {
+  render: function CustomPresetsDemo() {
+    const [range, setRange] = React.useState<WakaDateRange | undefined>()
+
+    const customPresets = [
+      {
+        label: 'Last 3 days',
+        getValue: () => ({
+          from: subDays(new Date(), 2),
+          to: new Date(),
+        }),
+      },
+      {
+        label: 'Last 14 days',
+        getValue: () => ({
+          from: subDays(new Date(), 13),
+          to: new Date(),
+        }),
+      },
+      {
+        label: 'Last 90 days',
+        getValue: () => ({
+          from: subDays(new Date(), 89),
+          to: new Date(),
+        }),
+      },
+    ]
+
+    return (
+      <div className="w-[300px]">
+        <WakaDateRangePicker
+          value={range}
+          onChange={setRange}
+          showPresets
+          presets={customPresets}
+          placeholder="Custom presets"
+        />
+      </div>
+    )
+  },
+}
+
+export const Sizes: Story = {
+  render: function SizesDemo() {
+    const [range, setRange] = React.useState<WakaDateRange | undefined>()
+
+    return (
+      <div className="space-y-4 w-[300px]">
+        <div>
+          <p className="text-sm text-muted-foreground mb-1">Small</p>
+          <WakaDateRangePicker
+            value={range}
+            onChange={setRange}
+            size="sm"
+            showPresets={false}
+          />
+        </div>
+        <div>
+          <p className="text-sm text-muted-foreground mb-1">Medium</p>
+          <WakaDateRangePicker
+            value={range}
+            onChange={setRange}
+            size="md"
+            showPresets={false}
+          />
+        </div>
+        <div>
+          <p className="text-sm text-muted-foreground mb-1">Large</p>
+          <WakaDateRangePicker
+            value={range}
+            onChange={setRange}
+            size="lg"
+            showPresets={false}
+          />
+        </div>
+      </div>
+    )
+  },
+}
+
+export const CustomFormat: Story = {
+  render: function CustomFormatDemo() {
+    const [range, setRange] = React.useState<WakaDateRange | undefined>({
+      from: subDays(new Date(), 7),
+      to: new Date(),
+    })
+
+    return (
+      <div className="w-[300px]">
+        <WakaDateRangePicker
+          value={range}
+          onChange={setRange}
+          dateFormat="MMM d, yyyy"
+          showPresets={false}
+        />
+        <p className="text-xs text-muted-foreground mt-2">
+          Custom date format: MMM d, yyyy
+        </p>
+      </div>
+    )
+  },
+}
+
+export const WithError: Story = {
+  render: () => (
+    <div className="w-[300px]">
+      <WakaDateRangePicker
+        error
+        showPresets={false}
+        placeholder="Required field"
+      />
+      <p className="text-sm text-destructive mt-1">
+        Please select a date range
+      </p>
+    </div>
+  ),
+}
+
+export const NotClearable: Story = {
+  render: function NotClearableDemo() {
+    const [range, setRange] = React.useState<WakaDateRange | undefined>({
+      from: subDays(new Date(), 7),
+      to: new Date(),
+    })
+
+    return (
+      <div className="w-[300px]">
+        <WakaDateRangePicker
+          value={range}
+          onChange={setRange}
+          clearable={false}
+          showPresets={false}
+        />
+        <p className="text-xs text-muted-foreground mt-2">
+          Cannot clear selection
+        </p>
+      </div>
+    )
+  },
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="w-[300px]">
+      <WakaDateRangePicker
+        value={{
+          from: subDays(new Date(), 7),
+          to: new Date(),
+        }}
+        disabled
+        showPresets={false}
+      />
+    </div>
+  ),
+}
+
+export const AnalyticsExample: Story = {
+  render: function AnalyticsDemo() {
+    const [range, setRange] = React.useState<WakaDateRange | undefined>({
+      from: subDays(new Date(), 30),
+      to: new Date(),
+    })
+
+    const getDayCount = () => {
+      if (!range?.from || !range?.to) return 0
+      return Math.ceil(
+        (range.to.getTime() - range.from.getTime()) / (1000 * 60 * 60 * 24)
+      ) + 1
+    }
+
+    return (
+      <div className="space-y-4 w-[400px] p-4 border rounded-lg">
+        <div className="flex items-center justify-between">
+          <h3 className="font-semibold">Analytics Overview</h3>
+          <WakaDateRangePicker
+            value={range}
+            onChange={setRange}
+            showPresets
+            className="w-[200px]"
+          />
+        </div>
+        <div className="grid grid-cols-3 gap-4">
+          <div className="p-3 bg-muted rounded">
+            <p className="text-sm text-muted-foreground">Days</p>
+            <p className="text-2xl font-bold">{getDayCount()}</p>
+          </div>
+          <div className="p-3 bg-muted rounded">
+            <p className="text-sm text-muted-foreground">Visitors</p>
+            <p className="text-2xl font-bold">12,847</p>
+          </div>
+          <div className="p-3 bg-muted rounded">
+            <p className="text-sm text-muted-foreground">Page Views</p>
+            <p className="text-2xl font-bold">45,392</p>
+          </div>
+        </div>
+      </div>
+    )
+  },
+}