react-state-custom 1.0.22 → 1.0.24

package/src/dev-tool/useHighlight.tsx

@@ -0,0 +1,56 @@
+import React, { useContext, useMemo } from "react";
+
+export function useHighlight(filterString: string) {
+    const highlight = useMemo(
+        () => buildRegex(filterString
+            .toLowerCase()
+            .split(" "), 'gi'),
+        [filterString]
+    );
+    return { highlight };
+}
+
+function escapeRegex(str: string) {
+    return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function buildRegex(words: string[], flags = 'gi') {
+    const pattern = words.map(escapeRegex).join('|');
+    return new RegExp(`(${pattern})`, flags);
+}
+
+function markByToken(text: string, regex: RegExp) {
+    const result = [];
+    let last = 0;
+    for (const match of text.matchAll(regex)) {
+        const [m] = match;
+        const start = match.index;
+        if (start > last) result.push(text.slice(last, start));
+        result.push(<mark key={start}>{m}</mark>);
+        last = start + m.length;
+    }
+    if (last < text.length) result.push(text.slice(last));
+    return result;
+}
+
+const highlightCtx = React.createContext<{ highlight?: RegExp }>({
+    highlight: undefined
+})
+
+export const HightlightWrapper: React.FC<{ highlight: string, children: any }> = ({ children, highlight }) => {
+    return <highlightCtx.Provider value={useHighlight(highlight)}>
+        {children}
+    </highlightCtx.Provider>
+}
+
+export const HighlightString: React.FC<{ text: string; }> = ({ text }) => {
+    const { highlight } = useContext(highlightCtx)
+
+    const render = useMemo(
+        () => highlight ? markByToken(text, highlight) : text,
+        [text, highlight]
+    );
+
+    return <>{render}</>;
+
+};

package/src/dev.tsx

@@ -1,14 +1,7 @@
 import { createRoot } from 'react-dom/client'
-import { DevToolContainer } from './DevTool'
-import { AutoRootCtx, createAutoCtx } from './state-utils/createAutoCtx'
-import { Test } from './Test'
+import { Playground } from './examples/Playground'
+import "react-obj-view/dist/react-obj-view.css"
 
 
-
-createRoot(document.getElementById('root')!).render(
-  <>
-    <DevToolContainer />
-    <Test/>
-    <AutoRootCtx/>
-  </>
-)
+createRoot(document.getElementById('root')!)
+  .render(<Playground />)

package/src/examples/Playground.tsx

@@ -0,0 +1,180 @@
+import { Sandpack } from '@codesandbox/sandpack-react'
+import { useState } from 'react'
+
+
+import counterState from "./counter/state.ts?raw"
+import counterView from "./counter/view.tsx?raw"
+import counterApp from "./counter/app.tsx?raw"
+import todoState from "./todo/state.ts?raw"
+import todoView from "./todo/view.tsx?raw"
+import todoApp from "./todo/app.tsx?raw"
+import timerState from "./timer/state.ts?raw"
+import timerView from "./timer/view.tsx?raw"
+import timerApp from "./timer/app.tsx?raw"
+import formState from "./form/state.ts?raw"
+import formView from "./form/view.tsx?raw"
+import formApp from "./form/app.tsx?raw"
+import cartState from "./cart/state.ts?raw"
+import cartView from "./cart/view.tsx?raw"
+import cartApp from "./cart/app.tsx?raw"
+
+const devToolCode = `
+
+import { ObjectView } from "react-obj-view"
+import "react-obj-view/dist/react-obj-view.css"
+
+export const DataView: DataViewComponent = ({ name, value }) => {
+  return <ObjectView
+    {...{ name, value }}
+    expandLevel={1}
+  />
+}
+
+`
+
+
+const updateImport = (code: string) => {
+    return code.replaceAll(
+        `from '../../index'`,
+        `from 'react-state-custom'`
+    )
+}
+
+
+const injectRootCtx = (code: string) => {
+    return [
+        `import { AutoRootCtx, DevToolContainer } from 'react-state-custom';`,
+        `import 'react-state-custom/dist/react-state-custom.css';`,
+        `import { DataView } from './dataview.tsx';`,
+        code
+            .replaceAll(
+                `{/* <AutoRootCtx/> */}`,
+                `<AutoRootCtx/>`
+            ).replaceAll(
+                `{/* <DevToolContainer Component={DataView} /> */}`,
+                `<DevToolContainer Component={DataView} style={{ left:"20px", bottom:"10px", right:"unset"}}/>`,
+            )
+    ].join("\n")
+}
+
+const examples = {
+    counter: {
+        title: 'Counter Example',
+        description: 'A simple counter demonstrating basic state management with increment, decrement, and reset operations.',
+        state: updateImport(counterState),
+        view: updateImport(counterView),
+        app: injectRootCtx(updateImport(counterApp)),
+    },
+    todo: {
+        title: 'Todo List Example',
+        description: 'Multiple independent todo lists showing how contexts can be scoped by parameters.',
+        state: updateImport(todoState),
+        view: updateImport(todoView),
+        app: injectRootCtx(updateImport(todoApp)),
+    },
+    form: {
+        title: 'Form Example',
+        description: 'Form validation example with multiple independent form instances. Shows real-time validation and error handling.',
+        state: updateImport(formState),
+        view: updateImport(formView),
+        app: injectRootCtx(updateImport(formApp)),
+    },
+    timer: {
+        title: 'Timer Example',
+        description: 'Multiple independent timers with millisecond precision demonstrating side effects.',
+        state: updateImport(timerState),
+        view: updateImport(timerView),
+        app: injectRootCtx(updateImport(timerApp)),
+    },
+    cart: {
+        title: 'Shopping Cart Example',
+        description: 'Shopping cart with product selection and quantity management. Shows how to handle derived state (total, itemCount) and complex state updates.',
+        state: updateImport(cartState),
+        view: updateImport(cartView),
+        app: injectRootCtx(updateImport(cartApp)),
+    }
+}
+
+export const Playground = () => {
+    const [activeExample, setActiveExample] = useState<keyof typeof examples>('counter')
+    const example = examples[activeExample]
+
+    return (
+        <div style={{ padding: '2rem', maxWidth: '1400px', margin: '0 auto' }}>
+            <h1>React State Custom - Interactive Playground</h1>
+            <p style={{ color: '#666', marginBottom: '2rem' }}>
+                Edit the code below and see the changes in real-time!
+            </p>
+
+            <div style={{ display: 'flex', gap: '0.5rem', marginBottom: '2rem', flexWrap: 'wrap' }}>
+                {(Object.keys(examples) as Array<keyof typeof examples>).map((key) => (
+                    <button
+                        key={key}
+                        onClick={() => setActiveExample(key)}
+                        style={{
+                            padding: '0.5rem 1rem',
+                            background: activeExample === key ? '#007bff' : '#e0e0e0',
+                            color: activeExample === key ? 'white' : 'black',
+                            border: 'none',
+                            borderRadius: '4px',
+                            cursor: 'pointer',
+                            textTransform: 'capitalize'
+                        }}
+                    >
+                        {key}
+                    </button>
+                ))}
+            </div>
+
+            <div style={{ marginBottom: '1rem' }}>
+                <h2>{example.title}</h2>
+                <p style={{ color: '#666', fontSize: '0.875rem' }}>
+                    {example.description}
+                </p>
+            </div>
+
+
+            <Sandpack
+                template="react-ts"
+                theme="light"
+                files={{
+                    '/App.tsx': example.app,
+                    '/state.ts': example.state,
+                    '/view.tsx': example.view,
+                    '/dataview.tsx': devToolCode,
+                }}
+                options={{
+                    // showNavigator: true,
+                    showTabs: true,
+                    showLineNumbers: true,
+                    editorHeight: 600,
+                    // editorWidthPercentage: 40,
+                }}
+                // style={{
+                //     '--sp-font-size': '12px',
+                //     '--sp-font-lineHeight': '17px',
+                //     // '--sp-font-body': 'inherit',
+                // } as React.CSSProperties}
+                customSetup={{
+                    dependencies: {
+                        'react': '^19.0.0',
+                        'react-dom': '^19.0.0',
+                        'react-obj-view': '^1.0.4',
+                        'react-state-custom': '^1.0.23',
+                    },
+
+                }}
+            />
+
+            <div style={{ marginTop: '2rem', padding: '1rem', background: '#f5f5f5', borderRadius: '4px' }}>
+                <h3>How it works:</h3>
+                <ul style={{ marginLeft: '1.5rem' }}>
+                    <li><code>createRootCtx</code> - Creates a context with a custom hook</li>
+                    <li><code>createAutoCtx</code> - Automatically manages context lifecycle</li>
+                    <li><code>useQuickSubscribe</code> - Subscribes to all context values via proxy</li>
+                    <li>Multiple instances share the same context when parameters match</li>
+                </ul>
+            </div>
+        </div>
+    )
+}

package/src/examples/cart/app.tsx

@@ -0,0 +1,16 @@
+import { CartExample } from './view'
+
+export default function App() {
+    return (
+        <>
+            {/* <AutoRootCtx/> */}
+            <CartExample userId="alice" />
+            <CartExample userId="bob" />
+            <p style={{ color: '#666', fontSize: '0.875rem' }}>
+                Shopping cart with product selection and quantity management.
+                Shows how to handle derived state (total, itemCount) and complex state updates.
+            </p>
+            {/* <DevToolContainer Component={DataView} /> */}
+        </>
+    )
+}

package/src/examples/cart/index.ts

@@ -0,0 +1,3 @@
+export { CartExample, CartExample as default } from './view'
+export { useCartCtx, PRODUCTS } from './state'
+export type { CartItem } from './state'

package/src/examples/cart/state.ts

@@ -0,0 +1,67 @@
+import { createRootCtx, createAutoCtx } from '../../index'
+import { useCallback, useState } from 'react'
+
+export interface CartItem {
+    id: string
+    name: string
+    price: number
+    quantity: number
+}
+
+export const PRODUCTS = [
+    { id: '1', name: 'Apple', price: 1.5 },
+    { id: '2', name: 'Banana', price: 0.8 },
+    { id: '3', name: 'Orange', price: 1.2 },
+    { id: '4', name: 'Mango', price: 2.5 },
+]
+
+export const { useCtxState: useCartCtx } = createAutoCtx(
+    createRootCtx(
+        "cart",
+        ({ userId }: { userId: string }) => {
+            const [items, setItems] = useState<CartItem[]>([])
+
+            const total = items.reduce((sum, item) => sum + item.price * item.quantity, 0)
+            const itemCount = items.reduce((sum, item) => sum + item.quantity, 0)
+
+            const addItem = useCallback((product: typeof PRODUCTS[0]) => {
+                setItems(prev => {
+                    const existing = prev.find(i => i.id === product.id)
+                    if (existing) {
+                        return prev.map(i =>
+                            i.id === product.id ? { ...i, quantity: i.quantity + 1 } : i
+                        )
+                    }
+                    return [...prev, { ...product, quantity: 1 }]
+                })
+            }, [])
+
+            const removeItem = useCallback((id: string) => {
+                setItems(prev => prev.filter(i => i.id !== id))
+            }, [])
+
+            const updateQuantity = useCallback((id: string, quantity: number) => {
+                if (quantity <= 0) {
+                    setItems(prev => prev.filter(i => i.id !== id))
+                } else {
+                    setItems(prev => prev.map(i =>
+                        i.id === id ? { ...i, quantity } : i
+                    ))
+                }
+            }, [])
+
+            const clear = useCallback(() => setItems([]), [])
+
+            return {
+                userId,
+                items,
+                total: total.toFixed(2),
+                itemCount,
+                addItem,
+                removeItem,
+                updateQuantity,
+                clear,
+            }
+        }
+    )
+)

package/src/examples/cart/view.tsx

@@ -0,0 +1,62 @@
+import { useQuickSubscribe } from '../../index'
+import { useCartCtx, PRODUCTS } from './state'
+
+export const CartExample = ({ userId = "user1" }: { userId?: string }) => {
+    const { items, total, itemCount, addItem, removeItem, updateQuantity, clear } =
+        useQuickSubscribe(useCartCtx({ userId }))
+
+    return (
+        <div style={{ padding: '1rem', border: '1px solid #ccc', marginBottom: '1rem' }}>
+            <h3>Shopping Cart ({userId})</h3>
+            <div style={{ marginBottom: '1rem' }}>
+                <h4>Products:</h4>
+                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '0.5rem' }}>
+                    {PRODUCTS.map(product => (
+                        <button
+                            key={product.id}
+                            onClick={() => addItem?.(product)}
+                            style={{ padding: '0.5rem' }}
+                        >
+                            {product.name} - ${product.price.toFixed(2)}
+                        </button>
+                    ))}
+                </div>
+            </div>
+            <div>
+                <h4>Cart ({itemCount ?? 0} items):</h4>
+                {(items?.length ?? 0) === 0 ? (
+                    <p style={{ color: '#666' }}>Cart is empty</p>
+                ) : (
+                    <>
+                        <ul style={{ listStyle: 'none', padding: 0 }}>
+                            {items?.map(item => (
+                                <li key={item.id} style={{ display: 'flex', gap: '0.5rem', marginBottom: '0.5rem', alignItems: 'center' }}>
+                                    <span style={{ flex: 1 }}>{item.name}</span>
+                                    <span>${item.price.toFixed(2)}</span>
+                                    <input
+                                        type="number"
+                                        value={item.quantity}
+                                        onChange={(e) => updateQuantity?.(item.id, parseInt(e.target.value) || 0)}
+                                        style={{ width: '3rem', padding: '0.25rem' }}
+                                        min="0"
+                                    />
+                                    <span>${(item.price * item.quantity).toFixed(2)}</span>
+                                    <button onClick={() => removeItem?.(item.id)}>×</button>
+                                </li>
+                            ))}
+                        </ul>
+                        <div style={{ borderTop: '1px solid #ccc', paddingTop: '0.5rem', display: 'flex', justifyContent: 'space-between', fontWeight: 'bold' }}>
+                            <span>Total:</span>
+                            <span>${total}</span>
+                        </div>
+                        <button onClick={clear} style={{ marginTop: '0.5rem', width: '100%' }}>
+                            Clear Cart
+                        </button>
+                    </>
+                )}
+            </div>
+        </div>
+    )
+}
+
+export default CartExample

package/src/examples/counter/app.tsx

@@ -0,0 +1,14 @@
+import { CounterExample } from './view'
+
+export default function App() {
+    return (
+        <>
+            {/* <AutoRootCtx/> */}
+            <CounterExample />
+            <p style={{ color: '#666', fontSize: '0.875rem' }}>
+                A simple counter demonstrating basic state management with increment, decrement, and reset operations.
+            </p>
+            {/* <DevToolContainer Component={DataView} /> */}
+        </>
+    )
+}

package/src/examples/counter/index.ts

@@ -0,0 +1,2 @@
+export { CounterExample, CounterExample as default } from './view'
+export { useCounterCtx } from './state'

package/src/examples/counter/state.ts

@@ -0,0 +1,22 @@
+import { createRootCtx, createAutoCtx } from '../../index'
+import { useCallback, useState } from 'react'
+
+export const { useCtxState: useCounterCtx } = createAutoCtx(
+    createRootCtx(
+        "counter",
+        () => {
+            const [count, setCount] = useState(0)
+            
+            const increment = useCallback(() => setCount(c => c + 1), [])
+            const decrement = useCallback(() => setCount(c => c - 1), [])
+            const reset = useCallback(() => setCount(0), [])
+            
+            return {
+                count,
+                increment,
+                decrement,
+                reset,
+            }
+        }
+    )
+)

package/src/examples/counter/view.tsx

@@ -0,0 +1,20 @@
+import { useQuickSubscribe } from '../../index'
+import { useCounterCtx } from './state'
+
+export const CounterExample = () => {
+    const { count, increment, decrement, reset } = useQuickSubscribe(useCounterCtx({}))
+
+    return (
+        <div style={{ padding: '1rem', border: '1px solid #ccc', marginBottom: '1rem' }}>
+            <h3>Basic Counter</h3>
+            <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
+                <button onClick={decrement}>-</button>
+                <span style={{ minWidth: '3rem', textAlign: 'center' }}>{count}</span>
+                <button onClick={increment}>+</button>
+                <button onClick={reset}>Reset</button>
+            </div>
+        </div>
+    )
+}
+
+export default CounterExample

package/src/examples/form/app.tsx

@@ -0,0 +1,16 @@
+import { FormExample } from './view'
+
+export default function App() {
+    return (
+        <>
+            {/* <AutoRootCtx/> */}
+            <FormExample formId="registration" />
+            <FormExample formId="profile" />
+            <p style={{ color: '#666', fontSize: '0.875rem' }}>
+                Form validation example with multiple independent form instances.
+                Shows real-time validation and error handling.
+            </p>
+            {/* <DevToolContainer Component={DataView} /> */}
+        </>
+    )
+}

package/src/examples/form/index.ts

@@ -0,0 +1,3 @@
+export { FormExample, FormExample as default } from './view'
+export { useFormCtx } from './state'
+export type { FormData } from './state'

package/src/examples/form/state.ts

@@ -0,0 +1,58 @@
+import { createRootCtx, createAutoCtx } from '../../index'
+import { useCallback, useState } from 'react'
+
+export interface FormData {
+    name: string
+    email: string
+    age: string
+}
+
+export const { useCtxState: useFormCtx } = createAutoCtx(
+    createRootCtx(
+        "form",
+        ({ formId }: { formId: string }) => {
+            const [data, setData] = useState<FormData>({ name: '', email: '', age: '' })
+            const [errors, setErrors] = useState<Partial<FormData>>({})
+            const [submitted, setSubmitted] = useState(false)
+
+            const validate = useCallback((data: FormData): Partial<FormData> => {
+                const errors: Partial<FormData> = {}
+                if (!data.name.trim()) errors.name = 'Name is required'
+                if (!data.email.includes('@')) errors.email = 'Invalid email'
+                if (data.age && isNaN(Number(data.age))) errors.age = 'Age must be a number'
+                return errors
+            }, [])
+
+            const updateField = useCallback((field: keyof FormData, value: string) => {
+                setData(prev => ({ ...prev, [field]: value }))
+                setErrors(prev => ({ ...prev, [field]: undefined }))
+            }, [])
+            
+            const submit = useCallback(() => {
+                const validationErrors = validate(data)
+                if (Object.keys(validationErrors).length === 0) {
+                    setSubmitted(true)
+                    setTimeout(() => setSubmitted(false), 2000)
+                } else {
+                    setErrors(validationErrors)
+                }
+            }, [data, validate])
+            
+            const reset = useCallback(() => {
+                setData({ name: '', email: '', age: '' })
+                setErrors({})
+                setSubmitted(false)
+            }, [])
+
+            return {
+                formId,
+                data,
+                errors,
+                submitted,
+                updateField,
+                submit,
+                reset,
+            }
+        }
+    )
+)

package/src/examples/form/view.tsx

@@ -0,0 +1,53 @@
+import { useQuickSubscribe } from '../../index'
+import { useFormCtx } from './state'
+
+export const FormExample = ({ formId = "user-form" }: { formId?: string }) => {
+    const { data, errors, submitted, updateField, submit, reset } = 
+        useQuickSubscribe(useFormCtx({ formId }))
+
+    return (
+        <div style={{ padding: '1rem', border: '1px solid #ccc', marginBottom: '1rem' }}>
+            <h3>Form ({formId})</h3>
+            {submitted && (
+                <div style={{ padding: '0.5rem', background: '#d4edda', color: '#155724', marginBottom: '1rem' }}>
+                    Form submitted successfully!
+                </div>
+            )}
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+                <div>
+                    <label style={{ display: 'block', marginBottom: '0.25rem' }}>Name:</label>
+                    <input
+                        value={data?.name ?? ''}
+                        onChange={(e) => updateField?.('name', e.target.value)}
+                        style={{ width: '100%', padding: '0.25rem' }}
+                    />
+                    {errors?.name && <div style={{ color: 'red', fontSize: '0.875rem' }}>{errors.name}</div>}
+                </div>
+                <div>
+                    <label style={{ display: 'block', marginBottom: '0.25rem' }}>Email:</label>
+                    <input
+                        value={data?.email ?? ''}
+                        onChange={(e) => updateField?.('email', e.target.value)}
+                        style={{ width: '100%', padding: '0.25rem' }}
+                    />
+                    {errors?.email && <div style={{ color: 'red', fontSize: '0.875rem' }}>{errors.email}</div>}
+                </div>
+                <div>
+                    <label style={{ display: 'block', marginBottom: '0.25rem' }}>Age:</label>
+                    <input
+                        value={data?.age ?? ''}
+                        onChange={(e) => updateField?.('age', e.target.value)}
+                        style={{ width: '100%', padding: '0.25rem' }}
+                    />
+                    {errors?.age && <div style={{ color: 'red', fontSize: '0.875rem' }}>{errors.age}</div>}
+                </div>
+                <div style={{ display: 'flex', gap: '0.5rem' }}>
+                    <button onClick={submit}>Submit</button>
+                    <button onClick={reset}>Reset</button>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default FormExample

package/src/examples/timer/app.tsx

@@ -0,0 +1,16 @@
+import { TimerExample } from './view'
+
+export default function App() {
+    return (
+        <>
+            {/* <AutoRootCtx/> */}
+            <TimerExample timerId="timer1" />
+            <TimerExample timerId="timer2" />
+            <p style={{ color: '#666', fontSize: '0.875rem' }}>
+                Multiple independent timers demonstrating side effects (setInterval) within context state.
+                Each timer can run independently.
+            </p>
+            {/* <DevToolContainer Component={DataView} /> */}
+        </>
+    )
+}

package/src/examples/timer/index.ts

@@ -0,0 +1,2 @@
+export { TimerExample, TimerExample as default } from './view'
+export { useTimerCtx } from './state'