Updated Playground docs with MUI and Vuetify components (#19)

* feat(examples): add canonical form definition JSONs

* feat(examples): add React+MUI example scaffolding

* feat(examples): add React+MUI App, componentMap, and definition

* feat(examples): add React+MUI field wrappers (text, select, checkbox, radio, switch)

* feat(examples): add React+MUI file, textarea, actions, and step progress

* feat(examples): add Vue+Vuetify example scaffolding

* feat(examples): add Vue+Vuetify App, componentMap, and definition

* feat(examples): add Vuetify field wrappers (text, select, checkbox, radio, switch)

* feat(examples): add Vuetify file, textarea, actions, and step progress

* feat(examples): add vanilla Svelte bring-your-own-rendering example

* refactor(docs): add playground loaders and fixtures module

* refactor(docs): replace inline playground with modular Sandpack wrapper

* chore: remove old playground, gitignore example artifacts

* ci: add docs build and example smoke tests

* fix(docs): set Sandpack entry for Vuetify plugin registration

* feat(docs): add no-library playground section with default HTML rendering

* fix(examples): register all Vuetify components for Sandpack compatibility

* feat(docs): add MUI/No-library variant toggle per framework section

* fix: use pnpm exec instead of npx for docs scripts

* style: apply code style rules to playground examples

Author: ignsm

.github/workflows/ci.yml

@@ -35,3 +35,47 @@ jobs:
       - run: pnpm --filter @formhaus/core --filter @formhaus/react run test:resolve
 
       - run: pnpm test
+
+  docs:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+
+      - run: pnpm install --frozen-lockfile
+
+      - run: pnpm build
+
+      - run: pnpm docs:build
+
+  examples:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        example: [react-mui, vue-vuetify, vanilla-svelte]
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+
+      - name: Install example deps
+        working-directory: examples/${{ matrix.example }}
+        run: pnpm install --ignore-workspace
+
+      - name: Build example
+        working-directory: examples/${{ matrix.example }}
+        run: pnpm build

.gitignore

@@ -8,3 +8,6 @@ coverage/
 storybook-static/
 docs/.vitepress/cache/
 docs/.vitepress/dist/
+examples/*/node_modules/
+examples/*/pnpm-lock.yaml
+examples/*/dist/

docs/.vitepress/components/PlaygroundExamples.vue

@@ -0,0 +1,4 @@
+declare module '*?raw' {
+  const content: string;
+  export default content;
+}

docs/.vitepress/components/env.d.ts

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+defineProps<{ definition: object }>();
+</script>
+
+<template>
+  <details class="fh-definition-panel">
+    <summary>Form definition</summary>
+    <pre><code>{{ JSON.stringify(definition, null, 2) }}</code></pre>
+  </details>
+</template>
+
+<style scoped>
+.fh-definition-panel {
+  margin-top: 12px;
+  border: 1px solid var(--vp-c-border);
+  border-radius: 8px;
+  overflow: hidden;
+}
+.fh-definition-panel summary {
+  padding: 8px 14px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+  cursor: pointer;
+  background: var(--vp-c-bg-soft);
+}
+.fh-definition-panel pre {
+  margin: 0;
+  padding: 12px 14px;
+  font-size: 12px;
+  line-height: 1.5;
+  overflow-x: auto;
+  background: var(--vp-c-bg);
+}
+</style>