@squiz/resource-browser 2.4.12 → 3.0.0-pre-alpha.0

package/package.json

@@ -1,17 +1,30 @@
 {
     "name": "@squiz/resource-browser",
-    "version": "2.4.12",
-    "main": "lib/index.js",
+    "version": "3.0.0-pre-alpha.0",
     "types": "lib/index.d.ts",
+    "files": [
+        "lib/*",
+        "lib-esm/*",
+        "src/*"
+    ],
+    "exports": {
+        ".": {
+            "import": "./lib-esm/index.js",
+            "require": "./lib/index.js"
+        },
+        "./src/": "./src/",
+        "./lib/": "./lib/"
+    },
     "private": false,
     "publishConfig": {
         "access": "public"
     },
     "scripts": {
         "compile": "npm run compile:styles && npm run compile:code",
-        "compile:code": "tsc",
+        "compile:code": "tsc -b ./tsconfig.json ./tsconfig.esm.json",
         "compile:styles": "node build.js",
         "storybook": "storybook dev -p 6006",
+        "storybook:build": "storybook build",
         "test": "npm run test:unit && npm run test:eslint",
         "test:unit": "jest",
         "test:eslint": "eslint .",
@@ -25,7 +38,7 @@
         "@react-types/shared": "^3.23.1",
         "@squiz/dx-json-schema-lib": "^1.67.0",
         "@squiz/generic-browser-lib": "1.67.2",
-        "@squiz/resource-browser-ui-lib": "^0.10.12",
+        "@squiz/resource-browser-ui-lib": "^1.0.0-pre-alpha.0",
         "clsx": "^2.1.0",
         "expiry-map": "^2.0.0",
         "p-memoize": "^4.0.4",
@@ -84,6 +97,5 @@
     },
     "volta": {
         "node": "18.18.0"
-    },
-    "gitHead": "430b0077849af23f3264897687f2e57eb72656fc"
+    }
 }

package/src/BrowseToSource/BrowseToSource.spec.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import { screen, render, waitFor, act, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import BrowseToSource from './BrowseToSource';
+import { mockSource } from '../__mocks__/MockModels';
+import { ResourceBrowserSource } from '../types';
+
+describe('BrowseToSource', () => {
+    it('Render empty fragment if no sources are provided', async () => {
+        const sources: Array<ResourceBrowserSource> = [];
+
+        const { baseElement } = render(<BrowseToSource sources={sources} selectedSource={mockSource()} onSourceSelect={() => {}} />);
+
+        await waitFor(() => {
+            const button = baseElement.querySelector(`button[aria-label="Source quick select"]`) as HTMLButtonElement;
+            expect(button).toBeFalsy();
+        });
+    });
+
+    it('Accepts a root className', async () => {
+        const sources: Array<ResourceBrowserSource> = [mockSource({ name: 'Source 1' })];
+
+        const { container } = render(
+            <BrowseToSource sources={sources} selectedSource={mockSource()} onSourceSelect={() => {}} className="test" />,
+        );
+
+        const className = container.querySelector('.test') as HTMLElement;
+        expect(className).toBeTruthy();
+    });
+
+    it('Sources are rendered when dropdown clicked', async () => {
+        const sources = [mockSource({ name: 'Source 1' }), mockSource({ id: '2', name: 'Source 2' })];
+
+        render(<BrowseToSource sources={sources} selectedSource={sources[0]} onSourceSelect={() => {}} />);
+
+        expect(screen.getByRole('button', { name: 'Source quick select' })).toHaveTextContent('Browse');
+
+        const user = userEvent.setup();
+
+        await act(() => user.click(screen.getByRole('button', { name: 'Source quick select' })));
+
+        await waitFor(() => {
+            expect(screen.getByRole('button', { name: 'Source quick select' })).toHaveTextContent('Browse to ...');
+            expect(screen.getByRole('button', { name: 'dam Source 1 selected' })).toBeTruthy();
+            expect(screen.getByRole('button', { name: 'dam Source 2' })).toBeTruthy();
+        });
+    });
+
+    it('Source menu closes on focus loss', async () => {
+        const sources = [mockSource({ name: 'Source 1' }), mockSource({ id: '2', name: 'Source 2' })];
+
+        render(<BrowseToSource sources={sources} selectedSource={sources[0]} onSourceSelect={() => {}} />);
+
+        const user = userEvent.setup();
+        const buttonDropdown = screen.getByRole('button', { name: 'Source quick select' });
+
+        await act(() => user.click(buttonDropdown));
+
+        await waitFor(() => {
+            expect(screen.queryByRole('button', { name: 'dam Source 1 selected' })).toBeTruthy();
+            expect(screen.queryByRole('button', { name: 'dam Source 2' })).toBeTruthy();
+        });
+
+        await act(() => fireEvent.blur(buttonDropdown));
+
+        await waitFor(() => {
+            expect(screen.queryByRole('button', { name: 'dam Source 1 selected' })).toBeFalsy();
+            expect(screen.queryByRole('button', { name: 'dam Source 2' })).toBeFalsy();
+        });
+    });
+
+    it('Source menu closes on {esc}', async () => {
+        const sources = [mockSource({ name: 'Source 1' }), mockSource({ id: '2', name: 'Source 2' })];
+
+        render(<BrowseToSource sources={sources} selectedSource={sources[0]} onSourceSelect={() => {}} />);
+
+        const user = userEvent.setup();
+        const buttonDropdown = screen.getByRole('button', { name: 'Source quick select' });
+
+        await act(() => user.click(buttonDropdown));
+
+        await waitFor(() => {
+            expect(screen.queryByRole('button', { name: 'dam Source 1 selected' })).toBeTruthy();
+            expect(screen.queryByRole('button', { name: 'dam Source 2' })).toBeTruthy();
+        });
+
+        await act(() => userEvent.keyboard('{escape}'));
+
+        await waitFor(() => {
+            expect(screen.queryByRole('button', { name: 'dam Source 1 selected' })).toBeFalsy();
+            expect(screen.queryByRole('button', { name: 'dam Source 2' })).toBeFalsy();
+        });
+    });
+
+    it('Selecting node calls onSourceSelect ', async () => {
+        const onSourceSelect = jest.fn();
+
+        const sources = [mockSource({ name: 'Source 1' }), mockSource({ id: '2', name: 'Source 2' })];
+
+        render(<BrowseToSource sources={sources} selectedSource={sources[0]} onSourceSelect={onSourceSelect} />);
+
+        const user = userEvent.setup();
+
+        await act(() => user.click(screen.getByRole('button', { name: 'Source quick select' })));
+        await act(() => user.click(screen.getByRole('button', { name: 'dam Source 2' })));
+
+        await waitFor(() => {
+            expect(onSourceSelect).toHaveBeenCalledWith(sources[1]);
+        });
+    });
+});

package/src/BrowseToSource/BrowseToSource.stories.tsx

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import BrowseToSource from './BrowseToSource';
+import sampleSources from '../__mocks__/sample-sources.json';
+import { ResourceBrowserSource } from '../types';
+
+export default {
+    title: 'Browse to source',
+    component: BrowseToSource,
+} as Meta<typeof BrowseToSource>;
+
+const Template: StoryFn<typeof BrowseToSource> = (props) => {
+    const sources = sampleSources as ResourceBrowserSource[];
+
+    const [selectedSource, setSelectedSource] = useState<ResourceBrowserSource>(sources[0]);
+
+    return (
+        <div className="m-3">
+            <BrowseToSource
+                selectedSource={selectedSource}
+                sources={sources}
+                onSourceSelect={(source) => setSelectedSource(source)}
+            ></BrowseToSource>
+        </div>
+    );
+};
+
+export const Primary = Template.bind({});
+Primary.args = {};

package/src/BrowseToSource/BrowseToSource.tsx

@@ -0,0 +1,111 @@
+import React, { useRef, useState } from 'react';
+
+import { ResourceBrowserSource, PluginLaunchMode } from '../types';
+import { Icon, IconOptions, uuid } from '@squiz/generic-browser-lib';
+import { useFocusWithin, useKeyboard } from 'react-aria';
+import { AdsClickIcon } from '../Icons/AdsClickIcon';
+import { ArrowDownIcon } from '../Icons/ArrowDownIcon';
+
+export default function BrowseToSource({
+    sources,
+    selectedSource,
+    onSourceSelect,
+    className = '',
+}: {
+    sources: ResourceBrowserSource[];
+    selectedSource: ResourceBrowserSource;
+    onSourceSelect(source: ResourceBrowserSource, mode?: PluginLaunchMode): void;
+    className?: string;
+}): React.JSX.Element {
+    const [uniqueId] = useState(uuid());
+    const buttonRef = useRef<HTMLButtonElement>(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: ResourceBrowserSource) => {
+        setIsOpen(false);
+        buttonRef.current?.focus();
+        onSourceSelect(source);
+    };
+
+    if (!sources.length) {
+        return <></>;
+    }
+
+    return (
+        <div
+            className={`inline-block ${isOpen ? 'flex items-center border-2 border-gray-200 rounded-lg px-1 py-0.5 w-[350px]' : 'p-0'} ${className}`}
+        >
+            {isOpen && <AdsClickIcon aria-hidden className="ml-1 mr-2 shrink-0" />}
+            {sources.length > 1 && (
+                <div {...focusWithinProps} {...keyboardProps} className={`relative w-full ${isOpen && 'border-l border-gray-400 pl-1 '}`}>
+                    <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-lg ${!isOpen && 'border-2 border-gray-200 hover:bg-gray-100'}`}
+                    >
+                        {isOpen ? (
+                            <>
+                                <span className="text-gray-700 text-md leading-5 mr-2">Browse to ...</span>
+                                <ArrowDownIcon aria-hidden className="absolute right-3" />
+                            </>
+                        ) : (
+                            <>
+                                <AdsClickIcon aria-hidden className="ml-[6px] mr-2" />
+                                <span className="text-gray-700 text-md font-semibold leading-5 mr-[6px]">Browse</span>
+                            </>
+                        )}
+                    </button>
+                    <ul
+                        id={`${uniqueId}-button-menu`}
+                        aria-hidden={!isOpen}
+                        className={`absolute z-50 top-[calc(100%+8px)] left-1 w-[calc(100%-2px)] bg-gray-100 border-1 shadow-md rounded border-gray-300 p-2 pb-0 overflow-y-auto max-h-80 ${
+                            !isOpen ? 'hidden' : ''
+                        }`}
+                    >
+                        {sources.map((source) => {
+                            const { id, name, type } = source;
+                            const isSelectedSource = id === selectedSource.id;
+
+                            return (
+                                <li key={id} className="flex items-center text-sm font-semibold mb-2 bg-white rounded">
+                                    <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`}
+                                    >
+                                        <Icon icon={type as IconOptions} aria-label={type} className="shrink-0 mr-2.5" />
+                                        <span className="text-left mr-7">{name}</span>
+                                        {isSelectedSource && (
+                                            <Icon icon={'selected' as IconOptions} aria-label="selected" className="absolute right-4" />
+                                        )}
+                                    </button>
+                                </li>
+                            );
+                        })}
+                    </ul>
+                </div>
+            )}
+        </div>
+    );
+}

package/src/Hooks/useSources.spec.ts

@@ -3,7 +3,7 @@ import { mockSource, mockPlugin } from '../__mocks__/MockModels';
 import { useSources, UseSourcesProps } from './useSources';
 
 describe('useSources', () => {
-    it('Should trigger and load the sources', async () => {
+    it('Should trigger, load the sources and attach plugin reference to source', async () => {
         const sources = [mockSource()];
         const plugins = [mockPlugin()];
         const onRequestSources = jest.fn().mockResolvedValue(sources);
@@ -16,7 +16,11 @@ describe('useSources', () => {
         await waitFor(() => expect(result.current.isLoading).toBe(false));
 
         expect(result.current.isLoading).toBe(false);
-        expect(result.current.data).toEqual(sources);
+        expect(result.current.data).toEqual(
+            sources.map((source) => {
+                return { ...source, plugin: plugins[0] };
+            }),
+        );
     });
 
     it('Should filters sources that plugins dont exist for', async () => {
@@ -32,7 +36,7 @@ describe('useSources', () => {
         await waitFor(() => expect(result.current.isLoading).toBe(false));
 
         expect(result.current.isLoading).toBe(false);
-        expect(result.current.data).toEqual([sources[0]]);
+        expect(result.current.data).toEqual([{ ...sources[0], plugin: plugins[0] }]);
         expect(result.current.data.length).toEqual(1);
     });
 
@@ -50,7 +54,7 @@ describe('useSources', () => {
 
         await waitFor(() => expect(result.current.isLoading).toBe(false));
         expect(result.current.isLoading).toBe(false);
-        expect(result.current.data).toEqual(sources);
+        expect(result.current.data).toEqual([{ ...sources[0], plugin: plugins[0] }]);
 
         // Wont go back to loading data (plugin keys havent changed)
         rerender({ onRequestSources, plugins: [mockPlugin()] });

package/src/Hooks/useSources.ts

@@ -1,4 +1,4 @@
-import { ResourceBrowserSource, ResourceBrowserPlugin } from '../types';
+import { ResourceBrowserSource, ResourceBrowserPlugin, ResourceBrowserSourceWithPlugin } from '../types';
 import { useAsync } from '@squiz/generic-browser-lib';
 
 export type UseSourcesProps = {
@@ -14,28 +14,43 @@ export const useSources = ({ onRequestSources, plugins }: UseSourcesProps) => {
     return useAsync(
         {
             callback: () => {
-                return new Promise<ResourceBrowserSource[]>((resolve, reject) => {
+                return new Promise<ResourceBrowserSourceWithPlugin[]>((resolve, reject) => {
                     // Get all the sources from the outer context
                     onRequestSources()
                         .then((sources: ResourceBrowserSource[]) => {
                             // Remove any sources which we don't have a plugin to handle
-                            resolve(
-                                sources.filter((source) => {
-                                    return !!plugins.find((plugin) => {
-                                        if (plugin.type === source.type) {
-                                            return true;
-                                        }
-                                        return false;
-                                    });
-                                }),
-                            );
+                            const filteredSources = sources.filter((source) => {
+                                return !!plugins.find((plugin) => {
+                                    if (plugin.type === source.type) {
+                                        return true;
+                                    }
+                                    return false;
+                                });
+                            });
+
+                            // Attach the plugin to the source so it can be quickly used later
+                            const combinedSources = filteredSources.map((source) => {
+                                const plugin = plugins.find((plugin) => {
+                                    if (plugin.type === source.type) {
+                                        return true;
+                                    }
+                                    return false;
+                                });
+
+                                return {
+                                    ...source,
+                                    plugin,
+                                } as ResourceBrowserSourceWithPlugin;
+                            });
+
+                            resolve(combinedSources);
                         })
                         .catch((e: unknown) => {
                             reject(e);
                         });
                 });
             },
-            defaultValue: [] as ResourceBrowserSource[],
+            defaultValue: [] as ResourceBrowserSourceWithPlugin[],
         },
         [onRequestSources, pluginsKey],
     );

package/src/Icons/AdsClickIcon.tsx

@@ -0,0 +1,11 @@
+import React, { SVGAttributes } from 'react';
+
+type AdsClickIconProps = SVGAttributes<SVGElement>;
+
+export const AdsClickIcon = (props: AdsClickIconProps) => {
+    return (
+        <svg fill="#4f4f4f" height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <path d="M11.56 17.845C8.38001 17.695 5.85001 15.075 5.85001 11.855C5.85001 8.54501 8.54001 5.85501 11.85 5.85501C15.07 5.85501 17.69 8.38501 17.84 11.565L15.74 10.935C15.33 9.16501 13.74 7.85501 11.85 7.85501C9.64001 7.85501 7.85001 9.64501 7.85001 11.855C7.85001 13.745 9.16001 15.335 10.93 15.745L11.56 17.845ZM21.85 11.855C21.85 12.155 21.84 12.455 21.81 12.755L19.84 12.165C19.85 12.065 19.85 11.955 19.85 11.855C19.85 7.43501 16.27 3.85501 11.85 3.85501C7.43001 3.85501 3.85001 7.43501 3.85001 11.855C3.85001 16.275 7.43001 19.855 11.85 19.855C11.95 19.855 12.06 19.855 12.16 19.845L12.75 21.815C12.45 21.845 12.15 21.855 11.85 21.855C6.33001 21.855 1.85001 17.375 1.85001 11.855C1.85001 6.33501 6.33001 1.85501 11.85 1.85501C17.37 1.85501 21.85 6.33501 21.85 11.855ZM18.08 16.115L20.35 15.355C20.81 15.205 20.8 14.545 20.34 14.405L12.74 12.125C12.36 12.015 12 12.365 12.12 12.745L14.4 20.345C14.54 20.815 15.2 20.825 15.35 20.355L16.11 18.085L20.02 21.995C20.22 22.195 20.53 22.195 20.73 21.995L22 20.725C22.2 20.525 22.2 20.215 22 20.015L18.08 16.115Z" />
+        </svg>
+    );
+};

package/src/Icons/ArrowDownIcon.tsx

@@ -0,0 +1,11 @@
+import React, { SVGAttributes } from 'react';
+
+type ArrowDownIconProps = SVGAttributes<SVGElement>;
+
+export const ArrowDownIcon = (props: ArrowDownIconProps) => {
+    return (
+        <svg fill="#4f4f4f" height="25" width="24" viewBox="0 0 24 25" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <path d="M8.12459 9.49953L12.0046 13.3795L15.8846 9.49953C16.2746 9.10953 16.9046 9.10953 17.2946 9.49953C17.6846 9.88953 17.6846 10.5195 17.2946 10.9095L12.7046 15.4995C12.3146 15.8895 11.6846 15.8895 11.2946 15.4995L6.70459 10.9095C6.51734 10.7227 6.41211 10.469 6.41211 10.2045C6.41211 9.94001 6.51734 9.68636 6.70459 9.49953C7.09459 9.11953 7.73459 9.10953 8.12459 9.49953Z" />
+        </svg>
+    );
+};