@keboola/design 2.0.0 → 2.1.0

package/src/components/Calendar/Calendar.tsx

@@ -1,44 +0,0 @@
-import type { PropsBase, PropsRange, PropsSingle } from 'react-day-picker';
-import { DayPicker, getDefaultClassNames } from 'react-day-picker';
-
-import { cn } from '../../utils';
-import 'react-day-picker/src/style.css';
-
-export type CalendarProps = Omit<PropsBase, 'required' | 'captionLayout'> &
-  (PropsSingle | PropsRange);
-
-const dayPickerClassNames: CalendarProps['classNames'] = {
-  selected: `tw-bg-secondary-500 tw-border-secondary-500 tw-font-medium hover:tw-bg-secondary-600 hover:tw-border-secondary-600 tw-text-white tw-rounded`,
-};
-
-const rangePickerClassNames: CalendarProps['classNames'] = {
-  range_start: `tw-bg-secondary-500 tw-rounded-r-none tw-font-medium tw-border-secondary-500 hover:tw-bg-secondary-600 hover:tw-border-secondary-600 tw-text-white`,
-  range_end: `tw-bg-secondary-500 tw-rounded-l-none tw-font-medium tw-border-secondary-500 hover:tw-bg-secondary-600 hover:tw-border-secondary-600 tw-text-white`,
-  selected: `tw-font-medium tw-rounded`,
-  range_middle: `tw-bg-secondary-300 tw-border-secondary-300 tw-rounded-none tw-font-medium`,
-};
-
-export const Calendar = ({ className, classNames, ...props }: CalendarProps) => {
-  const defaultClassNames = getDefaultClassNames();
-
-  return (
-    <DayPicker
-      {...props}
-      captionLayout="dropdown"
-      className={cn(className, 'tw-p-3')}
-      classNames={{
-        chevron: `${defaultClassNames.chevron} tw-fill-secondary-500`,
-        day: `${defaultClassNames.day} hover:tw-bg-secondary-200 tw-rounded`,
-        day_button: `${defaultClassNames.day_button} tw-rounded`,
-        today: `tw-bg-secondary-100 tw-font-medium`,
-        ...dayPickerClassNames,
-        ...rangePickerClassNames,
-        selected: `${props.mode === 'range' ? rangePickerClassNames.selected : dayPickerClassNames.selected}`,
-        ...classNames,
-      }}
-      required={false}
-    />
-  );
-};
-
-Calendar.displayName = 'Calendar';

package/src/components/Calendar/index.ts

@@ -1,2 +0,0 @@
-export { Calendar } from './Calendar';
-export type { CalendarProps } from './Calendar';

package/src/components/Card/Card.stories.tsx

@@ -1,60 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Plus } from '../../icons';
-import { ButtonInline } from '../Button';
-
-import { Card } from './Card';
-
-type Story = StoryObj<typeof Card>;
-
-export default {
-  component: Card,
-  render: (props) => {
-    return (
-      <Card {...props}>
-        <Card.Header>
-          <Card.Title>Title</Card.Title>
-        </Card.Header>
-        <Card.Content>Content</Card.Content>
-      </Card>
-    );
-  },
-  args: {
-    padding: 'small',
-  },
-  globals: {
-    backgrounds: {
-      value: 'gray',
-    },
-  },
-} satisfies Meta<typeof Card>;
-
-export const Basic: Story = {};
-
-export const Bordered: Story = {
-  args: {
-    bordered: true,
-  },
-};
-
-export const WithActions: Story = {
-  render: (props) => {
-    return (
-      <Card {...props}>
-        <Card.Header className="tw-flex tw-justify-between">
-          <Card.Title>Secrets</Card.Title>
-          <ButtonInline color="dark">
-            <Plus className="tw-size-4" />
-            New Secret
-          </ButtonInline>
-        </Card.Header>
-
-        <Card.Content className="tw-text-neutral-400">
-          Manage sensitive secrets, like database credentials, in your Streamlit app with optional
-          encryption for added security. For detailed information, please refer to the
-          documentation.
-        </Card.Content>
-      </Card>
-    );
-  },
-};

package/src/components/Card/Card.tsx

@@ -1,42 +0,0 @@
-import type { HTMLAttributes } from 'react';
-import type { VariantProps } from 'class-variance-authority';
-
-import { CardContent } from './CardContent';
-import { CardHeader } from './CardHeader';
-import { CardTitle } from './CardTitle';
-import { cardClassnames } from './styles';
-
-/**
- * Props for `Card`. `padding` controls internal spacing; `bordered` adds a subtle border.
- * All standard `<div>` attributes pass through.
- */
-type Props = HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardClassnames>;
-
-/**
- * Semantic content surface — a panel with its own padding, optional border, and header / content slots.
- *
- * **When to use:** wrapping a conceptually-distinct chunk of content (a config section, a stats panel,
- * a list of heterogeneous items). Each `Card` is a self-contained surface inside `PageLayout.Content`.
- * **When NOT to use:** for tabular data use `Table`; for ad-hoc layout grids use Tailwind utility classes
- * directly; for empty / error placeholders use `EmptyState` / `ErrorState`.
- * **Composition:** nest `Card.Header` + `Card.Title` for the header row, then `Card.Content` for the body.
- * Multiple cards usually share a `tw-grid` or `tw-flex tw-flex-col tw-gap-4` parent.
- *
- * @see RECIPES.md#card-with-empty-state — for an empty card placeholder pattern
- * @see RECIPES.md#data-card-with-skeleton — for a loading card with `Skeleton` placeholders
- */
-export const Card = ({
-  children,
-  className,
-  bordered = false,
-  padding = 'small',
-  ...rest
-}: Props) => (
-  <div className={cardClassnames({ className, bordered, padding })} {...rest}>
-    {children}
-  </div>
-);
-
-Card.Header = CardHeader;
-Card.Content = CardContent;
-Card.Title = CardTitle;

package/src/components/Card/CardContent.tsx

@@ -1,5 +0,0 @@
-import type { HTMLAttributes } from 'react';
-
-type Props = HTMLAttributes<HTMLDivElement>;
-
-export const CardContent = ({ children, ...rest }: Props) => <div {...rest}>{children}</div>;

package/src/components/Card/CardHeader.tsx

@@ -1,5 +0,0 @@
-import type { HTMLAttributes } from 'react';
-
-type Props = HTMLAttributes<HTMLDivElement>;
-
-export const CardHeader = ({ children, ...rest }: Props) => <div {...rest}>{children}</div>;

package/src/components/Card/CardTitle.tsx

@@ -1,13 +0,0 @@
-import type { HTMLAttributes } from 'react';
-
-import { cn } from '../../utils';
-
-import { cardTitleClassnames } from './styles';
-
-type Props = HTMLAttributes<HTMLHeadingElement>;
-
-export const CardTitle = ({ children, className, ...rest }: Props) => (
-  <h3 className={cn(cardTitleClassnames, className)} {...rest}>
-    {children}
-  </h3>
-);

package/src/components/Card/index.ts

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

package/src/components/Card/styles.ts

@@ -1,32 +0,0 @@
-import { cva } from 'class-variance-authority';
-
-import { cn } from '../../utils';
-
-export const cardClassnames = cva(
-  ['tw-bg-white', 'tw-flex', 'tw-flex-col', 'tw-rounded-lg', 'tw-gap-4'],
-  {
-    defaultVariants: {
-      padding: 'small',
-    },
-    variants: {
-      bordered: {
-        true: 'tw-border tw-border-solid tw-border-neutral-200',
-        false: 'tw-shadow-[0_2px_6px_0_rgba(100,135,153,0.13)]',
-      },
-      padding: {
-        none: 'tw-p-0',
-        small: 'tw-px-6 tw-py-4',
-        medium: 'tw-p-7',
-        large: 'tw-p-8',
-      },
-    },
-  },
-);
-
-export const cardTitleClassnames = cn(
-  'tw-m-0',
-  'tw-leading-6',
-  'tw-font-medium',
-  'tw-text-base',
-  'tw-neutral-800',
-);

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -1,210 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Label } from '../Label';
-
-import { Checkbox } from './Checkbox';
-
-type Story = StoryObj<typeof Checkbox>;
-
-export default {
-  component: Checkbox,
-  args: {
-    disabled: false,
-  },
-  argTypes: {
-    children: { control: { type: 'text' } },
-    description: { control: { type: 'text' } },
-    variant: { control: { type: 'select' }, options: ['default', 'boxed'] },
-    position: { control: { type: 'select' }, options: ['start', 'end'] },
-  },
-} satisfies Meta<typeof Checkbox>;
-
-export const Default: Story = {
-  args: {
-    children: 'Label',
-  },
-};
-
-export const Indeterminate: Story = {
-  args: {
-    id: 'indeterminate-checkbox',
-    checked: 'indeterminate',
-  },
-};
-
-export const Controlled: Story = {
-  args: {
-    id: 'controlled-checkbox',
-    children: 'Controlled',
-  },
-  render: (props) => {
-    const [checked, setChecked] = useState<boolean | 'indeterminate'>(false);
-    return <Checkbox {...props} checked={checked} onCheckedChange={setChecked} />;
-  },
-};
-
-export const WithCustomLabel: Story = {
-  render: (props) => (
-    <div className="tw-flex tw-items-center tw-gap-2">
-      <Label htmlFor="custom" className="tw-text-error-500">
-        Custom Label
-      </Label>
-
-      <Checkbox {...props} id="custom" />
-    </div>
-  ),
-};
-
-export const WithTooltip: Story = {
-  args: {
-    id: 'tooltip-checkbox',
-    tooltip: 'Hover to see this hint',
-  },
-};
-
-export const WithTooltipDisabled: Story = {
-  name: 'With Tooltip / Disabled',
-  args: {
-    id: 'tooltip-disabled-checkbox',
-    disabled: true,
-    checked: true,
-    tooltip: 'This option cannot be changed because the row is locked.',
-  },
-};
-
-export const WithTooltipAndLabel: Story = {
-  name: 'With Tooltip / Label',
-  args: {
-    id: 'tooltip-label-checkbox',
-    children: 'Send marketing email',
-    tooltip: 'You can change this any time in your account settings',
-  },
-};
-
-export const WithTooltipIndeterminate: Story = {
-  name: 'With Tooltip / Indeterminate',
-  args: {
-    id: 'tooltip-indeterminate-checkbox',
-    checked: 'indeterminate',
-    tooltip: 'Deselect all',
-  },
-};
-
-export const Argo: Story = {
-  args: {
-    argo: true,
-    children: 'Accept terms and conditions',
-    description: '',
-    variant: 'default',
-    position: 'start',
-  },
-};
-
-export const ArgoDisabled: Story = {
-  name: 'Argo / Disabled',
-  render: () => (
-    <div className="tw-flex tw-flex-col tw-gap-4">
-      <Checkbox argo disabled>
-        Disabled unchecked
-      </Checkbox>
-      <Checkbox argo disabled checked>
-        Disabled checked
-      </Checkbox>
-    </div>
-  ),
-};
-
-export const ArgoControlled: Story = {
-  name: 'Argo / Controlled',
-  render: () => {
-    const [checked, setChecked] = useState<boolean | 'indeterminate'>(false);
-    return (
-      <Checkbox
-        argo
-        checked={checked}
-        onCheckedChange={setChecked}
-        description="Click to toggle the checkbox state."
-      >
-        Controlled checkbox
-      </Checkbox>
-    );
-  },
-};
-
-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">
-          <Checkbox argo description="Checkbox is off">
-            Off
-          </Checkbox>
-          <Checkbox argo checked description="Checkbox is on">
-            On
-          </Checkbox>
-        </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">
-          <Checkbox argo disabled description="Disabled off">
-            Off
-          </Checkbox>
-          <Checkbox argo disabled checked description="Disabled on">
-            On
-          </Checkbox>
-        </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">
-          <Checkbox argo position="end" description="Checkbox on the right">
-            Off
-          </Checkbox>
-          <Checkbox argo checked position="end" description="Checkbox on the right">
-            On
-          </Checkbox>
-        </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">
-          <Checkbox argo variant="boxed" description="Boxed off">
-            Off
-          </Checkbox>
-          <Checkbox argo checked variant="boxed" description="Boxed on">
-            On
-          </Checkbox>
-        </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">
-          <Checkbox argo variant="boxed" position="end" description="Boxed end off">
-            Off
-          </Checkbox>
-          <Checkbox argo checked variant="boxed" position="end" description="Boxed end on">
-            On
-          </Checkbox>
-        </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">
-          <Checkbox argo />
-          <Checkbox argo checked />
-          <Checkbox argo disabled />
-          <Checkbox argo disabled checked />
-        </div>
-      </div>
-    </div>
-  ),
-};

package/src/components/Checkbox/Checkbox.test.tsx

@@ -1,140 +0,0 @@
-import { useState } from 'react';
-import type { ComponentProps, ReactNode } from 'react';
-import { Provider as TooltipProvider } from '@radix-ui/react-tooltip';
-import { act, fireEvent, render, screen } from '@testing-library/react';
-import { userEvent } from 'storybook/test';
-import { describe, expect, it, vi } from 'vitest';
-
-import { Checkbox } from './Checkbox';
-
-const renderInTooltipProvider = (ui: ReactNode) =>
-  render(<TooltipProvider delayDuration={0}>{ui}</TooltipProvider>);
-
-describe('<Checkbox />', () => {
-  it('renders an accessible checkbox', () => {
-    render(<Checkbox id="t" />);
-    expect(screen.queryByRole('checkbox')).not.toBeNull();
-  });
-
-  it('fires onCheckedChange with a boolean from the boolean overload', async () => {
-    const onCheckedChange = vi.fn<(checked: boolean) => void>();
-    render(<Checkbox id="t" checked={false} onCheckedChange={onCheckedChange} />);
-
-    await act(async () => {
-      await userEvent.click(screen.getByRole('checkbox'));
-    });
-
-    expect(onCheckedChange).toHaveBeenCalledTimes(1);
-    expect(onCheckedChange).toHaveBeenCalledWith(true);
-  });
-
-  it('reports the indeterminate state via aria-checked="mixed"', () => {
-    render(<Checkbox id="t" checked="indeterminate" />);
-    expect(screen.getByRole('checkbox').getAttribute('aria-checked')).toBe('mixed');
-  });
-
-  it('does not fire onCheckedChange when disabled', async () => {
-    const onCheckedChange = vi.fn();
-    render(<Checkbox id="t" disabled checked={false} onCheckedChange={onCheckedChange} />);
-
-    await act(async () => {
-      await userEvent.click(screen.getByRole('checkbox'));
-    });
-
-    expect(onCheckedChange).not.toHaveBeenCalled();
-  });
-
-  it('toggles when used uncontrolled', async () => {
-    render(<Checkbox id="t" defaultChecked={false} />);
-    const cb = screen.getByRole('checkbox');
-    expect(cb.getAttribute('aria-checked')).toBe('false');
-
-    await act(async () => {
-      await userEvent.click(cb);
-    });
-
-    expect(cb.getAttribute('aria-checked')).toBe('true');
-  });
-
-  it('reflects controlled state changes', async () => {
-    const ControlledTest = (props: ComponentProps<typeof Checkbox>) => {
-      const [checked, setChecked] = useState(false);
-      return <Checkbox {...props} checked={checked} onCheckedChange={setChecked} />;
-    };
-    render(<ControlledTest id="t" />);
-    const cb = screen.getByRole('checkbox');
-    expect(cb.getAttribute('aria-checked')).toBe('false');
-
-    await act(async () => {
-      await userEvent.click(cb);
-    });
-
-    expect(cb.getAttribute('aria-checked')).toBe('true');
-  });
-
-  it('toggles via the label when children are provided (htmlFor wiring)', () => {
-    const onCheckedChange = vi.fn();
-    render(
-      <Checkbox id="t" checked={false} onCheckedChange={onCheckedChange}>
-        Accept terms
-      </Checkbox>,
-    );
-
-    fireEvent.click(screen.getByText('Accept terms'));
-
-    expect(onCheckedChange).toHaveBeenCalledWith(true);
-  });
-
-  describe('tooltip', () => {
-    it('shows the tooltip on hover for a bare checkbox', async () => {
-      const user = userEvent.setup();
-      renderInTooltipProvider(<Checkbox id="t" tooltip="Bare hint" />);
-
-      expect(screen.queryByRole('tooltip')).toBeNull();
-
-      await act(async () => {
-        await user.hover(screen.getByRole('checkbox'));
-      });
-
-      const tip = await screen.findByRole('tooltip');
-      expect(tip.textContent).toContain('Bare hint');
-    });
-
-    it('shows the tooltip on hover when a label is present', async () => {
-      const user = userEvent.setup();
-      renderInTooltipProvider(
-        <Checkbox id="t" tooltip="Labelled hint">
-          With label
-        </Checkbox>,
-      );
-
-      expect(screen.queryByRole('tooltip')).toBeNull();
-
-      await act(async () => {
-        await user.hover(screen.getByText('With label'));
-      });
-
-      const tip = await screen.findByRole('tooltip');
-      expect(tip.textContent).toContain('Labelled hint');
-    });
-
-    it('shows the tooltip on hover even when the checkbox is disabled', async () => {
-      const user = userEvent.setup();
-      renderInTooltipProvider(
-        <Checkbox id="t" disabled checked tooltip="Locked because the row is read-only" />,
-      );
-
-      await act(async () => {
-        await user.hover(screen.getByRole('checkbox'));
-      });
-
-      const tip = await screen.findByRole('tooltip');
-      expect(tip.textContent).toContain('Locked because the row is read-only');
-    });
-
-    it('does not render a tooltip when the prop is omitted', () => {
-      render(<Checkbox id="t" />);
-      expect(screen.queryByRole('tooltip')).toBeNull();
-    });
-  });
-});

package/src/components/Checkbox/Checkbox.tsx

@@ -1,83 +0,0 @@
-import { useId } from 'react';
-import type { ComponentProps, JSX, ReactNode } from 'react';
-import type { CheckedState } from '@radix-ui/react-checkbox';
-import { Indicator, Root } from '@radix-ui/react-checkbox';
-import type { VariantProps } from 'class-variance-authority';
-
-import { Check, Minus } from '../../icons';
-import { cn } from '../../utils';
-import { FieldBox } from '../FieldBox';
-import type { fieldBoxVariants } from '../FieldBox/styles';
-import type { Props as TooltipProps } from '../Tooltip';
-import { Tooltip } from '../Tooltip';
-
-import { indicatorVariants, rootVariants } from './styles';
-
-type Props = {
-  id?: string | number;
-  argo?: boolean;
-  description?: ReactNode;
-  variant?: VariantProps<typeof fieldBoxVariants>['variant'];
-  position?: 'start' | 'end';
-  tooltip?: TooltipProps['tooltip'];
-  tooltipPlacement?: TooltipProps['placement'];
-} & Omit<ComponentProps<typeof Root>, 'id'>;
-
-// First overload - for strict boolean usage
-export function Checkbox(
-  prop: Omit<Props, 'checked' | 'onCheckedChange'> & {
-    checked?: boolean;
-    onCheckedChange?: (checked: boolean) => void;
-  },
-): JSX.Element;
-
-// Second overload - for CheckedState usage (boolean | 'indeterminate')
-export function Checkbox(
-  prop: Omit<Props, 'checked' | 'onCheckedChange'> & {
-    checked?: CheckedState;
-    onCheckedChange?: (checked: CheckedState) => void;
-  },
-): JSX.Element;
-
-export function Checkbox({
-  className,
-  id: idProp,
-  children,
-  argo = false,
-  description,
-  variant,
-  position,
-  tooltip,
-  tooltipPlacement = 'top',
-  ...rest
-}: Props) {
-  const fallbackId = useId();
-  const id = idProp?.toString() ?? fallbackId;
-  const styleVariant = argo ? 'argo' : 'default';
-
-  const checkboxElement = (
-    <Root id={id} {...rest} className={cn(rootVariants({ variant: styleVariant, className }))}>
-      <Indicator className={cn(indicatorVariants({ variant: styleVariant }))}>
-        <Check className="tw-hidden tw-size-3 tw-stroke-[4px] group-data-[state=checked]:tw-block" />
-        <Minus className="tw-hidden tw-size-3 tw-stroke-[4px] group-data-[state=indeterminate]:tw-block" />
-      </Indicator>
-    </Root>
-  );
-
-  const rendered = !children ? (
-    checkboxElement
-  ) : (
-    <FieldBox htmlFor={id} variant={variant} position={position} control={checkboxElement}>
-      <FieldBox.Title>{children}</FieldBox.Title>
-      {description && <FieldBox.Description>{description}</FieldBox.Description>}
-    </FieldBox>
-  );
-
-  if (!tooltip) return rendered;
-
-  return (
-    <Tooltip tooltip={tooltip} placement={tooltipPlacement} triggerAsChild>
-      {rendered}
-    </Tooltip>
-  );
-}

package/src/components/Checkbox/index.ts

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