feat: adds the ability to render an encapsulated Unified UI Shell

packages/odyssey-eslint-config/src/index.js

@@ -36,12 +36,13 @@ module.exports = {
       "error",
       {
         devDependencies: [
-          "**/*.ts",
-          "**/*.stories.*",
           "**/*.docgen.*",
-          "**/jest.setup.js",
+          "**/*.stories.*",
           "**/*.test.*",
+          "**/*.ts",
+          "**/jest.setup.js",
           "**/scripts/*",
+          "**/vite.config.js",
         ],
       },
     ],

packages/odyssey-react-mui/jest.config.cjs

@@ -12,5 +12,5 @@
 
 module.exports = {
   setupFilesAfterEnv: ["./jest.setup.js"],
-  testEnvironment: "jsdom",
+  testEnvironment: "@happy-dom/jest-environment",
 };

packages/odyssey-react-mui/jest.setup.js

@@ -13,6 +13,3 @@
 import "regenerator-runtime/runtime";
 import "@testing-library/jest-dom";
 import "jest-axe/extend-expect";
-
-import * as ResizeObserverModule from "resize-observer-polyfill";
-global.ResizeObserver = ResizeObserverModule.default;

packages/odyssey-react-mui/package.json

@@ -92,6 +92,7 @@
   "devDependencies": {
     "@babel/cli": "^7.23.9",
     "@babel/core": "^7.23.9",
+    "@happy-dom/jest-environment": "^15.7.4",
     "@okta/browserslist-config-odyssey": "workspace:*",
     "@okta/odyssey-babel-preset": "workspace:*",
     "@okta/odyssey-icons": "workspace:*",
@@ -114,12 +115,10 @@
     "eslint": "^8.56.0",
     "jest": "^29.7.0",
     "jest-axe": "^5.0.1",
-    "jest-environment-jsdom": "^29.7.0",
     "properties": "1.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "regenerator-runtime": "^0.14.1",
-    "resize-observer-polyfill": "^1.5.1",
     "rimraf": "^5.0.1",
     "stylelint": "^14.13.0",
     "tsx": "^4.7.3",

packages/odyssey-react-mui/src/OktaUiShell.test.tsx

@@ -0,0 +1,100 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { render } from "@testing-library/react";
+
+import { Dialog } from "./Dialog";
+import {
+  defaultComponentProps,
+  OktaUiShell,
+  OktaUiShellProps,
+} from "./OktaUiShell";
+
+describe("OktaUiShell", () => {
+  test("renders the `appRootElement`", async () => {
+    const subscribeToPropChanges: OktaUiShellProps["subscribeToPropChanges"] = (
+      subscription,
+    ) => {
+      subscription({
+        ...defaultComponentProps,
+        topNavProps: {
+          ...defaultComponentProps.topNavProps,
+          SearchFieldComponent: (
+            <Dialog
+              children={undefined}
+              title="Hello World!"
+              isOpen
+              onClose={() => {}}
+            />
+          ),
+        },
+      });
+
+      return () => {};
+    };
+
+    const appRootElement = document.createElement("div");
+
+    render(
+      <OktaUiShell
+        appRootElement={appRootElement}
+        emotionRootElement={document.createElement("div")}
+        subscribeToPropChanges={subscribeToPropChanges}
+      />,
+    );
+
+    expect(Array.from(appRootElement.children)).toHaveLength(1);
+    expect(appRootElement).toHaveTextContent("Hello World!");
+  });
+
+  test("renders the `emotionRootElement`", async () => {
+    const rootElement = document.createElement("div");
+
+    // If this isn't appended to the DOM, the React app won't exist because of how Web Components run.
+    document.body.append(rootElement);
+
+    const emotionRootElement = document.createElement("div");
+
+    render(
+      <OktaUiShell
+        appRootElement={document.createElement("div")}
+        emotionRootElement={emotionRootElement}
+        subscribeToPropChanges={() => () => {}}
+      />,
+    );
+
+    expect(Array.from(emotionRootElement.children).length).toBeGreaterThan(0);
+  });
+
+  test("Unsubscribes from prop changes when unmounted", async () => {
+    const rootElement = document.createElement("div");
+
+    // If this isn't appended to the DOM, the React app won't exist because of how Web Components run.
+    document.body.append(rootElement);
+
+    const unsubscribeFromPropChanges = jest.fn();
+    const subscribeToPropChanges = jest.fn(() => unsubscribeFromPropChanges);
+
+    const { unmount } = render(
+      <OktaUiShell
+        appRootElement={document.createElement("div")}
+        emotionRootElement={document.createElement("div")}
+        subscribeToPropChanges={subscribeToPropChanges}
+      />,
+    );
+
+    unmount();
+
+    expect(subscribeToPropChanges).toHaveBeenCalledTimes(1);
+    expect(unsubscribeFromPropChanges).toHaveBeenCalledTimes(1);
+  });
+});

packages/odyssey-react-mui/src/OktaUiShell.tsx

@@ -0,0 +1,94 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { memo, useEffect, useState, type ReactNode } from "react";
+
+import { SideNav, type SideNavProps } from "./labs/SideNav";
+import { TopNav, type TopNavProps } from "./labs/TopNav";
+import { OdysseyProvider } from "./OdysseyProvider";
+import { ShadowDomElements } from "./shadow-dom";
+
+const containerStyles = {
+  display: "flex",
+};
+
+export type OktaUiShellComponentProps = {
+  sideNavProps: SideNavProps;
+  topNavProps: TopNavProps;
+};
+
+export type OktaUiShellProps = {
+  appComponent?: ReactNode;
+  onSubscriptionCreated: () => void;
+  subscribeToPropChanges: (
+    subscription: (componentProps: OktaUiShellComponentProps) => void,
+  ) => () => void;
+} & ShadowDomElements;
+
+export const defaultComponentProps: OktaUiShellComponentProps = {
+  sideNavProps: {
+    navHeaderText: "",
+    sideNavItems: [],
+  },
+  topNavProps: {
+    topNavLinkItems: [],
+  },
+};
+
+export const defaultProps = {
+  appComponent: <slot />,
+  onSubscriptionCreated: () => {},
+};
+
+const OktaUiShell = ({
+  appComponent = defaultProps.appComponent,
+  appRootElement,
+  emotionRootElement,
+  onSubscriptionCreated = defaultProps.onSubscriptionCreated,
+  subscribeToPropChanges,
+}: OktaUiShellProps) => {
+  const [componentProps, setComponentProps] = useState(defaultComponentProps);
+
+  useEffect(() => {
+    const unsubscribe = subscribeToPropChanges((componentProps) => {
+      setComponentProps(componentProps);
+    });
+
+    onSubscriptionCreated();
+
+    return () => {
+      unsubscribe();
+    };
+  }, [onSubscriptionCreated, subscribeToPropChanges]);
+
+  return (
+    <OdysseyProvider
+      emotionRootElement={emotionRootElement}
+      shadowRootElement={appRootElement}
+    >
+      <div style={containerStyles}>
+        <SideNav {...componentProps.sideNavProps} />
+
+        <div>
+          <TopNav {...componentProps.topNavProps} />
+
+          {appComponent}
+        </div>
+      </div>
+    </OdysseyProvider>
+  );
+};
+
+const MemoizedOktaUiShell = memo(OktaUiShell);
+MemoizedOktaUiShell.displayName = "OktaUiShell";
+
+export { MemoizedOktaUiShell as OktaUiShell };

packages/odyssey-react-mui/src/bufferUntil.test.ts

@@ -0,0 +1,79 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { bufferUntil } from "./bufferUntil";
+import { createMessageBus } from "./createMessageBus";
+
+describe("bufferUntil", () => {
+  test("calls subscription after ready", async () => {
+    const { publish: publish1, subscribe: subscribe1 } = createMessageBus();
+
+    const { publish: publish2, subscribe: subscribe2 } = createMessageBus();
+
+    const subscription = jest.fn();
+
+    subscribe1(subscription);
+
+    const bufferedPublish1 = bufferUntil({
+      publish: publish1,
+      subscribe: subscribe2,
+    });
+
+    publish2();
+    bufferedPublish1();
+
+    expect(subscription).toHaveBeenCalledTimes(1);
+  });
+
+  test("calls subscription before ready", async () => {
+    const { publish: publish1, subscribe: subscribe1 } = createMessageBus();
+
+    const { publish: publish2, subscribe: subscribe2 } = createMessageBus();
+
+    const subscription = jest.fn();
+
+    subscribe1(subscription);
+
+    const bufferedPublish1 = bufferUntil({
+      publish: publish1,
+      subscribe: subscribe2,
+    });
+
+    bufferedPublish1();
+    publish2();
+
+    expect(subscription).toHaveBeenCalledTimes(1);
+  });
+
+  test("keeps only the last value passed when ready", async () => {
+    const { publish: publish1, subscribe: subscribe1 } =
+      createMessageBus<string>();
+
+    const { publish: publish2, subscribe: subscribe2 } = createMessageBus();
+
+    const subscription = jest.fn();
+
+    subscribe1(subscription);
+
+    const bufferedPublish1 = bufferUntil({
+      publish: publish1,
+      subscribe: subscribe2,
+    });
+
+    bufferedPublish1("a");
+    bufferedPublish1("b");
+    publish2();
+
+    expect(subscription).toHaveBeenCalledWith("b");
+    expect(subscription).toHaveBeenCalledTimes(1);
+  });
+});

packages/odyssey-react-mui/src/bufferUntil.ts

@@ -0,0 +1,49 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { createStore } from "./createStore";
+
+export const bufferUntil = <Value>({
+  publish,
+  subscribe,
+}: {
+  publish: (value: Value) => void;
+  subscribe: (subscriber: () => void) => () => void;
+}) => {
+  const store = createStore<{
+    bufferedValue?: Value;
+    isReactAppReadyForProps: boolean;
+  }>({
+    isReactAppReadyForProps: false,
+  });
+
+  const unsubscribe = subscribe(() => {
+    unsubscribe();
+
+    store.setState("isReactAppReadyForProps", true);
+    store.getState("bufferedValue");
+    if (store.hasState("bufferedValue")) {
+      // If we have a state, then the value in here is what we want. TypeScript expects this to possibly be `undefined` because the type we sent to `createStore` listed `bufferedValue` as optional. TypeScript doesn't seem to have any way of knowing we passed in the value at some point.
+      publish(store.getState("bufferedValue")!);
+    }
+  });
+
+  const publishWhenReady: typeof publish = (value) => {
+    if (store.getState("isReactAppReadyForProps")) {
+      publish(value);
+    } else {
+      store.setState("bufferedValue", value);
+    }
+  };
+
+  return publishWhenReady;
+};