Demo Recorder - Quick Start

A React library for recording and playing back interactive web application demos with AI assistance.

🚀 Quick Start

Installation

npm install @james-infotrack/demo-recorder
# or
bun add @james-infotrack/demo-recorder

Usage

Option 1: Unified Component (Simplified API)

import { Demo } from '@james-infotrack/demo-recorder';

// Record a demo
<Demo
  mode="record"
  pluginId="my-app"
  pluginName="My Application"
  apiKey="sk-your-openai-api-key"  // Optional - works without AI
  onComplete={(config) => console.log('Recorded!', config)}
/>

// Play back a demo
<Demo
  mode="play"
  config={demoConfig}
  demoId="demo-1"
  onComplete={(summary) => console.log('Completed!', summary)}
/>

Option 2: Separate Components (Full Control)

import { DemoRecorder, DemoPlayer } from '@james-infotrack/demo-recorder';

// Record a demo
<DemoRecorder
  pluginId="my-app"
  pluginName="My Application"
  apiKey="sk-your-openai-api-key"
  onComplete={(config) => console.log('Recorded!', config)}
/>

// Play back a demo
<DemoPlayer
  config={demoConfig}
  demoId="demo-1"
  onComplete={(summary) => console.log('Completed!', summary)}
/>

Note: The Demo component provides a simpler API by combining both recorder and player into a single component with a mode prop. Use whichever approach you prefer!

📁 Repository Structure

• src/ - Source code for the library
• dist/ - Built library files (generated)
• tests/ - Test files
• examples/ - Example applications
• docs/ - Full documentation and guides

🛠️ Development

Prerequisites

• Node.js 16+ or Bun runtime
• React 18+

Local Development & Testing

To test the library locally without installing it as a package:

Option 1: Using the Dev Server (Recommended)

# Install dependencies
npm install
# or
bun install

# Start the dev server with hot reload
npm run dev
# or
bun run dev

This starts a Vite dev server at http://localhost:5173 where you can test the library with live reloading.

Option 2: Build and Link

# Build the library
npm run build
# or
bun run build

# Link the package locally
npm link
# or
bun link

# In your test project
npm link @james-infotrack/demo-recorder
# or
bun link @james-infotrack/demo-recorder

Option 3: Direct Import (for quick testing)

Create a test file in the root directory:

// test-app.tsx
import { DemoRecorder } from './src/index';

function TestApp() {
  return (
    <DemoRecorder
      pluginId="test"
      pluginName="Test App"
      apiKey="your-key"
      onComplete={(config) => console.log(config)}
    />
  );
}

Run with: npm run dev or bun run dev

Available Scripts

npm run dev          # Start dev server with hot reload
npm run build        # Build the library for production
npm run preview      # Preview the production build
npm run test         # Run tests
npm run test:ui      # Run tests with UI
npm run lint         # Lint code
npm run format       # Format code
npm run typecheck    # Type check without emitting

🧪 Testing

# Run all tests
npm test

# Run tests with UI
npm run test:ui

# Run tests with coverage
npm run test:coverage

📚 Documentation

Full documentation is available in the docs/ folder:

• Full API Documentation - Complete API reference and usage guide
• Tutorial - Step-by-step tutorial
• Development Guide - Development workflows
• Contributing Guide - How to contribute
• Security - Security considerations
• Changelog - Version history

📦 Examples

Check out the examples/ directory for complete working examples:

• examples/basic/ - Basic usage of all components
• examples/custom-styling/ - Custom themes and styling
• examples/config-editor/ - Configuration management
• examples/full-app/ - Complete demo management application

🤝 Contributing

We welcome contributions! Please see CONTRIBUTING.md for guidelines.

📄 License

MIT License - see LICENSE file for details

🔗 Links

• npm Package
• GitHub Repository
• Issue Tracker

💬 Support

For questions or issues, please:

1. Check the documentation
2. Review existing issues
3. Create a new issue if needed

Made with ❤️ by InfoTrack Global