@squiz/resource-browser 1.32.1-alpha.33 → 1.32.1-alpha.35

package/src/ResourcePicker/ResourcePicker.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
-
-import { Resource } from '../types';
 import AdsClickRoundedIcon from '@mui/icons-material/AdsClickRounded';
 import AddCircleOutlineRoundedIcon from '@mui/icons-material/AddCircleOutlineRounded';
 import PhotoLibraryRoundedIcon from '@mui/icons-material/PhotoLibraryRounded';
-
+import { DOMAttributes } from '@react-types/shared';
+import { Resource } from '../types';
 import ModalTrigger from '../Modal/ModalTrigger';
 import { ErrorState } from './States/Error';
 import { LoadingState } from './States/Loading';
@@ -12,16 +11,26 @@ import { SelectedState } from './States/Selected';
 import clsx from 'clsx';
 
 export type ResourcePickerProps = {
-  resource: Resource;
+  resource: Resource | null;
   allowedTypes: string[] | undefined;
-  isError: boolean;
+  error: Error | null;
   isLoading: boolean;
-  isDisabled: boolean;
+  isDisabled?: boolean;
+  children: (onClose: () => void, titleProps: DOMAttributes) => React.ReactElement;
+  onClear: () => void;
 };
 
-const ResourcePicker = ({ resource, allowedTypes, isError, isLoading, isDisabled }: ResourcePickerProps) => {
-  const isImagePicker = allowedTypes && allowedTypes.length === 1 && (allowedTypes.includes('image') as boolean);
-  const isEmpty = resource === null && !isLoading && (!isError as boolean);
+const ResourcePicker = ({
+  resource,
+  allowedTypes,
+  error,
+  isLoading,
+  isDisabled,
+  children,
+  onClear,
+}: ResourcePickerProps) => {
+  const isImagePicker = allowedTypes && allowedTypes.length === 1 && allowedTypes.includes('image');
+  const isEmpty = resource === null && !isLoading && !error;
 
   return (
     <div className={clsx('resource-picker', isDisabled && 'bg-gray-300')}>
@@ -37,14 +46,14 @@ const ResourcePicker = ({ resource, allowedTypes, isError, isLoading, isDisabled
           icon={<AddCircleOutlineRoundedIcon aria-hidden className="!w-4 !h-4" />}
           isDisabled={isDisabled}
         >
-          {() => <div>Resource browser here</div>}
+          {children}
         </ModalTrigger>
       ) : (
         <div className="resource-picker-info">
           <div className="resource-picker-info__layout">
             {isLoading && <LoadingState />}
-            {isError && <ErrorState isDisabled={isDisabled} />}
-            {resource !== null && <SelectedState resource={resource} isDisabled={isDisabled} />}
+            {error && <ErrorState error={error} onClear={onClear} />}
+            {resource && <SelectedState resource={resource} isDisabled={isDisabled} onClear={onClear} />}
           </div>
         </div>
       )}

package/src/ResourcePicker/States/Error.tsx

@@ -3,10 +3,16 @@ import React from 'react';
 import Icon, { IconOptions } from '../../Icons/Icon';
 import { ResetButton } from '../ResetButton';
 
-export const ErrorState = ({ isDisabled }: { isDisabled: boolean }) => (
+export type ErrorStateProps = {
+  error: Error;
+  isDisabled?: boolean;
+  onClear: () => void;
+};
+
+export const ErrorState = ({ error, isDisabled, onClear }: ErrorStateProps) => (
   <>
     <Icon icon={'error' as IconOptions} aria-hidden className="w-6 h-6 text-red-300" />
-    <div className="text-red-300">Failed to retrieve asset info due to a Component Service API key problem.</div>
-    <ResetButton isDisabled={isDisabled} />
+    <div className="text-red-300">{error.message}</div>
+    <ResetButton isDisabled={isDisabled} onClick={onClear} />
   </>
 );

package/src/ResourcePicker/States/Selected.tsx

@@ -8,10 +8,15 @@ import { ResetButton } from '../ResetButton';
 
 export type SelectedStateProps = {
   resource: Resource;
-  isDisabled: boolean;
+  isDisabled?: boolean;
+  onClear: () => void;
 };
 
-export const SelectedState = ({ resource: { id, type, name, status, squizImage }, isDisabled }: SelectedStateProps) => {
+export const SelectedState = ({
+  resource: { id, type, name, status, squizImage },
+  isDisabled,
+  onClear,
+}: SelectedStateProps) => {
   const fileSize = squizImage?.imageVariations?.original?.byteSize;
   const fileWidth = squizImage?.imageVariations?.original?.width;
   const fileHeight = squizImage?.imageVariations?.original?.height;
@@ -23,9 +28,9 @@ export const SelectedState = ({ resource: { id, type, name, status, squizImage }
         {/* Center column */}
         <div className="justify-self-start self-center">{name}</div>
         {/* End column */}
-        <ResetButton isDisabled={isDisabled} />
+        <ResetButton isDisabled={isDisabled} onClick={onClear} />
       </>
-      <dl className="col-start-2 col-end-2 flex flex-column gap-1 justify-self-start items-center font-normal text-sm">
+      <dl className="col-start-2 col-end-2 flex flex-row gap-1 justify-self-start items-center font-normal text-sm">
         <div>
           <dt className="hidden">Status: {status.name}</dt>
           <dd className="flex items-center">

package/src/ResourcePickerContainer/ResourcePickerContainer.tsx

@@ -10,8 +10,8 @@ import SourceDropdown from '../SourceDropdown/SourceDropdown';
 
 import { Source, Resource, HydratedResourceReference, ScopedSource } from '../types';
 import { useResourcePath } from '../Hooks/useResourcePath';
+import { useAsync } from '../Hooks/useAsync';
 import { useChildResources } from '../Hooks/useChildResources';
-import { useSources } from '../Hooks/useSources';
 
 interface ResourcePickerContainerProps {
   title: string;
@@ -38,16 +38,16 @@ function ResourcePickerContainer({
   const { source, currentResource, hierarchy, setSource, push, popUntil } = useResourcePath();
 
   const {
-    sources,
+    data: sources,
     isLoading: isSourceLoading,
     reload: handleSourceReload,
     error: sourceError,
-  } = useSources({ onRequestSources });
+  } = useAsync({ callback: onRequestSources, defaultValue: [] }, []);
 
   const {
-    resources,
+    data: resources,
     isLoading: isResourcesLoading,
-    reloadResources: handleResourceReload,
+    reload: handleResourceReload,
     error: resourceError,
   } = useChildResources({ source, currentResource, onRequestChildren });
 

package/src/Skeleton/ListItem/SkeletonListItem.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 export const SkeletonListItem = () => (
-  <li className="flex items-center p-1 first:mt-0 bg-white border border-b-0 border-grey-200 first:rounded-t-lg last:rounded-b-lg last:border-b">
+  <li className="flex items-center p-1 first:mt-0 bg-white border-1 border-b-0 border-grey-200 first:rounded-t-lg last:rounded-b-lg last:border-b">
     <div className="animate-skeleton-pulse grid grid-cols-[24px_1fr_45px] w-full flex items-center p-4 rounded">
       <span className="w-6 h-6 bg-gray-200 rounded-full" />
       <div className="w-full d-flex flex-col mx-4">

package/src/SourceDropdown/SourceDropdown.tsx

@@ -56,7 +56,7 @@ export default function SourceDropdown({
   };
 
   return (
-    <div {...focusWithinProps} {...keyboardProps} className="relative w-72 border border-2 rounded border-gray-300">
+    <div {...focusWithinProps} {...keyboardProps} className="relative w-72 border-2 rounded border-gray-300">
       <button
         ref={buttonRef}
         type="button"
@@ -92,13 +92,13 @@ export default function SourceDropdown({
       <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 ${
+        className={`absolute z-50 top-[calc(100%+5px)] -left-0.5 w-[calc(100%+4px)] bg-gray-100 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"
+          className="flex items-center text-sm font-semibold mb-2 bg-white border-1 rounded border-grey-200"
         >
           <button
             type="button"

package/src/StatusIndicator/StatusIndicator.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import clsx from 'clsx';
 import { Status } from '../types';
 
 const statusColour = {
@@ -18,16 +19,18 @@ const statusColour = {
 };
 
 export type StatusIndicatorProps = {
+  className?: string;
   status: Status;
 };
 
-const StatusIndicator = ({ status }: StatusIndicatorProps) => {
+const StatusIndicator = ({ className, status }: StatusIndicatorProps) => {
   const color = statusColour[status.code as keyof typeof statusColour] || statusColour.unknown;
 
   return (
     <span
       style={{ backgroundColor: color }}
-      className="block rounded-full w-3 h-3 border border-solid border-black border-opacity-20"
+      className={clsx('block rounded-full w-3 h-3 border-1 border-solid border-black border-opacity-20', className)}
+      title={status.name}
     ></span>
   );
 };

package/src/__mocks__/StorybookHelpers.ts

@@ -18,15 +18,15 @@ export const createResourceBrowserCallbacks = ({
   return {
     onRequestSources: () => {
       return new Promise((resolve, reject) => {
-        setTimeout(() => {
-          if (error && Math.random() > 0.5) {
-            reject(new Error(error));
-          } else {
-            if (!sourceIsLoading) {
+        if (!sourceIsLoading) {
+          setTimeout(() => {
+            if (error && Math.random() > 0.5) {
+              reject(new Error(error));
+            } else {
               resolve(sampleSources);
             }
-          }
-        }, delay);
+          }, delay);
+        }
       });
     },
     onRequestChildren: (source: Source, resource: Resource | null) => {
@@ -36,8 +36,7 @@ export const createResourceBrowserCallbacks = ({
             if (error && Math.random() > 0.5) {
               reject(new Error(error));
             } else {
-              const children = resource ? (((resource as any)?._children || []) as Resource[]) : sampleResources;
-              resolve(children);
+              resolve(((resource as any)?._children || sampleResources) as Resource[] | undefined);
             }
           }, delay);
         }
@@ -56,10 +55,16 @@ export const createResourceBrowserCallbacks = ({
         }
       });
     },
-    onChange: ({ resource, source }: HydratedResourceReference) => {
-      alert(
-        `Resource Browser has selected resource #${resource.id} (${resource.name}) from source #${source.id} (${source.name}).`,
-      );
+    onChange: (reference: HydratedResourceReference | null) => {
+      if (reference) {
+        const { resource, source } = reference;
+
+        alert(
+          `Resource Browser has selected resource #${resource.id} (${resource.name}) from source #${source.id} (${source.name}).`,
+        );
+      } else {
+        alert(`Resource Browser has cleared selected resource.`);
+      }
     },
   };
 };

package/src/index.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import RelatedAssetPicker from './index';
+import { ResourceBrowserInput } from './index';
 
 const mockRequestSources = jest.fn();
 const mockRequestChildren = jest.fn();
@@ -18,14 +18,14 @@ const defaultProps: any = {
 
 describe('Related Asset Picker', () => {
   it('should render the related asset picker with the default label', () => {
-    render(<RelatedAssetPicker {...defaultProps} />);
+    render(<ResourceBrowserInput {...defaultProps} />);
     const pickerLabel = screen.getByText('Choose asset');
 
     expect(pickerLabel).toBeInTheDocument();
   });
 
   it('should display the generic asset picking icon', () => {
-    render(<RelatedAssetPicker {...defaultProps} />);
+    render(<ResourceBrowserInput {...defaultProps} />);
     const pickerLabel = screen.getByText('Choose asset');
     const pickerIcon = screen.getByTestId('AdsClickRoundedIcon');
 
@@ -34,7 +34,7 @@ describe('Related Asset Picker', () => {
   });
 
   it('should display the image icon when only images are allowed', () => {
-    render(<RelatedAssetPicker {...defaultProps} allowedTypes={['image']} />);
+    render(<ResourceBrowserInput {...defaultProps} allowedTypes={['image']} />);
     const pickerLabel = screen.getByText('Choose image');
     const pickerIcon = screen.getByTestId('PhotoLibraryRoundedIcon');
 

package/src/index.stories.tsx

@@ -1,14 +1,14 @@
 import { StoryFn, Meta } from '@storybook/react';
-import RelatedAssetPicker from './index';
+import { ResourceBrowserInput, ResourceBrowserContext } from './index';
 import { createResourceBrowserCallbacks } from './__mocks__/StorybookHelpers';
 
 export default {
-  title: 'RelatedAssetPicker',
-  component: RelatedAssetPicker,
-} as Meta<typeof RelatedAssetPicker>;
+  title: 'Resource browser input',
+  component: ResourceBrowserInput,
+} as Meta<typeof ResourceBrowserInput>;
 
-const Template: StoryFn<typeof RelatedAssetPicker> = (props) => {
-  const { sourceIsLoading, resourceIsLoading, error } = props;
+const Template: StoryFn<typeof ResourceBrowserInput> = (props) => {
+  const { sourceIsLoading, resourceIsLoading, error, ...other } = props;
   const { onRequestSources, onRequestChildren, onRequestResource, onChange } = createResourceBrowserCallbacks({
     sourceIsLoading: !!sourceIsLoading,
     resourceIsLoading: !!resourceIsLoading,
@@ -17,13 +17,9 @@ const Template: StoryFn<typeof RelatedAssetPicker> = (props) => {
 
   return (
     <div className="w-[400px] m-3">
-      <RelatedAssetPicker
-        {...props}
-        onRequestSources={onRequestSources}
-        onRequestChildren={onRequestChildren}
-        onRequestResource={onRequestResource}
-        onChange={onChange}
-      />
+      <ResourceBrowserContext.Provider value={{ onRequestSources, onRequestChildren, onRequestResource }}>
+        <ResourceBrowserInput {...other} onChange={onChange} />
+      </ResourceBrowserContext.Provider>
     </div>
   );
 };
@@ -31,11 +27,15 @@ const Template: StoryFn<typeof RelatedAssetPicker> = (props) => {
 export const Primary = Template.bind({});
 
 Primary.args = {
-  modalTitle: 'Asset Picker',
+  modalTitle: 'Choose asset',
   sourceIsLoading: false,
   resourceIsLoading: false,
   error: '',
-  allowedTypes: ['site', 'image', 'physical_file'],
+};
+
+export const Selected = Template.bind({});
+Selected.args = {
+  value: { resource: '1', source: '2' },
 };
 
 export const ImagesOnly = Template.bind({});

package/src/index.tsx

@@ -1,68 +1,53 @@
-import React from 'react';
-import ModalTrigger from './Modal/ModalTrigger';
+import React, { useContext } from 'react';
 import ResourcePickerContainer from './ResourcePickerContainer/ResourcePickerContainer';
 import { HydratedResourceReference, Resource, ResourceReference, Source } from './types';
-import AdsClickRoundedIcon from '@mui/icons-material/AdsClickRounded';
-import AddCircleOutlineRoundedIcon from '@mui/icons-material/AddCircleOutlineRounded';
-import PhotoLibraryRoundedIcon from '@mui/icons-material/PhotoLibraryRounded';
-import clsx from 'clsx';
-// import { LoadingState, ErrorState, SelectedState } from './ResourcePicker/ResourcePicker';
+import { ResourceBrowserContext } from './ResourceBrowserContext/ResourceBrowserContext';
+import ResourcePicker from './ResourcePicker/ResourcePicker';
+import { useResource } from './Hooks/useResource';
 
 export type { HydratedResourceReference, Resource, ResourceReference, Source };
+export { ResourceBrowserContext };
 
-export default function ComponentEditorContentBrowser({
+type ResourceBrowserInputProps = {
+  modalTitle: string;
+  allowedTypes?: string[];
+  isDisabled?: boolean;
+  value: ResourceReference | null;
+  onChange(resource: HydratedResourceReference | null): void;
+};
+
+export const ResourceBrowserInput = ({
   modalTitle,
   allowedTypes,
-  onRequestSources,
-  onRequestChildren,
   onChange,
+  value,
   isDisabled,
-}: {
-  modalTitle: string;
-  allowedTypes: string[] | undefined;
-  onRequestSources: () => Promise<Source[]>;
-  onRequestChildren(source: Source, resource: Resource | null): Promise<Resource[]>;
-  onRequestResource(reference: ResourceReference): Promise<Resource | null>;
-  onChange(resource: HydratedResourceReference | null): void;
-  isDisabled?: boolean;
-}) {
-  const isImagePicker = allowedTypes && allowedTypes.length === 1 && allowedTypes.includes('image');
+}: ResourceBrowserInputProps) => {
+  const { onRequestSources, onRequestChildren, onRequestResource } = useContext(ResourceBrowserContext);
+  const { data: resource, error, isLoading } = useResource({ onRequestResource, reference: value });
+
   return (
     <div className="squiz-rb-scope">
-      <div className={clsx('resource-picker', isDisabled && 'bg-gray-300')}>
-        {isImagePicker ? (
-          <PhotoLibraryRoundedIcon aria-hidden className="w-6 h-6" />
-        ) : (
-          <AdsClickRoundedIcon aria-hidden className="w-6 h-6" />
+      <ResourcePicker
+        resource={resource}
+        allowedTypes={allowedTypes}
+        error={error}
+        isLoading={isLoading}
+        isDisabled={isDisabled}
+        onClear={() => onChange(null)}
+      >
+        {(onClose, titleProps) => (
+          <ResourcePickerContainer
+            title={modalTitle}
+            titleAriaProps={titleProps}
+            allowedTypes={allowedTypes}
+            onClose={onClose}
+            onRequestSources={onRequestSources}
+            onRequestChildren={onRequestChildren}
+            onChange={onChange}
+          />
         )}
-
-        <ModalTrigger
-          showLabel={true}
-          label={isImagePicker ? `Choose image` : `Choose asset`}
-          icon={<AddCircleOutlineRoundedIcon aria-hidden className="!w-4 !h-4" />}
-          isDisabled={isDisabled}
-        >
-          {(onClose, titleProps) => (
-            <ResourcePickerContainer
-              title={modalTitle}
-              titleAriaProps={titleProps}
-              allowedTypes={allowedTypes}
-              onClose={onClose}
-              onRequestSources={onRequestSources}
-              onRequestChildren={onRequestChildren}
-              onChange={onChange}
-            />
-          )}
-        </ModalTrigger>
-        {/* TODO: Add all these states in - examples of them can be found in the Resource Picker story and corresponding file /ResourcePicker/ResourcePicker.tsx */}
-        {/* <div className="resource-picker-info">
-            <div className="resource-picker-info__layout">
-              {isLoading && <LoadingState />}
-              {isError && <ErrorState />}
-              {resource !== null && <SelectedState resource={resource} />}
-            </div>
-          </div> */}
-      </div>
+      </ResourcePicker>
     </div>
   );
-}
+};

package/src/{types.d.ts → types.ts}

@@ -63,7 +63,7 @@ export type Hierarchy<T> = Array<{
 /**
  * Augments a type so that all properties are optional.
  */
-type DeepPartial<T> = {
+export type DeepPartial<T> = {
   [P in keyof T]?: T[P] extends Array<infer U>
     ? Array<DeepPartial<U>>
     : T[P] extends ReadonlyArray<infer U>

package/tailwind.config.cjs

@@ -3,6 +3,11 @@ module.exports = {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}', './node_modules/flowbite/**/*.js'],
   theme: {
     extend: {
+      borderWidth: {
+        // We shouldn't use ".border" class and instead use ".border-1".
+        // ".border" has !important styling defined in Matrix so overrides anything various border styling if used.
+        1: '1px',
+      },
       borderRadius: {
         DEFAULT: '4px',
         md: '6px',

package/lib/Hooks/useSources.d.ts

@@ -1,16 +0,0 @@
-import { Source } from '../types';
-type UseSourcesProps = {
-    onRequestSources: () => Promise<Source[]>;
-};
-/**
- * Loads and caches the source list when a component using the hook is mounted.
- *
- * @param {Function} onRequestSources
- */
-export declare const useSources: ({ onRequestSources }: UseSourcesProps) => {
-    isLoading: boolean;
-    sources: Source[];
-    reload: () => void;
-    error: Error | null;
-};
-export {};

package/lib/Hooks/useSources.js

@@ -1,31 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSources = void 0;
-const react_1 = require("react");
-/**
- * Loads and caches the source list when a component using the hook is mounted.
- *
- * @param {Function} onRequestSources
- */
-const useSources = ({ onRequestSources }) => {
-    const [error, setError] = (0, react_1.useState)(null);
-    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
-    const [sources, setSources] = (0, react_1.useState)([]);
-    const loadSources = (0, react_1.useCallback)(() => {
-        setIsLoading(true);
-        onRequestSources()
-            .then((sources) => {
-            setIsLoading(false);
-            setSources(sources);
-            setError(null);
-        })
-            .catch((error) => {
-            setIsLoading(false);
-            setError(error);
-        });
-    }, []);
-    // trigger a load of the sources when the component using the hook is initially rendered.
-    (0, react_1.useEffect)(loadSources, []);
-    return { isLoading, sources, reload: loadSources, error };
-};
-exports.useSources = useSources;