@keboola/design 2.0.0 → 2.1.0

package/src/patterns/ConfirmDialog.stories.tsx

@@ -1,72 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Button, ButtonGroup, Modal } from '@keboola/design';
-import { AlertTriangle, Trash2 } from '@keboola/design/icons';
-
-const DeleteBucketButton = ({
-  name,
-  onConfirm,
-}: {
-  name: string;
-  onConfirm: () => Promise<void>;
-}) => {
-  const [open, setOpen] = useState(false);
-  const [isDeleting, setIsDeleting] = useState(false);
-
-  const handleConfirm = async () => {
-    setIsDeleting(true);
-    try {
-      await onConfirm();
-      setOpen(false);
-    } finally {
-      setIsDeleting(false);
-    }
-  };
-
-  return (
-    <Modal open={open} onOpenChange={setOpen}>
-      <Modal.Trigger asChild>
-        <Button variant="danger">
-          <Trash2 className="tw-size-4" />
-          Delete
-        </Button>
-      </Modal.Trigger>
-      <Modal.Content size="small">
-        <Modal.Icon color="red" icon={<AlertTriangle />} />
-        <Modal.Header
-          title={`Delete bucket "${name}"?`}
-          description="This action cannot be undone. All tables in the bucket will be lost."
-        />
-        <Modal.Footer>
-          <ButtonGroup variant="block">
-            <Modal.Close asChild>
-              <Button type="button" variant="secondary" disabled={isDeleting}>
-                Cancel
-              </Button>
-            </Modal.Close>
-            <Button type="button" variant="danger" isLoading={isDeleting} onClick={handleConfirm}>
-              Delete bucket
-            </Button>
-          </ButtonGroup>
-        </Modal.Footer>
-      </Modal.Content>
-    </Modal>
-  );
-};
-
-const meta = {
-  title: 'Patterns/ConfirmDialog',
-  component: DeleteBucketButton,
-} satisfies Meta<typeof DeleteBucketButton>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    name: 'marketing',
-    onConfirm: () => new Promise((resolve) => setTimeout(resolve, 500)),
-  },
-};

package/src/patterns/CreatableMultiCombobox.stories.tsx

@@ -1,33 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Combobox } from '@keboola/design';
-
-const TAGS = ['marketing', 'sales', 'analytics', 'internal'] as const;
-
-const TagPicker = () => {
-  const [tag, setTag] = useState<string | null>(null);
-
-  return (
-    <Combobox
-      items={TAGS}
-      value={tag}
-      onValueChange={setTag}
-      allowCreate
-      allowClear
-      placeholder="Pick or create a tag"
-      className="tw-w-64"
-    />
-  );
-};
-
-const meta = {
-  title: 'Patterns/CreatableMultiCombobox',
-  component: TagPicker,
-} satisfies Meta<typeof TagPicker>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/src/patterns/DataCardWithSkeleton.stories.tsx

@@ -1,48 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Card, Skeleton, SkeletonList } from '@keboola/design';
-
-type Stats = { tables: number; rows: number };
-
-const StatsCard = ({ stats, isLoading }: { stats: Stats | null; isLoading: boolean }) => (
-  <Card bordered>
-    <Card.Header>
-      <Card.Title>
-        {isLoading ? <Skeleton height="md" className="tw-w-32" /> : 'Storage'}
-      </Card.Title>
-    </Card.Header>
-    <Card.Content>
-      {isLoading || !stats ? (
-        <SkeletonList groups={2} rowHeight="sm" />
-      ) : (
-        <dl className="tw-flex tw-flex-col tw-gap-2">
-          <div className="tw-flex tw-justify-between">
-            <dt className="tw-text-muted-foreground">Tables</dt>
-            <dd>{stats.tables}</dd>
-          </div>
-          <div className="tw-flex tw-justify-between">
-            <dt className="tw-text-muted-foreground">Rows</dt>
-            <dd>{stats.rows.toLocaleString()}</dd>
-          </div>
-        </dl>
-      )}
-    </Card.Content>
-  </Card>
-);
-
-const meta = {
-  title: 'Patterns/DataCardWithSkeleton',
-  component: StatsCard,
-} satisfies Meta<typeof StatsCard>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Loading: Story = {
-  args: { stats: null, isLoading: true },
-};
-
-export const Ready: Story = {
-  args: { stats: { tables: 39, rows: 1284502 }, isLoading: false },
-};

package/src/patterns/DisabledButtonTooltip.stories.tsx

@@ -1,30 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Button, Tooltip } from '@keboola/design';
-
-const SaveButton = ({ canSave, reason }: { canSave: boolean; reason: string }) => (
-  <Tooltip tooltip={canSave ? null : reason} placement="top" triggerAsChild>
-    <span className={canSave ? undefined : 'tw-inline-block tw-cursor-not-allowed'}>
-      <Button disabled={!canSave} className={canSave ? undefined : 'tw-pointer-events-none'}>
-        Save
-      </Button>
-    </span>
-  </Tooltip>
-);
-
-const meta = {
-  title: 'Patterns/DisabledButtonTooltip',
-  component: SaveButton,
-} satisfies Meta<typeof SaveButton>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Disabled: Story = {
-  args: { canSave: false, reason: 'Fill in all required fields first.' },
-};
-
-export const Enabled: Story = {
-  args: { canSave: true, reason: '' },
-};

package/src/patterns/FilterToolbar.stories.tsx

@@ -1,275 +0,0 @@
-import { useMemo, useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import {
-  Badge,
-  Button,
-  InputGroup,
-  PageLayout,
-  PageToolbar,
-  Select,
-  Separator,
-  ToggleGroup,
-  Tooltip,
-} from '@keboola/design';
-import {
-  ChevronsUpDown,
-  Info,
-  LayoutGrid,
-  List,
-  ListFilter,
-  Plus,
-  RefreshCw,
-  Search,
-  X,
-} from '@keboola/design/icons';
-
-type Row = {
-  id: string;
-  name: string;
-  type: 'table' | 'file';
-  status: 'scheduled' | 'failed' | 'succeeded';
-};
-
-type FilterKey = 'scheduled' | 'failed' | 'succeeded';
-
-type ViewMode = 'list' | 'grid';
-
-type SortKey = 'name-asc' | 'name-desc' | 'recent';
-
-const SORT_LABEL: Record<SortKey, string> = {
-  'name-asc': 'Name A to Z',
-  'name-desc': 'Name Z to A',
-  recent: 'Recently updated',
-};
-
-const FILTER_LABEL: Record<FilterKey, string> = {
-  scheduled: 'Scheduled',
-  failed: 'Failed',
-  succeeded: 'Succeeded',
-};
-
-const ALL_FILTERS: FilterKey[] = ['scheduled', 'failed', 'succeeded'];
-
-const SearchField = ({
-  value,
-  onValueChange,
-}: {
-  value: string;
-  onValueChange: (next: string) => void;
-}) => (
-  <InputGroup className="tw-w-[300px]">
-    <InputGroup.Addon align="inline-start">
-      <Search className="tw-size-4 tw-text-muted-foreground" />
-    </InputGroup.Addon>
-    <InputGroup.Input
-      placeholder="Search"
-      value={value}
-      onChange={(event) => onValueChange(event.target.value)}
-    />
-    <InputGroup.Addon align="inline-end">
-      <Tooltip tooltip="Searches by name and description." triggerAsChild>
-        <InputGroup.Button tabIndex={0} aria-label="Search help">
-          <Info className="tw-size-4 tw-text-muted-foreground" />
-        </InputGroup.Button>
-      </Tooltip>
-    </InputGroup.Addon>
-  </InputGroup>
-);
-
-const ActiveFiltersRow = ({
-  active,
-  onRemove,
-  onAdd,
-  onClear,
-}: {
-  active: FilterKey[];
-  onRemove: (key: FilterKey) => void;
-  onAdd: () => void;
-  onClear: () => void;
-}) => (
-  <div className="tw-flex tw-w-full tw-items-center tw-gap-2 tw-rounded-xl tw-bg-muted tw-py-1 tw-pl-2 tw-pr-1">
-    <div className="tw-flex tw-min-w-0 tw-flex-1 tw-items-center tw-gap-2">
-      {active.map((key) => (
-        <Badge
-          key={key}
-          variant="pill"
-          color="blue-inverse"
-          suffix={
-            <Button
-              variant="inline"
-              size="icon-2xs"
-              aria-label={`Remove ${FILTER_LABEL[key]} filter`}
-              onClick={() => onRemove(key)}
-            >
-              <X className="tw-size-3" />
-            </Button>
-          }
-        >
-          {FILTER_LABEL[key]}
-        </Badge>
-      ))}
-      <Button argo variant="invisible" size="icon-sm" aria-label="Add filter" onClick={onAdd}>
-        <Plus className="tw-size-4" />
-      </Button>
-    </div>
-    <Button argo variant="invisible" size="small" onClick={onClear}>
-      Clear
-    </Button>
-  </div>
-);
-
-const FilteredList = ({
-  rows,
-  showSort,
-  showViewToggle,
-  showRefresh,
-  showReorder,
-}: {
-  rows: Row[];
-  showSort: boolean;
-  showViewToggle: boolean;
-  showRefresh: boolean;
-  showReorder: boolean;
-}) => {
-  const [query, setQuery] = useState('');
-  const [sort, setSort] = useState<SortKey>('name-desc');
-  const [view, setView] = useState<ViewMode>('list');
-  const [active, setActive] = useState<FilterKey[]>(['scheduled', 'failed']);
-
-  const filtered = useMemo(() => {
-    const byQuery = rows.filter((row) => row.name.toLowerCase().includes(query.toLowerCase()));
-    const byStatus = active.length ? byQuery.filter((row) => active.includes(row.status)) : byQuery;
-    return [...byStatus].sort((a, b) => {
-      if (sort === 'name-asc') return a.name.localeCompare(b.name);
-      if (sort === 'name-desc') return b.name.localeCompare(a.name);
-      return b.id.localeCompare(a.id);
-    });
-  }, [rows, query, active, sort]);
-
-  const addFilter = () => {
-    setActive((prev) => {
-      const next = ALL_FILTERS.find((key) => !prev.includes(key));
-      return next ? [...prev, next] : prev;
-    });
-  };
-
-  const showRightCluster = showSort || showViewToggle || showRefresh || showReorder;
-  const showUtilities = showRefresh || showReorder;
-  const showDivider = showSort && (showUtilities || showViewToggle);
-
-  return (
-    <PageLayout>
-      <PageToolbar className="tw-flex-col tw-flex-nowrap tw-items-stretch tw-gap-2">
-        <div className="tw-flex tw-w-full tw-items-center tw-gap-6">
-          <div className="tw-flex tw-min-w-0 tw-flex-1">
-            <SearchField value={query} onValueChange={setQuery} />
-          </div>
-          {showRightCluster && (
-            <div className="tw-flex tw-items-center tw-gap-2">
-              <Button argo variant="outline" size="icon" aria-label="Open filters">
-                <ListFilter className="tw-size-4" />
-              </Button>
-              {showSort && (
-                <Select
-                  variant="argo"
-                  className="tw-w-[200px]"
-                  value={sort}
-                  onValueChange={(next: SortKey) => setSort(next)}
-                  items={(Object.keys(SORT_LABEL) as SortKey[]).map((key) => ({
-                    value: key,
-                    label: SORT_LABEL[key],
-                  }))}
-                />
-              )}
-              {showDivider && <Separator orientation="vertical" className="tw-h-9" />}
-              {showReorder && (
-                <Button argo variant="outline" size="icon" aria-label="Reorder">
-                  <ChevronsUpDown className="tw-size-4" />
-                </Button>
-              )}
-              {showRefresh && (
-                <Button argo variant="outline" size="icon" aria-label="Refresh">
-                  <RefreshCw className="tw-size-4" />
-                </Button>
-              )}
-              {showViewToggle && (
-                <ToggleGroup
-                  type="single"
-                  value={view}
-                  onValueChange={(next: ViewMode | '') => next && setView(next)}
-                  aria-label="View mode"
-                >
-                  <ToggleGroup.Item value="list" aria-label="List view">
-                    <List className="tw-size-4" />
-                  </ToggleGroup.Item>
-                  <ToggleGroup.Item value="grid" aria-label="Grid view">
-                    <LayoutGrid className="tw-size-4" />
-                  </ToggleGroup.Item>
-                </ToggleGroup>
-              )}
-            </div>
-          )}
-        </div>
-        {active.length > 0 && (
-          <ActiveFiltersRow
-            active={active}
-            onRemove={(key) => setActive((prev) => prev.filter((k) => k !== key))}
-            onAdd={addFilter}
-            onClear={() => setActive([])}
-          />
-        )}
-      </PageToolbar>
-      <PageLayout.Content>
-        <ul className="tw-flex tw-flex-col tw-gap-1 tw-text-sm">
-          {filtered.map((row) => (
-            <li key={row.id} className="tw-flex tw-items-center tw-gap-2">
-              <span className="tw-text-muted-foreground">[{row.status}]</span>
-              {row.name}
-            </li>
-          ))}
-        </ul>
-      </PageLayout.Content>
-    </PageLayout>
-  );
-};
-
-const meta = {
-  title: 'Patterns/FilterToolbar',
-  component: FilteredList,
-  parameters: { layout: 'padded' },
-  args: {
-    showSort: true,
-    showViewToggle: true,
-    showRefresh: false,
-    showReorder: false,
-    rows: [
-      { id: '1', name: 'marketing.users', type: 'table', status: 'succeeded' },
-      { id: '2', name: 'sales.leads', type: 'table', status: 'scheduled' },
-      { id: '3', name: 'export.csv', type: 'file', status: 'failed' },
-      { id: '4', name: 'snapshot.json', type: 'file', status: 'scheduled' },
-      { id: '5', name: 'events.parquet', type: 'file', status: 'failed' },
-    ],
-  },
-} satisfies Meta<typeof FilteredList>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/** Full toolbar — search, filter, sort, view-mode toggle, and the active-filters row. */
-export const Default: Story = {};
-
-/** Minimal variant: only the search field and a filter button. */
-export const SearchAndFilterOnly: Story = {
-  args: { showSort: false, showViewToggle: false },
-};
-
-/** Adds the refresh utility next to the sort, separated by a vertical divider. */
-export const WithRefresh: Story = {
-  args: { showRefresh: true },
-};
-
-/** Reorder + refresh utilities. View toggle hidden, mirrors a sortable list page. */
-export const WithReorderUtilities: Story = {
-  args: { showViewToggle: false, showRefresh: true, showReorder: true },
-};

package/src/patterns/InfoTooltip.stories.tsx

@@ -1,56 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Button, FormGroup, Label, TextInput, Tooltip } from '@keboola/design';
-import { Info } from '@keboola/design/icons';
-
-/** Info icon next to a label with a hover/focus tooltip — `Label` + icon-only `Button` + `Tooltip`. */
-const FieldWithInfo = ({ id, label, hint }: { id: string; label: string; hint: string }) => (
-  <FormGroup>
-    <div className="tw-flex tw-items-center tw-gap-1">
-      <Label htmlFor={id}>{label}</Label>
-      <Tooltip tooltip={hint} placement="right" triggerAsChild>
-        <Button
-          variant="inline"
-          size="icon-3xs"
-          aria-label={`More info about ${label}`}
-          className="tw-text-muted-foreground"
-        >
-          <Info className="tw-size-3" />
-        </Button>
-      </Tooltip>
-    </div>
-    <TextInput id={id} />
-  </FormGroup>
-);
-
-const meta = {
-  title: 'Patterns/InfoTooltip',
-  component: FieldWithInfo,
-  parameters: {
-    docs: {
-      description: {
-        component: 'Info icon next to a label with a hover/focus tooltip.',
-      },
-    },
-  },
-} satisfies Meta<typeof FieldWithInfo>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    id: 'account-name',
-    label: 'Account name',
-    hint: 'Used to identify your project in URLs.',
-  },
-};
-
-export const LongHint: Story = {
-  args: {
-    id: 'webhook-url',
-    label: 'Webhook URL',
-    hint: 'Endpoint that Keboola will POST to whenever this job finishes. Must respond with 2xx within 5 seconds or the call is retried.',
-  },
-};

package/src/patterns/ListDetail.stories.tsx

@@ -1,65 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Card, PageLayout, Sidebar, SidebarProvider } from '@keboola/design';
-
-type Item = { id: string; name: string };
-
-const ListDetailPage = ({ items }: { items: Item[] }) => {
-  const [selectedId, setSelectedId] = useState(items[0]?.id ?? '');
-  const selected = items.find((item) => item.id === selectedId);
-
-  return (
-    <SidebarProvider defaultLeftMode="expanded" leftVariant="inset" leftCollapsible="icon">
-      <div className="tw-flex tw-flex-1">
-        <Sidebar side="left">
-          <Sidebar.Content>
-            <Sidebar.Menu>
-              {items.map((item) => (
-                <Sidebar.MenuItem key={item.id}>
-                  <Sidebar.MenuButton
-                    tooltip={item.name}
-                    aria-selected={item.id === selectedId}
-                    onClick={() => setSelectedId(item.id)}
-                  >
-                    {item.name}
-                  </Sidebar.MenuButton>
-                </Sidebar.MenuItem>
-              ))}
-            </Sidebar.Menu>
-          </Sidebar.Content>
-        </Sidebar>
-        <PageLayout>
-          <PageLayout.Content>
-            <Card bordered>
-              <Card.Header>
-                <Card.Title>{selected?.name ?? 'Select an item'}</Card.Title>
-              </Card.Header>
-              <Card.Content>Detail for {selected?.id}.</Card.Content>
-            </Card>
-          </PageLayout.Content>
-        </PageLayout>
-      </div>
-    </SidebarProvider>
-  );
-};
-
-const meta = {
-  title: 'Patterns/ListDetail',
-  component: ListDetailPage,
-  parameters: { layout: 'fullscreen' },
-} satisfies Meta<typeof ListDetailPage>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    items: [
-      { id: 'marketing', name: 'Marketing' },
-      { id: 'sales', name: 'Sales' },
-      { id: 'analytics', name: 'Analytics' },
-    ],
-  },
-};

package/src/patterns/ModalForm.stories.tsx

@@ -1,59 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Button, Modal, useAppForm } from '@keboola/design';
-
-const NewBucketModal = () => {
-  const [open, setOpen] = useState(false);
-
-  const form = useAppForm({
-    defaultValues: { name: '', description: '' },
-    onSubmit: async ({ value }) => {
-      await Promise.resolve(value);
-      setOpen(false);
-      form.reset();
-    },
-  });
-
-  return (
-    <Modal open={open} onOpenChange={setOpen}>
-      <Modal.Trigger asChild>
-        <Button>New bucket</Button>
-      </Modal.Trigger>
-      <Modal.Content size="medium">
-        <Modal.Header title="New bucket" description="Create an empty storage bucket." />
-        <Modal.Body>
-          <form.FormBody>
-            <form.AppField name="name">
-              {(field) => <field.TextField label="Name" required variant="secondary" />}
-            </form.AppField>
-            <form.AppField name="description">
-              {(field) => <field.TextAreaField label="Description" variant="secondary" />}
-            </form.AppField>
-          </form.FormBody>
-        </Modal.Body>
-        <Modal.Footer>
-          <Modal.Close asChild>
-            <Button type="button" variant="secondary">
-              Cancel
-            </Button>
-          </Modal.Close>
-          <form.AppForm>
-            <form.SubmitButton>Create</form.SubmitButton>
-          </form.AppForm>
-        </Modal.Footer>
-      </Modal.Content>
-    </Modal>
-  );
-};
-
-const meta = {
-  title: 'Patterns/ModalForm',
-  component: NewBucketModal,
-} satisfies Meta<typeof NewBucketModal>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/src/patterns/PageHeaderTabs.stories.tsx

@@ -1,48 +0,0 @@
-import { useState } from 'react';
-import type { ReactNode } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { PageHeader, PageLayout, Tabs, TabsContent, type Trigger } from '@keboola/design';
-
-const TABS: Trigger<string>[] = [
-  { value: '/storage', title: 'Tables & Buckets' },
-  { value: '/storage/files', title: 'Files' },
-  { value: '/storage/jobs', title: 'Storage Jobs' },
-];
-
-// Story uses local state so the composition renders standalone in Storybook.
-// See RECIPES.md for the router-driven version (TanStack Router).
-const StoragePage = ({ children }: { children: ReactNode }) => {
-  const [activeTab, setActiveTab] = useState(TABS[0]!.value);
-
-  return (
-    <PageLayout>
-      <PageLayout.Header>
-        <PageHeader.Index
-          title="Storage"
-          metadata="3 buckets and 39 tables"
-          headerNav={
-            <Tabs triggers={TABS} defaultValue={activeTab} onValueChange={setActiveTab}>
-              <TabsContent value={activeTab}>{children}</TabsContent>
-            </Tabs>
-          }
-        />
-      </PageLayout.Header>
-    </PageLayout>
-  );
-};
-
-const meta = {
-  title: 'Patterns/PageHeaderTabs',
-  component: StoragePage,
-} satisfies Meta<typeof StoragePage>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    children: <div className="tw-p-4 tw-text-muted-foreground">Tab content</div>,
-  },
-};