├── .prettierrc.json ├── .husky ├── pre-commit └── commit-msg ├── jest.setup.ts ├── src ├── data │ └── index.ts ├── components │ ├── Flags │ │ ├── index.ts │ │ └── Flags.stories.tsx │ └── ReactFlagsSelect │ │ ├── index.ts │ │ └── ReactFlagsSelect.module.scss ├── types │ ├── index.ts │ └── ReactFlagsSelectTypes.ts ├── utils │ ├── getCountryCodes │ │ ├── index.ts │ │ ├── getCountryCodes.ts │ │ └── getCountryCodes.test.ts │ ├── isCountryLabelMatch │ │ ├── index.ts │ │ ├── isCountryLabelMatch.ts │ │ └── isCountryLabelMatch.test.ts │ ├── isCustomLabelObject │ │ ├── index.ts │ │ ├── isCustomLabelObject.ts │ │ └── isCustomLabelObject.test.ts │ ├── countryCodeToPascalCase │ │ ├── index.ts │ │ ├── countryCodeToPascalCase.ts │ │ └── countryCodeToPascalCase.test.ts │ └── index.ts ├── index.ts └── declarations.d.ts ├── .prettierignore ├── commitlint.config.js ├── .storybook ├── preview.js ├── preview-body.html └── main.js ├── .gitignore ├── .github └── workflows │ ├── commitlint.yml │ ├── lint-test-build.yml │ ├── gh-pages.yml │ └── release.yml ├── jest.config.js ├── flags ├── ht.svg ├── id.svg ├── mc.svg ├── pl.svg ├── ua.svg ├── lv.svg ├── jp.svg ├── bd.svg ├── pw.svg ├── th.svg ├── at.svg ├── dk.svg ├── fi.svg ├── ga.svg ├── lt.svg ├── se.svg ├── sl.svg ├── ye.svg ├── am.svg ├── bg.svg ├── co.svg ├── de.svg ├── ee.svg ├── hu.svg ├── lu.svg ├── mg.svg ├── nl.svg ├── ru.svg ├── ci.svg ├── gn.svg ├── ml.svg ├── be.svg ├── bw.svg ├── fr.svg ├── ie.svg ├── it.svg ├── ng.svg ├── pe.svg ├── ro.svg ├── td.svg ├── la.svg ├── lc.svg ├── mu.svg ├── ne.svg ├── bj.svg ├── gm.svg ├── cz.svg ├── ae.svg ├── fo.svg ├── is.svg ├── no.svg ├── cg.svg ├── bs.svg ├── tt.svg ├── gl.svg ├── kw.svg ├── bh.svg ├── ax.svg ├── ps.svg ├── sd.svg ├── to.svg ├── tz.svg ├── so.svg ├── vn.svg ├── ch.svg ├── nf.svg ├── gg.svg ├── bf.svg ├── jm.svg ├── mv.svg ├── nr.svg ├── gr.svg ├── sc.svg ├── cm.svg ├── mm.svg ├── gh.svg ├── sr.svg ├── sn.svg ├── ma.svg ├── gw.svg ├── dj.svg ├── bb.svg ├── kp.svg ├── za.svg ├── il.svg ├── aw.svg ├── cl.svg ├── cf.svg ├── mh.svg ├── mr.svg ├── pk.svg ├── cd.svg ├── cw.svg ├── eg.svg ├── jo.svg ├── pr.svg ├── tr.svg ├── cu.svg ├── tg.svg ├── sy.svg ├── kh.svg ├── tl.svg ├── dz.svg ├── st.svg ├── ly.svg ├── qa.svg ├── ag.svg ├── gb.svg ├── rw.svg ├── pa.svg ├── tn.svg ├── az.svg ├── kn.svg ├── ca.svg ├── mk.svg ├── na.svg ├── ss.svg ├── lr.svg ├── fm.svg ├── et.svg ├── sk.svg ├── np.svg ├── tw.svg ├── tk.svg ├── cn.svg ├── lb.svg ├── pt.svg ├── ao.svg ├── hn.svg ├── vu.svg ├── ph.svg ├── ke.svg ├── ws.svg ├── gi.svg ├── mt.svg ├── ge.svg ├── km.svg ├── sg.svg ├── sb.svg ├── in.svg ├── ls.svg ├── my.svg ├── gu.svg ├── gd.svg ├── nu.svg ├── mp.svg ├── bi.svg ├── mn.svg ├── ug.svg ├── ba.svg ├── uy.svg ├── cv.svg ├── ve.svg ├── mz.svg ├── iq.svg ├── py.svg ├── br.svg └── mo.svg ├── tsconfig.json ├── release.config.js ├── rollup.config.js ├── eslint.config.js └── CHANGELOG.md /.prettierrc.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | yarn lint -------------------------------------------------------------------------------- /jest.setup.ts: -------------------------------------------------------------------------------- 1 | import "@testing-library/jest-dom"; 2 | -------------------------------------------------------------------------------- /src/data/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./countries"; 2 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | npx --no-install commitlint --edit "$1" -------------------------------------------------------------------------------- /src/components/Flags/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Countries"; 2 | -------------------------------------------------------------------------------- /src/types/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./ReactFlagsSelectTypes"; 2 | -------------------------------------------------------------------------------- /src/utils/getCountryCodes/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./getCountryCodes"; 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | build 2 | coverage 3 | src/components/Flags/Countries/*.tsx -------------------------------------------------------------------------------- /src/utils/isCountryLabelMatch/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./isCountryLabelMatch"; 2 | -------------------------------------------------------------------------------- /src/utils/isCustomLabelObject/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./isCustomLabelObject"; 2 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = {extends: ['@commitlint/config-conventional']} 2 | -------------------------------------------------------------------------------- /src/utils/countryCodeToPascalCase/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./countryCodeToPascalCase"; 2 | -------------------------------------------------------------------------------- /.storybook/preview.js: -------------------------------------------------------------------------------- 1 | 2 | export const parameters = { 3 | actions: { argTypesRegex: "^on[A-Z].*" }, 4 | } -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./components/ReactFlagsSelect"; 2 | export * from "./components/Flags"; 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | build 3 | npm-debug.log* 4 | src/components/Flags/Countries/*.tsx 5 | storybook-static 6 | -------------------------------------------------------------------------------- /src/components/ReactFlagsSelect/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./ReactFlagsSelect"; 2 | export type { Props } from "./ReactFlagsSelect"; 3 | -------------------------------------------------------------------------------- /src/declarations.d.ts: -------------------------------------------------------------------------------- 1 | declare module "classnames"; 2 | 3 | declare module "*.scss" { 4 | const styles: { [className: string]: string }; 5 | export default styles; 6 | } 7 | -------------------------------------------------------------------------------- /src/utils/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./countryCodeToPascalCase"; 2 | export * from "./getCountryCodes"; 3 | export * from "./isCountryLabelMatch"; 4 | export * from "./isCustomLabelObject"; 5 | -------------------------------------------------------------------------------- /src/utils/countryCodeToPascalCase/countryCodeToPascalCase.ts: -------------------------------------------------------------------------------- 1 | export const countryCodeToPascalCase = (countryCode: string): string => { 2 | return `${countryCode.slice(0, 1)}${countryCode.charAt(1).toLowerCase()}`; 3 | }; 4 | -------------------------------------------------------------------------------- /src/utils/isCustomLabelObject/isCustomLabelObject.ts: -------------------------------------------------------------------------------- 1 | import { CustomLabel } from "../../types"; 2 | 3 | export const isCustomLabelObject = (label: string | CustomLabel): boolean => { 4 | return typeof label === "object"; 5 | }; 6 | -------------------------------------------------------------------------------- /.storybook/preview-body.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/utils/countryCodeToPascalCase/countryCodeToPascalCase.test.ts: -------------------------------------------------------------------------------- 1 | import { countryCodeToPascalCase } from "."; 2 | 3 | describe("countryCodeToPascalCase", () => { 4 | it("returns a country code to pascal case", () => { 5 | expect(countryCodeToPascalCase("GB")).toEqual("Gb"); 6 | }); 7 | }); 8 | -------------------------------------------------------------------------------- /.github/workflows/commitlint.yml: -------------------------------------------------------------------------------- 1 | name: Lint Commit Messages 2 | 3 | on: [pull_request] 4 | 5 | jobs: 6 | commitlint: 7 | runs-on: ubuntu-latest 8 | steps: 9 | - uses: actions/checkout@v2 10 | with: 11 | fetch-depth: 0 12 | - uses: wagoid/commitlint-github-action@v2 13 | -------------------------------------------------------------------------------- /src/utils/isCountryLabelMatch/isCountryLabelMatch.ts: -------------------------------------------------------------------------------- 1 | export const isCountryLabelMatch = ( 2 | label?: string, 3 | searchValue?: string 4 | ): boolean => { 5 | if (!label || !searchValue) { 6 | return false; 7 | } 8 | 9 | return label.toLowerCase().includes(searchValue.toLowerCase()); 10 | }; 11 | -------------------------------------------------------------------------------- /src/types/ReactFlagsSelectTypes.ts: -------------------------------------------------------------------------------- 1 | export type Countries = Record; 2 | export type CountryCodes = Array; 3 | export type CustomLabels = Record; 4 | export type CustomLabel = { primary: string; secondary?: string }; 5 | export type OnSelect = (countryCode: string) => void; 6 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: "ts-jest", 3 | testEnvironment: "jest-environment-jsdom", 4 | setupFilesAfterEnv: ["/jest.setup.ts"], 5 | transform: { 6 | "^.+\\.tsx?$": "ts-jest", 7 | }, 8 | moduleNameMapper: { 9 | "\\.(css|less|scss|sass)$": "identity-obj-proxy", 10 | }, 11 | }; 12 | -------------------------------------------------------------------------------- /flags/ht.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /flags/id.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /flags/mc.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /flags/pl.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /flags/ua.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /flags/lv.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /flags/jp.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /flags/bd.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /flags/pw.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /flags/th.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /flags/at.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /flags/dk.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /flags/fi.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /flags/ga.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/lt.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/se.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /flags/sl.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/ye.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/am.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/bg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/co.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/de.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/ee.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/hu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/lu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/mg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/nl.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/ru.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/ci.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/gn.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/ml.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/be.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/bw.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/fr.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/ie.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/it.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/ng.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/pe.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/ro.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/td.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/la.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/lc.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /flags/mu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /flags/ne.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /flags/bj.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/gm.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /flags/cz.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/ae.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /flags/fo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/is.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/no.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/cg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/bs.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/tt.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/gl.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/kw.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /flags/bh.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /.github/workflows/lint-test-build.yml: -------------------------------------------------------------------------------- 1 | name: Lint - Test - Build 2 | 3 | on: [push] 4 | 5 | jobs: 6 | lint-test-build: 7 | runs-on: ubuntu-latest 8 | steps: 9 | - name: Checkout 10 | uses: actions/checkout@v4 11 | with: 12 | persist-credentials: false 13 | 14 | - name: Install 15 | run: | 16 | yarn install 17 | yarn gen-flags-components 18 | 19 | - name: Lint 20 | run: | 21 | yarn lint 22 | 23 | - name: Test 24 | run: | 25 | yarn test 26 | 27 | - name: Build 28 | run: | 29 | yarn build 30 | -------------------------------------------------------------------------------- /flags/ax.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /flags/ps.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /flags/sd.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /flags/to.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/tz.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /flags/so.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /flags/vn.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ "es5", "es6", "es7", "es2017", "dom" ], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "esModuleInterop": true, 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "module": "esnext", 12 | "declaration": true, 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react", 18 | "downlevelIteration": true, 19 | "types": ["jest", "@testing-library/jest-dom"] 20 | }, 21 | "include": [ 22 | "./src/" 23 | ] 24 | } -------------------------------------------------------------------------------- /flags/ch.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /flags/nf.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/gg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /flags/bf.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/jm.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/mv.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/components/Flags/Flags.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type { Meta, StoryObj } from "@storybook/react"; 3 | import { Us } from "."; 4 | 5 | const meta: Meta = { 6 | title: "Flags", 7 | component: Us, 8 | argTypes: { 9 | fontSize: { 10 | control: { type: "number", min: 8, max: 100 }, 11 | defaultValue: 24, 12 | description: "Parent Font Size in px", 13 | }, 14 | }, 15 | }; 16 | 17 | export default meta; 18 | 19 | type Story = StoryObj; 20 | 21 | export const Primary: Story = { 22 | args: { 23 | fontSize: 24, 24 | }, 25 | render: ({ fontSize }) => ( 26 | 27 | 28 | 29 | ), 30 | }; 31 | -------------------------------------------------------------------------------- /release.config.js: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line @typescript-eslint/no-var-requires 2 | const pkg = require("./package.json"); 3 | 4 | module.exports = { 5 | plugins: [ 6 | "@semantic-release/commit-analyzer", 7 | "@semantic-release/release-notes-generator", 8 | [ 9 | "@semantic-release/npm", 10 | { 11 | assets: [...pkg.files, "package.json", "yarn.lock", "CHANGELOG.md"], 12 | }, 13 | ], 14 | [ 15 | "@semantic-release/changelog", 16 | { 17 | changelogFile: "CHANGELOG.md", 18 | }, 19 | ], 20 | [ 21 | "@semantic-release/git", 22 | { 23 | assets: ["package.json", "yarn.lock", "CHANGELOG.md"], 24 | }, 25 | ], 26 | ], 27 | }; 28 | -------------------------------------------------------------------------------- /flags/nr.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/gr.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /flags/sc.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /.github/workflows/gh-pages.yml: -------------------------------------------------------------------------------- 1 | name: Build storybook and Deploy to gh-pages 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | 8 | jobs: 9 | build-and-deploy: 10 | runs-on: ubuntu-latest 11 | steps: 12 | - name: Checkout 🛎️ 13 | uses: actions/checkout@v2.3.1 14 | with: 15 | persist-credentials: false 16 | 17 | - name: Install and Build 🔧 18 | run: | 19 | yarn install 20 | yarn gen-flags-components 21 | yarn build-storybook 22 | 23 | - name: Deploy 🚀 24 | uses: JamesIves/github-pages-deploy-action@3.7.1 25 | with: 26 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 27 | BRANCH: gh-pages 28 | FOLDER: storybook-static 29 | CLEAN: true 30 | -------------------------------------------------------------------------------- /flags/cm.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/utils/getCountryCodes/getCountryCodes.ts: -------------------------------------------------------------------------------- 1 | import { countries as AllCountries } from "../../data"; 2 | import type { CountryCodes } from "../../types"; 3 | 4 | export const getCountryCodes = ( 5 | countries?: CountryCodes, 6 | blacklistCountries?: boolean 7 | ): CountryCodes => { 8 | const fullCountryCodes = Object.keys(AllCountries); 9 | 10 | if (!countries) { 11 | return fullCountryCodes; 12 | } 13 | 14 | const uniqueCountries = [...new Set(countries)]; 15 | 16 | const validCountryCodes = uniqueCountries.filter( 17 | (code) => AllCountries[code] 18 | ); 19 | const filteredCountryCodes = blacklistCountries 20 | ? fullCountryCodes.filter((code) => !validCountryCodes.includes(code)) 21 | : validCountryCodes; 22 | 23 | return filteredCountryCodes; 24 | }; 25 | -------------------------------------------------------------------------------- /flags/mm.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /flags/gh.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /flags/sr.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /flags/sn.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /flags/ma.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /flags/gw.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/utils/isCountryLabelMatch/isCountryLabelMatch.test.ts: -------------------------------------------------------------------------------- 1 | import { isCountryLabelMatch } from "."; 2 | 3 | describe("isCountryLabelMatch", () => { 4 | it("returns false if there is no label", () => { 5 | expect(isCountryLabelMatch(undefined, "ger")).toBe(false); 6 | }); 7 | 8 | it("returns false if there is no search value", () => { 9 | expect(isCountryLabelMatch("France")).toBe(false); 10 | }); 11 | 12 | it("returns true if the search value can be found in label", () => { 13 | expect(isCountryLabelMatch("France", "Fra")).toBe(true); 14 | }); 15 | 16 | it("is not case sensitive", () => { 17 | expect(isCountryLabelMatch("FRANCE", "fra")).toBe(true); 18 | }); 19 | 20 | it("returns false if the search value can not be found in label", () => { 21 | expect(isCountryLabelMatch("France", "ger")).toBe(false); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /flags/dj.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /flags/bb.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /flags/kp.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | framework: "@storybook/react-webpack5", 3 | stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], 4 | addons: [ 5 | "@storybook/addon-links", 6 | "@storybook/preset-scss", 7 | "@storybook/addon-docs", 8 | ], 9 | webpackFinal: async (config) => { 10 | config.module.rules.push({ 11 | test: /\.(ts|tsx)$/, 12 | use: [ 13 | { 14 | loader: require.resolve("babel-loader"), 15 | options: { 16 | presets: [ 17 | require.resolve("@babel/preset-env"), 18 | require.resolve("@babel/preset-react"), 19 | require.resolve("@babel/preset-typescript"), 20 | ], 21 | }, 22 | }, 23 | ], 24 | }); 25 | 26 | config.resolve.extensions.push(".ts", ".tsx"); 27 | 28 | return config; 29 | }, 30 | }; 31 | -------------------------------------------------------------------------------- /flags/za.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /flags/il.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Publish to NPM 2 | on: 3 | push: 4 | branches: 5 | - master 6 | 7 | jobs: 8 | release: 9 | name: Release 10 | runs-on: ubuntu-latest 11 | steps: 12 | - name: Checkout 13 | uses: actions/checkout@v4 14 | with: 15 | fetch-depth: 0 16 | persist-credentials: false 17 | - name: Setup Node.js 18 | uses: actions/setup-node@v4 19 | with: 20 | node-version: 22 21 | registry-url: "https://registry.npmjs.org" 22 | - name: Install dependencies 23 | run: yarn install --frozen-lockfile 24 | - name: Build Package 25 | run: yarn run build 26 | - name: Release 27 | env: 28 | # GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 29 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 30 | run: | 31 | # npm login 32 | npm publish 33 | -------------------------------------------------------------------------------- /flags/aw.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /flags/cl.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /flags/cf.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /flags/mh.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /flags/mr.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import peerDepsExternal from "rollup-plugin-peer-deps-external"; 2 | import resolve from "@rollup/plugin-node-resolve"; 3 | import babel from "@rollup//plugin-babel"; 4 | import commonjs from "@rollup/plugin-commonjs"; 5 | import typescript from "rollup-plugin-typescript2"; 6 | import postcss from "rollup-plugin-postcss"; 7 | 8 | import pkg from "./package.json"; 9 | 10 | export default { 11 | input: "src/index.ts", 12 | output: [ 13 | { 14 | file: pkg.main, 15 | format: "cjs", 16 | sourcemap: true, 17 | }, 18 | { 19 | file: pkg.module, 20 | format: "esm", 21 | sourcemap: true, 22 | }, 23 | ], 24 | plugins: [ 25 | peerDepsExternal(), 26 | resolve(), 27 | babel({ 28 | exclude: "node_modules/**", 29 | presets: ["@babel/env", "@babel/preset-react"], 30 | }), 31 | commonjs({ exclude: "/src/components/Flags/Af.js" }), 32 | typescript({ useTsconfigDeclarationDir: false }), 33 | postcss(), 34 | ], 35 | }; 36 | -------------------------------------------------------------------------------- /flags/pk.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /flags/cd.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /flags/cw.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/eg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /flags/jo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /flags/pr.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /flags/tr.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /flags/cu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /flags/tg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /flags/sy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /flags/kh.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/utils/isCustomLabelObject/isCustomLabelObject.test.ts: -------------------------------------------------------------------------------- 1 | import { CustomLabel } from "../../types"; 2 | import { isCustomLabelObject } from "./isCustomLabelObject"; 3 | 4 | describe("isCustomLabelObject", () => { 5 | describe("when string is passed", () => { 6 | it("returns false when string is valid", () => { 7 | const label: string | CustomLabel = "US"; 8 | const isLabelObject = isCustomLabelObject(label); 9 | expect(isLabelObject).toBe(false); 10 | }); 11 | }); 12 | 13 | describe("when CustomLabel object is passed", () => { 14 | it("returns true when object is valid", () => { 15 | const label: string | CustomLabel = { 16 | primary: "US", 17 | secondary: "+1", 18 | }; 19 | const isLabelObject = isCustomLabelObject(label); 20 | expect(isLabelObject).toBe(true); 21 | }); 22 | 23 | it("returns true when only primary property is valid in object", () => { 24 | const label: string | CustomLabel = { 25 | primary: "US", 26 | }; 27 | const isLabelObject = isCustomLabelObject(label); 28 | expect(isLabelObject).toBe(true); 29 | }); 30 | }); 31 | }); 32 | -------------------------------------------------------------------------------- /flags/tl.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /flags/dz.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /flags/st.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /flags/ly.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /flags/qa.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /flags/ag.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /flags/gb.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /flags/rw.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /flags/pa.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /flags/tn.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /flags/az.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /flags/kn.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /flags/ca.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /flags/mk.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /flags/na.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /flags/ss.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /flags/lr.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | const { FlatCompat } = require("@eslint/eslintrc"); 2 | const typescriptParser = require("@typescript-eslint/parser"); 3 | const tsPlugin = require("@typescript-eslint/eslint-plugin"); 4 | const reactPlugin = require("eslint-plugin-react"); 5 | const prettierPlugin = require("eslint-plugin-prettier"); 6 | const storybookPlugin = require("eslint-plugin-storybook"); 7 | 8 | const compat = new FlatCompat({ 9 | baseDirectory: __dirname, 10 | }); 11 | 12 | const extendedConfigs = compat 13 | .extends( 14 | "plugin:react/recommended", 15 | "plugin:@typescript-eslint/recommended", 16 | "plugin:prettier/recommended", 17 | "plugin:storybook/recommended" 18 | ) 19 | .flat(); 20 | 21 | module.exports = [ 22 | { 23 | ignores: ["**/components/Flags/Countries/*.tsx", "**/*.stories.tsx"], 24 | }, 25 | ...extendedConfigs, 26 | { 27 | languageOptions: { 28 | parser: typescriptParser, 29 | parserOptions: { 30 | ecmaVersion: 2020, 31 | sourceType: "module", 32 | ecmaFeatures: { jsx: true }, 33 | }, 34 | }, 35 | settings: { 36 | react: { version: "detect" }, 37 | }, 38 | plugins: { 39 | react: reactPlugin, 40 | "@typescript-eslint": tsPlugin, 41 | prettier: prettierPlugin, 42 | storybook: storybookPlugin, 43 | }, 44 | rules: { 45 | "react/prop-types": "off", 46 | "@typescript-eslint/no-explicit-any": "warn", 47 | "@typescript-eslint/prefer-as-const": "error", 48 | }, 49 | }, 50 | ]; 51 | -------------------------------------------------------------------------------- /flags/fm.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /flags/et.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/utils/getCountryCodes/getCountryCodes.test.ts: -------------------------------------------------------------------------------- 1 | import { getCountryCodes } from "."; 2 | import { countries as AllCountries } from "../../data"; 3 | 4 | describe("getCountryCodes", () => { 5 | const fullCountryCodes = Object.keys(AllCountries); 6 | 7 | describe("when no param is passed", () => { 8 | it("returns all country codes", () => { 9 | expect(getCountryCodes()).toEqual(fullCountryCodes); 10 | }); 11 | }); 12 | 13 | describe("when only countries param is passed", () => { 14 | it("returns all passed country codes if all are valid", () => { 15 | const countryCodes = ["US", "GB"]; 16 | expect(getCountryCodes(countryCodes)).toEqual(countryCodes); 17 | }); 18 | 19 | it("returns only valid passed country codes if some are invalid", () => { 20 | const countryCodes = ["US", "ZZ", "GB", "de", "Fr", "Ng", "PAR"]; 21 | expect(getCountryCodes(countryCodes)).toEqual(["US", "GB"]); 22 | }); 23 | 24 | it("returns non-repeated country codes", () => { 25 | const countryCodes = ["US", "US", "GB"]; 26 | expect(getCountryCodes(countryCodes)).toEqual(["US", "GB"]); 27 | }); 28 | }); 29 | 30 | describe("when only countries param is passed and blacklist is true", () => { 31 | it("returns all country codes excluding the passed countriea", () => { 32 | const countryCodes = ["US", "GB"]; 33 | const filteredCountryCodes = fullCountryCodes.filter( 34 | (code) => !countryCodes.includes(code) 35 | ); 36 | expect(getCountryCodes(countryCodes, true)).toEqual(filteredCountryCodes); 37 | }); 38 | }); 39 | }); 40 | -------------------------------------------------------------------------------- /flags/sk.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /flags/np.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /flags/tw.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /flags/tk.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## [2.2.1](https://github.com/ekwonye-richard/react-flags-select/compare/v2.2.0...v2.2.1) (2022-04-11) 2 | 3 | 4 | ### Bug Fixes 5 | 6 | * tagging ([#152](https://github.com/ekwonye-richard/react-flags-select/issues/152)) ([fc42926](https://github.com/ekwonye-richard/react-flags-select/commit/fc42926dec6b8dbf6961d1b7c6c9171654d0dded)) 7 | 8 | # [2.1.0](https://github.com/ekwonye-richard/react-flags-select/compare/v2.0.2...v2.1.0) (2022-04-11) 9 | 10 | 11 | ### Bug Fixes 12 | 13 | * fixing up type generation ([#90](https://github.com/ekwonye-richard/react-flags-select/issues/90)) ([28e5009](https://github.com/ekwonye-richard/react-flags-select/commit/28e500956671b7a64a5b362f285b73d882d36443)) 14 | * use string includes for search ([#94](https://github.com/ekwonye-richard/react-flags-select/issues/94)) ([02f81ea](https://github.com/ekwonye-richard/react-flags-select/commit/02f81eaea6a130952d305bb10c79df14fb2a92e0)) 15 | 16 | 17 | ### Features 18 | 19 | * add rfs key to generate generate ids, data-testids and the search input name ([#151](https://github.com/ekwonye-richard/react-flags-select/issues/151)) ([b57ead2](https://github.com/ekwonye-richard/react-flags-select/commit/b57ead25066c3a9c42c74d3c4cb50e41a510afa3)) 20 | * adding secondary label support ([#92](https://github.com/ekwonye-richard/react-flags-select/issues/92)) ([65fc82d](https://github.com/ekwonye-richard/react-flags-select/commit/65fc82df325f123d3aab93090a311d4776fde9fc)) 21 | 22 | 23 | ### Reverts 24 | 25 | * Revert "chore: update ESM build config to allow tree-shaking (#124)" (#137) ([cfa11ed](https://github.com/ekwonye-richard/react-flags-select/commit/cfa11edda5cac4ad272e73c1b7ac6cc6c9fe2d08)), closes [#124](https://github.com/ekwonye-richard/react-flags-select/issues/124) [#137](https://github.com/ekwonye-richard/react-flags-select/issues/137) 26 | -------------------------------------------------------------------------------- /flags/cn.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /flags/lb.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/pt.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /flags/ao.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /flags/hn.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/vu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /flags/ph.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /flags/ke.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /flags/ws.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /flags/gi.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /flags/mt.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /flags/ge.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /flags/km.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /flags/sg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /flags/sb.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /flags/in.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /flags/ls.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /flags/my.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /flags/gu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /flags/gd.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /flags/nu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /flags/mp.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /flags/bi.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /flags/mn.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /flags/ug.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /flags/ba.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/components/ReactFlagsSelect/ReactFlagsSelect.module.scss: -------------------------------------------------------------------------------- 1 | $white: #ffffff; 2 | $black: #4d4d4d; 3 | $gray-text: #707070; 4 | $gray: #eaeaea; 5 | $gray-alt: #bdbbbb; 6 | 7 | .flagsSelect { 8 | position: relative; 9 | vertical-align: inherit; 10 | padding-bottom: 5px; 11 | text-align: left; 12 | } 13 | 14 | .flagsSelectInline { 15 | display: inline-block; 16 | } 17 | 18 | .selectBtn { 19 | cursor: pointer; 20 | width: 100%; 21 | display: flex; 22 | justify-content: space-between; 23 | align-items: center; 24 | padding: 5px 10px; 25 | font-family: inherit; 26 | color: $black; 27 | border: thin solid transparentize($black, 0.7); 28 | border-radius: 4px; 29 | background: transparent; 30 | 31 | &:after, 32 | &[aria-expanded="true"]:after { 33 | content: " "; 34 | width: 0; 35 | height: 0; 36 | display: inline-block; 37 | margin-left: 5px; 38 | } 39 | 40 | &:after { 41 | border-top: 5px solid $black; 42 | border-left: 5px solid transparent; 43 | border-right: 5px solid transparent; 44 | border-bottom: 0; 45 | } 46 | 47 | &[aria-expanded="true"]:after { 48 | border-top: 0; 49 | border-left: 5px solid transparent; 50 | border-right: 5px solid transparent; 51 | border-bottom: 5px solid $black; 52 | } 53 | } 54 | 55 | .disabledBtn { 56 | background: $gray; 57 | cursor: default; 58 | } 59 | 60 | .label { 61 | font-size: 1em; 62 | padding-left: 10px; 63 | overflow: hidden; 64 | text-overflow: ellipsis; 65 | } 66 | 67 | .secondaryLabel { 68 | @extend .label; 69 | color: $gray-text; 70 | padding-left: 5px; 71 | } 72 | 73 | .selectValue, 74 | .selectOption { 75 | cursor: pointer; 76 | padding: 0 8px; 77 | margin: 4px 0; 78 | white-space: nowrap; 79 | } 80 | 81 | .selectValue { 82 | pointer-events: none; 83 | display: flex; 84 | align-items: center; 85 | } 86 | 87 | .selectOption { 88 | padding: 2px 18px; 89 | 90 | &:hover, 91 | &:focus { 92 | outline: none; 93 | background: $gray; 94 | } 95 | } 96 | 97 | .selectFlag { 98 | display: inline-flex; 99 | font-size: 1.2em; 100 | } 101 | 102 | .selectOptionValue { 103 | display: flex; 104 | align-items: center; 105 | } 106 | 107 | .selectOptionWithlabel { 108 | padding: 4px 10px; 109 | } 110 | 111 | .selectOptions { 112 | position: absolute; 113 | z-index: 999999; 114 | border: 1px solid $gray-alt; 115 | border-radius: 3px; 116 | background: $white; 117 | margin-top: 8px; 118 | padding: 8px 0; 119 | max-height: 180px; 120 | overflow: auto; 121 | } 122 | 123 | .selectOptionsWithSearch { 124 | padding: 0 0 8px 0; 125 | } 126 | 127 | .fullWidthOptions { 128 | right: 0; 129 | left: 0; 130 | } 131 | 132 | .alignOptionsToRight { 133 | right: 0; 134 | } 135 | 136 | .filterBox { 137 | position: sticky; 138 | top: 0; 139 | width: 100%; 140 | padding-top: 8px; 141 | background: $white; 142 | 143 | input { 144 | width: calc(100% - 20px); 145 | margin: 0 10px; 146 | padding: 8px; 147 | box-sizing: border-box; 148 | 149 | &:focus { 150 | outline: none; 151 | } 152 | } 153 | } 154 | -------------------------------------------------------------------------------- /flags/uy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /flags/cv.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /flags/ve.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /flags/mz.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /flags/iq.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /flags/py.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /flags/br.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /flags/mo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | --------------------------------------------------------------------------------