From 3d6d6ce63416097683c351a2648d52c75ac9b0ec Mon Sep 17 00:00:00 2001
From: Maximus <ten.maksim97@gmail.com>
Date: Fri, 5 Aug 2022 12:30:13 +0300
Subject: [PATCH 1/3] create raw component

---
 src/components/TextInput.tsx      | 21 +++++++++++++++++++++
 src/stories/TextInput.stories.tsx | 17 +++++++++++++++++
 2 files changed, 38 insertions(+)
 create mode 100644 src/components/TextInput.tsx
 create mode 100644 src/stories/TextInput.stories.tsx

diff --git a/src/components/TextInput.tsx b/src/components/TextInput.tsx
new file mode 100644
index 0000000..a75a357
--- /dev/null
+++ b/src/components/TextInput.tsx
@@ -0,0 +1,21 @@
+import classNames from "classnames";
+import { omit } from "lodash";
+import React from "react";
+
+type Props = {
+    placeholder?: string | undefined,
+    color?: string |undefined, 
+    className?: string | undefined,
+} & Omit<React.InputHTMLAttributes<HTMLInputElement> ,"">;
+
+export const TextInput = ({
+    placeholder = undefined,
+    color = "white",
+    className,
+    ...props
+} :Props) => {
+    return(
+        <input type="text" placeholder={placeholder} color={color} className={classNames({className})} />
+    );
+    
+}
diff --git a/src/stories/TextInput.stories.tsx b/src/stories/TextInput.stories.tsx
new file mode 100644
index 0000000..68795bb
--- /dev/null
+++ b/src/stories/TextInput.stories.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import {TextInput} from "../components/TextInput";
+
+export default {
+    title: 'Text Input',
+    component: TextInput,
+} as ComponentMeta<typeof TextInput>;
+
+const Template: ComponentStory<typeof TextInput> = (args) => <TextInput {...args} />
+
+export const TextInputStory = Template.bind({});
+
+TextInputStory.args ={
+    placeholder: "uaaaaaa",
+    color: 'blue'
+}
\ No newline at end of file

From 00c29d39d0908ce32efdb8eca86afcc1a2c4a80e Mon Sep 17 00:00:00 2001
From: Maximus <ten.maksim97@gmail.com>
Date: Mon, 8 Aug 2022 12:10:13 +0300
Subject: [PATCH 2/3] first stylings

---
 src/components/TextInput.tsx      | 22 +++++++++++++++++++---
 src/stories/TextInput.stories.tsx |  3 +--
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/components/TextInput.tsx b/src/components/TextInput.tsx
index a75a357..db08bca 100644
--- a/src/components/TextInput.tsx
+++ b/src/components/TextInput.tsx
@@ -1,21 +1,37 @@
 import classNames from "classnames";
 import { omit } from "lodash";
 import React from "react";
+import "../index.css";
 
 type Props = {
     placeholder?: string | undefined,
-    color?: string |undefined, 
     className?: string | undefined,
 } & Omit<React.InputHTMLAttributes<HTMLInputElement> ,"">;
 
 export const TextInput = ({
     placeholder = undefined,
-    color = "white",
     className,
     ...props
 } :Props) => {
     return(
-        <input type="text" placeholder={placeholder} color={color} className={classNames({className})} />
+        <input 
+            type="text" 
+            placeholder={placeholder} 
+            className={classNames(
+                'w-100',
+                'border',
+                'border-2',
+                'border-solid',
+                'border-gray-200',
+                'text-gray-900',
+                'rounded',
+                'outline-none',
+                'hover:border-gray-300',
+                'focus:border-gray-500',                
+                {
+                className
+            })} 
+        />
     );
     
 }
diff --git a/src/stories/TextInput.stories.tsx b/src/stories/TextInput.stories.tsx
index 68795bb..449a39a 100644
--- a/src/stories/TextInput.stories.tsx
+++ b/src/stories/TextInput.stories.tsx
@@ -12,6 +12,5 @@ const Template: ComponentStory<typeof TextInput> = (args) => <TextInput {...args
 export const TextInputStory = Template.bind({});
 
 TextInputStory.args ={
-    placeholder: "uaaaaaa",
-    color: 'blue'
+    placeholder: "Search",
 }
\ No newline at end of file

From f89be00751342a06f260df6380bb635ccdace47c Mon Sep 17 00:00:00 2001
From: Maximus <ten.maksim97@gmail.com>
Date: Mon, 8 Aug 2022 16:27:54 +0300
Subject: [PATCH 3/3] added 2 views of text input component: when it in group
 and not in group

---
 src/components/TextInput.tsx      | 75 +++++++++++++++++++------------
 src/stories/TextInput.stories.tsx |  4 +-
 2 files changed, 50 insertions(+), 29 deletions(-)

diff --git a/src/components/TextInput.tsx b/src/components/TextInput.tsx
index db08bca..45dbe29 100644
--- a/src/components/TextInput.tsx
+++ b/src/components/TextInput.tsx
@@ -1,37 +1,56 @@
 import classNames from "classnames";
-import { omit } from "lodash";
+import { initial, isEmpty, omit } from "lodash";
 import React from "react";
 import "../index.css";
 
 type Props = {
-    placeholder?: string | undefined,
-    className?: string | undefined,
-} & Omit<React.InputHTMLAttributes<HTMLInputElement> ,"">;
+    inGroup?: boolean,
+    placeholder?: string | undefined;
+    className?: string | undefined;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "">;
+
+const inputNotInGroup = [
+    `border
+    border-2
+    border-solid
+    border-gray-200
+    hover:border-gray-500
+    active:border-gray-500
+    focus:border-gray-500`
+]
+
+const inputInGroup = [
+    `border-none
+    hover:none
+    active:none
+    focus:none
+    `
+]
 
 export const TextInput = ({
-    placeholder = undefined,
+    inGroup = false, // We should use this flag to choose how we will style our text input component
+    placeholder,
     className,
     ...props
-} :Props) => {
-    return(
-        <input 
-            type="text" 
-            placeholder={placeholder} 
-            className={classNames(
-                'w-100',
-                'border',
-                'border-2',
-                'border-solid',
-                'border-gray-200',
-                'text-gray-900',
-                'rounded',
-                'outline-none',
-                'hover:border-gray-300',
-                'focus:border-gray-500',                
-                {
-                className
-            })} 
-        />
-    );
-    
-}
+}: Props) => {
+
+  return (
+    <input
+      type="text"
+      placeholder={placeholder}
+      className={classNames([
+        "w-full",
+        "text-gray-900",
+        "rounded",
+        "outline-none",
+        "placeholder-text-500",
+        {   
+            //it this part we define how we style 
+            [`${inputNotInGroup}`] : !inGroup,
+            [`${inputInGroup}`] : inGroup,
+        },
+        className,        
+      ])}
+    />
+  );
+};
diff --git a/src/stories/TextInput.stories.tsx b/src/stories/TextInput.stories.tsx
index 449a39a..177c8b2 100644
--- a/src/stories/TextInput.stories.tsx
+++ b/src/stories/TextInput.stories.tsx
@@ -12,5 +12,7 @@ const Template: ComponentStory<typeof TextInput> = (args) => <TextInput {...args
 export const TextInputStory = Template.bind({});
 
 TextInputStory.args ={
+    inGroup: true,
     placeholder: "Search",
-}
\ No newline at end of file
+    className: ["px-4", "py-2.5"]
+};