@arbor-education/design-system.components 0.1.5 → 0.2.1

package/src/components/modal/modalManager/ModalManager.stories.tsx

@@ -0,0 +1,497 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ModalManager } from './ModalManager';
+import { ModalUtils } from '../../../utils/ModalUtils';
+import { Button } from '../../button/Button';
+import { Section } from '../../section/Section';
+import { FormField } from '../../formField/FormField';
+import { generateUuid } from '../../../utils/generateUuid';
+import { Modal } from '../Modal';
+import { fn } from 'storybook/test';
+import { Icon } from 'Components/icon/Icon';
+
+const meta: Meta = {
+  title: 'Components/Modals/ModalManager',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'The ModalManager is a container that manages the display of modals. It listens for events to add or remove modals.',
+      },
+    },
+  },
+
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+let modalCount = 0;
+
+const addModalWithContent = (content: React.ReactNode) => {
+  modalCount++;
+  ModalUtils.addModal({
+    children: content,
+  });
+};
+
+const removeModal = () => {
+  if (modalCount > 0) {
+    modalCount--;
+  }
+  ModalUtils.removeModal();
+};
+
+export const Default: Story = {
+  render: () => (
+    <>
+      <ModalManager />
+      <div style={{ padding: '1rem', display: 'flex', gap: '1rem' }}>
+        <Button
+          onClick={() =>
+            addModalWithContent(
+              <>
+                <Modal.Header>
+                  <Modal.Title>Simple Modal</Modal.Title>
+                </Modal.Header>
+                <Modal.Body>
+                  <p>This is a simple modal with basic content.</p>
+                </Modal.Body>
+              </>,
+            )}
+        >
+          Open Simple Modal
+        </Button>
+      </div>
+    </>
+  ),
+};
+
+export const WithHeaderAndFooter: Story = {
+  render: () => {
+    const handleSave = () => {
+      alert('Save clicked!');
+      ModalUtils.removeModal();
+    };
+
+    const handleCancel = () => {
+      ModalUtils.removeModal();
+    };
+
+    return (
+      <>
+        <ModalManager />
+        <div style={{ padding: '1rem', display: 'flex', gap: '1rem' }}>
+          <Button
+            onClick={() =>
+              addModalWithContent(
+                <>
+                  <Modal.Header>
+                    <Modal.Title>Modal with Header and Footer</Modal.Title>
+                  </Modal.Header>
+                  <Modal.Body>
+                    <p>This modal has both a header with a close button and a footer with action buttons.</p>
+                  </Modal.Body>
+                  <Modal.Footer>
+                    <div style={{ display: 'flex', gap: '1rem', justifyContent: 'flex-end' }}>
+                      <Button variant="secondary" onClick={handleCancel}>
+                        Cancel
+                      </Button>
+                      <Button variant="primary" onClick={handleSave}>
+                        Save Changes
+                      </Button>
+                    </div>
+                  </Modal.Footer>
+                </>,
+              )}
+          >
+            Open Modal with Footer
+          </Button>
+        </div>
+      </>
+    );
+  },
+};
+
+export const WithSections: Story = {
+  render: () => (
+    <>
+      <ModalManager />
+      <div style={{ padding: '1rem', display: 'flex', gap: '1rem' }}>
+        <Button
+          onClick={() =>
+            addModalWithContent(
+              <>
+                <Modal.Header>
+                  <Modal.Title>Modal with Sections</Modal.Title>
+                </Modal.Header>
+                <Modal.Body>
+                  <Section title="Section 1" collapsible>
+                    <p>
+                      Aliquip ea tempor officia irure do qui culpa. Laborum proident laboris aliqua ad Lorem eiusmod fugiat dolore qui occaecat adipisicing.
+                      Dolore quis nisi occaecat commodo labore ad nulla aliquip in. Enim labore nisi laborum nostrud officia ad nulla ut quis.
+                      Aute excepteur quis amet aliquip. Excepteur Lorem cupidatat adipisicing consectetur ipsum Lorem.
+                    </p>
+                  </Section>
+                  <Section title="Section 2" collapsible collapsed>
+                    <p>
+                      Veniam adipisicing culpa id esse duis in officia consequat veniam ad ullamco sint sunt anim.
+                      Incididunt exercitation dolor Lorem anim aute ad deserunt. Nulla culpa sint aliqua ea Lorem sint.
+                      Elit sit consectetur minim cillum consectetur pariatur Lorem labore consectetur nisi consectetur officia exercitation.
+                      Est consectetur commodo deserunt ipsum aliqua occaecat qui sunt consectetur.
+                    </p>
+                  </Section>
+                  <Section title="Section 3" collapsible>
+                    <p>
+                      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
+                      totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+                    </p>
+                  </Section>
+                </Modal.Body>
+              </>,
+            )}
+        >
+          Open Modal with Sections
+        </Button>
+      </div>
+    </>
+  ),
+};
+
+export const WithFormFields: Story = {
+  render: () => {
+    const handleSubmit = () => {
+      alert('Form submitted!');
+      ModalUtils.removeModal();
+    };
+
+    return (
+      <>
+        <ModalManager />
+        <div style={{ padding: '1rem', display: 'flex', gap: '1rem' }}>
+          <Button
+            onClick={() =>
+              addModalWithContent(
+                <>
+                  <Modal.Header>
+                    <Modal.Title>User Information Form</Modal.Title>
+                  </Modal.Header>
+                  <Modal.Body>
+                    <FormField
+                      id={generateUuid()}
+                      label="Your Name"
+                      inputType="text"
+                      inputProps={{ placeholder: 'e.g. Jane Doe' }}
+                      fieldDescription="Please enter your full name."
+                    />
+                    <FormField
+                      id={generateUuid()}
+                      label="Email Address"
+                      inputType="text"
+                      inputProps={{ placeholder: 'e.g. jane@example.com', type: 'email' }}
+                    />
+                    <FormField
+                      id={generateUuid()}
+                      label="Message"
+                      inputType="textarea"
+                      inputProps={{ placeholder: 'Enter your message here...', rows: 4 }}
+                      fieldDescription="Maximum 500 characters."
+                    />
+                    <FormField
+                      id={generateUuid()}
+                      label="Password"
+                      inputType="selectDropdown"
+                      inputProps={{
+                        options: [{ label: 'Option 1', value: 'option1' }, { label: 'Option 2', value: 'option2' }, { label: 'Option 3', value: 'option3' }],
+                        onSelectionChange: fn(),
+                      }}
+                    />
+                  </Modal.Body>
+                  <Modal.Footer>
+                    <div style={{ display: 'flex', gap: '1rem', justifyContent: 'flex-end' }}>
+                      <Button variant="secondary" onClick={removeModal}>
+                        Cancel
+                      </Button>
+                      <Button variant="primary" onClick={handleSubmit}>
+                        Submit
+                      </Button>
+                    </div>
+                  </Modal.Footer>
+                </>,
+              )}
+          >
+            Open Form Modal
+          </Button>
+        </div>
+      </>
+    );
+  },
+};
+
+export const WithScrollableContent: Story = {
+  render: () => {
+    const handleClose = () => {
+      ModalUtils.removeModal();
+    };
+
+    return (
+      <>
+        <ModalManager />
+        <div style={{ padding: '1rem', display: 'flex', gap: '1rem' }}>
+          <Button
+            onClick={() =>
+              addModalWithContent(
+                <>
+                  <Modal.Header>
+                    <Modal.Title>Long Content Modal</Modal.Title>
+                  </Modal.Header>
+                  <Modal.Body>
+                    <Section title="Introduction" collapsible>
+                      <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                      </p>
+                    </Section>
+                    <Section title="Details" collapsible>
+                      <p>
+                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                      </p>
+                      <FormField
+                        id={generateUuid()}
+                        label="Field 1"
+                        inputType="text"
+                        inputProps={{ placeholder: 'Enter value' }}
+                      />
+                      <FormField
+                        id={generateUuid()}
+                        label="Field 2"
+                        inputType="text"
+                        inputProps={{ placeholder: 'Enter value' }}
+                      />
+                    </Section>
+                    <Section title="Additional Information" collapsible>
+                      <p>
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
+                        totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+                        Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
+                        eos qui ratione voluptatem sequi nesciunt.
+                      </p>
+                      <FormField
+                        id={generateUuid()}
+                        label="Long Text Field"
+                        inputType="textarea"
+                        inputProps={{ placeholder: 'Enter long text', rows: 6 }}
+                      />
+                    </Section>
+                    <Section title="More Content" collapsible>
+                      <p>
+                        Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
+                        sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
+                        Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.
+                      </p>
+                      <FormField
+                        id={generateUuid()}
+                        label="Field 3"
+                        inputType="number"
+                        inputProps={{ placeholder: 'Enter number' }}
+                      />
+                      <FormField
+                        id={generateUuid()}
+                        label="Field 4"
+                        inputType="text"
+                        inputProps={{ placeholder: 'Enter value' }}
+                      />
+                    </Section>
+                    <Section title="Final Section" collapsible collapsed>
+                      <p>
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque
+                        corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
+                      </p>
+                      <FormField
+                        id={generateUuid()}
+                        label="Final Field"
+                        inputType="text"
+                        inputProps={{ placeholder: 'Enter value' }}
+                      />
+                    </Section>
+                  </Modal.Body>
+                  <Modal.Footer>
+                    <div style={{ display: 'flex', gap: '1rem', justifyContent: 'flex-end' }}>
+                      <Button variant="secondary" onClick={handleClose}>
+                        Close
+                      </Button>
+                      <Button variant="primary" onClick={handleClose}>
+                        Save
+                      </Button>
+                    </div>
+                  </Modal.Footer>
+                </>,
+              )}
+          >
+            Open Scrollable Modal
+          </Button>
+        </div>
+      </>
+    );
+  },
+};
+
+export const DestructiveAction: Story = {
+  render: () => {
+    const handleDelete = () => {
+      alert('Item deleted!');
+      ModalUtils.removeModal();
+    };
+
+    const handleCancel = () => {
+      ModalUtils.removeModal();
+    };
+
+    return (
+      <>
+        <ModalManager />
+        <div style={{ padding: '1rem', display: 'flex', gap: '1rem' }}>
+          <Button
+            onClick={() =>
+              addModalWithContent(
+                <>
+                  <Modal.Header>
+                    <Modal.Title>Confirm Deletion</Modal.Title>
+                  </Modal.Header>
+                  <Modal.Body>
+                    <p>Are you sure you want to delete this item? This action cannot be undone.</p>
+                    <p style={{ marginTop: '1rem', fontWeight: 'bold' }}>
+                      Item: Important Document.pdf
+                    </p>
+                  </Modal.Body>
+                  <Modal.Footer>
+                    <div style={{ display: 'flex', gap: '1rem', justifyContent: 'flex-end' }}>
+                      <Button variant="secondary" onClick={handleCancel}>
+                        Cancel
+                      </Button>
+                      <Button variant="primary-destructive" onClick={handleDelete}>
+                        Delete
+                      </Button>
+                    </div>
+                  </Modal.Footer>
+                </>,
+              )}
+          >
+            Open Deletion Confirmation Modal
+          </Button>
+        </div>
+      </>
+    );
+  },
+};
+
+export const SimpleConfirmation: Story = {
+  render: () => {
+    const handleConfirm = () => {
+      alert('Confirmed!');
+      ModalUtils.removeModal();
+    };
+
+    const handleCancel = () => {
+      ModalUtils.removeModal();
+    };
+
+    return (
+      <>
+        <ModalManager />
+        <div style={{ padding: '1rem', display: 'flex', gap: '1rem' }}>
+          <Button
+            onClick={() =>
+              addModalWithContent(
+                <>
+                  <Modal.Header>
+                    <Modal.Title>Confirm Action</Modal.Title>
+                  </Modal.Header>
+                  <Modal.Body>
+                    <p>Are you sure you want to proceed with this action?</p>
+                  </Modal.Body>
+                  <Modal.Footer>
+                    <div style={{ display: 'flex', gap: '1rem', justifyContent: 'flex-end' }}>
+                      <Button variant="secondary" onClick={handleCancel}>
+                        No
+                      </Button>
+                      <Button variant="primary" onClick={handleConfirm}>
+                        Yes
+                      </Button>
+                    </div>
+                  </Modal.Footer>
+                </>,
+              )}
+          >
+            Open Confirmation Modal
+          </Button>
+        </div>
+      </>
+    );
+  },
+};
+
+export const ExampleErrorModal: Story = {
+  render: () => {
+    const handleConfirm = () => {
+      ModalUtils.removeModal();
+    };
+
+    const handleCancel = () => {
+      ModalUtils.removeModal();
+    };
+    return (
+      <>
+        <ModalManager />
+        <div style={{ padding: '1rem', display: 'flex', gap: '1rem' }}>
+          <Button
+            onClick={() =>
+              addModalWithContent(
+                <>
+                  <Modal.Header>
+                    <Icon name="triangle-alert" size={24} color="var(--color-semantic-destructive-500)" />
+                    <Modal.Title>Sorry, we can’t find this page</Modal.Title>
+                  </Modal.Header>
+                  <Modal.Body>
+                    <span>
+                      <b>Please try finding the page using the navigation.</b>
+                      {' '}
+                      If you can't find what you're looking for, there are two options depending on your support plan:
+                    </span>
+                    <ul>
+                      <li>
+                        <b>Arbor supported:</b>
+                        {' '}
+                        Press here to send an email to our Support Team using our Contact Us form (the error ID will be added automatically).
+                      </li>
+                      <li>
+                        <b>Partner supported:</b>
+                        {' '}
+                        Please get in touch with your Support Partner, and let them know the error ID below.
+                      </li>
+                    </ul>
+                    <span>ID:f47ecbd4-319b-11f0-a5ae-06f9b8bc5d95</span>
+                  </Modal.Body>
+                  <Modal.Footer>
+                    <div style={{ display: 'flex', gap: '1rem', justifyContent: 'flex-end' }}>
+                      <Button variant="tertiary" onClick={handleCancel}>
+                        Close
+                      </Button>
+                      <Button variant="primary" onClick={handleConfirm}>
+                        Primary Action
+                      </Button>
+                    </div>
+                  </Modal.Footer>
+                </>,
+              )}
+          >
+            Open Deletion Confirmation Modal
+          </Button>
+        </div>
+      </>
+    );
+  },
+};