@keboola/design 1.0.0

package/src/components/Alert/AlertRoot.tsx

@@ -0,0 +1,64 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+
+import { cn } from '../../utils';
+
+export type Variant = 'info' | 'warning' | 'error' | 'success';
+
+type Props = {
+  variant?: Variant;
+  argo?: boolean;
+} & ComponentProps<'div'>;
+
+export const AlertRoot = ({
+  ref,
+  children,
+  className,
+  variant,
+  argo = false,
+  ...rest
+}: Props & { ref?: Ref<ElementRef<'div'>> }) => (
+  <div
+    {...rest}
+    ref={ref}
+    data-variant={variant}
+    data-argo={argo}
+    className={cn(
+      'tw-group/alert',
+
+      // layout
+      'tw-grid',
+      'tw-grid-cols-[0_1fr_auto]',
+      'has-[[data-slot=alert-icon]]:tw-grid-cols-[auto_1fr_auto]',
+      'has-[[data-slot=alert-icon]]:tw-gap-x-2',
+
+      // fonts
+      'tw-text-sm',
+      'tw-text-neutral-800',
+      'tw-text-left',
+
+      'tw-p-4',
+
+      // border
+      'tw-rounded',
+      'data-[argo=true]:tw-rounded-lg',
+      'tw-border',
+      'tw-border-solid',
+
+      // border variants
+      'data-[variant=info]:tw-bg-secondary-100',
+      'data-[variant=info]:tw-border-secondary-200',
+
+      'data-[variant=warning]:tw-bg-warning-100',
+      'data-[variant=warning]:tw-border-warning-300',
+
+      'data-[variant=error]:tw-bg-error-100',
+      'data-[variant=error]:tw-border-error-200',
+
+      'data-[variant=success]:tw-bg-primary-100',
+      'data-[variant=success]:tw-border-primary-200',
+      className,
+    )}
+  >
+    {children}
+  </div>
+);

package/src/components/Alert/AlertTitle.tsx

@@ -0,0 +1,25 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+
+import { cn } from '../../utils';
+
+type Props = ComponentProps<'div'>;
+
+export const AlertTitle = ({
+  ref,
+  className,
+  ...props
+}: Props & { ref?: Ref<ElementRef<'div'>> }) => (
+  <div
+    {...props}
+    ref={ref}
+    data-slot="alert-title"
+    className={cn(
+      'tw-group/alert-title',
+      'tw-flex',
+      'tw-col-start-2',
+      'tw-font-medium',
+      'tw-items-center',
+      className,
+    )}
+  />
+);

package/src/components/Alert/index.ts

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

package/src/components/Avatar.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Avatar } from './Avatar';
+
+const meta: Meta<typeof Avatar> = {
+  component: Avatar,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Avatar>;
+
+export const EmailAndName: Story = {
+  args: {
+    user: {
+      name: 'John Doe',
+      email: 'test1@example.com',
+    },
+  },
+};
+
+export const NoUserParam: Story = {};

package/src/components/Avatar.tsx

@@ -0,0 +1,88 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+import BoringAvatar from 'boring-avatars';
+
+import { cn } from '@keboola/design';
+
+import { useSHA256 } from '../utils/useSHA256';
+
+const RANDOM_UUID = crypto.randomUUID();
+
+const styles = {
+  wrapper: {
+    position: 'relative',
+    display: 'inline-flex',
+    verticalAlign: 'middle',
+  },
+  gravatar: {
+    position: 'absolute',
+    left: 0,
+  },
+} as const;
+
+type Props = {
+  user?: {
+    name: string | undefined;
+    email: string | undefined;
+  };
+  fallback?: string;
+  className?: string;
+  size?: number;
+  variant?: 'circle' | 'rounded';
+} & ComponentProps<'span'>;
+
+export const Avatar = ({
+  ref,
+  user,
+  fallback,
+  size = 36,
+  className,
+  variant = 'circle',
+  ...props
+}: Props & { ref?: Ref<ElementRef<'span'>> }) => {
+  const userName = user?.name || user?.email;
+  const email = user?.email;
+  const hash = useSHA256(email ? email.trim().toLowerCase() : fallback || '');
+
+  return (
+    <span
+      {...props}
+      ref={ref}
+      style={styles.wrapper}
+      className={cn(
+        variant === 'circle' ? 'tw-rounded-full' : 'tw-rounded-md',
+        'tw-overflow-hidden',
+        'focus-visible:tw-outline-none',
+        'tw-h-fit',
+        'tw-shrink-0',
+
+        'tw-border-solid',
+        'tw-border',
+        'tw-border-transparent',
+
+        'focus-visible:tw-ring-4',
+        'focus-visible:tw-ring-secondary-200',
+        'focus-visible:tw-border-secondary-500',
+        className,
+      )}
+    >
+      <BoringAvatar
+        name={userName || fallback || RANDOM_UUID}
+        variant="beam"
+        colors={['#1F8FFF', '#004787', '#28D8FF', '#925cff', '#A8C2E6']}
+        size={size}
+        square={variant === 'rounded'}
+      />
+      {hash && (
+        <img
+          src={`https://secure.gravatar.com/avatar/${hash}?s=${size * 3}&d=blank`}
+          width={size}
+          height={size}
+          alt={userName || fallback || 'User avatar'}
+          referrerPolicy="no-referrer"
+          loading="lazy"
+          style={styles.gravatar}
+        />
+      )}
+    </span>
+  );
+};

package/src/components/Badge/Badge.stories.tsx

@@ -0,0 +1,106 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Icon } from '../Icon';
+
+import { Badge } from './Badge';
+
+const meta: Meta<typeof Badge> = {
+  component: Badge,
+  args: {
+    children: 'Beta',
+    prefixVariant: 'inline',
+    suffixVariant: 'inline',
+  },
+  argTypes: {
+    variant: {
+      control: 'radio',
+      options: ['default', 'tag', 'pill'],
+      description: 'Visual style variant of the badge',
+    },
+    color: {
+      control: 'select',
+      options: [
+        'gray',
+        'gray-darker',
+        'gray-inverse',
+        'green',
+        'green-darker',
+        'green-inverse',
+        'blue',
+        'blue-inverse',
+        'red',
+        'orange',
+        'orange-inverse',
+        'teal',
+        'teal-inverse',
+        'purple',
+        'purple-inverse',
+        'cyan',
+        'cyan-inverse',
+      ],
+      description: 'Color scheme of the badge',
+    },
+    prefixVariant: {
+      control: 'radio',
+      options: ['inline', 'floating'],
+      description: 'How the prefix addon is positioned',
+    },
+    suffixVariant: {
+      control: 'radio',
+      options: ['inline', 'floating'],
+      description: 'How the suffix addon is positioned',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Badge>;
+
+export const Default: Story = {
+  args: { children: 'Beta', color: 'blue' },
+};
+
+export const AsButton: Story = {
+  args: {
+    asChild: true,
+  },
+  render: (args) => (
+    <Badge {...args}>
+      <button
+        type="button"
+        onClick={() => {
+          alert('Tag Button clicked');
+        }}
+      >
+        Beta
+      </button>
+    </Badge>
+  ),
+};
+
+export const StartAddon: Story = {
+  args: {
+    prefix: <Badge.Button icon="plus" onClick={() => alert('Removed')} aria-label="Add" />,
+  },
+};
+
+export const EndAddon: Story = {
+  args: {
+    suffix: <Badge.Button icon="xmark" onClick={() => alert('Removed')} aria-label="Remove" />,
+    prefixVariant: 'floating',
+  },
+};
+
+export const BothAddons: Story = {
+  args: {
+    prefix: <Badge.Button icon="plus" onClick={() => alert('Removed')} aria-label="Add" />,
+    suffix: <Badge.Button icon="xmark" onClick={() => alert('Removed')} aria-label="Remove" />,
+  },
+};
+
+export const IconAddon: Story = {
+  args: {
+    prefix: <Icon icon="circle-info" />,
+    suffix: <Icon icon="check" />,
+  },
+};

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,55 @@
+import type { ComponentProps, ElementRef, ReactNode, Ref } from 'react';
+
+import { BadgeAddon } from './BadgeAddon';
+import { BadgeButton } from './BadgeButton';
+import { BadgeLabel } from './BadgeLabel';
+import { BadgeRoot } from './BadgeRoot';
+
+type AddonVariant = ComponentProps<typeof BadgeAddon>['variant'];
+type BadgeRootProps = ComponentProps<typeof BadgeRoot>;
+type BadgeLabelProps = ComponentProps<typeof BadgeLabel>;
+
+type Props = Pick<BadgeRootProps, 'variant' | 'color'> &
+  Omit<BadgeLabelProps, 'prefix'> & {
+    prefix?: ReactNode;
+    prefixVariant?: AddonVariant;
+    suffix?: ReactNode;
+    suffixVariant?: AddonVariant;
+    labelClassName?: string;
+  };
+
+const BadgeInner = ({
+  ref,
+  // root props
+  variant,
+  color,
+  // custom props
+  prefix,
+  prefixVariant = 'inline',
+  suffix,
+  suffixVariant = 'inline',
+  className,
+  labelClassName,
+  ...labelProps
+}: Props & { ref?: Ref<ElementRef<'span'>> }) => (
+  <BadgeRoot className={className} variant={variant} color={color}>
+    {prefix && (
+      <BadgeAddon align="inline-start" variant={prefixVariant}>
+        {prefix}
+      </BadgeAddon>
+    )}
+    <BadgeLabel {...labelProps} ref={ref} className={labelClassName} />
+    {suffix && (
+      <BadgeAddon align="inline-end" variant={suffixVariant}>
+        {suffix}
+      </BadgeAddon>
+    )}
+  </BadgeRoot>
+);
+
+export const Badge = Object.assign(BadgeInner, {
+  Root: BadgeRoot,
+  Button: BadgeButton,
+  Label: BadgeLabel,
+  Addon: BadgeAddon,
+});

package/src/components/Badge/BadgeAddon.tsx

@@ -0,0 +1,63 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../utils';
+
+const addonVariants = cva(
+  [
+    'tw-flex',
+    'tw-items-center',
+    'tw-shrink-0',
+    'tw-bg-inherit',
+    'tw-self-stretch',
+    'tw-px-1',
+    'has-[button]:tw-px-0',
+    '[&_svg]:tw-size-3',
+  ],
+  {
+    defaultVariants: {
+      align: 'inline-end',
+      variant: 'inline',
+    },
+    variants: {
+      align: {
+        'inline-start': ['tw-order-first'],
+        'inline-end': ['tw-order-last'],
+      },
+      variant: {
+        inline: [],
+        floating: [
+          'tw-hidden',
+          'group-hover/badge:tw-flex',
+
+          'tw-absolute',
+          'tw-top-0',
+          'tw-bottom-0',
+          'focus-within:tw-flex',
+        ],
+      },
+    },
+    compoundVariants: [
+      { variant: 'floating', align: 'inline-end', className: ['tw-right-0'] },
+      { variant: 'floating', align: 'inline-start', className: ['tw-left-0'] },
+    ],
+  },
+);
+
+type Props = ComponentProps<'div'> & VariantProps<typeof addonVariants>;
+
+export const BadgeAddon = ({
+  ref,
+  align = 'inline-end',
+  variant = 'inline',
+  className,
+  ...rest
+}: Props & { ref?: Ref<ElementRef<'div'>> }) => (
+  <div
+    {...rest}
+    ref={ref}
+    data-align={align}
+    data-variant={variant}
+    className={cn(addonVariants({ align, variant, className }))}
+  />
+);

package/src/components/Badge/BadgeButton.tsx

@@ -0,0 +1,39 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+
+import { cn } from '../../utils';
+import { Icon } from '../Icon';
+
+type Props = ComponentProps<'button'> & {
+  icon: ComponentProps<typeof Icon>['icon'];
+};
+
+export const BadgeButton = ({
+  ref,
+  className,
+  icon,
+  type = 'button',
+  ...rest
+}: Props & { ref?: Ref<ElementRef<'button'>> }) => (
+  <button
+    {...rest}
+    ref={ref}
+    type={type}
+    className={cn(
+      'tailwindcss-preflight',
+
+      'tw-inline-flex',
+      'tw-items-center',
+      'tw-justify-center',
+      'tw-cursor-pointer',
+
+      'tw-bg-inherit',
+      'tw-text-inherit',
+
+      'hover:tw-brightness-95',
+      'tw-px-1',
+      className,
+    )}
+  >
+    <Icon icon={icon} />
+  </button>
+);

package/src/components/Badge/BadgeLabel.tsx

@@ -0,0 +1,37 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+import { Slot } from '@radix-ui/react-slot';
+
+import { cn } from '../../utils';
+
+type Props = ComponentProps<'span'> & {
+  asChild?: boolean;
+};
+
+export const BadgeLabel = ({
+  ref,
+  className,
+  asChild = false,
+  ...rest
+}: Props & { ref?: Ref<ElementRef<'span'>> }) => {
+  const Comp = asChild ? Slot : 'span';
+  return (
+    <Comp
+      {...rest}
+      ref={ref}
+      data-slot="badge-label"
+      className={cn(
+        'tw-max-w-56',
+        'tw-truncate',
+        'tw-px-2',
+        'tw-py-0.5',
+
+        // Drop side padding only when an *inline* addon is present —
+        // floating addons overlay the label without taking layout space,
+        // so the label still needs full padding behind them.
+        'group-has-[[data-align=inline-start][data-variant=inline]:not(:empty)]/badge:tw-pl-0',
+        'group-has-[[data-align=inline-end][data-variant=inline]:not(:empty)]/badge:tw-pr-0',
+        className,
+      )}
+    />
+  );
+};

package/src/components/Badge/BadgeRoot.tsx

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

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

package/src/components/Badge/styles.ts

@@ -0,0 +1,74 @@
+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,
+    },
+  },
+);