diff --git a/examples/README.md b/examples/README.md new file mode 100644 index 0000000..cc32d88 --- /dev/null +++ b/examples/README.md @@ -0,0 +1,23 @@ +# Examples + +Working integrations of Formhaus with real UI kits. Each example is self-contained: it installs its own dependencies, has its own README, and can be used as a starter. + +| Example | Stack | What it shows | +|---------|-------|---------------| +| [`react-mui`](react-mui/) | React 18 + Material UI | `components` prop with MUI Autocomplete, DateTimePicker, Select, etc. | +| [`vue-vuetify`](vue-vuetify/) | Vue 3 + Vuetify 3 | `components` prop with Vuetify ``, ``, etc. | +| [`vanilla-svelte`](vanilla-svelte/) | Svelte (no adapter) | Using `@formhaus/core` directly without a framework adapter | + +## Run any example + +```bash +cd examples/ +pnpm install --ignore-workspace +pnpm dev +``` + +The `--ignore-workspace` flag is important — it makes the example resolve `@formhaus/*` from the public npm registry, the way a real consumer would. + +## Form definitions + +[`definitions/`](definitions/) contains stand-alone JSON form definitions used by the documentation playground. They're regular `FormDefinition` files; copy any of them into a new project to get started. diff --git a/examples/react-mui/README.md b/examples/react-mui/README.md new file mode 100644 index 0000000..75d59bd --- /dev/null +++ b/examples/react-mui/README.md @@ -0,0 +1,26 @@ +# React + MUI example + +Wires the Formhaus React adapter to [Material UI](https://mui.com) components. Demonstrates the `components` prop pattern: each MUI input is a thin wrapper that maps `FieldComponentProps` onto the MUI API. + +## Run + +This example installs its own dependencies (it ignores the workspace root): + +```bash +pnpm install --ignore-workspace +pnpm dev +``` + +Opens at http://localhost:5173. + +## What's interesting + +- [src/component-map.ts](src/component-map.ts) — maps every Formhaus field type to an MUI-backed renderer. Copy this file as a starting point for your own MUI-based form. +- [src/fields/AutocompleteField.tsx](src/fields/AutocompleteField.tsx) — MUI's `` filtering by `label` (the default `` filters by `value`). +- [src/fields/SelectField.tsx](src/fields/SelectField.tsx) — handles both `select` and `multiselect` from one component. +- [src/fields/TextField.tsx](src/fields/TextField.tsx) — covers text, email, phone, number, password, date, datetime in one renderer using MUI's ``. +- [src/definition.json](src/definition.json) — a small contact form using `text`, `email`, `autocomplete`, and `datetime`. + +## Use as a starter + +Copy this folder, rename, and tweak `definition.json` and the field map. Nothing in here references workspace-internal paths. diff --git a/examples/vanilla-svelte/README.md b/examples/vanilla-svelte/README.md new file mode 100644 index 0000000..6612a47 --- /dev/null +++ b/examples/vanilla-svelte/README.md @@ -0,0 +1,23 @@ +# Svelte example (no adapter package) + +Demonstrates that `@formhaus/core` works directly with any framework — no `@formhaus/svelte` package needed. The Svelte component subscribes to the `FormEngine` and re-renders on change. + +## Run + +This example installs its own dependencies (it ignores the workspace root): + +```bash +pnpm install --ignore-workspace +pnpm dev +``` + +Opens at http://localhost:5173. + +## What's interesting + +- [src/App.svelte](src/App.svelte) — subscribes to `engine.subscribe(...)`, copies state into reactive `let` variables in `sync()`, and renders fields by `field.type`. This is the pattern you'd use to write `@formhaus/svelte` if you wanted one. +- [src/definition.json](src/definition.json) — same form definition format as the React/Vue examples. Define once, render anywhere. + +## Use as a starter + +Copy this folder, rename, and tweak `definition.json` and the renderer logic. Add support for whichever field types your app needs. diff --git a/examples/vue-vuetify/README.md b/examples/vue-vuetify/README.md new file mode 100644 index 0000000..e3c8810 --- /dev/null +++ b/examples/vue-vuetify/README.md @@ -0,0 +1,26 @@ +# Vue + Vuetify example + +Wires the Formhaus Vue adapter to [Vuetify 3](https://vuetifyjs.com) components. Demonstrates the `components` prop pattern: each Vuetify input is a thin wrapper that maps `FormFieldProps` onto the Vuetify API. + +## Run + +This example installs its own dependencies (it ignores the workspace root): + +```bash +pnpm install --ignore-workspace +pnpm dev +``` + +Opens at http://localhost:5173. + +## What's interesting + +- [src/component-map.ts](src/component-map.ts) — maps every Formhaus field type to a Vuetify-backed renderer. Copy this file as a starting point for your own Vuetify-based form. +- [src/fields/AutocompleteField.vue](src/fields/AutocompleteField.vue) — Vuetify's `` filtering by `label` (the default `` filters by `value`). +- [src/fields/SelectField.vue](src/fields/SelectField.vue) — handles both `select` and `multiselect` from one component. +- [src/fields/TextField.vue](src/fields/TextField.vue) — covers text, email, phone, number, password, date, datetime in one renderer using Vuetify's ``. +- [src/definition.json](src/definition.json) — a small contact form using `text`, `email`, `autocomplete`, and `datetime`. + +## Use as a starter + +Copy this folder, rename, and tweak `definition.json` and the field map. Nothing in here references workspace-internal paths.