@wakastellar/ui 2.3.4 → 2.4.0

package/src/blocks/auth-2fa/Auth2FA.stories.tsx

@@ -0,0 +1,308 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  Auth2FA,
+  defaultBackupCodes,
+  defaultStatus,
+} from './index'
+import type { TwoFactorStatus, TwoFactorMethod, BackupCode } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof Auth2FA> = {
+  title: 'Blocks/Auth2FA',
+  component: Auth2FA,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'A two-factor authentication setup wizard supporting authenticator apps, SMS, email, and hardware keys with backup codes management and security tips.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Auth2FA>
+
+export const Default: Story = {
+  render: () => (
+    <div className="p-6 max-w-2xl">
+      <Auth2FA
+        status={{ enabled: false }}
+        availableMethods={['authenticator', 'sms', 'email']}
+        qrCodeUrl="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=otpauth://totp/Example:user@example.com?secret=JBSWY3DPEHPK3PXP&issuer=Example"
+        secretKey="JBSWY3DPEHPK3PXP"
+        onEnable={async (method, code) => {
+          console.log('Enable 2FA:', method, code)
+          await new Promise((resolve) => setTimeout(resolve, 1000))
+          return code === '123456'
+        }}
+        onSendCode={async (method) => {
+          console.log('Send code via:', method)
+          await new Promise((resolve) => setTimeout(resolve, 1000))
+          return true
+        }}
+      />
+    </div>
+  ),
+}
+
+export const Enabled: Story = {
+  render: () => (
+    <div className="p-6 max-w-2xl">
+      <Auth2FA
+        status={defaultStatus}
+        backupCodes={defaultBackupCodes}
+        onDisable={async (code) => {
+          console.log('Disable 2FA with code:', code)
+          await new Promise((resolve) => setTimeout(resolve, 1000))
+          return code === '123456'
+        }}
+        onRegenerateBackupCodes={async () => {
+          console.log('Regenerate backup codes')
+          await new Promise((resolve) => setTimeout(resolve, 1000))
+          return [
+            { code: 'NEW1-1234', used: false },
+            { code: 'NEW2-5678', used: false },
+            { code: 'NEW3-9012', used: false },
+            { code: 'NEW4-3456', used: false },
+            { code: 'NEW5-7890', used: false },
+            { code: 'NEW6-1234', used: false },
+            { code: 'NEW7-5678', used: false },
+            { code: 'NEW8-9012', used: false },
+          ]
+        }}
+      />
+    </div>
+  ),
+}
+
+export const EnabledWithSMS: Story = {
+  render: () => {
+    const smsStatus: TwoFactorStatus = {
+      enabled: true,
+      method: 'sms',
+      phone: '+1 (555) ***-**89',
+      lastVerified: new Date(),
+    }
+
+    return (
+      <div className="p-6 max-w-2xl">
+        <Auth2FA
+          status={smsStatus}
+          backupCodes={defaultBackupCodes}
+          onDisable={async (code) => {
+            await new Promise((resolve) => setTimeout(resolve, 1000))
+            return code === '123456'
+          }}
+        />
+      </div>
+    )
+  },
+}
+
+export const EnabledWithEmail: Story = {
+  render: () => {
+    const emailStatus: TwoFactorStatus = {
+      enabled: true,
+      method: 'email',
+      email: 'u***@example.com',
+      lastVerified: new Date(),
+    }
+
+    return (
+      <div className="p-6 max-w-2xl">
+        <Auth2FA
+          status={emailStatus}
+          backupCodes={defaultBackupCodes}
+          onDisable={async (code) => {
+            await new Promise((resolve) => setTimeout(resolve, 1000))
+            return code === '123456'
+          }}
+        />
+      </div>
+    )
+  },
+}
+
+export const AllMethods: Story = {
+  render: () => (
+    <div className="p-6 max-w-2xl">
+      <Auth2FA
+        status={{ enabled: false }}
+        availableMethods={['authenticator', 'sms', 'email', 'hardware']}
+        qrCodeUrl="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=otpauth://totp/Example:user@example.com?secret=JBSWY3DPEHPK3PXP&issuer=Example"
+        secretKey="JBSWY3DPEHPK3PXP"
+        onEnable={async (method, code) => {
+          console.log('Enable 2FA:', method, code)
+          await new Promise((resolve) => setTimeout(resolve, 1000))
+          return true
+        }}
+        onSendCode={async (method) => {
+          console.log('Send code via:', method)
+          await new Promise((resolve) => setTimeout(resolve, 1000))
+          return true
+        }}
+      />
+    </div>
+  ),
+}
+
+export const AuthenticatorOnly: Story = {
+  render: () => (
+    <div className="p-6 max-w-2xl">
+      <Auth2FA
+        status={{ enabled: false }}
+        availableMethods={['authenticator']}
+        qrCodeUrl="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=otpauth://totp/SecureApp:admin@secureapp.com?secret=ABCDEFGHIJKLMNOP&issuer=SecureApp"
+        secretKey="ABCDEFGHIJKLMNOP"
+        onEnable={async (method, code) => {
+          console.log('Enable authenticator:', code)
+          await new Promise((resolve) => setTimeout(resolve, 1000))
+          return code.length === 6
+        }}
+      />
+    </div>
+  ),
+}
+
+export const LowBackupCodes: Story = {
+  render: () => {
+    const lowCodes: BackupCode[] = [
+      { code: 'LAST-1234', used: false },
+      { code: 'LAST-5678', used: false },
+      { code: 'USED-0001', used: true },
+      { code: 'USED-0002', used: true },
+      { code: 'USED-0003', used: true },
+      { code: 'USED-0004', used: true },
+      { code: 'USED-0005', used: true },
+      { code: 'USED-0006', used: true },
+    ]
+
+    return (
+      <div className="p-6 max-w-2xl">
+        <Auth2FA
+          status={defaultStatus}
+          backupCodes={lowCodes}
+          onRegenerateBackupCodes={async () => {
+            console.log('Regenerate backup codes')
+            await new Promise((resolve) => setTimeout(resolve, 1000))
+            return [
+              { code: 'FRESH-1111', used: false },
+              { code: 'FRESH-2222', used: false },
+              { code: 'FRESH-3333', used: false },
+              { code: 'FRESH-4444', used: false },
+              { code: 'FRESH-5555', used: false },
+              { code: 'FRESH-6666', used: false },
+              { code: 'FRESH-7777', used: false },
+              { code: 'FRESH-8888', used: false },
+            ]
+          }}
+        />
+      </div>
+    )
+  },
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [status, setStatus] = React.useState<TwoFactorStatus>({ enabled: false })
+    const [backupCodes, setBackupCodes] = React.useState<BackupCode[]>([])
+
+    const handleEnable = async (method: TwoFactorMethod, code: string): Promise<boolean> => {
+      await new Promise((resolve) => setTimeout(resolve, 1500))
+      if (code === '123456') {
+        setStatus({ enabled: true, method, lastVerified: new Date() })
+        setBackupCodes([
+          { code: 'DEMO-1111', used: false },
+          { code: 'DEMO-2222', used: false },
+          { code: 'DEMO-3333', used: false },
+          { code: 'DEMO-4444', used: false },
+          { code: 'DEMO-5555', used: false },
+          { code: 'DEMO-6666', used: false },
+          { code: 'DEMO-7777', used: false },
+          { code: 'DEMO-8888', used: false },
+        ])
+        return true
+      }
+      return false
+    }
+
+    const handleDisable = async (code: string): Promise<boolean> => {
+      await new Promise((resolve) => setTimeout(resolve, 1500))
+      if (code === '123456') {
+        setStatus({ enabled: false })
+        setBackupCodes([])
+        return true
+      }
+      return false
+    }
+
+    return (
+      <div className="p-6 max-w-2xl">
+        <div className="mb-4 p-4 bg-muted rounded-lg text-sm">
+          <p className="font-medium">Test Instructions:</p>
+          <p className="text-muted-foreground mt-1">
+            Use code <code className="bg-background px-1 rounded">123456</code> to enable/disable 2FA
+          </p>
+        </div>
+        <Auth2FA
+          status={status}
+          availableMethods={['authenticator', 'sms', 'email']}
+          qrCodeUrl="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=otpauth://totp/Demo:user@demo.com?secret=DEMOSECRETKEY123&issuer=Demo"
+          secretKey="DEMOSECRETKEY123"
+          backupCodes={backupCodes}
+          onEnable={handleEnable}
+          onDisable={handleDisable}
+          onSendCode={async (method) => {
+            alert(`Code sent via ${method}! (Demo: use 123456)`)
+            return true
+          }}
+          onRegenerateBackupCodes={async () => {
+            const newCodes = Array.from({ length: 8 }, (_, i) => ({
+              code: `REGEN-${1000 + i}`,
+              used: false,
+            }))
+            setBackupCodes(newCodes)
+            return newCodes
+          }}
+        />
+      </div>
+    )
+  },
+}
+
+export const SecuritySettings: Story = {
+  render: () => (
+    <div className="min-h-screen bg-muted/30">
+      <header className="bg-background border-b px-6 py-4">
+        <div className="flex items-center justify-between max-w-4xl mx-auto">
+          <div>
+            <h1 className="font-bold text-xl">Security Settings</h1>
+            <p className="text-sm text-muted-foreground">Manage your account security</p>
+          </div>
+          <nav className="flex gap-4 text-sm">
+            <a href="#" className="text-muted-foreground hover:text-foreground">Profile</a>
+            <a href="#" className="text-foreground font-medium">Security</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Notifications</a>
+          </nav>
+        </div>
+      </header>
+      <main className="p-6 max-w-4xl mx-auto">
+        <Auth2FA
+          status={defaultStatus}
+          backupCodes={defaultBackupCodes}
+          onDisable={async (code) => {
+            await new Promise((resolve) => setTimeout(resolve, 1000))
+            return code === '123456'
+          }}
+          onRegenerateBackupCodes={async () => {
+            await new Promise((resolve) => setTimeout(resolve, 1000))
+            return defaultBackupCodes.map((c, i) => ({ ...c, code: `NEW-${i + 1000}`, used: false }))
+          }}
+        />
+      </main>
+    </div>
+  ),
+}

package/src/blocks/calendar-view/CalendarView.stories.tsx

@@ -0,0 +1,398 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaCalendarView, defaultCalendarEvents } from './index'
+import type { CalendarEvent, CalendarViewMode } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof WakaCalendarView> = {
+  title: 'Blocks/CalendarView',
+  component: WakaCalendarView,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'A calendar component with month, week, day, and agenda views. Supports events with colors, locations, attendees, and recurrence.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    viewMode: {
+      control: 'select',
+      options: ['month', 'week', 'day', 'agenda'],
+    },
+    showHeader: {
+      control: 'boolean',
+    },
+    showViewSelector: {
+      control: 'boolean',
+    },
+    showAddButton: {
+      control: 'boolean',
+    },
+    weekStartsOn: {
+      control: 'select',
+      options: [0, 1],
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaCalendarView>
+
+export const Default: Story = {
+  render: () => (
+    <div className="p-6">
+      <WakaCalendarView
+        events={defaultCalendarEvents}
+        onEventClick={(event) => console.log('Event clicked:', event)}
+        onDayClick={(date) => console.log('Day clicked:', date)}
+      />
+    </div>
+  ),
+}
+
+export const MonthView: Story = {
+  render: () => (
+    <div className="p-6">
+      <WakaCalendarView
+        events={defaultCalendarEvents}
+        viewMode="month"
+        onViewModeChange={(mode) => console.log('View mode:', mode)}
+        onEventClick={(event) => console.log('Event:', event)}
+      />
+    </div>
+  ),
+}
+
+export const AgendaView: Story = {
+  render: () => (
+    <div className="p-6">
+      <WakaCalendarView
+        events={defaultCalendarEvents}
+        viewMode="agenda"
+        onEventClick={(event) => console.log('Event:', event)}
+      />
+    </div>
+  ),
+}
+
+export const ManyEvents: Story = {
+  render: () => {
+    const now = new Date()
+    const manyEvents: CalendarEvent[] = [
+      // Today's events
+      {
+        id: '1',
+        title: 'Standup',
+        start: new Date(now.setHours(9, 0, 0, 0)),
+        end: new Date(now.setHours(9, 30, 0, 0)),
+        color: 'blue',
+      },
+      {
+        id: '2',
+        title: 'Design Review',
+        start: new Date(now.setHours(10, 0, 0, 0)),
+        end: new Date(now.setHours(11, 0, 0, 0)),
+        color: 'purple',
+      },
+      {
+        id: '3',
+        title: 'Lunch',
+        start: new Date(now.setHours(12, 0, 0, 0)),
+        end: new Date(now.setHours(13, 0, 0, 0)),
+        color: 'green',
+      },
+      {
+        id: '4',
+        title: 'Sprint Planning',
+        start: new Date(now.setHours(14, 0, 0, 0)),
+        end: new Date(now.setHours(15, 30, 0, 0)),
+        color: 'orange',
+      },
+      {
+        id: '5',
+        title: '1:1 with Manager',
+        start: new Date(now.setHours(16, 0, 0, 0)),
+        end: new Date(now.setHours(16, 30, 0, 0)),
+        color: 'cyan',
+      },
+      // Tomorrow
+      {
+        id: '6',
+        title: 'Team Workshop',
+        start: new Date(Date.now() + 1000 * 60 * 60 * 24),
+        end: new Date(Date.now() + 1000 * 60 * 60 * 24 + 1000 * 60 * 60 * 4),
+        color: 'red',
+        allDay: true,
+      },
+      // More events
+      ...Array.from({ length: 10 }, (_, i) => ({
+        id: `event-${i + 10}`,
+        title: `Meeting ${i + 1}`,
+        start: new Date(Date.now() + 1000 * 60 * 60 * 24 * (i + 2)),
+        end: new Date(Date.now() + 1000 * 60 * 60 * 24 * (i + 2) + 1000 * 60 * 60),
+        color: (['blue', 'green', 'purple', 'orange', 'cyan', 'pink', 'yellow', 'red'] as const)[i % 8],
+      })),
+    ]
+
+    return (
+      <div className="p-6">
+        <WakaCalendarView
+          events={manyEvents}
+          onEventClick={(event) => console.log('Event:', event)}
+        />
+      </div>
+    )
+  },
+}
+
+export const WithLocations: Story = {
+  render: () => {
+    const eventsWithLocations: CalendarEvent[] = [
+      {
+        id: '1',
+        title: 'Team Meeting',
+        start: new Date(),
+        end: new Date(Date.now() + 1000 * 60 * 60),
+        color: 'blue',
+        location: 'Conference Room A',
+      },
+      {
+        id: '2',
+        title: 'Client Call',
+        start: new Date(Date.now() + 1000 * 60 * 60 * 2),
+        end: new Date(Date.now() + 1000 * 60 * 60 * 3),
+        color: 'green',
+        location: 'Zoom Meeting',
+      },
+      {
+        id: '3',
+        title: 'Lunch Meeting',
+        start: new Date(Date.now() + 1000 * 60 * 60 * 24),
+        end: new Date(Date.now() + 1000 * 60 * 60 * 25),
+        color: 'orange',
+        location: 'Restaurant Le Gourmet, 123 Main St',
+      },
+    ]
+
+    return (
+      <div className="p-6">
+        <WakaCalendarView
+          events={eventsWithLocations}
+          viewMode="agenda"
+          onEventClick={(event) => console.log('Event:', event)}
+        />
+      </div>
+    )
+  },
+}
+
+export const AllDayEvents: Story = {
+  render: () => {
+    const allDayEvents: CalendarEvent[] = [
+      {
+        id: '1',
+        title: 'Company Holiday',
+        start: new Date(),
+        end: new Date(),
+        allDay: true,
+        color: 'red',
+      },
+      {
+        id: '2',
+        title: 'Conference Week',
+        start: new Date(Date.now() + 1000 * 60 * 60 * 24 * 3),
+        end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 7),
+        allDay: true,
+        color: 'purple',
+      },
+      {
+        id: '3',
+        title: 'Team Offsite',
+        start: new Date(Date.now() + 1000 * 60 * 60 * 24 * 10),
+        end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 12),
+        allDay: true,
+        color: 'green',
+      },
+    ]
+
+    return (
+      <div className="p-6">
+        <WakaCalendarView
+          events={allDayEvents}
+          onEventClick={(event) => console.log('Event:', event)}
+        />
+      </div>
+    )
+  },
+}
+
+export const WeekStartsSunday: Story = {
+  render: () => (
+    <div className="p-6">
+      <WakaCalendarView
+        events={defaultCalendarEvents}
+        weekStartsOn={0}
+        locale="en-US"
+        onEventClick={(event) => console.log('Event:', event)}
+      />
+    </div>
+  ),
+}
+
+export const NoHeader: Story = {
+  render: () => (
+    <div className="p-6">
+      <WakaCalendarView
+        events={defaultCalendarEvents}
+        showHeader={false}
+      />
+    </div>
+  ),
+}
+
+export const ReadOnly: Story = {
+  render: () => (
+    <div className="p-6">
+      <WakaCalendarView
+        events={defaultCalendarEvents}
+        showAddButton={false}
+        onEventClick={(event) => console.log('View event:', event)}
+      />
+    </div>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [events, setEvents] = React.useState<CalendarEvent[]>(defaultCalendarEvents)
+    const [viewMode, setViewMode] = React.useState<CalendarViewMode>('month')
+    const [currentDate, setCurrentDate] = React.useState(new Date())
+
+    return (
+      <div className="p-6">
+        <div className="mb-4 text-sm text-muted-foreground">
+          Current view: {viewMode} | Date: {currentDate.toLocaleDateString()}
+        </div>
+        <WakaCalendarView
+          events={events}
+          currentDate={currentDate}
+          onDateChange={setCurrentDate}
+          viewMode={viewMode}
+          onViewModeChange={setViewMode}
+          onEventClick={(event) => {
+            console.log('Event clicked:', event)
+            alert(`Event: ${event.title}`)
+          }}
+          onDayClick={(date) => {
+            console.log('Day clicked:', date)
+          }}
+          onEventCreate={(event) => {
+            console.log('Create event:', event)
+          }}
+        />
+      </div>
+    )
+  },
+}
+
+export const ColorfulEvents: Story = {
+  render: () => {
+    const colorfulEvents: CalendarEvent[] = [
+      { id: '1', title: 'Blue Event', start: new Date(), end: new Date(Date.now() + 1000 * 60 * 60), color: 'blue' },
+      { id: '2', title: 'Green Event', start: new Date(Date.now() + 1000 * 60 * 60 * 3), end: new Date(Date.now() + 1000 * 60 * 60 * 4), color: 'green' },
+      { id: '3', title: 'Red Event', start: new Date(Date.now() + 1000 * 60 * 60 * 24), end: new Date(Date.now() + 1000 * 60 * 60 * 25), color: 'red' },
+      { id: '4', title: 'Yellow Event', start: new Date(Date.now() + 1000 * 60 * 60 * 24 * 2), end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 60 * 60), color: 'yellow' },
+      { id: '5', title: 'Purple Event', start: new Date(Date.now() + 1000 * 60 * 60 * 24 * 3), end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 3 + 1000 * 60 * 60 * 2), color: 'purple' },
+      { id: '6', title: 'Pink Event', start: new Date(Date.now() + 1000 * 60 * 60 * 24 * 4), end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 4 + 1000 * 60 * 60), color: 'pink' },
+      { id: '7', title: 'Orange Event', start: new Date(Date.now() + 1000 * 60 * 60 * 24 * 5), end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 5 + 1000 * 60 * 60 * 3), color: 'orange' },
+      { id: '8', title: 'Cyan Event', start: new Date(Date.now() + 1000 * 60 * 60 * 24 * 6), end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 6 + 1000 * 60 * 60), color: 'cyan' },
+    ]
+
+    return (
+      <div className="p-6">
+        <WakaCalendarView
+          events={colorfulEvents}
+          onEventClick={(event) => console.log('Event:', event)}
+        />
+      </div>
+    )
+  },
+}
+
+export const EmptyCalendar: Story = {
+  render: () => (
+    <div className="p-6">
+      <WakaCalendarView
+        events={[]}
+        viewMode="agenda"
+      />
+    </div>
+  ),
+}
+
+export const TeamCalendar: Story = {
+  render: () => {
+    const teamEvents: CalendarEvent[] = [
+      {
+        id: '1',
+        title: 'Daily Standup',
+        description: 'Team sync meeting',
+        start: new Date(new Date().setHours(9, 0, 0, 0)),
+        end: new Date(new Date().setHours(9, 15, 0, 0)),
+        color: 'blue',
+        location: 'Zoom',
+        attendees: [
+          { id: '1', name: 'Alice' },
+          { id: '2', name: 'Bob' },
+          { id: '3', name: 'Carol' },
+        ],
+      },
+      {
+        id: '2',
+        title: 'Sprint Review',
+        description: 'Demo completed work',
+        start: new Date(Date.now() + 1000 * 60 * 60 * 24 * 4),
+        end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 4 + 1000 * 60 * 60),
+        color: 'green',
+        location: 'Conference Room B',
+        attendees: [
+          { id: '1', name: 'Alice' },
+          { id: '2', name: 'Bob' },
+          { id: '3', name: 'Carol' },
+          { id: '4', name: 'David' },
+          { id: '5', name: 'Eve' },
+        ],
+      },
+      {
+        id: '3',
+        title: 'Retrospective',
+        start: new Date(Date.now() + 1000 * 60 * 60 * 24 * 4 + 1000 * 60 * 60 * 2),
+        end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 4 + 1000 * 60 * 60 * 3),
+        color: 'purple',
+        location: 'Conference Room B',
+      },
+    ]
+
+    return (
+      <div className="min-h-screen bg-muted/30">
+        <header className="bg-background border-b px-6 py-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <h1 className="font-bold text-xl">Team Calendar</h1>
+              <p className="text-sm text-muted-foreground">Engineering Team</p>
+            </div>
+          </div>
+        </header>
+        <main className="p-6">
+          <WakaCalendarView
+            events={teamEvents}
+            onEventClick={(event) => console.log('Event:', event)}
+            onEventCreate={(event) => console.log('Create:', event)}
+          />
+        </main>
+      </div>
+    )
+  },
+}