@shipfox/react-ui 0.13.0 → 0.15.0

package/src/components/select/select.tsx

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

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

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

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

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

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

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

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

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