Add form fields, and form page

- Use svelte5 with typescript and sveltekit to make an app called "sveltekit-5-demo-app"
- create a set of components for the most commonly used HTML form inputs
- create a demo page that has an example form on it, with the overall form-state stored in a svelte state object, which is also saved to local storage on every change event

Author: Tim Marwick

src/components/Checkbox.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import { createEventDispatcher } from 'svelte';
+    export let label: string = '';
+    export let checked: boolean = false;
+    export let name: string = '';
+    const dispatch = createEventDispatcher();
+  
+    function handleChange(event: Event) {
+      dispatch('change', { name, checked: (event.target as HTMLInputElement).checked });
+    }
+  </script>
+  
+  <label>
+    <input type="checkbox" bind:checked on:change={handleChange} />
+    {label}
+  </label>

src/components/RadioButton.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import { createEventDispatcher } from 'svelte';
+    export let label: string = '';
+    export let value: string = '';
+    export let name: string = '';
+    export let groupValue: string = '';
+    const dispatch = createEventDispatcher();
+  
+    function handleChange() {
+      dispatch('change', { name, value });
+    }
+  </script>
+  
+  <label>
+    <input
+      type="radio"
+      name={name}
+      value={value}
+      bind:group={groupValue}
+      on:change={handleChange}
+    />
+    {label}
+  </label>

src/components/Select.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import { createEventDispatcher } from 'svelte';
+    export let label: string = '';
+    export let options: { value: string; text: string }[] = [];
+    export let selectedValue: string = '';
+    export let name: string = '';
+    const dispatch = createEventDispatcher();
+  
+    function handleChange(event: Event) {
+      dispatch('change', { name, value: (event.target as HTMLSelectElement).value });
+    }
+  </script>
+  
+  <label>
+    {label}
+    <select bind:value={selectedValue} on:change={handleChange}>
+      {#each options as option}
+        <option value={option.value}>{option.text}</option>
+      {/each}
+    </select>
+  </label>

src/components/TextArea.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import { createEventDispatcher } from 'svelte';
+    export let label: string = '';
+    export let value: string = '';
+    export let name: string = '';
+    const dispatch = createEventDispatcher();
+  
+    function handleInput(event: Event) {
+      dispatch('change', { name, value: (event.target as HTMLTextAreaElement).value });
+    }
+  </script>
+  
+  <label>
+    {label}
+    <textarea bind:value on:input={handleInput}></textarea>
+  </label>

src/components/TextInput.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import { createEventDispatcher } from 'svelte';
+    export let label: string = '';
+    export let value: string = '';
+    export let name: string = '';
+    const dispatch = createEventDispatcher();
+  
+    function handleInput(event: Event) {
+      dispatch('change', { name, value: (event.target as HTMLInputElement).value });
+    }
+  </script>
+  
+  <label>
+    {label}
+    <input type="text" bind:value on:input={handleInput} />
+  </label>

src/routes/Header.svelte

@@ -25,6 +25,9 @@
 			<li aria-current={$page.url.pathname.startsWith('/sverdle') ? 'page' : undefined}>
 				<a href="/sverdle">Sverdle</a>
 			</li>
+			<li aria-current={$page.url.pathname === '/form' ? 'page' : undefined}>
+				<a href="/form">Form</a>
+			</li>
 		</ul>
 		<svg viewBox="0 0 2 3" aria-hidden="true">
 			<path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />

src/routes/form/+page.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { writable } from 'svelte/store';
+	import TextInput from '../../components/TextInput.svelte';
+	import Checkbox from '../../components/Checkbox.svelte';
+	import RadioButton from '../../components/RadioButton.svelte';
+	import Select from '../../components/Select.svelte';
+	import TextArea from '../../components/TextArea.svelte';
+    // import TextInput from '$lib/components/TextInput.svelte';
+    // import Checkbox from '$lib/components/Checkbox.svelte';
+    // import RadioButton from '$lib/components/RadioButton.svelte';
+    // import Select from '$lib/components/Select.svelte';
+    // import TextArea from '$lib/components/TextArea.svelte';
+  
+    interface FormData {
+      name: string;
+      email: string;
+      password: string;
+      acceptTerms: boolean;
+      gender: string;
+      country: string;
+      bio: string;
+    }
+  
+    const defaultFormData: FormData = {
+      name: '',
+      email: '',
+      password: '',
+      acceptTerms: false,
+      gender: '',
+      country: '',
+      bio: ''
+    };
+  
+    const formData = writable<FormData>({ ...defaultFormData });
+  
+    // Load form data from local storage on mount
+    onMount(() => {
+      const storedData = localStorage.getItem('formData');
+      if (storedData) {
+        formData.set(JSON.parse(storedData));
+      }
+    });
+  
+    // Save form data to local storage on change
+    formData.subscribe((data) => {
+      localStorage.setItem('formData', JSON.stringify(data));
+    });
+  
+    function handleChange(event: any) {
+      const { name, value, checked } = event.detail;
+      formData.update((data) => ({
+        ...data,
+        [name]: value !== undefined ? value : checked
+      }));
+    }
+  </script>
+  
+  <h1>Example Form</h1>
+  
+  <form on:submit|preventDefault>
+    {#if $formData}
+      <!-- Name -->
+      <TextInput
+        label="Name"
+        name="name"
+        value={$formData.name}
+        on:change={handleChange}
+      />
+  
+      <!-- Email -->
+      <TextInput
+        label="Email"
+        name="email"
+        value={$formData.email}
+        on:change={handleChange}
+      />
+  
+      <!-- Password -->
+      <TextInput
+        label="Password"
+        name="password"
+        value={$formData.password}
+        on:change={handleChange}
+      />
+  
+      <!-- Accept Terms -->
+      <Checkbox
+        label="Accept Terms and Conditions"
+        name="acceptTerms"
+        checked={$formData.acceptTerms}
+        on:change={handleChange}
+      />
+  
+      <!-- Gender -->
+      <fieldset>
+        <legend>Gender</legend>
+        <RadioButton
+          label="Male"
+          name="gender"
+          value="male"
+          groupValue={$formData.gender}
+          on:change={handleChange}
+        />
+        <RadioButton
+          label="Female"
+          name="gender"
+          value="female"
+          groupValue={$formData.gender}
+          on:change={handleChange}
+        />
+        <RadioButton
+          label="Other"
+          name="gender"
+          value="other"
+          groupValue={$formData.gender}
+          on:change={handleChange}
+        />
+      </fieldset>
+  
+      <!-- Country -->
+      <Select
+        label="Country"
+        name="country"
+        options={[
+          { value: '', text: 'Select Country' },
+          { value: 'us', text: 'United States' },
+          { value: 'ca', text: 'Canada' },
+          { value: 'uk', text: 'United Kingdom' },
+          { value: 'au', text: 'Australia' }
+        ]}
+        selectedValue={$formData.country}
+        on:change={handleChange}
+      />
+  
+      <!-- Bio -->
+      <TextArea
+        label="Bio"
+        name="bio"
+        value={$formData.bio}
+        on:change={handleChange}
+      />
+  
+      <!-- Submit Button -->
+      <button type="submit">Submit</button>
+    {/if}
+  </form>
+  
+  <!-- Display Form Data -->
+  <pre>{JSON.stringify($formData, null, 2)}</pre>
+