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

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,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.2.2-rc.0](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/compare/@squiz/resource-browser@2.2.1-rc.0...@squiz/resource-browser@2.2.2-rc.0) (2024-06-10)
+
+**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

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/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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@squiz/resource-browser",
-    "version": "2.2.1-rc.0",
+    "version": "2.2.2-rc.0",
     "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.3-rc.0",
         "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": "2ae6e09c8e222b2ef95f12243abe659ed76f0fd0"
+    "gitHead": "5d66e140b42ee6c9794ca079b1049289ca4f74f8"
 }

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