From 021db72c01b1d519c4e2b74bd5aa1fa7b25ef37b Mon Sep 17 00:00:00 2001
From: Pranay Kothapalli <pranaykothapalli@gmail.com>
Date: Fri, 1 Nov 2024 12:12:18 +0530
Subject: [PATCH 1/2] Add TextField component with story for Storybook

---
 src/components/ui/TextField/TextField.tsx     |  7 ++++++
 .../ui/TextField/stories/TextField.stories.js | 22 +++++++++++++++++++
 2 files changed, 29 insertions(+)
 create mode 100644 src/components/ui/TextField/TextField.tsx
 create mode 100644 src/components/ui/TextField/stories/TextField.stories.js

diff --git a/src/components/ui/TextField/TextField.tsx b/src/components/ui/TextField/TextField.tsx
new file mode 100644
index 00000000..b3530f17
--- /dev/null
+++ b/src/components/ui/TextField/TextField.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const TextField = () => {
+    return <input type="text" />;
+};
+
+export default TextField;
diff --git a/src/components/ui/TextField/stories/TextField.stories.js b/src/components/ui/TextField/stories/TextField.stories.js
new file mode 100644
index 00000000..b3f0ca6d
--- /dev/null
+++ b/src/components/ui/TextField/stories/TextField.stories.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import TextField from '../TextField';
+import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
+
+export default {
+    title: 'Components/TextField',
+    component: TextField,
+    render: (args) => <Template {...args} />
+};
+
+const Template = (args) => {
+    return <SandboxEditor className="space-y-4 pt-4">
+        <TextField {...args} />
+    </SandboxEditor>;
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const All = {
+    args: {
+        className: ''
+    }
+};

From ce4e1fed76ea17ec4273993cceb2652e134764b4 Mon Sep 17 00:00:00 2001
From: Pranay Kothapalli <pranaykothapalli@gmail.com>
Date: Fri, 1 Nov 2024 13:57:07 +0530
Subject: [PATCH 2/2] Refactor TextField component with input fragments

---
 src/components/ui/TextField/TextField.tsx     | 25 +++++++++++++++++--
 .../ui/TextField/fragments/TextFieldInput.tsx |  7 ++++++
 .../ui/TextField/fragments/TextFieldRoot.tsx  | 19 ++++++++++++++
 .../ui/TextField/fragments/TextFieldSlot.tsx  |  7 ++++++
 .../ui/TextField/stories/TextField.stories.js | 25 +++++++++++++++++++
 styles/themes/components/text-field.scss      |  6 +++++
 styles/themes/default.scss                    |  1 +
 7 files changed, 88 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ui/TextField/fragments/TextFieldInput.tsx
 create mode 100644 src/components/ui/TextField/fragments/TextFieldRoot.tsx
 create mode 100644 src/components/ui/TextField/fragments/TextFieldSlot.tsx
 create mode 100644 styles/themes/components/text-field.scss

diff --git a/src/components/ui/TextField/TextField.tsx b/src/components/ui/TextField/TextField.tsx
index b3530f17..a4f47ba5 100644
--- a/src/components/ui/TextField/TextField.tsx
+++ b/src/components/ui/TextField/TextField.tsx
@@ -1,7 +1,28 @@
 import React from 'react';
 
-const TextField = () => {
-    return <input type="text" />;
+import TextFieldRoot from './fragments/TextFieldRoot';
+import TextFieldInput from './fragments/TextFieldInput';
+import TextFieldSlot from './fragments/TextFieldSlot';
+
+type TextFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
+    className?: string;
+    customRootClass?: string;
+};
+
+const TextField = ({ className = '', customRootClass = '', value, onChange, ...props }: TextFieldProps) => {
+    return (
+        <TextFieldRoot customRootClass={customRootClass} className={className}>
+            <TextFieldSlot>
+                slot 1
+            </TextFieldSlot>
+            {/*  */}
+            <TextFieldInput type="text" value={value} onChange={onChange} {...props} />
+            {/*  */}
+            <TextFieldSlot>
+                slot 2
+            </TextFieldSlot>
+        </TextFieldRoot>
+    );
 };
 
 export default TextField;
diff --git a/src/components/ui/TextField/fragments/TextFieldInput.tsx b/src/components/ui/TextField/fragments/TextFieldInput.tsx
new file mode 100644
index 00000000..8d76590b
--- /dev/null
+++ b/src/components/ui/TextField/fragments/TextFieldInput.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const TextFieldInput = ({ className = '', ...props }: React.InputHTMLAttributes<HTMLInputElement>) => {
+    return <input className={`${className}`} {...props} />;
+};
+
+export default TextFieldInput;
diff --git a/src/components/ui/TextField/fragments/TextFieldRoot.tsx b/src/components/ui/TextField/fragments/TextFieldRoot.tsx
new file mode 100644
index 00000000..9c033a6f
--- /dev/null
+++ b/src/components/ui/TextField/fragments/TextFieldRoot.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { customClassSwitcher } from '~/core';
+
+const COMPONENT_NAME = 'TextField';
+
+type TextFieldRootProps = React.HTMLAttributes<HTMLDivElement> & {
+    className?: string;
+    customRootClass?: string;
+};
+
+const TextFieldRoot = ({ className = '', customRootClass = '', ...props }: TextFieldRootProps) => {
+    const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
+    return <div className={`${rootClass} ${className}`} {...props} />;
+};
+
+TextFieldRoot.displayName = COMPONENT_NAME;
+
+export default TextFieldRoot;
diff --git a/src/components/ui/TextField/fragments/TextFieldSlot.tsx b/src/components/ui/TextField/fragments/TextFieldSlot.tsx
new file mode 100644
index 00000000..e5557ef5
--- /dev/null
+++ b/src/components/ui/TextField/fragments/TextFieldSlot.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const TextFieldSlot = ({ children }: React.HTMLAttributes<HTMLDivElement>) => {
+    return <div className="rad-ui-text-field-slot">{children}</div>;
+};
+
+export default TextFieldSlot;
diff --git a/src/components/ui/TextField/stories/TextField.stories.js b/src/components/ui/TextField/stories/TextField.stories.js
index b3f0ca6d..5d77db0b 100644
--- a/src/components/ui/TextField/stories/TextField.stories.js
+++ b/src/components/ui/TextField/stories/TextField.stories.js
@@ -2,6 +2,8 @@ import React from 'react';
 import TextField from '../TextField';
 import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
 
+import Button from '~/components/ui/Button/Button';
+
 export default {
     title: 'Components/TextField',
     component: TextField,
@@ -20,3 +22,26 @@ export const All = {
         className: ''
     }
 };
+
+const WithFormTemplate = (args) => {
+    const [value, setValue] = React.useState('');
+    const handleChange = (e) => {
+        setValue(e.target.value);
+    };
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        console.log(value);
+    };
+
+    return <SandboxEditor className="space-y-4 pt-4">
+        <form onSubmit={handleSubmit}>
+            <TextField {...args} value={value} onChange={handleChange} />
+            <Button type="submit" onClick={handleSubmit}>Submit</Button>
+        </form>
+    </SandboxEditor>;
+};
+
+export const WithForm = WithFormTemplate.bind({});
+WithForm.args = {
+};
diff --git a/styles/themes/components/text-field.scss b/styles/themes/components/text-field.scss
new file mode 100644
index 00000000..845bc0e3
--- /dev/null
+++ b/styles/themes/components/text-field.scss
@@ -0,0 +1,6 @@
+.rad-ui-text-field{
+    display: flex;
+    border: 1px solid var(--rad-ui-color-gray-1000);
+    border-radius: 8px;
+    padding: 8px 12px;
+}
\ No newline at end of file
diff --git a/styles/themes/default.scss b/styles/themes/default.scss
index 84640c0d..a824dea8 100644
--- a/styles/themes/default.scss
+++ b/styles/themes/default.scss
@@ -14,6 +14,7 @@
 @import "./components/link.scss";
 @import "./components/separator.scss";
 @import "./components/tabs.scss";
+@import "./components/text-field.scss";
 @import "./components/text.scss";
 @import "./components/textarea.scss";
 @import "./components/progress.scss";