@keboola/design 2.0.1 → 2.1.0

package/src/components/Calendar/Calendar.stories.tsx

@@ -1,101 +0,0 @@
-import { useState } from 'react';
-import type { DateRange } from 'react-day-picker';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Calendar } from './Calendar';
-
-type Story = StoryObj<typeof Calendar>;
-
-export default {
-  component: Calendar,
-  decorators: [
-    (Story) => (
-      <div className="tw-flex tw-justify-center tw-p-4">
-        <Story />
-      </div>
-    ),
-  ],
-} satisfies Meta<typeof Calendar>;
-
-const defaultDate = new Date('2026-01-15');
-const defaultMonth = new Date('2026-01-01');
-const defaultRange: DateRange = {
-  from: new Date('2026-01-10'),
-  to: new Date('2026-01-20'),
-};
-
-export const Single: Story = {
-  render: () => {
-    const [selected, setSelected] = useState<Date | undefined>(defaultDate);
-    const [month, setMonth] = useState<Date>(defaultMonth);
-
-    return (
-      <Calendar
-        mode="single"
-        month={month}
-        onMonthChange={setMonth}
-        onSelect={(date) => setSelected(date)}
-        selected={selected}
-        startMonth={new Date(1900, 0)}
-        endMonth={new Date(2050, 11)}
-      />
-    );
-  },
-};
-
-export const Range: Story = {
-  render: () => {
-    const [selected, setSelected] = useState<DateRange | undefined>(defaultRange);
-    const [month, setMonth] = useState<Date>(defaultMonth);
-
-    return (
-      <Calendar
-        mode="range"
-        month={month}
-        onMonthChange={setMonth}
-        onSelect={(range) => setSelected(range)}
-        selected={selected}
-        startMonth={new Date(1900, 0)}
-        endMonth={new Date(2050, 11)}
-      />
-    );
-  },
-};
-
-export const Empty: Story = {
-  render: () => {
-    const [selected, setSelected] = useState<Date | undefined>(undefined);
-    const [month, setMonth] = useState<Date>(defaultMonth);
-
-    return (
-      <Calendar
-        mode="single"
-        month={month}
-        onMonthChange={setMonth}
-        onSelect={(date) => setSelected(date)}
-        selected={selected}
-        startMonth={new Date(1900, 0)}
-        endMonth={new Date(2050, 11)}
-      />
-    );
-  },
-};
-
-export const WithLimitedDateRange: Story = {
-  render: () => {
-    const [selected, setSelected] = useState<Date | undefined>(defaultDate);
-    const [month, setMonth] = useState<Date>(defaultMonth);
-
-    return (
-      <Calendar
-        mode="single"
-        month={month}
-        onMonthChange={setMonth}
-        onSelect={(date) => setSelected(date)}
-        selected={selected}
-        startMonth={new Date(2026, 0, 1)} // January 2026
-        endMonth={new Date(2026, 11, 31)} // December 2026
-      />
-    );
-  },
-};

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();
-    });
-  });
-});