@keboola/design 1.0.0

package/src/components/PanelWithDetails.tsx

@@ -0,0 +1,66 @@
+import { useState } from 'react';
+import type { KeyboardEvent, PropsWithChildren } from 'react';
+
+import { Icon } from '../components/Icon';
+import { keyCodes } from '../constants/keyCodes';
+import { cn } from '../utils';
+
+import { Collapse } from './Collapse';
+
+type Props = PropsWithChildren<{
+  defaultExpanded?: boolean;
+  labelCollapse?: string;
+  labelOpen?: string;
+  placement?: 'top' | 'bottom';
+  className?: string;
+}>;
+
+export const PanelWithDetails = ({
+  defaultExpanded = false,
+  labelCollapse = 'Hide details',
+  labelOpen = 'Show details',
+  placement = 'top',
+  children,
+}: Props) => {
+  const [isOpen, setIsOpen] = useState(defaultExpanded);
+
+  const handleKeyUp = (e: KeyboardEvent<HTMLDivElement>) => {
+    if ([keyCodes.ENTER, keyCodes.SPACE].includes(e.key)) {
+      e.stopPropagation();
+      setIsOpen(!isOpen);
+    }
+  };
+
+  return (
+    <Collapse
+      open={isOpen}
+      className={cn(placement === 'bottom' ? 'tw-flex-col-reverse' : 'tw-flex-col')}
+      header={
+        <div
+          role="button"
+          tabIndex={0}
+          className={cn(
+            'tw-flex tw-cursor-pointer tw-items-center tw-rounded-sm tw-bg-neutral-100 tw-px-4 tw-py-3 tw-text-sm tw-text-neutral-400',
+            'hover:tw-text-secondary-500',
+          )}
+          onClick={() => setIsOpen(!isOpen)}
+          onKeyUp={handleKeyUp}
+        >
+          <div className="tw-mr-2 tw-flex tw-shrink-0 tw-items-center">
+            <Icon
+              icon="chevron-down"
+              className={cn(
+                'tw-text-xs',
+                !isOpen ? '-tw-rotate-90' : placement === 'bottom' ? 'tw-rotate-180' : '',
+              )}
+            />
+          </div>
+
+          <div className="tw-py-0.5">{isOpen ? labelCollapse : labelOpen}</div>
+        </div>
+      }
+    >
+      <div className="tw-px-5 tw-py-3">{children}</div>
+    </Collapse>
+  );
+};

package/src/components/Popconfirm/Popconfirm.stories.tsx

@@ -0,0 +1,365 @@
+import { type ComponentProps, useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { action } from 'storybook/actions';
+
+import { Button } from '../Button/Button';
+import { DropdownMenu } from '../DropdownMenu';
+import { Label } from '../Label';
+import { Modal } from '../Modal';
+import { Switch } from '../Switch';
+
+import { Popconfirm } from './Popconfirm';
+
+/**
+ *  Pop up a bubble confirmation box for an action.
+ *  ### When to use
+ *  A simple and compact popover used for asking for user confirmation.
+ */
+const meta: Meta<typeof Popconfirm> = {
+  component: Popconfirm,
+  decorators: [
+    (Story) => (
+      <div className="tw-flex tw-justify-center">
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    onConfirm: (event) => {
+      action('onConfirm')(event);
+    },
+    onCancel: (event) => {
+      action('onCancel')(event);
+    },
+    variant: 'confirm',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const DeafultDemo = ({
+  children,
+  align,
+  side,
+  ...props
+}: ComponentProps<typeof Popconfirm> &
+  Pick<ComponentProps<typeof Popconfirm.Content>, 'align' | 'side'>) => {
+  return (
+    <Popconfirm {...props}>
+      <Popconfirm.Trigger asChild>{children}</Popconfirm.Trigger>
+      <Popconfirm.Content align={align} side={side}>
+        <Popconfirm.Body>
+          {side}-{align}
+        </Popconfirm.Body>
+
+        <Popconfirm.Footer>
+          <Popconfirm.Cancel />
+          <Popconfirm.Confirm />
+        </Popconfirm.Footer>
+      </Popconfirm.Content>
+    </Popconfirm>
+  );
+};
+
+export const Default: Story = {
+  render: (props) => (
+    <div className="tw-flex tw-w-full tw-flex-col tw-gap-8 tw-px-52">
+      <div className="tw-flex tw-justify-center tw-gap-2">
+        <DeafultDemo {...props} side="top" align="start">
+          <Button variant="primary">Top-Start</Button>
+        </DeafultDemo>
+
+        <DeafultDemo {...props} side="top" align="center">
+          <Button variant="primary">Top-Center</Button>
+        </DeafultDemo>
+        <DeafultDemo {...props} side="top" align="end">
+          <Button variant="primary">Top-End</Button>
+        </DeafultDemo>
+      </div>
+
+      <div className="tw-flex tw-justify-between">
+        <div className="tw-flex tw-flex-col tw-gap-2">
+          <DeafultDemo {...props} side="left" align="start">
+            <Button variant="primary">Left-start</Button>
+          </DeafultDemo>
+          <DeafultDemo {...props} side="left" align="center">
+            <Button variant="primary">left-center</Button>
+          </DeafultDemo>
+          <DeafultDemo {...props} side="left" align="end">
+            <Button variant="primary">left-end</Button>
+          </DeafultDemo>
+        </div>
+
+        <div className="tw-flex tw-flex-col tw-gap-2">
+          <DeafultDemo {...props} side="right" align="start">
+            <Button variant="primary">right-start</Button>
+          </DeafultDemo>
+          <DeafultDemo {...props} side="right" align="center">
+            <Button variant="primary">right-center</Button>
+          </DeafultDemo>
+          <DeafultDemo {...props} side="right" align="end">
+            <Button variant="primary">right-end</Button>
+          </DeafultDemo>
+        </div>
+      </div>
+
+      <div className="tw-flex tw-justify-center tw-gap-2">
+        <DeafultDemo {...props} side="bottom" align="start">
+          <Button variant="primary">Bottom-Start</Button>
+        </DeafultDemo>
+
+        <DeafultDemo {...props} side="bottom" align="center">
+          <Button variant="primary">Bottom-Center</Button>
+        </DeafultDemo>
+        <DeafultDemo {...props} side="bottom" align="end">
+          <Button variant="primary">Bottom-End</Button>
+        </DeafultDemo>
+      </div>
+    </div>
+  ),
+};
+
+export const Confirm: Story = {
+  render: (props) => (
+    <Popconfirm {...props}>
+      <Popconfirm.Trigger asChild>
+        <Button variant="primary">Trigger</Button>
+      </Popconfirm.Trigger>
+      <Popconfirm.Content>
+        <Popconfirm.Body>Are you sure you want to proceed with this action</Popconfirm.Body>
+
+        <Popconfirm.Footer>
+          <Popconfirm.Cancel />
+          <Popconfirm.Confirm />
+        </Popconfirm.Footer>
+      </Popconfirm.Content>
+    </Popconfirm>
+  ),
+};
+
+export const Danger: Story = {
+  args: {
+    variant: 'danger',
+  },
+  render: (props) => (
+    <Popconfirm {...props}>
+      <Popconfirm.Trigger asChild>
+        <Button variant="danger">Trigger</Button>
+      </Popconfirm.Trigger>
+      <Popconfirm.Content>
+        <Popconfirm.Body>Are you sure you want to delete this branch?</Popconfirm.Body>
+
+        <Popconfirm.Footer>
+          <Popconfirm.Cancel />
+          <Popconfirm.Confirm />
+        </Popconfirm.Footer>
+      </Popconfirm.Content>
+    </Popconfirm>
+  ),
+};
+
+const SkipPopoverDemo = (props: ComponentProps<typeof Popconfirm>) => {
+  const [enabled, setEnabled] = useState(false);
+
+  return (
+    <div className="tw-flex tw-flex-col tw-gap-2">
+      <div className="tw-flex tw-items-center tw-gap-2">
+        <Switch id="allow-popover" checked={enabled} onCheckedChange={setEnabled} />
+        <Label htmlFor="allow-popover">Skip Confirm</Label>
+      </div>
+
+      <Popconfirm {...props} enabled={!enabled}>
+        <Popconfirm.Trigger asChild>
+          <Button variant="primary">Trigger</Button>
+        </Popconfirm.Trigger>
+        <Popconfirm.Content>
+          <Popconfirm.Body>Are you sure you want to proceed with this action</Popconfirm.Body>
+
+          <Popconfirm.Footer>
+            <Popconfirm.Cancel />
+            <Popconfirm.Confirm />
+          </Popconfirm.Footer>
+        </Popconfirm.Content>
+      </Popconfirm>
+    </div>
+  );
+};
+
+export const SkipPopconfirm: Story = {
+  args: {
+    onConfirm: () => {
+      alert('Confirmed!');
+    },
+  },
+  render: SkipPopoverDemo,
+};
+
+export const AsyncConfirm: Story = {
+  args: {
+    onConfirm: () => new Promise((resolve) => setTimeout(resolve, 3000)),
+  },
+  render: (props) => (
+    <Popconfirm {...props}>
+      <Popconfirm.Trigger asChild>
+        <Button variant="primary">Trigger</Button>
+      </Popconfirm.Trigger>
+      <Popconfirm.Content>
+        <Popconfirm.Body>Are you sure you want to proceed with this action</Popconfirm.Body>
+
+        <Popconfirm.Footer>
+          <Popconfirm.Cancel />
+          <Popconfirm.Confirm />
+        </Popconfirm.Footer>
+      </Popconfirm.Content>
+    </Popconfirm>
+  ),
+};
+
+const ControlledDemo = (props: ComponentProps<typeof Popconfirm>) => {
+  const [open, setIsOpen] = useState(false);
+
+  return (
+    <Popconfirm {...props} open={open} onOpenChange={setIsOpen}>
+      <Popconfirm.Trigger asChild>
+        <Button variant="primary">Trigger</Button>
+      </Popconfirm.Trigger>
+      <Popconfirm.Content>
+        <Popconfirm.Body>Are you sure you want to proceed with this action</Popconfirm.Body>
+
+        <Popconfirm.Footer>
+          <Popconfirm.Cancel />
+          <Popconfirm.Confirm />
+        </Popconfirm.Footer>
+      </Popconfirm.Content>
+    </Popconfirm>
+  );
+};
+
+export const Controlled: Story = {
+  render: ControlledDemo,
+};
+
+export const CustomButtons: Story = {
+  render: (props) => (
+    <Popconfirm {...props}>
+      <Popconfirm.Trigger asChild>
+        <Button variant="primary">Trigger</Button>
+      </Popconfirm.Trigger>
+      <Popconfirm.Content>
+        <Popconfirm.Body>Are you sure you want to proceed with this action</Popconfirm.Body>
+
+        <Popconfirm.Footer className="tw-flex tw-justify-end">
+          <Popconfirm.Cancel asChild>
+            <Button variant="outline" size="icon" icon="cancel" />
+          </Popconfirm.Cancel>
+
+          <Popconfirm.Confirm asChild>
+            <Button size="icon" icon="rocket" />
+          </Popconfirm.Confirm>
+        </Popconfirm.Footer>
+      </Popconfirm.Content>
+    </Popconfirm>
+  ),
+};
+
+export const WithoutCancel: Story = {
+  args: {
+    variant: 'danger',
+  },
+  render: (props) => (
+    <Popconfirm {...props}>
+      <Popconfirm.Trigger asChild>
+        <Button variant="danger">Trigger</Button>
+      </Popconfirm.Trigger>
+      <Popconfirm.Content>
+        <Popconfirm.Body>Are you sure you want to delete this branch?</Popconfirm.Body>
+
+        <Popconfirm.Footer>
+          <Popconfirm.Confirm />
+        </Popconfirm.Footer>
+      </Popconfirm.Content>
+    </Popconfirm>
+  ),
+};
+
+export const InModal: Story = {
+  args: {
+    variant: 'danger',
+  },
+  render: (props) => (
+    <Modal>
+      <Modal.Trigger asChild>
+        <Button type="button">Open Modal</Button>
+      </Modal.Trigger>
+      <Modal.Content>
+        <Modal.Body className="tw-flex tw-justify-center">
+          <Popconfirm {...props}>
+            <Popconfirm.Trigger asChild>
+              <Button icon="trash" variant="danger" size="icon" />
+            </Popconfirm.Trigger>
+            <Popconfirm.Content>
+              <Popconfirm.Body>Are you sure you want to delete this branch?</Popconfirm.Body>
+
+              <Popconfirm.Footer>
+                <Popconfirm.Cancel />
+                <Popconfirm.Confirm />
+              </Popconfirm.Footer>
+            </Popconfirm.Content>
+          </Popconfirm>
+        </Modal.Body>
+        <Modal.Footer>
+          <Modal.Close asChild>
+            <Button type="button" variant="primary" className="tw-w-full">
+              Close
+            </Button>
+          </Modal.Close>
+        </Modal.Footer>
+      </Modal.Content>
+    </Modal>
+  ),
+};
+
+export const InDropdownMenu: Story = {
+  render: (props) => (
+    <DropdownMenu>
+      <DropdownMenu.Trigger asChild>
+        <Button type="button">Open Dropdown menu</Button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        <DropdownMenu.Group>
+          <Popconfirm {...props} variant="danger">
+            <Popconfirm.Trigger asChild>
+              <DropdownMenu.Item icon="trash" asModalTrigger>
+                Delete Task
+              </DropdownMenu.Item>
+            </Popconfirm.Trigger>
+            <Popconfirm.Content side="left">
+              <Popconfirm.Body>Are you sure you want to delte this task?</Popconfirm.Body>
+              <Popconfirm.Footer>
+                <Popconfirm.Cancel />
+                <Popconfirm.Confirm />
+              </Popconfirm.Footer>
+            </Popconfirm.Content>
+          </Popconfirm>
+
+          <Popconfirm {...props}>
+            <Popconfirm.Trigger asChild>
+              <DropdownMenu.Item asModalTrigger icon="check">
+                Confirm
+              </DropdownMenu.Item>
+            </Popconfirm.Trigger>
+            <Popconfirm.Content side="left">
+              <Popconfirm.Body>Are you sure you want to continue?</Popconfirm.Body>
+              <Popconfirm.Footer>
+                <Popconfirm.Cancel />
+                <Popconfirm.Confirm />
+              </Popconfirm.Footer>
+            </Popconfirm.Content>
+          </Popconfirm>
+        </DropdownMenu.Group>
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  ),
+};

package/src/components/Popconfirm/Popconfirm.tsx

@@ -0,0 +1,82 @@
+import { useMemo, useRef, useState } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
+
+import { Popover } from '../Popover';
+
+import { PopconfirmContextProvider, type PopconfirmContextType } from './context';
+import { PopconfirmBody } from './PopconfirmBody';
+import { PopconfirmCancel } from './PopconfirmCancel';
+import { PopconfirmConfirm } from './PopconfirmConfirm';
+import { PopconfirmContent } from './PopconfirmContent';
+import { PopconfirmFooter } from './PopconfirmFooter';
+import { PopconfirmTrigger } from './PopconfirmTrigger';
+
+const noop = () => void 0;
+
+type Props = {
+  children: ReactNode;
+  skipAsyncWait?: boolean;
+} & ComponentProps<typeof Popover> &
+  Omit<Partial<PopconfirmContextType>, 'isLoading'>;
+
+export const Popconfirm = ({
+  children,
+  onConfirm = noop,
+  onCancel = noop,
+  variant = 'confirm',
+  enabled = true,
+  onOpenChange = noop,
+  open,
+  skipAsyncWait = false,
+  ...rest
+}: Props) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const confirmRef = useRef(onConfirm);
+  const cancelRef = useRef(onCancel);
+  confirmRef.current = onConfirm;
+  cancelRef.current = onCancel;
+
+  const handleOnOpenChange = (open: boolean) => {
+    setIsOpen(open);
+    onOpenChange(open);
+  };
+
+  const context = useMemo<PopconfirmContextType>(
+    () => ({
+      variant,
+      isLoading,
+      enabled,
+      onConfirm: (event) => {
+        const result = confirmRef.current(event);
+
+        if (!(result instanceof Promise) || skipAsyncWait) return;
+
+        event.preventDefault();
+        setIsLoading(true);
+        result.finally(() => {
+          setIsLoading(false);
+          setIsOpen(false);
+        });
+      },
+      onCancel: (event) => {
+        cancelRef.current(event);
+      },
+    }),
+    [variant, isLoading, enabled, skipAsyncWait],
+  );
+
+  return (
+    <Popover {...rest} open={open || isOpen} onOpenChange={handleOnOpenChange}>
+      <PopconfirmContextProvider value={context}>{children}</PopconfirmContextProvider>
+    </Popover>
+  );
+};
+
+Popconfirm.Confirm = PopconfirmConfirm;
+Popconfirm.Cancel = PopconfirmCancel;
+Popconfirm.Footer = PopconfirmFooter;
+Popconfirm.Content = PopconfirmContent;
+Popconfirm.Body = PopconfirmBody;
+Popconfirm.Trigger = PopconfirmTrigger;

package/src/components/Popconfirm/PopconfirmBody.tsx

@@ -0,0 +1,5 @@
+import type { ComponentProps } from 'react';
+
+type Props = ComponentProps<'div'>;
+
+export const PopconfirmBody = (props: Props) => <div {...props} />;

package/src/components/Popconfirm/PopconfirmCancel.tsx

@@ -0,0 +1,45 @@
+import type { ComponentProps, ElementRef, ReactNode, Ref } from 'react';
+import { Slot } from '@radix-ui/react-slot';
+
+import { cn } from '../../utils';
+import { Button } from '../Button';
+import { Popover } from '../Popover';
+
+import { usePopconfirmContext } from './context';
+
+type SlotProps = { asChild: true } & ComponentProps<'button'>;
+type ButtonProps = { asChild?: false; children?: ReactNode } & Omit<
+  ComponentProps<typeof Button>,
+  'children'
+>;
+type Props = SlotProps | ButtonProps;
+
+export const PopconfirmCancel = ({
+  ref,
+  onClick,
+  children,
+  asChild,
+  className,
+  ...props
+}: Props & { ref?: Ref<ElementRef<'button'>> }) => {
+  const { onCancel, isLoading } = usePopconfirmContext();
+
+  const handleClick: ComponentProps<'button'>['onClick'] = (event) => {
+    onClick?.(event);
+    onCancel(event);
+  };
+
+  return (
+    <Popover.Close asChild onClick={handleClick} disabled={isLoading}>
+      {asChild ? (
+        <Slot {...props} ref={ref} className={className}>
+          {children}
+        </Slot>
+      ) : (
+        <Button variant="outline" size="small" {...props} ref={ref} className={cn(className)}>
+          {children ?? 'Cancel'}
+        </Button>
+      )}
+    </Popover.Close>
+  );
+};

package/src/components/Popconfirm/PopconfirmConfirm.tsx

@@ -0,0 +1,57 @@
+import type { ComponentProps, ElementRef, ReactNode, Ref } from 'react';
+import { Slot } from '@radix-ui/react-slot';
+
+import { cn } from '../../utils';
+import { Button } from '../Button/Button';
+import { Popover } from '../Popover';
+
+import { usePopconfirmContext } from './context';
+
+type SlotProps = { asChild: true } & ComponentProps<'button'>;
+type ButtonProps = { asChild?: false; children?: ReactNode } & Omit<
+  ComponentProps<typeof Button>,
+  'children' | 'isLoading'
+>;
+type Props = SlotProps | ButtonProps;
+
+export const PopconfirmConfirm = ({
+  ref,
+  onClick,
+  children,
+  asChild,
+  className,
+  ...props
+}: Props & { ref?: Ref<ElementRef<'button'>> }) => {
+  const { onConfirm, variant, isLoading } = usePopconfirmContext();
+
+  const handleOnClick: ComponentProps<'button'>['onClick'] = (event) => {
+    onClick?.(event);
+    onConfirm(event);
+  };
+
+  const defaultLabel = (() => {
+    if (children) return children;
+    return variant === 'danger' ? 'Delete' : 'Confirm';
+  })();
+
+  return (
+    <Popover.Close asChild onClick={handleOnClick} disabled={isLoading} data-loading={isLoading}>
+      {asChild ? (
+        <Slot {...props} ref={ref} className={className}>
+          {children}
+        </Slot>
+      ) : (
+        <Button
+          size="small"
+          variant={variant === 'danger' ? 'danger' : 'primary'}
+          {...props}
+          ref={ref}
+          className={cn('tw-flex-1', className)}
+          isLoading={isLoading}
+        >
+          {defaultLabel}
+        </Button>
+      )}
+    </Popover.Close>
+  );
+};

package/src/components/Popconfirm/PopconfirmContent.tsx

@@ -0,0 +1,33 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '../../utils';
+import { Popover } from '../Popover';
+
+import { usePopconfirmContext } from './context';
+
+type Props = Omit<ComponentProps<typeof Popover.Content>, 'showArrow'>;
+
+export const PopconfirmContent = ({ className, onInteractOutside, ...props }: Props) => {
+  const { isLoading } = usePopconfirmContext();
+
+  const handleOnInteractOutside: Props['onInteractOutside'] = (event) => {
+    if (isLoading) event.preventDefault();
+    onInteractOutside?.(event);
+  };
+
+  return (
+    <Popover.Content
+      {...props}
+      onInteractOutside={handleOnInteractOutside}
+      className={cn(
+        'tw-flex',
+        'tw-flex-col',
+        'tw-gap-2',
+        'tw-gap-3',
+        'tw-px-4 ',
+        'tw-py-3',
+        className,
+      )}
+    />
+  );
+};

package/src/components/Popconfirm/PopconfirmFooter.tsx

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

package/src/components/Popconfirm/PopconfirmTrigger.tsx

@@ -0,0 +1,22 @@
+import type { ComponentProps, MouseEventHandler } from 'react';
+
+import { Popover } from '../Popover';
+
+import { usePopconfirmContext } from './context';
+
+type Props = ComponentProps<typeof Popover.Trigger>;
+
+export const PopconfirmTrigger = ({ onClick, ...props }: Props) => {
+  const { enabled, onConfirm } = usePopconfirmContext();
+
+  const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {
+    if (!enabled) {
+      event.preventDefault();
+      onConfirm(event);
+    }
+
+    onClick?.(event);
+  };
+
+  return <Popover.Trigger {...props} onClick={handleClick} />;
+};