@keboola/design 1.0.0

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

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

package/src/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,54 @@
+import { useId } from 'react';
+
+import { cn } from '../../utils';
+
+export type Height = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+type SkeletonProps = {
+  height?: Height;
+  className?: string;
+  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',
+);
+
+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} className={cn(HEIGHT_CLASS_NAME[height], ANIMATION_CLASS_NAME, className)} />
+      ))}
+    </>
+  );
+};

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

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

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

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

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

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

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

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

package/src/components/Slider/useInteracting.test.ts

@@ -0,0 +1,159 @@
+import { act, renderHook } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+import { useInteracting } from './useInteracting';
+
+const fire = (element: Element, type: string) =>
+  act(() => {
+    element.dispatchEvent(new Event(type, { bubbles: false }));
+  });
+
+describe('useInteracting', () => {
+  let element: HTMLDivElement;
+
+  beforeEach(() => {
+    element = document.createElement('div');
+    document.body.appendChild(element);
+  });
+
+  afterEach(() => {
+    element.remove();
+  });
+
+  it('is false before any interaction', () => {
+    const { result } = renderHook(() => useInteracting());
+    const [isInteracting, setRef] = result.current;
+
+    act(() => setRef(element));
+
+    expect(isInteracting).toBe(false);
+    expect(result.current[0]).toBe(false);
+  });
+
+  describe('single signals', () => {
+    it('tracks pointerenter / pointerleave', () => {
+      const { result } = renderHook(() => useInteracting());
+      act(() => result.current[1](element));
+
+      fire(element, 'pointerenter');
+      expect(result.current[0]).toBe(true);
+
+      fire(element, 'pointerleave');
+      expect(result.current[0]).toBe(false);
+    });
+
+    it('tracks focus / blur', () => {
+      const { result } = renderHook(() => useInteracting());
+      act(() => result.current[1](element));
+
+      fire(element, 'focus');
+      expect(result.current[0]).toBe(true);
+
+      fire(element, 'blur');
+      expect(result.current[0]).toBe(false);
+    });
+
+    it('tracks pointerdown / pointerup', () => {
+      const { result } = renderHook(() => useInteracting());
+      act(() => result.current[1](element));
+
+      fire(element, 'pointerdown');
+      expect(result.current[0]).toBe(true);
+
+      fire(element, 'pointerup');
+      expect(result.current[0]).toBe(false);
+    });
+
+    it('tracks pointerdown / pointercancel', () => {
+      const { result } = renderHook(() => useInteracting());
+      act(() => result.current[1](element));
+
+      fire(element, 'pointerdown');
+      expect(result.current[0]).toBe(true);
+
+      fire(element, 'pointercancel');
+      expect(result.current[0]).toBe(false);
+    });
+  });
+
+  describe('signal union', () => {
+    it('stays true when press continues after pointerleave (drag case)', () => {
+      const { result } = renderHook(() => useInteracting());
+      act(() => result.current[1](element));
+
+      fire(element, 'pointerenter');
+      fire(element, 'pointerdown');
+      expect(result.current[0]).toBe(true);
+
+      // Pointer drags outside the thumb — hover ends, press continues.
+      fire(element, 'pointerleave');
+      expect(result.current[0]).toBe(true);
+
+      fire(element, 'pointerup');
+      expect(result.current[0]).toBe(false);
+    });
+
+    it('stays true when focus continues after pointerup', () => {
+      const { result } = renderHook(() => useInteracting());
+      act(() => result.current[1](element));
+
+      fire(element, 'focus');
+      fire(element, 'pointerdown');
+      expect(result.current[0]).toBe(true);
+
+      fire(element, 'pointerup');
+      expect(result.current[0]).toBe(true);
+
+      fire(element, 'blur');
+      expect(result.current[0]).toBe(false);
+    });
+  });
+
+  describe('callback ref lifecycle', () => {
+    it('detaches listeners when attached to a different element', () => {
+      const { result } = renderHook(() => useInteracting());
+      act(() => result.current[1](element));
+
+      const replacement = document.createElement('div');
+      document.body.appendChild(replacement);
+      try {
+        act(() => result.current[1](replacement));
+
+        // Events on the previous element must no longer affect state.
+        fire(element, 'pointerenter');
+        expect(result.current[0]).toBe(false);
+
+        // But events on the current element do.
+        fire(replacement, 'pointerenter');
+        expect(result.current[0]).toBe(true);
+      } finally {
+        replacement.remove();
+      }
+    });
+
+    it('detaches cleanly when ref is cleared with null', () => {
+      const { result } = renderHook(() => useInteracting());
+      act(() => result.current[1](element));
+
+      fire(element, 'pointerenter');
+      expect(result.current[0]).toBe(true);
+
+      act(() => result.current[1](null));
+
+      // isInteracting is left as-is; that's fine — the ref is detached so no
+      // further events can change it.
+      fire(element, 'pointerleave');
+      fire(element, 'pointerdown');
+      expect(result.current[0]).toBe(true); // state frozen at detach time
+    });
+  });
+
+  it('returns a stable setRef across re-renders', () => {
+    const { result, rerender } = renderHook(() => useInteracting());
+    const firstSetRef = result.current[1];
+
+    rerender();
+
+    expect(result.current[1]).toBe(firstSetRef);
+  });
+});