From 9882875a99f8e336e7b630ea130a9aaf90bd01d6 Mon Sep 17 00:00:00 2001
From: Pedro Guerrato <pguerrato@gmail.com>
Date: Wed, 16 Feb 2022 13:19:36 -0300
Subject: [PATCH] Improve code quality and remove unecessary typings

---
 .../components/inputs/basic/Input.stories.tsx | 17 +----
 .../inputs/basic/shared/AutocompleteValues.ts | 55 ++++++++++++++
 .../components/inputs/basic/shared/types.ts   | 72 +++----------------
 src/lib/hooks/useInputValidation.ts           |  8 +--
 4 files changed, 69 insertions(+), 83 deletions(-)
 create mode 100644 src/lib/components/inputs/basic/shared/AutocompleteValues.ts

diff --git a/src/lib/components/inputs/basic/Input.stories.tsx b/src/lib/components/inputs/basic/Input.stories.tsx
index 8b06d749..0535dc3d 100644
--- a/src/lib/components/inputs/basic/Input.stories.tsx
+++ b/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',
diff --git a/src/lib/components/inputs/basic/shared/AutocompleteValues.ts b/src/lib/components/inputs/basic/shared/AutocompleteValues.ts
new file mode 100644
index 00000000..411ee2a8
--- /dev/null
+++ b/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'
diff --git a/src/lib/components/inputs/basic/shared/types.ts b/src/lib/components/inputs/basic/shared/types.ts
index e0daa37d..ff60cb67 100644
--- a/src/lib/components/inputs/basic/shared/types.ts
+++ b/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,7 +39,7 @@ export interface InputValidation {
   validResponseType?: InputResponseType
   condition: {
     type: CriteriaType
-    rule?: number | boolean | RegExp | Function
+    rule?: number | boolean | RegExp | ValidationFunction
   }
   nonBlocking?: boolean
 }
@@ -101,14 +47,14 @@ export interface InputValidation {
 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')
   }
diff --git a/src/lib/hooks/useInputValidation.ts b/src/lib/hooks/useInputValidation.ts
index e39bc837..2a8d83a8 100644
--- a/src/lib/hooks/useInputValidation.ts
+++ b/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
   }