@demokit-ai/react 0.2.0 → 0.4.0

package/README.md

@@ -1,132 +0,0 @@
-# @demokit-ai/react
-
-![Tests](https://img.shields.io/badge/tests-55%20passing-brightgreen)
-![Coverage](https://img.shields.io/badge/coverage-8%25-red)
-
-React bindings for DemoKit - provider, hooks, and components for demo mode state management.
-
-## Installation
-
-```bash
-npm install @demokit-ai/react @demokit-ai/core
-```
-
-## Features
-
-- `DemoProvider` - React context provider for demo mode state
-- `DemoBanner` - Customizable banner component for demo mode indication
-- `useDemo` - Hook for accessing and controlling demo mode
-- `useDemoState` - Hook for managing demo-specific state
-- `withDemo` - HOC for conditionally rendering based on demo mode
-- Full TypeScript support
-
-## Usage
-
-### Provider Setup
-
-Wrap your app with the `DemoProvider`:
-
-```tsx
-import { DemoProvider } from '@demokit-ai/react'
-
-function App() {
-  return (
-    <DemoProvider
-      enabled={true}
-      fixtures={{
-        users: [{ id: '1', name: 'Demo User' }],
-      }}
-    >
-      <YourApp />
-    </DemoProvider>
-  )
-}
-```
-
-### Using the Demo Hook
-
-Access demo mode state and controls:
-
-```tsx
-import { useDemo } from '@demokit-ai/react'
-
-function MyComponent() {
-  const { enabled, toggle, fixtures, setFixture } = useDemo()
-
-  return (
-    <div>
-      <button onClick={toggle}>
-        Demo Mode: {enabled ? 'ON' : 'OFF'}
-      </button>
-      {enabled && <pre>{JSON.stringify(fixtures, null, 2)}</pre>}
-    </div>
-  )
-}
-```
-
-### Demo Banner
-
-Show a banner when demo mode is active:
-
-```tsx
-import { DemoBanner } from '@demokit-ai/react'
-
-function App() {
-  return (
-    <>
-      <DemoBanner
-        message="You're viewing demo data"
-        position="top"
-        dismissible
-      />
-      <YourApp />
-    </>
-  )
-}
-```
-
-### Conditional Rendering
-
-Use the HOC for conditional demo content:
-
-```tsx
-import { withDemo } from '@demokit-ai/react'
-
-const DemoOnlyFeature = withDemo(({ fixtures }) => (
-  <div>This only shows in demo mode</div>
-))
-```
-
-## API Reference
-
-### `DemoProvider`
-
-Props:
-- `enabled` - Whether demo mode is enabled
-- `fixtures` - Demo fixtures object
-- `onToggle` - Callback when demo mode is toggled
-- `storage` - Storage adapter for persistence
-
-### `useDemo()`
-
-Returns:
-- `enabled` - Current demo mode state
-- `toggle()` - Toggle demo mode
-- `enable()` - Enable demo mode
-- `disable()` - Disable demo mode
-- `fixtures` - Current fixtures
-- `setFixture(key, value)` - Set a fixture
-- `clearFixtures()` - Clear all fixtures
-
-### `DemoBanner`
-
-Props:
-- `message` - Banner message
-- `position` - 'top' | 'bottom'
-- `dismissible` - Whether the banner can be dismissed
-- `className` - Custom CSS class
-- `style` - Inline styles
-
-## License
-
-MIT

package/dist/index.d.cts

@@ -1,235 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as _demokit_ai_core from '@demokit-ai/core';
-import { FixtureMap, SessionState } from '@demokit-ai/core';
-export { FixtureHandler, FixtureMap, RequestContext, SessionState } from '@demokit-ai/core';
-import * as react from 'react';
-import { ReactNode } from 'react';
-
-/**
- * Props for the DemoKitProvider component
- */
-interface DemoKitProviderProps {
-    /**
-     * Child components to render
-     */
-    children: ReactNode;
-    /**
-     * Map of URL patterns to fixture handlers
-     */
-    fixtures: FixtureMap;
-    /**
-     * localStorage key for persisting demo mode state
-     * @default 'demokit-mode'
-     */
-    storageKey?: string;
-    /**
-     * Whether demo mode should be initially enabled
-     * If not provided, will read from localStorage
-     * @default false
-     */
-    initialEnabled?: boolean;
-    /**
-     * Callback invoked when demo mode state changes
-     */
-    onDemoModeChange?: (enabled: boolean) => void;
-    /**
-     * Base URL to use for relative URL parsing
-     * @default 'http://localhost'
-     */
-    baseUrl?: string;
-}
-/**
- * Value provided by the DemoMode context
- */
-interface DemoModeContextValue {
-    /**
-     * Whether demo mode is currently enabled
-     */
-    isDemoMode: boolean;
-    /**
-     * Whether the component has hydrated (for SSR safety)
-     * Always check this before rendering demo-dependent UI
-     */
-    isHydrated: boolean;
-    /**
-     * Enable demo mode
-     */
-    enable(): void;
-    /**
-     * Disable demo mode
-     */
-    disable(): void;
-    /**
-     * Toggle demo mode and return the new state
-     */
-    toggle(): void;
-    /**
-     * Set demo mode to a specific state
-     */
-    setDemoMode(enabled: boolean): void;
-    /**
-     * Reset the session state, clearing all stored data
-     * Call this to manually reset the demo session without page refresh
-     */
-    resetSession(): void;
-    /**
-     * Get the current session state instance
-     * Useful for inspecting or manipulating session state directly
-     * Returns null if the interceptor hasn't been initialized yet
-     */
-    getSession(): SessionState | null;
-}
-/**
- * Props for the DemoModeBanner component
- */
-interface DemoModeBannerProps {
-    /**
-     * Additional CSS class name
-     */
-    className?: string;
-    /**
-     * Label for the exit button
-     * @default 'Exit Demo Mode'
-     */
-    exitLabel?: string;
-    /**
-     * Label shown when demo mode is active
-     * @default 'Demo Mode Active'
-     */
-    demoLabel?: string;
-    /**
-     * Description shown in the banner
-     * @default 'Changes are simulated and not saved'
-     */
-    description?: string;
-    /**
-     * Whether to show the eye icon
-     * @default true
-     */
-    showIcon?: boolean;
-    /**
-     * Custom styles for the banner container
-     */
-    style?: React.CSSProperties;
-    /**
-     * Callback when exit button is clicked
-     * If not provided, will call disable() from context
-     */
-    onExit?: () => void;
-}
-
-/**
- * Provider component that enables demo mode functionality
- *
- * Wraps your app to provide demo mode state and controls.
- * Handles SSR hydration safely and persists state to localStorage.
- *
- * @example
- * const fixtures = {
- *   'GET /api/users': () => [{ id: '1', name: 'Demo User' }],
- *   'GET /api/users/:id': ({ params }) => ({ id: params.id, name: 'Demo User' }),
- * }
- *
- * function App() {
- *   return (
- *     <DemoKitProvider
- *       fixtures={fixtures}
- *       onDemoModeChange={(enabled) => console.log('Demo mode:', enabled)}
- *     >
- *       <YourApp />
- *     </DemoKitProvider>
- *   )
- * }
- */
-declare function DemoKitProvider({ children, fixtures, storageKey, initialEnabled, onDemoModeChange, baseUrl, }: DemoKitProviderProps): react_jsx_runtime.JSX.Element;
-
-/**
- * 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>
- *   )
- * }
- */
-declare function useDemoMode(): DemoModeContextValue;
-/**
- * Hook to check if demo mode is enabled
- * Shorthand for useDemoMode().isDemoMode
- *
- * @returns Whether demo mode is enabled
- */
-declare function useIsDemoMode(): boolean;
-/**
- * Hook to check if the component has hydrated
- * Shorthand for useDemoMode().isHydrated
- *
- * @returns Whether the component has hydrated
- */
-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} />
- * }
- */
-declare function useDemoSession(): _demokit_ai_core.SessionState | null;
-
-/**
- * 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"
- * />
- */
-declare function DemoModeBanner({ className, exitLabel, demoLabel, description, showIcon, style, onExit, }: DemoModeBannerProps): react_jsx_runtime.JSX.Element | null;
-
-/**
- * React context for demo mode state
- * @internal
- */
-declare const DemoModeContext: react.Context<DemoModeContextValue | undefined>;
-
-export { DemoKitProvider, type DemoKitProviderProps, DemoModeBanner, type DemoModeBannerProps, DemoModeContext, type DemoModeContextValue, useDemoMode, useDemoSession, useIsDemoMode, useIsHydrated };