@keboola/design 2.0.0 → 2.1.0

package/src/components/Skeleton/Skeleton.stories.tsx

@@ -1,106 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Skeleton } from './Skeleton';
-
-type Story = StoryObj<typeof Skeleton>;
-
-export default {
-  component: Skeleton,
-} as Meta<typeof Skeleton>;
-
-export const Single: Story = {};
-
-export const Multiple: Story = {
-  render: (props) => {
-    return (
-      <div className="tw-flex tw-flex-col tw-gap-2">
-        <Skeleton {...props} />
-      </div>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'When using `count` prop, the styling of spaces is up to developer.',
-      },
-    },
-  },
-  args: {
-    className: 'tw-w-36',
-    count: 5,
-  },
-};
-
-export const Group: Story = {
-  render: (props) => {
-    return (
-      <div className="tw-flex tw-flex-col tw-gap-4">
-        <div className="tw-flex tw-items-center tw-gap-2">
-          <Skeleton height="2xl" className="tw-w-12 tw-rounded-full" />
-          <div className="tw-flex tw-flex-col tw-gap-2">
-            <Skeleton height="xs" className="tw-w-40" {...props} />
-            <Skeleton height="xxs" className="tw-w-20" {...props} />
-          </div>
-        </div>
-
-        <div className="tw-flex tw-flex-col tw-gap-2">
-          <Skeleton height="xxs" className="tw-w-full" {...props} />
-          <Skeleton height="xxs" className="tw-w-28" {...props} />
-          <Skeleton height="md" className="tw-mt-4 tw-w-52" {...props} />
-        </div>
-      </div>
-    );
-  },
-};
-
-export const BoxLoader: Story = {
-  render: () => (
-    <div className="tw-rounded-md tw-border tw-border-border tw-bg-background tw-p-4">
-      <Skeleton height="lg" className="tw-w-full" />
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Box-shaped section placeholder — replaces the legacy `BoxLoader` card.',
-      },
-    },
-  },
-};
-
-export const ActionLoader: Story = {
-  render: () => (
-    <div className="tw-flex tw-gap-2">
-      <Skeleton height="lg" className="tw-w-24 tw-rounded-md" />
-      <Skeleton height="lg" className="tw-w-32 tw-rounded-md" />
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Button-shaped placeholder for action rows — replaces the legacy `ActionLoader`.',
-      },
-    },
-  },
-};
-
-export const ListOfRows: Story = {
-  render: () => (
-    <div className="tw-flex tw-flex-col tw-gap-3">
-      <Skeleton height="sm" className="tw-w-1/2" />
-      <Skeleton height="xs" className="tw-w-full" />
-      <Skeleton height="xs" className="tw-w-5/6" />
-      <Skeleton height="xs" className="tw-w-4/5" />
-      <Skeleton height="xs" className="tw-w-3/4" />
-      <Skeleton height="xs" className="tw-w-5/6" />
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Page-loading placeholder — heading + stacked rows. Replaces the legacy `CustomLoader`.',
-      },
-    },
-  },
-};

package/src/components/Skeleton/Skeleton.tsx

@@ -1,77 +0,0 @@
-import { useId } from 'react';
-
-import { cn } from '../../utils';
-
-export type Height = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-
-/**
- * Props for `Skeleton`. `height` maps to the named token (xxs 12px → 2xl 48px); `count` renders multiple
- * stacked placeholders sharing the same shape.
- */
-type SkeletonProps = {
-  /** Named height token — `xxs` (12px) through `2xl` (48px). */
-  height?: Height;
-  className?: string;
-  /** Number of stacked placeholder rows. Use for list-style loading states. */
-  count?: number;
-};
-
-const HEIGHT_CLASS_NAME: Record<Height, string> = {
-  xxs: 'tw-h-3 tw-rounded',
-  xs: 'tw-h-4 tw-rounded',
-  sm: 'tw-h-5 tw-rounded',
-  md: 'tw-h-6 tw-rounded-md',
-  lg: 'tw-h-8 tw-rounded-lg',
-  xl: 'tw-h-10 tw-rounded-lg',
-  '2xl': 'tw-h-12 tw-rounded-lg',
-};
-
-const ANIMATION_CLASS_NAME = cn(
-  // base styles
-  'tw-relative',
-  'tw-overflow-hidden',
-  'tw-pointer-events-none',
-  'tw-bg-neutral-150',
-
-  // before
-  'before:tw-content-[""]',
-  'before:tw-opacity-100',
-  'before:tw-absolute',
-  'before:tw-inset-0',
-  'before:-tw-translate-x-full',
-  'before:tw-animate-[shimmer_2s_infinite]',
-  'before:tw-bg-gradient-to-r',
-  'before:tw-from-transparent',
-  'before:tw-to-transparent',
-  'before:tw-via-neutral-50',
-);
-
-/**
- * Animated placeholder shown in place of content that is still loading.
- *
- * **When to use:** during initial page or section load while the real content is fetched. Match the
- * placeholder shape to the eventual content (one `Skeleton height="lg"` per title row, several `xs` for
- * paragraph lines). For list shells use `count` to render N stacked placeholders.
- * **When NOT to use:** for indeterminate background work without a layout slot use `DotsLoader` or
- * `Button isLoading`; for empty / error states once the request resolves use `EmptyState` / `ErrorState`.
- * **Composition:** drop directly into the slot the real content will occupy. `SkeletonList` is the typical
- * shell for `Table` / `Card`-list pages.
- *
- * @see RECIPES.md#data-card-with-skeleton — for a loading card pattern
- */
-export const Skeleton = ({ height = 'md', className, count = 1 }: SkeletonProps) => {
-  const prefixId = useId();
-  const keys = Array.from({ length: count }, (_, i) => `${prefixId}-${i}`);
-
-  return (
-    <>
-      {keys.map((key) => (
-        <div
-          key={key}
-          data-skeleton="true"
-          className={cn(HEIGHT_CLASS_NAME[height], ANIMATION_CLASS_NAME, className)}
-        />
-      ))}
-    </>
-  );
-};

package/src/components/Skeleton/SkeletonList.stories.tsx

@@ -1,11 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { SkeletonList } from './SkeletonList';
-
-type Story = StoryObj<typeof SkeletonList>;
-
-export default {
-  component: SkeletonList,
-} as Meta<typeof SkeletonList>;
-
-export const List: Story = {};

package/src/components/Skeleton/SkeletonList.tsx

@@ -1,65 +0,0 @@
-import { cn } from '../../utils';
-
-import type { Height } from './Skeleton';
-import { Skeleton } from './Skeleton';
-
-const duplicateArray = (arr: string[], times: number) => {
-  return Array(times).fill(arr).flat();
-};
-
-const Item = ({
-  className,
-  iconHeight = 'md',
-  rowHeight = 'sm',
-  iconClassName = 'tw-w-6 ',
-}: {
-  className: string;
-  iconHeight?: Height;
-  rowHeight?: Height;
-  iconClassName?: string;
-}) => (
-  <div className="tw-flex tw-items-center tw-gap-3">
-    <Skeleton height={iconHeight} className={cn('tw-rounded-full tw-shrink-0', iconClassName)} />
-    <Skeleton height={rowHeight} className={className} />
-  </div>
-);
-
-export const SkeletonList = ({
-  hasHeading = false,
-  groups = 3,
-  className,
-  iconHeight = 'md',
-  rowHeight = 'sm',
-  iconClassName,
-}: {
-  hasHeading?: boolean;
-  groups?: number;
-  className?: string;
-  iconHeight?: Height;
-  rowHeight?: Height;
-  iconClassName?: string;
-}) => (
-  <div className={cn('tw-flex tw-flex-col tw-gap-4', className)}>
-    {hasHeading ? <Skeleton height="xxs" className="tw-w-28" /> : null}
-
-    <div
-      className={cn(
-        'tw-flex tw-flex-col',
-        ['xxs', 'xs'].includes(rowHeight) ? 'tw-gap-3' : 'tw-gap-4',
-      )}
-    >
-      {duplicateArray(['tw-w-5/6', 'tw-w-3/4', 'tw-w-4/5', 'tw-w-2/3'], groups).map(
-        (className, index) => (
-          <Item
-            // oxlint-disable-next-line react/no-array-index-key
-            key={`${className}-${index}`}
-            iconHeight={iconHeight}
-            rowHeight={rowHeight}
-            iconClassName={iconClassName}
-            className={className}
-          />
-        ),
-      )}
-    </div>
-  </div>
-);

package/src/components/Slider/Slider.stories.tsx

@@ -1,99 +0,0 @@
-import { useId, useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Label } from '../Label';
-
-import { Slider } from './Slider';
-
-export default {
-  component: Slider,
-  args: {
-    defaultValue: [50],
-    min: 0,
-    max: 100,
-    step: 1,
-    disabled: false,
-  },
-} satisfies Meta<typeof Slider>;
-
-type Story = StoryObj<typeof Slider>;
-
-export const Default: Story = {};
-
-export const Range: Story = {
-  args: {
-    defaultValue: [25, 75],
-  },
-};
-
-export const Steps: Story = {
-  args: {
-    defaultValue: [40],
-    step: 10,
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-};
-
-export const WithTooltip: Story = {
-  args: {
-    defaultValue: [40],
-    thumbTooltip: (v) => v,
-  },
-};
-
-export const WithTooltipRangeFormatted: Story = {
-  args: {
-    defaultValue: [25, 75],
-    thumbTooltip: (v) => `${v}°`,
-  },
-};
-
-export const WithTooltipPerIndex: Story = {
-  args: {
-    defaultValue: [20, 80],
-    thumbTooltip: (v, i) => (i === 0 ? `from ${v}°` : `to ${v}°`),
-  },
-};
-
-export const WithTooltipSideBottom: Story = {
-  args: {
-    defaultValue: [50],
-    thumbTooltip: (v) => `${v}°`,
-    thumbTooltipSide: 'bottom',
-  },
-};
-
-export const Vertical: Story = {
-  args: {
-    orientation: 'vertical',
-    defaultValue: [50],
-  },
-  render: (props) => (
-    <div className="tw-h-64">
-      <Slider {...props} />
-    </div>
-  ),
-};
-
-export const Controlled: Story = {
-  render: (props) => {
-    const id = useId();
-    const [value, setValue] = useState([25, 75]);
-    return (
-      <div className="tw-flex tw-flex-col tw-gap-2">
-        <div className="tw-flex tw-items-center tw-justify-between">
-          <Label htmlFor={id}>Temperature</Label>
-          <span className="tw-text-sm tw-tabular-nums tw-text-muted-foreground">
-            {value.map((v) => `${v}°`).join(' – ')}
-          </span>
-        </div>
-        <Slider {...props} id={id} value={value} onValueChange={setValue} />
-      </div>
-    );
-  },
-};

package/src/components/Slider/Slider.tsx

@@ -1,85 +0,0 @@
-import { useState } from 'react';
-import type { ComponentProps, ElementRef, ReactNode, Ref } from 'react';
-import { Root } from '@radix-ui/react-slider';
-
-import { cn } from '../../utils';
-import { TooltipProvider } from '../Tooltip';
-
-import { SliderThumb } from './SliderThumb';
-import { SliderTrack } from './SliderTrack';
-
-export type ThumbTooltipFn = (value: number, index: number) => ReactNode;
-
-type Props = ComponentProps<typeof Root> & {
-  thumbTooltip?: ThumbTooltipFn;
-  thumbTooltipSide?: ComponentProps<typeof SliderThumb>['tooltipSide'];
-  rangeClassName?: string;
-};
-
-export const Slider = ({
-  ref,
-  className,
-  value,
-  defaultValue,
-  min = 0,
-  max = 100,
-  onValueChange,
-  thumbTooltip,
-  thumbTooltipSide,
-  rangeClassName,
-  ...rest
-}: Props & { ref?: Ref<ElementRef<typeof Root>> }) => {
-  const isControlled = Array.isArray(value);
-
-  const [internalValues, setInternalValues] = useState<number[]>(() => {
-    if (isControlled) return value;
-    if (Array.isArray(defaultValue)) return defaultValue;
-    return [min];
-  });
-
-  const liveValues = isControlled ? value : internalValues;
-
-  const handleValueChange = (next: number[]) => {
-    if (!isControlled) setInternalValues(next);
-    onValueChange?.(next);
-  };
-
-  const body = (
-    <Root
-      ref={ref}
-      value={liveValues}
-      min={min}
-      max={max}
-      onValueChange={handleValueChange}
-      className={cn(
-        'tw-relative',
-        'tw-flex',
-        'tw-items-center',
-        'tw-w-full',
-
-        'tw-touch-none',
-        'tw-select-none',
-
-        'data-[orientation=vertical]:tw-h-full',
-        'data-[orientation=vertical]:tw-w-auto',
-        'data-[orientation=vertical]:tw-flex-col',
-
-        'data-[disabled]:tw-opacity-50',
-        className,
-      )}
-      {...rest}
-    >
-      <SliderTrack className={rangeClassName} />
-      {liveValues.map((thumbValue, index) => (
-        <SliderThumb
-          // oxlint-disable-next-line react/no-array-index-key
-          key={index}
-          tooltip={thumbTooltip?.(thumbValue, index)}
-          tooltipSide={thumbTooltipSide}
-        />
-      ))}
-    </Root>
-  );
-
-  return thumbTooltip ? <TooltipProvider>{body}</TooltipProvider> : body;
-};

package/src/components/Slider/SliderThumb.tsx

@@ -1,57 +0,0 @@
-import type { ComponentProps, ElementRef, ReactNode, Ref } from 'react';
-import { Thumb as RadixThumb } from '@radix-ui/react-slider';
-
-import { cn, mergeRefs } from '../../utils';
-import { argoVariants } from '../Button';
-import { Tooltip } from '../Tooltip';
-
-import { useInteracting } from './useInteracting';
-
-type Props = ComponentProps<typeof RadixThumb> & {
-  tooltip?: ReactNode;
-  tooltipSide?: ComponentProps<typeof Tooltip.Content>['placement'];
-};
-
-export const SliderThumb = ({
-  ref: forwardedRef,
-  className,
-  tooltip,
-  tooltipSide = 'top',
-  ...props
-}: Props & { ref?: Ref<ElementRef<typeof RadixThumb>> }) => {
-  const [isInteracting, interactingRef] = useInteracting();
-
-  const thumb = (
-    <RadixThumb
-      ref={mergeRefs(forwardedRef ?? null, interactingRef)}
-      className={cn(
-        argoVariants({ variant: 'outline', size: 'icon-sm' }),
-
-        // layout
-        'tw-p-0',
-        'active:tw-opacity-100',
-        'tw-block',
-        'tw-size-4',
-        'tw-rounded-full',
-
-        // cursors
-        'data-[disabled]:tw-cursor-not-allowed',
-        '[&:not([data-disabled])]:tw-cursor-pointer',
-
-        className,
-      )}
-      {...props}
-    />
-  );
-
-  if (tooltip == null) return thumb;
-
-  return (
-    <Tooltip.Root open={isInteracting}>
-      <Tooltip.Trigger asChild>{thumb}</Tooltip.Trigger>
-      <Tooltip.Content variant="action" placement={tooltipSide}>
-        {tooltip}
-      </Tooltip.Content>
-    </Tooltip.Root>
-  );
-};

package/src/components/Slider/SliderTrack.tsx

@@ -1,49 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-import { Range as RadixRange, Track as RadixTrack } from '@radix-ui/react-slider';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<typeof RadixTrack> & { rangeClassName?: string };
-
-export const SliderTrack = ({
-  ref,
-  className,
-  ...props
-}: Props & { ref?: Ref<ElementRef<typeof RadixTrack>> }) => (
-  <RadixTrack
-    ref={ref}
-    className={cn(
-      // layout
-      'tw-relative',
-      'tw-grow',
-      'tw-w-full',
-      'tw-h-1.5',
-      'tw-overflow-hidden',
-
-      // style
-      'tw-rounded-full',
-      'tw-bg-muted',
-
-      // vertical orientation
-      'data-[orientation=vertical]:tw-h-full',
-      'data-[orientation=vertical]:tw-w-1.5',
-    )}
-    {...props}
-  >
-    <RadixRange
-      className={cn(
-        // layout
-        'tw-absolute',
-        'tw-h-full',
-
-        // style
-        'tw-bg-primary',
-
-        // vertical orientation
-        'data-[orientation=vertical]:tw-w-full',
-
-        className,
-      )}
-    />
-  </RadixTrack>
-);

package/src/components/Slider/index.ts

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