@squiz/resource-browser 1.32.1-alpha.12

package/src/Modal/ModalOpeningButton.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useButton, AriaButtonProps } from 'react-aria';
+
+interface ModalOpeningButtonProps extends AriaButtonProps<'button'> {
+  className?: string;
+  children?: React.ReactNode;
+  isDisabled?: boolean;
+  title?: string;
+}
+
+export default function ModalOpeningButton({ className, children, title, ...props }: ModalOpeningButtonProps) {
+  const ref = React.useRef<HTMLButtonElement>(null);
+
+  const { buttonProps } = useButton(props, ref);
+  return (
+    <button {...buttonProps} ref={ref} className={className} title={title}>
+      {children}
+    </button>
+  );
+}

package/src/Modal/ModalTrigger.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { useOverlayTrigger } from 'react-aria';
+import { useOverlayTriggerState } from 'react-stately';
+import { DOMAttributes, FocusableElement } from '@react-types/shared';
+
+import Modal from './Modal';
+import ModalOpeningButton from './ModalOpeningButton';
+
+function ModalTrigger({
+  label,
+  showLabel,
+  icon,
+  children,
+  ...props
+}: {
+  label: string;
+  showLabel?: boolean;
+  icon?: React.ReactNode;
+  children: (onClose: () => void, titleProps: DOMAttributes<FocusableElement>) => React.ReactElement; // Child needs to be a functions which generates the 'content' so we can pass the onClose function and title aria props
+}) {
+  const state = useOverlayTriggerState(props);
+  const { triggerProps, overlayProps } = useOverlayTrigger({ type: 'dialog' }, state);
+
+  let ariaAttr: React.AriaAttributes = {};
+  if (!showLabel) {
+    ariaAttr = { ...ariaAttr, 'aria-label': label };
+  }
+
+  return (
+    <>
+      <ModalOpeningButton type="button" {...triggerProps} {...ariaAttr}>
+        {showLabel && label}
+        {icon}
+      </ModalOpeningButton>
+      {state.isOpen && (
+        <Modal isDismissable state={state} overlayProps={overlayProps}>
+          {(titleProps) => children(state.close, titleProps)}
+        </Modal>
+      )}
+    </>
+  );
+}
+
+export default ModalTrigger;

package/src/PreviewPanel/PreviewModal.spec.tsx

@@ -0,0 +1,164 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import React from 'react';
+import { screen, render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { useOverlayTriggerState, OverlayTriggerState } from 'react-stately';
+import { DOMAttributes, FocusableElement } from '@react-types/shared';
+import { useOverlayTrigger } from 'react-aria';
+
+import PreviewModal from './PreviewModal';
+
+function PreviewModalTestWrapper({
+  constructFunction,
+}: {
+  constructFunction: (state: OverlayTriggerState, overlayProps: DOMAttributes<FocusableElement>) => JSX.Element;
+}) {
+  const previewModalState = useOverlayTriggerState({ isOpen: true });
+  const { overlayProps } = useOverlayTrigger({ type: 'dialog' }, previewModalState);
+
+  return constructFunction(previewModalState, overlayProps);
+}
+
+describe('PreviewModal', () => {
+  it('Modal is open by default', async () => {
+    const onClose = jest.fn();
+
+    render(
+      <PreviewModalTestWrapper
+        constructFunction={(state, overlayProps) => {
+          return (
+            <PreviewModal state={state} overlayProps={overlayProps} onClose={onClose}>
+              Modal Content
+            </PreviewModal>
+          );
+        }}
+      />,
+    );
+    expect(screen.queryByRole('dialog')).toBeTruthy();
+  });
+
+  it('Clicking outside the modal calls onClose', async () => {
+    const onClose = jest.fn();
+    render(
+      <div data-testid="outside">
+        <PreviewModalTestWrapper
+          constructFunction={(state, overlayProps) => {
+            return (
+              <PreviewModal state={state} overlayProps={overlayProps} onClose={onClose}>
+                Modal Content
+              </PreviewModal>
+            );
+          }}
+        />
+        ,
+        <div style={{ height: '150vh' }} />
+      </div>,
+    );
+
+    const user = userEvent.setup();
+
+    // Modal Open
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).toBeTruthy();
+    });
+
+    await user.click(screen.getByTestId('outside'));
+
+    // Modal Closed
+    await waitFor(() => {
+      expect(onClose).toHaveBeenCalled();
+    });
+  });
+
+  it('ESC closes modal', async () => {
+    const onClose = jest.fn();
+    render(
+      <div data-testid="outside">
+        <PreviewModalTestWrapper
+          constructFunction={(state, overlayProps) => {
+            return (
+              <PreviewModal state={state} overlayProps={overlayProps} onClose={onClose}>
+                Modal Content
+              </PreviewModal>
+            );
+          }}
+        />
+        <div style={{ height: '150vh' }} />
+      </div>,
+    );
+
+    const user = userEvent.setup();
+
+    // Modal Open
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).toBeTruthy();
+    });
+
+    user.type(screen.getByRole('dialog'), '{escape}');
+
+    // Modal Closed
+    await waitFor(() => {
+      expect(onClose).toHaveBeenCalled();
+    });
+  });
+
+  it('Focus is trapped within modal', async () => {
+    const onClose = jest.fn();
+
+    render(
+      <div>
+        <button />
+        <PreviewModalTestWrapper
+          constructFunction={(state, overlayProps) => {
+            return (
+              <PreviewModal state={state} overlayProps={overlayProps} onClose={onClose}>
+                Modal Content
+              </PreviewModal>
+            );
+          }}
+        />
+        <button />
+        <div style={{ height: '150vh' }} />
+      </div>,
+    );
+
+    const user = userEvent.setup();
+
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).toBeTruthy();
+    });
+
+    user.type(screen.getByRole('dialog'), '{tab}');
+    user.type(screen.getByRole('dialog'), '{tab}');
+
+    await waitFor(() => {
+      expect(screen.queryByRole('button', { name: 'Close details' })).toHaveFocus();
+    });
+  });
+
+  it('Focus should start on the dialog', async () => {
+    const onClose = jest.fn();
+
+    render(
+      <div>
+        <button />
+        <PreviewModalTestWrapper
+          constructFunction={(state, overlayProps) => {
+            return (
+              <PreviewModal state={state} overlayProps={overlayProps} onClose={onClose}>
+                Modal Content
+              </PreviewModal>
+            );
+          }}
+        />
+        <button />
+        <div style={{ height: '150vh' }} />
+      </div>,
+    );
+
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).toHaveFocus();
+    });
+  });
+});

package/src/PreviewPanel/PreviewModal.tsx

@@ -0,0 +1,92 @@
+import React, { ReactNode, useRef, useEffect } from 'react';
+import { Overlay, useModalOverlay, useDialog, useKeyboard } from 'react-aria';
+import { OverlayTriggerState } from 'react-stately';
+import { DOMAttributes, FocusableElement } from '@react-types/shared';
+
+import Icon, { IconOptions } from '../Icons/Icon';
+
+/*
+  This has to be a separate element otherwise the focus trap fails. Assuming this is because it needs
+  to fit inside the 'Overlay' as a form of context.
+*/
+function PreviewModalContent({ children, onClose, ...props }: { children: ReactNode; onClose: () => void }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const { dialogProps, titleProps } = useDialog(props, ref);
+
+  return (
+    <div {...dialogProps} ref={ref} className="h-full flex flex-col">
+      <h3 {...titleProps} className="sr-only">
+        Resource Details
+      </h3>
+      <button type="button" aria-label="Close details" onClick={onClose} className="absolute top-3 right-3">
+        <Icon icon={'close' as IconOptions} className="" />
+      </button>
+      {children}
+    </div>
+  );
+}
+
+export type PreviewModalProps = {
+  state: OverlayTriggerState;
+  overlayProps: DOMAttributes<FocusableElement>;
+  children?: ReactNode;
+  onClose: () => void;
+};
+
+// Accept a ref for the top level modal
+function PreviewModal({ state, overlayProps, children, onClose, ...props }: PreviewModalProps) {
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  const overlayRef = useRef<HTMLDivElement>(null);
+  const { modalProps, underlayProps } = useModalOverlay(
+    { isKeyboardDismissDisabled: true, ...props },
+    state,
+    overlayRef,
+  );
+
+  // Need to handle the ESC escape hatch ourselves as we need to run onClose to deselect the current node
+  const { keyboardProps } = useKeyboard({
+    onKeyDown: (e) => {
+      if (e.key === 'Escape') {
+        onClose();
+      } else {
+        // Need to do this so TAB get handled up higher and cycles though the focus trap
+        e.continuePropagation();
+      }
+    },
+  });
+
+  useEffect(() => {
+    // Check if the click event has happened outside the modal
+    function handleClickOutside(event: MouseEvent) {
+      if (modalRef.current && !modalRef.current.contains(event?.target as Node)) {
+        onClose();
+      }
+    }
+    // Bind the event listener
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      // Unbind the event listener on clean up
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [modalRef]);
+
+  return (
+    <Overlay>
+      <div
+        ref={modalRef}
+        {...underlayProps}
+        {...keyboardProps}
+        className="fixed z-50 overflow-y-scroll bottom-0 w-full h-[50vh] bg-white border-t border-gray-300"
+      >
+        <div ref={overlayRef} {...modalProps} className="h-full">
+          <PreviewModalContent {...overlayProps} onClose={onClose}>
+            {children}
+          </PreviewModalContent>
+        </div>
+      </div>
+    </Overlay>
+  );
+}
+
+export default PreviewModal;

package/src/PreviewPanel/PreviewPanel.spec.tsx

@@ -0,0 +1,197 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import React from 'react';
+import { screen, render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Context as ResponsiveContext } from 'react-responsive';
+
+import { useOverlayTriggerState, OverlayTriggerState } from 'react-stately';
+import { DOMAttributes, FocusableElement } from '@react-types/shared';
+import { useOverlayTrigger } from 'react-aria';
+
+import PreviewPanel from './PreviewPanel';
+
+function PreviewPanelTestWrapper({
+  constructFunction,
+}: {
+  constructFunction: (
+    previewModalState: OverlayTriggerState,
+    overlayProps: DOMAttributes<FocusableElement>,
+  ) => JSX.Element;
+}) {
+  const previewModalState = useOverlayTriggerState({});
+  const { overlayProps } = useOverlayTrigger({ type: 'dialog' }, previewModalState);
+
+  return constructFunction(previewModalState, overlayProps);
+}
+
+describe('PreviewPanel', () => {
+  it('Show loading when isLoading is true', async () => {
+    const onSelect = jest.fn();
+    const onClose = jest.fn();
+
+    render(
+      <PreviewPanelTestWrapper
+        constructFunction={(previewModalState, overlayProps) => {
+          return (
+            <PreviewPanel
+              node={{ id: '1', source: '1' }}
+              resourceDetail={null}
+              isLoading
+              allowedTypes={undefined}
+              modalState={previewModalState}
+              previewModalOverlayProps={overlayProps}
+              onSelect={onSelect}
+              onClose={onClose}
+            />
+          );
+        }}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getAllByText('Loading info')).toBeTruthy();
+    });
+  });
+
+  it('Renders a message when no item selected', async () => {
+    const onSelect = jest.fn();
+    const onClose = jest.fn();
+
+    render(
+      <PreviewPanelTestWrapper
+        constructFunction={(previewModalState, overlayProps) => {
+          return (
+            <PreviewPanel
+              node={null}
+              resourceDetail={null}
+              isLoading={false}
+              allowedTypes={undefined}
+              modalState={previewModalState}
+              previewModalOverlayProps={overlayProps}
+              onSelect={onSelect}
+              onClose={onClose}
+            />
+          );
+        }}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getAllByText('Make a selection to see more info here.')).toBeTruthy();
+    });
+  });
+
+  it('Renders tablet / desktop very above 640px', async () => {
+    const onSelect = jest.fn();
+    const onClose = jest.fn();
+
+    render(
+      <ResponsiveContext.Provider value={{ width: 641 }}>
+        <PreviewPanelTestWrapper
+          constructFunction={(previewModalState, overlayProps) => {
+            return (
+              <PreviewPanel
+                node={{ id: '1', source: '1' }}
+                resourceDetail={{
+                  type: 'folder',
+                  name: 'TestResource',
+                  properties: new Map([
+                    ['assetId', '12345'],
+                    ['status', 'UnderConstruction'],
+                  ]),
+                }}
+                isLoading={false}
+                allowedTypes={undefined}
+                modalState={previewModalState}
+                previewModalOverlayProps={overlayProps}
+                onSelect={onSelect}
+                onClose={onClose}
+              />
+            );
+          }}
+        />
+      </ResponsiveContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).toBeFalsy();
+      expect(screen.queryByText('TestResource')).toBeTruthy();
+    });
+  });
+
+  it('Renders mobile below 640px', async () => {
+    const onSelect = jest.fn();
+    const onClose = jest.fn();
+
+    render(
+      <ResponsiveContext.Provider value={{ width: 640 }}>
+        <PreviewPanelTestWrapper
+          constructFunction={(previewModalState, overlayProps) => {
+            return (
+              <PreviewPanel
+                node={{ id: '1', source: '1' }}
+                resourceDetail={{
+                  type: 'folder',
+                  name: 'TestResource',
+                  properties: new Map([
+                    ['assetId', '12345'],
+                    ['status', 'UnderConstruction'],
+                  ]),
+                }}
+                isLoading={false}
+                allowedTypes={undefined}
+                modalState={previewModalState}
+                previewModalOverlayProps={overlayProps}
+                onSelect={onSelect}
+                onClose={onClose}
+              />
+            );
+          }}
+        />
+      </ResponsiveContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).toBeTruthy();
+      expect(screen.queryByText('TestResource')).toBeTruthy();
+    });
+  });
+
+  it('Clicking select button return source and id of resource being shown', async () => {
+    const onSelect = jest.fn();
+    const onClose = jest.fn();
+
+    render(
+      <PreviewPanelTestWrapper
+        constructFunction={(previewModalState, overlayProps) => {
+          return (
+            <PreviewPanel
+              node={{ id: '1', source: '1' }}
+              resourceDetail={{
+                type: 'folder',
+                name: 'TestResource',
+                properties: new Map([
+                  ['assetId', '12345'],
+                  ['status', 'UnderConstruction'],
+                ]),
+              }}
+              isLoading={false}
+              allowedTypes={undefined}
+              modalState={previewModalState}
+              previewModalOverlayProps={overlayProps}
+              onSelect={onSelect}
+              onClose={onClose}
+            />
+          );
+        }}
+      />,
+    );
+
+    const user = userEvent.setup();
+    user.click(screen.getByRole('button'));
+
+    await waitFor(() => {
+      expect(onSelect).toHaveBeenCalledWith({ id: '1', source: '1' });
+    });
+  });
+});

package/src/PreviewPanel/PreviewPanel.stories.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import { useOverlayTriggerState } from 'react-stately';
+import { useOverlayTrigger } from 'react-aria';
+
+import PreviewPanel from './PreviewPanel';
+
+export default {
+  title: 'Preview Panel',
+  component: PreviewPanel,
+} as Meta<typeof PreviewPanel>;
+
+const Template: StoryFn<typeof PreviewPanel> = ({ node, resourceDetail, isLoading, allowedTypes }) => {
+  const previewModalState = useOverlayTriggerState({});
+  const { overlayProps } = useOverlayTrigger({ type: 'dialog' }, previewModalState);
+
+  return (
+    <PreviewPanel
+      node={node}
+      resourceDetail={resourceDetail}
+      modalState={previewModalState}
+      previewModalOverlayProps={overlayProps}
+      isLoading={isLoading}
+      allowedTypes={allowedTypes}
+      onSelect={({ source, id }) => alert(`Resource Selected: ${source} - ${id}`)}
+      onClose={() => alert(`OnClose Selected`)}
+    />
+  );
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  node: {
+    id: '1',
+    source: '1',
+  },
+  resourceDetail: {
+    type: 'page',
+    name: 'Products',
+    properties: new Map([
+      ['assetId', '12345'],
+      ['status', 'UnderConstruction'],
+    ]),
+  },
+  isLoading: false,
+  isNotSelected: false,
+  allowedTypes: undefined,
+};
+
+export const NoSelected = Template.bind({});
+NoSelected.args = {
+  ...Primary.args,
+  node: null,
+  resourceDetail: null,
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  ...Primary.args,
+  isLoading: true,
+};

package/src/PreviewPanel/PreviewPanel.tsx

@@ -0,0 +1,123 @@
+import React, { useEffect, useRef } from 'react';
+import { useMediaQuery } from 'react-responsive';
+import { OverlayTriggerState } from 'react-stately';
+import { DOMAttributes, FocusableElement } from '@react-types/shared';
+
+import Icon, { IconOptions } from '../Icons/Icon';
+import MatrixResource from './details/MatrixResource';
+import { NodeIdentifier, ResourceDetail } from '../index';
+import PreviewModal from './PreviewModal';
+import Spinner from '../Spinner/Spinner';
+
+export interface PreviewPanelProps {
+  node: NodeIdentifier | null;
+  resourceDetail: ResourceDetail | null;
+  isLoading: boolean;
+  modalState: OverlayTriggerState;
+  previewModalOverlayProps: DOMAttributes<FocusableElement>;
+  allowedTypes: string[] | undefined;
+  onSelect: (node: NodeIdentifier) => void;
+  onClose: () => void;
+}
+
+const PreviewPanel = function ({
+  node,
+  resourceDetail,
+  isLoading,
+  previewModalOverlayProps,
+  modalState,
+  onSelect,
+  onClose,
+}: PreviewPanelProps) {
+  // Watch the media size to see if we are on mobile size
+  const isMobile = useMediaQuery({ query: '(max-width: 640px)' });
+  const previousIsMobile = useRef<boolean | null>(null);
+
+  useEffect(() => {
+    if (node && isMobile) {
+      modalState.setOpen(true);
+      previousIsMobile.current = true;
+    } else {
+      previousIsMobile.current = false;
+    }
+  }, []);
+
+  // If the media changes from mobile to non mobile or reverse toggle modal showing to undo the aria-hidden etc
+  useEffect(() => {
+    // Only trigger if we have a node selected, otherwise the modal will re-open itself as soon as its closed
+    if (node) {
+      if (previousIsMobile.current !== isMobile) {
+        previousIsMobile.current = isMobile;
+
+        if (isMobile) {
+          // If no mobile open the modal automatically
+          modalState.setOpen(true);
+        } else {
+          // If not in mobile close the modal automatically
+          modalState.setOpen(false);
+        }
+      }
+    }
+  }, [node, isMobile, modalState]);
+
+  let previewPanel = node && resourceDetail && (
+    <>
+      <div className="flex flex-col grow">
+        <MatrixResource {...resourceDetail} />
+      </div>
+      <div className="flex justify-end border-t border-gray-300">
+        <button
+          type="button"
+          onClick={() => onSelect(node)}
+          className="rounded text-sm text-white bg-blue-300 py-2 px-2.5 m-5"
+        >
+          Select
+        </button>
+      </div>
+    </>
+  );
+  if (isLoading) {
+    previewPanel = (
+      <div className="flex flex-col grow">
+        <div className="flex flex-col grow items-center mt-20 mx-20">
+          <Spinner />
+          <div className="text-sm text-gray-600 text-center mt-4">Loading info</div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="sm:overflow-y-scroll sm:flex-1 sm:grow-[2] bg-white">
+      {/* Dialog has its own title */}
+      {!isMobile && <h3 className="sr-only">Resource Details</h3>}
+
+      {/* Nothing selected, show an info message */}
+      {node === null && (
+        <div className="max-sm:hidden flex flex-col h-full">
+          <div className="flex flex-col grow items-center mt-20 mx-20">
+            <Icon icon={'resource-select' as IconOptions} aria-hidden />
+            <div className="text-sm text-gray-600 text-center mt-4">Make a selection to see more info here.</div>
+          </div>
+          <div className="flex justify-end border-t border-gray-300">
+            <button disabled type="button" className="rounded text-sm text-white bg-blue-300/[.6] py-2 px-2.5 m-5">
+              Select
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Resource details shows in a new modal / bottom popover on mobile size */}
+      {node && isMobile && modalState.isOpen && (
+        <PreviewModal state={modalState} overlayProps={previewModalOverlayProps} onClose={onClose}>
+          {previewPanel}
+        </PreviewModal>
+      )}
+
+      {/* If not mobile, just print the details out */}
+      {node && !isMobile && <div className="flex flex-col h-full">{previewPanel}</div>}
+    </div>
+  );
+};
+
+export default PreviewPanel;