From 04b533ff54f5e677a9a70785f4d9ad7eb2c33fa5 Mon Sep 17 00:00:00 2001
From: sgfost <46429375+sgfost@users.noreply.github.com>
Date: Wed, 3 May 2023 19:02:14 -0700
Subject: [PATCH] refactor: form/field component renaming

- use more descripting prefixes for form components
- some type/variable renaming
- create src/types.ts for shared types and a `BaseFieldProps` for field
  components to extend
---
 .../src/components/CodebaseListSidebar.vue    | 18 ++++----
 .../src/components/EventEditForm.vue          | 36 ++++++++--------
 frontend-vue3/src/components/FormDemo.vue     | 22 +++++-----
 .../src/components/ProfileEditForm.vue        | 40 +++++++++---------
 .../__tests__/CodebaseSearch.test.ts          | 32 +++++++--------
 .../src/components/form/CheckboxField.vue     | 34 +++++++++++++++
 ...FormDatePicker.vue => DatepickerField.vue} | 22 ++++------
 .../form/{FormError.vue => FieldError.vue}    |  0
 .../form/{FormHelp.vue => FieldHelp.vue}      |  0
 .../form/{FormLabel.vue => FieldLabel.vue}    |  0
 .../src/components/form/FormAlert.vue         | 10 ++---
 .../src/components/form/FormCheckbox.vue      | 41 -------------------
 .../{FormMarkdown.vue => MarkdownField.vue}   | 22 ++++------
 ...FormOrgSearch.vue => ResearchOrgField.vue} | 25 +++++------
 ...mOrgItems.vue => ResearchOrgListField.vue} | 31 ++++++--------
 .../form/{FormSelect.vue => SelectField.vue}  | 26 +++++-------
 .../form/{FormTagger.vue => TaggerField.vue}  | 24 +++++------
 .../form/{FormTextInput.vue => TextField.vue} | 22 ++++------
 .../{FormTextItems.vue => TextListField.vue}  | 23 ++++-------
 .../{FormTextArea.vue => TextareaField.vue}   | 24 +++++------
 frontend-vue3/src/composables/api/ror.ts      | 28 +------------
 frontend-vue3/src/composables/api/tags.ts     |  3 +-
 frontend-vue3/src/types.ts                    | 37 +++++++++++++++++
 23 files changed, 240 insertions(+), 280 deletions(-)
 create mode 100644 frontend-vue3/src/components/form/CheckboxField.vue
 rename frontend-vue3/src/components/form/{FormDatePicker.vue => DatepickerField.vue} (64%)
 rename frontend-vue3/src/components/form/{FormError.vue => FieldError.vue} (100%)
 rename frontend-vue3/src/components/form/{FormHelp.vue => FieldHelp.vue} (100%)
 rename frontend-vue3/src/components/form/{FormLabel.vue => FieldLabel.vue} (100%)
 delete mode 100644 frontend-vue3/src/components/form/FormCheckbox.vue
 rename frontend-vue3/src/components/form/{FormMarkdown.vue => MarkdownField.vue} (61%)
 rename frontend-vue3/src/components/form/{FormOrgSearch.vue => ResearchOrgField.vue} (81%)
 rename frontend-vue3/src/components/form/{FormOrgItems.vue => ResearchOrgListField.vue} (86%)
 rename frontend-vue3/src/components/form/{FormSelect.vue => SelectField.vue} (57%)
 rename frontend-vue3/src/components/form/{FormTagger.vue => TaggerField.vue} (77%)
 rename frontend-vue3/src/components/form/{FormTextInput.vue => TextField.vue} (62%)
 rename frontend-vue3/src/components/form/{FormTextItems.vue => TextListField.vue} (80%)
 rename frontend-vue3/src/components/form/{FormTextArea.vue => TextareaField.vue} (55%)
 create mode 100644 frontend-vue3/src/types.ts

diff --git a/frontend-vue3/src/components/CodebaseListSidebar.vue b/frontend-vue3/src/components/CodebaseListSidebar.vue
index f74d273c7..1532f1e6e 100644
--- a/frontend-vue3/src/components/CodebaseListSidebar.vue
+++ b/frontend-vue3/src/components/CodebaseListSidebar.vue
@@ -7,11 +7,11 @@
   >
     <template #form>
       <form @submit="handleSubmit">
-        <FormTextInput class="mb-3" name="keywords" label="Keywords" @keyup.enter="search" />
-        <FormDatePicker class="mb-3" name="startDate" label="Published After" />
-        <FormDatePicker class="mb-3" name="endDate" label="Published Before" />
-        <FormTagger class="mb-3" name="tags" label="Tags" type="Codebase" />
-        <FormSelect
+        <TextField class="mb-3" name="keywords" label="Keywords" @keyup.enter="search" />
+        <DatepickerField class="mb-3" name="startDate" label="Published After" />
+        <DatepickerField class="mb-3" name="endDate" label="Published Before" />
+        <TaggerField class="mb-3" name="tags" label="Tags" type="Codebase" />
+        <SelectField
           class="mb-3"
           name="peerReviewStatus"
           label="Peer Review Status"
@@ -26,10 +26,10 @@
 import * as yup from "yup";
 import { computed } from "vue";
 import ListSidebar from "@/components/ListSidebar.vue";
-import FormTextInput from "@/components/form/FormTextInput.vue";
-import FormSelect from "@/components/form/FormSelect.vue";
-import FormDatePicker from "@/components/form/FormDatePicker.vue";
-import FormTagger from "@/components/form/FormTagger.vue";
+import TextField from "@/components/form/TextField.vue";
+import SelectField from "@/components/form/SelectField.vue";
+import DatepickerField from "@/components/form/DatepickerField.vue";
+import TaggerField from "@/components/form/TaggerField.vue";
 import { useForm } from "@/composables/form";
 import { useCodebaseAPI } from "@/composables/api/codebase";
 
diff --git a/frontend-vue3/src/components/EventEditForm.vue b/frontend-vue3/src/components/EventEditForm.vue
index 7ef0d7f53..5abde7c54 100644
--- a/frontend-vue3/src/components/EventEditForm.vue
+++ b/frontend-vue3/src/components/EventEditForm.vue
@@ -1,13 +1,13 @@
 <template>
   <form @submit="handleSubmit">
-    <FormTextInput
+    <TextField
       class="mb-3"
       name="title"
       label="Title"
       help="A short title describing the event"
       indicate-required
     />
-    <FormTextInput
+    <TextField
       class="mb-3"
       name="location"
       label="Location"
@@ -16,7 +16,7 @@
     />
     <div class="row">
       <div class="col-6">
-        <FormDatePicker
+        <DatepickerField
           class="mb-3"
           name="start_date"
           label="Start Date"
@@ -26,7 +26,7 @@
         />
       </div>
       <div class="col-6">
-        <FormDatePicker
+        <DatepickerField
           class="mb-3"
           name="end_date"
           label="End Date"
@@ -37,7 +37,7 @@
     </div>
     <div class="row">
       <div class="col-6 d-inline">
-        <FormDatePicker
+        <DatepickerField
           class="mb-3"
           name="early_registration_deadline"
           label="Early Registration Deadline"
@@ -46,7 +46,7 @@
         />
       </div>
       <div class="col-6 d-inline">
-        <FormDatePicker
+        <DatepickerField
           class="mb-3"
           name="registration_deadline"
           label="Registration Deadline"
@@ -56,7 +56,7 @@
         />
       </div>
     </div>
-    <FormDatePicker
+    <DatepickerField
       class="mb-3"
       name="submission_deadline"
       label="Submission Deadline"
@@ -64,14 +64,14 @@
       :min-date="(values.start_date as Date)"
       :max-date="(values.end_date as Date)"
     />
-    <FormMarkdown
+    <MarkdownField
       class="mb-3"
       name="description"
       label="Description"
       help="Detailed information about the event"
       indicate-required
     />
-    <FormMarkdown
+    <MarkdownField
       class="mb-3"
       name="summary"
       label="Summary"
@@ -80,19 +80,19 @@
       indicate-required
     >
       <template #label>
-        <FormLabel label="Summary" id-for="summary" required />
+        <FieldLabel label="Summary" id-for="summary" required />
         <button type="button" class="btn btn-sm btn-link float-end p-0 mb-2" @click="summarize">
           Summarize from Description
         </button>
       </template>
-    </FormMarkdown>
-    <FormTextInput
+    </MarkdownField>
+    <TextField
       class="mb-3"
       name="external_url"
       label="Event website"
       help="Link to a more detailed website for this event"
     />
-    <FormTagger
+    <TaggerField
       class="mb-3"
       name="tags"
       label="Tags"
@@ -108,12 +108,12 @@
 <script setup lang="ts">
 import * as yup from "yup";
 import { computed, onMounted } from "vue";
-import FormTextInput from "@/components/form/FormTextInput.vue";
-import FormMarkdown from "@/components/form/FormMarkdown.vue";
-import FormDatePicker from "@/components/form/FormDatePicker.vue";
-import FormTagger from "@/components/form/FormTagger.vue";
+import TextField from "@/components/form/TextField.vue";
+import MarkdownField from "@/components/form/MarkdownField.vue";
+import DatepickerField from "@/components/form/DatepickerField.vue";
+import TaggerField from "@/components/form/TaggerField.vue";
 import FormAlert from "@/components/form/FormAlert.vue";
-import FormLabel from "@/components/form/FormLabel.vue";
+import FieldLabel from "@/components/form/FieldLabel.vue";
 import { useForm } from "@/composables/form";
 import { useEventAPI } from "@/composables/api/event";
 
diff --git a/frontend-vue3/src/components/FormDemo.vue b/frontend-vue3/src/components/FormDemo.vue
index d70e2913c..2a0c8c9b9 100644
--- a/frontend-vue3/src/components/FormDemo.vue
+++ b/frontend-vue3/src/components/FormDemo.vue
@@ -1,11 +1,11 @@
 <template>
   <form @submit="handleSubmit">
-    <FormTextInput class="mb-3" name="text" label="Text Input" />
-    <FormTextInput class="mb-3" name="email" label="Email" />
-    <FormCheckbox class="mb-3" name="terms" label="Terms and Conditions" />
-    <FormSelect class="mb-3" name="number" label="Your Number" :options="numberOptions" />
-    <FormDatePicker class="mb-3" name="date" label="Date" />
-    <FormTagger class="mb-3" name="tags" label="Tags" />
+    <TextField class="mb-3" name="text" label="Text Input" />
+    <TextField class="mb-3" name="email" label="Email" />
+    <CheckboxField class="mb-3" name="terms" label="Terms and Conditions" />
+    <SelectField class="mb-3" name="number" label="Your Number" :options="numberOptions" />
+    <DatepickerField class="mb-3" name="date" label="Date" />
+    <TaggerField class="mb-3" name="tags" label="Tags" />
     <button type="submit" class="mb-3 btn btn-primary">Submit</button>
   </form>
 </template>
@@ -13,11 +13,11 @@
 <script setup lang="ts">
 import * as yup from "yup";
 import { useForm } from "@/composables/form";
-import FormTextInput from "@/components/form/FormTextInput.vue";
-import FormSelect from "@/components/form/FormSelect.vue";
-import FormCheckbox from "@/components/form/FormCheckbox.vue";
-import FormDatePicker from "@/components/form/FormDatePicker.vue";
-import FormTagger from "@/components/form/FormTagger.vue";
+import TextField from "@/components/form/TextField.vue";
+import SelectField from "@/components/form/SelectField.vue";
+import CheckboxField from "@/components/form/CheckboxField.vue";
+import DatepickerField from "@/components/form/DatepickerField.vue";
+import TaggerField from "@/components/form/TaggerField.vue";
 
 const numberOptions = [
   { value: 1, label: "One" },
diff --git a/frontend-vue3/src/components/ProfileEditForm.vue b/frontend-vue3/src/components/ProfileEditForm.vue
index 658d68ac8..7cdaa671b 100644
--- a/frontend-vue3/src/components/ProfileEditForm.vue
+++ b/frontend-vue3/src/components/ProfileEditForm.vue
@@ -60,7 +60,7 @@
             </span>
           </li>
           <li class="list-group-item">
-            <FormCheckbox
+            <CheckboxField
               :required="false"
               name="full_member"
               :errorMsgs="errors.full_member"
@@ -75,7 +75,7 @@
                   of CoMSES Net Full Membership.
                 </div>
               </template>
-            </FormCheckbox>
+            </CheckboxField>
           </li>
         </ul>
       </div>
@@ -83,65 +83,65 @@
 
     <div class="row">
       <div class="col-6">
-        <FormTextInput class="mb-3" name="given_name" label="First Name" indicate-required />
+        <TextField class="mb-3" name="given_name" label="First Name" indicate-required />
       </div>
       <div class="col-6">
-        <FormTextInput class="mb-3" name="family_name" label="Last Name" indicate-required />
+        <TextField class="mb-3" name="family_name" label="Last Name" indicate-required />
       </div>
     </div>
-    <FormTextInput
+    <TextField
       class="mb-3"
       name="email"
       label="Email"
       help="Email changes require reverification of your new email address by acknowledging a confirmation email"
       indicate-required
     />
-    <FormMarkdown
+    <MarkdownField
       class="mb-3"
       name="bio"
       label="Bio"
       help="A brief description of your research career"
       :rows="5"
     />
-    <FormMarkdown
+    <MarkdownField
       class="mb-3"
       name="research_interests"
       label="Research Interests"
       help="A brief description of your research interests"
       :rows="5"
     />
-    <FormTextInput
+    <TextField
       class="mb-3"
       name="personal_url"
       label="Personal URL"
       help="A link to your personal website"
     />
-    <FormTextInput
+    <TextField
       class="mb-3"
       name="professional_url"
       label="Professional URL"
       help="A link to your institutional or professional profile page"
     />
-    <FormSelect
+    <SelectField
       class="mb-3"
       name="industry"
       label="Industry"
       help="Your primary field of work"
       :options="industryOptions"
     />
-    <FormOrgItems
+    <ResearchOrgListField
       class="mb-3"
       name="affiliations"
       label="Affiliations"
       help="A list of organizations that you are affiliated with"
     />
-    <FormTextItems
+    <TextListField
       class="mb-3"
       name="degrees"
       label="Degrees"
       help="A list of degrees earned and their associated institutions: e.g., Ph.D., Environmental Social Science, Arizona State University"
     />
-    <FormTagger class="mb-3" name="tags" label="Keywords" type="Profile" />
+    <TaggerField class="mb-3" name="tags" label="Keywords" type="Profile" />
     <FormAlert :validation-errors="Object.values(errors)" :server-errors="serverErrors" />
     <button type="submit" class="btn btn-primary mb-3" :disabled="isLoading">Save</button>
   </form>
@@ -150,13 +150,13 @@
 <script setup lang="ts">
 import * as yup from "yup";
 import { onMounted } from "vue";
-import FormCheckbox from "@/components/form/FormCheckbox.vue";
-import FormTextInput from "@/components/form/FormTextInput.vue";
-import FormTextItems from "@/components/form/FormTextItems.vue";
-import FormSelect from "@/components/form/FormSelect.vue";
-import FormMarkdown from "@/components/form/FormMarkdown.vue";
-import FormTagger from "@/components/form/FormTagger.vue";
-import FormOrgItems from "@/components/form/FormOrgItems.vue";
+import CheckboxField from "@/components/form/CheckboxField.vue";
+import TextField from "@/components/form/TextField.vue";
+import TextListField from "@/components/form/TextListField.vue";
+import SelectField from "@/components/form/SelectField.vue";
+import MarkdownField from "@/components/form/MarkdownField.vue";
+import TaggerField from "@/components/form/TaggerField.vue";
+import ResearchOrgListField from "@/components/form/ResearchOrgListField.vue";
 import FormAlert from "@/components/form/FormAlert.vue";
 import { useForm } from "@/composables/form";
 import { useProfileAPI } from "@/composables/api/profile";
diff --git a/frontend-vue3/src/components/__tests__/CodebaseSearch.test.ts b/frontend-vue3/src/components/__tests__/CodebaseSearch.test.ts
index fb948d5ae..22527a802 100644
--- a/frontend-vue3/src/components/__tests__/CodebaseSearch.test.ts
+++ b/frontend-vue3/src/components/__tests__/CodebaseSearch.test.ts
@@ -1,10 +1,10 @@
 import { mount } from "@vue/test-utils";
 import CodebaseListSidebar from "@/components/CodebaseListSidebar.vue";
 import ListSidebar from "@/components/ListSidebar.vue";
-import FormTextInput from "@/components/form/FormTextInput.vue";
-import FormDatePicker from "@/components/form/FormDatePicker.vue";
-import FormTagger from "@/components/form/FormTagger.vue";
-import FormSelect from "@/components/form/FormSelect.vue";
+import TextField from "@/components/form/TextField.vue";
+import DatepickerField from "@/components/form/DatepickerField.vue";
+import TaggerField from "@/components/form/TaggerField.vue";
+import SelectField from "@/components/form/SelectField.vue";
 
 describe("CodebaseListSidebar.vue", () => {
   it("renders the form field components", async () => {
@@ -13,27 +13,27 @@ describe("CodebaseListSidebar.vue", () => {
     const baseSearch = wrapper.findComponent(ListSidebar);
     expect(baseSearch.exists()).toBe(true);
 
-    const formTextInput = wrapper.findComponent(FormTextInput);
-    expect(formTextInput.exists()).toBe(true);
+    const TextField = wrapper.findComponent(TextField);
+    expect(TextField.exists()).toBe(true);
 
-    const anyDatePicker = wrapper.findComponent(FormDatePicker);
+    const anyDatePicker = wrapper.findComponent(DatepickerField);
     expect(anyDatePicker.exists()).toBe(true);
 
-    const formTagger = wrapper.findComponent(FormTagger);
-    expect(formTagger.exists()).toBe(true);
+    const TaggerField = wrapper.findComponent(TaggerField);
+    expect(TaggerField.exists()).toBe(true);
 
-    const formSelect = wrapper.findComponent(FormSelect);
-    expect(formSelect.exists()).toBe(true);
-    expect(formSelect.props("options").length).toEqual(3);
+    const SelectField = wrapper.findComponent(SelectField);
+    expect(SelectField.exists()).toBe(true);
+    expect(SelectField.props("options").length).toEqual(3);
   });
 
   it("updates the query computed value based on form inputs", async () => {
     const wrapper = mount(CodebaseListSidebar);
 
-    const formTextInput = wrapper.findComponent(FormTextInput);
-    const formTextInputElement = formTextInput.find("input");
-    formTextInputElement.element.value = "test keyword";
-    await formTextInputElement.trigger("input");
+    const TextField = wrapper.findComponent(TextField);
+    const TextFieldElement = TextField.find("input");
+    TextFieldElement.element.value = "test keyword";
+    await TextFieldElement.trigger("input");
     await wrapper.vm.$nextTick();
     const baseSearch = wrapper.findComponent(ListSidebar);
     const searchUrl = baseSearch.props("searchUrl");
diff --git a/frontend-vue3/src/components/form/CheckboxField.vue b/frontend-vue3/src/components/form/CheckboxField.vue
new file mode 100644
index 000000000..ee266d58c
--- /dev/null
+++ b/frontend-vue3/src/components/form/CheckboxField.vue
@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <div class="form-check">
+      <input
+        v-model="value"
+        type="checkbox"
+        :id="id"
+        v-bind="attrs"
+        :class="{ 'form-check-input': true, 'is-invalid': error }"
+      />
+      <FieldLabel v-if="label" :label="label" :id-for="id" :required="required" />
+    </div>
+    <slot name="help">
+      <FieldHelp v-if="help" :help="help" :id-for="id" />
+    </slot>
+    <slot name="error">
+      <FieldError v-if="error" :error="error" :id-for="id" />
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useField } from "@/composables/form";
+import FieldLabel from "@/components/form/FieldLabel.vue";
+import FieldHelp from "@/components/form/FieldHelp.vue";
+import FieldError from "@/components/form/FieldError.vue";
+import type { BaseFieldProps } from "@/types";
+
+const props = withDefaults(defineProps<BaseFieldProps>(), {
+  help: "",
+});
+
+const { id, value, attrs, error } = useField<boolean>(props, "name");
+</script>
diff --git a/frontend-vue3/src/components/form/FormDatePicker.vue b/frontend-vue3/src/components/form/DatepickerField.vue
similarity index 64%
rename from frontend-vue3/src/components/form/FormDatePicker.vue
rename to frontend-vue3/src/components/form/DatepickerField.vue
index 95e09d42c..6bed3508b 100644
--- a/frontend-vue3/src/components/form/FormDatePicker.vue
+++ b/frontend-vue3/src/components/form/DatepickerField.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <slot name="label">
-      <FormLabel v-if="label" :label="label" :id-for="id" :required="indicateRequired" />
+      <FieldLabel v-if="label" :label="label" :id-for="id" :required="required" />
     </slot>
     <FormPlaceholder v-if="showPlaceholder" />
     <VueDatePicker
@@ -21,10 +21,10 @@
       :max-date="maxDate"
     ></VueDatePicker>
     <slot name="help">
-      <FormHelp v-if="help" :help="help" :id-for="id" />
+      <FieldHelp v-if="help" :help="help" :id-for="id" />
     </slot>
     <slot name="error">
-      <FormError v-if="error" :error="error" :id-for="id" />
+      <FieldError v-if="error" :error="error" :id-for="id" />
     </slot>
   </div>
 </template>
@@ -33,22 +33,18 @@
 import { inject } from "vue";
 import VueDatePicker from "@vuepic/vue-datepicker";
 import { useField } from "@/composables/form";
-import FormLabel from "@/components/form/FormLabel.vue";
-import FormHelp from "@/components/form/FormHelp.vue";
-import FormError from "@/components/form/FormError.vue";
+import FieldLabel from "@/components/form/FieldLabel.vue";
+import FieldHelp from "@/components/form/FieldHelp.vue";
+import FieldError from "@/components/form/FieldError.vue";
 import FormPlaceholder from "@/components/form/FormPlaceholder.vue";
+import type { BaseFieldProps } from "@/types";
 
-export interface DatePickerProps {
-  name: string;
-  label?: string;
-  help?: string;
-  placeholder?: string;
-  indicateRequired?: boolean;
+interface DatepickerFieldProps extends BaseFieldProps {
   minDate?: Date;
   maxDate?: Date;
 }
 
-const props = defineProps<DatePickerProps>();
+const props = defineProps<DatepickerFieldProps>();
 
 const { id, value, attrs, error } = useField<Date>(props, "name");
 
diff --git a/frontend-vue3/src/components/form/FormError.vue b/frontend-vue3/src/components/form/FieldError.vue
similarity index 100%
rename from frontend-vue3/src/components/form/FormError.vue
rename to frontend-vue3/src/components/form/FieldError.vue
diff --git a/frontend-vue3/src/components/form/FormHelp.vue b/frontend-vue3/src/components/form/FieldHelp.vue
similarity index 100%
rename from frontend-vue3/src/components/form/FormHelp.vue
rename to frontend-vue3/src/components/form/FieldHelp.vue
diff --git a/frontend-vue3/src/components/form/FormLabel.vue b/frontend-vue3/src/components/form/FieldLabel.vue
similarity index 100%
rename from frontend-vue3/src/components/form/FormLabel.vue
rename to frontend-vue3/src/components/form/FieldLabel.vue
diff --git a/frontend-vue3/src/components/form/FormAlert.vue b/frontend-vue3/src/components/form/FormAlert.vue
index dcd9eddfa..4930dd43a 100644
--- a/frontend-vue3/src/components/form/FormAlert.vue
+++ b/frontend-vue3/src/components/form/FormAlert.vue
@@ -2,11 +2,11 @@
   <div class="card border-light" v-if="validationErrors.length > 0 || serverErrors.length > 0">
     <div class="card-body px-0 py-0">
       <div
-        v-for="m in serverErrors.concat(validationErrors)"
-        :key="m"
+        v-for="message in serverErrors.concat(validationErrors)"
+        :key="message"
         class="alert alert-danger alert-dismissible fade show"
       >
-        {{ m }}
+        {{ message }}
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" />
       </div>
     </div>
@@ -14,10 +14,10 @@
 </template>
 
 <script setup lang="ts">
-export interface CheckboxProps {
+export interface AlertProps {
   validationErrors: string[];
   serverErrors: string[];
 }
 
-const props = defineProps<CheckboxProps>();
+const props = defineProps<AlertProps>();
 </script>
diff --git a/frontend-vue3/src/components/form/FormCheckbox.vue b/frontend-vue3/src/components/form/FormCheckbox.vue
deleted file mode 100644
index bf3a7c226..000000000
--- a/frontend-vue3/src/components/form/FormCheckbox.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-  <div>
-    <div class="form-check">
-      <input
-        v-model="value"
-        type="checkbox"
-        :id="id"
-        v-bind="attrs"
-        :class="{ 'form-check-input': true, 'is-invalid': error }"
-      />
-      <FormLabel v-if="label" :label="label" :id-for="id" :required="indicateRequired" />
-    </div>
-    <slot name="help">
-      <FormHelp v-if="help" :help="help" :id-for="id" />
-    </slot>
-    <slot name="error">
-      <FormError v-if="error" :error="error" :id-for="id" />
-    </slot>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useField } from "@/composables/form";
-import FormLabel from "@/components/form/FormLabel.vue";
-import FormHelp from "@/components/form/FormHelp.vue";
-import FormError from "@/components/form/FormError.vue";
-
-export interface CheckboxProps {
-  name: string;
-  label?: string;
-  help?: string;
-  placeholder?: string;
-  indicateRequired?: boolean;
-}
-
-const props = withDefaults(defineProps<CheckboxProps>(), {
-  help: "",
-});
-
-const { id, value, attrs, error } = useField<boolean>(props, "name");
-</script>
diff --git a/frontend-vue3/src/components/form/FormMarkdown.vue b/frontend-vue3/src/components/form/MarkdownField.vue
similarity index 61%
rename from frontend-vue3/src/components/form/FormMarkdown.vue
rename to frontend-vue3/src/components/form/MarkdownField.vue
index d486ddcec..7396a7504 100644
--- a/frontend-vue3/src/components/form/FormMarkdown.vue
+++ b/frontend-vue3/src/components/form/MarkdownField.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <slot name="label">
-      <FormLabel v-if="label" :label="label" :id-for="id" :required="indicateRequired" />
+      <FieldLabel v-if="label" :label="label" :id-for="id" :required="required" />
     </slot>
     <FormPlaceholder v-if="showPlaceholder" :rows="rows" />
     <textarea
@@ -20,32 +20,28 @@
       tabindex="-1"
     />
     <slot name="help">
-      <FormHelp v-if="help" :help="help" :id-for="id" />
+      <FieldHelp v-if="help" :help="help" :id-for="id" />
     </slot>
     <slot name="error">
-      <FormError v-if="error" :error="error" :id-for="id" />
+      <FieldError v-if="error" :error="error" :id-for="id" />
     </slot>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useField } from "@/composables/form";
-import FormLabel from "@/components/form/FormLabel.vue";
-import FormHelp from "@/components/form/FormHelp.vue";
-import FormError from "@/components/form/FormError.vue";
+import FieldLabel from "@/components/form/FieldLabel.vue";
+import FieldHelp from "@/components/form/FieldHelp.vue";
+import FieldError from "@/components/form/FieldError.vue";
 import FormPlaceholder from "@/components/form/FormPlaceholder.vue";
 import { inject } from "vue";
+import type { BaseFieldProps } from "@/types";
 
-export interface MarkdownProps {
-  name: string;
-  label?: string;
-  help?: string;
-  placeholder?: string;
-  indicateRequired?: boolean;
+interface MarkdownFieldProps extends BaseFieldProps {
   rows?: number;
 }
 
-const props = withDefaults(defineProps<MarkdownProps>(), {
+const props = withDefaults(defineProps<MarkdownFieldProps>(), {
   rows: 10,
 });
 
diff --git a/frontend-vue3/src/components/form/FormOrgSearch.vue b/frontend-vue3/src/components/form/ResearchOrgField.vue
similarity index 81%
rename from frontend-vue3/src/components/form/FormOrgSearch.vue
rename to frontend-vue3/src/components/form/ResearchOrgField.vue
index 22b9202e5..facb17754 100644
--- a/frontend-vue3/src/components/form/FormOrgSearch.vue
+++ b/frontend-vue3/src/components/form/ResearchOrgField.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <slot name="label">
-      <FormLabel v-if="label" :label="label" :id-for="id" :required="required" />
+      <FieldLabel v-if="label" :label="label" :id-for="id" :required="required" />
     </slot>
     <FormPlaceholder v-if="showPlaceholder" />
     <VueMultiSelect
@@ -54,10 +54,10 @@
       </template>
     </VueMultiSelect>
     <slot name="help">
-      <FormHelp v-if="help" :help="help" :id-for="id" />
+      <FieldHelp v-if="help" :help="help" :id-for="id" />
     </slot>
     <slot name="error">
-      <FormError v-if="error" :error="error" :id-for="id" />
+      <FieldError v-if="error" :error="error" :id-for="id" />
     </slot>
   </div>
 </template>
@@ -67,23 +67,20 @@ import { ref, inject } from "vue";
 import VueMultiSelect from "vue-multiselect";
 import { useDebounceFn } from "@vueuse/core";
 import { useField } from "@/composables/form";
-import { useRORAPI, type Organization } from "@/composables/api/ror";
-import FormLabel from "@/components/form/FormLabel.vue";
-import FormHelp from "@/components/form/FormHelp.vue";
-import FormError from "@/components/form/FormError.vue";
+import { useRORAPI } from "@/composables/api/ror";
+import FieldLabel from "@/components/form/FieldLabel.vue";
+import FieldHelp from "@/components/form/FieldHelp.vue";
+import FieldError from "@/components/form/FieldError.vue";
 import FormPlaceholder from "@/components/form/FormPlaceholder.vue";
+import type { Organization } from "@/types";
+import type { BaseFieldProps } from "@/types";
 
-export interface OrgSearchProps {
-  name: string;
-  label?: string;
-  help?: string;
-  placeholder?: string;
-  required?: boolean;
+interface ResearchOrgFieldProps extends BaseFieldProps {
   disabled?: boolean;
   clearOnSelect: boolean;
 }
 
-const props = withDefaults(defineProps<OrgSearchProps>(), {
+const props = withDefaults(defineProps<ResearchOrgFieldProps>(), {
   placeholder: "Type to find your organization",
   disabled: false,
   clearOnSelect: false,
diff --git a/frontend-vue3/src/components/form/FormOrgItems.vue b/frontend-vue3/src/components/form/ResearchOrgListField.vue
similarity index 86%
rename from frontend-vue3/src/components/form/FormOrgItems.vue
rename to frontend-vue3/src/components/form/ResearchOrgListField.vue
index 48f37601d..c41228a20 100644
--- a/frontend-vue3/src/components/form/FormOrgItems.vue
+++ b/frontend-vue3/src/components/form/ResearchOrgListField.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <slot name="label">
-      <FormLabel v-if="label" :label="label" :id-for="id" :required="indicateRequired" />
+      <FieldLabel v-if="label" :label="label" :id-for="id" :required="required" />
     </slot>
     <div class="form-check-inline ms-3">
       <label class="form-check-label" :for="`${id}-custom-input-check`">
@@ -42,13 +42,13 @@
           <small>Press enter to add</small>
         </button>
       </div>
-      <FormError
+      <FieldError
         v-if="localErrors.name || localErrors.url"
         :error="localErrorMessage"
         :id-for="id"
       />
     </span>
-    <FormOrgSearch v-else name="organization" :clear-on-select="true" @select="create" />
+    <ResearchOrgField v-else name="organization" :clear-on-select="true" @select="create" />
     <Sortable :list="value" :item-key="item => item" @end="sort($event)">
       <template #item="{ element, index }">
         <div :key="element" class="my-1 input-group">
@@ -81,10 +81,10 @@
       </template>
     </Sortable>
     <slot name="help">
-      <FormHelp v-if="help" :help="help" :id-for="id" />
+      <FieldHelp v-if="help" :help="help" :id-for="id" />
     </slot>
     <slot name="error">
-      <FormError v-if="error" :error="error" :id-for="id" />
+      <FieldError v-if="error" :error="error" :id-for="id" />
     </slot>
   </div>
 </template>
@@ -95,22 +95,15 @@ import { string } from "yup";
 import { Sortable } from "sortablejs-vue3";
 import type { SortableEvent } from "sortablejs";
 import { useField } from "@/composables/form";
-import FormOrgSearch from "@/components/form/FormOrgSearch.vue";
-import FormLabel from "@/components/form/FormLabel.vue";
-import FormHelp from "@/components/form/FormHelp.vue";
-import FormError from "@/components/form/FormError.vue";
+import ResearchOrgField from "@/components/form/ResearchOrgField.vue";
+import FieldLabel from "@/components/form/FieldLabel.vue";
+import FieldHelp from "@/components/form/FieldHelp.vue";
+import FieldError from "@/components/form/FieldError.vue";
 import FormPlaceholder from "@/components/form/FormPlaceholder.vue";
-import type { Organization } from "@/composables/api/ror";
+import type { Organization } from "@/types";
+import type { BaseFieldProps } from "@/types";
 
-export interface TextItemsProps {
-  name: string;
-  label?: string;
-  help?: string;
-  placeholder?: string;
-  indicateRequired?: boolean;
-}
-
-const props = defineProps<TextItemsProps>();
+const props = defineProps<BaseFieldProps>();
 
 onMounted(() => {
   if (!value.value) {
diff --git a/frontend-vue3/src/components/form/FormSelect.vue b/frontend-vue3/src/components/form/SelectField.vue
similarity index 57%
rename from frontend-vue3/src/components/form/FormSelect.vue
rename to frontend-vue3/src/components/form/SelectField.vue
index 564f2757c..af13b453b 100644
--- a/frontend-vue3/src/components/form/FormSelect.vue
+++ b/frontend-vue3/src/components/form/SelectField.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <slot name="label">
-      <FormLabel v-if="label" :label="label" :id-for="id" :required="indicateRequired" />
+      <FieldLabel v-if="label" :label="label" :id-for="id" :required="required" />
     </slot>
     <FormPlaceholder v-if="showPlaceholder" />
     <select
@@ -21,34 +21,28 @@
       </option>
     </select>
     <slot name="help">
-      <FormHelp v-if="help" :help="help" :id-for="id" />
+      <FieldHelp v-if="help" :help="help" :id-for="id" />
     </slot>
     <slot name="error">
-      <FormError v-if="error" :error="error" :id-for="id" />
+      <FieldError v-if="error" :error="error" :id-for="id" />
     </slot>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useField } from "@/composables/form";
-import FormLabel from "@/components/form/FormLabel.vue";
-import FormHelp from "@/components/form/FormHelp.vue";
-import FormError from "@/components/form/FormError.vue";
+import FieldLabel from "@/components/form/FieldLabel.vue";
+import FieldHelp from "@/components/form/FieldHelp.vue";
+import FieldError from "@/components/form/FieldError.vue";
 import FormPlaceholder from "@/components/form/FormPlaceholder.vue";
 import { inject } from "vue";
+import type { BaseFieldProps } from "@/types";
 
-export type SelectOptions = { value: any; label: string }[];
-
-export interface SelectProps {
-  name: string;
-  label?: string;
-  help?: string;
-  placeholder?: string;
-  indicateRequired?: boolean;
-  options: SelectOptions;
+interface SelectFieldProps extends BaseFieldProps {
+  options: { value: any; label: string }[];
 }
 
-const props = defineProps<SelectProps>();
+const props = defineProps<SelectFieldProps>();
 
 const { id, value, attrs, error } = useField<any>(props, "name");
 
diff --git a/frontend-vue3/src/components/form/FormTagger.vue b/frontend-vue3/src/components/form/TaggerField.vue
similarity index 77%
rename from frontend-vue3/src/components/form/FormTagger.vue
rename to frontend-vue3/src/components/form/TaggerField.vue
index 11db662d3..23ad8d4a5 100644
--- a/frontend-vue3/src/components/form/FormTagger.vue
+++ b/frontend-vue3/src/components/form/TaggerField.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <slot name="label">
-      <FormLabel v-if="label" :label="label" :id-for="id" :required="indicateRequired" />
+      <FieldLabel v-if="label" :label="label" :id-for="id" :required="required" />
     </slot>
     <FormPlaceholder v-if="showPlaceholder" />
     <VueMultiSelect
@@ -39,10 +39,10 @@
       <template #noOptions>No matching tags found.</template>
     </VueMultiSelect>
     <slot name="help">
-      <FormHelp v-if="help" :help="help" :id-for="id" />
+      <FieldHelp v-if="help" :help="help" :id-for="id" />
     </slot>
     <slot name="error">
-      <FormError v-if="error" :error="error" :id-for="id" />
+      <FieldError v-if="error" :error="error" :id-for="id" />
     </slot>
   </div>
 </template>
@@ -51,23 +51,19 @@
 import { ref, onBeforeMount, inject } from "vue";
 import VueMultiSelect from "vue-multiselect";
 import { useField } from "@/composables/form";
-import FormLabel from "@/components/form/FormLabel.vue";
-import FormHelp from "@/components/form/FormHelp.vue";
-import FormError from "@/components/form/FormError.vue";
+import FieldLabel from "@/components/form/FieldLabel.vue";
+import FieldHelp from "@/components/form/FieldHelp.vue";
+import FieldError from "@/components/form/FieldError.vue";
 import FormPlaceholder from "@/components/form/FormPlaceholder.vue";
 import { useTagsAPI } from "@/composables/api/tags";
-import type { Tags, TagType } from "@/composables/api/tags";
+import type { Tags, TagType } from "@/types";
+import type { BaseFieldProps } from "@/types";
 
-export interface TaggerProps {
-  name: string;
-  label?: string;
-  help?: string;
-  placeholder?: string;
-  indicateRequired?: boolean;
+interface TaggerFieldProps extends BaseFieldProps {
   type?: TagType;
 }
 
-const props = withDefaults(defineProps<TaggerProps>(), {
+const props = withDefaults(defineProps<TaggerFieldProps>(), {
   type: "",
   placeholder: "Type to add tags",
 });
diff --git a/frontend-vue3/src/components/form/FormTextInput.vue b/frontend-vue3/src/components/form/TextField.vue
similarity index 62%
rename from frontend-vue3/src/components/form/FormTextInput.vue
rename to frontend-vue3/src/components/form/TextField.vue
index a4f7f747a..2bb5ffd36 100644
--- a/frontend-vue3/src/components/form/FormTextInput.vue
+++ b/frontend-vue3/src/components/form/TextField.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <slot name="label">
-      <FormLabel v-if="label" :label="label" :id-for="id" :required="indicateRequired" />
+      <FieldLabel v-if="label" :label="label" :id-for="id" :required="required" />
     </slot>
     <FormPlaceholder v-if="showPlaceholder" />
     <input
@@ -13,10 +13,10 @@
       :class="{ 'form-control': true, 'is-invalid': error }"
     />
     <slot name="help">
-      <FormHelp v-if="help" :help="help" :id-for="id" />
+      <FieldHelp v-if="help" :help="help" :id-for="id" />
     </slot>
     <slot name="error">
-      <FormError v-if="error" :error="error" :id-for="id" />
+      <FieldError v-if="error" :error="error" :id-for="id" />
     </slot>
   </div>
 </template>
@@ -24,23 +24,19 @@
 <script setup lang="ts">
 import { inject } from "vue";
 import { useField } from "@/composables/form";
-import FormLabel from "@/components/form/FormLabel.vue";
-import FormHelp from "@/components/form/FormHelp.vue";
-import FormError from "@/components/form/FormError.vue";
+import FieldLabel from "@/components/form/FieldLabel.vue";
+import FieldHelp from "@/components/form/FieldHelp.vue";
+import FieldError from "@/components/form/FieldError.vue";
 import FormPlaceholder from "@/components/form/FormPlaceholder.vue";
+import type { BaseFieldProps } from "@/types";
 
-export interface TextInputProps {
-  name: string;
-  label?: string;
-  help?: string;
-  placeholder?: string;
-  indicateRequired?: boolean;
+interface TextFieldProps extends BaseFieldProps {
   // generally it is better to leave type="text" for url/email/etc. inputs so that the browser
   // does not perform any validation before the form/yup does leading to visual inconsistency
   type?: "text" | "email" | "password" | "number" | "tel" | "url" | "search";
 }
 
-const props = withDefaults(defineProps<TextInputProps>(), {
+const props = withDefaults(defineProps<TextFieldProps>(), {
   type: "text",
 });
 
diff --git a/frontend-vue3/src/components/form/FormTextItems.vue b/frontend-vue3/src/components/form/TextListField.vue
similarity index 80%
rename from frontend-vue3/src/components/form/FormTextItems.vue
rename to frontend-vue3/src/components/form/TextListField.vue
index 866619ba1..d0c144a77 100644
--- a/frontend-vue3/src/components/form/FormTextItems.vue
+++ b/frontend-vue3/src/components/form/TextListField.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <slot name="label">
-      <FormLabel v-if="label" :label="label" :id-for="id" :required="indicateRequired" />
+      <FieldLabel v-if="label" :label="label" :id-for="id" :required="required" />
     </slot>
     <FormPlaceholder v-if="showPlaceholder" />
     <div v-else class="input-group">
@@ -37,10 +37,10 @@
       </template>
     </Sortable>
     <slot name="help">
-      <FormHelp v-if="help" :help="help" :id-for="id" />
+      <FieldHelp v-if="help" :help="help" :id-for="id" />
     </slot>
     <slot name="error">
-      <FormError v-if="error" :error="error" :id-for="id" />
+      <FieldError v-if="error" :error="error" :id-for="id" />
     </slot>
   </div>
 </template>
@@ -50,20 +50,13 @@ import { inject, ref, onMounted } from "vue";
 import { Sortable } from "sortablejs-vue3";
 import type { SortableEvent } from "sortablejs";
 import { useField } from "@/composables/form";
-import FormLabel from "@/components/form/FormLabel.vue";
-import FormHelp from "@/components/form/FormHelp.vue";
-import FormError from "@/components/form/FormError.vue";
+import FieldLabel from "@/components/form/FieldLabel.vue";
+import FieldHelp from "@/components/form/FieldHelp.vue";
+import FieldError from "@/components/form/FieldError.vue";
 import FormPlaceholder from "@/components/form/FormPlaceholder.vue";
+import type { BaseFieldProps } from "@/types";
 
-export interface TextItemsProps {
-  name: string;
-  label?: string;
-  help?: string;
-  placeholder?: string;
-  indicateRequired?: boolean;
-}
-
-const props = defineProps<TextItemsProps>();
+const props = defineProps<BaseFieldProps>();
 
 onMounted(() => {
   if (!value.value) {
diff --git a/frontend-vue3/src/components/form/FormTextArea.vue b/frontend-vue3/src/components/form/TextareaField.vue
similarity index 55%
rename from frontend-vue3/src/components/form/FormTextArea.vue
rename to frontend-vue3/src/components/form/TextareaField.vue
index f053b62a0..ba25397d0 100644
--- a/frontend-vue3/src/components/form/FormTextArea.vue
+++ b/frontend-vue3/src/components/form/TextareaField.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <slot name="label">
-      <FormLabel v-if="label" :label="label" :id-for="id" :required="indicateRequired" />
+      <FieldLabel v-if="label" :label="label" :id-for="id" :required="required" />
     </slot>
     <FormPlaceholder v-if="showPlaceholder" :rows="rows" />
     <textarea
@@ -13,32 +13,28 @@
       :class="{ 'form-control': true, 'is-invalid': error }"
     />
     <slot name="help">
-      <FormHelp v-if="help" :help="help" :id-for="id" />
+      <FieldHelp v-if="help" :help="help" :id-for="id" />
     </slot>
     <slot name="error">
-      <FormError v-if="error" :error="error" :id-for="id" />
+      <FieldError v-if="error" :error="error" :id-for="id" />
     </slot>
   </div>
 </template>
 
 <script setup lang="ts">
+import { inject } from "vue";
 import { useField } from "@/composables/form";
-import FormLabel from "@/components/form/FormLabel.vue";
-import FormHelp from "@/components/form/FormHelp.vue";
-import FormError from "@/components/form/FormError.vue";
+import FieldLabel from "@/components/form/FieldLabel.vue";
+import FieldHelp from "@/components/form/FieldHelp.vue";
+import FieldError from "@/components/form/FieldError.vue";
 import FormPlaceholder from "@/components/form/FormPlaceholder.vue";
-import { inject } from "vue";
+import type { BaseFieldProps } from "@/types";
 
-export interface TextAreaProps {
-  name: string;
-  label?: string;
-  help?: string;
-  placeholder?: string;
-  indicateRequired?: boolean;
+interface TextareaFieldProps extends BaseFieldProps {
   rows?: number;
 }
 
-const props = withDefaults(defineProps<TextAreaProps>(), {
+const props = withDefaults(defineProps<TextareaFieldProps>(), {
   rows: 10,
 });
 
diff --git a/frontend-vue3/src/composables/api/ror.ts b/frontend-vue3/src/composables/api/ror.ts
index 19f341dd7..f0e9ef74a 100644
--- a/frontend-vue3/src/composables/api/ror.ts
+++ b/frontend-vue3/src/composables/api/ror.ts
@@ -1,32 +1,6 @@
 import { toRefs } from "vue";
 import { useAxios } from "@/composables/api/axios";
-
-interface RORItem {
-  id: string;
-  name: string;
-  email_address?: string;
-  ip_addresses?: any[];
-  established?: number | null;
-  types: string[];
-  relationships: any[];
-  addresses: any[];
-  links: string[];
-  aliases: string[];
-  acronyms: string[];
-  status: "Active" | "Inactive" | "Withdrawn";
-  wikipedia_url?: string;
-  labels: string[];
-  country: object;
-  external_ids: any;
-  [x: string | number | symbol]: unknown;
-}
-
-export interface Organization {
-  name: string;
-  url?: string;
-  acronym?: string;
-  ror_id?: string;
-}
+import type { Organization, RORItem } from "@/types";
 
 export function useRORAPI() {
   /**
diff --git a/frontend-vue3/src/composables/api/tags.ts b/frontend-vue3/src/composables/api/tags.ts
index f21cb31d7..38460e01a 100644
--- a/frontend-vue3/src/composables/api/tags.ts
+++ b/frontend-vue3/src/composables/api/tags.ts
@@ -1,7 +1,6 @@
 import { useAxios } from "@/composables/api/axios";
+import type { TagType } from "@/types";
 
-export type Tags = { name: string }[];
-export type TagType = "" | "Event" | "Codebase" | "Job" | "Profile";
 interface TagQueryParams {
   query?: string;
   type?: TagType;
diff --git a/frontend-vue3/src/types.ts b/frontend-vue3/src/types.ts
new file mode 100644
index 000000000..8e3f2a048
--- /dev/null
+++ b/frontend-vue3/src/types.ts
@@ -0,0 +1,37 @@
+export interface BaseFieldProps {
+  name: string;
+  label?: string;
+  help?: string;
+  placeholder?: string;
+  required?: boolean;
+}
+
+export type Tags = { name: string }[];
+export type TagType = "" | "Event" | "Codebase" | "Job" | "Profile";
+
+export interface RORItem {
+  id: string;
+  name: string;
+  email_address?: string;
+  ip_addresses?: any[];
+  established?: number | null;
+  types: string[];
+  relationships: any[];
+  addresses: any[];
+  links: string[];
+  aliases: string[];
+  acronyms: string[];
+  status: "Active" | "Inactive" | "Withdrawn";
+  wikipedia_url?: string;
+  labels: string[];
+  country: object;
+  external_ids: any;
+  [x: string | number | symbol]: unknown;
+}
+
+export interface Organization {
+  name: string;
+  url?: string;
+  acronym?: string;
+  ror_id?: string;
+}