@squiz/resource-browser 1.32.1-alpha.14 → 1.32.1-alpha.16

package/src/__mocks__/StorybookHelpers.ts

@@ -0,0 +1,46 @@
+import sampleSources from '../SourceList/sample-sources.json';
+import { HydratedResourceReference, Resource, Source } from '../types';
+import sampleResources from '../ResourceList/sample-resources.json';
+
+type CreateCallbacksProps = Partial<{
+  delay: number;
+  sourceIsLoading: boolean;
+  resourceIsLoading: boolean;
+}>;
+
+export const createResourceBrowserCallbacks = ({
+  delay = 500,
+  sourceIsLoading = false,
+  resourceIsLoading = false,
+}: CreateCallbacksProps = {}) => {
+  return {
+    onRequestSources: () => {
+      return new Promise((resolve) => {
+        if (!sourceIsLoading) {
+          setTimeout(resolve, delay, sampleSources);
+        }
+      });
+    },
+    onRequestChildren: (source: Source, resource: Resource | null) => {
+      return new Promise((resolve) => {
+        if (!resourceIsLoading) {
+          const children = resource ? (((resource as any)?._children || []) as Resource[]) : sampleResources;
+
+          setTimeout(resolve, delay, children);
+        }
+      });
+    },
+    onRequestResource: () => {
+      return new Promise((resolve) => {
+        if (!resourceIsLoading) {
+          setTimeout(resolve, delay, sampleResources[0]);
+        }
+      });
+    },
+    onChange: ({ resource, source }: HydratedResourceReference) => {
+      alert(
+        `Resource Browser has selected resource #${resource.id} (${resource.name}) from source #${source.id} (${source.name}).`,
+      );
+    },
+  };
+};

package/src/index.stories.tsx

@@ -1,8 +1,6 @@
 import { StoryFn, Meta } from '@storybook/react';
-
-import RelatedAssetPicker, { NodeIdentifier } from './index';
-import sampleSources from './SourceList/sample-sources.json';
-import sampleResources from './ResourceList/sample-resources.json';
+import RelatedAssetPicker from './index';
+import { createResourceBrowserCallbacks } from './__mocks__/StorybookHelpers';
 
 export default {
   title: 'RelatedAssetPicker',
@@ -10,41 +8,19 @@ export default {
 } as Meta<typeof RelatedAssetPicker>;
 
 const Template: StoryFn<typeof RelatedAssetPicker> = (props) => {
-  const { sourceIsLoading, resourceIsLoading, detailsIsLoading } = props;
+  const { sourceIsLoading, resourceIsLoading } = props;
+  const { onRequestSources, onRequestChildren, onRequestResource, onChange } = createResourceBrowserCallbacks({
+    sourceIsLoading: !!sourceIsLoading,
+    resourceIsLoading: !!resourceIsLoading,
+  });
+
   return (
     <RelatedAssetPicker
       {...props}
-      onRequestSources={() => {
-        return new Promise((resolve) => {
-          if (!sourceIsLoading) {
-            setTimeout(resolve, 500, sampleSources);
-          }
-        });
-      }}
-      onRequestChildren={() => {
-        return new Promise((resolve) => {
-          if (!resourceIsLoading) {
-            setTimeout(resolve, 500, sampleResources);
-          }
-        });
-      }}
-      onRequestResource={() => {
-        return new Promise((resolve) => {
-          if (!detailsIsLoading) {
-            setTimeout(resolve, 500, {
-              type: 'page',
-              name: 'Products',
-              properties: new Map([
-                ['assetId', '12345'],
-                ['status', 'UnderConstruction'],
-              ]),
-            });
-          }
-        });
-      }}
-      onChange={(nodeId: NodeIdentifier) => {
-        alert(`Resource Browser has selected ${nodeId.source} ${nodeId.id}`);
-      }}
+      onRequestSources={onRequestSources}
+      onRequestChildren={onRequestChildren}
+      onRequestResource={onRequestResource}
+      onChange={onChange}
     />
   );
 };
@@ -65,6 +41,5 @@ Primary.args = {
   modalTitle: 'Asset Picker',
   sourceIsLoading: false,
   resourceIsLoading: false,
-  detailsIsLoading: false,
-  allowedTypes: ['site', 'image'],
+  allowedTypes: ['site', 'image', 'physical_file'],
 };

package/src/index.tsx

@@ -1,31 +1,9 @@
 import React from 'react';
-
-// import { ResourceBrowserInternalContext } from './InternalContext/InternalContext';
 import ModalTrigger from './Modal/ModalTrigger';
 import ResourcePickerContainer from './ResourcePickerContainer/ResourcePickerContainer';
+import { HydratedResourceReference, Resource, ResourceReference, Source } from './types';
 
-export type NodeIdentifier = { source: string | null; id: string };
-export type ResourceDetail = {
-  type: string;
-  name: string;
-  properties: Map<string, any>;
-};
-export type Resource = {
-  id: NodeIdentifier;
-  type: string;
-  selected: boolean;
-  label: string;
-  childCount: number;
-};
-export type Source = {
-  id: string;
-  name: string;
-  nodes: Array<Resource>;
-};
-export type Hierarchy = {
-  id: NodeIdentifier;
-  label: string;
-};
+export type { HydratedResourceReference, Resource, ResourceReference, Source };
 
 export default function ComponentEditorContentBrowser({
   showButtonLabel,
@@ -35,7 +13,6 @@ export default function ComponentEditorContentBrowser({
   allowedTypes,
   onRequestSources,
   onRequestChildren,
-  onRequestResource,
   onChange,
 }: {
   showButtonLabel?: boolean;
@@ -44,9 +21,9 @@ export default function ComponentEditorContentBrowser({
   modalTitle: string;
   allowedTypes: string[] | undefined;
   onRequestSources: () => Promise<Source[]>;
-  onRequestChildren(id: NodeIdentifier): Promise<Resource[]>;
-  onRequestResource(id: NodeIdentifier): Promise<ResourceDetail | null>;
-  onChange(resource: NodeIdentifier | null): void;
+  onRequestChildren(source: Source, resource: Resource | null): Promise<Resource[]>;
+  onRequestResource(reference: ResourceReference): Promise<Resource | null>;
+  onChange(resource: HydratedResourceReference | null): void;
 }) {
   const showLabel = showButtonLabel || false;
 
@@ -61,7 +38,6 @@ export default function ComponentEditorContentBrowser({
             onClose={onClose}
             onRequestSources={onRequestSources}
             onRequestChildren={onRequestChildren}
-            onRequestResource={onRequestResource}
             onChange={onChange}
           />
         )}

package/src/types.d.ts

@@ -0,0 +1,71 @@
+import { SquizImageType } from '@squiz/dx-json-schema-lib';
+
+/**
+ * Represents a resource that has been picked from a source.
+ */
+export type Resource = {
+  id: string;
+  name: string;
+  type: {
+    code: string;
+    name: string;
+  };
+  status: {
+    code: string;
+    name: string;
+  };
+  url: string;
+  urls: string[];
+  childCount: number;
+  squizImage?: SquizImageType['__shape__'];
+};
+
+/**
+ * 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;
+};
+
+/**
+ * A non-hydrated resource reference.
+ */
+export type ResourceReference = { source: string; resource: string };
+
+/**
+ * A hydrated resource reference.
+ */
+export type HydratedResourceReference = { source: Source; resource: Resource };
+
+/**
+ * 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.
+ */
+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]>;
+};

package/src/uuid.ts

@@ -1,7 +1,5 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
 export default function uuid(): string {
-  return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
-    (c ^ (window.crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16),
+  return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c) =>
+    (Number(c) ^ (window.crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (Number(c) / 4)))).toString(16),
   );
 }

package/src/SourceDropdown/sample-sources.json

@@ -1,110 +0,0 @@
-[
-  {
-    "id": "1",
-    "name": "Acme corporate system",
-    "nodes": [
-      {
-        "id": {
-          "id": "1",
-          "source": "1"
-        },
-        "type": "site",
-        "selected": false,
-        "label": "HandyHomes Website very long wrapping name",
-        "childCount": 21
-      },
-      {
-        "id": {
-          "id": "2",
-          "source": "1"
-        },
-        "type": "site",
-        "selected": false,
-        "label": "Another Website",
-        "childCount": 13
-      }
-    ]
-  },
-  {
-    "id": "2",
-    "name": "Acme internal system",
-    "nodes": [
-      {
-        "id": {
-          "id": "1",
-          "source": "2"
-        },
-        "type": "site",
-        "selected": false,
-        "label": "Intranet Website",
-        "childCount": 15
-      },
-      {
-        "id": {
-          "id": "2",
-          "source": "2"
-        },
-        "type": "site",
-        "selected": false,
-        "label": "Social Website",
-        "childCount": 10
-      }
-    ]
-  },
-  {
-    "id": "3",
-    "name": "Other system",
-    "nodes": [
-      {
-        "id": {
-          "id": "1",
-          "source": "3"
-        },
-        "type": "folder",
-        "selected": false,
-        "label": "Digital asset manager",
-        "childCount": 0
-      },
-      {
-        "id": {
-          "id": "2",
-          "source": "3"
-        },
-        "type": "image",
-        "selected": false,
-        "label": "Unsplash image library",
-        "childCount": 0
-      },
-      {
-        "id": {
-          "id": "3",
-          "source": "3"
-        },
-        "type": "image",
-        "selected": false,
-        "label": "Unsplash image library",
-        "childCount": 0
-      },
-      {
-        "id": {
-          "id": "4",
-          "source": "3"
-        },
-        "type": "image",
-        "selected": false,
-        "label": "Unsplash image library",
-        "childCount": 0
-      },
-      {
-        "id": {
-          "id": "5",
-          "source": "3"
-        },
-        "type": "image",
-        "selected": false,
-        "label": "Unsplash image library",
-        "childCount": 0
-      }
-    ]
-  }
-]