@ds-mo/ui 0.2.4 → 0.4.0

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

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

@@ -1,83 +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?: 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

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

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

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

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

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