@licklist/design 0.78.20 → 0.78.25

package/src/v2/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import './Tooltip.scss'
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const TooltipRoot = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+    React.ElementRef<typeof TooltipPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 8, ...props }, ref) => (
+    <TooltipPrimitive.Content
+        ref={ref}
+        sideOffset={sideOffset}
+        className={`tooltip-content ${className || ''}`.trim()}
+        {...props}
+    />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export interface TooltipProps {
+    content: React.ReactNode
+    children: React.ReactNode
+    side?: 'top' | 'bottom' | 'left' | 'right'
+    sideOffset?: number
+    delayDuration?: number
+    disabled?: boolean
+    className?: string
+    open?: boolean
+}
+
+const Tooltip: React.FC<TooltipProps> = ({
+    content,
+    children,
+    side = 'bottom',
+    sideOffset = 8,
+    delayDuration = 200,
+    disabled = false,
+    className = '',
+    open,
+}) => {
+    if (disabled) {
+        return <>{children}</>
+    }
+
+    return (
+        <TooltipProvider delayDuration={delayDuration}>
+            <TooltipRoot open={open}>
+                <TooltipTrigger asChild>
+                    {children}
+                </TooltipTrigger>
+                <TooltipContent side={side} sideOffset={sideOffset} className={className}>
+                    {content}
+                </TooltipContent>
+            </TooltipRoot>
+        </TooltipProvider>
+    )
+}
+
+export { Tooltip, TooltipProvider, TooltipRoot, TooltipTrigger, TooltipContent }
+export type { TooltipProps }

package/src/v2/components/Tooltip/index.ts

@@ -0,0 +1,8 @@
+export { 
+    Tooltip, 
+    TooltipProvider, 
+    TooltipRoot, 
+    TooltipTrigger, 
+    TooltipContent,
+    type TooltipProps 
+} from './Tooltip'

package/src/v2/components/UserAvatar/UserAvatar.scss

@@ -0,0 +1,62 @@
+.user-avatar {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    overflow: hidden;
+    border: none;
+    background: transparent;
+    padding: 0;
+    cursor: default;
+
+    &--sm {
+        width: 24px;
+        height: 24px;
+    }
+
+    &--md {
+        width: 32px;
+        height: 32px;
+    }
+
+    &--lg {
+        width: 47px;
+        height: 47px;
+    }
+
+    &--clickable {
+        cursor: pointer;
+    }
+
+    &__image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: 50%;
+    }
+
+    &__bg {
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+
+    &__initials {
+        font-family: var(--font-family-sans);
+        font-weight: 800;
+        color: var(--labels-main-label-secondary, #626A90);
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        z-index: 1;
+        text-transform: uppercase;
+        line-height: 1;
+        text-align: center;
+
+        &--active {
+            color: white;
+        }
+    }
+}

package/src/v2/components/UserAvatar/UserAvatar.stories.tsx

@@ -0,0 +1,94 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { UserAvatar } from './UserAvatar'
+
+export default {
+    title: 'v2/Components/UserAvatar',
+    component: UserAvatar,
+    argTypes: {
+        initials: { control: 'text' },
+        avatarUrl: { control: 'text' },
+        size: { control: 'select', options: ['sm', 'md', 'lg'] },
+        isActive: { control: 'boolean' },
+        onClick: { action: 'clicked' },
+    },
+    parameters: {
+        layout: 'centered',
+    },
+} as Meta<typeof UserAvatar>
+
+type Story = StoryObj<typeof UserAvatar>
+
+export const Default: Story = {
+    args: {
+        initials: 'GA',
+        size: 'md',
+        isActive: false,
+    },
+}
+
+export const Small: Story = {
+    args: {
+        initials: 'GA',
+        size: 'sm',
+        isActive: false,
+    },
+}
+
+export const Medium: Story = {
+    args: {
+        initials: 'GA',
+        size: 'md',
+        isActive: false,
+    },
+}
+
+export const Large: Story = {
+    args: {
+        initials: 'GA',
+        size: 'lg',
+        isActive: false,
+    },
+}
+
+export const Active: Story = {
+    args: {
+        initials: 'GA',
+        size: 'md',
+        isActive: true,
+    },
+}
+
+export const WithImage: Story = {
+    args: {
+        avatarUrl: 'https://i.pravatar.cc/150?img=68',
+        size: 'md',
+    },
+}
+
+export const AllSizes: Story = {
+    render: () => (
+        <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+            <UserAvatar initials="GA" size="sm" />
+            <UserAvatar initials="GA" size="md" />
+            <UserAvatar initials="GA" size="lg" />
+        </div>
+    ),
+}
+
+export const AllStates: Story = {
+    render: () => (
+        <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+            <UserAvatar initials="GA" size="md" isActive={false} />
+            <UserAvatar initials="GA" size="md" isActive={true} />
+            <UserAvatar avatarUrl="https://i.pravatar.cc/150?img=68" size="md" />
+        </div>
+    ),
+}
+
+export const Clickable: Story = {
+    args: {
+        initials: 'GA',
+        size: 'md',
+        onClick: () => alert('Avatar clicked!'),
+    },
+}

package/src/v2/components/UserAvatar/UserAvatar.tsx

@@ -0,0 +1,96 @@
+import React from 'react'
+import './UserAvatar.scss'
+
+export interface UserAvatarProps {
+    initials?: string
+    avatarUrl?: string
+    size?: 'sm' | 'md' | 'lg'
+    isActive?: boolean
+    onClick?: () => void
+    className?: string
+}
+
+export const UserAvatar: React.FC<UserAvatarProps> = ({
+    initials = 'U',
+    avatarUrl,
+    size = 'md',
+    isActive = false,
+    onClick,
+    className = '',
+}) => {
+    const sizeMap = {
+        sm: 24,
+        md: 32,
+        lg: 47,
+    }
+
+    const fontSizeMap = {
+        sm: 8,
+        md: 10,
+        lg: 14,
+    }
+
+    const dimension = sizeMap[size]
+    const fontSize = fontSizeMap[size]
+    const radius = dimension / 2 - 1
+
+    const fillColor = isActive 
+        ? 'var(--fills-main-fill-primary, #14215A)' 
+        : 'var(--fills-main-fill-secondary, #626A90)'
+
+    const handleClick = () => {
+        onClick?.()
+    }
+
+    const content = avatarUrl ? (
+        <img src={avatarUrl} alt="Profile" className="user-avatar__image" />
+    ) : (
+        <>
+            <svg 
+                width={dimension} 
+                height={dimension} 
+                viewBox={`0 0 ${dimension} ${dimension}`} 
+                fill="none" 
+                className="user-avatar__bg"
+            >
+                <circle 
+                    cx={dimension / 2} 
+                    cy={dimension / 2} 
+                    r={radius} 
+                    fill={fillColor} 
+                    fillOpacity="0.2" 
+                    stroke={fillColor} 
+                    strokeWidth="2" 
+                />
+            </svg>
+            <span 
+                className={`user-avatar__initials ${isActive ? 'user-avatar__initials--active' : ''}`}
+                style={{ fontSize: `${fontSize}px` }}
+            >
+                {initials}
+            </span>
+        </>
+    )
+
+    if (onClick) {
+        return (
+            <button 
+                className={`user-avatar user-avatar--${size} user-avatar--clickable ${isActive ? 'user-avatar--active' : ''} ${className}`.trim()}
+                onClick={handleClick}
+                type="button"
+                style={{ width: dimension, height: dimension }}
+            >
+                {content}
+            </button>
+        )
+    }
+
+    return (
+        <div 
+            className={`user-avatar user-avatar--${size} ${isActive ? 'user-avatar--active' : ''} ${className}`.trim()}
+            style={{ width: dimension, height: dimension }}
+        >
+            {content}
+        </div>
+    )
+}

package/src/v2/components/UserAvatar/index.ts

@@ -0,0 +1 @@
+export { UserAvatar, type UserAvatarProps } from './UserAvatar'

package/src/v2/components/UserPanel/UserPanel.scss

@@ -0,0 +1,195 @@
+.user-panel__overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.2);
+    z-index: 40;
+    animation: fadeIn 0.2s ease;
+}
+
+.user-panel {
+    position: fixed;
+    right: 0;
+    top: 0;
+    height: 100vh;
+    width: 100%;
+    max-width: 320px;
+    background: var(--surfaces-main-surface-primary, #FFFFFF);
+    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1);
+    z-index: 50;
+    display: flex;
+    flex-direction: column;
+    animation: slideInRight 0.3s ease;
+
+    @media (max-width: 640px) {
+        max-width: 100%;
+    }
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes slideInRight {
+    from { transform: translateX(100%); }
+    to { transform: translateX(0); }
+}
+
+.user-panel__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px;
+    border-bottom: 1px solid var(--borders-main-border-primary, #E8E9EF);
+}
+
+.user-panel__user-info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.user-panel__avatar {
+    width: 32px;
+    height: 32px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    border-radius: 50%;
+
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+}
+
+.user-panel__avatar-bg {
+    position: absolute;
+}
+
+.user-panel__avatar-initials {
+    font-family: var(--font-family-sans);
+    font-size: 10px;
+    font-weight: 800;
+    line-height: 8px;
+    color: var(--labels-main-label-secondary, #626A90);
+    position: relative;
+    margin-top: 2px;
+}
+
+.user-panel__user-details {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.user-panel__greeting {
+    font-family: var(--font-family-sans);
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 18px;
+    color: var(--labels-main-label-primary, #121E52);
+    margin: 0;
+}
+
+.user-panel__email {
+    font-family: var(--font-family-sans);
+    font-size: 12px;
+    line-height: 14px;
+    color: var(--labels-main-label-secondary, #626A90);
+}
+
+.user-panel__close-btn {
+    padding: 8px;
+    border-radius: 8px;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    color: var(--fills-main-fill-primary, #14215A);
+    transition: background 0.2s ease;
+
+    &:hover {
+        background: var(--surfaces-main-surface-primary-hover, #F8F8FA);
+    }
+}
+
+.user-panel__menu {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    padding: 8px;
+    gap: 4px;
+}
+
+.user-panel__menu-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    padding: 8px;
+    border-radius: 8px;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    text-align: left;
+    color: var(--labels-main-label-primary, #121E52);
+    transition: background 0.2s ease;
+    outline: none;
+
+    &:hover {
+        background: var(--surfaces-main-surface-primary-hover, #F8F8FA);
+    }
+
+    &:active {
+        background: var(--surfaces-main-surface-primary-pressed, #F0F0F4);
+    }
+
+    span {
+        font-family: var(--font-family-sans);
+        font-size: 13px;
+        font-weight: 500;
+        line-height: 16px;
+    }
+
+    svg {
+        flex-shrink: 0;
+    }
+}
+
+.user-panel__logout-section {
+    padding: 8px;
+    padding-top: 4px;
+}
+
+.user-panel__footer {
+    padding: 16px;
+    border-top: 1px solid var(--borders-main-border-primary, #E8E9EF);
+    margin-top: auto;
+}
+
+.user-panel__user-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px 8px;
+    background: var(--surfaces-main-surface-tertiary, #E8E9EF);
+    border-radius: 8px;
+    width: fit-content;
+
+    span {
+        font-family: var(--font-family-mono);
+        font-size: 10px;
+        font-weight: 600;
+        line-height: 12px;
+        color: var(--labels-main-label-secondary, #626A90);
+        white-space: nowrap;
+    }
+}

package/src/v2/components/UserPanel/UserPanel.stories.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { UserPanel } from './UserPanel'
+
+const meta: Meta<typeof UserPanel> = {
+    title: 'v2/Components/UserPanel',
+    component: UserPanel,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    argTypes: {
+        isOpen: { control: 'boolean' },
+        userName: { control: 'text' },
+        firstName: { control: 'text' },
+        email: { control: 'text' },
+        initials: { control: 'text' },
+        avatarUrl: { control: 'text' },
+        userNumber: { control: 'number' },
+        userRole: { control: 'text' },
+    },
+}
+
+export default meta
+type Story = StoryObj<typeof UserPanel>
+
+const Template = (args: any) => {
+    const [isOpen, setIsOpen] = useState(args.isOpen)
+
+    return (
+        <div style={{ minHeight: '100vh', background: 'var(--surfaces-main-background-secondary)', padding: '20px' }}>
+            <button 
+                onClick={() => setIsOpen(true)}
+                style={{
+                    padding: '8px 16px',
+                    borderRadius: '8px',
+                    border: '1px solid var(--borders-main-border-primary)',
+                    background: 'var(--surfaces-main-surface-primary)',
+                    cursor: 'pointer',
+                    fontFamily: 'var(--font-family-sans)',
+                }}
+            >
+                Open User Panel
+            </button>
+            <UserPanel
+                {...args}
+                isOpen={isOpen}
+                onClose={() => setIsOpen(false)}
+            />
+        </div>
+    )
+}
+
+export const Default: Story = {
+    render: Template,
+    args: {
+        isOpen: true,
+        userName: 'Godwin Adebimpe',
+        firstName: 'Godwin',
+        email: 'godwin.adebimpe@booked.it',
+        initials: 'GA',
+        userNumber: 15,
+        userRole: 'Super Admin',
+        onProfileClick: () => console.log('Profile clicked'),
+        onLogoutClick: () => console.log('Logout clicked'),
+    },
+}