npm package: @james-infotrack/demo-recorder
Description: Record and replay interactive web demos with AI assistance. Capture user interactions, generate demo configurations, and replay them with visual feedback.
Author: InfoTrack Global
Latest version: 0.7.0

# Demo Recorder - Quick Start

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

## 🚀 Quick Start

### Installation

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

### Usage

#### Option 1: Unified Component (Simplified API)

```tsx
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)

```tsx
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)

```bash
# 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

```bash
# 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:

```tsx
// 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

```bash
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

```bash
# 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](docs/README.md) - Complete API reference and usage guide
- [Tutorial](docs/TUTORIAL.md) - Step-by-step tutorial
- [Development Guide](docs/DEVELOPMENT.md) - Development workflows
- [Contributing Guide](docs/CONTRIBUTING.md) - How to contribute
- [Security](docs/SECURITY.md) - Security considerations
- [Changelog](docs/CHANGELOG.md) - 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](docs/CONTRIBUTING.md) for guidelines.

## 📄 License

MIT License - see [LICENSE](LICENSE) file for details

## 🔗 Links

- [npm Package](https://www.npmjs.com/package/@james-infotrack/demo-recorder)
- [GitHub Repository](https://github.com/InfoTrackGlobal/demo-mode)
- [Issue Tracker](https://github.com/InfoTrackGlobal/demo-mode/issues)

## 💬 Support

For questions or issues, please:
1. Check the [documentation](docs/README.md)
2. Review [existing issues](https://github.com/InfoTrackGlobal/demo-mode/issues)
3. Create a new issue if needed

---

Made with ❤️ by InfoTrack Global