# @dexteel/mesf-core

## Project Overview

`@dexteel/mesf-core` is a React component library built with TypeScript and bundled using Rollup. It provides a comprehensive set of components, contexts, and utilities designed for building Manufacturing Execution Systems (MES). It acts as a core foundation for MESF-based applications, handling common concerns like authentication, navigation, settings, and layout.

**Key Technologies:**
*   **Core:** React 18, TypeScript
*   **Build Tool:** Rollup
*   **UI Framework:** Material-UI (MUI) v6
*   **Data Grid:** AG Grid
*   **Data Visualization:** Chart.js, ECharts
*   **State Management:** React Context, Redux Toolkit, React Query
*   **Authentication:** Azure MSAL
*   **Real-time:** SignalR

## Building and Running

This project is a library, so "running" it typically means building it for consumption or watching for changes while linked to a consuming application.

*   **Build for Production:**
    ```bash
    npm run build
    ```
    This cleans the `dist` folder and runs Rollup to produce the production bundle.

*   **Watch Mode (Development):**
    ```bash
    npm run watch
    # OR
    npm start
    ```
    This runs Rollup in watch mode, rebuilding on file changes.

*   **CI Build:**
    ```bash
    npm run ci
    ```
    Performs a clean build suitable for CI environments.

*   **Type Check:**
    ```bash
    npm run type-check
    ```

## Development Conventions

*   **Code Formatting:** The project uses [Biome](https://biomejs.dev/) for formatting and organizing imports.
    *   Run check and fix: `npx @biomejs/biome check --write ./src`
    *   **Note:** A pre-commit hook is configured to automatically run Biome on staged files.
    *   **Linting:** Linting rules are currently disabled in `biome.json`.

*   **Project Structure:**
    *   `src/index.ts`: The main entry point that exports all public APIs (components, hooks, utilities).
    *   `src/MESFMain.tsx`: The main "shell" component that wraps the application with necessary providers (Auth, Theme, Router, etc.).

## Architecture

The library follows a modular architecture designed to be consumed as a single package.

### Key Components & Modules

*   **`MESFMain`**: The top-level component that consumes applications should use. It accepts `routes`, `navbar`, and `authentication` configuration, setting up the entire application shell.
*   **Contexts**: Extensive use of React Context for global state:
    *   `userContext`: Authentication and user profile.
    *   `UTLSettingContext`: User settings and preferences.
    *   `assetContext`: Management of plant assets.
    *   `LogbookSettingsContext`: Configuration for logbook features.
*   **Services**: `src/services` contains singletons for API communication (`ApiService`) and time handling (`TimeService`).
*   **Configuration**: `src/configuration` contains admin modules and pages for managing system settings.

### Directory Map

*   `src/account/`: Authentication logic (Azure AD, Login strategies).
*   `src/components/`: Reusable UI components (Modals, Navigation, Shared buttons/icons).
*   `src/configuration/`: Admin pages and configuration logic.
*   `src/context/`: React Context providers.
*   `src/controls/`: Complex form controls (Asset pickers, Tree pickers, Date filters).
*   `src/hooks/`: Custom hooks (e.g., `useMesfRealtime`).
*   `src/pages/`: Domain-specific pages provided by the core (Logbook, Trending, SP Executor).
*   `src/utils/`: Helper functions.

## Dependencies

This library relies heavily on **peer dependencies**. Consuming applications are expected to provide:
*   React & React DOM
*   Material-UI (MUI) components & styling
*   AG Grid
*   React Router DOM
*   Date management libraries (Moment, Date-fns)

Check `package.json` for the full list of peer dependencies and their required versions.