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

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

@@ -0,0 +1,255 @@
+import { describe, expect, test } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import { ModalManager } from './ModalManager';
+import { ModalUtils } from 'Utils/ModalUtils';
+import PubSub from 'Utils/PubSub';
+import { MODAL } from 'Utils/Constants';
+import '@testing-library/jest-dom/vitest';
+
+describe('ModalManager', () => {
+  test('renders without crashing', () => {
+    render(<ModalManager />);
+    const manager = document.querySelector('.ds-modal-manager');
+    expect(manager).toBeInTheDocument();
+  });
+
+  test('renders with initial modal prop', () => {
+    const modal = {
+      children: <div>Initial modal content</div>,
+    };
+
+    render(<ModalManager modal={modal} />);
+    expect(screen.getByText('Initial modal content')).toBeInTheDocument();
+  });
+
+  test('shows modal when ModalUtils.addModal is called', async () => {
+    render(<ModalManager />);
+
+    ModalUtils.addModal({
+      children: <div>Dynamic modal content</div>,
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Dynamic modal content')).toBeInTheDocument();
+    });
+  });
+
+  test('removes modal when ModalUtils.removeModal is called', async () => {
+    render(<ModalManager />);
+
+    ModalUtils.addModal({
+      children: <div>Modal to remove</div>,
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Modal to remove')).toBeInTheDocument();
+    });
+
+    ModalUtils.removeModal();
+
+    await waitFor(() => {
+      expect(screen.queryByText('Modal to remove')).not.toBeInTheDocument();
+    });
+  });
+
+  test('updates modal when ADD_MODAL event is published', async () => {
+    render(<ModalManager />);
+
+    PubSub.publish(MODAL.ADD_MODAL, {
+      children: <div>Published modal</div>,
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Published modal')).toBeInTheDocument();
+    });
+  });
+
+  test('removes modal when REMOVE_MODAL event is published', async () => {
+    render(<ModalManager />);
+
+    PubSub.publish(MODAL.ADD_MODAL, {
+      children: <div>Modal to be removed</div>,
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Modal to be removed')).toBeInTheDocument();
+    });
+
+    PubSub.publish(MODAL.REMOVE_MODAL);
+
+    await waitFor(() => {
+      expect(screen.queryByText('Modal to be removed')).not.toBeInTheDocument();
+    });
+  });
+
+  test('replaces modal when multiple ADD_MODAL events are published', async () => {
+    render(<ModalManager />);
+
+    PubSub.publish(MODAL.ADD_MODAL, {
+      children: <div>First modal</div>,
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('First modal')).toBeInTheDocument();
+    });
+
+    PubSub.publish(MODAL.ADD_MODAL, {
+      children: <div>Second modal</div>,
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Second modal')).toBeInTheDocument();
+      expect(screen.queryByText('First modal')).not.toBeInTheDocument();
+    });
+  });
+
+  test('no modal is rendered when no modal is set', () => {
+    render(<ModalManager />);
+
+    const overlay = document.querySelector('.ds-modal__overlay');
+    expect(overlay).not.toBeInTheDocument();
+  });
+
+  test('closeHandler removes the modal', async () => {
+    render(<ModalManager />);
+
+    ModalUtils.addModal({
+      children: <div>Modal with close</div>,
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Modal with close')).toBeInTheDocument();
+    });
+
+    // The close button should be present
+    const closeButton = screen.getByRole('button');
+    closeButton.click();
+
+    await waitFor(() => {
+      expect(screen.queryByText('Modal with close')).not.toBeInTheDocument();
+    });
+  });
+
+  test('passes modal props to Modal component', async () => {
+    render(<ModalManager />);
+
+    ModalUtils.addModal({
+      title: 'Test Title',
+      className: 'custom-modal-class',
+      children: <div>Modal content</div>,
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Title')).toBeInTheDocument();
+      const modalContainer = document.querySelector('.custom-modal-class');
+      expect(modalContainer).toBeInTheDocument();
+    });
+  });
+
+  test('updates when modal prop changes', async () => {
+    const { rerender } = render(
+      <ModalManager modal={{ children: <div>First modal</div> }} />,
+    );
+
+    expect(screen.getByText('First modal')).toBeInTheDocument();
+
+    rerender(<ModalManager modal={{ children: <div>Second modal</div> }} />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Second modal')).toBeInTheDocument();
+      expect(screen.queryByText('First modal')).not.toBeInTheDocument();
+    });
+  });
+
+  test('clears modal when modal prop is set to undefined', async () => {
+    const { rerender } = render(
+      <ModalManager modal={{ children: <div>Modal content</div> }} />,
+    );
+
+    expect(screen.getByText('Modal content')).toBeInTheDocument();
+
+    rerender(<ModalManager modal={undefined} />);
+
+    await waitFor(() => {
+      expect(screen.queryByText('Modal content')).not.toBeInTheDocument();
+    });
+  });
+
+  test('renders portal target as modalManagerContainerRef', async () => {
+    render(<ModalManager />);
+
+    const container = document.querySelector('.ds-modal-manager');
+    expect(container).toBeInTheDocument();
+
+    ModalUtils.addModal({
+      children: <div>Portal modal</div>,
+    });
+
+    await waitFor(() => {
+      const overlay = container!.querySelector('.ds-modal__overlay');
+      expect(overlay).toBeInTheDocument();
+    });
+  });
+
+  test('handles multiple sequential modal operations', async () => {
+    render(<ModalManager />);
+
+    // Add first modal
+    ModalUtils.addModal({ children: <div>Modal 1</div> });
+    await waitFor(() => {
+      expect(screen.getByText('Modal 1')).toBeInTheDocument();
+    });
+
+    // Remove it
+    ModalUtils.removeModal();
+    await waitFor(() => {
+      expect(screen.queryByText('Modal 1')).not.toBeInTheDocument();
+    });
+
+    // Add second modal
+    ModalUtils.addModal({ children: <div>Modal 2</div> });
+    await waitFor(() => {
+      expect(screen.getByText('Modal 2')).toBeInTheDocument();
+    });
+
+    // Add third modal (replaces second)
+    ModalUtils.addModal({ children: <div>Modal 3</div> });
+    await waitFor(() => {
+      expect(screen.getByText('Modal 3')).toBeInTheDocument();
+      expect(screen.queryByText('Modal 2')).not.toBeInTheDocument();
+    });
+  });
+
+  test('modal inherits all props from ModalUtils.addModal call', async () => {
+    render(<ModalManager />);
+
+    ModalUtils.addModal({
+      title: 'Custom Title',
+      hideCloseButton: true,
+      className: 'test-class',
+      overlayClassName: 'test-overlay',
+      children: (
+        <>
+          <div>Header content</div>
+          <div>Body content</div>
+        </>
+      ),
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Custom Title')).toBeInTheDocument();
+      expect(screen.getByText('Header content')).toBeInTheDocument();
+      expect(screen.getByText('Body content')).toBeInTheDocument();
+
+      const modalContainer = document.querySelector('.test-class');
+      expect(modalContainer).toBeInTheDocument();
+
+      const overlay = document.querySelector('.test-overlay');
+      expect(overlay).toBeInTheDocument();
+
+      // Close button should be hidden
+      const closeButton = screen.queryByRole('button');
+      expect(closeButton).not.toBeInTheDocument();
+    });
+  });
+});

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

@@ -0,0 +1,40 @@
+import { Modal, type ModalProps } from 'Components/modal/Modal';
+import { useEffect, useRef, useState } from 'react';
+import { MODAL } from 'Utils/Constants';
+import { usePubSub } from 'Utils/hooks/usePubSub';
+
+type ModalManagerProps = {
+  modal?: ModalProps;
+};
+
+export const ModalManager = (props: ModalManagerProps) => {
+  const { modal: initialModal } = props;
+  const [modal, setModal] = useState<ModalProps | undefined>(() => initialModal);
+
+  const modalManagerContainerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    setModal(initialModal);
+  }, [initialModal]);
+
+  const hasModal = !!modal;
+
+  usePubSub(MODAL.ADD_MODAL, (newModal: ModalProps) => {
+    setModal(newModal);
+  });
+
+  usePubSub(MODAL.REMOVE_MODAL, () => {
+    setModal(undefined);
+  });
+
+  return (
+    <div ref={modalManagerContainerRef} className="ds-modal-manager">
+      <Modal
+        {...modal}
+        open={hasModal}
+        portalTarget={modalManagerContainerRef.current}
+        closeHandler={() => setModal(undefined)}
+      />
+    </div>
+  );
+};

package/src/components/modal/modalManager/modalManager.scss

@@ -0,0 +1,4 @@
+.ds-modal-manager {
+    z-index: 1;
+    position: fixed;
+}

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

@@ -0,0 +1,15 @@
+import type { Meta } from '@storybook/react-vite';
+import { Separator } from './Separator';
+
+const meta: Meta<typeof Separator> = {
+  title: 'Components/Separator',
+  component: Separator,
+};
+
+export const Default = {
+  args: {
+    title: 'titleValue',
+  },
+};
+
+export default meta;

package/src/components/separator/Separator.test.tsx

@@ -0,0 +1,10 @@
+import { expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Separator } from './Separator';
+import '@testing-library/jest-dom/vitest';
+
+test('Separator says hello', () => {
+  render(<Separator />);
+
+  expect(screen.getByRole('separator')).toBeInTheDocument();
+});

package/src/components/separator/Separator.tsx

@@ -0,0 +1,15 @@
+import classNames from 'classnames';
+import { Separator as RadixSeparator } from 'radix-ui';
+
+type SeparatorProps = {
+  className?: string;
+} & RadixSeparator.SeparatorProps;
+
+export const Separator = (props: SeparatorProps) => {
+  const {
+    className,
+    ...rest
+  } = props;
+
+  return <RadixSeparator.Root className={classNames('ds-separator', className)} {...rest} />;
+};

package/src/components/separator/separator.scss

@@ -0,0 +1,6 @@
+.ds-separator {
+  width: 100%;
+  height: 1px;
+  background-color: var(--page-base-color-border);
+  margin: var(--spacing-small) 0;
+}

package/src/components/table/Table.stories.tsx

@@ -9,6 +9,7 @@ import { useState, type ComponentProps } from 'react';
 import { RowCountInfo } from './pagination/RowCountInfo';
 import { PaginationPanel } from './pagination/PaginationPanel';
 import { HideColumnsDropdown } from './HideColumnsDropdown';
+import { TableSettingsDropdown } from './pagination/TableSettingsDropdown';
 
 type TableProps = ComponentProps<typeof Table>;
 
@@ -64,7 +65,7 @@ const HeaderContent = [
   </div>,
   <div key={1} style={{ display: 'flex', gap: '1rem' }}>
     <Icon name="download" />
-    <Icon name="settings" />
+    <TableSettingsDropdown />
     <Icon name="circle-help" />
     <Icon name="expand" />
   </div>,
@@ -102,6 +103,18 @@ export const WithHeader: Story = {
     defaultColDef: defaultColDef,
     domLayout: 'autoHeight',
     headerContent: HeaderContent,
+    onTableSettingsChanged: (newSettings) => {
+      console.log('Settings changed', newSettings);
+    },
+    onTableSpacingChanged: (newSpacing) => {
+      console.log('Spacing changed', newSpacing);
+    },
+    onColumnBordersChanged: (newBorders) => {
+      console.log('Column borders changed', newBorders);
+    },
+    onTableSettingsReset: () => {
+      console.log('Settings reset');
+    },
   },
 };