@keboola/design 2.0.1 → 3.0.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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