🎨 Interactive Component Catalogue — Live preview with sidebar navigation
🔧 Real-time Property Editing — Modify component props on the fly with auto-detected editors
🌓 Theme Switching — Test light/dark modes instantly
📱 Responsive Viewport Testing — Phone, phablet, tablet, and desktop views
🎬 Screen Recording — Record component demos with audio support and video trimming
🧪 Advanced Demo Tools — Post-render hooks for interactive testing
🚀 Zero-config Setup — TypeScript and Lit support out of the box

Issue Reporting and Security

For reporting bugs, issues, or security vulnerabilities, please visit community.foss.global/. This is the central community hub for all issue reporting. Developers who sign and comply with our contribution agreement and go through identification can also get a code.foss.global/ account to submit Pull Requests directly.

Installation

# Using pnpm (recommended)
pnpm add -D @design.estate/dees-wcctools

# Using npm
npm install @design.estate/dees-wcctools --save-dev

Quick Start

1. Create Your Component

import { DeesElement, customElement, html, css, property } from '@design.estate/dees-element';

@customElement('my-button')
export class MyButton extends DeesElement {
  // Define a demo for the catalogue
  public static demo = () => html`
    <my-button .label=${'Click me!'} .variant=${'primary'}></my-button>
  `;

  @property({ type: String })
  accessor label: string = 'Button';

  @property({ type: String })
  accessor variant: 'primary' | 'secondary' = 'primary';

  public static styles = [
    css`
      :host {
        display: inline-block;
      }
      button {
        padding: 8px 16px;
        border-radius: 4px;
        border: none;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.3s;
      }
      button.primary {
        background: #007bff;
        color: white;
      }
      button.secondary {
        background: #6c757d;
        color: white;
      }
      button:hover {
        opacity: 0.9;
      }
    `
  ];

  public render() {
    return html`
      <button class="${this.variant}">
        ${this.label}
      </button>
    `;
  }
}

2. Set Up Your Catalogue

// catalogue.ts
import { setupWccTools } from '@design.estate/dees-wcctools';
import { html } from 'lit';

// Import your components
import { MyButton } from './components/my-button.js';
import { MyCard } from './components/my-card.js';

// Define elements for the catalogue
const elements = {
  'my-button': MyButton,
  'my-card': MyCard,
};

// Optionally define pages
const pages = {
  'home': () => html`
    <div style="padding: 20px;">
      <h1>Welcome to My Component Library</h1>
      <p>Browse components using the sidebar.</p>
    </div>
  `,
  'getting-started': () => html`
    <div style="padding: 20px;">
      <h2>Getting Started</h2>
      <p>Installation and usage instructions...</p>
    </div>
  `,
};

// Initialize the catalogue
setupWccTools(elements, pages);

3. Create an HTML Entry Point

<!DOCTYPE html>
<html>
<head>
  <title>Component Catalogue</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="margin: 0; padding: 0;">
  <script type="module" src="./catalogue.js"></script>
</body>
</html>

Features

🎯 Live Property Editing

The properties panel automatically detects and allows editing of:

Property Type	Editor
String	Text input
Number	Number input
Boolean	Checkbox
Enum	Select dropdown
Object/Array	JSON editor modal

📱 Viewport Testing

Test your components across different screen sizes:

Phone — 320px width
Phablet — 600px width
Tablet — 768px width
Desktop — Full width (native)

🌓 Theme Support

Components automatically adapt to light/dark themes using the goBright property:

public render() {
  return html`
    <div class="${this.goBright ? 'light-theme' : 'dark-theme'}">
      <!-- Your component content -->
    </div>
  `;
}

Or use CSS custom properties with the theme manager:

import { cssManager } from '@design.estate/dees-element';

public static styles = [
  css`
    :host {
      color: ${cssManager.bdTheme('#000', '#fff')};
      background: ${cssManager.bdTheme('#fff', '#000')};
    }
  `
];

🎬 Screen Recording

Record component demos directly from the catalogue! The built-in recorder supports:

Viewport Recording — Record just the component viewport
Full Screen Recording — Capture the entire screen
Audio Support — Add microphone commentary with live level monitoring
Video Trimming — Trim start/end before export with visual timeline
WebM Export — High-quality video output

Click the red record button in the bottom toolbar to start.

🧪 Demo Tools

The demotools module provides enhanced testing capabilities with dees-demowrapper:

import '@design.estate/dees-wcctools/demotools';

@customElement('my-component')
export class MyComponent extends DeesElement {
  public static demo = () => html`
    <dees-demowrapper .runAfterRender=${async (wrapper) => {
      // Find elements using standard DOM APIs
      const myComponent = wrapper.querySelector('my-component');

      // Simulate user interactions
      myComponent.value = 'Test value';
      await myComponent.updateComplete;

      // Work with multiple elements
      wrapper.querySelectorAll('.item').forEach((el, i) => {
        console.log(`Item ${i}:`, el.textContent);
      });
    }}>
      <my-component></my-component>
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
    </dees-demowrapper>
  `;
}

⏳ Async Demos

Return a Promise from demo for async setup. The dashboard waits for resolution:

public static demo = async () => {
  const data = await fetchSomeData();
  return html`<my-component .data=${data}></my-component>`;
};

🎭 Container Queries

Components can respond to their container size using the wccToolsViewport container:

public static styles = [
  css`
    @container wccToolsViewport (min-width: 768px) {
      :host {
        flex-direction: row;
      }
    }

    @container wccToolsViewport (max-width: 767px) {
      :host {
        flex-direction: column;
      }
    }
  `
];

Component Guidelines

Required for Catalogue Display

Components must expose a static demo property returning a Lit template
Use @property() decorators with the accessor keyword for editable properties
Export component classes for proper detection

Best Practices

@customElement('best-practice-component')
export class BestPracticeComponent extends DeesElement {
  // ✅ Static demo property
  public static demo = () => html`
    <best-practice-component
      .complexProp=${{ key: 'value' }}
      simpleAttribute="test"
    ></best-practice-component>
  `;

  // ✅ Typed properties with defaults (TC39 decorators)
  @property({ type: String })
  accessor title: string = 'Default Title';

  // ✅ Complex property without attribute
  @property({ attribute: false })
  accessor complexProp: { key: string } = { key: 'default' };

  // ✅ Enum with proper typing
  @property({ type: String })
  accessor variant: 'small' | 'medium' | 'large' = 'medium';
}

URL Routing

The catalogue uses URL routing for deep linking:

/wcctools-route/:type/:name/:viewport/:theme

Examples:
/wcctools-route/element/my-button/desktop/dark
/wcctools-route/page/home/tablet/bright

API Reference

`setupWccTools(elements, pages?)`

Initialize the WCC Tools dashboard.

Parameter	Type	Description
`elements`	`Record<string, typeof LitElement>`	Map of element names to classes
`pages`	`Record<string, TTemplateFactory>`	Optional map of page names to template functions

`DeesDemoWrapper`

Component for wrapping demos with post-render logic.

Property	Type	Description
`runAfterRender`	`(wrapper) => void \| Promise<void>`	Callback after wrapped elements render

The wrapper provides full DOM API access:

wrapper.querySelector() — Find single element
wrapper.querySelectorAll() — Find multiple elements
wrapper.children — Access child elements directly

Recording Components (Advanced)

For custom recording integrations:

import { RecorderService } from '@design.estate/dees-wcctools';

const recorder = new RecorderService({
  onDurationUpdate: (duration) => console.log(`${duration}s`),
  onRecordingComplete: (blob) => console.log('Recording done!', blob),
  onAudioLevelUpdate: (level) => console.log(`Audio: ${level}%`),
});

await recorder.startRecording({ mode: 'viewport' });
// ... later
recorder.stopRecording();

Project Structure

my-components/
├── src/
│   ├── components/
│   │   ├── my-button.ts
│   │   └── my-card.ts
│   └── catalogue.ts
├── dist/
├── index.html
└── package.json

Browser Support

✅ Chrome/Edge (latest)
✅ Firefox (latest)
✅ Safari (latest)
✅ Mobile browsers with Web Components support

License and Legal Information

This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the LICENSE file.

Please note: The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.

Trademarks

This project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH or third parties, and are not included within the scope of the MIT license granted herein.

Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines or the guidelines of the respective third-party owners, and any usage must be approved in writing. Third-party trademarks used herein are the property of their respective owners and used only in a descriptive manner, e.g. for an implementation of an API or similar.

readme.md

@design.estate/dees-wcctools

Overview