@ds-mo/ui 0.1.0

package/src/components/TabGroup/TabGroup.stories.tsx

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { TabGroup } from './TabGroup';
+
+const meta: Meta<typeof TabGroup> = {
+  title: 'Classic/TabGroup',
+  component: TabGroup,
+};
+
+export default meta;
+type Story = StoryObj<typeof TabGroup>;
+
+const TABS = [
+  { label: 'Overview', id: 'overview' },
+  { label: 'Activity', id: 'activity' },
+  { label: 'Settings', id: 'settings' },
+  { label: 'Members', id: 'members' },
+];
+
+const Controlled = (props: Partial<React.ComponentProps<typeof TabGroup>>) => {
+  const [active, setActive] = useState(0);
+  return (
+    <div>
+      <TabGroup tabs={TABS} activeIndex={active} onTabChange={setActive} {...props} />
+      <div style={{ padding: '16px 0', color: 'var(--color-foreground-secondary)', fontSize: 14 }}>
+        Content for: <strong>{TABS[active].label}</strong>
+      </div>
+    </div>
+  );
+};
+
+export const Playground: Story = {
+  render: () => <Controlled />,
+};
+
+export const Default: Story = {
+  render: () => <Controlled />,
+};
+
+export const ManyTabs: Story = {
+  render: () => (
+    <Controlled
+      tabs={[
+        { label: 'Dashboard' },
+        { label: 'Analytics' },
+        { label: 'Reports' },
+        { label: 'Users' },
+        { label: 'Settings' },
+        { label: 'Billing' },
+        { label: 'Integrations' },
+      ]}
+    />
+  ),
+};
+
+export const TwoTabs: Story = {
+  render: () => (
+    <Controlled tabs={[{ label: 'Active' }, { label: 'Archived' }]} />
+  ),
+};

package/src/components/TabGroup/TabGroup.tsx

@@ -0,0 +1,83 @@
+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?: string;
+}
+
+export interface TabGroupProps {
+  /** Tab definitions. */
+  tabs: TabGroupTab[];
+  /** Index of the active tab. */
+  activeIndex?: number;
+  /** Called when a tab is clicked. */
+  onTabChange?: (index: number) => void;
+  className?: string;
+}
+
+export const TabGroup = forwardRef<HTMLDivElement, TabGroupProps>(
+  ({ tabs, activeIndex = 0, onTabChange, className }, ref) => {
+    const tabsRef = useRef<(HTMLButtonElement | null)[]>([]);
+    const [indicator, setIndicator] = useState({ left: 0, width: 0 });
+
+    const updateIndicator = useCallback(() => {
+      const el = tabsRef.current[activeIndex];
+      if (el) {
+        const parent = el.parentElement;
+        if (parent) {
+          setIndicator({
+            left: el.offsetLeft,
+            width: el.offsetWidth,
+          });
+        }
+      }
+    }, [activeIndex]);
+
+    useEffect(() => {
+      updateIndicator();
+    }, [updateIndicator]);
+
+    // Recalculate on resize
+    useEffect(() => {
+      const observer = new ResizeObserver(updateIndicator);
+      const container = tabsRef.current[0]?.parentElement;
+      if (container) observer.observe(container);
+      return () => observer.disconnect();
+    }, [updateIndicator]);
+
+    return (
+      <div
+        ref={ref}
+        role="tablist"
+        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}
+              label={tab.label}
+              isSelected={i === activeIndex}
+              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

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

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

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

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

@@ -0,0 +1,226 @@
+import React, { useMemo, useState, useCallback } 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)}>
+      <div className={styles.tableScroll}>
+        <div className={styles.table} style={{ gridTemplateColumns }} role="table">
+          {/* Header */}
+          <div className={styles.headerRow} role="row">
+            {visibleColumns.map(col => (
+              <div
+                key={col.id}
+                className={cn(
+                  styles.headerCell,
+                  col.sortable && styles.sortable,
+                  col.align === 'right' && styles.alignRight,
+                  col.align === 'center' && styles.alignCenter
+                )}
+                role="columnheader"
+                onClick={() => col.sortable && handleSort(col.id)}
+                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}
+                {sortState?.columnId === col.id && (
+                  <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="row">
+              {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);
+            return (
+              <div
+                key={rowIndex}
+                className={cn(
+                  styles.row,
+                  isSelected && styles.rowSelected,
+                  onRowClick && styles.rowClickable
+                )}
+                role="row"
+                onClick={() => onRowClick?.(row, rowIndex)}
+              >
+                {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

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