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

package/src/index.tsx

@@ -1,64 +1,126 @@
-import React, { useContext } from 'react';
-import ResourcePickerContainer from './ResourcePickerContainer/ResourcePickerContainer';
-import { HydratedResourceReference, Resource, ResourceReference, Source } from './types';
-import {
-  ResourceBrowserContext,
-  ResourceBrowserContextProvider,
-  ResourceBrowserContextProps,
-} from './ResourceBrowserContext/ResourceBrowserContext';
-import ResourcePicker from './ResourcePicker/ResourcePicker';
-import { useResource } from './Hooks/useResource';
+import React, { useState, useContext, useEffect, useCallback } from 'react';
+
+import { ResourceBrowserContext, ResourceBrowserContextProvider } from './ResourceBrowserContext/ResourceBrowserContext';
+import { ResourceBrowserSource, ResourceBrowserUnresolvedResource, ResourceBrowserResource, ResourceBrowserPlugin } from './types';
+import { useSources } from './Hooks/useSources';
+import { PluginRender } from './Plugin/Plugin';
 
-export type { HydratedResourceReference, Resource, ResourceReference, Source, ResourceBrowserContextProps };
 export { ResourceBrowserContext, ResourceBrowserContextProvider };
+export * from './types';
 
-export type ResourceBrowserInputProps = {
-  modalTitle: string;
-  allowedTypes?: string[];
-  isDisabled?: boolean;
-  value: ResourceReference | null;
-  onChange(resource: HydratedResourceReference | null): void;
-  onClear?(): void;
+export type ResourceBrowserProps = {
+    modalTitle: string;
+    allowedTypes?: string[];
+    isDisabled?: boolean;
+    value: ResourceBrowserUnresolvedResource | null;
+    onChange(resource: ResourceBrowserResource | null): void;
+    onClear?(): void;
 };
 
-export const ResourceBrowserInput = ({
-  modalTitle,
-  allowedTypes,
-  onChange,
-  value,
-  isDisabled,
-  onClear,
-}: ResourceBrowserInputProps) => {
-  const { onRequestSources, onRequestChildren, onRequestResource } = useContext(ResourceBrowserContext);
-  const { data: resource, error, isLoading } = useResource({ onRequestResource, reference: value });
-  const defaultOnClear = () => onChange(null);
-  const onClearFunction = onClear ?? defaultOnClear;
+export const ResourceBrowser = (props: ResourceBrowserProps) => {
+    const { value } = props;
+    const [error, setError] = useState<Error | null>(null);
+    const { onRequestSources, plugins } = useContext(ResourceBrowserContext);
+
+    const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+    const [source, setSource] = useState<ResourceBrowserSource | null>(null);
+    const { data: sources, isLoading, error: sourcesError } = useSources({ onRequestSources, plugins });
+    const [plugin, setPlugin] = useState<ResourceBrowserPlugin | null>(null);
+
+    // MainContainer will render a list of sources of one is not provided to it, callback to allow it to set the source once a user selects
+    const handleSourceSelect = useCallback(
+        (source: ResourceBrowserSource | null) => {
+            setSource(source);
+        },
+        [setSource],
+    );
+
+    // Try to auto set the source
+    useEffect(() => {
+        let source: ResourceBrowserSource | null = null;
+        setError(null);
+
+        // If there is a provided value try to use its source
+        if (value) {
+            // Search the sources for it matching against the value.source property
+            source = sources.find((source) => source.id === value?.sourceId) || null;
+            // If the source is null and we arent loading the sources
+            if (source === null && !isLoading) {
+                // Set an error as the passed in value's source wasnt returned by onRequestSources
+                setError(new Error('Unable to find resource source.'));
+            }
+        } else if (sources?.length === 1) {
+            // If only one source is passed in select it automatically
+            source = sources[0];
+        }
+
+        setSource(source);
+    }, [value, isLoading, sources, setSource, setError]);
+
+    useEffect(() => {
+        if (source) {
+            const plugin = plugins.find((plugin) => {
+                return plugin.type === source.type;
+            });
+            setPlugin(plugin || null);
+        } else {
+            setPlugin(null);
+        }
+    }, [plugins, source]);
+
+    const handleModalStateChange = useCallback(
+        (isOpen: boolean) => {
+            setIsModalOpen(isOpen);
+        },
+        [setIsModalOpen],
+    );
+    useEffect(() => {
+        if (!isModalOpen && !value && sources?.length > 1) {
+            setSource(null);
+        }
+    }, [sources, isModalOpen]);
 
-  return (
-    <div className="squiz-rb-scope">
-      <ResourcePicker
-        resource={resource}
-        allowedTypes={allowedTypes}
-        error={error}
-        isLoading={isLoading}
-        isDisabled={isDisabled}
-        onClear={() => onClearFunction()}
-      >
-        {(onClose, titleProps) => (
-          <ResourcePickerContainer
-            preselectedSourceId={value?.source}
-            preselectedResource={resource}
-            title={modalTitle}
-            titleAriaProps={titleProps}
-            allowedTypes={allowedTypes}
-            onClose={onClose}
-            onRequestSources={onRequestSources}
-            onRequestResource={onRequestResource}
-            onRequestChildren={onRequestChildren}
-            onChange={onChange}
-          />
-        )}
-      </ResourcePicker>
-    </div>
-  );
+    // Render a default "plugin" and one for each item in the plugins array. They are conditionally rendered based on what is selected
+    return (
+        <div className="squiz-rb-scope">
+            <PluginRender
+                key="default"
+                render={plugin === null}
+                {...props}
+                source={source}
+                sources={sources}
+                setSource={handleSourceSelect}
+                isLoading={isLoading}
+                error={sourcesError || error}
+                plugin={plugin}
+                useResource={() => {
+                    return {
+                        data: null,
+                        error: null,
+                        isLoading: false,
+                    };
+                }}
+                isModalOpen={isModalOpen}
+                onModalStateChange={handleModalStateChange}
+            />
+            {plugins.map((thisPlugin) => {
+                return (
+                    <PluginRender
+                        key={thisPlugin.type}
+                        render={thisPlugin === plugin}
+                        {...props}
+                        source={source}
+                        sources={sources}
+                        setSource={handleSourceSelect}
+                        isLoading={isLoading}
+                        error={error}
+                        plugin={plugin}
+                        useResource={thisPlugin.useResolveResource}
+                        isModalOpen={isModalOpen}
+                        onModalStateChange={handleModalStateChange}
+                    />
+                );
+            })}
+        </div>
+    );
 };

package/src/types.ts

@@ -1,81 +1,72 @@
+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 = {
+    // Source name; shown on the UI
+    name?: string;
+    // Source identifier for additional information lookups
+    id: string;
+    // Source type e.g. Matrix, DAM etc determines what plugin will be used for resource selection
+    type: ResourceBrowserPluginType;
 };
-/**
- * Represents a resource that has been picked from a source.
- */
-export type Resource = {
-  id: string;
-  name: string;
-  type: {
-    code: string;
+
+export type ResourceBrowserUnresolvedResource = {
+    sourceId: string;
+    resourceId: string;
+};
+
+export type ResourceBrowserResource = {
+    id: string;
     name: string;
-  };
-  status: Status;
-  url: string;
-  urls: string[];
-  childCount: number;
-  squizImage?: SquizImageType['__shape__'];
-  lineages?: ResourceLineage[];
+    url: string;
+    source: ResourceBrowserSource;
+    type: {
+        code: string;
+        name: string;
+    };
+    squizImage?: SquizImageType['__shape__'];
 };
 
-export type ResourceLineage = {
-  resourceIds: string[];
+export type ResourceBrowserSelectedState = {
+    showThumbnail?: boolean;
+    icon?: ReactElement;
+    label: string;
+    description: Array<ReactElement>;
 };
 
-/**
- * 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[];
+export type ResourceBrowserUIProps = {
+    source: ResourceBrowserSource;
+    allowedTypes?: string[];
+    headerPortal?: Element;
+    preselectedResource?: ResourceBrowserResource;
+    onSelected: (resource: ResourceBrowserResource) => void;
 };
 
-/**
- * Represents a source that has been optionally scoped to one of its "nodes".
- */
-export type ScopedSource = {
-  source: Source;
-  resource: Resource | null;
+export type useResolveResourceResponse = {
+    data: ResourceBrowserResource | null;
+    error: Error | null;
+    isLoading: boolean;
 };
 
 /**
- * A non-hydrated resource reference.
+ * If you change this interface please update the example here: src/__mocks__/PluginExample.tsx
  */
-export type ResourceReference = { source: string; resource: string };
+export interface ResourceBrowserPlugin {
+    /** Datasource type this plugin should be used for */
+    type: ResourceBrowserPluginType;
 
-/**
- * A hydrated resource reference.
- */
-export type HydratedResourceReference = { source: Source; resource: Resource };
+    // Setting to create a header portal
+    createHeaderPortal?: 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;
-}>;
+    /** React Functional Component to provde the UI to render to allow a user to select a resource to use */
+    sourceBrowserComponent: () => React.FunctionComponent<ResourceBrowserUIProps>;
 
-/**
- * Augments a type so that all properties are optional.
- */
-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]>;
-};
+    /** Function to provde the the summary information to show what resource is currently selected */
+    renderSelectedResource: (resource: ResourceBrowserResource) => Promise<ResourceBrowserSelectedState>;
 
-export type OnRequestSources = () => Promise<Source[]>;
-export type OnRequestResource = (reference: ResourceReference) => Promise<Resource>;
-export type OnRequestChildren = (source: Source, resource: Resource | null) => Promise<Resource[]>;
+    /** Function to resolve a resource and source id into a fully resolved output reference */
+    useResolveResource: (resourceId: string | null, source: ResourceBrowserSource | null) => useResolveResourceResponse;
+}

package/tailwind.config.cjs

@@ -1,97 +1,97 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: {
-    relative: true,
-    files: [
-      '../generic-browser-lib/src/**/*.{js,ts,jsx,tsx,scss}',
-      './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',
-      },
-      fontFamily: {
-        base: 'Open Sans, Arial, sans-serif',
-      },
-      fontWeight: {
-        normal: '400',
-        medium: '500',
-        semibold: '600',
-        bold: '700',
-      },
-      fontSize: {
-        xlg: '1.125rem',
-        lg: '1rem',
-        md: '0.875rem',
-        sm: '0.8125rem',
-        base: '1rem',
-        'heading-1': ['1.625rem', '2rem'],
-        'heading-2': ['1.25rem', '1.5rem'],
-        'heading-3': ['1.125rem', '1.375rem'],
-        'heading-4': ['1rem', '1.25rem'],
-      },
-      fontFamily: {
-        base: 'Open Sans, Arial, sans-serif',
-      },
-      boxShadow: {
-        outline: '0 0 0 1px rgba(0,0,0,0.10)',
-        sm: '0 0 0 1px rgba(0,0,0,0.04), 0 1px 4px 2px rgba(0,0,0,0.08)',
-        DEFAULT: '0 0 0 1px rgba(0,0,0,0.04), 0 1px 12px 4px rgba(0,0,0,0.12)',
-        md: '0 0 0 1px rgba(0,0,0,0.04), 0 1px 12px 4px rgba(0,0,0,0.12)',
-        lg: '0 0 0 1px rgba(0,0,0,0.04), 0 1px 24px 12px rgba(0,0,0,0.12)',
-        inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
-        none: 'none',
-      },
-      width: {
-        'modal-sm': '25rem',
-        'modal-md': '37.5rem',
-        'modal-lg': '50rem',
-        'modal-xl': '62.5rem',
-      },
-      spacing: {
-        1: '0.25rem', // 4px
-        2: '0.5rem', // 8px
-        3: '0.75rem', // 12px
-        4: '1rem', // 16px
-        5: '1.25rem', // 20px
-        6: '1.5rem', // 24px
-        7: '1.75rem', // 28px
-        8: '2rem', // 32px
-        169: '169px', // 169px
-      },
-      colors: {
-        gray: {
-          50: '#F7F7F7',
-          100: '#F5F5F5',
-          200: '#ededed',
-          300: '#e0e0e0',
-          400: '#BABABA',
-          500: '#949494',
-          600: '#707070',
-          700: '#4F4F4F',
-          800: '#3D3D3D',
-          900: '#2B2B2B',
-        },
-        blue: {
-          100: '#e6f1fa',
-          200: '#8FC0EB',
-          300: '#0774d2',
-          400: '#044985',
-        },
-        red: {
-          300: '#d72321',
+    content: {
+        relative: true,
+        files: [
+            '../../node_modules/@squiz/generic-browser-lib/src/**/*.{js,ts,jsx,tsx,scss}',
+            './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',
+            },
+            fontFamily: {
+                base: 'Open Sans, Arial, sans-serif',
+            },
+            fontWeight: {
+                normal: '400',
+                medium: '500',
+                semibold: '600',
+                bold: '700',
+            },
+            fontSize: {
+                xlg: '1.125rem',
+                lg: '1rem',
+                md: '0.875rem',
+                sm: '0.8125rem',
+                base: '1rem',
+                'heading-1': ['1.625rem', '2rem'],
+                'heading-2': ['1.25rem', '1.5rem'],
+                'heading-3': ['1.125rem', '1.375rem'],
+                'heading-4': ['1rem', '1.25rem'],
+            },
+            fontFamily: {
+                base: 'Open Sans, Arial, sans-serif',
+            },
+            boxShadow: {
+                outline: '0 0 0 1px rgba(0,0,0,0.10)',
+                sm: '0 0 0 1px rgba(0,0,0,0.04), 0 1px 4px 2px rgba(0,0,0,0.08)',
+                DEFAULT: '0 0 0 1px rgba(0,0,0,0.04), 0 1px 12px 4px rgba(0,0,0,0.12)',
+                md: '0 0 0 1px rgba(0,0,0,0.04), 0 1px 12px 4px rgba(0,0,0,0.12)',
+                lg: '0 0 0 1px rgba(0,0,0,0.04), 0 1px 24px 12px rgba(0,0,0,0.12)',
+                inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+                none: 'none',
+            },
+            width: {
+                'modal-sm': '25rem',
+                'modal-md': '37.5rem',
+                'modal-lg': '50rem',
+                'modal-xl': '62.5rem',
+            },
+            spacing: {
+                1: '0.25rem', // 4px
+                2: '0.5rem', // 8px
+                3: '0.75rem', // 12px
+                4: '1rem', // 16px
+                5: '1.25rem', // 20px
+                6: '1.5rem', // 24px
+                7: '1.75rem', // 28px
+                8: '2rem', // 32px
+                169: '169px', // 169px
+            },
+            colors: {
+                gray: {
+                    50: '#F7F7F7',
+                    100: '#F5F5F5',
+                    200: '#ededed',
+                    300: '#e0e0e0',
+                    400: '#BABABA',
+                    500: '#949494',
+                    600: '#707070',
+                    700: '#4F4F4F',
+                    800: '#3D3D3D',
+                    900: '#2B2B2B',
+                },
+                blue: {
+                    100: '#e6f1fa',
+                    200: '#8FC0EB',
+                    300: '#0774d2',
+                    400: '#044985',
+                },
+                red: {
+                    300: '#d72321',
+                },
+            },
         },
-      },
     },
-  },
 };

package/vite.config.js

@@ -5,16 +5,16 @@ import react from '@vitejs/plugin-react';
 // Dependencies from within the monorepo need to be configured in a special way, relates to:
 // https://github.com/vitejs/vite/issues/5668
 export default defineConfig({
-  optimizeDeps: {
-    include: ['@squiz/generic-browser-lib'],
-  },
-  plugins: [
-    react({
-      babel: {
-        parserOpts: {
-          plugins: ['decorators-legacy'],
-        },
-      },
-    }),
-  ],
+    optimizeDeps: {
+        include: ['@squiz/resource-browser-ui-lib'],
+    },
+    plugins: [
+        react({
+            babel: {
+                parserOpts: {
+                    plugins: ['decorators-legacy'],
+                },
+            },
+        }),
+    ],
 });

package/lib/Hooks/useCategorisedSources.d.ts

@@ -1,14 +0,0 @@
-import { ScopedSource, Source } from '../types';
-export type CategorisedSource = {
-    key: string;
-    label: string;
-    sources: ScopedSource[];
-};
-/**
- * Groups a list of source into scoped/un-scoped for rendering in the source list.
- *
- * @param {Source[]} sources
- *
- * @return {SourceList}
- */
-export declare const useCategorisedSources: (sources: Source[]) => CategorisedSource[];

package/lib/Hooks/useCategorisedSources.js

@@ -1,38 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCategorisedSources = void 0;
-const react_1 = require("react");
-/**
- * Groups a list of source into scoped/un-scoped for rendering in the source list.
- *
- * @param {Source[]} sources
- *
- * @return {SourceList}
- */
-const useCategorisedSources = (sources) => {
-    return (0, react_1.useMemo)(() => {
-        const categorised = [];
-        const uncategorised = [];
-        sources.forEach((source) => {
-            if (source.nodes.length > 0) {
-                const category = { key: source.id, label: source.name, sources: [] };
-                source.nodes.forEach((resource) => {
-                    category.sources.push({ source, resource });
-                });
-                categorised.push(category);
-            }
-            else {
-                uncategorised.push({ source, resource: null });
-            }
-        });
-        if (uncategorised.length > 0) {
-            categorised.push({
-                key: 'other',
-                label: 'Other systems',
-                sources: uncategorised,
-            });
-        }
-        return categorised;
-    }, [sources]);
-};
-exports.useCategorisedSources = useCategorisedSources;

package/lib/Hooks/useChildResources.d.ts

@@ -1,16 +0,0 @@
-import { Resource, ScopedSource, Source } from '../types';
-type UseChildResourcesProps = {
-    source: ScopedSource | null;
-    currentResource: Resource | null;
-    onRequestChildren: (source: Source, resource: Resource | null) => Promise<Resource[]>;
-};
-/**
- * Triggers a reload of the child resources when the source or current resource change.
- */
-export declare const useChildResources: ({ source, currentResource, onRequestChildren }: UseChildResourcesProps) => {
-    data: Resource[] | never[];
-    error: Error | null;
-    isLoading: boolean;
-    reload: () => void;
-};
-export {};

package/lib/Hooks/useChildResources.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useChildResources = void 0;
-const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
-/**
- * Triggers a reload of the child resources when the source or current resource change.
- */
-const useChildResources = ({ source, currentResource, onRequestChildren }) => (0, generic_browser_lib_1.useAsync)({
-    callback: () => (source ? onRequestChildren(source.source, currentResource || source.resource) : []),
-    defaultValue: [],
-    ignorePrevious: true,
-}, [source, currentResource]);
-exports.useChildResources = useChildResources;

package/lib/Hooks/usePreselectedResourcePath.d.ts

@@ -1,20 +0,0 @@
-import { Source, Resource, OnRequestResource, OnRequestSources } from '../types';
-export type PreselectedResourceProps = {
-    sourceId?: string;
-    resource?: Resource | null;
-    onRequestResource: OnRequestResource;
-    onRequestSources: OnRequestSources;
-};
-export type PreselectedResourcePath = {
-    source?: Source;
-    path?: Resource[];
-};
-export declare const usePreselectedResourcePath: ({ sourceId, resource, onRequestResource, onRequestSources, }: PreselectedResourceProps) => {
-    data: PreselectedResourcePath | {
-        source: Source | undefined;
-        path: Resource[] | undefined;
-    };
-    error: Error | null;
-    isLoading: boolean;
-    reload: () => void;
-};