@shipfox/react-ui 0.15.0 → 0.16.0

package/src/components/table/index.ts

@@ -1,5 +0,0 @@
-export type {ColumnDef} from '@tanstack/react-table';
-export * from './data-table';
-export * from './table';
-export * from './table-column-header';
-export * from './table-pagination';

package/src/components/table/table-column-header.tsx

@@ -1,141 +0,0 @@
-import type {Column} from '@tanstack/react-table';
-import {Icon} from 'components/icon';
-import type {HTMLAttributes} from 'react';
-import {cn} from 'utils/cn';
-import {Button} from '../button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '../dropdown-menu';
-
-/**
- * Props for the {@link TableColumnHeader} component.
- *
- * Defines the properties needed to render a sortable table column header
- * with interactive sorting controls.
- *
- * @typeParam TData - The shape of the row data in the table.
- * @typeParam TValue - The type of the value in this specific column.
- */
-export interface TableColumnHeaderProps<TData, TValue> extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * The TanStack Table column instance for this header.
-   *
-   * This instance provides access to column state and sorting methods.
-   * It's typically obtained from the `header.column` property when mapping
-   * over header groups in TanStack Table.
-   *
-   * The column determines:
-   * - Whether sorting is enabled (`getCanSort()`)
-   * - Current sort direction (`getIsSorted()`)
-   * - Methods to toggle sorting (`toggleSorting()`)
-   *
-   * @see {@link https://tanstack.com/table/latest/docs/api/core/column TanStack Column API}
-   */
-  column: Column<TData, TValue>;
-  /**
-   * The display text for the column header.
-   *
-   * This is the human-readable label that appears in the table header.
-   * For sortable columns, this text appears in a button with sort indicators.
-   * For non-sortable columns, it renders as plain text.
-   *
-   * @example
-   * ```tsx
-   * <TableColumnHeader column={column} title="Customer Name" />
-   * <TableColumnHeader column={column} title="Order Date" />
-   * ```
-   */
-  title: string;
-}
-
-/**
- * Renders a table column header with optional sorting functionality.
- *
- * This component automatically adapts based on whether the column supports sorting:
- * - **Sortable columns**: Renders an interactive button with a dropdown menu for
- *   ascending/descending sort options and visual indicators for the current sort state
- * - **Non-sortable columns**: Renders plain text without interactive controls
- *
- * The component integrates seamlessly with TanStack Table's sorting system and
- * manages sort state through the provided column instance.
- *
- * @typeParam TData - The shape of the row data in the table.
- * @typeParam TValue - The type of the value in this specific column.
- *
- * @example
- * ```tsx
- * // In your column definitions:
- * const columns: ColumnDef<User>[] = [
- *   {
- *     accessorKey: 'name',
- *     header: ({ column }) => (
- *       <TableColumnHeader column={column} title="Name" />
- *     ),
- *     enableSorting: true,
- *   },
- *   {
- *     accessorKey: 'email',
- *     header: ({ column }) => (
- *       <TableColumnHeader column={column} title="Email" />
- *     ),
- *     enableSorting: false,
- *   },
- * ];
- * ```
- */
-export function TableColumnHeader<TData, TValue>({
-  column,
-  title,
-  className,
-}: TableColumnHeaderProps<TData, TValue>) {
-  if (!column.getCanSort()) {
-    return <div className={cn('text-xs font-medium', className)}>{title}</div>;
-  }
-
-  const isSorted = column.getIsSorted();
-
-  return (
-    <div className={cn('flex items-center space-x-2', className)}>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button
-            variant="transparent"
-            size="xs"
-            className="-ml-12 h-32 px-8 data-[state=open]:bg-background-components-hover gap-0"
-          >
-            <span className="text-xs font-medium text-foreground-neutral-subtle">{title}</span>
-            {isSorted === 'desc' ? (
-              <Icon
-                name="arrowDownLongLine"
-                className="ml-2 size-14 text-foreground-neutral-muted"
-              />
-            ) : isSorted === 'asc' ? (
-              <Icon name="arrowUpLongLine" className="ml-2 size-14 text-foreground-neutral-muted" />
-            ) : (
-              <Icon name="arrowUpDownLine" className="ml-4 size-16 text-foreground-neutral-muted" />
-            )}
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start" size="sm">
-          <DropdownMenuItem
-            icon="arrowUpLongLine"
-            onClick={() => column.toggleSorting(false)}
-            closeOnSelect
-          >
-            Asc
-          </DropdownMenuItem>
-          <DropdownMenuItem
-            icon="arrowDownLongLine"
-            onClick={() => column.toggleSorting(true)}
-            closeOnSelect
-          >
-            Desc
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  );
-}

package/src/components/table/table-pagination.tsx

@@ -1,161 +0,0 @@
-import type {Table} from '@tanstack/react-table';
-import {Text} from 'components/typography';
-import type {ComponentProps} from 'react';
-import {Button} from '../button';
-import {Icon} from '../icon';
-import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '../select/select';
-import {TableCell, TableFooter, TableRow} from './table';
-
-/**
- * Props for the {@link TablePagination} component.
- *
- * Provides pagination controls for data tables, including page navigation,
- * page size selection, and row count displays.
- *
- * @typeParam TData - The shape of the row data in the table.
- */
-interface TablePaginationProps<TData> extends ComponentProps<'tfoot'> {
-  /**
-   * The TanStack Table instance that manages the table state and behavior.
-   *
-   * This is typically created using `useReactTable` from `@tanstack/react-table`.
-   * The table instance provides access to pagination state, row data, and methods
-   * for controlling pagination (e.g., `setPageSize`, `nextPage`, `previousPage`).
-   *
-   * @see {@link https://tanstack.com/table/latest/docs/api/core/table TanStack Table API}
-   */
-  table: Table<TData>;
-  /**
-   * Array of page size options to display in the page size selector.
-   * When provided, a dropdown will be rendered allowing users to change the number of rows per page.
-   *
-   * @default [10, 20, 50, 100]
-   * @example
-   * ```tsx
-   * <TablePagination table={table} pageSizeOptions={[10, 25, 50]} />
-   * ```
-   */
-  pageSizeOptions?: number[];
-  /**
-   * When `true`, displays the count of selected rows instead of pagination range.
-   *
-   * - If `true`: Shows "X of Y row(s) selected" where X is the number of selected rows
-   * - If `false`: Shows "A — B of C results" where A-B is the current page range
-   *
-   * This is useful when row selection is enabled and you want to give users feedback
-   * on how many rows they have selected.
-   *
-   * @default false
-   * @example
-   * ```tsx
-   * <TablePagination table={table} showSelectedCount={true} />
-   * // Displays: "5 of 100 row(s) selected"
-   * ```
-   */
-  showSelectedCount?: boolean;
-}
-
-export function TablePagination<TData>({
-  table,
-  className,
-  pageSizeOptions = [10, 20, 50, 100],
-  showSelectedCount = false,
-  ...props
-}: TablePaginationProps<TData>) {
-  const currentPage = table.getState().pagination.pageIndex + 1;
-  const pageSize = table.getState().pagination.pageSize;
-  const totalRows = table.getFilteredRowModel().rows.length;
-  const startRow = totalRows === 0 ? 0 : currentPage === 1 ? 1 : (currentPage - 1) * pageSize + 1;
-  const endRow = Math.min(currentPage * pageSize, totalRows);
-
-  return (
-    <TableFooter className={className} {...props}>
-      <TableRow className="hover:bg-transparent">
-        <TableCell
-          colSpan={table.getAllColumns().length}
-          className="group-hover/row:bg-transparent"
-        >
-          <div className="flex items-center justify-between gap-16">
-            <div className="flex items-center gap-16">
-              {showSelectedCount && (
-                <Text size="sm" className="text-foreground-neutral-muted">
-                  {table.getFilteredSelectedRowModel().rows.length} of {totalRows} row(s) selected
-                </Text>
-              )}
-              {!showSelectedCount && (
-                <Text size="sm" className="text-foreground-neutral-muted">
-                  {startRow} — {endRow} of {totalRows} results
-                </Text>
-              )}
-              <div className="flex items-center gap-8">
-                <Text size="sm" className="text-foreground-neutral-muted">
-                  Rows per page
-                </Text>
-                <Select
-                  value={String(pageSize)}
-                  onValueChange={(value) => {
-                    table.setPageSize(Number(value));
-                  }}
-                >
-                  <SelectTrigger className="h-28 w-80" size="small">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {pageSizeOptions.map((size) => (
-                      <SelectItem key={size} value={String(size)}>
-                        {size}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
-
-            <div className="flex items-center">
-              <Button
-                variant="transparent"
-                size="xs"
-                onClick={() => table.setPageIndex(0)}
-                disabled={!table.getCanPreviousPage()}
-                className="h-32 w-32 p-0"
-                aria-label="Go to first page"
-              >
-                <Icon name="arrowLeftDoubleLine" className="size-16" />
-              </Button>
-              <Button
-                variant="transparent"
-                size="xs"
-                onClick={() => table.previousPage()}
-                disabled={!table.getCanPreviousPage()}
-                className="h-32 px-12"
-                aria-label="Go to previous page"
-              >
-                Prev
-              </Button>
-              <Button
-                variant="transparent"
-                size="xs"
-                onClick={() => table.nextPage()}
-                disabled={!table.getCanNextPage()}
-                className="h-32 px-12"
-                aria-label="Go to next page"
-              >
-                Next
-              </Button>
-              <Button
-                variant="transparent"
-                size="xs"
-                onClick={() => table.setPageIndex(table.getPageCount() - 1)}
-                disabled={!table.getCanNextPage()}
-                className="h-32 w-32 p-0"
-                aria-label="Go to last page"
-              >
-                <Icon name="arrowRightDoubleLine" className="size-16" />
-              </Button>
-            </div>
-          </div>
-        </TableCell>
-      </TableRow>
-    </TableFooter>
-  );
-}

package/src/components/table/table.stories.columns.tsx

@@ -1,198 +0,0 @@
-/**
- * Column definitions for Table stories
- */
-
-import type {ColumnDef} from '@tanstack/react-table';
-import {Badge} from 'components/badge';
-import {Icon} from 'components/icon';
-import type {JobData, SearchJobData, User} from './table.stories.data';
-import {TableColumnHeader} from './table-column-header';
-
-/**
- * Create column definitions for JobData
- */
-export const createJobColumns = (): ColumnDef<JobData>[] => [
-  {
-    accessorKey: 'name',
-    header: ({column}) => <TableColumnHeader column={column} title="Name" />,
-    cell: ({row}) => (
-      <div className="font-medium text-foreground-neutral-base">{row.getValue('name')}</div>
-    ),
-  },
-  {
-    accessorKey: 'total',
-    header: ({column}) => <TableColumnHeader column={column} title="Total" />,
-    cell: ({row}) => (
-      <div className="flex items-center gap-6">
-        <div className="size-6 rounded-full bg-foreground-neutral-muted" />
-        <span className="tabular-nums">{row.getValue('total')}</span>
-      </div>
-    ),
-  },
-  {
-    accessorKey: 'success',
-    header: ({column}) => <TableColumnHeader column={column} title="Success" />,
-    cell: ({row}) => (
-      <div className="flex items-center gap-6">
-        <div className="size-6 rounded-full bg-tag-success-icon" />
-        <span className="tabular-nums">{row.getValue('success')}</span>
-      </div>
-    ),
-  },
-  {
-    accessorKey: 'failed',
-    header: ({column}) => <TableColumnHeader column={column} title="Failed" />,
-    cell: ({row}) => (
-      <div className="flex items-center gap-6">
-        <div className="size-6 rounded-full bg-tag-error-icon" />
-        <span className="tabular-nums">{row.getValue('failed')}</span>
-      </div>
-    ),
-  },
-  {
-    accessorKey: 'neutral',
-    header: ({column}) => <TableColumnHeader column={column} title="Neutral" />,
-    cell: ({row}) => (
-      <div className="flex items-center gap-6">
-        <div className="size-6 rounded-full bg-foreground-neutral-muted" />
-        <span className="tabular-nums">{row.getValue('neutral')}</span>
-      </div>
-    ),
-  },
-  {
-    accessorKey: 'flaked',
-    header: ({column}) => <TableColumnHeader column={column} title="Flaked" />,
-    cell: ({row}) => (
-      <div className="flex items-center gap-6">
-        <div className="size-6 rounded-full bg-tag-warning-icon" />
-        <span className="tabular-nums">{row.getValue('flaked')}</span>
-      </div>
-    ),
-  },
-  {
-    accessorKey: 'failureRate',
-    header: ({column}) => <TableColumnHeader column={column} title="Failure rate" />,
-    cell: ({row}) => <span className="tabular-nums">{row.getValue('failureRate')}</span>,
-  },
-  {
-    accessorKey: 'flakeRate',
-    header: ({column}) => <TableColumnHeader column={column} title="Flake rate" />,
-    cell: ({row}) => <span className="tabular-nums">{row.getValue('flakeRate')}</span>,
-  },
-];
-
-/**
- * Create column definitions for User data
- */
-export const createUserColumns = (): ColumnDef<User>[] => [
-  {
-    accessorKey: 'name',
-    header: ({column}) => <TableColumnHeader column={column} title="Name" />,
-    cell: ({row}) => (
-      <div className="font-medium text-foreground-neutral-base">{row.getValue('name')}</div>
-    ),
-  },
-  {
-    accessorKey: 'email',
-    header: ({column}) => <TableColumnHeader column={column} title="Email" />,
-    cell: ({row}) => <div className="text-foreground-neutral-subtle">{row.getValue('email')}</div>,
-  },
-  {
-    accessorKey: 'role',
-    header: ({column}) => <TableColumnHeader column={column} title="Role" />,
-    cell: ({row}) => <Badge variant="neutral">{row.getValue('role')}</Badge>,
-  },
-  {
-    accessorKey: 'status',
-    header: ({column}) => <TableColumnHeader column={column} title="Status" />,
-    cell: ({row}) => {
-      const status = row.getValue('status') as string;
-      return (
-        <Badge variant={status === 'active' ? 'success' : 'neutral'}>
-          {status.charAt(0).toUpperCase() + status.slice(1)}
-        </Badge>
-      );
-    },
-  },
-];
-
-/**
- * Create column definitions for SearchJobData
- */
-export const createSearchJobColumns = (): ColumnDef<SearchJobData>[] => [
-  {
-    accessorKey: 'name',
-    header: ({column}) => <TableColumnHeader column={column} title="Job Name" />,
-    cell: ({row}) => (
-      <div className="font-medium text-foreground-neutral-base">{row.getValue('name')}</div>
-    ),
-  },
-  {
-    accessorKey: 'repository',
-    header: ({column}) => <TableColumnHeader column={column} title="Repository" />,
-    cell: ({row}) => (
-      <div className="text-foreground-neutral-subtle font-mono text-xs">
-        {row.getValue('repository')}
-      </div>
-    ),
-  },
-  {
-    accessorKey: 'branch',
-    header: ({column}) => <TableColumnHeader column={column} title="Branch" />,
-    cell: ({row}) => (
-      <div className="flex items-center gap-6">
-        <Icon name="gitBranchLine" className="size-14 text-foreground-neutral-muted" />
-        <span className="font-mono text-xs">{row.getValue('branch')}</span>
-      </div>
-    ),
-  },
-  {
-    accessorKey: 'total',
-    header: ({column}) => <TableColumnHeader column={column} title="Total" />,
-    cell: ({row}) => <span className="tabular-nums">{row.getValue('total')}</span>,
-  },
-  {
-    accessorKey: 'success',
-    header: ({column}) => <TableColumnHeader column={column} title="Success" />,
-    cell: ({row}) => (
-      <div className="flex items-center gap-6">
-        <div className="size-6 rounded-full bg-tag-success-icon" />
-        <span className="tabular-nums">{row.getValue('success')}</span>
-      </div>
-    ),
-  },
-  {
-    accessorKey: 'failed',
-    header: ({column}) => <TableColumnHeader column={column} title="Failed" />,
-    cell: ({row}) => (
-      <div className="flex items-center gap-6">
-        <div className="size-6 rounded-full bg-tag-error-icon" />
-        <span className="tabular-nums">{row.getValue('failed')}</span>
-      </div>
-    ),
-  },
-  {
-    accessorKey: 'status',
-    header: ({column}) => <TableColumnHeader column={column} title="Status" />,
-    cell: ({row}) => {
-      const status = row.getValue('status') as string;
-      const variantMap = {
-        active: 'info',
-        completed: 'success',
-        failed: 'error',
-      } as const;
-      return (
-        <Badge variant={variantMap[status as keyof typeof variantMap]}>
-          {status.charAt(0).toUpperCase() + status.slice(1)}
-        </Badge>
-      );
-    },
-  },
-];
-
-/**
- * Column instances for reuse in stories
- */
-export const jobColumns = createJobColumns();
-export const userColumns = createUserColumns();
-export const searchJobColumns = createSearchJobColumns();

package/src/components/table/table.stories.components.tsx

@@ -1,104 +0,0 @@
-/**
- * Shared components for Table stories
- */
-
-import {Icon} from 'components/icon';
-import {useSearchContext} from 'components/search/search-context';
-import {
-  SearchEmpty,
-  SearchFooter,
-  SearchGroup,
-  SearchInput,
-  SearchItem,
-  SearchList,
-} from 'components/search/search-modal';
-import {Text} from 'components/typography';
-import {useMemo} from 'react';
-import {searchJobsData} from './table.stories.data';
-
-/**
- * Empty state component for job tables
- */
-export function JobsEmptyState() {
-  return (
-    <div className="flex flex-col items-center justify-center gap-12 py-48">
-      <div className="size-32 rounded-6 bg-transparent border border-border-neutral-strong flex items-center justify-center">
-        <Icon
-          name="shipfox"
-          className="size-16 text-foreground-neutral-subtle"
-          color="var(--foreground-neutral-subtle, #a1a1aa)"
-        />
-      </div>
-      <div className="text-center space-y-4">
-        <Text size="sm" className="text-foreground-neutral-base">
-          No jobs yet
-        </Text>
-        <Text size="xs" className="text-foreground-neutral-muted">
-          Import past runs or start a runner.
-        </Text>
-      </div>
-    </div>
-  );
-}
-
-/**
- * Search modal content component with job filtering
- */
-export function SearchModalContent({onSelectJob}: {onSelectJob: (jobId: string) => void}) {
-  const {searchValue} = useSearchContext();
-
-  const modalFilteredData = useMemo(() => {
-    if (!searchValue) {
-      return searchJobsData;
-    }
-    const query = searchValue.toLowerCase();
-    return searchJobsData.filter(
-      (job) =>
-        job.name.toLowerCase().includes(query) ||
-        job.repository.toLowerCase().includes(query) ||
-        job.branch.toLowerCase().includes(query),
-    );
-  }, [searchValue]);
-
-  return (
-    <>
-      <SearchInput placeholder="Search by job name, repository, or branch..." />
-      <SearchList>
-        {modalFilteredData.length === 0 ? (
-          <SearchEmpty>
-            <JobsEmptyState />
-          </SearchEmpty>
-        ) : (
-          <SearchGroup heading={searchValue ? `Results (${modalFilteredData.length})` : 'All Jobs'}>
-            {modalFilteredData.map((job) => (
-              <SearchItem
-                key={job.id}
-                value={`${job.id}-${job.name}-${job.repository}-${job.branch}`}
-                icon={
-                  <Icon name="gitBranchLine" className="size-16 text-foreground-neutral-subtle" />
-                }
-                description={`${job.repository} • ${job.branch}`}
-                onSelect={() => onSelectJob(job.id)}
-              >
-                {job.name}
-              </SearchItem>
-            ))}
-          </SearchGroup>
-        )}
-      </SearchList>
-      <SearchFooter>
-        <div className="flex items-center justify-between px-8 py-6">
-          <Text size="xs" className="text-foreground-neutral-muted">
-            Select a job to filter the table
-          </Text>
-          <div className="flex items-center gap-8">
-            <Icon name="cornerDownLeft" className="size-14 text-foreground-neutral-muted" />
-            <Text size="xs" className="text-foreground-neutral-muted">
-              to select
-            </Text>
-          </div>
-        </div>
-      </SearchFooter>
-    </>
-  );
-}