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

package/lib/types.d.ts

@@ -1,74 +1,56 @@
+import React, { ReactElement } from 'react';
 import { SquizImageType } from '@squiz/dx-json-schema-lib';
-export type Status = {
-    code: string;
-    name: string;
+export type OnRequestSources = () => Promise<ResourceBrowserSource[]>;
+export type ResourceBrowserPluginType = 'dam' | 'matrix';
+export type ResourceBrowserSource = {
+    name?: string;
+    id: string;
+    type: ResourceBrowserPluginType;
 };
-/**
- * Represents a resource that has been picked from a source.
- */
-export type Resource = {
+export type ResourceBrowserUnresolvedResource = {
+    sourceId: string;
+    resourceId: string;
+};
+export type ResourceBrowserResource = {
     id: string;
     name: string;
+    url: string;
+    source: ResourceBrowserSource;
     type: {
         code: string;
         name: string;
     };
-    status: Status;
-    url: string;
-    urls: string[];
-    childCount: number;
     squizImage?: SquizImageType['__shape__'];
-    lineages?: ResourceLineage[];
-};
-export type ResourceLineage = {
-    resourceIds: string[];
-};
-/**
- * Represents a system that resources can be picked from.
- * Optionally, may indicate a list of "nodes" that can be used to scope the source to a subset of its resources.
- */
-export type Source = {
-    id: string;
-    name: string;
-    nodes: Resource[];
 };
-/**
- * Represents a source that has been optionally scoped to one of its "nodes".
- */
-export type ScopedSource = {
-    source: Source;
-    resource: Resource | null;
+export type ResourceBrowserSelectedState = {
+    showThumbnail?: boolean;
+    icon?: ReactElement;
+    label: string;
+    description: Array<ReactElement>;
 };
-/**
- * A non-hydrated resource reference.
- */
-export type ResourceReference = {
-    source: string;
-    resource: string;
+export type ResourceBrowserUIProps = {
+    source: ResourceBrowserSource;
+    allowedTypes?: string[];
+    headerPortal?: Element;
+    preselectedResource?: ResourceBrowserResource;
+    onSelected: (resource: ResourceBrowserResource) => void;
 };
-/**
- * A hydrated resource reference.
- */
-export type HydratedResourceReference = {
-    source: Source;
-    resource: Resource;
+export type useResolveResourceResponse = {
+    data: ResourceBrowserResource | null;
+    error: Error | null;
+    isLoading: boolean;
 };
 /**
- * Represents the hierarchy within the asset picker.
- * Within the picker T will be ScopedSource|Resource.
- * ScopedSource will be the first item in the array, Resource will be every other item.
- */
-export type Hierarchy<T> = Array<{
-    key: string;
-    label: string;
-    node: T;
-}>;
-/**
- * Augments a type so that all properties are optional.
+ * If you change this interface please update the example here: src/__mocks__/PluginExample.tsx
  */
-export type DeepPartial<T> = {
-    [P in keyof T]?: T[P] extends Array<infer U> ? Array<DeepPartial<U>> : T[P] extends ReadonlyArray<infer U> ? ReadonlyArray<DeepPartial<U>> : DeepPartial<T[P]>;
-};
-export type OnRequestSources = () => Promise<Source[]>;
-export type OnRequestResource = (reference: ResourceReference) => Promise<Resource>;
-export type OnRequestChildren = (source: Source, resource: Resource | null) => Promise<Resource[]>;
+export interface ResourceBrowserPlugin {
+    /** Datasource type this plugin should be used for */
+    type: ResourceBrowserPluginType;
+    createHeaderPortal?: boolean;
+    /** React Functional Component to provde the UI to render to allow a user to select a resource to use */
+    sourceBrowserComponent: () => React.FunctionComponent<ResourceBrowserUIProps>;
+    /** Function to provde the the summary information to show what resource is currently selected */
+    renderSelectedResource: (resource: ResourceBrowserResource) => Promise<ResourceBrowserSelectedState>;
+    /** Function to resolve a resource and source id into a fully resolved output reference */
+    useResolveResource: (resourceId: string | null, source: ResourceBrowserSource | null) => useResolveResourceResponse;
+}

package/package.json

@@ -1,83 +1,85 @@
 {
-  "name": "@squiz/resource-browser",
-  "version": "1.69.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",
-    "compile:styles": "node build.js",
-    "dev": "vite compile",
-    "storybook": "storybook dev -p 6006",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "clean": "rimraf ./lib"
-  },
-  "dependencies": {
-    "@mui/icons-material": "5.11.16",
-    "@squiz/dx-json-schema-lib": "^1.67.0",
-    "@squiz/generic-browser-lib": "^1.67.0",
-    "expiry-map": "^2.0.0",
-    "p-memoize": "^4.0.4",
-    "pretty-bytes": "5.6.0",
-    "react-aria": "3.23.1",
-    "react-responsive": "9.0.2",
-    "react-stately": "3.21.0"
-  },
-  "devDependencies": {
-    "@storybook/addon-essentials": "^7.5.3",
-    "@storybook/addon-interactions": "^7.5.3",
-    "@storybook/addon-links": "^7.5.3",
-    "@storybook/addon-styling": "1.0.1",
-    "@storybook/blocks": "^7.5.3",
-    "@storybook/react": "^7.5.3",
-    "@storybook/react-vite": "^7.5.3",
-    "@storybook/testing-library": "0.0.14-next.1",
-    "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "14.0.0",
-    "@testing-library/user-event": "14.4.3",
-    "@types/postcss-js": "4.0.0",
-    "@types/react": "^18.2.45",
-    "@types/react-dom": "^18.2.18",
-    "@vitejs/plugin-react-swc": "3.0.0",
-    "autoprefixer": "10.4.14",
-    "esbuild": "^0.20.2",
-    "esbuild-sass-plugin": "2.8.0",
-    "jest": "29.4.1",
-    "jest-environment-jsdom": "29.4.1",
-    "postcss": "8.4.31",
-    "postcss-loader": "7.2.4",
-    "postcss-nested": "6.0.1",
-    "postcss-prefix-selector": "1.16.0",
-    "prop-types": "15.8.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "rimraf": "4.1.2",
-    "storybook": "^7.5.3",
-    "tailwindcss": "3.3.1",
-    "ts-jest": "29.0.5",
-    "typescript": "4.9.3",
-    "vite": "^4.5.0"
-  },
-  "peerDependencies": {
-    "@types/react": "^16.14.0 || ^17 || ^18",
-    "@types/react-dom": "^16.9.0 || ^17 || ^18",
-    "react": "^16.14.0 || ^17 || ^18",
-    "react-dom": "^16.14.0 || ^17 || ^18"
-  },
-  "peerDependenciesMeta": {
-    "@types/react": {
-      "optional": true
+    "name": "@squiz/resource-browser",
+    "version": "2.1.8-rc.0",
+    "main": "lib/index.js",
+    "types": "lib/index.d.ts",
+    "private": false,
+    "publishConfig": {
+        "access": "public"
     },
-    "@types/react-dom": {
-      "optional": true
-    }
-  },
-  "volta": {
-    "node": "18.15.0"
-  }
+    "scripts": {
+        "compile": "npm run compile:styles && npm run compile:code",
+        "compile:code": "tsc",
+        "compile:styles": "node build.js",
+        "storybook": "storybook dev -p 6006",
+        "test": "jest",
+        "test:unit": "jest",
+        "test:watch": "jest --watch"
+    },
+    "dependencies": {
+        "@emotion/styled": "^11.11.5",
+        "@mui/icons-material": "5.11.16",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-types/shared": "^3.22.1",
+        "@squiz/dx-json-schema-lib": "^1.67.0",
+        "@squiz/generic-browser-lib": "^1.66.0",
+        "@squiz/resource-browser-ui-lib": "^0.8.1-rc.0",
+        "clsx": "^2.1.0",
+        "expiry-map": "^2.0.0",
+        "p-memoize": "^4.0.4",
+        "react-aria": "3.23.1",
+        "react-responsive": "9.0.2",
+        "react-stately": "3.21.0"
+    },
+    "devDependencies": {
+        "@storybook/addon-essentials": "^7.5.3",
+        "@storybook/addon-interactions": "^7.5.3",
+        "@storybook/addon-links": "^7.5.3",
+        "@storybook/addon-styling": "1.0.1",
+        "@storybook/blocks": "^7.5.3",
+        "@storybook/react": "^7.5.3",
+        "@storybook/react-vite": "^7.5.3",
+        "@storybook/testing-library": "0.0.14-next.1",
+        "@testing-library/jest-dom": "5.16.5",
+        "@testing-library/react": "14.0.0",
+        "@testing-library/user-event": "14.4.3",
+        "@types/postcss-js": "4.0.0",
+        "@types/react": "^18.2.45",
+        "@types/react-dom": "^18.2.18",
+        "autoprefixer": "10.4.14",
+        "esbuild": "^0.19.3",
+        "esbuild-sass-plugin": "^2.8.0",
+        "jest": "29.4.1",
+        "jest-environment-jsdom": "29.4.1",
+        "postcss": "8.4.31",
+        "postcss-loader": "7.2.4",
+        "postcss-nested": "6.0.1",
+        "postcss-prefix-selector": "1.16.0",
+        "prop-types": "15.8.1",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0",
+        "storybook": "^7.5.3",
+        "tailwindcss": "3.3.1",
+        "ts-jest": "29.0.5",
+        "typescript": "4.9.3",
+        "vite": "^4.5.0"
+    },
+    "peerDependencies": {
+        "@types/react": "^16.14.0 || ^17 || ^18",
+        "@types/react-dom": "^16.9.0 || ^17 || ^18",
+        "react": "^16.14.0 || ^17 || ^18",
+        "react-dom": "^16.14.0 || ^17 || ^18"
+    },
+    "peerDependenciesMeta": {
+        "@types/react": {
+            "optional": true
+        },
+        "@types/react-dom": {
+            "optional": true
+        }
+    },
+    "volta": {
+        "node": "18.18.0"
+    },
+    "gitHead": "95c233207d4a87157029512d0bd9edacaf15826d"
 }

package/src/Hooks/useSelectedState.spec.ts

@@ -0,0 +1,46 @@
+import { renderHook, waitFor } from '@testing-library/react';
+import { ResourceBrowserPlugin } from '../types';
+import { mockResource } from '../__mocks__/MockModels';
+import { useSelectedState } from './useSelectedState';
+
+describe('useSelectedState', () => {
+    it('Should load the selectedState from the plugin', async () => {
+        const selectedStateResponse = {};
+        const resource = mockResource({ id: '1' });
+        const mockRenderSelectedResource = jest.fn().mockResolvedValue(selectedStateResponse);
+        const secondMockRenderSelectedResource = jest.fn();
+        const plugin: Partial<ResourceBrowserPlugin> = {
+            type: 'dam',
+            renderSelectedResource: mockRenderSelectedResource,
+        };
+
+        const { result } = renderHook(() => useSelectedState({ plugin: plugin as ResourceBrowserPlugin, resource }));
+
+        expect(result.current.isLoading).toBe(true);
+        expect(result.current.error).toBe(null);
+        expect(result.current.data).toEqual(null);
+
+        await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+        expect(mockRenderSelectedResource).toHaveBeenCalledTimes(1);
+        expect(secondMockRenderSelectedResource).not.toHaveBeenCalled();
+
+        expect(result.current.isLoading).toBe(false);
+        expect(result.current.data).toBe(selectedStateResponse);
+    });
+
+    it('Should not load the resource if no reference provided', async () => {
+        const mockRenderSelectedResource = jest.fn();
+        const plugin: Partial<ResourceBrowserPlugin> = {
+            type: 'dam',
+            renderSelectedResource: mockRenderSelectedResource,
+        };
+
+        const { result } = renderHook(() => useSelectedState({ plugin: plugin as ResourceBrowserPlugin, resource: null }));
+
+        expect(result.current.isLoading).toBe(false);
+        expect(result.current.error).toBe(null);
+        expect(result.current.data).toEqual(null);
+        expect(mockRenderSelectedResource).not.toHaveBeenCalled();
+    });
+});

package/src/Hooks/useSelectedState.ts

@@ -0,0 +1,22 @@
+import { useAsync } from '@squiz/generic-browser-lib';
+import { ResourceBrowserPlugin, ResourceBrowserResource } from '../types';
+
+type UseResourceProps = {
+    plugin: ResourceBrowserPlugin | null;
+    resource: ResourceBrowserResource | null;
+};
+
+/**
+ * Loads the selected state for the provided resource
+ */
+export const useSelectedState = ({ plugin, resource }: UseResourceProps) => {
+    // Find the resolver for this resource
+    const renderSelectedResource = resource && plugin?.renderSelectedResource;
+    return useAsync(
+        {
+            callback: () => (resource && renderSelectedResource ? renderSelectedResource(resource) : null),
+            defaultValue: null,
+        },
+        [resource],
+    );
+};

package/src/Hooks/useSources.spec.ts

@@ -1,20 +1,38 @@
 import { renderHook, waitFor } from '@testing-library/react';
-import { mockSource } from '../__mocks__/MockModels';
+import { mockSource, mockPlugin } from '../__mocks__/MockModels';
 import { useSources } from './useSources';
 
 describe('useSources', () => {
-  it('Should trigger and load the sources', async () => {
-    const sources = [mockSource()];
-    const onRequestSources = jest.fn().mockResolvedValue(sources);
-    const { result } = renderHook(() => useSources({ onRequestSources }));
+    it('Should trigger and load the sources', async () => {
+        const sources = [mockSource()];
+        const plugins = [mockPlugin()];
+        const onRequestSources = jest.fn().mockResolvedValue(sources);
+        const { result } = renderHook(() => useSources({ onRequestSources, plugins }));
 
-    expect(result.current.isLoading).toBe(true);
-    expect(result.current.error).toBe(null);
-    expect(result.current.data).toEqual([]);
+        expect(result.current.isLoading).toBe(true);
+        expect(result.current.error).toBe(null);
+        expect(result.current.data).toEqual([]);
 
-    await waitFor(() => expect(result.current.isLoading).toBe(false));
+        await waitFor(() => expect(result.current.isLoading).toBe(false));
 
-    expect(result.current.isLoading).toBe(false);
-    expect(result.current.data).toBe(sources);
-  });
+        expect(result.current.isLoading).toBe(false);
+        expect(result.current.data).toEqual(sources);
+    });
+
+    it('Should filters sources that plugins dont exist for', async () => {
+        const sources = [mockSource({ type: 'dam' }), mockSource({ id: '2', type: 'matrix' })];
+        const plugins = [mockPlugin({ type: 'dam' })];
+        const onRequestSources = jest.fn().mockResolvedValue(sources);
+        const { result } = renderHook(() => useSources({ onRequestSources, plugins }));
+
+        expect(result.current.isLoading).toBe(true);
+        expect(result.current.error).toBe(null);
+        expect(result.current.data).toEqual([]);
+
+        await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+        expect(result.current.isLoading).toBe(false);
+        expect(result.current.data).toEqual([sources[0]]);
+        expect(result.current.data.length).toEqual(1);
+    });
 });

package/src/Hooks/useSources.ts

@@ -1,12 +1,41 @@
-import { Source } from '../types';
+import { ResourceBrowserSource, ResourceBrowserPlugin } from '../types';
 import { useAsync } from '@squiz/generic-browser-lib';
 
 type UseSourcesProps = {
-  onRequestSources: () => Promise<Source[]>;
+    onRequestSources: () => Promise<ResourceBrowserSource[]>;
+    plugins: Array<ResourceBrowserPlugin>;
 };
 
 /**
  * Loads and caches the source list when a component using the hook is mounted.
  */
-export const useSources = ({ onRequestSources }: UseSourcesProps) =>
-  useAsync({ callback: onRequestSources, defaultValue: [] as Source[] }, []);
+export const useSources = ({ onRequestSources, plugins }: UseSourcesProps) => {
+    return useAsync(
+        {
+            callback: () => {
+                return new Promise<ResourceBrowserSource[]>((resolve, reject) => {
+                    // Get all the sources from the outer context
+                    onRequestSources()
+                        .then((sources: ResourceBrowserSource[]) => {
+                            // Remove any sources which we don't have a plugin to handle
+                            resolve(
+                                sources.filter((source) => {
+                                    return !!plugins.find((plugin) => {
+                                        if (plugin.type === source.type) {
+                                            return true;
+                                        }
+                                        return false;
+                                    });
+                                }),
+                            );
+                        })
+                        .catch((e: unknown) => {
+                            reject(e);
+                        });
+                });
+            },
+            defaultValue: [] as ResourceBrowserSource[],
+        },
+        [plugins],
+    );
+};

package/src/Icons/CircledLoopIcon.tsx

@@ -3,12 +3,12 @@ import React, { SVGAttributes } from 'react';
 type CircledLoopIconProps = SVGAttributes<SVGElement>;
 
 export const CircledLoopIcon = (props: CircledLoopIconProps) => {
-  return (
-    <svg fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        d="M8 0.5C3.86 0.5 0.5 3.86 0.5 8C0.5 12.14 3.86 15.5 8 15.5C12.14 15.5 15.5 12.14 15.5 8C15.5 3.86 12.14 0.5 8 0.5ZM8 14C4.6925 14 2 11.3075 2 8C2 4.6925 4.6925 2 8 2C11.3075 2 14 4.6925 14 8C14 11.3075 11.3075 14 8 14ZM11.1275 10.07L10.3025 9.245C10.835 8.2475 10.7 6.9875 9.86 6.1475C9.3425 5.63 8.675 5.375 8 5.375C7.9775 5.375 7.955 5.3825 7.9325 5.3825L8.75 6.2L7.955 6.995L5.8325 4.8725L7.955 2.75L8.75 3.545L8.03 4.265C8.9825 4.2725 9.9275 4.625 10.655 5.345C11.93 6.6275 12.0875 8.615 11.1275 10.07ZM10.1675 11.1275L8.045 13.25L7.25 12.455L7.9625 11.7425C7.0175 11.735 6.0725 11.3675 5.3525 10.6475C4.07 9.365 3.9125 7.385 4.8725 5.93L5.6975 6.755C5.165 7.7525 5.3 9.0125 6.14 9.8525C6.665 10.3775 7.3625 10.6325 8.06 10.61L7.25 9.8L8.045 9.005L10.1675 11.1275Z"
-        fill="#949494"
-      />
-    </svg>
-  );
+    return (
+        <svg fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <path
+                d="M8 0.5C3.86 0.5 0.5 3.86 0.5 8C0.5 12.14 3.86 15.5 8 15.5C12.14 15.5 15.5 12.14 15.5 8C15.5 3.86 12.14 0.5 8 0.5ZM8 14C4.6925 14 2 11.3075 2 8C2 4.6925 4.6925 2 8 2C11.3075 2 14 4.6925 14 8C14 11.3075 11.3075 14 8 14ZM11.1275 10.07L10.3025 9.245C10.835 8.2475 10.7 6.9875 9.86 6.1475C9.3425 5.63 8.675 5.375 8 5.375C7.9775 5.375 7.955 5.3825 7.9325 5.3825L8.75 6.2L7.955 6.995L5.8325 4.8725L7.955 2.75L8.75 3.545L8.03 4.265C8.9825 4.2725 9.9275 4.625 10.655 5.345C11.93 6.6275 12.0875 8.615 11.1275 10.07ZM10.1675 11.1275L8.045 13.25L7.25 12.455L7.9625 11.7425C7.0175 11.735 6.0725 11.3675 5.3525 10.6475C4.07 9.365 3.9125 7.385 4.8725 5.93L5.6975 6.755C5.165 7.7525 5.3 9.0125 6.14 9.8525C6.665 10.3775 7.3625 10.6325 8.06 10.61L7.25 9.8L8.045 9.005L10.1675 11.1275Z"
+                fill="#949494"
+            />
+        </svg>
+    );
 };