From a684ee7ba888c0ab66c48a2a803b23fea6325c02 Mon Sep 17 00:00:00 2001
From: Giorgio Aquino <giorgio.aquino@nearform.com>
Date: Wed, 24 Jul 2024 09:11:53 +0200
Subject: [PATCH] feat!: remove default left icon in the input component (#537)

---
 src/components/Input/index.tsx                | 40 +++++++++++-----
 stories/Input/Docs.mdx                        | 47 +++++++++++++------
 stories/Input/Input.example.tsx               |  6 +--
 .../{Input.stories.ts => Input.stories.tsx}   | 16 +++++--
 4 files changed, 76 insertions(+), 33 deletions(-)
 rename stories/Input/{Input.stories.ts => Input.stories.tsx} (79%)

diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx
index 8076fc3a..550da436 100644
--- a/src/components/Input/index.tsx
+++ b/src/components/Input/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { cn } from '@/lib/utils'
 import { cva } from 'class-variance-authority'
-import { BsX, BsPersonFill, BsSearch } from '@/assets'
+import { BsX, BsSearch } from '@/assets'
 
 const leftSideVariants = cva(['flex', 'items-center', 'text-inherit'])
 
@@ -70,9 +70,26 @@ const inputVariants = cva(
   }
 )
 
+type InputType =
+  | 'color'
+  | 'date'
+  | 'datetime-local'
+  | 'email'
+  | 'month'
+  | 'number'
+  | 'password'
+  | 'search'
+  | 'tel'
+  | 'text'
+  | 'time'
+  | 'url'
+  | 'week'
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  | (string & {})
+
 interface InputProps extends React.HTMLProps<HTMLInputElement> {
   variant: 'primary' | 'error' | 'success'
-  type: 'text' | 'search'
+  type: InputType
   formClassName?: string
   leftSideClassName?: string
   leftSideChild?: React.ReactNode
@@ -80,11 +97,11 @@ interface InputProps extends React.HTMLProps<HTMLInputElement> {
   onClear: () => void
 }
 
-const convertTypeToComponent = {
-  left: {
-    text: <BsPersonFill />,
+const convertTypeToLeftComponent = (type: InputType) => {
+  const mapping: Partial<Record<InputType, React.ReactNode>> = {
     search: <BsSearch />
   }
+  return mapping[type] ?? null
 }
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
@@ -102,17 +119,18 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     },
     ref
   ) => {
-    const leftSideComponent =
-      leftSideChild ?? convertTypeToComponent.left[`${type}`]
+    const leftSideComponent = leftSideChild ?? convertTypeToLeftComponent(type)
     const rightSideComponent = rightSideChild ?? <BsX strokeWidth={0.6} />
 
     return (
       <label className={cn(formVariants({ variant }), formClassName)}>
-        <div className={cn(leftSideVariants(), leftSideClassName)}>
-          {leftSideComponent}
-        </div>
+        {leftSideComponent && (
+          <div className={cn(leftSideVariants(), leftSideClassName)}>
+            {leftSideComponent}
+          </div>
+        )}
         <input
-          type="text" //for now only accept text
+          type={type}
           className={cn(inputVariants({ variant }), className)}
           ref={ref}
           {...props}
diff --git a/stories/Input/Docs.mdx b/stories/Input/Docs.mdx
index 41bfca88..c4728f9d 100644
--- a/stories/Input/Docs.mdx
+++ b/stories/Input/Docs.mdx
@@ -4,9 +4,9 @@ import * as InputStories from './Input.stories'
 
 <Meta of={InputStories} />
 
-# Input (Text / Search)
+# Input
 
-A search is a user interface element that includes a search bar or input field, often accompanied by a search button or icon. It enables users to enter keywords or queries and initiate a search for specific content or information within an application or website. The search component helps users quickly find relevant data or resources by matching their input with the available content. This only supports search and text inputs currently. ß
+A search is a user interface element that includes a search bar or input field, often accompanied by a search button or icon. It enables users to enter keywords or queries and initiate a search for specific content or information within an application or website. The search component helps users quickly find relevant data or resources by matching their input with the available content.
 
 ## Primary Text
 
@@ -28,6 +28,10 @@ A search is a user interface element that includes a search bar or input field,
 
 <Canvas of={InputStories.Search} />
 
+## Left Icon
+
+<Canvas of={InputStories.LeftIcon} />
+
 ## Attributes
 
 This component accepts all attributes for the input component of type text, with the addition of `onClear` function which declares the clear button functionality.
@@ -35,10 +39,10 @@ This component accepts all attributes for the input component of type text, with
 ## Input
 
 ```tsx
-import React from 'react'
+iimport React, { HTMLInputTypeAttribute } from 'react'
 import { cn } from '@/lib/utils'
 import { cva } from 'class-variance-authority'
-import { BsX, BsPersonFill, BsSearch } from '@/assets'
+import { BsX, BsSearch } from '@/assets'
 
 const leftSideVariants = cva(['flex', 'items-center', 'text-inherit'])
 
@@ -109,7 +113,21 @@ const inputVariants = cva(
 
 interface InputProps extends React.HTMLProps<HTMLInputElement> {
   variant: 'primary' | 'error' | 'success'
-  type: 'text' | 'search'
+  type:
+    | 'color'
+    | 'date'
+    | 'datetime-local'
+    | 'email'
+    | 'month'
+    | 'number'
+    | 'password'
+    | 'search'
+    | 'tel'
+    | 'text'
+    | 'time'
+    | 'url'
+    | 'week'
+    | (string & {})
   formClassName?: string
   leftSideClassName?: string
   leftSideChild?: React.ReactNode
@@ -117,11 +135,11 @@ interface InputProps extends React.HTMLProps<HTMLInputElement> {
   onClear: () => void
 }
 
-const convertTypeToComponent = {
-  left: {
-    text: <BsPersonFill />,
+const convertTypeToLeftComponent = (type: HTMLInputTypeAttribute) => {
+  const mapping: Partial<Record<HTMLInputTypeAttribute, React.ReactNode>> = {
     search: <BsSearch />
   }
+  return mapping[type] ?? null
 }
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
@@ -139,17 +157,18 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     },
     ref
   ) => {
-    const leftSideComponent =
-      leftSideChild ?? convertTypeToComponent.left[`${type}`]
+    const leftSideComponent = leftSideChild ?? convertTypeToLeftComponent(type)
     const rightSideComponent = rightSideChild ?? <BsX strokeWidth={0.6} />
 
     return (
       <label className={cn(formVariants({ variant }), formClassName)}>
-        <div className={cn(leftSideVariants(), leftSideClassName)}>
-          {leftSideComponent}
-        </div>
+        {leftSideComponent && (
+          <div className={cn(leftSideVariants(), leftSideClassName)}>
+            {leftSideComponent}
+          </div>
+        )}
         <input
-          type="text" //for now only accept text
+          type={type}
           className={cn(inputVariants({ variant }), className)}
           ref={ref}
           {...props}
diff --git a/stories/Input/Input.example.tsx b/stories/Input/Input.example.tsx
index 3e7223b4..54c9b1b9 100644
--- a/stories/Input/Input.example.tsx
+++ b/stories/Input/Input.example.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { Input, InputProps } from '@/index'
 
-const InputDemo = ({ variant, type, disabled }: InputProps) => {
+const InputDemo = (props: Omit<InputProps, 'onChange' | 'onClear'>) => {
   const [value, setValue] = useState('')
   const handleOnClear = () => {
     setValue('')
@@ -12,11 +12,9 @@ const InputDemo = ({ variant, type, disabled }: InputProps) => {
   return (
     <Input
       value={value}
-      variant={variant}
-      type={type}
       onClear={handleOnClear}
       onChange={handleOnChange}
-      disabled={disabled}
+      {...props}
     />
   )
 }
diff --git a/stories/Input/Input.stories.ts b/stories/Input/Input.stories.tsx
similarity index 79%
rename from stories/Input/Input.stories.ts
rename to stories/Input/Input.stories.tsx
index 47ca0932..f63d0bd8 100644
--- a/stories/Input/Input.stories.ts
+++ b/stories/Input/Input.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 import { InputDemo as Input } from './Input.example'
+import { BsPersonFill } from 'react-icons/bs'
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta = {
@@ -10,11 +11,10 @@ const meta = {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
     layout: 'centered'
   },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  // // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
   argTypes: {
-    checked: {
-      options: [true, false, 'indeterminate'],
-      control: { type: 'radio' }
+    leftSideChild: {
+      control: false
     },
     className: {
       controle: 'text',
@@ -60,3 +60,11 @@ export const Search: Story = {
     type: 'search'
   }
 }
+
+export const LeftIcon: Story = {
+  args: {
+    variant: 'primary',
+    type: 'text',
+    leftSideChild: <BsPersonFill />
+  }
+}