Quatrain/CoreUX
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
Quatrain CoreUX - Design System & Voice/React Components
41 commits 3 branches 0 tags 218 KiB
  • TypeScript 73.3%
  • CSS 21.3%
  • JavaScript 5.4%
Find a file
Exact
Olivier aac6d5c64d
All checks were successful
Quatrain CoreUX Sovereign CI / CoreUX Monorepo Build & Unit Tests (push) Successful in 1m25s
Details
ci(github): remove .github workflows to decommission GitHub Actions builds
2026-10-16 16:43:52 +02:00
.forgejo/workflows ci(forgejo): add sovereign CI workflow for Turbo build and Jest unit tests 2026-10-15 23:19:22 +02:00
bin fix(release): add repository metadata to ux-react and safeguard provenance in publish script 2026-09-21 15:23:18 +02:00
packages feat(ux-curation): add dedicated license and copyright fields to OKF metadata form 2026-10-07 23:38:03 +04:00
.gitignore feat: initialize CoreUI monorepo with list and form management packages 2026-05-25 19:47:53 +02:00
.version_hashes.json chore: release versions & update hashes [skip ci] 2026-09-21 13:28:15 +00:00
.yarnrc.yml feat: initialize CoreUI monorepo with list and form management packages 2026-05-25 19:47:53 +02:00
AGENTS.md fix(ux): update @quatrain/types dependencies to published npm release and add AGENTS.md 2026-09-21 14:05:33 +02:00
jest.config.js fix(test): remove local Core paths from jest moduleNameMapper 2026-09-21 14:31:22 +02:00
package.json fix(ci): decouple CoreUX workflow and package resolutions from local Core monorepo 2026-09-21 14:21:16 +02:00
README.md docs: update project name to Core UX in documentation 2026-06-03 12:23:08 +02:00
sonar-project.properties ci: add GitHub Actions workflow, SonarCloud project configuration, and custom package release pipeline 2026-06-02 23:17:31 +02:00
tsconfig.json feat: initialize CoreUI monorepo with list and form management packages 2026-05-25 19:47:53 +02:00
turbo.json feat: initialize CoreUI monorepo with list and form management packages 2026-05-25 19:47:53 +02:00
yarn.lock chore: release versions & update hashes [skip ci] 2026-09-21 13:28:15 +00:00

README.md

Core UX - Frontend Architecture & UX Brick System for Quatrain

Core UX is the frontend companion monorepo of the Quatrain ecosystem. It provides headless state controllers, React bindings, and UI components built on top of Mantine UI.

Following a strict MVC (Model-View-Controller) pattern, CoreUX decouples business logic, data validation, and visual rendering. Heavy state management, filtering, and model handling reside in headless, framework-agnostic controllers, keeping your React components lightweight, pure, and easy to maintain.

🎯 Core Principles

  • Framework-Agnostic Headless Controllers: Core state and business validation live in pure TypeScript classes (like CoreUXListManager and CoreFormManager). They are independent of React or any specific rendering library, facilitating testing and long-term maintainability.
  • Strict MVC Separation: React components subscribe to controller states and handle only presentation and user interactions.
  • Consistent & Responsive Design: Standardized on top of Mantine UI for high-quality, modern, accessible, and responsive user experiences.
  • High Performance & Stability: Built with React performance best practices to avoid unnecessary layout repaints and heavy canvas re-renders.

📦 Monorepo Architecture & Packages

Core UX is managed as a Yarn monorepo under packages/:

🧠 Headless Core & Controllers

🟢 @quatrain/ux

The foundational package containing shared styles, Mantine configurations, and core headless controllers:

  • CoreFormManager: The core controller managing form state, dirty tracking, validation, and submission flow.
  • Source: packages/ux

🟢 @quatrain/ux-list

Headless, framework-agnostic state controller for complex lists and collection grids:

  • CoreListManager: Manages list filtering, sorting, pagination, and multi-selection state.
  • Supports decorators to easily plug in custom behavior.
  • Source: packages/ux-list
  • Guide: Refer to ux-list/HOWTO.md for concrete integration patterns.

⚛️ React Bindings & Components

🔵 @quatrain/ux-form-react

React integration for handling forms based on @quatrain/core definitions:

  • useCoreForm: React hook subscribing to a CoreFormManager instance.
  • CoreForm: Declarative form component that renders input fields automatically based on metadata.
  • Source: packages/ux-form-react

🔵 @quatrain/ux-list-react

React components and hooks designed to work seamlessly with CoreListManager:

  • useCoreList: Subscribes React components to list state updates.
  • CoreList: Table/Grid rendering component with automatic pagination, filtering headers, and built-in internationalization support.
  • Source: packages/ux-list-react
  • Guide: Refer to ux-list-react/HOWTO.md for usage examples.

🛠️ Development & Tooling

This monorepo uses Yarn Berry (v4) and Turbo to orchestrate builds, tests, and linting.

Main Commands

Install all dependencies and resolve workspace portals:

yarn install

Build all packages inside the monorepo:

yarn build

Run Jest test suites across all workspaces:

yarn test

Lint the codebase:

yarn lint

⚖️ License

CoreUX is released under the AGPL-3.0 (Affero General Public License). This ensures that any enhancements to the open-source frontend core remain free and accessible to the community.