Skip to content

Conversation

@IamLRBA
Copy link
Contributor

@IamLRBA IamLRBA commented Dec 17, 2025

Pull Request Title

feat(components): add unified ODE components package with platform-specific implementations

Description

This PR introduces a new @ode/components package that provides a comprehensive, unified component library for the ODE ecosystem. The package includes platform-specific implementations optimized for both React Web and React Native, all built on the @ode/tokens design system for consistent styling across applications.

Components Added:

  • Button: Custom design with fading border effect, hover states, and support for paired buttons with opposite styling
  • ButtonGroup: Container component for managing paired button styling and interactions
  • Input: Modern, minimalist input with validation states and accessibility features
  • Card: Clean card component with subtle elevation and hover effects
  • Badge: Simple badge component for labels and status indicators

Key Features:

  • Platform-specific implementations in src/react-web/ and src/react-native/
  • Shared types and utilities in src/shared/
  • Token-based styling using @ode/tokens
  • Dark mode support
  • WCAG compliant accessibility
  • TypeScript support with full type definitions
  • Modern, minimalist design aesthetic

Package Structure:

  • 21 files total including configuration, documentation, and source files
  • Comprehensive README.md and CONTRIBUTING.md documentation
  • Ready for integration into formulus, formulus-formplayer, and other ODE applications

Type of Change

  • Bug Fix
  • New Feature / Enhancement
  • 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: New package: @ode/components

Related Issue(s)

Closes/Fixes/Resolves: Closes #75


Testing

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

Testing Notes:

  • Components manually tested for React Web and React Native platforms
  • Button fading border effect and hover states verified
  • Paired button styling verified
  • Dark mode support tested
  • Accessibility features verified (keyboard navigation, ARIA attributes)

Breaking Changes

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

If breaking changes, please describe migration steps:

N/A - This is a new package addition with no impact on existing code.


Documentation Updates

  • Documentation has been updated
  • Documentation update is not required

Documentation Added:

  • packages/components/README.md: Comprehensive package documentation with installation, usage examples, and API reference
  • packages/components/CONTRIBUTING.md: Contribution guidelines for component development
  • Inline code documentation and JSDoc comments throughout components

Checklist

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

Additional Notes:

  • Package is ready for future integration into ODE applications and this PR will be complete once I provide a screenshot proof of successfully using the tokens on either formulus or the formulus-formplayer.

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

IamLRBA and others added 3 commits December 17, 2025 00:53
Add new components package with platform-specific implementations for
React Web and React Native. Includes Button, ButtonGroup, Input, Card,
and Badge components built on @ode/tokens design system.

Solves issue OpenDataEnsemble#75
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.

Creating a reusable UI components package

2 participants