react-frontend-common-components 0.0.76 → 0.0.79

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

@@ -1,90 +1,90 @@
-import React, { ReactElement, 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;
-  icon?: React.ReactNode;
-  hiddenIcon?: React.ReactNode;
-  showIcon?: boolean;
-}
-
-const AppPasswordInput = ({
-  label,
-  name,
-  value,
-  dataTestId,
-  id,
-  disabled,
-  handleChange,
-  onClick,
-  defaultValue,
-  onPressEnter,
-  className,
-  errorMessage,
-  isAutoFocus,
-  triggerFocus,
-  autoComplete = "new-password",
-  icon,
-  hiddenIcon,
-  showIcon = true,
-}: 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}
-        />
-        {showIcon && (
-          <span className={"icon"} onClick={togglePasswordVisibility}>
-            {!showPassword
-              ? icon || Icons.eyePassword
-              : hiddenIcon || Icons.iconHiddenIcon}
-          </span>
-        )}
-      </div>
-      {errorMessage && <div className={"error"}>{errorMessage}</div>}
-    </div>
-  );
-};
-
-export default AppPasswordInput;
+import React, { ReactElement, 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;
+  icon?: React.ReactNode;
+  hiddenIcon?: React.ReactNode;
+  showIcon?: boolean;
+}
+
+const AppPasswordInput = ({
+  label,
+  name,
+  value,
+  dataTestId,
+  id,
+  disabled,
+  handleChange,
+  onClick,
+  defaultValue,
+  onPressEnter,
+  className,
+  errorMessage,
+  isAutoFocus,
+  triggerFocus,
+  autoComplete = "new-password",
+  icon,
+  hiddenIcon,
+  showIcon = true,
+}: 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}
+        />
+        {showIcon && (
+          <span className={"icon"} onClick={togglePasswordVisibility}>
+            {!showPassword
+              ? icon || Icons.iconHiddenIcon
+              : hiddenIcon || Icons.eyePassword}
+          </span>
+        )}
+      </div>
+      {errorMessage && <div className={"error"}>{errorMessage}</div>}
+    </div>
+  );
+};
+
+export default AppPasswordInput;

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

@@ -1,12 +1,12 @@
-.inputContainer {
-  .react-tel-input .flag-dropdown {
-    height: 40px !important;
-    background-color: unset;
-    border: unset;
-  }
-  .react-tel-input .form-control {
-    height: 40px !important;
-    width: 100%;
-    padding-left: 40px;
-  }
-}
+.inputContainer {
+  .react-tel-input .flag-dropdown {
+    height: 40px !important;
+    background-color: unset;
+    border: unset;
+  }
+  .react-tel-input .form-control {
+    height: 40px !important;
+    width: 100%;
+    padding-left: 40px;
+  }
+}

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

@@ -1,56 +1,56 @@
-import React, { useEffect, useRef } from "react";
-import "react-phone-input-2/lib/style.css";
-import PhoneInput, { CountryData } from "react-phone-input-2";
-import "./app-phone-input.css";
-
-interface AppPhoneInputProps {
-  countryCode?: string;
-  phone: string;
-  handleChange: (phone: string, countryCode: string, uniCode: string) => void;
-  className: string;
-  id: string;
-}
-
-const AppPhoneInput = ({
-  handleChange,
-  countryCode,
-  phone,
-  className,
-  id,
-}: AppPhoneInputProps) => {
-  const wrapperRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (wrapperRef.current) {
-      const inputElement = wrapperRef.current.querySelector("input");
-      if (inputElement) {
-        inputElement.id = id;
-      }
-    }
-  }, [id]);
-  return (
-    <div className={className}>
-      <div className={"inputContainer"} ref={wrapperRef}>
-        <PhoneInput
-          value={`+${countryCode}${phone}`}
-          country={
-            (countryCode && phone) || (countryCode != "" && phone != "")
-              ? ""
-              : "us"
-          }
-          countryCodeEditable={false}
-          onChange={(phone, country: CountryData) => {
-            handleChange(
-              phone.replace(country.dialCode, ""),
-              country.dialCode,
-              country.countryCode
-            );
-          }}
-          enableSearch={true}
-          inputProps={{ required: true }}
-        />
-      </div>
-    </div>
-  );
-};
-export default AppPhoneInput;
+import React, { useEffect, useRef } from "react";
+import "react-phone-input-2/lib/style.css";
+import PhoneInput, { CountryData } from "react-phone-input-2";
+import "./app-phone-input.css";
+
+interface AppPhoneInputProps {
+  countryCode?: string;
+  phone: string;
+  handleChange: (phone: string, countryCode: string, uniCode: string) => void;
+  className: string;
+  id: string;
+}
+
+const AppPhoneInput = ({
+  handleChange,
+  countryCode,
+  phone,
+  className,
+  id,
+}: AppPhoneInputProps) => {
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (wrapperRef.current) {
+      const inputElement = wrapperRef.current.querySelector("input");
+      if (inputElement) {
+        inputElement.id = id;
+      }
+    }
+  }, [id]);
+  return (
+    <div className={className}>
+      <div className={"inputContainer"} ref={wrapperRef}>
+        <PhoneInput
+          value={`+${countryCode}${phone}`}
+          country={
+            (countryCode && phone) || (countryCode != "" && phone != "")
+              ? ""
+              : "us"
+          }
+          countryCodeEditable={false}
+          onChange={(phone, country: CountryData) => {
+            handleChange(
+              phone.replace(country.dialCode, ""),
+              country.dialCode,
+              country.countryCode
+            );
+          }}
+          enableSearch={true}
+          inputProps={{ required: true }}
+        />
+      </div>
+    </div>
+  );
+};
+export default AppPhoneInput;

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

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

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

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

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

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

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

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

@@ -1,33 +1,33 @@
-.appselect {
-  font-weight: 500;
-  font-size: var(--font-14);
-  *:focus,
-  *:active,
-  *:focus-within {
-    outline: 0 !important;
-    box-shadow: unset !important;
-  }
-  .ant-select {
-    width: 100%;
-    height: 40px;
-    .ant-select-selector {
-      .ant-select-selection-placeholder {
-        color: #202123 !important;
-        font-size: 14px;
-        font-weight: 500;
-        line-height: normal;
-      }
-    }
-    &:hover {
-      .ant-select-selector {
-        border-color: #d9d9d9 !important;
-      }
-    }
-  }
-}
-
-.error {
-  color: red;
-  font-size: 0.875rem;
-  margin-top: 0.25rem;
-}
+.appselect {
+  font-weight: 500;
+  font-size: var(--font-14);
+  *:focus,
+  *:active,
+  *:focus-within {
+    outline: 0 !important;
+    box-shadow: unset !important;
+  }
+  .ant-select {
+    width: 100%;
+    height: 40px;
+    .ant-select-selector {
+      .ant-select-selection-placeholder {
+        color: #202123 !important;
+        font-size: 14px;
+        font-weight: 500;
+        line-height: normal;
+      }
+    }
+    &:hover {
+      .ant-select-selector {
+        border-color: #d9d9d9 !important;
+      }
+    }
+  }
+}
+
+.error {
+  color: red;
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+}