@keboola/design 2.0.0 → 2.1.0

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

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

package/src/components/Slider/useInteracting.ts

@@ -1,64 +0,0 @@
-import { useCallback, useRef, useState } from 'react';
-
-type InteractingRef = (element: HTMLElement | null) => void;
-
-export const useInteracting = (): readonly [boolean, InteractingRef] => {
-  const [isInteracting, setIsInteracting] = useState(false);
-  const cleanupRef = useRef<(() => void) | null>(null);
-
-  const setRef = useCallback<InteractingRef>((element) => {
-    cleanupRef.current?.();
-    cleanupRef.current = null;
-    if (!element) return;
-
-    let hover = false;
-    let focus = false;
-    let press = false;
-    const recompute = () => setIsInteracting(hover || focus || press);
-
-    const handleEnter = () => {
-      hover = true;
-      recompute();
-    };
-    const handleLeave = () => {
-      hover = false;
-      recompute();
-    };
-    const handleFocus = () => {
-      focus = true;
-      recompute();
-    };
-    const handleBlur = () => {
-      focus = false;
-      recompute();
-    };
-    const handleDown = () => {
-      press = true;
-      recompute();
-    };
-    const handleRelease = () => {
-      press = false;
-      recompute();
-    };
-
-    element.addEventListener('pointerenter', handleEnter);
-    element.addEventListener('pointerleave', handleLeave);
-    element.addEventListener('focus', handleFocus);
-    element.addEventListener('blur', handleBlur);
-    element.addEventListener('pointerdown', handleDown);
-    element.addEventListener('pointerup', handleRelease);
-    element.addEventListener('pointercancel', handleRelease);
-
-    cleanupRef.current = () => {
-      element.removeEventListener('pointerenter', handleEnter);
-      element.removeEventListener('pointerleave', handleLeave);
-      element.removeEventListener('focus', handleFocus);
-      element.removeEventListener('blur', handleBlur);
-      element.removeEventListener('pointerdown', handleDown);
-      element.removeEventListener('pointerup', handleRelease);
-      element.removeEventListener('pointercancel', handleRelease);
-    };
-  }, []);
-
-  return [isInteracting, setRef] as const;
-};

package/src/components/Switch/Switch.stories.tsx

@@ -1,177 +0,0 @@
-import { useState } from 'react';
-import type { ComponentProps } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Tooltip, TooltipProvider } from '../Tooltip';
-
-import { Switch } from './Switch';
-
-type Story = StoryObj<typeof Switch>;
-
-type SwitchProps = ComponentProps<typeof Switch>;
-type Size = NonNullable<SwitchProps['size']>;
-
-const sizes: Size[] = ['small', 'medium', 'large'];
-
-export default {
-  component: Switch,
-  args: {
-    size: 'medium',
-    disabled: false,
-  },
-  argTypes: {
-    children: { control: { type: 'text' } },
-    size: {
-      type: { name: 'enum', value: sizes },
-    },
-  },
-} satisfies Meta<typeof Switch>;
-
-export const Default: Story = {
-  args: {
-    children: 'Label',
-  },
-};
-
-export const WithCustomLabel: Story = {
-  render: (props) => (
-    <Switch {...props} id="wifi">
-      <span className="tw-text-error-500">Custom label</span>
-    </Switch>
-  ),
-};
-
-export const WithTooltip: Story = {
-  render: (props) => (
-    <TooltipProvider>
-      <Tooltip triggerAsChild tooltip="Hello">
-        <Switch {...props} id="wifi">
-          Label
-        </Switch>
-      </Tooltip>
-    </TooltipProvider>
-  ),
-};
-
-export const Argo: Story = {
-  args: {
-    argo: true,
-    children: 'Airplane Mode',
-    description: '',
-    variant: 'default',
-    position: 'start',
-  },
-  argTypes: {
-    description: { control: { type: 'text' } },
-    variant: { control: { type: 'select' }, options: ['default', 'boxed'] },
-    position: { control: { type: 'select' }, options: ['start', 'end'] },
-  },
-};
-
-export const ArgoDisabled: Story = {
-  name: 'Argo / Disabled',
-  render: () => (
-    <div className="tw-flex tw-flex-col tw-gap-4">
-      <Switch argo disabled>
-        Disabled off
-      </Switch>
-      <Switch argo disabled checked>
-        Disabled on
-      </Switch>
-    </div>
-  ),
-};
-
-export const ArgoControlled: Story = {
-  name: 'Argo / Controlled',
-  render: () => {
-    const [checked, setChecked] = useState(false);
-    return (
-      <Switch
-        argo
-        checked={checked}
-        onCheckedChange={setChecked}
-        description="Click to toggle the switch state."
-      >
-        Controlled switch
-      </Switch>
-    );
-  },
-};
-
-export const ArgoAllStates: Story = {
-  name: 'Argo / All States',
-  render: () => (
-    <div className="tw-flex tw-flex-col tw-gap-8">
-      <div>
-        <h3 className="tw-mb-3 tw-text-sm tw-font-medium">Default</h3>
-        <div className="tw-flex tw-flex-col tw-gap-3">
-          <Switch argo description="Switch is off">
-            Off
-          </Switch>
-          <Switch argo checked description="Switch is on">
-            On
-          </Switch>
-        </div>
-      </div>
-
-      <div>
-        <h3 className="tw-mb-3 tw-text-sm tw-font-medium">Disabled</h3>
-        <div className="tw-flex tw-flex-col tw-gap-3">
-          <Switch argo disabled description="Disabled off">
-            Off
-          </Switch>
-          <Switch argo disabled checked description="Disabled on">
-            On
-          </Switch>
-        </div>
-      </div>
-
-      <div>
-        <h3 className="tw-mb-3 tw-text-sm tw-font-medium">Position End</h3>
-        <div className="tw-flex tw-flex-col tw-gap-3">
-          <Switch argo position="end" description="Switch on the right">
-            Off
-          </Switch>
-          <Switch argo checked position="end" description="Switch on the right">
-            On
-          </Switch>
-        </div>
-      </div>
-
-      <div>
-        <h3 className="tw-mb-3 tw-text-sm tw-font-medium">Boxed</h3>
-        <div className="tw-flex tw-flex-col tw-gap-3">
-          <Switch argo variant="boxed" description="Boxed off">
-            Off
-          </Switch>
-          <Switch argo checked variant="boxed" description="Boxed on">
-            On
-          </Switch>
-        </div>
-      </div>
-
-      <div>
-        <h3 className="tw-mb-3 tw-text-sm tw-font-medium">Boxed + Position End</h3>
-        <div className="tw-flex tw-flex-col tw-gap-3">
-          <Switch argo variant="boxed" position="end" description="Boxed end off">
-            Off
-          </Switch>
-          <Switch argo checked variant="boxed" position="end" description="Boxed end on">
-            On
-          </Switch>
-        </div>
-      </div>
-
-      <div>
-        <h3 className="tw-mb-3 tw-text-sm tw-font-medium">Standalone (no label)</h3>
-        <div className="tw-flex tw-gap-4">
-          <Switch argo />
-          <Switch argo checked />
-          <Switch argo disabled />
-          <Switch argo disabled checked />
-        </div>
-      </div>
-    </div>
-  ),
-};

package/src/components/Switch/Switch.tsx

@@ -1,58 +0,0 @@
-import { useId } from 'react';
-import type { ComponentProps, ElementRef, ReactNode, Ref } from 'react';
-import { Root, Thumb } from '@radix-ui/react-switch';
-import type { VariantProps } from 'class-variance-authority';
-
-import { FieldBox } from '../FieldBox';
-import type { fieldBoxVariants } from '../FieldBox/styles';
-
-import { switchVariants, thumbVariants } from './styles';
-
-type Props = {
-  id?: string | number;
-  children?: ReactNode;
-  argo?: boolean;
-  description?: ReactNode;
-  variant?: VariantProps<typeof fieldBoxVariants>['variant'];
-  position?: 'start' | 'end';
-} & Omit<ComponentProps<typeof Root>, 'asChild' | 'id'> &
-  Omit<VariantProps<typeof switchVariants>, 'variant'>;
-
-export const Switch = ({
-  ref,
-  className,
-  size,
-  disabled = false,
-  id: idProp,
-  children,
-  argo = false,
-  description,
-  variant,
-  position,
-  ...props
-}: Props & { ref?: Ref<ElementRef<'button'>> }) => {
-  const fallbackId = useId();
-  const id = idProp?.toString() ?? fallbackId;
-  const switchVariant = argo ? 'argo' : 'default';
-
-  const switchElement = (
-    <Root
-      {...props}
-      ref={ref}
-      id={id}
-      disabled={disabled}
-      className={switchVariants({ className, size, variant: switchVariant })}
-    >
-      <Thumb className={thumbVariants({ size, variant: switchVariant })} />
-    </Root>
-  );
-
-  if (!children) return switchElement;
-
-  return (
-    <FieldBox htmlFor={id} variant={variant} position={position} control={switchElement}>
-      <FieldBox.Title>{children}</FieldBox.Title>
-      {description && <FieldBox.Description>{description}</FieldBox.Description>}
-    </FieldBox>
-  );
-};

package/src/components/Switch/index.ts

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

package/src/components/Switch/styles.ts

@@ -1,173 +0,0 @@
-import { cva } from 'class-variance-authority';
-
-export const switchVariants = cva(
-  [
-    'tailwindcss-preflight',
-    'tw-shrink-0',
-    'tw-cursor-pointer',
-    'disabled:tw-cursor-not-allowed',
-    'disabled:tw-opacity-50',
-  ],
-  {
-    defaultVariants: {
-      size: 'medium',
-      variant: 'default',
-    },
-    variants: {
-      variant: {
-        default: [
-          'tw-peer/switch',
-          'tw-group/switch',
-          'tw-relative',
-
-          // positioning
-          'tw-flex',
-          'tw-items-center',
-          'tw-gap-2',
-
-          'tw-min-h-5',
-
-          // label
-          'tw-text-neutral-800',
-          'tw-font-normal',
-
-          // before pseudo element
-          'before:tw-content-[" "]',
-          'before:tw-block',
-          'before:tw-relative',
-
-          // color
-          'aria-checked:before:tw-bg-primary-500',
-          'before:tw-bg-neutral-200',
-
-          // hover
-          'aria-checked:before:hover:tw-bg-primary-600',
-          'before:hover:tw-bg-neutral-300',
-
-          // disabled
-          'before:disabled:hover:tw-bg-neutral-200',
-
-          // others
-          'tw-transition-colors',
-
-          'focus-visible:tw-outline-none',
-          'before:focus-visible:tw-outline',
-          'before:focus-visible:tw-outline-1',
-          'before:focus-visible:tw-outline-secondary-500',
-          'before:focus-visible:tw-ring-4',
-          'before:focus-visible:tw-ring-secondary-200',
-        ],
-        argo: [
-          'tw-peer',
-          'tw-inline-flex',
-          'tw-items-center',
-
-          // track
-          'tw-w-9',
-          'tw-h-5',
-          'tw-rounded-full',
-          'tw-border',
-          'tw-border-transparent',
-          'tw-bg-input',
-          'tw-transition-colors',
-
-          // checked
-          'data-[state=checked]:tw-bg-primary',
-
-          // focus
-          'focus-visible:tw-outline-none',
-          'focus-visible:tw-border-primary',
-          'focus-visible:tw-ring-3',
-          'focus-visible:tw-ring-primary/50',
-        ],
-      },
-      size: {
-        small: [],
-        medium: [],
-        large: [],
-      },
-    },
-    compoundVariants: [
-      {
-        variant: 'default',
-        size: 'small',
-        class: ['before:tw-w-6', 'before:tw-h-4', 'before:tw-rounded-lg'],
-      },
-      {
-        variant: 'default',
-        size: 'medium',
-        class: ['before:tw-w-8', 'before:tw-h-4', 'before:tw-rounded-lg'],
-      },
-      {
-        variant: 'default',
-        size: 'large',
-        class: ['before:tw-w-10', 'before:tw-h-5', 'before:tw-rounded-xl'],
-      },
-    ],
-  },
-);
-
-export const thumbVariants = cva(
-  ['tw-block', 'tw-shrink-0', 'tw-pointer-events-none', 'tw-bg-white', 'tw-rounded-full'],
-  {
-    defaultVariants: {
-      size: 'medium',
-      variant: 'default',
-    },
-    variants: {
-      variant: {
-        default: [
-          'tw-absolute',
-          'tw-left-0',
-          'tw-transition-transform',
-          'tw-ease-in-out',
-          'tw-shadow-[0_2px_5px_rgba(0,0,0,.26)]',
-        ],
-        argo: [
-          'tw-size-4',
-          'tw-shadow-sm',
-          'tw-transition-transform',
-          'data-[state=checked]:tw-translate-x-[16px]',
-          'data-[state=unchecked]:tw-translate-x-0.5',
-        ],
-      },
-      size: {
-        small: [],
-        medium: [],
-        large: [],
-      },
-    },
-    compoundVariants: [
-      {
-        variant: 'default',
-        size: 'small',
-        class: [
-          'tw-w-3',
-          'tw-h-3',
-          'data-[state=checked]:tw-translate-x-2.5',
-          'data-[state=unchecked]:tw-translate-x-0.5',
-        ],
-      },
-      {
-        variant: 'default',
-        size: 'medium',
-        class: [
-          'tw-w-3',
-          'tw-h-3',
-          'data-[state=checked]:tw-translate-x-[18px]',
-          'data-[state=unchecked]:tw-translate-x-0.5',
-        ],
-      },
-      {
-        variant: 'default',
-        size: 'large',
-        class: [
-          'tw-w-3.5',
-          'tw-h-3.5',
-          'data-[state=checked]:tw-translate-x-6',
-          'data-[state=unchecked]:tw-translate-x-0.5',
-        ],
-      },
-    ],
-  },
-);