feat(check): narroweded types for const values

Author: adaptive-shield-matrix

lib/input/check/CheckMultiple.tsx

@@ -6,29 +6,27 @@ import { classesGridCols3xl } from "~ui/static/container/classesGridCols"
 import { classArr } from "~ui/utils/classArr"
 import { classMerge } from "~ui/utils/classMerge"
 import type { SignalObject } from "~ui/utils/createSignalObject"
-import type { HasGetOptions } from "~ui/utils/HasGetOptions"
-import type { HasValueSignalStringArray } from "~ui/utils/HasValueSignalStringArray"
-import type { MayHaveValueText } from "~ui/utils/HasValueText"
 import type { MayHaveButtonVariant } from "~ui/utils/MayHaveButtonVariant"
 import type { MayHaveClass } from "~ui/utils/MayHaveClass"
 import type { MayHaveDisabled } from "~ui/utils/MayHaveDisabled"
 import type { MayHaveId } from "~ui/utils/MayHaveId"
 import type { MayHaveInnerClass } from "~ui/utils/MayHaveInnerClass"
 
-export interface CheckMultipleProps
-  extends HasValueSignalStringArray,
-    HasGetOptions,
-    MayHaveValueText,
-    MayHaveId,
+export interface CheckMultipleProps<T extends string>
+  extends MayHaveId,
     MayHaveButtonVariant,
     MayHaveClass,
     MayHaveInnerClass,
     MayHaveDisabled {
+  // state
+  valueSignal: SignalObject<T[]>
+  getOptions: () => T[]
+  valueText?: (value: T) => string
   // styling
   optionClass?: string
 }
 
-export function CheckMultiple(p: CheckMultipleProps) {
+export function CheckMultiple<T extends string = string>(p: CheckMultipleProps<T>) {
   return (
     <div
       id={p.id}
@@ -54,17 +52,14 @@ export function CheckMultiple(p: CheckMultipleProps) {
   )
 }
 
-interface OptionListProps
-  extends HasValueSignalStringArray,
-    HasGetOptions,
-    MayHaveValueText,
-    MayHaveButtonVariant,
-    MayHaveInnerClass,
-    MayHaveDisabled {
+interface OptionListProps<T extends string> extends MayHaveButtonVariant, MayHaveDisabled, MayHaveInnerClass {
+  valueSignal: SignalObject<T[]>
+  getOptions: () => T[]
+  valueText?: (value: T) => string
   optionClass?: string
 }
 
-function OptionList(p: OptionListProps) {
+function OptionList<T extends string>(p: OptionListProps<T>) {
   return (
     <div class={innerClass(p.getOptions().length, p.innerClass)}>
       <For each={p.getOptions()}>
@@ -83,14 +78,14 @@ function OptionList(p: OptionListProps) {
   )
 }
 
-interface CheckOptionProps extends MayHaveButtonVariant, MayHaveDisabled {
-  option: string
-  valueSignal: SignalObject<string[]>
-  valueText?: (value: string) => string
+interface CheckOptionProps<T extends string> extends MayHaveButtonVariant, MayHaveDisabled {
+  option: T
+  valueSignal: SignalObject<T[]>
+  valueText?: (value: T) => string
   optionClass?: string
 }
 
-function CheckOption(p: CheckOptionProps) {
+function CheckOption<T extends string>(p: CheckOptionProps<T>) {
   const label = () => (p.valueText ? p.valueText(p.option) : p.option)
   const isSelected = () => p.valueSignal.get().includes(p.option)
 
@@ -119,7 +114,7 @@ function innerClass(optionAmount: number, innerClass?: string): string {
   return classArr(classesGridCols3xl, base)
 }
 
-function toggleOption(p: CheckOptionProps) {
+function toggleOption<T extends string>(p: CheckOptionProps<T>) {
   const hasOption = p.valueSignal.get().includes(p.option)
   if (hasOption) {
     optionRemove(p)
@@ -128,12 +123,12 @@ function toggleOption(p: CheckOptionProps) {
   }
 }
 
-function optionRemove(p: CheckOptionProps) {
+function optionRemove<T extends string>(p: CheckOptionProps<T>) {
   const newValues = p.valueSignal.get().filter((v) => v !== p.option)
   p.valueSignal.set(newValues)
 }
 
-function optionAdd(p: CheckOptionProps) {
+function optionAdd<T extends string>(p: CheckOptionProps<T>) {
   const newValues = [...p.valueSignal.get(), p.option]
   newValues.sort((a, b) => a.localeCompare(b))
   p.valueSignal.set(newValues)

lib/input/check/CheckSingle.tsx

@@ -6,29 +6,29 @@ import { classesGridCols3xl } from "~ui/static/container/classesGridCols"
 import { classArr } from "~ui/utils/classArr"
 import { classMerge } from "~ui/utils/classMerge"
 import type { SignalObject } from "~ui/utils/createSignalObject"
-import type { HasGetOptions } from "~ui/utils/HasGetOptions"
-import type { HasValueSignalString } from "~ui/utils/HasValueSignalString"
-import type { MayHaveValueText } from "~ui/utils/HasValueText"
 import type { MayHaveButtonVariant } from "~ui/utils/MayHaveButtonVariant"
 import type { MayHaveClass } from "~ui/utils/MayHaveClass"
 import type { MayHaveDisabled } from "~ui/utils/MayHaveDisabled"
 import type { MayHaveId } from "~ui/utils/MayHaveId"
 import type { MayHaveInnerClass } from "~ui/utils/MayHaveInnerClass"
 
-export interface CheckSingleProps
-  extends HasValueSignalString,
-    HasGetOptions,
-    MayHaveValueText,
-    MayHaveId,
+export interface CheckSingleProps<T extends string>
+  extends MayHaveId,
     MayHaveButtonVariant,
     MayHaveClass,
     MayHaveInnerClass,
     MayHaveDisabled {
+  // state
+  valueSignal: SignalObject<T>
+  getOptions: () => T[]
+  valueText?: (value: T) => string
+  // behavior
   disallowDeselection?: boolean
+  // styling
   optionClass?: string
 }
 
-export function CheckSingle(p: CheckSingleProps) {
+export function CheckSingle<T extends string = string>(p: CheckSingleProps<T>) {
   return (
     <div
       id={p.id}
@@ -55,18 +55,16 @@ export function CheckSingle(p: CheckSingleProps) {
   )
 }
 
-interface OptionListProps
-  extends HasValueSignalString,
-    HasGetOptions,
-    MayHaveValueText,
-    MayHaveButtonVariant,
-    MayHaveDisabled,
-    MayHaveInnerClass {
+interface OptionListProps<T extends string> extends MayHaveButtonVariant, MayHaveDisabled, MayHaveInnerClass {
+  valueSignal: SignalObject<T>
+  getOptions: () => T[]
+  valueText?: (value: T) => string
+
   disallowDeselection?: boolean
   optionClass?: string
 }
 
-function OptionList(p: OptionListProps) {
+function OptionList<T extends string>(p: OptionListProps<T>) {
   return (
     <div class={innerClass(p.getOptions().length, p.innerClass)}>
       <For each={p.getOptions()}>
@@ -95,15 +93,15 @@ function innerClass(optionAmount: number, innerClass?: string): string {
   return classArr(classesGridCols3xl, base)
 }
 
-interface CheckOptionProps extends MayHaveButtonVariant, MayHaveDisabled {
-  option: string
-  valueSignal: SignalObject<string>
-  valueText?: (value: string) => string
+interface CheckOptionProps<T extends string> extends MayHaveButtonVariant, MayHaveDisabled {
+  option: T
+  valueSignal: SignalObject<T>
+  valueText?: (value: T) => string
   disallowDeselection?: boolean
   optionClass?: string
 }
 
-function CheckOption(p: CheckOptionProps) {
+function CheckOption<T extends string>(p: CheckOptionProps<T>) {
   const label = () => (p.valueText ? p.valueText(p.option) : p.option)
   const isSelected = () => p.valueSignal.get() === p.option
 
@@ -123,10 +121,10 @@ function CheckOption(p: CheckOptionProps) {
   )
 }
 
-function toggleOption(p: CheckOptionProps, disallowDeselection?: boolean) {
+function toggleOption<T extends string>(p: CheckOptionProps<T>, disallowDeselection?: boolean) {
   const isSelected = p.valueSignal.get() === p.option
   if (isSelected && !disallowDeselection) {
-    p.valueSignal.set("")
+    p.valueSignal.set("" as T)
   } else {
     p.valueSignal.set(p.option)
   }