@keboola/design 1.2.1 → 1.3.0

package/src/patterns/FilterToolbar.stories.tsx

@@ -0,0 +1,71 @@
+import { useMemo, useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Combobox, PageLayout, SearchInput } from '@keboola/design';
+
+type Row = { id: string; name: string; type: 'table' | 'file' };
+
+const FilteredList = ({ rows }: { rows: Row[] }) => {
+  const [query, setQuery] = useState('');
+  const [type, setType] = useState<Row['type'] | null>(null);
+
+  const filtered = useMemo(
+    () =>
+      rows.filter((row) => {
+        const matchesQuery = row.name.toLowerCase().includes(query.toLowerCase());
+        const matchesType = type ? row.type === type : true;
+        return matchesQuery && matchesType;
+      }),
+    [rows, query, type],
+  );
+
+  return (
+    <PageLayout>
+      <PageLayout.Toolbar>
+        <SearchInput
+          allowClear
+          placeholder="Search by name"
+          value={query}
+          onValueChange={setQuery}
+          className="tw-w-64"
+        />
+        <Combobox
+          allowClear
+          items={['table', 'file'] as const}
+          value={type}
+          onValueChange={setType}
+          placeholder="Type"
+          className="tw-w-40"
+        />
+        <span className="tw-text-sm tw-text-muted-foreground">{filtered.length} results</span>
+      </PageLayout.Toolbar>
+      <PageLayout.Content>
+        <ul className="tw-flex tw-flex-col tw-gap-1">
+          {filtered.map((row) => (
+            <li key={row.id}>{row.name}</li>
+          ))}
+        </ul>
+      </PageLayout.Content>
+    </PageLayout>
+  );
+};
+
+const meta = {
+  title: 'Patterns/FilterToolbar',
+  component: FilteredList,
+} satisfies Meta<typeof FilteredList>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    rows: [
+      { id: '1', name: 'marketing.users', type: 'table' },
+      { id: '2', name: 'sales.leads', type: 'table' },
+      { id: '3', name: 'export.csv', type: 'file' },
+      { id: '4', name: 'snapshot.json', type: 'file' },
+    ],
+  },
+};

package/src/patterns/InfoTooltip.stories.tsx

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

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

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

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

package/src/styles.css

@@ -13,6 +13,10 @@
   --color-background: 249 250 251; /* #f9fafb */
   --color-foreground: 30 41 59; /* #1e293b */
 
+  /* Primary — Keboola blue (matches secondary-500 / sidebar-primary). */
+  --color-primary: 31 143 255; /* #1f8fff */
+  --color-primary-foreground: 255 255 255; /* #ffffff */
+
   /* Popover */
   --color-popover: 255 255 255; /* #ffffff */
   --color-popover-foreground: 30 41 59; /* #1e293b */
@@ -54,6 +58,10 @@
   --color-background: 30 41 59; /* #1e293b */
   --color-foreground: 241 245 249; /* #f1f5f9 */
 
+  /* Primary — Keboola blue (kept consistent across themes; tune in UT-3936 follow-up). */
+  --color-primary: 31 143 255; /* #1f8fff */
+  --color-primary-foreground: 255 255 255; /* #ffffff */
+
   /* Popover */
   --color-popover: 30 41 59; /* #1e293b */
   --color-popover-foreground: 241 245 249; /* #f1f5f9 */
@@ -142,14 +150,14 @@
   h2 {
     font-size: 22px;
     line-height: 32px;
-    @apply tw-text-neutral-900;
+    @apply tw-text-foreground;
     font-weight: 500;
   }
 
   h3 {
     font-size: 16px;
     line-height: 24px;
-    @apply tw-text-neutral-900;
+    @apply tw-text-foreground;
     font-weight: 500;
     margin: 0;
   }
@@ -158,7 +166,7 @@
     font-size: 14px;
     line-height: 20px;
     font-weight: 500;
-    @apply tw-text-neutral-900;
+    @apply tw-text-foreground;
     margin: 0;
   }
 
@@ -166,7 +174,7 @@
     font-size: 12px;
     line-height: 20px;
     font-weight: 500;
-    @apply tw-text-neutral-900;
+    @apply tw-text-foreground;
     margin: 0;
   }
 
@@ -176,7 +184,7 @@
   h4 small,
   h5 small,
   h6 small {
-    @apply tw-text-neutral-400;
+    @apply tw-text-muted-foreground;
     font-size: 75%;
   }
 
@@ -192,11 +200,11 @@
   }
 
   .tw-prose blockquote {
-    border-left: 4px solid theme('colors.neutral.300');
-    background-color: theme('colors.neutral.50');
+    border-left: 4px solid theme('colors.border');
+    background-color: theme('colors.muted.DEFAULT');
     padding: 12px 16px;
     border-radius: 2px;
-    color: theme('colors.neutral.800');
+    color: theme('colors.foreground');
     font-size: 14px;
     font-style: italic;
     font-weight: normal;

package/src/utils/legacyIcon.tsx

@@ -0,0 +1,28 @@
+import type { ComponentProps, ReactNode } from 'react';
+
+import { Icon } from '../components/Icon';
+
+/**
+ * Shim helpers for wrappers whose `icon` prop transitioned from a FontAwesome
+ * name / `[prefix, name]` tuple to a `ReactNode` (Lucide-composition) during the
+ * UT-4109 C2 sweep. New code should pass a Lucide icon node directly — these
+ * helpers exist only so existing `<Wrapper icon="cog">` callsites keep
+ * rendering an icon instead of the raw string while consumer-migration PRs
+ * (C2b–C2j) land. Removed by the final C2 cleanup PR.
+ */
+type FAIconValue = ComponentProps<typeof Icon>['icon'];
+
+export const isFAIconValue = (value: unknown): value is FAIconValue =>
+  typeof value === 'string' ||
+  (Array.isArray(value) &&
+    value.length === 2 &&
+    typeof value[0] === 'string' &&
+    typeof value[1] === 'string');
+
+/**
+ * Render a node, transparently dispatching legacy FontAwesome icon values
+ * (string / `[prefix, name]` tuple) through the legacy `<Icon>` wrapper.
+ * For ReactNode inputs (the new composition path), returns the node as-is.
+ */
+export const renderLegacyIcon = (value: ReactNode | FAIconValue): ReactNode =>
+  isFAIconValue(value) ? <Icon icon={value} /> : value;