@licklist/design 0.78.5-dev.69 → 0.78.5-dev.70

package/src/v2/components/DataTable/DataTable.scss

@@ -0,0 +1,181 @@
+@import '../../styles/index.scss';
+
+.data-table {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  overflow: visible;
+
+  // ── Header row ─────────────────────────────────────────────────────────────
+  &__header {
+    display: flex;
+    height: 48px;
+    align-items: center;
+    align-self: stretch;
+    background: var(--surface-secondary, #f8f8fa);
+    padding: 0 16px;
+    border-bottom: 1px solid var(--border-primary, #e8e9ef);
+    gap: 16px;
+    min-width: 0;
+  }
+
+  &__th {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 16px;
+    color: var(--label-secondary, #626a90);
+    white-space: nowrap;
+    flex-shrink: 0;
+
+    &--flex1 {
+      flex: 1;
+      min-width: 0;
+    }
+
+    &--sortable {
+      cursor: pointer;
+      transition: color 0.15s;
+      user-select: none;
+
+      &:hover {
+        color: var(--label-primary, #121e52);
+      }
+    }
+
+    &--action {
+      width: 40px;
+      flex-shrink: 0;
+    }
+
+    &--checkbox {
+      width: 40px;
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  &__sort-icon {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+
+    svg {
+      width: 14px;
+      height: 14px;
+    }
+
+    &--hidden {
+      opacity: 0;
+    }
+  }
+
+  // ── Body ───────────────────────────────────────────────────────────────────
+  &__body {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    overflow: visible;
+  }
+
+  &__row {
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+    border-bottom: 1px solid var(--border-primary, #e8e9ef);
+    transition: background-color 0.15s;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &--clickable {
+      cursor: pointer;
+
+      &:hover {
+        background: var(--surface-primary-hover, #f8f8fa);
+      }
+    }
+
+    // When ActionMenu is open, ensure dropdown isn't clipped
+    &.action-menu-open {
+      overflow: visible;
+      position: relative;
+      z-index: 20;
+
+      .data-table__row-cells {
+        overflow: visible;
+      }
+    }
+  }
+
+  &__row-cells {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    padding: 16px;
+  }
+
+  &__td {
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 16px;
+    color: var(--label-primary, #121e52);
+    flex-shrink: 0;
+
+    &--flex1 {
+      flex: 1;
+      min-width: 0;
+    }
+
+    &--action {
+      width: 40px;
+      flex-shrink: 0;
+      display: flex;
+      justify-content: flex-end;
+    }
+
+    &--checkbox {
+      width: 40px;
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  // ── Checkbox ──────────────────────────────────────────────────────────────────
+  &__checkbox {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    cursor: pointer;
+    accent-color: var(--label-action, #6200ee);
+    border-radius: 3px;
+  }
+
+  // ── Selected row ──────────────────────────────────────────────────────────────
+  &__row--selected {
+    background: var(--surface-action-soft, #f3e8ff);
+
+    &:hover {
+      background: var(--surface-action-soft, #f3e8ff);
+    }
+  }
+
+  // ── Empty state ─────────────────────────────────────────────────────────────
+  &__empty {
+    padding: 48px 16px;
+    text-align: center;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--label-secondary, #626a90);
+  }
+}

package/src/v2/components/DataTable/DataTable.tsx

@@ -0,0 +1,256 @@
+import React, { useRef, useEffect } from 'react'
+import { ActionMenu } from '../ActionMenu'
+import { ArrowUpIcon, ArrowDownIcon } from '../../icons'
+import './DataTable.scss'
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type DataTableSortDirection = 'asc' | 'desc'
+
+export interface DataTableColumn<T> {
+  label: string
+  accessor?: keyof T | ((item: T) => React.ReactNode)
+  render?: (item: T) => React.ReactNode
+  /** Fixed width, e.g. '140px', '100px'. Omit for flex-1 (first column default). */
+  width?: string
+  /** Applied to both header cell and body cell */
+  className?: string
+  /** Applied to header cell only */
+  labelClassName?: string
+  sortKey?: string
+  sortable?: boolean
+}
+
+export interface DataTableRowAction<T> {
+  label: string
+  onClick: (item: T) => void
+  variant?: 'default' | 'danger'
+}
+
+export interface DataTableProps<T> {
+  columns: DataTableColumn<T>[]
+  data: T[]
+  keyExtractor: (item: T) => string
+  onRowClick?: (item: T) => void
+  rowActions?: (item: T) => DataTableRowAction<T>[]
+  emptyState?: React.ReactNode
+  className?: string
+  sortKey?: string
+  sortDirection?: DataTableSortDirection
+  onSort?: (key: string) => void
+  /** Enable row checkboxes for multi-select */
+  selectable?: boolean
+  /** Currently selected row keys */
+  selectedKeys?: string[]
+  /** Called when selection changes */
+  onSelectionChange?: (keys: string[]) => void
+}
+
+// ─── Header checkbox (handles indeterminate state) ────────────────────────────
+
+interface HeaderCheckboxProps {
+  checked: boolean
+  indeterminate: boolean
+  onChange: () => void
+}
+
+function HeaderCheckbox({ checked, indeterminate, onChange }: HeaderCheckboxProps) {
+  const ref = useRef<HTMLInputElement>(null)
+  useEffect(() => {
+    if (ref.current) ref.current.indeterminate = indeterminate
+  }, [indeterminate])
+  return (
+    <input
+      type="checkbox"
+      ref={ref}
+      checked={checked}
+      onChange={onChange}
+      className="data-table__checkbox"
+      onClick={(e) => e.stopPropagation()}
+    />
+  )
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export function DataTable<T>({
+  columns,
+  data,
+  keyExtractor,
+  onRowClick,
+  rowActions,
+  emptyState,
+  className = '',
+  sortKey,
+  sortDirection,
+  onSort,
+  selectable = false,
+  selectedKeys = [],
+  onSelectionChange,
+}: DataTableProps<T>) {
+  const allKeys = data.map(keyExtractor)
+  const allSelected = data.length > 0 && allKeys.every((k) => selectedKeys.includes(k))
+  const someSelected = selectedKeys.length > 0 && !allSelected
+
+  const toggleAll = () => {
+    if (!onSelectionChange) return
+    if (allSelected) {
+      onSelectionChange(selectedKeys.filter((k) => !allKeys.includes(k)))
+    } else {
+      const newKeys = [...selectedKeys]
+      allKeys.forEach((k) => { if (!newKeys.includes(k)) newKeys.push(k) })
+      onSelectionChange(newKeys)
+    }
+  }
+
+  const toggleRow = (key: string) => {
+    if (!onSelectionChange) return
+    if (selectedKeys.includes(key)) {
+      onSelectionChange(selectedKeys.filter((k) => k !== key))
+    } else {
+      onSelectionChange([...selectedKeys, key])
+    }
+  }
+
+  return (
+    <div className={`data-table ${className}`}>
+      {/* ── Header row ── */}
+      <div className="data-table__header">
+        {selectable && (
+          <div className="data-table__th data-table__th--checkbox">
+            <HeaderCheckbox
+              checked={allSelected}
+              indeterminate={someSelected}
+              onChange={toggleAll}
+            />
+          </div>
+        )}
+
+        {columns.map((col, i) => {
+          const isSorted = col.sortKey && sortKey === col.sortKey
+          const canSort = col.sortable && col.sortKey && onSort
+
+          return (
+            <div
+              key={i}
+              className={[
+                'data-table__th',
+                !col.width && i === 0 ? 'data-table__th--flex1' : '',
+                col.labelClassName ?? '',
+                col.className ?? '',
+                canSort ? 'data-table__th--sortable' : '',
+              ]
+                .filter(Boolean)
+                .join(' ')}
+              style={col.width ? { width: col.width, flexShrink: 0 } : undefined}
+              onClick={() => canSort && onSort!(col.sortKey!)}
+            >
+              {col.label}
+              {canSort && (
+                <span
+                  className={`data-table__sort-icon ${!isSorted ? 'data-table__sort-icon--hidden' : ''}`}
+                >
+                  {isSorted && sortDirection === 'desc' ? (
+                    <ArrowDownIcon />
+                  ) : (
+                    <ArrowUpIcon />
+                  )}
+                </span>
+              )}
+            </div>
+          )
+        })}
+        {rowActions && <div className="data-table__th data-table__th--action" />}
+      </div>
+
+      {/* ── Body ── */}
+      <div className="data-table__body">
+        {data.length === 0 ? (
+          <div className="data-table__empty">
+            {emptyState ?? 'No data found.'}
+          </div>
+        ) : (
+          data.map((item) => {
+            const key = keyExtractor(item)
+            const actions = rowActions?.(item)
+            const isSelected = selectedKeys.includes(key)
+
+            return (
+              <div
+                key={key}
+                className={[
+                  'data-table__row',
+                  onRowClick ? 'data-table__row--clickable' : '',
+                  isSelected ? 'data-table__row--selected' : '',
+                ]
+                  .filter(Boolean)
+                  .join(' ')}
+                onClick={() => onRowClick?.(item)}
+              >
+                {selectable && (
+                  <div
+                    className="data-table__td data-table__td--checkbox"
+                    onClick={(e) => { e.stopPropagation(); toggleRow(key) }}
+                  >
+                    <input
+                      type="checkbox"
+                      className="data-table__checkbox"
+                      checked={isSelected}
+                      onChange={() => toggleRow(key)}
+                      onClick={(e) => e.stopPropagation()}
+                    />
+                  </div>
+                )}
+
+                <div className="data-table__row-cells">
+                  {columns.map((col, colIndex) => {
+                    let content: React.ReactNode
+                    if (col.render) {
+                      content = col.render(item)
+                    } else if (col.accessor) {
+                      content =
+                        typeof col.accessor === 'function'
+                          ? col.accessor(item)
+                          : String((item as Record<string, unknown>)[col.accessor as string] ?? '')
+                    }
+
+                    return (
+                      <div
+                        key={colIndex}
+                        className={[
+                          'data-table__td',
+                          !col.width && colIndex === 0 ? 'data-table__td--flex1' : '',
+                          col.className ?? '',
+                        ]
+                          .filter(Boolean)
+                          .join(' ')}
+                        style={col.width ? { width: col.width, flexShrink: 0 } : undefined}
+                      >
+                        {content}
+                      </div>
+                    )
+                  })}
+
+                  {actions && actions.length > 0 && (
+                    <div
+                      className="data-table__td data-table__td--action"
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <ActionMenu
+                        items={actions.map((a) => ({
+                          label: a.label,
+                          onClick: () => a.onClick(item),
+                          variant: a.variant,
+                        }))}
+                      />
+                    </div>
+                  )}
+                </div>
+              </div>
+            )
+          })
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,7 @@
+export { DataTable } from './DataTable'
+export type {
+  DataTableColumn,
+  DataTableRowAction,
+  DataTableProps,
+  DataTableSortDirection,
+} from './DataTable'

package/src/v2/components/EmptyState/EmptyState.scss

@@ -0,0 +1,39 @@
+@import '../../styles/index.scss';
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 48px 24px;
+  text-align: center;
+
+  &__icon {
+    color: var(--label-tertiary, #9399b3);
+    margin-bottom: 8px;
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__title {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--label-primary, #121e52);
+    margin: 0;
+  }
+
+  &__description {
+    font-size: 14px;
+    color: var(--label-secondary, #626a90);
+    max-width: 360px;
+    margin: 0;
+  }
+
+  &__action {
+    margin-top: 8px;
+  }
+}

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

@@ -0,0 +1,45 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { EmptyState } from './EmptyState'
+import { PaymentsEmptyIcon } from '../../icons'
+
+const meta: Meta<typeof EmptyState> = {
+  title: 'v2/Components/EmptyState',
+  component: EmptyState,
+  parameters: { layout: 'centered' },
+}
+
+export default meta
+
+type Story = StoryObj<typeof EmptyState>
+
+export const WithIcon: Story = {
+  args: {
+    icon: <PaymentsEmptyIcon />,
+    title: 'No payments yet',
+    description: 'Once payments are made they will appear here.',
+  },
+}
+
+export const TitleOnly: Story = {
+  args: {
+    title: 'Nothing to show',
+  },
+}
+
+export const WithAction: Story = {
+  args: {
+    icon: <PaymentsEmptyIcon />,
+    title: 'No results found',
+    description: 'Try adjusting your filters or create a new entry to get started.',
+    action: {
+      label: 'Create new',
+      onClick: () => {
+        setTimeout(() => {
+          // eslint-disable-next-line no-console
+          console.log('Create new clicked')
+        }, 300)
+      },
+    },
+  },
+}

package/src/v2/components/EmptyState/EmptyState.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import './EmptyState.scss'
+import { Button } from '../Button'
+
+export interface EmptyStateProps {
+  icon?: React.ReactNode
+  title: string
+  description?: string
+  action?: {
+    label: string
+    onClick(): void
+  }
+  className?: string
+}
+
+export const EmptyState: React.FC<EmptyStateProps> = ({
+  icon,
+  title,
+  description,
+  action,
+  className = '',
+}) => (
+  <div className={`empty-state ${className}`}>
+    {icon && <div className="empty-state__icon">{icon}</div>}
+    <p className="empty-state__title">{title}</p>
+    {description && (
+      <p className="empty-state__description">{description}</p>
+    )}
+    {action && (
+      <div className="empty-state__action">
+        <Button variant="primary" onClick={action.onClick}>
+          {action.label}
+        </Button>
+      </div>
+    )}
+  </div>
+)

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

@@ -0,0 +1,2 @@
+export { EmptyState } from './EmptyState'
+export type { EmptyStateProps } from './EmptyState'

package/src/v2/components/FormField/FormField.scss

@@ -52,6 +52,17 @@
       background-color: var(--surface-secondary, #f8f8fa);
     }
 
+    // Reset browser native :valid styling (prevents Bootstrap/browser green state on blur)
+    &:valid {
+      border-color: var(--border-primary, #e8e9ef);
+      background-image: none;
+    }
+
+    &:valid:focus {
+      border-color: var(--border-selected, #6200EE);
+      background-image: none;
+    }
+
     &--error {
       border-color: var(--borders-status-border-error, #ef4444);
 
@@ -91,6 +102,7 @@
   }
 
   &__error-text {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
     font-size: var(--text-xs-size, 11px);
     line-height: var(--text-xs-line, 14px);
     color: var(--label-status-error, #ef4444);

package/src/v2/components/InfoGrid/InfoGrid.scss

@@ -0,0 +1,51 @@
+@import '../../styles/index.scss';
+
+.info-grid {
+  display: grid;
+  gap: 16px;
+
+  &--cols-2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  &--cols-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  &--cols-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  &__item {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 16px;
+    background: var(--surface-secondary, #f8f8fa);
+    border-radius: 8px;
+    border: 1px solid var(--border-primary, #e8e9ef);
+  }
+
+  &__label {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--label-secondary, #626a90);
+  }
+
+  &__value {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--label-primary, #121e52);
+  }
+}
+
+@media (max-width: 640px) {
+  .info-grid {
+    &--cols-3,
+    &--cols-4 {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+}