@licklist/design 0.78.19 → 0.78.20

package/src/v2/navigation/SidebarUserElement/SidebarUserElement.stories.tsx

@@ -0,0 +1,342 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+import { SidebarUserElement } from './SidebarUserElement'
+
+export default {
+    title: 'v2/Navigation/Sidebar User Element',
+    component: SidebarUserElement,
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['default', 'hover', 'dropdown'],
+            description: 'Visual state of the user element',
+        },
+        userName: {
+            control: 'text',
+            description: 'User display name',
+        },
+        userEmail: {
+            control: 'text',
+            description: 'User email address',
+        },
+        showDropdown: {
+            control: 'boolean',
+            description: 'Whether to show the dropdown menu',
+        },
+        onSiteAdminClick: { action: 'site admin clicked' },
+        onProfileClick: { action: 'profile clicked' },
+        onLogOutClick: { action: 'log out clicked' },
+        onUserClick: { action: 'user clicked' },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes',
+        },
+    },
+    parameters: {
+        layout: 'centered',
+    },
+} as Meta
+
+type Story = StoryObj<typeof SidebarUserElement>
+
+export const Default: Story = {
+    args: {
+        variant: 'default',
+        userName: 'Matt Emmins',
+        userEmail: 'matt.emmins@booked.it',
+        showDropdown: false,
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ width: '252px', height: '56px', border: '1px solid #E8E9EF', borderRadius: '8px' }}>
+                <Story />
+            </div>
+        ),
+    ],
+}
+
+export const Hover: Story = {
+    args: {
+        variant: 'hover',
+        userName: 'Matt Emmins',
+        userEmail: 'matt.emmins@booked.it',
+        showDropdown: false,
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ width: '252px', height: '56px', border: '1px solid #E8E9EF', borderRadius: '8px' }}>
+                <Story />
+            </div>
+        ),
+    ],
+}
+
+export const Dropdown: Story = {
+    args: {
+        variant: 'dropdown',
+        userName: 'Matt Emmins',
+        userEmail: 'matt.emmins@booked.it',
+        showDropdown: true,
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ width: '252px', height: 'auto', border: '1px solid #E8E9EF', borderRadius: '8px' }}>
+                <Story />
+            </div>
+        ),
+    ],
+}
+
+export const Interactive: Story = {
+    render: function (args) {
+        const [variant, setVariant] = React.useState<'default' | 'hover' | 'dropdown'>('default');
+        const [showDropdown, setShowDropdown] = React.useState(false);
+
+        const handleUserClick = () => {
+            args.onUserClick?.();
+            if (variant === 'dropdown') {
+                setShowDropdown(false);
+                setVariant('default');
+            } else {
+                setShowDropdown(true);
+                setVariant('dropdown');
+            }
+        };
+
+        return (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', alignItems: 'center' }}>
+                <div style={{ width: '252px', height: variant === 'dropdown' ? 'auto' : '56px', border: '1px solid #E8E9EF', borderRadius: '8px' }}>
+                    <SidebarUserElement
+                        {...args}
+                        variant={variant}
+                        showDropdown={showDropdown}
+                        onUserClick={handleUserClick}
+                        onSiteAdminClick={() => {
+                            args.onSiteAdminClick?.();
+                            alert('Site Admin clicked!');
+                        }}
+                        onProfileClick={() => {
+                            args.onProfileClick?.();
+                            alert('Profile clicked!');
+                        }}
+                        onLogOutClick={() => {
+                            args.onLogOutClick?.();
+                            alert('Log Out clicked!');
+                        }}
+                    />
+                </div>
+
+                <div style={{ display: 'flex', gap: '8px', flexDirection: 'column', alignItems: 'center' }}>
+                    <div style={{ display: 'flex', gap: '8px' }}>
+                        <button
+                            onClick={() => { setVariant('default'); setShowDropdown(false); }}
+                            style={{
+                                padding: '4px 8px',
+                                backgroundColor: variant === 'default' ? '#14215A' : '#E8E9EF',
+                                color: variant === 'default' ? 'white' : '#121E52',
+                                border: 'none',
+                                borderRadius: '4px',
+                                cursor: 'pointer',
+                                fontSize: '12px'
+                            }}
+                        >
+                            Default
+                        </button>
+                        <button
+                            onClick={() => { setVariant('hover'); setShowDropdown(false); }}
+                            style={{
+                                padding: '4px 8px',
+                                backgroundColor: variant === 'hover' ? '#14215A' : '#E8E9EF',
+                                color: variant === 'hover' ? 'white' : '#121E52',
+                                border: 'none',
+                                borderRadius: '4px',
+                                cursor: 'pointer',
+                                fontSize: '12px'
+                            }}
+                        >
+                            Hover
+                        </button>
+                        <button
+                            onClick={() => { setVariant('dropdown'); setShowDropdown(true); }}
+                            style={{
+                                padding: '4px 8px',
+                                backgroundColor: variant === 'dropdown' ? '#14215A' : '#E8E9EF',
+                                color: variant === 'dropdown' ? 'white' : '#121E52',
+                                border: 'none',
+                                borderRadius: '4px',
+                                cursor: 'pointer',
+                                fontSize: '12px'
+                            }}
+                        >
+                            Dropdown
+                        </button>
+                    </div>
+                    <p style={{ fontSize: '12px', color: '#626A90', margin: '0' }}>
+                        Click the user element to toggle dropdown
+                    </p>
+                </div>
+            </div>
+        );
+    },
+    args: {
+        userName: 'Matt Emmins',
+        userEmail: 'matt.emmins@booked.it',
+    },
+}
+
+export const AllStates: Story = {
+    render: () => (
+        <div style={{ display: 'flex', gap: '16px', alignItems: 'flex-start', padding: '20px', backgroundColor: '#f0f0f0' }}>
+            <div style={{ textAlign: 'center' }}>
+                <div style={{ width: '252px', height: '56px', border: '1px solid #E8E9EF', borderRadius: '8px', marginBottom: '8px' }}>
+                    <SidebarUserElement variant="default" />
+                </div>
+                <span style={{ fontSize: '12px', color: '#626A90' }}>Default</span>
+            </div>
+            <div style={{ textAlign: 'center' }}>
+                <div style={{ width: '252px', height: '56px', border: '1px solid #E8E9EF', borderRadius: '8px', marginBottom: '8px' }}>
+                    <SidebarUserElement variant="hover" />
+                </div>
+                <span style={{ fontSize: '12px', color: '#626A90' }}>Hover</span>
+            </div>
+            <div style={{ textAlign: 'center' }}>
+                <div style={{ width: '252px', height: 'auto', border: '1px solid #E8E9EF', borderRadius: '8px', marginBottom: '8px' }}>
+                    <SidebarUserElement variant="dropdown" showDropdown={true} />
+                </div>
+                <span style={{ fontSize: '12px', color: '#626A90' }}>Dropdown</span>
+            </div>
+        </div>
+    ),
+}
+
+export const InSidebarContext: Story = {
+    render: () => {
+        const [expanded, setExpanded] = React.useState(false)
+
+        return (
+            <div style={{ height: '100vh', display: 'flex', backgroundColor: '#F8F8FA' }}>
+                {/* Sidebar */}
+                <div style={{
+                    width: expanded ? '240px' : '56px',
+                    backgroundColor: '#F8F8FA',
+                    borderRight: '1px solid #E8E9EF',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    position: 'relative'
+                }}>
+                    {/* Sidebar content */}
+                    <div style={{ flex: 1, overflow: 'hidden' }}>
+                        <div style={{ padding: '8px' }}>
+                            <div style={{
+                                height: expanded ? '80px' : '48px',
+                                backgroundColor: '#ffffff',
+                                border: '1px solid #E8E9EF',
+                                borderRadius: '8px',
+                                display: 'flex',
+                                alignItems: 'center',
+                                padding: expanded ? '12px' : '8px',
+                                gap: '8px'
+                            }}>
+                                {expanded ? (
+                                    <>
+                                        <div style={{ width: '40px', height: '40px', borderRadius: '50%', backgroundColor: '#E8E9EF' }} />
+                                        <div style={{ flex: 1 }}>
+                                            <div style={{ fontSize: '15px', fontWeight: 600, color: '#121E52' }}>Venue Name</div>
+                                            <div style={{ fontSize: '10px', color: '#626A90' }}>ID: 123</div>
+                                        </div>
+                                    </>
+                                ) : (
+                                    <div style={{ width: '32px', height: '32px', borderRadius: '50%', backgroundColor: '#14215A', margin: '0 auto' }} />
+                                )}
+                            </div>
+                        </div>
+
+                        {/* Navigation items */}
+                        <div style={{ padding: '4px' }}>
+                            {Array(10).fill(0).map((_, i) => (
+                                <div key={i} style={{
+                                    padding: expanded ? '8px' : '8px',
+                                    marginBottom: '4px',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: '8px'
+                                }}>
+                                    <div style={{
+                                        width: '24px',
+                                        height: '24px',
+                                        backgroundColor: '#E8E9EF',
+                                        borderRadius: '4px'
+                                    }} />
+                                    {expanded && <div style={{ fontSize: '13px', color: '#121E52' }}>Nav Item {i + 1}</div>}
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+
+                    {/* User element at bottom */}
+                    <div style={{
+                        padding: '8px',
+                        backgroundColor: '#F8F8FA',
+                        borderTop: '1px solid #E8E9EF',
+                        position: 'absolute',
+                        bottom: 0,
+                        left: 0,
+                        right: 0
+                    }}>
+                        {expanded ? (
+                            <SidebarUserElement variant="default" showDropdown={false} />
+                        ) : (
+                            <div style={{ display: 'flex', justifyContent: 'center' }}>
+                                <div style={{
+                                    width: '40px',
+                                    height: '40px',
+                                    borderRadius: '50%',
+                                    backgroundColor: '#E8E9EF',
+                                    border: '1px solid #E8E9EF'
+                                }} />
+                            </div>
+                        )}
+                    </div>
+                </div>
+
+                <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
+                    <div style={{
+                        height: '60px',
+                        backgroundColor: '#ffffff',
+                        borderBottom: '1px solid #E8E9EF',
+                        display: 'flex',
+                        alignItems: 'center',
+                        padding: '0 20px',
+                        gap: '12px'
+                    }}>
+                        <button
+                            onClick={() => setExpanded(!expanded)}
+                            style={{
+                                padding: '8px',
+                                backgroundColor: '#14215A',
+                                color: 'white',
+                                border: 'none',
+                                borderRadius: '6px',
+                                cursor: 'pointer',
+                                fontSize: '12px'
+                            }}
+                        >
+                            {expanded ? 'Collapse' : 'Expand'}
+                        </button>
+                        <h1 style={{ margin: 0, fontSize: '18px', color: '#121E52' }}>Dashboard</h1>
+                    </div>
+                    <div style={{ flex: 1, padding: '20px', backgroundColor: '#ffffff', margin: '8px', borderRadius: '8px' }}>
+                        <h2>Main Content</h2>
+                        <p>This shows how the user element integrates with a sidebar layout.</p>
+                        <p style={{ marginTop: '16px', fontSize: '14px', color: '#626A90' }}>
+                            Sidebar is {expanded ? 'expanded' : 'collapsed'}. Click the button to toggle.
+                        </p>
+                        <p style={{ fontSize: '14px', color: '#626A90' }}>
+                            User element shows full info when expanded, and only avatar icon when collapsed.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        )
+    },
+}

package/src/v2/navigation/SidebarUserElement/SidebarUserElement.tsx

@@ -0,0 +1,113 @@
+import React from 'react'
+import './SidebarUserElement.scss'
+
+// Icon assets for dropdown menu items
+const AdminIcon = () => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M12 2L13.09 8.26L22 9L13.09 9.74L12 16L10.91 9.74L2 9L10.91 8.26L12 2Z" fill="var(--fills-main-fill-primary, #14215A)" />
+        <path d="M19 15L20.09 18.26L24 19L20.09 19.74L19 23L17.91 19.74L14 19L17.91 18.26L19 15Z" fill="var(--fills-main-fill-primary, #14215A)" />
+        <path d="M5 15L6.09 18.26L10 19L6.09 19.74L5 23L3.91 19.74L0 19L3.91 18.26L5 15Z" fill="var(--fills-main-fill-primary, #14215A)" />
+    </svg>
+)
+
+const ProfileIcon = () => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12Z" fill="var(--fills-main-fill-primary, #14215A)" />
+        <path d="M12 14C7.58172 14 4 17.5817 4 22H20C20 17.5817 16.4183 14 12 14Z" fill="var(--fills-main-fill-primary, #14215A)" />
+    </svg>
+)
+
+const LogoutIcon = () => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M17 7L15.59 8.41L18.17 11H8V13H18.17L15.59 15.59L17 17L22 12L17 7Z" fill="var(--fills-main-fill-primary, #14215A)" />
+        <path d="M4 5H12V3H4C2.9 3 2 3.9 2 5V19C2 20.1 2.9 21 4 21H12V19H4V5Z" fill="var(--fills-main-fill-primary, #14215A)" />
+    </svg>
+)
+
+export interface SidebarUserElementProps {
+    variant?: 'default' | 'hover' | 'dropdown'
+    userName?: string
+    userEmail?: string
+    showDropdown?: boolean
+    onSiteAdminClick?: () => void
+    onProfileClick?: () => void
+    onLogOutClick?: () => void
+    onUserClick?: () => void
+    className?: string
+}
+
+export const SidebarUserElement: React.FC<SidebarUserElementProps> = ({
+    variant = 'default',
+    userName = 'Matt Emmins',
+    userEmail = 'matt.emmins@booked.it',
+    showDropdown = false,
+    onSiteAdminClick,
+    onProfileClick,
+    onLogOutClick,
+    onUserClick,
+    className,
+}) => {
+    const userInfo = (
+        <div className="sidebar-user-element__user-info">
+            <div className="sidebar-user-element__avatar" data-property-1="No User">
+                <div className="sidebar-user-element__avatar-circle"></div>
+            </div>
+            <div className="sidebar-user-element__user-details">
+                <div className="sidebar-user-element__user-name">{userName}</div>
+                <div className="sidebar-user-element__user-email">{userEmail}</div>
+            </div>
+        </div>
+    )
+
+    const dropdownMenu = (
+        <div className="sidebar-user-element__dropdown">
+            <div className="sidebar-user-element__dropdown-items">
+                <div className="sidebar-user-element__dropdown-item" data-property-1="Default">
+                    <div
+                        className="sidebar-user-element__dropdown-link"
+                        onClick={onSiteAdminClick}
+                    >
+                        <div className="sidebar-user-element__dropdown-icon" data-icon="Admin">
+                            <AdminIcon />
+                        </div>
+                        <div className="sidebar-user-element__dropdown-text">Site Admin</div>
+                    </div>
+                </div>
+
+                <div className="sidebar-user-element__dropdown-item" data-property-1="Default">
+                    <div
+                        className="sidebar-user-element__dropdown-link"
+                        onClick={onProfileClick}
+                    >
+                        <div className="sidebar-user-element__dropdown-icon" data-icon="User Settings">
+                            <ProfileIcon />
+                        </div>
+                        <div className="sidebar-user-element__dropdown-text">Profile</div>
+                    </div>
+                </div>
+
+                <div className="sidebar-user-element__dropdown-item" data-property-1="Default">
+                    <div
+                        className="sidebar-user-element__dropdown-link"
+                        onClick={onLogOutClick}
+                    >
+                        <div className="sidebar-user-element__dropdown-icon" data-icon="Log out">
+                            <LogoutIcon />
+                        </div>
+                        <div className="sidebar-user-element__dropdown-text">Log Out</div>
+                    </div>
+                </div>
+            </div>
+            {userInfo}
+        </div>
+    )
+
+    return (
+        <div
+            className={`sidebar-user-element sidebar-user-element--${variant} ${className || ''}`}
+            onClick={onUserClick}
+        >
+            {showDropdown ? dropdownMenu : userInfo}
+        </div>
+    )
+}

package/src/v2/navigation/SidebarUserElement/index.ts

@@ -0,0 +1,2 @@
+export { SidebarUserElement } from './SidebarUserElement'
+export type { SidebarUserElementProps } from './SidebarUserElement'

package/src/v2/navigation/SidebarWithAuth.stories.tsx

@@ -0,0 +1,208 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+import { SidebarWithAuth } from './SidebarWithAuth'
+import { NAVIGATION_ITEMS } from './config'
+import { useAuth } from '../hooks/useAuth'
+
+export default {
+  title: 'v2/Navigation/Sidebar with Auth',
+  component: SidebarWithAuth,
+  argTypes: {
+    expanded: {
+      control: 'boolean',
+      description: 'Whether the sidebar is expanded',
+    },
+    venueName: { control: 'text' },
+    venueId: { control: 'text' },
+  },
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as Meta
+
+type Story = StoryObj<typeof SidebarWithAuth>
+
+export const WithFullAccess: Story = {
+  args: {
+    expanded: true,
+    navigationItems: NAVIGATION_ITEMS,
+    authCredentials: {
+      roles: ['admin'],
+      permissions: ['view_reports', 'manage_bookings', 'send_messages', 'view_customers', 'view_analytics', 'manage_venue_settings'],
+      isAdmin: true,
+      isVenueUser: true,
+      venueId: '123'
+    },
+    activePath: '/home',
+    onNavigation: (path: string) => {
+      console.log('Navigate to:', path)
+    }
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ display: 'flex', height: '100vh' }}>
+        <Story />
+        <main style={{ flex: 1, padding: '20px', backgroundColor: '#ffffff' }}>
+          <h2>Main Content Area</h2>
+          <p>This is where the main content would be displayed based on the selected navigation item.</p>
+          <div style={{ marginTop: '20px' }}>
+            <h3>Available Pages (based on auth):</h3>
+            <ul>
+              {NAVIGATION_ITEMS.map(item => (
+                <li key={item.id}>
+                  <a href={`#${item.path}`} style={{ color: '#14215A' }}>{item.label}</a>
+                  {' '}
+                  {item.requiredPermissions && (
+                    <span style={{ fontSize: '12px', color: '#626A90' }}>
+                      (requires: {item.requiredPermissions.join(', ')})
+                    </span>
+                  )}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </main>
+      </div>
+    ),
+  ],
+}
+
+export const WithLimitedAccess: Story = {
+  args: {
+    expanded: true,
+    navigationItems: NAVIGATION_ITEMS,
+    authCredentials: {
+      roles: ['venue_user'],
+      permissions: ['view_bookings'],
+      isAdmin: false,
+      isVenueUser: true,
+      venueId: '123'
+    },
+    activePath: '/bookings',
+    onNavigation: (path: string) => {
+      console.log('Navigate to:', path)
+    }
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ display: 'flex', height: '100vh' }}>
+        <Story />
+        <main style={{ flex: 1, padding: '20px', backgroundColor: '#ffffff' }}>
+          <h2>Limited Access User</h2>
+          <p>This user only has access to basic pages without special permissions.</p>
+          <div style={{ marginTop: '20px' }}>
+            <h3>Accessible Pages:</h3>
+            <ul>
+              {NAVIGATION_ITEMS.filter(item => {
+                // Simulate filtering based on auth
+                if (item.requiredPermissions && item.requiredPermissions.length > 0) {
+                  return item.requiredPermissions.some(perm => ['view_bookings'].includes(perm))
+                }
+                if (item.venueRequired) return true
+                return false
+              }).map(item => (
+                <li key={item.id}>
+                  <a href={`#${item.path}`} style={{ color: '#14215A' }}>{item.label}</a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </main>
+      </div>
+    ),
+  ],
+}
+
+export const WithNoAuth: Story = {
+  args: {
+    expanded: true,
+    navigationItems: NAVIGATION_ITEMS,
+    authCredentials: {
+      roles: [],
+      permissions: [],
+      isAdmin: false,
+      isVenueUser: false,
+    },
+    activePath: '/home',
+    onNavigation: (path: string) => {
+      console.log('Navigate to:', path)
+    }
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ display: 'flex', height: '100vh' }}>
+        <Story />
+        <main style={{ flex: 1, padding: '20px', backgroundColor: '#ffffff' }}>
+          <h2>No Auth User</h2>
+          <p>This user has no venue access, so most pages are hidden.</p>
+          <div style={{ marginTop: '20px' }}>
+            <p>Only non-venue-required pages would be visible.</p>
+          </div>
+        </main>
+      </div>
+    ),
+  ],
+}
+
+export const Interactive: Story = {
+  render: (args) => {
+    const [currentPath, setCurrentPath] = React.useState('/home')
+    
+    return (
+      <div style={{ display: 'flex', height: '100vh' }}>
+        <SidebarWithAuth
+          {...args}
+          activePath={currentPath}
+          onNavigation={(path) => {
+            setCurrentPath(path)
+            args.onNavigation?.(path)
+          }}
+        />
+        <main style={{ flex: 1, padding: '20px', backgroundColor: '#ffffff' }}>
+          <h2>Interactive Navigation</h2>
+          <p>Current page: <strong>{currentPath}</strong></p>
+          <p>Click on sidebar items to navigate between pages.</p>
+          <div style={{ marginTop: '20px', padding: '16px', backgroundColor: '#F8F8FA', borderRadius: '8px' }}>
+            <h3>Routes Available:</h3>
+            <ul>
+              {NAVIGATION_ITEMS.map(item => (
+                <li key={item.id}>
+                  <button
+                    onClick={() => setCurrentPath(item.path)}
+                    style={{
+                      padding: '4px 8px',
+                      backgroundColor: currentPath === item.path ? '#14215A' : '#E8E9EF',
+                      color: currentPath === item.path ? 'white' : '#121E52',
+                      border: 'none',
+                      borderRadius: '4px',
+                      cursor: 'pointer',
+                      fontSize: '12px',
+                      margin: '2px'
+                    }}
+                  >
+                    {item.label}
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </main>
+      </div>
+    )
+  },
+  args: {
+    expanded: true,
+    navigationItems: NAVIGATION_ITEMS,
+    authCredentials: {
+      roles: ['admin', 'venue_manager'],
+      permissions: ['view_reports', 'manage_bookings', 'send_messages', 'view_customers', 'view_analytics', 'manage_venue_settings'],
+      isAdmin: true,
+      isVenueUser: true,
+      venueId: '123'
+    },
+    activePath: '/home',
+    onNavigation: (path: string) => {
+      console.log('Navigate to:', path)
+    }
+  },
+}