react-frontend-common-components 0.0.1

package/src/components/app-custom-loader/app-custom-loader.css

@@ -0,0 +1,116 @@
+.wrapper {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: (0, 0, 0, 0.3);
+  backdrop-filter: blur(10px);
+  display: flex;
+  z-index: 99;
+}
+
+/*code for custom loading icon*/
+
+.loader {
+  position: relative;
+  width: 80px;
+  margin-left: 45%;
+  margin-top: 25%;
+}
+
+.loader span {
+  display: block;
+  transform-origin: 40px 40px;
+  animation: ding 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+}
+
+.loader span::before {
+  content: "";
+  position: absolute;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: rgb(0, 0, 0);
+  margin: -4px 0 0 -4px;
+}
+
+.loader span:nth-child(1) {
+  animation-delay: -0.36s;
+}
+
+.loader span:nth-child(1):before {
+  top: 63px;
+  left: 63px;
+}
+
+.loader span:nth-child(2) {
+  animation-delay: -0.72s;
+}
+
+.loader span:nth-child(2):before {
+  top: 68px;
+  left: 56px;
+}
+
+.loader span:nth-child(3) {
+  animation-delay: -0.108s;
+}
+
+.loader span:nth-child(3):before {
+  top: 71px;
+  left: 48px;
+}
+.loader span:nth-child(4) {
+  animation-delay: -0.144s;
+}
+
+.loader span:nth-child(4):before {
+  top: 72px;
+  left: 40px;
+}
+
+.loader span:nth-child(5) {
+  animation-delay: -0.18;
+}
+
+.loader span:nth-child(5):before {
+  top: 71px;
+  left: 32px;
+}
+
+.loader span:nth-child(6) {
+  animation-delay: -0.216s;
+}
+
+.loader span:nth-child(6):before {
+  top: 68px;
+  left: 24px;
+}
+
+.loader span:nth-child(7) {
+  animation-delay: -0.252s;
+}
+
+.loader span:nth-child(7):before {
+  top: 63px;
+  left: 17px;
+}
+
+.loader span:nth-child(8) {
+  animation-delay: -0.288s;
+}
+
+.loader span:nth-child(8):before {
+  top: 56px;
+  left: 12px;
+}
+
+@keyframes ding {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/components/app-custom-loader/app-custom-loader.tsx

@@ -0,0 +1,23 @@
+import "./app-custom-loader.css";
+
+interface AppCustomLoaderProps {
+  className?: string;
+}
+
+const AppCustomLoader = ({ className }: AppCustomLoaderProps) => {
+  return (
+    <div className={`wrapper ${className}`}>
+      <div className={"loader"}>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+    </div>
+  );
+};
+export default AppCustomLoader;

package/src/components/app-divider/app-divider.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Divider, DividerProps } from "antd";
+
+interface AppDividerProps extends DividerProps {
+  className?: string;
+}
+
+const AppDivider = ({ className, ...props }: AppDividerProps) => {
+  return (
+    <div className={className}>
+      <Divider {...props} />
+    </div>
+  );
+};
+
+export default AppDivider;

package/src/components/app-float-button/app-float-button.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { FloatButton, FloatButtonProps } from "antd";
+
+interface AppFloatButtonProps extends FloatButtonProps {
+  className?: string;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;
+}
+
+const AppFloatButton = ({
+  className,
+  onClick,
+  onMouseEnter,
+  ...props
+}: AppFloatButtonProps) => {
+  return (
+    <div className={className}>
+      <FloatButton {...props} onClick={onClick} onMouseEnter={onMouseEnter} />
+    </div>
+  );
+};
+
+export default AppFloatButton;

package/src/components/app-image-box/app-image-box.css

@@ -0,0 +1,23 @@
+.appImageBox {
+  width: max-content;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+
+  .ant-image {
+    border-radius: 50%;
+    overflow: hidden;
+
+    .ant-image-img {
+      border-radius: 50%;
+    }
+  }
+  .text {
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 20px;
+    text-align: left;
+    color: #000000;
+  }
+}

package/src/components/app-image-box/app-image-box.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { Image } from "antd";
+import "./app-image-box.css";
+
+interface ImageType {
+  src: string;
+}
+
+interface AppImageBoxProps {
+  width?: number;
+  height?: number;
+  text?: string;
+  image: ImageType;
+  className?: string;
+}
+
+const AppImageBox = ({
+  width = 100,
+  height = 100,
+  text = "",
+  image,
+  className,
+}: AppImageBoxProps) => {
+  return (
+    <div className={`appImageBox ${className}`}>
+      <Image
+        preview={false}
+        width={width}
+        height={height}
+        src={image.src}
+        alt={text}
+      />
+      {text && <span className={"text"}>{text}</span>}
+    </div>
+  );
+};
+
+export default AppImageBox;

package/src/components/app-input/app-input.css

@@ -0,0 +1,61 @@
+.appInput {
+  font-size: var(--font-14);
+  font-weight: 500;
+  color: #1e1f21;
+  .ant-input::placeholder {
+    color: #202123 !important;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 14px;
+    text-align: left;
+  }
+
+  *:focus {
+    outline: 0 !important;
+    box-shadow: unset !important;
+  }
+  &:hover {
+    .ant-input {
+      border-color: #d9d9d9;
+    }
+  }
+
+  &:has(.ant-input-affix-wrapper) {
+    .ant-input {
+      border: none !important;
+      height: unset !important;
+    }
+  }
+  .ant-input-affix-wrapper {
+    height: 40px;
+    display: flex;
+    align-items: center;
+    .ant-input-outlined:focus-within {
+      box-shadow: unset !important;
+    }
+
+    *:focus {
+      outline: 0 !important;
+      box-shadow: unset !important;
+    }
+  }
+  .ant-input-outlined {
+    height: 40px;
+    &:hover {
+      border-color: #d9d9d9;
+    }
+    &:focus {
+      box-shadow: unset;
+    }
+    &:focus-within {
+      box-shadow: unset;
+      border-color: #d9d9d9;
+    }
+  }
+}
+
+.error {
+  color: red;
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+}

package/src/components/app-input/app-input.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { Input, InputRef } from "antd";
+import {
+  ChangeEventHandler,
+  KeyboardEventHandler,
+  MouseEventHandler,
+  useEffect,
+  useRef,
+} from "react";
+import "./app-input.css";
+
+interface AppInputProps {
+  className?: string;
+  label?: string;
+  name?: string;
+  value?: string;
+  dataTestId?: string;
+  id?: string;
+  disabled?: boolean;
+  handleChange?: ChangeEventHandler<HTMLInputElement>;
+  onClick?: MouseEventHandler<HTMLElement>;
+  onPressEnter?: KeyboardEventHandler<HTMLInputElement>;
+  defaultValue?: string;
+  isAutoFocus?: boolean;
+  triggerFocus?: boolean;
+  type?: string;
+  isOptional?: boolean;
+  errorMessage?: string;
+  suffixIcon?: React.ReactNode;
+  prefixIcon?: React.ReactNode;
+}
+
+const AppInput = ({
+  className,
+  label,
+  name,
+  value,
+  dataTestId,
+  type,
+  id,
+  disabled,
+  handleChange,
+  onClick,
+  defaultValue,
+  onPressEnter,
+  isAutoFocus,
+  triggerFocus,
+  isOptional,
+  errorMessage,
+  suffixIcon,
+  prefixIcon,
+}: AppInputProps) => {
+  const inputRef = useRef<InputRef>(null);
+
+  useEffect(() => {
+    if (isAutoFocus && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [triggerFocus, isAutoFocus]);
+
+  const placeholder = isOptional ? `${label} (optional)` : label;
+
+  return (
+    <div className={`appInput ${className}`}>
+      <Input
+        type={type}
+        data-test-id={dataTestId}
+        id={id}
+        disabled={disabled}
+        name={name}
+        className={"input"}
+        value={value}
+        onChange={handleChange}
+        onClick={onClick}
+        defaultValue={defaultValue}
+        onPressEnter={onPressEnter}
+        placeholder={placeholder}
+        ref={inputRef}
+        prefix={prefixIcon && prefixIcon}
+        suffix={suffixIcon && suffixIcon}
+      />
+
+      {errorMessage && <div className={"error"}>{errorMessage}</div>}
+    </div>
+  );
+};
+
+export default AppInput;

package/src/components/app-label/app-label.css

@@ -0,0 +1,5 @@
+.label {
+  display: inline-block;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+}

package/src/components/app-label/app-label.tsx

@@ -0,0 +1,34 @@
+import "./app-label.css";
+
+interface AppLabelProps {
+  text: string;
+  htmlFor?: string;
+  color?: string;
+  fontSize?: string;
+  className?: string;
+}
+
+const AppLabel = ({
+  text,
+  htmlFor,
+  color = "inherit",
+  fontSize = "inherit",
+  className,
+}: AppLabelProps) => {
+  const labelStyle = {
+    color,
+    fontSize,
+  };
+
+  return (
+    <label
+      htmlFor={htmlFor}
+      className={`label ${className}`}
+      style={labelStyle}
+    >
+      {text}
+    </label>
+  );
+};
+
+export default AppLabel;

package/src/components/app-list/app-list.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { List, ListProps } from "antd";
+
+interface AppListProps<T> extends ListProps<T> {
+  renderItem: (item: T, index: number) => React.ReactNode;
+  className?: string;
+}
+
+const AppList = <T extends unknown>({
+  renderItem,
+  dataSource,
+  className,
+  ...props
+}: AppListProps<T>) => {
+  return (
+    <div className={className}>
+      <List
+        dataSource={dataSource}
+        renderItem={(item, index) => renderItem(item, index)}
+        {...props}
+      />
+    </div>
+  );
+};
+
+export default AppList;

package/src/components/app-loader/app-loader.css

@@ -0,0 +1,16 @@
+.loader {
+  width: 100vw;
+  height: 100vh;
+  display: grid;
+  place-items: center;
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: (0, 0, 0, 0.3);
+  backdrop-filter: blur(10px);
+  z-index: 99;
+  * {
+    transform: scale(1.5);
+  }
+}

package/src/components/app-loader/app-loader.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { Spin, Skeleton } from "antd";
+import "./app-loader.css";
+
+type LoaderType = "spinner" | "skeleton" | "custom";
+
+interface AppLoaderProps {
+  type?: LoaderType;
+  customLoader?: React.ReactNode;
+  className?: string;
+}
+
+const AppLoader = ({ type, customLoader, className }: AppLoaderProps) => {
+  const loaderType: LoaderType = customLoader ? "custom" : type || "spinner";
+
+  switch (loaderType) {
+    case "spinner":
+      return <Spin className={`loader ${className}`} />;
+    case "skeleton":
+      return <Skeleton active className={`loader ${className}`} />;
+    case "custom":
+      return customLoader || <Spin className={`loader ${className}`} />;
+    default:
+      return <Spin className={`loader ${className}`} />;
+  }
+};
+
+export default AppLoader;

package/src/components/app-location-map/app-location-map.css

@@ -0,0 +1,4 @@
+.appLocationMap {
+  width: max-content;
+  height: max-content;
+}

package/src/components/app-location-map/app-location-map.tsx

@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from "react";
+import { GoogleMap, LoadScript } from "@react-google-maps/api";
+import "./app-location-map.css";
+
+interface LatLng {
+  lat: number;
+  lng: number;
+}
+
+interface LocationMapProps {
+  cityId?: LatLng;
+  className?: string;
+  containerStyle?: React.CSSProperties;
+  clickableIcons?: boolean;
+  zoom?: number;
+  mapKey: string;
+}
+
+const AppLocationMap = ({
+  cityId,
+  className,
+  containerStyle,
+  clickableIcons,
+  zoom = 10,
+  mapKey,
+}: LocationMapProps) => {
+  const [center, setCenter] = useState<LatLng | null>(null);
+
+  useEffect(() => {
+    if (cityId) {
+      setCenter(cityId);
+    } else {
+      if (navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition((position) => {
+          setCenter({
+            lat: position.coords.latitude,
+            lng: position.coords.longitude,
+          });
+        });
+      }
+    }
+  }, [cityId]);
+
+  return (
+    <div className={`appLocationMap ${className}`}>
+      <LoadScript googleMapsApiKey={mapKey}>
+        <div style={containerStyle}>
+          {center && (
+            <GoogleMap
+              mapContainerStyle={containerStyle}
+              center={center}
+              clickableIcons={clickableIcons}
+              zoom={zoom}
+            />
+          )}
+        </div>
+      </LoadScript>
+    </div>
+  );
+};
+
+export default AppLocationMap;

package/src/components/app-modal/app-modal.css

@@ -0,0 +1,35 @@
+.header {
+  width: 100%;
+  padding: 0 16px;
+}
+
+.title,
+.titleLeft {
+  font-size: 1rem;
+  font-weight: 500;
+  text-align: center;
+  flex-grow: 1;
+}
+
+.titleLeft {
+  text-align: left;
+}
+
+.descriptionLeft {
+  text-align: left;
+}
+
+.closeButton {
+  align-self: flex-end;
+}
+
+.body {
+  text-align: center;
+}
+
+.footer {
+  margin-top: 16px;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}

package/src/components/app-modal/app-modal.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { Modal, Button } from "antd";
+import { CloseOutlined } from "@ant-design/icons";
+import "./app-modal.css";
+
+interface AppModalProps {
+  visible: boolean;
+  onClose: () => void;
+  title?: string;
+  description?: string;
+  children: React.ReactNode;
+  footerButtons?: React.ReactNode;
+  alignTitleLeft?: boolean;
+  className?: string;
+  closeIcon?: React.ReactNode;
+}
+
+const AppModal = ({
+  visible,
+  onClose,
+  title,
+  description,
+  children,
+  footerButtons,
+  alignTitleLeft = false,
+  className,
+  closeIcon,
+}: AppModalProps) => {
+  return (
+    <div className={`AppModal ${className}`}>
+      <Modal
+        open={visible}
+        onCancel={onClose}
+        footer={null}
+        closeIcon={closeIcon || <CloseOutlined />}
+        className={"modal"}
+      >
+        <div className={"header"}>
+          {title && (
+            <div className={alignTitleLeft ? "titleLeft" : "title"}>
+              {title}
+            </div>
+          )}
+          {description && (
+            <div className={alignTitleLeft ? "descriptionLeft" : "description"}>
+              {description}
+            </div>
+          )}
+        </div>
+
+        <div className={"body"}>{children}</div>
+        {footerButtons && <div className={"footer"}>{footerButtons}</div>}
+      </Modal>
+    </div>
+  );
+};
+
+export default AppModal;

package/src/components/app-otp-field/app-otp-field.css

@@ -0,0 +1,31 @@
+.appOtpField {
+  .otpInputStyle {
+    gap: 0.5rem;
+    & input {
+      margin: 0 5px;
+      font-size: 24px;
+      border-radius: 10px;
+      border: none;
+      width: 3.125rem !important;
+      height: 2.6875rem !important;
+      background-color: #f6f7f9 !important;
+    }
+  }
+  .resendWrap {
+    margin-top: 1rem;
+    & .forgotPassword {
+      font-size: 0.875rem;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 150%;
+      letter-spacing: -0.0175rem;
+      cursor: pointer;
+      .resendTimer {
+        color: rgb(255, 0, 0);
+      }
+      .resendBtn {
+        color: #009046;
+      }
+    }
+  }
+}