@simplysm/solid 13.0.75 → 13.0.77

package/src/providers/shared-data/SharedDataProvider.tsx

@@ -1,15 +1,102 @@
-import { type Accessor, type JSX, createMemo, createSignal, onCleanup } from "solid-js";
-import { objEqual, waitUntil } from "@simplysm/core-common";
-import {
-  SharedDataContext,
-  type SharedDataAccessor,
-  type SharedDataDefinition,
-  type SharedDataValue,
-} from "./SharedDataContext";
+import { type Accessor, type JSX, createContext, createMemo, createSignal, onCleanup, useContext } from "solid-js";
+import { obj, wait as waitU } from "@simplysm/core-common";
 import { SharedDataChangeEvent } from "./SharedDataChangeEvent";
-import { useServiceClient } from "../ServiceClientContext";
-import { useNotification } from "../../components/feedback/notification/NotificationContext";
+import { useServiceClient } from "../ServiceClientProvider";
+import { useNotification } from "../../components/feedback/notification/NotificationProvider";
 import { useLogger } from "../../hooks/useLogger";
+import type { ServiceClient } from "@simplysm/service-client";
+
+/**
+ * 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 */
+  itemSearchText?: (item: TData) => string;
+  /** Function to determine if an item is hidden */
+  isItemHidden?: (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 */
+  itemSearchText?: (item: TData) => string;
+  /** Function to determine if an item is hidden */
+  isItemHidden?: (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 */
+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 SharedDataValue<TSharedData>;
+}
+
+type EntryState = "idle" | "initializing" | "ready" | "error";
 
 /**
  * Shared data Provider.
@@ -18,7 +105,7 @@ import { useLogger } from "../../hooks/useLogger";
  * - Must be used inside ServiceClientProvider and NotificationProvider
  * - Logs fetch failures to logger if LoggerProvider is present
  * - Before configure(): only wait, busy, configure are accessible. Data access throws
- * - After configure(): registers definitions. Registers server event listeners + fetch on first items()/get() access per key (lazy)
+ * - After configure(): registers definitions and immediately starts fetching data for all entries
  * - Prevents data inversion on concurrent fetch calls via version counter
  * - Displays danger notification to the user on fetch failure
  * - Automatically releases all event listeners on cleanup
@@ -48,17 +135,14 @@ export function SharedDataProvider(props: { children: JSX.Element }): JSX.Elemen
   const [busyCount, setBusyCount] = createSignal(0);
   const busy: Accessor<boolean> = () => busyCount() > 0;
 
-  const signalMap = new Map<string, ReturnType<typeof createSignal<unknown[]>>>();
-  const memoMap = new Map<string, Accessor<Map<string | number, unknown>>>();
-  const listenerKeyMap = new Map<string, string>();
-  const versionMap = new Map<string, number>();
   const accessors: Record<string, SharedDataAccessor<unknown>> = {};
-  let currentDefinitions: Record<string, SharedDataDefinition<unknown>> | undefined;
 
-  function ordering<TT>(data: TT[], orderByList: [(item: TT) => unknown, "asc" | "desc"][]): TT[] {
+  let disposed = false;
+
+  function ordering<TItem>(data: TItem[], orderByList: [(item: TItem) => unknown, "asc" | "desc"][]): TItem[] {
     let result = [...data];
     for (const orderBy of [...orderByList].reverse()) {
-      const selector = (item: TT) => orderBy[0](item) as string | number | undefined;
+      const selector = (item: TItem) => orderBy[0](item) as string | number | undefined;
       if (orderBy[1] === "desc") {
         result = result.orderByDesc(selector);
       } else {
@@ -68,50 +152,137 @@ export function SharedDataProvider(props: { children: JSX.Element }): JSX.Elemen
     return result;
   }
 
-  async function loadData(
+  function createSharedDataEntry(
     name: string,
     def: SharedDataDefinition<unknown>,
-    changeKeys?: Array<string | number>,
-  ): Promise<void> {
-    // CR-1: Prevent data inversion on concurrent calls via version counter
-    const currentVersion = (versionMap.get(name) ?? 0) + 1;
-    versionMap.set(name, currentVersion);
+    client: ServiceClient,
+  ): SharedDataAccessor<unknown> & { cleanup: () => void; initialize: () => Promise<void> } {
+    const [items, setItems] = createSignal<unknown[]>([]);
+
+    const itemMap = createMemo(() => {
+      const map = new Map<string | number, unknown>();
+      for (const item of items()) {
+        map.set(def.getKey(item as never), item);
+      }
+      return map;
+    });
 
-    setBusyCount((c) => c + 1);
-    try {
-      const signal = signalMap.get(name);
-      if (!signal) throw new Error(`No shared data store found for '${name}'.`);
+    let state: EntryState = "idle";
+    let listenerKey: string | undefined;
+    let version = 0;
 
-      const [, setItems] = signal;
-      const resData = await def.fetch(changeKeys);
+    async function loadData(changeKeys?: Array<string | number>): Promise<void> {
+      // Prevent data inversion on concurrent calls via version counter
+      const currentVersion = ++version;
 
-      // CR-1: Ignore stale responses
-      if (versionMap.get(name) !== currentVersion) return;
+      setBusyCount((c) => c + 1);
+      try {
+        const resData = await def.fetch(changeKeys);
 
-      if (!changeKeys) {
-        setItems(ordering(resData, def.orderBy));
-      } else {
-        setItems((prev) => {
-          const filtered = prev.filter((item) => !changeKeys.includes(def.getKey(item as never)));
-          filtered.push(...resData);
-          return ordering(filtered, def.orderBy);
-        });
+        // Ignore stale responses
+        if (version !== currentVersion) return;
+
+        if (!changeKeys) {
+          setItems(ordering(resData, def.orderBy));
+        } else {
+          setItems((prev) => {
+            const filtered = prev.filter((item) => !changeKeys.includes(def.getKey(item as never)));
+            filtered.push(...resData);
+            return ordering(filtered, def.orderBy);
+          });
+        }
+      } catch (err) {
+        logger.error(`SharedData '${name}' fetch failed:`, err);
+        notification.danger(
+          "Shared data load failed",
+          err instanceof Error ? err.message : `Error occurred while loading '${name}' data.`,
+        );
+        throw err;
+      } finally {
+        setBusyCount((c) => c - 1);
+      }
+    }
+
+    async function initialize(): Promise<void> {
+      if (state !== "idle" && state !== "error") return;
+
+      // Clean up leaked listener from previous failed attempt
+      if (listenerKey != null) {
+        void client.removeListener(listenerKey);
+        listenerKey = undefined;
+      }
+
+      state = "initializing";
+
+      // Increment busyCount synchronously so wait() sees busy state immediately
+      setBusyCount((c) => c + 1);
+
+      try {
+        const key = await client.addListener(
+          SharedDataChangeEvent,
+          { name, filter: def.filter },
+          async (changeKeys) => {
+            try {
+              await loadData(changeKeys);
+            } catch {
+              // Error already logged and notified in loadData
+            }
+          },
+        );
+
+        if (disposed) {
+          void client.removeListener(key);
+          return;
+        }
+
+        listenerKey = key;
+
+        await loadData();
+
+        state = "ready";
+      } catch {
+        state = "error";
+      } finally {
+        setBusyCount((c) => c - 1);
+      }
+    }
+
+    function cleanup(): void {
+      if (listenerKey != null) {
+        void client.removeListener(listenerKey);
       }
-    } catch (err) {
-      // CR-2: Notify user on fetch failure
-      logger.error(`SharedData '${name}' fetch failed:`, err);
-      notification.danger(
-        "Shared data load failed",
-        err instanceof Error ? err.message : `Error occurred while loading '${name}' data.`,
-      );
-    } finally {
-      setBusyCount((c) => c - 1);
     }
+
+    return {
+      items: () => {
+        void initialize();
+        return items();
+      },
+      get: (key: string | number | undefined) => {
+        void initialize();
+        if (key === undefined) return undefined;
+        return itemMap().get(key);
+      },
+      emit: async (changeKeys?: Array<string | number>) => {
+        await client.emitEvent(
+          SharedDataChangeEvent,
+          (info) => info.name === name && obj.equal(info.filter, def.filter),
+          changeKeys,
+        );
+      },
+      getKey: def.getKey,
+      itemSearchText: def.itemSearchText,
+      isItemHidden: def.isItemHidden,
+      getParentKey: def.getParentKey,
+      cleanup,
+      initialize,
+    };
   }
 
+  const entries = new Map<string, ReturnType<typeof createSharedDataEntry>>();
+
   async function wait(): Promise<void> {
-    // eslint-disable-next-line solid/reactivity -- waitUntil is polling-based, so tracked scope is unnecessary
-    await waitUntil(() => busyCount() <= 0);
+    await waitU.until(() => busyCount() <= 0);
   }
 
   function configure(
@@ -125,87 +296,20 @@ export function SharedDataProvider(props: { children: JSX.Element }): JSX.Elemen
     configured = true;
 
     const definitions = fn({});
-    currentDefinitions = definitions;
 
     for (const [name, def] of Object.entries(definitions)) {
-      const [items, setItems] = createSignal<unknown[]>([]);
-      // eslint-disable-next-line solid/reactivity -- Storing signal references in a Map is not a reactive access
-      signalMap.set(name, [items, setItems]);
-
-      const itemMap = createMemo(() => {
-        const map = new Map<string | number, unknown>();
-        for (const item of items()) {
-          map.set(def.getKey(item as never), item);
-        }
-        return map;
-      });
-      // eslint-disable-next-line solid/reactivity -- Storing memo references in a Map is not a reactive access
-      memoMap.set(name, itemMap);
-
       const client = serviceClient.get(def.serviceKey ?? "default");
-
-      let initialized = false;
-
-      function ensureInitialized() {
-        if (initialized) return;
-        initialized = true;
-
-        void client
-          .addEventListener(
-            SharedDataChangeEvent,
-            { name, filter: def.filter },
-            async (changeKeys) => {
-              await loadData(name, def, changeKeys);
-            },
-          )
-          .then((key) => {
-            if (disposed) {
-              void client.removeEventListener(key);
-            } else {
-              listenerKeyMap.set(name, key);
-            }
-          });
-
-        void loadData(name, def);
-      }
-
-      accessors[name] = {
-        items: () => {
-          ensureInitialized();
-          return items();
-        },
-        get: (key: string | number | undefined) => {
-          ensureInitialized();
-          if (key === undefined) return undefined;
-          return itemMap().get(key);
-        },
-        emit: async (changeKeys?: Array<string | number>) => {
-          await client.emitToServer(
-            SharedDataChangeEvent,
-            (info) => info.name === name && objEqual(info.filter, def.filter),
-            changeKeys,
-          );
-        },
-        getKey: def.getKey,
-        getSearchText: def.getSearchText,
-        getIsHidden: def.getIsHidden,
-        getParentKey: def.getParentKey,
-      };
+      const entry = createSharedDataEntry(name, def, client);
+      entries.set(name, entry);
+      accessors[name] = entry;
+      void entry.initialize();
     }
   }
 
-  let disposed = false;
-
   onCleanup(() => {
     disposed = true;
-    if (!currentDefinitions) return;
-    for (const [name] of Object.entries(currentDefinitions)) {
-      const listenerKey = listenerKeyMap.get(name);
-      if (listenerKey != null) {
-        const def = currentDefinitions[name];
-        const client = serviceClient.get(def.serviceKey ?? "default");
-        void client.removeEventListener(listenerKey);
-      }
+    for (const entry of entries.values()) {
+      entry.cleanup();
     }
   });
 

package/src/styles/base.styles.ts

@@ -0,0 +1,21 @@
+import clsx from "clsx";
+
+// ── Border ──
+export const border = {
+  default: clsx`border-base-200 dark:border-base-700`,
+  subtle: clsx`border-base-200 dark:border-base-700`,
+};
+
+// ── Background ──
+export const bg = {
+  surface: clsx`bg-white dark:bg-base-900`,
+  muted: clsx`bg-base-100 dark:bg-base-800`,
+  subtle: clsx`bg-base-200 dark:bg-base-700`,
+};
+
+// ── Text ──
+export const text = {
+  default: clsx`text-base-900 dark:text-base-100`,
+  muted: clsx`text-base-400 dark:text-base-500`,
+  placeholder: clsx`placeholder:text-base-400 dark:placeholder:text-base-500`,
+};

package/src/styles/control.styles.ts

@@ -0,0 +1,25 @@
+import clsx from "clsx";
+
+// ── State ──
+export const state = {
+  disabled: clsx`pointer-events-none cursor-default opacity-30`,
+};
+
+// ── Size ──
+export type ComponentSize = "default" | "xs" | "sm" | "lg" | "xl";
+
+export const pad = {
+  default: clsx`px-2 py-1`,
+  xs: clsx`px-1 py-0`,
+  sm: clsx`px-1.5 py-0.5`,
+  lg: clsx`px-3 py-2`,
+  xl: clsx`px-4 py-3`,
+};
+
+export const gap = {
+  default: clsx`gap-1`,
+  xs: clsx`gap-0`,
+  sm: clsx`gap-0.5`,
+  lg: clsx`gap-1.5`,
+  xl: clsx`gap-2`,
+};

package/src/styles/theme.styles.ts

@@ -0,0 +1,54 @@
+import clsx from "clsx";
+
+export const themeTokens = {
+  primary: {
+    solid: clsx`bg-primary-500 text-white`,
+    solidHover: clsx`hover:bg-primary-600 dark:hover:bg-primary-400`,
+    light: clsx`bg-primary-100 text-primary-900 dark:bg-primary-900/40 dark:text-primary-100`,
+    text: clsx`text-primary-600 dark:text-primary-400`,
+    hoverBg: clsx`hover:bg-primary-100 dark:hover:bg-primary-800/30`,
+    border: clsx`border-primary-300 dark:border-primary-600`,
+  },
+  info: {
+    solid: clsx`bg-info-500 text-white`,
+    solidHover: clsx`hover:bg-info-600 dark:hover:bg-info-400`,
+    light: clsx`bg-info-100 text-info-900 dark:bg-info-900/40 dark:text-info-100`,
+    text: clsx`text-info-600 dark:text-info-400`,
+    hoverBg: clsx`hover:bg-info-100 dark:hover:bg-info-800/30`,
+    border: clsx`border-info-300 dark:border-info-600`,
+  },
+  success: {
+    solid: clsx`bg-success-500 text-white`,
+    solidHover: clsx`hover:bg-success-600 dark:hover:bg-success-400`,
+    light: clsx`bg-success-100 text-success-900 dark:bg-success-900/40 dark:text-success-100`,
+    text: clsx`text-success-600 dark:text-success-400`,
+    hoverBg: clsx`hover:bg-success-100 dark:hover:bg-success-800/30`,
+    border: clsx`border-success-300 dark:border-success-600`,
+  },
+  warning: {
+    solid: clsx`bg-warning-500 text-white`,
+    solidHover: clsx`hover:bg-warning-600 dark:hover:bg-warning-400`,
+    light: clsx`bg-warning-100 text-warning-900 dark:bg-warning-900/40 dark:text-warning-100`,
+    text: clsx`text-warning-600 dark:text-warning-400`,
+    hoverBg: clsx`hover:bg-warning-100 dark:hover:bg-warning-800/30`,
+    border: clsx`border-warning-300 dark:border-warning-600`,
+  },
+  danger: {
+    solid: clsx`bg-danger-500 text-white`,
+    solidHover: clsx`hover:bg-danger-600 dark:hover:bg-danger-400`,
+    light: clsx`bg-danger-100 text-danger-900 dark:bg-danger-900/40 dark:text-danger-100`,
+    text: clsx`text-danger-600 dark:text-danger-400`,
+    hoverBg: clsx`hover:bg-danger-100 dark:hover:bg-danger-800/30`,
+    border: clsx`border-danger-300 dark:border-danger-600`,
+  },
+  base: {
+    solid: clsx`bg-base-500 text-white`,
+    solidHover: clsx`hover:bg-base-600 dark:hover:bg-base-400`,
+    light: clsx`bg-base-100 text-base-900 dark:bg-base-800 dark:text-base-100`,
+    text: clsx`text-base-600 dark:text-base-300`,
+    hoverBg: clsx`hover:bg-base-100 dark:hover:bg-base-800/30`,
+    border: clsx`border-base-300 dark:border-base-700`,
+  },
+};
+
+export type SemanticTheme = keyof typeof themeTokens;

package/tailwind.config.ts

@@ -7,8 +7,6 @@ const sp = defaultTheme.spacing;
 
 const __dirname = fileURLToPath(new URL(".", import.meta.url));
 
-// export const tailwindContent = [`${__dirname}**/*.tsx`];
-
 const fieldSizes = {
   "field": `calc(${lh}rem + ${sp["1"]} + ${sp["1"]} + 2px)`,
   "field-xs": `calc(${lh}rem + 2px)`,
@@ -36,15 +34,6 @@ export default {
       },
       height: fieldSizes,
       size: fieldSizes,
-      keyframes: {
-        "fade-in": {
-          from: { opacity: "0", transform: "translateY(-1rem)" },
-          to: { opacity: "1", transform: "translateY(0)" },
-        },
-      },
-      animation: {
-        "fade-in": "fade-in 0.6s ease-out both",
-      },
       zIndex: {
         "sidebar": "100",
         "sidebar-backdrop": "99",