@keboola/design 1.2.0 → 1.3.0

package/src/icons/icons.stories.tsx

@@ -0,0 +1,174 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { LucideIcon } from 'lucide-react';
+
+import {
+  AlertCircle,
+  AlertTriangle,
+  ArrowLeft,
+  ArrowRight,
+  Bell,
+  BookOpen,
+  Bug,
+  Calendar,
+  Check,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  Circle,
+  CircleCheck,
+  CircleHelp,
+  Clock,
+  CloudDownload,
+  Code,
+  Copy,
+  EllipsisVertical,
+  Expand,
+  Eye,
+  FolderOpen,
+  Gauge,
+  Info,
+  Keboola,
+  Layers,
+  Link,
+  List,
+  Loader2,
+  Minus,
+  PanelLeft,
+  Pencil,
+  Pipette,
+  Play,
+  Plus,
+  Rocket,
+  Search,
+  Send,
+  Settings,
+  SquareCode,
+  Star,
+  Table,
+  ThumbsDown,
+  ThumbsUp,
+  Trash2,
+  Unlink,
+  Upload,
+  Users,
+  Warehouse,
+  X,
+  XCircle,
+  Zap,
+} from './index';
+
+type IconEntry = {
+  Icon: LucideIcon;
+  name: string;
+  fa: string;
+};
+
+const entries: IconEntry[] = [
+  { Icon: AlertCircle, name: 'AlertCircle', fa: 'circle-exclamation' },
+  { Icon: AlertTriangle, name: 'AlertTriangle', fa: 'triangle-exclamation' },
+  { Icon: ArrowLeft, name: 'ArrowLeft', fa: 'arrow-left' },
+  { Icon: ArrowRight, name: 'ArrowRight', fa: 'arrow-right' },
+  { Icon: Bell, name: 'Bell', fa: 'bell' },
+  { Icon: BookOpen, name: 'BookOpen', fa: 'book-blank' },
+  { Icon: Bug, name: 'Bug', fa: 'bug' },
+  { Icon: Calendar, name: 'Calendar', fa: 'calendar' },
+  { Icon: Check, name: 'Check', fa: 'check' },
+  { Icon: ChevronDown, name: 'ChevronDown', fa: 'chevron-down / angle-down / caret-down' },
+  { Icon: ChevronLeft, name: 'ChevronLeft', fa: 'chevron-left / angle-left' },
+  { Icon: ChevronRight, name: 'ChevronRight', fa: 'chevron-right' },
+  { Icon: ChevronUp, name: 'ChevronUp', fa: 'chevron-up / angle-up' },
+  { Icon: Circle, name: 'Circle', fa: 'dot-circle' },
+  { Icon: CircleCheck, name: 'CircleCheck', fa: 'circle-check / check-circle' },
+  { Icon: CircleHelp, name: 'CircleHelp', fa: 'circle-question' },
+  { Icon: Clock, name: 'Clock', fa: 'clock' },
+  { Icon: CloudDownload, name: 'CloudDownload', fa: 'cloud-arrow-down' },
+  { Icon: Code, name: 'Code', fa: 'code' },
+  { Icon: Copy, name: 'Copy', fa: 'copy' },
+  { Icon: EllipsisVertical, name: 'EllipsisVertical', fa: 'ellipsis-vertical' },
+  { Icon: Expand, name: 'Expand', fa: 'expand-alt' },
+  { Icon: Eye, name: 'Eye', fa: 'eye' },
+  { Icon: FolderOpen, name: 'FolderOpen', fa: 'folder-open' },
+  { Icon: Gauge, name: 'Gauge', fa: 'gauge' },
+  { Icon: Info, name: 'Info', fa: 'circle-info / info-circle' },
+  { Icon: Keboola, name: 'Keboola', fa: "['fak', 'keboola']" },
+  { Icon: Layers, name: 'Layers', fa: 'layer-group' },
+  { Icon: Link, name: 'Link', fa: 'link' },
+  { Icon: List, name: 'List', fa: 'list-ul' },
+  { Icon: Minus, name: 'Minus', fa: 'minus' },
+  { Icon: PanelLeft, name: 'PanelLeft', fa: 'sidebar' },
+  { Icon: Pencil, name: 'Pencil', fa: 'pen' },
+  { Icon: Pipette, name: 'Pipette', fa: 'eye-dropper' },
+  { Icon: Play, name: 'Play', fa: 'play' },
+  { Icon: Plus, name: 'Plus', fa: 'plus' },
+  { Icon: Rocket, name: 'Rocket', fa: 'rocket' },
+  { Icon: Search, name: 'Search', fa: 'magnifying-glass / search' },
+  { Icon: Send, name: 'Send', fa: 'paper-plane-top' },
+  { Icon: Settings, name: 'Settings', fa: 'cog' },
+  { Icon: SquareCode, name: 'SquareCode', fa: 'square-code' },
+  { Icon: Star, name: 'Star', fa: 'star' },
+  { Icon: Table, name: 'Table', fa: 'table' },
+  { Icon: ThumbsDown, name: 'ThumbsDown', fa: 'thumbs-down' },
+  { Icon: ThumbsUp, name: 'ThumbsUp', fa: 'thumbs-up' },
+  { Icon: Trash2, name: 'Trash2', fa: 'trash' },
+  { Icon: Unlink, name: 'Unlink', fa: 'link-slash' },
+  { Icon: Upload, name: 'Upload', fa: 'upload / up-from-line' },
+  { Icon: Users, name: 'Users', fa: 'user-group' },
+  { Icon: Warehouse, name: 'Warehouse', fa: 'warehouse' },
+  { Icon: X, name: 'X', fa: 'xmark / times / close / cancel' },
+  { Icon: XCircle, name: 'XCircle', fa: 'circle-xmark' },
+  { Icon: Zap, name: 'Zap', fa: 'bolt' },
+];
+
+const Grid = () => (
+  <div className="tw-grid tw-grid-cols-2 tw-gap-4 md:tw-grid-cols-3 lg:tw-grid-cols-4">
+    {entries.map(({ Icon, name, fa }) => (
+      <div
+        key={name}
+        className="tw-flex tw-flex-col tw-items-start tw-gap-2 tw-rounded-md tw-border tw-border-border tw-p-4"
+      >
+        <Icon className="tw-size-6" />
+        <div className="tw-font-semibold">{name}</div>
+        <div className="tw-text-sm tw-text-muted-foreground">FA: {fa}</div>
+      </div>
+    ))}
+  </div>
+);
+
+const meta = {
+  title: 'Foundations/Icons (Lucide)',
+  component: Grid,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Canonical icon surface for `@keboola/design`. Import named icons directly from `@keboola/design/icons` — Lucide icons and Keboola-custom icons are interchangeable (both typed `LucideIcon`):\n\n```tsx\nimport { ChevronDown, Keboola, Loader2 } from \'@keboola/design/icons\';\n\n<ChevronDown className="tw-size-4" />\n<Loader2 className="tw-size-4 tw-animate-spin" />\n<Keboola className="tw-size-6" />\n```\n\nSizing uses the prefixed Tailwind `tw-size-*` utility (`tw-size-4` = 16px, `tw-size-5` = 20px). Spinner animation is explicit via `tw-animate-spin` (FA\'s `<Icon icon="spinner" />` had it built-in).',
+      },
+    },
+  },
+} satisfies Meta<typeof Grid>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Curated: Story = {};
+
+export const Spinner: Story = {
+  render: () => (
+    <div className="tw-flex tw-items-center tw-gap-4">
+      <Loader2 className="tw-size-4 tw-animate-spin" />
+      <Loader2 className="tw-size-6 tw-animate-spin" />
+      <Loader2 className="tw-size-10 tw-animate-spin" />
+    </div>
+  ),
+};
+
+export const BrandMark: Story = {
+  render: () => (
+    <div className="tw-flex tw-items-center tw-gap-4">
+      <Keboola className="tw-size-4" />
+      <Keboola className="tw-size-6" />
+      <Keboola className="tw-size-10" />
+    </div>
+  ),
+};

package/src/icons/index.ts

@@ -0,0 +1,180 @@
+export {
+  AlertCircle,
+  AlertTriangle,
+  AlignCenter,
+  AlignJustify,
+  AlignLeft,
+  AlignRight,
+  ArrowBigUpDash,
+  ArrowDown,
+  ArrowDownToLine,
+  ArrowLeft,
+  ArrowLeftRight,
+  ArrowLeftToLine,
+  ArrowRight,
+  ArrowRightLeft,
+  ArrowUp,
+  ArrowUpRight,
+  Ban,
+  Bell,
+  BellRing,
+  Bold,
+  BookOpen,
+  Braces,
+  Bug,
+  Calendar,
+  Camera,
+  Check,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  ChevronsLeft,
+  ChevronsRight,
+  ChevronsUpDown,
+  Circle,
+  CircleAlert,
+  CircleArrowDown,
+  CircleArrowRight,
+  CircleArrowUp,
+  CircleCheck,
+  CircleChevronDown,
+  CircleChevronUp,
+  CircleHelp,
+  CirclePause,
+  CirclePlay,
+  CirclePlus,
+  CircleUser,
+  CircleX,
+  Clock,
+  CloudDownload,
+  Code,
+  Cog,
+  Columns2,
+  Columns3,
+  Copy,
+  CreditCard,
+  Crosshair,
+  Database,
+  Diamond,
+  Download,
+  Ellipsis,
+  EllipsisVertical,
+  Expand,
+  ExternalLink,
+  Eye,
+  EyeOff,
+  File,
+  FileDown,
+  FileInput,
+  FileSpreadsheet,
+  FileText,
+  Flag,
+  Folder,
+  FolderOpen,
+  FolderTree,
+  FolderUp,
+  Gauge,
+  Gift,
+  GitBranch,
+  GitCompare,
+  GitMerge,
+  GitPullRequest,
+  Globe,
+  GripVertical,
+  Heading1,
+  Heading2,
+  Heading3,
+  History,
+  Hourglass,
+  Image,
+  Info,
+  Italic,
+  KanbanSquare,
+  Key,
+  Keyboard,
+  Layers,
+  LayoutGrid,
+  LineChart,
+  Link,
+  List,
+  ListChecks,
+  ListOrdered,
+  Loader2,
+  Lock,
+  LogIn,
+  Mail,
+  Map,
+  Maximize,
+  Maximize2,
+  Menu,
+  MessageCircleQuestion,
+  Minimize,
+  Minimize2,
+  Minus,
+  Moon,
+  MoveHorizontal,
+  MoveVertical,
+  OctagonAlert,
+  PanelLeft,
+  PartyPopper,
+  Pause,
+  Pencil,
+  PencilLine,
+  Pipette,
+  Play,
+  Plus,
+  Quote,
+  RefreshCw,
+  Repeat,
+  Repeat2,
+  Reply,
+  Rocket,
+  RotateCcw,
+  RotateCw,
+  Rows3,
+  ScanLine,
+  Search,
+  Send,
+  Settings,
+  Share,
+  Share2,
+  Slash,
+  Sliders,
+  SlidersHorizontal,
+  Sparkle,
+  Sparkles,
+  Split,
+  Square,
+  SquareChevronRight,
+  SquareCode,
+  SquareKanban,
+  SquarePen,
+  SquareTerminal,
+  Star,
+  StickyNote,
+  Strikethrough,
+  Table,
+  ThumbsDown,
+  ThumbsUp,
+  ToggleRight,
+  Trash2,
+  TriangleAlert,
+  Type,
+  Underline,
+  Unlink,
+  Upload,
+  User,
+  Users,
+  Wand2,
+  Warehouse,
+  Webhook,
+  Workflow,
+  Wrench,
+  X,
+  XCircle,
+  Zap,
+} from 'lucide-react';
+
+export { Keboola } from './Keboola';
+export type { LucideIcon, LucideProps } from 'lucide-react';

package/src/index.ts

@@ -69,6 +69,7 @@ export * from './blocks/EmptyState';
 export * from './blocks/ErrorState';
 export * from './blocks/PageLayout';
 export * from './blocks/PageHeader';
+export * from './blocks/PageToolbar';
 export * from './blocks/SearchInput';
 export * from './blocks/SearchInputWithNavigation';
 export * from './blocks/Tagger';

package/src/patterns/AlertWithAction.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Alert, Button } from '@keboola/design';
+
+const TrialEndingAlert = ({ onExtend }: { onExtend: () => void }) => (
+  <Alert
+    variant="warning"
+    title="Trial ends in 3 days"
+    actions={
+      <Button size="small" variant="outline" onClick={onExtend}>
+        Extend
+      </Button>
+    }
+  >
+    Add a payment method to keep your project active after the trial expires.
+  </Alert>
+);
+
+const meta = {
+  title: 'Patterns/AlertWithAction',
+  component: TrialEndingAlert,
+} satisfies Meta<typeof TrialEndingAlert>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { onExtend: () => {} },
+};

package/src/patterns/CardWithEmptyState.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Button, Card, EmptyState, Table } from '@keboola/design';
+import { Plus } from '@keboola/design/icons';
+
+type Token = { id: string; name: string };
+
+const TokensCard = ({ tokens }: { tokens: Token[] }) => (
+  <Card bordered padding="none">
+    <Card.Header className="tw-flex tw-items-center tw-justify-between tw-p-4">
+      <Card.Title>Tokens</Card.Title>
+      <Button size="small">
+        <Plus className="tw-size-4" />
+        New token
+      </Button>
+    </Card.Header>
+    <Card.Content className="tw-p-0">
+      {tokens.length === 0 ? (
+        <EmptyState variant="compact">
+          <EmptyState.Title>No tokens yet</EmptyState.Title>
+          <EmptyState.Description>Create your first token to get started.</EmptyState.Description>
+          <EmptyState.Actions>
+            <Button size="small">Create token</Button>
+          </EmptyState.Actions>
+        </EmptyState>
+      ) : (
+        <Table>
+          <Table.Header>
+            <Table.Row>
+              <Table.Head>Name</Table.Head>
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {tokens.map((token) => (
+              <Table.Row key={token.id}>
+                <Table.Cell>{token.name}</Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+      )}
+    </Card.Content>
+  </Card>
+);
+
+const meta = {
+  title: 'Patterns/CardWithEmptyState',
+  component: TokensCard,
+} satisfies Meta<typeof TokensCard>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Empty: Story = {
+  args: { tokens: [] },
+};
+
+export const Populated: Story = {
+  args: {
+    tokens: [
+      { id: '1', name: 'CI deploy token' },
+      { id: '2', name: 'Local dev token' },
+    ],
+  },
+};

package/src/patterns/ConfirmDialog.stories.tsx

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

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

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

@@ -0,0 +1,30 @@
+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: '' },
+};