npm - @simplysm/solid - Versions diffs - 13.0.97 → 13.0.99 - Mend

@simplysm/solid 13.0.97 → 13.0.99

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/docs/providers.md ADDED Viewed

@@ -0,0 +1,197 @@
+# Providers
+Source: `src/providers/**`
+## `ConfigProvider`
+App-wide configuration context providing `clientName` used as storage key prefix.
+```typescript
+export interface AppConfig {
+  clientName: string;
+}
+export const ConfigContext: Context<AppConfig>;
+export function useConfig(): AppConfig;
+export const ConfigProvider: ParentComponent<{ clientName: string }>;
+```
+---
+## `SyncStorageProvider`
+Sync storage provider with configurable adapter (defaults to localStorage). Supports async adapters for cross-device sync.
+```typescript
+export interface StorageAdapter {
+  getItem(key: string): string | null | Promise<string | null>;
+  setItem(key: string, value: string): void | Promise<unknown>;
+  removeItem(key: string): void | Promise<void>;
+}
+export interface SyncStorageContextValue {
+  adapter: Accessor<StorageAdapter>;
+  configure: (fn: (origin: StorageAdapter) => StorageAdapter) => void;
+}
+export const SyncStorageContext: Context<SyncStorageContextValue>;
+export function useSyncStorage(): SyncStorageContextValue | undefined;
+export const SyncStorageProvider: ParentComponent;
+```
+---
+## `LoggerProvider`
+Logger adapter provider. Defaults to consola. Configurable via decorator pattern.
+```typescript
+export interface LogAdapter {
+  write(severity: "error" | "warn" | "info" | "log", ...data: any[]): Promise<void> | void;
+}
+export interface LoggerContextValue {
+  adapter: Accessor<LogAdapter>;
+  configure: (fn: (origin: LogAdapter) => LogAdapter) => void;
+}
+export const LoggerContext: Context<LoggerContextValue>;
+export const LoggerProvider: ParentComponent;
+```
+---
+## `ThemeProvider`
+Theme mode provider with OS dark mode detection. Persists to storage via `useSyncConfig`. Toggles `dark` class on `<html>`.
+```typescript
+export type ThemeMode = "light" | "dark" | "system";
+export type ResolvedTheme = "light" | "dark";
+export function useTheme(): {
+  mode: () => ThemeMode;
+  setMode: (mode: ThemeMode) => void;
+  resolvedTheme: () => ResolvedTheme;
+  cycleMode: () => void;
+};
+export const ThemeProvider: ParentComponent;
+```
+---
+## `ServiceClientProvider`
+WebSocket service client provider with key-based multi-connection management. Displays request/response progress via notifications.
+```typescript
+export interface ServiceClientContextValue {
+  connect: (key?: string, options?: Partial<ServiceConnectionOptions>) => Promise<void>;
+  close: (key?: string) => Promise<void>;
+  get: (key?: string) => ServiceClient;
+  isConnected: (key?: string) => boolean;
+}
+export const ServiceClientContext: Context<ServiceClientContextValue>;
+export function useServiceClient(): ServiceClientContextValue;
+export const ServiceClientProvider: ParentComponent;
+```
+---
+## `SharedDataProvider`
+Reactive shared data provider that subscribes to server events for real-time data updates.
+### `SharedDataDefinition`
+```typescript
+export interface SharedDataDefinition<TData> {
+  serviceKey?: string;
+  fetch: (changeKeys?: Array<string | number>) => Promise<TData[]>;
+  getKey: (item: TData) => string | number;
+  orderBy: [(item: TData) => unknown, "asc" | "desc"][];
+  filter?: unknown;
+  itemSearchText?: (item: TData) => string;
+  isItemHidden?: (item: TData) => boolean;
+  getParentKey?: (item: TData) => string | number | undefined;
+}
+```
+### `SharedDataAccessor`
+```typescript
+export interface SharedDataAccessor<TData> {
+  items: Accessor<TData[]>;
+  get: (key: string | number | undefined) => TData | undefined;
+  emit: (changeKeys?: Array<string | number>) => Promise<void>;
+  getKey: (item: TData) => string | number;
+  itemSearchText?: (item: TData) => string;
+  isItemHidden?: (item: TData) => boolean;
+  getParentKey?: (item: TData) => string | number | undefined;
+}
+```
+---
+## `SharedDataChangeEvent`
+Server-client shared data change event definition.
+```typescript
+export const SharedDataChangeEvent: EventDefinition<
+  { name: string; filter: unknown },
+  (string | number)[] | undefined
+>;
+```
+---
+## `SystemProvider`
+All-in-one provider that composes Config, I18n, SyncStorage, Logger, Notification, ErrorLogger, PwaUpdate, Clipboard, Theme, ServiceClient, SharedData, and Busy providers.
+```typescript
+export const SystemProvider: ParentComponent<{
+  clientName: string;
+  busyVariant?: BusyVariant;
+}>;
+```
+---
+## `I18nProvider`
+Internationalization provider with built-in `en` and `ko` dictionaries.
+```typescript
+export function useI18n(): I18nContextValue;
+export const I18nProvider: ParentComponent;
+```
+### `I18nContextValue`
+```typescript
+export interface I18nContextValue {
+  t: (key: string, params?: Record<string, string>) => string;
+  locale: Accessor<string>;
+  setLocale: (locale: string) => void;
+  configure: (options: I18nConfigureOptions) => void;
+}
+```
+### `I18nConfigureOptions`
+```typescript
+export interface I18nConfigureOptions {
+  locale?: string;
+  dict?: Record<string, Record<string, unknown>>;
+}
+```
+### `FlatDict`
+```typescript
+export type FlatDict = Record<string, string>;
+```

package/docs/styles.md ADDED Viewed

@@ -0,0 +1,133 @@
+# Styles & Directives
+Source: `src/styles/**`, `src/directives/**`
+## Base Styles (`base.styles`)
+Foundational design tokens for borders, backgrounds, and text.
+```typescript
+export const border: {
+  default: string;  // border-base-200 dark:border-base-700
+  subtle: string;   // border-base-200 dark:border-base-700
+};
+export const bg: {
+  surface: string;  // bg-white dark:bg-base-900
+  muted: string;    // bg-base-100 dark:bg-base-800
+  subtle: string;   // bg-base-200 dark:bg-base-700
+};
+export const text: {
+  default: string;      // text-base-900 dark:text-base-100
+  muted: string;        // text-base-400 dark:text-base-500
+  placeholder: string;  // placeholder:text-base-400 dark:placeholder:text-base-500
+};
+```
+---
+## Control Styles (`control.styles`)
+Size and state tokens for interactive components.
+### `ComponentSize`
+```typescript
+export type ComponentSize = "xs" | "sm" | "md" | "lg" | "xl";
+```
+### `state`
+```typescript
+export const state: {
+  disabled: string;  // pointer-events-none cursor-default opacity-30
+};
+```
+### `pad`
+Size-specific padding classes:
+| Size | Value |
+|------|-------|
+| `xs` | `px-1 py-0` |
+| `sm` | `px-1.5 py-0.5` |
+| `md` | `px-2 py-1` |
+| `lg` | `px-3 py-2` |
+| `xl` | `px-4 py-3` |
+### `gap`
+Size-specific gap classes:
+| Size | Value |
+|------|-------|
+| `xs` | `gap-0` |
+| `sm` | `gap-0.5` |
+| `md` | `gap-1` |
+| `lg` | `gap-1.5` |
+| `xl` | `gap-2` |
+---
+## Theme Styles (`theme.styles`)
+Semantic color theme tokens for components.
+### `SemanticTheme`
+```typescript
+export type SemanticTheme = "primary" | "info" | "success" | "warning" | "danger" | "base";
+```
+### `themeTokens`
+```typescript
+export const themeTokens: Record<SemanticTheme, {
+  solid: string;       // Solid background + white text
+  solidHover: string;  // Hover effect for solid
+  light: string;       // Light background + dark text
+  text: string;        // Text color only
+  hoverBg: string;     // Hover background
+  border: string;      // Border color
+}>;
+```
+Each theme (`primary`, `info`, `success`, `warning`, `danger`, `base`) provides all six token fields.
+---
+## Ripple Directive (`ripple`)
+Directive that adds a material-design ripple effect to interactive elements.
+```typescript
+export function ripple(el: HTMLElement, accessor: Accessor<boolean>): void;
+```
+### Usage
+```tsx
+<button use:ripple={!props.disabled}>Click me</button>
+```
+### Behavior
+- Creates an internal ripple container with `overflow: hidden`
+- Sets `position: relative` on static-positioned elements (restores on cleanup)
+- Single ripple mode: removes previous ripple on new click
+- Respects `prefers-reduced-motion: reduce`
+- Full cleanup on unmount
+### TypeScript Declaration
+```typescript
+declare module "solid-js" {
+  namespace JSX {
+    interface Directives {
+      ripple: boolean;
+    }
+  }
+}
+```

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@simplysm/solid",
-  "version": "13.0.97",
+  "version": "13.0.99",
   "description": "Simplysm package - SolidJS library",
   "author": "simplysm",
   "license": "Apache-2.0",
@@ -53,10 +53,10 @@
     "tabbable": "^6.4.0",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^3.4.19",
-    "@simplysm/core-browser": "13.0.97",
-    "@simplysm/core-common": "13.0.97",
-    "@simplysm/service-client": "13.0.97",
-    "@simplysm/service-common": "13.0.97"
+    "@simplysm/core-browser": "13.0.99",
+    "@simplysm/core-common": "13.0.99",
+    "@simplysm/service-common": "13.0.99",
+    "@simplysm/service-client": "13.0.99"
   },
   "devDependencies": {
     "@solidjs/testing-library": "^0.8.10"