@squiz/generic-browser-lib 1.35.1-alpha.34

package/src/PreviewPanel/PreviewPanel.spec.tsx

@@ -0,0 +1,162 @@
+/* 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);
+}
+
+function mockResource(properties: Partial<any> = {}): any {
+  return {
+    id: 'test-resource',
+    name: 'Test resource',
+    type: { code: 'folder', name: 'Folder' },
+    status: { code: 'live', name: 'Live' },
+    url: 'https://no-where.com',
+    urls: [],
+    childCount: 0,
+    ...properties,
+  };
+}
+
+const ResourceComponent = () => {
+  return <div>TestResource</div>;
+};
+
+describe('PreviewPanel', () => {
+  it('Renders a message when no item selected', async () => {
+    const onSelect = jest.fn();
+    const onClose = jest.fn();
+
+    render(
+      <PreviewPanelTestWrapper
+        constructFunction={(previewModalState, overlayProps) => {
+          return (
+            <PreviewPanel
+              resource={null}
+              allowedTypes={undefined}
+              modalState={previewModalState}
+              previewModalOverlayProps={overlayProps}
+              onSelect={onSelect}
+              onClose={onClose}
+              ResourceComponent={ResourceComponent}
+            />
+          );
+        }}
+      />,
+    );
+
+    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
+                resource={mockResource({ name: 'TestResource' })}
+                allowedTypes={undefined}
+                modalState={previewModalState}
+                previewModalOverlayProps={overlayProps}
+                onSelect={onSelect}
+                onClose={onClose}
+                ResourceComponent={ResourceComponent}
+              />
+            );
+          }}
+        />
+      </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
+                resource={mockResource({ name: 'TestResource' })}
+                allowedTypes={undefined}
+                modalState={previewModalState}
+                previewModalOverlayProps={overlayProps}
+                onSelect={onSelect}
+                onClose={onClose}
+                ResourceComponent={ResourceComponent}
+              />
+            );
+          }}
+        />
+      </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();
+    const resource = mockResource();
+
+    render(
+      <PreviewPanelTestWrapper
+        constructFunction={(previewModalState, overlayProps) => {
+          return (
+            <PreviewPanel
+              resource={resource}
+              allowedTypes={undefined}
+              modalState={previewModalState}
+              previewModalOverlayProps={overlayProps}
+              onSelect={onSelect}
+              onClose={onClose}
+              ResourceComponent={ResourceComponent}
+            />
+          );
+        }}
+      />,
+    );
+
+    const user = userEvent.setup();
+    user.click(screen.getByRole('button'));
+
+    await waitFor(() => {
+      expect(onSelect).toHaveBeenCalledWith(resource);
+    });
+  });
+});

package/src/PreviewPanel/PreviewPanel.stories.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import { useOverlayTriggerState } from 'react-stately';
+import { useOverlayTrigger } from 'react-aria';
+
+import { PreviewPanel } from './PreviewPanel';
+import { Icon, IconOptions } from '../Icons/Icon';
+
+export default {
+  title: 'Preview Panel',
+  component: PreviewPanel,
+} as Meta<typeof PreviewPanel>;
+
+const MatrixResource = ({ resource: { name, type } }) => {
+  return (
+    <div>
+      <div className="flex flex-col items-center text-gray-800 mt-7 mx-5 pb-4 border-b border-gray-300">
+        <Icon icon={type.code as IconOptions} resourceSource="matrix" className="w-14 h-14" />
+        <div className="mt-4 font-semibold text-base">{name}</div>
+      </div>
+    </div>
+  );
+};
+
+const Template: StoryFn<typeof PreviewPanel> = ({ resource, allowedTypes }) => {
+  const previewModalState = useOverlayTriggerState({});
+  const { overlayProps } = useOverlayTrigger({ type: 'dialog' }, previewModalState);
+
+  return (
+    <PreviewPanel
+      resource={resource}
+      modalState={previewModalState}
+      previewModalOverlayProps={overlayProps}
+      allowedTypes={allowedTypes}
+      onSelect={({ id, name }) => alert(`Resource Selected: ${id} - ${name}`)}
+      onClose={() => alert(`OnClose Selected`)}
+      ResourceComponent={MatrixResource}
+    />
+  );
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  resource: {
+    id: '1',
+    name: 'Products',
+    type: {
+      code: 'page_standard',
+      name: 'Standard Page',
+    },
+    status: {
+      code: 'live',
+      name: 'Live',
+    },
+    url: 'http://my-squiz.net/assets/1',
+    urls: [],
+    childCount: 0,
+  },
+  allowedTypes: undefined,
+};
+
+export const NoSelected = Template.bind({});
+NoSelected.args = {
+  ...Primary.args,
+  resource: null,
+};

package/src/PreviewPanel/PreviewPanel.tsx

@@ -0,0 +1,83 @@
+import React, { useEffect } 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 PreviewModal from './PreviewModal';
+
+export interface PreviewPanelProps {
+  resource: any | null;
+  modalState: OverlayTriggerState;
+  previewModalOverlayProps: DOMAttributes<FocusableElement>;
+  allowedTypes: string[] | undefined;
+  onSelect: (resource: any) => void;
+  onClose: () => void;
+  ResourceComponent?: React.ElementType;
+}
+
+export const PreviewPanel = function ({
+  resource,
+  previewModalOverlayProps,
+  modalState,
+  onSelect,
+  onClose,
+  ResourceComponent,
+}: PreviewPanelProps) {
+  // Watch the media size to see if we are on mobile size
+  const isMobile = useMediaQuery({ query: '(max-width: 640px)' });
+
+  // If we are on mobile and the selected resource changes show the preview panel modal.
+  useEffect(() => {
+    if (!modalState.isOpen) {
+      modalState.setOpen(Boolean(resource && isMobile));
+    }
+  }, [resource, isMobile]);
+
+  const previewPanel = resource && (
+    <>
+      <div className="flex flex-col grow">{ResourceComponent && <ResourceComponent resource={resource} />}</div>
+      <div className="flex justify-end border-t border-gray-300">
+        <button
+          type="button"
+          onClick={() => onSelect(resource)}
+          className="rounded text-sm text-white bg-blue-300 py-2 px-2.5 m-5"
+        >
+          Select
+        </button>
+      </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 */}
+      {resource === 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 */}
+      {resource && isMobile && modalState.isOpen && (
+        <PreviewModal state={modalState} overlayProps={previewModalOverlayProps} onClose={onClose}>
+          {previewPanel}
+        </PreviewModal>
+      )}
+
+      {/* If not mobile, just print the details out */}
+      {resource && !isMobile && <div className="flex flex-col h-full">{previewPanel}</div>}
+    </div>
+  );
+};

package/src/PreviewPanel/PreviewPanelHOC.spec.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { PreviewPanelProps } from './PreviewPanel';
+import { PreviewPanelHOC, PreviewPanelHOCProps } from './PreviewPanelHOC';
+import { OverlayTriggerState } from 'react-stately';
+import { DOMAttributes, FocusableElement } from '@react-types/shared';
+
+const modalStateMock: OverlayTriggerState = {
+  isOpen: false,
+  setOpen: jest.fn(() => null),
+  open: jest.fn(() => null),
+  close: jest.fn(() => null),
+  toggle: jest.fn(() => null),
+};
+
+const previewModalOverlayPropsMock: DOMAttributes<FocusableElement> = {
+  onFocus: jest.fn(() => null),
+  onBlur: jest.fn(() => null),
+  onClick: jest.fn(() => null),
+};
+
+describe('PreviewPanelHOC', () => {
+  const ResourceComponentMock: React.FC = () => <div>Resource Component Mock</div>;
+
+  const defaultProps: PreviewPanelHOCProps & PreviewPanelProps = {
+    ResourceComponent: ResourceComponentMock,
+    resource: null,
+    modalState: modalStateMock,
+    previewModalOverlayProps: previewModalOverlayPropsMock,
+    allowedTypes: undefined,
+    onSelect: () => {
+      return;
+    },
+    onClose: () => {
+      return;
+    },
+  };
+
+  it('renders OriginalComponent with ResourceComponent', () => {
+    const WrappedComponent = PreviewPanelHOC(ResourceComponentMock);
+    const { getByText } = render(<WrappedComponent {...defaultProps} />);
+
+    expect(getByText('Make a selection to see more info here.')).toBeInTheDocument();
+  });
+});

package/src/PreviewPanel/PreviewPanelHOC.tsx

@@ -0,0 +1,17 @@
+import React, { ComponentType } from 'react';
+import { PreviewPanel, PreviewPanelProps } from './PreviewPanel';
+
+export interface PreviewPanelHOCProps {
+  ResourceComponent?: ComponentType<any>;
+}
+
+export const PreviewPanelHOC = (
+  ResourceComponent: ComponentType<any>,
+): React.FC<PreviewPanelHOCProps & PreviewPanelProps> => {
+  const NewComponent: React.FC<PreviewPanelHOCProps & PreviewPanelProps> = (props) => {
+    // Render OriginalComponent and pass on its props.
+    return <PreviewPanel {...props} ResourceComponent={ResourceComponent} />;
+  };
+
+  return NewComponent;
+};

package/src/ResetButton/ResetButton.spec.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { ResetButton, ResetButtonProps } from './ResetButton';
+
+describe('ResetButton', () => {
+  const onClickMock = jest.fn();
+
+  const defaultProps: ResetButtonProps = {
+    onClick: onClickMock,
+  };
+
+  it('renders button with correct attributes', () => {
+    const { getByLabelText } = render(<ResetButton {...defaultProps} />);
+
+    const buttonElement = getByLabelText('Remove selection');
+    expect(buttonElement).toBeInTheDocument();
+    expect(buttonElement).toHaveAttribute('title', 'Remove selection');
+    expect(buttonElement).toHaveClass(
+      'text-gray-500 hover:text-gray-800 focus:text-gray-800 w-6 h-6 disabled:text-gray-500 disabled:cursor-not-allowed',
+    );
+    expect(buttonElement).not.toBeDisabled();
+  });
+
+  it('calls onClick function when clicked', () => {
+    const { getByLabelText } = render(<ResetButton {...defaultProps} />);
+
+    const buttonElement = getByLabelText('Remove selection');
+    fireEvent.click(buttonElement);
+
+    expect(onClickMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('disables the button when isDisabled is true', () => {
+    const { getByLabelText } = render(<ResetButton {...defaultProps} isDisabled={true} />);
+
+    const buttonElement = getByLabelText('Remove selection');
+    expect(buttonElement).toBeDisabled();
+    fireEvent.click(buttonElement);
+
+    expect(onClickMock).toHaveBeenCalledTimes(0);
+  });
+});

package/src/ResetButton/ResetButton.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+
+export type ResetButtonProps = {
+  onClick: () => void;
+  isDisabled?: boolean;
+};
+
+export const ResetButton = ({ onClick, isDisabled }: ResetButtonProps) => (
+  <div className="squiz-gb-scope">
+    <button
+      type="button"
+      aria-label={`Remove selection`}
+      title={`Remove selection`}
+      className="text-gray-500 hover:text-gray-800 focus:text-gray-800 w-6 h-6 disabled:text-gray-500 disabled:cursor-not-allowed"
+      disabled={isDisabled}
+      onClick={onClick}
+    >
+      <CloseRoundedIcon />
+    </button>
+  </div>
+);

package/src/ResourceItem/ResourceItem.spec.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { ResourceItem } from './ResourceItem';
+
+const mockOnSelect = jest.fn();
+const mockOnDrillDown = jest.fn();
+const previewModalState = jest.fn();
+
+const defaultProps: any = {
+  id: '123',
+  selected: false,
+  label: 'My Resource',
+  type: 'site',
+  childCount: 0,
+  previewModalState: previewModalState,
+  onSelect: mockOnSelect,
+  onDrillDown: mockOnDrillDown,
+  className: '',
+};
+
+describe('ResourceItem', () => {
+  it('should render the component with the correct label', () => {
+    const { getByText } = render(<ResourceItem {...defaultProps} />);
+    const labelElement = getByText('My Resource');
+
+    expect(labelElement).toBeInTheDocument();
+  });
+
+  it('should call the onSelect function when the button is pressed', () => {
+    const { getByRole } = render(<ResourceItem {...defaultProps} />);
+    const buttonElement = getByRole('button');
+    fireEvent.click(buttonElement);
+
+    expect(mockOnSelect).toHaveBeenCalledTimes(1);
+  });
+
+  it('should call the onDrillDown function when the drill down button is pressed', () => {
+    const { getByLabelText } = render(<ResourceItem {...defaultProps} childCount={1} />);
+    const drillDownButtonElement = getByLabelText('Drill down to My Resource children');
+    fireEvent.click(drillDownButtonElement);
+
+    expect(mockOnDrillDown).toHaveBeenCalledTimes(1);
+  });
+
+  it('should disable the button when the allowedTypes prop is not in the list of allowedItems', () => {
+    const { getByRole } = render(<ResourceItem {...defaultProps} allowedTypes={['page']} />);
+    const buttonElement = getByRole('button');
+
+    expect(buttonElement).toBeDisabled();
+  });
+
+  it('should not disable the button when the allowedTypes prop is in the list of allowedItems', () => {
+    const { getByRole } = render(<ResourceItem {...defaultProps} allowedTypes={['site']} />);
+    const buttonElement = getByRole('button');
+
+    expect(buttonElement).not.toBeDisabled();
+  });
+
+  it('should not disable the button when the allowedTypes is undefined', () => {
+    const { getByRole } = render(<ResourceItem {...defaultProps} />);
+    const buttonElement = getByRole('button');
+
+    expect(buttonElement).not.toBeDisabled();
+  });
+});

package/src/ResourceItem/ResourceItem.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { DOMAttributes, FocusableElement } from '@react-types/shared';
+import { useOverlayTrigger } from 'react-aria';
+import { OverlayTriggerState } from 'react-stately';
+
+import { ModalOpeningButton } from '../Modal/ModalOpeningButton';
+import { Icon, IconOptions, ResourceSources } from '../Icons/Icon';
+
+interface ResourceItem<T> {
+  item: T;
+  selected?: boolean;
+  label: string;
+  type: string;
+  childCount?: number;
+  previewModalState: OverlayTriggerState;
+  onSelect: (node: T, overlayProps: DOMAttributes<FocusableElement>) => void;
+  onDrillDown?: (node: T) => void;
+  className: string;
+  allowedTypes?: string[] | undefined;
+  iconSource?: ResourceSources;
+  showChevron?: boolean;
+}
+
+const ResourceItem = <T,>({
+  item,
+  selected,
+  label,
+  type,
+  childCount,
+  previewModalState,
+  onSelect,
+  onDrillDown,
+  className,
+  allowedTypes,
+  iconSource = 'matrix',
+  showChevron = false,
+}: ResourceItem<T>) => {
+  const { triggerProps, overlayProps } = useOverlayTrigger({ type: 'dialog' }, previewModalState);
+  const isDisabled = allowedTypes !== undefined && !allowedTypes.includes(type);
+  const title = isDisabled ? "You can't select this item" : label;
+
+  return (
+    <li className={`flex items-stretch p-1 bg-white border-1 border-grey-200 min-h-[64px] ${className}`}>
+      <ModalOpeningButton
+        type="button"
+        {...triggerProps}
+        isDisabled={isDisabled}
+        onPress={() => onSelect(item, overlayProps)}
+        aria-label={childCount === undefined ? `Drill down to ${label} children` : ''}
+        className={`
+          relative grow flex items-center px-4 py-2 rounded outline-0 ${selected ? 'bg-blue-100 text-blue-400' : ''} ${
+          childCount !== undefined && childCount > 0 ? 'mr-2' : ''
+        } ${isDisabled ? 'font-normal text-gray-600 cursor-not-allowed' : 'hover:bg-gray-50 focus:bg-gray-50'}
+        `}
+        title={title}
+      >
+        <Icon
+          icon={type as IconOptions}
+          resourceSource={iconSource}
+          aria-label={type}
+          className={`mr-4 shrink-0 ${isDisabled && 'opacity-40'}`}
+        />
+        <span className={`relative  flex items-center ${selected ? 'mr-8' : ''}`}>
+          <span className="line-clamp-2 text-left break-word">{label}</span>
+          {selected && <Icon icon={'selected' as IconOptions} aria-label="selected" className="absolute -right-8" />}
+        </span>
+        {childCount === undefined && showChevron && (
+          <Icon icon={'arrow-right' as IconOptions} className="absolute right-5" />
+        )}
+      </ModalOpeningButton>
+      {childCount !== undefined && childCount > 0 && onDrillDown && (
+        <button
+          type="button"
+          aria-label={`Drill down to ${label} children`}
+          onClick={() => onDrillDown(item)}
+          className={`relative shrink-0 flex items-center p-4 rounded outline-0 before:w-px before:h-[calc(100%-0.75rem)] before:bg-gray-200 before:absolute before:top-1.5 before:-left-1 hover:bg-gray-50 focus:bg-gray-50`}
+        >
+          <span className="ml-auto flex items-center">
+            <span className="truncate w-14 text-right" title={String(childCount)}>
+              {childCount}
+            </span>
+            <Icon icon={'arrow-right' as IconOptions} className="ml-1" />
+          </span>
+        </button>
+      )}
+    </li>
+  );
+};
+
+export { ResourceItem };

package/src/ResourceState/ResourceState.spec.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { ResourceState } from './ResourceState';
+
+const defaultProps: any = {
+  state: 'error',
+  message: 'This is a test error!',
+  handleReload: jest.fn(),
+};
+
+describe('ResourceError', () => {
+  it('should render the component with the correct error message', () => {
+    const { getByText } = render(<ResourceState {...defaultProps} />);
+    const errorMessage = getByText(defaultProps.message);
+
+    expect(errorMessage).toBeInTheDocument();
+  });
+
+  it('should call the reload function when the button is pressed', () => {
+    const { getByRole } = render(<ResourceState {...defaultProps} />);
+    const buttonElement = getByRole('button');
+    fireEvent.click(buttonElement);
+
+    expect(defaultProps.handleReload).toHaveBeenCalledTimes(1);
+  });
+});

package/src/ResourceState/ResourceState.stories.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+
+import { ResourceState } from './ResourceState';
+
+export default {
+  title: 'Resource State',
+  component: ResourceState,
+} as Meta<typeof ResourceState>;
+
+const Template: StoryFn<typeof ResourceState> = ({ state, message }) => (
+  <ResourceState state={state} message={message} handleReload={() => alert('Resource browser reload')} />
+);
+
+export const Error = Template.bind({});
+Error.args = {
+  state: 'error',
+  message: 'This is a resource browser error!',
+};
+
+export const Empty = Template.bind({});
+Empty.args = {
+  state: 'empty',
+};

package/src/ResourceState/ResourceState.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Icon, IconOptions } from '../Icons/Icon';
+
+interface ResourceState {
+  state: 'error' | 'empty';
+  message?: string;
+  handleReload: () => void;
+}
+
+const ResourceState = function ({ state, message, handleReload }: ResourceState) {
+  return (
+    <div className="flex flex-col items-center rounded-lg py-8 bg-white h-204 gap-3">
+      <Icon icon={state as IconOptions} aria-hidden />
+      {/* Message */}
+      <span className="text-md text-gray-800 font-semibold leading-5">
+        {state === 'empty' ? 'There are no items to display' : message}
+      </span>
+      {/* Retry button */}
+      <button
+        type="button"
+        onClick={handleReload}
+        className="flex flex-row items-center justify-center gap-3 bg-black bg-opacity-10 h-9 mt-3 rounded text-md font-bold text-gray-700 py-2 px-3"
+      >
+        <Icon icon={state === 'empty' ? 'back' : 'retry'} aria-hidden />
+        {state === 'empty' ? 'Back to source list' : 'Try again'}
+      </button>
+    </div>
+  );
+};
+
+export { ResourceState };