@keboola/design 2.0.1 → 2.1.0

package/src/components/Pagination/PaginationItem.tsx

@@ -1,9 +0,0 @@
-import type { ComponentProps } from 'react';
-
-import { cn } from '../../utils';
-
-type Props = ComponentProps<'li'>;
-
-export const PaginationItem = ({ className, ...props }: Props) => (
-  <li className={cn('tw-list-none', className)} {...props} />
-);

package/src/components/Pagination/PaginationNext.tsx

@@ -1,20 +0,0 @@
-import type { ComponentProps } from 'react';
-
-import { ChevronRight } from '../../icons';
-import { cn } from '../../utils';
-
-import { PaginationButton } from './PaginationButton';
-
-type Props = ComponentProps<typeof PaginationButton>;
-
-export const PaginationNext = ({ children, className, ...props }: Props) => (
-  <PaginationButton
-    {...props}
-    aria-label="Go to next page"
-    size="medium"
-    className={cn('tw-flex-row-reverse', className)}
-  >
-    <ChevronRight className="tw-size-5" />
-    {children ?? 'Next'}
-  </PaginationButton>
-);

package/src/components/Pagination/PaginationPrevious.tsx

@@ -1,14 +0,0 @@
-import type { ComponentProps } from 'react';
-
-import { ChevronLeft } from '../../icons';
-
-import { PaginationButton } from './PaginationButton';
-
-type Props = ComponentProps<typeof PaginationButton>;
-
-export const PaginationPrevious = ({ children, ...props }: Props) => (
-  <PaginationButton {...props} size="medium" aria-label="Go to previous page">
-    <ChevronLeft className="tw-size-5" />
-    {children ?? 'Previous'}
-  </PaginationButton>
-);

package/src/components/Pagination/index.ts

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

package/src/components/PanelWithDetails.stories.tsx

@@ -1,28 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { PanelWithDetails } from './PanelWithDetails';
-
-const meta: Meta<typeof PanelWithDetails> = {
-  component: PanelWithDetails,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof PanelWithDetails>;
-
-const commonArgs = {
-  children: (
-    <div className="tw-px-4 tw-py-3">
-      The extended attribute table file is full. The requested resource is in use. The file type
-      being saved or retrieved has been blocked.
-    </div>
-  ),
-} as const;
-
-export const Top: Story = {
-  args: { ...commonArgs, placement: 'top' },
-};
-
-export const Bottom: Story = {
-  args: { ...commonArgs, placement: 'bottom' },
-};

package/src/components/PanelWithDetails.tsx

@@ -1,65 +0,0 @@
-import { useState } from 'react';
-import type { KeyboardEvent, PropsWithChildren } from 'react';
-
-import { keyCodes } from '../constants/keyCodes';
-import { ChevronDown } from '../icons';
-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">
-            <ChevronDown
-              className={cn(
-                'tw-size-5',
-                !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

@@ -1,373 +0,0 @@
-import { type ComponentProps, useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { action } from 'storybook/actions';
-
-import { Check, Rocket, Trash2, X } from '@keboola/design/icons';
-
-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">
-              <X className="tw-size-4" />
-            </Button>
-          </Popconfirm.Cancel>
-
-          <Popconfirm.Confirm asChild>
-            <Button size="icon">
-              <Rocket className="tw-size-4" />
-            </Button>
-          </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 variant="danger" size="icon">
-                <Trash2 className="tw-size-4" />
-              </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>
-        </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 asModalTrigger icon={<Trash2 className="tw-size-4" />}>
-                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 className="tw-size-4" />}>
-                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

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

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

package/src/components/Popconfirm/PopconfirmCancel.tsx

@@ -1,45 +0,0 @@
-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>
-  );
-};