@okta/odyssey-react-mui 1.32.0 → 1.33.0

package/src/ui-shell/bufferLatest.ts

@@ -1,64 +0,0 @@
-/*!
- * 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.js";
-
-/**
- * Buffers the values passed to a publisher, keeping only the latest value, until the subscriber emits.
- *
- * This is useful in restricting publishers from firing events until specific subscribers are active. Once active, the `publish` function reverts to its previous behavior.
- */
-export const bufferLatest = <Value>({
-  publish,
-  subscribe,
-}: {
-  /**
-   * A function that publishes values to a subscriber, but not the same subscriber as the one passed to this function.
-   *
-   * Only the latest value published by this publisher is kept until the subscriber emits.
-   */
-  publish: (value: Value) => void;
-  /**
-   * A subscription that listens for emissions from a separate publisher.
-   *
-   * When that separate publisher emits, the latest value from the passed-in publish function is emitted as are all future values.
-   */
-  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;
-};

package/src/ui-shell/createMessageBus.test.ts

@@ -1,115 +0,0 @@
-/*!
- * 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 { createMessageBus } from "./createMessageBus.js";
-
-describe("createEventBus", () => {
-  test("messages are not sent once unsubscribed", () => {
-    const { publish, subscribe } = createMessageBus<null>();
-
-    const subscriber = vi.fn();
-
-    const unsubscribe = subscribe(subscriber);
-
-    unsubscribe();
-    publish(null);
-
-    expect(subscriber).toHaveBeenCalledTimes(0);
-  });
-
-  test("messages are not sent once unsubscribed from multiple subscribers", () => {
-    const { publish, subscribe } = createMessageBus<null>();
-
-    const subscriber1 = vi.fn();
-    const subscriber2 = vi.fn();
-    const subscriber3 = vi.fn();
-
-    const unsubscribe1 = subscribe(subscriber1);
-    const unsubscribe2 = subscribe(subscriber2);
-    const unsubscribe3 = subscribe(subscriber3);
-
-    unsubscribe1();
-    unsubscribe2();
-    unsubscribe3();
-    publish(null);
-    publish(null);
-
-    expect(subscriber1).toHaveBeenCalledTimes(0);
-    expect(subscriber2).toHaveBeenCalledTimes(0);
-    expect(subscriber3).toHaveBeenCalledTimes(0);
-  });
-
-  test("when publishing message, receives message in a subscriber", () => {
-    const message = Symbol();
-
-    const { publish, subscribe } = createMessageBus<typeof message>();
-
-    const subscriber = vi.fn();
-
-    const unsubscribe = subscribe(subscriber);
-
-    publish(message);
-    unsubscribe();
-
-    expect(subscriber).toHaveBeenCalledWith(message);
-    expect(subscriber).toHaveBeenCalledTimes(1);
-  });
-
-  test("when publishing 2 messages, receives both messages in a subscriber", () => {
-    const message1 = Symbol();
-    const message2 = Symbol();
-
-    const { publish, subscribe } = createMessageBus<
-      typeof message1 | typeof message2
-    >();
-
-    const subscriber = vi.fn();
-
-    const unsubscribe = subscribe(subscriber);
-
-    publish(message1);
-    publish(message2);
-    unsubscribe();
-
-    expect(subscriber).toHaveBeenNthCalledWith(1, message1);
-    expect(subscriber).toHaveBeenNthCalledWith(2, message2);
-    expect(subscriber).toHaveBeenCalledTimes(2);
-  });
-
-  test("when subscribing twice, both subscribers receive multiple messages", () => {
-    const message1 = Symbol();
-    const message2 = Symbol();
-
-    const { publish, subscribe } = createMessageBus<
-      typeof message1 | typeof message2
-    >();
-
-    const subscriber1 = vi.fn();
-    const subscriber2 = vi.fn();
-
-    const unsubscribe1 = subscribe(subscriber1);
-    const unsubscribe2 = subscribe(subscriber2);
-
-    publish(message1);
-    publish(message2);
-    unsubscribe1();
-    unsubscribe2();
-
-    expect(subscriber1).toHaveBeenNthCalledWith(1, message1);
-    expect(subscriber1).toHaveBeenNthCalledWith(2, message2);
-    expect(subscriber1).toHaveBeenCalledTimes(2);
-
-    expect(subscriber2).toHaveBeenNthCalledWith(1, message1);
-    expect(subscriber2).toHaveBeenNthCalledWith(2, message2);
-    expect(subscriber2).toHaveBeenCalledTimes(2);
-  });
-});

package/src/ui-shell/createMessageBus.ts

@@ -1,53 +0,0 @@
-/*!
- * 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.
- */
-
-export type MessageHandler<Message> = (message: Message) => void;
-
-export type PublishMessage<Message> = MessageHandler<Message>;
-
-export type UnsubscribeMessageSubscription = () => void;
-
-export type MessageSubscription<Message> = (
-  subscriber: MessageHandler<Message>,
-) => UnsubscribeMessageSubscription;
-
-export type MessageBus<Message> = {
-  publish: PublishMessage<Message>;
-  subscribe: MessageSubscription<Message>;
-};
-
-/**
- * Create a self-contained message bus that allows you to subscribe to events published by the publisher.
- */
-export const createMessageBus = <Message = void>(): MessageBus<Message> => {
-  const subscribers = new Map<symbol, MessageHandler<Message>>();
-
-  const publish: PublishMessage<Message> = (message) => {
-    Array.from(subscribers.values()).forEach((subscriber) => {
-      subscriber(message);
-    });
-  };
-
-  const subscribe: MessageSubscription<Message> = (subscriber) => {
-    const subscriberId = Symbol();
-    subscribers.set(subscriberId, subscriber);
-
-    return () => {
-      subscribers.delete(subscriberId);
-    };
-  };
-
-  return {
-    publish,
-    subscribe,
-  };
-};

package/src/ui-shell/createStore.test.ts

@@ -1,103 +0,0 @@
-/*!
- * 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.js";
-
-describe("createStore", () => {
-  test("starts with no initial state", () => {
-    const store = createStore<{
-      value: null;
-    }>();
-
-    expect(store.hasState("value")).toBe(false);
-    expect(store.getState("value")).toBe(undefined);
-  });
-
-  test("changes state when set", () => {
-    const store = createStore<{
-      value: null;
-    }>();
-
-    store.setState("value", null);
-
-    expect(store.hasState("value")).toBe(true);
-    expect(store.getState("value")).toBe(null);
-  });
-
-  test("reads initial state value", () => {
-    const store = createStore({
-      value: null,
-    });
-
-    expect(store.hasState("value")).toBe(true);
-    expect(store.getState("value")).toBe(null);
-  });
-
-  test("changes initial state when set", () => {
-    const store = createStore<{
-      value: boolean;
-    }>({
-      value: false,
-    });
-
-    store.setState("value", true);
-
-    expect(store.hasState("value")).toBe(true);
-    expect(store.getState("value")).toBe(true);
-  });
-
-  test("changes initial state when set", () => {
-    const store = createStore<{
-      value: boolean;
-    }>({
-      value: false,
-    });
-
-    store.setState("value", true);
-
-    expect(store.hasState("value")).toBe(true);
-    expect(store.getState("value")).toBe(true);
-  });
-
-  test("allows for multiple different states", () => {
-    const store = createStore<{
-      value1: boolean;
-      value2: number;
-    }>({
-      value1: false,
-      value2: 0,
-    });
-
-    expect(store.hasState("value1")).toBe(true);
-    expect(store.hasState("value2")).toBe(true);
-    expect(store.getState("value1")).toBe(false);
-    expect(store.getState("value2")).toBe(0);
-  });
-
-  test("allows setting multiple states", () => {
-    const store = createStore<{
-      value1: boolean;
-      value2: number;
-    }>({
-      value1: false,
-      value2: 0,
-    });
-
-    store.setState("value1", true);
-    store.setState("value2", 1);
-
-    expect(store.hasState("value1")).toBe(true);
-    expect(store.hasState("value2")).toBe(true);
-    expect(store.getState("value1")).toBe(true);
-    expect(store.getState("value2")).toBe(1);
-  });
-});

package/src/ui-shell/createStore.ts

@@ -1,37 +0,0 @@
-/*!
- * 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.
- */
-
-/**
- * Creates an internal state and gives access to those values via functions.
- *
- * It can be optionally given an initial state.
- */
-export const createStore = <State extends object>(initialState?: State) => {
-  const state = initialState || ({} as Partial<State>);
-
-  const hasState = <Name extends keyof State>(name: Name) => name in state;
-
-  const getState = <Name extends keyof State>(name: Name) => state[name];
-
-  const setState = <Name extends keyof State>(
-    name: Name,
-    value: Required<State>[Name],
-  ) => {
-    state[name] = value;
-  };
-
-  return {
-    getState,
-    hasState,
-    setState,
-  };
-};

package/src/ui-shell/index.ts

@@ -1,21 +0,0 @@
-/*!
- * 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.
- */
-
-export * from "./AppSwitcher/index.js";
-export * from "./renderUiShell.js";
-export * from "./SideNav/index.js";
-export * from "./TopNav/index.js";
-export * from "./useHasUiShell.js";
-export * from "../web-component/renderReactInWebComponent.js"; // This is located here because some teams use React v17, and this uses React v18's `ReactDOM/client` import which isn't in older versions.
-
-export { UiShell, type UiShellProps } from "./UiShell.js";
-export { type UiShellNavComponentProps } from "./UiShellContent.js";

package/src/ui-shell/renderUiShell.test.tsx

@@ -1,203 +0,0 @@
-/*!
- * 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 { act, waitFor } from "@testing-library/react";
-
-import { renderUiShell } from "./renderUiShell.js";
-import {
-  ReactInWebComponentElement,
-  reactWebComponentElementName,
-} from "../web-component/renderReactInWebComponent.js";
-
-describe("renderUiShell", () => {
-  afterEach(() => {
-    // This needs to be wrapped in `act` because the web component unmounts the React app, and React events have to be wrapped in `act`.
-    act(() => {
-      // Remove any appended elements because of this hacky process of rendering to the global DOM.
-      document.body.innerHTML = "";
-    });
-  });
-
-  test("returns app root element", () => {
-    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);
-
-    act(() => {
-      const { appRootElement } = renderUiShell({
-        uiShellRootElement: rootElement,
-      });
-
-      expect(appRootElement).toBeInstanceOf(HTMLDivElement);
-    });
-  });
-
-  test("returns slotted elements", () => {
-    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);
-
-    act(() => {
-      const { slottedElements } = renderUiShell({
-        uiShellRootElement: rootElement,
-      });
-
-      expect(slottedElements.banners).toBeInstanceOf(HTMLDivElement);
-      expect(slottedElements.sideNavFooter).toBeInstanceOf(HTMLDivElement);
-      expect(slottedElements.topNavLeftSide).toBeInstanceOf(HTMLDivElement);
-      expect(slottedElements.topNavRightSide).toBeInstanceOf(HTMLDivElement);
-    });
-  });
-
-  test("returns ui shell root element", () => {
-    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);
-
-    act(() => {
-      const { uiShellElement } = renderUiShell({
-        uiShellRootElement: rootElement,
-      });
-
-      expect(uiShellElement).toBeInstanceOf(ReactInWebComponentElement);
-    });
-  });
-
-  test("renders `UiShell` component in a web component", () => {
-    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);
-
-    // This needs to be wrapped in `act` because the web component mounts the React app, and React events have to be wrapped in `act`.
-    act(() => {
-      renderUiShell({
-        uiShellRootElement: rootElement,
-      });
-    });
-
-    expect(
-      Array.from(
-        rootElement.querySelector(reactWebComponentElementName)!.shadowRoot!
-          .children,
-      ).length,
-    ).toBeGreaterThan(0);
-  });
-
-  test("renders `UiShell` with updated props", async () => {
-    const rootElement = document.createElement("div");
-    const appName = "Hello World!";
-
-    // If this isn't appended to the DOM, the React app won't exist because of how Web Components run.
-    document.body.append(rootElement);
-
-    let setComponentProps: ReturnType<
-      typeof renderUiShell
-    >["setComponentProps"];
-
-    // This needs to be wrapped in `act` because the web component mounts the React app, and React events have to be wrapped in `act`.
-    act(() => {
-      const renderUiShellReturnValue = renderUiShell({
-        uiShellRootElement: rootElement,
-      });
-
-      setComponentProps = renderUiShellReturnValue.setComponentProps;
-    });
-
-    act(() => {
-      setComponentProps({
-        sideNavProps: {
-          appName,
-          sideNavItems: [],
-        },
-        topNavProps: {},
-      });
-    });
-
-    await waitFor(() => {
-      expect(
-        rootElement.querySelector(reactWebComponentElementName)!.shadowRoot,
-      ).toHaveTextContent(appName);
-    });
-  });
-
-  test("renders `UiShell` with immediately updated props", async () => {
-    const rootElement = document.createElement("div");
-    const appName = "Hello World!";
-
-    // If this isn't appended to the DOM, the React app won't exist because of how Web Components run.
-    document.body.append(rootElement);
-
-    // This needs to be wrapped in `act` because the web component mounts the React app, and React events have to be wrapped in `act`.
-    act(() => {
-      const { setComponentProps } = renderUiShell({
-        uiShellRootElement: rootElement,
-      });
-
-      setComponentProps({
-        sideNavProps: {
-          appName,
-          sideNavItems: [],
-        },
-        topNavProps: {},
-      });
-    });
-
-    await waitFor(() => {
-      expect(
-        rootElement.querySelector(reactWebComponentElementName)!.shadowRoot,
-      ).toHaveTextContent(appName);
-    });
-  });
-
-  test("renders `<slot>` in the event of an error", async () => {
-    const rootElement = document.createElement("div");
-    const consoleError = vi.fn();
-    const onError = vi.fn();
-
-    // 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 consoleErrorSpy = vi
-      .spyOn(console, "error")
-      .mockImplementation(consoleError);
-
-    act(() => {
-      const { setComponentProps } = renderUiShell({
-        onError,
-        uiShellRootElement: rootElement,
-      });
-
-      setComponentProps(
-        // We're purposefully testing an error state, so we need to send something that will cause an error.
-        () => {
-          throw new Error("TEST BREAK!");
-        },
-      );
-    });
-
-    await waitFor(() => {
-      expect(onError).toHaveBeenCalledTimes(1);
-      expect(consoleError).toHaveBeenCalledTimes(1);
-      expect(
-        rootElement
-          .querySelector(reactWebComponentElementName)!
-          .shadowRoot?.querySelector("slot"),
-      ).toBeInstanceOf(HTMLSlotElement);
-    });
-
-    consoleErrorSpy.mockRestore();
-  });
-});