@demokit-ai/react 0.2.0 → 0.4.0

package/dist/banner.d.ts

@@ -0,0 +1,26 @@
+import type { DemoModeBannerProps } from './types';
+/**
+ * A ready-to-use banner component that shows when demo mode is active
+ *
+ * Displays a prominent amber banner with a label, description, and exit button.
+ * Automatically hides when demo mode is disabled or before hydration.
+ *
+ * @example
+ * function App() {
+ *   return (
+ *     <DemoKitProvider fixtures={fixtures}>
+ *       <DemoModeBanner />
+ *       <YourApp />
+ *     </DemoKitProvider>
+ *   )
+ * }
+ *
+ * @example Custom labels
+ * <DemoModeBanner
+ *   demoLabel="Preview Mode"
+ *   description="You're viewing sample data"
+ *   exitLabel="Exit Preview"
+ * />
+ */
+export declare function DemoModeBanner({ className, exitLabel, demoLabel, description, showIcon, showPoweredBy, poweredByUrl, style, onExit, }: DemoModeBannerProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=banner.d.ts.map

package/dist/banner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../src/banner.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAqElD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,SAAc,EACd,SAA4B,EAC5B,SAA8B,EAC9B,WAAmD,EACnD,QAAe,EACf,aAAoB,EACpB,YAAmC,EACnC,KAAK,EACL,MAAM,GACP,EAAE,mBAAmB,kDA0DrB"}

package/dist/config.d.ts

@@ -0,0 +1,20 @@
+import type { RemoteConfig } from '@demokit-ai/core';
+/**
+ * Create a remote source configuration for fetching fixtures from DemoKit Cloud
+ *
+ * @example
+ * ```tsx
+ * import { createRemoteSource } from '@demokit-ai/react'
+ *
+ * const source = createRemoteSource({
+ *   apiUrl: process.env.NEXT_PUBLIC_DEMOKIT_API_URL!,
+ *   apiKey: process.env.NEXT_PUBLIC_DEMOKIT_API_KEY!,
+ * })
+ *
+ * <DemoKitProvider source={source}>
+ *   {children}
+ * </DemoKitProvider>
+ * ```
+ */
+export declare function createRemoteSource(config: RemoteConfig): RemoteConfig;
+//# sourceMappingURL=config.d.ts.map

package/dist/config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAEpD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,GAAG,YAAY,CAOrE"}

package/dist/context.d.ts

@@ -0,0 +1,7 @@
+import type { DemoModeContextValue } from './types';
+/**
+ * React context for demo mode state
+ * @internal
+ */
+export declare const DemoModeContext: import("react").Context<DemoModeContextValue | undefined>;
+//# sourceMappingURL=context.d.ts.map

package/dist/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAEnD;;;GAGG;AACH,eAAO,MAAM,eAAe,2DAA6D,CAAA"}

package/dist/guard.d.ts

@@ -0,0 +1,59 @@
+export interface UseDemoGuardOptions {
+    /**
+     * Called when a mutation is blocked in demo mode.
+     * Use this to show a toast or notification to the user.
+     * @param message - The action name or a default message
+     */
+    onBlocked?: (message: string) => void;
+}
+export interface DemoGuardReturn {
+    /**
+     * Whether demo mode is currently active
+     */
+    isDemoMode: boolean;
+    /**
+     * Wraps a mutation action — prevents execution in demo mode.
+     * When blocked, calls `onBlocked` with the action name.
+     *
+     * @param action - The mutation function to execute (only runs if NOT in demo mode)
+     * @param actionName - Human-readable name (e.g., "Changes saved")
+     * @returns `true` if the action was executed, `false` if blocked
+     *
+     * @example
+     * ```tsx
+     * const { guardMutation } = useDemoGuard({
+     *   onBlocked: (msg) => toast.success(msg)
+     * })
+     *
+     * guardMutation(() => sdk.deleteItem(id), 'Item deleted')
+     * ```
+     */
+    guardMutation: (action: () => void | Promise<void>, actionName?: string) => boolean;
+}
+/**
+ * Hook that prevents mutations from executing in demo mode.
+ *
+ * Instead of letting mutations hit the (intercepted) API and trigger
+ * side effects like optimistic updates and onSuccess handlers, this
+ * hook blocks the mutation entirely and optionally notifies the user.
+ *
+ * @example
+ * ```tsx
+ * import { useDemoGuard } from '@demokit-ai/react'
+ * import { toast } from 'sonner'
+ *
+ * function MyComponent() {
+ *   const { guardMutation } = useDemoGuard({
+ *     onBlocked: (msg) => toast.success(msg, {
+ *       description: 'Changes are not saved. Exit demo mode to make real changes.',
+ *     })
+ *   })
+ *
+ *   const handleDelete = () => {
+ *     guardMutation(() => sdk.deleteItem(id), 'Item deleted')
+ *   }
+ * }
+ * ```
+ */
+export declare function useDemoGuard(options?: UseDemoGuardOptions): DemoGuardReturn;
+//# sourceMappingURL=guard.d.ts.map

package/dist/guard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"guard.d.ts","sourceRoot":"","sources":["../src/guard.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,mBAAmB;IAClC;;;;OAIG;IACH,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;CACtC;AAED,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,UAAU,EAAE,OAAO,CAAA;IAEnB;;;;;;;;;;;;;;;;OAgBG;IACH,aAAa,EAAE,CACb,MAAM,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,EAClC,UAAU,CAAC,EAAE,MAAM,KAChB,OAAO,CAAA;CACb;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAE,mBAAwB,GAAG,eAAe,CAyB/E"}

package/dist/hooks.d.ts

@@ -0,0 +1,59 @@
+import type { DemoModeContextValue } from './types';
+/**
+ * Hook to access demo mode state and controls
+ *
+ * @returns Demo mode context value with state and control methods
+ * @throws Error if used outside of DemoKitProvider
+ *
+ * @example
+ * function MyComponent() {
+ *   const { isDemoMode, isHydrated, toggle } = useDemoMode()
+ *
+ *   // Wait for hydration before rendering demo-dependent UI
+ *   if (!isHydrated) {
+ *     return <Loading />
+ *   }
+ *
+ *   return (
+ *     <div>
+ *       <p>Demo mode: {isDemoMode ? 'ON' : 'OFF'}</p>
+ *       <button onClick={toggle}>Toggle</button>
+ *     </div>
+ *   )
+ * }
+ */
+export declare function useDemoMode(): DemoModeContextValue;
+/**
+ * Hook to check if demo mode is enabled
+ * Shorthand for useDemoMode().isDemoMode
+ *
+ * @returns Whether demo mode is enabled
+ */
+export declare function useIsDemoMode(): boolean;
+/**
+ * Hook to check if the component has hydrated
+ * Shorthand for useDemoMode().isHydrated
+ *
+ * @returns Whether the component has hydrated
+ */
+export declare function useIsHydrated(): boolean;
+/**
+ * Hook to access the session state
+ * Shorthand for useDemoMode().getSession()
+ *
+ * @returns The session state, or null if not yet initialized
+ *
+ * @example
+ * function MyComponent() {
+ *   const session = useDemoSession()
+ *
+ *   const cart = session?.get<CartItem[]>('cart') || []
+ *   const addToCart = (item: CartItem) => {
+ *     session?.set('cart', [...cart, item])
+ *   }
+ *
+ *   return <CartView items={cart} onAdd={addToCart} />
+ * }
+ */
+export declare function useDemoSession(): import("@demokit-ai/core").SessionState | null;
+//# sourceMappingURL=hooks.d.ts.map

package/dist/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAEnD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,IAAI,oBAAoB,CAWlD;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,IAAI,OAAO,CAEvC;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,IAAI,OAAO,CAEvC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,cAAc,mDAE7B"}