|
1 | | -# Mendix Web Widgets Repository |
| 1 | +# Mendix Web Widgets |
2 | 2 |
|
3 | 3 | Monorepo of official Mendix pluggable web widgets. pnpm workspaces + Turbo. |
4 | 4 |
|
5 | | -## Structure |
| 5 | +## Commands |
6 | 6 |
|
7 | | -- `packages/pluggableWidgets/*-web` — Widget packages (React, TypeScript, SCSS) |
8 | | -- `packages/modules/*` — Mendix module packages |
9 | | -- `packages/shared/*` — Shared configs and utilities |
10 | | -- `automation/` — Build and release automation |
11 | | -- `docs/requirements/` — Detailed technical requirements |
| 7 | +- Install: `pnpm install` |
| 8 | +- Build all: `pnpm build` |
| 9 | +- Build one: `pnpm --filter @mendix/<name> run build` |
| 10 | +- Test one: cd into package dir, run `pnpm run test` (NOT from repo root) |
| 11 | +- Lint one: cd into package dir, run `pnpm run lint` |
| 12 | +- Changelog: `pnpm -w changelog` |
12 | 13 |
|
13 | | -## Commands |
| 14 | +## Structure |
14 | 15 |
|
15 | | -| Command | Description | |
16 | | -|---------|-------------| |
17 | | -| `pnpm install` | Install dependencies | |
18 | | -| `pnpm build` | Build all packages | |
19 | | -| `pnpm lint` | Lint all packages | |
20 | | -| `pnpm test` | Test all packages | |
21 | | -| `pnpm --filter @mendix/<name> run <script>` | Run script in one package | |
| 16 | +``` |
| 17 | +packages/pluggableWidgets/*-web/ -> Widget packages (React + TS + SCSS) |
| 18 | +packages/modules/ -> Mendix module packages |
| 19 | +packages/shared/ -> Shared configs, plugins, utilities |
| 20 | +automation/ -> Build/release automation |
| 21 | +docs/requirements/ -> Detailed technical requirements |
| 22 | +``` |
22 | 23 |
|
23 | 24 | ## Conventions |
24 | 25 |
|
25 | | -- TypeScript + React functional components + SCSS |
26 | | -- Mendix Pluggable Widgets API (EditableValue, ActionValue, ListValue) |
27 | | -- Atlas UI design system for styling |
28 | | -- Conventional commits (commitlint enforced) |
29 | | -- Semver versioning + CHANGELOG.md per package |
| 26 | +- TypeScript strict, React functional components + hooks |
| 27 | +- Mendix Pluggable Widgets API: EditableValue, ActionValue, ListValue, DynamicValue |
| 28 | +- Check ActionValue.canExecute before execute() |
| 29 | +- Render loading/empty states until values are ready |
| 30 | +- SCSS for styling, prefer Atlas UI classes, BEM-like naming with widget prefix |
| 31 | +- Conventional commits enforced: `type(scope): description` |
| 32 | +- Semver + CHANGELOG.md per package for runtime/XML/behavior changes |
| 33 | +- Jest + RTL for unit tests (src/**/__tests__/*.spec.ts) |
| 34 | +- Playwright for E2E (e2e/*.spec.js) |
| 35 | + |
| 36 | +## Development Setup |
| 37 | + |
| 38 | +- Node >=22, pnpm 10.x |
| 39 | +- Set MX_PROJECT_PATH to Mendix project dir for live reload |
| 40 | +- Run `pnpm start` inside widget package for dev build |
| 41 | + |
| 42 | +## Constraints |
| 43 | + |
| 44 | +- Never modify dist/, generated files, or lockfiles |
| 45 | +- XML property keys: lowerCamelCase, must match TypeScript props exactly |
| 46 | +- Don't override core Atlas UI classes |
| 47 | +- Prefer tree-shakable imports for new dependencies |
| 48 | + |
| 49 | +## Documentation |
| 50 | + |
| 51 | +Essential reading (consult for any widget work): |
| 52 | +- docs/requirements/tech-stack.md — Full technology stack |
| 53 | +- docs/requirements/frontend-guidelines.md — CSS/SCSS/Atlas UI guidelines |
| 54 | +- docs/requirements/app-flow.md — Widget lifecycle and Studio Pro integration |
| 55 | +- docs/requirements/backend-structure.md — Data flow and Mendix runtime |
| 56 | +- docs/requirements/project-requirements-document.md — Goals and scope |
| 57 | + |
| 58 | +Reference (consult on demand for specific tasks): |
| 59 | +- docs/requirements/implementation-plan.md — New widget guide + PR template |
| 60 | +- docs/requirements/widget-to-module.md — Widget-to-module conversion guide |
30 | 61 |
|
31 | 62 | ## Agent-Specific Instructions |
32 | 63 |
|
33 | | -- **Claude Code** — See `CLAUDE.md` for hooks, commands, and detailed instructions |
| 64 | +- **Claude Code** — See `CLAUDE.md` for hooks and auto-imported documentation |
34 | 65 | - **GitHub Copilot** — See `.github/copilot-instructions.md` for PR review guidelines |
35 | | -- **Cursor / Windsurf** — See `docs/requirements/` for rule files (YAML frontmatter compatible) |
| 66 | +- **Cursor / Windsurf** — Use docs/requirements/ files as rule sources (YAML frontmatter compatible) |
0 commit comments