@3t-transform/threeteeui 1.9.102 → 1.9.103

package/dist/collection/components/molecules/tttx-form/tttx-form.stories.js

@@ -1,223 +1,223 @@
-import { withActions } from '@storybook/addon-actions/decorator';
-export default {
-  title: 'molecules/Form',
-  component: 'tttx-form',
-  parameters: {
-    actions: {
-      handles: ['dataSubmitted', 'dataChanged', 'searchTermChanged', 'selectToggleOpen'],
-    },
-  },
-  decorators: [withActions],
-};
-const formSchema = {
-  properties: {
-    title: {
-      type: 'string',
-      format: 'string',
-      form: {
-        type: 'text',
-        placeholder: 'Mr, Mrs, Dr, Hon Rev',
-        label: 'Title',
-      },
-    },
-    forename: {
-      type: 'string',
-      format: 'string',
-      form: {
-        type: 'text',
-        placeholder: 'John',
-        label: 'Forename',
-        validation: {
-          required: {
-            message: 'Please enter your forename',
-          },
-        },
-      },
-    },
-    surname: {
-      type: 'string',
-      format: 'string',
-      form: {
-        type: 'text',
-        placeholder: 'Doe',
-        label: 'Surname',
-        validation: {
-          required: {
-            message: 'Please enter your surname',
-          },
-        },
-      },
-    },
-    postcode: {
-      type: 'string',
-      format: 'string',
-      form: {
-        type: 'text',
-        placeholder: 'AB10',
-        label: 'Start of postcode',
-        validation: {
-          required: {
-            message: 'Please enter the beginning of your postcode',
-          },
-          pattern: {
-            pattern: '^([A-Za-z][0-9])$|^([A-Za-z][0-9]{2})$|^([A-Za-z]{2}[0-9])$|^([A-Za-z]{2}[0-9]{2})$|^([A-Za-z][0-9][A-Za-z])$|^([A-Za-z]{2}[0-9][A-Za-z])$|^(GIR|BF|BX|XX)$',
-            message: 'Please enter the first half of your postcode. EG: ZZ99',
-          },
-          maxlength: 4,
-        },
-      },
-    },
-    age: {
-      type: 'number',
-      format: 'number',
-      form: {
-        type: 'number',
-        placeholder: '',
-        label: 'Age',
-        validation: {
-          required: {
-            message: 'Please enter your age',
-          },
-          badInput: {
-            message: 'Please enter a number',
-          },
-        },
-      },
-    },
-    dob: {
-      type: 'string',
-      format: 'date-time',
-      form: {
-        type: 'date',
-        placeholder: '',
-        disabled: true,
-        label: 'Date of birth',
-        validation: {
-          required: {
-            message: 'Please enter your date of birth',
-          },
-          minmax: {
-            min: '1900-01-01',
-            max: '2100-12-31',
-            message: 'Please enter a date between 1900 and 2100',
-          },
-        },
-      },
-    },
-    dropdown: {
-      form: {
-        type: 'select',
-        blankDefault: true,
-        label: 'Food category',
-        useExternalFiltering: true,
-        isLoading: false,
-        readonly: false,
-        options: [
-          { label: 'Choose an option', value: '', placeholder: true },
-          { label: 'Poultry', value: 'chicken' },
-          { label: 'Fish', value: 'salmon' },
-          { label: 'Veg', value: 'lettuce' },
-        ],
-        validation: {
-          required: {
-            message: 'Must select a value',
-          },
-        },
-      },
-    },
-    startend: {
-      type: 'string',
-      format: 'string',
-      form: {
-        type: 'startenddate',
-        includeTime: true
-      },
-    },
-    expiration: {
-      type: 'radio',
-      form: {
-        type: 'radio',
-        label: 'Expiration',
-        options: [
-          { label: 'Never expires', value: 'neverExpires' },
-          { label: 'Will expire', value: 'willExpire' },
-        ],
-        validation: {
-          required: {
-            message: 'Please select validity',
-          },
-        },
-      },
-    },
-    permissions: {
-      form: {
-        type: 'checkbox',
-        label: 'Permissions',
-        inlineLabel: 'Please grant permissions to use data',
-        validation: {
-          required: {
-            message: 'Please grant permissions to use data',
-          },
-        },
-      },
-    },
-    notes: {
-      form: {
-        type: 'textarea',
-        label: 'Notes',
-        placeholder: 'Notes placeholder',
-        validation: {
-          maxlength: 1000
-        }
-      }
-    }
-  },
-};
-export const SingleFormItem = args => `<tttx-form_localcomponent formSchema='${JSON.stringify(args.formSchema)}'></tttx-form_localcomponent>`;
-SingleFormItem.args = {
-  formSchema: {
-    properties: {
-      input: {
-        type: 'string',
-        format: 'string',
-        form: {
-          type: 'text',
-          label: 'Input Field',
-          validation: {
-            invalid: {
-              message: 'This field is invalid'
-            },
-            required: {
-              message: 'Please enter something',
-            },
-          },
-        },
-      },
-    },
-  },
-};
-export const StartAndEndDateWithoutTime = args => `<tttx-form_localcomponent formSchema='${JSON.stringify(args.formSchema)}'></tttx-form_localcomponent>`;
-StartAndEndDateWithoutTime.args = {
-  formSchema: {
-    properties: {
-      startend: {
-        type: 'string',
-        format: 'string',
-        form: {
-          type: 'startenddate',
-          includeTime: false
-        },
-      },
-    },
-  },
-};
-export const ExampleFormFromJSON = ({ formSchema, isLoading, useExternalFiltering, readOnly }) => {
-  // Update the schema properties with the passed arguments
-  formSchema.properties.dropdown.form.isLoading = isLoading;
-  formSchema.properties.dropdown.form.useExternalFiltering = useExternalFiltering;
-  formSchema.properties.dropdown.form.readOnly = readOnly;
+import { withActions } from '@storybook/addon-actions/decorator';
+export default {
+  title: 'molecules/Form',
+  component: 'tttx-form',
+  parameters: {
+    actions: {
+      handles: ['dataSubmitted', 'dataChanged', 'searchTermChanged', 'selectToggleOpen'],
+    },
+  },
+  decorators: [withActions],
+};
+const formSchema = {
+  properties: {
+    title: {
+      type: 'string',
+      format: 'string',
+      form: {
+        type: 'text',
+        placeholder: 'Mr, Mrs, Dr, Hon Rev',
+        label: 'Title',
+      },
+    },
+    forename: {
+      type: 'string',
+      format: 'string',
+      form: {
+        type: 'text',
+        placeholder: 'John',
+        label: 'Forename',
+        validation: {
+          required: {
+            message: 'Please enter your forename',
+          },
+        },
+      },
+    },
+    surname: {
+      type: 'string',
+      format: 'string',
+      form: {
+        type: 'text',
+        placeholder: 'Doe',
+        label: 'Surname',
+        validation: {
+          required: {
+            message: 'Please enter your surname',
+          },
+        },
+      },
+    },
+    postcode: {
+      type: 'string',
+      format: 'string',
+      form: {
+        type: 'text',
+        placeholder: 'AB10',
+        label: 'Start of postcode',
+        validation: {
+          required: {
+            message: 'Please enter the beginning of your postcode',
+          },
+          pattern: {
+            pattern: '^([A-Za-z][0-9])$|^([A-Za-z][0-9]{2})$|^([A-Za-z]{2}[0-9])$|^([A-Za-z]{2}[0-9]{2})$|^([A-Za-z][0-9][A-Za-z])$|^([A-Za-z]{2}[0-9][A-Za-z])$|^(GIR|BF|BX|XX)$',
+            message: 'Please enter the first half of your postcode. EG: ZZ99',
+          },
+          maxlength: 4,
+        },
+      },
+    },
+    age: {
+      type: 'number',
+      format: 'number',
+      form: {
+        type: 'number',
+        placeholder: '',
+        label: 'Age',
+        validation: {
+          required: {
+            message: 'Please enter your age',
+          },
+          badInput: {
+            message: 'Please enter a number',
+          },
+        },
+      },
+    },
+    dob: {
+      type: 'string',
+      format: 'date-time',
+      form: {
+        type: 'date',
+        placeholder: '',
+        disabled: true,
+        label: 'Date of birth',
+        validation: {
+          required: {
+            message: 'Please enter your date of birth',
+          },
+          minmax: {
+            min: '1900-01-01',
+            max: '2100-12-31',
+            message: 'Please enter a date between 1900 and 2100',
+          },
+        },
+      },
+    },
+    dropdown: {
+      form: {
+        type: 'select',
+        blankDefault: true,
+        label: 'Food category',
+        useExternalFiltering: true,
+        isLoading: false,
+        readonly: false,
+        options: [
+          { label: 'Choose an option', value: '', placeholder: true },
+          { label: 'Poultry', value: 'chicken' },
+          { label: 'Fish', value: 'salmon' },
+          { label: 'Veg', value: 'lettuce' },
+        ],
+        validation: {
+          required: {
+            message: 'Must select a value',
+          },
+        },
+      },
+    },
+    startend: {
+      type: 'string',
+      format: 'string',
+      form: {
+        type: 'startenddate',
+        includeTime: true
+      },
+    },
+    expiration: {
+      type: 'radio',
+      form: {
+        type: 'radio',
+        label: 'Expiration',
+        options: [
+          { label: 'Never expires', value: 'neverExpires' },
+          { label: 'Will expire', value: 'willExpire' },
+        ],
+        validation: {
+          required: {
+            message: 'Please select validity',
+          },
+        },
+      },
+    },
+    permissions: {
+      form: {
+        type: 'checkbox',
+        label: 'Permissions',
+        inlineLabel: 'Please grant permissions to use data',
+        validation: {
+          required: {
+            message: 'Please grant permissions to use data',
+          },
+        },
+      },
+    },
+    notes: {
+      form: {
+        type: 'textarea',
+        label: 'Notes',
+        placeholder: 'Notes placeholder',
+        validation: {
+          maxlength: 1000
+        }
+      }
+    }
+  },
+};
+export const SingleFormItem = args => `<tttx-form_1_9_103 formSchema='${JSON.stringify(args.formSchema)}'></tttx-form_1_9_103>`;
+SingleFormItem.args = {
+  formSchema: {
+    properties: {
+      input: {
+        type: 'string',
+        format: 'string',
+        form: {
+          type: 'text',
+          label: 'Input Field',
+          validation: {
+            invalid: {
+              message: 'This field is invalid'
+            },
+            required: {
+              message: 'Please enter something',
+            },
+          },
+        },
+      },
+    },
+  },
+};
+export const StartAndEndDateWithoutTime = args => `<tttx-form_1_9_103 formSchema='${JSON.stringify(args.formSchema)}'></tttx-form_1_9_103>`;
+StartAndEndDateWithoutTime.args = {
+  formSchema: {
+    properties: {
+      startend: {
+        type: 'string',
+        format: 'string',
+        form: {
+          type: 'startenddate',
+          includeTime: false
+        },
+      },
+    },
+  },
+};
+export const ExampleFormFromJSON = ({ formSchema, isLoading, useExternalFiltering, readOnly }) => {
+  // Update the schema properties with the passed arguments
+  formSchema.properties.dropdown.form.isLoading = isLoading;
+  formSchema.properties.dropdown.form.useExternalFiltering = useExternalFiltering;
+  formSchema.properties.dropdown.form.readOnly = readOnly;
   return `
-        <tttx-form_localcomponent id='form' formSchema='${JSON.stringify(formSchema)}'></tttx-form_localcomponent>
+        <tttx-form_1_9_103 id='form' formSchema='${JSON.stringify(formSchema)}'></tttx-form_1_9_103>
         <hr/>
         <button type='button' id='button'>Submit Form</button>
         <script>
@@ -234,196 +234,196 @@ export const ExampleFormFromJSON = ({ formSchema, isLoading, useExternalFilterin
                 }
             }
         </script>
-    `;
-};
-ExampleFormFromJSON.args = {
-  formSchema,
-  isLoading: false,
-  useExternalFiltering: false,
-  readOnly: false
-};
-const formSchemaWithReadonly = {
-  properties: {
-    title: {
-      type: 'string',
-      format: 'string',
-      form: {
-        type: 'text',
-        placeholder: 'Mr, Mrs, Dr, Hon Rev',
-        label: 'Title',
-      },
-    },
-    forename: {
-      type: 'string',
-      format: 'string',
-      form: {
-        type: 'text',
-        placeholder: 'John',
-        label: 'Forename',
-        validation: {
-          required: {
-            message: 'Please enter your forename',
-          },
-        },
-      },
-    },
-    surname: {
-      type: 'string',
-      format: 'string',
-      form: {
-        type: 'text',
-        placeholder: 'Doe',
-        label: 'Surname',
-        validation: {
-          required: {
-            message: 'Please enter your surname',
-          },
-        },
-      },
-    },
-    postcode: {
-      type: 'string',
-      format: 'string',
-      form: {
-        type: 'text',
-        placeholder: 'AB10',
-        label: 'Start of postcode',
-        validation: {
-          required: {
-            message: 'Please enter the beginning of your postcode',
-          },
-          pattern: {
-            pattern: '^([A-Za-z][0-9])$|^([A-Za-z][0-9]{2})$|^([A-Za-z]{2}[0-9])$|^([A-Za-z]{2}[0-9]{2})$|^([A-Za-z][0-9][A-Za-z])$|^([A-Za-z]{2}[0-9][A-Za-z])$|^(GIR|BF|BX|XX)$',
-            message: 'Please enter the first half of your postcode. EG: ZZ99',
-          },
-          maxlength: 4,
-        },
-      },
-    },
-    age: {
-      type: 'number',
-      format: 'number',
-      form: {
-        type: 'number',
-        placeholder: '',
-        label: 'Age',
-        readonly: true,
-        validation: {
-          required: {
-            message: 'Please enter your age',
-          },
-          badInput: {
-            message: 'Please enter a number',
-          },
-        },
-      },
-    },
-    dob: {
-      type: 'string',
-      format: 'date-time',
-      form: {
-        type: 'date',
-        placeholder: '',
-        label: 'Date of birth',
-        readonly: true,
-        validation: {
-          required: {
-            message: 'Please enter your date of birth',
-          },
-          minmax: {
-            min: '1900-01-01',
-            max: '2100-12-31',
-            message: 'Please enter a date between 1900 and 2100',
-          },
-        },
-      },
-    },
-    dropdown: {
-      form: {
-        type: 'select',
-        blankDefault: true,
-        label: 'Food category',
-        options: [
-          { label: 'Choose an option', value: '', placeholder: true },
-          { label: 'Poultry', value: 'chicken' },
-          { label: 'Fish', value: 'salmon' },
-          { label: 'Veg', value: 'lettuce' },
-        ],
-        validation: {
-          required: {
-            message: 'Must select a value',
-          },
-        },
-      },
-    },
-    startend: {
-      type: 'string',
-      format: 'string',
-      form: {
-        type: 'startenddate',
-        includeTime: true
-      },
-    },
-    expiration: {
-      type: 'radio',
-      form: {
-        type: 'radio',
-        label: 'Expiration',
-        options: [
-          { label: 'Never expires', value: 'neverExpires' },
-          { label: 'Will expire', value: 'willExpire' },
-        ],
-        validation: {
-          required: {
-            message: 'Please select validity',
-          },
-        },
-      },
-    },
-    permissions: {
-      form: {
-        type: 'checkbox',
-        label: 'Permissions',
-        inlineLabel: 'Please grant permissions to use data',
-        validation: {
-          required: {
-            message: 'Please grant permissions to use data',
-          },
-        },
-      },
-    },
-    notes: {
-      form: {
-        type: 'textarea',
-        label: 'Notes',
-        placeholder: 'Notes placeholder',
-        validation: {
-          required: {
-            message: 'Please add some notes'
-          },
-          maxlength: 1000
-        }
-      }
-    }
-  },
-};
-const data = {
-  title: 'Ms',
-  forename: 'Jane',
-  surname: 'Doe',
-  postcode: 'AB10',
-  age: '50',
-  dob: '1973-06-02',
-  dropdown: 'chicken',
-  permissions: 'on',
-  expiration: 'willExpire',
-  'startend-startdate': '2021-09-01T09:00:00',
-  'startend-starttime': '09:00',
-  'startend-enddate': '2024-10-15',
-  'startend-endtime': '17:00',
-  notes: 'Some notes that were entered into this box.'
-};
-export const PrePopulateForm = args => `<tttx-form_localcomponent id='form' formSchema='${JSON.stringify(args.formSchema)}' data='${JSON.stringify(args.data)}'></tttx-form_localcomponent>
+    `;
+};
+ExampleFormFromJSON.args = {
+  formSchema,
+  isLoading: false,
+  useExternalFiltering: false,
+  readOnly: false
+};
+const formSchemaWithReadonly = {
+  properties: {
+    title: {
+      type: 'string',
+      format: 'string',
+      form: {
+        type: 'text',
+        placeholder: 'Mr, Mrs, Dr, Hon Rev',
+        label: 'Title',
+      },
+    },
+    forename: {
+      type: 'string',
+      format: 'string',
+      form: {
+        type: 'text',
+        placeholder: 'John',
+        label: 'Forename',
+        validation: {
+          required: {
+            message: 'Please enter your forename',
+          },
+        },
+      },
+    },
+    surname: {
+      type: 'string',
+      format: 'string',
+      form: {
+        type: 'text',
+        placeholder: 'Doe',
+        label: 'Surname',
+        validation: {
+          required: {
+            message: 'Please enter your surname',
+          },
+        },
+      },
+    },
+    postcode: {
+      type: 'string',
+      format: 'string',
+      form: {
+        type: 'text',
+        placeholder: 'AB10',
+        label: 'Start of postcode',
+        validation: {
+          required: {
+            message: 'Please enter the beginning of your postcode',
+          },
+          pattern: {
+            pattern: '^([A-Za-z][0-9])$|^([A-Za-z][0-9]{2})$|^([A-Za-z]{2}[0-9])$|^([A-Za-z]{2}[0-9]{2})$|^([A-Za-z][0-9][A-Za-z])$|^([A-Za-z]{2}[0-9][A-Za-z])$|^(GIR|BF|BX|XX)$',
+            message: 'Please enter the first half of your postcode. EG: ZZ99',
+          },
+          maxlength: 4,
+        },
+      },
+    },
+    age: {
+      type: 'number',
+      format: 'number',
+      form: {
+        type: 'number',
+        placeholder: '',
+        label: 'Age',
+        readonly: true,
+        validation: {
+          required: {
+            message: 'Please enter your age',
+          },
+          badInput: {
+            message: 'Please enter a number',
+          },
+        },
+      },
+    },
+    dob: {
+      type: 'string',
+      format: 'date-time',
+      form: {
+        type: 'date',
+        placeholder: '',
+        label: 'Date of birth',
+        readonly: true,
+        validation: {
+          required: {
+            message: 'Please enter your date of birth',
+          },
+          minmax: {
+            min: '1900-01-01',
+            max: '2100-12-31',
+            message: 'Please enter a date between 1900 and 2100',
+          },
+        },
+      },
+    },
+    dropdown: {
+      form: {
+        type: 'select',
+        blankDefault: true,
+        label: 'Food category',
+        options: [
+          { label: 'Choose an option', value: '', placeholder: true },
+          { label: 'Poultry', value: 'chicken' },
+          { label: 'Fish', value: 'salmon' },
+          { label: 'Veg', value: 'lettuce' },
+        ],
+        validation: {
+          required: {
+            message: 'Must select a value',
+          },
+        },
+      },
+    },
+    startend: {
+      type: 'string',
+      format: 'string',
+      form: {
+        type: 'startenddate',
+        includeTime: true
+      },
+    },
+    expiration: {
+      type: 'radio',
+      form: {
+        type: 'radio',
+        label: 'Expiration',
+        options: [
+          { label: 'Never expires', value: 'neverExpires' },
+          { label: 'Will expire', value: 'willExpire' },
+        ],
+        validation: {
+          required: {
+            message: 'Please select validity',
+          },
+        },
+      },
+    },
+    permissions: {
+      form: {
+        type: 'checkbox',
+        label: 'Permissions',
+        inlineLabel: 'Please grant permissions to use data',
+        validation: {
+          required: {
+            message: 'Please grant permissions to use data',
+          },
+        },
+      },
+    },
+    notes: {
+      form: {
+        type: 'textarea',
+        label: 'Notes',
+        placeholder: 'Notes placeholder',
+        validation: {
+          required: {
+            message: 'Please add some notes'
+          },
+          maxlength: 1000
+        }
+      }
+    }
+  },
+};
+const data = {
+  title: 'Ms',
+  forename: 'Jane',
+  surname: 'Doe',
+  postcode: 'AB10',
+  age: '50',
+  dob: '1973-06-02',
+  dropdown: 'chicken',
+  permissions: 'on',
+  expiration: 'willExpire',
+  'startend-startdate': '2021-09-01T09:00:00',
+  'startend-starttime': '09:00',
+  'startend-enddate': '2024-10-15',
+  'startend-endtime': '17:00',
+  notes: 'Some notes that were entered into this box.'
+};
+export const PrePopulateForm = args => `<tttx-form_1_9_103 id='form' formSchema='${JSON.stringify(args.formSchema)}' data='${JSON.stringify(args.data)}'></tttx-form_1_9_103>
 <hr/>
 <button type='button' id='button'>Submit Form</button>
 <script>
@@ -439,66 +439,66 @@ export const PrePopulateForm = args => `<tttx-form_localcomponent id='form' form
             tttxform.submit();
         }
     }
-</script>`;
-PrePopulateForm.args = {
-  data,
-  formSchema: formSchemaWithReadonly,
-};
-const radioFormSchema = {
-  properties: {
-    name: {
-      type: 'string',
-      format: 'string',
-      form: {
-        type: 'text',
-        placeholder: 'Enter a name',
-        label: 'Name',
-        validation: {
-          required: {
-            message: 'Please enter name',
-          },
-        },
-      },
-    },
-    requiresEvidence: {
-      type: 'checkbox',
-      form: {
-        type: 'checkbox',
-        label: '',
-        inlineLabel: 'Requires Evidence',
-      },
-    },
-    validity: {
-      type: 'radio',
-      form: {
-        type: 'radio',
-        label: 'Validity',
-        options: [
-          { label: 'Never expires', value: 'neverExpires' },
-          { label: 'Validity duration', value: 'validityDuration' },
-        ],
-        validation: {
-          required: {
-            message: 'Please select validity',
-          },
-        },
-      },
-    },
-    option2: {
-      type: 'radio',
-      form: {
-        type: 'radio',
-        label: 'Option 2',
-        options: [
-          { label: 'Opt 2a', value: 'opt2a' },
-          { label: 'Opt 2b', value: 'opt2b' },
-          { label: 'Opt 2c', value: 'opt2c' },
-        ],
-      },
-    },
-  },
-};
-export const FormWithRadio = args => `<tttx-form_localcomponent id='form' formSchema='${JSON.stringify(args.formSchema)}'></tttx-form_localcomponent>
+</script>`;
+PrePopulateForm.args = {
+  data,
+  formSchema: formSchemaWithReadonly,
+};
+const radioFormSchema = {
+  properties: {
+    name: {
+      type: 'string',
+      format: 'string',
+      form: {
+        type: 'text',
+        placeholder: 'Enter a name',
+        label: 'Name',
+        validation: {
+          required: {
+            message: 'Please enter name',
+          },
+        },
+      },
+    },
+    requiresEvidence: {
+      type: 'checkbox',
+      form: {
+        type: 'checkbox',
+        label: '',
+        inlineLabel: 'Requires Evidence',
+      },
+    },
+    validity: {
+      type: 'radio',
+      form: {
+        type: 'radio',
+        label: 'Validity',
+        options: [
+          { label: 'Never expires', value: 'neverExpires' },
+          { label: 'Validity duration', value: 'validityDuration' },
+        ],
+        validation: {
+          required: {
+            message: 'Please select validity',
+          },
+        },
+      },
+    },
+    option2: {
+      type: 'radio',
+      form: {
+        type: 'radio',
+        label: 'Option 2',
+        options: [
+          { label: 'Opt 2a', value: 'opt2a' },
+          { label: 'Opt 2b', value: 'opt2b' },
+          { label: 'Opt 2c', value: 'opt2c' },
+        ],
+      },
+    },
+  },
+};
+export const FormWithRadio = args => `<tttx-form_1_9_103 id='form' formSchema='${JSON.stringify(args.formSchema)}'></tttx-form_1_9_103>
     <hr/>
     <button type='button' id='button'>Submit Form</button>
     <script>
@@ -514,15 +514,15 @@ export const FormWithRadio = args => `<tttx-form_localcomponent id='form' formSc
                 tttxform.submit();
             }
         }
-    </script>`;
-FormWithRadio.args = {
-  formSchema: radioFormSchema,
-};
-export const ReadOnlyMode = ({ formSchema }) => {
-  // Handle the read-only field name input
-  const fieldName = 'dropdown';
+    </script>`;
+FormWithRadio.args = {
+  formSchema: radioFormSchema,
+};
+export const ReadOnlyMode = ({ formSchema }) => {
+  // Handle the read-only field name input
+  const fieldName = 'dropdown';
   return `
-      <tttx-form_localcomponent id="form" formSchema='${JSON.stringify(formSchema)}'></tttx-form_localcomponent>
+      <tttx-form_1_9_103 id="form" formSchema='${JSON.stringify(formSchema)}'></tttx-form_1_9_103>
       <hr />
       
         <!-- Input to take the field name -->
@@ -575,7 +575,7 @@ export const ReadOnlyMode = ({ formSchema }) => {
         function toggleReadOnlyMode() {
             const fieldName = document.getElementById('field-name-input').value;
             const toggleSwitch = document.getElementById('readonly-toggle');
-            const component = document.querySelector('tttx-form_localcomponent');
+            const component = document.querySelector('tttx-form_1_9_103');
 
             if (component && fieldName) {
             const isReadOnly = toggleSwitch.checked;
@@ -585,116 +585,116 @@ export const ReadOnlyMode = ({ formSchema }) => {
             }
         }
         </script>
-    `;
-};
-const readOnlySchema = {
-  properties: {
-    title: {
-      type: 'string',
-      format: 'string',
-      form: {
-        type: 'text',
-        placeholder: 'Mr, Mrs, Dr, Hon Rev',
-        label: 'Title',
-      },
-    },
-    forename: {
-      type: 'string',
-      format: 'string',
-      form: {
-        type: 'text',
-        placeholder: 'John',
-        label: 'Forename',
-        validation: {
-          required: {
-            message: 'Please enter your forename',
-          },
-        },
-      },
-    },
-    dropdown: {
-      form: {
-        type: 'select',
-        blankDefault: true,
-        label: 'Food category',
-        useExternalFiltering: true,
-        isLoading: false,
-        readonly: false,
-        options: [
-          { label: 'Choose an option', value: '', placeholder: true },
-          { label: 'Poultry', value: 'chicken' },
-          { label: 'Fish', value: 'salmon' },
-          { label: 'Veg', value: 'lettuce' },
-        ],
-        validation: {
-          required: {
-            message: 'Must select a value',
-          },
-        },
-      },
-    },
-  },
-};
-ReadOnlyMode.args = {
-  formSchema: readOnlySchema,
-};
-const dateValidationFormSchema = {
-  properties: {
-    dob: {
-      type: 'string',
-      format: 'date-time',
-      form: {
-        type: 'date',
-        placeholder: '',
-        disabled: false,
-        label: 'Date of birth',
-        validation: {
-          required: {
-            message: 'Please enter your date of birth',
-          },
-          minmax: {
-            min: '1900-01-01',
-            max: '2100-12-31',
-            message: 'Please enter a date between 1900 and 2100',
-          }
-        }
-      }
-    },
-    startend: {
-      type: 'string',
-      format: 'string',
-      form: {
-        type: 'startenddate',
-        includeTime: true,
-        validation: {
-          startDate: {
-            minmax: {
-              min: '1900-01-01',
-              max: '2100-12-31',
-              message: 'Please enter a date between 1900 and 2100',
-            }
-          },
-          endDate: {
-            minmax: {
-              min: '1900-01-01',
-              max: '2100-12-31',
-              message: 'Please enter a date between 1900 and 2100',
-            }
-          },
-          startTime: {},
-          endTime: {}
-        }
-      }
-    }
-  }
-};
-export const DateValidation = ({ formSchema, isLoading, useExternalFiltering, readOnly }) => {
-  // Update the schema properties with the passed arguments
-  formSchema.properties.dropdown.form.isLoading = isLoading;
-  formSchema.properties.dropdown.form.useExternalFiltering = useExternalFiltering;
-  formSchema.properties.dropdown.form.readOnly = readOnly;
+    `;
+};
+const readOnlySchema = {
+  properties: {
+    title: {
+      type: 'string',
+      format: 'string',
+      form: {
+        type: 'text',
+        placeholder: 'Mr, Mrs, Dr, Hon Rev',
+        label: 'Title',
+      },
+    },
+    forename: {
+      type: 'string',
+      format: 'string',
+      form: {
+        type: 'text',
+        placeholder: 'John',
+        label: 'Forename',
+        validation: {
+          required: {
+            message: 'Please enter your forename',
+          },
+        },
+      },
+    },
+    dropdown: {
+      form: {
+        type: 'select',
+        blankDefault: true,
+        label: 'Food category',
+        useExternalFiltering: true,
+        isLoading: false,
+        readonly: false,
+        options: [
+          { label: 'Choose an option', value: '', placeholder: true },
+          { label: 'Poultry', value: 'chicken' },
+          { label: 'Fish', value: 'salmon' },
+          { label: 'Veg', value: 'lettuce' },
+        ],
+        validation: {
+          required: {
+            message: 'Must select a value',
+          },
+        },
+      },
+    },
+  },
+};
+ReadOnlyMode.args = {
+  formSchema: readOnlySchema,
+};
+const dateValidationFormSchema = {
+  properties: {
+    dob: {
+      type: 'string',
+      format: 'date-time',
+      form: {
+        type: 'date',
+        placeholder: '',
+        disabled: false,
+        label: 'Date of birth',
+        validation: {
+          required: {
+            message: 'Please enter your date of birth',
+          },
+          minmax: {
+            min: '1900-01-01',
+            max: '2100-12-31',
+            message: 'Please enter a date between 1900 and 2100',
+          }
+        }
+      }
+    },
+    startend: {
+      type: 'string',
+      format: 'string',
+      form: {
+        type: 'startenddate',
+        includeTime: true,
+        validation: {
+          startDate: {
+            minmax: {
+              min: '1900-01-01',
+              max: '2100-12-31',
+              message: 'Please enter a date between 1900 and 2100',
+            }
+          },
+          endDate: {
+            minmax: {
+              min: '1900-01-01',
+              max: '2100-12-31',
+              message: 'Please enter a date between 1900 and 2100',
+            }
+          },
+          startTime: {},
+          endTime: {}
+        }
+      }
+    }
+  }
+};
+export const DateValidation = ({ formSchema, isLoading, useExternalFiltering, readOnly }) => {
+  // Update the schema properties with the passed arguments
+  formSchema.properties.dropdown.form.isLoading = isLoading;
+  formSchema.properties.dropdown.form.useExternalFiltering = useExternalFiltering;
+  formSchema.properties.dropdown.form.readOnly = readOnly;
   return `
-        <tttx-form_localcomponent id='form' formSchema='${JSON.stringify(dateValidationFormSchema)}'></tttx-form_localcomponent>
+        <tttx-form_1_9_103 id='form' formSchema='${JSON.stringify(dateValidationFormSchema)}'></tttx-form_1_9_103>
         <hr/>
         <button type='button' id='button'>Submit Form</button>
         <script>
@@ -711,11 +711,11 @@ export const DateValidation = ({ formSchema, isLoading, useExternalFiltering, re
                 }
             }
         </script>
-    `;
-};
-DateValidation.args = {
-  formSchema,
-  isLoading: false,
-  useExternalFiltering: false,
-  readOnly: false
-};
+    `;
+};
+DateValidation.args = {
+  formSchema,
+  isLoading: false,
+  useExternalFiltering: false,
+  readOnly: false
+};