@squiz/resource-browser 1.69.2 → 2.1.9-rc.0

package/src/ResourceBreadcrumb/ResourceBreadcrumb.spec.tsx

@@ -1,133 +0,0 @@
-/* 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 ResourceBreadcrumb from './ResourceBreadcrumb';
-
-const hierarchy = [
-  {
-    key: '1',
-    label: 'HandyHomes website',
-    node: 'A',
-  },
-  {
-    key: '2',
-    label: 'Section 1',
-    node: 'B',
-  },
-  {
-    key: '3',
-    label: 'Pages',
-    node: 'C',
-  },
-];
-
-describe('ResourceBreadcrumb', () => {
-  const onBreadcrumbSelect = jest.fn();
-
-  it('Breadcrumb renders each item', async () => {
-    render(<ResourceBreadcrumb hierarchy={hierarchy} onBreadcrumbSelect={() => {}} onReturnToRoot={() => {}} />);
-
-    await waitFor(() => {
-      expect(screen.getByText('HandyHomes website')).toBeTruthy();
-      expect(screen.getByRole('button', { name: 'HandyHomes website' })).toBeTruthy();
-
-      expect(screen.getByText('Section 1')).toBeTruthy();
-      expect(screen.getByRole('button', { name: 'Section 1' })).toBeTruthy();
-
-      // Last item isn't a button
-      expect(screen.getByText('Pages')).toBeTruthy();
-      expect(screen.getByText('Pages').tagName.toLocaleLowerCase()).toEqual('div');
-    });
-  });
-
-  it('Clicking breadcrumb calls onBreadcrumbSelect', async () => {
-    render(
-      <ResourceBreadcrumb hierarchy={hierarchy} onBreadcrumbSelect={onBreadcrumbSelect} onReturnToRoot={() => {}} />,
-    );
-
-    const user = userEvent.setup();
-    user.click(screen.getByRole('button', { name: 'HandyHomes website' }));
-
-    await waitFor(() => {
-      expect(onBreadcrumbSelect).toHaveBeenCalledWith(hierarchy[0].node);
-    });
-  });
-
-  it('Clicking root icon calls onReturnToRoot', async () => {
-    const onReturnToRoot = jest.fn();
-
-    render(<ResourceBreadcrumb hierarchy={hierarchy} onBreadcrumbSelect={() => {}} onReturnToRoot={onReturnToRoot} />);
-
-    const user = userEvent.setup();
-    user.click(screen.getByRole('button', { name: 'Return to source list' }));
-
-    await waitFor(() => {
-      expect(onReturnToRoot).toHaveBeenCalled();
-    });
-  });
-
-  it('Truncates long hierarchy correctly', async () => {
-    const { container } = render(
-      <ResourceBreadcrumb
-        hierarchy={[
-          ...hierarchy,
-          {
-            key: '4',
-            label: 'Item 4',
-            node: 'D',
-          },
-          {
-            key: '5',
-            label: 'Item 5',
-            node: 'E',
-          },
-        ]}
-        onBreadcrumbSelect={() => {}}
-        onReturnToRoot={() => {}}
-      />,
-    );
-
-    await waitFor(() => {
-      // This is handled by css, so check the collapse class is on the root
-      expect(container.querySelector('.resource-breadcrumb--collapsed')).toBeTruthy();
-
-      expect(screen.getByText('HandyHomes website')).toBeTruthy();
-      expect(screen.getByRole('button', { name: 'HandyHomes website' })).toBeTruthy();
-
-      // Expand button is rendered
-      expect(screen.getByRole('button', { name: 'Expand breadcrumb' })).toBeTruthy();
-
-      // Middle buttons are still rendered as they are hidden by CSS
-      expect(screen.queryByRole('button', { name: 'Section 1' })).toBeTruthy();
-      expect(screen.queryByRole('button', { name: 'Pages' })).toBeTruthy();
-
-      expect(screen.getByRole('button', { name: 'Item 4' })).toBeTruthy();
-      expect(screen.getByText('Item 5')).toBeTruthy();
-    });
-
-    // Click expander
-    const user = userEvent.setup();
-    user.click(screen.getByRole('button', { name: 'Expand breadcrumb' }));
-
-    // Expect css class to change
-    await waitFor(() => {
-      expect(container.querySelector('.resource-breadcrumb--expanded')).toBeTruthy();
-    });
-  });
-
-  // Check that the breadcrumb has a title attribute that is the full name of the item
-  it('Breadcrumb has title attribute', async () => {
-    render(<ResourceBreadcrumb hierarchy={hierarchy} onBreadcrumbSelect={() => {}} onReturnToRoot={() => {}} />);
-
-    await waitFor(() => {
-      expect(screen.getByRole('button', { name: 'HandyHomes website' }).firstChild).toHaveAttribute(
-        'title',
-        'HandyHomes website',
-      );
-      expect(screen.getByRole('button', { name: 'Section 1' }).firstChild).toHaveAttribute('title', 'Section 1');
-      expect(screen.getByText('Pages')).toHaveAttribute('title', 'Pages');
-    });
-  });
-});

package/src/ResourceBreadcrumb/ResourceBreadcrumb.stories.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-
-import ResourceBreadcrumb from './ResourceBreadcrumb';
-import sampleHierarchy from './sample-hierarchy.json';
-
-export default {
-  title: 'Resource Breadcrumb',
-  component: ResourceBreadcrumb,
-} as Meta<typeof ResourceBreadcrumb>;
-
-const Template: StoryFn<typeof ResourceBreadcrumb> = ({ hierarchy }) => (
-  <ResourceBreadcrumb
-    hierarchy={hierarchy}
-    onBreadcrumbSelect={(node) => alert(`Node Select: ${node}`)}
-    onReturnToRoot={() => alert(`Return to Root`)}
-  />
-);
-
-export const Primary = Template.bind({});
-
-Primary.args = {
-  hierarchy: sampleHierarchy,
-};

package/src/ResourceBreadcrumb/ResourceBreadcrumb.tsx

@@ -1,79 +0,0 @@
-import React, { useState, useCallback, useEffect } from 'react';
-
-import { Icon, IconOptions } from '@squiz/generic-browser-lib';
-import { Hierarchy } from '../types';
-
-export interface ResourceBreadcrumbProps<T> {
-  hierarchy: Hierarchy<T>;
-  onBreadcrumbSelect: (node: T) => void;
-  onReturnToRoot: () => void;
-}
-
-const ResourceBreadcrumb = function <T>({ hierarchy, onBreadcrumbSelect, onReturnToRoot }: ResourceBreadcrumbProps<T>) {
-  // Track expanded state
-  const [expandedHierarchy, setExpandedHierarchy] = useState(false);
-
-  // On update (new page) reset the expanded state
-  useEffect(() => {
-    setExpandedHierarchy(false);
-  }, [hierarchy]);
-
-  // Handle toggling the state to expanded
-  const handleExpandHierarchy = useCallback(() => {
-    setExpandedHierarchy(true);
-  }, []);
-
-  return (
-    <nav
-      aria-label="Resource breadcrumb"
-      className={`text-sm text-gray-600 px-7 my-5 resource-breadcrumb ${
-        expandedHierarchy ? 'resource-breadcrumb--expanded' : 'resource-breadcrumb--collapsed'
-      }`}
-    >
-      <ol className="flex flex-wrap items-center">
-        <li className="flex items-center mr-3">
-          <button type="button" onClick={onReturnToRoot}>
-            <Icon icon={'root' as IconOptions} aria-label="Return to source list" className="" />
-          </button>
-        </li>
-        {hierarchy.map(({ key, label, node }, index) => {
-          return (
-            <li
-              key={`${key}`}
-              className="resource-breadcrumb__item max-md:hidden flex items-center mr-2 before:content-['/'] before:mr-2"
-            >
-              {index !== hierarchy.length - 1 && (
-                <button type="button" onClick={() => onBreadcrumbSelect(node)}>
-                  <div className={`resource-breadcrumb__label`} title={label}>
-                    {label}
-                  </div>
-                </button>
-              )}
-              {index === hierarchy.length - 1 && (
-                <div className={`resource-breadcrumb__label md:font-semibold`} title={label}>
-                  {label}
-                </div>
-              )}
-
-              {hierarchy.length > 3 && index === 0 && (
-                <div className="resource-breadcrumb__expander flex">
-                  <div className="before:content-['/'] mx-2" />
-                  <button
-                    title="Expand breadcrumb"
-                    aria-label="Expand breadcrumb"
-                    onClick={handleExpandHierarchy}
-                    className="flex items-center justify-center"
-                  >
-                    ...
-                  </button>
-                </div>
-              )}
-            </li>
-          );
-        })}
-      </ol>
-    </nav>
-  );
-};
-
-export default ResourceBreadcrumb;

package/src/ResourceBreadcrumb/resource-breadcrumb.scss

@@ -1,28 +0,0 @@
-.resource-breadcrumb--collapsed {
-  .resource-breadcrumb__label {
-    @apply max-w-[250px] md:max-w-[90px] truncate hover:underline focus:underline cursor-pointer;
-  }
-
-  .resource-breadcrumb__item:nth-child(n + 3) {
-    display: none;
-  }
-
-  .resource-breadcrumb__item:nth-last-child(-n + 2) {
-    display: flex;
-    @apply max-md:hidden;
-  }
-
-  .resource-breadcrumb__item:last-child {
-    display: flex;
-  }
-}
-
-.resource-breadcrumb--expanded {
-  .resource-breadcrumb__expander {
-    display: none;
-  }
-
-  .resource-breadcrumb__item:last-child {
-    display: flex;
-  }
-}

package/src/ResourceBreadcrumb/sample-hierarchy.json

@@ -1,27 +0,0 @@
-[
-  {
-    "key": "1",
-    "label": "HandyHomes website",
-    "node": "A"
-  },
-  {
-    "key": "2",
-    "label": "Section 1 very long name",
-    "node": "B"
-  },
-  {
-    "key": "3",
-    "label": "Page 1 very long name",
-    "node": "C"
-  },
-  {
-    "key": "4",
-    "label": "Page 71 very long name",
-    "node": "D"
-  },
-  {
-    "key": "5",
-    "label": "Pages very long name",
-    "node": "E"
-  }
-]

package/src/ResourceList/ResourceList.spec.tsx

@@ -1,202 +0,0 @@
-/* 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 { mockResource } from '../__mocks__/MockModels';
-import { useOverlayTriggerState, OverlayTriggerState } from 'react-stately';
-import ResourceList from './ResourceList';
-
-const resources = [
-  mockResource({ id: '1', type: { code: 'page', name: 'Page' }, name: 'Resource 1' }),
-  mockResource({ id: '2', type: { code: 'page', name: 'Page' }, name: 'Resource 2' }),
-  mockResource({ id: '3', type: { code: 'folder', name: 'Folder' }, name: 'Resource 3', childCount: 31 }),
-  mockResource({ id: '4', type: { code: 'folder', name: 'Folder' }, name: 'Resource 4', childCount: 55 }),
-  mockResource({ id: '5', type: { code: 'word_doc', name: 'MS Word Document' }, name: 'Resource 5' }),
-];
-
-function ResourceListTestWrapper({
-  constructFunction,
-}: {
-  constructFunction: (previewModalState: OverlayTriggerState) => JSX.Element;
-}) {
-  const previewModalState = useOverlayTriggerState({});
-  return constructFunction(previewModalState);
-}
-
-describe('ResourceList', () => {
-  it('Shows loading when isLoading true', async () => {
-    const reload = jest.fn();
-
-    render(
-      <ResourceListTestWrapper
-        constructFunction={(previewModalState) => {
-          return (
-            <ResourceList
-              resources={resources}
-              previewModalState={previewModalState}
-              isLoading={true}
-              onResourceSelect={() => {}}
-              onResourceDrillDown={() => {}}
-              error={null}
-              handleReload={reload}
-              handleReturnToRoot={reload}
-            />
-          );
-        }}
-      />,
-    );
-
-    await waitFor(() => {
-      expect(screen.getByLabelText('loading Resource list')).toBeTruthy();
-    });
-  });
-
-  it('Focus is moved to the resource list', async () => {
-    const reload = jest.fn();
-
-    render(
-      <ResourceListTestWrapper
-        constructFunction={(previewModalState) => {
-          return (
-            <ResourceList
-              resources={resources}
-              previewModalState={previewModalState}
-              isLoading={false}
-              onResourceSelect={() => {}}
-              onResourceDrillDown={() => {}}
-              error={null}
-              handleReload={reload}
-              handleReturnToRoot={reload}
-            />
-          );
-        }}
-      />,
-    );
-
-    await waitFor(() => {
-      expect(screen.queryByLabelText('Resource list')).toHaveFocus();
-    });
-  });
-
-  it('Resource list render each resource', async () => {
-    const reload = jest.fn();
-
-    render(
-      <ResourceListTestWrapper
-        constructFunction={(previewModalState) => {
-          return (
-            <ResourceList
-              resources={resources}
-              previewModalState={previewModalState}
-              isLoading={false}
-              onResourceSelect={() => {}}
-              onResourceDrillDown={() => {}}
-              error={null}
-              handleReload={reload}
-              handleReturnToRoot={reload}
-            />
-          );
-        }}
-      />,
-    );
-
-    await waitFor(() => {
-      expect(screen.queryByText('Resource 1')).toBeTruthy();
-      expect(screen.queryByText('Resource 2')).toBeTruthy();
-      expect(screen.queryByText('Resource 3')).toBeTruthy();
-      expect(screen.queryByText('Resource 4')).toBeTruthy();
-      expect(screen.queryByText('Resource 5')).toBeTruthy();
-    });
-  });
-
-  it('Clicking resource body triggers correct onResourceSelect', async () => {
-    const onResourceSelect = jest.fn();
-    const reload = jest.fn();
-
-    render(
-      <ResourceListTestWrapper
-        constructFunction={(previewModalState) => {
-          return (
-            <ResourceList
-              resources={resources}
-              previewModalState={previewModalState}
-              isLoading={false}
-              onResourceSelect={onResourceSelect}
-              onResourceDrillDown={() => {}}
-              error={null}
-              handleReload={reload}
-              handleReturnToRoot={reload}
-            />
-          );
-        }}
-      />,
-    );
-
-    const user = userEvent.setup();
-    user.click(screen.getByRole('button', { name: 'page Resource 1' }));
-
-    await waitFor(() => {
-      // Provides the item that was clicked and an id reference to the button that was clicked
-      expect(onResourceSelect).toHaveBeenCalledWith(resources[0], { id: expect.any(String) });
-    });
-  });
-
-  it('Clicking node child count triggers correct onResourceDrillDown', async () => {
-    const onResourceDrillDown = jest.fn();
-    const reload = jest.fn();
-
-    render(
-      <ResourceListTestWrapper
-        constructFunction={(previewModalState) => {
-          return (
-            <ResourceList
-              resources={resources}
-              previewModalState={previewModalState}
-              isLoading={false}
-              onResourceSelect={() => {}}
-              onResourceDrillDown={onResourceDrillDown}
-              error={null}
-              handleReload={reload}
-              handleReturnToRoot={reload}
-            />
-          );
-        }}
-      />,
-    );
-
-    const user = userEvent.setup();
-    user.click(screen.getByRole('button', { name: 'Drill down to Resource 3 children' }));
-
-    await waitFor(() => {
-      expect(onResourceDrillDown).toHaveBeenCalledWith(resources[2]);
-    });
-  });
-
-  it('Renders error state when an error occurs loading resource list', async () => {
-    const reload = jest.fn();
-
-    const { getByText } = render(
-      <ResourceListTestWrapper
-        constructFunction={(previewModalState) => {
-          return (
-            <ResourceList
-              resources={resources}
-              previewModalState={previewModalState}
-              isLoading={false}
-              onResourceSelect={() => {}}
-              onResourceDrillDown={() => {}}
-              error={new Error('This is a resource error!')}
-              handleReload={reload}
-              handleReturnToRoot={reload}
-            />
-          );
-        }}
-      />,
-    );
-
-    await waitFor(() => {
-      const errorMessage = getByText('This is a resource error!');
-      expect(errorMessage).toBeInTheDocument();
-    });
-  });
-});

package/src/ResourceList/ResourceList.stories.tsx

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

package/src/ResourceList/ResourceList.tsx

@@ -1,83 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { OverlayTriggerState } from 'react-stately';
-import { DOMAttributes, FocusableElement } from '@react-types/shared';
-import { ResourceItem, ResourceState, SkeletonList } from '@squiz/generic-browser-lib';
-
-import { Resource } from '../types';
-
-export interface ResourceListProps {
-  resources: Array<Resource>;
-  selectedResource?: Resource | null;
-  previewModalState: OverlayTriggerState;
-  isLoading: boolean;
-  onResourceSelect: (resource: Resource, overlayProps: DOMAttributes<FocusableElement>) => void;
-  onResourceDrillDown: (resource: Resource) => void;
-  allowedTypes?: string[] | undefined;
-  handleReturnToRoot: () => void;
-  handleReload: () => void;
-  error: Error | null;
-}
-
-const ResourceList = function ({
-  resources,
-  selectedResource,
-  previewModalState,
-  isLoading,
-  onResourceSelect,
-  onResourceDrillDown,
-  allowedTypes,
-  handleReturnToRoot,
-  handleReload,
-  error,
-}: ResourceListProps) {
-  const listRef = useRef<HTMLUListElement>(null);
-
-  // When resources change, because we are on a new page, reset focus to the list
-  useEffect(() => {
-    if (listRef.current) {
-      listRef.current?.focus({
-        preventScroll: true,
-      });
-    }
-  }, [resources]);
-
-  if (isLoading) {
-    return <SkeletonList itemCount={8} ariaLabel="loading Resource list" className="text-sm font-semibold" />;
-  }
-
-  return (
-    <ul
-      ref={listRef}
-      tabIndex={-1}
-      aria-label={`Resource list`}
-      className="flex flex-col text-sm font-semibold px-7 my-4 focus-visible:outline-0"
-    >
-      {/* Error State */}
-      {error && <ResourceState state="error" message={error.message} handleReload={handleReload} />}
-
-      {/* Empty State */}
-      {!error && resources.length === 0 && <ResourceState state="empty" handleReload={handleReturnToRoot} />}
-
-      {!error &&
-        resources.map((resource) => {
-          return (
-            <ResourceItem
-              key={resource.id}
-              item={resource}
-              selected={resource.id == selectedResource?.id}
-              label={resource.name}
-              type={resource.type.code}
-              childCount={resource.childCount}
-              previewModalState={previewModalState}
-              onSelect={onResourceSelect}
-              onDrillDown={onResourceDrillDown}
-              className="border-b-0 first:mt-0 first:rounded-t-lg last:rounded-b-lg last:border-b"
-              allowedTypes={allowedTypes}
-            />
-          );
-        })}
-    </ul>
-  );
-};
-
-export default ResourceList;