react-frontend-common-components 0.0.1

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

@@ -0,0 +1,70 @@
+import React, { useEffect } from "react";
+import OTPInput from "react-otp-input";
+import "./app-otp-field.css";
+
+interface AppOtpFieldProps {
+  otp: string;
+  onChange: (otp: string) => void;
+  numInputs?: number;
+  otpError?: string;
+  resendTimeout?: number;
+  onResendOtp?: () => void;
+  setResendTimeout: (timeout: number) => void;
+  className?: string;
+  resendTxt?: string;
+  resendTime: string;
+}
+
+const AppOtpField = ({
+  otp,
+  onChange,
+  numInputs = 4,
+  otpError,
+  resendTimeout,
+  onResendOtp,
+  setResendTimeout,
+  className,
+  resendTxt,
+  resendTime,
+}: AppOtpFieldProps) => {
+  useEffect(() => {
+    if (resendTimeout && resendTimeout > 0) {
+      const timer = setTimeout(() => {
+        setResendTimeout(resendTimeout - 1);
+      }, 1000);
+
+      return () => clearTimeout(timer);
+    }
+  }, [resendTimeout, setResendTimeout]);
+
+  return (
+    <div className={`appOtpField ${className}`}>
+      <OTPInput
+        value={otp}
+        onChange={onChange}
+        numInputs={numInputs}
+        containerStyle={"otpInputStyle"}
+        renderSeparator={<span>-</span>}
+        renderInput={(props) => <input {...props} />}
+      />
+      {otpError && <p className={"error"}>{otpError}</p>}{" "}
+      <div className={"resendWrap"}>
+        {resendTimeout !== undefined && (
+          <span className={"forgotPassword"}>
+            {resendTimeout > 0 ? (
+              <span className={"resendTimer"}>{resendTime}</span>
+            ) : (
+              onResendOtp && (
+                <span className={"resendBtn"} onClick={() => onResendOtp()}>
+                  {resendTxt}
+                </span>
+              )
+            )}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default AppOtpField;

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

@@ -0,0 +1,40 @@
+import React from "react";
+import { Pagination } from "antd";
+import { PaginationProps } from "antd/lib/pagination";
+
+interface AppPaginationProps extends PaginationProps {
+  total: number;
+  currentPage: number;
+  pageSize?: number;
+  onPageChange: (page: number, pageSize: number) => void;
+  showGotoBox: boolean;
+  sizeChanger: boolean;
+  className?: string;
+}
+
+const AppPagination = ({
+  total,
+  currentPage,
+  pageSize = 10,
+  onPageChange,
+  showGotoBox = false,
+  sizeChanger = true,
+  className,
+  ...rest
+}: AppPaginationProps) => {
+  return (
+    <div className={className}>
+      <Pagination
+        current={currentPage}
+        pageSize={pageSize}
+        total={total}
+        onChange={onPageChange}
+        showSizeChanger={sizeChanger}
+        showQuickJumper={showGotoBox}
+        {...rest}
+      />
+    </div>
+  );
+};
+
+export default AppPagination;

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

@@ -0,0 +1,41 @@
+.appPasswordInput {
+  font-size: var(--font-14);
+  font-weight: 500;
+  color: #1e1f21;
+  border: none;
+  position: relative;
+
+  .icon {
+    position: absolute;
+    right: 1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    height: 100%;
+    cursor: pointer;
+  }
+
+  *:focus {
+    outline: 0 !important;
+    box-shadow: unset !important;
+  }
+  .ant-input-outlined {
+    &:hover {
+      border-color: #bfbebe !important;
+    }
+    &::placeholder {
+      color: #202123 !important;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 14px;
+      text-align: left;
+    }
+  }
+}
+
+.error {
+  color: red;
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+}

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

@@ -0,0 +1,79 @@
+import React, { useState } from "react";
+import { Input } from "antd";
+import {
+  ChangeEventHandler,
+  KeyboardEventHandler,
+  MouseEventHandler,
+} from "react";
+import Icons from "../../themes/icons/icons";
+import "./app-password-input.css";
+
+interface AppPasswordInputProps {
+  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;
+  errorMessage?: string;
+  autoComplete?: string;
+}
+
+const AppPasswordInput = ({
+  label,
+  name,
+  value,
+  dataTestId,
+  id,
+  disabled,
+  handleChange,
+  onClick,
+  defaultValue,
+  onPressEnter,
+  className,
+  errorMessage,
+  isAutoFocus,
+  autoComplete = "new-password",
+}: AppPasswordInputProps) => {
+  const [showPassword, setShowPassword] = useState(false);
+
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+
+  return (
+    <div className={`appPasswordInput ${className}`}>
+      <div className="position-relative w-100">
+        <Input
+          type={showPassword ? "text" : "password"}
+          className={"inputPassword"}
+          data-test-id={dataTestId}
+          id={id}
+          disabled={disabled}
+          name={name}
+          value={value}
+          onChange={handleChange}
+          onClick={onClick}
+          defaultValue={defaultValue}
+          onPressEnter={onPressEnter}
+          placeholder={label}
+          autoFocus={isAutoFocus}
+          autoComplete={autoComplete}
+        />
+        <span className={"icon"} onClick={togglePasswordVisibility}>
+          {Icons.eyePassword}
+        </span>
+      </div>
+      {errorMessage && <div className={"error"}>{errorMessage}</div>}
+    </div>
+  );
+};
+
+export default AppPasswordInput;

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

@@ -0,0 +1,61 @@
+.appPhoneField {
+  .allow-dropdown {
+    width: 100%;
+  }
+  .intelWrapper {
+    .intl-tel-input.allow-dropdown .flag-container {
+      height: unset !important;
+
+      & > div:first-child {
+        display: flex;
+        align-items: center;
+        position: relative;
+        background-color: transparent;
+        .selected-dial-code {
+          padding-left: 0.5rem;
+        }
+
+        &::after {
+          content: "";
+          background-color: #dcdcdc;
+          height: 50%;
+          width: 1px;
+          position: absolute;
+          right: 0;
+          top: 50%;
+          bottom: 50%;
+          transform: translateY(-50%);
+        }
+
+        & > div:nth-child(2) {
+          margin-right: 0.2rem;
+          margin-bottom: 0 !important;
+          font-size: 12px;
+          font-weight: 500;
+          letter-spacing: -0.02em;
+          text-align: left;
+        }
+      }
+    }
+  }
+
+  .customintlinput {
+    width: 100%;
+    min-height: 40px;
+    font-size: var(--font-14);
+    font-weight: 500;
+    color: #000000 !important;
+    border: 1px solid #bfbebe;
+    border-radius: 10px;
+    height: 40px;
+    &:focus-visible {
+      outline: unset !important;
+    }
+  }
+}
+
+.error {
+  color: red;
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+}

package/src/components/app-phone-field/app-phone-field.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import "react-intl-tel-input/dist/main.css";
+import IntlTelInput from "react-intl-tel-input";
+import "./app-phone-field.css";
+
+interface AppPhoneFieldProps {
+  phone: string;
+  setPhone: (phone: string) => void;
+  phoneError: string;
+  setPhoneError: (error: string) => void;
+  setCustomerCountryCode: (code: string) => void;
+  className?: string;
+}
+
+const AppPhoneField = ({
+  phone,
+  setPhone,
+  phoneError,
+  setPhoneError,
+  setCustomerCountryCode,
+  className,
+}: AppPhoneFieldProps) => {
+  return (
+    <div className={`appPhoneField ${className}`}>
+      <div className={"intelWrapper"}>
+        <IntlTelInput
+          containerClassName={`${"intltelinput"} intl-tel-input`}
+          inputClassName={`${"customintlinput"} custom-intl-input`}
+          separateDialCode={true}
+          defaultCountry="ae"
+          placeholder="50-1234567"
+          preferredCountries={["ae"]}
+          value={phone}
+          onPhoneNumberChange={(isValid, value, country, fullNumber) => {
+            if (!isNaN(Number(value))) {
+              setPhone(value);
+              setCustomerCountryCode("+" + country.dialCode);
+              setPhoneError("");
+            } else if (value === "") {
+              setPhoneError("");
+            } else {
+              setPhoneError("You can only enter numbers.");
+            }
+          }}
+          onSelectFlag={(
+            currentNumber,
+            selectedCountryData,
+            fullNumber,
+            isValid
+          ) => {
+            setCustomerCountryCode("+" + selectedCountryData.dialCode);
+          }}
+        />
+      </div>
+      <p className={"error"}>{phoneError && phoneError}</p>
+    </div>
+  );
+};
+
+export default AppPhoneField;

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

@@ -0,0 +1,5 @@
+.appPopover {
+  .popoverComponent {
+    width: max-content;
+  }
+}

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

@@ -0,0 +1,45 @@
+import { Popover } from "antd";
+import { PopoverProps } from "antd/lib/popover";
+import "./app-popover.css";
+
+interface AppPopoverProps extends PopoverProps {
+  content: React.ReactNode;
+  title?: React.ReactNode;
+  children: React.ReactNode;
+  bgColor?: string;
+  triggerType?: "hover" | "click";
+  color?: string;
+  className?: string;
+}
+
+const AppPopover = ({
+  content,
+  title,
+  children,
+  bgColor,
+  color,
+  triggerType = "hover",
+  className,
+  ...popoverProps
+}: AppPopoverProps) => {
+  const popoverStyle = {
+    color: color ?? "inherit",
+  };
+
+  return (
+    <div className={`appPopover ${className}`}>
+      <Popover
+        color={bgColor}
+        content={<div style={popoverStyle}>{content}</div>}
+        title={title ? <div style={popoverStyle}>{title}</div> : null}
+        trigger={triggerType}
+        overlayClassName={className}
+        {...popoverProps}
+      >
+        <div className={"popoverComponent"}>{children}</div>
+      </Popover>
+    </div>
+  );
+};
+
+export default AppPopover;

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

@@ -0,0 +1,40 @@
+import React from "react";
+import { Progress } from "antd";
+
+interface AppProgressProps {
+  percent: number;
+  type?: "line" | "circle" | "dashboard";
+  strokeColor?: string;
+  trailColor?: string;
+  size?: "default" | "small";
+  status?: "success" | "exception" | "normal" | "active";
+  showInfo?: boolean;
+  className?: string;
+}
+
+const AppProgress = ({
+  percent,
+  type = "line",
+  strokeColor,
+  trailColor,
+  size = "default",
+  status,
+  showInfo = true,
+  className,
+}: AppProgressProps) => {
+  return (
+    <div className={className}>
+      <Progress
+        percent={percent}
+        type={type}
+        strokeColor={strokeColor}
+        trailColor={trailColor}
+        size={size}
+        status={status}
+        showInfo={showInfo}
+      />
+    </div>
+  );
+};
+
+export default AppProgress;

package/src/components/app-radio-group/app-radio-group.css

@@ -0,0 +1,6 @@
+.appRadioGroup {
+  .radioGroup {
+    display: flex;
+    align-items: center;
+  }
+}

package/src/components/app-radio-group/app-radio-group.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { Radio } from "antd";
+import type { RadioChangeEvent } from "antd";
+import "./app-radio-group.css";
+
+interface Option {
+  value: number;
+  text: string;
+}
+
+interface AppRadioGroupProps {
+  options: Option[];
+  selectedValue: number | null;
+  onChange: (value: number) => void;
+  className?: string;
+}
+
+const AppRadioGroup = ({
+  options,
+  selectedValue,
+  onChange,
+  className,
+}: AppRadioGroupProps) => {
+  const handleChange = (e: RadioChangeEvent) => {
+    onChange(e.target.value);
+  };
+
+  return (
+    <div className={`appRadioGroup ${className}`}>
+      <Radio.Group
+        className={"radioGroup"}
+        onChange={handleChange}
+        value={selectedValue}
+      >
+        {options.map((option) => (
+          <Radio key={option.value} value={option.value}>
+            {option.text}
+          </Radio>
+        ))}
+      </Radio.Group>
+    </div>
+  );
+};
+
+export default AppRadioGroup;

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

@@ -0,0 +1,21 @@
+.appselect {
+  *:focus,
+  *:active,
+  *:focus-within {
+    outline: 0 !important;
+    box-shadow: unset !important;
+  }
+  .ant-select {
+    &:hover {
+      .ant-select-selector {
+        border-color: #d9d9d9 !important;
+      }
+    }
+  }
+}
+
+.error {
+  color: red;
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+}

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

@@ -0,0 +1,53 @@
+import React from "react";
+import { Select } from "antd";
+import { MouseEventHandler } from "react";
+import "./app-select.css";
+
+interface AppSelectProps {
+  className?: string;
+  value?: string | null;
+  dataTestId?: string;
+  id?: string;
+  disabled?: boolean;
+  handleChange?: (value: string | string[]) => void;
+  onClick?: MouseEventHandler<HTMLElement>;
+  options?: Array<{ value: string; label: string }>;
+  onSelectChange?: (value: string) => void;
+  required?: boolean;
+  placeholder?: string;
+  errorMessage?: string;
+}
+
+const AppSelect = ({
+  value,
+  handleChange,
+  options,
+  disabled,
+  placeholder,
+  className,
+  errorMessage,
+}: AppSelectProps) => {
+  return (
+    <div className={`appselect ${className}`}>
+      <Select
+        className={"select"}
+        disabled={disabled}
+        value={value}
+        placeholder={placeholder}
+        onChange={(value: string | string[]) =>
+          handleChange && handleChange(value)
+        }
+      >
+        {options &&
+          options.map((option, i) => (
+            <Select.Option key={option.value} value={option.value}>
+              {option.label}
+            </Select.Option>
+          ))}
+      </Select>
+      {errorMessage && <div className={"error"}>{errorMessage}</div>}
+    </div>
+  );
+};
+
+export default AppSelect;

package/src/components/app-select-add/app-select-add.css

@@ -0,0 +1,21 @@
+.appSelectAdd {
+  *:focus,
+  *:active,
+  *:focus-within {
+    outline: 0 !important;
+    box-shadow: unset !important;
+  }
+  .ant-select {
+    &:hover {
+      .ant-select-selector {
+        border-color: #d9d9d9 !important;
+      }
+    }
+  }
+}
+
+.error {
+  color: red;
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+}

package/src/components/app-select-add/app-select-add.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { Select } from "antd";
+import type { SelectProps } from "antd";
+import "./app-select-add.css";
+
+interface AppSelectAddProps extends SelectProps {
+  options?: SelectProps["options"];
+  placeholder?: string;
+  onChange?: (value: string) => void;
+  className?: string;
+}
+
+const AppSelectAdd = ({
+  options = [],
+  placeholder = "Tags Mode",
+  onChange,
+  className,
+  ...rest
+}: AppSelectAddProps) => {
+  return (
+    <div className={`appSelectAdd ${className}`}>
+      <Select
+        mode="tags"
+        style={{ width: "100%" }}
+        placeholder={placeholder}
+        onChange={onChange}
+        options={options}
+        {...rest}
+      />
+    </div>
+  );
+};
+
+export default AppSelectAdd;

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

@@ -0,0 +1,46 @@
+.sideBar {
+  height: 100vh;
+  .sider {
+    height: 100%;
+    .ant-layout-sider-children {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      row-gap: 2.875rem;
+      .ant-menu {
+        border: none;
+      }
+    }
+  }
+}
+
+.logo {
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+}
+
+.menu {
+  border-right: 0;
+}
+
+.footer {
+  position: relative;
+  &::before {
+    content: "";
+    height: 1px;
+    width: 80%;
+    position: absolute;
+    top: 0;
+    right: 50%;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: #acacac;
+  }
+}
+
+.tag {
+  margin-left: 8px;
+}