setup envirnoment

implement HSButton

implement HSInput

mend

implement login design

resolve eslint errors

rebase from develop

fix hovering styles  button

rebase form develop

set up formik

implement stage 1 of valifation usin formik

Reducing boilerplate

reduce duplicate codes

.eslintrc.cjs

@@ -23,6 +23,8 @@ module.exports = {
     'react/react-in-jsx-scope': 0,
     'import/no-extraneous-dependencies': 0,
     'import/extensions': 0,
+    'react/require-default-props': 0,
+    'react/self-closing-comp': 0,
   },
   ignorePatterns: ['dist/**/*', 'postcss.config.js', 'tailwind.config.js'],
 };

package.json

@@ -21,11 +21,14 @@
     "@types/react-router-dom": "^5.3.3",
     "axios": "^1.7.2",
     "dotenv": "^16.4.5",
+    "formik": "^2.4.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.2.1",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.23.1",
-    "redux": "^5.0.1"
+    "redux": "^5.0.1",
+    "yup": "^1.4.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.4.5",

src/components/form/HSButton.tsx

@@ -0,0 +1,37 @@
+import { Link } from 'react-router-dom';
+
+interface MyButtonProps {
+  path?: string;
+  title: string;
+  styles?: string;
+  click?: () => void;
+  icon?: JSX.Element;
+  target?: '_blank' | '_self' | '_parent' | '_top';
+  onChange?: React.ChangeEventHandler<HTMLAnchorElement>;
+}
+
+function HSButton({
+  path,
+  click,
+  title,
+  icon,
+  styles,
+  target,
+  onChange,
+}: MyButtonProps) {
+  return (
+    <Link
+      target={target}
+      type="submit"
+      onChange={onChange}
+      rel="noopener noreferrer"
+      to={path!}
+      onClick={click}
+      className={`${styles} bg-primary text-white px-6 py-3 rounded-md flex justify-center items-center gap-2 text-sm active:scale-[.98] active:duration-75 hover:scale-[1.01] ease-in transition-all`}
+    >
+      {title} {icon}
+    </Link>
+  );
+}
+
+export default HSButton;

src/components/form/HSInput.tsx

@@ -0,0 +1,72 @@
+interface MyInputProps {
+  id?: string;
+  name?: string;
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  onBlurTextArea?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+  values?: string | number;
+  style?: string;
+  label?: string;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onChangeTextArea?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  placeholder: string;
+  type?: string;
+  text?: string;
+  icon?: JSX.Element;
+}
+
+function HSInput({
+  id,
+  name,
+  onBlur,
+  onBlurTextArea,
+  values,
+  style,
+  label,
+  onChange,
+  onChangeTextArea,
+  placeholder,
+  type,
+  text,
+  icon,
+}: MyInputProps) {
+  return (
+    <div className="flex flex-col gap-2 w-full group">
+      <label htmlFor={id} className="text-md font-medium">
+        {label}
+      </label>
+      {type === 'input' ? (
+        <div
+          className={`${style} relative bg-grayLight text-black  duration-100 outline-none justify-between flex items-center gap-2 px-3 w-full rounded-md font-light  group-hover:border-grayDark`}
+        >
+          {icon && <p>{icon}</p>}
+          <input
+            type={text}
+            value={values}
+            onBlur={onBlur}
+            id={id}
+            name={name}
+            onChange={onChange}
+            placeholder={placeholder}
+            className="w-full h-full bg-transparent py-3 outline-none"
+          />
+        </div>
+      ) : (
+        <textarea
+          id={id}
+          name={name}
+          onBlur={onBlurTextArea}
+          cols={30}
+          rows={10}
+          placeholder={placeholder}
+          onChange={onChangeTextArea}
+          value={values}
+          className="text-black text-xs md:text-sm duration-150 w-full outline-none rounded-md border-[1px]  group-hover:border-grayDark px-5 py-3"
+        >
+          {values}
+        </textarea>
+      )}
+    </div>
+  );
+}
+
+export default HSInput;

src/index.css

@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');
+* {
+  font-family: 'Lexend', sans-serif;
+}