@keboola/design 1.0.0

package/src/components/Button/styles.ts

@@ -0,0 +1,292 @@
+import { cva } from 'class-variance-authority';
+
+export const variants = cva(
+  [
+    'tailwindcss-preflight',
+    'tw-group/button',
+    'tw-border-box',
+
+    // layout
+    'tw-relative',
+    'tw-flex',
+    'tw-items-center',
+    'tw-justify-center',
+    'tw-gap-2',
+
+    // text
+    'tw-text-xs',
+    'tw-leading-5',
+    'tw-font-medium',
+    'tw-tracking-[1px]',
+    'tw-uppercase',
+
+    // border
+    'tw-rounded',
+    'tw-border',
+    'tw-border-transparent',
+
+    // styling
+    'tw-shadow-none',
+    '[a]:tw-cursor-pointer', // explicitly set for anchor
+
+    'focus-visible:tw-outline',
+    'focus-visible:tw-outline-1',
+    'focus-visible:-tw-outline-offset-1',
+    'focus-visible:tw-outline-secondary-500',
+    'focus-visible:tw-ring-4',
+    'focus-visible:tw-ring-secondary-200',
+
+    // disabled
+    'disabled:tw-opacity-40',
+    'disabled:tw-cursor-not-allowed',
+
+    // anchor support
+    '!tw-no-underline',
+    'aria-disabled:tw-opacity-40',
+    'aria-disabled:tw-cursor-not-allowed',
+
+    '[&_svg]:tw-shrink-0',
+  ],
+  {
+    defaultVariants: {
+      size: 'medium',
+      variant: 'primary',
+      block: false,
+    },
+    variants: {
+      block: {
+        true: ['tw-w-full'],
+      },
+      variant: {
+        primary: [
+          'tw-text-white',
+          'tw-bg-primary-500',
+
+          'focus:tw-text-white',
+          'hover:tw-text-white',
+          'hover:not-disabled:tw-bg-primary-600',
+          'active:not-disabled:tw-bg-primary-800',
+
+          // anchor disabled override
+          'aria-disabled:!tw-bg-primary-500',
+        ],
+        secondary: [
+          'tw-text-white',
+          'tw-bg-secondary-500',
+
+          'focus:tw-text-white',
+          'hover:tw-text-white',
+          'hover:not-disabled:tw-bg-secondary-700',
+          'active:not-disabled:tw-bg-secondary-800',
+
+          // anchor disabled override
+          'aria-disabled:!tw-bg-secondary-500',
+        ],
+        danger: [
+          'tw-text-white',
+          'tw-bg-error-500',
+
+          'focus:tw-text-white',
+          'hover:tw-text-white',
+          'hover:not-disabled:tw-bg-error-600',
+          'active:not-disabled:tw-bg-error-700',
+
+          // anchor disabled override
+          'aria-disabled:!tw-bg-error-500',
+        ],
+        invisible: [
+          'tw-text-neutral-800',
+          'tw-bg-transparent',
+
+          'focus:tw-text-neutral-800',
+          'hover:not-disabled:tw-bg-neutral-100',
+          'hover:tw-text-neutral-800',
+          'active:not-disabled:tw-bg-neutral-150',
+
+          // contrasting icon on hover/active
+          '[&_svg]:tw-text-neutral-400',
+          '[&_svg]:hover:not-disabled:tw-text-secondary-600',
+          '[&_svg]:active:not-disabled:tw-text-secondary-600',
+
+          // anchor disabled override
+          'aria-disabled:!tw-bg-transparent',
+        ],
+        outline: [
+          'tw-text-neutral-800',
+          'tw-bg-white',
+          // border
+          '!tw-border-neutral-200',
+          'hover:tw-text-neutral-800',
+          'focus:tw-text-neutral-800',
+          'hover:not-disabled:!tw-border-neutral-300',
+          'hover:not-disabled:tw-bg-neutral-100',
+          'active:not-disabled:tw-bg-neutral-200',
+
+          // contrasting icon hover, same as invisible
+          '[&_svg]:tw-text-neutral-400',
+          '[&_svg]:not-disabled:hover:tw-text-secondary-600',
+          '[&_svg]:active:not-disabled:tw-text-secondary-600',
+
+          // anchor disabled override
+          'aria-disabled:!tw-bg-white',
+          'aria-disabled:!tw-border-neutral-200',
+        ],
+
+        inline: [
+          'tw-text-neutral-800',
+          'tw-bg-transparent',
+          'tw-rounded-full',
+
+          '[&_svg]:tw-text-neutral-400',
+          '[&_svg]:not-disabled:hover:tw-text-secondary-600',
+          '[&_svg]:not-disabled:focus:tw-text-secondary-600',
+        ],
+      },
+      size: {
+        medium: ['tw-max-h-10', 'tw-min-h-10', 'tw-px-4', 'tw-py-2.5', '[&_svg]:tw-size-4'],
+        small: ['tw-max-h-8', 'tw-min-h-8', 'tw-px-4', 'tw-py-1.5', '[&_svg]:tw-size-4'],
+        large: ['tw-max-h-12', 'tw-min-h-12', 'tw-px-4', 'tw-py-3.5', '[&_svg]:tw-size-4'],
+
+        'icon-lg': ['tw-size-12', 'tw-p-0', '[&_svg]:tw-size-6'],
+        icon: ['tw-size-10', 'tw-p-0', '[&_svg]:tw-size-4'],
+        'icon-sm': ['tw-size-8', 'tw-p-0', '[&_svg]:tw-size-4'],
+        'icon-xs': ['tw-size-6', 'tw-p-0', '[&_svg]:tw-size-4'],
+        'icon-2xs': ['!tw-inline-flex', 'tw-size-5', 'tw-max-h-5', '[&_svg]:tw-size-3'],
+        'icon-3xs': ['tw-h-fit', 'tw-w-fit', '[&_svg]:tw-size-4'],
+      },
+    },
+  },
+);
+
+export const argoVariants = cva(
+  [
+    'tailwindcss-preflight',
+
+    // layout
+    'tw-relative',
+    'tw-inline-flex',
+    'tw-items-center',
+    'tw-justify-center',
+    'tw-whitespace-nowrap',
+    'tw-gap-2',
+
+    // border
+    'tw-border',
+    'tw-border-transparent',
+    'tw-rounded-lg',
+
+    // text
+    'tw-font-medium',
+    'tw-select-none',
+
+    // focus visible
+    '!tw-outline-none',
+    'focus-visible:tw-ring-2',
+
+    // disabled
+    'disabled:tw-cursor-not-allowed',
+    'disabled:tw-opacity-50',
+    'active:tw-opacity-60',
+
+    'tw-transition-all',
+    'tw-bg-clip-padding',
+
+    // anchor support
+    '!tw-no-underline',
+
+    // icon
+    'tw-shrink-0',
+    '[&_svg]:tw-pointer-events-none',
+    '[&_svg]:tw-shrink-0',
+    "[&_svg:not([class*='tw-size-'])]:tw-size-4",
+  ],
+  {
+    defaultVariants: {
+      variant: 'primary',
+      size: 'medium',
+    },
+    variants: {
+      block: {
+        true: ['tw-w-full'],
+      },
+      variant: {
+        primary: [
+          'tw-bg-primary',
+          'tw-text-primary-foreground',
+          '[a]:hover:tw-bg-primary/80',
+          'hover:not-disabled:tw-bg-primary/90',
+          'hover:tw-text-primary-foreground',
+          'focus:tw-text-primary-foreground',
+
+          'focus-visible:tw-border-primary',
+          'focus-visible:tw-ring-primary/50',
+        ],
+        secondary: [
+          'tw-bg-secondary',
+          'tw-text-secondary-foreground',
+          'hover:tw-bg-secondary/80',
+          'hover:tw-text-secondary-foreground',
+          'focus:tw-text-secondary-foreground',
+
+          'focus-visible:tw-border-secondary',
+          'focus-visible:tw-ring-primary/50',
+        ],
+
+        // should be called "destructive" by Figma
+        danger: [
+          'tw-bg-destructive',
+          'tw-text-destructive-foreground',
+          'hover:tw-text-destructive-foreground',
+          'focus:tw-text-destructive-foreground',
+
+          'focus-visible:tw-border-destructive',
+          'focus-visible:tw-ring-destructive/20',
+        ],
+        outline: [
+          '!tw-border-input',
+          'tw-bg-background',
+          'hover:not-disabled:tw-bg-accent',
+          'hover:not-disabled:tw-text-accent-foreground',
+          'hover:active:tw-bg-background',
+          'focus-visible:!tw-border-primary',
+          'focus-visible:tw-ring-primary/50',
+        ],
+
+        // should be called "ghost" by Figma
+        invisible: [
+          'tw-bg-transparent',
+          'tw-text-foreground',
+          'hover:not-disabled:tw-bg-accent',
+          'hover:not-disabled:tw-text-accent-foreground',
+          'hover:not-disabled:tw-border-accent',
+
+          'focus-visible:tw-ring-primary/50',
+        ],
+        // should be called "link" by Figma
+        inline: [
+          'tw-bg-transparent',
+          'tw-text-primary',
+          'hover:tw-underline',
+          'hover:active:tw-bg-transparent',
+          'focus-visible:tw-ring-primary/50',
+        ],
+      },
+      size: {
+        // should be called "default" by Figma
+        medium: ['tw-max-h-9', 'tw-py-2', 'tw-px-4', 'tw-text-sm'],
+        // should be called "small" by Figma
+        small: ['tw-max-h-8', 'tw-py-2', 'tw-px-3', 'tw-text-xs'],
+        // should be called "large" by Figma
+        large: ['tw-max-h-10', 'tw-py-2.5', 'tw-px-6', 'tw-text-sm'],
+
+        'icon-lg': ['tw-size-10'],
+        icon: ['tw-size-9'],
+        'icon-sm': ['tw-size-8'],
+        // unsupported in ARGO, remove when old design is gone
+        'icon-xs': [],
+        'icon-2xs': [],
+        'icon-3xs': [],
+      },
+    },
+  },
+);

package/src/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -0,0 +1,118 @@
+import type { ComponentProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Button } from '../Button';
+
+import { ButtonGroup } from './ButtonGroup';
+
+type Props = ComponentProps<typeof ButtonGroup>;
+type Space = NonNullable<Props['space']>;
+type Variant = NonNullable<Props['variant']>;
+
+const spaces: Space[] = ['large', 'medium', 'small', 'extra-small', 'compact'];
+const variants: Variant[] = ['inline', 'block'];
+
+export default {
+  component: ButtonGroup,
+  args: {
+    space: 'medium',
+    variant: 'inline',
+  },
+  argTypes: {
+    space: {
+      options: spaces,
+      control: { type: 'radio' },
+    },
+    variant: {
+      options: variants,
+      control: { type: 'radio' },
+    },
+  },
+} satisfies Meta<typeof ButtonGroup>;
+
+type Story = StoryObj<typeof ButtonGroup>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <Button variant="outline">Left button</Button>
+        <Button>Right Button</Button>
+      </>
+    ),
+  },
+};
+
+export const Argo: Story = {
+  args: {
+    children: (
+      <>
+        <Button argo variant="outline">
+          Left button
+        </Button>
+        <Button argo>Right Button</Button>
+      </>
+    ),
+  },
+};
+
+export const BlockWithIcons: Story = {
+  args: {
+    variant: 'block',
+    children: (
+      <>
+        <Button variant="outline" icon="chevron-left" size="icon" aria-label="Left" />
+        <Button variant="outline">Left button</Button>
+        <Button variant="outline" icon="plus" size="icon" aria-label="Plus" />
+        <Button>Right Button</Button>
+        <Button variant="outline" icon="chevron-right" size="icon" aria-label="Right" />
+      </>
+    ),
+  },
+};
+
+export const ArgoBlock: Story = {
+  args: {
+    space: 'small',
+    variant: 'block',
+    children: (
+      <>
+        <Button argo icon="chevron-left" size="icon" variant="outline" aria-label="move-left" />
+        <Button argo variant="primary">
+          Left button
+        </Button>
+        <Button argo icon="plus" size="icon" variant="outline" aria-label="add" />
+        <Button argo variant="danger">
+          Right Button
+        </Button>
+        <Button argo icon="chevron-right" size="icon" variant="outline" aria-label="move-right" />
+      </>
+    ),
+  },
+};
+
+export const Compact: Story = {
+  args: {
+    space: 'compact',
+    children: (
+      <>
+        <Button variant="outline" icon="arrow-left" size="icon" aria-label="Left" />
+        <Button variant="outline">Submit</Button>
+        <Button variant="outline" icon="arrow-right" size="icon" aria-label="Right" />
+      </>
+    ),
+  },
+};
+
+export const ArgoCompact: Story = {
+  args: {
+    space: 'compact',
+    children: (
+      <>
+        <Button argo size="icon" icon="arrow-left" aria-label="move-right" />
+        <Button argo>Submit</Button>
+        <Button argo size="icon" icon="arrow-right" aria-label="move-right" />
+      </>
+    ),
+  },
+};

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -0,0 +1,79 @@
+import type { ComponentProps, ElementRef, ReactNode, Ref } from 'react';
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+
+const buttonGroupVariant = cva(
+  ['tailwindcss-preflight', 'tw-inline-flex', 'tw-items-center', 'tw-group/button-group'],
+  {
+    defaultVariants: {
+      variant: 'inline',
+      space: 'small',
+    },
+    variants: {
+      variant: {
+        inline: [],
+        block: [
+          'tw-w-full',
+          'tw-flex-col',
+          'sm:tw-flex-row',
+          '[&_a]:tw-flex-1',
+          '[&>button:not([data-icon-only=true])]:tw-flex-1',
+        ],
+      },
+      space: {
+        'extra-small': 'tw-gap-1',
+        'little-small': 'tw-gap-2',
+        small: 'tw-gap-3',
+        medium: 'tw-gap-4',
+        large: 'tw-gap-6',
+        compact: [
+          'tw-border-collapse',
+          '!tw-gap-0',
+
+          // ensure that focus visible outline is at the top
+          '[&>*:focus-visible]:!tw-z-10',
+
+          '[&>*:not(:first-child)]:tw-rounded-l-none',
+          '[&>*:not(:last-child)]:tw-rounded-r-none',
+          '[&>*:not(:last-child)]:tw-border-r-0',
+          '[&>*:not(:first-child)]:tw-border-l-0',
+
+          // separator
+          '[&>*:not(:first-child)]:before:tw-content',
+          '[&>*:not(:first-child)]:before:tw-absolute',
+          '[&>*:not(:first-child)]:before:tw-left-0',
+          '[&>*:not(:first-child)]:before:tw-h-full',
+          '[&>*:not(:first-child)]:before:tw-w-px',
+          '[&>*:not(:first-child)]:before:tw-bg-black/10',
+        ],
+      },
+    },
+  },
+);
+
+type Props = {
+  children: ReactNode;
+  className?: string;
+} & VariantProps<typeof buttonGroupVariant> &
+  ComponentProps<'div'>;
+
+export const ButtonGroup = ({
+  ref,
+  children,
+  space = 'small',
+  className,
+  variant,
+  ...rest
+}: Props & { ref?: Ref<ElementRef<'div'>> }) => {
+  return (
+    <div
+      ref={ref}
+      {...rest}
+      role="group"
+      data-variant={variant}
+      className={buttonGroupVariant({ variant, className, space })}
+    >
+      {children}
+    </div>
+  );
+};

package/src/components/ButtonGroup/index.ts

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

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

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

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

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

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

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { ButtonInline } from '../Button';
+import { Icon } from '../Icon';
+
+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">
+            <Icon icon="plus" />
+            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>
+    );
+  },
+};