@keboola/design 1.0.0

package/src/components/Select/SelectTrigger.tsx

@@ -0,0 +1,161 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../utils';
+import { Icon } from '../Icon';
+
+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: 'default',
+    },
+    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>
+      <Icon icon="chevron-down" className="tw-size-3.5 tw-text-muted-foreground" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+);

package/src/components/Select/index.ts

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

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

@@ -0,0 +1,41 @@
+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 = {};

package/src/components/Separator/Separator.tsx

@@ -0,0 +1,84 @@
+import type { ComponentProps } from 'react';
+import * as RSeparator from '@radix-ui/react-separator';
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+
+const separatorVariants = cva(
+  [
+    // position
+    'tw-flex',
+    'tw-items-center',
+    'tw-justify-center',
+    'tw-self-stretch',
+
+    // before
+    "before:tw-content-['']",
+    'before:tw-bg-neutral-150',
+  ],
+  {
+    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'>;
+
+export const Separator = ({
+  className,
+  orientation = 'vertical',
+  size = 'full',
+  ...props
+}: Props) => (
+  <RSeparator.Root
+    {...props}
+    decorative
+    orientation={orientation}
+    className={separatorVariants({ size, orientation, className })}
+  />
+);

package/src/components/Separator/index.ts

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

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

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

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

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

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

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

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

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

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

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