Updates UI for dropdown

package.json

@@ -3,18 +3,27 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@hookform/resolvers": "^2.9.1",
+    "@reduxjs/toolkit": "^1.8.2",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.2.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.1",
     "@types/node": "^16.11.36",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.5",
+    "antd": "^4.21.2",
+    "axios": "^0.27.2",
+    "bootstrap": "^5.1.3",
+    "countries-list": "^2.6.1",
     "formik": "^2.2.9",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-hook-form": "^7.32.1",
+    "react-hooks": "^1.0.1",
     "react-scripts": "5.0.1",
-    "reactstrap": "^9.0.3",
+    "react-select": "^5.3.2",
+    "redux": "^4.2.0",
     "typescript": "^4.7.2",
     "web-vitals": "^2.1.4",
     "yup": "^0.32.11"

src/App.css

@@ -36,3 +36,7 @@
     transform: rotate(360deg);
   }
 }
+
+.color-black{
+  color: black
+}

src/App.tsx

@@ -1,37 +1,52 @@
-import React from "react";
-import logo from "./logo.svg";
+import React, { useEffect, useState } from "react";
 import "./App.css";
+import { Button, Alert } from "antd";
+import { Steps } from "antd";
 
 import { Link } from "./link-tag";
 import { FormFields } from "./form";
-import { Test } from "./dropdown";
+import { SignUpForm } from "./signup";
 
-const user = [
-  {
-    name: "Ashish",
-    city: "Amravati",
-    age: 29,
-  },
-  {
-    name: "Rucheta",
-    city: "Mumbai",
-    age: 30,
-  },
-];
+import { ReactHooks } from "./ReactHooks";
+
+const { Step } = Steps;
 
 function App() {
+  const [currentStep, setCurrentStep] = useState(0);
+  const [message, setMessage] = useState("");
+
+  useEffect(() => {
+    setMessage(`Selected step = ${currentStep}`);
+  }, [currentStep]);
+
   return (
     <div className="App">
-      <header className="App-header">
-        <Test></Test>
-        {/* <img src={logo} className="App-logo" alt="logo" /> */}
-        {/* <FormFields></FormFields> */}
-        {/* <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <Link user={user[0]}></Link>
-        <Link user={user[1]}></Link> */}
-      </header>
+      <ReactHooks></ReactHooks>
+      {/* <Button
+        onClick={() => {
+          if (currentStep > 0) setCurrentStep(currentStep - 1);
+        }}
+      >
+        Prev
+      </Button>
+      <Button
+        onClick={() => {
+          if (currentStep < 2) setCurrentStep(currentStep + 1);
+        }}
+      >
+        Next
+      </Button>
+      <Steps current={currentStep}>
+        <Step title="Finished" description="This is a description1." />
+        <Step
+          title="In Progress"
+          subTitle="Left 00:00:08"
+          description="This is a description2."
+        />
+        <Step title="Waiting" description="This is a description3." />
+      </Steps>
+      <Alert type="success" message={message}></Alert>
+      <SignUpForm></SignUpForm> */}
     </div>
   );
 }

src/ReactHooks.tsx

@@ -0,0 +1,77 @@
+// import React from "react";
+// import { useForm } from "react-hook-form";
+// import { yupResolver } from "@hookform/resolvers/yup";
+// import * as yup from "yup";
+
+// const fieldMandatoryMessage = "This field is required";
+
+// export const ReactHooks = () => {
+//   const schema = yup
+//     .object({
+//       email: yup
+//         .string()
+//         .min(2, "Minimum 2 character are required")
+//         .email("Email should be valid")
+//         .required({ fieldMandatoryMessage }),
+//       password: yup
+//         .string()
+//         .required({ fieldMandatoryMessage })
+//         .min(8, "Password should be 8 characters long")
+//         .uppercase("One uppercase character required")
+//         .lowercase("One uppercase character required"),
+//     })
+//     .required();
+//   const {
+//     register,
+//     handleSubmit,
+//     formState: { errors },
+//   } = useForm({
+//     resolver: yupResolver(schema),
+//   });
+//   const onSubmit = (data: any) => console.log(data);
+//   return (
+//     <form onSubmit={handleSubmit(onSubmit)}>
+//       <input {...register("email")} />
+//       {/* <p>{errors.email?.message}</p> */}
+//       <input {...register("password")} />
+//       {/* <p>{errors.password?.message}</p> */}
+//       {console.log(errors)}
+//       <input type="submit" />
+//     </form>
+//   );
+// };
+
+import React from "react";
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+const schema = yup
+  .object({
+    firstName: yup.string().required(),
+    age: yup.number().positive().integer().required(),
+  })
+  .required();
+
+export const ReactHooks = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(schema),
+  });
+  const onSubmit = (data: any) => console.log(data);
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <input {...register("firstName")} />
+      <p>{errors.firstName?.message}</p>
+
+      <input {...register("age")} />
+      <p>{errors.age?.message}</p>
+
+      <input type="submit" />
+    </form>
+  );
+};

src/dropdown.tsx

@@ -1,27 +1,33 @@
-import React from "react";
-import {
-  Dropdown,
-  DropdownToggle,
-  DropdownMenu,
-  DropdownItem,
-} from "reactstrap";
+import React, { useState } from "react";
+import { DownOutlined } from "@ant-design/icons";
+import { Dropdown, Menu, Space } from "antd";
 
-export const Test = (props: any) => {
-  return (
-    <div className="d-flex justify-content-center p-5">
-      <Dropdown toggle={function noRefCheck() {}}>
-        <DropdownToggle caret>Dropdown</DropdownToggle>
-        <DropdownMenu>
-          <DropdownItem header>Header</DropdownItem>
-          <DropdownItem>Some Action</DropdownItem>
-          <DropdownItem text>Dropdown Item Text</DropdownItem>
-          <DropdownItem disabled>Action (disabled)</DropdownItem>
-          <DropdownItem divider />
-          <DropdownItem>Foo Action</DropdownItem>
-          <DropdownItem>Bar Action</DropdownItem>
-          <DropdownItem>Quo Action</DropdownItem>
-        </DropdownMenu>
-      </Dropdown>
-    </div>
-  );
-};
+const menu = (
+  <Menu
+    items={[
+      {
+        label: "Mr.",
+        key: "0",
+      },
+      {
+        label: "Mrs.",
+        key: "1",
+      },
+      {
+        label: "Miss",
+        key: "2",
+      },
+    ]}
+  />
+);
+
+export const CustomDropdown = () => (
+  <Dropdown overlay={menu} trigger={["click"]}>
+    <a onClick={(e) => e.preventDefault()}>
+      <Space>
+        Click me
+        <DownOutlined />
+      </Space>
+    </a>
+  </Dropdown>
+);