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

package/src/ResourcePicker/ResourcePicker.stories.tsx

@@ -1,62 +1,66 @@
 import React from 'react';
 import { StoryFn, Meta } from '@storybook/react';
 
-import ResourcePicker, { ResourcePickerProps } from './ResourcePicker';
-import mockResource from './mock-resource.json';
+import { ResourcePicker, ResourcePickerProps } from './ResourcePicker';
+import { createPlugins } from '../__mocks__/StorybookHelpers';
+
 import mockImageResource from './mock-image-resource.json';
+import mockResource from './mock-resource.json';
 
 export default {
-  title: 'Resource picker field',
-  component: ResourcePicker,
+    title: 'Resource picker field',
+    component: ResourcePicker,
 } as Meta<typeof ResourcePicker>;
 
 const Template: StoryFn<ResourcePickerProps> = (args: ResourcePickerProps) => (
-  <div className="w-[400px] m-3">
-    <ResourcePicker {...args}>{() => <>Resource browser here</>}</ResourcePicker>
-  </div>
+    <div className="w-[400px] m-3">
+        <ResourcePicker plugins={createPlugins(0)} {...args}>
+            {() => <>Resource browser here</>}
+        </ResourcePicker>
+    </div>
 );
 
 export const Empty = Template.bind({});
 Empty.args = {
-  resource: null,
-  allowedTypes: undefined,
-  isLoading: false,
-  isError: false,
-  isDisabled: false,
+    resource: null,
+    allowedTypes: undefined,
+    isLoading: false,
+    isError: false,
+    isDisabled: false,
 };
 
 export const ImagePicker = Template.bind({});
 ImagePicker.args = {
-  ...Empty.args,
-  allowedTypes: ['image'],
+    ...Empty.args,
+    allowedTypes: ['image'],
 };
 
 export const Loading = Template.bind({});
 Loading.args = {
-  ...Empty.args,
-  isLoading: true,
+    ...Empty.args,
+    isLoading: true,
 };
 
 export const Error = Template.bind({});
 Error.args = {
-  ...Empty.args,
-  error: new window.Error('Failed to retrieve asset info due to a Component Service API key problem.'),
+    ...Empty.args,
+    error: new window.Error('Failed to retrieve asset info due to a Component Service API key problem.'),
 };
 
 export const Selected = Template.bind({});
 Selected.args = {
-  ...Empty.args,
-  resource: mockResource,
+    ...Empty.args,
+    resource: mockResource,
 };
 
 export const SelectedImage = Template.bind({});
 SelectedImage.args = {
-  ...Empty.args,
-  resource: mockImageResource,
+    ...Empty.args,
+    resource: mockImageResource,
 };
 
 export const Disabled = Template.bind({});
 Disabled.args = {
-  ...Empty.args,
-  isDisabled: true,
+    ...Empty.args,
+    isDisabled: true,
 };

package/src/ResourcePicker/ResourcePicker.tsx

@@ -3,75 +3,95 @@ 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 { ModalTrigger } from '@squiz/generic-browser-lib';
-import { Resource } from '../types';
+import { ModalTrigger } from '@squiz/resource-browser-ui-lib';
 import { ErrorState } from './States/Error';
 import { LoadingState } from './States/Loading';
 import { SelectedState } from './States/Selected';
+import { useSelectedState } from '../Hooks/useSelectedState';
+
+import { ResourceBrowserResource, ResourceBrowserPlugin } from '../types';
 import clsx from 'clsx';
 
 export type ResourcePickerProps = {
-  resource: Resource | null;
-  allowedTypes: string[] | undefined;
-  error: Error | null;
-  isLoading: boolean;
-  isDisabled?: boolean;
-  children: (onClose: () => void, titleProps: DOMAttributes) => React.ReactElement;
-  onClear: () => void;
+    resource: ResourceBrowserResource | null;
+    plugin: ResourceBrowserPlugin | null;
+    allowedTypes: string[] | undefined;
+    error: Error | null;
+    isLoading: boolean;
+    isDisabled?: boolean;
+    children: (onClose: () => void, titleProps: DOMAttributes) => React.ReactElement;
+    onClear: () => void;
+    isModalOpen: boolean;
+    onModalStateChange(isOpen: boolean): void;
 };
 
-const ResourcePicker = ({
-  resource,
-  allowedTypes,
-  error,
-  isLoading,
-  isDisabled,
-  children,
-  onClear,
+export const ResourcePicker = ({
+    resource,
+    plugin,
+    allowedTypes,
+    error: externalError,
+    isLoading: isExternalLoading,
+    isDisabled,
+    children,
+    onClear,
+    isModalOpen,
+    onModalStateChange,
 }: ResourcePickerProps) => {
-  const isImagePicker = allowedTypes && allowedTypes.length === 1 && allowedTypes.includes('image');
-  const isEmpty = resource === null && !isLoading && !error;
+    const { data: selectedState, error, isLoading } = useSelectedState({ resource, plugin });
+
+    const isImagePicker = allowedTypes && allowedTypes.length === 1 && allowedTypes.includes('image');
+    const isEmpty = resource === null && !isExternalLoading && !externalError;
 
-  return (
-    <div className={clsx('resource-picker', isDisabled && 'resource-picker--disabled')}>
-      {isImagePicker ? (
-        <PhotoLibraryRoundedIcon aria-hidden className="w-6 h-6" />
-      ) : (
-        <AdsClickRoundedIcon aria-hidden className="w-6 h-6" />
-      )}
-      {isEmpty ? (
-        <ModalTrigger
-          showLabel={true}
-          label={isImagePicker ? `Choose image` : `Choose asset`}
-          icon={
-            <AddCircleOutlineRoundedIcon
-              aria-hidden
-              className={`!w-4 !h-4 text-blue-300 ${isDisabled ? 'text-gray-600' : ''}`}
-            />
-          }
-          isDisabled={isDisabled}
-          scope="squiz-rb-scope"
-        >
-          {children}
-        </ModalTrigger>
-      ) : (
-        <div className="resource-picker-info">
-          <div className="resource-picker-info__layout">
-            {isLoading && <LoadingState />}
-            {error && <ErrorState error={error} isDisabled={isDisabled} onClear={onClear} />}
-            {resource && (
-              <SelectedState
-                resource={resource}
-                isDisabled={isDisabled}
-                onClear={onClear}
-                resourcePickerContainer={children}
-              />
+    return (
+        <div className={clsx('resource-picker', isDisabled && 'resource-picker--disabled')}>
+            {isImagePicker ? (
+                <PhotoLibraryRoundedIcon aria-hidden className="w-6 h-6" />
+            ) : (
+                <AdsClickRoundedIcon aria-hidden className="w-6 h-6" />
+            )}
+            {isEmpty ? (
+                <ModalTrigger
+                    overlayTriggerState={{
+                        isOpen: isModalOpen,
+                        onOpenChange: onModalStateChange,
+                    }}
+                    showLabel={true}
+                    label={isImagePicker ? `Choose image` : `Choose asset`}
+                    icon={
+                        <AddCircleOutlineRoundedIcon
+                            aria-hidden
+                            className={`!w-4 !h-4 text-blue-300 ${isDisabled ? 'text-gray-600' : ''}`}
+                        />
+                    }
+                    isDisabled={isDisabled}
+                    scope="squiz-rb-scope"
+                >
+                    {children}
+                </ModalTrigger>
+            ) : (
+                <div className="resource-picker-info">
+                    <div className="resource-picker-info__layout">
+                        {(isExternalLoading || isLoading) && <LoadingState />}
+                        {(externalError || error) && (
+                            <ErrorState error={(externalError as Error) || (error as Error)} isDisabled={isDisabled} onClear={onClear} />
+                        )}
+                        {!isExternalLoading && resource && selectedState && (
+                            <SelectedState
+                                isModalOpen={isModalOpen}
+                                onModalStateChange={onModalStateChange}
+                                resource={resource}
+                                showThumbnail={selectedState?.showThumbnail || false}
+                                icon={selectedState?.icon}
+                                label={selectedState?.label}
+                                description={selectedState?.description}
+                                isDisabled={isDisabled}
+                                onClear={onClear}
+                                resourcePickerContainer={children}
+                            />
+                        )}
+                    </div>
+                </div>
             )}
-          </div>
         </div>
-      )}
-    </div>
-  );
+    );
 };
-
-export default ResourcePicker;

package/src/ResourcePicker/States/Error.tsx

@@ -2,15 +2,15 @@ import React from 'react';
 import { Icon, IconOptions, ResetButton } from '@squiz/generic-browser-lib';
 
 export type ErrorStateProps = {
-  error: Error;
-  isDisabled?: boolean;
-  onClear: () => void;
+    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 w-full">{error.message}</div>
-    <ResetButton isDisabled={isDisabled} onClick={onClear} />
-  </>
+    <>
+        <Icon icon={'error' as IconOptions} aria-hidden className="w-6 h-6 text-red-300" />
+        <div className="text-red-300 w-full">{error.message}</div>
+        <ResetButton isDisabled={isDisabled} onClick={onClear} />
+    </>
 );

package/src/ResourcePicker/States/Loading.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Spinner } from '@squiz/generic-browser-lib';
 
 export const LoadingState = () => (
-  <div className="col-start-2 col-end-2">
-    <Spinner label="Loading selection" className="m-2" />
-  </div>
+    <div className="col-start-2 col-end-2">
+        <Spinner label="Loading selection" className="m-2" />
+    </div>
 );

package/src/ResourcePicker/States/Selected.tsx

@@ -1,84 +1,77 @@
-import React from 'react';
-import prettyBytes from 'pretty-bytes';
-import { Icon, IconOptions, ModalTrigger, ResetButton } from '@squiz/generic-browser-lib';
+import React, { ReactElement } from 'react';
+import { ResetButton } from '@squiz/generic-browser-lib';
+import { ModalTrigger } from '@squiz/resource-browser-ui-lib';
+import { ResourceBrowserResource } from '../../types';
 
-import { Resource } from '../../types';
-import StatusIndicator from '../../StatusIndicator/StatusIndicator';
 import { CircledLoopIcon } from '../../Icons/CircledLoopIcon';
 
 export type SelectedStateProps = {
-  resource: Resource;
-  isDisabled?: boolean;
-  onClear: () => void;
-  resourcePickerContainer: any;
+    resource: ResourceBrowserResource;
+    showThumbnail: boolean;
+    icon: ReactElement | undefined;
+    label: string;
+    description: Array<ReactElement>;
+    isDisabled?: boolean;
+    onClear: () => void;
+    resourcePickerContainer: any;
+    isModalOpen?: boolean;
+    onModalStateChange?(isOpen: boolean): void;
 };
 
 export const SelectedState = ({
-  resource: { id, type, name, status, squizImage, url },
-  isDisabled,
-  onClear,
-  resourcePickerContainer,
+    resource,
+    showThumbnail,
+    icon,
+    label,
+    description,
+    isDisabled,
+    onClear,
+    resourcePickerContainer,
+    isModalOpen,
+    onModalStateChange,
 }: SelectedStateProps) => {
-  const fileSize = squizImage?.imageVariations?.original?.byteSize;
-  const fileWidth = squizImage?.imageVariations?.original?.width;
-  const fileHeight = squizImage?.imageVariations?.original?.height;
+    const modalController = {
+        isOpen: isModalOpen,
+        onOpenChange: onModalStateChange,
+    };
+    const replaceAsset = (
+        <ModalTrigger
+            overlayTriggerState={isModalOpen && onModalStateChange ? modalController : undefined}
+            showLabel={false}
+            label="Replace selection"
+            containerClasses="text-gray-500 hover:text-gray-800 focus:text-gray-800 disabled:text-gray-500 disabled:cursor-not-allowed"
+            icon={<CircledLoopIcon aria-hidden className="m-1" />}
+            isDisabled={isDisabled}
+            scope="squiz-rb-scope"
+        >
+            {resourcePickerContainer}
+        </ModalTrigger>
+    );
 
-  const replaceAsset = (
-    <ModalTrigger
-      showLabel={false}
-      label="Replace selection"
-      containerClasses="text-gray-500 hover:text-gray-800 focus:text-gray-800 disabled:text-gray-500 disabled:cursor-not-allowed"
-      icon={<CircledLoopIcon aria-hidden className="m-1" />}
-      isDisabled={isDisabled}
-      scope="squiz-rb-scope"
-    >
-      {resourcePickerContainer}
-    </ModalTrigger>
-  );
-
-  return (
-    <>
-      {/* Left column */}
-      {type.code === 'image' && url ? (
-        <div className="checkered-bg w-[56px] h-[56px] overflow-hidden flex justify-center items-center rounded">
-          <img src={url} className="w-full h-full object-cover object-center" alt={name} />
-        </div>
-      ) : (
-        <Icon icon={type.code as IconOptions} resourceSource="matrix" className="w-4 h-4 mt-1 flex self-start" />
-      )}
-      {/* Center columns */}
-      <div className="justify-self-start self-center w-full overflow-hidden break-words">
-        <span>{name}</span>
-        <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">
-              <StatusIndicator status={status} />
-            </dd>
-          </div>
-
-          <div>
-            <dt className="hidden">Asset ID</dt>
-            <dd className="text-gray-700">#{id}</dd>
-          </div>
-        </dl>
-
-        {fileSize && (
-          <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">Asset size</dt>
-              <dd className="text-gray-600">
-                {prettyBytes(fileSize)}, {fileWidth} x {fileHeight}px
-              </dd>
+    return (
+        <>
+            {/* Left column */}
+            {showThumbnail && resource.squizImage ? (
+                <div className="checkered-bg w-[56px] h-[56px] overflow-hidden flex justify-center items-center rounded">
+                    <img
+                        src={resource.squizImage.imageVariations.original.url || resource.url}
+                        className="w-full h-full object-cover object-center"
+                        alt={resource.squizImage.name || resource.name}
+                    />
+                </div>
+            ) : (
+                <div className="w-4 h-4 mt-1 flex self-start overflow-hidden">{icon}</div>
+            )}
+            {/* Center columns */}
+            <div className="justify-self-start self-center w-full overflow-hidden break-words">
+                {label}
+                {description}
+            </div>
+            {/* End column */}
+            <div className="flex">
+                {replaceAsset}
+                <ResetButton isDisabled={isDisabled} onClick={onClear} />
             </div>
-          </dl>
-        )}
-      </div>
-      {/* End column */}
-      <div className="flex">
-        {replaceAsset}
-        <ResetButton isDisabled={isDisabled} onClick={onClear} />
-      </div>
-    </>
-  );
+        </>
+    );
 };

package/src/ResourcePicker/mock-image-resource.json

@@ -1,51 +1,29 @@
 {
-  "id": "45104",
-  "type": {
-    "code": "image",
-    "name": "Image"
-  },
-  "name": "DfBFfNQyB77dQMJYU4eH.jpg",
-  "status": {
-    "code": "under_construction",
-    "name": "Under Construction"
-  },
-  "url": "https://picsum.photos/200/150",
-  "urls": ["https://picsum.photos/200/150", "http://picsum.photos/200/150"],
-  "childCount": 0,
-  "squizImage": {
-    "name": "Fancy music",
-    "alt": "",
-    "caption": "",
-    "imageVariations": {
-      "original": {
-        "url": "",
-        "width": 400,
-        "height": 400,
-        "byteSize": 37174,
-        "mimeType": "image/",
-        "aspectRatio": "4:3",
-        "sha1Hash": ""
-      },
-      "aspectRatios": [
-        {
-          "url": "",
-          "width": 100,
-          "height": 100,
-          "byteSize": 4628,
-          "mimeType": "image/",
-          "aspectRatio": "4:3",
-          "sha1Hash": ""
-        },
-        {
-          "url": "",
-          "width": 104,
-          "height": 96,
-          "byteSize": 5718,
-          "mimeType": "image/",
-          "aspectRatio": "4:3",
-          "sha1Hash": ""
+    "id": "45104",
+    "source": {
+        "id": "c90feac1-55f3-4e1f-9b56-c22829e3f510",
+        "type": "dam"
+    },
+    "type": {
+        "code": "image",
+        "name": "Image"
+    },
+    "name": "DfBFfNQyB77dQMJYU4eH.jpg",
+    "url": "https://picsum.photos/200/150",
+    "squizImage": {
+        "name": "Fancy music",
+        "alt": "",
+        "caption": "",
+        "imageVariations": {
+            "original": {
+                "url": "",
+                "width": 400,
+                "height": 400,
+                "byteSize": 37174,
+                "mimeType": "image/",
+                "aspectRatio": "4:3",
+                "sha1Hash": ""
+            }
         }
-      ]
     }
-  }
 }

package/src/ResourcePicker/mock-resource.json

@@ -1,15 +1,13 @@
 {
-  "id": "1345",
-  "name": "Products",
-  "type": {
-    "code": "page_standard",
-    "name": "Standard Page"
-  },
-  "status": {
-    "code": "under_construction",
-    "name": "Under construction"
-  },
-  "url": "http://my-squiz.net/assets/1",
-  "urls": [],
-  "childCount": 0
+    "id": "1345",
+    "name": "Products",
+    "source": {
+        "id": "1111",
+        "type": "dam"
+    },
+    "type": {
+        "code": "page_standard",
+        "name": "Standard Page"
+    },
+    "url": "http://my-squiz.net/assets/1"
 }

package/src/ResourcePicker/resource-picker.scss

@@ -1,16 +1,16 @@
 .resource-picker {
-  @apply grid grid-cols-[24px_1fr] gap-2 bg-white;
-  @apply border-2 border-gray-300;
-  @apply text-gray-500 rounded p-2;
-  &-info {
-    @apply w-full p-2 bg-gray-100 rounded-md;
-    @apply text-gray-900 text-base text-md font-semibold;
-    &__layout {
-      @apply grid grid-cols-[auto_1fr_auto] gap-2;
-      @apply justify-items-center;
+    @apply grid grid-cols-[24px_1fr] gap-2 bg-white;
+    @apply border-2 border-gray-300;
+    @apply text-gray-500 rounded p-2;
+    &-info {
+        @apply w-full p-2 bg-gray-100 rounded-md;
+        @apply text-gray-900 text-base text-md font-semibold;
+        &__layout {
+            @apply grid grid-cols-[auto_1fr_auto] gap-2;
+            @apply justify-items-center;
+        }
+    }
+    &--disabled {
+        @apply bg-gray-50 border-0 cursor-not-allowed;
     }
-  }
-  &--disabled {
-    @apply bg-gray-50 border-0 cursor-not-allowed;
-  }
 }