Adding validation to forms to ensure custom fields can't be the wrong type

packages/standard-components/src/forms/AttachmentField.svelte

@@ -1,5 +1,5 @@
 <script>
-  import SpectrumField from "./SpectrumField.svelte"
+  import Field from "./Field.svelte"
   import Dropzone from "../attachments/Dropzone.svelte"
   import { onMount } from "svelte"
 
@@ -21,8 +21,14 @@
   })
 </script>
 
-<SpectrumField {label} {field} bind:fieldState bind:fieldApi defaultValue={[]}>
+<Field
+  {label}
+  {field}
+  type="attachment"
+  bind:fieldState
+  bind:fieldApi
+  defaultValue={[]}>
   {#if mounted}
     <Dropzone bind:files={value} />
   {/if}
-</SpectrumField>
+</Field>

packages/standard-components/src/forms/BooleanField.svelte

@@ -1,7 +1,6 @@
 <script>
-  import { onMount } from "svelte"
   import "@spectrum-css/checkbox/dist/index-vars.css"
-  import SpectrumField from "./SpectrumField.svelte"
+  import Field from "./Field.svelte"
 
   export let field
   export let label
@@ -15,9 +14,10 @@
   }
 </script>
 
-<SpectrumField
+<Field
   {label}
   {field}
+  type="boolean"
   bind:fieldState
   bind:fieldApi
   defaultValue={false}>
@@ -48,4 +48,4 @@
       </label>
     </div>
   {/if}
-</SpectrumField>
+</Field>

packages/standard-components/src/forms/DateTimeField.svelte

@@ -1,6 +1,6 @@
 <script>
   import Flatpickr from "svelte-flatpickr"
-  import SpectrumField from "./SpectrumField.svelte"
+  import Field from "./Field.svelte"
   import "flatpickr/dist/flatpickr.css"
   import "@spectrum-css/inputgroup/dist/index-vars.css"
 
@@ -53,7 +53,7 @@
   }
 </script>
 
-<SpectrumField {label} {field} bind:fieldState bind:fieldApi>
+<Field {label} {field} type="datetime" bind:fieldState bind:fieldApi>
   {#if fieldState}
     <Flatpickr
       bind:flatpickr
@@ -114,7 +114,7 @@
       <div class="overlay" on:mousedown|self={flatpickr?.close} />
     {/if}
   {/if}
-</SpectrumField>
+</Field>
 
 <style>
   .spectrum-Textfield-input {

packages/standard-components/src/forms/SpectrumField.svelte → packages/standard-components/src/forms/Field.svelte

@@ -9,6 +9,7 @@
   export let fieldApi
   export let fieldSchema
   export let defaultValue
+  export let type
 
   // Get contexts
   const formContext = getContext("form")
@@ -45,6 +46,10 @@
         <Placeholder>
           Add the Field setting to start using your component
         </Placeholder>
+      {:else if fieldSchema?.type && fieldSchema?.type !== type}
+        <Placeholder>
+          This Field setting is the wrong data type for this component
+        </Placeholder>
       {:else}
         <slot />
         {#if $fieldState.error}

packages/standard-components/src/forms/LongFormField.svelte

@@ -1,7 +1,7 @@
 <script>
   import { onMount } from "svelte"
   import { RichText } from "@budibase/bbui"
-  import SpectrumField from "./SpectrumField.svelte"
+  import Field from "./Field.svelte"
 
   export let field
   export let label
@@ -38,13 +38,19 @@
   }
 </script>
 
-<SpectrumField {label} {field} bind:fieldState bind:fieldApi defaultValue="">
+<Field
+  {label}
+  {field}
+  type="longform"
+  bind:fieldState
+  bind:fieldApi
+  defaultValue="">
   {#if mounted}
     <div>
       <RichText bind:value {options} />
     </div>
   {/if}
-</SpectrumField>
+</Field>
 
 <style>
   div {

packages/standard-components/src/forms/OptionsField.svelte

@@ -1,5 +1,5 @@
 <script>
-  import SpectrumField from "./SpectrumField.svelte"
+  import Field from "./Field.svelte"
   import Picker from "./Picker.svelte"
 
   export let field
@@ -23,7 +23,13 @@
   }
 </script>
 
-<SpectrumField {field} {label} bind:fieldState bind:fieldApi bind:fieldSchema>
+<Field
+  {field}
+  {label}
+  type="options"
+  bind:fieldState
+  bind:fieldApi
+  bind:fieldSchema>
   {#if fieldState}
     <Picker
       bind:open
@@ -35,4 +41,4 @@
       isOptionSelected={option => option === $fieldState.value}
       onSelectOption={selectOption} />
   {/if}
-</SpectrumField>
+</Field>

packages/standard-components/src/forms/RelationshipField.svelte

@@ -1,6 +1,6 @@
 <script>
   import { getContext } from "svelte"
-  import SpectrumField from "./SpectrumField.svelte"
+  import Field from "./Field.svelte"
   import Picker from "./Picker.svelte"
 
   const { API } = getContext("sdk")
@@ -62,9 +62,10 @@
   }
 </script>
 
-<SpectrumField
+<Field
   {label}
   {field}
+  type="link"
   bind:fieldState
   bind:fieldApi
   bind:fieldSchema
@@ -77,4 +78,4 @@
     onSelectOption={toggleOption}
     getOptionLabel={getDisplayName}
     getOptionValue={option => option._id} />
-</SpectrumField>
+</Field>

packages/standard-components/src/forms/StringField.svelte

@@ -1,7 +1,6 @@
 <script>
-  import { onMount } from "svelte"
   import "@spectrum-css/textfield/dist/index-vars.css"
-  import SpectrumField from "./SpectrumField.svelte"
+  import Field from "./Field.svelte"
 
   export let field
   export let label
@@ -31,7 +30,12 @@
   }
 </script>
 
-<SpectrumField {label} {field} bind:fieldState bind:fieldApi>
+<Field
+  {label}
+  {field}
+  type={type === 'number' ? 'number' : 'string'}
+  bind:fieldState
+  bind:fieldApi>
   {#if fieldState}
     <div class="spectrum-Textfield" class:is-invalid={!$fieldState.valid}>
       {#if !$fieldState.valid}
@@ -53,4 +57,4 @@
         class="spectrum-Textfield-input" />
     </div>
   {/if}
-</SpectrumField>
+</Field>