@keboola/design 1.0.0

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

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

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

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

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

@@ -0,0 +1,101 @@
+import { useMemo } from 'react';
+import type { ComponentProps } from 'react';
+
+import { Badge } from '../../components/Badge';
+import { Icon } from '../../components/Icon';
+import { TooltipProvider } from '../../components/Tooltip';
+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">
+                  <Icon icon="plus" />
+                  <span
+                    className={cn({
+                      'tw-sr-only': isAnySelected,
+                    })}
+                  >
+                    Add Tag
+                  </span>
+                </button>
+              </Badge>
+            </TagSelectPopover>
+          </li>
+        )}
+      </ul>
+    </TooltipProvider>
+  );
+};

package/src/blocks/Tagger/index.ts

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

package/src/blocks/Tagger/types.ts

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

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

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

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

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

@@ -0,0 +1,93 @@
+import type { ComponentProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+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" icon="info-circle" size="icon-3xs" aria-label="Info" />
+        <Button variant="inline" icon="eye" size="icon-3xs" aria-label="Seen" />
+        <Button variant="inline" icon="xmark" size="icon-3xs" aria-label="Close" />
+      </>
+    ),
+  },
+};
+
+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

@@ -0,0 +1,103 @@
+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?: ComponentProps<typeof AlertIcon>['icon'];
+} & 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;
+};
+
+type Props = CommonProps & (CollapsibleProps | DefaultProps);
+
+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>
+  );
+};

package/src/components/Alert/AlertAction.tsx

@@ -0,0 +1,31 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+import { Slot } from '@radix-ui/react-slot';
+
+import { cn } from '../../utils';
+
+type Props = ComponentProps<'div'> & {
+  asChild?: boolean;
+};
+
+export const AlertAction = ({
+  ref,
+  className,
+  asChild = false,
+  ...props
+}: Props & { ref?: Ref<ElementRef<'div'>> }) => {
+  const Comp = asChild ? Slot : 'div';
+  return (
+    <Comp
+      {...props}
+      ref={ref}
+      className={cn(
+        'tw-col-start-3',
+        'tw-row-start-1',
+        'tw-self-start',
+        'tw-flex',
+        'tw-gap-2',
+        className,
+      )}
+    />
+  );
+};

package/src/components/Alert/AlertCollapsibleIcon.tsx

@@ -0,0 +1,26 @@
+import { cn } from '../../utils';
+import { Icon } from '../Icon';
+import { Tooltip } from '../Tooltip';
+
+type Props = {
+  open: boolean;
+};
+
+export const AlertCollapsibleIcon = ({ open }: Props) => (
+  <Tooltip placement="top" tooltip={open ? 'Collapse alert' : 'Expand alert'} triggerAsChild>
+    <Icon
+      icon="chevron-down"
+      className={cn(
+        'tw-mt-px',
+        'tw-size-4',
+        'tw-text-neutral-400',
+        'group-data-[state=open]/alert:tw-rotate-180',
+
+        'group-data-[variant=info]/alert:group-hover:tw-text-secondary-600',
+        'group-data-[variant=warning]/alert:group-hover:tw-text-warning-600',
+        'group-data-[variant=error]/alert:group-hover:tw-text-error-600',
+        'group-data-[variant=success]/alert:group-hover:tw-text-primary-600',
+      )}
+    />
+  </Tooltip>
+);

package/src/components/Alert/AlertDescription.tsx

@@ -0,0 +1,31 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+
+import { cn } from '../../utils';
+
+type Props = ComponentProps<'div'>;
+
+export const AlertDescription = ({
+  ref,
+  children,
+  className,
+  ...rest
+}: Props & { ref?: Ref<ElementRef<'div'>> }) => (
+  <div
+    {...rest}
+    ref={ref}
+    className={cn(
+      'tw-col-start-2',
+      'group-has-[[data-slot=alert-title]]/alert:tw-col-end-[-1]',
+
+      // spacer before description when a title exists (pseudo-element so it animates with Collapsible)
+      'group-has-[[data-slot=alert-title]]/alert:before:tw-block',
+      'group-has-[[data-slot=alert-title]]/alert:before:tw-h-4',
+      "group-has-[[data-slot=alert-title]]/alert:before:tw-content-['']",
+
+      'tw-break-anywhere',
+      className,
+    )}
+  >
+    {children}
+  </div>
+);

package/src/components/Alert/AlertIcon.tsx

@@ -0,0 +1,43 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+
+import { cn } from '../../utils';
+import { Icon } from '../Icon';
+
+import type { Variant } from './AlertRoot';
+
+const ICONS: Record<Variant, ComponentProps<typeof Icon>['icon']> = {
+  info: 'circle-info',
+  warning: 'triangle-exclamation',
+  error: 'triangle-exclamation',
+  success: 'circle-check',
+};
+
+type Props = {
+  variant: Variant;
+  icon?: ComponentProps<typeof Icon>['icon'];
+} & Omit<ComponentProps<typeof Icon>, 'icon'>;
+
+export const AlertIcon = ({
+  ref,
+  variant,
+  icon,
+  className,
+  ...rest
+}: Props & { ref?: Ref<ElementRef<'svg'>> }) => (
+  <Icon
+    {...rest}
+    ref={ref}
+    data-slot="alert-icon"
+    icon={icon ?? ICONS[variant]}
+    className={cn(
+      'tw-self-start',
+      'tw-p-0.5',
+      'tw-text-base',
+      'group-data-[variant=info]/alert:tw-text-secondary-500',
+      'group-data-[variant=warning]/alert:tw-text-warning-500',
+      'group-data-[variant=error]/alert:tw-text-error-500',
+      'group-data-[variant=success]/alert:tw-text-primary-500',
+      className,
+    )}
+  />
+);