@squiz/resource-browser 1.69.1 → 2.1.8-rc.0

package/src/ResourcePickerContainer/ResourcePickerContainer.stories.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-import ResourcePickerContainer from './ResourcePickerContainer';
-import { createResourceBrowserCallbacks } from '../__mocks__/StorybookHelpers';
-import sampleSources from '../SourceList/sample-sources.json';
-
-export default {
-  title: 'Resource Picker container',
-  component: ResourcePickerContainer,
-} as Meta<typeof ResourcePickerContainer>;
-
-const Template: StoryFn<typeof ResourcePickerContainer> = ({ title, preselectedSourceId, preselectedResource }) => {
-  const { onRequestSources, onRequestChildren, onRequestResource, onChange } = createResourceBrowserCallbacks();
-
-  return (
-    <ResourcePickerContainer
-      title={title}
-      titleAriaProps={{}}
-      allowedTypes={undefined}
-      onRequestSources={onRequestSources}
-      onRequestChildren={onRequestChildren}
-      onRequestResource={onRequestResource}
-      preselectedSourceId={preselectedSourceId}
-      preselectedResource={preselectedResource}
-      onChange={onChange}
-      onClose={() => {
-        alert('Resource Browser closed');
-      }}
-    />
-  );
-};
-
-export const Primary = Template.bind({});
-
-Primary.args = {
-  title: 'Asset Picker',
-};
-
-export const SourceListResourceSelected = Template.bind({});
-// SourceList root node is selected
-SourceListResourceSelected.args = {
-  title: 'Asset Picker',
-  preselectedSourceId: sampleSources[0].id,
-  preselectedResource: sampleSources[0].nodes[1],
-};

package/src/ResourcePickerContainer/ResourcePickerContainer.tsx

@@ -1,290 +0,0 @@
-import React, { useState, useCallback, useMemo, useEffect } from 'react';
-import { DOMAttributes, FocusableElement } from '@react-types/shared';
-import { useOverlayTriggerState } from 'react-stately';
-import SourceList from '../SourceList/SourceList';
-import ResourceList from '../ResourceList/ResourceList';
-import ResourceBreadcrumb from '../ResourceBreadcrumb/ResourceBreadcrumb';
-import PreviewPanel from '../PreviewPanel/PreviewPanel';
-import SourceDropdown from '../SourceDropdown/SourceDropdown';
-import {
-  Source,
-  Resource,
-  HydratedResourceReference,
-  ScopedSource,
-  OnRequestSources,
-  OnRequestChildren,
-  OnRequestResource,
-} from '../types';
-import { useResourcePath } from '../Hooks/useResourcePath';
-import { useChildResources } from '../Hooks/useChildResources';
-import { useSources } from '../Hooks/useSources';
-import { usePreselectedResourcePath } from '../Hooks/usePreselectedResourcePath';
-import { useRecentLocations } from '../Hooks/useRecentLocations';
-import { useResources } from '../Hooks/useResource';
-import { RecentResourcesPaths, useRecentResourcesPaths } from '../Hooks/useRecentResourcesPaths';
-
-interface ResourcePickerContainerProps {
-  title: string;
-  titleAriaProps: DOMAttributes<FocusableElement>;
-  allowedTypes: string[] | undefined;
-  onRequestSources: OnRequestSources;
-  onRequestResource: OnRequestResource;
-  onRequestChildren: OnRequestChildren;
-  onChange(resource: HydratedResourceReference | null): void;
-  onClose: () => void;
-  preselectedSourceId?: string;
-  preselectedResource?: Resource | null;
-}
-
-function ResourcePickerContainer({
-  title,
-  titleAriaProps,
-  allowedTypes,
-  onRequestSources,
-  onRequestResource,
-  onRequestChildren,
-  onChange,
-  onClose,
-  preselectedSourceId,
-  preselectedResource,
-}: ResourcePickerContainerProps) {
-  const previewModalState = useOverlayTriggerState({});
-  const [selectedSource, setSelectedSource] = useState<Source | null>(null);
-  const [selectedResourceId, setSelectedResourceId] = useState<string | null>(null);
-  const [previewModalOverlayProps, setPreviewModalOverlayProps] = useState<DOMAttributes>({});
-  const { source, currentResource, hierarchy, setSource, push, popUntil } = useResourcePath();
-
-  // Recent locations relevant data
-  const { addRecentLocation, recentLocations } = useRecentLocations();
-
-  const { data: recentLocationsResources, isLoading: recentLocationsResourcesLoading } = useResources({
-    onRequestResource,
-    references: recentLocations,
-  });
-
-  const { data: recentLocationsSources, isLoading: recentLocationsLoading } = useRecentResourcesPaths({
-    sourceIds: recentLocations.map((item) => item.source),
-    resources: recentLocationsResources,
-    onRequestResource,
-    onRequestSources,
-  });
-
-  // Type check the returned values from recent locations requests
-  let recentSources: RecentResourcesPaths[] = [];
-  if (Array.isArray(recentLocationsSources)) recentSources = recentLocationsSources;
-
-  const {
-    data: sources,
-    isLoading: isSourceLoading,
-    reload: handleSourceReload,
-    error: sourceError,
-  } = useSources({ onRequestSources });
-
-  const {
-    data: resources,
-    isLoading: isResourcesLoading,
-    reload: handleResourceReload,
-    error: resourceError,
-  } = useChildResources({ source, currentResource, onRequestChildren });
-
-  const {
-    data: { source: preselectedSource, path: preselectedPath },
-    isLoading: isPreselectedResourcePathLoading,
-  } = usePreselectedResourcePath({
-    sourceId: preselectedSourceId,
-    resource: preselectedResource,
-    onRequestResource,
-    onRequestSources,
-  });
-
-  const selectedResource = useMemo(() => {
-    if (selectedSource) {
-      return selectedSource?.nodes.find((resource: Resource) => resource.id === selectedResourceId) || null;
-    }
-    return resources.find((resource: Resource) => resource.id === selectedResourceId) || null;
-  }, [selectedResourceId, resources, selectedSource]);
-
-  const handleResourceDrillDown = useCallback(
-    (resource: Resource) => {
-      push(resource);
-    },
-    [push],
-  );
-
-  const handleResourceSelected = useCallback((resource: Resource, overlayProps: DOMAttributes) => {
-    setPreviewModalOverlayProps(overlayProps);
-    setSelectedSource(null);
-    setSelectedResourceId(resource.id);
-  }, []);
-
-  const handleSourceDrilldown = useCallback(
-    (source: ScopedSource) => {
-      setSelectedSource(null);
-      setSelectedResourceId(null);
-      setSource(source);
-    },
-    [setSource],
-  );
-
-  const handleSourceSelected = useCallback((node: ScopedSource, overlayProps: DOMAttributes) => {
-    const { source, resource } = node;
-    setPreviewModalOverlayProps(overlayProps);
-    setSelectedSource(source || null);
-    setSelectedResourceId(resource?.id || null);
-  }, []);
-
-  const handleReturnToRoot = useCallback(() => {
-    setSelectedSource(null);
-    setSelectedResourceId(null);
-    setSource(null);
-  }, [setSource]);
-
-  const handleDetailSelect = useCallback(
-    (resource: Resource) => {
-      const detailSelectedSource = selectedSource ?? (source?.source as Source);
-      onChange({ resource, source: detailSelectedSource });
-
-      // Find the path that got them to where they are
-      const lastPathItem = hierarchy[hierarchy.length - 1]?.node as ScopedSource;
-      const lastPathResource = lastPathItem && 'resource' in lastPathItem ? lastPathItem?.resource : lastPathItem;
-
-      if (lastPathResource) {
-        addRecentLocation({
-          resource: lastPathResource.id,
-          source: detailSelectedSource.id,
-        });
-      }
-
-      onClose();
-    },
-    [selectedSource, source, currentResource],
-  );
-
-  const handleDetailClose = useCallback(() => {
-    setSelectedSource(null);
-    setSelectedResourceId(null);
-  }, []);
-
-  // Clear the selected resource if it no longer exists in the list of resources
-  // (eg. due to navigating up/down the tree).
-  useEffect(() => {
-    if (resources.length > 0 && selectedResourceId && !selectedResource) {
-      setSelectedSource(null);
-      setSelectedResourceId(null);
-    }
-  }, [resources, selectedResourceId, selectedResource]);
-
-  useEffect(() => {
-    if (preselectedSource && preselectedPath?.length) {
-      const [rootNode, ...path] = preselectedPath;
-      const leaf = path.pop();
-
-      if (leaf) {
-        setSource(
-          {
-            source: preselectedSource,
-            resource: rootNode,
-          },
-          path,
-        );
-
-        setSelectedResourceId(leaf.id);
-      } else {
-        setSelectedSource(preselectedSource);
-        setSelectedResourceId(rootNode.id);
-      }
-    }
-  }, [preselectedSource, preselectedSource]);
-
-  return (
-    <div className="relative flex flex-col h-full text-gray-800">
-      <div className="flex items-center p-4.5">
-        <h2 {...titleAriaProps} className="text-xl leading-6 text-gray-800 font-semibold mr-6">
-          {title}
-        </h2>
-        <div className="px-3 border-l border-gray-300 w-300px">
-          <SourceDropdown
-            sources={sources}
-            selectedSource={source}
-            isLoading={isSourceLoading || recentLocationsLoading || recentLocationsResourcesLoading}
-            onSourceSelect={handleSourceDrilldown}
-            onRootSelect={handleReturnToRoot}
-            setSource={setSource}
-            currentResource={currentResource}
-            recentSources={recentSources}
-          />
-        </div>
-        <button
-          type="button"
-          aria-label={`Close ${title} dialog`}
-          onClick={onClose}
-          className="absolute top-2 right-2 p-2.5 rounded hover:bg-blue-100 focus:bg-blue-100"
-        >
-          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path
-              d="M13.3 0.710017C13.1131 0.522765 12.8595 0.417532 12.595 0.417532C12.3305 0.417532 12.0768 0.522765 11.89 0.710017L6.99997 5.59002L2.10997 0.700017C1.92314 0.512765 1.66949 0.407532 1.40497 0.407532C1.14045 0.407532 0.886802 0.512765 0.699971 0.700017C0.309971 1.09002 0.309971 1.72002 0.699971 2.11002L5.58997 7.00002L0.699971 11.89C0.309971 12.28 0.309971 12.91 0.699971 13.3C1.08997 13.69 1.71997 13.69 2.10997 13.3L6.99997 8.41002L11.89 13.3C12.28 13.69 12.91 13.69 13.3 13.3C13.69 12.91 13.69 12.28 13.3 11.89L8.40997 7.00002L13.3 2.11002C13.68 1.73002 13.68 1.09002 13.3 0.710017Z"
-              fill="currentColor"
-            />
-          </svg>
-        </button>
-      </div>
-      <div className="flex border-t border-gray-300 h-[calc(100%-72px)]">
-        <div className="overflow-y-scroll flex-1 grow-[3] border-r border-gray-300">
-          <h3 className="sr-only">Resource List</h3>
-          {hierarchy.length > 0 && (
-            <ResourceBreadcrumb
-              hierarchy={hierarchy}
-              onBreadcrumbSelect={popUntil}
-              onReturnToRoot={handleReturnToRoot}
-            />
-          )}
-          {!source && (
-            <SourceList
-              sources={sources}
-              selectedResource={selectedResource}
-              previewModalState={previewModalState}
-              isLoading={
-                isSourceLoading ||
-                isPreselectedResourcePathLoading ||
-                recentLocationsLoading ||
-                recentLocationsResourcesLoading
-              }
-              onSourceSelect={handleSourceSelected}
-              onSourceDrilldown={handleSourceDrilldown}
-              handleReload={handleSourceReload}
-              setSource={setSource}
-              recentSources={recentSources}
-              error={sourceError}
-            />
-          )}
-          {source && (
-            <ResourceList
-              previewModalState={previewModalState}
-              resources={resources}
-              selectedResource={selectedResource}
-              isLoading={isResourcesLoading}
-              onResourceSelect={handleResourceSelected}
-              onResourceDrillDown={handleResourceDrillDown}
-              allowedTypes={allowedTypes}
-              handleReturnToRoot={handleReturnToRoot}
-              handleReload={handleResourceReload}
-              error={resourceError}
-            />
-          )}
-        </div>
-        <div className="sm:overflow-y-scroll sm:flex-1 sm:grow-[2] bg-white">
-          <PreviewPanel
-            resource={isResourcesLoading ? null : selectedResource}
-            modalState={previewModalState}
-            previewModalOverlayProps={previewModalOverlayProps}
-            allowedTypes={allowedTypes}
-            onSelect={handleDetailSelect}
-            onClose={handleDetailClose}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default ResourcePickerContainer;

package/src/SourceList/sample-sources.json

@@ -1,251 +0,0 @@
-[
-  {
-    "id": "1",
-    "name": "Acme corporate system",
-    "nodes": [
-      {
-        "id": "1",
-        "type": {
-          "code": "site",
-          "name": "Site"
-        },
-        "status": {
-          "code": "live",
-          "name": "Live"
-        },
-        "name": "HandyHomes Website",
-        "childCount": 21
-      },
-      {
-        "id": "10",
-        "type": {
-          "code": "site",
-          "name": "Site"
-        },
-        "status": {
-          "code": "live",
-          "name": "Live"
-        },
-        "name": "Another Website very long title to make it wrap to multiple lines",
-        "childCount": 135877
-      },
-      {
-        "id": "20",
-        "type": {
-          "code": "folder",
-          "name": "Folder"
-        },
-        "status": {
-          "code": "live",
-          "name": "Live"
-        },
-        "name": "Images",
-        "childCount": 100
-      },
-      {
-        "id": "9999",
-        "type": {
-          "code": "site",
-          "name": "Site"
-        },
-        "status": {
-          "code": "live",
-          "name": "Live"
-        },
-        "name": "Another very unique id site",
-        "childCount": 100
-      }
-    ]
-  },
-  {
-    "id": "2",
-    "name": "Acme internal system",
-    "nodes": [
-      {
-        "id": "32",
-        "type": {
-          "code": "site",
-          "name": "Site"
-        },
-        "status": {
-          "code": "live",
-          "name": "Live"
-        },
-        "name": "Intranet Website",
-        "childCount": 15
-      },
-      {
-        "id": "33",
-        "type": {
-          "code": "site",
-          "name": "Site"
-        },
-        "status": {
-          "code": "live",
-          "name": "Live"
-        },
-        "name": "Social Website",
-        "childCount": 10
-      }
-    ]
-  },
-  {
-    "id": "3",
-    "name": "Digital asset manager",
-    "nodes": []
-  },
-  {
-    "id": "4",
-    "name": "Unsplash image library",
-    "nodes": []
-  },
-  {
-    "id": "5",
-    "name": "Unsplash image library 2",
-    "nodes": []
-  },
-  {
-    "id": "6",
-    "name": "Unsplash image library 3",
-    "nodes": []
-  },
-  {
-    "id": "7",
-    "name": "Unsplash image library 4",
-    "nodes": []
-  },
-  {
-    "id": "8",
-    "name": "Unsplash image library 5",
-    "nodes": []
-  },
-  {
-    "id": "9",
-    "name": "Unsplash image library 6",
-    "nodes": []
-  },
-  {
-    "id": "10",
-    "name": "Unsplash image library 7",
-    "nodes": []
-  },
-  {
-    "id": "11",
-    "name": "Unsplash image library 8",
-    "nodes": []
-  },
-  {
-    "id": "12",
-    "name": "Unsplash image library 9",
-    "nodes": []
-  },
-  {
-    "id": "13",
-    "name": "Unsplash image library 10",
-    "nodes": []
-  },
-  {
-    "id": "14",
-    "name": "Unsplash image library 11",
-    "nodes": []
-  },
-  {
-    "id": "15",
-    "name": "Unsplash image library 12",
-    "nodes": []
-  },
-  {
-    "id": "16",
-    "name": "Unsplash image library 13",
-    "nodes": []
-  },
-  {
-    "id": "17",
-    "name": "Unsplash image library 14",
-    "nodes": []
-  },
-  {
-    "id": "18",
-    "name": "Unsplash image library 15",
-    "nodes": []
-  },
-  {
-    "id": "19",
-    "name": "Unsplash image library 16",
-    "nodes": []
-  },
-  {
-    "id": "20",
-    "name": "Unsplash image library 17",
-    "nodes": []
-  },
-  {
-    "id": "21",
-    "name": "Unsplash image library 18",
-    "nodes": []
-  },
-  {
-    "id": "22",
-    "name": "Unsplash image library 19",
-    "nodes": []
-  },
-  {
-    "id": "23",
-    "name": "Unsplash image library 20",
-    "nodes": []
-  },
-  {
-    "id": "24",
-    "name": "Unsplash image library 21",
-    "nodes": []
-  },
-  {
-    "id": "25",
-    "name": "Unsplash image library 22",
-    "nodes": []
-  },
-  {
-    "id": "26",
-    "name": "Unsplash image library 23",
-    "nodes": []
-  },
-  {
-    "id": "27",
-    "name": "Unsplash image library 24",
-    "nodes": []
-  },
-  {
-    "id": "28",
-    "name": "Unsplash image library 25",
-    "nodes": []
-  },
-  {
-    "id": "29",
-    "name": "Unsplash image library 26",
-    "nodes": []
-  },
-  {
-    "id": "30",
-    "name": "Unsplash image library 27",
-    "nodes": []
-  },
-  {
-    "id": "31",
-    "name": "Acme no children",
-    "nodes": [
-      {
-        "id": "3",
-        "type": {
-          "code": "site",
-          "name": "Site"
-        },
-        "status": {
-          "code": "live",
-          "name": "Live"
-        },
-        "name": "What Children?",
-        "childCount": 0
-      }
-    ]
-  }
-]

package/src/StatusIndicator/StatusIndicator.stories.tsx

@@ -1,83 +0,0 @@
-import StatusIndicator, { StatusIndicatorProps } from './StatusIndicator';
-import { Meta, StoryFn } from '@storybook/react';
-
-export default {
-  title: 'Status Indicator',
-  component: StatusIndicator,
-} as Meta<typeof StatusIndicator>;
-
-const Template: StoryFn<StatusIndicatorProps> = (args: StatusIndicatorProps) => (
-  <div className="m-3">
-    <StatusIndicator {...args} />
-  </div>
-);
-
-export const UnderConstruction = Template.bind({});
-UnderConstruction.args = {
-  status: {
-    code: 'under_construction',
-    name: 'Under construction',
-  },
-};
-
-export const PendingApproval = Template.bind({});
-PendingApproval.args = {
-  status: {
-    code: 'pending_approval',
-    name: 'Pending approval',
-  },
-};
-
-export const ApprovedToGoLive = Template.bind({});
-ApprovedToGoLive.args = {
-  status: {
-    code: 'approved_to_go_live',
-    name: 'Approved to go live',
-  },
-};
-
-export const Live = Template.bind({});
-Live.args = {
-  status: {
-    code: 'live',
-    name: 'Live',
-  },
-};
-
-export const UpForReview = Template.bind({});
-UpForReview.args = {
-  status: {
-    code: 'up_for_review',
-    name: 'Up for review',
-  },
-};
-
-export const SafeEditing = Template.bind({});
-SafeEditing.args = {
-  status: {
-    code: 'safe_editing',
-    name: 'Safe editing',
-  },
-};
-
-export const SafeEditingPendingApproval = Template.bind({});
-SafeEditingPendingApproval.args = {
-  status: {
-    code: 'safe_editing_pending_approval',
-    name: 'Safe editing pending approval',
-  },
-};
-export const SafeEditApprovedToGoLive = Template.bind({});
-SafeEditApprovedToGoLive.args = {
-  status: {
-    code: 'safe_edit_approved_to_go_live',
-    name: 'Safe edit approved to go live',
-  },
-};
-export const Archived = Template.bind({});
-Archived.args = {
-  status: {
-    code: 'archived',
-    name: 'Archived',
-  },
-};

package/src/StatusIndicator/StatusIndicator.tsx

@@ -1,38 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import { Status } from '../types';
-
-const statusColour = {
-  // Duplicated from the Matrix repository.
-  // src/Api/AssetManagementApi/Constants/AssetStatuses.php - contains a list of possible statuses.
-  // frontend/src/styles/common/status-colors.scss - contains the colours used for those statuses in Matrix.
-  unknown: '#ff0000',
-  archived: '#c98a67',
-  under_construction: '#94d1f9',
-  pending_approval: '#d0bbf0',
-  approved_to_go_live: '#f7eaa2',
-  live: '#bfe60a',
-  up_for_review: '#72cd32',
-  safe_editing: '#ff97b0',
-  safe_editing_pending_approval: '#d688db',
-  safe_edit_approved_to_go_live: '#ffb34a',
-};
-
-export type StatusIndicatorProps = {
-  className?: string;
-  status: Status;
-};
-
-const StatusIndicator = ({ className, status }: StatusIndicatorProps) => {
-  const color = statusColour[status.code as keyof typeof statusColour] || statusColour.unknown;
-
-  return (
-    <span
-      style={{ backgroundColor: color }}
-      className={clsx('block rounded-full w-3 h-3 border-1 border-solid border-black border-opacity-20', className)}
-      title={status.name}
-    ></span>
-  );
-};
-
-export default StatusIndicator;