react-frontend-common-components 0.0.77 → 0.0.79

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

@@ -1,34 +1,34 @@
-.header {
-  width: 100%;
-}
-
-.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%;
-}
+.header {
+  width: 100%;
+}
+
+.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

@@ -1,61 +1,61 @@
-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;
-  width?: number;
-}
-
-const AppModal = ({
-  visible,
-  onClose,
-  title,
-  description,
-  children,
-  footerButtons,
-  alignTitleLeft = false,
-  className,
-  closeIcon,
-  width,
-}: AppModalProps) => {
-  return (
-    <div>
-      <Modal
-        open={visible}
-        width={width}
-        onCancel={onClose}
-        footer={null}
-        closeIcon={closeIcon || <CloseOutlined />}
-        className={className}
-      >
-        <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;
+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;
+  width?: number;
+}
+
+const AppModal = ({
+  visible,
+  onClose,
+  title,
+  description,
+  children,
+  footerButtons,
+  alignTitleLeft = false,
+  className,
+  closeIcon,
+  width,
+}: AppModalProps) => {
+  return (
+    <div>
+      <Modal
+        open={visible}
+        width={width}
+        onCancel={onClose}
+        footer={null}
+        closeIcon={closeIcon || <CloseOutlined />}
+        className={className}
+      >
+        <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

@@ -1,28 +1,28 @@
-.appOtpField {
-  .otpInputStyle {
-    gap: 0.5rem;
-    & input {
-      margin: 0 5px;
-      font-size: 24px;
-      border-radius: 10px;
-      border-color: #f6f7f9;
-    }
-  }
-  .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;
-      }
-    }
-  }
-}
+.appOtpField {
+  .otpInputStyle {
+    gap: 0.5rem;
+    & input {
+      margin: 0 5px;
+      font-size: 24px;
+      border-radius: 10px;
+      border-color: #f6f7f9;
+    }
+  }
+  .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;
+      }
+    }
+  }
+}

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

@@ -1,70 +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?: React.ReactNode;
-  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;
+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?: React.ReactNode;
+  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

@@ -1,40 +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;
+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

@@ -1,41 +1,41 @@
-.appPasswordInput {
-  font-size: var(--font-14);
-  font-weight: 500;
-  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 {
-    height: 40px;
-    &:hover {
-      border-color: #bfbebe !important;
-    }
-    &::placeholder {
-      color: #202123 !important;
-      font-size: 14px;
-      font-weight: 500;
-      line-height: normal;
-      
-    }
-  }
-}
-
-.error {
-  color: red;
-  font-size: 0.875rem;
-  margin-top: 0.25rem;
-}
+.appPasswordInput {
+  font-size: var(--font-14);
+  font-weight: 500;
+  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 {
+    height: 40px;
+    &:hover {
+      border-color: #bfbebe !important;
+    }
+    &::placeholder {
+      color: #202123 !important;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: normal;
+      
+    }
+  }
+}
+
+.error {
+  color: red;
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+}