@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.
- package/CHANGELOG.md +88 -35
- package/LICENSE.md +15 -0
- package/README.md +9 -0
- package/jest.config.ts +22 -21
- package/lib/Hooks/useSelectedState.d.ts +15 -0
- package/lib/Hooks/useSelectedState.js +16 -0
- package/lib/Hooks/useSources.d.ts +5 -4
- package/lib/Hooks/useSources.js +25 -1
- package/lib/MainContainer/MainContainer.d.ts +17 -0
- package/lib/MainContainer/MainContainer.js +61 -0
- package/lib/Plugin/Plugin.d.ts +13 -0
- package/lib/Plugin/Plugin.js +17 -0
- package/lib/ResourceBrowserContext/ResourceBrowserContext.d.ts +2 -3
- package/lib/ResourceBrowserContext/ResourceBrowserContext.js +4 -17
- package/lib/ResourceBrowserInput/ResourceBrowserInput.d.ts +24 -0
- package/lib/ResourceBrowserInput/ResourceBrowserInput.js +16 -0
- package/lib/ResourcePicker/ResourcePicker.d.ts +6 -4
- package/lib/ResourcePicker/ResourcePicker.js +14 -8
- package/lib/ResourcePicker/States/Selected.d.ts +10 -4
- package/lib/ResourcePicker/States/Selected.js +11 -32
- package/lib/SourceDropdown/SourceDropdown.d.ts +5 -11
- package/lib/SourceDropdown/SourceDropdown.js +20 -99
- package/lib/SourceList/SourceList.d.ts +5 -16
- package/lib/SourceList/SourceList.js +14 -75
- package/lib/index.css +42 -202
- package/lib/index.d.ts +7 -7
- package/lib/index.js +69 -13
- package/lib/types.d.ts +41 -59
- package/package.json +82 -80
- package/src/Hooks/useSelectedState.spec.ts +46 -0
- package/src/Hooks/useSelectedState.ts +22 -0
- package/src/Hooks/useSources.spec.ts +30 -12
- package/src/Hooks/useSources.ts +33 -4
- package/src/Icons/CircledLoopIcon.tsx +8 -8
- package/src/MainContainer/MainContainer.spec.tsx +203 -0
- package/src/MainContainer/MainContainer.stories.tsx +62 -0
- package/src/MainContainer/MainContainer.tsx +101 -0
- package/src/Plugin/Plugin.spec.tsx +46 -0
- package/src/Plugin/Plugin.tsx +20 -0
- package/src/ResourceBrowserContext/ResourceBrowserContext.spec.tsx +65 -106
- package/src/ResourceBrowserContext/ResourceBrowserContext.tsx +24 -39
- package/src/ResourceBrowserInput/ResourceBrowserInput.spec.tsx +192 -0
- package/src/ResourceBrowserInput/ResourceBrowserInput.tsx +81 -0
- package/src/ResourcePicker/ResourcePicker.spec.tsx +159 -116
- package/src/ResourcePicker/ResourcePicker.stories.tsx +28 -24
- package/src/ResourcePicker/ResourcePicker.tsx +79 -59
- package/src/ResourcePicker/States/Error.tsx +8 -8
- package/src/ResourcePicker/States/Loading.tsx +3 -3
- package/src/ResourcePicker/States/Selected.tsx +66 -73
- package/src/ResourcePicker/mock-image-resource.json +25 -47
- package/src/ResourcePicker/mock-resource.json +11 -13
- package/src/ResourcePicker/resource-picker.scss +13 -13
- package/src/SourceDropdown/SourceDropdown.spec.tsx +65 -391
- package/src/SourceDropdown/SourceDropdown.stories.tsx +21 -24
- package/src/SourceDropdown/SourceDropdown.tsx +80 -258
- package/src/SourceList/SourceList.spec.tsx +37 -430
- package/src/SourceList/SourceList.stories.tsx +17 -37
- package/src/SourceList/SourceList.tsx +28 -155
- package/src/__mocks__/MockModels.ts +56 -25
- package/src/__mocks__/PluginExample.tsx +98 -0
- package/src/__mocks__/StorybookHelpers.tsx +141 -0
- package/src/__mocks__/renderWithContext.tsx +14 -18
- package/src/__mocks__/sample-sources.json +32 -0
- package/src/index.scss +18 -8
- package/src/index.spec.tsx +277 -99
- package/src/index.stories.tsx +65 -39
- package/src/index.tsx +119 -57
- package/src/types.ts +54 -63
- package/tailwind.config.cjs +92 -92
- package/vite.config.js +12 -12
- package/lib/Hooks/useCategorisedSources.d.ts +0 -14
- package/lib/Hooks/useCategorisedSources.js +0 -38
- package/lib/Hooks/useChildResources.d.ts +0 -16
- package/lib/Hooks/useChildResources.js +0 -13
- package/lib/Hooks/usePreselectedResourcePath.d.ts +0 -20
- package/lib/Hooks/usePreselectedResourcePath.js +0 -31
- package/lib/Hooks/useRecentLocations.d.ts +0 -5
- package/lib/Hooks/useRecentLocations.js +0 -38
- package/lib/Hooks/useRecentResourcesPaths.d.ts +0 -20
- package/lib/Hooks/useRecentResourcesPaths.js +0 -30
- package/lib/Hooks/useResource.d.ts +0 -28
- package/lib/Hooks/useResource.js +0 -23
- package/lib/Hooks/useResourcePath.d.ts +0 -16
- package/lib/Hooks/useResourcePath.js +0 -64
- package/lib/Icons/HistoryIcon.d.ts +0 -4
- package/lib/Icons/HistoryIcon.js +0 -13
- package/lib/PreviewPanel/PreviewPanel.d.ts +0 -5
- package/lib/PreviewPanel/PreviewPanel.js +0 -8
- package/lib/PreviewPanel/details/MatrixResource.d.ts +0 -7
- package/lib/PreviewPanel/details/MatrixResource.js +0 -35
- package/lib/ResourceBreadcrumb/ResourceBreadcrumb.d.ts +0 -9
- package/lib/ResourceBreadcrumb/ResourceBreadcrumb.js +0 -54
- package/lib/ResourceList/ResourceList.d.ts +0 -18
- package/lib/ResourceList/ResourceList.js +0 -49
- package/lib/ResourcePickerContainer/ResourcePickerContainer.d.ts +0 -17
- package/lib/ResourcePickerContainer/ResourcePickerContainer.js +0 -166
- package/lib/StatusIndicator/StatusIndicator.d.ts +0 -8
- package/lib/StatusIndicator/StatusIndicator.js +0 -27
- package/lib/utils/findBestMatchLineage.d.ts +0 -2
- package/lib/utils/findBestMatchLineage.js +0 -28
- package/lib/utils/uuid.d.ts +0 -1
- package/lib/utils/uuid.js +0 -6
- package/src/Hooks/useCategorisedSources.spec.ts +0 -39
- package/src/Hooks/useCategorisedSources.ts +0 -46
- package/src/Hooks/useChildResources.spec.ts +0 -29
- package/src/Hooks/useChildResources.ts +0 -21
- package/src/Hooks/usePreselectedResourcePath.ts +0 -54
- package/src/Hooks/useRecentLocations.spec.ts +0 -81
- package/src/Hooks/useRecentLocations.ts +0 -44
- package/src/Hooks/useRecentResourcesPaths.ts +0 -54
- package/src/Hooks/useResource.spec.ts +0 -61
- package/src/Hooks/useResource.ts +0 -38
- package/src/Hooks/useResourcePath.spec.ts +0 -120
- package/src/Hooks/useResourcePath.ts +0 -76
- package/src/Icons/HistoryIcon.tsx +0 -17
- package/src/PreviewPanel/PreviewPanel.spec.tsx +0 -198
- package/src/PreviewPanel/PreviewPanel.stories.tsx +0 -76
- package/src/PreviewPanel/PreviewPanel.tsx +0 -6
- package/src/PreviewPanel/details/MatrixResource.tsx +0 -54
- package/src/PreviewPanel/details/matrix-resource.scss +0 -16
- package/src/ResourceBreadcrumb/ResourceBreadcrumb.spec.tsx +0 -133
- package/src/ResourceBreadcrumb/ResourceBreadcrumb.stories.tsx +0 -24
- package/src/ResourceBreadcrumb/ResourceBreadcrumb.tsx +0 -79
- package/src/ResourceBreadcrumb/resource-breadcrumb.scss +0 -28
- package/src/ResourceBreadcrumb/sample-hierarchy.json +0 -27
- package/src/ResourceList/ResourceList.spec.tsx +0 -202
- package/src/ResourceList/ResourceList.stories.tsx +0 -40
- package/src/ResourceList/ResourceList.tsx +0 -83
- package/src/ResourceList/sample-resources.json +0 -851
- package/src/ResourcePickerContainer/ResourcePickerContainer.spec.tsx +0 -780
- package/src/ResourcePickerContainer/ResourcePickerContainer.stories.tsx +0 -45
- package/src/ResourcePickerContainer/ResourcePickerContainer.tsx +0 -290
- package/src/SourceList/sample-sources.json +0 -251
- package/src/StatusIndicator/StatusIndicator.stories.tsx +0 -83
- package/src/StatusIndicator/StatusIndicator.tsx +0 -38
- package/src/__mocks__/JestHelpers.ts +0 -65
- package/src/__mocks__/StorybookHelpers.ts +0 -128
- package/src/__mocks__/jestHelpers.spec.ts +0 -38
- package/src/utils/findBestMatchLineage.spec.ts +0 -81
- package/src/utils/findBestMatchLineage.ts +0 -30
- 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,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 {};
|
package/lib/Hooks/useResource.js
DELETED
@@ -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;
|
package/lib/Icons/HistoryIcon.js
DELETED
@@ -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;
|