@keboola/design 1.0.0

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

@@ -0,0 +1,135 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { DropdownMenu } from '../DropdownMenu';
+import { Icon } from '../Icon';
+
+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>
+          <Icon icon="dot-circle" />
+        </Breadcrumb.Separator>
+        <Breadcrumb.Item>
+          <Breadcrumb.Link href="/components">Components</Breadcrumb.Link>
+        </Breadcrumb.Item>
+        <Breadcrumb.Separator>
+          <Icon icon="dot-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
+                  <Icon icon="chevron-down" />
+                </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

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

@@ -0,0 +1,43 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+
+import { cn } from '../../utils';
+import { Icon } from '../Icon';
+
+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}
+  >
+    <Icon icon={['far', 'ellipsis']} className="tw-size-4" />
+    <span className="tw-sr-only">More</span>
+  </button>
+);

package/src/components/Breadcrumb/BreadcrumbItem.tsx

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

@@ -0,0 +1,48 @@
+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-2.5',
+
+        // transition
+        'tw-transition-colors',
+        className,
+      )}
+      {...props}
+    />
+  );
+};

package/src/components/Breadcrumb/BreadcrumbList.tsx

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

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

@@ -0,0 +1,28 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '../../utils';
+import { Icon } from '../Icon';
+
+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 ?? <Icon icon="chevron-right" />}
+  </li>
+);

package/src/components/Breadcrumb/index.ts

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

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

@@ -0,0 +1,68 @@
+import type { ComponentProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+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: 'Button', icon: 'circle-check' },
+};
+
+export const IconOnly: Story = {
+  args: { size: 'icon', children: null, icon: 'xmark', '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

@@ -0,0 +1,73 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+import { Root, Slottable } from '@radix-ui/react-slot';
+import type { VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../utils';
+import { Icon } from '../Icon';
+
+import { argoVariants, variants } from './styles';
+
+type Props = {
+  icon?: ComponentProps<typeof Icon>['icon'];
+  isLoading?: boolean;
+  asChild?: boolean;
+  argo?: boolean;
+} & ComponentProps<'button'> &
+  VariantProps<typeof variants>;
+
+export const Button = ({
+  ref,
+  children,
+  disabled = false,
+  className,
+  type = 'button',
+  icon: iconProp,
+  isLoading = false,
+  asChild = false,
+  onClick,
+  argo = false,
+  variant = 'primary',
+  size = 'medium',
+  block = false,
+  ...buttonProps
+}: Props & { ref?: Ref<ElementRef<'button'>> }) => {
+  const Comp = asChild ? Root : 'button';
+  const icon = isLoading ? 'spinner' : iconProp;
+  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}
+      data-icon-only={!children}
+      type={type}
+      onClick={handleClick}
+      className={cn(classNames)}
+    >
+      {icon && <Icon spin={isLoading} icon={icon} />}
+      <Slottable>{children}</Slottable>
+    </Comp>
+  );
+};

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

@@ -0,0 +1,54 @@
+import type { ComponentProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Icon } from '../Icon';
+
+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: (
+      <>
+        <Icon icon="copy" />
+        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">
+      <Icon icon="copy" className="tw-text-primary-500" />
+      Create Configuration
+    </ButtonInline>
+  ),
+};

package/src/components/Button/ButtonInline.tsx

@@ -0,0 +1,73 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+import { Root } from '@radix-ui/react-slot';
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+
+const buttonInlineVariants = cva(
+  [
+    'tailwindcss-preflight',
+
+    'tw-inline-flex',
+    'tw-items-center',
+    'tw-gap-2',
+
+    'tw-underline-offset-2',
+
+    'disabled:tw-opacity-40',
+    'disabled:tw-cursor-not-allowed',
+    'disabled:tw-text-neutral-500',
+    'disabled:tw-no-underline',
+    '[&_svg]:disabled:tw-text-neutral-400',
+  ],
+  {
+    defaultVariants: {
+      variant: 'link',
+      color: 'link',
+    },
+    variants: {
+      color: {
+        link: [
+          'tw-text-secondary-500',
+          'hover:tw-text-secondary-600',
+          '[&_svg]:tw-text-secondary-500',
+        ],
+        dark: ['tw-text-neutral-800 [&_svg]:tw-text-neutral-400'],
+        danger: ['tw-text-error-500 [&_svg]:tw-text-error-500'],
+        muted: ['tw-text-muted-foreground [&_svg]:tw-text-muted-foreground'],
+        custom: [],
+      },
+      variant: {
+        link: ['tw-underline', 'hover:tw-no-underline'],
+        'link-reverse': ['tw-no-underline', '', 'hover:tw-underline'],
+        custom: [],
+      },
+    },
+  },
+);
+
+type Props = ComponentProps<'button'> &
+  VariantProps<typeof buttonInlineVariants> & { asChild?: boolean };
+
+export const ButtonInline = ({
+  ref,
+  children,
+  className,
+  variant,
+  color,
+  type = 'button',
+  asChild = false,
+  ...buttonProps
+}: Props & { ref?: Ref<ElementRef<'button'>> }) => {
+  const Comp = asChild ? Root : 'button';
+
+  return (
+    <Comp
+      {...buttonProps}
+      ref={ref}
+      type={asChild ? undefined : type}
+      className={buttonInlineVariants({ variant, color, className })}
+    >
+      {children}
+    </Comp>
+  );
+};

package/src/components/Button/index.ts

@@ -0,0 +1,3 @@
+export * from './Button';
+export * from './ButtonInline';
+export { argoVariants } from './styles';