@keboola/design 2.0.1 → 2.1.0

package/src/components/Modal/Modal.stories.tsx

@@ -1,680 +0,0 @@
-import { useReducer } from 'react';
-import type { ComponentProps, FormEventHandler } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { action } from 'storybook/actions';
-
-import { Rocket } from '@keboola/design/icons';
-
-import { Alert } from '../Alert';
-import { Button } from '../Button';
-import { ButtonGroup } from '../ButtonGroup';
-import { FormGroup } from '../FormGroup';
-import { Label } from '../Label';
-import { Tabs, TabsContent } from '../Tabs';
-
-import { Modal } from './Modal';
-import { ModalContent } from './ModalContent';
-
-const meta = {
-  component: Modal,
-} satisfies Meta<typeof Modal>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-const ModalDefault = (props: ComponentProps<typeof Modal>) => (
-  <Modal {...props}>
-    <Modal.Trigger asChild>
-      <Button>Open Modal</Button>
-    </Modal.Trigger>
-
-    <Modal.Content>
-      <Modal.Icon color="red" icon={<Rocket />} />
-      <Modal.Header title="Default Modal" description="Opens default modal">
-        <Alert variant="info">Additional Header stuff</Alert>
-      </Modal.Header>
-
-      <Modal.Body>
-        <p>Some contents...</p>
-        <p>Some contents...</p>
-        <p>Some contents...</p>
-      </Modal.Body>
-
-      <Modal.Footer>
-        <ButtonGroup variant="block">
-          <Modal.Close asChild>
-            <Button type="button" variant="secondary">
-              Close
-            </Button>
-          </Modal.Close>
-
-          <Button type="button">Ok</Button>
-        </ButtonGroup>
-      </Modal.Footer>
-    </Modal.Content>
-  </Modal>
-);
-
-/**
- * Default Modal component in uncontrolled mode __(Recommended)__
- */
-export const Default: Story = {
-  render: ModalDefault,
-};
-
-const ModalLongContent = (props: ComponentProps<typeof Modal>) => (
-  <Modal {...props}>
-    <Modal.Trigger asChild>
-      <Button>Open Modal</Button>
-    </Modal.Trigger>
-
-    <Modal.Content>
-      <Modal.Icon color="red" icon={<Rocket />} />
-      <Modal.Header title="Default Modal" description="Opens default modal">
-        <Alert variant="info">Addiitonal Header staff</Alert>
-      </Modal.Header>
-
-      <Modal.Body>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris fringilla, risus ut
-          imperdiet pellentesque, justo augue placerat dui, eget porta augue justo sed enim. Vivamus
-          dui nulla, interdum vitae dolor vitae, condimentum sagittis odio. Sed sit amet nisi
-          pulvinar, lacinia nibh at, pulvinar velit. Etiam arcu eros, consequat in volutpat nec,
-          scelerisque at risus. Donec nibh ipsum, tristique ut nisi vitae, auctor vulputate erat.
-          Fusce egestas augue eu nisl euismod, non mattis massa lacinia. Nulla facilisi. Mauris
-          gravida tincidunt tristique. Morbi sollicitudin laoreet enim, at rutrum libero volutpat
-          eu. Nunc accumsan viverra dolor, id dapibus tortor sodales sed. In sit amet viverra magna.
-          Suspendisse eget quam vulputate, imperdiet massa ac, volutpat sem. Ut sit amet tortor
-          mollis, imperdiet nisi vel, gravida urna. Mauris quis consectetur turpis. Phasellus vel
-          tortor ornare, finibus velit sed, vestibulum mauris. Suspendisse efficitur nulla enim,
-          eget congue urna iaculis ut. In hac habitasse platea dictumst. Mauris quis finibus sapien,
-          in pretium justo. Etiam gravida orci eget tincidunt ornare. Suspendisse eget malesuada
-          lorem. Fusce pretium orci tempor ante consectetur laoreet. Morbi placerat dignissim massa
-          sed rhoncus. Duis eu leo ac justo egestas faucibus. Quisque risus justo, mattis sed
-          lobortis et, fringilla eu nibh. Donec tempor arcu a est rhoncus, non tempor mauris tempor.
-          Etiam auctor aliquet ipsum, vitae tincidunt mauris aliquam sit amet. In fermentum molestie
-          felis, vel tincidunt mi sodales egestas. Fusce in nibh vitae tortor hendrerit mollis nec
-          et enim. Donec euismod orci eu consectetur volutpat. Vivamus at mauris eget elit aliquet
-          venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
-          cubilia curae; Cras lobortis, purus at dignissim viverra, tortor mauris lobortis urna,
-          consequat facilisis dolor lacus imperdiet est. In sit amet viverra est. Vestibulum a diam
-          a purus commodo gravida vitae eleifend dui. Pellentesque vitae eros ut libero sodales
-          vulputate et sed risus. Mauris et sapien efficitur, sollicitudin ipsum quis, volutpat
-          nisl. Mauris pellentesque, ipsum in accumsan laoreet, sem est mollis nibh, in dictum lacus
-          diam lacinia tellus. Quisque sit amet ante vitae odio congue molestie. Lorem ipsum dolor
-          sit amet, consectetur adipiscing elit. Phasellus ut quam ut nisl faucibus feugiat non id
-          urna. Pellentesque rutrum justo at egestas egestas. In elementum purus dapibus, dapibus
-          risus eget, viverra tortor. Pellentesque volutpat cursus faucibus. Vivamus laoreet, tellus
-          id fringilla luctus, elit tellus convallis mauris, non finibus nisl magna a libero.
-          Integer porta euismod pellentesque. Morbi porta accumsan nibh ut molestie. Proin mattis
-          eros sed mauris fringilla ornare. Suspendisse ut rutrum ligula. Sed in laoreet tortor, eu
-          congue elit. Morbi accumsan tincidunt arcu, vitae dapibus orci tincidunt sit amet. Duis
-          efficitur ipsum nec cursus feugiat. Etiam lacinia felis ut ligula suscipit vehicula.
-          Aliquam vitae luctus erat. Pellentesque lacinia ante et odio semper tincidunt. Quisque
-          volutpat sem in nunc faucibus, eget pulvinar nisi molestie. Etiam nec placerat eros. Donec
-          viverra eros porta imperdiet condimentum. Integer neque mauris, convallis in nisi at,
-          vestibulum porta lacus. Pellentesque tristique dictum felis, scelerisque pulvinar sem
-          semper sit amet. Sed sollicitudin maximus purus, sit amet lacinia enim aliquam
-          condimentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris fringilla,
-          risus ut imperdiet pellentesque, justo augue placerat dui, eget porta augue justo sed
-          enim. Vivamus dui nulla, interdum vitae dolor vitae, condimentum sagittis odio. Sed sit
-          amet nisi pulvinar, lacinia nibh at, pulvinar velit. Etiam arcu eros, consequat in
-          volutpat nec, scelerisque at risus. Donec nibh ipsum, tristique ut nisi vitae, auctor
-          vulputate erat. Fusce egestas augue eu nisl euismod, non mattis massa lacinia. Nulla
-          facilisi. Mauris gravida tincidunt tristique. Morbi sollicitudin laoreet enim, at rutrum
-          libero volutpat eu. Nunc accumsan viverra dolor, id dapibus tortor sodales sed. In sit
-          amet viverra magna. Suspendisse eget quam vulputate, imperdiet massa ac, volutpat sem. Ut
-          sit amet tortor mollis, imperdiet nisi vel, gravida urna. Mauris quis consectetur turpis.
-          Phasellus vel tortor ornare, finibus velit sed, vestibulum mauris. Suspendisse efficitur
-          nulla enim, eget congue urna iaculis ut. In hac habitasse platea dictumst. Mauris quis
-          finibus sapien, in pretium justo. Etiam gravida orci eget tincidunt ornare. Suspendisse
-          eget malesuada lorem. Fusce pretium orci tempor ante consectetur laoreet. Morbi placerat
-          dignissim massa sed rhoncus. Duis eu leo ac justo egestas faucibus. Quisque risus justo,
-          mattis sed lobortis et, fringilla eu nibh. Donec tempor arcu a est rhoncus, non tempor
-          mauris tempor. Etiam auctor aliquet ipsum, vitae tincidunt mauris aliquam sit amet. In
-          fermentum molestie felis, vel tincidunt mi sodales egestas. Fusce in nibh vitae tortor
-          hendrerit mollis nec et enim. Donec euismod orci eu consectetur volutpat. Vivamus at
-          mauris eget elit aliquet venenatis. Vestibulum ante ipsum primis in faucibus orci luctus
-          et ultrices posuere cubilia curae; Cras lobortis, purus at dignissim viverra, tortor
-          mauris lobortis urna, consequat facilisis dolor lacus imperdiet est. In sit amet viverra
-          est. Vestibulum a diam a purus commodo gravida vitae eleifend dui. Pellentesque vitae eros
-          ut libero sodales vulputate et sed risus. Mauris et sapien efficitur, sollicitudin ipsum
-          quis, volutpat nisl. Mauris pellentesque, ipsum in accumsan laoreet, sem est mollis nibh,
-          in dictum lacus diam lacinia tellus. Quisque sit amet ante vitae odio congue molestie.
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut quam ut nisl
-          faucibus feugiat non id urna. Pellentesque rutrum justo at egestas egestas. In elementum
-          purus dapibus, dapibus risus eget, viverra tortor. Pellentesque volutpat cursus faucibus.
-          Vivamus laoreet, tellus id fringilla luctus, elit tellus convallis mauris, non finibus
-          nisl magna a libero. Integer porta euismod pellentesque. Morbi porta accumsan nibh ut
-          molestie. Proin mattis eros sed mauris fringilla ornare. Suspendisse ut rutrum ligula. Sed
-          in laoreet tortor, eu congue elit. Morbi accumsan tincidunt arcu, vitae dapibus orci
-          tincidunt sit amet. Duis efficitur ipsum nec cursus feugiat. Etiam lacinia felis ut ligula
-          suscipit vehicula. Aliquam vitae luctus erat. Pellentesque lacinia ante et odio semper
-          tincidunt. Quisque volutpat sem in nunc faucibus, eget pulvinar nisi molestie. Etiam nec
-          placerat eros. Donec viverra eros porta imperdiet condimentum. Integer neque mauris,
-          convallis in nisi at, vestibulum porta lacus. Pellentesque tristique dictum felis,
-          scelerisque pulvinar sem semper sit amet. Sed sollicitudin maximus purus, sit amet lacinia
-          enim aliquam condimentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
-          fringilla, risus ut imperdiet pellentesque, justo augue placerat dui, eget porta augue
-          justo sed enim. Vivamus dui nulla, interdum vitae dolor vitae, condimentum sagittis odio.
-          Sed sit amet nisi pulvinar, lacinia nibh at, pulvinar velit. Etiam arcu eros, consequat in
-          volutpat nec, scelerisque at risus. Donec nibh ipsum, tristique ut nisi vitae, auctor
-          vulputate erat. Fusce egestas augue eu nisl euismod, non mattis massa lacinia. Nulla
-          facilisi. Mauris gravida tincidunt tristique. Morbi sollicitudin laoreet enim, at rutrum
-          libero volutpat eu. Nunc accumsan viverra dolor, id dapibus tortor sodales sed. In sit
-          amet viverra magna. Suspendisse eget quam vulputate, imperdiet massa ac, volutpat sem. Ut
-          sit amet tortor mollis, imperdiet nisi vel, gravida urna. Mauris quis consectetur turpis.
-          Phasellus vel tortor ornare, finibus velit sed, vestibulum mauris. Suspendisse efficitur
-          nulla enim, eget congue urna iaculis ut. In hac habitasse platea dictumst. Mauris quis
-          finibus sapien, in pretium justo. Etiam gravida orci eget tincidunt ornare. Suspendisse
-          eget malesuada lorem. Fusce pretium orci tempor ante consectetur laoreet. Morbi placerat
-          dignissim massa sed rhoncus. Duis eu leo ac justo egestas faucibus. Quisque risus justo,
-          mattis sed lobortis et, fringilla eu nibh. Donec tempor arcu a est rhoncus, non tempor
-          mauris tempor. Etiam auctor aliquet ipsum, vitae tincidunt mauris aliquam sit amet. In
-          fermentum molestie felis, vel tincidunt mi sodales egestas. Fusce in nibh vitae tortor
-          hendrerit mollis nec et enim. Donec euismod orci eu consectetur volutpat. Vivamus at
-          mauris eget elit aliquet venenatis. Vestibulum ante ipsum primis in faucibus orci luctus
-          et ultrices posuere cubilia curae; Cras lobortis, purus at dignissim viverra, tortor
-          mauris lobortis urna, consequat facilisis dolor lacus imperdiet est. In sit amet viverra
-          est. Vestibulum a diam a purus commodo gravida vitae eleifend dui. Pellentesque vitae eros
-          ut libero sodales vulputate et sed risus. Mauris et sapien efficitur, sollicitudin ipsum
-          quis, volutpat nisl. Mauris pellentesque, ipsum in accumsan laoreet, sem est mollis nibh,
-          in dictum lacus diam lacinia tellus. Quisque sit amet ante vitae odio congue molestie.
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut quam ut nisl
-          faucibus feugiat non id urna. Pellentesque rutrum justo at egestas egestas. In elementum
-          purus dapibus, dapibus risus eget, viverra tortor. Pellentesque volutpat cursus faucibus.
-          Vivamus laoreet, tellus id fringilla luctus, elit tellus convallis mauris, non finibus
-          nisl magna a libero. Integer porta euismod pellentesque. Morbi porta accumsan nibh ut
-          molestie. Proin mattis eros sed mauris fringilla ornare. Suspendisse ut rutrum ligula. Sed
-          in laoreet tortor, eu congue elit. Morbi accumsan tincidunt arcu, vitae dapibus orci
-          tincidunt sit amet. Duis efficitur ipsum nec cursus feugiat. Etiam lacinia felis ut ligula
-          suscipit vehicula. Aliquam vitae luctus erat. Pellentesque lacinia ante et odio semper
-          tincidunt. Quisque volutpat sem in nunc faucibus, eget pulvinar nisi molestie. Etiam nec
-          placerat eros. Donec viverra eros porta imperdiet condimentum. Integer neque mauris,
-          convallis in nisi at, vestibulum porta lacus. Pellentesque tristique dictum felis,
-          scelerisque pulvinar sem semper sit amet. Sed sollicitudin maximus purus, sit amet lacinia
-          enim aliquam condimentum.
-        </p>
-      </Modal.Body>
-
-      <Modal.Footer>
-        <ButtonGroup variant="block">
-          <Modal.Close asChild>
-            <Button type="button" variant="secondary">
-              Close
-            </Button>
-          </Modal.Close>
-
-          <Button type="button">Ok</Button>
-        </ButtonGroup>
-      </Modal.Footer>
-    </Modal.Content>
-  </Modal>
-);
-
-export const LongContent: Story = {
-  render: ModalLongContent,
-};
-
-const FORM_NAME = 'user-form';
-
-const ModalRemoteFormSubmission = (props: ComponentProps<typeof Modal>) => {
-  const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {
-    event.preventDefault();
-    const formData = new FormData(event.currentTarget);
-    const formValues = Object.fromEntries(formData.entries());
-    action('onSubmit')(formValues);
-  };
-
-  return (
-    <Modal {...props}>
-      <Modal.Trigger asChild>
-        <Button>Create User</Button>
-      </Modal.Trigger>
-
-      <Modal.Content>
-        <Modal.Icon color="red" icon={<Rocket />} />
-
-        <Modal.Header title="Crate User" description="Opens modal with remote form submission" />
-
-        <Modal.Body className="tw-flex tw-flex-col tw-gap-4">
-          <form onSubmit={handleSubmit} id={FORM_NAME}>
-            <FormGroup>
-              <Label htmlFor="name">Name</Label>
-              <FormGroup.TextInput name="name" id="name" variant="secondary" />
-            </FormGroup>
-          </form>
-        </Modal.Body>
-
-        <Modal.Footer>
-          <ButtonGroup variant="block">
-            <Modal.Close asChild>
-              <Button type="button" variant="secondary">
-                Close
-              </Button>
-            </Modal.Close>
-
-            <Button form={FORM_NAME} type="submit">
-              Save changes
-            </Button>
-          </ButtonGroup>
-        </Modal.Footer>
-      </Modal.Content>
-    </Modal>
-  );
-};
-
-/**
- * Modal with remote form submission
- * It is not recommended to wrap Modal.Body and Modal.Footer in a single form tag as it can break the styling, use remote a form submission.
- */
-export const RemoteFormSubmission: Story = {
-  render: ModalRemoteFormSubmission,
-};
-
-const ModalReusableOwnContentComponent = () => (
-  <>
-    <Modal.Header title="Reusable Modal With Own Content Component" />
-    <Modal.Body>Here defined reusable layout</Modal.Body>
-  </>
-);
-
-const ModalReusableWithOwnContentComponent = (props: Record<string, unknown>) => (
-  <Modal {...props}>
-    <Modal.Trigger asChild>
-      <Button>Open Modal</Button>
-    </Modal.Trigger>
-
-    <Modal.Content>
-      <ModalReusableOwnContentComponent />
-    </Modal.Content>
-  </Modal>
-);
-
-export const ReusableModalWithOwnContentComponent: Story = {
-  render: ModalReusableWithOwnContentComponent,
-};
-
-const ModalReusableTriggerAsChild = (props: ComponentProps<typeof Modal>) => (
-  <Modal>
-    <Modal.Trigger asChild>{props.children}</Modal.Trigger>
-    <ModalContent>
-      <Modal.Header title="Reusable Modal With Trigger as Child" />
-      <Modal.Body>
-        <p>Some contents...</p>
-        <p>Some contents...</p>
-        <p>Some contents...</p>
-      </Modal.Body>
-    </ModalContent>
-  </Modal>
-);
-
-export const ReusableModalWithTriggerAsChild: Story = {
-  render: (props) => (
-    <ModalReusableTriggerAsChild {...props}>
-      <Button>Open Modal</Button>
-    </ModalReusableTriggerAsChild>
-  ),
-};
-
-type StepProps = {
-  id: string;
-  onSubmit: FormEventHandler<HTMLFormElement>;
-  defaultValues?: Record<string, string> | null;
-};
-
-// Steps are exclusive, we can safely use the same id for each step
-const WIZARD_FORM_NAME = 'WIZARD_FORM_NAME';
-const FIRST_NAME_FIELD_NAME = 'firstName';
-const USERNAME_FIELD_NAME = 'username';
-const FIRST_STEP = 1;
-const LAST_STEP = 3;
-
-const Step1 = ({ id, onSubmit, defaultValues }: StepProps) => (
-  <form id={id} onSubmit={onSubmit}>
-    <FormGroup>
-      <Label htmlFor={FIRST_NAME_FIELD_NAME}>Fist Name</Label>
-      <FormGroup.TextInput
-        name={FIRST_NAME_FIELD_NAME}
-        defaultValue={defaultValues?.[FIRST_NAME_FIELD_NAME]}
-        placeholder="Enter your first name"
-      />
-    </FormGroup>
-  </form>
-);
-
-const Step2 = ({ id, onSubmit, defaultValues }: StepProps) => (
-  <form id={id} onSubmit={onSubmit}>
-    <FormGroup>
-      <Label htmlFor={USERNAME_FIELD_NAME}>Username</Label>
-      <FormGroup.TextInput
-        name={USERNAME_FIELD_NAME}
-        defaultValue={defaultValues?.[USERNAME_FIELD_NAME]}
-        placeholder="Enter your username"
-      />
-    </FormGroup>
-  </form>
-);
-
-type StepperState = {
-  step: number;
-  values: Record<number, Record<string, string>>;
-};
-
-type Action =
-  | {
-      type: 'NEXT';
-      values: Record<string, string>;
-    }
-  | {
-      type: 'PREVIOUS';
-    };
-
-const reducer = (state: StepperState, action: Action) => {
-  switch (action.type) {
-    case 'NEXT': {
-      const currStep = state.step;
-      return {
-        ...state,
-        step: Math.min(currStep + 1, LAST_STEP),
-        values: {
-          ...state.values,
-          [currStep]: action.values,
-        },
-      };
-    }
-    case 'PREVIOUS': {
-      return {
-        ...state,
-        step: Math.max(state.step - 1, FIRST_STEP),
-      };
-    }
-    default:
-      return state;
-  }
-};
-
-const ModalMultiStepContent = () => {
-  const [state, dispatch] = useReducer(reducer, {
-    step: 1,
-    values: {},
-  });
-  const isLastStep = state.step === LAST_STEP;
-  const isFirstStep = state.step === FIRST_STEP;
-
-  const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {
-    event.preventDefault();
-    const formData = new FormData(event.currentTarget);
-    const formValues = Object.fromEntries(formData.entries()) as Record<string, string>;
-    dispatch({ type: 'NEXT', values: formValues });
-  };
-
-  const handlePreviousClick = () => {
-    dispatch({ type: 'PREVIOUS' });
-  };
-
-  const handleSubmitClick = () => {
-    action('onSubmit')(state.values);
-  };
-
-  return (
-    <>
-      <Modal.Icon color="blue" icon={<Rocket />} />
-      <Modal.Header title="Wizard Form" description="Opens modal with multi-step form" />
-
-      <Modal.Body>
-        {state.step === 1 && (
-          <Step1
-            id={WIZARD_FORM_NAME}
-            onSubmit={handleSubmit}
-            defaultValues={state.values?.[state.step]}
-          />
-        )}
-        {state.step === 2 && (
-          <Step2
-            id={WIZARD_FORM_NAME}
-            onSubmit={handleSubmit}
-            defaultValues={state.values?.[state.step]}
-          />
-        )}
-
-        {state.step === 3 && (
-          <>
-            <h3>Wizard is Done</h3>
-            <pre>{JSON.stringify(state.values, null, 4)}</pre>
-          </>
-        )}
-      </Modal.Body>
-
-      <Modal.Footer>
-        <ButtonGroup variant="block">
-          <Button type="button" onClick={handlePreviousClick} disabled={isFirstStep}>
-            Previous
-          </Button>
-
-          {isLastStep ? (
-            <Button type="button" onClick={handleSubmitClick}>
-              Submit
-            </Button>
-          ) : (
-            <Button form={WIZARD_FORM_NAME} type="submit">
-              Next
-            </Button>
-          )}
-        </ButtonGroup>
-      </Modal.Footer>
-    </>
-  );
-};
-
-/**
- * Example of a multi-step (wizard form) inside modal.
- * 1. State should be manged in a component inside Modal.Content, which is re-mounted on each open. No need to for state reset.
- * 2. If state reset is needed, you can use `<Modal.Content onEscapeKeyDown={} onPointerDownOutside={}/>` callbacks.
- */
-export const WizardFormInsideModal: Story = {
-  render: (props) => (
-    <Modal {...props}>
-      <Modal.Trigger asChild>
-        <Button>Open modal</Button>
-      </Modal.Trigger>
-
-      <Modal.Content>
-        <ModalMultiStepContent />
-      </Modal.Content>
-    </Modal>
-  ),
-};
-
-const ModalMediumSize = (props: ComponentProps<typeof Modal>) => (
-  <Modal {...props}>
-    <Modal.Trigger asChild>
-      <Button>Open Modal</Button>
-    </Modal.Trigger>
-    <Modal.Content>
-      <Modal.Header title="Medium Modal" description="This is a medium-sized modal (default)" />
-      <Modal.Body>
-        <p>This modal uses the default medium size (max-width: 672px / 42rem).</p>
-        <p>Some contents...</p>
-        <p>Some contents...</p>
-      </Modal.Body>
-      <Modal.Footer>
-        <ButtonGroup variant="block">
-          <Modal.Close asChild>
-            <Button type="button" variant="secondary">
-              Close
-            </Button>
-          </Modal.Close>
-          <Button type="button">Ok</Button>
-        </ButtonGroup>
-      </Modal.Footer>
-    </Modal.Content>
-  </Modal>
-);
-
-/**
- * Modal with medium size (default)
- */
-export const MediumSize: Story = {
-  render: ModalMediumSize,
-};
-
-const ModalLargeSize = (props: ComponentProps<typeof Modal>) => (
-  <Modal {...props}>
-    <Modal.Trigger asChild>
-      <Button>Open Modal</Button>
-    </Modal.Trigger>
-    <Modal.Content size="large">
-      <Modal.Header title="Large Modal" description="This is a large-sized modal" />
-      <Modal.Body>
-        <p>This modal uses the large size (max-width: 896px / 56rem).</p>
-        <p>
-          Large modals are useful for content that needs more horizontal space, such as wide forms,
-          tables, or detailed information displays.
-        </p>
-        <p>Some contents...</p>
-      </Modal.Body>
-      <Modal.Footer>
-        <ButtonGroup variant="block">
-          <Modal.Close asChild>
-            <Button type="button" variant="secondary">
-              Close
-            </Button>
-          </Modal.Close>
-          <Button type="button">Ok</Button>
-        </ButtonGroup>
-      </Modal.Footer>
-    </Modal.Content>
-  </Modal>
-);
-
-/**
- * Modal with large size
- */
-export const LargeSize: Story = {
-  render: ModalLargeSize,
-};
-
-const ModalWithImageIcon = (props: ComponentProps<typeof Modal>) => (
-  <Modal {...props}>
-    <Modal.Trigger asChild>
-      <Button>Open Modal</Button>
-    </Modal.Trigger>
-    <Modal.Content>
-      <Modal.Icon
-        iconUrl="https://ui.keboola-assets.com/developer-portal/icons/keboola.ex-db-snowflake/64/1576250365598.png"
-        iconAlt="Snowflake extractor"
-      />
-      <Modal.Header
-        title="Modal with Image Icon"
-        description="This modal uses an image URL instead of a FontAwesome icon"
-      />
-      <Modal.Body>
-        <p>The icon displays a custom image from a URL with a white background and shadow.</p>
-        <p>You can optionally provide an iconAlt prop for accessibility.</p>
-      </Modal.Body>
-      <Modal.Footer>
-        <ButtonGroup variant="block">
-          <Modal.Close asChild>
-            <Button type="button" variant="secondary">
-              Close
-            </Button>
-          </Modal.Close>
-          <Button type="button">Ok</Button>
-        </ButtonGroup>
-      </Modal.Footer>
-    </Modal.Content>
-  </Modal>
-);
-
-/**
- * Modal with an image icon (iconUrl) instead of a FontAwesome icon.
- * By default, the image icon has a white background with shadow.
- */
-export const WithImageIcon: Story = {
-  render: ModalWithImageIcon,
-};
-
-const ModalWithImageIconError = (props: ComponentProps<typeof Modal>) => (
-  <Modal {...props}>
-    <Modal.Trigger asChild>
-      <Button>Open Modal</Button>
-    </Modal.Trigger>
-    <Modal.Content>
-      <Modal.Icon iconUrl="xxx" />
-      <Modal.Header
-        title="Modal with Failed Image"
-        description="The icon is hidden because the image failed to load"
-      />
-      <Modal.Body>
-        <p>When the image URL is invalid or fails to load, the icon is automatically hidden.</p>
-      </Modal.Body>
-      <Modal.Footer>
-        <ButtonGroup variant="block">
-          <Modal.Close asChild>
-            <Button type="button" variant="secondary">
-              Close
-            </Button>
-          </Modal.Close>
-          <Button type="button">Ok</Button>
-        </ButtonGroup>
-      </Modal.Footer>
-    </Modal.Content>
-  </Modal>
-);
-
-/**
- * Modal with an image icon that fails to load.
- * The icon is hidden when the image cannot be loaded.
- */
-export const WithImageIconError: Story = {
-  render: ModalWithImageIconError,
-};
-
-const ModalWithTabs = (props: ComponentProps<typeof Modal>) => (
-  <Modal {...props}>
-    <Modal.Trigger asChild>
-      <Button>Open Modal</Button>
-    </Modal.Trigger>
-    <Modal.Content>
-      <Modal.Header
-        title="Modal With Tabs"
-        description="Header border collapses automatically because Tabs render their own bottom border."
-      />
-      <Modal.Body>
-        <Tabs
-          triggers={[
-            { value: 'first', title: 'First Tab' },
-            { value: 'second', title: 'Second Tab' },
-          ]}
-        >
-          <TabsContent value="first">
-            <p>Content of the first tab.</p>
-          </TabsContent>
-          <TabsContent value="second">
-            <p>Content of the second tab.</p>
-          </TabsContent>
-        </Tabs>
-      </Modal.Body>
-      <Modal.Footer>
-        <ButtonGroup variant="block">
-          <Modal.Close asChild>
-            <Button type="button" variant="secondary">
-              Close
-            </Button>
-          </Modal.Close>
-          <Button type="button">Ok</Button>
-        </ButtonGroup>
-      </Modal.Footer>
-    </Modal.Content>
-  </Modal>
-);
-
-/**
- * Modal with Tabs inside the body — Modal.Header automatically drops its bottom border
- * and padding so the Tabs' own bottom border is the single visual separator.
- */
-export const WithTabs: Story = {
-  render: ModalWithTabs,
-};