@keboola/design 1.0.0

package/src/components/Popconfirm/context.ts

@@ -0,0 +1,19 @@
+import { createContext, type MouseEvent, use } from 'react';
+
+export type PopconfirmContextType = {
+  variant: 'confirm' | 'danger';
+  onConfirm: (event: MouseEvent<HTMLButtonElement>) => void | Promise<void>;
+  onCancel: (event: MouseEvent<HTMLButtonElement>) => void;
+  enabled: boolean;
+  isLoading: boolean;
+};
+
+const PopconfirmContext = createContext<PopconfirmContextType | null>(null);
+
+export const PopconfirmContextProvider = PopconfirmContext;
+
+export const usePopconfirmContext = () => {
+  const context = use(PopconfirmContext);
+  if (!context) throw new Error('usePopconfirmContext must be used within a Popconfirm');
+  return context;
+};

package/src/components/Popconfirm/index.ts

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

package/src/components/Popover/Popover.stories.tsx

@@ -0,0 +1,85 @@
+import type { ComponentProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Button } from '../Button';
+
+import { Popover } from './Popover';
+
+type Props = ComponentProps<typeof Popover.Content>;
+type Variant = NonNullable<Props['variant']>;
+const variants: Variant[] = ['default', 'argo'];
+
+export default {
+  component: Popover,
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    variant: 'default',
+    matchTriggerWidth: false,
+    className: 'tw-p-4',
+  },
+  argTypes: {
+    variant: { control: 'radio', options: variants },
+  },
+} satisfies Meta<typeof Popover.Content>;
+
+type Story = StoryObj<typeof Popover.Content>;
+
+export const Default: Story = {
+  render: (props) => {
+    return (
+      <Popover>
+        <Popover.Trigger asChild>
+          <Button>Open</Button>
+        </Popover.Trigger>
+
+        <Popover.Content {...props}>Arbitrary content</Popover.Content>
+      </Popover>
+    );
+  },
+};
+
+export const Positioning: Story = {
+  render: (props) => {
+    return (
+      <div className="tw-flex tw-gap-8">
+        <Popover>
+          <Popover.Trigger asChild>
+            <Button> Top</Button>
+          </Popover.Trigger>
+          <Popover.Content {...props} side="top">
+            Positioned on top
+          </Popover.Content>
+        </Popover>
+
+        <Popover>
+          <Popover.Trigger asChild>
+            <Button> Right</Button>
+          </Popover.Trigger>
+          <Popover.Content {...props} side="right">
+            Positioned on right
+          </Popover.Content>
+        </Popover>
+
+        <Popover>
+          <Popover.Trigger asChild>
+            <Button>Bottom</Button>
+          </Popover.Trigger>
+          <Popover.Content {...props} side="bottom">
+            Positioned on bottom
+          </Popover.Content>
+        </Popover>
+
+        <Popover>
+          <Popover.Trigger asChild>
+            <Button>Left</Button>
+          </Popover.Trigger>
+          <Popover.Content {...props} side="left">
+            Positioned on left
+          </Popover.Content>
+        </Popover>
+      </div>
+    );
+  },
+};

package/src/components/Popover/Popover.tsx

@@ -0,0 +1,15 @@
+import type { ComponentProps } from 'react';
+import { Close, Root, Trigger } from '@radix-ui/react-popover';
+
+import { PopoverContent } from './PopoverContent';
+
+type Props = ComponentProps<typeof Root>;
+
+export const Popover = (props: Props) => <Root {...props} />;
+
+/**
+ * Main Layout
+ */
+Popover.Content = PopoverContent;
+Popover.Trigger = Trigger;
+Popover.Close = Close;

package/src/components/Popover/PopoverContent.tsx

@@ -0,0 +1,99 @@
+import type { ComponentPropsWithoutRef, ElementRef, Ref } from 'react';
+import { Content, Portal } from '@radix-ui/react-popover';
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+
+import { cn } from '../../utils';
+
+const variants = cva(
+  [
+    'tailwindcss-preflight',
+    'tw-group/popover-content',
+    'tw-z-[1055]',
+    'focus-visible:tw-outline-none',
+
+    // sizing
+    'tw-min-w-32',
+    'tw-max-h-[var(--radix-popover-content-available-height)]',
+    'tw-origin-[--radix-popover-content-transform-origin]',
+
+    // layout
+    'tw-flex',
+    'tw-flex-col',
+    'tw-overflow-y-auto',
+
+    // border
+    'tw-box-border',
+    'tw-border',
+    'tw-border-solid',
+    'tw-border-neutral-100',
+    'tw-shadow-lg',
+
+    // colors
+    'tw-bg-white',
+    'tw-text-neutral-800',
+
+    // open animation
+    'data-[state=open]:tw-animate-in',
+    'data-[state=open]:tw-fade-in-0',
+    'data-[state=open]:tw-zoom-in-95',
+
+    // closed animation
+    'data-[state=closed]:tw-animate-out',
+    'data-[state=closed]:tw-fade-out-0',
+    'data-[state=closed]:tw-zoom-out-95',
+
+    // position animation
+    'data-[side=bottom]:tw-slide-in-from-top-2',
+    'data-[side=left]:tw-slide-in-from-right-2',
+    'data-[side=right]:tw-slide-in-from-left-2',
+    'data-[side=top]:tw-slide-in-from-bottom-2',
+  ],
+  {
+    defaultVariants: {
+      matchTriggerWidth: false,
+      variant: 'default',
+    },
+    variants: {
+      variant: {
+        default: ['tw-rounded-md'],
+        argo: ['tw-rounded-2xl'],
+      },
+      matchTriggerWidth: {
+        true: ['tw-w-[var(--radix-popover-trigger-width)]'],
+        false: [],
+      },
+    },
+  },
+);
+
+type Props = ComponentPropsWithoutRef<typeof Content> & VariantProps<typeof variants>;
+
+export const PopoverContent = ({
+  ref,
+  className,
+  align = 'center',
+  sideOffset = 4,
+  matchTriggerWidth = false,
+  children,
+  variant,
+  onEscapeKeyDown,
+  ...props
+}: Props & { ref?: Ref<ElementRef<typeof Content>> }) => (
+  <Portal>
+    <Content
+      ref={ref}
+      align={matchTriggerWidth ? 'start' : align}
+      sideOffset={sideOffset}
+      className={cn(variants({ className, matchTriggerWidth, variant }))}
+      onEscapeKeyDown={(event) => {
+        // Stop propagation to prevent parent modals (like FullScreenModal) from closing
+        event.stopPropagation();
+        onEscapeKeyDown?.(event);
+      }}
+      {...props}
+    >
+      {children}
+    </Content>
+  </Portal>
+);

package/src/components/Popover/index.ts

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

package/src/components/Progress/Progress.stories.tsx

@@ -0,0 +1,67 @@
+import { useEffect, useState } from 'react';
+import type { ComponentProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Progress } from './Progress';
+
+type Props = ComponentProps<typeof Progress>;
+type Variant = NonNullable<Props['variant']>;
+type Size = NonNullable<Props['size']>;
+const variants: Variant[] = ['default', 'success'];
+const sizes: Size[] = ['sm', 'lg'];
+
+export default {
+  component: Progress,
+  args: {
+    variant: 'default',
+    size: 'lg',
+    value: 50,
+  },
+  argTypes: {
+    variant: {
+      options: variants,
+      control: {
+        type: 'radio',
+      },
+    },
+    size: {
+      options: sizes,
+      control: {
+        type: 'radio',
+      },
+    },
+  },
+} satisfies Meta<typeof Progress>;
+
+type Story = StoryObj<typeof Progress>;
+
+export const Default: Story = {};
+
+export const CustomLength = {
+  args: {
+    className: 'tw-w-96',
+  },
+};
+
+const useFakeProgressValue = () => {
+  const [value, setValue] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setValue((previous) => {
+        const remainingProgress = 100 - previous;
+        const increment = Math.max(0.05, remainingProgress / 100);
+
+        return Math.min(99.9, previous + increment);
+      });
+    }, 100);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return value;
+};
+
+export const ProgressDemo = (props: Omit<Props, 'value'>) => (
+  <Progress {...props} value={useFakeProgressValue()} />
+);

package/src/components/Progress/Progress.tsx

@@ -0,0 +1,45 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+import { Indicator, Root } from '@radix-ui/react-progress';
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+
+import { cn } from '../../utils';
+
+const variants = cva(
+  ['tw-relative', 'tw-flex', 'tw-items-center', 'tw-z-0', 'tw-overflow-x-hidden', 'tw-w-full'],
+  {
+    defaultVariants: {
+      variant: 'default',
+      size: 'lg',
+    },
+    variants: {
+      variant: {
+        default: ['tw-bg-primary/20', '[&_[data-slot="progress-indicator"]]:tw-bg-primary'],
+        success: ['tw-bg-success/20', '[&_[data-slot="progress-indicator"]]:tw-bg-success'],
+      },
+      size: {
+        sm: ['tw-rounded-full', 'tw-h-1'],
+        lg: ['tw-rounded', 'tw-h-4'],
+      },
+    },
+  },
+);
+
+type Props = ComponentProps<typeof Root> & VariantProps<typeof variants>;
+
+export const Progress = ({
+  ref,
+  className,
+  value,
+  variant,
+  size,
+  ...props
+}: Props & { ref?: Ref<ElementRef<typeof Root>> }) => (
+  <Root {...props} ref={ref} className={cn(variants({ variant, size, className }))} value={value}>
+    <Indicator
+      data-slot="progress-indicator"
+      className="tw-size-full tw-flex-1 tw-transition-all"
+      style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
+    />
+  </Root>
+);

package/src/components/Progress/index.ts

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

package/src/components/RadioGroup/Radio.tsx

@@ -0,0 +1,67 @@
+import type { ComponentProps } from 'react';
+import { Indicator, Item } from '@radix-ui/react-radio-group';
+
+import { cn } from '../../utils';
+
+type Props = ComponentProps<typeof Item>;
+
+export const Radio = ({ className, ...props }: Props) => (
+  <Item
+    {...props}
+    className={cn(
+      // reset
+      'tw-bg-transparent',
+      'tw-p-0',
+      'tw-peer',
+      'tw-cursor-pointer',
+      'tw-whitespace-nowrap',
+      'tw-shrink-0',
+
+      // position
+      'tw-flex',
+      'tw-items-center',
+      'tw-justify-center',
+
+      // disabled
+      'disabled:tw-opacity-40',
+      'disabled:tw-cursor-not-allowed',
+
+      'tw-size-4',
+
+      // border
+      'tw-rounded-full',
+      'tw-border',
+      'tw-border-solid',
+
+      // checked state - border only
+      'data-[state=checked]:tw-border-primary',
+
+      // unchecked state
+      'data-[state=unchecked]:tw-border-neutral-200',
+
+      // unchecked:hover state
+      'data-[state=unchecked]:hover:tw-border-primary',
+
+      // unchecked:hover:disabled state
+      'data-[state=unchecked]:disabled:hover:tw-border-neutral-200',
+
+      // focus-visible ring
+      'focus-visible:tw-ring-2',
+      'focus-visible:tw-ring-secondary-200',
+      className,
+    )}
+  >
+    <Indicator
+      className={cn(
+        'tw-flex',
+        'tw-items-center',
+        'tw-justify-center',
+        'after:tw-content-[""]',
+        'after:tw-block',
+        'after:tw-size-2.5',
+        'after:tw-rounded-full',
+        'after:tw-bg-primary',
+      )}
+    />
+  </Item>
+);