@ds-mo/ui 0.3.0 → 0.4.0

package/src/components/TabGroup/TabGroup.tsx

@@ -1,150 +0,0 @@
-import React, { forwardRef, useRef, useEffect, useState, useCallback } from 'react';
-import { cn } from '@/utils/cn';
-import { Tab } from '@/components/Tab';
-import styles from './TabGroup.module.css';
-
-export interface TabGroupTab {
-  label: string;
-  /** id for the tab. Pair with `panelId` to wire SR semantics on the consumer's tabpanel. */
-  id?: string;
-  /** id of the tabpanel this tab controls. Forwarded to the Tab as `aria-controls`. */
-  panelId?: string;
-  disabled?: boolean;
-}
-
-export interface TabGroupProps {
-  /** Tab definitions. */
-  tabs: TabGroupTab[];
-  /** Index of the active tab. */
-  activeIndex?: number;
-  /** Called when a tab is activated (click or keyboard). */
-  onTabChange?: (index: number) => void;
-  /** Tablist orientation. Determines which arrow keys navigate. */
-  orientation?: 'horizontal' | 'vertical';
-  /** Accessible label for the tablist. */
-  'aria-label'?: string;
-  /** id of an external label for the tablist. */
-  'aria-labelledby'?: string;
-  className?: string;
-}
-
-export const TabGroup = forwardRef<HTMLDivElement, TabGroupProps>(
-  (
-    {
-      tabs,
-      activeIndex = 0,
-      onTabChange,
-      orientation = 'horizontal',
-      className,
-      'aria-label': ariaLabel,
-      'aria-labelledby': ariaLabelledBy,
-    },
-    ref,
-  ) => {
-    const tabsRef = useRef<(HTMLButtonElement | null)[]>([]);
-    const [indicator, setIndicator] = useState({ left: 0, width: 0 });
-
-    const updateIndicator = useCallback(() => {
-      const el = tabsRef.current[activeIndex];
-      if (el) {
-        setIndicator({
-          left: el.offsetLeft,
-          width: el.offsetWidth,
-        });
-      }
-    }, [activeIndex]);
-
-    useEffect(() => {
-      updateIndicator();
-    }, [updateIndicator]);
-
-    useEffect(() => {
-      const observer = new ResizeObserver(updateIndicator);
-      const container = tabsRef.current[0]?.parentElement;
-      if (container) observer.observe(container);
-      return () => observer.disconnect();
-    }, [updateIndicator]);
-
-    const findEnabled = useCallback(
-      (from: number, step: number): number => {
-        const len = tabs.length;
-        if (len === 0) return from;
-        let i = from;
-        for (let n = 0; n < len; n++) {
-          i = (i + step + len) % len;
-          if (!tabs[i].disabled) return i;
-        }
-        return from;
-      },
-      [tabs],
-    );
-
-    const activate = useCallback(
-      (index: number) => {
-        if (index !== activeIndex) onTabChange?.(index);
-        tabsRef.current[index]?.focus();
-      },
-      [activeIndex, onTabChange],
-    );
-
-    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
-      const isHorizontal = orientation !== 'vertical';
-      const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';
-      const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';
-
-      let nextIndex: number | null = null;
-      if (e.key === nextKey) {
-        nextIndex = findEnabled(activeIndex, 1);
-      } else if (e.key === prevKey) {
-        nextIndex = findEnabled(activeIndex, -1);
-      } else if (e.key === 'Home') {
-        nextIndex = findEnabled(-1, 1);
-      } else if (e.key === 'End') {
-        nextIndex = findEnabled(tabs.length, -1);
-      }
-
-      if (nextIndex !== null) {
-        e.preventDefault();
-        activate(nextIndex);
-      }
-    };
-
-    return (
-      <div
-        ref={ref}
-        role="tablist"
-        aria-label={ariaLabel}
-        aria-labelledby={ariaLabelledBy}
-        aria-orientation={orientation === 'vertical' ? 'vertical' : undefined}
-        onKeyDown={handleKeyDown}
-        className={cn(styles.tabGroup, className)}
-      >
-        <div className={styles.tabsRow}>
-          {tabs.map((tab, i) => (
-            <Tab
-              key={tab.id ?? i}
-              ref={el => { tabsRef.current[i] = el; }}
-              id={tab.id}
-              controls={tab.panelId}
-              label={tab.label}
-              isSelected={i === activeIndex}
-              disabled={tab.disabled}
-              onClick={() => onTabChange?.(i)}
-            />
-          ))}
-        </div>
-        <div className={styles.track}>
-          <div
-            className={styles.indicator}
-            style={{
-              transform: `translateX(${indicator.left}px)`,
-              width: indicator.width,
-            }}
-          />
-        </div>
-      </div>
-    );
-  }
-);
-
-TabGroup.displayName = 'TabGroup';

package/src/components/TabGroup/index.ts

@@ -1,2 +0,0 @@
-export { TabGroup } from './TabGroup';
-export type { TabGroupProps, TabGroupTab } from './TabGroup';

package/src/components/Table/Table.module.css

@@ -1,140 +0,0 @@
-.tableWrapper {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  overflow: hidden;
-  border-radius: var(--dimension-radius-075);
-}
-
-.tableScroll {
-  overflow-x: auto;
-  width: 100%;
-}
-
-.table {
-  display: grid;
-  width: 100%;
-  min-width: max-content;
-}
-
-.headerRow {
-  display: contents;
-}
-
-.headerCell {
-  display: flex;
-  align-items: center;
-  gap: var(--dimension-space-050);
-  padding: var(--dimension-space-075) var(--dimension-space-100);
-  background-color: var(--color-background-secondary);
-  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);
-  -webkit-user-select: none;
-  user-select: none;
-  position: sticky;
-  top: 0;
-  z-index: 2;
-}
-
-.headerCell.sortable {
-  cursor: pointer;
-}
-
-.headerCell.sortable:hover {
-  background-color: var(--color-background-translucent);
-}
-
-.headerCell.sortable:focus-visible {
-  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);
-  outline-offset: calc(var(--dimension-space-025) * -1);
-}
-
-.sortIndicator {
-  font-size: 12px;
-  color: var(--color-foreground-secondary);
-}
-
-.row {
-  display: contents;
-}
-
-.row:hover .cell {
-  background-color: var(--color-interaction-hover);
-}
-
-.rowSelected .cell {
-  background-color: var(--color-background-faint-brand);
-}
-
-.rowClickable {
-  cursor: pointer;
-}
-
-.rowClickable:focus-visible .cell {
-  background-color: var(--color-interaction-hover);
-  box-shadow: inset 0 0 0 var(--dimension-stroke-width-025) var(--color-interaction-focus);
-}
-
-.cell {
-  display: flex;
-  align-items: center;
-  padding: var(--dimension-space-075) var(--dimension-space-100);
-  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);
-  min-height: var(--dimension-size-500);
-  background-color: var(--color-background-primary);
-  transition: background-color var(--effect-motion-short-2);
-}
-
-.alignRight { justify-content: flex-end; text-align: right; }
-.alignCenter { justify-content: center; text-align: center; }
-
-.emptyRow {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--dimension-space-400);
-  background-color: var(--color-background-primary);
-}
-
-.skeleton {
-  height: 14px;
-  width: 60%;
-  background-color: var(--color-background-translucent);
-  border-radius: var(--dimension-radius-050);
-  animation: shimmer 1.5s infinite;
-}
-
-@keyframes shimmer {
-  0% { opacity: 0.5; }
-  50% { opacity: 1; }
-  100% { opacity: 0.5; }
-}
-
-.pagination {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--dimension-space-100);
-  padding: var(--dimension-space-100);
-  border-top: var(--dimension-stroke-width-015) solid var(--color-border-primary);
-  background-color: var(--color-background-primary);
-}
-
-.pageButton {
-  display: flex;
-  align-items: center;
-  padding: var(--dimension-space-050) var(--dimension-space-100);
-  background-color: transparent;
-  border: none;
-  border-radius: var(--dimension-radius-075);
-  cursor: pointer;
-  transition: background-color var(--effect-motion-short-2);
-}
-
-.pageButton:hover:not(:disabled) {
-  background-color: var(--color-interaction-hover);
-}
-
-.pageButton:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}

package/src/components/Table/Table.stories.tsx

@@ -1,111 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Table } from './Table';
-
-interface User {
-  id: number;
-  name: string;
-  email: string;
-  role: string;
-  status: string;
-}
-
-const sampleData: User[] = [
-  { id: 1, name: 'Alice Johnson', email: 'alice@example.com', role: 'Admin', status: 'Active' },
-  { id: 2, name: 'Bob Smith', email: 'bob@example.com', role: 'Editor', status: 'Active' },
-  { id: 3, name: 'Carol White', email: 'carol@example.com', role: 'Viewer', status: 'Inactive' },
-  { id: 4, name: 'Dan Brown', email: 'dan@example.com', role: 'Editor', status: 'Active' },
-  { id: 5, name: 'Eva Green', email: 'eva@example.com', role: 'Admin', status: 'Active' },
-  { id: 6, name: 'Frank Lee', email: 'frank@example.com', role: 'Viewer', status: 'Inactive' },
-  { id: 7, name: 'Grace Kim', email: 'grace@example.com', role: 'Editor', status: 'Active' },
-  { id: 8, name: 'Hank Miller', email: 'hank@example.com', role: 'Viewer', status: 'Active' },
-];
-
-const columns = [
-  { id: 'name', header: 'Name', accessorKey: 'name', sortable: true },
-  { id: 'email', header: 'Email', accessorKey: 'email' },
-  { id: 'role', header: 'Role', accessorKey: 'role', sortable: true },
-  { id: 'status', header: 'Status', accessorKey: 'status' },
-];
-
-const meta: Meta<typeof Table> = {
-  title: 'Components/Table',
-  component: Table,
-};
-
-export default meta;
-type Story = StoryObj<typeof Table>;
-
-export const Default: Story = {
-  render: () => (
-    <div style={{ padding: 24 }}>
-      <Table columns={columns} data={sampleData} />
-    </div>
-  ),
-};
-
-export const WithSorting: Story = {
-  render: () => {
-    const [sortState, setSortState] = useState<{ columnId: string; direction: 'asc' | 'desc' }>({ columnId: 'name', direction: 'asc' });
-    return (
-      <div style={{ padding: 24 }}>
-        <Table
-          columns={columns}
-          data={sampleData}
-          sortState={sortState}
-          onSort={(columnId) => {
-            setSortState(prev =>
-              prev.columnId === columnId
-                ? { columnId, direction: prev.direction === 'asc' ? 'desc' : 'asc' }
-                : { columnId, direction: 'asc' }
-            );
-          }}
-        />
-      </div>
-    );
-  },
-};
-
-export const WithPagination: Story = {
-  render: () => {
-    const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 3 });
-    return (
-      <div style={{ padding: 24 }}>
-        <Table
-          columns={columns}
-          data={sampleData}
-          pagination={pagination}
-          onPaginationChange={(pageIndex, pageSize) => setPagination({ pageIndex, pageSize })}
-        />
-      </div>
-    );
-  },
-};
-
-export const ClickableRows: Story = {
-  render: () => (
-    <div style={{ padding: 24 }}>
-      <Table
-        columns={columns}
-        data={sampleData.slice(0, 4)}
-        onRowClick={(row) => alert(`Clicked: ${(row as User).name}`)}
-      />
-    </div>
-  ),
-};
-
-export const Loading: Story = {
-  render: () => (
-    <div style={{ padding: 24 }}>
-      <Table columns={columns} data={[]} loading />
-    </div>
-  ),
-};
-
-export const Empty: Story = {
-  render: () => (
-    <div style={{ padding: 24 }}>
-      <Table columns={columns} data={[]} emptyMessage="No users found." />
-    </div>
-  ),
-};

package/src/components/Table/Table.tsx

@@ -1,255 +0,0 @@
-import React, { useMemo } from 'react';
-import { cn } from '@/utils/cn';
-import { Text } from '@/components/Text';
-import styles from './Table.module.css';
-
-export type SortDirection = 'asc' | 'desc';
-export type CellType = 'string' | 'numbers' | 'tag' | 'checkbox' | 'button' | 'spacer' | 'image' | 'icon' | 'empty';
-export type FilterValue = string | number | Array<string | number> | undefined;
-export type FilterState = Record<string, FilterValue>;
-
-export interface SortState {
-  columnId: string;
-  direction: SortDirection;
-}
-
-export interface PaginationState {
-  pageIndex: number;
-  pageSize: number;
-}
-
-export interface TableColumn<T = unknown> {
-  id: string;
-  header: string | React.ReactNode;
-  accessorKey?: string;
-  accessor?: (row: T) => unknown;
-  sortable?: boolean;
-  align?: 'left' | 'right' | 'center';
-  width?: string | number;
-  minWidth?: string | number;
-  maxWidth?: string | number;
-  renderCell?: (row: T, rowIndex: number) => React.ReactNode;
-  cellType?: CellType;
-  hide?: boolean;
-  pinned?: 'left' | 'right';
-}
-
-export interface TableProps<T = unknown> {
-  columns: TableColumn<T>[];
-  data: T[];
-  sortState?: SortState;
-  onSort?: (columnId: string) => void;
-  className?: string;
-  onRowClick?: (row: T, rowIndex: number) => void;
-  selectedRows?: Set<number>;
-  loading?: boolean;
-  pagination?: PaginationState;
-  onPaginationChange?: (pageIndex: number, pageSize: number) => void;
-  emptyMessage?: string;
-}
-
-function getColumnValue<T>(column: TableColumn<T>, row: T): unknown {
-  if (column.accessorKey) return (row as Record<string, unknown>)[column.accessorKey];
-  if (column.accessor) return column.accessor(row);
-  return undefined;
-}
-
-function compareValues(a: unknown, b: unknown, direction: SortDirection): number {
-  const mult = direction === 'asc' ? 1 : -1;
-  if (a == null && b == null) return 0;
-  if (a == null) return mult;
-  if (b == null) return -mult;
-  if (typeof a === 'number' && typeof b === 'number') return (a - b) * mult;
-  return String(a).localeCompare(String(b)) * mult;
-}
-
-export function Table<T>({
-  columns,
-  data,
-  sortState,
-  onSort,
-  className,
-  onRowClick,
-  selectedRows,
-  loading = false,
-  pagination,
-  onPaginationChange,
-  emptyMessage = 'No results found.',
-}: TableProps<T>) {
-  const visibleColumns = useMemo(() => columns.filter(c => !c.hide), [columns]);
-
-  const gridTemplateColumns = useMemo(() =>
-    visibleColumns.map(col => {
-      if (col.width) return typeof col.width === 'number' ? `${col.width}px` : col.width;
-      return 'minmax(120px, 1fr)';
-    }).join(' '),
-    [visibleColumns]
-  );
-
-  const sortedData = useMemo(() => {
-    if (!sortState) return data;
-    const col = columns.find(c => c.id === sortState.columnId);
-    if (!col) return data;
-    return [...data].sort((a, b) =>
-      compareValues(getColumnValue(col, a), getColumnValue(col, b), sortState.direction)
-    );
-  }, [data, columns, sortState]);
-
-  const pagedData = useMemo(() => {
-    if (!pagination) return sortedData;
-    const start = pagination.pageIndex * pagination.pageSize;
-    return sortedData.slice(start, start + pagination.pageSize);
-  }, [sortedData, pagination]);
-
-  const totalPages = pagination ? Math.ceil(sortedData.length / pagination.pageSize) : 1;
-  const isEmpty = !loading && pagedData.length === 0;
-
-  const handleSort = (columnId: string) => {
-    if (onSort) onSort(columnId);
-  };
-
-  return (
-    <div className={cn(styles.tableWrapper, className)} aria-busy={loading || undefined}>
-      <div className={styles.tableScroll}>
-        <div className={styles.table} style={{ gridTemplateColumns }} role="table">
-          {/* Header */}
-          <div className={styles.headerRow} role="row">
-            {visibleColumns.map(col => {
-              const isSorted = sortState?.columnId === col.id;
-              const ariaSort: 'ascending' | 'descending' | 'none' | undefined = col.sortable
-                ? (isSorted ? (sortState.direction === 'asc' ? 'ascending' : 'descending') : 'none')
-                : undefined;
-              const onHeaderActivate = () => col.sortable && handleSort(col.id);
-              return (
-                <div
-                  key={col.id}
-                  className={cn(
-                    styles.headerCell,
-                    col.sortable && styles.sortable,
-                    col.align === 'right' && styles.alignRight,
-                    col.align === 'center' && styles.alignCenter
-                  )}
-                  role="columnheader"
-                  aria-sort={ariaSort}
-                  tabIndex={col.sortable ? 0 : undefined}
-                  onClick={onHeaderActivate}
-                  onKeyDown={col.sortable ? (e) => {
-                    if (e.key === 'Enter' || e.key === ' ') {
-                      e.preventDefault();
-                      onHeaderActivate();
-                    }
-                  } : undefined}
-                  style={col.minWidth ? { minWidth: typeof col.minWidth === 'number' ? `${col.minWidth}px` : col.minWidth } : undefined}
-                >
-                  {typeof col.header === 'string' ? (
-                    <Text variant="text-body-small-emphasis" as="span" color="secondary">
-                      {col.header}
-                    </Text>
-                  ) : col.header}
-                  {isSorted && (
-                    <span className={styles.sortIndicator} aria-hidden>
-                      {sortState.direction === 'asc' ? '\u2191' : '\u2193'}
-                    </span>
-                  )}
-                </div>
-              );
-            })}
-          </div>
-
-          {/* Loading skeleton */}
-          {loading && Array.from({ length: 5 }).map((_, i) => (
-            <div
-              key={`skeleton-${i}`}
-              className={styles.row}
-              role={i === 0 ? 'status' : 'row'}
-              aria-label={i === 0 ? 'Loading' : undefined}
-            >
-              {visibleColumns.map(col => (
-                <div key={col.id} className={styles.cell} role="cell">
-                  <div className={styles.skeleton} />
-                </div>
-              ))}
-            </div>
-          ))}
-
-          {/* Empty state */}
-          {isEmpty && (
-            <div className={styles.emptyRow} style={{ gridColumn: `1 / -1` }}>
-              <Text variant="text-body-medium" as="p" color="secondary">{emptyMessage}</Text>
-            </div>
-          )}
-
-          {/* Data rows */}
-          {!loading && pagedData.map((row, rowIndex) => {
-            const isSelected = selectedRows?.has(rowIndex);
-            const isClickable = Boolean(onRowClick);
-            return (
-              <div
-                key={rowIndex}
-                className={cn(
-                  styles.row,
-                  isSelected && styles.rowSelected,
-                  isClickable && styles.rowClickable
-                )}
-                role="row"
-                tabIndex={isClickable ? 0 : undefined}
-                aria-selected={selectedRows ? Boolean(isSelected) : undefined}
-                onClick={() => onRowClick?.(row, rowIndex)}
-                onKeyDown={isClickable ? (e) => {
-                  if (e.key === 'Enter' || e.key === ' ') {
-                    e.preventDefault();
-                    onRowClick?.(row, rowIndex);
-                  }
-                } : undefined}
-              >
-                {visibleColumns.map(col => (
-                  <div
-                    key={col.id}
-                    className={cn(
-                      styles.cell,
-                      col.align === 'right' && styles.alignRight,
-                      col.align === 'center' && styles.alignCenter
-                    )}
-                    role="cell"
-                  >
-                    {col.renderCell
-                      ? col.renderCell(row, rowIndex)
-                      : <Text variant="text-body-medium" as="span" lineTruncation={1}>{String(getColumnValue(col, row) ?? '')}</Text>
-                    }
-                  </div>
-                ))}
-              </div>
-            );
-          })}
-        </div>
-      </div>
-
-      {/* Pagination */}
-      {pagination && onPaginationChange && totalPages > 1 && (
-        <div className={styles.pagination}>
-          <button
-            className={styles.pageButton}
-            disabled={pagination.pageIndex === 0}
-            onClick={() => onPaginationChange(pagination.pageIndex - 1, pagination.pageSize)}
-            type="button"
-          >
-            <Text variant="text-body-small" as="span">Previous</Text>
-          </button>
-          <Text variant="text-body-small" as="span" color="secondary">
-            {`Page ${pagination.pageIndex + 1} of ${totalPages}`}
-          </Text>
-          <button
-            className={styles.pageButton}
-            disabled={pagination.pageIndex >= totalPages - 1}
-            onClick={() => onPaginationChange(pagination.pageIndex + 1, pagination.pageSize)}
-            type="button"
-          >
-            <Text variant="text-body-small" as="span">Next</Text>
-          </button>
-        </div>
-      )}
-    </div>
-  );
-}
-
-Table.displayName = 'Table';

package/src/components/Table/index.ts

@@ -1,11 +0,0 @@
-export { Table } from './Table';
-export type {
-  TableProps,
-  TableColumn,
-  SortState,
-  SortDirection,
-  CellType,
-  FilterValue,
-  FilterState,
-  PaginationState,
-} from './Table';