Development Workflow

Code Style and Linting

• The project uses ESLint for code linting

• Prettier is configured for code formatting

• Run linting:

  npm run lint
  # or
  yarn lint

  To automatically fix linting issues:

  npm run lint:fix
  # or
  yarn lint:fix

Testing

• Unit tests: npm test or yarn test

• Coverage report: npm run test:coverage or yarn test:coverage

• E2E tests: npm run test:e2e or yarn test:e2e

• Visual regression tests: npm run test:visual or yarn test:visual

  Test file naming convention:

  • Unit tests: ComponentName.test.tsx

  • Integration tests: ComponentName.integration.test.tsx

  • E2E tests: feature-name.e2e.test.ts

Building for Different Environments

# Development build
npm run build:dev
# or
yarn build:dev

# Production build
npm run build:prod
# or
yarn build:prod

# Staging build
npm run build:staging
# or
yarn build:staging

Each environment build will:

• Use appropriate environment variables

• Apply environment-specific optimizations

• Generate source maps (except production)

• Create a build directory with optimized assets

Available Scripts

• npm start or yarn start: Runs the app in development mode

• npm build or yarn build: Builds the app for production

• npm test or yarn test: Launches the test runner

• npm run analyze: Analyzes the bundle size

• npm run lint: Runs ESLint

• npm run format: Formats code using Prettier

• npm run type-check: Runs TypeScript type checking

• npm run test:coverage: Generates test coverage report

• npm run test:e2e: Runs end-to-end tests

• npm run test:visual: Runs visual regression tests

• npm run storybook: Launches Storybook for component development

• npm run build-storybook: Builds static Storybook files

• npm run prepare: Installs git hooks

• npm run validate: Runs all validation scripts (lint, type-check, test)

Project Structure

oada-ui/
├── src/                    # Source files
│   ├── components/        # Reusable UI components
│   │   ├── common/       # Shared components
│   │   ├── forms/        # Form-related components
│   │   └── layout/       # Layout components
│   ├── pages/            # Page components
│   │   ├── auth/        # Authentication pages
│   │   ├── dashboard/   # Dashboard pages
│   │   └── settings/    # Settings pages
│   ├── hooks/            # Custom React hooks
│   │   ├── api/         # API-related hooks
│   │   ├── auth/        # Authentication hooks
│   │   └── ui/          # UI-related hooks
│   ├── services/         # API and external services
│   │   ├── api/         # API clients
│   │   ├── auth/        # Authentication services
│   │   └── storage/     # Storage services
│   ├── store/            # Redux store configuration
│   │   ├── actions/     # Redux actions
│   │   ├── reducers/    # Redux reducers
│   │   └── selectors/   # Redux selectors
│   ├── styles/           # Global styles and theme
│   │   ├── base/        # Base styles
│   │   ├── components/  # Component styles
│   │   └── theme/       # Theme configuration
│   ├── types/            # TypeScript type definitions
│   │   ├── api/         # API types
│   │   ├── components/  # Component types
│   │   └── store/       # Store types
│   └── utils/            # Utility functions
│       ├── api/         # API utilities
│       ├── auth/        # Authentication utilities
│       └── validation/  # Validation utilities
├── public/               # Static files
│   ├── assets/          # Static assets
│   ├── locales/         # Translation files
│   └── index.html       # HTML template
├── tests/               # Test files
│   ├── e2e/            # End-to-end tests
│   ├── integration/    # Integration tests
│   └── unit/           # Unit tests
├── stories/             # Storybook stories
├── scripts/             # Build and utility scripts
├── config/              # Configuration files
├── package.json         # Project dependencies and scripts
├── tsconfig.json        # TypeScript configuration
├── tailwind.config.js   # Tailwind CSS configuration
└── craco.config.js      # CRACO configuration