@keboola/design 2.0.0 → 2.1.0

package/src/components/Badge/BadgeRoot.tsx

@@ -1,21 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-import { type VariantProps } from 'class-variance-authority';
-
-import { cn } from '../../utils';
-
-import { badgeRootVariants } from './styles';
-
-type Props = ComponentProps<'div'> & VariantProps<typeof badgeRootVariants>;
-
-export const BadgeRoot = ({
-  ref,
-  variant,
-  color,
-  className,
-  children,
-  ...rest
-}: Props & { ref?: Ref<ElementRef<'div'>> }) => (
-  <div {...rest} ref={ref} className={cn(badgeRootVariants({ variant, color, className }))}>
-    {children}
-  </div>
-);

package/src/components/Badge/index.ts

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

package/src/components/Badge/styles.ts

@@ -1,74 +0,0 @@
-import { cva } from 'class-variance-authority';
-
-const badgeColors = {
-  gray: 'tw-bg-neutral-400 tw-text-white tw-decoration-neutral-400',
-  'gray-darker': 'tw-bg-neutral-500 tw-text-white tw-decoration-neutral-500',
-  'gray-inverse': 'tw-bg-neutral-100 tw-text-neutral-400 tw-decoration-neutral-100',
-  green: 'tw-bg-primary-500 tw-text-white tw-decoration-primary-500',
-  'green-darker': 'tw-bg-primary-600 tw-text-white tw-decoration-primary-600',
-  'green-inverse': 'tw-bg-primary-100 tw-text-primary-900 tw-decoration-primary-100',
-  blue: 'tw-bg-secondary-500 tw-text-white tw-decoration-secondary-500',
-  'blue-inverse': 'tw-bg-secondary-100 tw-text-secondary-600 tw-decoration-secondary-100',
-  red: 'tw-bg-error-500 tw-text-white tw-decoration-error-500',
-  orange: 'tw-bg-warning-500 tw-text-white tw-decoration-warning-500',
-  'orange-inverse': 'tw-bg-warning-100 tw-text-warning-500 tw-decoration-warning-100',
-  teal: 'tw-bg-teal-500 tw-text-white tw-decoration-teal-500',
-  'teal-inverse': 'tw-bg-teal-100 tw-text-teal-800 tw-decoration-teal-100',
-  purple: 'tw-bg-purple-500 tw-text-white tw-decoration-purple-500',
-  'purple-inverse': 'tw-bg-purple-100 tw-text-purple-800 tw-decoration-purple-100',
-  cyan: 'tw-bg-cyan-500 tw-text-white tw-decoration-cyan-500',
-  'cyan-inverse': 'tw-bg-cyan-100 tw-text-cyan-800 tw-decoration-cyan-100',
-  'sidebar-primary': 'tw-bg-sidebar-primary tw-text-white tw-decoration-sidebar-primary',
-  white: 'tw-bg-white/90 tw-text-neutral-600 tw-decoration-white/90',
-} as const;
-
-export const badgeRootVariants = cva(
-  [
-    'tailwindcss-preflight',
-    'tw-group/badge',
-
-    // display
-    'tw-relative',
-    'tw-inline-flex',
-    'tw-justify-center',
-    'tw-items-center',
-    'tw-min-h-5',
-    'tw-h-fit',
-    'tw-shrink-0',
-    'tw-overflow-hidden',
-
-    // text
-    'tw-whitespace-pre-wrap',
-    'tw-break-normal',
-    'tw-text-xs',
-    'tw-font-medium',
-    'tw-tracking-[1px]',
-    'tw-text-center',
-    'tw-underline',
-
-    // content
-    'tw-border-none',
-    '[&>svg]:tw-self-center',
-    '[button&]:tw-cursor-pointer',
-
-    // focus
-    'focus-visible:tw-outline-none',
-    'focus-visible:tw-ring-2',
-    'focus-visible:tw-ring-inset',
-    'focus-visible:tw-ring-secondary-500',
-  ],
-  {
-    defaultVariants: {
-      color: 'gray',
-      variant: 'default',
-    },
-    variants: {
-      variant: {
-        default: ['tw-rounded tw-uppercase'],
-        tag: ['tw-rounded tw-normal-case'],
-        pill: ['tw-min-w-5 tw-rounded-full tw-normal-case tw-tracking-normal'],
-      },
-      color: badgeColors,
-    },
-  },
-);

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -1,135 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { ChevronDown, Circle } from '../../icons';
-import { DropdownMenu } from '../DropdownMenu';
-
-import { Breadcrumb } from './Breadcrumb';
-
-const meta: Meta<typeof Breadcrumb> = {
-  component: Breadcrumb,
-  parameters: {
-    layout: 'centered',
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <Breadcrumb>
-      <Breadcrumb.List>
-        <Breadcrumb.Item>
-          <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
-        </Breadcrumb.Item>
-        <Breadcrumb.Separator />
-        <Breadcrumb.Item>
-          <Breadcrumb.Link href="/components">Components</Breadcrumb.Link>
-        </Breadcrumb.Item>
-        <Breadcrumb.Separator />
-        <Breadcrumb.Item>
-          <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
-        </Breadcrumb.Item>
-      </Breadcrumb.List>
-    </Breadcrumb>
-  ),
-};
-
-export const CustomSeparator: Story = {
-  render: () => (
-    <Breadcrumb>
-      <Breadcrumb.List>
-        <Breadcrumb.Item>
-          <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
-        </Breadcrumb.Item>
-        <Breadcrumb.Separator>
-          <Circle />
-        </Breadcrumb.Separator>
-        <Breadcrumb.Item>
-          <Breadcrumb.Link href="/components">Components</Breadcrumb.Link>
-        </Breadcrumb.Item>
-        <Breadcrumb.Separator>
-          <Circle />
-        </Breadcrumb.Separator>
-        <Breadcrumb.Item>
-          <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
-        </Breadcrumb.Item>
-      </Breadcrumb.List>
-    </Breadcrumb>
-  ),
-};
-
-export const Dropdown: Story = {
-  render: () => (
-    <Breadcrumb>
-      <Breadcrumb.List>
-        <Breadcrumb.Item>
-          <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
-        </Breadcrumb.Item>
-        <Breadcrumb.Separator />
-        <Breadcrumb.Item>
-          <DropdownMenu variant="argo">
-            <DropdownMenu.Trigger asChild>
-              <Breadcrumb.Link asChild>
-                <button>
-                  Components
-                  <ChevronDown />
-                </button>
-              </Breadcrumb.Link>
-            </DropdownMenu.Trigger>
-            <DropdownMenu.Content align="start">
-              <DropdownMenu.Item>Documentation</DropdownMenu.Item>
-              <DropdownMenu.Item>Themes</DropdownMenu.Item>
-              <DropdownMenu.Item>GitHub</DropdownMenu.Item>
-            </DropdownMenu.Content>
-          </DropdownMenu>
-        </Breadcrumb.Item>
-        <Breadcrumb.Separator />
-        <Breadcrumb.Item>
-          <Breadcrumb.Link href="/components">Components</Breadcrumb.Link>
-        </Breadcrumb.Item>
-        <Breadcrumb.Separator />
-        <Breadcrumb.Item>
-          <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
-        </Breadcrumb.Item>
-      </Breadcrumb.List>
-    </Breadcrumb>
-  ),
-};
-
-/*
- * We provide a <BreadcrumbEllipsis /> component to show a collapsed state when the breadcrumb is too long.
- */
-export const Collapsed: Story = {
-  render: () => (
-    <Breadcrumb>
-      <Breadcrumb.List>
-        <Breadcrumb.Item>
-          <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
-        </Breadcrumb.Item>
-        <Breadcrumb.Separator />
-        <Breadcrumb.Item>
-          <DropdownMenu variant="argo">
-            <DropdownMenu.Trigger asChild>
-              <Breadcrumb.Ellipsis />
-            </DropdownMenu.Trigger>
-            <DropdownMenu.Content>
-              <DropdownMenu.Item>Documentation</DropdownMenu.Item>
-              <DropdownMenu.Item>Themes</DropdownMenu.Item>
-              <DropdownMenu.Item>GitHub</DropdownMenu.Item>
-            </DropdownMenu.Content>
-          </DropdownMenu>
-        </Breadcrumb.Item>
-        <Breadcrumb.Separator />
-        <Breadcrumb.Item>
-          <Breadcrumb.Link href="/components">Components</Breadcrumb.Link>
-        </Breadcrumb.Item>
-        <Breadcrumb.Separator />
-        <Breadcrumb.Item>
-          <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
-        </Breadcrumb.Item>
-      </Breadcrumb.List>
-    </Breadcrumb>
-  ),
-};

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,23 +0,0 @@
-import type { ComponentProps } from 'react';
-
-import { cn } from '../../utils';
-
-import { BreadcrumbEllipsis } from './BreadcrumbEllipsis';
-import { BreadcrumbItem } from './BreadcrumbItem';
-import { BreadcrumbLink } from './BreadcrumbLink';
-import { BreadcrumbList } from './BreadcrumbList';
-import { BreadcrumbPage } from './BreadcrumbPage';
-import { BreadcrumbSeparator } from './BreadcrumbSeparator';
-
-type Props = ComponentProps<'nav'>;
-
-export const Breadcrumb = ({ className, ...props }: Props) => (
-  <nav aria-label="breadcrumb" className={cn('tailwindcss-preflight', className)} {...props} />
-);
-
-Breadcrumb.List = BreadcrumbList;
-Breadcrumb.Item = BreadcrumbItem;
-Breadcrumb.Link = BreadcrumbLink;
-Breadcrumb.Page = BreadcrumbPage;
-Breadcrumb.Separator = BreadcrumbSeparator;
-Breadcrumb.Ellipsis = BreadcrumbEllipsis;

package/src/components/Breadcrumb/BreadcrumbEllipsis.tsx

@@ -1,43 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-
-import { Ellipsis } from '../../icons';
-import { cn } from '../../utils';
-
-type Props = ComponentProps<'button'>;
-
-export const BreadcrumbEllipsis = ({
-  ref,
-  className,
-  ...props
-}: Props & { ref?: Ref<ElementRef<'button'>> }) => (
-  <button
-    ref={ref}
-    type="button"
-    className={cn(
-      // layout
-      'tw-flex',
-      'tw-items-center',
-      'tw-justify-center',
-
-      'tw-rounded-sm',
-      'tw-border-none',
-      'tw-bg-transparent',
-      'tw-cursor-pointer',
-      'tw-text-muted-foreground',
-      'tw-transition-colors',
-      'hover:tw-text-foreground',
-
-      // focus
-      'focus-visible:tw-outline-none',
-      'focus-visible:tw-ring-2',
-      'focus-visible:tw-ring-secondary-500/50',
-
-      'tw-p-1',
-      className,
-    )}
-    {...props}
-  >
-    <Ellipsis className="tw-size-4" />
-    <span className="tw-sr-only">More</span>
-  </button>
-);

package/src/components/Breadcrumb/BreadcrumbItem.tsx

@@ -1,9 +0,0 @@
-import type { ComponentProps } from 'react';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<'li'>;
-
-export const BreadcrumbItem = ({ className, ...props }: Props) => (
-  <li className={cn('tw-inline-flex', 'tw-items-center', className)} {...props} />
-);

package/src/components/Breadcrumb/BreadcrumbLink.tsx

@@ -1,48 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-import { Slot } from '@radix-ui/react-slot';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<'a'> & {
-  asChild?: boolean;
-};
-
-export const BreadcrumbLink = ({
-  ref,
-  asChild = false,
-  className,
-  ...props
-}: Props & { ref?: Ref<ElementRef<'a'>> }) => {
-  const Comp = asChild ? Slot : 'a';
-  return (
-    <Comp
-      ref={ref}
-      className={cn(
-        'tw-flex',
-        'tw-items-center',
-        'tw-gap-1.5',
-        // font
-        'tw-text-muted-foreground',
-        'tw-font-normal',
-        'tw-no-underline',
-
-        // hover
-        'hover:tw-text-foreground',
-
-        // focus
-        'focus-visible:tw-outline-none',
-        'focus-visible:tw-ring-2',
-        'focus-visible:tw-ring-secondary-500/50',
-        'focus-visible:tw-rounded-sm',
-
-        // Icon
-        '[&_svg]:tw-size-3.5',
-
-        // transition
-        'tw-transition-colors',
-        className,
-      )}
-      {...props}
-    />
-  );
-};

package/src/components/Breadcrumb/BreadcrumbList.tsx

@@ -1,26 +0,0 @@
-import type { ComponentProps } from 'react';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<'ol'>;
-
-export const BreadcrumbList = ({ className, ...props }: Props) => (
-  <ol
-    className={cn(
-      // layout
-      'tw-flex',
-      'tw-flex-wrap',
-      'tw-items-center',
-      'tw-gap-2.5',
-      'tw-m-0',
-      'tw-p-0',
-
-      // font
-      'tw-break-words',
-      'tw-text-sm',
-      'tw-text-muted-foreground',
-      className,
-    )}
-    {...props}
-  />
-);

package/src/components/Breadcrumb/BreadcrumbPage.tsx

@@ -1,22 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<'span'>;
-
-export const BreadcrumbPage = ({
-  ref,
-  className,
-  ...props
-}: Props & { ref?: Ref<ElementRef<'span'>> }) => (
-  <span
-    ref={ref}
-    // Do not use the anchor, as this item is not clickable
-    // oxlint-disable-next-line jsx_a11y/prefer-tag-over-role
-    role="link"
-    aria-disabled="true"
-    aria-current="page"
-    className={cn('tw-font-medium', 'tw-text-foreground', className)}
-    {...props}
-  />
-);

package/src/components/Breadcrumb/BreadcrumbSeparator.tsx

@@ -1,28 +0,0 @@
-import type { ComponentProps } from 'react';
-
-import { ChevronRight } from '../../icons';
-import { cn } from '../../utils';
-
-type Props = ComponentProps<'li'>;
-
-export const BreadcrumbSeparator = ({ children, className, ...props }: Props) => (
-  <li
-    role="presentation"
-    aria-hidden="true"
-    className={cn(
-      // layout
-      'tw-flex',
-      'tw-items-center',
-      'tw-justify-center',
-
-      'tw-aspect-square',
-      'tw-size-[15px]',
-      '[&_svg]:tw-size-2.5',
-      'tw-text-muted-foreground',
-      className,
-    )}
-    {...props}
-  >
-    {children ?? <ChevronRight className="!tw-size-4" />}
-  </li>
-);

package/src/components/Breadcrumb/index.ts

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

package/src/components/Button/Button.stories.tsx

@@ -1,80 +0,0 @@
-import type { ComponentProps } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { CircleCheck, X } from '../../icons';
-
-import { Button } from './Button';
-
-type Props = ComponentProps<typeof Button>;
-type Size = NonNullable<Props['size']>;
-type Variant = NonNullable<Props['variant']>;
-
-const variants: Variant[] = ['primary', 'secondary', 'danger', 'outline', 'invisible', 'inline'];
-const sizes: Size[] = ['medium', 'small', 'large'];
-const iconSizes: Size[] = ['icon', 'icon-sm', 'icon-lg', 'icon-xs', 'icon-2xs', 'icon-3xs'];
-
-export default {
-  component: Button,
-  args: {
-    argo: false,
-    disabled: false,
-    isLoading: false,
-    children: 'Button',
-    variant: 'primary',
-    size: 'medium',
-  },
-  argTypes: {
-    variant: {
-      control: 'radio',
-      options: variants,
-    },
-    size: {
-      control: 'radio',
-      options: sizes,
-    },
-  },
-} satisfies Meta<typeof Button>;
-
-type Story = StoryObj<typeof Button>;
-
-export const Default: Story = {
-  args: {
-    children: 'Button',
-    variant: 'secondary',
-  },
-};
-
-export const WithIcon: Story = {
-  args: {
-    children: (
-      <>
-        <CircleCheck className="tw-size-4" /> Button
-      </>
-    ),
-  },
-};
-
-export const IconOnly: Story = {
-  args: {
-    size: 'icon',
-    children: <X className="tw-size-4" />,
-    'aria-label': 'Delete',
-  },
-  argTypes: {
-    size: {
-      control: 'radio',
-      options: iconSizes,
-    },
-  },
-};
-
-export const AsLink: Story = {
-  args: {
-    asChild: true,
-    children: <a href="#link">Link Button</a>,
-  },
-};
-
-export const Block: Story = {
-  args: { block: true, children: 'Full Width Button' },
-};

package/src/components/Button/Button.tsx

@@ -1,110 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-import { Root, Slottable } from '@radix-ui/react-slot';
-import type { VariantProps } from 'class-variance-authority';
-
-import { Loader2 } from '../../icons';
-import { cn } from '../../utils';
-import { Icon } from '../Icon';
-
-import { argoVariants, variants } from './styles';
-
-/**
- * Props for the `Button` component.
- *
- * Pass `variant` for primary/secondary/danger/outline/invisible looks, `size`
- * for height (including `icon-*` sizes when rendering icon-only). Icons are
- * composed as children — `<Button><Trash2 className="tw-size-4" /> Delete</Button>`.
- * `argo` opts into the Argo redesign styling (PageHeader / sidebar contexts) —
- * required when nested inside `PageHeader` or `PageLayout.Footer` slots.
- */
-type Props = {
-  /** Replaces the leading content with a spinner and disables the button visually. The caller still controls `disabled`. */
-  isLoading?: boolean;
-  /** Render as a Radix `Slot` so the parent JSX (e.g. a `react-router` `<Link>`) becomes the button element. */
-  asChild?: boolean;
-  /** Opt into the Argo redesign variant. Required inside `PageHeader` slots and other Argo surfaces. */
-  argo?: boolean;
-  /**
-   * @deprecated FA-name icon prop kept as a shim during the kbc-ui consumer
-   * migration sweep (UT-4109 C2). New code should compose icons as children
-   * via direct Lucide imports — `<Button><Trash2 className="tw-size-4" /> Delete</Button>`.
-   * Removed in the final C2 cleanup once every consumer is migrated.
-   */
-  icon?: ComponentProps<typeof Icon>['icon'];
-} & ComponentProps<'button'> &
-  VariantProps<typeof variants>;
-
-/**
- * Primary action surface for the design system — covers all clickable controls except inline text links.
- *
- * **When to use:** any user-initiated action (submit, save, open modal, run job). Use `size="icon-*"` with no
- * children for an icon-only button; there is no separate `IconButton` component.
- * **When NOT to use:** for inline text-link actions inside body copy use `ButtonInline`; for navigation that
- * opens a URL use `Link`; for "primary action + dropdown of related actions" use `SplitButton`.
- * **Composition:** wrap in `Tooltip` when icon-only or when disabled state needs an explanation; pair with
- * `Popconfirm` for destructive confirmations; pass through `Modal.Trigger` / `DropdownMenu.Trigger` via `asChild`.
- *
- * @see RECIPES.md#disabled-button-tooltip — for the disabled-button + tooltip pattern
- * @see RECIPES.md#confirm-dialog — for destructive-action confirmation
- */
-export const Button = ({
-  ref,
-  children,
-  disabled = false,
-  className,
-  type = 'button',
-  isLoading = false,
-  asChild = false,
-  onClick,
-  argo = false,
-  variant = 'primary',
-  size = 'medium',
-  block = false,
-  icon,
-  ...buttonProps
-}: Props & { ref?: Ref<ElementRef<'button'>> }) => {
-  const Comp = asChild ? Root : 'button';
-  const classNames = argo
-    ? argoVariants({ variant: variant, size, block, className })
-    : variants({
-        size,
-        variant,
-        block,
-        className,
-      });
-
-  const handleClick: ComponentProps<'button'>['onClick'] = (event) => {
-    const isAnchor = event.currentTarget.tagName === 'A';
-
-    // <a/> does not support disabled by default, and we cannot use pointer-events: none because cursor-not-allowed would not work.
-    if (isAnchor && disabled) {
-      event.preventDefault();
-      return;
-    }
-
-    onClick?.(event);
-  };
-
-  return (
-    <Comp
-      {...buttonProps}
-      ref={ref}
-      disabled={disabled}
-      aria-disabled={disabled}
-      data-variant={variant}
-      // `size="icon"` / `size="icon-*"` flags the button as icon-only — needed
-      // by `ButtonGroup space="block"` which stretches non-icon children to
-      // equal width. Detection by `size` works for both the legacy shim path
-      // (no children, FA icon prop) and shadcn composition (icon as the only
-      // child).
-      data-icon-only={String(size).startsWith('icon')}
-      type={type}
-      onClick={handleClick}
-      className={cn(classNames)}
-    >
-      {isLoading && <Loader2 className="tw-size-4 tw-shrink-0 tw-animate-spin" />}
-      {!isLoading && icon && <Icon icon={icon} />}
-      <Slottable>{children}</Slottable>
-    </Comp>
-  );
-};

package/src/components/Button/ButtonInline.stories.tsx

@@ -1,54 +0,0 @@
-import type { ComponentProps } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Copy } from '../../icons';
-
-import { ButtonInline } from './ButtonInline';
-
-type Variant = NonNullable<ComponentProps<typeof ButtonInline>['variant']>;
-type Color = NonNullable<ComponentProps<typeof ButtonInline>['color']>;
-
-export default {
-  component: ButtonInline,
-  args: {
-    children: 'ButtonAsLink',
-    variant: 'link',
-    color: 'link',
-    disabled: false,
-  },
-  argTypes: {
-    variant: {
-      type: { name: 'enum', value: ['link', 'link-reverse', 'custom'] as Variant[] },
-    },
-    color: {
-      type: { name: 'enum', value: ['link', 'dark', 'danger'] as Color[] },
-    },
-  },
-} satisfies Meta<typeof ButtonInline>;
-
-type Story = StoryObj<typeof ButtonInline>;
-
-export const Base: Story = {};
-
-export const WithIcon: Story = {
-  args: {
-    children: (
-      <>
-        <Copy className="tw-size-4" />
-        ButtonAsLink
-      </>
-    ),
-  },
-};
-
-/**
- * Almost no styles are applied by default, so it can be rewritten from outside.
- */
-export const CustomVariant: Story = {
-  render: (args) => (
-    <ButtonInline {...args} variant="custom" className="tw-text-error-500">
-      <Copy className="tw-size-4 tw-text-primary-500" />
-      Create Configuration
-    </ButtonInline>
-  ),
-};