@wakastellar/ui 2.3.4 → 2.4.0

package/src/blocks/profile/Profile.stories.tsx

@@ -0,0 +1,371 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaProfile, defaultProfileData } from './index'
+import type { ProfileData, ProfileSection } from './index'
+import * as React from 'react'
+import { User, Briefcase, Shield, CreditCard } from 'lucide-react'
+
+const meta: Meta<typeof WakaProfile> = {
+  title: 'Blocks/Profile',
+  component: WakaProfile,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'A user profile component with avatar, personal information, social links, stats, and editable fields. Supports card, page, and compact layouts.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    layout: {
+      control: 'select',
+      options: ['card', 'page', 'compact'],
+    },
+    editable: {
+      control: 'boolean',
+    },
+    showSocialLinks: {
+      control: 'boolean',
+    },
+    showStats: {
+      control: 'boolean',
+    },
+    useTabs: {
+      control: 'boolean',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaProfile>
+
+export const Default: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <WakaProfile profile={defaultProfileData} />
+    </div>
+  ),
+}
+
+export const Editable: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <WakaProfile
+        profile={defaultProfileData}
+        editable
+        onSave={(profile) => {
+          console.log('Save:', profile)
+          return new Promise((resolve) => setTimeout(resolve, 1000))
+        }}
+        onAvatarChange={(file) => console.log('Avatar changed:', file.name)}
+      />
+    </div>
+  ),
+}
+
+export const WithStats: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <WakaProfile
+        profile={defaultProfileData}
+        showStats
+        stats={[
+          { label: 'Projets', value: 42 },
+          { label: 'Abonnés', value: '1.2K' },
+          { label: 'Contributions', value: 856 },
+        ]}
+      />
+    </div>
+  ),
+}
+
+export const PageLayout: Story = {
+  render: () => (
+    <div className="w-[800px] p-6">
+      <WakaProfile
+        profile={defaultProfileData}
+        layout="page"
+        editable
+        showStats
+        stats={[
+          { label: 'Projects', value: 42 },
+          { label: 'Followers', value: '1.2K' },
+          { label: 'Following', value: 256 },
+        ]}
+        onSave={(profile) => {
+          console.log('Save:', profile)
+          return new Promise((resolve) => setTimeout(resolve, 1000))
+        }}
+      />
+    </div>
+  ),
+}
+
+export const PageLayoutWithTabs: Story = {
+  render: () => (
+    <div className="w-[800px] p-6">
+      <WakaProfile
+        profile={defaultProfileData}
+        layout="page"
+        useTabs
+        editable
+        onSave={(profile) => console.log('Save:', profile)}
+      />
+    </div>
+  ),
+}
+
+export const CompactLayout: Story = {
+  render: () => (
+    <div className="w-[400px] p-4 border rounded-lg">
+      <WakaProfile profile={defaultProfileData} layout="compact" />
+    </div>
+  ),
+}
+
+export const NoSocialLinks: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <WakaProfile
+        profile={{
+          ...defaultProfileData,
+          socialLinks: [],
+        }}
+        showSocialLinks={false}
+      />
+    </div>
+  ),
+}
+
+export const MinimalProfile: Story = {
+  render: () => {
+    const minimalProfile: ProfileData = {
+      displayName: 'John Doe',
+      email: 'john.doe@example.com',
+    }
+
+    return (
+      <div className="w-[600px]">
+        <WakaProfile profile={minimalProfile} />
+      </div>
+    )
+  },
+}
+
+export const FullProfile: Story = {
+  render: () => {
+    const fullProfile: ProfileData = {
+      displayName: 'Marie Martin',
+      firstName: 'Marie',
+      lastName: 'Martin',
+      email: 'marie.martin@example.com',
+      phone: '+33 6 98 76 54 32',
+      bio: 'Designer UX/UI passionnée avec plus de 8 ans d\'expérience. J\'aime créer des expériences numériques intuitives et élégantes.',
+      avatarUrl: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Marie',
+      role: 'Senior UX Designer',
+      department: 'Design',
+      company: 'Creative Studio',
+      location: 'Lyon, France',
+      website: 'https://mariemartin.design',
+      joinedAt: new Date('2021-06-15'),
+      socialLinks: [
+        { id: '1', type: 'twitter', url: 'https://twitter.com/mariemartin', label: '@mariemartin' },
+        { id: '2', type: 'github', url: 'https://github.com/mariemartin', label: 'mariemartin' },
+        { id: '3', type: 'linkedin', url: 'https://linkedin.com/in/mariemartin', label: 'Marie Martin' },
+        { id: '4', type: 'website', url: 'https://mariemartin.design', label: 'Portfolio' },
+      ],
+    }
+
+    return (
+      <div className="w-[600px]">
+        <WakaProfile
+          profile={fullProfile}
+          showStats
+          stats={[
+            { label: 'Designs', value: 156 },
+            { label: 'Clients', value: 48 },
+            { label: 'Awards', value: 12 },
+          ]}
+          editable
+          onSave={(profile) => console.log('Save:', profile)}
+        />
+      </div>
+    )
+  },
+}
+
+export const CustomSections: Story = {
+  render: () => {
+    const customSections: ProfileSection[] = [
+      {
+        id: 'personal',
+        title: 'Personal Information',
+        icon: <User className="h-5 w-5" />,
+        fields: [
+          { id: 'displayName', label: 'Display Name', value: defaultProfileData.displayName, type: 'text', required: true },
+          { id: 'email', label: 'Email', value: defaultProfileData.email, type: 'email', required: true },
+          { id: 'phone', label: 'Phone', value: defaultProfileData.phone || '', type: 'tel' },
+        ],
+      },
+      {
+        id: 'security',
+        title: 'Security',
+        icon: <Shield className="h-5 w-5" />,
+        fields: [
+          { id: 'twoFactor', label: 'Two-Factor Authentication', value: 'Enabled', type: 'text', disabled: true },
+          { id: 'lastLogin', label: 'Last Login', value: 'Today at 10:30 AM', type: 'text', disabled: true },
+        ],
+      },
+      {
+        id: 'billing',
+        title: 'Billing',
+        icon: <CreditCard className="h-5 w-5" />,
+        fields: [
+          { id: 'plan', label: 'Current Plan', value: 'Pro', type: 'text', disabled: true },
+          { id: 'billingEmail', label: 'Billing Email', value: defaultProfileData.email, type: 'email' },
+        ],
+      },
+    ]
+
+    return (
+      <div className="w-[600px]">
+        <WakaProfile
+          profile={defaultProfileData}
+          customSections={customSections}
+          editable
+          onSave={(profile) => console.log('Save:', profile)}
+        />
+      </div>
+    )
+  },
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [profile, setProfile] = React.useState(defaultProfileData)
+    const [isEditing, setIsEditing] = React.useState(false)
+    const [saving, setSaving] = React.useState(false)
+
+    const handleSave = async (updatedProfile: ProfileData) => {
+      setSaving(true)
+      await new Promise((resolve) => setTimeout(resolve, 1500))
+      setProfile(updatedProfile)
+      setSaving(false)
+      alert('Profile saved!')
+    }
+
+    return (
+      <div className="w-[600px]">
+        <WakaProfile
+          profile={profile}
+          editable
+          isEditing={isEditing}
+          onEditToggle={setIsEditing}
+          saving={saving}
+          onSave={handleSave}
+          onChange={(field, value) => console.log('Change:', field, value)}
+          onAvatarChange={(file) => {
+            console.log('Avatar:', file.name)
+            // In real app, would upload and set new URL
+          }}
+        />
+      </div>
+    )
+  },
+}
+
+export const ReadOnly: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <WakaProfile
+        profile={defaultProfileData}
+        editable={false}
+        showStats
+        stats={[
+          { label: 'Projects', value: 42 },
+          { label: 'Followers', value: '1.2K' },
+        ]}
+      />
+    </div>
+  ),
+}
+
+export const WithAvatar: Story = {
+  render: () => {
+    const profileWithAvatar: ProfileData = {
+      ...defaultProfileData,
+      avatarUrl: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Jean',
+    }
+
+    return (
+      <div className="w-[600px]">
+        <WakaProfile
+          profile={profileWithAvatar}
+          editable
+          onAvatarChange={(file) => alert(`Uploading: ${file.name}`)}
+          onSave={(profile) => console.log('Save:', profile)}
+        />
+      </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">Profile</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Settings</a>
+          </nav>
+        </div>
+      </header>
+      <main className="p-6 max-w-4xl mx-auto">
+        <WakaProfile
+          profile={{
+            ...defaultProfileData,
+            avatarUrl: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Jean',
+          }}
+          layout="page"
+          editable
+          showStats
+          stats={[
+            { label: 'Projects', value: 42 },
+            { label: 'Followers', value: '1.2K' },
+            { label: 'Following', value: 256 },
+          ]}
+          onSave={(profile) => {
+            console.log('Save:', profile)
+            return new Promise((resolve) => setTimeout(resolve, 1000))
+          }}
+        />
+      </main>
+    </div>
+  ),
+}
+
+export const CompactInList: Story = {
+  render: () => {
+    const users: ProfileData[] = [
+      { displayName: 'Alice Johnson', email: 'alice@example.com', role: 'Developer', avatarUrl: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Alice' },
+      { displayName: 'Bob Smith', email: 'bob@example.com', role: 'Designer', avatarUrl: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Bob' },
+      { displayName: 'Carol Williams', email: 'carol@example.com', role: 'PM', avatarUrl: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Carol' },
+      { displayName: 'David Brown', email: 'david@example.com', role: 'Engineer', avatarUrl: 'https://api.dicebear.com/7.x/avataaars/svg?seed=David' },
+    ]
+
+    return (
+      <div className="w-[400px] border rounded-lg divide-y">
+        <div className="px-4 py-3 font-semibold">Team Members</div>
+        {users.map((user, index) => (
+          <div key={index} className="px-4 py-3 hover:bg-muted/50 cursor-pointer">
+            <WakaProfile profile={user} layout="compact" />
+          </div>
+        ))}
+      </div>
+    )
+  },
+}