@simplysm/solid 13.0.75 → 13.0.76

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;
-}

package/src/providers/shared-data/SharedDataContext.ts

@@ -1,91 +0,0 @@
-import { type Accessor, createContext, useContext } from "solid-js";
-
-/**
- * Shared data definition.
- *
- * @remarks
- * Passed to SharedDataProvider to set up server data subscriptions.
- */
-export interface SharedDataDefinition<TData> {
-  /** Service connection key (defaults to "default" if omitted) */
-  serviceKey?: string;
-  /** Data fetch function (partial refresh for specified changeKeys only) */
-  fetch: (changeKeys?: Array<string | number>) => Promise<TData[]>;
-  /** Function to extract the unique key from an item */
-  getKey: (item: TData) => string | number;
-  /** Sort criteria array (multiple criteria supported) */
-  orderBy: [(item: TData) => unknown, "asc" | "desc"][];
-  /** Server event filter (receives only events with matching filter among same-name events) */
-  filter?: unknown;
-  /** Function to extract search text from an item */
-  getSearchText?: (item: TData) => string;
-  /** Function to determine if an item is hidden */
-  getIsHidden?: (item: TData) => boolean;
-  /** Function to extract parent key from an item (tree structure support) */
-  getParentKey?: (item: TData) => string | number | undefined;
-}
-
-/**
- * Shared data accessor.
- *
- * @remarks
- * Provides reactive access and change notifications for each data key.
- */
-export interface SharedDataAccessor<TData> {
-  /** Reactive items array */
-  items: Accessor<TData[]>;
-  /** Get a single item by key */
-  get: (key: string | number | undefined) => TData | undefined;
-  /** Propagate change event to server (triggers refetch for all subscribers) */
-  emit: (changeKeys?: Array<string | number>) => Promise<void>;
-  /** Function to extract the unique key from an item */
-  getKey: (item: TData) => string | number;
-  /** Function to extract search text from an item */
-  getSearchText?: (item: TData) => string;
-  /** Function to determine if an item is hidden */
-  getIsHidden?: (item: TData) => boolean;
-  /** Function to extract parent key from an item (tree structure support) */
-  getParentKey?: (item: TData) => string | number | undefined;
-}
-
-/**
- * Shared data context value.
- *
- * @remarks
- * - Before configure: only wait, busy, configure are accessible. Data access throws
- * - After configure: includes SharedDataAccessor per data key and overall state management methods
- */
-export type SharedDataValue<TSharedData extends Record<string, unknown>> = {
-  [K in keyof TSharedData]: SharedDataAccessor<TSharedData[K]>;
-} & {
-  /** Wait until all initial fetches complete */
-  wait: () => Promise<void>;
-  /** Whether a fetch is in progress */
-  busy: Accessor<boolean>;
-  /** Set definitions to start data subscriptions (decorator pattern) */
-  configure: (
-    fn: (origin: {
-      [K in keyof TSharedData]: SharedDataDefinition<TSharedData[K]>;
-    }) => {
-      [K in keyof TSharedData]: SharedDataDefinition<TSharedData[K]>;
-    },
-  ) => void;
-};
-
-/** Shared data Context */
-export const SharedDataContext = createContext<SharedDataValue<Record<string, unknown>>>();
-
-/**
- * Hook to access shared data.
- *
- * @throws Throws an error if SharedDataProvider is not present
- */
-export function useSharedData<
-  TSharedData extends Record<string, unknown> = Record<string, unknown>,
->(): SharedDataValue<TSharedData> {
-  const context = useContext(SharedDataContext);
-  if (!context) {
-    throw new Error("useSharedData can only be used inside SharedDataProvider");
-  }
-  return context as unknown as SharedDataValue<TSharedData>;
-}

package/src/styles/patterns.styles.ts

@@ -1,50 +0,0 @@
-import clsx from "clsx";
-import { borderDefault, textDefault, textPlaceholder } from "./tokens.styles";
-
-// ── Icon Button Common ──
-export const iconButtonBase = clsx(
-  "inline-flex items-center justify-center",
-  "cursor-pointer",
-  "rounded",
-  "transition-colors",
-  "text-base-600 dark:text-base-300",
-  "hover:bg-base-200 dark:hover:bg-base-700",
-  "focus:outline-none",
-  "focus-visible:ring-2",
-);
-
-// ── Inset Focus Outline (focus-within variant: Field, TextArea) ──
-export const insetFocusOutline = clsx(
-  "focus-within:[outline-style:solid]",
-  "focus-within:outline-1 focus-within:-outline-offset-1",
-  "focus-within:outline-primary-400 dark:focus-within:outline-primary-400",
-);
-
-// ── Inset Focus Outline (focus variant: Checkbox, Select trigger) ──
-export const insetFocusOutlineSelf = clsx(
-  "focus:[outline-style:solid]",
-  "focus:outline-1 focus:-outline-offset-1",
-  "focus:outline-primary-400 dark:focus:outline-primary-400",
-);
-
-// ── Inset Base Layout ──
-export const insetBase = "w-full rounded-none border-none";
-
-// ── Form Field Common Surface (background + text + border + focus) ──
-export const fieldSurface = clsx(
-  "bg-primary-50 dark:bg-primary-950/30",
-  textDefault,
-  "border",
-  borderDefault,
-  "rounded",
-  "focus-within:border-primary-500 dark:focus-within:border-primary-400",
-);
-
-// ── Input Element Common ──
-export const inputBase = clsx(
-  "min-w-0 flex-1",
-  "bg-transparent",
-  "outline-none",
-  "[text-decoration:inherit]",
-  textPlaceholder,
-);

package/src/styles/tokens.styles.ts

@@ -1,86 +0,0 @@
-// ── Border ──
-export const borderDefault = "border-base-200 dark:border-base-700";
-export const borderSubtle = "border-base-200 dark:border-base-700";
-
-// ── Surface Background ──
-export const bgSurface = "bg-white dark:bg-base-900";
-
-// ── Text ──
-export const textDefault = "text-base-900 dark:text-base-100";
-export const textMuted = "text-base-400 dark:text-base-500";
-export const textPlaceholder = "placeholder:text-base-400 dark:placeholder:text-base-500";
-
-// ── disabled ──
-export const disabledOpacity = "cursor-default opacity-30 pointer-events-none";
-
-// ── Size ──
-export type ComponentSize = "xs" | "sm" | "lg" | "xl";
-export type ComponentSizeCompact = "sm" | "lg";
-export const paddingXs = "px-1 py-0";
-export const paddingSm = "px-1.5 py-0.5";
-export const paddingLg = "px-3 py-2";
-export const paddingXl = "px-4 py-3";
-
-// ── Theme ──
-export type SemanticTheme = "primary" | "info" | "success" | "warning" | "danger" | "base";
-
-export const themeTokens: Record<
-  SemanticTheme,
-  {
-    solid: string;
-    solidHover: string;
-    light: string;
-    text: string;
-    hoverBg: string;
-    border: string;
-  }
-> = {
-  primary: {
-    solid: "bg-primary-500 text-white",
-    solidHover: "hover:bg-primary-600 dark:hover:bg-primary-400",
-    light: "bg-primary-100 text-primary-900 dark:bg-primary-900/40 dark:text-primary-100",
-    text: "text-primary-600 dark:text-primary-400",
-    hoverBg: "hover:bg-primary-100 dark:hover:bg-primary-800/30",
-    border: "border-primary-300 dark:border-primary-600",
-  },
-  info: {
-    solid: "bg-info-500 text-white",
-    solidHover: "hover:bg-info-600 dark:hover:bg-info-400",
-    light: "bg-info-100 text-info-900 dark:bg-info-900/40 dark:text-info-100",
-    text: "text-info-600 dark:text-info-400",
-    hoverBg: "hover:bg-info-100 dark:hover:bg-info-800/30",
-    border: "border-info-300 dark:border-info-600",
-  },
-  success: {
-    solid: "bg-success-500 text-white",
-    solidHover: "hover:bg-success-600 dark:hover:bg-success-400",
-    light: "bg-success-100 text-success-900 dark:bg-success-900/40 dark:text-success-100",
-    text: "text-success-600 dark:text-success-400",
-    hoverBg: "hover:bg-success-100 dark:hover:bg-success-800/30",
-    border: "border-success-300 dark:border-success-600",
-  },
-  warning: {
-    solid: "bg-warning-500 text-white",
-    solidHover: "hover:bg-warning-600 dark:hover:bg-warning-400",
-    light: "bg-warning-100 text-warning-900 dark:bg-warning-900/40 dark:text-warning-100",
-    text: "text-warning-600 dark:text-warning-400",
-    hoverBg: "hover:bg-warning-100 dark:hover:bg-warning-800/30",
-    border: "border-warning-300 dark:border-warning-600",
-  },
-  danger: {
-    solid: "bg-danger-500 text-white",
-    solidHover: "hover:bg-danger-600 dark:hover:bg-danger-400",
-    light: "bg-danger-100 text-danger-900 dark:bg-danger-900/40 dark:text-danger-100",
-    text: "text-danger-600 dark:text-danger-400",
-    hoverBg: "hover:bg-danger-100 dark:hover:bg-danger-800/30",
-    border: "border-danger-300 dark:border-danger-600",
-  },
-  base: {
-    solid: "bg-base-500 text-white",
-    solidHover: "hover:bg-base-600 dark:hover:bg-base-400",
-    light: "bg-base-100 text-base-900 dark:bg-base-800 dark:text-base-100",
-    text: "text-base-600 dark:text-base-300",
-    hoverBg: "hover:bg-base-100 dark:hover:bg-base-800/30",
-    border: "border-base-300 dark:border-base-700",
-  },
-};