@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

pnpm add -D @design.estate/dees-wcctools

Usage

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:

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

3.6 KiB Raw Blame History