From df23646c8b86e55b04dae46a8c7d4b2dda257998 Mon Sep 17 00:00:00 2001
From: Abdelrahman Awad <logaretm1@gmail.com>
Date: Sat, 14 Sep 2024 20:00:20 +0300
Subject: [PATCH] chore: update playground radio components

---
 packages/playground/src/App.vue               | 43 ++++-----
 .../src/components/InputRadioItem.vue         | 58 +++++++++++-
 .../playground/src/components/RadioGroup.vue  | 89 ++++++++++++++++---
 .../playground/src/components/RadioItem.vue   | 62 +++++++++++--
 4 files changed, 203 insertions(+), 49 deletions(-)

diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
index 1ca11f91..8e593a86 100644
--- a/packages/playground/src/App.vue
+++ b/packages/playground/src/App.vue
@@ -1,31 +1,20 @@
 <template>
-  <div class="flex gap-4 relative p-8">
-    <form class="w-full" v-bind="formProps">
-      <InputSelect
-        name="country"
-        v-model="model"
-        label="Select Input"
-        :get-option-value="t => t.code"
-        :groups="continents"
-      />
-
-      <Slider name="amount" />
-
-      <CheckboxItem name="terms" />
-
-      <input type="text" name="test" value="test" />
-
-      <button>Submit lets gooo</button>
-    </form>
-
-    <div class="w-1/3 relative">
-      <pre class="max-h-[95vh] overflow-y-auto bg-gray-200 rounded-lg p-4 sticky top-4">{{ values }}</pre>
-    </div>
-  </div>
+  <RadioGroup label="Radio Group" description="There is only one right answer" :schema="schema">
+    <InputRadioItem label="Tea 🍵" value="🍵" />
+    <InputRadioItem label="Coffee ☕️" value="☕️" />
+    <InputRadioItem label="Milk 🥛" value="🥛" />
+  </RadioGroup>
+
+  <RadioGroup label="Radio Group" description="There is only one right answer" :schema="schema">
+    <RadioItem label="Tea 🍵" value="🍵" />
+    <RadioItem label="Coffee ☕️" value="☕️" />
+    <RadioItem label="Milk 🥛" value="🥛" />
+  </RadioGroup>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
+import { z } from 'zod';
 import InputText from '@/components/InputText.vue';
 import InputNumber from '@/components/InputNumber.vue';
 import InputTextArea from '@/components/InputTextArea.vue';
@@ -44,10 +33,14 @@ import { useForm } from '@formwerk/core';
 import InputSelect from '@/components/InputSelect.vue';
 import OptionItem from './components/OptionItem.vue';
 
-const { values, formProps } = useForm({});
-
 const model = ref('');
 
+import { defineSchema } from '@formwerk/schema-zod';
+
+const schema = defineSchema(
+  z.string().min(1, { message: 'Please select a drink' }).endsWith('☕️', { message: 'WRONG ANSWER!' }),
+);
+
 const continents = [
   {
     label: 'Africa',
diff --git a/packages/playground/src/components/InputRadioItem.vue b/packages/playground/src/components/InputRadioItem.vue
index c4ebb1d7..95f7da3a 100644
--- a/packages/playground/src/components/InputRadioItem.vue
+++ b/packages/playground/src/components/InputRadioItem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { RadioProps, useRadio } from '@formwerk/core';
+import { type RadioProps, useRadio } from '@formwerk/core';
 
 const props = defineProps<RadioProps>();
 
@@ -7,9 +7,59 @@ const { labelProps, inputProps } = useRadio(props);
 </script>
 
 <template>
-  <div class="flex items-center">
-    <input v-bind="inputProps" />
+  <div class="radio-item">
+    <label v-bind="labelProps">
+      <input v-bind="inputProps" class="sr-only" />
 
-    <label v-bind="labelProps" class="ml-1">{{ label }}</label>
+      {{ label }}
+    </label>
   </div>
 </template>
+
+<style>
+:root {
+  --color-text: #333;
+  --color-hint: #666;
+  --color-border: #ccc;
+  --color-focus: #0056b3;
+  --color-error: #f00;
+  --color-valid: #059669;
+  --color-hover: #eee;
+}
+</style>
+
+<style scoped>
+.radio-item {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 99999px;
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--color-border);
+  font-size: 13px;
+  font-weight: 500;
+  transition:
+    background-color 0.15s,
+    color 0.15s;
+
+  &:has(:focus) {
+    border: 1px solid var(--color-focus);
+  }
+
+  &:has(:checked) {
+    background-color: var(--color-focus);
+    color: #fff;
+  }
+}
+
+/** This is a common utility CSS class, you can find it in your CSS framework of choice */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+</style>
diff --git a/packages/playground/src/components/RadioGroup.vue b/packages/playground/src/components/RadioGroup.vue
index 0e752a25..2344c107 100644
--- a/packages/playground/src/components/RadioGroup.vue
+++ b/packages/playground/src/components/RadioGroup.vue
@@ -1,23 +1,90 @@
 <script setup lang="ts">
-import { RadioGroupProps, useRadioGroup } from '@formwerk/core';
+import { type RadioGroupProps, useRadioGroup } from '@formwerk/core';
 
 const props = defineProps<RadioGroupProps>();
 
-const { radioGroupProps, labelProps, descriptionProps, errorMessageProps, errorMessage } = useRadioGroup(props);
+const { groupProps, labelProps, descriptionProps, errorMessageProps, errorMessage, fieldValue } = useRadioGroup(props);
 </script>
 
 <template>
-  <div
-    v-bind="radioGroupProps"
-    class="flex border border-gray-200 rounded-md p-2 gap-1"
-    :class="{ 'flex-col': orientation === 'vertical' }"
-  >
-    <span v-bind="labelProps" class="font-medium">{{ label }}</span>
+  <div v-bind="groupProps" class="radio-group">
+    <div v-bind="labelProps" class="group-label">{{ label }} {{ fieldValue }}</div>
 
-    <slot />
+    <div class="radios-container">
+      <slot />
+    </div>
 
-    <div v-if="errorMessageProps" v-bind="errorMessageProps" class="text-red-500 text-xs">{{ errorMessage }}</div>
+    <div v-if="errorMessage" v-bind="errorMessageProps" class="error">
+      {{ errorMessage }}
+    </div>
 
-    <div v-else-if="description" v-bind="descriptionProps" class="text-gray-500 text-xs">{{ description }}</div>
+    <div v-else-if="description" v-bind="descriptionProps" class="hint">
+      {{ description }}
+    </div>
   </div>
 </template>
+
+<style>
+:root {
+  --color-text: #333;
+  --color-hint: #666;
+  --color-border: #ccc;
+  --color-focus: #007bff;
+  --color-error: #f00;
+  --color-valid: #059669;
+  --color-hover: #eee;
+}
+</style>
+
+<style scoped>
+.radio-group {
+  display: flex;
+  flex-direction: column;
+
+  .hint,
+  .error {
+    margin-top: 0.25rem;
+  }
+
+  .error {
+    color: var(--color-error);
+    display: none;
+    font-size: 13px;
+  }
+
+  .hint {
+    color: var(--color-hint);
+    font-size: 13px;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+
+  .radios-container {
+    margin-top: 0.25rem;
+  }
+
+  .group-label {
+    color: var(--color-text);
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  &:has(:focus) {
+    .hint {
+      opacity: 1;
+    }
+  }
+
+  &:has(:invalid) {
+    .error {
+      display: block;
+    }
+
+    .hint {
+      display: none;
+    }
+  }
+}
+</style>
diff --git a/packages/playground/src/components/RadioItem.vue b/packages/playground/src/components/RadioItem.vue
index 7cefe054..52877229 100644
--- a/packages/playground/src/components/RadioItem.vue
+++ b/packages/playground/src/components/RadioItem.vue
@@ -1,19 +1,63 @@
 <script setup lang="ts">
-import { RadioProps, useRadio } from '@formwerk/core';
+import { type RadioProps, useRadio } from '@formwerk/core';
 
 const props = defineProps<RadioProps>();
 
-const { labelProps, radioProps, isChecked } = useRadio(props);
+const { labelProps, inputProps } = useRadio(props);
 </script>
 
 <template>
-  <div v-bind="radioProps" class="flex items-center">
-    <div
-      class="w-5 h-5 rounded-full flex-shrink-0 border border-gray-600 flex items-center justify-center focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-    >
-      <div class="w-3 h-3 rounded-full flex-shrink-0" :class="{ 'bg-blue-500': isChecked }" />
+  <div class="radio-item" v-bind="inputProps">
+    <div v-bind="labelProps">
+      {{ label }}
     </div>
-
-    <span v-bind="labelProps" class="ml-1">{{ label }}</span>
   </div>
 </template>
+
+<style>
+:root {
+  --color-text: #333;
+  --color-hint: #666;
+  --color-border: #ccc;
+  --color-focus: #0056b3;
+  --color-error: #f00;
+  --color-valid: #059669;
+  --color-hover: #eee;
+}
+</style>
+
+<style scoped>
+.radio-item {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 99999px;
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--color-border);
+  font-size: 13px;
+  font-weight: 500;
+  transition:
+    background-color 0.15s,
+    color 0.15s;
+
+  &:focus {
+    border: 1px solid var(--color-focus);
+  }
+
+  &[aria-checked='true'] {
+    background-color: var(--color-focus);
+    color: #fff;
+  }
+}
+
+/** This is a common utility CSS class, you can find it in your CSS framework of choice */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+</style>