From 2ebd577e62b8099f2c79c1fe078469842ed2619d Mon Sep 17 00:00:00 2001 From: darsh175223 Date: Mon, 21 Oct 2024 18:56:36 -0700 Subject: [PATCH 1/7] Added the email input field --- package-lock.json | 23 ++++++++++++++++++ package.json | 1 + src/components/applications/application.tsx | 16 +++++-------- src/components/ui/input.tsx | 25 ++++++++++++++++++++ src/components/ui/label.tsx | 26 +++++++++++++++++++++ 5 files changed, 81 insertions(+), 10 deletions(-) create mode 100644 src/components/ui/input.tsx create mode 100644 src/components/ui/label.tsx diff --git a/package-lock.json b/package-lock.json index 7633c23..5f31482 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.1.0", "dependencies": { "@radix-ui/react-alert-dialog": "^1.1.2", + "@radix-ui/react-label": "^2.1.0", "@radix-ui/react-slot": "^1.1.0", "@tanstack/react-query": "^5.53.3", "class-variance-authority": "^0.7.0", @@ -727,6 +728,28 @@ } } }, + "node_modules/@radix-ui/react-label": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.0.tgz", + "integrity": "sha512-peLblDlFw/ngk3UWq0VnYaOLy6agTZZ+MUO/WhVfm14vJGML+xH4FAl2XQGLqdefjNb7ApRg6Yn7U42ZhmYXdw==", + "dependencies": { + "@radix-ui/react-primitive": "2.0.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-portal": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.2.tgz", diff --git a/package.json b/package.json index 4224942..f6150af 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ }, "dependencies": { "@radix-ui/react-alert-dialog": "^1.1.2", + "@radix-ui/react-label": "^2.1.0", "@radix-ui/react-slot": "^1.1.0", "@tanstack/react-query": "^5.53.3", "class-variance-authority": "^0.7.0", diff --git a/src/components/applications/application.tsx b/src/components/applications/application.tsx index 87b4c10..ee1a519 100644 --- a/src/components/applications/application.tsx +++ b/src/components/applications/application.tsx @@ -4,6 +4,8 @@ import Textarea from "@/components/global/inputs/textarea"; import Select from "@/components/global/inputs/select"; import Text from "@/components/global/inputs/text"; import { Questions } from "@/types/questions"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; interface props { title: string; @@ -26,16 +28,10 @@ const Application = ({ title, questions }: props) => { }} /> - +
+ + +
{questions.map((question, index) => { const { type } = question; diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx new file mode 100644 index 0000000..6fdaa82 --- /dev/null +++ b/src/components/ui/input.tsx @@ -0,0 +1,25 @@ +import * as React from "react"; + +import { cn } from "@/lib/utils"; + +export interface InputProps + extends React.InputHTMLAttributes {} + +const Input = React.forwardRef( + ({ className, type, ...props }, ref) => { + return ( + + ); + }, +); +Input.displayName = "Input"; + +export { Input }; diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx new file mode 100644 index 0000000..84f8b0c --- /dev/null +++ b/src/components/ui/label.tsx @@ -0,0 +1,26 @@ +"use client"; + +import * as React from "react"; +import * as LabelPrimitive from "@radix-ui/react-label"; +import { cva, type VariantProps } from "class-variance-authority"; + +import { cn } from "@/lib/utils"; + +const labelVariants = cva( + "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", +); + +const Label = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & + VariantProps +>(({ className, ...props }, ref) => ( + +)); +Label.displayName = LabelPrimitive.Root.displayName; + +export { Label }; From 75829e845d07cef2cda8380d1c5ed95b54b9e01b Mon Sep 17 00:00:00 2001 From: darsh175223 Date: Sat, 26 Oct 2024 15:22:49 -0700 Subject: [PATCH 2/7] Added a small gap between label and input --- src/components/applications/application.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/applications/application.tsx b/src/components/applications/application.tsx index ee1a519..5cb24b6 100644 --- a/src/components/applications/application.tsx +++ b/src/components/applications/application.tsx @@ -28,7 +28,7 @@ const Application = ({ title, questions }: props) => { }} /> -
+
From afdeee3b6397536b266378c3e76b23011f0eb548 Mon Sep 17 00:00:00 2001 From: darsh175223 Date: Sat, 26 Oct 2024 20:01:48 -0700 Subject: [PATCH 3/7] Made a component for InputWithLabel --- src/components/applications/application.tsx | 14 ++++++++------ src/components/global/inputs/input.tsx | 17 ++++++++++++++--- src/components/ui/input.tsx | 8 +++++++- 3 files changed, 29 insertions(+), 10 deletions(-) diff --git a/src/components/applications/application.tsx b/src/components/applications/application.tsx index 5cb24b6..d48d10b 100644 --- a/src/components/applications/application.tsx +++ b/src/components/applications/application.tsx @@ -4,8 +4,7 @@ import Textarea from "@/components/global/inputs/textarea"; import Select from "@/components/global/inputs/select"; import Text from "@/components/global/inputs/text"; import { Questions } from "@/types/questions"; -import { Input } from "@/components/ui/input"; -import { Label } from "@/components/ui/label"; +import InputWithLabel from "@/components/global/inputs/input"; interface props { title: string; @@ -28,10 +27,13 @@ const Application = ({ title, questions }: props) => { }} /> -
- - -
+ {questions.map((question, index) => { const { type } = question; diff --git a/src/components/global/inputs/input.tsx b/src/components/global/inputs/input.tsx index a909d0a..d4643e7 100644 --- a/src/components/global/inputs/input.tsx +++ b/src/components/global/inputs/input.tsx @@ -1,5 +1,16 @@ -const Input = () => { - return
Input
; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; +import { TextInput } from "@/types/questions"; + +const InputWithLabel = ({ meta }: { meta: TextInput }) => { + const { title, placeholder, value } = meta; + + return ( +
+ + +
+ ); }; -export default Input; +export default InputWithLabel; diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx index 6fdaa82..1863248 100644 --- a/src/components/ui/input.tsx +++ b/src/components/ui/input.tsx @@ -3,7 +3,13 @@ import * as React from "react"; import { cn } from "@/lib/utils"; export interface InputProps - extends React.InputHTMLAttributes {} + extends React.InputHTMLAttributes { + meta?: { + title: string; + placeholder: string; + value?: string; + }; +} const Input = React.forwardRef( ({ className, type, ...props }, ref) => { From c104e66b1ccfe6db453fd17393050320dafe5a48 Mon Sep 17 00:00:00 2001 From: darsh175223 Date: Sat, 26 Oct 2024 20:05:22 -0700 Subject: [PATCH 4/7] Added more fields to the InputWithLabel field --- src/components/applications/application.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/applications/application.tsx b/src/components/applications/application.tsx index d48d10b..6b278c8 100644 --- a/src/components/applications/application.tsx +++ b/src/components/applications/application.tsx @@ -31,7 +31,10 @@ const Application = ({ title, questions }: props) => { meta={{ title: "Email", placeholder: "Enter your email", - value: "", // Initial value can be empty + value: "", + type: "text", + maxLength: 250, + disabled: false, }} /> From 01cbfbb835ae2b0cad01b1a76ec619aad5e00eae Mon Sep 17 00:00:00 2001 From: shahdivyank Date: Mon, 28 Oct 2024 17:29:29 -0700 Subject: [PATCH 5/7] fix --- src/components/applications/application.tsx | 4 ++-- src/components/global/inputs/input.tsx | 13 +++++++++---- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/components/applications/application.tsx b/src/components/applications/application.tsx index 6b278c8..a0dbcad 100644 --- a/src/components/applications/application.tsx +++ b/src/components/applications/application.tsx @@ -4,7 +4,7 @@ import Textarea from "@/components/global/inputs/textarea"; import Select from "@/components/global/inputs/select"; import Text from "@/components/global/inputs/text"; import { Questions } from "@/types/questions"; -import InputWithLabel from "@/components/global/inputs/input"; +import Input from "@/components/global/inputs/input"; interface props { title: string; @@ -27,7 +27,7 @@ const Application = ({ title, questions }: props) => { }} /> - { +const Input = ({ meta }: { meta: TextInput }) => { const { title, placeholder, value } = meta; return (
- +
); }; -export default InputWithLabel; +export default Input; From bdc43766c994807e61f498650d8a6801bc4780dd Mon Sep 17 00:00:00 2001 From: shahdivyank Date: Mon, 28 Oct 2024 17:32:12 -0700 Subject: [PATCH 6/7] move to text --- src/components/global/inputs/input.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/global/inputs/input.tsx b/src/components/global/inputs/input.tsx index 873d19f..4472a81 100644 --- a/src/components/global/inputs/input.tsx +++ b/src/components/global/inputs/input.tsx @@ -9,7 +9,7 @@ const Input = ({ meta }: { meta: TextInput }) => {
Date: Mon, 28 Oct 2024 17:33:55 -0700 Subject: [PATCH 7/7] update type --- src/components/global/inputs/input.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/global/inputs/input.tsx b/src/components/global/inputs/input.tsx index 4472a81..bcf18a8 100644 --- a/src/components/global/inputs/input.tsx +++ b/src/components/global/inputs/input.tsx @@ -3,13 +3,13 @@ import { Label } from "@/components/ui/label"; import { TextInput } from "@/types/questions"; const Input = ({ meta }: { meta: TextInput }) => { - const { title, placeholder, value } = meta; + const { title, placeholder, value, type } = meta; return (