LinPulsar

🧩 Overview

LinPulsar is a shared UI component library for LinOpenFactory, used by front-end applications built from lin-open-factory-ui-template. It provides reusable visual components that can be consumed by multiple modules across the application, ensuring consistency in design, accessibility, and functionality.

This library is part of the LinOpenFactory platform and integrates seamlessly with the Module Federation architecture used in the front-end.

---

✨ Features

• Shared Vue 3 components for building module UIs
• Components categorized by function (Layout, Forms, Navigation…)
• Designed for reusability across multiple modules
• Fully compatible with Quasar and TypeScript

---

Tech Stack 🛠️

Area	Technology
Language	TypeScript
Framework	Vue.js (Composition API)
UI Toolkit	Quasar Framework
Module System	Module Federation (Vite)
Build Tool	Vite
Package Manager	pnpm

---

📋 Technical Prerequisites

Ensure the following requirements to use or develop LinPulsar:

• Node.js ≥ 22.19 (LTS)
• Package manager: pnpm 11+ (managed via Corepack)
• Vue.js 3 project
• Quasar Framework for UI components
• A bundler supporting Module Federation

---

📜 License

This project is licensed under: GNU Affero General Public License version 3 See: LICENSE.md for details.

---

🧩 Module

This section groups the default Module Federation implementations provided by LinPulsar.

Default Module Implementations

Some modules require no custom behavior for specific concerns such as lifecycle hooks, routing, or internationalization. For these cases, LinPulsar provides default no-op implementations that satisfy the Module Federation contract while performing no additional logic.

These implementations are intended to simplify module configuration when no customization is needed.

• 💤 EmptyLifecycle — Default lifecycle implementation that performs no operations during module lifecycle phases (init, postInit, destroy, etc.) → Exposed as: LinPulsar/EmptyLifecycle

• 🧭 EmptyRoutes — Default route configuration that exposes no routes → Exposed as: LinPulsar/EmptyRoutes

• 🌐 EmptyI18n — Default i18n configuration with no translations → Exposed as: LinPulsar/EmptyI18n

• 🌐 ImportPageI18n — Default i18n configuration for Import page → Exposed as: LinPulsar/ImportPageI18n

Generic Page Modules

LinPulsar also provides generic page module building blocks used to structure page-based federated modules.

These modules define the standard federation contracts for page routing and lifecycle management.

• 📄 PageRoutes — Generic page route federation module → Exposed as: LinPulsar/PageRoutes

• ⚙️ PageLifecycle — Generic page lifecycle federation module → Exposed as: LinPulsar/PageLifecycle

Detailed documentation for these modules is available in the dedicated module page documentation.

Generic Page Components

LinPulsar also provides generic page components used to build reusable page structures in Module Federation applications.

These components are intended to be combined with page modules to accelerate development of standard UI patterns.

→ Generic Pages Guide

📚 Components

The library organizes components by category. For each component, documentation is provided in a dedicated Markdown file inside docs/.

Layout Components

• 🏗️ BaseLayout — The core layout component for all module pages → Documentation is inside: BaseLayout.md

Navigation Components

• NavigationMenu — Tab-based navigation menu for module pages → Documentation is inside: NavigationMenu.md

Profile Components

• 👤 HeaderProfile — User profile button for the application header, displaying the authenticated user's name and email from the lin-pulsar-core user store → Documentation is inside: HeaderProfile.md
• 🚪 LogoutMenuItem — Logout entry rendered by HeaderProfile, with a confirmation dialog before navigating to the host logout route → Documentation is inside: LogoutMenuItem.md

Panel Components

• 🆔 EntityProfilePanel — Vertical profile panel with avatar (stored image or DiceBear, with optional image import), title/subtitle, action slot and entity details → Documentation is inside: EntityProfilePanel.md

Table Components

• GenericEntityTable — Minimal QTable wrapper for simple entity lists → Documentation is inside: GenericEntityTable.md

Tree Components

• 🌳 GenericTree — Minimal QTree wrapper for hierarchical entity structures with per-type icon and label support → Documentation is inside: GenericTree.md

Card Components

• ✨ InformationCard — Reusable card component for displaying labeled read-only information with optional loading states → Documentation is inside: InformationCard.md

• ✨ EntityDetailsCard — Composable container card for displaying multiple entity attributes using InformationCard components
  → Documentation is inside: EntityDetailsCard.md

• ✨ ButtonsCard — A card component with action buttons → Documentation is inside: ButtonsCard.md

• 🔍 AdvancedSearchCard — Generic search card with default and expandable advanced filters sections → Documentation is inside: AdvancedSearchCard.md

• 📝 GenericEditableTableCard — Card managing a collection through a table, with configuration-driven create, edit and delete flows → Documentation is inside: GenericEditableTableCard.md

• 📋 GenericSortableListCard — Card managing an ordered collection as a drag-and-drop list with a column header, per-item actions and order persistence → Documentation is inside: GenericSortableListCard.md

• 🌳 GenericTreeCard — Card displaying an endpoint-driven tree, with configuration-driven node navigation and edition flows → Documentation is inside: GenericTreeCard.md

Forms Components

• 🧩 EntityAttributeField — Dynamic attribute field resolver that selects and renders the correct input component → Documentation is inside: EntityAttributeField.md

• 🔘 EntityAttributeBooleanField — Boolean attribute input based on a toggle switch (QToggle) → Documentation is inside: EntityAttributeBooleanField.md

• ✏️ EntityAttributeTextField — Text attribute input with full i18n and UI customization support → Documentation is inside: EntityAttributeTextField.md

• 🔢 EntityAttributeNumberField — Numeric attribute input with automatic number casting and scoped translations → Documentation is inside: EntityAttributeNumberField.md

• 📝 EntityAttributeTextAreaField — Textarea attribute input with full i18n and UI customization support → Documentation is inside: EntityAttributeTextAreaField.md

• 🔢 EntityAttributeDateField — Date attribute input with automatic date casting and scoped translations → Documentation is inside: EntityAttributeDateField.md

• 📋 EntityAttributeListField — Single-selection dropdown for list attributes with predefined values → Documentation is inside: EntityAttributeListField.md

• 📋 EntityAttributeDynamicListField — Single-selection dropdown for dynamic list attributes with lazy loading from a backend endpoint → Documentation is inside: EntityAttributeDynamicListField.md

• 📧 EntityAttributeEmailField — Email attribute input with format validation and scoped translations → Documentation is inside: EntityAttributeEmailField.md

• 📎 EntityAttributeFileField — File attribute picker with maximum size and allowed extensions validation → Documentation is inside: EntityAttributeFileField.md

Filtering Components

• 🔎 LinPulsarSmartFilter — Filter field with a toggle-able menu managing active filters, typed filter panels and saved filter favorites → Documentation is inside: LinPulsarSmartFilter.md

  Its panels (LinPulsarFilterPanel, LinPulsarFavoritePanel, TextSearchFilterPanel, NumberSearchFilterPanel, DateSearchFilterPanel, ListSearchFilterPanel, TreeSearchFilterPanel) and the LinPulsarFilterChip are internal to the smart filter and documented in the same file.

Dialog Components

• 🗨️ ConfirmationDialog — Modal dialog for confirmation actions, with customizable title, message, and buttons → Documentation is inside: ConfirmationDialog.md

• 📝 FormDialog — Modal dialog for dynamic forms, supporting async validation, i18n, and custom layouts → Documentation is inside: FormDialog.md

Feedback & Utility Components

• ✨ BlurLoader — Skeleton loader for representing loading states → Documentation is inside: BlurLoader.md

Buttons Components

• 🔽 DropdownButton — A button component that provides a reusable dropdown action button with support for flat items and one-level nested sub-menus. → Documentation is inside: DropdownButton.md

• 📝 FormDialogButton — Action button opening the shared form dialog and sending the collected input through a configurable POST or PUT request → Documentation is inside: FormDialogButton.md

• 🗑️ ConfirmDialogButton — Action button opening the shared confirmation dialog and sending a configurable DELETE, POST or PUT request once confirmed → Documentation is inside: ConfirmDialogButton.md

• ↗️ RedirectButton — Action button navigating through the router to a route rendered from a Nunjucks template, such as /accounts/{{ entity.id }} → Documentation is inside: RedirectButton.md

• ☰ MenuButton — Button opening a menu of actions, hosting the other action buttons directly or through a plugin zone → Documentation is inside: MenuButton.md

Link Components

• 🔗 EntityLink — Link whose destination and label are dynamically generated from the provided entity, the destination being rendered from a Nunjucks template such as /accounts/{{ entity.id }} → Documentation is inside: EntityLink.md

Badge Components

• 🏷️ StatusBadge — Reusable badge component that standardizes the display of entity statuses with i18n support and design configuration → Documentation is inside: StatusBadge.md

Avatar Components

• 👤 EntityAvatar — Deterministic DiceBear avatar generated from the provided entity, sharing the generation logic of EntityProfilePanel (generated avatar only, never the stored image) → Documentation is inside: EntityAvatar.md

More categories and components will be added as the library evolves.

---

🧭 Migrations

Breaking changes come with a migration guide:

• 0.2.x → 0.3.0: renaming from linid-catalog-ui (catalogUI) to @linagora/lin-pulsar (LinPulsar)

---

🤝 Contributing

We welcome contributions to improve and extend LinPulsar. Please refer to the CONTRIBUTING.md file for:

• Development workflow
• Code guidelines
• Commit conventions
• Pull request rules

---

📘 Documentation

Additional documentation for the library is located in the docs/ folder:

• Each component has a dedicated Markdown file describing its usage, props, events, and examples.
• See BaseLayout.md as the first example of component documentation.
• More docs will be added as new components are created.

Design Configuration

For information on how to customize the visual appearance of LinPulsar components using the design.json configuration system, see:

→ Design Configuration Guide

Translation Keys

For the list of translation keys expected by the LinPulsar components, see:

→ Translation Keys Guide

Value Formatting

For the declarative formatter / formatOptions configuration shared by the table and list components, see:

→ Value Formatting Guide

Plugin Zones & Shared Guidelines

For conventions on declaring plugin zones in components, naming, and best practices, see:

→ Shared Zone Guidelines

For general component design rules (props, styling, i18n), see:

→ Shared UI Guidelines