zudoku 0.0.0-fed343e → 0.0.0-ff27e7ea

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

@@ -0,0 +1,372 @@
+// https://github.com/Romainlg29/use-broadcast/
+
+import type { 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
+    )
+  ) {
+    // biome-ignore lint/suspicious/noConsole: Logging allowed here
+    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") {
+    // biome-ignore lint/suspicious/noConsole: Logging allowed here
+    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] ?? 0) + 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") {
+      // biome-ignore lint/suspicious/noConsole: Logging allowed here
+      console.error("Window is undefined!");
+      return;
+    }
+
+    if (!window.BroadcastChannel) {
+      // biome-ignore lint/suspicious/noConsole: Logging allowed here
+      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,19 +1,24 @@
-import React from "react";
-import { Link, type LinkProps, useLocation } from "react-router-dom";
+import type { MouseEvent } from "react";
+import { NavLink, type NavLinkProps, useHref, useLocation } from "react-router";
+import { useScrollToHash } from "../util/useScrollToAnchor.js";
 
 /**
  * Link that scrolls to anchor even if the hash is already set in the URL.
  */
-export const AnchorLink = (props: LinkProps) => {
+export const AnchorLink = (props: NavLinkProps) => {
   const location = useLocation();
-  const hash = typeof props.to === "string" ? props.to : props.to.hash;
+  const scrollToHash = useScrollToHash();
+  const href = useHref(props.to);
+  const [pathname, hash] = href.split("#");
 
-  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
-    if (!hash?.startsWith("#") || hash !== location.hash) return;
+  const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {
+    props.onClick?.(event);
+    if (hash !== location.hash.slice(1) || pathname !== location.pathname)
+      return;
 
     event.preventDefault();
-    document.getElementById(hash.slice(1))?.scrollIntoView();
+    scrollToHash(hash);
   };
 
-  return <Link onClick={handleClick} {...props} />;
+  return <NavLink {...props} onClick={handleClick} />;
 };

package/src/lib/components/Autocomplete.tsx

@@ -0,0 +1,123 @@
+import { PopoverAnchor } from "@radix-ui/react-popover";
+import { useCommandState } from "cmdk";
+import { type KeyboardEvent, type Ref, useRef, useState } from "react";
+import {
+  Command,
+  CommandInlineInput,
+  CommandItem,
+  CommandList,
+} from "zudoku/ui/Command.js";
+import { Popover, PopoverContent } from "zudoku/ui/Popover.js";
+import { cn } from "../util/cn.js";
+
+type AutocompleteProps = {
+  value?: string | number | readonly string[] | undefined;
+  options: readonly string[];
+  onChange: (e: string) => void;
+  onSelect?: (e: string) => void;
+  className?: string;
+  placeholder?: string;
+  onEnterPress?: (e: KeyboardEvent<HTMLInputElement>) => void;
+  onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
+  ref?: Ref<HTMLInputElement>;
+  shouldFilter?: boolean;
+};
+
+const AutocompletePopover = ({
+  value,
+  options,
+  onChange,
+  className,
+  placeholder = "Value",
+  onEnterPress,
+  onKeyDown,
+  ref,
+  onSelect,
+}: AutocompleteProps) => {
+  const [open, setOpen] = useState(false);
+  const [dontClose, setDontClose] = useState(false);
+  const count = useCommandState((state) => state.filtered.count);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <Popover open={open}>
+      <PopoverAnchor>
+        <CommandInlineInput
+          autoComplete="off"
+          ref={(el) => {
+            inputRef.current = el;
+            if (typeof ref === "function") {
+              ref(el);
+            } else if (ref) {
+              ref.current = el;
+            }
+          }}
+          value={value ? String(value) : undefined}
+          placeholder={placeholder}
+          className={cn("h-9 bg-transparent", className)}
+          onFocus={() => setOpen(true)}
+          onBlur={() => {
+            if (dontClose) {
+              return;
+            }
+            setOpen(false);
+          }}
+          onKeyDown={(e) => {
+            onKeyDown?.(e);
+
+            if (e.defaultPrevented) return;
+
+            if (e.key === "Enter") {
+              setOpen(false);
+              inputRef.current?.blur();
+              onEnterPress?.(e);
+            }
+          }}
+          onValueChange={(e) => onChange(e)}
+        />
+      </PopoverAnchor>
+      <PopoverContent
+        onMouseEnter={() => setDontClose(true)}
+        onMouseLeave={() => setDontClose(false)}
+        onOpenAutoFocus={(e) => e.preventDefault()}
+        className={cn("p-0 w-(--radix-popover-trigger-width)", {
+          "border-0": count === 0,
+        })}
+        align="start"
+        side="bottom"
+        onWheel={(e) => {
+          // See: https://github.com/radix-ui/primitives/issues/1159
+          e.stopPropagation();
+        }}
+        onTouchMove={(e) => {
+          e.stopPropagation();
+        }}
+      >
+        <CommandList className="max-h-[140px]">
+          {options.map((enumValue) => (
+            <CommandItem
+              key={enumValue}
+              value={enumValue}
+              onSelect={(selected) => {
+                onSelect?.(selected);
+                onChange(selected);
+                setOpen(false);
+              }}
+              className="cursor-pointer"
+            >
+              {enumValue}
+            </CommandItem>
+          ))}
+        </CommandList>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export const Autocomplete = ({ shouldFilter, ...props }: AutocompleteProps) => {
+  return (
+    <Command className="bg-transparent" shouldFilter={shouldFilter}>
+      <AutocompletePopover {...props} />
+    </Command>
+  );
+};

package/src/lib/components/Banner.tsx

@@ -9,28 +9,38 @@ const COLOR_MAP = {
   tip: "bg-green-600",
   caution: "bg-orange-500",
   danger: "bg-rose-500",
-};
+} as const;
 
 export const Banner = () => {
-  const { page } = useZudoku();
+  const { site: page } = useZudoku();
   const [isBannerOpen, setIsBannerOpen] = useState(true);
 
   if (!page?.banner || !isBannerOpen) {
     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",
+        "relative text-primary-foreground text-sm font-medium px-4 py-2 flex gap-2 items-center lg:h-(--banner-height)",
+        mappedColor,
       )}
+      style={style}
     >
       <div className="w-full">{page.banner.message}</div>
       {page.banner.dismissible && (
         <button
           type="button"
-          className="md:absolute md:right-4 -m-1.5 p-1.5 hover:bg-accent-foreground/10 rounded-md"
+          className="md:absolute md:end-4 -m-1.5 p-1.5 hover:bg-accent-foreground/10 rounded-md"
           onClick={() => setIsBannerOpen(false)}
         >
           <CircleXIcon size={16} />