1.0.92

docs(readme): update documentation with comprehensive overview, quick start guide, and detailed feature descriptions
2025-06-16 14:24:07 +00:00 · 2025-06-16 14:24:02 +00:00
3 changed files with 342 additions and 71 deletions
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "@design.estate/dees-wcctools",
-  "version": "1.0.91",
+  "version": "1.0.92",
  "private": false,
  "description": "A set of web component tools for creating element catalogues, enabling the structured development and documentation of custom elements and pages.",
  "exports": {
--- a/readme.md
+++ b/readme.md
@ -1,101 +1,360 @@
 # @design.estate/dees-wcctools
-wcc tools for creating element catalogues
+Web Component Development Tools - A powerful framework for building, testing, and documenting web components
-## Install
+## Overview
-To install `@design.estate/dees-wcctools`, you can use npm:
+`@design.estate/dees-wcctools` provides a comprehensive development environment for web components, featuring:
 - 🎨 Interactive component catalogue with live preview
 - 🔧 Real-time property editing
 - 🌓 Theme switching (light/dark modes)
 - 📱 Responsive viewport testing
 - 🧪 Advanced demo tools for component testing
 - 🚀 Zero-config setup with TypeScript and Lit support
 ## Installation
 ```bash
-npm install @design.estate/dees-wcctools --save
+# Using npm
 npm install @design.estate/dees-wcctools --save-dev
 # Using pnpm (recommended)
 pnpm add -D @design.estate/dees-wcctools
 ```
-## Usage
+## Quick Start
 The `@design.estate/dees-wcctools` package provides a set of tools for creating element catalogues using Web Components. It leverages LitElement for creating custom elements and provides a structured way to showcase and test these elements in various environments and themes.
-### Setting Up
+### 1. Create Your Component
 First, ensure that your project is set up to use TypeScript and ESM syntax. This guide assumes you have a basic understanding of TypeScript and modern JavaScript development practices.
 Start by importing the necessary tools from `@design.estate/dees-wcctools` in your main TypeScript file. 
 ```typescript
 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 })
  public label: string = 'Button';
  @property({ type: String })
  public 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
 ```typescript
 // catalogue.ts
 import { setupWccTools } from '@design.estate/dees-wcctools';
 import { html } from 'lit';
 // Import your components
 import './components/my-button.js';
 import './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);
 ```
-### Defining Custom Elements
+### 3. Create an HTML Entry Point
-Define your custom elements using LitElement. Here's a simple example of an element:
+
 ```html
 <!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:
 - **String** properties with text inputs
 - **Number** properties with number inputs
 - **Boolean** properties with checkboxes
 - **Enum** properties with select dropdowns
 - **Object** and **Array** properties (read-only display)
 ### 📱 Viewport Testing
 Test your components across different screen sizes:
 - **Phone** (320px width)
 - **Phablet** (600px width)
 - **Tablet** (768px width)
 - **Desktop** (full width)
 ### 🌓 Theme Support
 Components automatically adapt to light/dark themes using the `goBright` property:
 ```typescript
-import { LitElement, html, customElement } from 'lit';
+public render() {
  return html`
    <div class="${this.goBright ? 'light-theme' : 'dark-theme'}">
      <!-- Your component content -->
    </div>
  `;
 }
 ```
-@customElement('my-element')
+Or use CSS custom properties:
-class MyElement extends LitElement {
+```typescript
-  render() {
+import { cssManager } from '@design.estate/dees-element';
-    return html`<p>Hello, world!</p>`;
+
 public static styles = [
  css`
    :host {
      color: ${cssManager.bdTheme('#000', '#fff')};
      background: ${cssManager.bdTheme('#fff', '#000')};
    }
  `
 ];
 ```
 ### 🧪 Advanced Demo Tools
 The demo tools provide enhanced testing capabilities:
 ```typescript
 import * as demoTools from '@design.estate/dees-wcctools/demoTools';
@customElement('my-component')
 export class MyComponent extends DeesElement {
  public static demo = () => html`
    <dees-demowrapper .runAfterRender=${async (element: MyComponent) => {
      // Access the rendered component instance
      console.log('Component mounted:', element);
      // Simulate user interactions
      element.value = 'Test value';
      await element.updateComplete;
      // Trigger methods
      element.handleClick();
      // Assert component state
      if (element.isValid) {
        console.log('Component validation passed');
      }
    }}>
      <my-component></my-component>
    </dees-demowrapper>
  `;
 }
 ```
 ### 🎭 Container Queries Support
 Components can respond to their container size:
 ```typescript
 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
 1. Components must expose a static `demo` property returning a Lit template
 2. Use `@property()` decorators for properties you want to be editable
 3. Export component classes for proper detection
 ### Best Practices
 ```typescript
@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
  @property({ type: String })
  public title: string = 'Default Title';
  // ✅ Complex property without attribute
  @property({ attribute: false })
  public complexProp: { key: string } = { key: 'default' };
  // ✅ Enum with proper typing
  @property({ type: String })
  public variant: 'small' | 'medium' | 'large' = 'medium';
 }
 ```
 ## URL Routing
 The catalogue uses URL routing for deep linking:
 ```
 /wcctools-route/:type/:name/:viewport/:theme
 Example:
 /wcctools-route/element/my-button/desktop/dark
 /wcctools-route/page/home/tablet/bright
 ```
 ## Development Workflow
 ### Build and Watch
 ```json
 {
  "scripts": {
    "build": "tsbuild tsfolders --allowimplicitany && tsbundle element",
    "watch": "tswatch element",
    "serve": "http-server ./dist"
  }
 }
 ```
-### Bootstrapping the WCCTools Dashboard
+### Project Structure
-To showcase your elements, `@design.estate/dees-wcctools` provides a handy way to bootstrap a dashboard where your elements can be registered and displayed.
+```
-
+my-components/
-Create a bootstrap function in your main file or a separate module:
+├── src/
-
+│   ├── components/
-```typescript
+│   │   ├── my-button.ts
-async function bootstrapWCCTools() {
+│   │   └── my-card.ts
-  // Define your elements here
+│   └── catalogue.ts
-  const elements = {
+├── dist/
-    'my-element': MyElement, // Assuming MyElement is imported
+├── index.html
-  };
+└── package.json
  // Optionally, define pages as functions returning Lit HTML Templates
  const pages = {
    home: () => html`<h1>Welcome to My Element Catalogue</h1>`,
  };
  // Setup the WCCTools dashboard
  setupWccTools(elements, pages);
 }
 ```
-Call this function to initialize your catalogue:
+## Advanced Features
 ### Custom Property Handlers
 For complex property types, implement custom logic in your demo:
 ```typescript
-bootstrapWCCTools();
+public static demo = () => html`
  <dees-demowrapper .runAfterRender=${(el) => {
    // Set up complex property handling
    el.addEventListener('property-change', (e) => {
      console.log('Property changed:', e.detail);
    });
  }}>
    <my-component></my-component>
  </dees-demowrapper>
 `;
 ```
-### Configurations and Customizations
+### Responsive Testing Helpers
 The `setupWccTools` function accepts two arguments: `elements` and `pages`. 
 - `elements`: An object where keys are element tags (e.g., 'my-element') and values are the corresponding class definitions.
 - `pages`: An optional object where keys are page identifiers and values are functions returning Lit HTML templates.
 ### Testing Elements
 Once the dashboard is set up, navigate to your project in a web browser. You'll see a sidebar listing all registered elements and pages. Clicking on an element name will display it in the main view, allowing you to interact with it and see it in action.
 ### Theme and Environment Testing
 The dashboard also provides options for testing your elements in different environments (e.g., desktop, tablet) and themes (light or dark). This helps ensure that your elements are versatile and adaptable to varying conditions.
 ### Expanding Your Catalogue
 To add more elements to your catalogue, simply extend the `elements` object and rerun `bootstrapWCCTools()`. This modular approach makes it easy to maintain and expand your element catalogue.
 ### Leveraging TypeScript
 Using TypeScript allows you to enforce typing and build more reliable web components. Define properties with decorators, and use TypeScript's features to enhance your component development process.
 ```typescript
-import { LitElement, property, html, customElement } from 'lit';
+import * as domtools from '@design.estate/dees-domtools';
-@customElement('typed-element')
+public static styles = [
-class TypedElement extends LitElement {
+  // Media query helpers
-  @property({type: String})
+  domtools.breakpoints.cssForPhone(css`
-  name: string = 'World';
+    :host { font-size: 14px; }
  `),
-  render() {
+  domtools.breakpoints.cssForTablet(css`
-    return html`<p>Hello, ${this.name}!</p>`;
+    :host { font-size: 16px; }
-  }
+  `),
-}
+  
  domtools.breakpoints.cssForDesktop(css`
    :host { font-size: 18px; }
  `)
 ];
 ```
-### Conclusion
+## API Reference
-`@design.estate/dees-wcctools` provides a powerful, flexible platform for developing, showcasing, and testing web components. By leveraging modern development practices like TypeScript and LitElement, you can build a robust catalogue of reusable web components ready for any project.
+
 ### setupWccTools(elements, pages?)
 Initialize the WCC Tools dashboard.
 - `elements`: Object mapping element names to element classes
 - `pages`: Optional object mapping page names to template functions
 ### DeesDemoWrapper
 Component for wrapping demos with post-render logic.
 - `runAfterRender`: Function called after the wrapped element renders
 - Receives the first child element as parameter
 - Supports async operations
 ## Browser Support
 - Chrome/Edge (latest)
 - Firefox (latest)
 - Safari (latest)
 - Mobile browsers with Web Components support
 ## License and Legal Information
--- a/readme.plan.md
+++ b/readme.plan.md
@ -39,3 +39,15 @@ The properties panel has timing issues detecting rendered elements because:
 - Handles timing automatically with 50ms delay after firstUpdated
 - Supports both sync and async callbacks
 - Exports available at @design.estate/dees-wcctools/demoTools
 # Documentation Update (COMPLETED)
 ## Updated readme.md with:
 - Comprehensive overview with feature highlights
 - Quick start guide with code examples
 - Detailed feature documentation
 - Advanced demo tools usage
 - Best practices and guidelines
 - API reference
 - Browser support information
 - Complete examples for all major features
Author	SHA1	Message	Date
Juergen Kunz	bed41da573	1.0.92 Some checks failed Default (tags) / security (push) Failing after 50s Details Default (tags) / test (push) Failing after 35s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-06-16 14:24:07 +00:00
Juergen Kunz	48f77e7ba2	docs(readme): update documentation with comprehensive overview, quick start guide, and detailed feature descriptions	2025-06-16 14:24:02 +00:00