revert: changes to form stories

apps/tailwind-components/components/form/Field.vue

@@ -35,54 +35,30 @@ function validate(value: columnValue) {
 
   formFieldInput.value.validate(value);
 }
-
-const refData = ref();
-
-onMounted(async () => {
-  if (["ONTOLOGY", "ONTOLOGY_ARRAY"].includes(props.column.columnType)) {
-    const response = await fetchTableData(
-      props.column.refSchemaId as string,
-      props.column.refTableId as string
-    );
-    refData.value = response.rows.map((row) => row.name);
-  }
-});
 </script>
 
 <template>
   <div class="flex flex-col gap-1">
     <div>
-      <label
-        :id="`${column.id}-label`"
-        :for="column.id"
-        class="capitalize text-title font-bold"
-        >{{ column.label }}</label
-      >
+      <label :for="column.id" class="capitalize text-title font-bold">{{
+        column.label
+      }}</label>
       <span class="text-disabled text-body-sm ml-3" v-show="column.required"
         >Required</span
       >
     </div>
-    <span
-      :id="`${column.id}-description`"
-      class="text-input-description text-body-sm"
-      v-if="column.description"
-    >
+    <div class="text-input-description text-body-sm" v-if="column.description">
       {{ column.description }}
-    </span>
+    </div>
     <div>
       <FormFieldInput
         :type="column.columnType"
         :id="column.id"
         :label="column.label"
         :data="data"
-        :options="refData ? refData : null"
         :required="!!column.required"
         :aria-invalid="hasError"
-        :aria-desribedBy="
-          column.description
-            ? `${column.id}-description ${column.id}-input-error`
-            : `${column.id}-input-error`
-        "
+        :aria-desribedBy="`${column.id}-input-error`"
         @focus="touched = true"
         @input="pristine = false"
         @update:modelValue="$emit('update:modelValue', $event)"

apps/tailwind-components/components/form/FieldInput.vue

@@ -8,7 +8,6 @@ import type {
   columnId,
   columnValue,
   CellValueType,
-  IInputValueLabel,
 } from "../../../metadata-utils/src/types";
 
 type inputComponent =
@@ -22,7 +21,6 @@ defineProps<{
   label: string;
   required: boolean;
   data: columnValue;
-  options?: IInputValueLabel[];
 }>();
 
 defineEmits(["focus", "error", "update:modelValue"]);
@@ -49,7 +47,7 @@ function validate(value: columnValue) {
     :id="id"
     :label="label"
     :required="required"
-    :value="(data as string)"
+    :value="data as string"
     @focus="$emit('focus')"
     @update:modelValue="$emit('update:modelValue', $event)"
     @error="$emit('error', $event)"
@@ -60,7 +58,7 @@ function validate(value: columnValue) {
     :id="id"
     :label="label"
     :required="required"
-    :value="(data as string)"
+    :value="data as string"
     @focus="$emit('focus')"
     @update:modelValue="$emit('update:modelValue', $event)"
     @error="$emit('error', $event)"

apps/tailwind-components/pages/Form.story.vue

@@ -6,22 +6,16 @@ import type {
   IFieldError,
   ISchemaMetaData,
   ITableMetaData,
-  IInputValueLabel,
 } from "../../metadata-utils/src/types";
 
-const exampleForms: IInputValueLabel[] = [
-  { value: "simple", label: "Simple form example" },
-  { value: "complex", label: "Complex form example" },
-];
-
-const formType = ref<IInputValueLabel>(exampleForms[0]);
+const sampleType = ref("simple");
 
 // just assuming that the table is there for the demo
 const schemaId = computed(() =>
-  formType.value.value === "simple" ? "pet store" : "catalogue-demo"
+  sampleType.value === "simple" ? "pet store" : "catalogue-demo"
 );
 const tableId = computed(() =>
-  formType.value.value === "simple" ? "Pet" : "Resources"
+  sampleType.value === "simple" ? "Pet" : "Resources"
 );
 
 const {
@@ -37,8 +31,7 @@ const tableMeta = computed(
     ) as ITableMetaData
 );
 
-function refetch(value: IInputValueLabel) {
-  formType.value = value;
+function refetch() {
   refetchMetadata();
 }