@squiz/resource-browser 2.2.0-rc.0 → 2.2.1

package/.eslintrc

@@ -0,0 +1,39 @@
+{
+    "extends": ["@squiz"],
+    "plugins": ["import", "prettier"],
+    "rules": {
+        "prettier/prettier": "error",
+    },
+    "settings": {
+        "import/parsers": {
+            "@typescript-eslint/parser": [".ts", ".tsx"],
+        },
+        "import/resolver": {
+            "typescript": {
+                "alwaysTryTypes": true,
+            },
+        },
+    },
+    "ignorePatterns": ["**/lib/"],
+    "overrides": [
+        {
+            "files": ["*.spec.ts", "*.spec.tsx"],
+            "rules": {
+                "no-var": 0,
+                "import/no-extraneous-dependencies": 0,
+            },
+        },
+        {
+            "files": ["*.config.ts", "*.config.js", "build.js"],
+            "rules": {
+                "import/no-extraneous-dependencies": 0,
+            },
+        },
+        {
+            "files": ["*.stories.ts", "*.stories.tsx"],
+            "rules": {
+                "import/no-extraneous-dependencies": 0,
+            },
+        },
+    ],
+}

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.2.1](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/compare/@squiz/resource-browser@2.2.1-rc.0...@squiz/resource-browser@2.2.1) (2024-06-11)
+
+**Note:** Version bump only for package @squiz/resource-browser
+
+## [2.2.1-rc.0](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/compare/@squiz/resource-browser@2.2.0-rc.0...@squiz/resource-browser@2.2.1-rc.0) (2024-06-07)
+
+**Note:** Version bump only for package @squiz/resource-browser
+
 # [2.2.0-rc.0](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/compare/@squiz/resource-browser@2.1.10-rc.0...@squiz/resource-browser@2.2.0-rc.0) (2024-06-06)
 
 ### Features

package/build.js

@@ -4,18 +4,18 @@ const postcss = require('postcss');
 const postcssConfig = require('./postcss.config').plugins;
 
 esbuild
-  .build({
-    entryPoints: ['src/index.scss'],
-    bundle: true,
-    outdir: 'lib',
-    plugins: [
-      sassPlugin({
-        type: 'css',
-        transform: async (source) => {
-          const { css } = postcss(postcssConfig).process(source);
-          return css;
-        },
-      }),
-    ],
-  })
-  .catch(() => process.exit(1));
+    .build({
+        entryPoints: ['src/index.scss'],
+        bundle: true,
+        outdir: 'lib',
+        plugins: [
+            sassPlugin({
+                type: 'css',
+                transform: async (source) => {
+                    const { css } = postcss(postcssConfig).process(source);
+                    return css;
+                },
+            }),
+        ],
+    })
+    .catch(() => process.exit(1));

package/lib/MainContainer/MainContainer.js

@@ -40,22 +40,23 @@ function MainContainer({ title, titleAriaProps, allowedTypes, sources, selectedS
     }, [setHeaderPortal]);
     // MainContainer will either render the source list view if no source is set or the plugins UI if a source has been selected
     return (react_1.default.createElement("div", { className: "relative flex flex-col h-full text-gray-800" },
-        react_1.default.createElement("div", { className: "flex items-center p-4.5" },
+        react_1.default.createElement("div", { className: "flex items-center py-4.5 pl-4.5 pr-10" },
             react_1.default.createElement("h2", { ...titleAriaProps, className: "text-xl leading-6 text-gray-800 font-semibold mr-6" },
                 !plugin && 'Environment Selector',
                 plugin && title),
             plugin && selectedSource && (react_1.default.createElement(react_1.default.Fragment, null,
                 sources.length > 1 && (react_1.default.createElement("div", { className: "px-3 border-l border-gray-300 w-300px" },
                     react_1.default.createElement(SourceDropdown_1.default, { sources: sources, selectedSource: selectedSource, onSourceSelect: onSourceSelect }))),
-                plugin.createHeaderPortal && (react_1.default.createElement("div", { ref: setHeaderPortalRef, className: "px-3 border-l border-gray-300 w-300px" })))),
+                plugin.createHeaderPortal && (react_1.default.createElement("div", { ref: setHeaderPortalRef, className: "squiz-rb-plugin px-3 border-l border-gray-300 w-300px" })))),
             react_1.default.createElement("button", { type: "button", "aria-label": `Close ${title} dialog`, onClick: onClose, className: "absolute top-2 right-2 p-2.5 rounded hover:bg-blue-100 focus:bg-blue-100" },
                 react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
                     react_1.default.createElement("path", { d: "M13.3 0.710017C13.1131 0.522765 12.8595 0.417532 12.595 0.417532C12.3305 0.417532 12.0768 0.522765 11.89 0.710017L6.99997 5.59002L2.10997 0.700017C1.92314 0.512765 1.66949 0.407532 1.40497 0.407532C1.14045 0.407532 0.886802 0.512765 0.699971 0.700017C0.309971 1.09002 0.309971 1.72002 0.699971 2.11002L5.58997 7.00002L0.699971 11.89C0.309971 12.28 0.309971 12.91 0.699971 13.3C1.08997 13.69 1.71997 13.69 2.10997 13.3L6.99997 8.41002L11.89 13.3C12.28 13.69 12.91 13.69 13.3 13.3C13.69 12.91 13.69 12.28 13.3 11.89L8.40997 7.00002L13.3 2.11002C13.68 1.73002 13.68 1.09002 13.3 0.710017Z", fill: "currentColor" })))),
-        react_1.default.createElement("div", { className: "squiz-rb-plugin border-t border-gray-300 overflow-y-hidden" },
-            plugin && selectedSource && SourceBrowser && (react_1.default.createElement(SourceBrowser, { source: selectedSource, allowedTypes: allowedTypes, headerPortal: plugin.createHeaderPortal && headerPortal ? headerPortal : undefined, preselectedResource: preselectedResource || undefined, onSelected: (resource) => {
-                    onChange(resource);
-                    onClose();
-                } })),
+        react_1.default.createElement("div", { className: "border-t border-gray-300 overflow-y-hidden" },
+            plugin && selectedSource && SourceBrowser && (react_1.default.createElement("div", { className: "squiz-rb-plugin" },
+                react_1.default.createElement(SourceBrowser, { source: selectedSource, allowedTypes: allowedTypes, headerPortal: plugin.createHeaderPortal && headerPortal ? headerPortal : undefined, preselectedResource: preselectedResource || undefined, onSelected: (resource) => {
+                        onChange(resource);
+                        onClose();
+                    } }))),
             !selectedSource && react_1.default.createElement(SourceList_1.default, { sources: sources, onSourceSelect: onSourceSelect }))));
 }
 exports.default = MainContainer;

package/lib/Plugin/Plugin.js

@@ -9,8 +9,8 @@ const ResourceBrowserInput_1 = require("../ResourceBrowserInput/ResourceBrowserI
 const AuthProvider_1 = require("../ResourceBrowserContext/AuthProvider");
 const PluginRender = ({ render, ...props }) => {
     if (render) {
-        return react_1.default.createElement(AuthProvider_1.AuthProvider, { authConfig: props.source },
-            react_1.default.createElement(ResourceBrowserInput_1.ResourceBrowserInput, { ...props }));
+        return (react_1.default.createElement(AuthProvider_1.AuthProvider, { authConfig: props.source },
+            react_1.default.createElement(ResourceBrowserInput_1.ResourceBrowserInput, { ...props })));
     }
     else {
         return react_1.default.createElement(react_1.default.Fragment, null);

package/lib/ResourceBrowserContext/AuthProvider.js

@@ -41,6 +41,6 @@ const AuthProvider = ({ children, authConfig }) => {
     if (!authConfiguration?.configuration) {
         return react_1.default.createElement(react_1.default.Fragment, null, children);
     }
-    return (react_1.default.createElement(exports.AuthContext.Provider, { value: auth }, children));
+    return react_1.default.createElement(exports.AuthContext.Provider, { value: auth }, children);
 };
 exports.AuthProvider = AuthProvider;

package/lib/index.css

@@ -610,6 +610,9 @@
 .squiz-rb-scope .max-w-\[50rem\]:not(.squiz-rb-plugin *) {
   max-width: 50rem;
 }
+.squiz-rb-scope .max-w-\[52rem\]:not(.squiz-rb-plugin *) {
+  max-width: 52rem;
+}
 .squiz-rb-scope .flex-1:not(.squiz-rb-plugin *) {
   flex: 1 1 0%;
 }
@@ -815,6 +818,14 @@
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
+.squiz-rb-scope .py-4:not(.squiz-rb-plugin *) {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+.squiz-rb-scope .py-4\.5:not(.squiz-rb-plugin *) {
+  padding-top: 1.125rem;
+  padding-bottom: 1.125rem;
+}
 .squiz-rb-scope .py-8:not(.squiz-rb-plugin *) {
   padding-top: 2rem;
   padding-bottom: 2rem;
@@ -825,12 +836,24 @@
 .squiz-rb-scope .pb-4:not(.squiz-rb-plugin *) {
   padding-bottom: 1rem;
 }
+.squiz-rb-scope .pb-4\.5:not(.squiz-rb-plugin *) {
+  padding-bottom: 1.125rem;
+}
 .squiz-rb-scope .pl-4:not(.squiz-rb-plugin *) {
   padding-left: 1rem;
 }
+.squiz-rb-scope .pl-4\.5:not(.squiz-rb-plugin *) {
+  padding-left: 1.125rem;
+}
+.squiz-rb-scope .pr-10:not(.squiz-rb-plugin *) {
+  padding-right: 2.5rem;
+}
 .squiz-rb-scope .pr-4:not(.squiz-rb-plugin *) {
   padding-right: 1rem;
 }
+.squiz-rb-scope .pr-4\.5:not(.squiz-rb-plugin *) {
+  padding-right: 1.125rem;
+}
 .squiz-rb-scope .pt-3:not(.squiz-rb-plugin *) {
   padding-top: 0.75rem;
 }
@@ -1032,18 +1055,6 @@
   --tw-text-opacity: 1;
   color: rgb(112 112 112 / var(--tw-text-opacity));
 }
-.squiz-rb-scope .p-4\.5:not(.squiz-rb-plugin *) {
-  padding: 18px;
-}
-.squiz-rb-scope .pl-4\.5:not(.squiz-rb-plugin *) {
-  padding-left: 18px;
-}
-.squiz-rb-scope .pr-4\.5:not(.squiz-rb-plugin *) {
-  padding-right: 18px;
-}
-.squiz-rb-scope .pb-4\.5:not(.squiz-rb-plugin *) {
-  padding-bottom: 18px;
-}
 .squiz-rb-scope .break-word:not(.squiz-rb-plugin *) {
   word-break: break-word;
   overflow-wrap: anywhere;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@squiz/resource-browser",
-    "version": "2.2.0-rc.0",
+    "version": "2.2.1",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
     "private": false,
@@ -12,26 +12,31 @@
         "compile:code": "tsc",
         "compile:styles": "node build.js",
         "storybook": "storybook dev -p 6006",
-        "test": "jest",
+        "test": "npm run test:unit && npm run test:eslint",
         "test:unit": "jest",
+        "test:eslint": "eslint .",
         "test:watch": "jest --watch"
     },
     "dependencies": {
         "@emotion/styled": "^11.11.5",
         "@mui/icons-material": "5.11.16",
         "@react-aria/interactions": "^3.21.1",
-        "@react-types/shared": "^3.22.1",
+        "@react-types/overlays": "^3.8.7",
+        "@react-types/shared": "^3.23.1",
         "@squiz/dx-json-schema-lib": "^1.67.0",
         "@squiz/generic-browser-lib": "^1.66.0",
-        "@squiz/resource-browser-ui-lib": "^0.8.2-rc.0",
+        "@squiz/resource-browser-ui-lib": "^0.8.2",
         "clsx": "^2.1.0",
         "expiry-map": "^2.0.0",
         "p-memoize": "^4.0.4",
+        "react": "^16.14.0 || ^17 || ^18",
         "react-aria": "3.23.1",
+        "react-dom": "^16.14.0 || ^17 || ^18",
         "react-responsive": "9.0.2",
         "react-stately": "3.21.0"
     },
     "devDependencies": {
+        "@squiz/eslint-config": "^1.7.0",
         "@storybook/addon-essentials": "^7.5.3",
         "@storybook/addon-interactions": "^7.5.3",
         "@storybook/addon-links": "^7.5.3",
@@ -46,9 +51,12 @@
         "@types/postcss-js": "4.0.0",
         "@types/react": "^18.2.45",
         "@types/react-dom": "^18.2.18",
+        "@typescript-eslint/parser": "^7.12.0",
         "autoprefixer": "10.4.14",
         "esbuild": "^0.19.3",
         "esbuild-sass-plugin": "^2.8.0",
+        "eslint-import-resolver-typescript": "^3.6.1",
+        "eslint-plugin-import": "^2.29.1",
         "jest": "29.4.1",
         "jest-environment-jsdom": "29.4.1",
         "postcss": "8.4.31",
@@ -56,8 +64,6 @@
         "postcss-nested": "6.0.1",
         "postcss-prefix-selector": "1.16.0",
         "prop-types": "15.8.1",
-        "react": "^18.0.0",
-        "react-dom": "^18.0.0",
         "storybook": "^7.5.3",
         "tailwindcss": "3.3.1",
         "ts-jest": "29.0.5",
@@ -81,5 +87,5 @@
     "volta": {
         "node": "18.18.0"
     },
-    "gitHead": "32bbc578ba11464c0c79e2714fdbe50890329be4"
+    "gitHead": "4645b0ccbd3c1056c8e3a02961c21debb14ab14d"
 }

package/src/Hooks/useAuth.spec.tsx

@@ -14,7 +14,7 @@ describe('useAuth', () => {
         authUrl: 'https://auth.example.com',
         clientId: 'example-client-id',
         redirectUrl: 'https://example.com/callback',
-        scope: 'offline_access'
+        scope: 'offline_access',
     };
 
     beforeEach(() => {
@@ -55,7 +55,7 @@ describe('useAuth', () => {
 
         Object.defineProperty(popupMock, 'closed', {
             get: jest.fn(() => false),
-            set: jest.fn()
+            set: jest.fn(),
         });
 
         const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
@@ -93,7 +93,7 @@ describe('useAuth', () => {
         expect(window.open).toHaveBeenCalledWith(
             `${authConfig.authUrl}?client_id=${authConfig.clientId}&scope=offline_access&redirect_uri=${encodeURIComponent(authConfig.redirectUrl)}&response_type=code&state=state`,
             'Login',
-            'width=600,height=600'
+            'width=600,height=600',
         );
 
         act(() => {

package/src/MainContainer/MainContainer.tsx

@@ -46,7 +46,7 @@ function MainContainer({
     // MainContainer will either render the source list view if no source is set or the plugins UI if a source has been selected
     return (
         <div className="relative flex flex-col h-full text-gray-800">
-            <div className="flex items-center p-4.5">
+            <div className="flex items-center py-4.5 pl-4.5 pr-10">
                 <h2 {...titleAriaProps} className="text-xl leading-6 text-gray-800 font-semibold mr-6">
                     {!plugin && 'Environment Selector'}
                     {plugin && title}
@@ -60,7 +60,7 @@ function MainContainer({
                             </div>
                         )}
                         {plugin.createHeaderPortal && (
-                            <div ref={setHeaderPortalRef} className="px-3 border-l border-gray-300 w-300px"></div>
+                            <div ref={setHeaderPortalRef} className="squiz-rb-plugin px-3 border-l border-gray-300 w-300px"></div>
                         )}
                     </>
                 )}
@@ -79,18 +79,20 @@ function MainContainer({
                     </svg>
                 </button>
             </div>
-            <div className="squiz-rb-plugin border-t border-gray-300 overflow-y-hidden">
+            <div className="border-t border-gray-300 overflow-y-hidden">
                 {plugin && selectedSource && SourceBrowser && (
-                    <SourceBrowser
-                        source={selectedSource}
-                        allowedTypes={allowedTypes}
-                        headerPortal={plugin.createHeaderPortal && headerPortal ? headerPortal : undefined}
-                        preselectedResource={preselectedResource || undefined}
-                        onSelected={(resource: ResourceBrowserResource) => {
-                            onChange(resource);
-                            onClose();
-                        }}
-                    />
+                    <div className="squiz-rb-plugin">
+                        <SourceBrowser
+                            source={selectedSource}
+                            allowedTypes={allowedTypes}
+                            headerPortal={plugin.createHeaderPortal && headerPortal ? headerPortal : undefined}
+                            preselectedResource={preselectedResource || undefined}
+                            onSelected={(resource: ResourceBrowserResource) => {
+                                onChange(resource);
+                                onClose();
+                            }}
+                        />
+                    </div>
                 )}
                 {!selectedSource && <SourceList sources={sources} onSourceSelect={onSourceSelect} />}
             </div>

package/src/Plugin/Plugin.tsx

@@ -14,7 +14,11 @@ export type PluginRenderType = ResourceBrowserInputProps & {
 };
 export const PluginRender = ({ render, ...props }: PluginRenderType) => {
     if (render) {
-        return <AuthProvider authConfig={props.source}><ResourceBrowserInput {...props} /></AuthProvider>;
+        return (
+            <AuthProvider authConfig={props.source}>
+                <ResourceBrowserInput {...props} />
+            </AuthProvider>
+        );
     } else {
         return <></>;
     }

package/src/ResourceBrowserContext/AuthProvider.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import { AuthProvider, useAuthContext } from './AuthProvider';
-import {AuthenticationConfiguration, ResourceBrowserSourceWithConfig} from '../types';
+import { AuthenticationConfiguration, ResourceBrowserSourceWithConfig } from '../types';
 import { useAuth } from '../Hooks/useAuth';
 
 jest.mock('../Hooks/useAuth');
@@ -13,13 +13,13 @@ describe('AuthContext', () => {
         authUrl: 'https://auth.example.com',
         clientId: 'example-client-id',
         redirectUrl: 'https://example.com/callback',
-        scope: 'offline'
+        scope: 'offline',
     };
 
-    const sourceConfig: ResourceBrowserSourceWithConfig  = {
+    const sourceConfig: ResourceBrowserSourceWithConfig = {
         id: '1',
         type: 'dam',
-        configuration: authConfig
+        configuration: authConfig,
     };
 
     const authState = {
@@ -49,7 +49,7 @@ describe('AuthContext', () => {
         render(
             <AuthProvider authConfig={sourceConfig}>
                 <TestComponent />
-            </AuthProvider>
+            </AuthProvider>,
         );
 
         expect(screen.getByText(/Token: testAuthToken/)).toBeInTheDocument();

package/src/ResourceBrowserContext/AuthProvider.tsx

@@ -24,7 +24,7 @@ interface AuthProviderProps {
     authConfig?: ResourceBrowserSource | null;
 }
 
-export const AuthProvider = ( {children, authConfig}: AuthProviderProps ) => {
+export const AuthProvider = ({ children, authConfig }: AuthProviderProps) => {
     const authConfiguration = authConfig as ResourceBrowserSourceWithConfig;
     const auth = useAuth(authConfiguration?.configuration);
 
@@ -32,9 +32,5 @@ export const AuthProvider = ( {children, authConfig}: AuthProviderProps ) => {
         return <>{children}</>;
     }
 
-    return (
-        <AuthContext.Provider value={auth}>
-            {children}
-        </AuthContext.Provider>
-    );
+    return <AuthContext.Provider value={auth}>{children}</AuthContext.Provider>;
 };

package/src/__mocks__/StorybookHelpers.tsx

@@ -21,7 +21,7 @@ export const createPlugins = (callbackWait: number, headerPortal = false): Resou
             sourceBrowserComponent: () => {
                 return (props) => {
                     return (
-                        <div className="h-screen lg:h-[calc(100vh-9rem)] w-screen max-w-[50rem]">
+                        <div className="h-screen lg:h-[calc(100vh-9rem)] w-screen max-w-[52rem]">
                             <div>THIS IS A {type} PLUGIN</div>
                             <button
                                 onClick={() => {

package/src/index.scss

@@ -18,22 +18,6 @@ svg {
     @apply text-gray-600;
 }
 
-.p-4\.5 {
-    padding: 18px;
-}
-
-.pl-4\.5 {
-    padding-left: 18px;
-}
-
-.pr-4\.5 {
-    padding-right: 18px;
-}
-
-.pb-4\.5 {
-    padding-bottom: 18px;
-}
-
 // In tailwind there is no break-word as it is deprecated, but break-words which is slightly different does not work here, so I have added the suggested combination here
 // https://v1.tailwindcss.com/docs/word-break
 // https://github.com/tailwindlabs/tailwindcss/discussions/2213

package/src/index.tsx

@@ -122,7 +122,6 @@ export const ResourceBrowser = (props: ResourceBrowserProps) => {
                     />
                 );
             })}
-
         </div>
     );
 };

package/src/types.ts

@@ -9,7 +9,7 @@ export type AuthenticationConfiguration = {
     redirectUrl: string;
     clientId: string;
     scope: string;
-}
+};
 
 export interface ResourceBrowserSource {
     // Source name; shown on the UI

package/src/utils/authUtils.spec.ts

@@ -7,7 +7,7 @@ global.fetch = jest.fn();
 describe('auth-utils', () => {
     beforeEach(() => {
         // Clear all cookies before each test
-        document.cookie.split(';').forEach(cookie => {
+        document.cookie.split(';').forEach((cookie) => {
             const eqPos = cookie.indexOf('=');
             const name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
             document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/`;
@@ -47,7 +47,7 @@ describe('auth-utils', () => {
             authUrl: 'https://auth.example.com',
             clientId: 'example-client-id',
             redirectUrl: 'https://example.com/callback',
-            scope: 'offline_access'
+            scope: 'offline_access',
         };
 
         it('should throw an error if authConfig is not provided', async () => {

package/tailwind.config.cjs

@@ -63,6 +63,7 @@ module.exports = {
                 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

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"
+    ]
+}