@simplysm/solid 13.0.75 → 13.0.77

package/src/components/layout/topbar/TopbarContext.ts

@@ -1,36 +0,0 @@
-import {
-  createContext,
-  useContext,
-  onCleanup,
-  type Accessor,
-  type JSX,
-  type Setter,
-} from "solid-js";
-
-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 createTopbarActions(accessor: () => JSX.Element): void {
-  const context = useContext(TopbarContext);
-  if (!context) {
-    throw new Error("createTopbarActions can only be used inside Topbar.Container");
-  }
-
-  context.setActions(() => accessor());
-
-  onCleanup(() => {
-    context.setActions(undefined);
-  });
-}

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

@@ -1,227 +0,0 @@
-import {
-  type Component,
-  type JSX,
-  For,
-  Show,
-  splitProps,
-  createSignal,
-  createMemo,
-} from "solid-js";
-import { useLocation, useNavigate } from "@solidjs/router";
-import { IconChevronDown, IconDotsVertical, type IconProps } from "@tabler/icons-solidjs";
-import { Icon } from "../../display/Icon";
-import clsx from "clsx";
-import { twMerge } from "tailwind-merge";
-import { Button } from "../../form-control/Button";
-import { Dropdown } from "../../disclosure/Dropdown";
-import { List } from "../../data/list/List";
-import { ListItem } from "../../data/list/ListItem";
-import { useI18n } from "../../../providers/i18n/I18nContext";
-
-const desktopNavBaseClass = clsx("hidden sm:flex", "flex-row gap-1", "items-center");
-const mobileWrapperClass = clsx("flex sm:hidden");
-const menuButtonContentClass = clsx("flex items-center", "gap-1");
-
-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[];
-}
-
-/**
- * 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" },
- *     ],
- *   },
- * ]} />
- * ```
- */
-export 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(desktopNavBaseClass, local.class)}>
-        <For each={local.menus}>{(menu) => <TopbarMenuButton menu={menu} />}</For>
-      </nav>
-
-      {/* Mobile hamburger (shown only below 640px) */}
-      <div class={mobileWrapperClass}>
-        <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={menuButtonContentClass}
-      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>
-  );
-};

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

@@ -1,97 +0,0 @@
-import { createSignal, For, type JSX, type ParentComponent, Show, splitProps } from "solid-js";
-import { IconChevronDown } 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 { Dropdown } from "../../disclosure/Dropdown";
-import { List } from "../../data/list/List";
-import { ListItem } from "../../data/list/ListItem";
-
-const wrapperBaseClass = clsx("flex items-center");
-const buttonContentClass = clsx("flex items-center", "gap-1");
-
-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;
-}
-
-/**
- * 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>
- * ```
- */
-export 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(wrapperBaseClass, local.class);
-
-  const buttonContent = () => (
-    <Button
-      variant="ghost"
-      class={buttonContentClass}
-      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>
-  );
-};

package/src/helpers/createHmrSafeContext.ts

@@ -1,8 +0,0 @@
-import { type Context, createContext } from "solid-js";
-
-const CACHE_KEY = "__simplysm_ctx__";
-const cache = ((globalThis as unknown as Record<string, Record<string, unknown>>)[CACHE_KEY] ??= {});
-
-export function createHmrSafeContext<TValue>(key: string): Context<TValue | undefined> {
-  return (cache[key] ??= createContext<TValue>()) as Context<TValue | undefined>;
-}

package/src/helpers/createSlotComponent.ts

@@ -1,23 +0,0 @@
-import { type Context, type ParentComponent, onCleanup, useContext } from "solid-js";
-import type { JSX } from "solid-js";
-
-type SlotSetter = (value: (() => JSX.Element) | undefined) => void;
-
-/**
- * Factory function that creates a slot registration component.
- *
- * @param context - Context to register the slot in
- * @param getSetter - Function to extract the setter from the context value
- */
-export function createSlotComponent<TCtx>(
-  context: Context<TCtx | undefined>,
-  getSetter: (ctx: TCtx) => SlotSetter,
-): ParentComponent {
-  return (props) => {
-    const ctx = useContext(context)!;
-    // eslint-disable-next-line solid/reactivity -- Slot registration runs only once on initial mount
-    getSetter(ctx)(() => props.children);
-    onCleanup(() => getSetter(ctx)(undefined));
-    return null;
-  };
-}

package/src/hooks/createSelectionGroup.tsx

@@ -1,241 +0,0 @@
-import {
-  type JSX,
-  type ParentComponent,
-  createMemo,
-  splitProps,
-  useContext,
-} from "solid-js";
-import { createHmrSafeContext } from "../helpers/createHmrSafeContext";
-import { twMerge } from "tailwind-merge";
-import { createControllableSignal } from "./createControllableSignal";
-import { Invalid } from "../components/form-control/Invalid";
-import type { CheckboxSize } from "../components/form-control/checkbox/Checkbox.styles";
-import { useI18n } from "../providers/i18n/I18nContext";
-
-interface SelectionItemComponentProps {
-  value: boolean;
-  onValueChange?: (value: boolean) => void;
-  disabled?: boolean;
-  size?: CheckboxSize;
-  inline?: boolean;
-  inset?: boolean;
-  children?: JSX.Element;
-}
-
-interface SelectionGroupContextBase {
-  disabled: () => boolean;
-  size: () => CheckboxSize | undefined;
-  inline: () => boolean;
-  inset: () => boolean;
-}
-
-interface MultiSelectContext extends SelectionGroupContextBase {
-  value: () => unknown[];
-  toggle: (item: unknown) => void;
-}
-
-interface SingleSelectContext extends SelectionGroupContextBase {
-  value: () => unknown | undefined;
-  select: (item: unknown) => void;
-}
-
-interface MultiGroupConfig {
-  mode: "multiple";
-  contextName: string;
-  ItemComponent: (props: SelectionItemComponentProps) => JSX.Element;
-  emptyErrorMsgKey: string;
-}
-
-interface SingleGroupConfig {
-  mode: "single";
-  contextName: string;
-  ItemComponent: (props: SelectionItemComponentProps) => JSX.Element;
-  emptyErrorMsgKey: string;
-}
-
-interface SelectionGroupItemProps<TValue> {
-  value: TValue;
-  disabled?: boolean;
-  children?: JSX.Element;
-}
-
-interface MultiGroupProps<TValue> {
-  value?: TValue[];
-  onValueChange?: (value: TValue[]) => void;
-  disabled?: boolean;
-  size?: CheckboxSize;
-  inline?: boolean;
-  inset?: boolean;
-  required?: boolean;
-  validate?: (value: TValue[]) => string | undefined;
-  touchMode?: boolean;
-  class?: string;
-  style?: JSX.CSSProperties;
-  children?: JSX.Element;
-}
-
-interface SingleGroupProps<TValue> {
-  value?: TValue;
-  onValueChange?: (value: TValue) => void;
-  disabled?: boolean;
-  size?: CheckboxSize;
-  inline?: boolean;
-  inset?: boolean;
-  required?: boolean;
-  validate?: (value: TValue | undefined) => string | undefined;
-  touchMode?: boolean;
-  class?: string;
-  style?: JSX.CSSProperties;
-  children?: JSX.Element;
-}
-
-export function createSelectionGroup(config: MultiGroupConfig): {
-  Group: {
-    <TValue = unknown>(props: MultiGroupProps<TValue>): JSX.Element;
-    Item: <TValue = unknown>(props: SelectionGroupItemProps<TValue>) => JSX.Element;
-  };
-};
-export function createSelectionGroup(config: SingleGroupConfig): {
-  Group: {
-    <TValue = unknown>(props: SingleGroupProps<TValue>): JSX.Element;
-    Item: <TValue = unknown>(props: SelectionGroupItemProps<TValue>) => JSX.Element;
-  };
-};
-export function createSelectionGroup(config: MultiGroupConfig | SingleGroupConfig): {
-  Group: {
-    <TValue = unknown>(props: MultiGroupProps<TValue> | SingleGroupProps<TValue>): JSX.Element;
-    Item: <TValue = unknown>(props: SelectionGroupItemProps<TValue>) => JSX.Element;
-  };
-} {
-  const Context = createHmrSafeContext<MultiSelectContext | SingleSelectContext>(
-    `SelectionGroup_${config.contextName}`,
-  );
-  const ItemComponent = config.ItemComponent;
-
-  function ItemInner<TValue>(props: SelectionGroupItemProps<TValue>) {
-    const ctx = useContext(Context);
-    if (!ctx)
-      throw new Error(
-        `${config.contextName}.Item can only be used inside ${config.contextName}`,
-      );
-
-    const isSelected = (): boolean => {
-      if (config.mode === "multiple") {
-        return (ctx as MultiSelectContext).value().includes(props.value);
-      }
-      return (ctx as SingleSelectContext).value() === props.value;
-    };
-
-    const handleChange = () => {
-      if (config.mode === "multiple") {
-        (ctx as MultiSelectContext).toggle(props.value);
-      } else {
-        (ctx as SingleSelectContext).select(props.value);
-      }
-    };
-
-    return (
-      <ItemComponent
-        value={isSelected()}
-        onValueChange={handleChange}
-        disabled={props.disabled ?? ctx.disabled()}
-        size={ctx.size()}
-        inline={ctx.inline()}
-        inset={ctx.inset()}
-      >
-        {props.children}
-      </ItemComponent>
-    );
-  }
-
-  const GroupInner: ParentComponent<MultiGroupProps<unknown>> = (props) => {
-    const i18n = useI18n();
-    const resolvedErrorMsg = () => i18n.t(config.emptyErrorMsgKey);
-
-    const [local, rest] = splitProps(props, [
-      "value",
-      "onValueChange",
-      "disabled",
-      "size",
-      "inline",
-      "inset",
-      "required",
-      "validate",
-      "touchMode",
-      "class",
-      "style",
-      "children",
-    ]);
-
-    let contextValue: MultiSelectContext | SingleSelectContext;
-
-    if (config.mode === "multiple") {
-      const [value, setValue] = createControllableSignal<unknown[]>({
-        value: () => local.value ?? [],
-        onChange: () => local.onValueChange as ((v: unknown[]) => void) | undefined,
-      });
-      const toggle = (item: unknown) => {
-        setValue((prev) => {
-          if (prev.includes(item)) return prev.filter((v) => v !== item);
-          return [...prev, item];
-        });
-      };
-      contextValue = {
-        value,
-        toggle,
-        disabled: () => local.disabled ?? false,
-        size: () => local.size,
-        inline: () => local.inline ?? false,
-        inset: () => local.inset ?? false,
-      };
-    } else {
-      const [value, setValue] = createControllableSignal<unknown>({
-        value: () => local.value as unknown | undefined,
-        onChange: () => local.onValueChange as ((v: unknown) => void) | undefined,
-      });
-      const select = (item: unknown) => {
-        setValue(item);
-      };
-      contextValue = {
-        value,
-        select,
-        disabled: () => local.disabled ?? false,
-        size: () => local.size,
-        inline: () => local.inline ?? false,
-        inset: () => local.inset ?? false,
-      };
-    }
-
-    const errorMsg = createMemo(() => {
-      if (config.mode === "multiple") {
-        const v = local.value ?? [];
-        if (local.required && v.length === 0) return resolvedErrorMsg();
-        return (local.validate as ((v: unknown[]) => string | undefined) | undefined)?.(v);
-      } else {
-        const v = local.value as unknown | undefined;
-        if (local.required && (v === undefined || v === null)) return resolvedErrorMsg();
-        return (local.validate as ((v: unknown | undefined) => string | undefined) | undefined)?.(
-          v,
-        );
-      }
-    });
-
-    return (
-      <Invalid message={errorMsg()} variant="dot" touchMode={local.touchMode}>
-        <Context.Provider value={contextValue}>
-          <div {...rest} class={twMerge("inline-flex", local.class)} style={local.style}>
-            {local.children}
-          </div>
-        </Context.Provider>
-      </Invalid>
-    );
-  };
-
-  const Group = GroupInner as unknown as {
-    <TValue = unknown>(props: MultiGroupProps<TValue> | SingleGroupProps<TValue>): JSX.Element;
-    Item: <TValue = unknown>(props: SelectionGroupItemProps<TValue>) => JSX.Element;
-  };
-  Group.Item = ItemInner;
-
-  return { Group };
-}

package/src/hooks/createSlotSignal.ts

@@ -1,14 +0,0 @@
-import { createSignal, type Accessor, type JSX } from "solid-js";
-
-export type SlotAccessor = (() => JSX.Element) | undefined;
-
-/**
- * Creates a signal for slot registration.
- *
- * @returns [accessor, setter] -- setter is wrapped to store a function as a value
- */
-export function createSlotSignal(): [Accessor<SlotAccessor>, (content: SlotAccessor) => void] {
-  const [slot, _setSlot] = createSignal<SlotAccessor>();
-  const setSlot = (content: SlotAccessor) => _setSlot(() => content);
-  return [slot, setSlot];
-}

package/src/providers/ServiceClientContext.ts

@@ -1,32 +0,0 @@
-import { createContext, useContext } from "solid-js";
-import type { ServiceClient, ServiceConnectionConfig } from "@simplysm/service-client";
-
-/**
- * WebSocket service client context value.
- */
-export interface ServiceClientContextValue {
-  /** Open a WebSocket connection (defaults to "default" if key is omitted) */
-  connect: (key?: string, options?: Partial<ServiceConnectionConfig>) => Promise<void>;
-  /** Close a connection */
-  close: (key?: string) => Promise<void>;
-  /** Get a connected client instance (throws if the key is not connected) */
-  get: (key?: string) => ServiceClient;
-  /** Check connection status */
-  isConnected: (key?: string) => boolean;
-}
-
-/** WebSocket service client Context */
-export const ServiceClientContext = createContext<ServiceClientContextValue>();
-
-/**
- * Hook to access the WebSocket service client.
- *
- * @throws Throws an error if ServiceClientProvider is not present
- */
-export function useServiceClient(): ServiceClientContextValue {
-  const context = useContext(ServiceClientContext);
-  if (!context) {
-    throw new Error("useServiceClient can only be used inside ServiceClientProvider");
-  }
-  return context;
-}