@shipfox/react-ui 0.15.0 → 0.16.0

package/src/components/select/select.tsx

@@ -1,220 +0,0 @@
-import * as SelectPrimitive from '@radix-ui/react-select';
-import {cva, type VariantProps} from 'class-variance-authority';
-import type {ComponentProps} from 'react';
-import {cn} from 'utils/cn';
-import {Icon, type IconName} from '../icon';
-
-function Select({...props}: ComponentProps<typeof SelectPrimitive.Root>) {
-  return <SelectPrimitive.Root data-slot="select" {...props} />;
-}
-
-function SelectGroup({...props}: ComponentProps<typeof SelectPrimitive.Group>) {
-  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
-}
-
-function SelectValue({...props}: ComponentProps<typeof SelectPrimitive.Value>) {
-  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
-}
-
-const selectTriggerVariants = cva(
-  [
-    'flex items-center justify-between gap-8',
-    'w-full rounded-6 px-8 text-sm leading-20',
-    'bg-background-field-base text-foreground-neutral-subtle',
-    'shadow-button-neutral transition-[color,box-shadow] outline-none',
-    'hover:bg-background-field-hover',
-    'focus-visible:shadow-border-interactive-with-active',
-    'disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-background-neutral-disabled disabled:shadow-none disabled:text-foreground-neutral-disabled',
-    'data-[placeholder]:text-foreground-neutral-muted',
-  ],
-  {
-    variants: {
-      variant: {
-        base: 'bg-background-field-base',
-        component: 'bg-background-field-component',
-      },
-      size: {
-        small: 'h-28 py-4',
-        base: 'h-32 py-6',
-      },
-    },
-    defaultVariants: {
-      variant: 'base',
-      size: 'base',
-    },
-  },
-);
-
-type SelectTriggerProps = ComponentProps<typeof SelectPrimitive.Trigger> &
-  VariantProps<typeof selectTriggerVariants>;
-
-function SelectTrigger({className, variant, size, children, ...props}: SelectTriggerProps) {
-  return (
-    <SelectPrimitive.Trigger
-      data-slot="select-trigger"
-      className={cn(selectTriggerVariants({variant, size}), className)}
-      {...props}
-    >
-      {children}
-      <SelectPrimitive.Icon asChild>
-        <Icon name="expandUpDownLine" className="size-16 text-foreground-neutral-muted shrink-0" />
-      </SelectPrimitive.Icon>
-    </SelectPrimitive.Trigger>
-  );
-}
-
-function SelectScrollUpButton({
-  className,
-  ...props
-}: ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
-  return (
-    <SelectPrimitive.ScrollUpButton
-      data-slot="select-scroll-up-button"
-      className={cn('flex cursor-default items-center justify-center py-4', className)}
-      {...props}
-    >
-      <Icon name="arrowUpSLine" className="size-16 text-foreground-neutral-muted" />
-    </SelectPrimitive.ScrollUpButton>
-  );
-}
-
-function SelectScrollDownButton({
-  className,
-  ...props
-}: ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
-  return (
-    <SelectPrimitive.ScrollDownButton
-      data-slot="select-scroll-down-button"
-      className={cn('flex cursor-default items-center justify-center py-4', className)}
-      {...props}
-    >
-      <Icon name="arrowDownSLine" className="size-16 text-foreground-neutral-muted" />
-    </SelectPrimitive.ScrollDownButton>
-  );
-}
-
-function SelectContent({
-  className,
-  children,
-  position = 'popper',
-  sideOffset = 4,
-  align = 'center',
-  ...props
-}: ComponentProps<typeof SelectPrimitive.Content>) {
-  return (
-    <SelectPrimitive.Portal>
-      <SelectPrimitive.Content
-        data-slot="select-content"
-        className={cn(
-          'relative z-50 max-h-300 min-w-180 overflow-hidden rounded-10 p-4',
-          'bg-background-neutral-overlay shadow-tooltip',
-          'data-[state=open]:animate-in data-[state=closed]:animate-out',
-          'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-          'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-          'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2',
-          'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-          position === 'popper' &&
-            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-          className,
-        )}
-        position={position}
-        sideOffset={sideOffset}
-        align={align}
-        {...props}
-      >
-        <SelectScrollUpButton />
-        <SelectPrimitive.Viewport
-          data-slot="select-viewport"
-          className={cn(
-            'p-0',
-            position === 'popper' &&
-              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
-          )}
-        >
-          {children}
-        </SelectPrimitive.Viewport>
-        <SelectScrollDownButton />
-      </SelectPrimitive.Content>
-    </SelectPrimitive.Portal>
-  );
-}
-
-function SelectLabel({className, ...props}: ComponentProps<typeof SelectPrimitive.Label>) {
-  return (
-    <SelectPrimitive.Label
-      data-slot="select-label"
-      className={cn(
-        'px-8 py-4 text-xs leading-20 text-foreground-neutral-subtle select-none',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-type SelectItemProps = ComponentProps<typeof SelectPrimitive.Item> & {
-  icon?: IconName;
-};
-
-function SelectItem({className, children, icon, ...props}: SelectItemProps) {
-  return (
-    <SelectPrimitive.Item
-      data-slot="select-item"
-      className={cn(
-        'relative flex cursor-pointer select-none items-center gap-8 rounded-6 py-6 pl-32 pr-8',
-        'text-sm leading-20 text-foreground-neutral-subtle outline-none transition-colors',
-        'focus:bg-background-components-hover',
-        'data-disabled:pointer-events-none data-disabled:text-foreground-neutral-disabled',
-        'data-[state=checked]:text-foreground-neutral-base',
-        icon && 'pl-56',
-        className,
-      )}
-      {...props}
-    >
-      <span className="absolute left-8 flex size-16 items-center justify-center">
-        <SelectPrimitive.ItemIndicator>
-          <Icon name="check" className="size-14 text-foreground-neutral-base" />
-        </SelectPrimitive.ItemIndicator>
-      </span>
-      {icon && (
-        <Icon
-          name={icon}
-          className="size-16 shrink-0 text-foreground-neutral-subtle absolute left-32"
-        />
-      )}
-      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-    </SelectPrimitive.Item>
-  );
-}
-
-function SelectSeparator({className, ...props}: ComponentProps<typeof SelectPrimitive.Separator>) {
-  return (
-    <SelectPrimitive.Separator
-      data-slot="select-separator"
-      className={cn(
-        'relative -mx-4 my-4 h-px',
-        'bg-border-neutral-menu-top',
-        'after:absolute after:inset-x-0 after:top-px after:h-px',
-        'after:bg-border-neutral-menu-bottom',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
-  SelectScrollDownButton,
-  selectTriggerVariants,
-};
-
-export type {SelectTriggerProps, SelectItemProps};

package/src/components/shiny-text/index.ts

@@ -1 +0,0 @@
-export * from './shiny-text';

package/src/components/shiny-text/shiny-text.tsx

@@ -1,21 +0,0 @@
-import {cn} from 'utils/cn';
-
-type ShinyTextProps = {
-  text: string;
-  disabled?: boolean;
-  speed?: number;
-  className?: string;
-};
-
-function ShinyText({text, disabled = false, speed = 5, className = ''}: ShinyTextProps) {
-  const animationDuration = `${speed}s`;
-
-  return (
-    <span className={cn('shiny-text', {disabled: disabled}, className)} style={{animationDuration}}>
-      {text}
-    </span>
-  );
-}
-
-export {ShinyText};
-export type {ShinyTextProps};

package/src/components/skeleton/index.ts

@@ -1 +0,0 @@
-export * from './skeleton';

package/src/components/skeleton/skeleton.stories.tsx

@@ -1,178 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import {Code, Header} from 'components/typography';
-import {Skeleton} from './skeleton';
-
-const meta = {
-  title: 'Components/Skeleton',
-  component: Skeleton,
-  tags: ['autodocs'],
-} satisfies Meta<typeof Skeleton>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => <Skeleton className="w-200 h-20" />,
-};
-
-export const Card: Story = {
-  render: () => (
-    <div className="flex flex-col gap-12 p-16 rounded-10 border border-border-neutral-base bg-background-field-base max-w-400">
-      <Skeleton className="h-200 w-full rounded-6" />
-      <div className="space-y-8">
-        <Skeleton className="h-20 w-3/4" />
-        <Skeleton className="h-16 w-full" />
-        <Skeleton className="h-16 w-5/6" />
-      </div>
-      <div className="flex gap-8 pt-8">
-        <Skeleton className="h-32 w-100 rounded-6" />
-        <Skeleton className="h-32 w-100 rounded-6" />
-      </div>
-    </div>
-  ),
-};
-
-export const List: Story = {
-  render: () => (
-    <div className="flex flex-col gap-8 max-w-500">
-      {Array.from({length: 5}, (_, i) => i).map((id) => (
-        <div
-          key={`list-${id}`}
-          className="flex items-center gap-12 p-12 rounded-6 border border-border-neutral-base bg-background-field-base"
-        >
-          <Skeleton className="h-48 w-48 rounded-full shrink-0" />
-          <div className="flex-1 space-y-8">
-            <Skeleton className="h-16 w-3/4" />
-            <Skeleton className="h-14 w-1/2" />
-          </div>
-          <Skeleton className="h-32 w-80 rounded-6" />
-        </div>
-      ))}
-    </div>
-  ),
-};
-
-export const Showcase: Story = {
-  render: () => (
-    <div className="flex flex-col gap-32">
-      <div className="flex flex-col gap-16">
-        <Header variant="h3">Basic Shapes</Header>
-        <div className="flex flex-col gap-12">
-          <div className="flex flex-col gap-8">
-            <Code variant="label" className="text-foreground-neutral-subtle">
-              Rectangle
-            </Code>
-            <Skeleton className="h-20 w-200" />
-          </div>
-
-          <div className="flex flex-col gap-8">
-            <Code variant="label" className="text-foreground-neutral-subtle">
-              Circle
-            </Code>
-            <Skeleton className="h-48 w-48 rounded-full" />
-          </div>
-
-          <div className="flex flex-col gap-8">
-            <Code variant="label" className="text-foreground-neutral-subtle">
-              Square
-            </Code>
-            <Skeleton className="h-100 w-100" />
-          </div>
-        </div>
-      </div>
-
-      <div className="flex flex-col gap-16">
-        <Header variant="h3">Card Loading</Header>
-        <div className="flex flex-col gap-12 p-16 rounded-10 border border-border-neutral-base bg-background-field-base max-w-400">
-          <Skeleton className="h-200 w-full rounded-6" />
-          <div className="space-y-8">
-            <Skeleton className="h-20 w-3/4" />
-            <Skeleton className="h-16 w-full" />
-            <Skeleton className="h-16 w-2/3" />
-          </div>
-          <div className="flex gap-8 pt-8">
-            <Skeleton className="h-32 w-100 rounded-6" />
-            <Skeleton className="h-32 w-100 rounded-6" />
-          </div>
-        </div>
-      </div>
-
-      <div className="flex flex-col gap-16">
-        <Header variant="h3">List Loading</Header>
-        <div className="flex flex-col gap-8 max-w-500">
-          {Array.from({length: 4}, (_, i) => i).map((id) => (
-            <div
-              key={`list-loading-${id}`}
-              className="flex items-center gap-12 p-12 rounded-6 border border-border-neutral-base bg-background-field-base"
-            >
-              <Skeleton className="h-48 w-48 rounded-full shrink-0" />
-              <div className="flex-1 space-y-8">
-                <Skeleton className="h-16 w-3/4" />
-                <Skeleton className="h-14 w-1/2" />
-              </div>
-              <Skeleton className="h-32 w-80 rounded-6" />
-            </div>
-          ))}
-        </div>
-      </div>
-
-      <div className="flex flex-col gap-16">
-        <Header variant="h3">Table Loading</Header>
-        <div className="rounded-10 border border-border-neutral-base bg-background-field-base overflow-hidden max-w-700">
-          <div className="flex gap-16 p-12 border-b border-border-neutral-base bg-background-neutral-base">
-            <Skeleton className="h-16 w-140" />
-            <Skeleton className="h-16 w-220" />
-            <Skeleton className="h-16 w-120" />
-            <Skeleton className="h-16 w-100 ml-auto" />
-          </div>
-          {Array.from({length: 5}, (_, i) => i).map((id) => (
-            <div
-              key={`table-row-${id}`}
-              className="flex gap-16 p-12 border-b border-border-neutral-base last:border-0"
-            >
-              <Skeleton className="h-14 w-140" />
-              <Skeleton className="h-14 w-220" />
-              <Skeleton className="h-14 w-120" />
-              <Skeleton className="h-14 w-100 ml-auto" />
-            </div>
-          ))}
-        </div>
-      </div>
-
-      <div className="flex flex-col gap-16">
-        <Header variant="h3">Form Loading</Header>
-        <div className="max-w-400 space-y-16 p-16 rounded-10 border border-border-neutral-base bg-background-field-base">
-          <div className="space-y-8">
-            <Skeleton className="h-16 w-100" />
-            <Skeleton className="h-32 w-full rounded-6" />
-          </div>
-          <div className="space-y-8">
-            <Skeleton className="h-16 w-120" />
-            <Skeleton className="h-32 w-full rounded-6" />
-          </div>
-          <div className="space-y-8">
-            <Skeleton className="h-16 w-80" />
-            <Skeleton className="h-96 w-full rounded-6" />
-          </div>
-          <div className="flex gap-8 pt-8">
-            <Skeleton className="h-32 w-100 rounded-6" />
-            <Skeleton className="h-32 w-100 rounded-6" />
-          </div>
-        </div>
-      </div>
-
-      <div className="flex flex-col gap-16">
-        <Header variant="h3">Avatar Group Loading</Header>
-        <div className="flex -space-x-8">
-          {Array.from({length: 5}, (_, i) => i).map((id) => (
-            <Skeleton
-              key={`avatar-${id}`}
-              className="h-40 w-40 rounded-full border-2 border-background-field-base"
-            />
-          ))}
-        </div>
-      </div>
-    </div>
-  ),
-};

package/src/components/skeleton/skeleton.tsx

@@ -1,14 +0,0 @@
-import type {ComponentProps} from 'react';
-import {cn} from 'utils/cn';
-
-type SkeletonProps = ComponentProps<'div'>;
-
-export function Skeleton({className, ...props}: SkeletonProps) {
-  return (
-    <div
-      data-slot="skeleton"
-      className={cn('animate-pulse rounded-6 bg-background-neutral-disabled', className)}
-      {...props}
-    />
-  );
-}

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

@@ -1,254 +0,0 @@
-import type {
-  ColumnDef,
-  ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
-} from '@tanstack/react-table';
-import {
-  flexRender,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from '@tanstack/react-table';
-import {Checkbox} from 'components/checkbox';
-import {Icon} from 'components/icon';
-import {Text} from 'components/typography';
-import {type ComponentProps, useEffect, useMemo, useState} from 'react';
-import {cn} from 'utils/cn';
-import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from './table';
-import {TablePagination} from './table-pagination';
-
-/**
- * Props for the {@link DataTable} component.
- *
- * @typeParam TData - The shape of the row data.
- * @typeParam TValue - The value type used by column definitions.
- */
-interface DataTableProps<TData, TValue> extends Omit<ComponentProps<'div'>, 'children'> {
-  /**
-   * Column definitions for the table, as expected by `@tanstack/react-table`.
-   *
-   * These control how each field in {@link data} is rendered and interacted with.
-   */
-  columns: ColumnDef<TData, TValue>[];
-  /**
-   * Array of data items to render as table rows.
-   */
-  data: TData[];
-  /**
-   * Enables client-side pagination when `true`.
-   *
-   * Defaults to `true`. When set to `false`, all rows are rendered in a single
-   * page and the pagination controls are disabled. In that case, the
-   * {@link pageSize} value is effectively ignored.
-   */
-  pagination?: boolean;
-  /**
-   * Number of rows to display per page when pagination is enabled.
-   *
-   * Defaults to `10`. This value is used to initialize the internal pagination
-   * state and only has an effect when {@link pagination} is `true`.
-   */
-  pageSize?: number;
-  /**
-   * Array of page size options to display in the page size selector.
-   * When provided, a dropdown will be rendered in the pagination footer allowing
-   * users to change the number of rows per page.
-   *
-   * @default [10, 20, 50, 100]
-   * @example
-   * ```tsx
-   * <DataTable columns={columns} data={data} pageSizeOptions={[5, 10, 25]} />
-   * ```
-   */
-  pageSizeOptions?: number[];
-  /**
-   * When `true`, displays the count of selected rows.
-   *
-   * This is useful when row selection is enabled to give users feedback on how
-   * many rows are currently selected.
-   */
-  showSelectedCount?: boolean;
-  /**
-   * Optional callback invoked when a table row is clicked.
-   *
-   * The callback receives the corresponding data item for the clicked row.
-   */
-  onRowClick?: (row: TData) => void;
-  /**
-   * React node to render when there are no rows to display.
-   *
-   * If not provided, the table will render without rows and without a custom
-   * empty state message or placeholder.
-   */
-  emptyState?: React.ReactNode;
-}
-
-export function DataTable<TData, TValue>({
-  columns,
-  data,
-  pagination = true,
-  pageSize = 10,
-  pageSizeOptions,
-  showSelectedCount = false,
-  onRowClick,
-  emptyState,
-  className,
-  ...props
-}: DataTableProps<TData, TValue>) {
-  const [sorting, setSorting] = useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
-  const [rowSelection, setRowSelection] = useState({});
-  const [paginationState, setPaginationState] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize,
-  });
-
-  useEffect(() => {
-    setPaginationState((prev) => ({...prev, pageSize, pageIndex: 0}));
-  }, [pageSize]);
-
-  // Add selection column if showSelectedCount is enabled
-  const columnsWithSelection = useMemo(() => {
-    if (!showSelectedCount) {
-      return columns;
-    }
-
-    const selectionColumn: ColumnDef<TData, TValue> = {
-      id: 'select',
-      header: ({table}) => {
-        const isAllSelected = table.getIsAllPageRowsSelected();
-        const isSomeSelected = table.getIsSomePageRowsSelected();
-        return (
-          <Checkbox
-            checked={isAllSelected ? true : isSomeSelected ? 'indeterminate' : false}
-            onCheckedChange={(checked) => table.toggleAllPageRowsSelected(!!checked)}
-            onClick={(e) => e.stopPropagation()}
-            aria-label="Select all"
-          />
-        );
-      },
-      cell: ({row}) => (
-        <Checkbox
-          checked={row.getIsSelected()}
-          onCheckedChange={(checked) => row.toggleSelected(!!checked)}
-          onClick={(e) => e.stopPropagation()}
-          aria-label="Select row"
-        />
-      ),
-      enableSorting: false,
-      enableHiding: false,
-    };
-
-    return [selectionColumn, ...columns];
-  }, [columns, showSelectedCount]);
-
-  const table = useReactTable({
-    data,
-    columns: columnsWithSelection,
-    getCoreRowModel: getCoreRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getPaginationRowModel: pagination ? getPaginationRowModel() : undefined,
-    enableRowSelection: showSelectedCount,
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    onColumnVisibilityChange: setColumnVisibility,
-    onRowSelectionChange: setRowSelection,
-    onPaginationChange: setPaginationState,
-    state: {
-      sorting,
-      columnFilters,
-      columnVisibility,
-      rowSelection,
-      pagination: pagination ? paginationState : undefined,
-    },
-  });
-
-  return (
-    <div
-      className={cn('rounded-8 border border-border-neutral-base overflow-hidden', className)}
-      {...props}
-    >
-      <Table>
-        {table.getRowModel().rows.length > 0 ? (
-          <TableHeader>
-            {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id} className="hover:bg-transparent border-b">
-                {headerGroup.headers.map((header) => (
-                  <TableHead key={header.id}>
-                    {header.isPlaceholder
-                      ? null
-                      : flexRender(header.column.columnDef.header, header.getContext())}
-                  </TableHead>
-                ))}
-              </TableRow>
-            ))}
-          </TableHeader>
-        ) : null}
-        <TableBody>
-          {table.getRowModel().rows?.length ? (
-            table.getRowModel().rows.map((row) => (
-              <TableRow
-                key={row.id}
-                onClick={() => onRowClick?.(row.original)}
-                data-selected={row.getIsSelected()}
-                className={onRowClick ? 'cursor-pointer' : ''}
-                tabIndex={onRowClick ? 0 : undefined}
-                role={onRowClick ? 'button' : undefined}
-                onKeyDown={(event) => {
-                  if (!onRowClick) return;
-                  if (event.key === 'Enter' || event.key === ' ') {
-                    event.preventDefault();
-                    onRowClick(row.original);
-                  }
-                }}
-              >
-                {row.getVisibleCells().map((cell) => (
-                  <TableCell key={cell.id}>
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </TableCell>
-                ))}
-              </TableRow>
-            ))
-          ) : (
-            <TableRow className="hover:bg-transparent">
-              <TableCell colSpan={table.getAllColumns().length} className="h-240 text-center">
-                {emptyState || (
-                  <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="fileDamageLine"
-                        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 results
-                      </Text>
-                      <Text size="xs" className="text-foreground-neutral-muted">
-                        Looks like there are no results.
-                      </Text>
-                    </div>
-                  </div>
-                )}
-              </TableCell>
-            </TableRow>
-          )}
-        </TableBody>
-        {pagination && table.getRowModel().rows?.length > 0 && (
-          <TablePagination
-            table={table}
-            pageSizeOptions={pageSizeOptions}
-            showSelectedCount={showSelectedCount}
-          />
-        )}
-      </Table>
-    </div>
-  );
-}