Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@design.estate/dees-catalog) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@design.estate/dees-catalog 🎨

A comprehensive web components library built with TypeScript and LitElement
75+ Production-ready UI components for building modern web applications with consistent design and behavior

🚀 Quick Start

# Install with npm
npm install @design.estate/dees-catalog

# Or with pnpm (recommended)
pnpm add @design.estate/dees-catalog

# Or with yarn
yarn add @design.estate/dees-catalog

Basic Usage

// Import components you need
import { DeesButton, DeesForm, DeesInputText } from '@design.estate/dees-catalog';

// Use in your HTML or framework
<dees-form @formData=${handleSubmit}>
  <dees-input-text 
    label="Your Name" 
    required
  ></dees-input-text>
  <dees-button type="highlighted">
    Submit
  </dees-button>
</dees-form>

📦 What's Inside?

Component Categories at a Glance

🎯 Category	📊 Count	🔥 Popular Components
Core UI	15+	Buttons, Icons, Badges, Labels, Panels
Forms	20+	Text Input, Dropdown, Date Picker, WYSIWYG Editor
Layout	12+	App Shell, Navigation, Dashboard Grid
Data Display	8+	Tables, Charts, Stats Grid, Pagination
Overlays	5+	Modals, Context Menus, Toasts
Development	6+	Code Editor, Terminal, Markdown Editor

🌟 Key Features

✅ 100% TypeScript - Full type safety and IntelliSense support
🎨 Theme System - Built-in light/dark theme support
📱 Responsive - Mobile-first design approach
♿ Accessible - ARIA compliant with keyboard navigation
🚀 Performance - Lazy loading and optimized rendering
🔧 Customizable - CSS variables and property APIs
🧩 Framework Agnostic - Works with any framework or vanilla JS
📖 Well Documented - Comprehensive demos and examples

💡 Component Highlights

🎯 Core UI Components

Buttons & Actions

// Beautiful button with multiple styles
<dees-button 
  type="highlighted"  // normal | highlighted | discreet
  status="pending"    // normal | pending | success | error
  @click=${handleClick}
>
  Click Me
</dees-button>

// Button groups for related actions
<dees-button-group
  .buttons=${[
    { text: 'Save', type: 'highlighted', action: save },
    { text: 'Cancel', type: 'normal', action: cancel }
  ]}
></dees-button-group>

Icons with Library Prefixes

// FontAwesome icons
<dees-icon icon="fa:check" iconSize="24"></dees-icon>

// Lucide icons  
<dees-icon icon="lucide:menu" iconSize="24"></dees-icon>

Toast Notifications

// Show toast notifications programmatically
DeesToast.success('Changes saved successfully!');
DeesToast.error('Something went wrong');
DeesToast.info('New update available');

// Advanced control
const toast = await DeesToast.show({
  message: 'Processing...',
  type: 'info',
  duration: 0  // No auto-dismiss
});
// Later...
toast.dismiss();

📝 Form Components

Complete Form System

<dees-form @formData=${(e) => console.log('Form data:', e.detail)}>
  <!-- Text input with validation -->
  <dees-input-text
    key="email"
    label="Email"
    required
    validationRegex="^[^@]+@[^@]+\.[^@]+$"
  ></dees-input-text>

  <!-- Date picker with constraints -->
  <dees-input-datepicker
    key="eventDate"
    label="Event Date"
    minDate="2025-01-01"
    enableTime
  ></dees-input-datepicker>

  <!-- List management (NEW!) -->
  <dees-input-list
    key="features"
    label="Product Features"
    placeholder="Add feature..."
    sortable
    minItems={3}
    maxItems={10}
  ></dees-input-list>

  <!-- Rich text editor -->
  <dees-input-wysiwyg
    key="description"
    label="Description"
  ></dees-input-wysiwyg>

  <dees-form-submit>Submit</dees-form-submit>
</dees-form>

🏗️ Layout Components

Application Shell

// Complete application layout with one component
<dees-appui-base
  .appbarMenuItems=${menuItems}
  .appbarBreadcrumbs=${'Home > Dashboard'}
  .mainmenuTabs=${tabs}
  .user=${{ name: 'John Doe', status: 'online' }}
>
  <div slot="maincontent">
    <!-- Your app content -->
  </div>
</dees-appui-base>

Dashboard Grid

// Drag-and-drop dashboard widgets
<dees-dashboardgrid
  .widgets=${[
    {
      id: 'sales',
      title: 'Sales Overview',
      x: 0, y: 0, w: 4, h: 3,
      content: html`<sales-chart></sales-chart>`
    },
    {
      id: 'stats',
      title: 'Statistics',
      x: 4, y: 0, w: 4, h: 3,
      content: html`<dees-statsgrid .tiles=${stats}></dees-statsgrid>`
    }
  ]}
  editable
></dees-dashboardgrid>

📊 Data Display

Advanced Tables

<dees-table
  .data=${users}
  .displayFunction=${(user) => ({
    Name: user.name,
    Email: user.email,
    Role: user.role,
    Status: html`<dees-badge type="${user.active ? 'success' : 'error'}">
      ${user.active ? 'Active' : 'Inactive'}
    </dees-badge>`
  })}
  .dataActions=${[
    { name: 'Edit', icon: 'fa:edit', action: editUser },
    { name: 'Delete', icon: 'fa:trash', action: deleteUser }
  ]}
  searchable
></dees-table>

Statistics Grid

<dees-statsgrid
  .tiles=${[
    {
      title: 'Revenue',
      value: 125420,
      unit: '$',
      type: 'number',
      description: '+12.5% from last month'
    },
    {
      title: 'CPU Usage',
      value: 73,
      type: 'gauge',
      gaugeOptions: {
        thresholds: [
          { value: 0, color: '#22c55e' },
          { value: 80, color: '#ef4444' }
        ]
      }
    }
  ]}
></dees-statsgrid>

🎭 Overlays & Dialogs

DeesModal.createAndShow({
  heading: 'Confirm Action',
  content: html`
    <p>Are you sure you want to proceed?</p>
  `,
  menuOptions: [
    {
      name: 'Cancel',
      action: async (modal) => modal.destroy()
    },
    {
      name: 'Confirm',
      action: async (modal) => {
        await performAction();
        modal.destroy();
      }
    }
  ]
});

🎨 Theme System

All components support automatic theme switching:

// Components automatically adapt to light/dark themes
// Use the cssManager for theme-aware colors
import { cssManager } from '@design.estate/dees-catalog';

css`
  .my-element {
    background: ${cssManager.bdTheme('#fff', '#1a1a1a')};
    color: ${cssManager.bdTheme('#000', '#fff')};
  }
`

🔧 Development

Prerequisites

Node.js 18+
pnpm (recommended) or npm

Setup

# Clone the repository
git clone https://github.com/design-estate/dees-catalog.git

# Install dependencies
pnpm install

# Build the project
pnpm run build

# Run in development mode
pnpm run watch

# Run tests
pnpm test

Project Structure

dees-catalog/
├── ts_web/
│   ├── elements/       # All component implementations
│   │   ├── dees-*.ts   # Component files
│   │   └── *.demo.ts  # Component demos
│   ├── pages/         # Demo showcase pages
│   └── index.ts       # Main exports
├── dist_ts_web/       # Built distribution files
└── test/              # Test files

📚 Documentation

Component Demos

Each component includes a built-in demo accessible via the static .demo property:

import { DeesButton } from '@design.estate/dees-catalog';

// Access the component's demo
const demoHTML = DeesButton.demo();

Interactive Playground

For a complete interactive playground with all components:

Clone the repository
Run pnpm install && pnpm run build
Open the demo pages in dist_ts_web/pages/

TypeScript Support

Full TypeScript definitions are included. Your IDE will provide:

🔍 IntelliSense for all properties and methods
📝 JSDoc comments with usage examples
✅ Type checking for component properties
🎯 Auto-imports and code completion

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Workflow

Fork the repository
Create a feature branch: git checkout -b feature/amazing-feature
Make your changes and add tests
Ensure all tests pass: pnpm test
Commit with conventional commits: git commit -m 'feat: add amazing feature'
Push and create a Pull Request

🐛 Troubleshooting

Common Issues

Issue: Components not rendering

// Ensure you're importing from the correct path
import '@design.estate/dees-catalog/dist_ts_web/elements/dees-button.js';
// Or use the bundled version
import '@design.estate/dees-catalog';

Issue: TypeScript errors

// Add to tsconfig.json
{
  "compilerOptions": {
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true
  }
}

Issue: Styles not applying

<!-- Components use Shadow DOM, styles are encapsulated -->
<!-- Use CSS custom properties for theming -->
<style>
  dees-button {
    --button-background: #007bff;
    --button-color: white;
  }
</style>

🔗 Links & Resources

📄 License

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

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 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, and any usage must be approved in writing by Task Venture Capital GmbH.

🏢 Company Information

Task Venture Capital GmbH
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.

Built with ❤️ by Task Venture Capital GmbH

⭐ Star us on GitHub • 🐦 Follow on Twitter • 💼 LinkedIn