Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 55 additions & 0 deletions .prompts/project-info.prompttemplate
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
## JSON Forms Project information

JSON Forms is a declarative framework for efficiently building form-based web UIs.
These UIs are targeted at entering, modifying and viewing data and are usually embedded within an application.

Any UI is defined by using two schemata:
- The JSON schema defines the underlying data to be shown in the UI (objects, properties, and their types)
- The UI schema defines how this data is rendered as a form, e.g. the order of controls, their visibility, and the layout.
If no UI schema is given, JSON Forms generates one based on the given JSON schema.

We put great emphasis on the customizability and extensibility of JSON Forms.

### Architecture overview

The JSON Forms mono repository consists of these packages:
- `@jsonforms/core` in `packages/core`: Provides utilities for managing and rendering JSON Schema based forms.
The core package is independent of any UI technology.
- `@jsonforms/react` in `packages/react`, `@jsonforms/angular` in `packages/angular`, `@jsonforms/vue` in `packages/vue`.
These use the core package to provide specialized bindings for React, Angular and Vue, leveraging each respective's state management and rendering systems.
- For React we maintain two renderer sets: The `@jsonforms/material-renderers` in `packages/material-renderers`, which are based on the popular Material-UI framework and `@jsonforms/vanilla-renderers` in `packages/vanilla-renderers` which provides pure HTML5 renderers.
For Angular we provide an Angular Material based renderer set (`@jsonforms/angular-material` in `packages/angular-material`). For Vue we provide a HTML5 based renderer set `@jsonforms/vue-vanilla` in `packages/vue-vanilla` and a Vuetify based one `@jsonforms/vue-vuetify` in `packages/vue-vuetify`.

### Mono-repo Setup

- Package Manager: pnpm with lerna for orchestration
- Dependency Management: Each package declares all its dependencies explicitly (no hoisting assumptions). We aim to use the same dependency versions across packages (e.g. for Typescript or Jest)
- Testing: Independent test setup per package. Tests are implemented in separate folder `test` or `tests` within a package.
- Build: Each package has its own build configuration. Rollup is the default tool except if there are other typical tools for the respective technology (e.g. Angular)
- Linting and Formatting: Each package has its own `.eslintrc.js` and `.prettierrc.js` config
- Typescript: Packages extend common base config `tsconfig.base.js`

### Core principles

JSON Forms uses a reducer-style approach for its state management.
The form-wide state is manipulated via the reducers in `packages/core/src/reducers`.

Renderers are registered in a registry, consisting of tester, renderer pairs.
For each UI Schema element to be rendered, all testers are asked for their priority.
The highest priority wins and the respective renderer gets full control over rendering.
The renderer may dispatch back to JSON Forms to render children elements.

Dispatchers only receive a minimal amount of properties, e.g. which part of the JSON Schema they are refering to and which UI Schema element is to be rendered.
Mappers in packages/core/src/mappers are then used to determine the actual props for the renderers to work with, combining the handed over dispatch props and the form-wide state.

The binding packages `@jsonforms/react`, `@jsonforms/angular` and `@jsonforms/vue` bind these functionalities to mechanisms of their respective framework.
The renderers then use the bound functionalities and usually do not interact with `@jsonforms/core` directly.

### Coding Guidelines

When creating new functions we prefer the arrow style approach

### Development Guidelines

The framework is popular, therefore we never break adopters if we don't have to.
Consider this for all changes.
41 changes: 41 additions & 0 deletions CLAUDE.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
# General project information

For information on project setup, architecture, and core principles refer to @.prompts/project-info.prompttemplate

## Build Commands

### Full Repository

```bash
pnpm install # Install dependencies
pnpm run build # Build all packages
pnpm run lint # Lint all packages
pnpm run lint:fix # Lint and auto-fix
pnpm run test # Test all packages
pnpm run clean # Clean build artifacts
```

### Single Package (Preferred for Iterative Development)

```bash
# Build
pnpm lerna run build --scope=@jsonforms/core

# Lint
pnpm lerna run lint --scope=@jsonforms/core

# Test
pnpm lerna run test --scope=@jsonforms/core
```

### Package Names

- `@jsonforms/core` - Core utilities (UI-framework independent)
- `@jsonforms/react`, `@jsonforms/angular`, `@jsonforms/vue` - Framework bindings
- `@jsonforms/material-renderers`, `@jsonforms/vanilla-renderers` - React renderer sets
- `@jsonforms/angular-material` - Angular renderer set
- `@jsonforms/vue-vanilla`, `@jsonforms/vue-vuetify` - Vue renderer sets

### Build Order Dependencies

`core` → `react`/`angular`/`vue` → renderer packages
Loading