From 12e9054f59e707872c0f6764fe20c99433f87726 Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Tue, 18 Feb 2025 02:00:48 +0400
Subject: [PATCH] Refactoring form components

---
 src/components/ui/forms/CheckboxField.svelte  | 22 +++++-----
 src/components/ui/forms/FormContainer.svelte  |  8 ++--
 src/components/ui/forms/FormControl.svelte    | 19 ++++----
 src/components/ui/forms/SelectField.svelte    | 43 ++++++++++---------
 .../ui/forms/TagCategorySelectField.svelte    | 34 +++++++--------
 src/components/ui/forms/TextField.svelte      | 22 +++++-----
 6 files changed, 76 insertions(+), 72 deletions(-)

diff --git a/src/components/ui/forms/CheckboxField.svelte b/src/components/ui/forms/CheckboxField.svelte
index 6324a00..00661eb 100644
--- a/src/components/ui/forms/CheckboxField.svelte
+++ b/src/components/ui/forms/CheckboxField.svelte
@@ -1,15 +1,17 @@
-<script>
+<script lang="ts">
+  import type { Snippet } from "svelte";
 
+  interface CheckboxFieldProps {
+    name?: string;
+    checked: boolean;
+    children?: Snippet;
+  }
 
-  /**
-   * @typedef {Object} Props
-   * @property {string|undefined} [name]
-   * @property {boolean} checked
-   * @property {import('svelte').Snippet} [children]
-   */
-
-  /** @type {Props} */
-  let { name = undefined, checked = $bindable(), children } = $props();
+  let {
+    name = undefined,
+    checked = $bindable(),
+    children
+  }: CheckboxFieldProps = $props();
 </script>
 
 <input bind:checked={checked} {name} type="checkbox">
diff --git a/src/components/ui/forms/FormContainer.svelte b/src/components/ui/forms/FormContainer.svelte
index 6b35146..01950b8 100644
--- a/src/components/ui/forms/FormContainer.svelte
+++ b/src/components/ui/forms/FormContainer.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
-  interface Props {
-    children?: import('svelte').Snippet;
+  import type { Snippet } from "svelte";
+
+  interface FormContainerProps {
+    children?: Snippet;
   }
 
-  let { children }: Props = $props();
+  let { children }: FormContainerProps = $props();
 </script>
 
 <form>
diff --git a/src/components/ui/forms/FormControl.svelte b/src/components/ui/forms/FormControl.svelte
index eb432f8..5be6e92 100644
--- a/src/components/ui/forms/FormControl.svelte
+++ b/src/components/ui/forms/FormControl.svelte
@@ -1,14 +1,15 @@
-<script>
+<script lang="ts">
+  import type { Snippet } from "svelte";
 
+  interface FormControlProps {
+    label?: string;
+    children?: Snippet;
+  }
 
-  /**
-   * @typedef {Object} Props
-   * @property {string|undefined} [label]
-   * @property {import('svelte').Snippet} [children]
-   */
-
-  /** @type {Props} */
-  let { label = undefined, children } = $props();
+  let {
+    label = undefined,
+    children
+  }: FormControlProps = $props();
 </script>
 
 <label class="control">
diff --git a/src/components/ui/forms/SelectField.svelte b/src/components/ui/forms/SelectField.svelte
index dcfb7c0..b258179 100644
--- a/src/components/ui/forms/SelectField.svelte
+++ b/src/components/ui/forms/SelectField.svelte
@@ -1,34 +1,35 @@
-<script>
+<script lang="ts">
+  type SelectFieldOptionsObject = Record<string, string>;
 
+  interface SelectFieldProps {
+    options?: string[] | SelectFieldOptionsObject;
+    name?: string;
+    id?: string;
+    value?: string;
+  }
 
-  /**
-   * @typedef {Object} Props
-   * @property {string[]|Record<string, string>} [options]
-   * @property {string|undefined} [name]
-   * @property {string|undefined} [id]
-   * @property {string|undefined} [value]
-   */
-
-  /** @type {Props} */
   let {
     options = [],
     name = undefined,
     id = undefined,
     value = $bindable(undefined)
-  } = $props();
+  }: SelectFieldProps = $props();
 
-  /** @type {Record<string, string>} */
-  const optionPairs = $state({});
+  const optionPairs = $derived.by<SelectFieldOptionsObject>(() => {
+    const resultPairs: SelectFieldOptionsObject = {};
 
-  if (Array.isArray(options)) {
-    for (let option of options) {
-      optionPairs[option] = option;
+    if (Array.isArray(options)) {
+      for (let optionName of options) {
+        resultPairs[optionName] = optionName;
+      }
+    } else if (options && typeof options === 'object') {
+      Object.keys(options).forEach(optionKey => {
+        resultPairs[optionKey] = options[optionKey];
+      })
     }
-  } else if (options && typeof options === 'object') {
-    Object.keys(options).forEach((key) => {
-      optionPairs[key] = options[key];
-    })
-  }
+
+    return resultPairs;
+  });
 </script>
 
 <select bind:value={value} {id} {name}>
diff --git a/src/components/ui/forms/TagCategorySelectField.svelte b/src/components/ui/forms/TagCategorySelectField.svelte
index 86088be..956bdc9 100644
--- a/src/components/ui/forms/TagCategorySelectField.svelte
+++ b/src/components/ui/forms/TagCategorySelectField.svelte
@@ -1,28 +1,26 @@
-<script>
+<script lang="ts">
   import SelectField from "$components/ui/forms/SelectField.svelte";
   import { categories } from "$lib/booru/tag-categories";
 
+  interface TagCategorySelectFieldProps {
+    value?: string;
+  }
 
-  /**
-   * @typedef {Object} Props
-   * @property {string} [value]
-   */
+  let {
+    value = $bindable('')
+  }: TagCategorySelectFieldProps = $props();
 
-  /** @type {Props} */
-  let { value = $bindable('') } = $props();
+  let tagCategoriesOptions = $derived.by<Record<string, string>>(() => {
+    return categories.reduce<Record<string, string>>((options, category) => {
+      options[category] = category
+        .replace('-', ' ')
+        .replace(/(?<=\s|^)\w/g, (matchedCharacter) => matchedCharacter.toUpperCase());
 
-  /** @type {Record<string, string>} */
-  let tagCategoriesOptions = $state({
-    '': 'Default'
+      return options;
+    }, {
+      '': 'Default'
+    })
   });
-
-  tagCategoriesOptions = categories.reduce((options, category) => {
-    options[category] = category
-      .replace('-', ' ')
-      .replace(/(?<=\s|^)\w/g, (matchedCharacter) => matchedCharacter.toUpperCase());
-
-    return options;
-  }, tagCategoriesOptions);
 </script>
 
 <SelectField bind:value={value} name="tag_color" options={tagCategoriesOptions}/>
diff --git a/src/components/ui/forms/TextField.svelte b/src/components/ui/forms/TextField.svelte
index 4e10256..4264132 100644
--- a/src/components/ui/forms/TextField.svelte
+++ b/src/components/ui/forms/TextField.svelte
@@ -1,15 +1,15 @@
-<script>
+<script lang="ts">
+  interface TextFieldProps {
+    name?: string;
+    placeholder?: string;
+    value?: string;
+  }
 
-
-  /**
-   * @typedef {Object} Props
-   * @property {string|undefined} [name]
-   * @property {string|undefined} [placeholder]
-   * @property {string} [value]
-   */
-
-  /** @type {Props} */
-  let { name = undefined, placeholder = undefined, value = $bindable('') } = $props();
+  let {
+    name = undefined,
+    placeholder = undefined,
+    value = $bindable('')
+  }: TextFieldProps = $props();
 </script>
 
 <input bind:value={value} {name} {placeholder} type="text">