@keboola/design 2.0.0 → 2.1.0

package/src/components/Select/SelectTrigger.tsx

@@ -1,161 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-import * as SelectPrimitive from '@radix-ui/react-select';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { ChevronDown } from '../../icons';
-import { cn } from '../../utils';
-
-const variants = cva(
-  [
-    'tailwindcss-preflight',
-    'tw-group',
-    'tw-box-border',
-
-    // layout
-    'tw-inline-flex',
-    'tw-items-center',
-    'tw-justify-between',
-    'tw-gap-2',
-    'tw-w-full',
-    'tw-text-left',
-
-    // base appearance
-    'tw-rounded',
-    'tw-border',
-    'tw-border-solid',
-    'tw-border-neutral-200',
-    'tw-text-neutral-800',
-    // Scoped transition (no `outline`) — prevents the UA focus-outline color
-    // from interpolating through its dark default during state changes.
-    'tw-transition-[color,background-color,border-color,box-shadow]',
-
-    // focus base — ring width here, color comes from state variant
-    '!tw-outline-none',
-    'focus:tw-ring-4',
-    'data-[state=open]:tw-ring-4',
-
-    // disabled
-    'disabled:tw-cursor-not-allowed',
-    'aria-disabled:tw-cursor-not-allowed',
-
-    // placeholder (Radix sets data-placeholder on the trigger when no value)
-    'data-[placeholder]:tw-text-muted-foreground',
-
-    // child svg defaults
-    '[&_svg]:tw-shrink-0',
-    '[&_svg]:tw-pointer-events-none',
-  ],
-  {
-    defaultVariants: {
-      variant: 'primary',
-      state: 'default',
-      sizing: 'medium',
-    },
-    compoundVariants: [
-      {
-        variant: 'secondary',
-        state: 'error',
-        className: ['tw-bg-error-100'],
-      },
-      {
-        variant: 'secondary',
-        state: 'warning',
-        className: ['tw-bg-warning-100'],
-      },
-      // --- argo ---
-      {
-        variant: 'argo',
-        state: 'default',
-        className: [
-          'focus:tw-border-primary',
-          'focus:tw-ring-primary/50',
-          'data-[state=open]:tw-border-primary',
-          'data-[state=open]:tw-ring-primary/50',
-        ],
-      },
-      {
-        variant: 'argo',
-        state: 'error',
-        className: [
-          'tw-border-destructive',
-          'focus:tw-border-destructive',
-          'focus:tw-ring-destructive/20',
-          'data-[state=open]:tw-border-destructive',
-          'data-[state=open]:tw-ring-destructive/20',
-        ],
-      },
-    ],
-    variants: {
-      variant: {
-        primary: ['tw-bg-white', 'disabled:tw-opacity-40', 'aria-disabled:tw-opacity-40'],
-        secondary: [
-          'tw-bg-neutral-100',
-          'tw-border-neutral-100',
-          'disabled:tw-opacity-40',
-          'aria-disabled:tw-opacity-40',
-        ],
-        argo: [
-          'tw-bg-background',
-          'tw-border-input',
-          'tw-rounded-lg',
-          'tw-text-foreground',
-          'disabled:tw-opacity-50',
-          'aria-disabled:tw-opacity-50',
-        ],
-      },
-      sizing: {
-        // border-inclusive heights: 40 / 36 / 34 px
-        default: ['tw-px-4', 'tw-py-2.5', 'tw-text-sm/[18px]', 'tw-h-10', 'tw-min-h-10'],
-        medium: ['tw-px-4', 'tw-py-2', 'tw-text-sm/[18px]', 'tw-h-9', 'tw-min-h-9'],
-        small: ['tw-px-4', 'tw-py-2', 'tw-text-sm/[16px]', 'tw-h-[34px]', 'tw-min-h-[34px]'],
-      },
-      state: {
-        default: [
-          'focus:tw-border-secondary-500',
-          'focus:tw-ring-secondary-200',
-          'data-[state=open]:tw-border-secondary-500',
-          'data-[state=open]:tw-ring-secondary-200',
-        ],
-        error: [
-          'tw-border-error-500',
-          'focus:tw-border-error-500',
-          'focus:tw-ring-error-200',
-          'data-[state=open]:tw-border-error-500',
-          'data-[state=open]:tw-ring-error-200',
-        ],
-        warning: [
-          'tw-border-warning-500',
-          'focus:tw-border-warning-500',
-          'focus:tw-ring-warning-200',
-          'data-[state=open]:tw-border-warning-500',
-          'data-[state=open]:tw-ring-warning-200',
-        ],
-      },
-    },
-  },
-);
-
-type Props = ComponentProps<typeof SelectPrimitive.Trigger> &
-  VariantProps<typeof variants> &
-  Pick<ComponentProps<typeof SelectPrimitive.Value>, 'placeholder'>;
-
-export const SelectTrigger = ({
-  ref,
-  className,
-  variant,
-  state,
-  sizing,
-  placeholder,
-  ...props
-}: Props & { ref?: Ref<ElementRef<'button'>> }) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(variants({ variant, state, sizing }), className)}
-    {...props}
-  >
-    <SelectPrimitive.Value placeholder={placeholder} />
-    <SelectPrimitive.Icon asChild>
-      <ChevronDown className="tw-size-5 tw-text-muted-foreground" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-);

package/src/components/Select/index.ts

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

package/src/components/Separator/Separator.stories.tsx

@@ -1,60 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { cn } from '../../utils';
-import { Card } from '../Card';
-
-import { Separator } from './Separator';
-
-type Story = StoryObj<typeof Separator>;
-
-const meta: Meta<typeof Separator> = {
-  component: Separator,
-  args: {
-    orientation: 'vertical',
-    size: 'full',
-  },
-  render: (props) => (
-    <Card>
-      <Card.Content
-        className={cn('tw-flex tw-items-center tw-gap-4', {
-          'tw-flex-col': props.orientation === 'horizontal',
-        })}
-      >
-        <div className="tw-flex tw-flex-col tw-gap-1">
-          <span>Base Configuration</span>
-          <span>Paginations</span>
-        </div>
-
-        <Separator {...props} />
-
-        <div className="tw-flex tw-flex-col tw-gap-1">
-          <span>User Paramters</span>
-          <span>User Data</span>
-        </div>
-      </Card.Content>
-    </Card>
-  ),
-};
-
-export default meta;
-
-export const Basic: Story = {};
-
-/**
- * Pass `label` to render text centered between two line segments — the typical
- * "OR" divider used between auth options. Always rendered horizontally.
- */
-export const WithLabel: Story = {
-  args: {
-    label: 'OR',
-  },
-  render: (props) => (
-    <Card>
-      <Card.Content className="tw-flex tw-w-80 tw-flex-col tw-gap-4">
-        <span>Sign in with email</span>
-        <Separator {...props} />
-        <span>Sign in with SSO</span>
-      </Card.Content>
-    </Card>
-  ),
-};

package/src/components/Separator/Separator.test.tsx

@@ -1,39 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
-
-import { Separator } from './Separator';
-
-describe('<Separator />', () => {
-  it('renders the plain decorative separator without a label', () => {
-    const { container } = render(<Separator orientation="horizontal" />);
-    expect(container.querySelector('[data-orientation="horizontal"]')).not.toBeNull();
-    expect(screen.queryByText('OR')).toBeNull();
-  });
-
-  it('renders the label between two line segments when label is provided', () => {
-    const { container } = render(<Separator label="OR" />);
-    expect(screen.getByText('OR')).not.toBeNull();
-    // Decorative line segments are drawn with before:/after: pseudo-elements,
-    // so the label is the only DOM child of the separator root.
-    const root = container.querySelector('[data-orientation="horizontal"]');
-    expect(root?.children).toHaveLength(0);
-    expect(root?.textContent).toBe('OR');
-  });
-
-  it('forces horizontal orientation when a label is provided', () => {
-    const { container } = render(<Separator orientation="vertical" label="OR" />);
-    expect(container.querySelector('[data-orientation="horizontal"]')).not.toBeNull();
-    expect(container.querySelector('[data-orientation="vertical"]')).toBeNull();
-  });
-
-  it('treats label={false} as no label (conditional rendering pattern)', () => {
-    const condition = false;
-    render(<Separator label={condition && 'OR'} />);
-    expect(screen.queryByText('OR')).toBeNull();
-  });
-
-  it('treats label={null} as no label', () => {
-    render(<Separator label={null} />);
-    expect(screen.queryByText('OR')).toBeNull();
-  });
-});

package/src/components/Separator/Separator.tsx

@@ -1,115 +0,0 @@
-import type { ComponentProps, ReactNode } from 'react';
-import * as RSeparator from '@radix-ui/react-separator';
-import type { VariantProps } from 'class-variance-authority';
-import { cva } from 'class-variance-authority';
-
-import { cn } from '../../utils';
-
-const separatorVariants = cva(
-  [
-    // position
-    'tw-flex',
-    'tw-items-center',
-    'tw-justify-center',
-    'tw-self-stretch',
-
-    // before
-    "before:tw-content-['']",
-    'before:tw-bg-border',
-  ],
-  {
-    defaultVariants: {
-      orientation: 'vertical',
-      size: 'full',
-    },
-    compoundVariants: [
-      {
-        orientation: 'horizontal',
-        size: 'full',
-        className: ['before:tw-w-full'],
-      },
-      {
-        orientation: 'horizontal',
-        size: '1/2',
-        className: ['before:tw-w-1/2'],
-      },
-      {
-        orientation: 'horizontal',
-        size: '3/4',
-        className: ['before:tw-w-3/4'],
-      },
-      {
-        orientation: 'vertical',
-        size: 'full',
-        className: ['before:tw-h-full'],
-      },
-      {
-        orientation: 'vertical',
-        size: '1/2',
-        className: ['before:tw-h-1/2'],
-      },
-      {
-        orientation: 'vertical',
-        size: '3/4',
-        className: ['before:tw-h-3/4'],
-      },
-    ],
-    variants: {
-      size: {
-        full: ['before:tw-h-full'],
-        '1/2': [],
-        '3/4': [],
-      },
-      orientation: {
-        vertical: ['before:tw-w-px'],
-        horizontal: ['before:tw-h-px'],
-      },
-    },
-  },
-);
-
-type Props = VariantProps<typeof separatorVariants> &
-  Omit<ComponentProps<typeof RSeparator.Root>, 'decorative'> & {
-    /**
-     * Optional label rendered centered between two line segments
-     * (typical "OR" divider). Implies `orientation="horizontal"`.
-     * Overrides any `children` passed to the component.
-     */
-    label?: ReactNode;
-  };
-
-export const Separator = ({
-  className,
-  orientation = 'vertical',
-  size = 'full',
-  label,
-  ...props
-}: Props) => {
-  if (label != null && label !== false) {
-    return (
-      <RSeparator.Root
-        {...props}
-        decorative
-        orientation="horizontal"
-        className={cn(
-          'tw-flex tw-w-full tw-items-center tw-gap-3 tw-self-stretch',
-          'tw-text-xs tw-font-medium tw-text-muted-foreground',
-          "before:tw-content-[''] before:tw-h-px before:tw-flex-1 before:tw-bg-border",
-          "after:tw-content-[''] after:tw-h-px after:tw-flex-1 after:tw-bg-border",
-          className,
-        )}
-      >
-        {label}
-      </RSeparator.Root>
-    );
-  }
-
-  return (
-    <RSeparator.Root
-      {...props}
-      decorative
-      orientation={orientation}
-      className={separatorVariants({ size, orientation, className })}
-    />
-  );
-};

package/src/components/Separator/index.ts

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

package/src/components/Sheet/Sheet.stories.tsx

@@ -1,63 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Button } from '../Button';
-import { ButtonGroup } from '../ButtonGroup';
-
-import { Sheet } from './Sheet';
-
-const meta = {
-  component: Sheet.Content,
-  argTypes: {
-    side: {
-      options: ['top', 'bottom', 'left', 'right'],
-      control: {
-        type: 'radio',
-      },
-    },
-  },
-  args: {
-    hideOverlay: false,
-    keepOpenOnPointerDownOutside: false,
-    disableTransition: false,
-    side: 'right',
-  },
-  render: (args) => (
-    <Sheet>
-      <Sheet.Trigger asChild>
-        <Button>Open</Button>
-      </Sheet.Trigger>
-      <Sheet.Content {...args}>
-        <Sheet.Header
-          title="Are you absolutely sure?"
-          description="
-            This action cannot be undone. This will permanently delete your account and remove your
-            data from our servers."
-        />
-
-        <Sheet.Body>Content</Sheet.Body>
-
-        <Sheet.Footer>
-          <ButtonGroup variant="block">
-            <Sheet.Close asChild>
-              <Button type="button" variant="outline">
-                Cancel
-              </Button>
-            </Sheet.Close>
-            <Button type="button" variant="primary">
-              Submit
-            </Button>
-          </ButtonGroup>
-        </Sheet.Footer>
-      </Sheet.Content>
-    </Sheet>
-  ),
-} satisfies Meta<typeof Sheet.Content>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-/**
- * The default form of the sheet.
- */
-export const Default: Story = {};

package/src/components/Sheet/Sheet.tsx

@@ -1,21 +0,0 @@
-import type { ComponentProps } from 'react';
-import { Close, Root, Trigger } from '@radix-ui/react-dialog';
-
-import { SheetBody } from './SheetBody';
-import { SheetContent } from './SheetContent';
-import { SheetFooter } from './SheetFooter';
-import { SheetHeader } from './SheetHeader';
-import { SheetTitle } from './SheetTitle';
-
-type Props = ComponentProps<typeof Root>;
-
-export const Sheet = ({ ...props }: Props) => <Root {...props} />;
-
-Sheet.Close = Close;
-Sheet.Trigger = Trigger;
-Sheet.Content = SheetContent;
-Sheet.Title = SheetTitle;
-
-Sheet.Header = SheetHeader;
-Sheet.Footer = SheetFooter;
-Sheet.Body = SheetBody;

package/src/components/Sheet/SheetBody.tsx

@@ -1,12 +0,0 @@
-import type { ComponentProps } from 'react';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<'div'>;
-
-export const SheetBody = ({ className, ...rest }: Props) => (
-  <div
-    {...rest}
-    className={cn('tw-flex', 'tw-flex-col', 'tw-overflow-x-hidden', 'tw-px-4', className)}
-  />
-);

package/src/components/Sheet/SheetContent.tsx

@@ -1,131 +0,0 @@
-import type { ComponentProps } from 'react';
-import { Content, Portal } from '@radix-ui/react-dialog';
-import type { VariantProps } from 'class-variance-authority';
-import { cva } from 'class-variance-authority';
-
-import { cn } from '../../utils';
-
-import { SheetOverlay } from './SheetOverlay';
-
-const sheetContentVariants = cva(
-  [
-    // reset
-    'tailwindcss-preflight',
-
-    // positioning
-    'tw-fixed',
-
-    // Use standard tailwindcss class when, global override in tooltip.less file is removed.
-    'tw-z-[1051]',
-
-    'tw-flex',
-    'tw-flex-col',
-
-    'tw-bg-white',
-    'tw-shadow-lg',
-
-    'tw-ease-in-out',
-    // opening animation
-    'data-[state=open]:tw-duration-200',
-
-    // close animation
-    'data-[state=closed]:tw-duration-200',
-  ],
-  {
-    defaultVariants: {
-      side: 'right',
-      disableTransition: false,
-    },
-    variants: {
-      disableTransition: {
-        true: [],
-        false: ['data-[state=open]:tw-animate-in', 'data-[state=closed]:tw-animate-out'],
-      },
-      side: {
-        top: [
-          'tw-inset-x-0',
-          'tw-top-0',
-          'tw-h-auto',
-          'data-[state=closed]:tw-slide-out-to-top',
-          'data-[state=open]:tw-slide-in-from-top',
-        ],
-        right: [
-          'tw-inset-y-0',
-          'tw-right-0',
-          'tw-h-full',
-          'data-[state=closed]:tw-slide-out-to-right',
-          'data-[state=open]:tw-slide-in-from-right',
-        ],
-
-        bottom: [
-          'tw-inset-x-0',
-          'tw-bottom-0',
-          'tw-h-auto',
-          'data-[state=closed]:tw-slide-out-to-bottom',
-          'data-[state=open]:tw-slide-in-from-bottom',
-          'tw-drop-shadow-2xl', // standard tailwindcss shadow is invisible for a bottom sheet because of positioning
-        ],
-
-        left: [
-          'tw-inset-y-0',
-          'tw-left-0',
-          'tw-h-full',
-          'data-[state=closed]:tw-slide-out-to-left',
-          'data-[state=open]:tw-slide-in-from-left',
-        ],
-      },
-    },
-  },
-);
-
-type Props = ComponentProps<typeof Content> & {
-  side?: 'top' | 'right' | 'bottom' | 'left';
-  hideOverlay?: boolean;
-  keepOpenOnPointerDownOutside?: boolean;
-} & VariantProps<typeof sheetContentVariants> &
-  Pick<ComponentProps<typeof Portal>, 'container'>;
-
-export const SheetContent = ({
-  className,
-  children,
-  side = 'right',
-  disableTransition = false,
-  hideOverlay = false,
-  keepOpenOnPointerDownOutside = false,
-  onPointerDownOutside,
-  onInteractOutside,
-  container,
-  ...props
-}: Props) => {
-  const handleOnPointerDownOutside: ComponentProps<typeof Content>['onPointerDownOutside'] = (
-    event,
-  ) => {
-    if (keepOpenOnPointerDownOutside) event.preventDefault();
-    onPointerDownOutside?.(event);
-  };
-
-  const handleOnInteractOutside: ComponentProps<typeof Content>['onInteractOutside'] = (event) => {
-    if (keepOpenOnPointerDownOutside) event.preventDefault();
-    onInteractOutside?.(event);
-  };
-
-  return (
-    <Portal container={container}>
-      {!hideOverlay && <SheetOverlay disableTransition={disableTransition ?? false} />}
-      <Content
-        {...props}
-        /**
-         * Intentionally set undefined to avoid warning as suggested in docs, (https://www.radix-ui.com/primitives/docs/components/dialog#description)
-         * as of now we don't use modal description anywhere, if we decide to fix this issue, we fix it everywhere at once.
-         */
-        aria-describedby={undefined}
-        className={cn(sheetContentVariants({ side, className, disableTransition }))}
-        onPointerDownOutside={handleOnPointerDownOutside}
-        onInteractOutside={handleOnInteractOutside}
-        data-side={side}
-      >
-        {children}
-      </Content>
-    </Portal>
-  );
-};

package/src/components/Sheet/SheetFooter.tsx

@@ -1,9 +0,0 @@
-import type { ComponentProps } from 'react';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<'div'>;
-
-export const SheetFooter = ({ className, ...props }: Props) => (
-  <div className={cn('tw-mt-auto tw-flex tw-flex-col tw-gap-2 tw-p-4', className)} {...props} />
-);

package/src/components/Sheet/SheetHeader.tsx

@@ -1,39 +0,0 @@
-import type { ComponentProps, ReactNode } from 'react';
-
-import { cn } from '../../utils';
-import { ModalCloseIcon } from '../Modal/ModalCloseIcon';
-import { ModalDescription } from '../Modal/ModalDescription';
-import { ModalTitle } from '../Modal/ModalTitle';
-
-type Props = {
-  title?: ReactNode;
-  description?: ReactNode;
-  hideCloseIcon?: boolean;
-} & ComponentProps<'div'>;
-
-export const SheetHeader = ({
-  className,
-  children,
-  hideCloseIcon = false,
-  title,
-  description,
-  ...props
-}: Props) => {
-  const isHeaderRendered = title || description || !hideCloseIcon;
-
-  return (
-    <div className={cn('tw-flex', 'tw-flex-col', 'tw-gap-1.5', 'tw-p-4', className)} {...props}>
-      {isHeaderRendered && (
-        <div className="tw-flex tw-flex-col">
-          <div className="tw-flex tw-justify-end tw-gap-2">
-            {title && <ModalTitle>{title}</ModalTitle>}
-            {!hideCloseIcon && <ModalCloseIcon />}
-          </div>
-          {description && <ModalDescription>{description}</ModalDescription>}
-        </div>
-      )}
-
-      {children}
-    </div>
-  );
-};

package/src/components/Sheet/SheetOverlay.tsx

@@ -1,11 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-
-import { ModalOverlay } from '../Modal/ModalOverlay';
-
-type Props = ComponentProps<typeof ModalOverlay>;
-
-// Assuming it should have the same style as standard modal, if not remove the modal dependency and style it separately.
-export const SheetOverlay = ({
-  ref,
-  ...props
-}: Props & { ref?: Ref<ElementRef<typeof ModalOverlay>> }) => <ModalOverlay ref={ref} {...props} />;

package/src/components/Sheet/SheetTitle.tsx

@@ -1,12 +0,0 @@
-import type { ComponentProps } from 'react';
-import { Title } from '@radix-ui/react-dialog';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<typeof Title> & {
-  visuallyHidden?: boolean;
-};
-
-export const SheetTitle = ({ className, visuallyHidden = false, ...props }: Props) => (
-  <Title className={cn({ 'tw-sr-only': visuallyHidden }, className)} {...props} />
-);

package/src/components/Sheet/index.ts

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