@keboola/design 1.3.0 → 2.0.0

package/src/components/ToggleGroup/ToggleGroup.tsx

@@ -0,0 +1,99 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../utils';
+
+const rootVariants = cva(
+  [
+    'tailwindcss-preflight',
+    'tw-inline-flex',
+    'tw-items-center',
+    'tw-shrink-0',
+    'tw-bg-muted',
+    'tw-rounded-lg',
+    'tw-p-[3px]',
+    'tw-gap-0',
+  ],
+  {
+    defaultVariants: { size: 'medium' },
+    variants: {
+      size: {
+        small: ['tw-h-8'],
+        medium: ['tw-h-9'],
+        large: ['tw-h-10'],
+      },
+    },
+  },
+);
+
+const itemClasses = cn(
+  'tailwindcss-preflight',
+  'tw-inline-flex',
+  'tw-items-center',
+  'tw-justify-center',
+  'tw-gap-2',
+  'tw-shrink-0',
+  'tw-whitespace-nowrap',
+
+  'tw-h-full',
+  'tw-rounded-md',
+  'tw-px-2',
+  'tw-py-1',
+
+  'tw-bg-transparent',
+  'tw-text-foreground',
+  'tw-text-sm',
+  'tw-font-medium',
+
+  'tw-transition-colors',
+
+  'disabled:tw-cursor-not-allowed',
+  'disabled:tw-opacity-50',
+
+  '!tw-outline-none',
+  'focus-visible:tw-ring-2',
+  'focus-visible:tw-ring-primary/50',
+
+  // hover on non-pressed
+  'not-disabled:[&[data-state=off]]:hover:tw-bg-background/60',
+
+  // pressed
+  'data-[state=on]:tw-bg-background',
+  'data-[state=on]:tw-shadow-[0_1px_2px_rgba(0,0,0,0.05),0_1px_1px_rgba(0,0,0,0.1)]',
+
+  '[&_svg]:tw-shrink-0',
+  '[&_svg]:tw-pointer-events-none',
+  "[&_svg:not([class*='tw-size-'])]:tw-size-4",
+);
+
+type RootProps = ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof rootVariants>;
+
+/**
+ * Segmented row of mutually-exclusive (or multi-select) options. Built on `@radix-ui/react-toggle-group`.
+ * For `type="single"`, `onValueChange` receives `""` when the user deselects the active item.
+ */
+const Root = ({
+  ref,
+  className,
+  size = 'medium',
+  ...props
+}: RootProps & { ref?: Ref<ElementRef<'div'>> }) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    {...props}
+    className={cn(rootVariants({ size, className }))}
+  />
+);
+
+type ItemProps = ComponentProps<typeof ToggleGroupPrimitive.Item>;
+
+const Item = ({ ref, className, ...props }: ItemProps & { ref?: Ref<ElementRef<'button'>> }) => (
+  <ToggleGroupPrimitive.Item ref={ref} {...props} className={cn(itemClasses, className)} />
+);
+
+export const ToggleGroup = Object.assign(Root, {
+  /** Individual segment inside a `ToggleGroup`. `value` is required and must be unique within the group. */
+  Item,
+});

package/src/components/ToggleGroup/index.ts

@@ -0,0 +1 @@
+export { ToggleGroup } from './ToggleGroup';

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -1,8 +1,8 @@
 import type { ComponentType } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
+import { CircleHelp } from '../../icons';
 import { Button } from '../Button';
-import { Icon } from '../Icon';
 
 import { Tooltip, TooltipProvider } from './Tooltip';
 
@@ -53,7 +53,7 @@ export const StaticExplanatory: Story = {
   },
   render: (args) => (
     <Tooltip {...args}>
-      <Icon icon="circle-question" className="tw-text-neutral-400" />
+      <CircleHelp className="tw-size-4 tw-text-neutral-400" />
     </Tooltip>
   ),
   parameters: {

package/src/hooks/useAutosizeInput.stories.tsx

@@ -1,9 +1,9 @@
 import { type ChangeEvent, useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Icon } from '../components/Icon';
 import { TextInput } from '../components/Input/TextInput/TextInput';
 import { InputGroup } from '../components/InputGroup';
+import { Search } from '../icons';
 
 import { useAutosizeInput } from './useAutosizeInput';
 
@@ -102,7 +102,7 @@ export const WithInputGroup: Story = {
       return (
         <InputGroup className="!tw-inline-flex">
           <InputGroup.Addon align="inline-start">
-            <Icon icon="magnifying-glass" className="tw-size-4 tw-text-neutral-400" />
+            <Search className="tw-size-4 tw-text-neutral-400" />
           </InputGroup.Addon>
           <InputGroup.Input
             ref={inputRef}

package/src/icons/index.ts

@@ -14,6 +14,7 @@ export {
   ArrowRight,
   ArrowRightLeft,
   ArrowUp,
+  ArrowUpAZ,
   ArrowUpRight,
   Ban,
   Bell,
@@ -99,6 +100,7 @@ export {
   Link,
   List,
   ListChecks,
+  ListFilter,
   ListOrdered,
   Loader2,
   Lock,
@@ -116,7 +118,11 @@ export {
   MoveHorizontal,
   MoveVertical,
   OctagonAlert,
+  PanelBottomClose,
+  PanelBottomOpen,
   PanelLeft,
+  PanelLeftClose,
+  PanelLeftOpen,
   PartyPopper,
   Pause,
   Pencil,

package/src/index.ts

@@ -37,6 +37,7 @@ export * from './components/ThemeProvider';
 export * from './components/Avatar';
 export * from './components/MarkedText';
 export * from './components/Toggle';
+export * from './components/ToggleGroup';
 export * from './components/Timeline';
 export * from './components/Kbd';
 export * from './components/Collapsible';

package/src/patterns/FilterToolbar.stories.tsx

@@ -1,48 +1,232 @@
 import { useMemo, useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Combobox, PageLayout, SearchInput } from '@keboola/design';
+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' };
+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 FilteredList = ({ rows }: { rows: Row[] }) => {
+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 [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],
-  );
+  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>
-      <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>
+      <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">
+        <ul className="tw-flex tw-flex-col tw-gap-1 tw-text-sm">
           {filtered.map((row) => (
-            <li key={row.id}>{row.name}</li>
+            <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>
@@ -53,19 +237,39 @@ const FilteredList = ({ rows }: { rows: Row[] }) => {
 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>;
 
-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' },
-    ],
-  },
+/** 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 },
 };