🚀 ngx-lift Monorepo

June 16, 2026 · View on GitHub

🚀 ngx-lift Monorepo

Powerful Angular utilities and Clarity Design System components to supercharge your development

📖 Documentation • 🎮 Live Demo • 🐛 Report Bug • 💡 Request Feature

A modern monorepo containing ngx-lift and clr-lift - two powerful Angular libraries designed to enhance and simplify your development experience. Built with Angular 21, TypeScript 5.9, and modern best practices.

✨ What's Inside?

📚 ngx-lift

A comprehensive Angular utility library that provides essential tools for modern Angular development:

🚀 RxJS Operators - Specialized operators for async state management, polling, and reactive patterns
⚡ Signal Utilities - Powerful signal-based utilities for Angular's Signals API
🔧 Pipes - Ready-to-use pipes for common transformations (bytes, masking, arrays)
✅ Validators - Advanced form validators (date ranges, URLs, unique values)
🛠️ Utilities - Helper functions for forms, dates, objects, and more

📦 View on npm • 📖 Documentation • 💻 Source Code

🎨 clr-lift

An Angular component library built on top of VMware Clarity Design System:

🧩 15+ Production-Ready Components - Alerts, toasts, spinners, wizards, and more
🔧 Clarity Utilities - Enhanced datagrid state management and helpers
🎯 Type-Safe - Full TypeScript support with strict mode
♿ Accessible - Built with accessibility in mind
🌓 Theme Support - Light and dark mode support

📦 View on npm • 📖 Documentation • 💻 Source Code

🎮 Demo Application

A fully-featured showcase application demonstrating all capabilities of both libraries with live examples, code snippets, and interactive demos.

🎮 Live Demo • 💻 Source Code

🚀 Quick Start

Install the Libraries

# Install ngx-lift
npm install ngx-lift

# Install clr-lift (includes ngx-lift as peer dependency)
npm install clr-lift @clr/angular ngx-lift

Use in Your Project

// ngx-lift - RxJS Operators
import {createAsyncState, poll} from 'ngx-lift';

// ngx-lift - Signal Utilities
import {injectParams, injectQueryParams, combineFrom} from 'ngx-lift';

// clr-lift - Components
import {AlertComponent, ToastService} from 'clr-lift';

Development Setup

Prerequisites:

Node.js 24.x or higher
npm 10.x or higher

# Clone the repository
git clone https://github.com/wghglory/ngx-lift-workspace.git
cd ngx-lift-workspace

# Install dependencies
npm install

# Start the demo application
npm start

The demo app will be available at http://localhost:4200.

📖 Development

Project Structure

ngx-lift-workspace/
├── apps/
│   └── demo/              # Demo application
├── libs/
│   ├── ngx-lift/          # ngx-lift library
│   └── clr-lift/          # clr-lift library
├── dist/                  # Build outputs
└── .github/workflows/     # CI/CD workflows

Common Commands

Development

# Start demo app
npm start

# Build all projects
npm run build

# Build only libraries
npm run build:libs

# Build specific library
npm run build:ngx
npm run build:clr

# Watch mode for development
npm run watch:ngx
npm run watch:clr

Testing

# Run all tests
npm test

# Test specific library
npm run test:ngx
npm run test:clr

# Run tests with coverage
npm run test:coverage

Linting & Formatting

# Lint all projects
npm run lint

# Lint and fix
npm run lint:fix

# Format code
npm run format

# Check formatting
npm run format:check

Nx Commands

# View project graph
npm run graph

# Run affected tests
npm run affected:test

# Build affected projects
npm run affected:build

# Lint affected projects
npm run affected:lint

🧪 Testing

This project uses Vitest with @analogjs/vitest-angular for testing.

Running Tests

# Run all tests
nx run-many -t test

# Run tests for a specific library
nx test ngx-lift
nx test clr-lift

# Run tests in watch mode
nx test ngx-lift --watch

# Run tests with coverage
nx test ngx-lift --coverage

# Run tests with UI
nx test ngx-lift --ui

Test Configuration

Each library has its own vite.config.mts with test configuration. The test setup is in src/test-setup.ts.

🔧 Configuration Files

nx.json: Nx workspace configuration
tsconfig.base.json: TypeScript base configuration with path mappings
package.json: Dependencies and scripts

📖 Additional Documentation

For maintainers and contributors:

docs/QUICK_START.md: Quick start guide for new developers
docs/COMMANDS.md: Comprehensive command reference
docs/DEPLOYMENT.md: Publishing, deployment, and CI/CD guides

📚 Library Usage

Installing Libraries

# Install ngx-lift
npm install ngx-lift

# Install clr-lift (requires ngx-lift)
npm install clr-lift ngx-lift @clr/angular

Using in Your Project

// Import from ngx-lift
import {createAsyncState, poll} from 'ngx-lift';

// Import from clr-lift
import {AlertComponent, ToastService} from 'clr-lift';