@edvisor/product-language 0.9.0 → 0.10.2

package/src/lib/components/select/storybook/components.tsx

@@ -0,0 +1,999 @@
+/* eslint-disable no-restricted-syntax */
+import { Borders, Icons, Padding, shadowMd, Surface } from '@foundations'
+import { Flag } from 'components/flag'
+import { CountryCodes } from 'components/flag/flag.list'
+import { Body, Label } from 'components/typography'
+import { useState } from 'react'
+import { Playground } from 'storybook-addon-jarle-monaco'
+import styled from 'styled-components'
+import { Margin } from '@foundations'
+import { Select } from '../select'
+import { IOption } from '../types'
+import { isNil, safeArray, maybeRender, isDefined, is } from '@helpers'
+import { IconMinor } from 'components/icon'
+import { RadioButtonGroup } from './radio-group'
+import { Checkbox } from 'components/checkbox'
+import { InputText } from 'components/input-field'
+import { MenuList } from '../components/menu-list'
+
+interface IValue {
+  id: string
+  value: string
+}
+
+type ICountryList = {
+  [key in CountryCodes]: string
+}
+
+const FlexWrapper = styled.div`
+  height: 250px;
+  display: flex;
+  flex-direction: revert;
+  align-items: flex-start;
+  margin: 12px;
+  gap: 12px;
+  & > div {
+    width: 100%;
+  }
+`
+
+const CustomListFrame = styled.div`
+  border: 1px solid ${Borders.Default.Subdued};
+  background-color: ${Surface.Default.Default};
+  position: absolute;
+  width: 100%;
+  max-height: 180px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background: ${Surface.Neutral.Default};
+    min-height: 50px;
+  }
+  ${shadowMd};
+`
+
+const CustomRow = styled.div<{active?: boolean}>`
+  border: none;
+  text-align: left;
+  border: 1px solid ${Borders.Default.Subdued};
+  margin: ${Margin.xxxs};
+  border-radius: 6px;
+  background-color: ${(props) =>
+    (is(props.active)
+    ? Surface.Selected.Default
+    : Surface.Default.Default)};
+
+  &:hover {
+    background-color: ${Surface.Default.Hover};
+  }
+
+  &:hover {
+    background-color: ${(props) => (is(props.active) ?Surface.Selected.Hover : Surface.Default.Hover)}
+  }
+
+  &:active {
+    background-color: ${(props) => (is(props.active) ? Surface.Selected.Pressed : Surface.Default.Pressed)};
+  }
+`
+
+const CustomLabel = styled(Label)`
+  cursor: pointer;
+  padding: ${Padding.xxs} ${Padding.xs};
+  margin-left: ${Margin.l};
+`
+
+const SupportText = styled(CustomLabel)`
+  padding-top: ${Padding.none};
+`
+
+const IconWraper = styled.div`
+  position: relative;
+  top: 4px;
+  left: 6px;
+  & i {
+    position: absolute;
+  }
+`
+
+const StarSolid = styled(IconMinor.StarSolid)`
+  svg {
+    path {
+      fill: ${Icons.Critical};
+    }
+  }
+`
+const MugTea = styled(IconMinor.MugTea)`
+  svg {
+    path {
+      fill: ${Icons.Success};
+    }
+  }
+`
+
+const CheckBoxWraper = styled.div`
+  display: flex;
+  gap: 6px;
+  padding: ${Padding.xs};
+  align-self: flex-start;
+  flex-direction: row-reverse;
+  float: left;
+  div:last-of-type {
+    min-width: 110px;
+  }
+`
+
+const PersonPraying = styled(IconMinor.PersonPraying)`
+  svg {
+    path {
+      fill: ${Icons.Warning};
+    }
+  }
+`
+
+const FireBurner = styled(IconMinor.FireBurner)`
+  svg {
+    path {
+      fill: ${Icons.Highlight};
+    }
+  }
+`
+
+export const SelectOptions = () => (
+  <Playground
+    code={`
+    /* Edit this code sample! */
+    type ISelectedValue = string | string[];
+
+    const [value, setValue] = useState<ISelectedValue>();
+    const [isMulti, setIsMulti] = useState<boolean>(false);
+    const [labelPosition, setLabelPosition] = useState<string>('top');
+    const [label, setLabel] = useState<string>('My Label');
+    const [clearable, setClearable] = useState<boolean>(false);
+    const [searchable, setSearchable] = useState<boolean>(false);
+    const [disabled, setDisabled] = useState<boolean>(false);
+    const [invalid, setInvalid] = useState<boolean>(false);
+    const [placeholder, setPlaceholder] = useState<string>('');
+    const [menuPosition, setMenuPosition] = useState<string>('bottom');
+    const [alignSelf, setAlignSelf] = useState<string>('start');
+
+
+    const labelPositionValues = [
+      {
+        label: 'Top',
+        value: 'top',
+        name: 'labelTypes'
+      },
+      {
+        label: 'Side',
+        value: 'side',
+        name: 'labelTypes'
+      }
+    ];
+
+    const multiValues = [
+      {
+        label: 'Single',
+        value: 'single',
+        name: 'multi'
+      },
+      {
+        label: 'Multi',
+        value: 'multi',
+        name: 'multi'
+      },
+    ];
+
+    const menuPositionValues = [
+      {
+        label: 'Bottom',
+        value: 'bottom',
+        name: 'menuPositionTypes'
+      },
+      {
+        label: 'Top',
+        value: 'top',
+        name: 'menuPositionTypes'
+      }
+    ];
+
+    const handleValueChange = (selectedValue: ISelectedValue) => {
+      setValue(selectedValue)
+    };
+
+    const handleTypeChange = (selectedValue: string) => {
+      const isMultiSelect = (selectedValue ===  'multi')
+      setValue(isMultiSelect ? [] : undefined)
+      setIsMulti(isMultiSelect)
+    };
+
+    const handleLabelChange = (selectedValue: string) => {
+      setLabelPosition(selectedValue)
+    };
+
+    const handlemenuPositionChange = (selectedValue: string) => {
+      setMenuPosition(selectedValue)
+      const newAlign = (alignSelf === 'start' ? 'end' : 'start' )
+      setAlignSelf(newAlign)
+    };
+
+    <FlexWrapper style={{height: 'unset'}}>
+      <div style={{display: 'flex', flexDirection: 'column'}}>
+        <div style={{width: '260px'}}>
+          <InputText label='Change the Select Label' value={label} onChange={setLabel}/>
+        </div>
+        <div style={{width: '260px'}}>
+          <InputText label='Select Placeholder' value={placeholder} onChange={setPlaceholder}/>
+        </div>
+        <RadioButtonGroup
+          label="Select Type:"
+          options={multiValues}
+          onChange={handleTypeChange}
+        />
+        <RadioButtonGroup
+          label="Label Position:"
+          options={labelPositionValues}
+          onChange={handleLabelChange}
+        />
+        <RadioButtonGroup
+          label="Menu Position:"
+          options={menuPositionValues}
+          onChange={handlemenuPositionChange}
+        />
+        <CheckBoxWraper>
+          <Checkbox checked={clearable} onChange={() => setClearable(!clearable)}/>
+          <Label>Clearable : </Label>
+        </CheckBoxWraper>
+        <CheckBoxWraper>
+          <Checkbox checked={searchable} onChange={() => setSearchable(!searchable)}/>
+          <Label>Searchable :</Label>
+        </CheckBoxWraper>
+        <CheckBoxWraper>
+          <Checkbox checked={disabled} onChange={() => setDisabled(!disabled)}/>
+          <Label>Disabled :</Label>
+        </CheckBoxWraper>
+        <CheckBoxWraper>
+          <Checkbox checked={invalid} onChange={() => setInvalid(!invalid)}/>
+          <Label>Invalid :</Label>
+        </CheckBoxWraper>
+      </div>
+      <div style={{alignSelf: alignSelf, margin: '100px 0px'}}>
+        <Select
+          menuPosition={menuPosition}
+          multi={isMulti}
+          value={value}
+          clearable={clearable}
+          searchable={searchable}
+          onChange={handleValueChange}
+          options={options1}
+          placeholder={placeholder}
+          labelPosition={labelPosition}
+          label={label}
+          invalid={invalid}
+          disabled={disabled}
+        />
+      </div>
+    </FlexWrapper>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        Select,
+        useState,
+        options1,
+        Label,
+        RadioButtonGroup,
+        Checkbox,
+        InputText,
+        CheckBoxWraper,
+        FlexWrapper,
+      },
+    }}
+  />
+)
+
+export const CustomLabelComponent = () => (
+  <Playground
+    code={`
+    /* Edit this code sample! */
+    /*
+    IValue is the type you pass to the IOption interface
+
+    interface IValue {
+      id: string
+      value: string
+    }
+    */
+    const [value, setValue] = useState<IValue>();
+
+    const onChange = (selectedValue: IValue) => {
+      setValue(selectedValue)
+    };
+
+    const labelComponent = (props: IOption<IValue>) => (
+      <div style={{display: 'flex', gap: '6px'}}>
+          <Flag medium code={props['code']} style={{right: '0'}}/>
+          <Body default style={{padding: '0'}}>{props['children']}</Body>
+      </div>
+    );
+
+    <FlexWrapper>
+      <div>
+        <Select
+          placeholder="Please select..."
+          options={options2}
+          onChange={onChange}
+          labelComponent={labelComponent}
+          value={value}
+          labelPosition='top'
+          searchable
+          label='Select a Country'
+        />
+      </div>
+        <span>{
+          isDefined(value)
+          ? <Label>You Selected: {JSON.stringify(value)}</Label>
+          : <Label>Select Something...</Label>
+        }</span>
+      <div>
+      </div>
+    </FlexWrapper>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        Select,
+        isDefined,
+        useState,
+        options2,
+        Label,
+        Flag,
+        Body,
+        FlexWrapper,
+      },
+    }}
+  />
+)
+
+export const HugeListWithCustomLabelComponent = () => (
+  <Playground
+    // eslint-disable-next-line no-restricted-syntax
+    code={`
+    /* Edit this code sample! */
+    /*
+    IValue is the type you pass to the IOption interface
+
+    interface IValue {
+      id: string
+      value: string
+    }
+    */
+    const [value, setValue] = useState<ICountryValue[]>([]);
+
+    const countryList: IOption<ICountryValue>[] = (Object.keys(CountryList) as (CountryCodes)[])
+      .map(code => ({
+        label: CountryList[code],
+        value: {
+          code: code,
+          value: CountryList[code]
+        }
+    }));
+
+    const onChange = (selectedValue: ICountryValue[]) => {
+      setValue(selectedValue)
+    };
+
+    const labelComponent = (props: IOption<ICountryValue>) => (
+      <div style={{display: 'flex', gap: '6px', pointerEvents: 'none'}}>
+        <Flag medium code={props['value']['code']}/>
+        <Body default>{props['children']}</Body>
+      </div>
+    );
+
+    <FlexWrapper>
+      <div>
+        <Select
+          placeholder="Please select..."
+          options={countryList}
+          onChange={onChange}
+          labelComponent={labelComponent}
+          value={value}
+          labelPosition='top'
+          searchable
+          clearable
+          label='Select a Country'
+        />
+      </div>
+      <div>
+        <div>{isNil(value?.code) ? <Label>Select Something...</Label> : <Label>You Selected: {JSON.stringify(value)}</Label> }</div>
+          {
+            maybeRender(value?.code, <div style={{margin: '${Margin.l} ${Margin.none}', textAlign: 'center', display: 'flex'}}>
+            <Label style={{margin: '${Margin.xxs}'}}>Flag: </Label><IconWraper><Flag large code={value?.code}/></IconWraper>
+            </div>)
+          }
+      </div>
+    </FlexWrapper>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        Select,
+        useState,
+        options2,
+        Label,
+        Flag,
+        Body,
+        Margin,
+        isNil,
+        maybeRender,
+        IconWraper,
+        CountryList,
+        FlexWrapper,
+      },
+    }}
+  />
+)
+
+export const CustomValidation = () => (
+  <Playground
+    // eslint-disable-next-line no-restricted-syntax
+    code={`
+    /* Edit this code sample! */
+    const [value, setValue] = useState<string>()
+    const [errorsList, setErrorsList] = useState<{message: string}[]>([])
+    const isMounted = useRef(false);
+
+    useEffect(() => {
+      if (!isMounted.current) {
+        isMounted.current = true
+        return
+      }
+      checkForErros()
+    }, [value]);
+
+    /*
+      Use onChange and onClose
+    */
+    const onChange = (selectedValue: string) => {
+      setValue(selectedValue)
+    };
+
+    const onClose = () => {
+      checkForErros()
+    };
+
+    const checkForErros = () => {
+      const errors = []
+      if (isNil(value)) {
+        errors.push({ message: 'This field is required' })
+      }
+      setErrorsList(errors)
+    };
+
+    <FlexWrapper>
+      <div>
+        <Select
+          value={value}
+          onChange={onChange}
+          onClose={onClose}
+          options={options1}
+          clearable
+          invalid={errorsList.length > 0}
+          errors={errorsList}
+        />
+      </div>
+    </FlexWrapper>
+
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        Select,
+        options1,
+        Margin,
+        isNil,
+        FlexWrapper,
+      },
+    }}
+  />
+)
+
+export const CustomMenu = () => (
+  <Playground
+    // eslint-disable-next-line no-restricted-syntax
+    code={`
+    /* Edit this code sample! */
+    const [value, setValue] = useState<string>();
+    const [errors, setErrors] = useState<{message: string}[]>([]);
+
+    const handleClick = (props: IMenuComponentProps, option: IOption) => {
+      alert(\`You choose \${option.label}\`)
+      props.onSelect(option.value)
+    };
+
+    const handleChange = (selected: string) => {
+      const newErros = []
+      setValue(selected)
+      if (selected !== 'Brasil') {
+        newErros.push({message:'Wrong one =('})
+      }
+      setErrors(newErros)
+    };
+
+    const menuComponent = (props: IMenuComponentProps) => (
+      // eslint-disable-next-line no-restricted-syntax
+      <CustomListFrame>
+        {(safeArray(props.options)).map((option, i) => (
+          <CustomRow active={props.selectedIndex === i} key={i} onClick={() => handleClick(props, option)}>
+            <IconWraper>
+              {option['icon']}
+            </IconWraper>
+            <CustomLabel>
+              {option.label}
+            </CustomLabel>
+            <SupportText subdued>
+              {option['helperText']}
+            </SupportText>
+          </CustomRow>
+        ))}
+      </CustomListFrame>
+    );
+
+    <FlexWrapper style={{marginTop: '25px', width: '300px'}}>
+
+    <div>
+    <Label>The Southernmost Country?</Label>
+      <Select
+        invalid={errors.length > 0}
+        errors={errors}
+        value={value}
+        onChange={handleChange}
+        options={options3}
+        menuComponent={menuComponent}
+        label='Curiosities'
+        labelPosition='top'
+      />
+      </div>
+    </FlexWrapper>
+
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        Select,
+        safeArray,
+        useState,
+        options3,
+        Label,
+        FlexWrapper,
+        CustomListFrame,
+        CustomRow,
+        CustomLabel,
+        SupportText,
+        IconWraper,
+      },
+    }}
+  />
+)
+
+export const FancyMenu = () => (
+  <Playground
+    code={`
+    /* Edit this code sample! */
+
+    const [value, setValue] = useState<string>(undefined);
+
+    const [withIcon, setWithIcon] = useState<boolean>(true);
+    const [withSupport, setWithSupport] = useState<boolean>(true);
+    const [withMenuTitle, setWithMenuTitle] = useState<boolean>(true);
+    const [selectOptions, setSelectOptions] = useState([]);
+    const [menuTitle, setMenuTitle] = useState(undefined);
+
+    useEffect(() => {
+      setMenuTitle(withMenuTitle ? 'Menu Title' : undefined)
+    }, [withMenuTitle])
+
+    useEffect(() => {
+      setSelectOptions(options1.map((opt) => ({
+        ...opt,
+        ...(withIcon && {icon: <IconMinor.Clone />}),
+        ...(withSupport && {helperText: 'Lorem ipsum dolor sit amet'})
+      })));
+
+    }, [withIcon, withSupport]);
+
+    <FlexWrapper style={{}}>
+      <div style={{display: 'flex', flexDirection: 'column'}}>
+        <CheckBoxWraper style={{width: '160px', justifyContent: 'space-between'}}>
+          <Checkbox checked={withIcon} onChange={() => setWithIcon(!withIcon)}/>
+          <Label>With Icon : </Label>
+        </CheckBoxWraper>
+        <CheckBoxWraper style={{width: '160px', justifyContent: 'space-between'}}>
+          <Checkbox checked={withSupport} onChange={() => setWithSupport(!withSupport)}/>
+          <Label>With Support Text :</Label>
+        </CheckBoxWraper>
+        <CheckBoxWraper style={{width: '160px', justifyContent: 'space-between'}}>
+          <Checkbox checked={withMenuTitle} onChange={() => setWithMenuTitle(!withMenuTitle)}/>
+          <Label>With Menu Title :</Label>
+        </CheckBoxWraper>
+      </div>
+      <div>
+        <Select
+          value={value}
+          onChange={setValue}
+          options={selectOptions}
+          labelPosition="top"
+          placeholder="Select Something"
+          menuComponent={MenuList}
+          label="Cool Label"
+          menuTitle={menuTitle}
+        />
+      </div>
+    </FlexWrapper>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        Select,
+        options1,
+        Label,
+        IconMinor,
+        Checkbox,
+        CheckBoxWraper,
+        FlexWrapper,
+        MenuList,
+      },
+    }}
+  />
+)
+
+const options1: IOption[] = [
+  {
+    label: 'Yu Yu Hakusho',
+    value: '01' ,
+  },
+  {
+    label: 'Neon Genesis Evangelion',
+    value: '02',
+  },
+  {
+    label: 'Dragon Ball Z',
+    value: '03',
+  },
+  {
+    label: 'Legend of Heavenly Sphere Shurato',
+    value: '04',
+  },
+  {
+    label: 'Ronin Warriors',
+    value: '05',
+  },
+  {
+    label: 'Knights of the Zodiac',
+    value: '06',
+  },
+  {
+    label: 'Rurouni Kenshin',
+    value: '07',
+  },
+  {
+    label: 'Avatar the Last Airbender',
+    value: '08',
+  }
+]
+
+const options2: IOption<IValue>[] = [
+  {
+    value: {id: 'BR', value: 'Brasil'},
+    label: 'Brasil',
+    code: 'BR',
+  },
+  {
+    value: {id: 'CA', value: 'Canada'},
+    label: 'Canada',
+    code: 'CA',
+  },
+  {
+    value: {id: 'MX', value: 'Mexico'},
+    label: 'Mexico',
+    code: 'MX',
+  },
+  {
+    value: {id: 'US', value: 'United States'},
+    label: 'United States',
+    code: 'US',
+  }
+]
+
+const options3: IOption[] = [
+  {
+    value: 'Brasil',
+    label: 'Brasil',
+    icon: <MugTea/>,
+    helperText: 'Larges in the South America',
+  },
+  {
+    value: 'Canada',
+    label: 'Canada',
+    icon: <FireBurner />,
+    helperText: 'Very very cold',
+  },
+  {
+    value: 'Mexico',
+    label: 'Mexico',
+    icon: <PersonPraying />,
+    helperText: 'Really hot food!',
+  },
+  {
+    value: 'United States',
+    label: 'United States',
+    icon: <StarSolid/>,
+    helperText: 'Land of the Free',
+  }
+]
+
+const CountryList: ICountryList = {
+  'AD': 'Andorra',
+  'AE': 'United Arab Emirates',
+  'AF': 'Afghanistan',
+  'AG': 'Antigua and Barbuda',
+  'AI': 'Anguilla',
+  'AL': 'Albania',
+  'AM': 'Armenia',
+  'AO': 'Angola',
+  'AQ': 'Antarctica',
+  'AR': 'Argentina',
+  'AS': 'American Samoa',
+  'AT': 'Austria',
+  'AU': 'Australia',
+  'AW': 'Aruba',
+  'AX': 'Aland Islands',
+  'AZ': 'Azerbaijan',
+  'BA': 'Bosnia and Herzegovina',
+  'BB': 'Barbados',
+  'BD': 'Bangladesh',
+  'BE': 'Belgium',
+  'BF': 'Burkina Faso',
+  'BG': 'Bulgaria',
+  'BH': 'Bahrain',
+  'BI': 'Burundi',
+  'BJ': 'Benin',
+  'BL': 'Saint Barthélemy',
+  'BM': 'Bermuda',
+  'BN': 'Brunei Darussalam',
+  'BO': 'Bolivia',
+  'BQ-BO': 'Bonaire',
+  'BQ-SA': 'Saba',
+  'BQ-SE': 'Sint Eustatius',
+  'BR': 'Brazil',
+  'BS': 'Bahamas',
+  'BT': 'Bhutan',
+  'BV': 'Bouvet Island',
+  'BW': 'Botswana',
+  'BY': 'Belarus',
+  'BZ': 'Belize',
+  'CA': 'Canada',
+  'CC': 'Cocos (Keeling) Islands',
+  'CD': 'Democratic Republic of the Congo',
+  'CF': 'Central African Republic',
+  'CG': 'Republic of the Congo',
+  'CH': 'Switzerland',
+  'CI': 'Côte d\'Ivoire (Ivory Coast)',
+  'CK': 'Cook Islands',
+  'CL': 'Chile',
+  'CM': 'Cameroon',
+  'CN': 'China',
+  'CO': 'Colombia',
+  'CR': 'Costa Rica',
+  'CU': 'Cuba',
+  'CV': 'Cabo Verde',
+  'CW': 'Curaçao',
+  'CX': 'Christmas Island',
+  'CY': 'Cyprus',
+  'CZ': 'Czech Republic',
+  'DE': 'Germany',
+  'DJ': 'Djibouti',
+  'DK': 'Denmark',
+  'DM': 'Dominica',
+  'DO': 'Dominican Republic',
+  'DZ': 'Algeria',
+  'EC': 'Ecuador',
+  'EE': 'Estonia',
+  'EG': 'Egypt',
+  'EH': 'Western Sahara',
+  'ER': 'Eritrea',
+  'ES': 'Spain',
+  'ET': 'Ethiopia',
+  'FI': 'Finland',
+  'FJ': 'Fiji',
+  'FK': 'Falkland Islands',
+  'FM': 'Federated States of Micronesia',
+  'FO': 'Faroe Islands',
+  'FR': 'France',
+  'GA': 'Gabon',
+  'GB': 'England',
+  'GB-NIR': 'Northern Ireland',
+  'GB-SCT': 'Scotland',
+  'GB-UKM': 'United Kingdom',
+  'GB-WLS': 'Wales',
+  'GD': 'Grenada',
+  'GE': 'Georgia',
+  'GF': 'French Guiana',
+  'GG': 'Guernsey',
+  'GH': 'Ghana',
+  'GI': 'Gibraltar',
+  'GL': 'Greenland',
+  'GM': 'Gambia',
+  'GN': 'Guinea',
+  'GP': 'Guadeloupe',
+  'GP-FR': 'Guadeloupe',
+  'GQ': 'Equatorial Guinea',
+  'GR': 'Greece',
+  'GS': ' S. Georgia and S. Sandwich Islands',
+  'GT': 'Guatemala',
+  'GU': 'Guam',
+  'GW': 'Guinea-Bissau',
+  'GY': 'Guyana',
+  'HK': 'Hong Kong',
+  'HM': 'Heard and McDonald Islands',
+  'HN': 'Honduras',
+  'HR': 'Croatia (Hrvatska)',
+  'HT': 'Haiti',
+  'HU': 'Hungary',
+  'ID': 'Indonesia',
+  'IE': 'Ireland',
+  'IL': 'Isreal',
+  'IM': 'Isle of Man',
+  'IN': 'India',
+  'IO': 'British Indian Ocean Territory',
+  'IQ': 'Iraq',
+  'IR': 'Iran',
+  'IS': 'Iceland',
+  'IT': 'Italy',
+  'JE': 'Jersey',
+  'JM': 'Jamaica',
+  'JO': 'Jordan',
+  'JP': 'Japan',
+  'KE': 'Kenya',
+  'KG': 'Kyrgyzstan',
+  'KH': 'Cambodia',
+  'KI': ' Kiribati',
+  'KM': 'Comors',
+  'KN': 'Saint Kitts and Nevis',
+  'KP': 'Korea (North)',
+  'KR': 'Korea (South)',
+  'KW': 'Kuwait',
+  'KY': 'Cayman Islands',
+  'KZ': 'Kazakhstan',
+  'LA': 'Laos',
+  'LB': 'Lebanon',
+  'LC': 'Saint Lucia',
+  'LI': 'Liechtenstein',
+  'LK': 'Sri Lanka',
+  'LR': 'Liberia',
+  'LS': 'Lesotho',
+  'LT': 'Lithuania',
+  'LU': 'Luxembourg',
+  'LV': 'Latvia',
+  'LY': 'Libya',
+  'MA': 'Morocco',
+  'MC': 'Monaco',
+  'MD': 'Moldova',
+  'ME': 'Montenegro',
+  'MF': 'Saint Martin',
+  'MG': 'Madagascar',
+  'MH': 'Marshall Islands',
+  'MK': 'North Macedonia',
+  'ML': 'Mali',
+  'MM': 'Myanmar',
+  'MN': 'Mongolia',
+  'MO': 'Macao',
+  'MP': 'Northern Mariana Islands',
+  'MQ': 'Martinique',
+  'MQ-FR': 'Martinique',
+  'MR': 'Mauritania',
+  'MS': 'Montserrat',
+  'MT': 'Malta',
+  'MU': 'Mauritius',
+  'MV': 'Maldives',
+  'MW': 'Malawi',
+  'MX': 'Mexico',
+  'MY': 'Malaysia',
+  'MZ': 'Mozambique',
+  'NA': 'Namibia',
+  'NC': 'New Caledonia',
+  'NE': 'Niger',
+  'NF': 'Norfolk Island',
+  'NG': 'Nigeria',
+  'NI': 'Nicaragua',
+  'NL': 'Netherlands',
+  'NO': 'Norway',
+  'NP': 'Nepal',
+  'NR': 'Nauru',
+  'NU': 'Niue',
+  'NZ': 'New Zealand (Aotearoa)',
+  'OM': 'Oman',
+  'PA': 'Panama',
+  'PE': 'Peru',
+  'PF': 'French Polynesia',
+  'PG': 'Papua New Guinea',
+  'PH': 'Philippines',
+  'PK': 'Pakistan',
+  'PL': 'Poland',
+  'PM': 'St. Pierre & z',
+  'PM-FR': 'Saint Pierre and Miquelon',
+  'PN': 'Pitcairn Islands',
+  'PR': 'Puerto Rico',
+  'PS': 'Palestinian Territory',
+  'PT': 'Portugal',
+  'PW': 'Palau',
+  'PY': 'Paraguay',
+  'QA': 'Qatar',
+  'RE': 'Reunion',
+  'RO': 'Romania',
+  'RS': 'Serbia',
+  'RU': 'Russian Federation',
+  'RW': 'Rwanda',
+  'SA': 'Saudi Arabia',
+  'SB': 'Solomon Islands',
+  'SC': 'Seychelles',
+  'SD': 'Sudan',
+  'SE': 'Sweden',
+  'SG': 'Singapore',
+  'SH': 'Saint Helena',
+  'SI': 'Slovenia',
+  'SJ': 'Svalbard and Jan Mayen',
+  'SK': 'Slovakia',
+  'SL': 'Sierra Leone',
+  'SM': 'San Marino',
+  'SN': 'Senegal',
+  'SO': 'Somalia',
+  'SR': 'Suriname',
+  'SS': 'South Sudan',
+  'ST': 'Sao Tome and Principe',
+  'SV': 'El Salvador',
+  'SX': 'Sint Maarten',
+  'SY': 'Syria',
+  'SZ': 'Swaziland',
+  'TC': 'Turks and Caicos Islands',
+  'TD': 'Chad',
+  'TF': 'French Southern and Antarctic Lands',
+  'TG': 'Togo',
+  'TH': 'Thailand',
+  'TJ': 'Tajikistan',
+  'TK': 'Tokelau',
+  'TL': 'Timor-Leste',
+  'TM': 'Turkmenistan',
+  'TN': 'Tunisia',
+  'TO': 'Tonga',
+  'TR': 'Turkey',
+  'TT': 'Trinidad and Tobago',
+  'TV': 'Tuvalu',
+  'TW': 'Taiwan',
+  'TZ': 'Tanzania',
+  'UA': 'Ukraine',
+  'UG': 'Uganda',
+  'UM': 'United States Minor Outlying Islands',
+  'US': 'United States',
+  'UY': 'Uruguay',
+  'UZ': 'Uzbekistan',
+  'VA': 'Vatican City State',
+  'VC': 'Saint Vincent and the Grenadines',
+  'VE': 'Venezuela',
+  'VG': 'Virgin Islands (British)',
+  'VI': 'Virgin Islands (U.S.)',
+  'VN': 'Vietnam',
+  'VU': 'Vanuatu',
+  'WF': 'Wallis and Futuna',
+  'WS': 'Samoa',
+  'YE': 'Yemen',
+  'YT-UNF': 'Mayotte',
+  'ZA': 'South Africa',
+  'ZM': 'Zambia',
+  'ZW': 'Zimbabwe',
+}