@keboola/design 2.0.1 → 2.1.0

package/src/components/Timeline/TimelineConnector.tsx

@@ -1,158 +0,0 @@
-import type { ComponentProps, CSSProperties } from 'react';
-import { Root } from '@radix-ui/react-slot';
-import type { VariantProps } from 'class-variance-authority';
-import { cva } from 'class-variance-authority';
-
-import { useLastLineHeight } from './useLastLineHeight';
-
-const connectorWrapper = cva(
-  [
-    'tw-grow',
-    'tw-min-h-8',
-    'tw-py-2',
-
-    // layout
-    'tw-flex',
-    'tw-justify-center',
-
-    // CONNECTOR LINE
-    'tw-relative',
-    'before:tw-absolute',
-    'before:tw-self-start',
-
-    // Centered on x-axis
-    'before:tw-left-1/2',
-    'before:tw--translate-x-1/2',
-    'before:tw-w-px',
-    'before:tw-h-full',
-    'before:group-last/timeline-item:tw-h-[--connector-line-height]',
-
-    // Solid line
-    'before:group-data-[variant=solid]/timeline:tw-bg-neutral-200',
-
-    // Dashed line using gradient
-    'before:group-data-[variant=dashed]/timeline:tw-bg-gradient-to-b',
-    'before:group-data-[variant=dashed]/timeline:tw-from-neutral-200',
-    'before:group-data-[variant=dashed]/timeline:tw-from-50%',
-    'before:group-data-[variant=dashed]/timeline:tw-to-transparent',
-    'before:group-data-[variant=dashed]/timeline:tw-to-50%',
-    'before:group-data-[variant=dashed]/timeline:tw-bg-[length:1px_4px]',
-  ],
-  {
-    defaultVariants: {
-      align: 'start',
-    },
-    variants: {
-      align: {
-        start: ['tw-items-start'],
-        center: ['tw-items-center'],
-        end: ['tw-items-end'],
-        baseline: ['tw-items-baseline'],
-      },
-    },
-  },
-);
-
-const connector = cva(
-  [
-    // ensure that it is always above the connector line.
-    'tw-z-10',
-    'tw-relative',
-  ],
-  {
-    defaultVariants: {
-      variant: 'label',
-    },
-    variants: {
-      variant: {
-        none: [],
-        label: [
-          'tw-bg-neutral-100',
-          'tw-text-neutral-300',
-          'tw-rounded',
-          'tw-p-1.5',
-          'tw-text-nowrap',
-          'tw-text-xs',
-        ],
-        icon: [
-          'tw-bg-white',
-          '[&_svg:not([class*="tw-size-"])]:tw-size-4',
-          '[&_svg]:tw-text-neutral-300',
-        ],
-        line: [
-          'tw-min-w-8',
-          'tw-overflow-hidden',
-          'tw-w-full',
-          // height of the curved corner
-          'tw-h-1',
-
-          // small offset from top and bottom
-          'tw-my-1.5',
-          // positioning
-          'tw-relative',
-          'before:tw-absolute',
-          'before:tw-left-1/2',
-          'before:tw-bottom-0',
-
-          // sizing
-          'before:tw-w-full',
-          'before:tw-h-full',
-
-          // l-shape
-          'before:tw-border-l',
-          'before:tw-border-b',
-          'before:tw-border-neutral-200',
-
-          'before:tw-rounded-bl',
-          // Solid or dashed
-          'before:group-data-[variant=dashed]/timeline:tw-border-dashed',
-          'before:group-data-[variant=solid]/timeline:!tw-border-solid',
-        ],
-      },
-    },
-  },
-);
-
-type Props = { asChild?: boolean; offset?: number } & ComponentProps<'div'> &
-  VariantProps<typeof connectorWrapper> &
-  VariantProps<typeof connector>;
-
-export const TimelineConnector = ({
-  className,
-  children,
-  asChild,
-  variant,
-  align,
-  offset = 0,
-  style,
-  ...rest
-}: Props) => {
-  const Comp = asChild ? Root : 'div';
-  const { setConnector, setWrapper, height } = useLastLineHeight();
-
-  return (
-    <div
-      ref={setWrapper}
-      style={
-        {
-          '--connector-line-height': `${height}px`,
-        } as CSSProperties
-      }
-      className={connectorWrapper({
-        align,
-      })}
-    >
-      <Comp
-        {...rest}
-        ref={setConnector}
-        style={{
-          top: align === 'end' ? -offset : offset,
-          ...style,
-        }}
-        className={connector({ variant, className })}
-      >
-        {children}
-      </Comp>
-    </div>
-  );
-};

package/src/components/Timeline/TimelineContent.tsx

@@ -1,18 +0,0 @@
-import type { ComponentProps } from 'react';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<'div'>;
-
-export const TimelineContent = ({ className, ...rest }: Props) => (
-  <div
-    {...rest}
-    data-slot="timeline-content"
-    className={cn(
-      'tw-flex',
-      // spacing in between timeline items
-      'tw-py-2',
-      className,
-    )}
-  />
-);

package/src/components/Timeline/TimelineItem.tsx

@@ -1,14 +0,0 @@
-import type { ComponentProps } from 'react';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<'li'>;
-
-export const TimelineItem = ({ className, ...rest }: Props) => {
-  return (
-    <li
-      {...rest}
-      className={cn('tw-contents', 'tw-relative', 'tw-group/timeline-item', className)}
-    />
-  );
-};

package/src/components/Timeline/index.ts

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

package/src/components/Timeline/useLastLineHeight.ts

@@ -1,36 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { useElement } from '../../hooks/useElement';
-
-const CONNECTOR_MARGIN_TOP = 8;
-
-export const useLastLineHeight = () => {
-  const [wrapper, setWrapper] = useElement();
-  const [connector, setConnector] = useElement();
-  const [height, setHeight] = useState(0);
-
-  useEffect(() => {
-    if (wrapper === null) return;
-    if (connector === null) return;
-
-    const updateHeight = () => {
-      const wrapperRect = wrapper.getBoundingClientRect();
-      const connectorRect = connector.getBoundingClientRect();
-      const distance = connectorRect.top - wrapperRect.top - CONNECTOR_MARGIN_TOP;
-      setHeight(distance);
-    };
-
-    // Initial check.
-    const rafId = requestAnimationFrame(updateHeight);
-
-    return () => {
-      cancelAnimationFrame(rafId);
-    };
-  }, [wrapper, connector]);
-
-  return {
-    height,
-    setWrapper,
-    setConnector,
-  };
-};

package/src/components/Toast/Toast.stories.tsx

@@ -1,178 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Button } from '../Button';
-
-import type { ToastOptions } from './toast';
-import { toast } from './toast';
-import { Toaster } from './Toaster';
-import { useNotification } from './useNotification';
-
-type Variant = NonNullable<ToastOptions['variant']>;
-type Icon = ToastOptions['icon'];
-type Position = NonNullable<ToastOptions['position']>;
-
-const variants: Variant[] = ['default', 'info', 'success', 'warning', 'error'];
-const icons: Icon[] = [undefined, 'clock', 'bug', 'sparkles'];
-const positions: Position[] = [
-  'bottom-center',
-  'bottom-left',
-  'bottom-right',
-  'top-center',
-  'top-left',
-  'top-right',
-];
-
-const ToastDemo = (args: ToastOptions) => <Button onClick={() => toast(args)}>Render Toast</Button>;
-
-export default {
-  decorators: (Story) => (
-    <>
-      <Story />
-      <Toaster />
-    </>
-  ),
-  args: {
-    variant: 'info',
-    loading: false,
-    icon: undefined,
-    position: 'bottom-center',
-    title: 'Event has been created',
-    description: 'Your event has been successfully created and is now live.',
-  },
-  argTypes: {
-    variant: {
-      options: variants,
-      control: { type: 'radio' },
-    },
-    icon: {
-      control: { type: 'radio' },
-      description:
-        'Custom Icon (overrides default icon based on variant, or spinner if loading is true)',
-      options: icons,
-    },
-    position: {
-      control: { type: 'radio' },
-      options: positions,
-    },
-  },
-  render: ToastDemo,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      // In docs mode, don't use a global Toaster to avoid toasts appearing in all blocks
-      story: {
-        inline: false,
-      },
-    },
-  },
-} satisfies Meta<ToastOptions>;
-
-type Story = StoryObj<ToastOptions>;
-
-export const Default: Story = {};
-
-export const WithAction: Story = {
-  args: {
-    action: {
-      label: 'Copy',
-      onClick: () => alert('Action clicked!'),
-    },
-  },
-};
-
-export const OnlyTitle: Story = {
-  args: {
-    title: 'This is a title-only toast',
-    description: undefined,
-  },
-};
-
-export const Loading: Story = {
-  args: {
-    title: 'Loading...',
-    loading: true,
-  },
-};
-export const CustomIcon: Story = {
-  args: {
-    title: 'Custom clock icon',
-    icon: 'clock',
-  },
-};
-
-export const CustomPosition: Story = {
-  args: {
-    position: 'top-left',
-  },
-};
-
-export const Jsx: Story = {
-  args: {
-    title: (
-      <>
-        Title can include <em>JSX content</em>
-      </>
-    ),
-    description: (
-      <>
-        This toast demonstrates rendering JSX content. You can include <strong>bold text</strong>
-      </>
-    ),
-  },
-};
-
-export const AutoDismiss: Story = {
-  args: {
-    title: 'This toast will automatically dismiss after 3 seconds.',
-    description: undefined,
-    duration: 3000,
-  },
-};
-
-export const LongContent: Story = {
-  args: {
-    title:
-      'This is a longer description that provides more context about what happened. It might contain important information that the user needs to read carefully. The toast component should handle longer content gracefully and wrap it appropriately even when the message is very long and contains multiple sentences with detailed information.',
-    description: undefined,
-  },
-};
-
-export const LongContentWithAction: Story = {
-  args: {
-    title:
-      'This is a very long description that provides extensive context about what happened. It contains important information that the user needs to read carefully. The toast component should handle longer content gracefully and wrap it appropriately while keeping the action button from shrinking.',
-    action: {
-      label: 'View Details',
-      onClick: () => alert('Action clicked!'),
-    },
-  },
-};
-
-const NotificationDemo = () => {
-  useNotification({
-    title: 'This is a notification triggered by useNotification hook',
-    description: 'It will stay visible until dismissed or component unmounts.',
-    action: {
-      label: 'Take Action',
-      onClick: () => alert('Notification action clicked!'),
-    },
-    position: 'top-center',
-  });
-
-  return (
-    <div className="tw-flex tw-flex-col tw-items-center tw-justify-center">
-      <h4>Declarative notification component built on top of sonner/toast.</h4>
-      <p>
-        Use Notification for <strong>persistent</strong>, system-driven messages that require user
-        acknowledgment (e.g., trial expiration warnings, upgrade prompts, billing alerts). The
-        notification stays visible until the user dismisses it or the component unmounts. Use
-        `toast()` for transient feedback after a user action (e.g., "Saved", "Copied", "Deleted")
-        that auto-dismisses after a few seconds.
-      </p>
-    </div>
-  );
-};
-
-export const UseNotification: Story = {
-  render: NotificationDemo,
-};

package/src/components/Toast/ToastAction.tsx

@@ -1,40 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<'button'>;
-
-export const ToastAction = ({
-  ref,
-  className,
-  ...rest
-}: Props & { ref?: Ref<ElementRef<'button'>> }) => (
-  <button
-    {...rest}
-    ref={ref}
-    data-slot="toast-action"
-    type="button"
-    className={cn(
-      // layout
-      'tw-col-start-3',
-      'tw-row-start-1',
-      'tw-flex',
-      'tw-items-center',
-      'tw-justify-center',
-
-      // font
-      'tw-text-xs',
-      'tw-font-medium',
-      'tw-text-primary',
-
-      // sizing
-      'tw-px-2',
-      'tw-h-6',
-
-      // styles
-      'tw-bg-primary-foreground',
-      'tw-rounded',
-      className,
-    )}
-  />
-);

package/src/components/Toast/ToastDescription.tsx

@@ -1,28 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<'div'>;
-
-export const ToastDescription = ({
-  ref,
-  className,
-  children,
-  ...rest
-}: Props & { ref?: Ref<ElementRef<'div'>> }) => (
-  <div
-    ref={ref}
-    data-slot="toast-description"
-    className={cn(
-      'tw-col-start-2',
-      'tw-font-normal',
-      'tw-break-words',
-      'tw-text-white',
-      'group-data-[variant=default]/toast:tw-text-muted-foreground',
-      className,
-    )}
-    {...rest}
-  >
-    {children}
-  </div>
-);

package/src/components/Toast/ToastDismiss.tsx

@@ -1,36 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-
-import { X } from '../../icons';
-import { cn } from '../../utils';
-
-type Props = ComponentProps<'button'>;
-
-export const ToastDismiss = ({
-  ref,
-  className,
-  ...rest
-}: Props & { ref?: Ref<ElementRef<'button'>> }) => (
-  <button
-    ref={ref}
-    data-slot="toast-dismiss"
-    className={cn(
-      'tw-flex',
-      'tw-justify-center',
-      'tw-col-start-4',
-      'tw-row-start-1',
-      'tailwindcss-preflight',
-      '[&_svg]:tw-aspect-square',
-      '[&_svg:not([class*="tw-size-"])]:tw-size-4',
-      '[&_svg]:tw-m-1',
-
-      'tw-text-white',
-      'group-data-[variant=default]/toast:[&_svg]:tw-text-popover-foreground',
-      className,
-    )}
-    type="button"
-    {...rest}
-  >
-    <X />
-    <span className="tw-sr-only">Dismiss</span>
-  </button>
-);

package/src/components/Toast/ToastDuration.tsx

@@ -1,43 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-
-import { cn } from '../../utils';
-
-type ToastDurationProps = ComponentProps<'span'> & {
-  duration: number;
-};
-
-export const ToastDuration = ({
-  ref,
-  duration,
-  className,
-  style,
-  ...rest
-}: ToastDurationProps & { ref?: Ref<ElementRef<'span'>> }) => (
-  <span
-    {...rest}
-    ref={ref}
-    className={cn(
-      'tw-bg-white/30',
-      'group-data-[variant=default]/toast:tw-bg-popover-foreground/20',
-      'tw-rounded-bl-lg',
-      'tw-mx-px',
-
-      // positioning
-      'tw-absolute',
-      'tw-bottom-0',
-      'tw-left-0',
-
-      // sizing
-      'tw-h-1',
-
-      // animation
-      'tw-animate-toast-progress',
-      'group-hover/toast:[animation-play-state:paused]',
-      className,
-    )}
-    style={{
-      animationDuration: `${duration}ms`,
-      ...style,
-    }}
-  />
-);

package/src/components/Toast/ToastRoot.tsx

@@ -1,135 +0,0 @@
-import type { MouseEventHandler, ReactNode } from 'react';
-import type { VariantProps } from 'class-variance-authority';
-import { cva } from 'class-variance-authority';
-import { type Action, toast as sonnerToast } from 'sonner';
-
-import { AlertCircle, AlertTriangle, CircleCheck, Info, Loader2 } from '../../icons';
-import { cn } from '../../utils';
-import { renderLegacyIcon } from '../../utils/legacyIcon';
-
-import { ToastAction } from './ToastAction';
-import { ToastDescription } from './ToastDescription';
-import { ToastDismiss } from './ToastDismiss';
-import { ToastDuration } from './ToastDuration';
-import { ToastTitle } from './ToastTitle';
-
-const variants = cva(
-  [
-    'tailwindcss-preflight',
-    'tw-group/toast',
-    'tw-relative',
-
-    // layout
-    'tw-grid',
-    'tw-grid-cols-[0_1fr_auto_auto]',
-    'tw-items-start',
-    'has-[[data-slot=toast-description]]:tw-grid-rows-[auto_auto]',
-    'has-[[data-slot=toast-icon]]:tw-grid-cols-[auto_1fr_auto_auto]',
-    '[&_[data-slot=toast-icon]]:tw-mr-2',
-    '[&_[data-slot=toast-title]]:tw-mr-2.5',
-    '[&_[data-slot=toast-description]]:tw-mr-2.5',
-    '[&_[data-slot=toast-action]]:tw-mr-2',
-    '[&_[data-slot=toast-description]]:tw-col-end-3',
-    'tw-gap-y-0',
-
-    // styles
-    'tw-p-4',
-    'tw-rounded-lg',
-    'tw-shadow-md',
-  ],
-  {
-    defaultVariants: {
-      variant: 'info',
-    },
-    variants: {
-      variant: {
-        default: 'tw-border tw-border-border tw-bg-popover',
-        error: 'tw-bg-error-550',
-        info: 'tw-bg-secondary-600',
-        success: 'tw-bg-primary-700',
-        warning: 'tw-bg-warning-550',
-      },
-    },
-  },
-);
-
-type Variants = VariantProps<typeof variants>;
-type Variant = NonNullable<Variants['variant']>;
-type VariantIcon = Exclude<Variant, 'default'>;
-
-type Props = {
-  id: string | number;
-  title: ReactNode;
-  icon?: ReactNode;
-  description?: ReactNode;
-  action?: Action;
-  loading?: boolean;
-  duration?: number;
-  // offset?: number;
-} & Variants;
-
-const DEFAULT_VARIANT_ICON: Record<VariantIcon, ReactNode> = {
-  error: <AlertTriangle />,
-  info: <Info />,
-  success: <CircleCheck />,
-  warning: <AlertCircle />,
-};
-
-export const ToastRoot = ({
-  id,
-  title,
-  description,
-  action,
-  duration = Infinity,
-  variant = 'info',
-  loading = false,
-  icon: iconProp,
-}: Props) => {
-  const icon: ReactNode = (() => {
-    if (loading) return <Loader2 className="tw-animate-spin" />;
-    if (iconProp) return renderLegacyIcon(iconProp);
-    if (variant === 'default' || variant === null) return null;
-    return DEFAULT_VARIANT_ICON[variant];
-  })();
-
-  const handleActionClick: MouseEventHandler<HTMLButtonElement> = (event) => {
-    sonnerToast.dismiss(id);
-    action?.onClick(event);
-  };
-
-  return (
-    <div data-variant={variant} className={cn(variants({ variant }))}>
-      {icon && (
-        <span
-          data-slot="toast-icon"
-          className={cn(
-            'tw-inline-flex',
-            'tw-items-center',
-            'tw-justify-center',
-            // styles — container at 20px with no padding so the 20px Lucide
-            // glyph fills the slot (previous tw-size-4 + tw-p-1 clipped a
-            // 16px child into 8px of visible space)
-            'tw-aspect-square',
-            'tw-size-5',
-            'tw-shrink-0',
-            '[&_svg:not([class*="tw-size-"])]:tw-size-5',
-            'tw-text-white',
-            'group-data-[variant=default]/toast:tw-text-popover-foreground',
-          )}
-        >
-          {icon}
-        </span>
-      )}
-
-      <ToastTitle>{title}</ToastTitle>
-      {description && <ToastDescription>{description}</ToastDescription>}
-      {action && (
-        <ToastAction style={action?.actionButtonStyle} onClick={handleActionClick}>
-          {action.label}
-        </ToastAction>
-      )}
-      <ToastDismiss onClick={() => sonnerToast.dismiss(id)} />
-      {duration !== Infinity && <ToastDuration duration={duration} />}
-    </div>
-  );
-};