react-state-custom 1.0.23 → 1.0.25

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Vo Thanh Dat
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -4,10 +4,16 @@
 
 A lightweight React state management library that combines the simplicity of React hooks with the power of event-driven subscriptions. No boilerplate, no complexity—just pure, performant state management.
 
+[![Demo](https://img.shields.io/badge/Demo-Live-blue?style=flat-square)](https://vothanhdat.github.io/react-state-custom/)
+[![npm version](https://img.shields.io/npm/v/react-state-custom?style=flat-square)](https://www.npmjs.com/package/react-state-custom)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://opensource.org/licenses/MIT)
+
 ```bash
 npm install react-state-custom
 ```
 
+🎮 **[Try the Live Demo →](https://vothanhdat.github.io/react-state-custom/)**
+
 ## Why React State Custom?
 
 **Zero Boilerplate** • **Type-Safe** • **Selective Re-renders** • **Hook-Based** • **~10KB Bundle**
@@ -105,7 +111,7 @@ Full type inference and type safety throughout. Your IDE knows exactly what's in
 | **Boilerplate** | ✅ None | ❌ Heavy | ✅ Minimal |
 | **Type Safety** | ✅ Full inference | ⚠️ Requires setup | ✅ Good |
 | **Selective Re-renders** | ✅ Built-in | ⚠️ Requires selectors | ✅ Built-in |
-| **DevTools** | ⚠️ Console logging | ✅ Redux DevTools | ✅ DevTools support |
+| **DevTools** | ✅ Built-in UI | ✅ Redux DevTools | ✅ DevTools support |
 | **Async Support** | ✅ Native (hooks) | ⚠️ Requires middleware | ✅ Native |
 | **Context Composition** | ✅ Automatic | ❌ Manual | ⚠️ Manual store combination |
 
@@ -243,6 +249,37 @@ const { useCtxState } = createAutoCtx(rootContext);
 
 ## 🚀 Advanced Features
 
+### Developer Tools
+Visual debugging component to inspect all your context data in real-time:
+
+```typescript
+import { DevToolContainer } from 'react-state-custom';
+import 'react-state-custom/dist/react-state-custom.css';
+
+function App() {
+  return (
+    <>
+      <AutoRootCtx />
+      <YourAppContent />
+      <DevToolContainer />
+    </>
+  );
+}
+```
+
+**Custom data viewer with rich object visualization:**
+```typescript
+import { DataViewComponent } from 'react-state-custom';
+import { ObjectView } from 'react-obj-view';
+import 'react-obj-view/dist/react-obj-view.css'; // Required for ObjectView styling
+
+const CustomDataView: DataViewComponent = ({ name, value }) => {
+  return <ObjectView name={name} value={value} expandLevel={2} />;
+};
+
+<DevToolContainer Component={CustomDataView} />
+```
+
 ### Parameterized Contexts
 Create multiple instances of the same state with different parameters:
 
@@ -285,10 +322,57 @@ const userStats = useDataSubscribeWithTransform(
 );
 ```
 
+## 🎮 Live Examples
+
+Explore interactive examples in the **[Live Demo](https://vothanhdat.github.io/react-state-custom/)**:
+
+- **Counter** - Basic state management with increment, decrement, and reset
+- **Todo List** - Multiple independent lists with scoped contexts
+- **Form Validation** - Real-time validation with error handling
+- **Timer** - Side effects and cleanup with millisecond precision
+- **Shopping Cart** - Complex state with derived values (total, itemCount)
+
+Each example includes live code editing with syntax highlighting, powered by Sandpack!
+
 ## 📖 Documentation
 
 For complete API documentation, examples, and advanced patterns, see:
 - **[API_DOCUMENTATION.md](./API_DOCUMENTATION.md)** - Complete API reference
+- **[Live Demo](https://vothanhdat.github.io/react-state-custom/)** - Interactive examples
+
+## 🛠️ Development
+
+```bash
+# Install dependencies
+yarn install
+
+# Run development UI with example selector
+yarn dev
+
+# Run interactive playground with live code editing
+yarn dev:playground
+
+# Build library
+yarn build
+
+# Build demo site
+yarn build:demo
+
+# Preview demo locally
+yarn preview
+```
+
+### Development Modes
+
+**`yarn dev`** - Starts a clean development UI with an interactive example selector. Great for:
+- Testing all examples in one place
+- Quick switching between different examples
+- Visual debugging with DevTool component
+
+**`yarn dev:playground`** - Starts the Sandpack-powered playground with live code editing. Perfect for:
+- Creating interactive demos
+- Live code editing and experimentation
+- Sharing editable examples
 
 ## 🎓 Learning Path
 

package/dist/dev-tool/DataViewComponent.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+export type DataViewComponent = React.FC<{
+    value: any;
+    name: string;
+}>;
+export declare const DataViewDefault: DataViewComponent;

package/dist/dev-tool/DevTool.d.ts

@@ -0,0 +1,5 @@
+export declare const DevToolContainer: ({ toggleButton, Component, ...props }: {
+    [x: string]: any;
+    toggleButton?: string | undefined;
+    Component?: import('./DataViewComponent').DataViewComponent | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/dev-tool/DevToolState.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { DataViewComponent } from './DataViewComponent';
+export declare const DevToolState: React.FC<{
+    Component: DataViewComponent;
+}>;
+export declare const StateView: React.FC<{
+    dataKey: string;
+    Component: DataViewComponent;
+}>;

package/dist/dev-tool/StateLabelRender.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const StateLabelRender: React.FC<any>;

package/dist/dev-tool/useHighlight.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+export declare function useHighlight(filterString: string): {
+    highlight: RegExp;
+};
+export declare const HightlightWrapper: React.FC<{
+    highlight: string;
+    children: any;
+}>;
+export declare const HighlightString: React.FC<{
+    text: string;
+}>;

package/dist/index.d.ts

@@ -3,4 +3,5 @@ export { createRootCtx } from './state-utils/createRootCtx';
 export { AutoRootCtx, createAutoCtx } from './state-utils/createAutoCtx';
 export { useArrayHash } from './state-utils/useArrayHash';
 export { useQuickSubscribe } from './state-utils/useQuickSubscribe';
-export { DevToolContainer } from './DevTool';
+export { DevToolContainer } from './dev-tool/DevTool';
+export type { DataViewComponent } from './dev-tool/DataViewComponent';