feat: update docs

Author: RegiByte

examples/basic/App.tsx

@@ -9,7 +9,7 @@
  */
 
 import React, { useSyncExternalStore } from "react";
-import { useResource } from "./hooks";
+import { useResource } from "./system";
 
 /**
  * Counter Display Component

examples/basic/hooks.ts

@@ -8,6 +8,7 @@
 import { StrictMode, Suspense } from "react";
 import { createRoot } from "react-dom/client";
 import { App } from "./App";
+import React from "react";
 
 /**
  * Mount React - system will start automatically via Suspense
@@ -18,7 +19,9 @@ function main() {
   const root = createRoot(document.getElementById("root")!);
   root.render(
     <StrictMode>
-      <Suspense fallback={<div style={{ padding: "40px" }}>🚀 Starting system...</div>}>
+      <Suspense
+        fallback={<div style={{ padding: "40px" }}>🚀 Starting system...</div>}
+      >
         <App />
       </Suspense>
     </StrictMode>

examples/basic/main.tsx

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "braided": "^0.0.4",
-    "braided-react": "0.0.1",
+    "braided-react": "^0.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

examples/basic/package-lock.json

@@ -6,6 +6,22 @@
  */
 
 import { defineResource, StartedResource } from "braided";
+import { createSystemHooks, createSystemManager } from "braided-react";
+
+const slowResource = defineResource({
+  start: () => {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve("Slow resource");
+      }, 300); // 300ms to simulate a slow resource
+      // this gives time for the suspense boundary to render
+      // obviously, you should not do this in production
+    });
+  },
+  halt: () => {
+    console.log("Slow resource halted");
+  },
+});
 
 /**
  * Counter Resource - No dependencies
@@ -122,4 +138,19 @@ export const loggerResource = defineResource({
 export const systemConfig = {
   counter: counterResource,
   logger: loggerResource,
+  slow: slowResource,
 };
+
+/**
+ * Create manager and hooks for our system configuration.
+ *
+ * These hooks provide full TypeScript inference:
+ * - useResource('counter') returns the exact counter type
+ * - useResource('logger') returns the exact logger type
+ * - useSystem() returns the complete system type
+ */
+export const manager = createSystemManager(systemConfig);
+export const { useSystem, useResource, SystemProvider } =
+  createSystemHooks(manager);
+
+  

examples/basic/package.json

@@ -1,16 +1,17 @@
 /**
  * ErrorBoundary Integration Examples
- * 
+ *
  * This file demonstrates how to use ErrorBoundary with braided-react
  * to handle system startup errors gracefully.
- * 
+ *
  * Install: npm install react-error-boundary
  */
 
 import { Suspense } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { defineResource } from "braided";
 import { createSystemManager, createSystemHooks } from "braided-react";
+import React from "react";
 
 // ============================================================================
 // Example 1: Basic ErrorBoundary with System Startup Errors
@@ -28,6 +29,7 @@ const basicConfig = {
   database: databaseResource,
 };
 
+// @ts-expect-error - Type error
 const basicManager = createSystemManager(basicConfig);
 const { useSystem: useBasicSystem } = createSystemHooks(basicManager);
 
@@ -89,16 +91,16 @@ function MultiApp() {
 function CustomErrorFallback({ error }: { error: Error }) {
   // Parse the error message to extract individual failures
   const errorMessage = error.message;
-  
+
   // Extract individual resource errors
   const resourceErrors: Array<{ resource: string; message: string }> = [];
-  
+
   // Parse format: "System startup failed: api: error1, cache: error2"
   const match = errorMessage.match(/System startup failed: (.+)/);
   if (match) {
     const errorsStr = match[1];
     const parts = errorsStr.split(", ");
-    
+
     parts.forEach((part) => {
       const [resource, ...messageParts] = part.split(": ");
       resourceErrors.push({
@@ -288,7 +290,9 @@ function CriticalFeature() {
 
 function OptionalFeature() {
   return (
-    <div style={{ padding: "20px", background: "#f0fdf4", borderRadius: "8px" }}>
+    <div
+      style={{ padding: "20px", background: "#f0fdf4", borderRadius: "8px" }}
+    >
       <h3>✅ Optional Features</h3>
       <p>These features work even when critical systems fail.</p>
     </div>
@@ -393,7 +397,8 @@ function ProductionErrorFallback({ error }: { error: Error }) {
         Something went wrong
       </h1>
       <p style={{ color: "#6b7280", marginBottom: "30px" }}>
-        We're having trouble starting the application. Our team has been notified.
+        We're having trouble starting the application. Our team has been
+        notified.
       </p>
       <div style={{ display: "flex", gap: "10px", justifyContent: "center" }}>
         <button
@@ -456,29 +461,28 @@ export function ProductionExample() {
 
 /**
  * Key Patterns:
- * 
+ *
  * 1. Always wrap your app with ErrorBoundary + Suspense:
  *    <ErrorBoundary FallbackComponent={ErrorUI}>
  *      <Suspense fallback={<Loading />}>
  *        <App />
  *      </Suspense>
  *    </ErrorBoundary>
- * 
+ *
  * 2. System startup errors are automatically thrown by useSystem()
  *    - Suspense catches the loading state (thrown Promise)
  *    - ErrorBoundary catches startup failures (thrown Error)
- * 
+ *
  * 3. Error messages include all failed resources:
  *    "System startup failed: api: error1, cache: error2"
- * 
+ *
  * 4. Use nested ErrorBoundaries for graceful degradation:
  *    - Outer boundary for complete failures
  *    - Inner boundaries for optional features
- * 
+ *
  * 5. In production:
  *    - Log errors to tracking service (Sentry, LogRocket)
  *    - Provide user-friendly error messages
  *    - Offer retry/reload options
  *    - Include support contact information
  */
-

examples/basic/system.ts

@@ -14,8 +14,8 @@ import { useResource } from "./hooks";
  * Uses the Zustand store from the counterStore resource.
  */
 function Counter() {
-  const counterStore = useResource("counterStore");
-  const { count, increment, decrement, reset } = counterStore.useCounterStore();
+  const { useCounterStore } = useResource("counterStore");
+  const { count, increment, decrement, reset } = useCounterStore();
 
   return (
     <div

examples/error-boundary-example.tsx …rror-boundary/error-boundary-example.tsxexamples/error-boundary-example.tsx renamed to examples/error-boundary/error-boundary-example.tsx examples/error-boundary-example.tsx renamed to examples/error-boundary/error-boundary-example.tsx

@@ -2,8 +2,9 @@
  * Typed Hooks for the System
  */
 
-import { createSystemManager, createSystemHooks } from 'braided-react'
-import { systemConfig } from './system'
+import { createSystemManager, createSystemHooks } from "braided-react";
+import { systemConfig } from "./system";
 
-export const manager = createSystemManager(systemConfig)
-export const { useSystem, useResource, SystemProvider } = createSystemHooks(manager)
+export const manager = createSystemManager(systemConfig);
+export const { useSystem, useResource, SystemProvider } =
+  createSystemHooks(manager);

examples/lazy-start/App.tsx

@@ -7,6 +7,7 @@
 import { StrictMode, Suspense } from "react";
 import { createRoot } from "react-dom/client";
 import { App } from "./App";
+import React from "react";
 
 /**
  * Mount React - system will start automatically
@@ -17,7 +18,13 @@ function main() {
   const root = createRoot(document.getElementById("root")!);
   root.render(
     <StrictMode>
-      <Suspense fallback={<div style={{ padding: "40px" }}>🚀 Starting system with Zustand stores...</div>}>
+      <Suspense
+        fallback={
+          <div style={{ padding: "40px" }}>
+            🚀 Starting system with Zustand stores...
+          </div>
+        }
+      >
         <App />
       </Suspense>
     </StrictMode>