@licklist/design 0.78.5-dev.88 → 0.78.5-dev.9

package/src/v2/components/TableControls/TableControls.tsx

@@ -1,110 +0,0 @@
-import React from 'react'
-import { Button } from '../Button'
-import { QuickFilter } from '../QuickFilter'
-import type { QuickFilterOption } from '../QuickFilter'
-import './TableControls.scss'
-
-// ─── Types ────────────────────────────────────────────────────────────────────
-
-export interface TableSearchConfig {
-  label?: string
-  placeholder?: string
-  value: string
-  onChange: (value: string) => void
-}
-
-export interface TableFilterConfig {
-  label: string
-  value: string
-  isActive: boolean
-  onClick: () => void
-}
-
-export interface TableHeaderAction {
-  label: string
-  icon?: React.ReactNode
-  onClick: () => void
-  variant?: 'primary' | 'primary-soft' | 'secondary-soft' | 'tertiary-soft' | 'primary-outline' | 'outline' | 'secondary' | 'destructive-soft' | 'destructive-strong' | 'info'
-}
-
-export interface TableControlsProps {
-  searchConfig?: TableSearchConfig
-  filters?: TableFilterConfig[]
-  actions?: TableHeaderAction[]
-  filterLabel?: string
-}
-
-// ─── Component ────────────────────────────────────────────────────────────────
-
-export const TableControls: React.FC<TableControlsProps> = ({
-  searchConfig,
-  filters,
-  actions,
-  filterLabel = 'Quick Filters:',
-}) => {
-  const filterOptions: QuickFilterOption[] = (filters ?? []).map((f) => ({
-    label: f.label,
-    value: f.value,
-  }))
-  const selectedFilterValues = (filters ?? [])
-    .filter((f) => f.isActive)
-    .map((f) => f.value)
-
-  const handleFilterChange = (selected: string[]) => {
-    ;(filters ?? []).forEach((f) => {
-      const wasActive = f.isActive
-      const nowActive = selected.includes(f.value)
-      if (wasActive !== nowActive) f.onClick()
-    })
-  }
-
-  return (
-    <div className="table-controls">
-      {/* ── Search + actions row ── */}
-      {(searchConfig || (actions && actions.length > 0)) && (
-        <div className="table-controls__top-row">
-          {searchConfig && (
-            <div className="table-controls__search-group">
-              {searchConfig.label && (
-                <label className="table-controls__search-label">
-                  {searchConfig.label}
-                </label>
-              )}
-              <input
-                className="table-controls__search"
-                type="text"
-                placeholder={searchConfig.placeholder ?? 'Search…'}
-                value={searchConfig.value}
-                onChange={(e) => searchConfig.onChange(e.target.value)}
-              />
-            </div>
-          )}
-
-          {actions && actions.length > 0 && (
-            <div
-              className="table-controls__actions"
-              style={searchConfig?.label ? { marginTop: '22px' } : undefined}
-            >
-              {actions.map((action, i) => (
-                <Button key={i} variant={action.variant ?? 'primary'} onClick={action.onClick}>
-                  {action.icon}
-                  {action.label}
-                </Button>
-              ))}
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* ── Quick filters row ── */}
-      {filterOptions.length > 0 && (
-        <QuickFilter
-          label={filterLabel}
-          options={filterOptions}
-          selectedValues={selectedFilterValues}
-          onChange={handleFilterChange}
-        />
-      )}
-    </div>
-  )
-}

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

@@ -1,7 +0,0 @@
-export { TableControls } from './TableControls'
-export type {
-  TableControlsProps,
-  TableSearchConfig,
-  TableFilterConfig,
-  TableHeaderAction,
-} from './TableControls'

package/src/v2/components/TableSortIcon/TableSortIcon.tsx

@@ -1,18 +0,0 @@
-import React from 'react'
-import { TableHeaderArrowUpIcon, TableHeaderArrowDownIcon} from '../../icons'
-
-export type SortDirection = 'asc' | 'desc' | null
-
-export interface TableSortIconProps {
-  active?: boolean
-  direction: SortDirection
-  className?: string
-}
-
-export const TableSortIcon: React.FC<TableSortIconProps> = ({ active = false, direction, className = '' }) => {
-  return (
-    <span className={className} style={{ visibility: active && direction ? 'visible' : 'hidden' }}>
-      {direction === 'asc' ? <TableHeaderArrowUpIcon /> : <TableHeaderArrowDownIcon />}
-    </span>
-  )
-}

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

@@ -1 +0,0 @@
-export * from './TableSortIcon'

package/src/v2/components/Tabs/Tabs.scss

@@ -1,36 +0,0 @@
-@import '../../styles/index.scss';
-
-.tabs {
-  display: flex;
-  gap: 0;
-  border-bottom: 1px solid var(--border-primary, #e8e9ef);
-
-  &__tab {
-    background: none;
-    border: none;
-    border-bottom: 2px solid transparent;
-    padding: 12px 16px;
-    font-size: 14px;
-    font-weight: 500;
-    font-family: var(--font-family-sans);
-    color: var(--label-secondary, #626a90);
-    cursor: pointer;
-    position: relative;
-    margin-bottom: -1px;
-    transition: color 0.15s ease;
-
-    &:hover:not(:disabled) {
-      color: var(--label-primary, #121e52);
-    }
-
-    &--active {
-      color: var(--label-primary, #121e52);
-      border-bottom-color: var(--border-selected, #6200ee);
-    }
-
-    &--disabled {
-      opacity: 0.4;
-      cursor: not-allowed;
-    }
-  }
-}

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

@@ -1,75 +0,0 @@
-import React, { useState } from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
-import { Tabs } from './Tabs'
-
-const meta: Meta<typeof Tabs> = {
-  title: 'v2/Components/Tabs',
-  component: Tabs,
-  parameters: { layout: 'centered' },
-}
-
-export default meta
-
-type Story = StoryObj<typeof Tabs>
-
-export const Default: Story = {
-  render: () => {
-    const [activeTab, setActiveTab] = useState('overview')
-
-    return (
-      <div style={{ width: 400 }}>
-        <Tabs
-          tabs={[
-            { value: 'overview', label: 'Overview' },
-            { value: 'details', label: 'Details' },
-            { value: 'history', label: 'History' },
-          ]}
-          activeTab={activeTab}
-          onChange={setActiveTab}
-        />
-      </div>
-    )
-  },
-}
-
-export const ManyTabs: Story = {
-  render: () => {
-    const [activeTab, setActiveTab] = useState('bookings')
-
-    return (
-      <div style={{ width: 600 }}>
-        <Tabs
-          tabs={[
-            { value: 'bookings', label: 'Bookings' },
-            { value: 'payments', label: 'Payments' },
-            { value: 'reviews', label: 'Reviews' },
-            { value: 'analytics', label: 'Analytics' },
-            { value: 'settings', label: 'Settings' },
-          ]}
-          activeTab={activeTab}
-          onChange={setActiveTab}
-        />
-      </div>
-    )
-  },
-}
-
-export const WithDisabled: Story = {
-  render: () => {
-    const [activeTab, setActiveTab] = useState('active')
-
-    return (
-      <div style={{ width: 400 }}>
-        <Tabs
-          tabs={[
-            { value: 'active', label: 'Active' },
-            { value: 'pending', label: 'Pending', disabled: true },
-            { value: 'archived', label: 'Archived' },
-          ]}
-          activeTab={activeTab}
-          onChange={setActiveTab}
-        />
-      </div>
-    )
-  },
-}

package/src/v2/components/Tabs/Tabs.tsx

@@ -1,52 +0,0 @@
-import React from 'react'
-import './Tabs.scss'
-
-export interface TabItem {
-  value: string
-  label: string
-  disabled?: boolean
-}
-
-export interface TabsProps {
-  tabs: TabItem[]
-  activeTab: string
-  onChange(value: string): void
-  className?: string
-}
-
-export const Tabs: React.FC<TabsProps> = ({
-  tabs,
-  activeTab,
-  onChange,
-  className = '',
-}) => (
-  <div className={`tabs ${className}`}>
-    {tabs.map((tab) => {
-      const isActive = tab.value === activeTab
-      const isDisabled = tab.disabled ?? false
-
-      const modifiers = [
-        isActive ? 'tabs__tab--active' : '',
-        isDisabled ? 'tabs__tab--disabled' : '',
-      ]
-        .filter(Boolean)
-        .join(' ')
-
-      return (
-        <button
-          key={tab.value}
-          type="button"
-          className={`tabs__tab ${modifiers}`}
-          disabled={isDisabled}
-          onClick={() => {
-            if (!isDisabled) {
-              onChange(tab.value)
-            }
-          }}
-        >
-          {tab.label}
-        </button>
-      )
-    })}
-  </div>
-)

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

@@ -1,2 +0,0 @@
-export { Tabs } from './Tabs'
-export type { TabsProps, TabItem } from './Tabs'

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

@@ -1,92 +0,0 @@
-.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

@@ -1,164 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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

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

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

@@ -1,62 +0,0 @@
-.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;
-        }
-    }
-}