@simplysm/solid 13.0.75 → 13.0.77

package/src/components/layout/topbar/Topbar.tsx

@@ -1,42 +1,100 @@
-import { type JSX, type ParentComponent, splitProps, Show } from "solid-js";
-import { IconMenu2 } from "@tabler/icons-solidjs";
+import {
+  type JSX,
+  type ParentComponent,
+  type Component,
+  splitProps,
+  Show,
+  createContext,
+  useContext,
+  onCleanup,
+  type Accessor,
+  type Setter,
+  createSignal,
+  createMemo,
+  For,
+} from "solid-js";
+import { IconMenu2, IconChevronDown, IconDotsVertical, type IconProps } from "@tabler/icons-solidjs";
 import clsx from "clsx";
 import { Icon } from "../../display/Icon";
 import { twMerge } from "tailwind-merge";
 import { Button } from "../../form-control/Button";
-import { useSidebarContextOptional } from "../sidebar/SidebarContext";
-import { useI18n } from "../../../providers/i18n/I18nContext";
-import { TopbarActions } from "./TopbarActions";
-import { TopbarContainer } from "./TopbarContainer";
-import { TopbarMenu } from "./TopbarMenu";
-import { TopbarUser } from "./TopbarUser";
-
-export type { TopbarContainerProps } from "./TopbarContainer";
-export type { TopbarMenuItem, TopbarMenuProps } from "./TopbarMenu";
-export type { TopbarUserMenu, TopbarUserProps } from "./TopbarUser";
-
-const baseClass = clsx(
-  // Layout
-  "flex",
-  "flex-row",
-  "gap-2",
-  "items-center",
-  // Size
-  "min-h-12",
-  "px-2",
-  // Background/border
-  "bg-white",
-  "dark:bg-base-900",
-  "border-b",
-  "border-base-200",
-  "dark:border-base-700",
-  // Scroll
-  "overflow-x-auto",
-  "overflow-y-hidden",
-  // Other
-  "select-none",
-);
+import { useSidebar } from "../sidebar/Sidebar";
+import { useI18n } from "../../../providers/i18n/I18nProvider";
+import { useLocation, useNavigate } from "@solidjs/router";
+import { Dropdown } from "../../disclosure/Dropdown";
+import { List } from "../../data/list/List";
+import { ListItem } from "../../data/list/ListItem";
+import { bg, border } from "../../../styles/base.styles";
+import { gap } from "../../../styles/control.styles";
 
+//#region Context
+export interface TopbarContextValue {
+  actions: Accessor<JSX.Element | undefined>;
+  setActions: Setter<JSX.Element | undefined>;
+}
+
+export const TopbarContext = createContext<TopbarContextValue>();
+
+export function useTopbarActionsAccessor(): Accessor<JSX.Element | undefined> {
+  const context = useContext(TopbarContext);
+  if (!context) {
+    throw new Error("useTopbarActionsAccessor can only be used inside Topbar.Container");
+  }
+  return context.actions;
+}
+
+export function useTopbarActions(accessor: () => JSX.Element): void {
+  const context = useContext(TopbarContext);
+  if (!context) {
+    throw new Error("useTopbarActions can only be used inside Topbar.Container");
+  }
+
+  context.setActions(() => accessor());
+
+  onCleanup(() => {
+    context.setActions(undefined);
+  });
+}
+//#endregion
+
+//#region Types
+export interface TopbarContainerProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  children: JSX.Element;
+}
+
+export interface TopbarMenuItem {
+  title: string;
+  href?: string;
+  icon?: Component<IconProps>;
+  children?: TopbarMenuItem[];
+}
+
+export interface TopbarMenuProps extends Omit<JSX.HTMLAttributes<HTMLElement>, "children"> {
+  /**
+   * Menu items array
+   */
+  menus: TopbarMenuItem[];
+}
+
+export interface TopbarUserMenu {
+  title: string;
+  onClick: () => void;
+}
+
+export interface TopbarUserProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "onClick"> {
+  /**
+   * Dropdown menu (dropdown shown only when provided)
+   */
+  menus?: TopbarUserMenu[];
+
+  /**
+   * User information area (customizable)
+   */
+  children: JSX.Element;
+}
+//#endregion
+
+//#region Topbar (Base)
 export interface TopbarProps extends JSX.HTMLAttributes<HTMLElement> {
   children: JSX.Element;
 }
@@ -59,25 +117,18 @@ export interface TopbarProps extends JSX.HTMLAttributes<HTMLElement> {
  * </Topbar>
  * ```
  */
-interface TopbarComponent extends ParentComponent<TopbarProps> {
-  Actions: typeof TopbarActions;
-  Container: typeof TopbarContainer;
-  Menu: typeof TopbarMenu;
-  User: typeof TopbarUser;
-}
-
-const TopbarBase: ParentComponent<TopbarProps> = (props) => {
+const TopbarInner: ParentComponent<TopbarProps> = (props) => {
   const [local, rest] = splitProps(props, ["children", "class"]);
 
   // Optional use of SidebarContext (toggle button not shown if Context doesn't exist)
-  const sidebarContext = useSidebarContextOptional();
+  const sidebarContext = useSidebar.optional();
   const i18n = useI18n();
 
   const handleToggle = () => {
     sidebarContext?.setToggle((v) => !v);
   };
 
-  const getClassName = () => twMerge(baseClass, local.class);
+  const getClassName = () => twMerge(clsx("flex min-h-12 flex-row items-center gap-2 px-2", bg.surface, "border-b", border.default, "select-none overflow-x-auto overflow-y-hidden"), local.class);
 
   return (
     <header {...rest} data-topbar class={getClassName()}>
@@ -90,9 +141,329 @@ const TopbarBase: ParentComponent<TopbarProps> = (props) => {
     </header>
   );
 };
+//#endregion
+
+//#region TopbarContainer
+
+/**
+ * Layout container wrapping Topbar and content area
+ *
+ * @remarks
+ * - Uses `flex flex-col h-full` structure to vertically layout Topbar and content
+ * - Shares actions state via TopbarContext.Provider
+ * - Parent element must have height specified
+ *
+ * @example
+ * ```tsx
+ * <TopbarContainer>
+ *   <Topbar>
+ *     <h1>App Name</h1>
+ *     <TopbarMenu menus={menuItems} />
+ *   </Topbar>
+ *   <main class="flex-1 overflow-auto">Content</main>
+ * </TopbarContainer>
+ * ```
+ */
+const TopbarContainer: ParentComponent<TopbarContainerProps> = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class"]);
+  const [actions, setActions] = createSignal<JSX.Element | undefined>(undefined);
+
+  const getClassName = () => twMerge("flex h-full flex-col", local.class);
+
+  return (
+    <TopbarContext.Provider value={{ actions, setActions }}>
+      <div {...rest} data-topbar-container class={getClassName()}>
+        {local.children}
+      </div>
+    </TopbarContext.Provider>
+  );
+};
+//#endregion
+
+//#region TopbarMenu
+
+/**
+ * Topbar dropdown menu component
+ *
+ * @remarks
+ * - Items with children: show dropdown on click
+ * - Items without children: navigate directly on click
+ * - External links (containing ://): open in new tab
+ * - Selection determined by exact pathname match
+ * - Submenus rendered with List/ListItem (all levels expanded)
+ *
+ * @example
+ * ```tsx
+ * <TopbarMenu menus={[
+ *   { title: "Dashboard", href: "/dashboard", icon: IconHome },
+ *   {
+ *     title: "Menu 1",
+ *     icon: IconFolder,
+ *     children: [
+ *       { title: "Submenu 1", href: "/menu1/sub1" },
+ *       { title: "Submenu 2", href: "/menu1/sub2" },
+ *     ],
+ *   },
+ * ]} />
+ * ```
+ */
+const TopbarMenu: Component<TopbarMenuProps> = (props) => {
+  const [local, rest] = splitProps(props, ["menus", "class"]);
+  const [mobileMenuOpen, setMobileMenuOpen] = createSignal(false);
+  const i18n = useI18n();
+
+  return (
+    <>
+      {/* Desktop menu (shown only on 640px and above) */}
+      <nav {...rest} data-topbar-menu class={twMerge(clsx("hidden flex-row sm:flex", gap.default, "items-center"), local.class)}>
+        <For each={local.menus}>{(menu) => <TopbarMenuButton menu={menu} />}</For>
+      </nav>
+
+      {/* Mobile hamburger (shown only below 640px) */}
+      <div class="flex sm:hidden">
+        <Dropdown open={mobileMenuOpen()} onOpenChange={setMobileMenuOpen}>
+          <Dropdown.Trigger>
+            <Button
+              variant="ghost"
+              aria-label={i18n.t("topbarMenu.menu")}
+              aria-haspopup="menu"
+              aria-expanded={mobileMenuOpen()}
+            >
+              <Icon icon={IconDotsVertical} size="1.25em" />
+            </Button>
+          </Dropdown.Trigger>
+          <Dropdown.Content>
+            <List inset>
+              <For each={local.menus}>
+                {(menu) => (
+                  <TopbarMenuDropdownItem menu={menu} onClose={() => setMobileMenuOpen(false)} />
+                )}
+              </For>
+            </List>
+          </Dropdown.Content>
+        </Dropdown>
+      </div>
+    </>
+  );
+};
+
+interface TopbarMenuButtonProps {
+  menu: TopbarMenuItem;
+}
+
+const TopbarMenuButton: Component<TopbarMenuButtonProps> = (props) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const [open, setOpen] = createSignal(false);
+
+  const hasChildren = () => props.menu.children !== undefined && props.menu.children.length > 0;
+  const isExternalLink = () => props.menu.href?.includes("://") ?? false;
+
+  const isAnyChildSelected = (items: TopbarMenuItem[]): boolean => {
+    for (const item of items) {
+      if (item.href === location.pathname) return true;
+      if (item.children && isAnyChildSelected(item.children)) return true;
+    }
+    return false;
+  };
+
+  // Check if current menu or submenu is selected (cached with createMemo)
+  const isSelected = createMemo(() => {
+    if (props.menu.href === location.pathname) return true;
+    if (props.menu.children) {
+      return isAnyChildSelected(props.menu.children);
+    }
+    return false;
+  });
+
+  const handleNavigate = () => {
+    if (props.menu.href !== undefined) {
+      if (isExternalLink()) {
+        window.open(props.menu.href, "_blank", "noopener,noreferrer");
+      } else {
+        navigate(props.menu.href);
+      }
+    }
+  };
+
+  const buttonContent = () => (
+    <Button
+      variant={isSelected() ? "solid" : "ghost"}
+      theme={isSelected() ? "primary" : "base"}
+      class={clsx("flex items-center", gap.default)}
+      aria-haspopup={hasChildren() ? "menu" : undefined}
+      aria-expanded={hasChildren() ? open() : undefined}
+      onClick={hasChildren() ? undefined : handleNavigate}
+    >
+      <Show when={props.menu.icon}>
+        <Icon icon={props.menu.icon!} />
+      </Show>
+      <span>{props.menu.title}</span>
+      <Show when={hasChildren()}>
+        <Icon
+          icon={IconChevronDown}
+          size="1em"
+          class={clsx("transition-transform", open() && "rotate-180")}
+        />
+      </Show>
+    </Button>
+  );
+
+  return (
+    <Show when={hasChildren()} fallback={buttonContent()}>
+      <Dropdown open={open()} onOpenChange={setOpen}>
+        <Dropdown.Trigger>{buttonContent()}</Dropdown.Trigger>
+        <Dropdown.Content>
+          <List inset>
+            <For each={props.menu.children}>
+              {(child) => <TopbarMenuDropdownItem menu={child} onClose={() => setOpen(false)} />}
+            </For>
+          </List>
+        </Dropdown.Content>
+      </Dropdown>
+    </Show>
+  );
+};
+
+interface TopbarMenuDropdownItemProps {
+  menu: TopbarMenuItem;
+  onClose: () => void;
+}
+
+const TopbarMenuDropdownItem: Component<TopbarMenuDropdownItemProps> = (props) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const hasChildren = () => props.menu.children !== undefined && props.menu.children.length > 0;
+  const isExternalLink = () => props.menu.href?.includes("://") ?? false;
+  const isSelected = () => props.menu.href === location.pathname;
+
+  const handleClick = () => {
+    if (props.menu.href !== undefined) {
+      if (isExternalLink()) {
+        window.open(props.menu.href, "_blank", "noopener,noreferrer");
+      } else {
+        navigate(props.menu.href);
+      }
+      props.onClose();
+    }
+    // if no href but has children, clicking doesn't close the menu
+  };
+
+  return (
+    <ListItem
+      selected={isSelected()}
+      readOnly={props.menu.href === undefined && hasChildren()}
+      onClick={handleClick}
+    >
+      <Show when={props.menu.icon}>
+        <Icon icon={props.menu.icon!} />
+      </Show>
+      <span class="truncate">{props.menu.title}</span>
+      <Show when={hasChildren()}>
+        <ListItem.Children>
+          <For each={props.menu.children}>
+            {(child) => <TopbarMenuDropdownItem menu={child} onClose={props.onClose} />}
+          </For>
+        </ListItem.Children>
+      </Show>
+    </ListItem>
+  );
+};
+//#endregion
+
+//#region TopbarUser
+
+/**
+ * Topbar user information component
+ *
+ * @remarks
+ * - Customize user info display with children
+ * - When menus provided, click shows Dropdown menu
+ * - Uses Button's ghost style
+ *
+ * @example
+ * ```tsx
+ * <TopbarUser menus={[
+ *   { title: "Profile", onClick: () => navigate("/profile") },
+ *   { title: "Logout", onClick: handleLogout },
+ * ]}>
+ *   <span>Username</span>
+ * </TopbarUser>
+ * ```
+ */
+const TopbarUser: ParentComponent<TopbarUserProps> = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class", "menus"]);
+
+  const [open, setOpen] = createSignal(false);
+
+  const hasMenus = () => local.menus !== undefined && local.menus.length > 0;
+
+  const handleMenuClick = (menu: TopbarUserMenu) => {
+    setOpen(false);
+    menu.onClick();
+  };
+
+  const getClassName = () => twMerge("flex items-center", local.class);
+
+  const buttonContent = () => (
+    <Button
+      variant="ghost"
+      class={clsx("flex items-center", gap.default)}
+      aria-haspopup={hasMenus() ? "menu" : undefined}
+      aria-expanded={hasMenus() ? open() : undefined}
+    >
+      {local.children}
+      <Show when={hasMenus()}>
+        <Icon
+          icon={IconChevronDown}
+          size="1em"
+          class={clsx("transition-transform", open() && "rotate-180")}
+        />
+      </Show>
+    </Button>
+  );
+
+  return (
+    <div {...rest} data-topbar-user class={getClassName()}>
+      <Show when={hasMenus()} fallback={buttonContent()}>
+        <Dropdown open={open()} onOpenChange={setOpen}>
+          <Dropdown.Trigger>{buttonContent()}</Dropdown.Trigger>
+          <Dropdown.Content>
+            <List inset>
+              <For each={local.menus}>
+                {(menu) => <ListItem onClick={() => handleMenuClick(menu)}>{menu.title}</ListItem>}
+              </For>
+            </List>
+          </Dropdown.Content>
+        </Dropdown>
+      </Show>
+    </div>
+  );
+};
+//#endregion
+
+//#region TopbarActions
+/**
+ * Topbar actions display component
+ *
+ * @remarks
+ * - Used inside TopbarContainer
+ * - Displays actions set by useTopbarActions()
+ */
+const TopbarActions: Component = () => {
+  const context = useContext(TopbarContext);
+
+  return <span data-topbar-actions>{context?.actions()}</span>;
+};
+//#endregion
 
-export const Topbar = TopbarBase as TopbarComponent;
-Topbar.Actions = TopbarActions;
-Topbar.Container = TopbarContainer;
-Topbar.Menu = TopbarMenu;
-Topbar.User = TopbarUser;
+//#region Export
+export const Topbar = Object.assign(TopbarInner, {
+  Container: TopbarContainer,
+  Menu: TopbarMenu,
+  User: TopbarUser,
+  Actions: TopbarActions,
+});
+//#endregion

package/src/helpers/createAppStructure.ts

@@ -1,8 +1,8 @@
 import type { Component, ParentComponent } from "solid-js";
-import { type Accessor, createMemo, createRoot, useContext } from "solid-js";
-import { createHmrSafeContext } from "./createHmrSafeContext";
+import { type Accessor, createContext, createMemo, createRoot, useContext } from "solid-js";
 import type { IconProps } from "@tabler/icons-solidjs";
 
+//#region Types
 // ── Input Types ──
 
 export interface AppStructureGroupItem<TModule> {
@@ -81,7 +81,9 @@ export interface AppStructure<TModule> {
   allFlatPerms: AppFlatPerm<TModule>[];
   getTitleChainByHref(href: string): string[];
 }
+//#endregion
 
+//#region Type Inference
 // ── Perms Type Inference ──
 
 type PermKey<TItem> = TItem extends { code: infer C extends string }
@@ -114,7 +116,9 @@ type InferPerms<TItems extends any[]> = {
     ? InferPerms<C>
     : InferLeafPerms<Item>;
 };
+//#endregion
 
+//#region Internal Helpers
 // ── Internal Helpers ──
 
 function isGroupItem<TModule>(
@@ -140,7 +144,9 @@ function checkModules<TModule>(
 
   return true;
 }
+//#endregion
 
+//#region Routes
 // ── Routes ──
 
 function buildUsableRoutes<TModule>(
@@ -171,7 +177,9 @@ function buildUsableRoutes<TModule>(
 
   return result;
 }
+//#endregion
 
+//#region Menus
 // ── Menus ──
 
 function buildMenus<TModule>(
@@ -218,7 +226,9 @@ function flattenMenus(menus: AppMenu[], titleChain: string[] = []): AppFlatMenu[
 
   return result;
 }
+//#endregion
 
+//#region Perms
 // ── Perms ──
 
 function buildPerms<TModule>(
@@ -397,7 +407,9 @@ function buildPermsObject<TModule>(
 
   return obj;
 }
+//#endregion
 
+//#region Info
 // ── Info ──
 
 function findItemChainByCodes<TModule>(
@@ -416,7 +428,9 @@ function findItemChainByCodes<TModule>(
 
   return result;
 }
+//#endregion
 
+//#region createAppStructure
 // ── Main Function ──
 
 function buildAppStructure<TModule, const TItems extends AppStructureItem<TModule>[]>(opts: {
@@ -486,6 +500,8 @@ function buildAppStructure<TModule, const TItems extends AppStructureItem<TModul
   };
 }
 
+const AppStructureCtx = createContext<AppStructure<any>>();
+
 export function createAppStructure<TModule, const TItems extends AppStructureItem<TModule>[]>(
   getOpts: () => {
     items: TItems;
@@ -498,11 +514,9 @@ export function createAppStructure<TModule, const TItems extends AppStructureIte
 } {
   type TRet = AppStructure<TModule> & { perms: InferPerms<TItems> };
 
-  const Ctx = createHmrSafeContext<TRet>("AppStructure");
-
   const AppStructureProvider: ParentComponent = (props) => {
     const structure = buildAppStructure(getOpts());
-    return Ctx.Provider({
+    return AppStructureCtx.Provider({
       value: structure as TRet,
       get children() {
         return props.children;
@@ -511,10 +525,11 @@ export function createAppStructure<TModule, const TItems extends AppStructureIte
   };
 
   const useAppStructure = (): TRet => {
-    const ctx = useContext(Ctx);
+    const ctx = useContext(AppStructureCtx);
     if (!ctx) throw new Error("AppStructureProvider is required.");
-    return ctx;
+    return ctx as TRet;
   };
 
   return { AppStructureProvider, useAppStructure };
 }
+//#endregion

package/src/helpers/createSlot.ts

@@ -0,0 +1,45 @@
+import {
+  createContext,
+  createSignal,
+  onCleanup,
+  untrack,
+  type Accessor,
+  type ParentComponent,
+  useContext,
+} from "solid-js";
+
+export function createSlot<TItem>() {
+  const Ctx = createContext<{ add: (item: TItem) => void; remove: () => void }>();
+
+  const SlotComponent = (props: TItem) => {
+    const ctx = useContext(Ctx);
+    if (!ctx) throw new Error("SlotComponent must be rendered inside its Provider");
+    ctx.add(props);
+    onCleanup(() => ctx.remove());
+    return null;
+  };
+
+  function createSlotAccessor(): [Accessor<TItem | undefined>, ParentComponent] {
+    const [item, setItem] = createSignal<TItem | undefined>();
+
+    const Provider: ParentComponent = (providerProps) =>
+      Ctx.Provider({
+        value: {
+          add: (newItem) => {
+            if (untrack(item) !== undefined) {
+              throw new Error("Slot already occupied");
+            }
+            setItem(() => newItem);
+          },
+          remove: () => setItem(undefined),
+        },
+        get children() {
+          return providerProps.children;
+        },
+      });
+
+    return [item, Provider];
+  }
+
+  return [SlotComponent, createSlotAccessor] as const;
+}

package/src/helpers/createSlots.ts

@@ -0,0 +1,44 @@
+import {
+  createContext,
+  createSignal,
+  onCleanup,
+  type Accessor,
+  type ParentComponent,
+  useContext,
+} from "solid-js";
+
+export interface SlotRegistrar<TItem> {
+  add: (item: TItem) => void;
+  remove: (item: TItem) => void;
+}
+
+export function createSlots<TItem>() {
+  const Ctx = createContext<SlotRegistrar<TItem>>();
+
+  const SlotComponent = (props: TItem) => {
+    const ctx = useContext(Ctx);
+    if (!ctx) throw new Error("SlotComponent must be rendered inside its Provider");
+    ctx.add(props);
+    onCleanup(() => ctx.remove(props));
+    return null;
+  };
+
+  function createSlotsAccessor(): [Accessor<TItem[]>, ParentComponent] {
+    const [items, setItems] = createSignal<TItem[]>([]);
+
+    const Provider: ParentComponent = (providerProps) =>
+      Ctx.Provider({
+        value: {
+          add: (item) => setItems((prev) => [...prev, item]),
+          remove: (item) => setItems((prev) => prev.filter((i) => i !== item)),
+        },
+        get children() {
+          return providerProps.children;
+        },
+      });
+
+    return [items, Provider];
+  }
+
+  return [SlotComponent, createSlotsAccessor] as const;
+}