@keboola/design 2.0.0 → 2.1.0

package/src/blocks/PageToolbar/PageToolbar.stories.tsx

@@ -1,353 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Button } from '../../components/Button';
-import { Checkbox } from '../../components/Checkbox';
-import { Combobox } from '../../components/Combobox';
-import { Icon } from '../../components/Icon';
-import { ToggleGroup } from '../../components/ToggleGroup';
-import { LayoutGrid, List } from '../../icons';
-import { PageLayout } from '../PageLayout';
-import { SearchInput } from '../SearchInput';
-
-import { PageToolbar } from './PageToolbar';
-
-type Story = StoryObj<typeof PageToolbar>;
-
-export default {
-  component: PageToolbar,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component:
-          'Two-row toolbar for index pages — `Search` left, `Filters` → `Sort` → `Actions` → `View` right, and an optional `ActiveFilters` row below for filter chips (Standard variant) or filter tokens (Query Builder variant). The block is variant-agnostic: callers compose chips or tokens as plain `ReactNode` children of `ActiveFilters`. See the [design-system pattern](https://github.com/evviku/design-system-docs/blob/main/docs/patterns/toolbar/toolbar.md) for the source spec.',
-      },
-    },
-  },
-} satisfies Meta<typeof PageToolbar>;
-
-const PlaceholderList = () => (
-  <div className="tw-flex tw-h-72 tw-items-center tw-justify-center tw-rounded tw-border tw-border-dashed tw-border-border tw-bg-muted/30 tw-text-sm tw-text-muted-foreground">
-    EntityList / Table
-  </div>
-);
-
-// Default — Main row only (Search left, Filters + Sort + View right). No active filters,
-// so the Active Filters row is not rendered.
-export const Default: Story = {
-  render: () => {
-    const [query, setQuery] = useState('');
-    const [status, setStatus] = useState<'all' | 'failed' | 'success' | null>(null);
-    const [sort, setSort] = useState<'newest' | 'oldest' | null>('newest');
-
-    return (
-      <PageLayout>
-        <PageToolbar>
-          <PageToolbar.Search>
-            <SearchInput
-              variant="argo"
-              allowClear
-              placeholder="Search jobs"
-              value={query}
-              onValueChange={setQuery}
-            />
-          </PageToolbar.Search>
-
-          <PageToolbar.Right>
-            <PageToolbar.Filters>
-              <Combobox
-                variant="argo"
-                allowClear
-                items={['all', 'failed', 'success'] as const}
-                value={status}
-                onValueChange={setStatus}
-                placeholder="Status"
-                className="tw-w-40"
-              />
-            </PageToolbar.Filters>
-            <PageToolbar.Sort>
-              <Combobox
-                variant="argo"
-                items={['newest', 'oldest'] as const}
-                value={sort}
-                onValueChange={setSort}
-                placeholder="Sort"
-                className="tw-w-32"
-              />
-            </PageToolbar.Sort>
-          </PageToolbar.Right>
-        </PageToolbar>
-
-        <PageLayout.Content>
-          <PlaceholderList />
-        </PageLayout.Content>
-      </PageLayout>
-    );
-  },
-};
-
-// Standard Filters variant — non-editable chips rendered into the Active Filters row,
-// with a Clear action self-aligned to the far right.
-export const WithStandardFilters: Story = {
-  render: () => {
-    type Active = { id: string; label: string; value: string };
-    const [active, setActive] = useState<Active[]>([
-      { id: 'status', label: 'Status', value: 'Failed' },
-      { id: 'owner', label: 'Owner', value: 'John Doe' },
-    ]);
-
-    return (
-      <PageLayout>
-        <PageToolbar>
-          <PageToolbar.Search>
-            <SearchInput variant="argo" allowClear placeholder="Search jobs" />
-          </PageToolbar.Search>
-
-          <PageToolbar.Right>
-            <PageToolbar.Filters>
-              <Combobox
-                variant="argo"
-                allowClear
-                items={['Failed', 'Success', 'Running'] as const}
-                placeholder="Status"
-                className="tw-w-36"
-              />
-              <Combobox
-                variant="argo"
-                allowClear
-                items={['John Doe', 'Jane Doe'] as const}
-                placeholder="Owner"
-                className="tw-w-40"
-              />
-            </PageToolbar.Filters>
-          </PageToolbar.Right>
-
-          {active.length > 0 && (
-            <PageToolbar.ActiveFilters>
-              {active.map((filter) => (
-                <PageToolbar.Chip
-                  key={filter.id}
-                  onRemove={() => setActive((prev) => prev.filter((f) => f.id !== filter.id))}
-                  removeAriaLabel={`Remove ${filter.label} filter`}
-                >
-                  {filter.label}: {filter.value}
-                </PageToolbar.Chip>
-              ))}
-              <PageToolbar.Clear onClick={() => setActive([])} />
-            </PageToolbar.ActiveFilters>
-          )}
-        </PageToolbar>
-
-        <PageLayout.Content>
-          <PlaceholderList />
-        </PageLayout.Content>
-      </PageLayout>
-    );
-  },
-};
-
-// Query Builder variant — editable tokens rendered into the Active Filters row, with
-// `AddFilter` between the tokens and Clear. Each `Token` exposes a `popover` slot the
-// caller fills with the value editor (here, a multi-select checkbox list).
-export const WithQueryBuilder: Story = {
-  render: () => {
-    type Token = { id: string; label: string; values: string[]; options: string[] };
-    const [tokens, setTokens] = useState<Token[]>([
-      {
-        id: 'status',
-        label: 'Status',
-        values: ['Failed', 'Success'],
-        options: ['Failed', 'Success', 'Running', 'Scheduled'],
-      },
-      {
-        id: 'owner',
-        label: 'Owner',
-        values: ['Jan Kovar'],
-        options: ['Jan Kovar', 'John Doe', 'Jane Doe'],
-      },
-    ]);
-
-    const toggleValue = (tokenId: string, value: string) => {
-      setTokens((prev) =>
-        prev.map((token) =>
-          token.id === tokenId
-            ? {
-                ...token,
-                values: token.values.includes(value)
-                  ? token.values.filter((v) => v !== value)
-                  : [...token.values, value],
-              }
-            : token,
-        ),
-      );
-    };
-
-    return (
-      <PageLayout>
-        <PageToolbar>
-          <PageToolbar.Search>
-            <SearchInput variant="argo" allowClear placeholder="Search jobs" />
-          </PageToolbar.Search>
-
-          <PageToolbar.Right>
-            <PageToolbar.Filters>
-              <Button argo variant="outline">
-                <Icon icon="sliders" />
-                Filter
-              </Button>
-            </PageToolbar.Filters>
-          </PageToolbar.Right>
-
-          {tokens.length > 0 && (
-            <PageToolbar.ActiveFilters>
-              {tokens.map((token) => (
-                <PageToolbar.Token
-                  key={token.id}
-                  onRemove={() => setTokens((prev) => prev.filter((t) => t.id !== token.id))}
-                  removeAriaLabel={`Remove ${token.label} filter`}
-                  popover={
-                    <div className="tw-flex tw-min-w-48 tw-flex-col tw-gap-1 tw-p-2">
-                      {token.options.map((option) => (
-                        <Checkbox
-                          argo
-                          key={option}
-                          checked={token.values.includes(option)}
-                          onCheckedChange={() => toggleValue(token.id, option)}
-                        >
-                          {option}
-                        </Checkbox>
-                      ))}
-                    </div>
-                  }
-                >
-                  {token.label}: {token.values.join(', ')}
-                </PageToolbar.Token>
-              ))}
-              <PageToolbar.AddFilter onClick={() => {}} />
-              <PageToolbar.Clear onClick={() => setTokens([])} />
-            </PageToolbar.ActiveFilters>
-          )}
-        </PageToolbar>
-
-        <PageLayout.Content>
-          <PlaceholderList />
-        </PageLayout.Content>
-      </PageLayout>
-    );
-  },
-};
-
-// View Controls — list/grid toggle is **always** the last control group on the right.
-// Never render anything after `PageToolbar.View`.
-export const WithViewControls: Story = {
-  render: () => {
-    const [view, setView] = useState<'list' | 'grid'>('list');
-
-    return (
-      <PageLayout>
-        <PageToolbar>
-          <PageToolbar.Search>
-            <SearchInput variant="argo" allowClear placeholder="Search items" />
-          </PageToolbar.Search>
-
-          <PageToolbar.Right>
-            <PageToolbar.Filters>
-              <Combobox
-                variant="argo"
-                allowClear
-                items={['Active', 'Archived'] as const}
-                placeholder="Status"
-                className="tw-w-36"
-              />
-            </PageToolbar.Filters>
-            <PageToolbar.Sort>
-              <Combobox
-                variant="argo"
-                items={['Newest', 'Oldest'] as const}
-                value="Newest"
-                placeholder="Sort"
-                className="tw-w-32"
-              />
-            </PageToolbar.Sort>
-            <PageToolbar.Actions>
-              <Button argo variant="outline">
-                <Icon icon="cloud-arrow-down" />
-                Export
-              </Button>
-            </PageToolbar.Actions>
-            <PageToolbar.View>
-              <ToggleGroup
-                type="single"
-                value={view}
-                onValueChange={(next: 'list' | 'grid' | '') => 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>
-            </PageToolbar.View>
-          </PageToolbar.Right>
-        </PageToolbar>
-
-        <PageLayout.Content>
-          <PlaceholderList />
-        </PageLayout.Content>
-      </PageLayout>
-    );
-  },
-};
-
-// Responsive — at narrow viewport the right cluster wraps below Search, the Active
-// Filters row keeps chips on multiple lines, and Search stays visible. No horizontal
-// scroll. Shown inside a 480px frame to simulate a small breakpoint.
-export const Responsive: Story = {
-  parameters: {
-    layout: 'centered',
-  },
-  render: () => (
-    <div className="tw-w-[480px] tw-rounded tw-border tw-border-border tw-bg-background tw-p-4">
-      <PageToolbar>
-        <PageToolbar.Search>
-          <SearchInput variant="argo" allowClear placeholder="Search jobs" />
-        </PageToolbar.Search>
-
-        <PageToolbar.Right>
-          <PageToolbar.Filters>
-            <Combobox
-              variant="argo"
-              allowClear
-              items={['Failed', 'Success'] as const}
-              placeholder="Status"
-              className="tw-w-32"
-            />
-            <Combobox
-              variant="argo"
-              allowClear
-              items={['John', 'Jane'] as const}
-              placeholder="Owner"
-              className="tw-w-32"
-            />
-          </PageToolbar.Filters>
-        </PageToolbar.Right>
-
-        <PageToolbar.ActiveFilters>
-          <PageToolbar.Chip onRemove={() => {}} removeAriaLabel="Remove Status filter">
-            Status: Failed
-          </PageToolbar.Chip>
-          <PageToolbar.Chip onRemove={() => {}} removeAriaLabel="Remove Owner filter">
-            Owner: John Doe
-          </PageToolbar.Chip>
-          <PageToolbar.Chip onRemove={() => {}} removeAriaLabel="Remove Created by filter">
-            Created by: Marketing team
-          </PageToolbar.Chip>
-          <PageToolbar.Clear onClick={() => {}} />
-        </PageToolbar.ActiveFilters>
-      </PageToolbar>
-    </div>
-  ),
-};

package/src/blocks/PageToolbar/PageToolbar.tsx

@@ -1,160 +0,0 @@
-import type { ComponentPropsWithoutRef, ElementRef, ReactNode, Ref } from 'react';
-
-import { Badge } from '../../components/Badge';
-import { Button } from '../../components/Button';
-import { Plus, X } from '../../icons';
-import { cn } from '../../utils';
-
-import { PageToolbarToken } from './PageToolbarToken';
-
-type DivProps = ComponentPropsWithoutRef<'div'> & { ref?: Ref<ElementRef<'div'>> };
-
-const Root = ({ ref, className, children, ...props }: DivProps) => (
-  <div
-    ref={ref}
-    className={cn('tw-flex tw-flex-wrap tw-items-center tw-gap-3 tw-w-full', className)}
-    {...props}
-  >
-    {children}
-  </div>
-);
-
-const Search = ({ ref, className, children, ...props }: DivProps) => (
-  <div
-    ref={ref}
-    className={cn(
-      'tw-mr-auto tw-flex tw-items-center tw-gap-2 tw-w-full sm:tw-w-auto sm:tw-min-w-64 sm:tw-max-w-md',
-      className,
-    )}
-    {...props}
-  >
-    {children}
-  </div>
-);
-
-const Right = ({ ref, className, children, ...props }: DivProps) => (
-  <div
-    ref={ref}
-    className={cn('tw-flex tw-flex-wrap tw-items-center tw-gap-2', className)}
-    {...props}
-  >
-    {children}
-  </div>
-);
-
-const ControlGroup = ({ ref, className, children, ...props }: DivProps) => (
-  <div ref={ref} className={cn('tw-flex tw-items-center tw-gap-2', className)} {...props}>
-    {children}
-  </div>
-);
-
-const ActiveFilters = ({ ref, className, children, ...props }: DivProps) => (
-  <div
-    ref={ref}
-    className={cn('tw-flex tw-flex-wrap tw-items-center tw-gap-2 tw-basis-full', className)}
-    {...props}
-  >
-    {children}
-  </div>
-);
-
-type ChipProps = Omit<
-  ComponentPropsWithoutRef<typeof Badge>,
-  'variant' | 'color' | 'suffix' | 'children'
-> & {
-  children: ReactNode;
-  onRemove: () => void;
-  removeAriaLabel: string;
-};
-
-const Chip = ({ children, onRemove, removeAriaLabel, ...props }: ChipProps) => (
-  <Badge
-    {...props}
-    variant="pill"
-    color="blue-inverse"
-    suffix={
-      <Button
-        type="button"
-        variant="inline"
-        size="icon-2xs"
-        aria-label={removeAriaLabel}
-        onClick={onRemove}
-      >
-        <X className="tw-size-3" />
-      </Button>
-    }
-  >
-    {children}
-  </Badge>
-);
-
-type ActionProps = ComponentPropsWithoutRef<typeof Button>;
-
-const AddFilter = ({ className, children, ...props }: ActionProps) => (
-  <Button argo variant="invisible" size="small" className={cn('tw-gap-1.5', className)} {...props}>
-    <Plus className="tw-size-4" />
-    {children ?? 'Add filter'}
-  </Button>
-);
-
-const Clear = ({ className, children, ...props }: ActionProps) => (
-  <Button argo variant="invisible" size="small" className={cn('tw-ml-auto', className)} {...props}>
-    {children ?? 'Clear all'}
-  </Button>
-);
-
-/**
- * Two-row toolbar for index pages — search on the left, filter / sort / utility / view
- * controls on the right, an optional Active Filters row below for filter chips or tokens.
- *
- * **When to use:** every index page that supports search or filtering. Hosts inside
- * `PageLayout` as the search / filter row, between `PageLayout.Header` and `PageLayout.Content`.
- * **When NOT to use:** detail pages, form pages, or anywhere there is no search / filter
- * surface. For routing-based tab rows reach for `PageLayout.Tabs`.
- *
- * **Recommended composition (enforced at the call site):**
- *
- * - `Search` sits on the left; the right cluster auto-aligns via flex.
- * - Right cluster order: `Filters` → `Sort` → `Actions` → `View`. View controls are always
- *   the final control group — do not render any control after `View`.
- * - `ActiveFilters` is the second row. Render it only when one or more filters are active.
- * - `Clear` self-aligns to the far right of `ActiveFilters`.
- *
- * The block is variant-agnostic: render filter chips (Standard variant, non-editable) or
- * tokens (Query Builder variant, editable) into `ActiveFilters` as plain children — do not
- * mix the two in one toolbar.
- *
- * @see https://github.com/evviku/design-system-docs/blob/main/docs/patterns/toolbar/toolbar.md
- */
-export const PageToolbar = Object.assign(Root, {
-  /** Left slot — typically a `SearchInput`. */
-  Search,
-  /** Right cluster — host the four control groups below in the recommended order. */
-  Right,
-  /** Filter controls (`Combobox`, `Select`, `DatePicker`). */
-  Filters: ControlGroup,
-  /** Sort control. */
-  Sort: ControlGroup,
-  /** Utility actions (Export, Refresh, …). */
-  Actions: ControlGroup,
-  /** View toggle (List / Grid). Always render last in the right cluster. */
-  View: ControlGroup,
-  /**
-   * Active filters row. Render only when one or more filters are active. Pass filter chips
-   * (Standard variant) or tokens (Query Builder variant) as children, optionally followed
-   * by `AddFilter` / `Clear`.
-   */
-  ActiveFilters,
-  /** Non-editable filter chip (Standard variant) — `Badge` pill with a dismiss button. */
-  Chip,
-  /**
-   * Editable filter token (Query Builder variant) — `Badge` pill with a `chevron-down`
-   * popover trigger for editing values and an `×` dismiss button. The popover content
-   * is supplied by the caller via the `popover` slot (typically a `Combobox` or option list).
-   */
-  Token: PageToolbarToken,
-  /** "+ Add filter" action — typically rendered after the chips/tokens in `ActiveFilters`. */
-  AddFilter,
-  /** "Clear all" action — self-aligns to the far right of `ActiveFilters`. */
-  Clear,
-});

package/src/blocks/PageToolbar/PageToolbarToken.tsx

@@ -1,61 +0,0 @@
-import type { ComponentPropsWithoutRef, ReactNode } from 'react';
-
-import { Badge } from '../../components/Badge';
-import { Button } from '../../components/Button';
-import { Popover } from '../../components/Popover';
-import { ChevronDown, X } from '../../icons';
-
-type PageToolbarTokenProps = Omit<
-  ComponentPropsWithoutRef<typeof Badge>,
-  'variant' | 'color' | 'suffix' | 'children' | 'asChild' | 'popover'
-> & {
-  children: ReactNode;
-  /** Popover content rendered when the chevron-down trigger is clicked — typically a value editor. */
-  popover: ReactNode;
-  onRemove: () => void;
-  removeAriaLabel: string;
-};
-
-/**
- * Editable filter token (Query Builder variant) — `Badge` pill with a `chevron-down`
- * popover trigger for editing values and an `×` dismiss button. The popover content
- * is supplied by the caller via the `popover` slot (typically a `Combobox` or option list).
- */
-export const PageToolbarToken = ({
-  children,
-  popover,
-  onRemove,
-  removeAriaLabel,
-  ...props
-}: PageToolbarTokenProps) => (
-  <Popover>
-    <Badge
-      {...props}
-      asChild
-      variant="pill"
-      color="blue-inverse"
-      suffix={
-        <Button
-          type="button"
-          variant="inline"
-          size="icon-2xs"
-          aria-label={removeAriaLabel}
-          onClick={onRemove}
-        >
-          <X className="tw-size-3" />
-        </Button>
-      }
-    >
-      <Popover.Trigger
-        type="button"
-        className="tailwindcss-preflight tw-inline-flex tw-cursor-pointer tw-items-center tw-gap-1 tw-bg-inherit tw-text-inherit"
-      >
-        {children}
-        <ChevronDown className="tw-size-3" />
-      </Popover.Trigger>
-    </Badge>
-    <Popover.Content variant="argo" align="start">
-      {popover}
-    </Popover.Content>
-  </Popover>
-);

package/src/blocks/PageToolbar/index.ts

@@ -1 +0,0 @@
-export * from './PageToolbar';

package/src/blocks/PasswordInput/PasswordInput.stories.tsx

@@ -1,114 +0,0 @@
-import { useState } from 'react';
-import type { ComponentProps, FormEventHandler } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { action } from 'storybook/actions';
-
-import { Button } from '../../components/Button';
-
-import { PasswordInput } from './PasswordInput';
-
-type Story = StoryObj<typeof PasswordInput>;
-type PasswordInputProps = ComponentProps<typeof PasswordInput>;
-type State = NonNullable<PasswordInputProps['state']>;
-type Variant = NonNullable<PasswordInputProps['variant']>;
-type Sizing = NonNullable<PasswordInputProps['sizing']>;
-type FocusVariant = NonNullable<PasswordInputProps['focusVariant']>;
-
-const states: State[] = ['default', 'error', 'warning'];
-const variants: Variant[] = ['primary', 'secondary', 'argo'];
-const sizings: Sizing[] = ['small', 'default', 'medium'];
-const focusVariants: FocusVariant[] = ['default', 'on', 'off'];
-
-/**
- * Password input with optional visibility toggle, clear button, and Caps Lock
- * detection. Works in both controlled and uncontrolled modes.
- */
-export default {
-  component: PasswordInput,
-  args: {
-    placeholder: 'Password',
-    variant: 'primary',
-    state: 'default',
-    sizing: 'default',
-    focusVariant: 'default',
-    allowClear: false,
-    allowPasswordToggle: true,
-    defaultPasswordVisibility: false,
-    readOnly: false,
-    disabled: false,
-    onValueChange: action('onValueChange'),
-    onValueBlur: action('onValueBlur'),
-  },
-  // Suppress Bitwarden's auto-fill icon while developing in Storybook.
-  render: (args) => <PasswordInput {...args} data-bwignore />,
-  argTypes: {
-    state: {
-      description: 'Set validation state',
-      type: { name: 'enum', value: states },
-    },
-
-    variant: {
-      defaultValue: 'primary',
-      description: 'Set Variant',
-      type: { name: 'enum', value: variants },
-    },
-
-    sizing: {
-      defaultValue: 'default',
-      description: 'Set Sizing',
-      type: { name: 'enum', value: sizings },
-    },
-
-    focusVariant: {
-      defaultValue: 'default',
-      description: 'Set Focus Variant',
-      type: { name: 'enum', value: focusVariants },
-    },
-  },
-} satisfies Meta<typeof PasswordInput>;
-
-export const Basic: Story = {};
-
-const ControlledDemo = (props: ComponentProps<typeof PasswordInput>) => {
-  const [value, setValue] = useState('');
-  const handleOnValueChange = (next: string) => {
-    action('onValueChange')(next);
-    setValue(next);
-  };
-
-  return (
-    <PasswordInput {...props} value={value} onValueChange={handleOnValueChange} data-bwignore />
-  );
-};
-
-export const Controlled: Story = {
-  render: ControlledDemo,
-};
-
-const UncontrolledDemo = (props: ComponentProps<typeof PasswordInput>) => {
-  const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {
-    event.preventDefault();
-    const values = new FormData(event.currentTarget);
-    action('onSubmit')(Object.fromEntries(values.entries()));
-  };
-
-  return (
-    <form className="tw-flex tw-gap-2" onSubmit={handleSubmit}>
-      <PasswordInput
-        {...props}
-        onValueChange={action('onValueChange')}
-        onValueBlur={action('onValueBlur')}
-      />
-      <Button type="submit">Submit</Button>
-    </form>
-  );
-};
-
-export const Uncontrolled: Story = {
-  render: UncontrolledDemo,
-  args: {
-    defaultValue: 'hunter2',
-    allowClear: true,
-    name: 'uncontrolled-password-input',
-  },
-};