@design.estate/dees-wcctools 1.0.91 → 1.0.92

package/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": {

package/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
-To install `@design.estate/dees-wcctools`, you can use npm:
+## Overview
+`@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
-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.
+## Quick Start
 
-### Setting Up
-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.
+### 1. Create Your Component
 
-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
-Define your custom elements using LitElement. Here's a simple example of an element:
+### 3. Create an HTML Entry Point
+
+```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>
+```
 
-```typescript
-import { LitElement, html, customElement } from 'lit';
+## Features
 
-@customElement('my-element')
-class MyElement extends LitElement {
-  render() {
-    return html`<p>Hello, world!</p>`;
-  }
+### 🎯 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
+public render() {
+  return html`
+    <div class="${this.goBright ? 'light-theme' : 'dark-theme'}">
+      <!-- Your component content -->
+    </div>
+  `;
 }
 ```
 
-### Bootstrapping the WCCTools Dashboard
-To showcase your elements, `@design.estate/dees-wcctools` provides a handy way to bootstrap a dashboard where your elements can be registered and displayed.
+Or use CSS custom properties:
+```typescript
+import { cssManager } from '@design.estate/dees-element';
+
+public static styles = [
+  css`
+    :host {
+      color: ${cssManager.bdTheme('#000', '#fff')};
+      background: ${cssManager.bdTheme('#fff', '#000')};
+    }
+  `
+];
+```
+
+### 🧪 Advanced Demo Tools
 
-Create a bootstrap function in your main file or a separate module:
+The demo tools provide enhanced testing capabilities:
 
 ```typescript
-async function bootstrapWCCTools() {
-  // Define your elements here
-  const elements = {
-    'my-element': MyElement, // Assuming MyElement is imported
-  };
-
-  // 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);
+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>
+  `;
 }
 ```
 
-Call this function to initialize your catalogue:
+### 🎭 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
-bootstrapWCCTools();
+@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
 
-### Configurations and Customizations
-The `setupWccTools` function accepts two arguments: `elements` and `pages`. 
+Example:
+/wcctools-route/element/my-button/desktop/dark
+/wcctools-route/page/home/tablet/bright
+```
 
-- `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.
+## Development Workflow
 
-### 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.
+### Build and Watch
+```json
+{
+  "scripts": {
+    "build": "tsbuild tsfolders --allowimplicitany && tsbundle element",
+    "watch": "tswatch element",
+    "serve": "http-server ./dist"
+  }
+}
+```
+
+### Project Structure
+```
+my-components/
+├── src/
+│   ├── components/
+│   │   ├── my-button.ts
+│   │   └── my-card.ts
+│   └── catalogue.ts
+├── dist/
+├── index.html
+└── package.json
+```
 
-### 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.
+## Advanced Features
 
-### 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.
+### Custom Property Handlers
+For complex property types, implement custom logic in your demo:
 
-### 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
+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>
+`;
+```
 
+### Responsive Testing Helpers
 ```typescript
-import { LitElement, property, html, customElement } from 'lit';
+import * as domtools from '@design.estate/dees-domtools';
 
-@customElement('typed-element')
-class TypedElement extends LitElement {
-  @property({type: String})
-  name: string = 'World';
+public static styles = [
+  // Media query helpers
+  domtools.breakpoints.cssForPhone(css`
+    :host { font-size: 14px; }
+  `),
   
-  render() {
-    return html`<p>Hello, ${this.name}!</p>`;
-  }
-}
+  domtools.breakpoints.cssForTablet(css`
+    :host { font-size: 16px; }
+  `),
+  
+  domtools.breakpoints.cssForDesktop(css`
+    :host { font-size: 18px; }
+  `)
+];
 ```
 
-### Conclusion
-`@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.
+## API Reference
+
+### 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
 
@@ -114,4 +373,4 @@ Registered at District court Bremen HRB 35230 HB, Germany
 
 For any legal inquiries or if you require further information, please contact us via email at hello@task.vc.
 
-By using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.
+By using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.

package/readme.plan.md

@@ -38,4 +38,16 @@ The properties panel has timing issues detecting rendered elements because:
 - Uses display: contents to not affect layout
 - Handles timing automatically with 50ms delay after firstUpdated
 - Supports both sync and async callbacks
-- Exports available at @design.estate/dees-wcctools/demoTools
+- 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