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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/.storybook/preview-body.html +1 -0
  2. package/.storybook/preview-head.html +7 -10
  3. package/CHANGELOG.md +10 -0
  4. package/lib/Hooks/useAuth.d.ts +7 -0
  5. package/lib/Hooks/useAuth.js +56 -0
  6. package/lib/MainContainer/MainContainer.js +1 -1
  7. package/lib/Plugin/Plugin.js +3 -1
  8. package/lib/ResourceBrowserContext/AuthProvider.d.ts +16 -0
  9. package/lib/ResourceBrowserContext/AuthProvider.js +46 -0
  10. package/lib/index.css +326 -326
  11. package/lib/index.d.ts +2 -1
  12. package/lib/index.js +5 -1
  13. package/lib/types.d.ts +11 -2
  14. package/lib/utils/authUtils.d.ts +5 -0
  15. package/lib/utils/authUtils.js +38 -0
  16. package/package.json +3 -3
  17. package/postcss.config.js +19 -15
  18. package/src/Hooks/useAuth.spec.tsx +137 -0
  19. package/src/Hooks/useAuth.ts +60 -0
  20. package/src/MainContainer/MainContainer.tsx +1 -1
  21. package/src/Plugin/Plugin.tsx +2 -1
  22. package/src/ResourceBrowserContext/AuthProvider.spec.tsx +73 -0
  23. package/src/ResourceBrowserContext/AuthProvider.tsx +40 -0
  24. package/src/index.spec.tsx +3 -1
  25. package/src/index.tsx +3 -1
  26. package/src/types.ts +13 -2
  27. package/src/utils/authUtils.spec.ts +88 -0
  28. package/src/utils/authUtils.ts +40 -0
package/.storybook/preview-body.html ADDED
@@ -0,0 +1 @@
1
+ <body class="squiz-rb-scope"></body>
package/.storybook/preview-head.html CHANGED
@@ -1,15 +1,12 @@
1
1
  <script>
2
- window.global = window;
3
- setTimeout(function () {
4
- document.body.classList.add('squiz-rb-scope');
5
- }, 0);
2
+ window.global = window;
6
3
  </script>
7
4
 
8
5
  <style>
9
- .sb-show-main.sb-main-padded {
10
- padding: 0;
11
- }
12
- body {
13
- font-family: 'Open Sans';
14
- }
6
+ .sb-show-main.sb-main-padded {
7
+ padding: 0;
8
+ }
9
+ body {
10
+ font-family: 'Open Sans';
11
+ }
15
12
  </style>
package/CHANGELOG.md CHANGED
@@ -3,6 +3,16 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [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)
7
+
8
+ ### Features
9
+
10
+ - **PRODAM:92:** auth provider ([3c7136d](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/commit/3c7136da5f5ef148f713ad6a39f5d2328eaff4c7))
11
+
12
+ ## [2.1.10-rc.0](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/compare/@squiz/resource-browser@2.1.9-rc.0...@squiz/resource-browser@2.1.10-rc.0) (2024-06-06)
13
+
14
+ **Note:** Version bump only for package @squiz/resource-browser
15
+
6
16
  ## [2.1.9-rc.0](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/compare/@squiz/resource-browser@2.1.8-rc.0...@squiz/resource-browser@2.1.9-rc.0) (2024-06-03)
7
17
 
8
18
  **Note:** Version bump only for package @squiz/resource-browser
package/lib/Hooks/useAuth.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { AuthenticationConfiguration } from '../types';
2
+ export declare const useAuth: (authConfig: AuthenticationConfiguration | undefined) => {
3
+ authToken: string | null;
4
+ isAuthenticated: boolean;
5
+ login: () => void;
6
+ refreshAccessToken: () => Promise<string>;
7
+ };
package/lib/Hooks/useAuth.js ADDED
@@ -0,0 +1,56 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.useAuth = void 0;
4
+ const react_1 = require("react");
5
+ const authUtils_1 = require("../utils/authUtils");
6
+ const useAuth = (authConfig) => {
7
+ const [authToken, setAuthToken] = (0, react_1.useState)((0, authUtils_1.getCookieValue)('authToken'));
8
+ const [isAuthenticated, setIsAuthenticated] = (0, react_1.useState)(!!(0, authUtils_1.getCookieValue)('authToken'));
9
+ const refreshAccessToken = (0, react_1.useCallback)(async () => {
10
+ const newToken = await (0, authUtils_1.refreshAccessToken)(authConfig);
11
+ setAuthToken(newToken);
12
+ setIsAuthenticated(!!newToken);
13
+ return newToken;
14
+ }, [authConfig]);
15
+ const handleLogin = (0, react_1.useCallback)(() => {
16
+ if (!authConfig?.redirectUrl && !authConfig?.authUrl && !authConfig?.redirectUrl && !authConfig?.scope) {
17
+ return;
18
+ }
19
+ const encodedRedirectUrl = encodeURIComponent(authConfig?.redirectUrl || '');
20
+ const loginUrl = `${authConfig?.authUrl}?client_id=${authConfig?.clientId}&scope=${authConfig?.scope}&redirect_uri=${encodedRedirectUrl}&response_type=code&state=state`;
21
+ const popup = window.open(loginUrl, 'Login', 'width=600,height=600');
22
+ if (!popup) {
23
+ console.error('Popup failed to open');
24
+ return;
25
+ }
26
+ const checkPopup = setInterval(() => {
27
+ try {
28
+ if ((0, authUtils_1.getCookieValue)('authToken') && (0, authUtils_1.getCookieValue)('refreshToken')) {
29
+ clearInterval(checkPopup);
30
+ popup.close();
31
+ setAuthToken((0, authUtils_1.getCookieValue)('authToken'));
32
+ setIsAuthenticated(true);
33
+ }
34
+ }
35
+ catch (error) {
36
+ // Ignore cross-origin access errors
37
+ }
38
+ if (popup.closed) {
39
+ clearInterval(checkPopup);
40
+ console.error('Popup closed before authentication');
41
+ }
42
+ }, 1000); // Check every second
43
+ }, [authConfig]);
44
+ (0, react_1.useEffect)(() => {
45
+ refreshAccessToken().catch(() => {
46
+ setIsAuthenticated(false);
47
+ });
48
+ }, [authConfig, refreshAccessToken]);
49
+ return {
50
+ authToken,
51
+ isAuthenticated,
52
+ login: handleLogin,
53
+ refreshAccessToken,
54
+ };
55
+ };
56
+ exports.useAuth = useAuth;
package/lib/MainContainer/MainContainer.js CHANGED
@@ -51,7 +51,7 @@ function MainContainer({ title, titleAriaProps, allowedTypes, sources, selectedS
51
51
  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" },
52
52
  react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
53
53
  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" })))),
54
- react_1.default.createElement("div", { className: "border-t border-gray-300 h-[calc(100%-72px)]" },
54
+ react_1.default.createElement("div", { className: "squiz-rb-plugin border-t border-gray-300 overflow-y-hidden" },
55
55
  plugin && selectedSource && SourceBrowser && (react_1.default.createElement(SourceBrowser, { source: selectedSource, allowedTypes: allowedTypes, headerPortal: plugin.createHeaderPortal && headerPortal ? headerPortal : undefined, preselectedResource: preselectedResource || undefined, onSelected: (resource) => {
56
56
  onChange(resource);
57
57
  onClose();
package/lib/Plugin/Plugin.js CHANGED
@@ -6,9 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.PluginRender = void 0;
7
7
  const react_1 = __importDefault(require("react"));
8
8
  const ResourceBrowserInput_1 = require("../ResourceBrowserInput/ResourceBrowserInput");
9
+ const AuthProvider_1 = require("../ResourceBrowserContext/AuthProvider");
9
10
  const PluginRender = ({ render, ...props }) => {
10
11
  if (render) {
11
- return react_1.default.createElement(ResourceBrowserInput_1.ResourceBrowserInput, { ...props });
12
+ return react_1.default.createElement(AuthProvider_1.AuthProvider, { authConfig: props.source },
13
+ react_1.default.createElement(ResourceBrowserInput_1.ResourceBrowserInput, { ...props }));
12
14
  }
13
15
  else {
14
16
  return react_1.default.createElement(react_1.default.Fragment, null);
package/lib/ResourceBrowserContext/AuthProvider.d.ts ADDED
@@ -0,0 +1,16 @@
1
+ import React, { ReactNode } from 'react';
2
+ import { ResourceBrowserSource } from '../types';
3
+ interface AuthContextProps {
4
+ authToken: string | null;
5
+ isAuthenticated: boolean;
6
+ login: () => void;
7
+ refreshAccessToken: () => Promise<any>;
8
+ }
9
+ export declare const AuthContext: React.Context<AuthContextProps | undefined>;
10
+ export declare const useAuthContext: () => AuthContextProps;
11
+ interface AuthProviderProps {
12
+ children: ReactNode;
13
+ authConfig?: ResourceBrowserSource | null;
14
+ }
15
+ export declare const AuthProvider: ({ children, authConfig }: AuthProviderProps) => React.JSX.Element;
16
+ export {};
package/lib/ResourceBrowserContext/AuthProvider.js ADDED
@@ -0,0 +1,46 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
25
+ Object.defineProperty(exports, "__esModule", { value: true });
26
+ exports.AuthProvider = exports.useAuthContext = exports.AuthContext = void 0;
27
+ const react_1 = __importStar(require("react"));
28
+ const useAuth_1 = require("../Hooks/useAuth");
29
+ exports.AuthContext = (0, react_1.createContext)(undefined);
30
+ const useAuthContext = () => {
31
+ const context = (0, react_1.useContext)(exports.AuthContext);
32
+ if (!context) {
33
+ throw new Error('useAuthContext must be used within an AuthProvider');
34
+ }
35
+ return context;
36
+ };
37
+ exports.useAuthContext = useAuthContext;
38
+ const AuthProvider = ({ children, authConfig }) => {
39
+ const authConfiguration = authConfig;
40
+ const auth = (0, useAuth_1.useAuth)(authConfiguration?.configuration);
41
+ if (!authConfiguration?.configuration) {
42
+ return react_1.default.createElement(react_1.default.Fragment, null, children);
43
+ }
44
+ return (react_1.default.createElement(exports.AuthContext.Provider, { value: auth }, children));
45
+ };
46
+ exports.AuthProvider = AuthProvider;