feat(Form): add id and saveToLocalStorage props to Form

Author: hobbitronics

components/custom/Form/Form.svelte

@@ -1,9 +1,65 @@
+<script>
+import { onMount } from 'svelte'
+import generateRandomID from '../../../random'
+
+export let id = generateRandomID('form-')
+export let saveToLocalStorage = false
+
+let form = {}
+
+onMount(() => {
+  listenForBlurOnForm(form)
+})
+
+$: saveToLocalStorage && restoreFormValues(form)
+
+const getValuesFromForm = (form) => Object.fromEntries(new FormData(form))
+
+const storeFormValues = (formId, valuesFromForm) => {
+  sessionStorage.setItem(formId, JSON.stringify(valuesFromForm))
+}
+
+const setValuesOnForm = (form, valuesForForm) => {
+  Object.entries(valuesForForm).forEach((keyValuePair) => {
+    const [key, value] = keyValuePair
+    form[key].value = value
+  })
+}
+
+const restoreFormValues = (form) => {
+  const sessionStorageKey = form.id
+  const formValuesJson = sessionStorage.getItem(sessionStorageKey)
+  if (formValuesJson) {
+    const valuesForForm = JSON.parse(formValuesJson)
+    if (valuesForForm) {
+      setValuesOnForm(form, valuesForForm)
+      sessionStorage.removeItem(sessionStorageKey)
+    }
+  }
+}
+
+const onBlur = (value) => {
+  if (value) {
+    storeFormValues(form.id, getValuesFromForm(form))
+  }
+}
+
+const listenForBlurOnForm = (form) => {
+  const inputs = form.querySelectorAll('input, textarea')
+  inputs.forEach((input) => {
+    input.addEventListener('blur', function () {
+      onBlur(this.value)
+    })
+  })
+}
+</script>
+
 <style>
 :global(form > *) {
   margin-top: 2rem;
 }
 </style>
 
-<form class="w-100 {$$props.class}" on:submit|preventDefault autocomplete="off">
+<form bind:this={form} {id} class="w-100 {$$props.class}" on:submit|preventDefault autocomplete="off">
   <slot />
 </form>

index.d.ts

@@ -167,6 +167,7 @@ declare module '@silintl/ui-components' {
   interface MoneyInputProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
     label?: string
     value?: number
+    name?: string
     placeholder?: string
     autofocus?: boolean
     disabled?: boolean
@@ -228,6 +229,7 @@ declare module '@silintl/ui-components' {
   interface TextAreaProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
     label?: string
     value?: string
+    name?: string
     placeholder?: string
     rows?: number | string
     required?: boolean
@@ -241,6 +243,7 @@ declare module '@silintl/ui-components' {
   interface TextFieldProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
     label?: string
     value?: string
+    name?: string
     placeholder?: string
     maxlength?: number
     autofocus?: boolean
@@ -300,7 +303,8 @@ declare module '@silintl/ui-components' {
   export class FileDropArea extends SvelteComponentTyped<FileDropAreaProps> {}
 
   interface FormProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
-    // no exported members
+    id?: string
+    saveToLocalStorage?: boolean
   }
   export class Form extends SvelteComponentTyped<FormProps> {}
 

stories/Form.stories.svelte

@@ -2,9 +2,12 @@
 import { Meta, Template, Story } from '@storybook/addon-svelte-csf'
 import { TextField } from '../components/mdc'
 import { Form } from '../components/custom'
+import { copyAndModifyArgs } from './helpers'
 
 const args = {
   class: '', //only works for global classes
+  id: '',
+  saveToLocalStorage: false,
   onSubmit: () => {},
 }
 </script>
@@ -13,8 +16,12 @@ const args = {
 
 <Template let:args>
   <Form on:submit={args.onSubmit} {...args}>
-    <TextField />
+    <TextField name='first'/>
   </Form>
 </Template>
 
 <Story name="Default" {args} />
+
+<Story name="Id" args={copyAndModifyArgs(args, { id: '123' })} />
+
+<Story name="Save To Local Storage" args={copyAndModifyArgs(args, { saveToLocalStorage: true })} />