@mantis-core/ui

Reusable React component library for Mantis Core apps.

Purpose

@mantis-core/ui centralizes shared UI primitives so feature teams can build pages without duplicating component logic across projects.

Scope

• Generic UI components for forms, tables, admin layout, maps, and pagination.
• Components intended to be reused by multiple verticals/apps.
• Components designed to work with @mantis-core/styles (mantis-core-* class contract).

Out Of Scope

• Domain-specific workflows (real estate, restaurant, carpentry, etc).
• Business rules and domain orchestration.
• App-level provider setup (handled by @mantis-core/next-core).

Installation

pnpm add @mantis-core/ui @mantis-core/styles

Make sure peer dependencies exist in the app (react, react-dom, next, primereact, primeicons).

Styling Requirement

Components rely on style contracts from @mantis-core/styles. Import the required SCSS modules in your app, for example:

@use "@mantis-core/styles/scss/table.scss";
@use "@mantis-core/styles/scss/paginator.scss";
@use "@mantis-core/styles/scss/inputs.scss";

Public API Strategy

Preferred import style:

import { PaginatedTable, TableToolbar, FormFieldRender } from "@mantis-core/ui";

Supported subpath imports:

• @mantis-core/ui/components/*
• @mantis-core/ui/table-toolbar
• @mantis-core/ui/table-filter-field

Use subpaths only when you need explicit boundaries.

Component Catalog

See full catalog in COMPONENTS.md.

Top-level categories:

• Buttons: Button
• Loaders: Loading
• Forms: CKEditorInput, TextInput, Select, Switch, UploadFilesPreview, etc
• Tables: PaginatedTable, TableToolbar, TableFilterField, ActionColumn, etc
• Page/Admin layout: AdminPageConfigurator, AdminPageLayoutProvider, AdminPageLayoutShell
• Generic UI: Pagination, PaginationInfo, PageSizeSelector, RichTextPreview
• Maps: MapPicker, MapPickerClient, MapPickerOSM

Core Usage Patterns

1) Forms

• Compose fields with FormFieldRender + specific input components.
• Keep validation/business rules in the app layer.

2) Data Tables

Recommended stack:

1. TableToolbar
2. TableFilterField / FilterPannel
3. PaginatedTable
4. Pagination helpers when needed

3) Admin Page Layout

Use the layout contract together:

• AdminPageLayoutProvider
• AdminPageLayoutShell
• AdminPageConfigurator

4) Maps

• MapPicker is dynamic/SSR-safe wrapper.
• MapPickerClient and MapPickerOSM run on client.

Architecture Rules For Contributors

1. New components must be domain-agnostic.
2. Avoid direct business terms in props, labels, or naming.
3. Keep runtime boundaries explicit ("use client" only when required).
4. Export through src/index.ts and document in COMPONENTS.md.
5. Preserve mantis-core-* visual contract for shared styles.

Build

pnpm --filter @mantis-core/ui build
pnpm --filter @mantis-core/ui typecheck

Release Checklist

1. Component behavior verified in consuming app.
2. Props/types documented.
3. src/index.ts export updated.
4. COMPONENTS.md updated.
5. Add changeset.