@wakastellar/ui 2.3.4 → 2.4.0

package/src/blocks/settings/Settings.stories.tsx

@@ -0,0 +1,520 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaSettings, defaultSettingsTabs } from './index'
+import type { SettingsTabConfig, SettingsSectionConfig } from './index'
+import * as React from 'react'
+import {
+  User,
+  Bell,
+  Shield,
+  Palette,
+  Globe,
+  CreditCard,
+  Database,
+  Lock,
+  Mail,
+  Smartphone,
+} from 'lucide-react'
+
+const meta: Meta<typeof WakaSettings> = {
+  title: 'Blocks/Settings',
+  component: WakaSettings,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'A settings page component with tabs, sections, and various field types (text, email, password, textarea, switch, select). Supports save actions and account deletion.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    useTabs: {
+      control: 'boolean',
+      description: 'Use tabs for navigation',
+    },
+    showSaveButton: {
+      control: 'boolean',
+      description: 'Show save button',
+    },
+    showDeleteAccount: {
+      control: 'boolean',
+      description: 'Show delete account section',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaSettings>
+
+export const Default: Story = {
+  render: () => (
+    <div className="p-6 max-w-4xl mx-auto">
+      <WakaSettings
+        tabs={defaultSettingsTabs}
+        values={{
+          name: 'Jean Dupont',
+          email: 'jean.dupont@example.com',
+          bio: 'Développeur passionné.',
+          'notif-marketing': false,
+          'notif-security': true,
+          'notif-updates': true,
+          theme: 'system',
+          language: 'fr',
+        }}
+        onSave={(values) => {
+          console.log('Save:', values)
+          return new Promise((resolve) => setTimeout(resolve, 1000))
+        }}
+      />
+    </div>
+  ),
+}
+
+export const WithDeleteAccount: Story = {
+  render: () => (
+    <div className="p-6 max-w-4xl mx-auto">
+      <WakaSettings
+        tabs={defaultSettingsTabs}
+        values={{
+          name: 'Jean Dupont',
+          email: 'jean.dupont@example.com',
+        }}
+        showDeleteAccount
+        onSave={(values) => {
+          console.log('Save:', values)
+          return new Promise((resolve) => setTimeout(resolve, 1000))
+        }}
+        onDeleteAccount={() => {
+          console.log('Delete account')
+          alert('Account deleted!')
+        }}
+      />
+    </div>
+  ),
+}
+
+export const WithoutTabs: Story = {
+  render: () => {
+    const sections: SettingsSectionConfig[] = [
+      {
+        id: 'profile',
+        title: 'Profile Information',
+        description: 'Update your personal information.',
+        icon: <User className="h-5 w-5" />,
+        fields: [
+          {
+            id: 'name',
+            label: 'Full Name',
+            type: 'text',
+            placeholder: 'John Doe',
+            required: true,
+          },
+          {
+            id: 'email',
+            label: 'Email',
+            type: 'email',
+            placeholder: 'john@example.com',
+            required: true,
+          },
+          {
+            id: 'bio',
+            label: 'Bio',
+            type: 'textarea',
+            placeholder: 'Tell us about yourself...',
+          },
+        ],
+      },
+      {
+        id: 'notifications',
+        title: 'Notifications',
+        description: 'Manage your notification preferences.',
+        icon: <Bell className="h-5 w-5" />,
+        fields: [
+          {
+            id: 'email-notifs',
+            label: 'Email Notifications',
+            description: 'Receive notifications via email.',
+            type: 'switch',
+          },
+          {
+            id: 'push-notifs',
+            label: 'Push Notifications',
+            description: 'Receive push notifications.',
+            type: 'switch',
+          },
+        ],
+      },
+    ]
+
+    return (
+      <div className="p-6 max-w-4xl mx-auto">
+        <WakaSettings
+          useTabs={false}
+          sections={sections}
+          values={{
+            name: 'John Doe',
+            email: 'john@example.com',
+            'email-notifs': true,
+            'push-notifs': false,
+          }}
+          onSave={(values) => console.log('Save:', values)}
+        />
+      </div>
+    )
+  },
+}
+
+export const CustomTabs: Story = {
+  render: () => {
+    const customTabs: SettingsTabConfig[] = [
+      {
+        id: 'account',
+        label: 'Account',
+        icon: <User className="h-4 w-4" />,
+        sections: [
+          {
+            id: 'personal',
+            title: 'Personal Information',
+            icon: <User className="h-5 w-5" />,
+            fields: [
+              { id: 'firstName', label: 'First Name', type: 'text', placeholder: 'John' },
+              { id: 'lastName', label: 'Last Name', type: 'text', placeholder: 'Doe' },
+              { id: 'email', label: 'Email', type: 'email', placeholder: 'john@example.com', required: true },
+              { id: 'phone', label: 'Phone', type: 'text', placeholder: '+1 234 567 8900' },
+            ],
+          },
+        ],
+      },
+      {
+        id: 'billing',
+        label: 'Billing',
+        icon: <CreditCard className="h-4 w-4" />,
+        sections: [
+          {
+            id: 'payment',
+            title: 'Payment Method',
+            icon: <CreditCard className="h-5 w-5" />,
+            fields: [
+              {
+                id: 'plan',
+                label: 'Current Plan',
+                type: 'select',
+                options: [
+                  { value: 'free', label: 'Free' },
+                  { value: 'pro', label: 'Pro - $29/month' },
+                  { value: 'enterprise', label: 'Enterprise - Custom' },
+                ],
+              },
+              {
+                id: 'billing-email',
+                label: 'Billing Email',
+                type: 'email',
+                placeholder: 'billing@example.com',
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: 'integrations',
+        label: 'Integrations',
+        icon: <Database className="h-4 w-4" />,
+        sections: [
+          {
+            id: 'apis',
+            title: 'API Access',
+            icon: <Database className="h-5 w-5" />,
+            fields: [
+              {
+                id: 'api-enabled',
+                label: 'Enable API Access',
+                description: 'Allow API access to your account.',
+                type: 'switch',
+              },
+              {
+                id: 'webhook-url',
+                label: 'Webhook URL',
+                type: 'text',
+                placeholder: 'https://your-server.com/webhook',
+              },
+            ],
+          },
+        ],
+      },
+    ]
+
+    return (
+      <div className="p-6 max-w-4xl mx-auto">
+        <WakaSettings
+          title="Account Settings"
+          description="Manage your account settings and preferences."
+          tabs={customTabs}
+          values={{
+            firstName: 'John',
+            lastName: 'Doe',
+            email: 'john@example.com',
+            plan: 'pro',
+            'api-enabled': true,
+          }}
+          onSave={(values) => console.log('Save:', values)}
+        />
+      </div>
+    )
+  },
+}
+
+export const SecuritySettings: Story = {
+  render: () => {
+    const securityTabs: SettingsTabConfig[] = [
+      {
+        id: 'password',
+        label: 'Password',
+        icon: <Lock className="h-4 w-4" />,
+        sections: [
+          {
+            id: 'change-password',
+            title: 'Change Password',
+            description: 'Update your password regularly for better security.',
+            icon: <Lock className="h-5 w-5" />,
+            fields: [
+              { id: 'current-password', label: 'Current Password', type: 'password', placeholder: '••••••••' },
+              { id: 'new-password', label: 'New Password', type: 'password', placeholder: '••••••••' },
+              { id: 'confirm-password', label: 'Confirm Password', type: 'password', placeholder: '••••••••' },
+            ],
+          },
+        ],
+      },
+      {
+        id: '2fa',
+        label: 'Two-Factor Auth',
+        icon: <Smartphone className="h-4 w-4" />,
+        sections: [
+          {
+            id: 'two-factor',
+            title: 'Two-Factor Authentication',
+            description: 'Add an extra layer of security to your account.',
+            icon: <Smartphone className="h-5 w-5" />,
+            fields: [
+              {
+                id: '2fa-enabled',
+                label: 'Enable 2FA',
+                description: 'Use an authenticator app for additional security.',
+                type: 'switch',
+              },
+              {
+                id: '2fa-method',
+                label: 'Authentication Method',
+                type: 'select',
+                options: [
+                  { value: 'app', label: 'Authenticator App' },
+                  { value: 'sms', label: 'SMS' },
+                  { value: 'email', label: 'Email' },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: 'sessions',
+        label: 'Sessions',
+        icon: <Globe className="h-4 w-4" />,
+        sections: [
+          {
+            id: 'active-sessions',
+            title: 'Active Sessions',
+            description: 'Manage your active sessions.',
+            icon: <Globe className="h-5 w-5" />,
+            fields: [
+              {
+                id: 'logout-all',
+                label: 'Log out all other sessions',
+                description: 'This will log you out from all devices except this one.',
+                type: 'switch',
+              },
+            ],
+          },
+        ],
+      },
+    ]
+
+    return (
+      <div className="p-6 max-w-4xl mx-auto">
+        <WakaSettings
+          title="Security Settings"
+          description="Manage your security preferences and protect your account."
+          tabs={securityTabs}
+          values={{
+            '2fa-enabled': true,
+            '2fa-method': 'app',
+          }}
+          showDeleteAccount
+          onSave={(values) => console.log('Save:', values)}
+          onDeleteAccount={() => alert('Account deletion requested')}
+        />
+      </div>
+    )
+  },
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [values, setValues] = React.useState({
+      name: 'Jean Dupont',
+      email: 'jean.dupont@example.com',
+      bio: 'Développeur passionné.',
+      'notif-marketing': false,
+      'notif-security': true,
+      'notif-updates': true,
+      theme: 'system',
+      language: 'fr',
+    })
+    const [saving, setSaving] = React.useState(false)
+
+    const handleSave = async (newValues: Record<string, string | boolean>) => {
+      setSaving(true)
+      await new Promise((resolve) => setTimeout(resolve, 1500))
+      setValues(newValues as typeof values)
+      setSaving(false)
+      alert('Settings saved!')
+    }
+
+    return (
+      <div className="p-6 max-w-4xl mx-auto">
+        <WakaSettings
+          tabs={defaultSettingsTabs}
+          values={values}
+          saving={saving}
+          onChange={(field, value) => console.log('Change:', field, value)}
+          onSave={handleSave}
+        />
+      </div>
+    )
+  },
+}
+
+export const NoSaveButton: Story = {
+  render: () => (
+    <div className="p-6 max-w-4xl mx-auto">
+      <WakaSettings
+        tabs={defaultSettingsTabs}
+        values={{
+          name: 'Jean Dupont',
+          email: 'jean.dupont@example.com',
+        }}
+        showSaveButton={false}
+        onChange={(field, value) => {
+          console.log('Auto-save:', field, value)
+        }}
+      />
+    </div>
+  ),
+}
+
+export const ReadOnly: Story = {
+  render: () => {
+    const readOnlySections: SettingsSectionConfig[] = [
+      {
+        id: 'account',
+        title: 'Account Information',
+        icon: <User className="h-5 w-5" />,
+        fields: [
+          { id: 'name', label: 'Name', type: 'text', value: 'Jean Dupont', disabled: true },
+          { id: 'email', label: 'Email', type: 'email', value: 'jean.dupont@example.com', disabled: true },
+          { id: 'plan', label: 'Plan', type: 'text', value: 'Pro', disabled: true },
+          { id: 'joined', label: 'Member Since', type: 'text', value: 'January 2023', disabled: true },
+        ],
+      },
+    ]
+
+    return (
+      <div className="p-6 max-w-4xl mx-auto">
+        <WakaSettings
+          title="Account Information"
+          description="Your account details (read-only)."
+          useTabs={false}
+          sections={readOnlySections}
+          showSaveButton={false}
+        />
+      </div>
+    )
+  },
+}
+
+export const SingleSection: Story = {
+  render: () => {
+    const profileSection: SettingsSectionConfig = {
+      id: 'profile',
+      title: 'Profile Settings',
+      description: 'Update your public profile information.',
+      icon: <User className="h-5 w-5" />,
+      fields: [
+        { id: 'displayName', label: 'Display Name', type: 'text', placeholder: 'Your public name', required: true },
+        { id: 'username', label: 'Username', type: 'text', placeholder: '@username' },
+        { id: 'website', label: 'Website', type: 'text', placeholder: 'https://yoursite.com' },
+        { id: 'bio', label: 'Bio', type: 'textarea', placeholder: 'Tell the world about yourself...' },
+        {
+          id: 'visibility',
+          label: 'Profile Visibility',
+          type: 'select',
+          options: [
+            { value: 'public', label: 'Public' },
+            { value: 'private', label: 'Private' },
+            { value: 'friends', label: 'Friends Only' },
+          ],
+        },
+      ],
+    }
+
+    return (
+      <div className="p-6 max-w-2xl mx-auto">
+        <WakaSettings
+          title="Profile Settings"
+          useTabs={false}
+          sections={[profileSection]}
+          values={{
+            displayName: 'Jean Dupont',
+            username: '@jeandupont',
+            visibility: 'public',
+          }}
+          onSave={(values) => console.log('Save:', values)}
+        />
+      </div>
+    )
+  },
+}
+
+export const InPageContext: Story = {
+  render: () => (
+    <div className="min-h-screen bg-muted/30">
+      <header className="bg-background border-b px-6 py-4">
+        <div className="max-w-4xl mx-auto flex items-center justify-between">
+          <span className="font-bold text-xl">MyApp</span>
+          <nav className="flex gap-4 text-sm">
+            <a href="#" className="text-muted-foreground hover:text-foreground">Dashboard</a>
+            <a href="#" className="text-foreground font-medium">Settings</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Help</a>
+          </nav>
+        </div>
+      </header>
+      <main className="p-6 max-w-4xl mx-auto">
+        <WakaSettings
+          tabs={defaultSettingsTabs}
+          values={{
+            name: 'Jean Dupont',
+            email: 'jean.dupont@example.com',
+            theme: 'system',
+            language: 'fr',
+          }}
+          showDeleteAccount
+          onSave={(values) => {
+            console.log('Save:', values)
+            return new Promise((resolve) => setTimeout(resolve, 1000))
+          }}
+          onDeleteAccount={() => console.log('Delete account')}
+        />
+      </main>
+    </div>
+  ),
+}