diff --git a/.babelrc b/.babelrc index 3afee9f6..def06788 100644 --- a/.babelrc +++ b/.babelrc @@ -25,6 +25,7 @@ "loose": true } ], + "@babel/preset-typescript", "@babel/preset-react" ] } diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json deleted file mode 100644 index 36b57207..00000000 --- a/.codesandbox/ci.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "node": "16", - "buildCommand": "build", - "sandboxes": ["react-dropdown-select-nzto7"] -} diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 00000000..d3bff64a --- /dev/null +++ b/.eslintignore @@ -0,0 +1,12 @@ +node_modules/ +dist/ +lib/ +coverage/ +build/ +docs/ +public/ +*.min.js +*.bundle.js +.vscode/ +.idea/ + diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 00000000..37170ceb --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,37 @@ +{ + "root": true, + "parser": "@typescript-eslint/parser", + "parserOptions": { + "ecmaVersion": 2020, + "sourceType": "module", + "ecmaFeatures": { + "jsx": true + } + }, + "plugins": [ + "@typescript-eslint", + "react", + "react-hooks", + "jsx-a11y", + "prettier" + ], + "extends": [ + "eslint:recommended", + "plugin:react/recommended", + "plugin:@typescript-eslint/recommended", + "plugin:jsx-a11y/recommended", + "plugin:react-hooks/recommended", + "prettier" + ], + "rules": { + "prettier/prettier": "error", + "react/prop-types": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + }, + "settings": { + "react": { + "version": "detect" + } + } +} + diff --git a/.github/workflows/codesandbox.yml b/.github/workflows/codesandbox.yml new file mode 100644 index 00000000..2b131732 --- /dev/null +++ b/.github/workflows/codesandbox.yml @@ -0,0 +1,26 @@ +name: CodeSandbox Preview for Forks + +on: + pull_request: + types: [opened, synchronize, reopened] + +permissions: + contents: write # ✅ allows push access to your repo + +jobs: + preview: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + + - name: Mirror fork branch to main repo + run: | + git fetch origin + git checkout ${{ github.event.pull_request.head.ref }} + git push --force https://x-access-token:${{ secrets.GITHUB_TOKEN }}@github.com/${{ github.repository }} HEAD:refs/heads/sandbox-preview/${{ github.event.pull_request.number }} + + - name: Print preview link + run: | + echo "🚀 Preview this PR on CodeSandbox:" + echo "https://codesandbox.io/p/github/${{ github.repository }}/tree/sandbox-preview/${{ github.event.pull_request.number }}/example" + diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml index 33cec331..a2319d74 100644 --- a/.github/workflows/npm-publish.yml +++ b/.github/workflows/npm-publish.yml @@ -16,8 +16,14 @@ jobs: - uses: actions/setup-node@v2 with: node-version: 18 - - run: npm ci - - run: npm test --maxWorkers=2 --maxConcurrent=2 + - name: Setup pnpm + uses: pnpm/action-setup@v2 + with: + version: 10 + - run: pnpm install --frozen-lockfile + - run: pnpm ts-check + - run: pnpm lint + - run: pnpm test --maxWorkers=2 --maxConcurrent=2 publish-npm: needs: build @@ -28,8 +34,11 @@ jobs: with: node-version: 18 registry-url: https://registry.npmjs.org/ - - run: npm ci - - run: npm test --maxWorkers=2 --maxConcurrent=2 + - name: Setup pnpm + uses: pnpm/action-setup@v2 + with: + version: 10 + - run: pnpm install --frozen-lockfile - run: npm publish env: NODE_AUTH_TOKEN: ${{secrets.npm_token}} diff --git a/.github/workflows/on-pull-request.yml b/.github/workflows/on-pull-request.yml index 5389e169..eb950b93 100644 --- a/.github/workflows/on-pull-request.yml +++ b/.github/workflows/on-pull-request.yml @@ -15,6 +15,12 @@ jobs: - uses: actions/checkout@v2 - uses: actions/setup-node@v2 with: - node-version: 16 - - run: npm ci - - run: npm test --maxWorkers=2 --maxConcurrent=2 + node-version: 23 + - name: Setup pnpm + uses: pnpm/action-setup@v2 + with: + version: 10 + - run: pnpm install --frozen-lockfile + - run: pnpm ts-check + - run: pnpm lint + - run: pnpm test --maxWorkers=2 --maxConcurrent=2 diff --git a/.nvmrc b/.nvmrc deleted file mode 100644 index 07c142ff..00000000 --- a/.nvmrc +++ /dev/null @@ -1 +0,0 @@ -16.13.1 diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000..169554a3 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,14 @@ +node_modules/ +dist/ +lib/ +coverage/ +build/ +public/ +*.min.js +*.bundle.js +.vscode/ +.idea/ +coverage/ +coverage/**/* +coverage/* + diff --git a/.prettierrc b/.prettierrc index 75972278..210176c6 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,8 +1,11 @@ { - "singleQuote": true, - "arrowParens": "always", "printWidth": 100, - "jsxBracketSameLine": true, + "tabWidth": 2, "useTabs": false, - "tabWidth": 2 + "semi": true, + "singleQuote": true, + "trailingComma": "all", + "arrowParens": "avoid", + "endOfLine": "lf" } + diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index 1558d159..00000000 --- a/.travis.yml +++ /dev/null @@ -1,35 +0,0 @@ -sudo: false -language: node_js - -node_js: - - '16' - -branches: - only: - - master - -cache: - directories: - - node_modules - -before_install: - - npm update - -install: - - npm ci - -script: - - npm test - - npm run coveralls - - cd docs && npm ci && npm run build && cd - - -deploy: - - provider: pages - skip-cleanup: true - github-token: $GH_TOKEN - keep-history: true - local-dir: docs/public - target-branch: gh-pages - repo: sanusart/react-dropdown-select - on: - branch: master diff --git a/__tests__/__snapshots__/index.spec.js.snap b/__tests__/__snapshots__/index.spec.js.snap index bf6e6eb2..501d012c 100644 --- a/__tests__/__snapshots__/index.spec.js.snap +++ b/__tests__/__snapshots__/index.spec.js.snap @@ -4,9 +4,6 @@ exports[` is disabled 1`] = ` .emotion-0 { box-sizing: border-box; position: relative; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; border: 1px solid #ccc; width: 100%; @@ -20,9 +17,8 @@ exports[` is disabled 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; - cursor: pointer; - min-height: 36px; cursor: not-allowed; + min-height: 36px; pointer-events: none; opacity: 0.3; } @@ -43,9 +39,6 @@ exports[` is disabled 1`] = ` } .emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-flex: 1; -ms-flex: 1; @@ -125,7 +118,7 @@ exports[` is disabled 1`] = ` placeholder="Select..." readOnly={false} size={9} - tabIndex="-1" + tabIndex={-1} value="" /> @@ -155,9 +148,6 @@ exports[` renders correctly 1`] = ` .emotion-0 { box-sizing: border-box; position: relative; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; border: 1px solid #ccc; width: 100%; @@ -192,9 +182,6 @@ exports[` renders correctly 1`] = ` } .emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-flex: 1; -ms-flex: 1; @@ -274,7 +261,7 @@ exports[` renders correctly 1`] = ` placeholder="Select..." readOnly={false} size={9} - tabIndex="-1" + tabIndex={-1} value="" /> @@ -304,9 +291,6 @@ exports[` renders with clearable 1`] = ` .emotion-0 { box-sizing: border-box; position: relative; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; border: 1px solid #ccc; width: 100%; @@ -341,9 +325,6 @@ exports[` renders with clearable 1`] = ` } .emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-flex: 1; -ms-flex: 1; @@ -437,7 +418,7 @@ exports[` renders with clearable 1`] = ` placeholder="Select..." readOnly={false} size={9} - tabIndex="-1" + tabIndex={-1} value="" /> @@ -475,9 +456,6 @@ exports[` renders with custom search function 1`] = .emotion-0 { box-sizing: border-box; position: relative; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; border: 1px solid #ccc; width: 100%; @@ -512,9 +490,6 @@ exports[` renders with custom search function 1`] = } .emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-flex: 1; -ms-flex: 1; @@ -594,7 +569,7 @@ exports[` renders with custom search function 1`] = placeholder="Select..." readOnly={false} size={3} - tabIndex="-1" + tabIndex={-1} value="Zer" /> @@ -624,9 +599,6 @@ exports[` renders with loading 1`] = ` .emotion-0 { box-sizing: border-box; position: relative; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; border: 1px solid #ccc; width: 100%; @@ -661,9 +633,6 @@ exports[` renders with loading 1`] = ` } .emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-flex: 1; -ms-flex: 1; @@ -764,7 +733,7 @@ exports[` renders with loading 1`] = ` placeholder="Select..." readOnly={false} size={9} - tabIndex="-1" + tabIndex={-1} value="" /> @@ -798,9 +767,6 @@ exports[` renders with name 1`] = ` .emotion-0 { box-sizing: border-box; position: relative; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; border: 1px solid #ccc; width: 100%; @@ -835,9 +801,6 @@ exports[` renders with name 1`] = ` } .emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-flex: 1; -ms-flex: 1; @@ -917,7 +880,7 @@ exports[` renders with name 1`] = ` placeholder="Select..." readOnly={false} size={9} - tabIndex="-1" + tabIndex={-1} value="" /> @@ -961,9 +924,6 @@ exports[` renders with separator 1`] = ` .emotion-0 { box-sizing: border-box; position: relative; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; border: 1px solid #ccc; width: 100%; @@ -998,9 +958,6 @@ exports[` renders with separator 1`] = ` } .emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-flex: 1; -ms-flex: 1; @@ -1087,7 +1044,7 @@ exports[` renders with separator 1`] = ` placeholder="Select..." readOnly={false} size={9} - tabIndex="-1" + tabIndex={-1} value="" /> @@ -1120,9 +1077,6 @@ exports[` renders with short color 1`] = ` .emotion-0 { box-sizing: border-box; position: relative; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; border: 1px solid #ccc; width: 100%; @@ -1157,9 +1111,6 @@ exports[` renders with short color 1`] = ` } .emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-flex: 1; -ms-flex: 1; @@ -1239,7 +1190,7 @@ exports[` renders with short color 1`] = ` placeholder="Select..." readOnly={false} size={9} - tabIndex="-1" + tabIndex={-1} value="" /> diff --git a/__tests__/components/__snapshots__/Content.spec.js.snap b/__tests__/components/__snapshots__/Content.spec.js.snap index 91008ae1..1d9a22e7 100644 --- a/__tests__/components/__snapshots__/Content.spec.js.snap +++ b/__tests__/components/__snapshots__/Content.spec.js.snap @@ -2,9 +2,6 @@ exports[` component renders correctly 1`] = ` .emotion-0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-flex: 1; -ms-flex: 1; @@ -21,9 +18,6 @@ exports[` component renders correctly 1`] = ` line-height: 21px; margin: 3px 0 3px 5px; color: #fff; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; @@ -92,7 +86,7 @@ exports[` component renders correctly 1`] = ` onKeyPress={[Function]} placeholder="" readOnly={true} - tabIndex="-1" + tabIndex={-1} value="" /> diff --git a/__tests__/components/__snapshots__/Dropdown.spec.js.snap b/__tests__/components/__snapshots__/Dropdown.spec.js.snap index a35cc8b3..5bab8c76 100644 --- a/__tests__/components/__snapshots__/Dropdown.spec.js.snap +++ b/__tests__/components/__snapshots__/Dropdown.spec.js.snap @@ -8,9 +8,6 @@ exports[` renders correctly 1`] = ` border: 1px solid #ccc; width: px; padding: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; diff --git a/__tests__/components/__snapshots__/Input.spec.js.snap b/__tests__/components/__snapshots__/Input.spec.js.snap index b7f130b4..e65b1ca6 100644 --- a/__tests__/components/__snapshots__/Input.spec.js.snap +++ b/__tests__/components/__snapshots__/Input.spec.js.snap @@ -23,7 +23,7 @@ exports[` is disabled 1`] = ` onKeyPress={[Function]} placeholder="" readOnly={false} - tabIndex="-1" + tabIndex={-1} /> `; @@ -50,6 +50,6 @@ exports[` renders correctly 1`] = ` onKeyPress={[Function]} placeholder="" readOnly={false} - tabIndex="-1" + tabIndex={-1} /> `; diff --git a/__tests__/components/__snapshots__/Item.spec.js.snap b/__tests__/components/__snapshots__/Item.spec.js.snap index 41d1f80a..e7687295 100644 --- a/__tests__/components/__snapshots__/Item.spec.js.snap +++ b/__tests__/components/__snapshots__/Item.spec.js.snap @@ -23,14 +23,14 @@ exports[` component pass item renderer 1`] = ` } - - +/> `; exports[` component renders correctly 1`] = ` @@ -56,12 +56,12 @@ exports[` component renders correctly 1`] = ` } - - +/> `; diff --git a/__tests__/components/__snapshots__/Option.spec.js.snap b/__tests__/components/__snapshots__/Option.spec.js.snap index 7460d89d..678b7bc7 100644 --- a/__tests__/components/__snapshots__/Option.spec.js.snap +++ b/__tests__/components/__snapshots__/Option.spec.js.snap @@ -7,9 +7,6 @@ exports[`