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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (141) hide show
  1. package/CHANGELOG.md +88 -35
  2. package/LICENSE.md +15 -0
  3. package/README.md +9 -0
  4. package/jest.config.ts +22 -21
  5. package/lib/Hooks/useSelectedState.d.ts +15 -0
  6. package/lib/Hooks/useSelectedState.js +16 -0
  7. package/lib/Hooks/useSources.d.ts +5 -4
  8. package/lib/Hooks/useSources.js +25 -1
  9. package/lib/MainContainer/MainContainer.d.ts +17 -0
  10. package/lib/MainContainer/MainContainer.js +61 -0
  11. package/lib/Plugin/Plugin.d.ts +13 -0
  12. package/lib/Plugin/Plugin.js +17 -0
  13. package/lib/ResourceBrowserContext/ResourceBrowserContext.d.ts +2 -3
  14. package/lib/ResourceBrowserContext/ResourceBrowserContext.js +4 -17
  15. package/lib/ResourceBrowserInput/ResourceBrowserInput.d.ts +24 -0
  16. package/lib/ResourceBrowserInput/ResourceBrowserInput.js +16 -0
  17. package/lib/ResourcePicker/ResourcePicker.d.ts +6 -4
  18. package/lib/ResourcePicker/ResourcePicker.js +14 -8
  19. package/lib/ResourcePicker/States/Selected.d.ts +10 -4
  20. package/lib/ResourcePicker/States/Selected.js +11 -32
  21. package/lib/SourceDropdown/SourceDropdown.d.ts +5 -11
  22. package/lib/SourceDropdown/SourceDropdown.js +20 -99
  23. package/lib/SourceList/SourceList.d.ts +5 -16
  24. package/lib/SourceList/SourceList.js +14 -75
  25. package/lib/index.css +42 -202
  26. package/lib/index.d.ts +7 -7
  27. package/lib/index.js +69 -13
  28. package/lib/types.d.ts +41 -59
  29. package/package.json +82 -80
  30. package/src/Hooks/useSelectedState.spec.ts +46 -0
  31. package/src/Hooks/useSelectedState.ts +22 -0
  32. package/src/Hooks/useSources.spec.ts +30 -12
  33. package/src/Hooks/useSources.ts +33 -4
  34. package/src/Icons/CircledLoopIcon.tsx +8 -8
  35. package/src/MainContainer/MainContainer.spec.tsx +203 -0
  36. package/src/MainContainer/MainContainer.stories.tsx +62 -0
  37. package/src/MainContainer/MainContainer.tsx +101 -0
  38. package/src/Plugin/Plugin.spec.tsx +46 -0
  39. package/src/Plugin/Plugin.tsx +20 -0
  40. package/src/ResourceBrowserContext/ResourceBrowserContext.spec.tsx +65 -106
  41. package/src/ResourceBrowserContext/ResourceBrowserContext.tsx +24 -39
  42. package/src/ResourceBrowserInput/ResourceBrowserInput.spec.tsx +192 -0
  43. package/src/ResourceBrowserInput/ResourceBrowserInput.tsx +81 -0
  44. package/src/ResourcePicker/ResourcePicker.spec.tsx +159 -116
  45. package/src/ResourcePicker/ResourcePicker.stories.tsx +28 -24
  46. package/src/ResourcePicker/ResourcePicker.tsx +79 -59
  47. package/src/ResourcePicker/States/Error.tsx +8 -8
  48. package/src/ResourcePicker/States/Loading.tsx +3 -3
  49. package/src/ResourcePicker/States/Selected.tsx +66 -73
  50. package/src/ResourcePicker/mock-image-resource.json +25 -47
  51. package/src/ResourcePicker/mock-resource.json +11 -13
  52. package/src/ResourcePicker/resource-picker.scss +13 -13
  53. package/src/SourceDropdown/SourceDropdown.spec.tsx +65 -391
  54. package/src/SourceDropdown/SourceDropdown.stories.tsx +21 -24
  55. package/src/SourceDropdown/SourceDropdown.tsx +80 -258
  56. package/src/SourceList/SourceList.spec.tsx +37 -430
  57. package/src/SourceList/SourceList.stories.tsx +17 -37
  58. package/src/SourceList/SourceList.tsx +28 -155
  59. package/src/__mocks__/MockModels.ts +56 -25
  60. package/src/__mocks__/PluginExample.tsx +98 -0
  61. package/src/__mocks__/StorybookHelpers.tsx +141 -0
  62. package/src/__mocks__/renderWithContext.tsx +14 -18
  63. package/src/__mocks__/sample-sources.json +32 -0
  64. package/src/index.scss +18 -8
  65. package/src/index.spec.tsx +277 -99
  66. package/src/index.stories.tsx +65 -39
  67. package/src/index.tsx +119 -57
  68. package/src/types.ts +54 -63
  69. package/tailwind.config.cjs +92 -92
  70. package/vite.config.js +12 -12
  71. package/lib/Hooks/useCategorisedSources.d.ts +0 -14
  72. package/lib/Hooks/useCategorisedSources.js +0 -38
  73. package/lib/Hooks/useChildResources.d.ts +0 -16
  74. package/lib/Hooks/useChildResources.js +0 -13
  75. package/lib/Hooks/usePreselectedResourcePath.d.ts +0 -20
  76. package/lib/Hooks/usePreselectedResourcePath.js +0 -31
  77. package/lib/Hooks/useRecentLocations.d.ts +0 -5
  78. package/lib/Hooks/useRecentLocations.js +0 -38
  79. package/lib/Hooks/useRecentResourcesPaths.d.ts +0 -20
  80. package/lib/Hooks/useRecentResourcesPaths.js +0 -30
  81. package/lib/Hooks/useResource.d.ts +0 -28
  82. package/lib/Hooks/useResource.js +0 -23
  83. package/lib/Hooks/useResourcePath.d.ts +0 -16
  84. package/lib/Hooks/useResourcePath.js +0 -64
  85. package/lib/Icons/HistoryIcon.d.ts +0 -4
  86. package/lib/Icons/HistoryIcon.js +0 -13
  87. package/lib/PreviewPanel/PreviewPanel.d.ts +0 -5
  88. package/lib/PreviewPanel/PreviewPanel.js +0 -8
  89. package/lib/PreviewPanel/details/MatrixResource.d.ts +0 -7
  90. package/lib/PreviewPanel/details/MatrixResource.js +0 -35
  91. package/lib/ResourceBreadcrumb/ResourceBreadcrumb.d.ts +0 -9
  92. package/lib/ResourceBreadcrumb/ResourceBreadcrumb.js +0 -54
  93. package/lib/ResourceList/ResourceList.d.ts +0 -18
  94. package/lib/ResourceList/ResourceList.js +0 -49
  95. package/lib/ResourcePickerContainer/ResourcePickerContainer.d.ts +0 -17
  96. package/lib/ResourcePickerContainer/ResourcePickerContainer.js +0 -166
  97. package/lib/StatusIndicator/StatusIndicator.d.ts +0 -8
  98. package/lib/StatusIndicator/StatusIndicator.js +0 -27
  99. package/lib/utils/findBestMatchLineage.d.ts +0 -2
  100. package/lib/utils/findBestMatchLineage.js +0 -28
  101. package/lib/utils/uuid.d.ts +0 -1
  102. package/lib/utils/uuid.js +0 -6
  103. package/src/Hooks/useCategorisedSources.spec.ts +0 -39
  104. package/src/Hooks/useCategorisedSources.ts +0 -46
  105. package/src/Hooks/useChildResources.spec.ts +0 -29
  106. package/src/Hooks/useChildResources.ts +0 -21
  107. package/src/Hooks/usePreselectedResourcePath.ts +0 -54
  108. package/src/Hooks/useRecentLocations.spec.ts +0 -81
  109. package/src/Hooks/useRecentLocations.ts +0 -44
  110. package/src/Hooks/useRecentResourcesPaths.ts +0 -54
  111. package/src/Hooks/useResource.spec.ts +0 -61
  112. package/src/Hooks/useResource.ts +0 -38
  113. package/src/Hooks/useResourcePath.spec.ts +0 -120
  114. package/src/Hooks/useResourcePath.ts +0 -76
  115. package/src/Icons/HistoryIcon.tsx +0 -17
  116. package/src/PreviewPanel/PreviewPanel.spec.tsx +0 -198
  117. package/src/PreviewPanel/PreviewPanel.stories.tsx +0 -76
  118. package/src/PreviewPanel/PreviewPanel.tsx +0 -6
  119. package/src/PreviewPanel/details/MatrixResource.tsx +0 -54
  120. package/src/PreviewPanel/details/matrix-resource.scss +0 -16
  121. package/src/ResourceBreadcrumb/ResourceBreadcrumb.spec.tsx +0 -133
  122. package/src/ResourceBreadcrumb/ResourceBreadcrumb.stories.tsx +0 -24
  123. package/src/ResourceBreadcrumb/ResourceBreadcrumb.tsx +0 -79
  124. package/src/ResourceBreadcrumb/resource-breadcrumb.scss +0 -28
  125. package/src/ResourceBreadcrumb/sample-hierarchy.json +0 -27
  126. package/src/ResourceList/ResourceList.spec.tsx +0 -202
  127. package/src/ResourceList/ResourceList.stories.tsx +0 -40
  128. package/src/ResourceList/ResourceList.tsx +0 -83
  129. package/src/ResourceList/sample-resources.json +0 -851
  130. package/src/ResourcePickerContainer/ResourcePickerContainer.spec.tsx +0 -780
  131. package/src/ResourcePickerContainer/ResourcePickerContainer.stories.tsx +0 -45
  132. package/src/ResourcePickerContainer/ResourcePickerContainer.tsx +0 -290
  133. package/src/SourceList/sample-sources.json +0 -251
  134. package/src/StatusIndicator/StatusIndicator.stories.tsx +0 -83
  135. package/src/StatusIndicator/StatusIndicator.tsx +0 -38
  136. package/src/__mocks__/JestHelpers.ts +0 -65
  137. package/src/__mocks__/StorybookHelpers.ts +0 -128
  138. package/src/__mocks__/jestHelpers.spec.ts +0 -38
  139. package/src/utils/findBestMatchLineage.spec.ts +0 -81
  140. package/src/utils/findBestMatchLineage.ts +0 -30
  141. package/src/utils/uuid.ts +0 -5
@@ -1,31 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.usePreselectedResourcePath = void 0;
4
- const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
5
- const findBestMatchLineage_1 = require("../utils/findBestMatchLineage");
6
- const usePreselectedResourcePath = ({ sourceId, resource, onRequestResource, onRequestSources, }) => {
7
- return (0, generic_browser_lib_1.useAsync)({
8
- callback: async () => {
9
- let source;
10
- let path;
11
- if (sourceId) {
12
- const sources = await onRequestSources();
13
- source = sources.find((source) => source.id === sourceId);
14
- }
15
- if (sourceId && source && resource) {
16
- const bestMatchLineage = (0, findBestMatchLineage_1.findBestMatchLineage)(source, resource);
17
- if (Array.isArray(bestMatchLineage) && bestMatchLineage.length > 0) {
18
- path = await Promise.all(bestMatchLineage.map(async (resourceId) => {
19
- return onRequestResource({ source: sourceId, resource: resourceId });
20
- }));
21
- }
22
- else {
23
- path = [resource];
24
- }
25
- }
26
- return { source, path };
27
- },
28
- defaultValue: {},
29
- }, [sourceId, resource]);
30
- };
31
- exports.usePreselectedResourcePath = usePreselectedResourcePath;
@@ -1,5 +0,0 @@
1
- import { ResourceReference } from '../types';
2
- export declare const useRecentLocations: (maxLocations?: number, storageKey?: string) => {
3
- recentLocations: ResourceReference[];
4
- addRecentLocation: (newLocation: ResourceReference) => void;
5
- };
@@ -1,38 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useRecentLocations = void 0;
4
- const react_1 = require("react");
5
- const useRecentLocations = (maxLocations = 3, storageKey = 'rb_recent_locations') => {
6
- let initialRecentLocations = [];
7
- try {
8
- initialRecentLocations = JSON.parse(localStorage.getItem(storageKey) ?? '[]');
9
- }
10
- catch (_ignored) {
11
- // Ignore this error (edge case someone messing with the local storage...)
12
- }
13
- // We just have an extra safety check here in case local storage has been messed with and set as {} for example
14
- if (!Array.isArray(initialRecentLocations)) {
15
- initialRecentLocations = [];
16
- }
17
- // Check if any item in the current recent locations is not the right format, if so, we reset it
18
- if (initialRecentLocations.find((item) => !(item?.resource?.length && item?.source?.length))) {
19
- initialRecentLocations = [];
20
- }
21
- const [recentLocations, setRecentLocations] = (0, react_1.useState)(initialRecentLocations);
22
- const addRecentLocation = (newLocation) => {
23
- // Check if the new location to make sure we don't already have a recent location for this
24
- if (recentLocations.find((item) => item.resource === newLocation.resource && item.source === newLocation.source)) {
25
- return;
26
- }
27
- const updatedLocations = [newLocation, ...recentLocations.slice(0, maxLocations - 1)];
28
- // Set state
29
- setRecentLocations(updatedLocations);
30
- // Update local storage
31
- localStorage.setItem(storageKey, JSON.stringify(updatedLocations));
32
- };
33
- return {
34
- recentLocations,
35
- addRecentLocation,
36
- };
37
- };
38
- exports.useRecentLocations = useRecentLocations;
@@ -1,20 +0,0 @@
1
- import { Resource, OnRequestResource, OnRequestSources, Source } from '../types';
2
- export type RecentResourcesPathsProps = {
3
- sourceIds?: string[];
4
- resources?: Resource | null | (Resource | null)[];
5
- onRequestResource: OnRequestResource;
6
- onRequestSources: OnRequestSources;
7
- };
8
- export type RecentResourcesPaths = {
9
- source?: Source;
10
- path?: Resource[];
11
- };
12
- export declare const useRecentResourcesPaths: ({ sourceIds, resources, onRequestResource, onRequestSources, }: RecentResourcesPathsProps) => {
13
- data: RecentResourcesPaths[] | {
14
- source: Source | undefined;
15
- path: Resource[] | undefined;
16
- } | null;
17
- error: Error | null;
18
- isLoading: boolean;
19
- reload: () => void;
20
- };
@@ -1,30 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useRecentResourcesPaths = void 0;
4
- const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
5
- const findBestMatchLineage_1 = require("../utils/findBestMatchLineage");
6
- const useRecentResourcesPaths = ({ sourceIds, resources, onRequestResource, onRequestSources, }) => {
7
- const callbackArray = sourceIds?.map((sourceId, index) => async () => {
8
- let path;
9
- const sources = await onRequestSources();
10
- const source = sources.find((source) => source.id === sourceId);
11
- const resource = Array.isArray(resources) ? resources[index] : null;
12
- if (sourceId && source && resource) {
13
- const bestMatchLineage = (0, findBestMatchLineage_1.findBestMatchLineage)(source, resource);
14
- if (Array.isArray(bestMatchLineage) && bestMatchLineage.length > 0) {
15
- path = await Promise.all(bestMatchLineage.map(async (resourceId) => {
16
- return onRequestResource({ source: sourceId, resource: resourceId });
17
- }));
18
- }
19
- else {
20
- path = [resource];
21
- }
22
- }
23
- return { source, path };
24
- });
25
- return (0, generic_browser_lib_1.useAsync)({
26
- callback: callbackArray ? callbackArray : () => null,
27
- defaultValue: [],
28
- }, [JSON.stringify(sourceIds), resources]);
29
- };
30
- exports.useRecentResourcesPaths = useRecentResourcesPaths;
@@ -1,28 +0,0 @@
1
- import { Resource, ResourceReference } from '../types';
2
- type UseResourceProps = {
3
- onRequestResource: (reference: ResourceReference) => Promise<Resource | null>;
4
- reference?: ResourceReference | null;
5
- };
6
- type UseResourcesProps = {
7
- onRequestResource: (reference: ResourceReference) => Promise<Resource | null>;
8
- references?: ResourceReference[] | null;
9
- };
10
- /**
11
- * Loads the resource indicated by the provided reference.
12
- */
13
- export declare const useResource: ({ onRequestResource, reference }: UseResourceProps) => {
14
- data: Resource | null;
15
- error: Error | null;
16
- isLoading: boolean;
17
- reload: () => void;
18
- };
19
- /**
20
- * Loads the resources indicated by the provided reference.
21
- */
22
- export declare const useResources: ({ onRequestResource, references }: UseResourcesProps) => {
23
- data: Resource | null;
24
- error: Error | null;
25
- isLoading: boolean;
26
- reload: () => void;
27
- };
28
- export {};
@@ -1,23 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useResources = exports.useResource = void 0;
4
- const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
5
- /**
6
- * Loads the resource indicated by the provided reference.
7
- */
8
- const useResource = ({ onRequestResource, reference }) => (0, generic_browser_lib_1.useAsync)({
9
- callback: () => (reference ? onRequestResource(reference) : null),
10
- defaultValue: null,
11
- }, [reference?.source, reference?.resource]);
12
- exports.useResource = useResource;
13
- /**
14
- * Loads the resources indicated by the provided reference.
15
- */
16
- const useResources = ({ onRequestResource, references }) => {
17
- const callbackArray = references?.map((item) => () => onRequestResource(item));
18
- return (0, generic_browser_lib_1.useAsync)({
19
- callback: callbackArray ? callbackArray : () => null,
20
- defaultValue: null,
21
- }, []);
22
- };
23
- exports.useResources = useResources;
@@ -1,16 +0,0 @@
1
- import { Hierarchy, ScopedSource, Resource } from '../types';
2
- /**
3
- * Retains the state relating to where in the resource tree we are.
4
- *
5
- * Including:
6
- * * The source.
7
- * * A full path from the source to the leaf resource being browser.
8
- */
9
- export declare const useResourcePath: () => {
10
- source: ScopedSource | null;
11
- currentResource: Resource | null;
12
- hierarchy: Hierarchy<Resource | ScopedSource>;
13
- setSource: (source: ScopedSource | null, path?: Resource[]) => void;
14
- push: (resource: Resource) => void;
15
- popUntil: (node: ScopedSource | Resource) => void;
16
- };
@@ -1,64 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useResourcePath = void 0;
4
- const react_1 = require("react");
5
- /**
6
- * Retains the state relating to where in the resource tree we are.
7
- *
8
- * Including:
9
- * * The source.
10
- * * A full path from the source to the leaf resource being browser.
11
- */
12
- const useResourcePath = () => {
13
- const [source, setSourceInternal] = (0, react_1.useState)(null);
14
- const [resourceStack, setResourceStack] = (0, react_1.useState)([]);
15
- const setSource = (0, react_1.useCallback)((source, path = []) => {
16
- setSourceInternal(source);
17
- setResourceStack(path);
18
- }, []);
19
- const push = (0, react_1.useCallback)((resource) => {
20
- setResourceStack([...resourceStack, resource]);
21
- }, [resourceStack]);
22
- const popUntil = (0, react_1.useCallback)((node) => {
23
- if ('source' in node) {
24
- // source node selected, just switch to the source
25
- setSource(node);
26
- return;
27
- }
28
- // resource node selected
29
- const newResourceStack = [...resourceStack];
30
- // pop until we reach the node that was selected in the breadcrumb
31
- while (newResourceStack.length > 0 && newResourceStack[newResourceStack.length - 1].id !== node?.id) {
32
- newResourceStack.pop();
33
- }
34
- if (newResourceStack.length === 0) {
35
- // if we didn't find the node clear the source to push the user back to the root
36
- setSource(null);
37
- }
38
- else {
39
- setResourceStack(newResourceStack);
40
- }
41
- }, [source, resourceStack]);
42
- const hierarchy = (0, react_1.useMemo)(() => {
43
- if (!source) {
44
- return [];
45
- }
46
- return [
47
- {
48
- key: `source:${source.source.id}-resource:${source.resource?.id || 'unscoped'}`,
49
- label: source.resource?.name || source.source.name,
50
- node: source,
51
- },
52
- ...resourceStack.map((resource) => ({ key: resource.id, node: resource, label: resource.name })),
53
- ];
54
- }, [source, resourceStack]);
55
- return {
56
- source,
57
- currentResource: (resourceStack[resourceStack.length - 1] || null),
58
- hierarchy,
59
- setSource,
60
- push,
61
- popUntil,
62
- };
63
- };
64
- exports.useResourcePath = useResourcePath;
@@ -1,4 +0,0 @@
1
- import React, { SVGAttributes } from 'react';
2
- type HistoryIconProps = SVGAttributes<SVGElement>;
3
- export declare const HistoryIcon: (props: HistoryIconProps) => React.JSX.Element;
4
- export {};
@@ -1,13 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.HistoryIcon = void 0;
7
- const react_1 = __importDefault(require("react"));
8
- const HistoryIcon = (props) => {
9
- return (react_1.default.createElement("svg", { width: "19", height: "18", viewBox: "0 0 19 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
10
- react_1.default.createElement("g", { id: "icon" },
11
- react_1.default.createElement("path", { id: "Vector", d: "M10.5531 2.25131C6.73555 2.14631 3.60805 5.21381 3.60805 9.00131H2.26556C1.92806 9.00131 1.76306 9.40631 2.00306 9.63881L4.09556 11.7388C4.24555 11.8888 4.47806 11.8888 4.62806 11.7388L6.72055 9.63881C6.95305 9.40631 6.78805 9.00131 6.45055 9.00131H5.10805C5.10805 6.07631 7.49305 3.71381 10.4331 3.75131C13.2231 3.78881 15.5706 6.1363 15.6081 8.9263C15.6456 11.8588 13.2831 14.2513 10.3581 14.2513C9.15055 14.2513 8.03305 13.8388 7.14806 13.1413C6.84805 12.9088 6.42805 12.9313 6.15805 13.2013C5.84305 13.5163 5.86555 14.0488 6.21805 14.3188C7.35805 15.2188 8.79055 15.7513 10.3581 15.7513C14.1456 15.7513 17.2131 12.6238 17.1081 8.8063C17.0106 5.28881 14.0706 2.34881 10.5531 2.25131ZM10.1706 6.0013C9.86305 6.0013 9.60805 6.2563 9.60805 6.56381V9.32381C9.60805 9.58631 9.75055 9.83381 9.97555 9.9688L12.3156 11.3563C12.5856 11.5138 12.9306 11.4238 13.0881 11.1613C13.2456 10.8913 13.1556 10.5463 12.8931 10.3888L10.7331 9.10631V6.5563C10.7331 6.2563 10.4781 6.0013 10.1706 6.0013Z", fill: "#4F4F4F" }))));
12
- };
13
- exports.HistoryIcon = HistoryIcon;
@@ -1,5 +0,0 @@
1
- /// <reference types="react" />
2
- import { PreviewPanelProps } from '@squiz/generic-browser-lib';
3
- export type { PreviewPanelProps };
4
- declare const _default: import("react").FC<import("@squiz/generic-browser-lib").PreviewPanelHOCProps & PreviewPanelProps>;
5
- export default _default;
@@ -1,8 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
7
- const MatrixResource_1 = __importDefault(require("./details/MatrixResource"));
8
- exports.default = (0, generic_browser_lib_1.PreviewPanelHOC)(MatrixResource_1.default);
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
- import { Resource } from '../../types';
3
- type MatrixResourceProps = {
4
- resource: Resource;
5
- };
6
- declare const MatrixResource: ({ resource: { id, type, name, status, url } }: MatrixResourceProps) => React.JSX.Element;
7
- export default MatrixResource;
@@ -1,35 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- const react_1 = __importDefault(require("react"));
7
- const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
8
- const StatusIndicator_1 = __importDefault(require("../../StatusIndicator/StatusIndicator"));
9
- const ImageThumb = ({ url, name }) => {
10
- return (react_1.default.createElement("div", { className: "checkered-bg w-full h-[164px] overflow-hidden flex justify-center items-center" },
11
- react_1.default.createElement("img", { src: url, className: "max-w-full max-h-full", alt: name })));
12
- };
13
- const MatrixResource = ({ resource: { id, type, name, status, url } }) => {
14
- return (react_1.default.createElement("div", null,
15
- 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" },
16
- 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" })),
17
- react_1.default.createElement("div", { className: "mt-4 font-semibold text-base break-word" }, name)),
18
- react_1.default.createElement("div", { className: "text-gray-800 mx-6 mt-4" },
19
- react_1.default.createElement("dl", { className: "flex flex-col text-sm" },
20
- react_1.default.createElement("div", { className: "flex mb-2" },
21
- react_1.default.createElement("dt", { className: "w-[60px] mr-4 text-gray-600" }, "Type"),
22
- react_1.default.createElement("dd", { className: "font-semibold" }, type.name)),
23
- react_1.default.createElement("div", { className: "flex mb-2" },
24
- react_1.default.createElement("dt", { className: "w-[60px] mr-4 text-gray-600" }, "Asset ID"),
25
- react_1.default.createElement("dd", { className: "font-semibold" },
26
- "#",
27
- id)),
28
- react_1.default.createElement("div", { className: "flex mb-2" },
29
- react_1.default.createElement("dt", { className: "w-[60px] mr-4 text-gray-600" }, "Status"),
30
- react_1.default.createElement("dd", { className: "flex items-center font-semibold" },
31
- react_1.default.createElement(StatusIndicator_1.default, { className: "mr-1", status: status }),
32
- " ",
33
- status.name))))));
34
- };
35
- exports.default = MatrixResource;
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- import { Hierarchy } from '../types';
3
- export interface ResourceBreadcrumbProps<T> {
4
- hierarchy: Hierarchy<T>;
5
- onBreadcrumbSelect: (node: T) => void;
6
- onReturnToRoot: () => void;
7
- }
8
- declare const ResourceBreadcrumb: <T>({ hierarchy, onBreadcrumbSelect, onReturnToRoot }: ResourceBreadcrumbProps<T>) => React.JSX.Element;
9
- export default ResourceBreadcrumb;
@@ -1,54 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
- Object.defineProperty(exports, "__esModule", { value: true });
26
- const react_1 = __importStar(require("react"));
27
- const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
28
- const ResourceBreadcrumb = function ({ hierarchy, onBreadcrumbSelect, onReturnToRoot }) {
29
- // Track expanded state
30
- const [expandedHierarchy, setExpandedHierarchy] = (0, react_1.useState)(false);
31
- // On update (new page) reset the expanded state
32
- (0, react_1.useEffect)(() => {
33
- setExpandedHierarchy(false);
34
- }, [hierarchy]);
35
- // Handle toggling the state to expanded
36
- const handleExpandHierarchy = (0, react_1.useCallback)(() => {
37
- setExpandedHierarchy(true);
38
- }, []);
39
- return (react_1.default.createElement("nav", { "aria-label": "Resource breadcrumb", className: `text-sm text-gray-600 px-7 my-5 resource-breadcrumb ${expandedHierarchy ? 'resource-breadcrumb--expanded' : 'resource-breadcrumb--collapsed'}` },
40
- react_1.default.createElement("ol", { className: "flex flex-wrap items-center" },
41
- react_1.default.createElement("li", { className: "flex items-center mr-3" },
42
- react_1.default.createElement("button", { type: "button", onClick: onReturnToRoot },
43
- react_1.default.createElement(generic_browser_lib_1.Icon, { icon: 'root', "aria-label": "Return to source list", className: "" }))),
44
- hierarchy.map(({ key, label, node }, index) => {
45
- return (react_1.default.createElement("li", { key: `${key}`, className: "resource-breadcrumb__item max-md:hidden flex items-center mr-2 before:content-['/'] before:mr-2" },
46
- index !== hierarchy.length - 1 && (react_1.default.createElement("button", { type: "button", onClick: () => onBreadcrumbSelect(node) },
47
- react_1.default.createElement("div", { className: `resource-breadcrumb__label`, title: label }, label))),
48
- index === hierarchy.length - 1 && (react_1.default.createElement("div", { className: `resource-breadcrumb__label md:font-semibold`, title: label }, label)),
49
- hierarchy.length > 3 && index === 0 && (react_1.default.createElement("div", { className: "resource-breadcrumb__expander flex" },
50
- react_1.default.createElement("div", { className: "before:content-['/'] mx-2" }),
51
- react_1.default.createElement("button", { title: "Expand breadcrumb", "aria-label": "Expand breadcrumb", onClick: handleExpandHierarchy, className: "flex items-center justify-center" }, "...")))));
52
- }))));
53
- };
54
- exports.default = ResourceBreadcrumb;
@@ -1,18 +0,0 @@
1
- import React from 'react';
2
- import { OverlayTriggerState } from 'react-stately';
3
- import { DOMAttributes, FocusableElement } from '@react-types/shared';
4
- import { Resource } from '../types';
5
- export interface ResourceListProps {
6
- resources: Array<Resource>;
7
- selectedResource?: Resource | null;
8
- previewModalState: OverlayTriggerState;
9
- isLoading: boolean;
10
- onResourceSelect: (resource: Resource, overlayProps: DOMAttributes<FocusableElement>) => void;
11
- onResourceDrillDown: (resource: Resource) => void;
12
- allowedTypes?: string[] | undefined;
13
- handleReturnToRoot: () => void;
14
- handleReload: () => void;
15
- error: Error | null;
16
- }
17
- declare const ResourceList: ({ resources, selectedResource, previewModalState, isLoading, onResourceSelect, onResourceDrillDown, allowedTypes, handleReturnToRoot, handleReload, error, }: ResourceListProps) => React.JSX.Element;
18
- export default ResourceList;
@@ -1,49 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
- Object.defineProperty(exports, "__esModule", { value: true });
26
- const react_1 = __importStar(require("react"));
27
- const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
28
- const ResourceList = function ({ resources, selectedResource, previewModalState, isLoading, onResourceSelect, onResourceDrillDown, allowedTypes, handleReturnToRoot, handleReload, error, }) {
29
- const listRef = (0, react_1.useRef)(null);
30
- // When resources change, because we are on a new page, reset focus to the list
31
- (0, react_1.useEffect)(() => {
32
- if (listRef.current) {
33
- listRef.current?.focus({
34
- preventScroll: true,
35
- });
36
- }
37
- }, [resources]);
38
- if (isLoading) {
39
- return react_1.default.createElement(generic_browser_lib_1.SkeletonList, { itemCount: 8, ariaLabel: "loading Resource list", className: "text-sm font-semibold" });
40
- }
41
- return (react_1.default.createElement("ul", { ref: listRef, tabIndex: -1, "aria-label": `Resource list`, className: "flex flex-col text-sm font-semibold px-7 my-4 focus-visible:outline-0" },
42
- error && react_1.default.createElement(generic_browser_lib_1.ResourceState, { state: "error", message: error.message, handleReload: handleReload }),
43
- !error && resources.length === 0 && react_1.default.createElement(generic_browser_lib_1.ResourceState, { state: "empty", handleReload: handleReturnToRoot }),
44
- !error &&
45
- resources.map((resource) => {
46
- return (react_1.default.createElement(generic_browser_lib_1.ResourceItem, { key: resource.id, item: resource, selected: resource.id == selectedResource?.id, label: resource.name, type: resource.type.code, childCount: resource.childCount, previewModalState: previewModalState, onSelect: onResourceSelect, onDrillDown: onResourceDrillDown, className: "border-b-0 first:mt-0 first:rounded-t-lg last:rounded-b-lg last:border-b", allowedTypes: allowedTypes }));
47
- })));
48
- };
49
- exports.default = ResourceList;
@@ -1,17 +0,0 @@
1
- import React from 'react';
2
- import { DOMAttributes, FocusableElement } from '@react-types/shared';
3
- import { Resource, HydratedResourceReference, OnRequestSources, OnRequestChildren, OnRequestResource } from '../types';
4
- interface ResourcePickerContainerProps {
5
- title: string;
6
- titleAriaProps: DOMAttributes<FocusableElement>;
7
- allowedTypes: string[] | undefined;
8
- onRequestSources: OnRequestSources;
9
- onRequestResource: OnRequestResource;
10
- onRequestChildren: OnRequestChildren;
11
- onChange(resource: HydratedResourceReference | null): void;
12
- onClose: () => void;
13
- preselectedSourceId?: string;
14
- preselectedResource?: Resource | null;
15
- }
16
- declare function ResourcePickerContainer({ title, titleAriaProps, allowedTypes, onRequestSources, onRequestResource, onRequestChildren, onChange, onClose, preselectedSourceId, preselectedResource, }: ResourcePickerContainerProps): React.JSX.Element;
17
- export default ResourcePickerContainer;