Skip to content

CLAUDE.md

Latest commit

 

History

History
72 lines (52 loc) · 2.65 KB

CLAUDE.md

File metadata and controls

72 lines (52 loc) · 2.65 KB

CLAUDE.md

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

Project Overview

Treege Consumer is a React library for rendering dynamic forms generated by Treege. It consumes tree-structured data and renders appropriate form inputs with validation, submission handling, and theming support.

Common Commands

# Build the library (TypeScript + Vite)
yarn build

# Run linting (ESLint + TypeScript type checking)
yarn lint
yarn lint:fix          # Auto-fix issues

# Run tests
yarn test              # Watch mode
yarn test:coverage     # With coverage report
yarn test:ui           # Vitest UI

# Run example app for local development
yarn example

Architecture

Entry Point

  • src/main.ts - Exports all public components, hooks, types, and utilities

Core Features (src/features/)

  • TreegeConsumer - Main form rendering component that parses tree data and renders fields
  • TreegeViewer - Read-only display component for form data

Field Rendering (src/components/)

  • FieldFactory.tsx - Dynamic field component selector based on field type
  • Inputs/ - 16+ input components (TextField, Select, DatePicker, Address, ApiAutocomplete, etc.)
  • Form/ - Form validation and submission logic

State Management

  • useTreegeConsumer hook - Orchestrates form state, field parsing, validation, and submission
  • TreegeConsumerProvider - Global configuration context (Google API keys, MUI X licenses, locales)
  • OptionsProvider - Component-level options context

Data Flow

  1. Tree data from Treege API → getFieldsFromTreePoint parses to fields
  2. FieldFactory renders appropriate input components
  3. Form state managed via fieldValues and detailFieldValues
  4. On submit: FormData → formDataToJSON → callback with serialized data

Key Utilities (src/utils/)

  • getFieldsFromTreePoint/ - Parse tree structure to renderable fields
  • formDataToJSON/ - Serialize form data for submission
  • findNodeByUUIDInTree/ - Tree traversal helpers
  • addressToGoogleAutocompleteAdapter/ - Google Maps integration

Type Definitions (src/types/)

  • Uses @tracktor/types-treege for tree data types
  • JsonFormValue, FieldValues, ChangeEventField for form state

Key Dependencies

  • @tracktor/design-system - UI components (Material Design based)
  • @mui/x-date-pickers(-pro) - Date/time pickers
  • @tanstack/react-query - Server state management
  • dayjs - Date handling with i18n support

Testing

Tests use Vitest with jsdom and @testing-library/react. Test files are collocated with utilities in */test/* directories.