chore: playground tests

Author: logaretm

packages/playground/src/App.vue

@@ -1,99 +1,12 @@
 <script setup lang="ts">
-import { useStepFormFlow } from '@formwerk/core';
-import InputText from './components/InputText.vue';
-import InputTextArea from './components/InputTextArea.vue';
-import z from 'zod';
-
-const {
-  formProps,
-  nextButtonProps,
-  previousButtonProps,
-  onDone,
-  isLastStep,
-  FormStep,
-  goToStep,
-  isCurrentStep,
-  getStepValue,
-  onBeforeStepResolve,
-} = useStepFormFlow({});
-
-onBeforeStepResolve(ctx => {
-  if (ctx.currentStep.name === 'step-1' && ctx.values.name === 'ahmad') {
-    return 'step-3';
-  }
-
-  return ctx.next();
-});
-
-const step1 = z.object({
-  name: z.string(),
-  email: z.string().email(),
-});
-
-const step2 = z.object({
-  address: z.string(),
-});
-
-onDone(data => {
-  console.log(data.toObject());
-});
+import FormField from './components/FormField.vue';
+import TextControl from './components/TextControl.vue';
 </script>
 
 <template>
-  <form v-bind="formProps" class="w-full h-full flex flex-col items-center justify-center">
-    <div class="flex gap-2 my-8">
-      <button
-        type="button"
-        class="bg-gray-700 p-2 rounded-full aria-selected:bg-emerald-500 hover:bg-gray-500"
-        :aria-selected="isCurrentStep(0)"
-        @click="goToStep(0)"
-      >
-        Go to step 1
-      </button>
-      <button
-        type="button"
-        class="bg-gray-700 p-2 rounded-full aria-selected:bg-emerald-500 hover:bg-gray-500"
-        :aria-selected="isCurrentStep(1)"
-        @click="goToStep(1)"
-      >
-        Go to step 2
-      </button>
-      <button
-        type="button"
-        class="bg-gray-700 p-2 rounded-full aria-selected:bg-emerald-500 hover:bg-gray-500"
-        :aria-selected="isCurrentStep(2)"
-        @click="goToStep(2)"
-      >
-        Go to step 3
-      </button>
-    </div>
-
-    <FormStep name="step-1" :schema="step1">
-      {{ getStepValue(0) }}
-
-      <InputText name="name" label="Name" />
-      <InputText name="email" label="Email" />
-    </FormStep>
-
-    <FormStep name="step-2" :schema="step2">
-      {{ getStepValue(1) }}
-
-      <InputTextArea name="address" label="Address" />
-    </FormStep>
-
-    <FormStep name="step-3">
-      {{ getStepValue(2) }}
-
-      <InputText name="city" label="City" />
-    </FormStep>
-
-    <div class="mt-10 grid grid-cols-2 gap-4">
-      <button class="bg-gray-700 p-2 rounded-md" v-bind="previousButtonProps">⬅️ Previous</button>
-      <button class="bg-gray-700 p-2 rounded-md" v-bind="nextButtonProps">
-        {{ isLastStep ? 'Submit' : 'Next ➡️' }}
-      </button>
-    </div>
-  </form>
+  <FormField label="Name">
+    <TextControl required />
+  </FormField>
 </template>
 
 <style>

packages/playground/src/components/FormField.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <label v-bind="labelProps">{{ label }}</label>
+
+    <slot />
+
+    <p v-if="errorMessage" v-bind="errorMessageProps" class="error-message">{{ errorMessage }}</p>
+
+    <p v-else-if="description" v-bind="descriptionProps">{{ description }}</p>
+
+    {{ fieldValue }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useFieldState, useFormField, FieldProps } from '@formwerk/core';
+
+const props = defineProps<FieldProps>();
+
+const state = useFieldState();
+const { errorMessage, fieldValue } = state;
+const { labelProps, errorMessageProps, descriptionProps } = useFormField(props, state);
+</script>
+
+<style scoped>
+/** Your styles here */
+.error-message {
+  color: red;
+}
+
+label {
+  display: block;
+}
+</style>

packages/playground/src/components/TextControl.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { TextControlProps, useTextControl } from '@formwerk/core';
+
+const props = defineProps<TextControlProps>();
+
+const { inputProps } = useTextControl(props);
+</script>
+
+<template>
+  <input v-bind="inputProps" class="border border-gray-300 rounded-md p-2" />
+</template>