Skip to content

feat(formulus-formplayer): align with ODE tokens and adopt @ode/components for chrome#328

Open
IamLRBA wants to merge 14 commits intoOpenDataEnsemble:devfrom
IamLRBA:Formplayer
Open

feat(formulus-formplayer): align with ODE tokens and adopt @ode/components for chrome#328
IamLRBA wants to merge 14 commits intoOpenDataEnsemble:devfrom
IamLRBA:Formplayer

Conversation

@IamLRBA
Copy link
Contributor

@IamLRBA IamLRBA commented Feb 17, 2026

Pull Request Title

Align formulus- formwith ODE tokens and adopt @ode/components for chrome`

Description

This PR addresses issue #291 for formulus-formplayer by:

  1. Token alignment - Replacing hardcoded values (colors, spacing, borders, shadows) across formplayer with ODE design tokens from @ode/tokens, consumed via tokens-adapter.ts and the MUI theme.

  2. ODE Button for chrome - Using @ode/components/react-web Button for form navigation (Previous/Next) and Finalize screen actions, so key chrome elements match the ODE design system while form controls remain MUI-based.

  3. Decision: Keep MUI for form controls - The form UI is built on @jsonforms/material-renderers (MUI-based). @ode/components (react-web) currently has Button, Input, Card, Badge, ButtonGroup only with no Select, Checkbox, Radio, Switch, DatePicker, or TextField-with-label. Custom renderers (Photo, Signature, File, etc.) also rely on MUI primitives.

Replacing the Form UI with ODE would require custom JSON Forms renderers for every control type.
Full replacement is not feasible at the moment without expanding @ode/components and building a new renderer set.
We shall therefore keep MUI for form controls and only swap chrome (navigation and action buttons) to ODE.

Additional changes: lint/format fixes and added NumberStepperRenderer.

Type of Change

  • New Feature / Enhancement
  • Bug Fix
  • Refactor / Code Cleanup
  • Documentation Update
  • Maintenance / Chore
  • Other (please specify):

Component(s) Affected

  • formulus (React Native mobile app)
  • formulus-formplayer (React web app)
  • synkronus (Go backend server)
  • synkronus-cli (Command-line utility)
  • Documentation
  • DevOps / CI/CD
  • Other: packages/components (Button used by formplayer)

Related Issue(s)

Closes/Fixes/Resolves: Closes #291 (formulus-formplayer portion)


Testing

  • Unit tests added/updated
  • Integration tests added/updated
  • Manually tested
  • Tested on multiple platforms (if applicable)
  • Not applicable

Breaking Changes

  • This PR introduces breaking changes
  • This PR does NOT introduce breaking changes

Documentation Updates

  • Documentation has been updated
  • Documentation update not required

Checklist

  • Code follows project style guidelines
  • All existing tests pass
  • New tests added for new functionality
  • PR title follows Conventional Commits format

Thank you for contributing to Open Data Ensemble (ODE)!

Copy link
Collaborator

@Jexsie Jexsie left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @IamLRBA, I just have two comments for now

@IamLRBA
Copy link
Contributor Author

IamLRBA commented Feb 17, 2026

Thanks @IamLRBA, I just have two comments for now

Thanks for the feedback @Jexsie! I've added explicit TypeScript interfaces for the tokens adapter and configured TypeScript path mapping to infer component types directly from the library source.

@IamLRBA IamLRBA requested a review from Jexsie February 17, 2026 09:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[formulus & formulus-formplayer] components and tokens

2 participants