feat: login form as a client component, theme toggle

components/PhoneInput/utils/countryOptionsDataMap.ts

@@ -0,0 +1,33 @@
+import countries from "i18n-iso-countries";
+import ru from "i18n-iso-countries/langs/ru.json";
+import { type CountryCode, getCountries } from "libphonenumber-js";
+import getFlagEmoji from "@/components/PhoneInput/utils/getFlagEmoji";
+import { getCountryCallingCode } from "libphonenumber-js/max";
+import { Country } from "@/components/PhoneInput/types";
+
+countries.registerLocale(ru);
+
+const libIsoCountries = countries.getNames("ru", { select: "official" });
+const libPhoneNumberCountries = getCountries();
+
+const countryOptionsDataMap = Object.fromEntries(
+    libPhoneNumberCountries
+        .map(code => {
+            const name = libIsoCountries[code];
+            const emoji = getFlagEmoji(code);
+            if (!name || !emoji) return null;
+            const callingCode = getCountryCallingCode(code);
+            return [
+                code,
+                {
+                    code,
+                    name,
+                    emoji,
+                    callingCode,
+                },
+            ] as [CountryCode, Country];
+        })
+        .filter(o => !!o)
+);
+
+export default countryOptionsDataMap;

components/PhoneInput/utils/getFlagEmoji.ts

@@ -0,0 +1,8 @@
+export default function getFlagEmoji(countryCode: string) {
+    const FLAG_CODE_OFFSET = 127397;
+    const codePoints = countryCode
+        .toUpperCase()
+        .split("")
+        .map(char => FLAG_CODE_OFFSET + char.charCodeAt(0));
+    return String.fromCodePoint(...codePoints);
+}

components/PhoneInput/utils/getFormat.ts

@@ -0,0 +1,15 @@
+import { CountryCode, getExampleNumber } from "libphonenumber-js";
+import examples from "libphonenumber-js/examples.mobile.json";
+import { getCountryCallingCode } from "libphonenumber-js/max";
+
+export default function getFormat(countryCode: CountryCode) {
+    let example = getExampleNumber(
+        countryCode,
+        examples
+    )!.formatInternational();
+    const callingCode = getCountryCallingCode(countryCode);
+    const callingCodeLen = callingCode.length + 1;
+    example = example.slice(callingCodeLen);
+    const mask = example.replace(/\d/g, "0");
+    return { example, mask };
+}

components/PhoneInput/utils/getInitialDataFromValue.ts

@@ -0,0 +1,33 @@
+import { Country } from "@/components/PhoneInput/types";
+import getFormat from "@/components/PhoneInput/utils/getFormat";
+import countryOptionsDataMap from "@/components/PhoneInput/utils/countryOptionsDataMap";
+import { CountryCode, parsePhoneNumberFromString } from "libphonenumber-js";
+
+type InitialDataFromValue = {
+    country: Country;
+    format: ReturnType<typeof getFormat>;
+    localValue: string;
+};
+
+const getInitialDataFromValue = (
+    value: string | undefined,
+    initialCountryCode: string
+): InitialDataFromValue => {
+    const defaultValue = {
+        country: countryOptionsDataMap[initialCountryCode],
+        format: getFormat(initialCountryCode as CountryCode),
+        localValue: "",
+    };
+    if (!value) return defaultValue;
+    const phoneNumber = parsePhoneNumberFromString(value);
+    if (!phoneNumber) return defaultValue;
+    if (!phoneNumber.country) return defaultValue;
+
+    return {
+        country: countryOptionsDataMap[phoneNumber.country],
+        localValue: phoneNumber.formatNational(),
+        format: getFormat(phoneNumber.country),
+    };
+}
+
+export default getInitialDataFromValue;