feat(builders): form schema, group and field builders

.github/actions/setup-pnpm/action.yml

@@ -0,0 +1,29 @@
+name: Setup pnpm
+description: Install pnpm, Node.js, and dependencies
+
+runs:
+  using: composite
+  steps:
+    - name: Install pnpm
+      uses: pnpm/action-setup@v4
+      with:
+        version: 10
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: 20
+        cache: 'pnpm'
+    - name: Get pnpm store directory
+      shell: bash
+      run: |
+        echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+    - name: Setup pnpm cache
+      uses: actions/cache@v4
+      with:
+        path: ${{ env.STORE_PATH }}
+        key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+        restore-keys: |
+          ${{ runner.os }}-pnpm-store-
+    - name: Install dependencies
+      shell: bash
+      run: pnpm install

.github/workflows/pr-validate.yml

@@ -0,0 +1,28 @@
+name: Validate pull request
+
+on:
+  pull_request:
+    types: [ opened, synchronize, reopened ]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup-pnpm
+      - name: Run linter
+        run: pnpm run lint
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup-pnpm
+      - name: Run tests
+        run: pnpm run test
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup-pnpm
+      - name: Build
+        run: pnpm run build

apps/playground/App.vue

@@ -4,9 +4,7 @@ import schema from './schema.js'
 export default {
   name: 'App',
   data () {
-    return {
-      ...schema
-    }
+    return { schema }
   }
 }
 </script>
@@ -23,11 +21,13 @@ export default {
     </div>
     <div class="card mt-4">
       <div class="card-side">
-        <VueFormGenerator :schema="form.schema" :model="form.model" />
+        <VueFormGenerator :schema="schema.schema" :model="schema.model" />
       </div>
       <div class="card-side">
         <JsonViewer
-          :value="form.model" copyable boxed
+          :value="schema.model"
+          copyable
+          boxed
           preview-mode
           theme="jv-dark"
         />

apps/playground/schema.example.js

@@ -1,40 +1,9 @@
-export default {
-  form: {
-    model: {
-      name: '',
-      surname: '',
-      terms: false
-    },
-    schema: {
-      fields: [
-        {
-          name: 'name',
-          label: 'Name',
-          type: 'input',
-          inputType: 'text',
-          model: 'name',
-          placeholder: 'Write name...',
-          readonly: false,
-          required: true
-        },
-        {
-          name: 'surname',
-          label: 'Surname',
-          type: 'input',
-          inputType: 'text',
-          model: 'surname',
-          placeholder: 'Write surname...',
-          readonly: false,
-          required: true
-        },
-        {
-          name: 'terms',
-          label: 'Accept terms and conditions',
-          type: 'input',
-          inputType: 'checkbox',
-          model: 'terms'
-        }
-      ]
-    }
+import { f } from '@/index.ts'
+
+export default f.schema(
+  {
+    name: f.text('Name').label('Name').placeholder('Write name....').readonly(false).required(),
+    surname: f.text('Surname').label('Surname').placeholder('Write surname....').required(),
+    terms: f.checkbox('Terms').label('I accept terms and conditions')
   }
-}
+).toRef()

eslint.config.js

@@ -10,7 +10,7 @@ export default [
   ...pluginVue.configs['flat/recommended'],
   ...typescriptEslint.configs['recommended'],
   {
-    ignores: [ 'dist' ]
+    ignores: [ 'dist', 'apps' ]
   },
   {
     languageOptions: {

package.json

@@ -12,7 +12,8 @@
     "dev:sass": "sass --watch src/scss/themes:apps/playground/css/",
     "test": "vitest",
     "test:ui": "vitest --ui",
-    "build": "vite build && sass src/scss/themes/:dist/themes/",
+    "lint": "eslint",
+    "build": "tsc --noEmit && vite build && sass src/scss/themes/:dist/themes/",
     "preview": "vite preview",
     "docs:dev": "vitepress dev apps/docs",
     "docs:build": "vitepress build apps/docs",