Improve code quality and remove unecessary typings

src/lib/components/inputs/basic/Input.stories.tsx

@@ -175,22 +175,7 @@ Search.args = {
   placeholder: 'Type your search'
 }
 
-const handleSubmit: FormEventHandler<HTMLFormElement> = (e: SyntheticEvent<HTMLFormElement>) => {
-  e.preventDefault()
-
-  const formElements = e.currentTarget.elements as typeof e.currentTarget.elements & {
-    emailInput: { value: string }
-  }
-
-  console.log(formElements)
-}
-
-export const AutoComplete: Story<InputProps> = (args: InputProps) => (
-  <form onSubmit={handleSubmit}>
-    <Input {...args} />
-    <input type="submit" value="Submit" />
-  </form>
-)
+export const AutoComplete: Story = Template.bind({})
 AutoComplete.args = {
   type: 'email',
   id: 'emailInput',

src/lib/components/inputs/basic/shared/AutocompleteValues.ts

@@ -0,0 +1,55 @@
+export type AutocompleteValues =
+  | 'off'
+  | 'on'
+  | 'name'
+  | 'honorific-prefix'
+  | 'given-name'
+  | 'additional-name'
+  | 'family-name'
+  | 'honorific-suffix'
+  | 'nickname'
+  | 'email'
+  | 'username'
+  | 'new-password'
+  | 'current-password'
+  | 'one-time-code'
+  | 'organization-title'
+  | 'organization'
+  | 'street-address'
+  | 'address-line1'
+  | 'address-line2'
+  | 'address-line3'
+  | 'address-level4'
+  | 'address-level3'
+  | 'address-level2'
+  | 'address-level1'
+  | 'country'
+  | 'country-name'
+  | 'postal-code'
+  | 'cc-name'
+  | 'cc-given-name'
+  | 'cc-additional-name'
+  | 'cc-family-name'
+  | 'cc-number'
+  | 'cc-exp'
+  | 'cc-exp-month'
+  | 'cc-exp-year'
+  | 'cc-csc'
+  | 'cc-type'
+  | 'transaction-currency'
+  | 'transaction-amount'
+  | 'language'
+  | 'bday'
+  | 'bday-day'
+  | 'bday-month'
+  | 'bday-year'
+  | 'sex'
+  | 'tel'
+  | 'tel-country-code'
+  | 'tel-national'
+  | 'tel-area-code'
+  | 'tel-local'
+  | 'tel-extension'
+  | 'impp'
+  | 'url'
+  | 'photo'

src/lib/components/inputs/basic/shared/types.ts

@@ -2,68 +2,13 @@ import { HTMLInputTypeAttribute, ReactNode, ChangeEventHandler } from 'react'
 import { IconName } from '../../../icons'
 import { isEmpty } from '../../../../helpers/general'
 import { SharedProps } from './styles'
+import { AutocompleteValues } from './AutocompleteValues'
 
 export type InputType = Extract<
   HTMLInputTypeAttribute,
   'checkbox' | 'email' | 'password' | 'radio' | 'search' | 'text'
 >
 
-export type AutocompleteValues =
-  | 'off'
-  | 'on'
-  | 'name'
-  | 'honorific-prefix'
-  | 'given-name'
-  | 'additional-name'
-  | 'family-name'
-  | 'honorific-suffix'
-  | 'nickname'
-  | 'email'
-  | 'username'
-  | 'new-password'
-  | 'current-password'
-  | 'one-time-code'
-  | 'organization-title'
-  | 'organization'
-  | 'street-address'
-  | 'address-line1'
-  | 'address-line2'
-  | 'address-line3'
-  | 'address-level4'
-  | 'address-level3'
-  | 'address-level2'
-  | 'address-level1'
-  | 'country'
-  | 'country-name'
-  | 'postal-code'
-  | 'cc-name'
-  | 'cc-given-name'
-  | 'cc-additional-name'
-  | 'cc-family-name'
-  | 'cc-number'
-  | 'cc-exp'
-  | 'cc-exp-month'
-  | 'cc-exp-year'
-  | 'cc-csc'
-  | 'cc-type'
-  | 'transaction-currency'
-  | 'transaction-amount'
-  | 'language'
-  | 'bday'
-  | 'bday-day'
-  | 'bday-month'
-  | 'bday-year'
-  | 'sex'
-  | 'tel'
-  | 'tel-country-code'
-  | 'tel-national'
-  | 'tel-area-code'
-  | 'tel-local'
-  | 'tel-extension'
-  | 'impp'
-  | 'url'
-  | 'photo'
-
 export type InputProps = {
   type: InputType
   name?: string
@@ -84,7 +29,8 @@ export type InputProps = {
 
 export type InputResponseType = 'error' | 'warning' | 'success' | 'none'
 
-export type CriteriaType = 'min' | 'max' | 'email' | 'required' | 'regex' | 'condition' | 'custom'
+export type CriteriaType = 'min' | 'max' | 'email' | 'required' | 'regex' | 'condition' | 'function'
+export type ValidationFunction = (value: any) => boolean
 
 export interface InputValidation {
   invalidMessage?: string
@@ -93,22 +39,22 @@ export interface InputValidation {
   validResponseType?: InputResponseType
   condition: {
     type: CriteriaType
-    rule?: number | boolean | RegExp | Function
+    rule?: number | boolean | RegExp | ValidationFunction
   }
   nonBlocking?: boolean
 }
 
 export type InputCriteriaResponse = {
   message: string
   type: InputResponseType
-  icon: IconName | undefined
+  icon?: IconName
   isValid: boolean
 }
 
 export const criteriaRule = (
   type: CriteriaType,
   value: any,
-  rule?: number | boolean | RegExp | Function
+  rule?: number | boolean | RegExp | ValidationFunction
 ) => {
   switch (type) {
     case 'required':
@@ -124,9 +70,9 @@ export const criteriaRule = (
     case 'regex':
       return (rule as RegExp).test(value as string)
     case 'condition':
-      return rule as boolean
-    case 'custom':
-      return (rule as Function)?.(value)
+      return value as boolean
+    case 'function':
+      return (rule as ValidationFunction)?.(value)
     default:
       throw new Error('Unknown criteria type')
   }

src/lib/hooks/useInputValidation.ts

@@ -10,14 +10,14 @@ import {
 import { isEmpty } from 'lodash'
 import { IconName } from '../components'
 
-const getValidationIcon = (errorType: InputResponseType) => {
+const getValidationIcon = (errorType: InputResponseType): IconName => {
   switch (errorType) {
     case 'error':
-      return 'close_filled' as IconName
+      return 'close_filled'
     case 'warning':
-      return 'warning_filled' as IconName
+      return 'warning_filled'
     case 'success':
-      return 'check_circle_filled' as IconName
+      return 'check_circle_filled'
     default:
       return undefined
   }