Skip to content

Commit

Permalink
feat(phone-input): new component (#2150)
Browse files Browse the repository at this point in the history
  • Loading branch information
agliga authored Apr 19, 2024
1 parent 4f8e826 commit 7cc0cf6
Show file tree
Hide file tree
Showing 46 changed files with 3,354 additions and 517 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ Each layer does its bit to enforce and enhance accessibility. We consider this l
- [`ebay-page-notice`](https://github.com/eBay/ebayui-core/tree/master/src/components/ebay-page-notice)
- [`ebay-pagination`](https://github.com/eBay/ebayui-core/tree/master/src/components/ebay-pagination)
- [`ebay-panel-dialog`](https://github.com/eBay/ebayui-core/tree/master/src/components/ebay-panel-dialog)
- [`ebay-phone-input`](https://github.com/eBay/ebayui-core/tree/master/src/components/ebay-phone-input)
- [`ebay-progress-bar`](https://github.com/eBay/ebayui-core/tree/master/src/components/ebay-progress-bar)
- [`ebay-progress-bar-expressive`](https://github.com/eBay/ebayui-core/tree/master/src/components/ebay-progress-bar-expressive)
- [`ebay-progress-spinner`](https://github.com/eBay/ebayui-core/tree/master/src/components/ebay-progress-spinner)
Expand Down
1,027 changes: 549 additions & 478 deletions package-lock.json

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
"build:ci": "npm run lint && node scripts/check-postpublish && npm test && npm run build",
"build:readme": "node scripts/add-ds-version",
"build:storybook": "storybook build -o ./docs",
"importSVG": "node --experimental-json-modules --experimental-import-meta-resolve scripts/import-svg",
"importSVG": "node --experimental-json-modules --experimental-import-meta-resolve scripts/import-svg && prettier . --write --log-level=warn",
"tt": "mtc",
"ts": "npm run test:server",
"tb": "npm run test:browser",
Expand Down Expand Up @@ -124,6 +124,7 @@
"lasso-marko": "^4.0.0",
"less": "^4.2.0",
"less-loader": "^12",
"libphonenumber-js": "^1.10.58",
"lint-staged": "^15.2.2",
"lintspaces-cli": "^0.8.0",
"marko": "^5.33.14",
Expand Down
64 changes: 64 additions & 0 deletions scripts/import-svg.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,14 @@ import { createRequire } from "module";
import { fileURLToPath } from "url";
import cheerio from "cheerio";
import { minify } from "html-minifier";
import {
getExampleNumber,
getCountries,
getCountryCallingCode,
} from "libphonenumber-js/max";
import examples from "libphonenumber-js/mobile/examples";
import markoTagJson from "../src/components/ebay-icon/marko-tag.json" assert { type: "json" };

const require = createRequire(import.meta.url);

const skinDir = path.dirname(require.resolve("@ebay/skin/package.json"));
Expand All @@ -23,6 +30,7 @@ const defsNames = new Set();
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const outputBaseDir = path.join(__dirname, "../src/components");
const outputCommonDir = path.join(__dirname, "../src/common");
const examplesMap = {};

const htmlMinifierOptions = {
Expand Down Expand Up @@ -208,6 +216,62 @@ function generateIcon(componentName) {
for (const [name] of icons) {
examplesMap[componentName].push(name);
}
if (componentName === "flag") {
generateFlagComponent(icons);
}
}

function generateFlagComponent(iconMap) {
const text = [
`import type { WithNormalizedProps } from "../../global";
static interface FlagInput extends Omit<Marko.Input<"span">, \`on\${string}\`> {
flag?: string;
}
export interface Input extends WithNormalizedProps<FlagInput> {}
$ const {
flag
} = input;
<if(!flag)></if>\n`,
];
const twoDititCountries = getCountries();
const countries = {};
for (const [name] of iconMap) {
const countryMap = twoDititCountries.find(
(country) => country === name.slice(5).toUpperCase(),
);
if (countryMap) {
text.push(`<else-if(flag === "${countryMap}")>
<ebay-${name} />
</else-if>
`);

const country = {
countryCode: countryMap,
callingCode: getCountryCallingCode(countryMap),
};
const exampleNumber = getExampleNumber(countryMap, examples);
if (exampleNumber) {
const mask = exampleNumber.formatNational().replace(/\d/g, "0");
if (mask) {
country.mask = mask;
}
}
countries[countryMap] = country;
}
}

fs.writeFileSync(
path.join(outputBaseDir, "ebay-flag", "index.marko"),
text.join(""),
);

fs.writeFileSync(
path.join(outputCommonDir, "countries", "countries.ts"),
`export default ${JSON.stringify(countries)};`,
);
}

setupDir("icon");
Expand Down
247 changes: 247 additions & 0 deletions src/common/countries/countries.ts

Large diffs are not rendered by default.

247 changes: 247 additions & 0 deletions src/common/countries/english.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,247 @@
export default {
AF: "Afghanistan",
AX: "Åland Islands",
AL: "Albania",
DZ: "Algeria",
AS: "American Samoa",
AD: "Andorra",
AO: "Angola",
AI: "Anguilla",
AG: "Antigua and Barbuda",
AR: "Argentina",
AM: "Armenia",
AW: "Aruba",
AC: "Ascension Island",
AU: "Australia",
AT: "Austria",
AZ: "Azerbaijan",
BS: "Bahamas",
BH: "Bahrain",
BD: "Bangladesh",
BB: "Barbados",
BY: "Belarus",
BE: "Belgium",
BZ: "Belize",
BJ: "Benin",
BM: "Bermuda",
BT: "Bhutan",
BO: "Bolivia",
BA: "Bosnia and Herzegovina",
BW: "Botswana",
BR: "Brazil",
IO: "British Indian Ocean Territory",
VG: "British Virgin Islands",
BN: "Brunei",
BG: "Bulgaria",
BF: "Burkina Faso",
BI: "Burundi",
KH: "Cambodia",
CM: "Cameroon",
CA: "Canada",
CV: "Cape Verde",
BQ: "Caribbean Netherlands",
KY: "Cayman Islands",
CF: "Central African Republic",
TD: "Chad",
CL: "Chile",
CN: "China",
CX: "Christmas Island",
CC: "Cocos Islands",
CO: "Colombia",
KM: "Comoros",
CK: "Cook Islands",
CR: "Costa Rica",
HR: "Croatia",
CU: "Cuba",
CW: "Curacao",
CY: "Cyprus",
CZ: "Czech Republic",
CD: "Democratic Republic of the Congo",
DK: "Denmark",
DJ: "Djibouti",
DM: "Dominica",
DO: "Dominican Republic",
TL: "East Timor",
EC: "Ecuador",
EG: "Egypt",
SV: "El Salvador",
GQ: "Equatorial Guinea",
ER: "Eritrea",
EE: "Estonia",
ET: "Ethiopia",
FK: "Falkland Islands",
FO: "Faroe Islands",
FJ: "Fiji",
FI: "Finland",
FR: "France",
GF: "French Guiana",
PF: "French Polynesia",
GA: "Gabon",
GM: "Gambia",
GE: "Georgia",
DE: "Germany",
GH: "Ghana",
GI: "Gibraltar",
GR: "Greece",
GL: "Greenland",
GD: "Grenada",
GP: "Guadeloupe",
GU: "Guam",
GT: "Guatemala",
GG: "Guernsey",
GN: "Guinea",
GW: "Guinea-Bissau",
GY: "Guyana",
HT: "Haiti",
HN: "Honduras",
HK: "Hong Kong",
HU: "Hungary",
IS: "Iceland",
IN: "India",
ID: "Indonesia",
IR: "Iran",
IQ: "Iraq",
IE: "Ireland",
IM: "Isle of Man",
IL: "Israel",
IT: "Italy",
CI: "Ivory Coast",
JM: "Jamaica",
JP: "Japan",
JE: "Jersey",
JO: "Jordan",
KZ: "Kazakhstan",
KE: "Kenya",
KI: "Kiribati",
XK: "Kosovo",
KW: "Kuwait",
KG: "Kyrgyzstan",
LA: "Laos",
LV: "Latvia",
LB: "Lebanon",
LS: "Lesotho",
LR: "Liberia",
LY: "Libya",
LI: "Liechtenstein",
LT: "Lithuania",
LU: "Luxembourg",
MO: "Macau",
MK: "Macedonia",
MG: "Madagascar",
MW: "Malawi",
MY: "Malaysia",
MV: "Maldives",
ML: "Mali",
MT: "Malta",
MH: "Marshall Islands",
MQ: "Martinique",
MR: "Mauritania",
MU: "Mauritius",
YT: "Mayotte",
MX: "Mexico",
FM: "Micronesia",
MD: "Moldova",
MC: "Monaco",
MN: "Mongolia",
ME: "Montenegro",
MS: "Montserrat",
MA: "Morocco",
MZ: "Mozambique",
MM: "Myanmar",
NA: "Namibia",
NR: "Nauru",
NP: "Nepal",
NL: "Netherlands",
NC: "New Caledonia",
NZ: "New Zealand",
NI: "Nicaragua",
NE: "Niger",
NG: "Nigeria",
NU: "Niue",
NF: "Norfolk Island",
KP: "North Korea",
MP: "Northern Mariana Islands",
NO: "Norway",
OM: "Oman",
PK: "Pakistan",
PW: "Palau",
PS: "Palestine",
PA: "Panama",
PG: "Papua New Guinea",
PY: "Paraguay",
PE: "Peru",
PH: "Philippines",
PL: "Poland",
PT: "Portugal",
PR: "Puerto Rico",
QA: "Qatar",
CG: "Republic of the Congo",
RE: "Reunion",
RO: "Romania",
RU: "Russia",
RW: "Rwanda",
BL: "Saint Barthelemy",
SH: "Saint Helena",
KN: "Saint Kitts and Nevis",
LC: "Saint Lucia",
MF: "Saint Martin",
PM: "Saint Pierre and Miquelon",
VC: "Saint Vincent and the Grenadines",
WS: "Samoa",
SM: "San Marino",
ST: "Sao Tome and Principe",
SA: "Saudi Arabia",
SN: "Senegal",
RS: "Serbia",
SC: "Seychelles",
SL: "Sierra Leone",
SG: "Singapore",
SX: "Sint Maarten",
SK: "Slovakia",
SI: "Slovenia",
SB: "Solomon Islands",
SO: "Somalia",
ZA: "South Africa",
KR: "South Korea",
SS: "South Sudan",
ES: "Spain",
LK: "Sri Lanka",
SD: "Sudan",
SR: "Suriname",
SJ: "Svalbard and Jan Mayen",
SZ: "Swaziland",
SE: "Sweden",
CH: "Switzerland",
SY: "Syria",
TW: "Taiwan",
TJ: "Tajikistan",
TZ: "Tanzania",
TH: "Thailand",
TG: "Togo",
TK: "Tokelau",
TO: "Tonga",
TT: "Trinidad and Tobago",
TA: "Tristan da Cunha",
TN: "Tunisia",
TR: "Turkey",
TM: "Turkmenistan",
TC: "Turks and Caicos Islands",
TV: "Tuvalu",
VI: "U.S. Virgin Islands",
UG: "Uganda",
UA: "Ukraine",
AE: "United Arab Emirates",
GB: "United Kingdom",
US: "United States",
UY: "Uruguay",
UZ: "Uzbekistan",
VU: "Vanuatu",
VA: "Vatican",
VE: "Venezuela",
VN: "Vietnam",
WF: "Wallis and Futuna",
EH: "Western Sahara",
YE: "Yemen",
ZM: "Zambia",
ZW: "Zimbabwe",
};
21 changes: 21 additions & 0 deletions src/common/countries/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import countries from "./countries";
import countriesEnglishJSON from "./english";

export interface CountryInterface {
countryCode: string;
callingCode: string;
mask: string;
}

export interface CountriesLanguageInterface {
[index: string]: string;
}

export interface CountriesInterface {
[index: string]: CountryInterface;
}

export default countries as CountriesInterface;

export const countriesEnglish: CountriesLanguageInterface =
countriesEnglishJSON as CountriesLanguageInterface;
Loading

0 comments on commit 7cc0cf6

Please sign in to comment.