@design.estate/dees-catalog

An extensive library for building modern web applications with dynamic components using Web Components, JavaScript, and TypeScript.

Install

To install the @design.estate/dees-catalog library, you can use npm or any other compatible JavaScript package manager. Using npm is recommended:

npm install @design.estate/dees-catalog

Usage

Overview

The @design.estate/dees-catalog is a powerful library that offers a suite of dynamic components designed for building sophisticated web applications. This library leverages modern web standards such as Web Components, and programming languages like JavaScript and TypeScript to provide developers with modular and reusable components. These components enhance the development workflow by offering ready-to-use solutions for UI design and interactivity, enabling developers to create intricate and functional applications efficiently.

Below, we will explore the diverse range of components available, demonstrating their integration and usage thoroughly within real-world scenarios. Each example will be crafted in TypeScript to ensure type safety and maintainable code. Let's navigate through the components by examining their setups, features, and potential applications in a comprehensive manner.

Getting Started with Components

To use these components, you first need to import them into your project. Depending on your development environment, you might be using a module bundler that supports ES modules. In such cases, importing components is straightforward as demonstrated below:

import {
  DeesButton,
  DeesModal,
  DeesTable,
  DeesAppuiBase,
  DeesForm,
  DeesInputText,
  DeesAppuiMainmenu,
  DeesAppuiMainselector
} from '@design.estate/dees-catalog';

Button Component: DeesButton

DeesButton is a versatile button component that can be configured for various UI needs such as form submissions, navigation actions, or interactive interfaces. It supports multiple styles including normal, highlighted, discreet, and status-based variations (e.g., pending, success, error).

Example Usage

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

// Create a simple button
const submitButton = document.createElement('dees-button');
submitButton.text = 'Submit';
submitButton.type = 'highlighted';

// Add functionality
submitButton.addEventListener('clicked', () => {
  console.log('Submit button clicked!');
});
document.body.appendChild(submitButton);

// Handling status change
async function handleFormSubmission() {
  submitButton.status = 'pending';
  try {
    await simulateNetworkRequest();
    submitButton.status = 'success';
  } catch {
    submitButton.status = 'error';
  }
}

function simulateNetworkRequest() {
  return new Promise(resolve => setTimeout(resolve, 2000));
}

submitButton.addEventListener('clicked', handleFormSubmission);

Modal Component: DeesModal

The DeesModal component is used to display content in an overlay. It is suitable for scenarios like alerts, dialog boxes, or interactive user forms. The modal can be highly customized with different header, content, and footer components.

Example Usage

import { DeesModal } from '@design.estate/dees-catalog';
import { html } from '@design.estate/dees-element';

// Creating a modal
const modalContent = html`<p>Welcome to our platform</p>`;
const modal = DeesModal.createAndShow({
  heading: 'Welcome',
  content: modalContent,
  menuOptions: [
    { name: 'Close', action: () => modal.destroy() },
    { name: 'Proceed', action: () => console.log('Proceeding') }
  ]
});

Form Handling With DeesForm

The DeesForm and its related input elements simplify form creation and handling. The form component integrates validation, submission, and data collection functions.

Creating a Form

import {
  DeesForm,
  DeesInputText,
  DeesFormSubmit,
  DeesInputDropdown
} from '@design.estate/dees-catalog';

const registrationForm = document.createElement('dees-form');

const nameInput = document.createElement('dees-input-text');
nameInput.label = 'Name';
nameInput.required = true;

const roleSelect = document.createElement('dees-input-dropdown');
roleSelect.label = 'Role';
roleSelect.options = [
  { option: 'Admin', key: 'admin' },
  { option: 'Editor', key: 'editor' }
];

const submitButton = document.createElement('dees-form-submit');
submitButton.text = 'Register';

registrationForm.appendChild(nameInput);
registrationForm.appendChild(roleSelect);
registrationForm.appendChild(submitButton);

registrationForm.addEventListener('formData', event => {
  console.log('Form Data:', event.detail.data);
});

document.body.appendChild(registrationForm);

Data Presentation with DeesTable

The DeesTable component allows for effective data management and presentation through dynamic tables. It supports features such as sorting, selecting, and action-triggering from table items.

Displaying a Data Table

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

const data = [
  { name: 'Alice', status: 'Active' },
  { name: 'Bob', status: 'Inactive' }
];

const table = new DeesTable();
table.heading1 = 'User Table';
table.data = data;

document.body.appendChild(table);

// Custom Actions and Row Selection
table.addEventListener('rowSelected', (event) => console.log(event.detail));

Structural Components

DeesAppuiBase, along with components such as DeesAppuiMainmenu and DeesAppuiMainselector, provide the scaffolding needed for application UIs, particularly dashboards.

Setting Up an Application Layout

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

const appBase = document.createElement('dees-appui-base');
document.body.appendChild(appBase);

Data Visualization with ApexCharts

DeesChartArea provides easy integration with ApexCharts for creating detailed visualizations.

Implementing a Chart

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

// Create and configure a chart
const chart = new DeesChartArea();
document.body.appendChild(chart);

chart.chart.updateSeries([
  { name: 'Sales', data: [20, 40, 30, 50] }
]);

Customization and Extensibility

The @design.estate/dees-catalog is built for extensibility and customization. You can extend components, integrate custom events, and style them as per your requirements. This ensures that your application remains unique and tailored to your audience.

The library not only saves development time by providing ready-made components but also enhances maintainability through its clean interfaces and TypeScript support, making your code robust and type-safe. With the library's expansive set of features, building modern web applications has never been easier. Enjoy the blend of simplicity and power that @design.estate/dees-catalog brings to the table.

License and Legal Information

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.