react-frontend-common-components 0.0.17 → 0.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-frontend-common-components",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "description": "Reusable frontend library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -32,7 +32,6 @@
     "chart.js": "^4.4.4",
     "react-chartjs-2": "^5.2.0",
     "react-icons": "^5.3.0",
-    "react-intl-tel-input": "^8.2.0",
     "react-otp-input": "^3.1.1",
     "rollup": "^4.21.2",
     "uuid": "^10.0.0"

package/src/index.ts

@@ -35,4 +35,4 @@ export { default as AppTable } from "./components/app-table/app-table";
 export { default as AppProgress } from "./components/app-progress/app-progress";
 export { default as AppPopover } from "./components/app-popover/app-popover";
 export { default as AppFloatButton } from "./components/app-float-button/app-float-button";
-// export { default as AppPhoneField } from "./components/app-phone-field/app-phone-field";
+

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

@@ -1,61 +0,0 @@
-.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

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