@licklist/design 0.78.5-dev.33 → 0.78.5-dev.34

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

@@ -0,0 +1,164 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Select } from './Select'
+
+const meta = {
+  title: 'v2/Components/Select',
+  component: Select,
+  parameters: {
+    layout: 'centered',
+  },
+
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'primary-soft', 'primary-outline', 'secondary', 'destructive-soft', 'destructive-strong', 'info', 'disabled'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    disabled: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof Select>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    variant: 'default',
+    size: 'md',
+    disabled: false,
+  },
+  render: (args) => (
+    <Select {...args}>
+      <option value="">Select</option>
+      <option value="option1">Option 1</option>
+      <option value="option2">Option 2</option>
+      <option value="option3">Option 3</option>
+    </Select>
+  ),
+}
+
+export const Hover: Story = {
+  args: {
+    variant: 'hover',
+    size: 'md',
+    disabled: false,
+  },
+  render: (args) => (
+    <Select {...args}>
+      <option value="">Select</option>
+      <option value="option1">Option 1</option>
+      <option value="option2">Option 2</option>
+      <option value="option3">Option 3</option>
+    </Select>
+  ),
+}
+
+export const Focus: Story = {
+  args: {
+    variant: 'focus',
+    size: 'md',
+    disabled: false,
+  },
+  render: (args) => (
+    <Select {...args}>
+      <option value="">Select</option>
+      <option value="option1">Option 1</option>
+      <option value="option2">Option 2</option>
+      <option value="option3">Option 3</option>
+    </Select>
+  ),
+}
+
+export const Error: Story = {
+  args: {
+    variant: 'error',
+    size: 'md',
+    disabled: false,
+  },
+  render: (args) => (
+    <Select {...args}>
+      <option value="">Select</option>
+      <option value="option1">Option 1</option>
+      <option value="option2">Option 2</option>
+      <option value="option3">Option 3</option>
+    </Select>
+  ),
+}
+
+
+export const Disabled: Story = {
+  args: {
+    variant: 'disabled',
+    size: 'md',
+    disabled: true,
+  },
+  render: (args) => (
+    <Select {...args}>
+      <option value="">Select</option>
+      <option value="option1">Option 1</option>
+      <option value="option2">Option 2</option>
+      <option value="option3">Option 3</option>
+    </Select>
+  ),
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '32px', maxWidth: '900px' }}>
+      <div>
+        <h3 style={{ fontSize: '14px', fontWeight: '600', marginBottom: '8px' }}>Default</h3>
+        <Select variant="default" size="md">
+          <option value="">Select</option>
+          <option value="option1">Option 1</option>
+          <option value="option2">Option 2</option>
+          <option value="option3">Option 3</option>
+        </Select>
+      </div>
+
+      <div>
+        <h3 style={{ fontSize: '14px', fontWeight: '600', marginBottom: '8px' }}>Hover</h3>
+        <Select variant="hover" size="md">
+          <option value="">Select</option>
+          <option value="option1">Option 1</option>
+          <option value="option2">Option 2</option>
+          <option value="option3">Option 3</option>
+        </Select>
+      </div>
+
+      <div>
+        <h3 style={{ fontSize: '14px', fontWeight: '600', marginBottom: '8px' }}>Focus</h3>
+        <Select variant="focus" size="md">
+          <option value="">Select</option>
+          <option value="option1">Option 1</option>
+          <option value="option2">Option 2</option>
+          <option value="option3">Option 3</option>
+        </Select>
+      </div>
+
+      <div>
+        <h3 style={{ fontSize: '14px', fontWeight: '600', marginBottom: '8px' }}>Error</h3>
+        <Select variant="error" size="md">
+          <option value="">Select</option>
+          <option value="option1">Option 1</option>
+          <option value="option2">Option 2</option>
+          <option value="option3">Option 3</option>
+        </Select>
+      </div>
+
+      <div>
+        <h3 style={{ fontSize: '14px', fontWeight: '600', marginBottom: '8px' }}>Disabled</h3>
+        <Select variant="disabled" size="md">
+          <option value="">Select</option>
+          <option value="option1">Option 1</option>
+          <option value="option2">Option 2</option>
+          <option value="option3">Option 3</option>
+        </Select>
+      </div>
+    </div>
+  ),
+}

package/src/v2/components/Select/Select.tsx

@@ -0,0 +1,56 @@
+import React, { HTMLAttributes } from 'react'
+import './Select.scss'
+
+export interface SelectProps extends HTMLAttributes<HTMLSelectElement> {
+  variant?: 'default' | 'hover'| 'focus' | 'error' | 'disabled'
+  size?: 'sm' | 'md' | 'lg'
+  disabled?: boolean
+}
+
+export function Select({ 
+  variant = 'default', 
+  size = 'md', 
+  disabled = false, 
+  className = '',
+  children,
+  ...props 
+}: SelectProps) {
+  const classes = [
+    'select',
+    `select--${variant}`,
+    `select--${size}`,
+    disabled ? 'select--disabled' : '',
+    className
+  ].filter(Boolean).join(' ')
+
+  return (
+    <div className="select-container">
+      <select 
+        className={classes} 
+        disabled={disabled}
+        {...props}
+      >
+        {children}
+      </select>
+      <svg 
+        className="select-arrow"
+        xmlns="http://www.w3.org/2000/svg" 
+        width="11" 
+        height="6" 
+        viewBox="0 0 11 6" 
+        fill="none"
+        aria-hidden="true"
+      >
+        <path 
+          d="M1 1L5.5 5L10 1" 
+          stroke="#626A90" 
+          strokeWidth="2" 
+          strokeLinecap="round" 
+          strokeLinejoin="round"
+        />
+      </svg>
+    </div>
+  )
+}
+
+export default Select

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

@@ -0,0 +1,2 @@
+export { Select } from './Select'
+export type { SelectProps } from './Select'

package/src/v2/components/Tooltip/Tooltip.scss

@@ -0,0 +1,92 @@
+.tooltip-content {
+    z-index: 50;
+    overflow: hidden;
+    border-radius: 6px;
+    border: 1px solid var(--borders-main-border-primary, #E8E9EF);
+    background: var(--surfaces-main-surface-primary, #FFFFFF);
+    padding: 6px 12px;
+    font-family: var(--font-family-sans);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    color: var(--labels-main-label-primary, #121E52);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+    white-space: nowrap;
+    
+    animation-duration: 0.2s;
+    animation-timing-function: ease-out;
+
+    &[data-state='delayed-open'][data-side='top'] {
+        animation-name: tooltip-slide-down;
+    }
+
+    &[data-state='delayed-open'][data-side='bottom'] {
+        animation-name: tooltip-slide-up;
+    }
+
+    &[data-state='delayed-open'][data-side='left'] {
+        animation-name: tooltip-slide-right;
+    }
+
+    &[data-state='delayed-open'][data-side='right'] {
+        animation-name: tooltip-slide-left;
+    }
+
+    &[data-state='closed'] {
+        animation-name: tooltip-fade-out;
+        animation-duration: 0.1s;
+    }
+}
+
+@keyframes tooltip-fade-out {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+@keyframes tooltip-slide-up {
+    from {
+        opacity: 0;
+        transform: translateY(-4px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes tooltip-slide-down {
+    from {
+        opacity: 0;
+        transform: translateY(4px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes tooltip-slide-left {
+    from {
+        opacity: 0;
+        transform: translateX(-4px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes tooltip-slide-right {
+    from {
+        opacity: 0;
+        transform: translateX(4px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}

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

@@ -0,0 +1,164 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { Tooltip } from './Tooltip'
+
+export default {
+    title: 'v2/Components/Tooltip',
+    component: Tooltip,
+    argTypes: {
+        content: { control: 'text' },
+        side: { control: 'select', options: ['top', 'bottom', 'left', 'right'] },
+        sideOffset: { control: 'number' },
+        delayDuration: { control: 'number' },
+        disabled: { control: 'boolean' },
+    },
+    parameters: {
+        layout: 'centered',
+    },
+} as Meta<typeof Tooltip>
+
+type Story = StoryObj<typeof Tooltip>
+
+export const Default: Story = {
+    args: {
+        content: 'Hey Godwin Adebimpe',
+        side: 'bottom',
+        sideOffset: 8,
+        delayDuration: 200,
+    },
+    render: (args) => (
+        <Tooltip {...args}>
+            <button style={{
+                padding: '8px 16px',
+                borderRadius: '8px',
+                border: '1px solid #E8E9EF',
+                background: '#FFFFFF',
+                cursor: 'pointer',
+                fontFamily: 'Geist, sans-serif',
+            }}>
+                Hover me
+            </button>
+        </Tooltip>
+    ),
+}
+
+export const Top: Story = {
+    args: {
+        content: 'Tooltip on top',
+        side: 'top',
+        sideOffset: 8,
+    },
+    render: (args) => (
+        <div style={{ marginTop: '100px' }}>
+            <Tooltip {...args}>
+                <button style={{
+                    padding: '8px 16px',
+                    borderRadius: '8px',
+                    border: '1px solid #E8E9EF',
+                    background: '#FFFFFF',
+                    cursor: 'pointer',
+                    fontFamily: 'Geist, sans-serif',
+                }}>
+                    Hover me
+                </button>
+            </Tooltip>
+        </div>
+    ),
+}
+
+export const Left: Story = {
+    args: {
+        content: 'Tooltip on left',
+        side: 'left',
+        sideOffset: 8,
+    },
+    render: (args) => (
+        <div style={{ marginLeft: '150px' }}>
+            <Tooltip {...args}>
+                <button style={{
+                    padding: '8px 16px',
+                    borderRadius: '8px',
+                    border: '1px solid #E8E9EF',
+                    background: '#FFFFFF',
+                    cursor: 'pointer',
+                    fontFamily: 'Geist, sans-serif',
+                }}>
+                    Hover me
+                </button>
+            </Tooltip>
+        </div>
+    ),
+}
+
+export const Right: Story = {
+    args: {
+        content: 'Tooltip on right',
+        side: 'right',
+        sideOffset: 8,
+    },
+    render: (args) => (
+        <Tooltip {...args}>
+            <button style={{
+                padding: '8px 16px',
+                borderRadius: '8px',
+                border: '1px solid #E8E9EF',
+                background: '#FFFFFF',
+                cursor: 'pointer',
+                fontFamily: 'Geist, sans-serif',
+            }}>
+                Hover me
+            </button>
+        </Tooltip>
+    ),
+}
+
+export const WithAvatar: Story = {
+    args: {
+        content: 'Hey Godwin Adebimpe',
+        side: 'bottom',
+        sideOffset: 8,
+    },
+    render: (args) => (
+        <Tooltip {...args}>
+            <button style={{
+                width: '32px',
+                height: '32px',
+                borderRadius: '50%',
+                background: 'rgba(98, 106, 144, 0.2)',
+                border: '2px solid #626A90',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                cursor: 'pointer',
+                fontFamily: 'Geist, sans-serif',
+                fontSize: '10px',
+                fontWeight: 800,
+                color: '#626A90',
+            }}>
+                GA
+            </button>
+        </Tooltip>
+    ),
+}
+
+export const Disabled: Story = {
+    args: {
+        content: 'This tooltip is disabled',
+        side: 'bottom',
+        sideOffset: 8,
+        disabled: true,
+    },
+    render: (args) => (
+        <Tooltip {...args}>
+            <button style={{
+                padding: '8px 16px',
+                borderRadius: '8px',
+                border: '1px solid #E8E9EF',
+                background: '#FFFFFF',
+                cursor: 'pointer',
+                fontFamily: 'Geist, sans-serif',
+            }}>
+                Hover me (disabled tooltip)
+            </button>
+        </Tooltip>
+    ),
+}

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;
+        }
+    }
+}