@keboola/design 2.0.1 → 2.1.0

package/src/components/Table/Table.stories.tsx

@@ -1,328 +0,0 @@
-import { type ComponentProps, type ReactNode, useMemo, useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { action } from 'storybook/actions';
-
-import { EmptyState } from '../../blocks/EmptyState';
-import { ErrorState } from '../../blocks/ErrorState';
-import { SearchInput } from '../../blocks/SearchInput';
-import { Button } from '../../components/Button';
-import { Pagination } from '../../components/Pagination';
-import { ChevronDown, ChevronsUpDown, ChevronUp, CircleAlert, Search } from '../../icons';
-
-import { Table } from './Table';
-
-const invoices = [
-  {
-    invoice: 'INV001 dhuishduiashd iusahdiuahsdiuhas iudhaisudhsaiudh iauh',
-    paymentStatus: 'Paid',
-    totalAmount: '$250.00',
-    paymentMethod: 'Credit Card',
-  },
-  {
-    invoice: 'INV002',
-    paymentStatus: 'Pending',
-    totalAmount: '$150.00',
-    paymentMethod: 'PayPal',
-  },
-  {
-    invoice: 'INV003',
-    paymentStatus: 'Unpaid',
-    totalAmount: '$350.00',
-    paymentMethod: 'Bank Transfer',
-  },
-  {
-    invoice: 'INV004',
-    paymentStatus: 'Paid',
-    totalAmount: '$450.00',
-    paymentMethod: 'Credit Card',
-  },
-  {
-    invoice: 'INV005',
-    paymentStatus: 'Paid',
-    totalAmount: '$550.00',
-    paymentMethod: 'PayPal',
-  },
-  {
-    invoice: 'INV006',
-    paymentStatus: 'Pending',
-    totalAmount: '$200.00',
-    paymentMethod: 'Bank Transfer',
-  },
-  {
-    invoice: 'INV007',
-    paymentStatus: 'Unpaid',
-    totalAmount: '$300.00',
-    paymentMethod: 'Credit Card',
-  },
-];
-
-const Component = (props: ComponentProps<typeof Table>) => (
-  <Table {...props}>
-    <Table.Header>
-      <Table.Row>
-        <Table.Head>Invoice</Table.Head>
-        <Table.Head>Status</Table.Head>
-        <Table.Head>Method</Table.Head>
-        <Table.Head>Amount</Table.Head>
-      </Table.Row>
-    </Table.Header>
-    <Table.Body>
-      {invoices.map((invoice) => (
-        <Table.Row key={invoice.invoice}>
-          <Table.Cell>{invoice.invoice}</Table.Cell>
-          <Table.Cell>{invoice.paymentStatus}</Table.Cell>
-          <Table.Cell>{invoice.paymentMethod}</Table.Cell>
-          <Table.Cell>{invoice.totalAmount}</Table.Cell>
-        </Table.Row>
-      ))}
-    </Table.Body>
-    <Table.Footer>
-      <Table.Row>
-        <Table.Cell colSpan={3}>Total</Table.Cell>
-        <Table.Cell>$2,500.00</Table.Cell>
-      </Table.Row>
-    </Table.Footer>
-  </Table>
-);
-
-const meta: Meta<typeof Table> = {
-  component: Table,
-  parameters: {
-    layout: 'centered',
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Table>;
-
-export const Basic: Story = {
-  render: Component,
-};
-
-export const Overflow: Story = {
-  render: () => (
-    <div className="tw-flex tw-size-[220px]">
-      <div className="tw-overflow-auto">
-        <Component />
-      </div>
-    </div>
-  ),
-};
-
-export const Bordered: Story = {
-  render: (props) => <Component {...props} bordered />,
-};
-
-type Token = { id: string; name: string; createdAt: string; lastUsed: string };
-
-const pad2 = (n: number) => String(n).padStart(2, '0');
-
-const tokens: Token[] = Array.from({ length: 23 }, (_, i) => ({
-  id: `tok_${String(i + 1).padStart(3, '0')}`,
-  name: `Token ${i + 1}${i % 3 === 0 ? ' (production)' : i % 3 === 1 ? ' (staging)' : ''}`,
-  createdAt: `2026-01-${pad2((i % 28) + 1)}`,
-  lastUsed: `2026-05-${pad2((i % 28) + 1)}`,
-}));
-
-type SortKey = keyof Token;
-type SortDir = 'asc' | 'desc';
-const PAGE_SIZE = 5;
-
-const sortAttr = (active: boolean, direction: SortDir) =>
-  !active ? 'none' : direction === 'asc' ? 'ascending' : 'descending';
-
-const SortHeader = ({
-  active,
-  direction,
-  onClick,
-  children,
-}: {
-  active: boolean;
-  direction: SortDir;
-  onClick: () => void;
-  children: ReactNode;
-}) => {
-  const SortIcon = !active ? ChevronsUpDown : direction === 'asc' ? ChevronUp : ChevronDown;
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className="tw-group tw-flex tw-cursor-pointer tw-items-center tw-gap-1 tw-border-0 tw-bg-transparent tw-p-0 tw-font-medium tw-text-inherit"
-    >
-      {children}
-      <SortIcon className="tw-size-3 tw-text-muted-foreground" />
-    </button>
-  );
-};
-
-/**
- * Canonical entity-list pattern: `Table` (presentational) composed with `SearchInput`, `Pagination`,
- * and `EmptyState` / `ErrorState`. State (sort / name search / page) is plain React `useState` —
- * scales up to TanStack Table's headless model (`@tanstack/react-table`,
- * https://tanstack.com/table/latest) when the consumer needs server-side pagination, multi-column
- * sort, row selection, or a true global filter that scans every column.
- *
- * Pattern reference: TanStack "headless UI" — the state library is separable from the presentational
- * layer (https://tanstack.com/table/latest/docs/introduction#what-is-headless-ui).
- */
-export const AsEntityList: Story = {
-  name: 'As entity list',
-  parameters: { layout: 'padded' },
-  render: () => {
-    const [query, setQuery] = useState('');
-    const [sortKey, setSortKey] = useState<SortKey>('name');
-    const [sortDir, setSortDir] = useState<SortDir>('asc');
-    const [page, setPage] = useState(0);
-
-    const filtered = useMemo(() => {
-      const q = query.trim().toLowerCase();
-      const matched = q ? tokens.filter((t) => t.name.toLowerCase().includes(q)) : tokens;
-      return [...matched].sort((a, b) => {
-        const av = a[sortKey];
-        const bv = b[sortKey];
-        return sortDir === 'asc' ? av.localeCompare(bv) : bv.localeCompare(av);
-      });
-    }, [query, sortKey, sortDir]);
-
-    const pageCount = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
-    const safePage = Math.min(page, pageCount - 1);
-    const pageRows = filtered.slice(safePage * PAGE_SIZE, safePage * PAGE_SIZE + PAGE_SIZE);
-
-    const toggleSort = (key: SortKey) => {
-      if (key === sortKey) {
-        setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'));
-      } else {
-        setSortKey(key);
-        setSortDir('asc');
-      }
-      setPage(0);
-    };
-
-    return (
-      <div className="tw-flex tw-w-[720px] tw-flex-col tw-gap-4">
-        <SearchInput
-          allowClear
-          placeholder="Search tokens…"
-          value={query}
-          onValueChange={(v) => {
-            setQuery(v);
-            setPage(0);
-          }}
-          className="tw-w-72"
-        />
-        {filtered.length === 0 ? (
-          <EmptyState>
-            <EmptyState.Icon>
-              <Search />
-            </EmptyState.Icon>
-            <EmptyState.Title>No tokens match your search</EmptyState.Title>
-            <EmptyState.Description>
-              Try a different query or clear the search to see all tokens.
-            </EmptyState.Description>
-            <EmptyState.Actions>
-              <Button variant="outline" onClick={() => setQuery('')}>
-                Clear search
-              </Button>
-            </EmptyState.Actions>
-          </EmptyState>
-        ) : (
-          <>
-            <Table bordered>
-              <Table.Header>
-                <Table.Row>
-                  <Table.Head aria-sort={sortAttr(sortKey === 'name', sortDir)}>
-                    <SortHeader
-                      active={sortKey === 'name'}
-                      direction={sortDir}
-                      onClick={() => toggleSort('name')}
-                    >
-                      Name
-                    </SortHeader>
-                  </Table.Head>
-                  <Table.Head aria-sort={sortAttr(sortKey === 'createdAt', sortDir)}>
-                    <SortHeader
-                      active={sortKey === 'createdAt'}
-                      direction={sortDir}
-                      onClick={() => toggleSort('createdAt')}
-                    >
-                      Created
-                    </SortHeader>
-                  </Table.Head>
-                  <Table.Head aria-sort={sortAttr(sortKey === 'lastUsed', sortDir)}>
-                    <SortHeader
-                      active={sortKey === 'lastUsed'}
-                      direction={sortDir}
-                      onClick={() => toggleSort('lastUsed')}
-                    >
-                      Last used
-                    </SortHeader>
-                  </Table.Head>
-                </Table.Row>
-              </Table.Header>
-              <Table.Body>
-                {pageRows.map((token) => (
-                  <Table.Row key={token.id}>
-                    <Table.Cell>{token.name}</Table.Cell>
-                    <Table.Cell>{token.createdAt}</Table.Cell>
-                    <Table.Cell>{token.lastUsed}</Table.Cell>
-                  </Table.Row>
-                ))}
-              </Table.Body>
-            </Table>
-            <Pagination>
-              <Pagination.Content>
-                <Pagination.Item>
-                  <Pagination.Previous
-                    onClick={() => setPage((p) => Math.max(0, p - 1))}
-                    disabled={safePage === 0}
-                    aria-disabled={safePage === 0}
-                  />
-                </Pagination.Item>
-                {Array.from({ length: pageCount }, (_, i) => (
-                  <Pagination.Item key={i}>
-                    <Pagination.Button active={i === safePage} onClick={() => setPage(i)}>
-                      {i + 1}
-                    </Pagination.Button>
-                  </Pagination.Item>
-                ))}
-                <Pagination.Item>
-                  <Pagination.Next
-                    onClick={() => setPage((p) => Math.min(pageCount - 1, p + 1))}
-                    disabled={safePage === pageCount - 1}
-                    aria-disabled={safePage === pageCount - 1}
-                  />
-                </Pagination.Item>
-              </Pagination.Content>
-            </Pagination>
-          </>
-        )}
-      </div>
-    );
-  },
-};
-
-/**
- * Failure surface for the entity-list pattern. Swap the table body for `ErrorState` when the
- * underlying fetch errors. Mirrors the `AsEntityList` story shape so consumers can copy/paste either.
- */
-export const AsEntityListError: Story = {
-  name: 'As entity list — error',
-  parameters: { layout: 'padded' },
-  render: () => (
-    <div className="tw-flex tw-w-[720px] tw-flex-col tw-gap-4">
-      <SearchInput allowClear placeholder="Search tokens…" disabled className="tw-w-72" />
-      <ErrorState>
-        <ErrorState.Icon>
-          <CircleAlert />
-        </ErrorState.Icon>
-        <ErrorState.Title>Couldn&apos;t load tokens</ErrorState.Title>
-        <ErrorState.Description>
-          The request to load tokens failed. Check your connection and try again.
-        </ErrorState.Description>
-        <ErrorState.Actions>
-          <Button onClick={action('retry')}>Retry</Button>
-        </ErrorState.Actions>
-      </ErrorState>
-    </div>
-  ),
-};

package/src/components/Table/Table.tsx

@@ -1,68 +0,0 @@
-import type { ComponentProps } from 'react';
-
-import { cn } from '../../utils';
-
-import { TableBody } from './TableBody';
-import { TableCell } from './TableCell';
-import { TableFooter } from './TableFooter';
-import { TableHead } from './TableHead';
-import { TableHeader } from './TableHeader';
-import { TableRow } from './TableRow';
-
-/**
- * Props for `Table`. `borderCollapsed` toggles standard collapsed borders vs separate row spacing;
- * `bordered` wraps the table in a rounded bordered container with overflow scrolling.
- */
-type Props = {
-  borderCollapsed?: boolean;
-  bordered?: boolean;
-  containerClassName?: string;
-} & ComponentProps<'table'>;
-
-/**
- * Tabular data surface with header / body / row / cell compound parts.
- *
- * **When to use:** tabular data with named columns — entity lists with shared schema (jobs, buckets,
- * tables), sortable rows, row-level actions. Compose `Table.Header` + `Table.Body` + `Table.Row` +
- * `Table.Head` / `Table.Cell`.
- * **When NOT to use:** for heterogeneous lists where each row has its own shape use a `Card` list;
- * for tree / hierarchy layouts use a custom recursive list with `Table` per level.
- * **Composition:** wrap in `PageLayout.Content`. For sortable / filterable behaviour bring your own
- * state library (TanStack Table is a common pairing); this component is presentational.
- *
- * @see RECIPES.md#list-detail — for a list-table + row-click-to-detail pattern
- */
-export const Table = ({
-  borderCollapsed = true,
-  bordered = false,
-  containerClassName,
-  className,
-  ...props
-}: Props) => {
-  return (
-    <div
-      className={cn(
-        'tw-relative tw-w-full',
-        bordered &&
-          'tw-overflow-auto tw-rounded-[10px] tw-border tw-border-solid tw-border-neutral-150',
-        containerClassName,
-      )}
-    >
-      <table
-        className={cn(
-          'tw-w-full tw-caption-bottom tw-text-sm',
-          borderCollapsed ? 'tw-border-collapse' : 'tw-border-separate tw-border-spacing-y-1',
-          className,
-        )}
-        {...props}
-      />
-    </div>
-  );
-};
-
-Table.Header = TableHeader;
-Table.Head = TableHead;
-Table.Body = TableBody;
-Table.Row = TableRow;
-Table.Cell = TableCell;
-Table.Footer = TableFooter;

package/src/components/Table/TableBody.tsx

@@ -1,22 +0,0 @@
-import type { ComponentProps } from 'react';
-
-import { cn } from '../../utils';
-
-export const TableBody = ({
-  withBorderSeparator = true,
-  className,
-  ...props
-}: { withBorderSeparator?: boolean } & ComponentProps<'tbody'>) => {
-  return (
-    <tbody
-      className={cn(
-        {
-          '[&_tr]:tw-border-0 [&_tr]:tw-border-b-neutral-150 [&_tr]:tw-border-b [&_tr]:tw-border-solid [&_tr:last-child]:tw-border-0':
-            withBorderSeparator,
-        },
-        className,
-      )}
-      {...props}
-    />
-  );
-};

package/src/components/Table/TableCell.tsx

@@ -1,7 +0,0 @@
-import type { ComponentProps } from 'react';
-
-import { cn } from '../../utils';
-
-export const TableCell = ({ className, ...props }: ComponentProps<'td'>) => {
-  return <td className={cn('tw-px-3 tw-py-2', className)} {...props} />;
-};

package/src/components/Table/TableFooter.tsx

@@ -1,15 +0,0 @@
-import type { ComponentProps } from 'react';
-
-import { cn } from '../../utils';
-
-export const TableFooter = ({ className, ...props }: ComponentProps<'tfoot'>) => {
-  return (
-    <tfoot
-      className={cn(
-        'tw-bg-muted/50 tw-border-t tw-font-medium [&>tr]:last:tw-border-b-0',
-        className,
-      )}
-      {...props}
-    />
-  );
-};

package/src/components/Table/TableHead.tsx

@@ -1,15 +0,0 @@
-import type { ComponentProps } from 'react';
-
-import { cn } from '../../utils';
-
-export const TableHead = ({ className, ...props }: ComponentProps<'th'>) => {
-  return (
-    <th
-      className={cn(
-        'tw-px-3 tw-py-2 tw-text-left tw-font-medium tw-whitespace-nowrap [&:has([role=checkbox])]:tw-pr-0 [&>[role=checkbox]]:tw-translate-y-[2px]',
-        className,
-      )}
-      {...props}
-    />
-  );
-};

package/src/components/Table/TableHeader.tsx

@@ -1,20 +0,0 @@
-import type { ComponentProps } from 'react';
-
-import { cn } from '../../utils';
-
-export const TableHeader = ({
-  withShadow = false,
-  className,
-  ...props
-}: { withShadow?: boolean } & ComponentProps<'thead'>) => {
-  return (
-    <thead
-      className={cn(
-        'tw-sticky tw-top-0 tw-z-10 [&_tr]:tw-bg-neutral-100 [&_tr]:tw-border-b [&_tr]:tw-border-neutral-150',
-        { 'tw-shadow-table': withShadow },
-        className,
-      )}
-      {...props}
-    />
-  );
-};

package/src/components/Table/TableRow.tsx

@@ -1,11 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-
-import { cn } from '../../utils';
-
-export const TableRow = ({
-  ref,
-  className,
-  ...props
-}: ComponentProps<'tr'> & { ref?: Ref<ElementRef<'tr'>> }) => (
-  <tr ref={ref} className={cn('hover:tw-bg-neutral-100', className)} {...props} />
-);

package/src/components/Table/index.ts

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

package/src/components/Tabs.stories.tsx

@@ -1,123 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Tabs, TabsContent } from './Tabs';
-
-const meta: Meta<typeof Tabs> = {
-  component: Tabs,
-  args: {
-    triggers: [
-      {
-        value: 'tab1',
-        title: 'Account',
-      },
-      {
-        value: 'tab2',
-        title: 'Password',
-      },
-      {
-        value: 'tab3',
-        title: 'Disabled',
-        disabled: true,
-      },
-    ],
-    children: (
-      <>
-        <TabsContent value="tab1">
-          <p>Account content</p>
-        </TabsContent>
-        <TabsContent value="tab2">
-          <p>Password content</p>
-        </TabsContent>
-      </>
-    ),
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Tabs>;
-
-export const Primary: Story = {};
-
-export const Compact: Story = {
-  args: { compact: true },
-};
-
-export const WithOnCloseTrigger: Story = {
-  args: {
-    triggers: [
-      {
-        value: 'tab1',
-        title: 'Closable Tab',
-        onClose: (value: string) => {
-          console.log('Closed tab:', value);
-        },
-      },
-      { value: 'tab2', title: 'Normal Tab' },
-    ],
-    children: (
-      <>
-        <TabsContent value="tab1">
-          <p>Closable tab content</p>
-        </TabsContent>
-        <TabsContent value="tab2">
-          <p>Normal tab content</p>
-        </TabsContent>
-      </>
-    ),
-  },
-};
-
-export const WithManyTabs: Story = {
-  args: {
-    triggers: [
-      { value: 'tab1', title: 'Project' },
-      { value: 'tab2', title: 'Users' },
-      { value: 'tab3', title: 'API Tokens' },
-      { value: 'tab4', title: 'CLI Sync' },
-      { value: 'tab5', title: 'Features' },
-      { value: 'tab6', title: 'AI Rules' },
-      { value: 'tab7', title: 'MCP Server' },
-      { value: 'tab8', title: 'Global Settings' },
-      { value: 'tab9', title: 'Accounts' },
-      { value: 'tab10', title: 'Passwords' },
-      { value: 'tab11', title: 'CI/CD' },
-    ],
-    children: (
-      <>
-        <TabsContent value="tab1">
-          <p>Content for Tab 1</p>
-        </TabsContent>
-        <TabsContent value="tab2">
-          <p>Content for Tab 2</p>
-        </TabsContent>
-        <TabsContent value="tab3">
-          <p>Content for Tab 3</p>
-        </TabsContent>
-        <TabsContent value="tab4">
-          <p>Content for Tab 4</p>
-        </TabsContent>
-        <TabsContent value="tab5">
-          <p>Content for Tab 5</p>
-        </TabsContent>
-        <TabsContent value="tab6">
-          <p>Content for Tab 6</p>
-        </TabsContent>
-        <TabsContent value="tab7">
-          <p>Content for Tab 7</p>
-        </TabsContent>
-        <TabsContent value="tab8">
-          <p>Content for Tab 8</p>
-        </TabsContent>
-        <TabsContent value="tab9">
-          <p>Content for Tab 9</p>
-        </TabsContent>
-        <TabsContent value="tab10">
-          <p>Content for Tab 10</p>
-        </TabsContent>
-        <TabsContent value="tab11">
-          <p>Content for Tab 11</p>
-        </TabsContent>
-      </>
-    ),
-  },
-};