@squiz/resource-browser 3.0.1-pre-alpha.1 → 3.0.1-rc.0

package/lib-esm/ResourcePicker/States/Selected.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import { ResetButton } from '@squiz/generic-browser-lib';
-import { ModalTrigger } from '@squiz/resource-browser-ui-lib';
-import { CircledLoopIcon } from '../../Icons/CircledLoopIcon';
-export const SelectedState = ({ resource, showThumbnail, icon, label, description, isDisabled, onClear, resourcePickerContainer, isModalOpen, onModalStateChange, }) => {
-    const modalController = {
-        isOpen: isModalOpen,
-        onOpenChange: onModalStateChange,
-    };
-    const replaceAsset = (React.createElement(ModalTrigger, { overlayTriggerState: isModalOpen && onModalStateChange ? modalController : undefined, showLabel: false, label: "Replace selection", containerClasses: "text-gray-500 hover:text-gray-800 focus:text-gray-800 disabled:text-gray-500 disabled:cursor-not-allowed", icon: React.createElement(CircledLoopIcon, { "aria-hidden": true, className: "m-1" }), isDisabled: isDisabled, scope: "squiz-rb-scope" }, resourcePickerContainer));
-    return (React.createElement(React.Fragment, null,
-        showThumbnail && resource.squizImage ? (React.createElement("div", { className: "checkered-bg w-[56px] h-[56px] overflow-hidden flex justify-center items-center rounded" },
-            React.createElement("img", { src: resource.squizImage.imageVariations.original.url || resource.url, className: "w-full h-full object-cover object-center", alt: resource.squizImage.name || resource.name }))) : (React.createElement("div", { className: "w-4 h-4 mt-1 flex self-start overflow-hidden" }, icon)),
-        React.createElement("div", { className: "justify-self-start self-center w-full overflow-hidden break-words" },
-            label,
-            description),
-        React.createElement("div", { className: "flex" },
-            replaceAsset,
-            React.createElement(ResetButton, { isDisabled: isDisabled, onClick: onClear }))));
-};

package/lib-esm/SourceDropdown/SourceDropdown.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import { ResourceBrowserSource, PluginLaunchMode } from '../types';
-export default function SourceDropdown({ sources, selectedSource, onSourceSelect, }: {
-    sources: ResourceBrowserSource[];
-    selectedSource: ResourceBrowserSource;
-    onSourceSelect(source: ResourceBrowserSource, mode?: PluginLaunchMode): void;
-}): React.JSX.Element;

package/lib-esm/SourceDropdown/SourceDropdown.js

@@ -1,46 +0,0 @@
-import React, { useRef, useState } from 'react';
-import { Icon, uuid } from '@squiz/generic-browser-lib';
-import { useFocusWithin, useKeyboard } from 'react-aria';
-import { ArrowDownIcon } from '../Icons/ArrowDownIcon';
-export default function SourceDropdown({ sources, selectedSource, onSourceSelect, }) {
-    const [uniqueId] = useState(uuid());
-    const buttonRef = useRef(null);
-    const [isOpen, setIsOpen] = useState(false);
-    // Watch the focus and blur on the menu and close if focus leaves the control
-    const { focusWithinProps } = useFocusWithin({
-        onBlurWithin: () => {
-            setIsOpen(false);
-        },
-    });
-    // Listen for Esc key within this element
-    const { keyboardProps } = useKeyboard({
-        onKeyDown: (e) => {
-            if (isOpen && e.key === 'Escape') {
-                setIsOpen(false);
-                buttonRef.current?.focus(); // Restore focus to the element which opened the menu
-            }
-        },
-    });
-    const handleSourceClick = (source) => {
-        setIsOpen(false);
-        buttonRef.current?.focus();
-        onSourceSelect(source);
-    };
-    if (!sources.length) {
-        return React.createElement(React.Fragment, null);
-    }
-    return (React.createElement("div", { ...focusWithinProps, ...keyboardProps, className: "relative w-full " },
-        React.createElement("button", { ref: buttonRef, type: "button", "aria-label": "Source quick select", "aria-expanded": isOpen, "aria-controls": `${uniqueId}-button-menu`, onClick: () => setIsOpen(!isOpen), className: "relative flex items-center p-2 w-full rounded bg-blue-100 hover:bg-blue-150" },
-            React.createElement("span", { className: "sr-only" }, "current source "),
-            React.createElement("div", { className: "truncate max-w-[200px] text-md font-semibold text-blue-400" }, selectedSource.name),
-            React.createElement(ArrowDownIcon, { "aria-hidden": true, className: "absolute right-2 fill-blue-300" })),
-        React.createElement("ul", { id: `${uniqueId}-button-menu`, "aria-hidden": !isOpen, className: `absolute z-50 top-[calc(100%+8px)] w-[100%] bg-gray-100 border-1 shadow-md rounded border-gray-300 p-2 pb-0 overflow-y-scroll max-h-80 ${!isOpen ? 'hidden' : ''}` }, sources.map((source) => {
-            const { id, name, type } = source;
-            const isSelectedSource = id === selectedSource.id;
-            return (React.createElement("li", { key: id, className: "flex items-center text-sm font-semibold mb-2 bg-white rounded" },
-                React.createElement("button", { type: "button", onClick: () => handleSourceClick(source), className: `relative grow flex items-center p-2 border-1 border-white rounded hover:bg-gray-50 hover:border-gray-300 focus:bg-gray-100` },
-                    React.createElement(Icon, { icon: type, "aria-label": type, className: "shrink-0 mr-2.5" }),
-                    React.createElement("span", { className: "text-left mr-7" }, name),
-                    isSelectedSource && (React.createElement(Icon, { icon: 'selected', "aria-label": "selected", className: "absolute right-4" })))));
-        }))));
-}

package/lib-esm/SourceDropdownContainer/SourceDropdownContainer.d.ts

@@ -1,5 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-export default function SourceDropdownContainer({ children, isCollapsed, onExpand, }: PropsWithChildren<{
-    isCollapsed: boolean;
-    onExpand: () => void;
-}>): React.JSX.Element;

package/lib-esm/SourceDropdownContainer/SourceDropdownContainer.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import { AdsClickIcon } from '../Icons/AdsClickIcon';
-export default function SourceDropdownContainer({ children, isCollapsed, onExpand, }) {
-    return (React.createElement("div", { className: "inline-flex rounded-lg p-1 bg-blue-100 min-h-[44px]" },
-        isCollapsed && (React.createElement("button", { "aria-label": "Expand browse options", onClick: onExpand, className: "flex items-center" },
-            React.createElement(AdsClickIcon, { "aria-hidden": true, className: "mx-2 fill-blue-300" }))),
-        !isCollapsed && (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: "flex items-center pr-1" },
-                React.createElement(AdsClickIcon, { "aria-hidden": true, className: "mx-2 fill-blue-300" }),
-                React.createElement("span", { className: "sr-only" }, "Browse")),
-            children))));
-}

package/lib-esm/SourceList/SourceList.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { ResourceBrowserSource } from '../types';
-interface SourceListProps {
-    sources: ResourceBrowserSource[];
-    onSourceSelect(source: ResourceBrowserSource): void;
-}
-declare function SourceList({ sources, onSourceSelect }: SourceListProps): React.JSX.Element;
-export default SourceList;

package/lib-esm/SourceList/SourceList.js

@@ -1,16 +0,0 @@
-import React from 'react';
-import { Icon } from '@squiz/generic-browser-lib';
-function SourceList({ sources, onSourceSelect }) {
-    return (React.createElement("div", { className: "overflow-y-scroll w-screen max-w-[400px] flex-1 grow-[3] border-r border-gray-300 bg-gray-100 pl-4.5 pr-4.5 pb-4.5 pt-3" },
-        React.createElement("div", { className: "text-md font-semibold" }, "Select an environment to use"),
-        React.createElement("ul", { tabIndex: -1, "aria-label": `environment list`, className: "flex flex-col bg-gray-100 min-h-full focus-visible:outline-0" }, sources.map((source, index) => {
-            return (React.createElement("li", { key: index, className: "flex items-stretch relative" },
-                React.createElement("button", { onClick: () => {
-                        onSourceSelect(source);
-                    }, className: "w-full p-1 mt-3 bg-white border-1 border-grey-200 min-h-[64px] rounded-lg flex items-center text-md font-semibold" },
-                    React.createElement(Icon, { icon: source.type, className: "ml-4" }),
-                    React.createElement("span", { className: "line-clamp-2 text-left break-word ml-4" }, source.name || source.id),
-                    React.createElement(Icon, { icon: 'arrow-right', className: "absolute ml-1 right-4" }))));
-        }))));
-}
-export default SourceList;

package/lib-esm/index.d.ts

@@ -1,18 +0,0 @@
-import React from 'react';
-import { ResourceBrowserContext, ResourceBrowserContextProvider } from './ResourceBrowserContext/ResourceBrowserContext';
-import { ResourceBrowserUnresolvedResource, ResourceBrowserResource } from './types';
-import { AuthProvider, useAuthContext, AuthContext } from './ResourceBrowserContext/AuthProvider';
-import BrowseToSource from './BrowseToSource/BrowseToSource';
-import SourceDropdown from './SourceDropdown/SourceDropdown';
-import SourceDropdownContainer from './SourceDropdownContainer/SourceDropdownContainer';
-export { ResourceBrowserContext, ResourceBrowserContextProvider, useAuthContext, AuthProvider, AuthContext, BrowseToSource, SourceDropdown, SourceDropdownContainer, };
-export * from './types';
-export type ResourceBrowserProps = {
-    modalTitle: string;
-    allowedTypes?: string[];
-    isDisabled?: boolean;
-    value: ResourceBrowserUnresolvedResource | null;
-    onChange(resource: ResourceBrowserResource | null): void;
-    onClear?(): void;
-};
-export declare const ResourceBrowser: (props: ResourceBrowserProps) => React.JSX.Element;

package/lib-esm/index.js

@@ -1,79 +0,0 @@
-import React, { useState, useContext, useEffect, useCallback } from 'react';
-import { ResourceBrowserContext, ResourceBrowserContextProvider } from './ResourceBrowserContext/ResourceBrowserContext';
-import { useSources } from './Hooks/useSources';
-import { PluginRender } from './Plugin/Plugin';
-import { AuthProvider, useAuthContext, AuthContext } from './ResourceBrowserContext/AuthProvider';
-import BrowseToSource from './BrowseToSource/BrowseToSource';
-import SourceDropdown from './SourceDropdown/SourceDropdown';
-import SourceDropdownContainer from './SourceDropdownContainer/SourceDropdownContainer';
-export { ResourceBrowserContext, ResourceBrowserContextProvider, useAuthContext, AuthProvider, AuthContext, BrowseToSource, SourceDropdown, SourceDropdownContainer, };
-export * from './types';
-export const ResourceBrowser = (props) => {
-    const { value } = props;
-    const [error, setError] = useState(null);
-    const { onRequestSources, searchEnabled, plugins } = useContext(ResourceBrowserContext);
-    const [isModalOpen, setIsModalOpen] = useState(false);
-    const [source, setSource] = useState(null);
-    const [mode, setMode] = useState(null);
-    const { data: sources, isLoading, error: sourcesError } = useSources({ onRequestSources, plugins });
-    const [plugin, setPlugin] = useState(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, mode) => {
-        setSource(source);
-        setMode(mode || null);
-    }, [setSource, setMode]);
-    // If an existing resource is passed in auto select its source
-    useEffect(() => {
-        let source = 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 && !searchEnabled) {
-            // If only one source is passed and search is not enabled select it automatically
-            source = sources[0];
-        }
-        setSource(source);
-        setMode(null); // Passed in resource will always use the default mode
-    }, [value, isLoading, sources, setSource, setError]);
-    // When a source is selected update our plugin reference to match (legacy support)
-    // the plugin is now attached to the source directly when fetched from the context so use that instead when possible
-    useEffect(() => {
-        if (source?.plugin) {
-            setPlugin(source.plugin);
-        }
-        else {
-            setPlugin(null);
-        }
-    }, [plugins, source]);
-    // The modal has some control over it own open/closed state (for WCAG reasons) so keep this in sync with our state
-    const handleModalStateChange = useCallback((isOpen) => {
-        setIsModalOpen(isOpen);
-    }, [setIsModalOpen]);
-    // If the modal closes and we dont have a value clear the source state so it goes back to the launcher on re-open
-    useEffect(() => {
-        if (!isModalOpen && !value && (sources?.length > 1 || searchEnabled)) {
-            setSource(null);
-            setMode(null);
-        }
-    }, [sources, isModalOpen]);
-    // Render a default "plugin" and one for each item in the plugins array. They are conditionally rendered based on what is selected
-    return (React.createElement("div", { className: "squiz-rb-scope" },
-        React.createElement(PluginRender, { key: "default", render: plugin === null, ...props, source: source, sources: sources, setSource: handleSourceSelect, isLoading: isLoading, error: sourcesError || error, plugin: plugin, pluginMode: mode, searchEnabled: searchEnabled, useResource: () => {
-                return {
-                    data: null,
-                    error: null,
-                    isLoading: false,
-                };
-            }, isModalOpen: isModalOpen, onModalStateChange: handleModalStateChange }),
-        plugins.map((thisPlugin) => {
-            return (React.createElement(PluginRender, { key: thisPlugin.type, render: thisPlugin === plugin, ...props, source: source, sources: sources, setSource: handleSourceSelect, isLoading: isLoading, error: error, plugin: plugin, pluginMode: mode, searchEnabled: searchEnabled, useResource: thisPlugin.useResolveResource, isModalOpen: isModalOpen, onModalStateChange: handleModalStateChange }));
-        })));
-};

package/lib-esm/types.d.ts

@@ -1,97 +0,0 @@
-import React, { ReactElement } from 'react';
-import { SquizImageType } from '@squiz/dx-json-schema-lib';
-export type OnRequestSources = () => Promise<ResourceBrowserSource[]>;
-export type ResourceBrowserPluginType = 'dam' | 'matrix';
-export type AuthenticationConfiguration = {
-    authUrl: string;
-    redirectUrl: string;
-    clientId: string;
-    scope: string;
-};
-export interface ResourceBrowserSource {
-    name?: string;
-    id: string;
-    type: ResourceBrowserPluginType;
-}
-export interface ResourceBrowserSourceWithPlugin extends ResourceBrowserSource {
-    plugin: ResourceBrowserPlugin;
-}
-export interface ResourceBrowserSourceWithConfig extends ResourceBrowserSource {
-    configuration?: AuthenticationConfiguration;
-}
-export declare enum PluginLaunchModeType {
-    'Browse' = "browse",
-    'Search' = "search"
-}
-export type PluginLaunchMode = {
-    type: PluginLaunchModeType;
-    args?: ResourceBrowserSearchUIArgs | ResourceBrowserUIArgs;
-};
-export type ResourceBrowserUnresolvedResource = {
-    sourceId: string;
-    resourceId: string;
-};
-export type ResourceBrowserResource = {
-    id: string;
-    name: string;
-    url: string;
-    source: ResourceBrowserSource;
-    type: {
-        code: string;
-        name: string;
-    };
-    squizImage?: SquizImageType['__shape__'];
-};
-export type ResourceBrowserSelectedState = {
-    showThumbnail?: boolean;
-    icon?: ReactElement;
-    label: string;
-    description: Array<ReactElement>;
-};
-type ResourceBrowserProps = {
-    source: ResourceBrowserSource;
-    onSourceSelect(source: ResourceBrowserSource, mode?: PluginLaunchMode): void;
-    sources: ResourceBrowserSourceWithPlugin[];
-    allowedTypes?: string[];
-    headerPortal?: Element;
-    onSelected: (resource: ResourceBrowserResource) => void;
-    searchEnabled: boolean;
-};
-export type ResourceBrowserUIArgs = {
-    preselectedResource?: ResourceBrowserResource;
-    browseTo?: ResourceBrowserUnresolvedResource;
-};
-export type ResourceBrowserUIProps = ResourceBrowserProps & ResourceBrowserUIArgs;
-export type ResourceBrowserSearchUIArgs = {
-    query?: string;
-};
-export type ResourceBrowserSearchUIProps = ResourceBrowserProps & ResourceBrowserSearchUIArgs;
-export type ResourceBrowserLauncherProps = {
-    source: ResourceBrowserSource;
-    onSearch: (query: string) => void;
-    onBrowse: (browseTo?: ResourceBrowserUnresolvedResource) => void;
-};
-export type useResolveResourceResponse = {
-    data: ResourceBrowserResource | null;
-    error: Error | null;
-    isLoading: boolean;
-};
-/**
- * If you change this interface please update the example here: src/__mocks__/PluginExample.tsx
- */
-export interface ResourceBrowserPlugin {
-    /** Datasource type this plugin should be used for */
-    type: ResourceBrowserPluginType;
-    createHeaderPortal?: boolean;
-    /** React Functional Component to provde the UI to render to allow a user to browse for resource to use */
-    sourceBrowserComponent: () => React.FunctionComponent<ResourceBrowserUIProps>;
-    /** React Functional Component to provde the UI to render to allow a user to search for resource to use */
-    sourceSearchComponent: () => React.FunctionComponent<ResourceBrowserSearchUIProps>;
-    /** React Functional Component to provde the sources launcher view */
-    renderResourceLauncher: () => React.FunctionComponent<ResourceBrowserLauncherProps>;
-    /** Function to provde the the summary information to show what resource is currently selected */
-    renderSelectedResource: (resource: ResourceBrowserResource) => Promise<ResourceBrowserSelectedState>;
-    /** Function to resolve a resource and source id into a fully resolved output reference */
-    useResolveResource: (resourceId: string | null, source: ResourceBrowserSource | null) => useResolveResourceResponse;
-}
-export {};

package/lib-esm/types.js

@@ -1,5 +0,0 @@
-export var PluginLaunchModeType;
-(function (PluginLaunchModeType) {
-    PluginLaunchModeType["Browse"] = "browse";
-    PluginLaunchModeType["Search"] = "search";
-})(PluginLaunchModeType || (PluginLaunchModeType = {}));

package/lib-esm/utils/authUtils.d.ts

@@ -1,5 +0,0 @@
-import { AuthenticationConfiguration } from '../types';
-export declare const getCookieValue: (name: string) => string | null;
-export declare const setCookieValue: (name: string, value: string) => void;
-export declare const logout: () => void;
-export declare const refreshAccessToken: (authConfig?: AuthenticationConfiguration) => Promise<string>;

package/lib-esm/utils/authUtils.js

@@ -1,31 +0,0 @@
-export const getCookieValue = (name) => {
-    const match = document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)');
-    return match ? match.pop() : null;
-};
-export const setCookieValue = (name, value) => {
-    document.cookie = `${name}=${value}; Path=/;`;
-};
-export const logout = () => {
-    setCookieValue('authToken', '');
-    setCookieValue('refreshToken', '');
-};
-export const refreshAccessToken = async (authConfig) => {
-    if (!authConfig) {
-        throw new Error('No auth configuration available');
-    }
-    const refreshToken = getCookieValue('refreshToken');
-    if (!refreshToken) {
-        throw new Error('You are not logged in');
-    }
-    const response = await fetch(`${authConfig.redirectUrl}?grant_type=refresh_token&refresh_token=${refreshToken}`, {
-        method: 'GET',
-        credentials: 'include',
-    });
-    if (!response.ok) {
-        logout();
-        throw new Error('Failed to refresh token');
-    }
-    const data = await response.json();
-    setCookieValue('authToken', data.access_token);
-    return data.access_token;
-};