@keboola/design 2.0.0 → 2.1.0

package/src/blocks/Tagger/TagSelectPopover/TagSelectList.tsx

@@ -1,67 +0,0 @@
-import { type ComponentProps, useState } from 'react';
-import { defaultFilter } from 'cmdk';
-
-import { Command } from '../../../components/Command';
-import { Search } from '../../../icons';
-import type { TagOption } from '../types';
-
-import { TagSelectCreateItem } from './TagSelectCreateItem';
-import { TagSelectItem } from './TagSelectItem';
-import { TagSelectValue } from './TagSelectValue';
-
-const CREATE_ITEM_VALUE = 'create-new-tag';
-
-type Props = {
-  options?: TagOption[];
-} & Pick<ComponentProps<typeof TagSelectValue>, 'onAdd'> &
-  Pick<ComponentProps<typeof TagSelectCreateItem>, 'onCreate'>;
-
-const defaultOptions: TagOption[] = [];
-
-export const TagSelectList = ({ options = defaultOptions, onAdd, onCreate }: Props) => {
-  const [selected, setSelected] = useState<string[]>([]);
-
-  const handleOnSelect: ComponentProps<typeof Command.Item>['onSelect'] = (value) => {
-    setSelected((currSelected) =>
-      currSelected.includes(value)
-        ? currSelected.filter((x) => x !== value)
-        : [...currSelected, value],
-    );
-  };
-
-  const handleFilter: ComponentProps<typeof Command>['filter'] = (value, search, keywords) => {
-    // never fi†lter out the create item
-    if (value === CREATE_ITEM_VALUE) return 1;
-    return defaultFilter(value, search, keywords);
-  };
-
-  return (
-    <>
-      <Command filter={handleFilter} className="tw-flex tw-flex-col">
-        <div className="tw-border-b tw-border-neutral-100 tw-p-3">
-          <Command.Input
-            variant="secondary"
-            prefix={<Search className="tw-size-4 tw-text-neutral-400" />}
-            placeholder="Search tags"
-            allowClear
-          />
-        </div>
-
-        <Command.List className="tw-p-3" viewPortClassName="tw-max-h-60" data-content>
-          <TagSelectCreateItem value={CREATE_ITEM_VALUE} onCreate={onCreate} />
-
-          {options.map((option) => (
-            <TagSelectItem
-              key={option.name}
-              option={option}
-              onSelect={handleOnSelect}
-              checked={selected.includes(option.name)}
-            />
-          ))}
-        </Command.List>
-      </Command>
-
-      <TagSelectValue value={selected} onAdd={onAdd} />
-    </>
-  );
-};

package/src/blocks/Tagger/TagSelectPopover/TagSelectPopover.tsx

@@ -1,34 +0,0 @@
-import { useState } from 'react';
-import type { ComponentProps, ReactNode } from 'react';
-
-import { Popover } from '../../../components/Popover';
-
-import { TagSelectList } from './TagSelectList';
-
-type Props = {
-  children: ReactNode;
-} & ComponentProps<typeof TagSelectList>;
-
-export const TagSelectPopover = ({ children, onAdd, options, onCreate }: Props) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const handleAdd: ComponentProps<typeof TagSelectList>['onAdd'] = (selected) => {
-    onAdd?.(selected);
-    setIsOpen(false);
-  };
-
-  const handleCreate: ComponentProps<typeof TagSelectList>['onCreate'] = (search) => {
-    onCreate?.(search);
-    setIsOpen(false);
-  };
-
-  return (
-    <Popover open={isOpen} onOpenChange={setIsOpen}>
-      <Popover.Trigger asChild>{children}</Popover.Trigger>
-
-      <Popover.Content side="bottom" align="center" className="tw-w-80">
-        <TagSelectList onCreate={handleCreate} onAdd={handleAdd} options={options} />
-      </Popover.Content>
-    </Popover>
-  );
-};

package/src/blocks/Tagger/TagSelectPopover/TagSelectValue.tsx

@@ -1,47 +0,0 @@
-import type { MouseEventHandler } from 'react';
-
-import { Button } from '../../../components/Button';
-import { cn } from '../../../utils';
-
-type Props = {
-  value: string[];
-  onAdd?: (selected: string[]) => void;
-};
-
-export const TagSelectValue = ({ value, onAdd }: Props) => {
-  const isSelected = value.length > 0;
-
-  const handleOnSelect: MouseEventHandler<HTMLButtonElement> = () => {
-    onAdd?.(value);
-  };
-
-  return (
-    <div
-      className={cn(
-        'tw-overflow-hidden',
-        'tw-bg-neutral-100',
-
-        // invisible by default
-        'tw-max-h-0',
-        'tw-opacity-0',
-
-        /// transitioning
-        'tw-transition-all',
-        'tw-duration-300',
-        'tw-ease-out',
-
-        // visible when selected
-        {
-          'tw-max-h-20 tw-opacity-100': isSelected,
-        },
-      )}
-    >
-      <div className={cn('tw-flex', 'tw-items-center', 'tw-justify-between', 'tw-px-3', 'tw-py-2')}>
-        <span>{value.length} selected</span>
-        <Button size="small" onClick={handleOnSelect}>
-          Add Selected
-        </Button>
-      </div>
-    </div>
-  );
-};

package/src/blocks/Tagger/TagSelectPopover/index.ts

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

package/src/blocks/Tagger/Tagger.stories.tsx

@@ -1,80 +0,0 @@
-import { type ComponentProps, useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Tagger } from './Tagger';
-
-type Option = NonNullable<ComponentProps<typeof Tagger>['options']>[number];
-
-const options: Option[] = [
-  {
-    name: 'Default Color',
-    color: 'gray',
-  },
-  {
-    name: 'Super long Tag Name - Super long Tag Name - Super long Tag Name - Super long Tag Name - Super long Tag Name',
-    color: 'blue',
-  },
-  {
-    name: 'Blue',
-    color: 'blue-inverse',
-  },
-  {
-    name: 'Cyan',
-    color: 'cyan-inverse',
-  },
-  {
-    name: 'Orange',
-    color: 'orange-inverse',
-  },
-  {
-    name: 'Green',
-    color: 'green-inverse',
-  },
-  {
-    name: 'Teal',
-    color: 'teal-inverse',
-  },
-  {
-    name: 'Gray',
-    color: 'gray-inverse',
-  },
-  {
-    name: '#4 Disabled',
-    disabled: true,
-    color: 'blue',
-  },
-];
-
-export default {
-  component: Tagger,
-  args: {},
-  argTypes: {},
-} satisfies Meta<typeof Tagger>;
-
-type Story = StoryObj<typeof Tagger>;
-
-export const Default: Story = {
-  args: {
-    options,
-    disabled: false,
-  },
-  render: (props) => {
-    const [value, setValue] = useState<Option[]>([]);
-
-    return (
-      <>
-        <Tagger
-          {...props}
-          value={value}
-          onCreate={(search) => {
-            alert(`Create tag: ${search}`);
-          }}
-          onValueChange={({ action, tags, allTags }) => {
-            console.log(action, tags, allTags);
-            setValue(allTags);
-          }}
-        />
-      </>
-    );
-  },
-};

package/src/blocks/Tagger/Tagger.tsx

@@ -1,101 +0,0 @@
-import { useMemo } from 'react';
-import type { ComponentProps } from 'react';
-
-import { Badge } from '../../components/Badge';
-import { TooltipProvider } from '../../components/Tooltip';
-import { Plus } from '../../icons';
-import { cn } from '../../utils';
-
-import { TagItem } from './TagItem';
-import { TagSelectPopover } from './TagSelectPopover';
-import type { TagOption } from './types';
-
-const defaultOptions: TagOption[] = [];
-
-type OnValueChangeHandler = (value: {
-  action: 'add' | 'remove';
-  tags: TagOption[];
-  allTags: TagOption[];
-}) => void;
-
-type Props = {
-  value?: TagOption[];
-  onValueChange: OnValueChangeHandler;
-  disabled?: boolean;
-} & Pick<ComponentProps<typeof TagSelectPopover>, 'options' | 'onCreate'>;
-
-export const Tagger = ({
-  options = defaultOptions,
-  value = defaultOptions,
-  onCreate,
-  onValueChange,
-  disabled,
-}: Props) => {
-  const isAnySelected = value.length > 0;
-  const isVisible = isAnySelected || !disabled;
-
-  const handleAdd: ComponentProps<typeof TagSelectPopover>['onAdd'] = (selected) => {
-    const selectedSet = new Set(selected);
-    const addedTags = options.filter((option) => selectedSet.has(option.name));
-    const newAllTags = [...value, ...addedTags];
-
-    onValueChange({
-      action: 'add',
-      tags: addedTags,
-      allTags: newAllTags,
-    });
-  };
-
-  const handleRemove: ComponentProps<typeof TagItem>['onRemove'] = (tagToRemove) => {
-    const removedTags = [tagToRemove];
-    const newAllTags = value.filter((option) => option.name !== tagToRemove.name);
-
-    onValueChange({
-      action: 'remove',
-      tags: removedTags,
-      allTags: newAllTags,
-    });
-  };
-
-  const handleCreate: ComponentProps<typeof TagSelectPopover>['onCreate'] = (search) => {
-    onCreate?.(search);
-  };
-
-  const tagsToAdd = useMemo(() => {
-    const addedTagsSet = new Set(value.map((tag) => tag.name));
-    return options?.filter((option) => !addedTagsSet.has(option.name));
-  }, [options, value]);
-
-  if (!isVisible) return null;
-
-  return (
-    <TooltipProvider>
-      <ul className="tailwindcss-preflight tw-flex tw-min-h-6 tw-flex-wrap tw-items-center tw-gap-2">
-        {value.map((tag) => (
-          <li key={tag.name}>
-            <TagItem disabled={disabled} tag={tag} onRemove={handleRemove} />
-          </li>
-        ))}
-
-        {!disabled && (
-          <li>
-            <TagSelectPopover options={tagsToAdd} onAdd={handleAdd} onCreate={handleCreate}>
-              <Badge color="gray-inverse" asChild>
-                <button type="button" className="tw-flex tw-items-center tw-gap-1">
-                  <Plus className="tw-size-4" />
-                  <span
-                    className={cn({
-                      'tw-sr-only': isAnySelected,
-                    })}
-                  >
-                    Add Tag
-                  </span>
-                </button>
-              </Badge>
-            </TagSelectPopover>
-          </li>
-        )}
-      </ul>
-    </TooltipProvider>
-  );
-};

package/src/blocks/Tagger/index.ts

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

package/src/blocks/Tagger/types.ts

@@ -1,11 +0,0 @@
-import type { ComponentProps } from 'react';
-
-import type { Badge } from '../../components/Badge';
-
-type Color = ComponentProps<typeof Badge>['color'];
-
-export type TagOption = {
-  name: string;
-  color: Color;
-  disabled?: boolean;
-};

package/src/blocks/Textarea/Textarea.stories.tsx

@@ -1,47 +0,0 @@
-import { useState } from 'react';
-import type { ComponentProps } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Textarea } from './Textarea';
-
-type Story = StoryObj<typeof Textarea>;
-
-/**
- * Single-purpose textarea wrapper around `InputGroup` + `InputGroup.TextArea`,
- * pre-wired for the common case (no addons, autosizing 1–4 rows).
- *
- * Reach for `InputGroup` directly when you need addons — labels, action
- * buttons, character counters, or any block-start / block-end /
- * inline-start / inline-end content.
- */
-export default {
-  component: Textarea,
-  args: {
-    placeholder: 'Placeholder',
-    variant: 'primary',
-    state: 'default',
-    readOnly: false,
-    disabled: false,
-  },
-  argTypes: {
-    state: {
-      description: 'Set validation state',
-      type: { name: 'enum', value: ['default', 'error', 'warning'] },
-    },
-    variant: {
-      description: 'Set Variant',
-      type: { name: 'enum', value: ['primary', 'secondary', 'argo'] },
-    },
-  },
-} as Meta<typeof Textarea>;
-
-export const Basic: Story = {};
-
-const ControlledDemo = (props: ComponentProps<typeof Textarea>) => {
-  const [value, setValue] = useState<null | string>(null);
-  return <Textarea {...props} value={value} onValueChange={setValue} />;
-};
-
-export const Controlled: Story = {
-  render: ControlledDemo,
-};

package/src/blocks/Textarea/Textarea.tsx

@@ -1,50 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-
-import { InputGroup } from '../../components/InputGroup';
-
-type InputGroupProps = Pick<
-  ComponentProps<typeof InputGroup>,
-  'variant' | 'sizing' | 'focusVariant' | 'state'
->;
-
-type TextareaNativeProps = Omit<
-  ComponentProps<typeof InputGroup.TextArea>,
-  'value' | 'defaultValue' | 'rows' | 'maxRows'
->;
-
-type TextareaOwnProps = {
-  value?: string | null;
-  defaultValue?: string | null;
-  onValueChange?: (value: string) => void;
-  onValueBlur?: (value: string) => void;
-  maxRows?: number | 'unlimited';
-  disableResize?: boolean;
-  containerClassName?: string;
-};
-
-type Props = InputGroupProps & TextareaNativeProps & TextareaOwnProps;
-
-export const Textarea = ({
-  ref,
-  containerClassName,
-
-  // group props
-  state = 'default',
-  variant = 'primary',
-  sizing,
-  focusVariant,
-
-  ...rest
-}: Props & { ref?: Ref<ElementRef<'textarea'>> }) => {
-  return (
-    <InputGroup
-      state={state}
-      sizing={sizing}
-      focusVariant={focusVariant}
-      variant={variant}
-      className={containerClassName}
-    >
-      <InputGroup.TextArea {...rest} ref={ref} />
-    </InputGroup>
-  );
-};

package/src/blocks/Textarea/index.ts

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

package/src/components/Alert/Alert.stories.tsx

@@ -1,101 +0,0 @@
-import type { ComponentProps } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Eye, Info, X } from '@keboola/design/icons';
-
-import { withTooltipProvider } from '../../utils';
-import { Button } from '../Button';
-
-import { Alert } from './Alert';
-
-type Props = ComponentProps<typeof Alert>;
-type Variant = NonNullable<Props['variant']>;
-type Mode = NonNullable<Props['mode']>;
-const variants: Variant[] = ['info', 'warning', 'error', 'success'];
-const modes: Mode[] = ['default', 'collapsible'];
-
-export default {
-  component: Alert,
-  decorators: [withTooltipProvider],
-  args: {
-    variant: 'info',
-    hideIcon: false,
-    mode: 'default',
-    title: 'Title',
-    children:
-      'The extended attribute table file is full. The requested resource is in use. The file type being saved or retrieved has been blocked.',
-  },
-  argTypes: {
-    variant: {
-      type: { name: 'enum', value: variants },
-    },
-    mode: {
-      type: { name: 'enum', value: modes },
-    },
-  },
-} satisfies Meta<typeof Alert>;
-
-type Story = StoryObj<typeof Alert>;
-
-export const Default: Story = {};
-
-export const Collapsible: Story = {
-  args: {
-    mode: 'collapsible',
-  },
-};
-
-export const WithActions: Story = {
-  args: {
-    actions: (
-      <>
-        <Button variant="inline" size="icon-3xs" aria-label="Info">
-          <Info className="tw-size-4" />
-        </Button>
-        <Button variant="inline" size="icon-3xs" aria-label="Seen">
-          <Eye className="tw-size-4" />
-        </Button>
-        <Button variant="inline" size="icon-3xs" aria-label="Close">
-          <X className="tw-size-4" />
-        </Button>
-      </>
-    ),
-  },
-};
-
-export const TitleOnly: Story = {
-  args: {
-    title: 'Title',
-    children: undefined,
-  },
-};
-
-export const DescriptionOnly: Story = {
-  args: {
-    title: undefined,
-    children:
-      'These features are connected to your account, so they may change the behavior of every project you are a member of in the stack.',
-  },
-};
-
-export const BigTitle: Story = {
-  args: {
-    title:
-      'These features are connected to your account, so they may change the behavior of every project you are a member of in the stack.' +
-      'These features are connected to your account, so they may change the behavior of every project you are a member of in the stack.' +
-      'These features are connected to your account, so they may change the behavior of every project you are a member of in the stack.' +
-      'These features are connected to your account, so they may change the behavior of every project you are a member of in the stack.',
-    children: undefined,
-  },
-};
-
-export const BigDescription: Story = {
-  args: {
-    title: undefined,
-    children:
-      'These features are connected to your account, so they may change the behavior of every project you are a member of in the stack.' +
-      'These features are connected to your account, so they may change the behavior of every project you are a member of in the stack.' +
-      'These features are connected to your account, so they may change the behavior of every project you are a member of in the stack.' +
-      'These features are connected to your account, so they may change the behavior of every project you are a member of in the stack.',
-  },
-};

package/src/components/Alert/Alert.tsx

@@ -1,121 +0,0 @@
-import { useState } from 'react';
-import type { ComponentProps, ReactNode } from 'react';
-
-import { cn } from '../../utils';
-import { Collapsible } from '../Collapsible';
-
-import { AlertAction } from './AlertAction';
-import { AlertCollapsibleIcon } from './AlertCollapsibleIcon';
-import { AlertDescription } from './AlertDescription';
-import { AlertIcon } from './AlertIcon';
-import { AlertRoot } from './AlertRoot';
-import { AlertTitle } from './AlertTitle';
-
-type CommonProps = {
-  hideIcon?: boolean;
-  icon?: ReactNode;
-} & Pick<ComponentProps<typeof Collapsible>, 'open' | 'onOpenChange' | 'defaultOpen'> &
-  Omit<ComponentProps<typeof AlertRoot>, 'children'>;
-
-type CollapsibleProps = {
-  mode: 'collapsible';
-  title: ReactNode;
-  children: ReactNode;
-  actions?: never;
-};
-
-type DefaultProps = {
-  mode?: 'default';
-  title?: ReactNode;
-  children?: ReactNode;
-  actions?: ReactNode;
-};
-
-/**
- * Props for `Alert`. Discriminated by `mode` — `"default"` renders `title` / `children` / `actions`,
- * `"collapsible"` requires `title` + `children` (no `actions`) and renders a collapsible disclosure.
- * `variant` (`info` | `success` | `warning` | `error`) is a categorical colour contract.
- */
-type Props = CommonProps & (CollapsibleProps | DefaultProps);
-
-/**
- * Persistent inline banner for contextual messages tied to the page layout.
- *
- * **When to use:** a message that lives in the page (info banner, warning about a misconfiguration,
- * post-save validation summary). Use `variant` to encode meaning; pass `actions` for inline buttons.
- * `mode="collapsible"` collapses long error details behind a toggle.
- * **When NOT to use:** for transient feedback (save succeeded, job started) use `toast()`; for
- * field-level validation errors use `FormGroup state="error"`; for a confirmation popover use
- * `Popconfirm`.
- * **Composition:** typically rendered at the top of `PageLayout.Content` or above a form section.
- *
- * @see RECIPES.md#alert-with-action — for action-bearing alert composition
- */
-export const Alert = ({
-  title,
-  variant = 'info',
-  children,
-  hideIcon = false,
-  icon,
-  className,
-  actions,
-  mode = 'default',
-
-  // collapsible props
-  defaultOpen = true,
-  open: openProp,
-  onOpenChange: onOpenChangeProp,
-
-  ...rest
-}: Props) => {
-  const isControlled = openProp !== undefined;
-
-  const [innerOpen, setInnerOpen] = useState(defaultOpen);
-  const open = isControlled ? openProp : innerOpen;
-  const handleOpenChange = (nextOpen: boolean) => {
-    if (!isControlled) {
-      setInnerOpen(nextOpen);
-    }
-    onOpenChangeProp?.(nextOpen);
-  };
-
-  const isCollapsible = mode === 'collapsible' && !!title && !!children && !actions;
-
-  if (isCollapsible)
-    return (
-      <Collapsible open={open} onOpenChange={handleOpenChange} asChild>
-        <AlertRoot {...rest} variant={variant} className={className}>
-          <Collapsible.Trigger
-            className={cn(
-              'tailwindcss-preflight',
-              'tw-group',
-              'tw-col-span-full',
-              'tw-grid',
-              'tw-grid-cols-subgrid',
-              'tw-rounded-sm',
-              'focus-visible:tw-outline',
-              'focus-visible:tw-outline-2',
-              'focus-visible:tw-outline-secondary-500',
-            )}
-          >
-            {!hideIcon && <AlertIcon variant={variant} icon={icon} />}
-            <AlertTitle>{title}</AlertTitle>
-            <AlertCollapsibleIcon open={open} />
-          </Collapsible.Trigger>
-
-          <Collapsible.Content asChild>
-            <AlertDescription>{children}</AlertDescription>
-          </Collapsible.Content>
-        </AlertRoot>
-      </Collapsible>
-    );
-
-  return (
-    <AlertRoot {...rest} variant={variant} className={className}>
-      {!hideIcon && <AlertIcon variant={variant} icon={icon} />}
-      {title && <AlertTitle>{title}</AlertTitle>}
-      {children && <AlertDescription>{children}</AlertDescription>}
-      {actions && <AlertAction>{actions}</AlertAction>}
-    </AlertRoot>
-  );
-};