https://github.com/openmfp/webcomponents
https://github.com/openmfp/webcomponents
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/openmfp/webcomponents
- Owner: openmfp
- License: apache-2.0
- Created: 2026-02-19T10:49:33.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2026-06-20T12:42:54.000Z (about 1 month ago)
- Last Synced: 2026-06-21T00:36:00.546Z (about 1 month ago)
- Language: TypeScript
- Size: 2.37 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Codeowners: CODEOWNERS
- Agents: AGENTS.md
Awesome Lists containing this project
- awesome-angular - OpenMFP Web Components Library - A modern Angular 21 web components library featuring declarative UI components built with the latest signal-based APIs. (Third Party Components / UI Libraries)
- fucking-awesome-angular - OpenMFP Web Components Library - A modern Angular 21 web components library featuring declarative UI components built with the latest signal-based APIs. (Third Party Components / UI Libraries)
README
# OpenMFP Web Components Library
A modern Angular 21 web components library featuring declarative UI components built with the latest signal-based APIs.
## ✨ Features
- **Angular 21** - Built with the latest Angular features and signal-based APIs
- **Web Components Ready** - Exportable as native web components via Angular Elements
- **Declarative UI** - Intuitive generic ui component
- **Vitest Testing** - Fast, modern testing framework
- **TypeScript** - Full type safety with strict mode
- **Tree-Shakeable** - Optimized bundle size with ES modules
## 🚀 Getting Started
### Installation
```bash
# Install dependencies
npm install
# Build the library
npm run build
```
### Build Commands
Run `npm run build` to build the project. The build artifacts will be stored in the `dist/` directory.
```bash
# Build once
npm run build
# Build in watch mode (for development)
npm run build:watch
# Build and publish to yalc (for local testing)
npm run build:watch:yalc
```
### Testing
Run `npm run test` to execute unit tests with Vitest.
```bash
# Run tests once
npm test
# Run tests in watch mode
npm run test:watch
# Generate coverage report
npm run test:cov
```
### Storybook
Storybook is used to develop, document, and visually test components in isolation. Stories live alongside components under `projects/ngx/**/stories/*.stories.ts`.
```bash
# Start Storybook in development mode (default port: 6006)
npm run storybook
# Build a static Storybook site (output: storybook-static/)
npm run build:storybook
```
Once running, open Storybook at [http://localhost:6006/](http://localhost:6006/).
### Code Quality
```bash
# Lint code
npm run lint
# Fix linting issues
npm run lint:fix
# Format code with Prettier
npm run format
# Check code formatting
npm run check-format
```
### Web Components Support
Components can be exported as native web components using Angular Elements, making them framework-agnostic.
## Components
| Angular tag | Web Component tag | Documentation |
|---|---|------------------------------------------------------------------|
| `` | `` | [docs/declarative-table.md](docs/declarative-table.md) |
| `` | `` | [docs/declarative-form.md](docs/declarative-form.md) |
| `` | `` | [docs/declarative-table-card.md](docs/declarative-table-card.md) |
| `` | `` | [docs/dashboard.md](docs/dashboard.md) |
## NeoNephos Foundation
This project is part of the [NeoNephos Foundation](https://neonephos.org), a Linux Foundation Europe initiative.
