@keboola/design 1.0.0

package/src/components/RadioGroup/RadioGroup.stories.tsx

@@ -0,0 +1,300 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { withTooltipProvider } from '../../utils';
+
+import { RadioGroup } from './RadioGroup';
+
+type Story = StoryObj<typeof RadioGroup>;
+
+const ComponentType = {
+  ALL: 'all',
+  DATA_SOURCE: 'data-source',
+  DATA_DESTINATION: 'data-destination',
+};
+
+const meta: Meta<typeof RadioGroup> = {
+  component: RadioGroup,
+  decorators: [
+    (Story, props) => (
+      <div className="tw-flex">
+        <Story {...props} />
+      </div>
+    ),
+    withTooltipProvider,
+  ],
+  render: (props) => {
+    return (
+      <RadioGroup {...props}>
+        <RadioGroup.Item value={ComponentType.ALL}>All</RadioGroup.Item>
+        <RadioGroup.Item disabled value={ComponentType.DATA_SOURCE}>
+          Data Source
+        </RadioGroup.Item>
+        <RadioGroup.Item value={ComponentType.DATA_DESTINATION}>Data Destination</RadioGroup.Item>
+      </RadioGroup>
+    );
+  },
+  args: {
+    disabled: false,
+    variant: 'radio',
+    orientation: 'horizontal',
+  },
+};
+
+export default meta;
+
+export const RadioVariant: Story = {
+  args: {
+    variant: 'radio',
+  },
+};
+
+export const ButtonVariant: Story = {
+  args: {
+    variant: 'button',
+  },
+};
+
+export const RadioBlockVariant: Story = {
+  args: {
+    variant: 'radio-block',
+  },
+};
+
+export const DisabledGroup: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const DisabledItems: Story = {
+  render: (props) => {
+    return (
+      <RadioGroup {...props}>
+        <RadioGroup.Item value={ComponentType.ALL}>All</RadioGroup.Item>
+        <RadioGroup.Item disabled value={ComponentType.DATA_SOURCE}>
+          Data Source
+        </RadioGroup.Item>
+        <RadioGroup.Item value={ComponentType.DATA_DESTINATION}>Data Destination</RadioGroup.Item>
+      </RadioGroup>
+    );
+  },
+};
+
+export const DefaultUncontrolled: Story = {
+  args: {
+    defaultValue: ComponentType.DATA_SOURCE,
+  },
+};
+
+export const HorizontalSeparator: Story = {
+  render: (props) => {
+    return (
+      <RadioGroup {...props}>
+        <RadioGroup.Item value={ComponentType.ALL}>All</RadioGroup.Item>
+        <RadioGroup.Separator />
+        <RadioGroup.Item value={ComponentType.DATA_SOURCE}>Data Source</RadioGroup.Item>
+        <RadioGroup.Item value={ComponentType.DATA_DESTINATION}>Data Destination</RadioGroup.Item>
+      </RadioGroup>
+    );
+  },
+};
+
+export const VerticalButtonSeparator: Story = {
+  args: {
+    orientation: 'vertical',
+    variant: 'button',
+    className: 'tw-w-1/4',
+  },
+  render: (props) => {
+    return (
+      <RadioGroup {...props}>
+        <RadioGroup.Item value={ComponentType.ALL}>All</RadioGroup.Item>
+        <RadioGroup.Separator />
+        <RadioGroup.Item value={ComponentType.DATA_SOURCE}>Data Source</RadioGroup.Item>
+        <RadioGroup.Item value={ComponentType.DATA_DESTINATION}>Data Destination</RadioGroup.Item>
+      </RadioGroup>
+    );
+  },
+};
+
+export const VerticalRadioSeparator: Story = {
+  args: {
+    orientation: 'vertical',
+    variant: 'radio',
+  },
+  render: (props) => {
+    return (
+      <RadioGroup {...props}>
+        <RadioGroup.Item value={ComponentType.ALL}>All</RadioGroup.Item>
+        <RadioGroup.Separator />
+        <RadioGroup.Item value={ComponentType.DATA_SOURCE}>Data Source</RadioGroup.Item>
+        <RadioGroup.Item value={ComponentType.DATA_DESTINATION}>Data Destination</RadioGroup.Item>
+      </RadioGroup>
+    );
+  },
+};
+
+export const VerticalRadioBlockSeparator: Story = {
+  args: {
+    orientation: 'vertical',
+    variant: 'radio-block',
+    className: 'tw-w-1/4',
+  },
+  render: (props) => {
+    return (
+      <RadioGroup {...props}>
+        <RadioGroup.Item value={ComponentType.ALL}>All</RadioGroup.Item>
+        <RadioGroup.Separator />
+        <RadioGroup.Item value={ComponentType.DATA_SOURCE}>Data Source</RadioGroup.Item>
+        <RadioGroup.Item value={ComponentType.DATA_DESTINATION}>Data Destination</RadioGroup.Item>
+      </RadioGroup>
+    );
+  },
+};
+
+export const WithTooltip: Story = {
+  render: (props) => {
+    return (
+      <RadioGroup {...props}>
+        <RadioGroup.Item value={ComponentType.ALL}>All</RadioGroup.Item>
+        <RadioGroup.Item
+          disabled
+          value={ComponentType.DATA_SOURCE}
+          tooltip="This option is disabled because no data source is configured"
+        >
+          Data Source
+        </RadioGroup.Item>
+        <RadioGroup.Item value={ComponentType.DATA_DESTINATION}>Data Destination</RadioGroup.Item>
+      </RadioGroup>
+    );
+  },
+};
+
+export const WithTooltipButton: Story = {
+  args: {
+    variant: 'button',
+  },
+  render: (props) => {
+    return (
+      <RadioGroup {...props}>
+        <RadioGroup.Item value={ComponentType.ALL}>All</RadioGroup.Item>
+        <RadioGroup.Item
+          disabled
+          value={ComponentType.DATA_SOURCE}
+          tooltip="This option is disabled because no data source is configured"
+        >
+          Data Source
+        </RadioGroup.Item>
+        <RadioGroup.Item value={ComponentType.DATA_DESTINATION}>Data Destination</RadioGroup.Item>
+      </RadioGroup>
+    );
+  },
+};
+
+export const WithTooltipRadioBlock: Story = {
+  args: {
+    variant: 'radio-block',
+  },
+  render: (props) => {
+    return (
+      <RadioGroup {...props}>
+        <RadioGroup.Item value={ComponentType.ALL}>All</RadioGroup.Item>
+        <RadioGroup.Item
+          disabled
+          value={ComponentType.DATA_SOURCE}
+          tooltip="This option is disabled because no data source is configured"
+        >
+          Data Source
+        </RadioGroup.Item>
+        <RadioGroup.Item value={ComponentType.DATA_DESTINATION}>Data Destination</RadioGroup.Item>
+      </RadioGroup>
+    );
+  },
+};
+
+export const TooltipShowcase: Story = {
+  args: {
+    orientation: 'vertical',
+  },
+  render: (props) => (
+    <div className="tw-flex tw-flex-col tw-gap-6">
+      {(['radio', 'button', 'radio-block'] as const).map((variant) => (
+        <RadioGroup key={variant} {...props} variant={variant}>
+          <RadioGroup.Item value={ComponentType.ALL} tooltip="Available to all users">
+            All
+          </RadioGroup.Item>
+          <RadioGroup.Item
+            disabled
+            value={ComponentType.DATA_SOURCE}
+            tooltip="Disabled — no data source configured"
+          >
+            Data Source
+          </RadioGroup.Item>
+          <RadioGroup.Item
+            value={ComponentType.DATA_DESTINATION}
+            tooltip="Hover persists on enabled items too"
+          >
+            Data Destination
+          </RadioGroup.Item>
+        </RadioGroup>
+      ))}
+    </div>
+  ),
+};
+
+export const WithDescription: Story = {
+  args: {
+    orientation: 'vertical',
+    variant: 'radio',
+  },
+  render: (props) => (
+    <RadioGroup {...props}>
+      <RadioGroup.Item
+        value={ComponentType.ALL}
+        description="Include items from every source and destination"
+      >
+        All
+      </RadioGroup.Item>
+      <RadioGroup.Item
+        value={ComponentType.DATA_SOURCE}
+        description="Components that read data from external systems"
+      >
+        Data Source
+      </RadioGroup.Item>
+      <RadioGroup.Item
+        value={ComponentType.DATA_DESTINATION}
+        description="Components that write data to external systems"
+      >
+        Data Destination
+      </RadioGroup.Item>
+    </RadioGroup>
+  ),
+};
+
+export const WithDescriptionRadioBlock: Story = {
+  args: {
+    variant: 'radio-block',
+  },
+  render: (props) => (
+    <RadioGroup {...props}>
+      <RadioGroup.Item
+        value={ComponentType.ALL}
+        description="Include items from every source and destination"
+      >
+        All
+      </RadioGroup.Item>
+      <RadioGroup.Item
+        value={ComponentType.DATA_SOURCE}
+        description="Components that read data from external systems"
+      >
+        Data Source
+      </RadioGroup.Item>
+      <RadioGroup.Item
+        value={ComponentType.DATA_DESTINATION}
+        description="Components that write data to external systems"
+      >
+        Data Destination
+      </RadioGroup.Item>
+    </RadioGroup>
+  ),
+};

package/src/components/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,64 @@
+import type { ComponentProps } from 'react';
+import * as RRadioGroup from '@radix-ui/react-radio-group';
+import { cva } from 'class-variance-authority';
+
+import { cn } from '../../utils';
+
+import type { Orientation, Variant } from './context';
+import { RadioGroupProvider } from './context';
+import { RadioGroupItem } from './RadioGroupItem';
+import { RadioGroupSeparator } from './RadioGroupSeparator';
+
+const radioGroupVariants = cva(['tw-flex'], {
+  variants: {
+    orientation: {
+      horizontal: ['tw-gap-2'],
+      vertical: ['tw-flex-col', 'tw-gap-3'],
+    },
+    variant: {
+      button: [],
+      radio: [],
+      'radio-block': ['tw-w-full'],
+    },
+  },
+});
+
+type Props<Value> = {
+  variant?: Variant;
+  orientation?: Orientation;
+  onValueChange?: (value: Value) => void;
+  value?: Value | null;
+  defaultValue?: Value | null;
+} & Omit<
+  ComponentProps<typeof RRadioGroup.Root>,
+  'asChild' | 'orientation' | 'onValueChange' | 'onChange' | 'value' | 'defaultValue'
+>;
+
+export const RadioGroup = <Value extends string = string>({
+  variant = 'radio',
+  className,
+  disabled = false,
+  orientation = 'horizontal',
+  onValueChange,
+  children,
+  value,
+  defaultValue,
+  ...props
+}: Props<Value>) => {
+  return (
+    <RRadioGroup.Root
+      {...props}
+      onValueChange={onValueChange}
+      orientation={orientation}
+      className={cn(radioGroupVariants({ orientation, variant, className }))}
+      disabled={disabled}
+      value={value ?? void 0}
+      defaultValue={defaultValue ?? void 0}
+    >
+      <RadioGroupProvider value={{ variant, orientation }}>{children}</RadioGroupProvider>
+    </RRadioGroup.Root>
+  );
+};
+
+RadioGroup.Item = RadioGroupItem;
+RadioGroup.Separator = RadioGroupSeparator;

package/src/components/RadioGroup/RadioGroupItem.tsx

@@ -0,0 +1,60 @@
+import { useId } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
+import type { Item } from '@radix-ui/react-radio-group';
+
+import { FieldBox } from '../FieldBox';
+import type { Props as TooltipProps } from '../Tooltip';
+import { Tooltip } from '../Tooltip';
+
+import { useRadioGroupContext } from './context';
+import { Radio } from './Radio';
+import { RadioGroupItemButton } from './RadioGroupItemButton';
+
+type ItemProps = Omit<ComponentProps<typeof Item>, 'asChild' | 'value'>;
+
+type Props<T extends string = string> = ItemProps & {
+  value: T;
+  tooltip?: ReactNode;
+  tooltipVariant?: TooltipProps['variant'];
+  tooltipPlacement?: TooltipProps['placement'];
+  description?: ReactNode;
+};
+
+export const RadioGroupItem = <T extends string = string>({
+  children,
+  tooltip,
+  tooltipVariant,
+  tooltipPlacement,
+  description,
+  ...props
+}: Props<T>) => {
+  const { variant } = useRadioGroupContext();
+  const id = useId();
+
+  const item = (() => {
+    if (variant === 'button')
+      return <RadioGroupItemButton {...props}>{children}</RadioGroupItemButton>;
+
+    return (
+      <FieldBox
+        variant={variant === 'radio-block' ? 'boxed' : 'default'}
+        htmlFor={id}
+        control={<Radio {...props} id={id} />}
+        className={variant === 'radio-block' ? 'tw-flex-1' : undefined}
+      >
+        <FieldBox.Title>{children}</FieldBox.Title>
+        {description && <FieldBox.Description>{description}</FieldBox.Description>}
+      </FieldBox>
+    );
+  })();
+
+  if (!tooltip) {
+    return item;
+  }
+
+  return (
+    <Tooltip tooltip={tooltip} variant={tooltipVariant} placement={tooltipPlacement} triggerAsChild>
+      {item}
+    </Tooltip>
+  );
+};

package/src/components/RadioGroup/RadioGroupItemButton.tsx

@@ -0,0 +1,79 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+import { Item } from '@radix-ui/react-radio-group';
+
+import { cn } from '../../utils';
+
+type Props = ComponentProps<typeof Item>;
+
+export const RadioGroupItemButton = ({
+  ref,
+  className,
+  children,
+  ...props
+}: Props & { ref?: Ref<ElementRef<typeof Item>> }) => (
+  <Item
+    ref={ref}
+    {...props}
+    className={cn(
+      // reset
+      'tw-bg-transparent',
+      'tw-p-0',
+      'tw-peer',
+      'tw-cursor-pointer',
+      'tw-whitespace-nowrap',
+
+      // position
+      'tw-flex',
+      'tw-items-center',
+      'tw-justify-center',
+
+      // disabled
+      'disabled:tw-opacity-40',
+      'disabled:tw-cursor-not-allowed',
+
+      // layouts
+      'tw-w-full',
+      'tw-px-2',
+      'tw-py-1.5',
+
+      // fonts
+      'tw-text-secondary-600',
+      'tw-uppercase',
+      'tw-font-semibold',
+      'tw-font-sans',
+      'tw-text-[11px]',
+      'tw-whitespace-nowrap',
+      'tw-tracking-widest',
+      'tw-leading-[18px]',
+
+      // border
+      'tw-border',
+      'tw-border-solid',
+      'tw-border-secondary-500',
+      'tw-rounded',
+
+      // hover
+      'data-[state=unchecked]:hover:tw-bg-secondary-500',
+      'data-[state=unchecked]:hover:tw-text-white',
+
+      // disabled
+      'data-[state=unchecked]:disabled:hover:tw-bg-white',
+      'data-[state=unchecked]:disabled:hover:tw-text-secondary-500',
+      'data-[state=checked]:disabled:tw-cursor-not-allowed',
+
+      // states
+      'data-[state=unchecked]:tw-bg-white',
+      'data-[state=checked]:tw-bg-secondary-500',
+      'data-[state=checked]:tw-text-white',
+      'data-[state=checked]:tw-cursor-default',
+
+      'focus-visible:tw-outline',
+      'focus-visible:tw-outline-secondary-500',
+      'focus-visible:tw-ring-4',
+      'focus-visible:tw-ring-secondary-200',
+      className,
+    )}
+  >
+    {children}
+  </Item>
+);

package/src/components/RadioGroup/RadioGroupSeparator.tsx

@@ -0,0 +1,12 @@
+import { Separator } from '../Separator';
+
+import { useRadioGroupContext } from './context';
+
+export const RadioGroupSeparator = () => {
+  const { orientation } = useRadioGroupContext();
+  const invertedOrientation = orientation === 'horizontal' ? 'vertical' : 'horizontal';
+  const size = orientation === 'horizontal' ? '1/2' : 'full';
+  const className = orientation === 'horizontal' ? 'tw-mx-2' : 'tw-my-2';
+
+  return <Separator orientation={invertedOrientation} size={size} className={className} />;
+};

package/src/components/RadioGroup/context.ts

@@ -0,0 +1,13 @@
+import { createContext, use } from 'react';
+
+export type Variant = 'radio' | 'button' | 'radio-block';
+export type Orientation = 'vertical' | 'horizontal';
+
+const RadioGroupContext = createContext<{ variant: Variant; orientation: Orientation }>({
+  variant: 'radio',
+  orientation: 'horizontal',
+});
+
+export const RadioGroupProvider = RadioGroupContext;
+
+export const useRadioGroupContext = () => use(RadioGroupContext);

package/src/components/RadioGroup/index.ts

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

package/src/components/Resizable/Resizable.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { ResizableHandle } from './ResizableHandle';
+import { ResizablePanel } from './ResizablePanel';
+import { ResizablePanelGroup } from './ResizablePanelGroup';
+
+const ResizableDemo = () => {
+  return (
+    <ResizablePanelGroup
+      direction="horizontal"
+      className="tw-max-w-md tw-rounded-lg tw-border md:tw-min-w-[450px]"
+    >
+      <ResizablePanel defaultSize={50}>
+        <div className="tw-flex tw-h-[200px] tw-items-center tw-justify-center tw-p-6">
+          <span className="tw-font-semibold">One</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel defaultSize={50}>
+        <ResizablePanelGroup direction="vertical">
+          <ResizablePanel defaultSize={25}>
+            <div className="tw-flex tw-h-full tw-items-center tw-justify-center tw-p-6">
+              <span className="tw-font-semibold">Two</span>
+            </div>
+          </ResizablePanel>
+          <ResizableHandle />
+          <ResizablePanel defaultSize={75}>
+            <div className="tw-flex tw-h-full tw-items-center tw-justify-center tw-p-6">
+              <span className="tw-font-semibold">Three</span>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  );
+};
+
+const meta: Meta<typeof ResizableDemo> = {
+  component: ResizableDemo,
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ResizableDemo>;
+
+export const Basic: Story = {
+  render: ResizableDemo,
+};

package/src/components/Resizable/ResizableHandle.tsx

@@ -0,0 +1,50 @@
+import type { ComponentProps } from 'react';
+import * as ResizablePrimitive from 'react-resizable-panels';
+import { cva } from 'class-variance-authority';
+
+const resizableHandleVariants = cva([
+  // base styles
+  'tw-bg-neutral-50',
+  'tw-relative',
+  'tw-flex',
+  'tw-w-px',
+  'tw-items-center',
+  'tw-justify-center',
+
+  // focus styles
+  'focus-visible:tw-ring-ring',
+  'focus-visible:tw-ring-1',
+  'focus-visible:tw-ring-offset-1',
+  'focus-visible:tw-outline-hidden',
+
+  // after pseudo-element for horizontal
+  'after:tw-absolute',
+  'after:tw-inset-y-0',
+  'after:tw-left-1/2',
+  'after:tw-w-1',
+  'after:tw--translate-x-1/2',
+
+  // vertical direction styles
+  'data-[panel-group-direction=vertical]:tw-h-px',
+  'data-[panel-group-direction=vertical]:tw-w-full',
+  'data-[panel-group-direction=vertical]:after:tw-left-0',
+  'data-[panel-group-direction=vertical]:after:tw-h-1',
+  'data-[panel-group-direction=vertical]:after:tw-w-full',
+  'data-[panel-group-direction=vertical]:after:tw-translate-x-0',
+  'data-[panel-group-direction=vertical]:after:tw--translate-y-1/2',
+
+  // handle icon rotation for vertical
+  '[&[data-panel-group-direction=vertical]>div]:tw-rotate-90',
+]);
+
+export const ResizableHandle = ({
+  className,
+  ...props
+}: ComponentProps<typeof ResizablePrimitive.PanelResizeHandle>) => {
+  return (
+    <ResizablePrimitive.PanelResizeHandle
+      className={resizableHandleVariants({ className })}
+      {...props}
+    />
+  );
+};

package/src/components/Resizable/ResizablePanel.tsx

@@ -0,0 +1,12 @@
+import type { ComponentProps, Ref } from 'react';
+import * as ResizablePrimitive from 'react-resizable-panels';
+export type { ImperativePanelHandle } from 'react-resizable-panels';
+
+export const ResizablePanel = ({
+  ref,
+  ...props
+}: ComponentProps<typeof ResizablePrimitive.Panel> & {
+  ref?: Ref<ResizablePrimitive.ImperativePanelHandle>;
+}) => {
+  return <ResizablePrimitive.Panel ref={ref} {...props} />;
+};

package/src/components/Resizable/ResizablePanelGroup.tsx

@@ -0,0 +1,19 @@
+import type { ComponentProps } from 'react';
+import * as ResizablePrimitive from 'react-resizable-panels';
+
+import { cn } from '../../utils';
+
+export const ResizablePanelGroup = ({
+  className,
+  ...props
+}: ComponentProps<typeof ResizablePrimitive.PanelGroup>) => {
+  return (
+    <ResizablePrimitive.PanelGroup
+      className={cn(
+        'tw-flex tw-h-full tw-w-full data-[panel-group-direction=vertical]:tw-flex-col',
+        className,
+      )}
+      {...props}
+    />
+  );
+};

package/src/components/Resizable/index.ts

@@ -0,0 +1,3 @@
+export { ResizableHandle } from './ResizableHandle';
+export { ResizablePanel, type ImperativePanelHandle } from './ResizablePanel';
+export { ResizablePanelGroup } from './ResizablePanelGroup';