Updated Playground docs with MUI and Vuetify components

.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/env.d.ts

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

docs/.vitepress/components/playground/PlaygroundDefinitionPanel.vue

@@ -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>