A React TypeScript application for the Bahmni Clinical module, built with Webpack and Carbon Design System. This application includes PWA support for offline capabilities.
- TypeScript - Type-safe JavaScript
- React - UI library for building user interfaces
- Carbon Design System - IBM's open-source design system
- Webpack - Module bundler for modern JavaScript applications
- PWA Support - Progressive Web App capabilities for offline use
- React Router - Declarative routing for React applications
- i18n Support - Internationalization for multiple languages
- Jest & Testing Library - Comprehensive testing framework
- Display Controls - Reusable clinical data visualization components
- Node.js (v18.x or later recommended)
- Yarn (v1.22.x or later recommended)
# Install dependencies
yarnFor a comprehensive setup guide including development environments, Docker configuration, authentication setup, and troubleshooting, please refer to our Setup Guide.
- Frontend Architecture - A comprehensive overview of the Bahmni Clinical Frontend architecture
- Project Structure - A high-level overview of the project structure
- i18n Guide - Internationalization implementation details
- Sortable Data Table Guide - Usage of the sortable data table component
- Global Notification Guide - Using the notification system
# Start the development server
yarn nx serve distroThis will start the development server at http://localhost:3000.
# Build the application
yarn nx build distroThe build artifacts will be stored in the dist/ directory.
# Run ESLint to check for code quality issues
yarn lint
# Fix ESLint issues automatically
yarn lint:fixbahmni-clinical-frontend/
├── docs/ # Project documentation
│ ├── sortable-data-table-guide.md
│ ├── global-notification-guide.md
│ ├── i18n-guide.md
│ └── setup-guide.md
├── public/ # Static assets
│ ├── favicon.ico # Favicon
│ ├── logo192.png # Logo for PWA (192x192)
│ ├── logo512.png # Logo for PWA (512x512)
│ ├── manifest.json # PWA manifest
│ ├── robots.txt # Robots file
│ ├── index.html # HTML template
│ └── locales/ # Translation files
│ ├── locale_en.json # English translations
│ └── locale_es.json # Spanish translations
├── src/
│ ├── components/ # Reusable UI components
│ │ └── common/ # Shared components
│ │ ├── sortableDataTable/ # Composite data table component
│ │ └── notification/ # Notification components
│ ├── constants/ # Application constants
│ ├── contexts/ # React contexts
│ ├── displayControls/ # Clinical data display components
│ │ ├── allergies/ # Allergies display
│ │ ├── conditions/ # Conditions display
│ │ └── patient/ # Patient details display
│ ├── hooks/ # Custom React hooks
│ ├── layouts/ # Layout components
│ │ └── clinical/ # Clinical layout
│ ├── pages/ # Page components
│ ├── providers/ # Context providers
│ ├── schemas/ # JSON schemas
│ ├── services/ # API services
│ ├── styles/ # Global styles
│ ├── types/ # TypeScript type definitions
│ ├── utils/ # Utility functions
│ ├── __mocks__/ # Test mocks
│ ├── __tests__/ # Test files
│ ├── App.tsx # Main App component
│ ├── i18n.ts # i18n configuration
│ └── index.tsx # Application entry point
├── .babelrc # Babel configuration
├── .editorconfig # Editor configuration
├── .gitignore # Git ignore file
├── .prettierrc.json # Prettier configuration
├── eslint.config.ts # ESLint configuration
├── jest.config.ts # Jest configuration
├── package.json # Project dependencies and scripts
├── README.md # Project documentation
├── tsconfig.json # TypeScript configuration
└── webpack.config.js # Webpack configuration
For a more detailed explanation of the project architecture, see Architecture Documentation.
yarn start- Start the development serveryarn build- Build the application for productionyarn test- Run testsyarn test:watch- Run tests in watch modeyarn test:coverage- Run tests with coverage reportyarn lint- Run ESLint to check for code quality issuesyarn lint:fix- Fix ESLint issues automaticallyyarn format- Format code with Prettier
- React - UI library
- TypeScript - Type-safe JavaScript
- Carbon Design System - IBM's design system
- Webpack - Module bundler
- React Router - Routing library
- i18next - Internationalization framework
- Jest - Testing framework
- React Testing Library - React testing utilities
- ESLint - Code quality tool
- Prettier - Code formatter
- Workbox - PWA tooling
[Add license information here]