# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Development Commands

### Build and Development
- `npm run build` - Build the library for production using Rollup
- `npm run watch` or `npm start` - Build in watch mode for development
- `npm run ci` - Clean build for CI environments

### Code Quality
- `npx @biomejs/biome check --write ./src` - Format and organize imports with Biome
- `npm run type-check` - Run TypeScript type checking without emitting
- Pre-commit hook (via Husky) automatically runs Biome formatting on staged files

## Architecture Overview

This is `@dexteel/mesf-core`, a React component library built as an NPM package using TypeScript and Rollup. The library provides a comprehensive set of components and utilities for manufacturing execution systems.

### Key Architecture Patterns

**Library Structure**: The project follows a modular library architecture with clear separation between:
- Components (UI elements)
- Context providers (state management)
- Services (API communication)
- Configuration modules (settings and user management)
- Utilities and hooks

**Export Strategy**: All public APIs are exported through `src/index.ts` using barrel exports, making the library consumable as a single package.

**State Management**: Uses React Context pattern extensively:
- `UTLSettingContext` - User settings and preferences
- `userContext` - User authentication and profile data
- `assetContext` - Asset management state
- `axiosInstance` - HTTP client configuration with interceptors

**Real-time Communication**: Integrates SignalR (`@microsoft/signalr`) for real-time updates via the `useMesfRealtime` hook.

### Directory Structure

- **src/components/** - Reusable UI components organized by domain
  - `navigation/` - Header, menu components
  - `modals/` - Dialog components
  - `shared/` - Common utility components

- **src/configuration/** - Admin and configuration modules
  - Handles user management, system settings
  - Contains pages for administrative functions

- **src/context/** - React Context providers
  - Authentication, settings, and shared state management
  - Axios configuration with request/response interceptors

- **src/hooks/** - Custom React hooks
  - Real-time data hooks, search utilities

- **src/services/** - API communication layer
- **src/utils/** - Utility functions and helpers
- **src/controls/** - Form controls and input components
- **src/models/** - TypeScript type definitions and interfaces
- **src/pages/** - Page-level components
- **src/routes/** - Route configuration
- **src/reducers/** - Redux reducers
- **src/account/** - Account-related components
- **src/helmet/** - React Helmet (meta tag) management
- **src/css/** - Stylesheets and theme configuration

### Technology Stack

**Core Framework**: React 18 with TypeScript 5
**Build Tool**: Rollup 2 with rollup-plugin-typescript2
**Styling**: MUI v6 (`@mui/material`, `@mui/lab`, `@mui/styles`) with Emotion
**State**: Redux Toolkit for complex state, React Context for simpler state
**Authentication**: Azure MSAL (`@azure/msal-browser`, `@azure/msal-react`)
**Data Visualization**: Chart.js 4 with react-chartjs-2, ECharts 6
**Grid Component**: AG Grid 33 (Community + Enterprise), MUI X Data Grid v7
**Date Handling**: Moment.js with moment-timezone, date-fns-tz
**Routing**: React Router DOM v6
**Real-time**: SignalR 8 (`@microsoft/signalr`)

### Key Dependencies

The library has extensive peer dependencies that consuming applications must provide:
- MUI v6 components, icons, lab, styles, and Emotion styling
- MUI X v7 (Data Grid, Date Pickers, Tree View)
- AG Grid 33 (Community + Enterprise + React bindings)
- React 18 and React DOM 18
- React Router DOM v6
- Redux Toolkit
- date-fns (v3 or v4)

### Development Notes

**Styling**: Uses MUI v6 theming system with Emotion. Custom theme exports available via `src/css/themeMESF`.

**Internationalization**: Components support timezone handling via `moment-timezone` and `date-fns-tz`.

**Bundle Optimization**: Rollup configuration externalizes React and Babel runtime to prevent duplication in consuming applications.

**Code Quality**: Biome is configured for formatting and import organization, but linting is disabled (see biome.json).