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

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";
 

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,22 +56,22 @@
         />
       </div>
     </div>
-    <FormDatePicker
+    <DatepickerField
       class="mb-3"
       name="submission_deadline"
       label="Submission Deadline"
       help="The last day to make a submission for the event (inclusive)"
       :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";
 

frontend-vue3/src/components/FormDemo.vue

@@ -1,23 +1,23 @@
 <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>
 
 <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" },

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,73 +75,73 @@
                   of CoMSES Net Full Membership.
                 </div>
               </template>
-            </FormCheckbox>
+            </CheckboxField>
           </li>
         </ul>
       </div>
     </div>
 
     <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";

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");

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>