From 1bca91a2994542e2027a06cdcea18bc292d9f084 Mon Sep 17 00:00:00 2001 From: Junior Vidotti Date: Wed, 4 Sep 2024 06:51:51 -0400 Subject: [PATCH 01/10] formatting --- .prettierrc | 5 +- README.md | 43 ++- next.config.mjs | 2 +- src/app/(protected)/dashboard/page.tsx | 12 +- src/app/(protected)/layout.tsx | 91 +++--- src/app/(protected)/leads/page.tsx | 8 +- src/app/(protected)/settings/billing/page.tsx | 8 +- src/app/(protected)/settings/team/page.tsx | 8 +- src/app/(protected)/welcome/page.tsx | 20 +- src/app/(public)/layout.tsx | 66 +++-- src/app/(public)/login/page.tsx | 180 ++++++------ src/app/(public)/page.tsx | 18 +- src/app/StoreProvider.tsx | 18 +- src/app/layout.tsx | 14 +- src/components/cards/plain-card.tsx | 21 +- src/components/cards/title-card.tsx | 57 ++-- src/components/input/error-text.tsx | 8 +- src/components/input/input-tags.tsx | 53 ++-- src/components/input/input-text.tsx | 15 +- src/components/input/select-box.tsx | 20 +- src/components/input/select-color.tsx | 46 +-- src/components/input/text-area.tsx | 15 +- src/components/typography/error-text.tsx | 4 +- src/components/typography/subtitle.tsx | 9 +- src/containers/confirmation-modal-body.tsx | 70 +++-- src/containers/header.tsx | 118 +++++--- src/containers/left-sidebar.tsx | 258 +++++++++------- src/containers/modal-layout.tsx | 72 +++-- src/containers/nav-menu.tsx | 9 +- src/containers/right-sidebar.tsx | 100 ++++--- src/containers/sidebar-submenu.tsx | 106 ++++--- src/features/common/headerSlice.ts | 52 ++-- src/features/common/modalSlice.ts | 63 ++-- .../common/notification-body-right-drawer.tsx | 45 ++- src/features/common/rightDrawerSlice.ts | 52 ++-- src/features/common/userSlice.ts | 70 +++-- src/features/dashboard/DashboardStats.tsx | 50 ++-- src/features/dashboard/index.tsx | 83 ++++-- .../leads/components/add-lead-modal-body.tsx | 124 +++++--- src/features/leads/index.tsx | 183 +++++++----- src/features/leads/leadSlice.ts | 84 +++--- src/features/login/intro-pointers.tsx | 46 +-- src/features/login/landing-intro.tsx | 46 +-- src/features/settings/billing.tsx | 86 +++--- src/features/settings/team.tsx | 147 ++++----- src/helper/app-constants.ts | 19 +- src/helper/dummy-data.ts | 278 ++++++++++++++---- src/helper/sidebar-routes.tsx | 86 +++--- src/helper/types.ts | 43 ++- src/helper/utils.ts | 2 +- src/lib/AuthProvider.tsx | 71 +++-- src/lib/auth.ts | 25 +- src/lib/hooks.ts | 10 +- src/lib/init-app.ts | 36 +-- src/lib/init-axios.ts | 30 +- src/lib/store.ts | 34 +-- tailwind.config.ts | 38 +-- tsconfig.json | 8 +- 58 files changed, 1851 insertions(+), 1434 deletions(-) diff --git a/.prettierrc b/.prettierrc index 3b17a87..b7395a1 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,6 +1,5 @@ { - "tabWidth": 4, + "tabWidth": 2, "semi": true, "singleQuote": true -} -. \ No newline at end of file +} \ No newline at end of file diff --git a/README.md b/README.md index 3033e17..46e5c37 100644 --- a/README.md +++ b/README.md @@ -1,42 +1,42 @@ - -# Daisy UI Next JS Admin Dashboard Template - DashWind -[![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](https://choosealicense.com/licenses/mit/) +# Daisy UI Next JS Admin Dashboard Template - DashWind -This is a free admin dashboard template that uses **Daisy UI** and **Next js** App Router with **Typescript** Support. It has **fully customizable and themable CSS** CSS and is powered by Tailwind CSS utility classes. Additionally, it comes with **redux toolkit** and other libraries already set up. +[![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](https://choosealicense.com/licenses/mit/) +This is a free admin dashboard template that uses **Daisy UI** and **Next js** +App Router with **Typescript** Support. It has **fully customizable and themable +CSS** CSS and is powered by Tailwind CSS utility classes. Additionally, it comes +with **redux toolkit** and other libraries already set up. ## Preview -๐Ÿš€ [Live preview](https://admin-dashboard-nextjs-daisyui-template.vercel.app/login) - +๐Ÿš€ +[Live preview](https://admin-dashboard-nextjs-daisyui-template.vercel.app/login) ![App Screenshot](https://ik.imagekit.io/vu5t8xb15vzcx/Screenshot%202024-05-20%20at%202.40.57%E2%80%AFAM_rtNks76n1.png?updatedAt=1716153065872) - - ## Features - **Next JS 14 - App Router** configured -- **Typescript 5** +- **Typescript 5** - Token based user **authentication** - **Submenu support** in sidebar - Store management using **redux toolkit** - **Daisy UI** components and **Tailwind** support - **Right and left sidebar**, Universal loader, notifications - + ## Installation Go to project directory and run (make sure you have node installed first) ```bash - npm install - npm start +npm install +npm start ``` - + ## Core Libraries Used - [React JS v18.2.0](https://reactjs.org/) @@ -56,26 +56,21 @@ Go to project directory and run (make sure you have node installed first) - - - - ## Preview ๐Ÿš€ [Live preview](https://admin-dashboard-nextjs-daisyui-template.vercel.app/) - ## Roadmap - - ## Contributing Contributions are always welcome! @@ -84,10 +79,6 @@ Contributions are always welcome! [![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](https://choosealicense.com/licenses/mit/) - ## Feedback - - - diff --git a/next.config.mjs b/next.config.mjs index f99e326..61cd5ed 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -1,6 +1,6 @@ /** @type {import('next').NextConfig} */ const nextConfig = { - reactStrictMode : false + reactStrictMode: false, }; export default nextConfig; diff --git a/src/app/(protected)/dashboard/page.tsx b/src/app/(protected)/dashboard/page.tsx index d54bd6e..159ea80 100644 --- a/src/app/(protected)/dashboard/page.tsx +++ b/src/app/(protected)/dashboard/page.tsx @@ -1,13 +1,11 @@ - -import Dashboard from '@/features/dashboard' +import Dashboard from '@/features/dashboard'; function Page() { - return ( -
- +
+
- ) + ); } -export default Page \ No newline at end of file +export default Page; diff --git a/src/app/(protected)/layout.tsx b/src/app/(protected)/layout.tsx index 584f8dd..64b2b99 100644 --- a/src/app/(protected)/layout.tsx +++ b/src/app/(protected)/layout.tsx @@ -1,69 +1,74 @@ // app/[workspaceId]/layout.tsx -"use client" - -import React, { useEffect, useRef } from 'react' -import type { Metadata } from 'next' -import axios from 'axios' -import { useAppDispatch, useAppSelector } from '@/lib/hooks' -import { useRouter } from 'next/navigation' -import auth from '@/lib/auth' -import { ToastContainer } from 'react-toastify' -import { useAuth } from '@/lib/AuthProvider' -import Header from '@/containers/header' -import LeftSidebar from '@/containers/left-sidebar' -import RightSidebar from '@/containers/right-sidebar' -import ModalLayout from '@/containers/modal-layout' +"use client"; +import React, { useEffect, useRef } from "react"; +import type { Metadata } from "next"; +import axios from "axios"; +import { useAppDispatch, useAppSelector } from "@/lib/hooks"; +import { useRouter } from "next/navigation"; +import auth from "@/lib/auth"; +import { ToastContainer } from "react-toastify"; +import { useAuth } from "@/lib/AuthProvider"; +import Header from "@/containers/header"; +import LeftSidebar from "@/containers/left-sidebar"; +import RightSidebar from "@/containers/right-sidebar"; +import ModalLayout from "@/containers/modal-layout"; interface LayoutProps { - children: React.ReactNode - params: { workspaceSlug: string } + children: React.ReactNode; + params: { workspaceSlug: string }; } export default function ProtectedLayout({ children, params }: LayoutProps) { - const { isAuthenticated, isLoading } = useAuth() + const { isAuthenticated, isLoading } = useAuth(); - const router = useRouter() - const dispatch = useAppDispatch() + const router = useRouter(); + const dispatch = useAppDispatch(); const mainContentRef = useRef(null); useEffect(() => { if (!isLoading && !isAuthenticated) { - router.replace('/login') + router.replace("/login"); } - }, [isAuthenticated, isLoading, router]) - + }, [isAuthenticated, isLoading, router]); if (isLoading) { - return
Loading...
+ return
Loading...
; } if (!isAuthenticated) { - return null + return null; } return ( <> -
- -
-
-
- {children} -
-
-
- -
+
+ +
+
+
+ {children} +
+
+
+ +
- {/* Right drawer - containing secondary content like notifications list etc.. */} - + {/* Right drawer - containing secondary content like notifications list etc.. */} + - {/* Notification layout container */} - + {/* Notification layout container */} + - {/* Modal layout container */} - + {/* Modal layout container */} + - ) -} \ No newline at end of file + ); +} diff --git a/src/app/(protected)/leads/page.tsx b/src/app/(protected)/leads/page.tsx index bccac19..be8175c 100644 --- a/src/app/(protected)/leads/page.tsx +++ b/src/app/(protected)/leads/page.tsx @@ -1,9 +1,7 @@ -import Leads from '@/features/leads' +import Leads from '@/features/leads'; function Page() { - return ( - - ) + return ; } -export default Page \ No newline at end of file +export default Page; diff --git a/src/app/(protected)/settings/billing/page.tsx b/src/app/(protected)/settings/billing/page.tsx index 5a11d8a..631f7b8 100644 --- a/src/app/(protected)/settings/billing/page.tsx +++ b/src/app/(protected)/settings/billing/page.tsx @@ -1,9 +1,7 @@ -import Billing from "@/features/settings/billing" +import Billing from "@/features/settings/billing"; function Page() { - return ( - - ) + return ; } -export default Page \ No newline at end of file +export default Page; diff --git a/src/app/(protected)/settings/team/page.tsx b/src/app/(protected)/settings/team/page.tsx index da21783..ffe82a4 100644 --- a/src/app/(protected)/settings/team/page.tsx +++ b/src/app/(protected)/settings/team/page.tsx @@ -1,9 +1,7 @@ -import Team from "@/features/settings/team" +import Team from "@/features/settings/team"; function Page() { - return ( - - ) + return ; } -export default Page \ No newline at end of file +export default Page; diff --git a/src/app/(protected)/welcome/page.tsx b/src/app/(protected)/welcome/page.tsx index b420a6a..d65843c 100644 --- a/src/app/(protected)/welcome/page.tsx +++ b/src/app/(protected)/welcome/page.tsx @@ -1,18 +1,20 @@ -import IntroPointers from '@/features/login/intro-pointers' -import Link from 'next/link' -import React from 'react' +import IntroPointers from "@/features/login/intro-pointers"; +import Link from "next/link"; +import React from "react"; function Welcome() { return (
-
-
+
+
- + + + +
-
- ) + ); } -export default Welcome \ No newline at end of file +export default Welcome; diff --git a/src/app/(public)/layout.tsx b/src/app/(public)/layout.tsx index 7049999..d459594 100644 --- a/src/app/(public)/layout.tsx +++ b/src/app/(public)/layout.tsx @@ -1,38 +1,44 @@ // app/(public)/layout.tsx -'use client' -import { useEffect, useRef } from 'react' -import { useRouter, usePathname } from 'next/navigation' -import { useAuth } from '@/lib/AuthProvider' -import { useAppSelector } from '@/lib/hooks' -import auth from '@/lib/auth' +"use client"; +import { useEffect, useRef } from "react"; +import { usePathname, useRouter } from "next/navigation"; +import { useAuth } from "@/lib/AuthProvider"; +import { useAppSelector } from "@/lib/hooks"; +import auth from "@/lib/auth"; - -export default function PublicLayout({ children }: { children: React.ReactNode }) { - const router = useRouter() - const pathname = usePathname() - const { isAuthenticated, isLoading } = useAuth() +export default function PublicLayout({ + children, +}: { + children: React.ReactNode; +}) { + const router = useRouter(); + const pathname = usePathname(); + const { isAuthenticated, isLoading } = useAuth(); const mainContentRef = useRef(null); - - // If user is authenticated and still opening login pages, redirect to welcome page useEffect(() => { - if (!isLoading && isAuthenticated && pathname === '/login') { - router.replace(`/welcome`) + if (!isLoading && isAuthenticated && pathname === "/login") { + router.replace(`/welcome`); } - console.log("public layout...", isAuthenticated, isLoading) - }, [isAuthenticated, isLoading, router, pathname]) + console.log("public layout...", isAuthenticated, isLoading); + }, [isAuthenticated, isLoading, router, pathname]); - return <> -
- -
- -
- {children} -
-
-
-
- -} \ No newline at end of file + return ( + <> +
+ +
+
+ {children} +
+
+
+
+ + ); +} diff --git a/src/app/(public)/login/page.tsx b/src/app/(public)/login/page.tsx index 3489d5d..7fee081 100644 --- a/src/app/(public)/login/page.tsx +++ b/src/app/(public)/login/page.tsx @@ -1,78 +1,74 @@ -"use client" +"use client"; -import LandingIntro from '@/features/login/landing-intro'; -import InputText from '@/components/input/input-text'; -import ErrorText from '@/components/typography/error-text'; -import React, { useState } from 'react'; -import { useRouter } from 'next/navigation'; -import { useAuth } from '@/lib/AuthProvider'; +import LandingIntro from "@/features/login/landing-intro"; +import InputText from "@/components/input/input-text"; +import ErrorText from "@/components/typography/error-text"; +import React, { useState } from "react"; +import { useRouter } from "next/navigation"; +import { useAuth } from "@/lib/AuthProvider"; interface LoginObj { otp: string; emailId: string; } - function Login(): JSX.Element { - const router = useRouter(); const [loading, setLoading] = useState(false); - const [errorMessage, setErrorMessage] = useState(''); + const [errorMessage, setErrorMessage] = useState(""); const [showLoginPage, setShowLoginPage] = useState(true); - const [isOtpSent, setIsOtpSent] = useState(false) - const { login } = useAuth() + const [isOtpSent, setIsOtpSent] = useState(false); + const { login } = useAuth(); const [loginObj, setLoginObj] = useState({ - otp: '', - emailId: '', + otp: "", + emailId: "", }); - const submitForm = (e: React.FormEvent): void => { - e.preventDefault() - setErrorMessage(''); - if(loading)return; - if(isOtpSent){ - submitVerificationCode() - }else{ - sendMailOtp() + e.preventDefault(); + setErrorMessage(""); + if (loading) return; + if (isOtpSent) { + submitVerificationCode(); + } else { + sendMailOtp(); } }; const sendMailOtp = () => { - if (loginObj.emailId.trim() === '') { - setErrorMessage('Email Id is required! (use any value)'); - return; - }else{ - setLoading(true); - // Simulate API call - setTimeout(() => { - setIsOtpSent(true) - setLoading(false); - }, 1000); - } - } + if (loginObj.emailId.trim() === "") { + setErrorMessage("Email Id is required! (use any value)"); + return; + } else { + setLoading(true); + // Simulate API call + setTimeout(() => { + setIsOtpSent(true); + setLoading(false); + }, 1000); + } + }; const submitVerificationCode = () => { - if (loginObj.otp.trim() === '') { - setErrorMessage('OTP is required! (use any value)'); - return; - }else{ - setLoading(true); - // Simulate API call - setTimeout(() => { - loginUser({token : "asdsadsddsad$$token"}) - }, 2000); - } - } - + if (loginObj.otp.trim() === "") { + setErrorMessage("OTP is required! (use any value)"); + return; + } else { + setLoading(true); + // Simulate API call + setTimeout(() => { + loginUser({ token: "asdsadsddsad$$token" }); + }, 2000); + } + }; - const loginUser = async({ token }: { token: string;}) => { - await login(token) + const loginUser = async ({ token }: { token: string }) => { + await login(token); }; const updateFormValue = (updateType: string, value: string): void => { - setErrorMessage(''); + setErrorMessage(""); setLoginObj({ ...loginObj, [updateType]: value }); }; @@ -84,54 +80,56 @@ function Login(): JSX.Element {
-
submitForm(e)}>
+ {!isOtpSent && ( + <> +

+ Enter Email ID to Continue +

- { - !isOtpSent && - <> -

Enter Email ID to Continue

- - - - } - - { - isOtpSent && <> - -

Enter verification code received on {loginObj.emailId}

-

Didn't receive mail? Check spam folder

- - - } + type="email" + defaultValue={loginObj.emailId} + updateType="emailId" + containerStyle="mt-4" + labelTitle="Enter your Email Id" + placeholder="Ex - dashwind@gmail.com" + updateFormValue={updateFormValue} + /> + + )} + + {isOtpSent && ( + <> +

+ Enter verification code received on {loginObj.emailId} +

+

+ Didn't receive mail? Check spam folder +

- - + + + )}
- -
- {errorMessage && {errorMessage}} - + +
+ {errorMessage && ( + {errorMessage} + )} +
diff --git a/src/app/(public)/page.tsx b/src/app/(public)/page.tsx index 45d3e35..9897e20 100644 --- a/src/app/(public)/page.tsx +++ b/src/app/(public)/page.tsx @@ -1,18 +1,16 @@ -"use client" +"use client"; -import React, { useEffect } from 'react' -import { useRouter, usePathname } from 'next/navigation' +import React, { useEffect } from "react"; +import { usePathname, useRouter } from "next/navigation"; function Page() { - const router = useRouter() + const router = useRouter(); useEffect(() => { - router.replace(`/login`) - }, []) + router.replace(`/login`); + }, [router]); - return ( -
Loading...
- ) + return
Loading...
; } -export default Page \ No newline at end of file +export default Page; diff --git a/src/app/StoreProvider.tsx b/src/app/StoreProvider.tsx index 8d435bd..88472b1 100644 --- a/src/app/StoreProvider.tsx +++ b/src/app/StoreProvider.tsx @@ -1,18 +1,18 @@ -'use client' -import { useRef } from 'react' -import { Provider } from 'react-redux' -import { makeStore, AppStore } from '../lib/store' +"use client"; +import { useRef } from "react"; +import { Provider } from "react-redux"; +import { AppStore, makeStore } from "../lib/store"; export default function StoreProvider({ children, }: { - children: React.ReactNode + children: React.ReactNode; }) { - const storeRef = useRef() + const storeRef = useRef(); if (!storeRef.current) { // Create the store instance the first time this renders - storeRef.current = makeStore() + storeRef.current = makeStore(); } - return {children} -} \ No newline at end of file + return {children}; +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index efae404..046704e 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,17 +1,19 @@ import { Inter } from "next/font/google"; import "./globals.css"; -import StoreProvider from './StoreProvider'; +import StoreProvider from "./StoreProvider"; import { AuthProvider } from "@/lib/AuthProvider"; import initializeApp from "@/lib/init-app"; const inter = Inter({ subsets: ["latin"] }); // Initialize different libraries -initializeApp() -console.log("root layout...") +initializeApp(); +console.log("root layout..."); -export default function RootLayout({ children }: { children: React.ReactNode }) { -console.log("root layout...") +export default function RootLayout( + { children }: { children: React.ReactNode }, +) { + console.log("root layout..."); return ( @@ -24,4 +26,4 @@ console.log("root layout...") ); -} \ No newline at end of file +} diff --git a/src/components/cards/plain-card.tsx b/src/components/cards/plain-card.tsx index 1299734..c7b391b 100644 --- a/src/components/cards/plain-card.tsx +++ b/src/components/cards/plain-card.tsx @@ -1,18 +1,21 @@ import React, { ReactNode } from "react"; interface PlainCardProps { - children: ReactNode; - extraClass?: string; - showCursor?: boolean; + children: ReactNode; + extraClass?: string; + showCursor?: boolean; } function PlainCard({ children, extraClass, showCursor }: PlainCardProps) { - return ( -
- {children} -
- - ); + return ( +
+ {children} +
+ ); } export default PlainCard; diff --git a/src/components/cards/title-card.tsx b/src/components/cards/title-card.tsx index d7623c4..966e82c 100644 --- a/src/components/cards/title-card.tsx +++ b/src/components/cards/title-card.tsx @@ -2,35 +2,38 @@ import React, { ReactNode } from "react"; import Subtitle from "../typography/subtitle"; interface TitleCardProps { - title: string; - children: ReactNode; - topMargin?: string; - TopSideButtons?: ReactNode; + title: string; + children: ReactNode; + topMargin?: string; + TopSideButtons?: ReactNode; } -function TitleCard({ title, children, topMargin, TopSideButtons }: TitleCardProps) { - return ( -
- - {/* Title for Card */} - - {title} - - {/* Top side button, show only if present */} - { - TopSideButtons &&
{TopSideButtons}
- } - - -
- - {/** Card Body */} -
- {children} -
-
- - ); +function TitleCard( + { title, children, topMargin, TopSideButtons }: TitleCardProps, +) { + return ( +
+ {/* Title for Card */} + + {title} + + {/* Top side button, show only if present */} + {TopSideButtons && ( +
{TopSideButtons}
+ )} + + +
+ + {/** Card Body */} +
+ {children} +
+
+ ); } export default TitleCard; diff --git a/src/components/input/error-text.tsx b/src/components/input/error-text.tsx index 84bfaf7..c9f6ad8 100644 --- a/src/components/input/error-text.tsx +++ b/src/components/input/error-text.tsx @@ -1,14 +1,12 @@ import React from "react"; interface Props { - styleClass?: string; - children: React.ReactNode; + styleClass?: string; + children: React.ReactNode; } function ErrorText({ styleClass = "", children }: Props) { - return ( -

{children}

- ); + return

{children}

; } export default ErrorText; diff --git a/src/components/input/input-tags.tsx b/src/components/input/input-tags.tsx index bb209c7..25931e0 100644 --- a/src/components/input/input-tags.tsx +++ b/src/components/input/input-tags.tsx @@ -1,6 +1,6 @@ -"use Client" -import React, { useEffect, useState } from 'react'; -import XCircleIcon from '@heroicons/react/24/outline/XCircleIcon' +"use Client"; +import React, { useEffect, useState } from "react"; +import XCircleIcon from "@heroicons/react/24/outline/XCircleIcon"; interface InputTagsProps { labelTitle: string; @@ -25,32 +25,34 @@ function InputTags({ const [tags, setTags] = useState(defaultValue); const updateInputValue = (val: string): void => { - console.log("hwewew") + console.log("hwewew"); setValue(val); // updateFormValue(updateKey, val); // Pass both updateKey and value }; useEffect(() => { - if (value.includes(',')) { - const newTags = value.split(',').map(tag => tag.trim()).filter(tag => tag !== '') - setTags([...tags, ...newTags]); - setValue(''); + if (value.includes(",")) { + const newTags = value.split(",").map((tag) => tag.trim()).filter((tag) => + tag !== "" + ); + setTags([...tags, ...newTags]); + setValue(""); } }, [value]); const handleKeyDown = (e: React.KeyboardEvent): void => { - if (e.key === 'Enter') { + if (e.key === "Enter") { e.preventDefault(); // Prevent form submission if this input is in a form - if(value.trim()!= ""){ + if (value.trim() != "") { setTags([...tags, value.trim()]); } - setValue(''); + setValue(""); } }; useEffect(() => { updateFormValue(updateKey, tags); // Pass both updateKey and value - }, [tags]) + }, [tags]); const handleTagRemove = (index: number): void => { const updatedTags = [...tags]; @@ -58,23 +60,32 @@ function InputTags({ setTags(updatedTags); }; - return (

- { - tags.map((t, k) => ( -

handleTagRemove(k)}>{t}
- )) - } + {tags.map((t, k) => ( +
handleTagRemove(k)} + > + {t} + +
+ ))}

updateInputValue(e.target.value)} onKeyDown={handleKeyDown} className="input input-bordered w-full mt-2" diff --git a/src/components/input/input-text.tsx b/src/components/input/input-text.tsx index 8c25f55..7e0730a 100644 --- a/src/components/input/input-text.tsx +++ b/src/components/input/input-text.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState } from "react"; interface InputTextProps { labelTitle: string; @@ -21,7 +21,7 @@ function InputText({ updateFormValue, updateType, }: InputTextProps): JSX.Element { - const [value, setValue] = useState(defaultValue || ''); + const [value, setValue] = useState(defaultValue || ""); const updateInputValue = (val: string): void => { setValue(val); @@ -31,12 +31,17 @@ function InputText({ return (
updateInputValue(e.target.value)} className="input input-bordered w-full" /> diff --git a/src/components/input/select-box.tsx b/src/components/input/select-box.tsx index b52dcae..b53afb0 100644 --- a/src/components/input/select-box.tsx +++ b/src/components/input/select-box.tsx @@ -1,6 +1,6 @@ -import axios from 'axios'; -import React, { useState, useEffect, FC } from 'react'; -import InformationCircleIcon from '@heroicons/react/24/outline/InformationCircleIcon'; +import axios from "axios"; +import React, { FC, useEffect, useState } from "react"; +import InformationCircleIcon from "@heroicons/react/24/outline/InformationCircleIcon"; interface Option { name: string; @@ -24,11 +24,11 @@ const SelectBox: FC = (props) => { const { labelTitle, labelDescription, - defaultValue = '', - containerStyle = '', + defaultValue = "", + containerStyle = "", placeholder, - labelStyle = '', - selectBoxStyle = '', + labelStyle = "", + selectBoxStyle = "", options, updateKey, updateFormValue, @@ -37,14 +37,14 @@ const SelectBox: FC = (props) => { const [value, setValue] = useState(defaultValue); const updateValue = (newValue: string) => { - console.log(newValue) + console.log(newValue); updateFormValue(updateKey, newValue); // Pass both updateKey and value // setValue(newValue); }; useEffect(() => { - setValue(defaultValue) - }, [defaultValue]) + setValue(defaultValue); + }, [defaultValue]); return (
diff --git a/src/components/input/select-color.tsx b/src/components/input/select-color.tsx index 52ca959..73b262a 100644 --- a/src/components/input/select-color.tsx +++ b/src/components/input/select-color.tsx @@ -1,7 +1,7 @@ -import axios from 'axios'; -import React, { useState, useEffect, FC } from 'react'; -import InformationCircleIcon from '@heroicons/react/24/outline/InformationCircleIcon'; -import CheckCircleIcon from '@heroicons/react/24/solid/CheckCircleIcon'; +import axios from "axios"; +import React, { FC, useEffect, useState } from "react"; +import InformationCircleIcon from "@heroicons/react/24/outline/InformationCircleIcon"; +import CheckCircleIcon from "@heroicons/react/24/solid/CheckCircleIcon"; interface Option { name: string; @@ -25,11 +25,11 @@ const SelectColor: FC = (props) => { const { labelTitle, labelDescription, - defaultValue = '', - containerStyle = '', + defaultValue = "", + containerStyle = "", placeholder, - labelStyle = '', - SelectColorStyle = '', + labelStyle = "", + SelectColorStyle = "", options, updateKey, updateFormValue, @@ -43,8 +43,8 @@ const SelectColor: FC = (props) => { }; useEffect(() => { - setValue(defaultValue) - }, [defaultValue]) + setValue(defaultValue); + }, [defaultValue]); return (
@@ -59,18 +59,24 @@ const SelectColor: FC = (props) => {
-
- { - options.map((o,k) => { - return (
updateValue(o.value)}>{value == o.value ? : ""}
) - }) - } +
+ {options.map((o, k) => { + return ( +
updateValue(o.value)} + > + {value == o.value + ? + : ""} +
+ ); + })}
- -
- - +
); }; diff --git a/src/components/input/text-area.tsx b/src/components/input/text-area.tsx index 03c2bec..6c36aaf 100644 --- a/src/components/input/text-area.tsx +++ b/src/components/input/text-area.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState } from "react"; interface TextAreaProps { labelTitle: string; @@ -19,7 +19,7 @@ function TextArea({ updateFormValue, updateType, }: TextAreaProps): JSX.Element { - const [value, setValue] = useState(defaultValue || ''); + const [value, setValue] = useState(defaultValue || ""); const updateTextAreaValue = (val: string): void => { setValue(val); @@ -29,11 +29,16 @@ function TextArea({ return (