@squiz/resource-browser 1.65.0 → 1.66.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @squiz/resource-browser
 
+## 1.66.1
+
+### Patch Changes
+
+- 81c7cba: Image asset previews will now display the image if there is a URL in the returned resource data
+  Also fixes a bug around the selected resource name not having break-word applied so the filename was not wrapping as expected
+
+## 1.66.0
+
+### Minor Changes
+
+- 5032c38: Added content page asset icon.
+
+### Patch Changes
+
+- Updated dependencies [5032c38]
+  - @squiz/generic-browser-lib@1.65.0
+
 ## 1.65.0
 
 ### Minor Changes

package/lib/PreviewPanel/details/MatrixResource.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 import { Resource } from '../../types';
 type MatrixResourceProps = {
     resource: Resource;
 };
-declare const MatrixResource: ({ resource: { id, type, name, status } }: MatrixResourceProps) => JSX.Element;
+declare const MatrixResource: ({ resource: { id, type, name, status, url } }: MatrixResourceProps) => React.JSX.Element;
 export default MatrixResource;

package/lib/PreviewPanel/details/MatrixResource.js

@@ -6,11 +6,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
 const StatusIndicator_1 = __importDefault(require("../../StatusIndicator/StatusIndicator"));
-const MatrixResource = ({ resource: { id, type, name, status } }) => {
+const ImageThumb = ({ url, name }) => {
+    return (react_1.default.createElement("div", { className: "checkered-bg w-full h-[164px] overflow-hidden flex justify-center items-center" },
+        react_1.default.createElement("img", { src: url, className: "max-w-full max-h-full", alt: name })));
+};
+const MatrixResource = ({ resource: { id, type, name, status, url } }) => {
     return (react_1.default.createElement("div", null,
         react_1.default.createElement("div", { className: "flex flex-col items-center text-gray-800 mt-7 mx-5 pb-4 border-b border-gray-300" },
-            react_1.default.createElement(generic_browser_lib_1.Icon, { icon: type.code, resourceSource: "matrix", className: "w-14 h-14" }),
-            react_1.default.createElement("div", { className: "mt-4 font-semibold text-base" }, name)),
+            type.code === 'image' && url ? (react_1.default.createElement(ImageThumb, { url: url, name: name })) : (react_1.default.createElement(generic_browser_lib_1.Icon, { icon: type.code, resourceSource: "matrix", className: "w-14 h-14" })),
+            react_1.default.createElement("div", { className: "mt-4 font-semibold text-base break-word" }, name)),
         react_1.default.createElement("div", { className: "text-gray-800 mx-6 mt-4" },
             react_1.default.createElement("dl", { className: "flex flex-col text-sm" },
                 react_1.default.createElement("div", { className: "flex mb-2" },

package/lib/ResourceBreadcrumb/ResourceBreadcrumb.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 import { Hierarchy } from '../types';
 export interface ResourceBreadcrumbProps<T> {
     hierarchy: Hierarchy<T>;
     onBreadcrumbSelect: (node: T) => void;
     onReturnToRoot: () => void;
 }
-declare const ResourceBreadcrumb: <T>({ hierarchy, onBreadcrumbSelect, onReturnToRoot }: ResourceBreadcrumbProps<T>) => JSX.Element;
+declare const ResourceBreadcrumb: <T>({ hierarchy, onBreadcrumbSelect, onReturnToRoot }: ResourceBreadcrumbProps<T>) => React.JSX.Element;
 export default ResourceBreadcrumb;

package/lib/ResourceList/ResourceList.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { OverlayTriggerState } from 'react-stately';
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
 import { Resource } from '../types';
@@ -13,5 +14,5 @@ export interface ResourceListProps {
     handleReload: () => void;
     error: Error | null;
 }
-declare const ResourceList: ({ resources, selectedResource, previewModalState, isLoading, onResourceSelect, onResourceDrillDown, allowedTypes, handleReturnToRoot, handleReload, error, }: ResourceListProps) => JSX.Element;
+declare const ResourceList: ({ resources, selectedResource, previewModalState, isLoading, onResourceSelect, onResourceDrillDown, allowedTypes, handleReturnToRoot, handleReload, error, }: ResourceListProps) => React.JSX.Element;
 export default ResourceList;

package/lib/ResourcePicker/ResourcePicker.d.ts

@@ -10,5 +10,5 @@ export type ResourcePickerProps = {
     children: (onClose: () => void, titleProps: DOMAttributes) => React.ReactElement;
     onClear: () => void;
 };
-declare const ResourcePicker: ({ resource, allowedTypes, error, isLoading, isDisabled, children, onClear, }: ResourcePickerProps) => JSX.Element;
+declare const ResourcePicker: ({ resource, allowedTypes, error, isLoading, isDisabled, children, onClear, }: ResourcePickerProps) => React.JSX.Element;
 export default ResourcePicker;

package/lib/ResourcePicker/States/Error.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 export type ErrorStateProps = {
     error: Error;
     isDisabled?: boolean;
     onClear: () => void;
 };
-export declare const ErrorState: ({ error, isDisabled, onClear }: ErrorStateProps) => JSX.Element;
+export declare const ErrorState: ({ error, isDisabled, onClear }: ErrorStateProps) => React.JSX.Element;

package/lib/ResourcePicker/States/Loading.d.ts

@@ -1 +1,2 @@
-export declare const LoadingState: () => JSX.Element;
+import React from 'react';
+export declare const LoadingState: () => React.JSX.Element;

package/lib/ResourcePicker/States/Selected.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 import { Resource } from '../../types';
 export type SelectedStateProps = {
     resource: Resource;
     isDisabled?: boolean;
     onClear: () => void;
 };
-export declare const SelectedState: ({ resource: { id, type, name, status, squizImage }, isDisabled, onClear, }: SelectedStateProps) => JSX.Element;
+export declare const SelectedState: ({ resource: { id, type, name, status, squizImage }, isDisabled, onClear, }: SelectedStateProps) => React.JSX.Element;

package/lib/ResourcePickerContainer/ResourcePickerContainer.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
 import { Source, Resource, HydratedResourceReference } from '../types';
 interface ResourcePickerContainerProps {
@@ -9,5 +10,5 @@ interface ResourcePickerContainerProps {
     onChange(resource: HydratedResourceReference | null): void;
     onClose: () => void;
 }
-declare function ResourcePickerContainer({ title, titleAriaProps, allowedTypes, onRequestSources, onRequestChildren, onChange, onClose, }: ResourcePickerContainerProps): JSX.Element;
+declare function ResourcePickerContainer({ title, titleAriaProps, allowedTypes, onRequestSources, onRequestChildren, onChange, onClose, }: ResourcePickerContainerProps): React.JSX.Element;
 export default ResourcePickerContainer;

package/lib/SourceDropdown/SourceDropdown.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { Source, ScopedSource } from '../types';
 export default function SourceDropdown({ sources, selectedSource, isLoading, onRootSelect, onSourceSelect, }: {
     sources: Source[];
@@ -5,4 +6,4 @@ export default function SourceDropdown({ sources, selectedSource, isLoading, onR
     isLoading: boolean;
     onRootSelect: () => void;
     onSourceSelect: (source: ScopedSource) => void;
-}): JSX.Element;
+}): React.JSX.Element;

package/lib/SourceList/SourceList.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { OverlayTriggerState } from 'react-stately';
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
 import { Source, ScopedSource } from '../types';
@@ -9,5 +10,5 @@ export interface SourceListProps {
     handleReload: () => void;
     error: Error | null;
 }
-declare const SourceList: ({ sources, previewModalState, isLoading, onSourceSelect, handleReload, error, }: SourceListProps) => JSX.Element;
+declare const SourceList: ({ sources, previewModalState, isLoading, onSourceSelect, handleReload, error, }: SourceListProps) => React.JSX.Element;
 export default SourceList;

package/lib/StatusIndicator/StatusIndicator.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 import { Status } from '../types';
 export type StatusIndicatorProps = {
     className?: string;
     status: Status;
 };
-declare const StatusIndicator: ({ className, status }: StatusIndicatorProps) => JSX.Element;
+declare const StatusIndicator: ({ className, status }: StatusIndicatorProps) => React.JSX.Element;
 export default StatusIndicator;

package/lib/index.css

@@ -565,6 +565,9 @@
 .squiz-rb-scope .h-9 {
   height: 2.25rem;
 }
+.squiz-rb-scope .h-\[164px\] {
+  height: 164px;
+}
 .squiz-rb-scope .h-\[20px\] {
   height: 20px;
 }
@@ -583,6 +586,9 @@
 .squiz-rb-scope .max-h-80 {
   max-height: 20rem;
 }
+.squiz-rb-scope .max-h-full {
+  max-height: 100%;
+}
 .squiz-rb-scope .min-h-\[64px\] {
   min-height: 64px;
 }
@@ -643,6 +649,9 @@
 .squiz-rb-scope .max-w-\[50rem\] {
   max-width: 50rem;
 }
+.squiz-rb-scope .max-w-full {
+  max-width: 100%;
+}
 .squiz-rb-scope .flex-1 {
   flex: 1 1 0%;
 }
@@ -1019,6 +1028,13 @@
   --tw-bg-opacity: 1;
   background-color: rgb(247 247 247 / var(--tw-bg-opacity));
 }
+.squiz-rb-scope .checkered-bg {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  background-size: 24px 24px;
+  background-position: 0 0, 12px 12px;
+  background-image: linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0), linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0);
+}
 .squiz-rb-scope .spinner {
   display: inline-block;
   border-radius: 9999px;
@@ -1083,6 +1099,10 @@
 .squiz-rb-scope .p-4\.5 {
   padding: 18px;
 }
+.squiz-rb-scope .break-word {
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
 .squiz-rb-scope .before\:fixed::before {
   content: var(--tw-content);
   position: fixed;

package/lib/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { HydratedResourceReference, Resource, ResourceReference, Source } from './types';
 import { ResourceBrowserContext, ResourceBrowserContextProps } from './ResourceBrowserContext/ResourceBrowserContext';
 export type { HydratedResourceReference, Resource, ResourceReference, Source, ResourceBrowserContextProps };
@@ -10,4 +11,4 @@ export type ResourceBrowserInputProps = {
     onChange(resource: HydratedResourceReference | null): void;
     onClear?(): void;
 };
-export declare const ResourceBrowserInput: ({ modalTitle, allowedTypes, onChange, value, isDisabled, onClear, }: ResourceBrowserInputProps) => JSX.Element;
+export declare const ResourceBrowserInput: ({ modalTitle, allowedTypes, onChange, value, isDisabled, onClear, }: ResourceBrowserInputProps) => React.JSX.Element;

package/package.json

@@ -1,8 +1,12 @@
 {
   "name": "@squiz/resource-browser",
-  "version": "1.65.0",
+  "version": "1.66.1",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
     "compile": "npm run clean && npm run compile:styles && npm run compile:code",
     "compile:code": "tsc",
@@ -16,7 +20,7 @@
   "dependencies": {
     "@mui/icons-material": "5.11.16",
     "@squiz/dx-json-schema-lib": "^1.65.0",
-    "@squiz/generic-browser-lib": "^1.64.0",
+    "@squiz/generic-browser-lib": "^1.65.0",
     "pretty-bytes": "5.6.0",
     "react-aria": "3.23.1",
     "react-responsive": "9.0.2",
@@ -35,8 +39,8 @@
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
     "@types/postcss-js": "4.0.0",
-    "@types/react": "18.0.26",
-    "@types/react-dom": "18.0.9",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
     "@vitejs/plugin-react-swc": "3.0.0",
     "autoprefixer": "10.4.14",
     "esbuild": "0.17.17",

package/src/Hooks/useResourcePath.spec.ts

@@ -19,7 +19,7 @@ describe('useResourcePath', () => {
     });
   });
 
-  it('setSource should update the source and clear the current hierarchy', async () => {
+  it('setSource should update the source and clear the current hierarchy', () => {
     const { result } = renderHook(() => useResourcePath());
     const source = mockScopedSource({
       source: { id: '1', name: 'Test source' },
@@ -27,15 +27,15 @@ describe('useResourcePath', () => {
     });
     const resource = mockResource({ id: '3', name: 'Test resource 2' });
 
-    await act(() => result.current.setSource(source));
-    await act(() => result.current.push(resource));
+    act(() => result.current.setSource(source));
+    act(() => result.current.push(resource));
 
     // make sure the current resource/hierarchy is populated
     expect(result.current.currentResource).toBe(resource);
     expect(result.current.hierarchy).toHaveLength(2);
 
     // set the source again
-    await act(() => result.current.setSource(source));
+    act(() => result.current.setSource(source));
 
     // make sure the current resource and hierarchy are reset
     expect(result.current.source).toBe(source);
@@ -43,15 +43,15 @@ describe('useResourcePath', () => {
     expect(result.current.hierarchy).toEqual([{ key: 'source:1-resource:2', label: 'Test resource', node: source }]);
   });
 
-  it('push should add the node to the hierarchy', async () => {
+  it('push should add the node to the hierarchy', () => {
     const { result } = renderHook(() => useResourcePath());
     const source = mockScopedSource({ source: { id: '1' } });
     const site = mockResource({ id: '1', type: { code: 'site', name: 'Site' }, name: 'My site' });
     const page = mockResource({ id: '2', type: { code: 'page', name: 'Page' }, name: 'My page' });
 
-    await act(() => result.current.setSource(source));
-    await act(() => result.current.push(site));
-    await act(() => result.current.push(page));
+    act(() => result.current.setSource(source));
+    act(() => result.current.push(site));
+    act(() => result.current.push(page));
 
     expect(result.current.source).toBe(source);
     expect(result.current.currentResource).toBe(page);
@@ -94,11 +94,7 @@ describe('useResourcePath', () => {
     ],
   ])(
     'popUntil should remove from the hierarchy until the node being popped to is hit - %s',
-    async (
-      description: string,
-      node: ScopedSource | Resource,
-      expectedHierarchy: Hierarchy<ScopedSource | Resource>,
-    ) => {
+    (description: string, node: ScopedSource | Resource, expectedHierarchy: Hierarchy<ScopedSource | Resource>) => {
       const { result } = renderHook(() => useResourcePath());
       const source = mockScopedSource({ source: { id: '1' } });
       const mockResources = [
@@ -107,16 +103,16 @@ describe('useResourcePath', () => {
         mockResource({ id: '3', name: 'Resource 3' }),
       ];
 
-      await act(() => result.current.setSource(source));
-      await act(() => result.current.push(mockResources[0]));
-      await act(() => result.current.push(mockResources[1]));
-      await act(() => result.current.push(mockResources[2]));
+      act(() => result.current.setSource(source));
+      act(() => result.current.push(mockResources[0]));
+      act(() => result.current.push(mockResources[1]));
+      act(() => result.current.push(mockResources[2]));
 
       // make sure hierarchy has expected length before popping
       expect(result.current.source).toBe(source);
       expect(result.current.hierarchy).toHaveLength(4);
 
-      await act(() => result.current.popUntil(node));
+      act(() => result.current.popUntil(node));
 
       expect(result.current.hierarchy).toEqual(expectedHierarchy);
     },

package/src/PreviewPanel/PreviewPanel.spec.tsx

@@ -38,6 +38,22 @@ function mockResource(properties: Partial<Resource> = {}): Resource {
   };
 }
 
+function mockImageResource(properties: Partial<Resource> = {}): Resource {
+  return {
+    id: 'test-image-resource',
+    name: 'Test image resource',
+    type: { code: 'image', name: 'Image' },
+    status: { code: 'live', name: 'Live' },
+    url: 'https://www.rspcasa.org.au/wp-content/uploads/2020/10/Baby-goat-in-tree.jpg',
+    urls: [
+      'https://www.rspcasa.org.au/wp-content/uploads/2020/10/Baby-goat-in-tree.jpg',
+      'http://www.rspcasa.org.au/wp-content/uploads/2020/10/Baby-goat-in-tree.jpg',
+    ],
+    childCount: 0,
+    ...properties,
+  };
+}
+
 describe('PreviewPanel', () => {
   it('Renders a message when no item selected', async () => {
     const onSelect = jest.fn();
@@ -65,6 +81,33 @@ describe('PreviewPanel', () => {
     });
   });
 
+  it('Renders an image when an image is selected', async () => {
+    const onSelect = jest.fn();
+    const onClose = jest.fn();
+    const resource = mockImageResource();
+
+    render(
+      <PreviewPanelTestWrapper
+        constructFunction={(previewModalState, overlayProps) => {
+          return (
+            <PreviewPanel
+              resource={resource}
+              allowedTypes={undefined}
+              modalState={previewModalState}
+              previewModalOverlayProps={overlayProps}
+              onSelect={onSelect}
+              onClose={onClose}
+            />
+          );
+        }}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.queryByAltText(resource.name)).toBeTruthy();
+    });
+  });
+
   it('Renders tablet / desktop very above 640px', async () => {
     const onSelect = jest.fn();
     const onClose = jest.fn();

package/src/PreviewPanel/PreviewPanel.stories.tsx

@@ -46,6 +46,29 @@ Primary.args = {
   allowedTypes: undefined,
 };
 
+export const ImageAsset = Template.bind({});
+ImageAsset.args = {
+  resource: {
+    id: '104',
+    name: 'Little goat face',
+    type: {
+      code: 'image',
+      name: 'Image',
+    },
+    status: {
+      code: 'live',
+      name: 'Live',
+    },
+    url: 'https://www.rspcasa.org.au/wp-content/uploads/2020/10/Baby-goat-in-tree.jpg',
+    urls: [
+      'https://www.rspcasa.org.au/wp-content/uploads/2020/10/Baby-goat-in-tree.jpg',
+      'http://www.rspcasa.org.au/wp-content/uploads/2020/10/Baby-goat-in-tree.jpg',
+    ],
+    childCount: 0,
+  },
+  allowedTypes: undefined,
+};
+
 export const NoSelected = Template.bind({});
 NoSelected.args = {
   ...Primary.args,

package/src/PreviewPanel/details/MatrixResource.tsx

@@ -8,12 +8,24 @@ type MatrixResourceProps = {
   resource: Resource;
 };
 
-const MatrixResource = ({ resource: { id, type, name, status } }: MatrixResourceProps) => {
+const ImageThumb = ({ url, name }: { url: string; name: string }) => {
+  return (
+    <div className="checkered-bg w-full h-[164px] overflow-hidden flex justify-center items-center">
+      <img src={url} className="max-w-full max-h-full" alt={name} />
+    </div>
+  );
+};
+
+const MatrixResource = ({ resource: { id, type, name, status, url } }: MatrixResourceProps) => {
   return (
     <div>
       <div className="flex flex-col items-center text-gray-800 mt-7 mx-5 pb-4 border-b border-gray-300">
-        <Icon icon={type.code as IconOptions} resourceSource="matrix" className="w-14 h-14" />
-        <div className="mt-4 font-semibold text-base">{name}</div>
+        {type.code === 'image' && url ? (
+          <ImageThumb url={url} name={name} />
+        ) : (
+          <Icon icon={type.code as IconOptions} resourceSource="matrix" className="w-14 h-14" />
+        )}
+        <div className="mt-4 font-semibold text-base break-word">{name}</div>
       </div>
       <div className="text-gray-800 mx-6 mt-4">
         <dl className="flex flex-col text-sm">

package/src/PreviewPanel/details/matrix-resource.scss

@@ -0,0 +1,16 @@
+$sds-grey-300: #e0e0e0;
+
+.checkered-bg {
+  @apply bg-white;
+  background-size: 24px 24px;
+  background-position: 0 0, 12px 12px;
+  background-image: linear-gradient(
+      45deg,
+      $sds-grey-300 25%,
+      transparent 25%,
+      transparent 75%,
+      $sds-grey-300 75%,
+      $sds-grey-300
+    ),
+    linear-gradient(45deg, $sds-grey-300 25%, transparent 25%, transparent 75%, $sds-grey-300 75%, $sds-grey-300);
+}

package/src/ResourceList/sample-resources.json

@@ -75,7 +75,9 @@
           "name": "Live"
         },
         "name": "Image",
-        "childCount": 0
+        "childCount": 0,
+        "url": "https://picsum.photos/200/150",
+        "urls": ["https://picsum.photos/200/150", "http://picsum.photos/200/150"]
       },
       {
         "id": "105",
@@ -154,6 +156,19 @@
         },
         "name": "Word document",
         "childCount": 0
+      },
+      {
+        "id": "111",
+        "type": {
+          "code": "page_content",
+          "name": "Content Page"
+        },
+        "status": {
+          "code": "live",
+          "name": "Live"
+        },
+        "name": "Content page",
+        "childCount": 0
       }
     ]
   },
@@ -457,6 +472,20 @@
     "name": "Asset with an even longer title to make it is so long that it causes the container to grow in size. It is truly really just so long and I don't know what else I could possibly say about it to express just how long it is.",
     "childCount": 456
   },
+  {
+    "id": "903",
+    "type": {
+      "code": "image",
+      "name": "Image"
+    },
+    "status": {
+      "code": "live",
+      "name": "Live"
+    },
+    "name": "image_asset_with_a_silly_long_image_file_name_to_check_that_it_does_not_break_out_of_the_layout.jpg.",
+    "childCount": 456,
+    "url": "https://www.rspcasa.org.au/wp-content/uploads/2020/10/Baby-goat-in-tree.jpg"
+  },
   {
     "id": "904",
     "type": {

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

@@ -9,8 +9,8 @@
     "code": "under_construction",
     "name": "Under Construction"
   },
-  "url": "",
-  "urls": [],
+  "url": "https://picsum.photos/200/150",
+  "urls": ["https://picsum.photos/200/150", "http://picsum.photos/200/150"],
   "childCount": 0,
   "squizImage": {
     "name": "Fancy music",

package/src/index.scss

@@ -6,6 +6,7 @@
 // Components
 @import './ResourceBreadcrumb/resource-breadcrumb';
 @import './ResourcePicker/resource-picker';
+@import './PreviewPanel/details/matrix-resource';
 @import '@squiz/generic-browser-lib/src/Spinner/spinner';
 @import '@squiz/generic-browser-lib/src/Skeleton/skeleton';
 
@@ -22,3 +23,11 @@ svg {
 .p-4\.5 {
   padding: 18px;
 }
+
+// In tailwind there is no break-word as it is deprecated, but break-words which is slightly different does not work here, so I have added the suggested combination here
+// https://v1.tailwindcss.com/docs/word-break
+// https://github.com/tailwindlabs/tailwindcss/discussions/2213
+.break-word {
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}