zudoku 0.0.0-eb4182d → 0.0.0-eeace45

package/src/lib/authentication/state.ts

@@ -1,15 +1,56 @@
-import { create } from "zustand";
-import { persist } from "zustand/middleware";
+import { create, type Mutate, type StoreApi } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
 
-export const useAuthState = create<AuthState>(() => ({
-  isPending: false,
-  isAuthenticated: false,
-}));
-
-export interface AuthState {
+export interface AuthState<ProviderData = unknown> {
   isAuthenticated: boolean;
   isPending: boolean;
-  profile?: UserProfile;
+  profile: UserProfile | null;
+  providerData: ProviderData | null;
+}
+
+export class Authentication {
+  async setLoggedIn(isLoggedIn: boolean) {}
+  async setProfile() {}
+  async setPersistentProviderData() {}
+}
+
+export type StoreWithPersist<T> = Mutate<
+  StoreApi<T>,
+  [["zustand/persist", unknown]]
+>;
+
+export const withStorageDOMEvents = <T>(store: StoreWithPersist<T>) => {
+  const storageEventCallback = (e: StorageEvent) => {
+    if (e.key === store.persist.getOptions().name && e.newValue) {
+      void store.persist.rehydrate();
+    }
+  };
+
+  window.addEventListener("storage", storageEventCallback);
+
+  return () => {
+    window.removeEventListener("storage", storageEventCallback);
+  };
+};
+
+export const useAuthState = create<AuthState>()(
+  persist(
+    (state) => ({
+      isAuthenticated: false,
+      isPending: false,
+      profile: null,
+      providerData: null,
+    }),
+    {
+      name: "auth-state",
+      storage: createJSONStorage(() => localStorage),
+      // partialize: (s) => ({ state: s }),
+    },
+  ),
+);
+
+if (typeof window !== "undefined") {
+  withStorageDOMEvents(useAuthState);
 }
 
 export interface UserProfile {

package/{LICENSE.md → src/lib/authentication/use-broadcast/LICENSE.md}

@@ -1,6 +1,6 @@
-The MIT License (MIT)
+MIT License
 
-Copyright (c) Zuplo, Inc.
+Copyright (c) 2023 Romain
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

package/src/lib/authentication/use-broadcast/shared.ts

@@ -0,0 +1,372 @@
+// https://github.com/Romainlg29/use-broadcast/
+
+import { StateCreator, StoreMutatorIdentifier } from "zustand";
+
+export type SharedOptions = {
+  /**
+   * The name of the broadcast channel
+   * It must be unique
+   */
+  name?: string;
+
+  /**
+   * Main timeout
+   * If the main tab / window doesn't respond in this time, this tab / window will become the main
+   * @default 100 ms
+   */
+  mainTimeout?: number;
+
+  /**
+   * If true, the store will only synchronize once with the main tab. After that, the store will be unsynchronized.
+   * @default false
+   */
+  unsync?: boolean;
+
+  /**
+   * Callback when this tab / window becomes the main tab / window
+   * Triggered only in the main tab / window
+   */
+  onBecomeMain?: (id: number) => void;
+
+  /**
+   * Callback when a new tab is opened / closed
+   * Triggered only in the main tab / window
+   */
+  onTabsChange?: (ids: number[]) => void;
+};
+
+/**
+ * The Shared type
+ */
+export type Shared = <
+  T,
+  Mps extends [StoreMutatorIdentifier, unknown][] = [],
+  Mcs extends [StoreMutatorIdentifier, unknown][] = [],
+>(
+  f: StateCreator<T, Mps, Mcs>,
+  options?: SharedOptions,
+) => StateCreator<T, Mps, Mcs>;
+
+/**
+ * Type implementation of the Shared function
+ */
+type SharedImpl = <T>(
+  f: StateCreator<T, [], []>,
+  options?: SharedOptions,
+) => StateCreator<T, [], []>;
+
+/**
+ * Shared implementation
+ * @param f Zustand state creator
+ * @param options The options
+ */
+const sharedImpl: SharedImpl = (f, options) => (set, get, store) => {
+  /**
+   * The broadcast channel is not supported in SSR
+   */
+  if (
+    typeof window === "undefined" &&
+    !(
+      typeof WorkerGlobalScope !== "undefined" &&
+      self instanceof WorkerGlobalScope
+    )
+  ) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      "BroadcastChannel is not supported in this environment. The store will not be shared.",
+    );
+    return f(set, get, store);
+  }
+
+  /**
+   * If BroadcastChannel is not supported, return the basic store
+   */
+  if (typeof BroadcastChannel === "undefined") {
+    // eslint-disable-next-line no-console
+    console.warn(
+      "BroadcastChannel is not supported in this browser. The store will not be shared.",
+    );
+    return f(set, get, store);
+  }
+
+  /**
+   * Types
+   */
+  type Item = { [key: string]: unknown };
+  type Message =
+    | {
+        action: "sync";
+      }
+    | {
+        action: "change";
+        state: Item;
+      }
+    | {
+        action: "add_new_tab";
+        id: number;
+      }
+    | {
+        action: "close";
+        id: number;
+      }
+    | {
+        action: "change_main";
+        id: number;
+        tabs: number[];
+      };
+
+  /**
+   * Is the store synced with the other tabs
+   */
+  let isSynced = get() !== undefined;
+
+  /**
+   * Is this tab / window the main tab / window
+   * When a new tab / window is opened, it will be synced with the main
+   */
+  let isMain = false;
+
+  /**
+   * The broadcast channel name
+   */
+  const name = options?.name ?? f.toString();
+
+  /**
+   * The id of the tab / window
+   */
+  let id = 0;
+
+  /**
+   * Store a list of all the tabs / windows
+   * Only for the main tab / window
+   */
+  const tabs: number[] = [0];
+
+  /**
+   * Create the broadcast channel
+   */
+  const channel = new BroadcastChannel(name);
+
+  /**
+   * Handle the Zustand set function
+   * Trigger a postMessage to all the other tabs
+   */
+  const onSet: typeof set = (...args) => {
+    /**
+     * Get the previous states
+     */
+    const previous = get() as Item;
+
+    /**
+     * Update the states
+     */
+    set(...(args as Parameters<typeof set>));
+
+    /**
+     * If the stores should not be synced, return.
+     */
+    if (options?.unsync) {
+      return;
+    }
+
+    /**
+     * Get the fresh states
+     */
+    const updated = get() as Item;
+
+    /**
+     * Get the states that changed
+     */
+    const state = Object.entries(updated).reduce((obj, [key, val]) => {
+      if (previous[key] !== val) {
+        obj = { ...obj, [key]: val };
+      }
+      return obj;
+    }, {} as Item);
+
+    /**
+     * Send the states to all the other tabs
+     */
+    channel.postMessage({ action: "change", state } as Message);
+  };
+
+  /**
+   * Subscribe to the broadcast channel
+   */
+  channel.onmessage = (e) => {
+    if ((e.data as Message).action === "sync") {
+      /**
+       * If this tab / window is not the main, return
+       */
+      if (!isMain) {
+        return;
+      }
+
+      /**
+       * Remove all the functions and symbols from the store
+       */
+      const state = Object.entries(get() as Item).reduce((obj, [key, val]) => {
+        if (typeof val !== "function" && typeof val !== "symbol") {
+          obj = { ...obj, [key]: val };
+        }
+        return obj;
+      }, {});
+
+      /**
+       * Send the state to the other tabs
+       */
+      channel.postMessage({ action: "change", state } as Message);
+
+      /**
+       * Set the new tab / window id
+       */
+      const new_id = tabs[tabs.length - 1]! + 1;
+      tabs.push(new_id);
+
+      options?.onTabsChange?.(tabs);
+
+      channel.postMessage({ action: "add_new_tab", id: new_id } as Message);
+
+      return;
+    }
+
+    /**
+     * Set an id for the tab / window if it doesn't have one
+     */
+    if ((e.data as Message).action === "add_new_tab" && !isMain && id === 0) {
+      id = e.data.id;
+      return;
+    }
+
+    /**
+     * On receiving a new state, update the state
+     */
+    if ((e.data as Message).action === "change") {
+      /**
+       * Update the state
+       */
+      set(e.data.state);
+
+      /**
+       * Set the synced attribute
+       */
+      isSynced = true;
+    }
+
+    /**
+     * On receiving a close message, remove the tab / window id from the list
+     */
+    if ((e.data as Message).action === "close") {
+      if (!isMain) {
+        return;
+      }
+
+      const index = tabs.indexOf(e.data.id);
+      if (index !== -1) {
+        tabs.splice(index, 1);
+
+        options?.onTabsChange?.(tabs);
+      }
+    }
+
+    /**
+     * On receiving a change_main message, change the main tab / window
+     */
+    if ((e.data as Message).action === "change_main") {
+      if (e.data.id === id) {
+        isMain = true;
+        tabs.splice(0, tabs.length, ...e.data.tabs);
+
+        options?.onBecomeMain?.(id);
+      }
+    }
+  };
+
+  /**
+   * Synchronize with the main tab
+   */
+  const synchronize = (): void => {
+    channel.postMessage({ action: "sync" } as Message);
+
+    /**
+     * If isSynced is false after 100ms, this tab is the main tab
+     */
+    setTimeout(() => {
+      if (!isSynced) {
+        isMain = true;
+        isSynced = true;
+
+        options?.onBecomeMain?.(id);
+      }
+    }, options?.mainTimeout ?? 100);
+  };
+
+  /**
+   * Handle case when the tab / window is closed
+   */
+  const onClose = (): void => {
+    channel.postMessage({ action: "close", id } as Message);
+
+    /**
+     * If we're closing the main, make the second the new main
+     */
+    if (isMain) {
+      /**
+       * If there is only one tab left, close the channel and return
+       */
+      if (tabs.length === 1) {
+        /**
+         * Clean up
+         */
+        channel.close();
+        return;
+      }
+
+      const remaining_tabs = tabs.filter((tab) => tab !== id);
+      channel.postMessage({
+        action: "change_main",
+        id: remaining_tabs[0],
+        tabs: remaining_tabs,
+      } as Message);
+
+      return;
+    }
+  };
+
+  /**
+   * Add close event listener
+   */
+  if (typeof window !== "undefined") {
+    window.addEventListener("beforeunload", onClose);
+  }
+
+  /**
+   * Synchronize with the main tab
+   */
+  if (!isSynced) {
+    synchronize();
+  }
+
+  /**
+   * Modify and return the Zustand store
+   */
+  store.setState = onSet;
+
+  return f(onSet, get, store);
+};
+
+/**
+ * Shared middleware
+ *
+ * @example
+ * import { create } from 'zustand';
+ * import { shared } from 'use-broadcast-ts';
+ *
+ * const useStore = create(
+ *      shared(
+ *          (set) => ({ count: 0 }),
+ *          { name: 'my-store' }
+ *      )
+ * );
+ */
+export const shared = sharedImpl as Shared;

package/src/lib/authentication/use-broadcast/useBroadcast.ts

@@ -0,0 +1,146 @@
+// https://github.com/Romainlg29/use-broadcast/
+import { useEffect, useRef, useState } from "react";
+
+/**
+ * Our hook will return an object with three properties:
+ * - send: a function that will send a message to all other tabs
+ * - state: the current state of the broadcast
+ * - subscribe: a function that will subscribe to the broadcast (Only if options.subscribe is true)
+ */
+export type UseBroadcastReturn<T> = {
+  send: (val: T) => void;
+  state: T | undefined;
+  subscribe: (callback: (e: T) => void) => () => void;
+};
+
+/**
+ * The options for the useBroadcast hook
+ */
+export type UseBroadcastOptions = {
+  subscribe?: boolean;
+};
+
+/**
+ *
+ * @param name The name of the broadcast channel
+ * @param val The initial value of the broadcast
+ * @returns Returns an object with three properties: send, state and subscribe
+ */
+export const useBroadcast = <T>(
+  name: string,
+  val?: T,
+  options?: UseBroadcastOptions,
+): UseBroadcastReturn<T> => {
+  /**
+   * Store the state of the broadcast
+   */
+  const [state, setState] = useState<T | undefined>(val);
+
+  /**
+   * Store the BroadcastChannel instance
+   */
+  const channel = useRef<BroadcastChannel | null>(null);
+
+  /**
+   * Store the listeners
+   */
+  const listeners = useRef<((e: T) => void)[]>([]);
+
+  /**
+   * This function send the value to all the other tabs
+   * @param val The value to send
+   */
+  const send = (val: T) => {
+    if (!channel.current) {
+      return;
+    }
+
+    /**
+     * Send the value to all the other tabs
+     */
+    channel.current.postMessage(val);
+
+    if (!options?.subscribe) {
+      setState(val);
+    }
+
+    /**
+     * Dispatch the event to the listeners
+     */
+    listeners.current.forEach((listener) => listener(val));
+  };
+
+  /**
+   * This function subscribe to the broadcast
+   * @param callback The callback function
+   * @returns Returns a function that unsubscribe the callback
+   */
+  const subscribe = (callback: (e: T) => void) => {
+    /**
+     * Add the callback to the listeners
+     */
+    listeners.current.push(callback);
+
+    /**
+     * Return a function that unsubscribe the callback
+     */
+    return () =>
+      listeners.current.splice(listeners.current.indexOf(callback), 1);
+  };
+
+  useEffect(() => {
+    /**
+     * If BroadcastChannel is not supported, we log an error and return
+     */
+    if (typeof window === "undefined") {
+      // eslint-disable-next-line no-console
+      console.error("Window is undefined!");
+      return;
+    }
+
+    if (!window.BroadcastChannel) {
+      // eslint-disable-next-line no-console
+      console.error("BroadcastChannel is not supported!");
+      return;
+    }
+
+    /**
+     * If the channel is null, we create a new one
+     */
+    if (!channel.current) {
+      channel.current = new BroadcastChannel(name);
+    }
+
+    /**
+     * Subscribe to the message event
+     * @param e The message event
+     */
+    channel.current.onmessage = (e) => {
+      /**
+       * Update the state
+       */
+      if (!options?.subscribe) {
+        setState(e.data);
+      }
+
+      /**
+       * Dispatch an event to the listeners
+       */
+      listeners.current.forEach((listener) => listener(e.data));
+    };
+
+    /**
+     * Cleanup
+     */
+    return () => {
+      if (!channel.current) {
+        return;
+      }
+
+      channel.current.close();
+      channel.current = null;
+    };
+  }, [name, options]);
+
+  return { send, state, subscribe };
+};

package/src/lib/components/AnchorLink.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Link, type LinkProps, useLocation } from "react-router-dom";
+import { Link, type LinkProps, useLocation } from "react-router";
 
 /**
  * Link that scrolls to anchor even if the hash is already set in the URL.

package/src/lib/components/Banner.tsx

@@ -9,7 +9,7 @@ const COLOR_MAP = {
   tip: "bg-green-600",
   caution: "bg-orange-500",
   danger: "bg-rose-500",
-};
+} as const;
 
 export const Banner = () => {
   const { page } = useZudoku();
@@ -19,12 +19,22 @@ export const Banner = () => {
     return <style>{`:root { --banner-height: 0px; }`}</style>;
   }
 
+  const mappedColor =
+    page.banner.color && page.banner.color in COLOR_MAP
+      ? COLOR_MAP[page.banner.color as keyof typeof COLOR_MAP]
+      : !page.banner.color
+        ? "bg-primary"
+        : undefined;
+
+  const style = !mappedColor ? { backgroundColor: page.banner.color } : {};
+
   return (
     <div
       className={cn(
         "relative text-primary-foreground text-sm font-medium px-4 py-2 flex gap-2 items-center",
-        page.banner.color ? COLOR_MAP[page.banner.color] : "bg-primary",
+        mappedColor,
       )}
+      style={style}
     >
       <div className="w-full">{page.banner.message}</div>
       {page.banner.dismissible && (

package/src/lib/components/Bootstrap.tsx

@@ -1,44 +1,64 @@
+import {
+  HydrationBoundary,
+  QueryClient,
+  QueryClientProvider,
+} from "@tanstack/react-query";
 import { type HelmetData, HelmetProvider } from "@zudoku/react-helmet-async";
 import { StrictMode } from "react";
-import { type createBrowserRouter, RouterProvider } from "react-router-dom";
 import {
+  type createBrowserRouter,
   type createStaticRouter,
   type StaticHandlerContext,
   StaticRouterProvider,
-} from "react-router-dom/server.js";
+} from "react-router";
+import { RouterProvider } from "react-router/dom";
 import { StaggeredRenderContext } from "../plugins/openapi/StaggeredRender.js";
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 5,
+    },
+  },
+});
+
 const Bootstrap = ({
   router,
   hydrate = false,
 }: {
   hydrate?: boolean;
   router: ReturnType<typeof createBrowserRouter>;
-}) => {
-  return (
-    <StrictMode>
-      <HelmetProvider>
-        <StaggeredRenderContext.Provider value={{ stagger: !hydrate }}>
-          <RouterProvider router={router} />
-        </StaggeredRenderContext.Provider>
-      </HelmetProvider>
-    </StrictMode>
-  );
-};
+}) => (
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <HydrationBoundary state={hydrate ? (window as any).DATA : undefined}>
+        <HelmetProvider>
+          <StaggeredRenderContext.Provider value={{ stagger: !hydrate }}>
+            <RouterProvider router={router} />
+          </StaggeredRenderContext.Provider>
+        </HelmetProvider>
+      </HydrationBoundary>
+    </QueryClientProvider>
+  </StrictMode>
+);
 
 const BootstrapStatic = ({
   router,
   context,
+  queryClient,
   helmetContext,
 }: {
   helmetContext: HelmetData["context"];
   context: StaticHandlerContext;
+  queryClient: QueryClient;
   router: ReturnType<typeof createStaticRouter>;
 }) => (
   <StrictMode>
-    <HelmetProvider context={helmetContext}>
-      <StaticRouterProvider router={router} context={context} />
-    </HelmetProvider>
+    <QueryClientProvider client={queryClient}>
+      <HelmetProvider context={helmetContext}>
+        <StaticRouterProvider router={router} context={context} />
+      </HelmetProvider>
+    </QueryClientProvider>
   </StrictMode>
 );