Beginning TS conversion

package.json

@@ -43,12 +43,14 @@
     "react-dom": "^16.4.1",
     "react-scripts": "^5.0.1",
     "rollup": "^4.27.4",
+    "typescript": "^5.7.2",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-terser": "0.4.4",
-    "@rollup/plugin-url": "^8.0.2"
+    "@rollup/plugin-url": "^8.0.2",
+    "@rollup/plugin-typescript": "^12.1.1"
   },
   "files": [
     "dist",

rollup.config.js

@@ -6,6 +6,7 @@ const terser = require('@rollup/plugin-terser');
 const pkg = require('./package.json');
 const argv = require('minimist')(process.argv.slice(2));
 const parseCountryList = require('./rollup-plugin-parse-country-list');
+const typescript = require('@rollup/plugin-typescript');
 
 // e.g. rollup -c --config-countries=GB,CA,US
 let countries = [];
@@ -14,7 +15,7 @@ if (argv.hasOwnProperty('config-countries')) {
 }
 
 module.exports = {
-  input: 'src/index.js',
+  input: 'src/index.ts',
   output: [
     {
       file: pkg.main,
@@ -39,8 +40,11 @@ module.exports = {
       // TODO check https://github.com/rollup/plugins/tree/master/packages/babel#babelhelpers
       babelHelpers: 'bundled',
     }),
-    resolve(),
+    resolve({
+      extensions: ['.ts', '.tsx', '.js'],
+    }),
     terser(),
+    typescript(),
   ],
-  external: ['react', 'react-dom', 'prop-types'],
+  external: ['react', 'react-dom', 'react/jsx-runtime'],
 };

src/CountryDropdown.tsx

@@ -0,0 +1,97 @@
+import React, { FC } from 'react';
+import CountryRegionData from 'country-region-data/data.json';
+import * as C from './constants';
+import * as helpers from './helpers';
+import type { CountryDropdownProps } from './rcrs.types';
+
+export const CountryDropdown: FC<CountryDropdownProps> = ({
+  value = '',
+  name = 'rcrs-country',
+  id = '',
+  classes = '',
+  showDefaultOption = true,
+  defaultOptionLabel = 'Select Country',
+  priorityOptions = [],
+  onChange = () => {},
+  onBlur = () => {},
+  labelType = 'full',
+  valueType = 'full',
+  whitelist = [],
+  blacklist = [],
+  disabled = false,
+  // ...arbitraryProps
+}) => {
+  //     countries: helpers.filterCountries(
+  //       CountryRegionData,
+  //       props.priorityOptions,
+  //       props.whitelist,
+  //       props.blacklist
+  //     ),
+  //   };
+
+  const getCountries = () => {
+    // return countries.map(([countryName, countrySlug]) => (
+    //   <option
+    //     value={valueType === 'short' ? countrySlug : countryName}
+    //     key={countrySlug}
+    //   >
+    //     {labelType === 'short' ? countrySlug : countryName}
+    //   </option>
+    // ));
+  };
+
+  const getDefaultOption = () => {
+    //   const { showDefaultOption, defaultOptionLabel } = this.props;
+    //   if (!showDefaultOption) {
+    //     return null;
+    //   }
+    //   return (
+    //     <option value="" key="default">
+    //       {defaultOptionLabel}
+    //     </option>
+    //   );
+  };
+
+  // render() {
+  //   // unused properties deliberately added so arbitraryProps gets populated with anything else the user specifies
+  //   const {
+  //     name,
+  //     id,
+  //     classes,
+  //     value,
+  //     onChange,
+  //     onBlur,
+  //     disabled,
+  //     showDefaultOption,
+  //     defaultOptionLabel,
+  //     labelType,
+  //     valueType,
+  //     whitelist,
+  //     blacklist,
+  //     customOptions,
+  //     priorityOptions,
+  //     ...arbitraryProps
+  //   } = this.props;
+
+  const attrs: any = {
+    ...arbitraryProps,
+    name,
+    value,
+    onChange: (e) => onChange(e.target.value, e),
+    onBlur: (e) => onBlur(e.target.value, e),
+    disabled,
+  };
+  if (id) {
+    attrs.id = id;
+  }
+  if (classes) {
+    attrs.className = classes;
+  }
+
+  return (
+    <select {...attrs}>
+      {getDefaultOption()}
+      {getCountries()}
+    </select>
+  );
+};