@wakastellar/ui 2.3.4 → 2.4.0

package/src/blocks/sidebar/WakaSidebar.stories.tsx

@@ -0,0 +1,513 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaSidebar, SidebarLayout, useSidebar } from './index'
+import type { SidebarMenuItem, SidebarUserConfig, SidebarLogoConfig } from './index'
+import * as React from 'react'
+import {
+  Home,
+  Users,
+  Settings,
+  FileText,
+  BarChart3,
+  Mail,
+  Calendar,
+  HelpCircle,
+  Shield,
+  Database,
+  Bell,
+  Layers,
+  Package,
+  CreditCard,
+  Zap,
+} from 'lucide-react'
+
+const defaultMenu: SidebarMenuItem[] = [
+  {
+    id: 'dashboard',
+    label: 'Tableau de bord',
+    icon: <Home className="h-5 w-5" />,
+    href: '/dashboard',
+    active: true,
+  },
+  {
+    id: 'analytics',
+    label: 'Analytics',
+    icon: <BarChart3 className="h-5 w-5" />,
+    href: '/analytics',
+    badge: 'Nouveau',
+  },
+  {
+    id: 'users',
+    label: 'Utilisateurs',
+    icon: <Users className="h-5 w-5" />,
+    children: [
+      { id: 'users-list', label: 'Liste', href: '/users' },
+      { id: 'users-roles', label: 'Rôles', href: '/users/roles' },
+      { id: 'users-permissions', label: 'Permissions', href: '/users/permissions' },
+    ],
+  },
+  {
+    id: 'documents',
+    label: 'Documents',
+    icon: <FileText className="h-5 w-5" />,
+    href: '/documents',
+    badge: 12,
+  },
+  {
+    id: 'calendar',
+    label: 'Calendrier',
+    icon: <Calendar className="h-5 w-5" />,
+    href: '/calendar',
+  },
+  {
+    id: 'messages',
+    label: 'Messages',
+    icon: <Mail className="h-5 w-5" />,
+    href: '/messages',
+    badge: 5,
+  },
+  {
+    id: 'settings',
+    label: 'Paramètres',
+    icon: <Settings className="h-5 w-5" />,
+    children: [
+      { id: 'settings-general', label: 'Général', href: '/settings/general' },
+      { id: 'settings-security', label: 'Sécurité', href: '/settings/security' },
+      { id: 'settings-notifications', label: 'Notifications', href: '/settings/notifications' },
+    ],
+  },
+  {
+    id: 'help',
+    label: 'Aide',
+    icon: <HelpCircle className="h-5 w-5" />,
+    href: '/help',
+  },
+]
+
+const defaultUser: SidebarUserConfig = {
+  name: 'Jean Dupont',
+  email: 'jean.dupont@example.com',
+  avatarUrl: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Jean',
+  initials: 'JD',
+}
+
+const defaultLogo: SidebarLogoConfig = {
+  title: 'WAKASTART',
+  href: '/',
+}
+
+const MockLink = ({ href, children, ...props }: any) => (
+  <a href={href} {...props} onClick={(e) => e.preventDefault()}>
+    {children}
+  </a>
+)
+
+const meta: Meta<typeof WakaSidebar> = {
+  title: 'Blocks/Sidebar',
+  component: WakaSidebar,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'A responsive sidebar with collapsible menu, user dropdown, custom logo, and mobile sheet support.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    userPosition: {
+      control: 'select',
+      options: ['top', 'bottom'],
+    },
+    position: {
+      control: 'select',
+      options: ['fixed', 'relative'],
+    },
+    width: {
+      control: { type: 'range', min: 200, max: 400, step: 10 },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaSidebar>
+
+export const Default: Story = {
+  render: () => (
+    <div className="h-[600px] bg-muted/30">
+      <WakaSidebar
+        logo={defaultLogo}
+        menu={defaultMenu}
+        user={defaultUser}
+        position="relative"
+        LinkComponent={MockLink}
+      />
+    </div>
+  ),
+}
+
+export const WithLogoImage: Story = {
+  render: () => (
+    <div className="h-[600px] bg-muted/30">
+      <WakaSidebar
+        logo={{
+          src: 'https://placehold.co/120x40/3b82f6/white?text=LOGO',
+          alt: 'Logo',
+          title: 'Company',
+          href: '/',
+        }}
+        menu={defaultMenu}
+        user={defaultUser}
+        position="relative"
+        LinkComponent={MockLink}
+      />
+    </div>
+  ),
+}
+
+export const UserOnTop: Story = {
+  render: () => (
+    <div className="h-[600px] bg-muted/30">
+      <WakaSidebar
+        logo={defaultLogo}
+        menu={defaultMenu}
+        user={defaultUser}
+        userPosition="top"
+        position="relative"
+        LinkComponent={MockLink}
+      />
+    </div>
+  ),
+}
+
+export const NoUser: Story = {
+  render: () => (
+    <div className="h-[600px] bg-muted/30">
+      <WakaSidebar
+        logo={defaultLogo}
+        menu={defaultMenu}
+        position="relative"
+        LinkComponent={MockLink}
+      />
+    </div>
+  ),
+}
+
+export const LongMenu: Story = {
+  render: () => {
+    const extendedMenu: SidebarMenuItem[] = [
+      ...defaultMenu,
+      {
+        id: 'security',
+        label: 'Sécurité',
+        icon: <Shield className="h-5 w-5" />,
+        href: '/security',
+      },
+      {
+        id: 'database',
+        label: 'Base de données',
+        icon: <Database className="h-5 w-5" />,
+        children: [
+          { id: 'db-tables', label: 'Tables', href: '/database/tables' },
+          { id: 'db-backups', label: 'Sauvegardes', href: '/database/backups' },
+          { id: 'db-migrations', label: 'Migrations', href: '/database/migrations' },
+        ],
+      },
+      {
+        id: 'notifications',
+        label: 'Notifications',
+        icon: <Bell className="h-5 w-5" />,
+        href: '/notifications',
+        badge: 99,
+      },
+      {
+        id: 'integrations',
+        label: 'Intégrations',
+        icon: <Layers className="h-5 w-5" />,
+        href: '/integrations',
+      },
+      {
+        id: 'packages',
+        label: 'Packages',
+        icon: <Package className="h-5 w-5" />,
+        href: '/packages',
+      },
+      {
+        id: 'billing',
+        label: 'Facturation',
+        icon: <CreditCard className="h-5 w-5" />,
+        href: '/billing',
+      },
+    ]
+
+    return (
+      <div className="h-[600px] bg-muted/30">
+        <WakaSidebar
+          logo={defaultLogo}
+          menu={extendedMenu}
+          user={defaultUser}
+          position="relative"
+          LinkComponent={MockLink}
+        />
+      </div>
+    )
+  },
+}
+
+export const WithFooter: Story = {
+  render: () => (
+    <div className="h-[600px] bg-muted/30">
+      <WakaSidebar
+        logo={defaultLogo}
+        menu={defaultMenu}
+        user={defaultUser}
+        position="relative"
+        footer={
+          <div className="flex items-center gap-2 text-xs text-muted-foreground">
+            <Zap className="h-3 w-3" />
+            <span>Version 2.1.0</span>
+          </div>
+        }
+        LinkComponent={MockLink}
+      />
+    </div>
+  ),
+}
+
+export const WithHeader: Story = {
+  render: () => (
+    <div className="h-[600px] bg-muted/30">
+      <WakaSidebar
+        logo={defaultLogo}
+        menu={defaultMenu}
+        user={defaultUser}
+        position="relative"
+        header={
+          <div className="px-2 py-1 text-xs bg-primary/10 rounded text-primary">
+            Pro Plan
+          </div>
+        }
+        LinkComponent={MockLink}
+      />
+    </div>
+  ),
+}
+
+export const CustomWidth: Story = {
+  render: () => (
+    <div className="h-[600px] bg-muted/30 flex gap-4">
+      <WakaSidebar
+        logo={{ title: 'Narrow' }}
+        menu={defaultMenu.slice(0, 4)}
+        width={200}
+        position="relative"
+        LinkComponent={MockLink}
+      />
+      <WakaSidebar
+        logo={{ title: 'Wide Sidebar' }}
+        menu={defaultMenu.slice(0, 4)}
+        width={320}
+        position="relative"
+        LinkComponent={MockLink}
+      />
+    </div>
+  ),
+}
+
+export const DisabledItems: Story = {
+  render: () => {
+    const menuWithDisabled: SidebarMenuItem[] = [
+      ...defaultMenu.slice(0, 3),
+      {
+        id: 'premium',
+        label: 'Premium Features',
+        icon: <Zap className="h-5 w-5" />,
+        href: '/premium',
+        disabled: true,
+        badge: 'Pro',
+      },
+      ...defaultMenu.slice(3, 5),
+    ]
+
+    return (
+      <div className="h-[600px] bg-muted/30">
+        <WakaSidebar
+          logo={defaultLogo}
+          menu={menuWithDisabled}
+          user={defaultUser}
+          position="relative"
+          LinkComponent={MockLink}
+        />
+      </div>
+    )
+  },
+}
+
+export const SidebarLayoutExample: Story = {
+  render: () => (
+    <div className="h-[600px]">
+      <SidebarLayout
+        sidebar={{
+          logo: defaultLogo,
+          menu: defaultMenu,
+          user: defaultUser,
+          LinkComponent: MockLink,
+        }}
+        sidebarWidth={260}
+      >
+        <div className="p-6">
+          <h1 className="text-2xl font-bold mb-4">Main Content</h1>
+          <p className="text-muted-foreground">
+            This is the main content area. The sidebar is handled by the SidebarLayout component.
+          </p>
+          <div className="mt-6 grid grid-cols-3 gap-4">
+            {[1, 2, 3, 4, 5, 6].map((i) => (
+              <div key={i} className="bg-muted rounded-lg p-4 h-32 flex items-center justify-center">
+                Card {i}
+              </div>
+            ))}
+          </div>
+        </div>
+      </SidebarLayout>
+    </div>
+  ),
+}
+
+export const InteractiveMenu: Story = {
+  render: () => {
+    const [activeId, setActiveId] = React.useState('dashboard')
+
+    const menuWithActive: SidebarMenuItem[] = defaultMenu.map((item) => ({
+      ...item,
+      active: item.id === activeId,
+      onClick: item.children ? undefined : () => setActiveId(item.id),
+      children: item.children?.map((child) => ({
+        ...child,
+        active: child.id === activeId,
+        onClick: () => setActiveId(child.id),
+      })),
+    }))
+
+    return (
+      <div className="h-[600px] bg-muted/30">
+        <p className="absolute top-2 right-4 text-sm text-muted-foreground">
+          Active: {activeId}
+        </p>
+        <WakaSidebar
+          logo={defaultLogo}
+          menu={menuWithActive}
+          user={defaultUser}
+          position="relative"
+          LinkComponent={MockLink}
+        />
+      </div>
+    )
+  },
+}
+
+export const CustomUserActions: Story = {
+  render: () => (
+    <div className="h-[600px] bg-muted/30">
+      <WakaSidebar
+        logo={defaultLogo}
+        menu={defaultMenu}
+        user={{
+          ...defaultUser,
+          actions: [
+            {
+              id: 'profile',
+              label: 'Mon profil',
+              icon: <Users className="h-4 w-4" />,
+              onClick: () => console.log('Profile'),
+            },
+            {
+              id: 'billing',
+              label: 'Facturation',
+              icon: <CreditCard className="h-4 w-4" />,
+              onClick: () => console.log('Billing'),
+            },
+            {
+              id: 'settings',
+              label: 'Paramètres',
+              icon: <Settings className="h-4 w-4" />,
+              onClick: () => console.log('Settings'),
+            },
+            {
+              id: 'logout',
+              label: 'Déconnexion',
+              icon: <HelpCircle className="h-4 w-4" />,
+              variant: 'destructive',
+              onClick: () => console.log('Logout'),
+            },
+          ],
+        }}
+        position="relative"
+        LinkComponent={MockLink}
+      />
+    </div>
+  ),
+}
+
+export const ApplicationLayout: Story = {
+  render: () => (
+    <div className="h-screen flex">
+      <WakaSidebar
+        logo={{
+          title: 'MyApp',
+          component: (
+            <div className="flex items-center gap-2">
+              <div className="h-8 w-8 rounded-lg bg-primary flex items-center justify-center text-primary-foreground font-bold">
+                M
+              </div>
+              <span className="text-lg font-bold">MyApp</span>
+            </div>
+          ),
+          href: '/',
+        }}
+        menu={defaultMenu}
+        user={defaultUser}
+        position="relative"
+        width={260}
+        footer={
+          <div className="text-xs text-muted-foreground/70 text-center">
+            &copy; 2024 MyApp Inc.
+          </div>
+        }
+        LinkComponent={MockLink}
+      />
+      <main className="flex-1 bg-background p-6 overflow-auto">
+        <div className="max-w-4xl mx-auto">
+          <h1 className="text-3xl font-bold mb-2">Welcome back, Jean!</h1>
+          <p className="text-muted-foreground mb-8">
+            Here&apos;s what&apos;s happening with your projects today.
+          </p>
+
+          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4 mb-8">
+            {['Revenue', 'Users', 'Orders', 'Conversion'].map((label, i) => (
+              <div key={label} className="rounded-xl border bg-card p-4">
+                <p className="text-sm text-muted-foreground">{label}</p>
+                <p className="text-2xl font-bold">{(i + 1) * 1234}</p>
+                <p className="text-xs text-green-500">+{(i + 1) * 5}%</p>
+              </div>
+            ))}
+          </div>
+
+          <div className="rounded-xl border bg-card p-6">
+            <h2 className="text-xl font-semibold mb-4">Recent Activity</h2>
+            <div className="space-y-3">
+              {[1, 2, 3, 4, 5].map((i) => (
+                <div key={i} className="flex items-center gap-3 py-2 border-b last:border-0">
+                  <div className="h-8 w-8 rounded-full bg-muted" />
+                  <div className="flex-1">
+                    <p className="text-sm font-medium">Activity item {i}</p>
+                    <p className="text-xs text-muted-foreground">{i} hours ago</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  ),
+}

package/src/blocks/sidebar/index.tsx

@@ -78,6 +78,10 @@ export interface SidebarLogoConfig {
   component?: React.ReactNode
 }
 
+// Re-export du type partagé
+export type { LinkComponentProps } from "../../types/link"
+import type { LinkComponentProps } from "../../types/link"
+
 export interface WakaSidebarProps {
   /** Configuration du logo */
   logo?: SidebarLogoConfig
@@ -119,6 +123,8 @@ export interface WakaSidebarProps {
   header?: React.ReactNode
   /** Mode de positionnement : "fixed" pour app layout, "relative" pour preview/demo */
   position?: "fixed" | "relative"
+  /** Composant de lien personnalisé (ex: next/link) pour navigation SPA */
+  LinkComponent?: React.ComponentType<LinkComponentProps>
 }
 
 // ============ CONTEXT ============
@@ -131,6 +137,7 @@ interface SidebarContextValue {
   isMobile: boolean
   closeOnNavigate: boolean
   onClose: () => void
+  LinkComponent?: React.ComponentType<LinkComponentProps>
 }
 
 const SidebarContext = React.createContext<SidebarContextValue | null>(null)
@@ -149,6 +156,8 @@ function useSidebarContext() {
  * Logo de la sidebar
  */
 function SidebarLogo({ config }: { config: SidebarLogoConfig }) {
+  const { LinkComponent } = useSidebarContext()
+
   const content = config.component ? (
     config.component
   ) : (
@@ -167,6 +176,13 @@ function SidebarLogo({ config }: { config: SidebarLogoConfig }) {
   )
 
   if (config.href) {
+    if (LinkComponent) {
+      return (
+        <LinkComponent href={config.href} className="block" onClick={config.onClick}>
+          {content}
+        </LinkComponent>
+      )
+    }
     return (
       <a href={config.href} className="block" onClick={config.onClick}>
         {content}
@@ -197,7 +213,7 @@ function SidebarMenuItemComponent({
   isChild?: boolean
   renderItem?: (item: SidebarMenuItem, isChild: boolean) => React.ReactNode
 }) {
-  const { activeId, setActiveId, expandedIds, toggleExpanded, isMobile, closeOnNavigate, onClose } =
+  const { activeId, setActiveId, expandedIds, toggleExpanded, isMobile, closeOnNavigate, onClose, LinkComponent } =
     useSidebarContext()
 
   const hasChildren = item.children && item.children.length > 0
@@ -284,21 +300,23 @@ function SidebarMenuItemComponent({
 
   // Lien ou bouton simple
   if (item.href) {
-    return (
-      <a
-        href={item.href}
-        onClick={(e) => {
-          if (item.disabled) {
-            e.preventDefault()
-            return
-          }
-          handleClick()
-        }}
-        className="block"
-      >
-        {itemContent}
-      </a>
-    )
+    const linkProps = {
+      href: item.href,
+      className: "block",
+      onClick: (e: React.MouseEvent) => {
+        if (item.disabled) {
+          e.preventDefault()
+          return
+        }
+        handleClick()
+      },
+    }
+
+    if (LinkComponent) {
+      return <LinkComponent {...linkProps}>{itemContent}</LinkComponent>
+    }
+
+    return <a {...linkProps}>{itemContent}</a>
   }
 
   return (
@@ -317,6 +335,8 @@ function SidebarMenuItemComponent({
  * Menu utilisateur
  */
 function SidebarUser({ config }: { config: SidebarUserConfig }) {
+  const { LinkComponent } = useSidebarContext()
+
   const initials =
     config.initials ||
     config.name
@@ -366,10 +386,17 @@ function SidebarUser({ config }: { config: SidebarUserConfig }) {
               asChild={!!action.href}
             >
               {action.href ? (
-                <a href={action.href} className="flex items-center gap-2">
-                  {action.icon}
-                  {action.label}
-                </a>
+                LinkComponent ? (
+                  <LinkComponent href={action.href} className="flex items-center gap-2">
+                    {action.icon}
+                    {action.label}
+                  </LinkComponent>
+                ) : (
+                  <a href={action.href} className="flex items-center gap-2">
+                    {action.icon}
+                    {action.label}
+                  </a>
+                )
               ) : (
                 <span className="flex items-center gap-2">
                   {action.icon}
@@ -487,6 +514,7 @@ export function WakaSidebar({
   footer,
   header,
   position = "fixed",
+  LinkComponent,
 }: WakaSidebarProps) {
   // État interne pour mobile si non contrôlé
   const [internalOpen, setInternalOpen] = React.useState(false)
@@ -552,6 +580,7 @@ export function WakaSidebar({
     isMobile,
     closeOnNavigate: true,
     onClose: () => setIsOpen(false),
+    LinkComponent,
   }
 
   // Styles personnalisés - utilise les variables CSS du thème par défaut