124 lines
3.6 KiB
Markdown
124 lines
3.6 KiB
Markdown
|
# @design.estate/dees-wcctools
|
||
|
|
|
||
|
|
🛠️ **Web Component Catalogue Tools** — The core dashboard and UI components for building interactive component catalogues
|
||
|
|
|
||
|
|
## Overview
|
||
|
|
|
||
|
|
This is the main module of `@design.estate/dees-wcctools`, providing the complete dashboard experience for developing, testing, and documenting web components.
|
||
|
|
|
||
|
|
## Installation
|
||
|
|
|
||
|
|
```bash
|
||
|
|
pnpm add -D @design.estate/dees-wcctools
|
||
|
|
```
|
||
|
|
|
||
|
|
## Usage
|
||
|
|
|
||
|
|
```typescript
|
||
|
|
import { setupWccTools } from '@design.estate/dees-wcctools';
|
||
|
|
import { MyButton } from './components/my-button.js';
|
||
|
|
|
||
|
|
setupWccTools({
|
||
|
|
'my-button': MyButton,
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
## Exports
|
||
|
|
|
||
|
|
### Main Entry Point
|
||
|
|
|
||
|
|
| Export | Description |
|
||
|
|
|--------|-------------|
|
||
|
|
| `setupWccTools` | Initialize the component catalogue dashboard |
|
||
|
|
|
||
|
|
### Recording Components
|
||
|
|
|
||
|
|
| Export | Description |
|
||
|
|
|--------|-------------|
|
||
|
|
| `RecorderService` | Service class for screen/viewport recording |
|
||
|
|
| `WccRecordButton` | Record button UI component |
|
||
|
|
| `WccRecordingPanel` | Recording options and preview panel |
|
||
|
|
| `IRecorderEvents` | TypeScript interface for recorder callbacks |
|
||
|
|
| `IRecordingOptions` | TypeScript interface for recording options |
|
||
|
|
|
||
|
|
## Internal Components
|
||
|
|
|
||
|
|
The module includes these internal web components:
|
||
|
|
|
||
|
|
| Component | Description |
|
||
|
|
|-----------|-------------|
|
||
|
|
| `wcc-dashboard` | Main dashboard container with routing |
|
||
|
|
| `wcc-sidebar` | Navigation sidebar with element/page listing |
|
||
|
|
| `wcc-frame` | Iframe viewport with responsive sizing |
|
||
|
|
| `wcc-properties` | Property panel with live editing |
|
||
|
|
| `wcc-record-button` | Recording state indicator button |
|
||
|
|
| `wcc-recording-panel` | Recording workflow UI |
|
||
|
|
|
||
|
|
## RecorderService API
|
||
|
|
|
||
|
|
For programmatic recording control:
|
||
|
|
|
||
|
|
```typescript
|
||
|
|
import { RecorderService, type IRecorderEvents } from '@design.estate/dees-wcctools';
|
||
|
|
|
||
|
|
const events: IRecorderEvents = {
|
||
|
|
onDurationUpdate: (duration) => console.log(`Recording: ${duration}s`),
|
||
|
|
onRecordingComplete: (blob) => saveBlob(blob),
|
||
|
|
onAudioLevelUpdate: (level) => updateMeter(level),
|
||
|
|
onError: (error) => console.error(error),
|
||
|
|
onStreamEnded: () => console.log('User stopped sharing'),
|
||
|
|
};
|
||
|
|
|
||
|
|
const recorder = new RecorderService(events);
|
||
|
|
|
||
|
|
// Load available microphones
|
||
|
|
const mics = await recorder.loadMicrophones(true); // true = request permission
|
||
|
|
|
||
|
|
// Start audio level monitoring
|
||
|
|
await recorder.startAudioMonitoring(mics[0].deviceId);
|
||
|
|
|
||
|
|
// Start recording
|
||
|
|
await recorder.startRecording({
|
||
|
|
mode: 'viewport', // or 'screen'
|
||
|
|
audioDeviceId: mics[0].deviceId,
|
||
|
|
viewportElement: document.querySelector('.viewport'),
|
||
|
|
});
|
||
|
|
|
||
|
|
// Stop recording
|
||
|
|
recorder.stopRecording();
|
||
|
|
|
||
|
|
// Export trimmed video
|
||
|
|
const trimmedBlob = await recorder.exportTrimmedVideo(videoElement, startTime, endTime);
|
||
|
|
|
||
|
|
// Cleanup
|
||
|
|
recorder.dispose();
|
||
|
|
```
|
||
|
|
|
||
|
|
## Architecture
|
||
|
|
|
||
|
|
```
|
||
|
|
ts_web/
|
||
|
|
├── index.ts # Main exports
|
||
|
|
├── elements/
|
||
|
|
│ ├── wcc-dashboard.ts # Root dashboard component
|
||
|
|
│ ├── wcc-sidebar.ts # Navigation sidebar
|
||
|
|
│ ├── wcc-frame.ts # Responsive iframe viewport
|
||
|
|
│ ├── wcc-properties.ts # Property editing panel
|
||
|
|
│ ├── wcc-record-button.ts # Recording button
|
||
|
|
│ ├── wcc-recording-panel.ts # Recording options/preview
|
||
|
|
│ └── wcctools.helpers.ts # Shared utilities
|
||
|
|
├── services/
|
||
|
|
│ └── recorder.service.ts # MediaRecorder abstraction
|
||
|
|
└── pages/
|
||
|
|
└── index.ts # Built-in pages
|
||
|
|
```
|
||
|
|
|
||
|
|
## Features
|
||
|
|
|
||
|
|
- 🎨 Interactive component preview
|
||
|
|
- 🔧 Real-time property editing with type detection
|
||
|
|
- 🌓 Theme switching (light/dark)
|
||
|
|
- 📱 Responsive viewport testing
|
||
|
|
- 🎬 Screen recording with trimming
|
||
|
|
- 🔗 URL-based deep linking
|