@keboola/design 1.3.1 → 2.0.1

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 },
 };