@dropi/ui-components

Framework-agnostic Web Components library built with Angular Elements

📦 Installation

npm install @dropi/ui-components

Automatic Setup (Interactive)

The installation script will try to ask if you are setting up a Standalone application (React, Vue, Vanilla) or a Micro Frontend.

• Standalone: Installs necessary Angular runtime dependencies (@angular/core, zone.js, etc.) automatically.
• Micro Frontend: Skips dependencies, assuming the Host application provides them.

Manual Setup

If the installation runs in a non-interactive environment (CI/CD), you can configure it manually later:

npx dropi-setup

Or force the mode via environment variables:

DROPI_INSTALL_MODE=standalone npm install @dropi/ui-components

🚀 Quick Start

1. Import Styles

Crucial: You must import the CSS tokens for the components to look right.

Angular (angular.json):

"styles": [
  "node_modules/@dropi/ui-components/dist/dropi-tokens.css",
  "src/styles.scss"
]

React / Vue / Vanilla JS:

import "@dropi/ui-components/dropi-tokens.css";

2. Usage (React / Vue / Vanilla JS)

In your main entry file (main.tsx, main.js), initialize the library:

import "zone.js"; // Mandatory: must be imported first
import { defineCustomElements } from "@dropi/ui-components";

// Initialize Angular environment and register Web Components
defineCustomElements();

Then use the Web Component tags directly in your JSX/HTML:

// React Example (No imports needed for the component itself)
const App = () => (
  <div>
    <dropi-wc-button
      type="primary"
      text="Login"
      onClick={() => console.log("clicked")}
    ></dropi-wc-button>
  </div>
);

📚 Available Web Components

All components use the prefix dropi-wc-.

🛠️ Form Elements

| Selector | Description | | ------------------------- | ----------------------------------------- | | <dropi-wc-button> | Primary/Secondary/Ghost buttons | | <dropi-wc-input> | Text inputs with validation | | <dropi-wc-checkbox> | Standard checkbox | | <dropi-wc-radio-button> | Grouped radio buttons | | <dropi-wc-switch> | Toggle switches | | <dropi-wc-toggle> | Advanced toggle switch with configuration | | <dropi-wc-text-area> | Multi-line text area | | <dropi-wc-phone-input> | Specialized international phone input |

🧭 Navigation

| Selector | Description | | ------------------------------- | ------------------------------------ | | <dropi-wc-sidebar> | Collapsible navigation sidebar | | <dropi-wc-navbar> | Top navigation bar | | <dropi-wc-breadcrumb> | Navigation breadcrumbs | | <dropi-wc-paginator> | Data pagination with cursor support | | <dropi-wc-steps> | Progress steps (horizontal/vertical) | | <dropi-wc-languages-selector> | Language switching dropdown |

📦 Layout & Containers

| Selector | Description | | ---------------------- | --------------------------------------- | | <dropi-wc-modal> | Dialog modals with customizable content | | <dropi-wc-drawer> | Side drawers (Left/Right) | | <dropi-wc-accordion> | Expandable content sections | | <dropi-wc-tabs> | Tabbed content views |

🎨 Display & Feedback

| Selector | Description | | ----------------------------- | ------------------------------------ | | <dropi-wc-alert> | Success/Error/Info status alerts | | <dropi-wc-alert-validation> | Verification status alerts (PrimeNG) | | <dropi-wc-badge> | Status and number badges | | <dropi-wc-tag> | Categorization tags | | <dropi-wc-spinner> | Loading indicator | | <dropi-wc-skeleton> | Loading skeletons for layouts | | <dropi-wc-empty> | Empty state displays | | <dropi-wc-tooltip> | Contextual help tooltips |

📽️ Multimedia & Advanced

| Selector | Description | | ---------------------------- | --------------------------------- | | <dropi-wc-carousel> | Image and content carousels | | <dropi-wc-youtube-video> | Lazy-loaded YouTube player | | <dropi-wc-dropdown> | Checkbox-based selection dropdown | | <dropi-wc-banner-external> | Dynamic WordPress banners |

🛠️ Development

# Install dependencies
npm install

# Build library
npm run build:complete

# Watch mode
npm run watch