From 15f630552fc51f015ed9b28092c1dc8d208748a3 Mon Sep 17 00:00:00 2001
From: Simone Colabufalo <simone.colabufalo@gmail.com>
Date: Fri, 31 May 2024 18:33:40 +0200
Subject: [PATCH] refactor: FormItem single script setup (#573)

* refactor(form): move FORM_ITEM_INJECTION_KEY to a different module

By exporting the  from the  file, we can remove the need of having
multiple script tags inside the component.
This change helps with the linters and formatters, expecially with  defaults.
---
 apps/www/src/lib/registry/default/ui/form/FormItem.vue | 10 ++--------
 apps/www/src/lib/registry/default/ui/form/index.ts     |  1 +
 .../src/lib/registry/default/ui/form/injectionKeys.ts  |  4 ++++
 .../src/lib/registry/default/ui/form/useFormField.ts   |  2 +-
 .../www/src/lib/registry/new-york/ui/form/FormItem.vue | 10 ++--------
 apps/www/src/lib/registry/new-york/ui/form/index.ts    |  1 +
 .../src/lib/registry/new-york/ui/form/injectionKeys.ts |  4 ++++
 .../src/lib/registry/new-york/ui/form/useFormField.ts  |  2 +-
 apps/www/src/public/registry/index.json                |  1 +
 apps/www/src/public/registry/styles/default/form.json  | 10 +++++++---
 apps/www/src/public/registry/styles/new-york/form.json | 10 +++++++---
 11 files changed, 31 insertions(+), 24 deletions(-)
 create mode 100644 apps/www/src/lib/registry/default/ui/form/injectionKeys.ts
 create mode 100644 apps/www/src/lib/registry/new-york/ui/form/injectionKeys.ts

diff --git a/apps/www/src/lib/registry/default/ui/form/FormItem.vue b/apps/www/src/lib/registry/default/ui/form/FormItem.vue
index ad120be9..444d9013 100644
--- a/apps/www/src/lib/registry/default/ui/form/FormItem.vue
+++ b/apps/www/src/lib/registry/default/ui/form/FormItem.vue
@@ -1,13 +1,7 @@
-<script lang="ts">
-import type { HTMLAttributes, InjectionKey } from 'vue'
-
-export const FORM_ITEM_INJECTION_KEY
-  = Symbol() as InjectionKey<string>
-</script>
-
 <script lang="ts" setup>
-import { provide } from 'vue'
+import { type HTMLAttributes, provide } from 'vue'
 import { useId } from 'radix-vue'
+import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<{
diff --git a/apps/www/src/lib/registry/default/ui/form/index.ts b/apps/www/src/lib/registry/default/ui/form/index.ts
index 30a30a6c..9e3f4796 100644
--- a/apps/www/src/lib/registry/default/ui/form/index.ts
+++ b/apps/www/src/lib/registry/default/ui/form/index.ts
@@ -4,3 +4,4 @@ export { default as FormLabel } from './FormLabel.vue'
 export { default as FormControl } from './FormControl.vue'
 export { default as FormMessage } from './FormMessage.vue'
 export { default as FormDescription } from './FormDescription.vue'
+export { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
diff --git a/apps/www/src/lib/registry/default/ui/form/injectionKeys.ts b/apps/www/src/lib/registry/default/ui/form/injectionKeys.ts
new file mode 100644
index 00000000..b972d367
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/form/injectionKeys.ts
@@ -0,0 +1,4 @@
+import type { InjectionKey } from 'vue'
+
+export const FORM_ITEM_INJECTION_KEY
+  = Symbol() as InjectionKey<string>
diff --git a/apps/www/src/lib/registry/default/ui/form/useFormField.ts b/apps/www/src/lib/registry/default/ui/form/useFormField.ts
index 73eeee3e..885b1e1f 100644
--- a/apps/www/src/lib/registry/default/ui/form/useFormField.ts
+++ b/apps/www/src/lib/registry/default/ui/form/useFormField.ts
@@ -1,6 +1,6 @@
 import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'
 import { inject } from 'vue'
-import { FORM_ITEM_INJECTION_KEY } from './FormItem.vue'
+import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
 
 export function useFormField() {
   const fieldContext = inject(FieldContextKey)
diff --git a/apps/www/src/lib/registry/new-york/ui/form/FormItem.vue b/apps/www/src/lib/registry/new-york/ui/form/FormItem.vue
index ad120be9..444d9013 100644
--- a/apps/www/src/lib/registry/new-york/ui/form/FormItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/form/FormItem.vue
@@ -1,13 +1,7 @@
-<script lang="ts">
-import type { HTMLAttributes, InjectionKey } from 'vue'
-
-export const FORM_ITEM_INJECTION_KEY
-  = Symbol() as InjectionKey<string>
-</script>
-
 <script lang="ts" setup>
-import { provide } from 'vue'
+import { type HTMLAttributes, provide } from 'vue'
 import { useId } from 'radix-vue'
+import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<{
diff --git a/apps/www/src/lib/registry/new-york/ui/form/index.ts b/apps/www/src/lib/registry/new-york/ui/form/index.ts
index e711a38e..00053cf0 100644
--- a/apps/www/src/lib/registry/new-york/ui/form/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/form/index.ts
@@ -4,3 +4,4 @@ export { default as FormLabel } from './FormLabel.vue'
 export { default as FormControl } from './FormControl.vue'
 export { default as FormMessage } from './FormMessage.vue'
 export { default as FormDescription } from './FormDescription.vue'
+export { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
diff --git a/apps/www/src/lib/registry/new-york/ui/form/injectionKeys.ts b/apps/www/src/lib/registry/new-york/ui/form/injectionKeys.ts
new file mode 100644
index 00000000..b972d367
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/form/injectionKeys.ts
@@ -0,0 +1,4 @@
+import type { InjectionKey } from 'vue'
+
+export const FORM_ITEM_INJECTION_KEY
+  = Symbol() as InjectionKey<string>
diff --git a/apps/www/src/lib/registry/new-york/ui/form/useFormField.ts b/apps/www/src/lib/registry/new-york/ui/form/useFormField.ts
index 0aae4207..2da133b8 100644
--- a/apps/www/src/lib/registry/new-york/ui/form/useFormField.ts
+++ b/apps/www/src/lib/registry/new-york/ui/form/useFormField.ts
@@ -1,6 +1,6 @@
 import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'
 import { inject } from 'vue'
-import { FORM_ITEM_INJECTION_KEY } from './FormItem.vue'
+import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
 
 export function useFormField() {
   const fieldContext = inject(FieldContextKey)
diff --git a/apps/www/src/public/registry/index.json b/apps/www/src/public/registry/index.json
index 1fa7d985..d666e2e7 100644
--- a/apps/www/src/public/registry/index.json
+++ b/apps/www/src/public/registry/index.json
@@ -464,6 +464,7 @@
       "ui/form/FormLabel.vue",
       "ui/form/FormMessage.vue",
       "ui/form/index.ts",
+      "ui/form/injectionKeys.ts",
       "ui/form/useFormField.ts"
     ],
     "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/default/form.json b/apps/www/src/public/registry/styles/default/form.json
index 19a29433..95bd829d 100644
--- a/apps/www/src/public/registry/styles/default/form.json
+++ b/apps/www/src/public/registry/styles/default/form.json
@@ -20,7 +20,7 @@
     },
     {
       "name": "FormItem.vue",
-      "content": "<script lang=\"ts\">\nimport type { HTMLAttributes, InjectionKey } from 'vue'\n\nexport const FORM_ITEM_INJECTION_KEY\n  = Symbol() as InjectionKey<string>\n</script>\n\n<script lang=\"ts\" setup>\nimport { provide } from 'vue'\nimport { useId } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n</script>\n\n<template>\n  <div :class=\"cn('space-y-2', props.class)\">\n    <slot />\n  </div>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, provide } from 'vue'\nimport { useId } from 'radix-vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n</script>\n\n<template>\n  <div :class=\"cn('space-y-2', props.class)\">\n    <slot />\n  </div>\n</template>\n"
     },
     {
       "name": "FormLabel.vue",
@@ -32,11 +32,15 @@
     },
     {
       "name": "index.ts",
-      "content": "export { Form, Field as FormField } from 'vee-validate'\nexport { default as FormItem } from './FormItem.vue'\nexport { default as FormLabel } from './FormLabel.vue'\nexport { default as FormControl } from './FormControl.vue'\nexport { default as FormMessage } from './FormMessage.vue'\nexport { default as FormDescription } from './FormDescription.vue'\n"
+      "content": "export { Form, Field as FormField } from 'vee-validate'\nexport { default as FormItem } from './FormItem.vue'\nexport { default as FormLabel } from './FormLabel.vue'\nexport { default as FormControl } from './FormControl.vue'\nexport { default as FormMessage } from './FormMessage.vue'\nexport { default as FormDescription } from './FormDescription.vue'\nexport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n"
+    },
+    {
+      "name": "injectionKeys.ts",
+      "content": "import type { InjectionKey } from 'vue'\n\nexport const FORM_ITEM_INJECTION_KEY\n  = Symbol() as InjectionKey<string>\n"
     },
     {
       "name": "useFormField.ts",
-      "content": "import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'\nimport { inject } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './FormItem.vue'\n\nexport function useFormField() {\n  const fieldContext = inject(FieldContextKey)\n  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)\n\n  const fieldState = {\n    valid: useIsFieldValid(),\n    isDirty: useIsFieldDirty(),\n    isTouched: useIsFieldTouched(),\n    error: useFieldError(),\n  }\n\n  if (!fieldContext)\n    throw new Error('useFormField should be used within <FormField>')\n\n  const { name } = fieldContext\n  const id = fieldItemContext\n\n  return {\n    id,\n    name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n"
+      "content": "import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'\nimport { inject } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nexport function useFormField() {\n  const fieldContext = inject(FieldContextKey)\n  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)\n\n  const fieldState = {\n    valid: useIsFieldValid(),\n    isDirty: useIsFieldDirty(),\n    isTouched: useIsFieldTouched(),\n    error: useFieldError(),\n  }\n\n  if (!fieldContext)\n    throw new Error('useFormField should be used within <FormField>')\n\n  const { name } = fieldContext\n  const id = fieldItemContext\n\n  return {\n    id,\n    name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/new-york/form.json b/apps/www/src/public/registry/styles/new-york/form.json
index e8983508..59f5d278 100644
--- a/apps/www/src/public/registry/styles/new-york/form.json
+++ b/apps/www/src/public/registry/styles/new-york/form.json
@@ -20,7 +20,7 @@
     },
     {
       "name": "FormItem.vue",
-      "content": "<script lang=\"ts\">\nimport type { HTMLAttributes, InjectionKey } from 'vue'\n\nexport const FORM_ITEM_INJECTION_KEY\n  = Symbol() as InjectionKey<string>\n</script>\n\n<script lang=\"ts\" setup>\nimport { provide } from 'vue'\nimport { useId } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n</script>\n\n<template>\n  <div :class=\"cn('space-y-2', props.class)\">\n    <slot />\n  </div>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, provide } from 'vue'\nimport { useId } from 'radix-vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n</script>\n\n<template>\n  <div :class=\"cn('space-y-2', props.class)\">\n    <slot />\n  </div>\n</template>\n"
     },
     {
       "name": "FormLabel.vue",
@@ -32,11 +32,15 @@
     },
     {
       "name": "index.ts",
-      "content": "export { Form, Field as FormField, FieldArray as FormFieldArray } from 'vee-validate'\nexport { default as FormItem } from './FormItem.vue'\nexport { default as FormLabel } from './FormLabel.vue'\nexport { default as FormControl } from './FormControl.vue'\nexport { default as FormMessage } from './FormMessage.vue'\nexport { default as FormDescription } from './FormDescription.vue'\n"
+      "content": "export { Form, Field as FormField, FieldArray as FormFieldArray } from 'vee-validate'\nexport { default as FormItem } from './FormItem.vue'\nexport { default as FormLabel } from './FormLabel.vue'\nexport { default as FormControl } from './FormControl.vue'\nexport { default as FormMessage } from './FormMessage.vue'\nexport { default as FormDescription } from './FormDescription.vue'\nexport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n"
+    },
+    {
+      "name": "injectionKeys.ts",
+      "content": "import type { InjectionKey } from 'vue'\n\nexport const FORM_ITEM_INJECTION_KEY\n  = Symbol() as InjectionKey<string>\n"
     },
     {
       "name": "useFormField.ts",
-      "content": "import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'\nimport { inject } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './FormItem.vue'\n\nexport function useFormField() {\n  const fieldContext = inject(FieldContextKey)\n  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)\n  const fieldState = {\n    valid: useIsFieldValid(),\n    isDirty: useIsFieldDirty(),\n    isTouched: useIsFieldTouched(),\n    error: useFieldError(),\n  }\n\n  if (!fieldContext)\n    throw new Error('useFormField should be used within <FormField>')\n\n  const { name } = fieldContext\n  const id = fieldItemContext\n\n  return {\n    id,\n    name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n"
+      "content": "import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'\nimport { inject } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nexport function useFormField() {\n  const fieldContext = inject(FieldContextKey)\n  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)\n  const fieldState = {\n    valid: useIsFieldValid(),\n    isDirty: useIsFieldDirty(),\n    isTouched: useIsFieldTouched(),\n    error: useFieldError(),\n  }\n\n  if (!fieldContext)\n    throw new Error('useFormField should be used within <FormField>')\n\n  const { name } = fieldContext\n  const id = fieldItemContext\n\n  return {\n    id,\n    name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n"
     }
   ],
   "type": "components:ui"