@squiz/resource-browser 1.32.1-alpha.12

package/src/SourceDropdown/SourceDropdown.tsx

@@ -0,0 +1,175 @@
+import React, { useState, useRef } from 'react';
+import { useFocusWithin, useKeyboard } from '@react-aria/interactions';
+
+import type { Source, Resource, NodeIdentifier } from '../index';
+import Spinner from '../Spinner/Spinner';
+import Icon, { IconOptions } from '../Icons/Icon';
+
+import uuid from '../uuid';
+
+export default function SourceDropdown({
+  sources,
+  currentSource,
+  isLoading,
+  onRootSelect,
+  onSourceSelect,
+}: {
+  sources: Array<Source>;
+  currentSource: NodeIdentifier | null;
+  isLoading: boolean;
+  onRootSelect: () => void;
+  onSourceSelect: (node: NodeIdentifier, resetHierarchy: boolean) => void;
+}) {
+  const [uniqueId] = useState(uuid());
+
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const [isOpen, setIsOpen] = useState(false);
+
+  // Watch the focus and blur on the menu and close if focus leaves the control
+  const { focusWithinProps } = useFocusWithin({
+    onBlurWithin: () => {
+      setIsOpen(false);
+    },
+  });
+
+  // Listen for Esc key within this element
+  const { keyboardProps } = useKeyboard({
+    onKeyDown: (e) => {
+      if (isOpen && e.key === 'Escape') {
+        setIsOpen(false);
+        buttonRef.current?.focus(); // Restore focus to the element which opened the menu
+      }
+    },
+  });
+
+  const handleSourceClick = (id: NodeIdentifier) => {
+    setIsOpen(false);
+    buttonRef.current?.focus();
+    onSourceSelect(id, true);
+  };
+
+  const handleRootSelect = () => {
+    setIsOpen(false);
+    buttonRef.current?.focus();
+    onRootSelect();
+  };
+
+  let currentResource: Resource | undefined = undefined;
+
+  for (let i = 0; i < sources.length; i++) {
+    const source = sources[i];
+    if (currentSource?.source === source.id) {
+      currentResource = source.nodes.find((node) => {
+        if (node.id.id === currentSource?.id) {
+          return node;
+        }
+      });
+    }
+  }
+
+  return (
+    <div {...focusWithinProps} {...keyboardProps} className="relative w-72 border border-2 rounded border-gray-300">
+      <button
+        ref={buttonRef}
+        type="button"
+        aria-label="Source quick select"
+        aria-expanded={isOpen}
+        aria-controls={`${uniqueId}-button-menu`}
+        onClick={() => setIsOpen(!isOpen)}
+        className="relative flex items-center text-sm font-semibold p-2 w-full"
+      >
+        {currentResource && (
+          <>
+            <span className="sr-only">current source </span>
+            <Icon icon={currentResource.type as IconOptions} resourceSource="matrix" aria-hidden className="mr-2.5" />
+            <div className="truncate max-w-[200px]">{currentResource.label}</div>
+          </>
+        )}
+
+        {!currentResource && (
+          <>
+            <span className="sr-only">view </span>
+            <Icon icon={'root' as IconOptions} aria-hidden className="mr-2.5" />
+            All available sources
+          </>
+        )}
+
+        <Icon icon={'arrow-down' as IconOptions} aria-hidden className="absolute right-3" />
+      </button>
+      <ul
+        id={`${uniqueId}-button-menu`}
+        aria-hidden={!isOpen}
+        className={`absolute z-50 top-[calc(100%+5px)] -left-0.5 w-[calc(100%+4px)] bg-gray-100 border border-2 rounded border-gray-300 p-2 ${
+          !isOpen ? 'hidden' : ''
+        }`}
+      >
+        <li
+          key="return-root"
+          className="flex items-center text-sm font-semibold mb-2 bg-white border rounded border-grey-200"
+        >
+          <button
+            type="button"
+            onClick={handleRootSelect}
+            className={`relative grow flex items-center p-2.5 hover:bg-gray-100 focus:bg-gray-100`}
+          >
+            <Icon icon={'root' as IconOptions} aria-hidden className="mr-2.5" />
+            All available sources
+          </button>
+        </li>
+        {isLoading && (
+          <li className="mt-6">
+            <Spinner size="lg" label="Loading sources" />
+          </li>
+        )}
+        {!isLoading &&
+          sources.map(({ id: sourceId, name, nodes }, index) => {
+            return (
+              <li
+                key={sourceId}
+                className={`flex flex-col text-sm font-semibold text-grey-800 ${index > 0 ? 'mt-3' : ''}`}
+              >
+                <div className="relative flex justify-center before:w-full before:h-px before:bg-gray-300 before:absolute before:top-2/4 before:z-0">
+                  <span className="z-10 bg-gray-100 px-2.5">{name}</span>
+                </div>
+                {nodes?.length > 0 && (
+                  <ul aria-label={`${name} nodes`} className="flex flex-col mt-2">
+                    {nodes.map(({ type, id: nodeId, selected, label }) => {
+                      return (
+                        <li
+                          key={`${sourceId}-${nodeId.id}`}
+                          className="flex items-center bg-white border border-b-0 last:border-b border-grey-200 first:rounded-t last:rounded-b"
+                        >
+                          <button
+                            type="button"
+                            onClick={() => handleSourceClick(nodeId)}
+                            className={`relative grow flex items-center p-2.5 hover:bg-gray-100 focus:bg-gray-100 ${
+                              selected ? 'bg-blue-100 text-blue-400' : ''
+                            }`}
+                          >
+                            <Icon
+                              icon={type as IconOptions}
+                              resourceSource="matrix"
+                              aria-label={type}
+                              className="shrink-0 mr-2.5"
+                            />
+                            <span className="text-left mr-7">{label}</span>
+                            {nodeId === currentResource?.id && (
+                              <Icon
+                                icon={'selected' as IconOptions}
+                                aria-label="selected"
+                                className="absolute right-4"
+                              />
+                            )}
+                          </button>
+                        </li>
+                      );
+                    })}
+                  </ul>
+                )}
+              </li>
+            );
+          })}
+      </ul>
+    </div>
+  );
+}

package/src/SourceDropdown/sample-sources.json

@@ -0,0 +1,110 @@
+[
+  {
+    "id": "1",
+    "name": "Acme corporate system",
+    "nodes": [
+      {
+        "id": {
+          "id": "1",
+          "source": "1"
+        },
+        "type": "site",
+        "selected": false,
+        "label": "HandyHomes Website very long wrapping name",
+        "childCount": 21
+      },
+      {
+        "id": {
+          "id": "2",
+          "source": "1"
+        },
+        "type": "site",
+        "selected": false,
+        "label": "Another Website",
+        "childCount": 13
+      }
+    ]
+  },
+  {
+    "id": "2",
+    "name": "Acme internal system",
+    "nodes": [
+      {
+        "id": {
+          "id": "1",
+          "source": "2"
+        },
+        "type": "site",
+        "selected": false,
+        "label": "Intranet Website",
+        "childCount": 15
+      },
+      {
+        "id": {
+          "id": "2",
+          "source": "2"
+        },
+        "type": "site",
+        "selected": false,
+        "label": "Social Website",
+        "childCount": 10
+      }
+    ]
+  },
+  {
+    "id": "3",
+    "name": "Other system",
+    "nodes": [
+      {
+        "id": {
+          "id": "1",
+          "source": "3"
+        },
+        "type": "folder",
+        "selected": false,
+        "label": "Digital asset manager",
+        "childCount": 0
+      },
+      {
+        "id": {
+          "id": "2",
+          "source": "3"
+        },
+        "type": "image",
+        "selected": false,
+        "label": "Unsplash image library",
+        "childCount": 0
+      },
+      {
+        "id": {
+          "id": "3",
+          "source": "3"
+        },
+        "type": "image",
+        "selected": false,
+        "label": "Unsplash image library",
+        "childCount": 0
+      },
+      {
+        "id": {
+          "id": "4",
+          "source": "3"
+        },
+        "type": "image",
+        "selected": false,
+        "label": "Unsplash image library",
+        "childCount": 0
+      },
+      {
+        "id": {
+          "id": "5",
+          "source": "3"
+        },
+        "type": "image",
+        "selected": false,
+        "label": "Unsplash image library",
+        "childCount": 0
+      }
+    ]
+  }
+]

package/src/SourceList/SourceList.spec.tsx

@@ -0,0 +1,224 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import React from 'react';
+import { screen, render, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { useOverlayTriggerState, OverlayTriggerState } from 'react-stately';
+import SourceList from './SourceList';
+
+const sources = [
+  {
+    id: '1',
+    name: 'Source 1',
+    nodes: [
+      {
+        id: {
+          id: '1',
+          source: '1',
+        },
+        type: 'site',
+        selected: false,
+        label: 'Node 1',
+        childCount: 21,
+      },
+      {
+        id: {
+          id: '2',
+          source: '1',
+        },
+        type: 'site',
+        selected: false,
+        label: 'Node 2',
+        childCount: 13,
+      },
+    ],
+  },
+  {
+    id: '2',
+    name: 'Source 2',
+    nodes: [
+      {
+        id: {
+          id: '1',
+          source: '2',
+        },
+        type: 'site',
+        selected: false,
+        label: 'Node 3',
+        childCount: 15,
+      },
+      {
+        id: {
+          id: '2',
+          source: '2',
+        },
+        type: 'site',
+        selected: false,
+        label: 'Node 4',
+        childCount: 10,
+      },
+    ],
+  },
+];
+
+function SourceListTestWrapper({
+  constructFunction,
+}: {
+  constructFunction: (previewModalState: OverlayTriggerState) => JSX.Element;
+}) {
+  const previewModalState = useOverlayTriggerState({});
+  return constructFunction(previewModalState);
+}
+
+describe('SourceList', () => {
+  it('Shows loading when isLoading is true', async () => {
+    render(
+      <SourceListTestWrapper
+        constructFunction={(previewModalState) => {
+          return (
+            <SourceList
+              sources={sources}
+              previewModalState={previewModalState}
+              isLoading={true}
+              onSourceSelect={() => {}}
+              onSourceDrillDown={() => {}}
+            />
+          );
+        }}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('loading Source list')).toBeTruthy();
+    });
+  });
+
+  it('Source list render each source', async () => {
+    render(
+      <SourceListTestWrapper
+        constructFunction={(previewModalState) => {
+          return (
+            <SourceList
+              sources={sources}
+              previewModalState={previewModalState}
+              isLoading={false}
+              onSourceSelect={() => {}}
+              onSourceDrillDown={() => {}}
+            />
+          );
+        }}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.queryByText('Source 1')).toBeTruthy();
+      expect(screen.queryByText('Source 2')).toBeTruthy();
+    });
+  });
+
+  it('Focus is moved to the source list', async () => {
+    render(
+      <SourceListTestWrapper
+        constructFunction={(previewModalState) => {
+          return (
+            <SourceList
+              sources={sources}
+              previewModalState={previewModalState}
+              isLoading={false}
+              onSourceSelect={() => {}}
+              onSourceDrillDown={() => {}}
+            />
+          );
+        }}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.queryByLabelText('Source list')).toHaveFocus();
+    });
+  });
+
+  it('Source list renders each sources nodes', async () => {
+    render(
+      <SourceListTestWrapper
+        constructFunction={(previewModalState) => {
+          return (
+            <SourceList
+              sources={sources}
+              previewModalState={previewModalState}
+              isLoading={false}
+              onSourceSelect={() => {}}
+              onSourceDrillDown={() => {}}
+            />
+          );
+        }}
+      />,
+    );
+
+    await waitFor(() => {
+      const source1 = screen.getByLabelText('Source 1 nodes');
+      expect(within(source1).queryByText('Node 1')).toBeTruthy();
+      expect(within(source1).queryByText('Node 2')).toBeTruthy();
+
+      const source2 = screen.getByLabelText('Source 2 nodes');
+      expect(within(source2).queryByText('Node 3')).toBeTruthy();
+      expect(within(source2).queryByText('Node 4')).toBeTruthy();
+    });
+  });
+
+  it('Clicking node body triggers correct onSourceSelect', async () => {
+    const onSourceSelect = jest.fn();
+
+    render(
+      <SourceListTestWrapper
+        constructFunction={(previewModalState) => {
+          return (
+            <SourceList
+              sources={sources}
+              previewModalState={previewModalState}
+              isLoading={false}
+              onSourceSelect={onSourceSelect}
+              onSourceDrillDown={() => {}}
+            />
+          );
+        }}
+      />,
+    );
+
+    const user = userEvent.setup();
+    const itemButton = screen.getByRole('button', { name: 'site Node 1' });
+    user.click(itemButton);
+
+    await waitFor(() => {
+      // Provides the item that was clicked and an id reference to the button that was clicked
+      expect(onSourceSelect).toHaveBeenCalledWith({ source: '1', id: '1' }, { id: expect.any(String) });
+    });
+  });
+
+  it('Clicking node child count triggers correct onSourceDrillDown', async () => {
+    const onSourceDrillDown = jest.fn();
+
+    render(
+      <SourceListTestWrapper
+        constructFunction={(previewModalState) => {
+          return (
+            <SourceList
+              sources={sources}
+              previewModalState={previewModalState}
+              isLoading={false}
+              onSourceSelect={() => {}}
+              onSourceDrillDown={onSourceDrillDown}
+            />
+          );
+        }}
+      />,
+    );
+
+    const user = userEvent.setup();
+    user.click(screen.getByRole('button', { name: 'Drill down to Node 1 children' }));
+
+    await waitFor(() => {
+      expect(onSourceDrillDown).toHaveBeenCalledWith({ source: '1', id: '1' });
+    });
+  });
+});

package/src/SourceList/SourceList.stories.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import { useOverlayTriggerState } from 'react-stately';
+
+import SourceList from './SourceList';
+import sampleSources from './sample-sources.json';
+
+export default {
+  title: 'Source List',
+  component: SourceList,
+} as Meta<typeof SourceList>;
+
+const Template: StoryFn<typeof SourceList> = ({ sources, isLoading, allowedTypes }) => {
+  const previewModalState = useOverlayTriggerState({});
+
+  return (
+    <SourceList
+      sources={sources}
+      previewModalState={previewModalState}
+      isLoading={isLoading}
+      onSourceSelect={({ source, id }) => alert(`Source Select: ${source} - ${id}`)}
+      onSourceDrillDown={({ source, id }) => alert(`Child Drill Down: ${source} - ${id}`)}
+      allowedTypes={allowedTypes}
+    />
+  );
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  sources: sampleSources,
+  isLoading: false,
+  allowedTypes: ['site', 'image'],
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  ...Primary.args,
+  isLoading: true,
+  allowedTypes: ['site', 'image'],
+};

package/src/SourceList/SourceList.tsx

@@ -0,0 +1,93 @@
+import React, { useEffect, useRef } from 'react';
+import { OverlayTriggerState } from 'react-stately';
+import { DOMAttributes, FocusableElement } from '@react-types/shared';
+
+import ResourceItem from '../ResourceItem/ResourceItem';
+import { NodeIdentifier, Source } from '../index';
+import { SkeletonList } from '../Skeleton/List/SkeletonList';
+import clsx from 'clsx';
+
+export interface SourceListProps {
+  sources: Array<Source>;
+  previewModalState: OverlayTriggerState;
+  isLoading: boolean;
+  onSourceSelect: (node: NodeIdentifier, overlayProps: DOMAttributes<FocusableElement>) => void;
+  onSourceDrillDown: (node: NodeIdentifier) => void;
+  allowedTypes?: string[] | undefined;
+}
+
+const SourceList = function ({
+  sources,
+  previewModalState,
+  isLoading,
+  onSourceSelect,
+  onSourceDrillDown,
+  allowedTypes,
+}: SourceListProps) {
+  const listRef = useRef<HTMLUListElement>(null);
+
+  useEffect(() => {
+    if (listRef.current) {
+      listRef.current?.focus({
+        preventScroll: true,
+      });
+    }
+  }, []);
+
+  return (
+    <ul
+      ref={listRef}
+      tabIndex={-1}
+      aria-label={`${isLoading ? 'loading' : ''} Source list`}
+      className={clsx('flex flex-col bg-gray-100 min-h-full', !isLoading && 'px-7 py-4')}
+    >
+      {isLoading && (
+        <>
+          <li>
+            <SkeletonList itemCount={3} />
+          </li>
+          <li>
+            <SkeletonList itemCount={3} />
+          </li>
+        </>
+      )}
+
+      {!isLoading &&
+        sources.map(({ id: sourceId, name, nodes }, index) => {
+          return (
+            <li
+              key={sourceId}
+              className={`flex flex-col text-sm font-semibold text-grey-800 ${index > 0 ? 'mt-3' : ''}`}
+            >
+              <div className="relative flex justify-center before:w-full before:h-px before:bg-gray-300 before:absolute before:top-2/4 before:z-0">
+                <span className="z-10 bg-gray-100 px-2.5">{name}</span>
+              </div>
+              {nodes?.length > 0 && (
+                <ul aria-label={`${name} nodes`} className="flex flex-col">
+                  {nodes.map(({ type, id: nodeId, selected, label, childCount }) => {
+                    return (
+                      <ResourceItem
+                        key={`${sourceId}-${nodeId.id}`}
+                        id={nodeId}
+                        selected={selected}
+                        label={label}
+                        type={type}
+                        childCount={childCount}
+                        previewModalState={previewModalState}
+                        onSelect={onSourceSelect}
+                        onDrillDown={onSourceDrillDown}
+                        className="mt-3 rounded-lg"
+                        allowedTypes={allowedTypes}
+                      />
+                    );
+                  })}
+                </ul>
+              )}
+            </li>
+          );
+        })}
+    </ul>
+  );
+};
+
+export default SourceList;