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

package/lib/SourceDropdown/SourceDropdown.js

@@ -1,19 +1,44 @@
-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);
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
+const react_aria_1 = require("react-aria");
+const ArrowDownIcon_1 = require("../Icons/ArrowDownIcon");
+function SourceDropdown({ sources, selectedSource, onSourceSelect, }) {
+    const [uniqueId] = (0, react_1.useState)((0, generic_browser_lib_1.uuid)());
+    const buttonRef = (0, react_1.useRef)(null);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     // Watch the focus and blur on the menu and close if focus leaves the control
-    const { focusWithinProps } = useFocusWithin({
+    const { focusWithinProps } = (0, react_aria_1.useFocusWithin)({
         onBlurWithin: () => {
             setIsOpen(false);
         },
     });
     // Listen for Esc key within this element
-    const { keyboardProps } = useKeyboard({
+    const { keyboardProps } = (0, react_aria_1.useKeyboard)({
         onKeyDown: (e) => {
             if (isOpen && e.key === 'Escape') {
                 setIsOpen(false);
@@ -27,20 +52,21 @@ export default function SourceDropdown({ sources, selectedSource, onSourceSelect
         onSourceSelect(source);
     };
     if (!sources.length) {
-        return React.createElement(React.Fragment, null);
+        return react_1.default.createElement(react_1.default.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) => {
+    return (react_1.default.createElement("div", { ...focusWithinProps, ...keyboardProps, className: "relative w-full " },
+        react_1.default.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_1.default.createElement("span", { className: "sr-only" }, "current source "),
+            react_1.default.createElement("div", { className: "truncate max-w-[200px] text-md font-semibold text-blue-400" }, selectedSource.name),
+            react_1.default.createElement(ArrowDownIcon_1.ArrowDownIcon, { "aria-hidden": true, className: "absolute right-2 fill-blue-300" })),
+        react_1.default.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" })))));
+            return (react_1.default.createElement("li", { key: id, className: "flex items-center text-sm font-semibold mb-2 bg-white rounded" },
+                react_1.default.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_1.default.createElement(generic_browser_lib_1.Icon, { icon: type, "aria-label": type, className: "shrink-0 mr-2.5" }),
+                    react_1.default.createElement("span", { className: "text-left mr-7" }, name),
+                    isSelectedSource && (react_1.default.createElement(generic_browser_lib_1.Icon, { icon: 'selected', "aria-label": "selected", className: "absolute right-4" })))));
         }))));
 }
+exports.default = SourceDropdown;

package/lib/SourceDropdownContainer/SourceDropdownContainer.js

@@ -1,12 +1,18 @@
-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")),
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const AdsClickIcon_1 = require("../Icons/AdsClickIcon");
+function SourceDropdownContainer({ children, isCollapsed, onExpand, }) {
+    return (react_1.default.createElement("div", { className: "inline-flex rounded-lg p-1 bg-blue-100 min-h-[44px]" },
+        isCollapsed && (react_1.default.createElement("button", { "aria-label": "Expand browse options", onClick: onExpand, className: "flex items-center" },
+            react_1.default.createElement(AdsClickIcon_1.AdsClickIcon, { "aria-hidden": true, className: "mx-2 fill-blue-300" }))),
+        !isCollapsed && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", { className: "flex items-center pr-1" },
+                react_1.default.createElement(AdsClickIcon_1.AdsClickIcon, { "aria-hidden": true, className: "mx-2 fill-blue-300" }),
+                react_1.default.createElement("span", { className: "sr-only" }, "Browse")),
             children))));
 }
+exports.default = SourceDropdownContainer;

package/lib/SourceList/SourceList.js

@@ -1,16 +1,21 @@
-import React from 'react';
-import { Icon } from '@squiz/generic-browser-lib';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const generic_browser_lib_1 = require("@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: () => {
+    return (react_1.default.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_1.default.createElement("div", { className: "text-md font-semibold" }, "Select an environment to use"),
+        react_1.default.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_1.default.createElement("li", { key: index, className: "flex items-stretch relative" },
+                react_1.default.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" }))));
+                    react_1.default.createElement(generic_browser_lib_1.Icon, { icon: source.type, className: "ml-4" }),
+                    react_1.default.createElement("span", { className: "line-clamp-2 text-left break-word ml-4" }, source.name || source.id),
+                    react_1.default.createElement(generic_browser_lib_1.Icon, { icon: 'arrow-right', className: "absolute ml-1 right-4" }))));
         }))));
 }
-export default SourceList;
+exports.default = SourceList;

package/lib/index.js

@@ -1,29 +1,68 @@
-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) => {
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResourceBrowser = exports.SourceDropdownContainer = exports.SourceDropdown = exports.BrowseToSource = exports.AuthContext = exports.AuthProvider = exports.useAuthContext = exports.ResourceBrowserContextProvider = exports.ResourceBrowserContext = void 0;
+const react_1 = __importStar(require("react"));
+const ResourceBrowserContext_1 = require("./ResourceBrowserContext/ResourceBrowserContext");
+Object.defineProperty(exports, "ResourceBrowserContext", { enumerable: true, get: function () { return ResourceBrowserContext_1.ResourceBrowserContext; } });
+Object.defineProperty(exports, "ResourceBrowserContextProvider", { enumerable: true, get: function () { return ResourceBrowserContext_1.ResourceBrowserContextProvider; } });
+const useSources_1 = require("./Hooks/useSources");
+const Plugin_1 = require("./Plugin/Plugin");
+const AuthProvider_1 = require("./ResourceBrowserContext/AuthProvider");
+Object.defineProperty(exports, "AuthProvider", { enumerable: true, get: function () { return AuthProvider_1.AuthProvider; } });
+Object.defineProperty(exports, "useAuthContext", { enumerable: true, get: function () { return AuthProvider_1.useAuthContext; } });
+Object.defineProperty(exports, "AuthContext", { enumerable: true, get: function () { return AuthProvider_1.AuthContext; } });
+const BrowseToSource_1 = __importDefault(require("./BrowseToSource/BrowseToSource"));
+exports.BrowseToSource = BrowseToSource_1.default;
+const SourceDropdown_1 = __importDefault(require("./SourceDropdown/SourceDropdown"));
+exports.SourceDropdown = SourceDropdown_1.default;
+const SourceDropdownContainer_1 = __importDefault(require("./SourceDropdownContainer/SourceDropdownContainer"));
+exports.SourceDropdownContainer = SourceDropdownContainer_1.default;
+__exportStar(require("./types"), exports);
+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);
+    const [error, setError] = (0, react_1.useState)(null);
+    const { onRequestSources, searchEnabled, plugins } = (0, react_1.useContext)(ResourceBrowserContext_1.ResourceBrowserContext);
+    const [isModalOpen, setIsModalOpen] = (0, react_1.useState)(false);
+    const [source, setSource] = (0, react_1.useState)(null);
+    const [mode, setMode] = (0, react_1.useState)(null);
+    const { data: sources, isLoading, error: sourcesError } = (0, useSources_1.useSources)({ onRequestSources, plugins });
+    const [plugin, setPlugin] = (0, react_1.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) => {
+    const handleSourceSelect = (0, react_1.useCallback)((source, mode) => {
         setSource(source);
         setMode(mode || null);
     }, [setSource, setMode]);
     // If an existing resource is passed in auto select its source
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         let source = null;
         setError(null);
         // If there is a provided value try to use its source
@@ -45,7 +84,7 @@ export const ResourceBrowser = (props) => {
     }, [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(() => {
+    (0, react_1.useEffect)(() => {
         if (source?.plugin) {
             setPlugin(source.plugin);
         }
@@ -54,19 +93,19 @@ export const ResourceBrowser = (props) => {
         }
     }, [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) => {
+    const handleModalStateChange = (0, react_1.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(() => {
+    (0, react_1.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 (react_1.default.createElement("div", { className: "squiz-rb-scope" },
+        react_1.default.createElement(Plugin_1.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,
@@ -74,6 +113,7 @@ export const ResourceBrowser = (props) => {
                 };
             }, 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 }));
+            return (react_1.default.createElement(Plugin_1.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 }));
         })));
 };
+exports.ResourceBrowser = ResourceBrowser;

package/lib/types.js

@@ -1,5 +1,8 @@
-export var PluginLaunchModeType;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PluginLaunchModeType = void 0;
+var PluginLaunchModeType;
 (function (PluginLaunchModeType) {
     PluginLaunchModeType["Browse"] = "browse";
     PluginLaunchModeType["Search"] = "search";
-})(PluginLaunchModeType || (PluginLaunchModeType = {}));
+})(PluginLaunchModeType = exports.PluginLaunchModeType || (exports.PluginLaunchModeType = {}));

package/lib/utils/authUtils.js

@@ -1,19 +1,25 @@
-export const getCookieValue = (name) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.refreshAccessToken = exports.logout = exports.setCookieValue = exports.getCookieValue = void 0;
+const getCookieValue = (name) => {
     const match = document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)');
     return match ? match.pop() : null;
 };
-export const setCookieValue = (name, value) => {
+exports.getCookieValue = getCookieValue;
+const setCookieValue = (name, value) => {
     document.cookie = `${name}=${value}; Path=/;`;
 };
-export const logout = () => {
-    setCookieValue('authToken', '');
-    setCookieValue('refreshToken', '');
+exports.setCookieValue = setCookieValue;
+const logout = () => {
+    (0, exports.setCookieValue)('authToken', '');
+    (0, exports.setCookieValue)('refreshToken', '');
 };
-export const refreshAccessToken = async (authConfig) => {
+exports.logout = logout;
+const refreshAccessToken = async (authConfig) => {
     if (!authConfig) {
         throw new Error('No auth configuration available');
     }
-    const refreshToken = getCookieValue('refreshToken');
+    const refreshToken = (0, exports.getCookieValue)('refreshToken');
     if (!refreshToken) {
         throw new Error('You are not logged in');
     }
@@ -22,10 +28,11 @@ export const refreshAccessToken = async (authConfig) => {
         credentials: 'include',
     });
     if (!response.ok) {
-        logout();
+        (0, exports.logout)();
         throw new Error('Failed to refresh token');
     }
     const data = await response.json();
-    setCookieValue('authToken', data.access_token);
+    (0, exports.setCookieValue)('authToken', data.access_token);
     return data.access_token;
 };
+exports.refreshAccessToken = refreshAccessToken;

package/package.json

@@ -1,27 +1,15 @@
 {
     "name": "@squiz/resource-browser",
-    "version": "3.0.1-pre-alpha.0",
+    "version": "3.0.1-pre-alpha.2",
+    "main": "lib/index.js",
     "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 -b ./tsconfig.json ./tsconfig.esm.json",
+        "compile:code": "tsc -b ./tsconfig.json",
         "compile:styles": "node build.js",
         "storybook": "storybook dev -p 6006",
         "storybook:build": "storybook build",
@@ -38,7 +26,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": "^1.0.0-pre-alpha.0",
+        "@squiz/resource-browser-ui-lib": "^1.0.0-pre-alpha.1",
         "clsx": "^2.1.0",
         "expiry-map": "^2.0.0",
         "p-memoize": "^4.0.4",

package/postcss.config.js

@@ -0,0 +1,21 @@
+module.exports = {
+    plugins: [
+        require('tailwindcss'),
+        require('autoprefixer'),
+        require('postcss-nested'),
+        require('postcss-prefix-selector')({
+            prefix: '.squiz-rb-scope',
+            transform(prefix, selector, prefixedSelector, filePath, rule) {
+                if (selector.match(/(squiz-gb-scope)/)) {
+                    return selector;
+                }
+                if (selector.match(/(::)/)) {
+                    const index = prefixedSelector.indexOf('::');
+                    return `${prefixedSelector.slice(0, index)}:not(.squiz-rb-plugin *)${prefixedSelector.slice(index)}`;
+                }
+                return `${prefixedSelector}:not(.squiz-rb-plugin *)`;
+            },
+            includeFiles: ['./src/index.scss'],
+        }),
+    ],
+};

package/tailwind.config.cjs

@@ -0,0 +1,99 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: {
+        relative: true,
+        files: [
+            '../../node_modules/@squiz/generic-browser-lib/src/**/*.{js,ts,jsx,tsx,scss}',
+            './index.html',
+            './src/**/*.{js,ts,jsx,tsx}',
+            './node_modules/flowbite/**/*.js',
+        ],
+    },
+    theme: {
+        extend: {
+            borderWidth: {
+                // We shouldn't use ".border" class and instead use ".border-1".
+                // ".border" has !important styling defined in Matrix so overrides anything various border styling if used.
+                1: '1px',
+            },
+            borderRadius: {
+                DEFAULT: '4px',
+                md: '6px',
+            },
+            fontFamily: {
+                base: 'Open Sans, Arial, sans-serif',
+            },
+            fontWeight: {
+                normal: '400',
+                medium: '500',
+                semibold: '600',
+                bold: '700',
+            },
+            fontSize: {
+                xlg: '1.125rem',
+                lg: '1rem',
+                md: '0.875rem',
+                sm: '0.8125rem',
+                base: '1rem',
+                'heading-1': ['1.625rem', '2rem'],
+                'heading-2': ['1.25rem', '1.5rem'],
+                'heading-3': ['1.125rem', '1.375rem'],
+                'heading-4': ['1rem', '1.25rem'],
+            },
+            fontFamily: {
+                base: 'Open Sans, Arial, sans-serif',
+            },
+            boxShadow: {
+                outline: '0 0 0 1px rgba(0,0,0,0.10)',
+                sm: '0 0 0 1px rgba(0,0,0,0.04), 0 1px 4px 2px rgba(0,0,0,0.08)',
+                DEFAULT: '0 0 0 1px rgba(0,0,0,0.04), 0 1px 12px 4px rgba(0,0,0,0.12)',
+                md: '0 0 0 1px rgba(0,0,0,0.04), 0 1px 12px 4px rgba(0,0,0,0.12)',
+                lg: '0 0 0 1px rgba(0,0,0,0.04), 0 1px 24px 12px rgba(0,0,0,0.12)',
+                inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+                none: 'none',
+            },
+            width: {
+                'modal-sm': '25rem',
+                'modal-md': '37.5rem',
+                'modal-lg': '50rem',
+                'modal-xl': '62.5rem',
+            },
+            spacing: {
+                1: '0.25rem', // 4px
+                2: '0.5rem', // 8px
+                3: '0.75rem', // 12px
+                4: '1rem', // 16px
+                4.5: '1.125rem', // 18px
+                5: '1.25rem', // 20px
+                6: '1.5rem', // 24px
+                7: '1.75rem', // 28px
+                8: '2rem', // 32px
+                169: '169px', // 169px
+            },
+            colors: {
+                gray: {
+                    50: '#F7F7F7',
+                    100: '#F5F5F5',
+                    200: '#ededed',
+                    300: '#e0e0e0',
+                    400: '#BABABA',
+                    500: '#949494',
+                    600: '#707070',
+                    700: '#4F4F4F',
+                    800: '#3D3D3D',
+                    900: '#2B2B2B',
+                },
+                blue: {
+                    100: '#e6f1fa',
+                    150: '#C7DFF5',
+                    200: '#8FC0EB',
+                    300: '#0774d2',
+                    400: '#044985',
+                },
+                red: {
+                    300: '#d72321',
+                },
+            },
+        },
+    },
+};

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+    "compilerOptions": {
+        "target": "ESNext",
+        "useDefineForClassFields": true,
+        "experimentalDecorators": true,
+        "lib": ["DOM", "DOM.Iterable", "ESNext"],
+        "allowJs": false,
+        "skipLibCheck": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "strict": true,
+        "forceConsistentCasingInFileNames": true,
+        "module": "CommonJS",
+        "moduleResolution": "node",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "jsx": "react",
+        "declaration": true,
+        "outDir": "./lib"
+    },
+    "files": ["./src/index.tsx"]
+}

package/tsconfig.storybook.json

@@ -0,0 +1,4 @@
+{
+    "extends": "./tsconfig.json",
+    "include": ["./src/**/*.stories.ts", "./src/**/*.stories.tsx"]
+}

package/tsconfig.test.json

@@ -0,0 +1,12 @@
+{
+    "extends": "./tsconfig.json",
+    "include": [
+        "./src/**/*.spec.ts",
+        "./src/**/*.spec.tsx",
+        "./src/**/*.test.ts",
+        "./src/**/*.test.tsx",
+        "./src/**/__mocks__/**/*.ts",
+        "./src/**/__mocks__/**/*.tsx",
+        "./jest.config.ts"
+    ]
+}

package/vite.config.js

@@ -0,0 +1,20 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+// Dependencies from within the monorepo need to be configured in a special way, relates to:
+// https://github.com/vitejs/vite/issues/5668
+export default defineConfig({
+    optimizeDeps: {
+        include: ['@squiz/resource-browser-ui-lib'],
+    },
+    plugins: [
+        react({
+            babel: {
+                parserOpts: {
+                    plugins: ['decorators-legacy'],
+                },
+            },
+        }),
+    ],
+});

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

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