cogsbox-state 0.5.468 → 0.5.470

package/src/Components.tsx

@@ -8,7 +8,12 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { formRefStore, getGlobalStore, ValidationError } from './store';
+import {
+  formRefStore,
+  getGlobalStore,
+  ValidationError,
+  ValidationSeverity,
+} from './store';
 import { useInView } from 'react-intersection-observer';
 import { v4 as uuidv4 } from 'uuid';
 import { isDeepEqual } from './utility';
@@ -60,7 +65,12 @@ export function ValidationWrapper({
 
   // Use first error, or first warning if no errors
   const message = errorMessages[0] || warningMessages[0];
-
+  const primarySeverity: ValidationSeverity =
+    errorMessages.length > 0
+      ? 'error'
+      : warningMessages.length > 0
+        ? 'warning'
+        : undefined;
   return (
     <>
       {thisStateOpts?.formElements?.validation &&
@@ -73,7 +83,7 @@ export function ValidationWrapper({
           message: formOpts?.validation?.hideMessage
             ? ''
             : formOpts?.validation?.message || message || '',
-
+          severity: primarySeverity,
           hasErrors: errorMessages.length > 0,
           hasWarnings: warningMessages.length > 0,
           allErrors: errors,
@@ -450,7 +460,7 @@ export function FormElementWrapper({
 
   const stateWithInputProps = new Proxy(baseState, {
     get(target, prop) {
-      if (prop === 'inputProps') {
+      if (prop === '$inputProps') {
         return {
           value: localValue ?? '',
           onChange: (e: any) => {
@@ -540,3 +550,44 @@ const useImageLoaded = (ref: RefObject<HTMLElement>): boolean => {
 
   return loaded;
 };
+// Components.tsx
+
+// Generic isolated component wrapper
+export function IsolatedComponentWrapper({
+  stateKey,
+  path,
+  rebuildStateShape,
+  renderFn,
+}: {
+  stateKey: string;
+  path: string[];
+  rebuildStateShape: (options: {
+    path: string[];
+    componentId: string;
+    meta?: any;
+  }) => any;
+  renderFn: (state: any) => React.ReactNode;
+}) {
+  const [componentId] = useState(() => uuidv4());
+  const [, forceUpdate] = useState({});
+
+  const stateKeyPathKey = [stateKey, ...path].join('.');
+  useRegisterComponent(stateKey, componentId, forceUpdate);
+
+  useEffect(() => {
+    const unsubscribe = getGlobalStore
+      .getState()
+      .subscribeToPath(stateKeyPathKey, () => {
+        forceUpdate({});
+      });
+    return () => unsubscribe();
+  }, [stateKeyPathKey]);
+
+  const baseState = rebuildStateShape({
+    path: path,
+    componentId: componentId,
+    meta: undefined,
+  });
+
+  return <>{renderFn(baseState)}</>;
+}

package/src/store.ts

@@ -1,5 +1,5 @@
 import { create } from 'zustand';
-import { ulid } from 'ulid';
+
 import type {
   OptionsType,
   ReactivityType,
@@ -85,11 +85,11 @@ export type ValidationStatus =
   | 'VALIDATING'
   | 'VALID'
   | 'INVALID';
-
+export type ValidationSeverity = 'warning' | 'error' | undefined;
 export type ValidationError = {
   source: 'client' | 'sync_engine' | 'api';
   message: string;
-  severity: 'warning' | 'error';
+  severity: ValidationSeverity;
   code?: string;
 };
 
@@ -266,7 +266,7 @@ export function buildShadowNode(value: any): ShadowNode {
     const idKeys: string[] = [];
 
     value.forEach((item) => {
-      const itemId = `id:${ulid()}`;
+      const itemId = `id:${generateId()}`;
       arrayNode[itemId] = buildShadowNode(item);
       idKeys.push(itemId);
     });
@@ -292,6 +292,11 @@ export function buildShadowNode(value: any): ShadowNode {
 
 // Module-level mutable store
 const shadowStateStore = new Map<string, ShadowNode>();
+let globalCounter = 0;
+
+export function generateId(prefix = 'id'): string {
+  return `${prefix}:${(globalCounter++).toString(36)}`;
+}
 
 export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
   // Remove shadowStateStore from Zustand state
@@ -550,7 +555,7 @@ export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
       return;
     }
 
-    const newItemId = `id:${ulid()}`;
+    const newItemId = `id:${generateId()}`;
     const itemsToAdd = { [newItemId]: buildShadowNode(newItem) };
 
     // Mutate the array directly
@@ -595,7 +600,7 @@ export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
     const newIds: string[] = [];
 
     newItems.forEach((item) => {
-      const newItemId = `id:${ulid()}`;
+      const newItemId = `id:${generateId()}`;
       newIds.push(newItemId);
       itemsToAdd[newItemId] = buildShadowNode(item);
     });