From 590e87fb11eecad4568719dacdadf886cfcea420 Mon Sep 17 00:00:00 2001 From: sulha199 Date: Mon, 19 Sep 2022 13:20:28 +0700 Subject: [PATCH] chore(tool-setup): fix lint & prettier --- .eslintrc.json | 165 +- .github/PULL_REQUEST_TEMPLATE.md | 58 +- .../workflows/github-actions-changelog.yml | 22 +- .github/workflows/lint-pr-title.yml | 30 +- .github/workflows/pre-commit-hook-run.yml | 40 +- .vscode/copyright.code-snippets | 42 +- .vscode/settings.json | 1 - CHANGELOG.md | 8 +- CONTRIBUTING.md | 24 +- LICENSE.md | 182 +- README.md | 8 +- config/webpack.config.js | 1252 +- package-lock.json | 67906 ++++++++-------- package.json | 358 +- server/index.ts | 72 +- src/App.test.tsx | 6 +- src/App.tsx | 32 +- src/constants.ts | 2 +- src/index.tsx | 8 +- src/react-app-env.d.ts | 81 +- src/reportWebVitals.ts | 20 +- src/services/network.ts | 108 +- src/services/storage.ts | 48 +- src/types.ts | 31 +- src/ui/components/auth/Auth.tsx | 159 +- src/ui/components/authWrapper/index.tsx | 35 +- .../errorboundary/error-boundary.scss | 46 +- src/ui/components/errorboundary/index.tsx | 63 +- src/ui/components/footer/footer.scss | 60 +- src/ui/components/footer/footer.tsx | 43 +- .../info-connection/info-connection.tsx | 32 +- src/ui/components/inputField/InputField.css | 62 +- src/ui/components/inputField/InputField.tsx | 122 +- src/ui/components/noUsers/NoUsers.css | 44 +- src/ui/components/noUsers/NoUsers.tsx | 25 +- .../components/phoneNumber/PhoneNumber.scss | 6 +- src/ui/components/phoneNumber/PhoneNumber.tsx | 24 +- .../components/safeAreaView/SafeAreaView.tsx | 28 +- .../usersListTable/UsersListTable.scss | 288 +- .../usersListTable/UsersListTable.tsx | 400 +- src/ui/pages/usersList/UsersList.scss | 44 +- src/ui/pages/usersList/UsersList.tsx | 187 +- src/ui/pages/usersList/types.ts | 28 +- src/ui/styles/index.css | 38 +- src/ui/styles/mixin.scss | 6 +- src/ui/styles/uikit.scss | 160 +- src/ui/styles/variables.css | 78 +- src/utils.ts | 190 +- 48 files changed, 36392 insertions(+), 36280 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 51c7b0a7..718b9514 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,82 +1,89 @@ { - "$schema": "https://json.schemastore.org/eslintrc.json", - "env": { - "browser": true, - "es2021": true - }, - "plugins": ["react", "@typescript-eslint", "@typescript-eslint/tslint"], - "extends": [ - "eslint:recommended", - "plugin:@typescript-eslint/recommended", - "plugin:react/recommended", - "plugin:react-hooks/recommended" - ], + "$schema": "https://json.schemastore.org/eslintrc.json", + "env": { + "browser": true, + "es2021": true + }, + "plugins": ["react", "@typescript-eslint", "@typescript-eslint/tslint"], + "extends": [ + "eslint:recommended", + "plugin:@typescript-eslint/recommended", + "plugin:react/recommended", + "plugin:react-hooks/recommended" + ], - "parser": "@typescript-eslint/parser", - "parserOptions": { - "project": "tsconfig.json", - "ecmaFeatures": { - "jsx": true - }, - "ecmaVersion": "latest", - "sourceType": "module" - }, - "rules": { - "no-eval": "error", - "no-trailing-spaces": "error", - "no-unsafe-finally": "error", - "no-var": "error", - "spaced-comment": [ - "error", - "always", - { - "markers": ["/"] - } - ], - "indent": "off", - "no-empty": ["error", { "allowEmptyCatch": true }], - "no-console": ["error", { "allow": ["info", "error", "warn"] }], - "brace-style": ["error", "1tbs"], - "no-whitespace-before-property": "error", - "@typescript-eslint/no-var-requires": "off", - "typescript-eslint/indent": "off", // Prettier takes care of indentation. - "@typescript-eslint/member-delimiter-style": [ - "error", - { - "multiline": { - "delimiter": "semi", - "requireLast": true - }, - "singleline": { - "delimiter": "semi", - "requireLast": false - } - } - ], - "@typescript-eslint/prefer-namespace-keyword": "error", - "@typescript-eslint/quotes": ["error", "double"], - "@typescript-eslint/semi": ["error", "always"], - "@typescript-eslint/type-annotation-spacing": "error", - "@typescript-eslint/no-floating-promises": "error", - "@typescript-eslint/triple-slash-reference": "warn", - "@typescript-eslint/tslint/config": [ - "error", - { - "rules": { - "whitespace": [true, "check-branch", "check-decl", "check-operator", "check-separator", "check-type"] - } - } - ], - "react-hooks/exhaustive-deps": "warn", // Checks effect dependencies - "react/react-in-jsx-scope": "off", - "react/no-unescaped-entities": "off" - }, - "overrides": [ - { - "files": ["**/*,ts", "**/*.tsx"], - "rules": { - "@typescript-eslint/no-explicit-any": "error" - } - } - ] + "parser": "@typescript-eslint/parser", + "parserOptions": { + "project": "tsconfig.json", + "ecmaFeatures": { + "jsx": true + }, + "ecmaVersion": "latest", + "sourceType": "module" + }, + "rules": { + "no-eval": "error", + "no-trailing-spaces": "error", + "no-unsafe-finally": "error", + "no-var": "error", + "spaced-comment": [ + "error", + "always", + { + "markers": ["/"] + } + ], + "indent": "off", + "no-empty": ["error", { "allowEmptyCatch": true }], + "no-console": ["error", { "allow": ["info", "error", "warn"] }], + "brace-style": ["error", "1tbs"], + "no-whitespace-before-property": "error", + "@typescript-eslint/no-var-requires": "off", + "typescript-eslint/indent": "off", // Prettier takes care of indentation. + "@typescript-eslint/member-delimiter-style": [ + "error", + { + "multiline": { + "delimiter": "semi", + "requireLast": true + }, + "singleline": { + "delimiter": "semi", + "requireLast": false + } + } + ], + "@typescript-eslint/prefer-namespace-keyword": "error", + "@typescript-eslint/quotes": ["error", "double"], + "@typescript-eslint/semi": ["error", "always"], + "@typescript-eslint/type-annotation-spacing": "error", + "@typescript-eslint/no-floating-promises": "error", + "@typescript-eslint/triple-slash-reference": "warn", + "@typescript-eslint/tslint/config": [ + "error", + { + "rules": { + "whitespace": [ + true, + "check-branch", + "check-decl", + "check-operator", + "check-separator", + "check-type" + ] + } + } + ], + "react-hooks/exhaustive-deps": "warn", // Checks effect dependencies + "react/react-in-jsx-scope": "off", + "react/no-unescaped-entities": "off" + }, + "overrides": [ + { + "files": ["**/*,ts", "**/*.tsx"], + "rules": { + "@typescript-eslint/no-explicit-any": "error" + } + } + ] } diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index ee32adc5..1d87c823 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -10,31 +10,31 @@ ## Related issues -- Link to issue1 here -- Link to issue1 here +- Link to issue1 here +- Link to issue1 here ## Test Plan ### Tested on all primary browsers for: -- Chrome - - [ ] Desktop - - [ ] Mobile - - [ ] Tablet -- Safari - - [ ] Desktop - - [ ] Mobile - - [ ] Tablet -- Firefox - - [ ] Desktop - - [ ] Mobile - - [ ] Tablet -- (Optional) Tested on Safari 12 (Physical or emulator) - - [ ] iPad - - [ ] iPhone -- (Optional) Tested on physical mobile and tablet device for: - - [ ] Android - - [ ] iOS (including iPadOS) +- Chrome + - [ ] Desktop + - [ ] Mobile + - [ ] Tablet +- Safari + - [ ] Desktop + - [ ] Mobile + - [ ] Tablet +- Firefox + - [ ] Desktop + - [ ] Mobile + - [ ] Tablet +- (Optional) Tested on Safari 12 (Physical or emulator) + - [ ] iPad + - [ ] iPhone +- (Optional) Tested on physical mobile and tablet device for: + - [ ] Android + - [ ] iOS (including iPadOS) ## Documentation changes @@ -42,15 +42,15 @@ ## Checklist for important updates -- [ ] Changelog has been updated -- [ ] Changes to the version if needed - - In `package.json` - - In `package-lock.json` - - In `src/version.ts` -- [ ] Had run `npm run build` -- [ ] Had installed and ran the pre-commit hook +- [ ] Changelog has been updated +- [ ] Changes to the version if needed + - In `package.json` + - In `package-lock.json` + - In `src/version.ts` +- [ ] Had run `npm run build` +- [ ] Had installed and ran the pre-commit hook ## Remaining TODOs for this PR -- [ ] Item1 -- [ ] Item2 +- [ ] Item1 +- [ ] Item2 diff --git a/.github/workflows/github-actions-changelog.yml b/.github/workflows/github-actions-changelog.yml index 3701129d..c1d741f6 100644 --- a/.github/workflows/github-actions-changelog.yml +++ b/.github/workflows/github-actions-changelog.yml @@ -1,15 +1,15 @@ name: "Enforcing changelog in PRs Workflow" on: - pull_request: - types: [opened, synchronize, reopened, ready_for_review, labeled, unlabeled] + pull_request: + types: [opened, synchronize, reopened, ready_for_review, labeled, unlabeled] jobs: - # Enforces the update of a changelog file on every pull request - changelog: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v2 - - uses: dangoslen/changelog-enforcer@v2 - with: - changeLogPath: "CHANGELOG.md" - skipLabels: "Skip-Changelog" + # Enforces the update of a changelog file on every pull request + changelog: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + - uses: dangoslen/changelog-enforcer@v2 + with: + changeLogPath: "CHANGELOG.md" + skipLabels: "Skip-Changelog" diff --git a/.github/workflows/lint-pr-title.yml b/.github/workflows/lint-pr-title.yml index 43ca8813..6be517e9 100644 --- a/.github/workflows/lint-pr-title.yml +++ b/.github/workflows/lint-pr-title.yml @@ -1,20 +1,20 @@ name: "Lint PR Title" on: - pull_request: - types: - - opened - - reopened - - edited - - synchronize + pull_request: + types: + - opened + - reopened + - edited + - synchronize jobs: - pr-title: - name: Lint PR title - runs-on: ubuntu-latest - steps: - - uses: amannn/action-semantic-pull-request@v3 - env: - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - with: - validateSingleCommit: true + pr-title: + name: Lint PR title + runs-on: ubuntu-latest + steps: + - uses: amannn/action-semantic-pull-request@v3 + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + with: + validateSingleCommit: true diff --git a/.github/workflows/pre-commit-hook-run.yml b/.github/workflows/pre-commit-hook-run.yml index c5ddc4d9..9eded31c 100644 --- a/.github/workflows/pre-commit-hook-run.yml +++ b/.github/workflows/pre-commit-hook-run.yml @@ -1,25 +1,25 @@ name: "Pre commit hook check" on: - pull_request: - types: - - opened - - reopened - - edited - - synchronize + pull_request: + types: + - opened + - reopened + - edited + - synchronize jobs: - pr-title: - name: Pre commit hook check - runs-on: ubuntu-latest - container: rishabhpoddar/supertokens_website_sdk_testing_node_16 - steps: - - uses: actions/checkout@v2 - - run: git init && git add --all && git -c user.name='test' -c user.email='test@example.com' commit -m 'init for pr action' - - run: npm i --force || true - # the below command is there cause otherwise running npm run check-circular-dependencies gives an error like: - # Your cache folder contains root-owned files, due to a bug in - # npm ERR! previous versions of npm which has since been addressed. - - run: chown -R 1001:121 "/github/home/.npm" - - run: npm i --force - - run: ./hooks/pre-commit + pr-title: + name: Pre commit hook check + runs-on: ubuntu-latest + container: rishabhpoddar/supertokens_website_sdk_testing_node_16 + steps: + - uses: actions/checkout@v2 + - run: git init && git add --all && git -c user.name='test' -c user.email='test@example.com' commit -m 'init for pr action' + - run: npm i --force || true + # the below command is there cause otherwise running npm run check-circular-dependencies gives an error like: + # Your cache folder contains root-owned files, due to a bug in + # npm ERR! previous versions of npm which has since been addressed. + - run: chown -R 1001:121 "/github/home/.npm" + - run: npm i --force + - run: ./hooks/pre-commit diff --git a/.vscode/copyright.code-snippets b/.vscode/copyright.code-snippets index 0307351e..842fa35f 100644 --- a/.vscode/copyright.code-snippets +++ b/.vscode/copyright.code-snippets @@ -1,23 +1,23 @@ { - "copy-ts-css": { - "scope": "javascript,typescript,typescriptreact,css,scss", - "prefix": ["copyright"], - "description": "Add copyright to typescript, javascript, or css file format", - "body": [ - "/* Copyright (c) 2022, VRAI Labs and/or its affiliates. All rights reserved.\r", - " *\r", - " * This software is licensed under the Apache License, Version 2.0 (the\r", - " * \"License\") as published by the Apache Software Foundation.\r", - " *\r", - " * You may not use this file except in compliance with the License. You may\r", - " * obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0\r", - " *\r", - " * Unless required by applicable law or agreed to in writing, software\r", - " * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\r", - " * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the\r", - " * License for the specific language governing permissions and limitations\r", - " * under the License.\r", - " */" - ] - } + "copy-ts-css": { + "scope": "javascript,typescript,typescriptreact,css,scss", + "prefix": ["copyright"], + "description": "Add copyright to typescript, javascript, or css file format", + "body": [ + "/* Copyright (c) 2022, VRAI Labs and/or its affiliates. All rights reserved.\r", + " *\r", + " * This software is licensed under the Apache License, Version 2.0 (the\r", + " * \"License\") as published by the Apache Software Foundation.\r", + " *\r", + " * You may not use this file except in compliance with the License. You may\r", + " * obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0\r", + " *\r", + " * Unless required by applicable law or agreed to in writing, software\r", + " * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\r", + " * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the\r", + " * License for the specific language governing permissions and limitations\r", + " * under the License.\r", + " */" + ] + } } diff --git a/.vscode/settings.json b/.vscode/settings.json index d148d530..ec9ab0f0 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -12,7 +12,6 @@ "editor.tabCompletion": "on", "editor.tabSize": 4, "editor.trimAutoWhitespace": true, - "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.organizeImports": true }, diff --git a/CHANGELOG.md b/CHANGELOG.md index 87236ca2..95c98e48 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,17 +11,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixes -- Fixes an issue where validation error for the API key would render incorrectly +- Fixes an issue where validation error for the API key would render incorrectly ## [0.1.1] - 2022-09-13 ### Changes -- Hides user input when entering the API key +- Hides user input when entering the API key ## [0.1.0] - 2022-08-25 ### Features -- Added a paginated list of all users that have signed up to your app -- Added API key based authentication +- Added a paginated list of all users that have signed up to your app +- Added API key based authentication diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index d9c8b758..38ceeac8 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -57,8 +57,8 @@ npm run start This will -- start a webpack dev server for the react app -- start the api server +- start a webpack dev server for the react app +- start the api server The API server will start on `http://localhost:3001`, you can access the dashboard on `http://localhost:3001/auth/dashboard` @@ -85,10 +85,10 @@ NOTE: All images from the project get added to `/static/media` in the build fold When making changes to the `api_spec.yaml` file -- 1. Go to [the swagger editor](https://editor.swagger.io/) -- 2. Copy / paste the contents of the `.yaml` file into the editor, and then you should see the API docs on the right of the screen. -- 3. Make changes to the online editor and then copy / paste the content back into the `.yaml` file -- 4. Issue a PR to the appropriate branch (refer to the branching section above) +- 1. Go to [the swagger editor](https://editor.swagger.io/) +- 2. Copy / paste the contents of the `.yaml` file into the editor, and then you should see the API docs on the right of the screen. +- 3. Make changes to the online editor and then copy / paste the content back into the `.yaml` file +- 4. Issue a PR to the appropriate branch (refer to the branching section above) ### Testing in production mode @@ -116,9 +116,9 @@ You can now access the production build of the dashboard on `http://localhost:30 ### Additional Information (Safe to skip) -- This project has ejected react scripts to allow modifications to webpack -- Versioning will follow X.Y.Z format but with slightly different rules than semantic versioning - - Dashboard changes that involve adding a new feature and require backend SDK changes will increment the Y version - - Dashboard changes that involve adding new features and do not require backend SDK changes will increment the Z version - - UI changes that modify existing features or are fixes or enhancements increment the Z version - - X version changes should be reserved for overhauls of the entire dashboard +- This project has ejected react scripts to allow modifications to webpack +- Versioning will follow X.Y.Z format but with slightly different rules than semantic versioning + - Dashboard changes that involve adding a new feature and require backend SDK changes will increment the Y version + - Dashboard changes that involve adding new features and do not require backend SDK changes will increment the Z version + - UI changes that modify existing features or are fixes or enhancements increment the Z version + - X version changes should be reserved for overhauls of the entire dashboard diff --git a/LICENSE.md b/LICENSE.md index 19608507..588f27e6 100644 --- a/LICENSE.md +++ b/LICENSE.md @@ -22,62 +22,62 @@ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 1. Definitions. - "License" shall mean the terms and conditions for use, reproduction, - and distribution as defined by Sections 1 through 9 of this document. - - "Licensor" shall mean the copyright owner or entity authorized by - the copyright owner that is granting the License. - - "Legal Entity" shall mean the union of the acting entity and all - other entities that control, are controlled by, or are under common - control with that entity. For the purposes of this definition, - "control" means (i) the power, direct or indirect, to cause the - direction or management of such entity, whether by contract or - otherwise, or (ii) ownership of fifty percent (50%) or more of the - outstanding shares, or (iii) beneficial ownership of such entity. - - "You" (or "Your") shall mean an individual or Legal Entity - exercising permissions granted by this License. - - "Source" form shall mean the preferred form for making modifications, - including but not limited to software source code, documentation - source, and configuration files. - - "Object" form shall mean any form resulting from mechanical - transformation or translation of a Source form, including but - not limited to compiled object code, generated documentation, - and conversions to other media types. - - "Work" shall mean the work of authorship, whether in Source or - Object form, made available under the License, as indicated by a - copyright notice that is included in or attached to the work - (an example is provided in the Appendix below). - - "Derivative Works" shall mean any work, whether in Source or Object - form, that is based on (or derived from) the Work and for which the - editorial revisions, annotations, elaborations, or other modifications - represent, as a whole, an original work of authorship. For the purposes - of this License, Derivative Works shall not include works that remain - separable from, or merely link (or bind by name) to the interfaces of, - the Work and Derivative Works thereof. - - "Contribution" shall mean any work of authorship, including - the original version of the Work and any modifications or additions - to that Work or Derivative Works thereof, that is intentionally - submitted to Licensor for inclusion in the Work by the copyright owner - or by an individual or Legal Entity authorized to submit on behalf of - the copyright owner. For the purposes of this definition, "submitted" - means any form of electronic, verbal, or written communication sent - to the Licensor or its representatives, including but not limited to - communication on electronic mailing lists, source code control systems, - and issue tracking systems that are managed by, or on behalf of, the - Licensor for the purpose of discussing and improving the Work, but - excluding communication that is conspicuously marked or otherwise - designated in writing by the copyright owner as "Not a Contribution." - - "Contributor" shall mean Licensor and any individual or Legal Entity - on behalf of whom a Contribution has been received by Licensor and - subsequently incorporated within the Work. + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. 2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, @@ -107,41 +107,41 @@ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION modifications, and in Source or Object form, provided that You meet the following conditions: - (a) You must give any other recipients of the Work or - Derivative Works a copy of this License; and - - (b) You must cause any modified files to carry prominent notices - stating that You changed the files; and - - (c) You must retain, in the Source form of any Derivative Works - that You distribute, all copyright, patent, trademark, and - attribution notices from the Source form of the Work, - excluding those notices that do not pertain to any part of - the Derivative Works; and - - (d) If the Work includes a "NOTICE" text file as part of its - distribution, then any Derivative Works that You distribute must - include a readable copy of the attribution notices contained - within such NOTICE file, excluding those notices that do not - pertain to any part of the Derivative Works, in at least one - of the following places: within a NOTICE text file distributed - as part of the Derivative Works; within the Source form or - documentation, if provided along with the Derivative Works; or, - within a display generated by the Derivative Works, if and - wherever such third-party notices normally appear. The contents - of the NOTICE file are for informational purposes only and - do not modify the License. You may add Your own attribution - notices within Derivative Works that You distribute, alongside - or as an addendum to the NOTICE text from the Work, provided - that such additional attribution notices cannot be construed - as modifying the License. - - You may add Your own copyright statement to Your modifications and - may provide additional or different license terms and conditions - for use, reproduction, or distribution of Your modifications, or - for any such Derivative Works as a whole, provided Your use, - reproduction, and distribution of the Work otherwise complies with - the conditions stated in this License. + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. 5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work diff --git a/README.md b/README.md index 676f587a..e0835fce 100644 --- a/README.md +++ b/README.md @@ -2,9 +2,9 @@ This is the code for the frontend part of the user management dashboard for user of SuperTokens. This dashboard will eventually allow you to do several actions related to your app users. For example, it will allow you to: -- See a list of users -- Edit user info -- Delete users -- Manage roles and access control +- See a list of users +- Edit user info +- Delete users +- Manage roles and access control This is packaged along with the backend SDK and can be accessed by integrating the backend SDK into your app and visiting: `{apiDomain}/{apiBasePath}/dashboard` diff --git a/config/webpack.config.js b/config/webpack.config.js index aba80e24..af23c574 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -21,9 +21,9 @@ const modules = require("./modules"); const getClientEnvironment = require("./env"); const ModuleNotFoundPlugin = require("react-dev-utils/ModuleNotFoundPlugin"); const ForkTsCheckerWebpackPlugin = - process.env.TSC_COMPILE_ON_ERROR === "true" - ? require("react-dev-utils/ForkTsCheckerWarningWebpackPlugin") - : require("react-dev-utils/ForkTsCheckerWebpackPlugin"); + process.env.TSC_COMPILE_ON_ERROR === "true" + ? require("react-dev-utils/ForkTsCheckerWarningWebpackPlugin") + : require("react-dev-utils/ForkTsCheckerWebpackPlugin"); const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin"); const createEnvironmentHash = require("./webpack/persistentCache/createEnvironmentHash"); @@ -35,10 +35,10 @@ const reactRefreshRuntimeEntry = require.resolve("react-refresh/runtime"); const reactRefreshWebpackPluginRuntimeEntry = require.resolve("@pmmmwh/react-refresh-webpack-plugin"); const babelRuntimeEntry = require.resolve("babel-preset-react-app"); const babelRuntimeEntryHelpers = require.resolve("@babel/runtime/helpers/esm/assertThisInitialized", { - paths: [babelRuntimeEntry], + paths: [babelRuntimeEntry], }); const babelRuntimeRegenerator = require.resolve("@babel/runtime/regenerator", { - paths: [babelRuntimeEntry], + paths: [babelRuntimeEntry], }); // Some apps do not need the benefits of saving a web request, so not inlining the chunk @@ -66,638 +66,640 @@ const sassRegex = /\.(scss|sass)$/; const sassModuleRegex = /\.module\.(scss|sass)$/; const hasJsxRuntime = (() => { - if (process.env.DISABLE_NEW_JSX_TRANSFORM === "true") { - return false; - } + if (process.env.DISABLE_NEW_JSX_TRANSFORM === "true") { + return false; + } - try { - require.resolve("react/jsx-runtime"); - return true; - } catch (e) { - return false; - } + try { + require.resolve("react/jsx-runtime"); + return true; + } catch (e) { + return false; + } })(); // This is the production and development configuration. // It is focused on developer experience, fast rebuilds, and a minimal bundle. module.exports = function (webpackEnv) { - const isEnvDevelopment = webpackEnv === "development"; - const isEnvProduction = webpackEnv === "production"; + const isEnvDevelopment = webpackEnv === "development"; + const isEnvProduction = webpackEnv === "production"; - // Variable used for enabling profiling in Production - // passed into alias object. Uses a flag if passed into the build command - const isEnvProductionProfile = isEnvProduction && process.argv.includes("--profile"); + // Variable used for enabling profiling in Production + // passed into alias object. Uses a flag if passed into the build command + const isEnvProductionProfile = isEnvProduction && process.argv.includes("--profile"); - // We will provide `paths.publicUrlOrPath` to our app - // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript. - // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz. - // Get environment variables to inject into our app. - const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1)); + // We will provide `paths.publicUrlOrPath` to our app + // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript. + // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz. + // Get environment variables to inject into our app. + const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1)); - const shouldUseReactRefresh = env.raw.FAST_REFRESH; + const shouldUseReactRefresh = env.raw.FAST_REFRESH; - // common function to get style loaders - const getStyleLoaders = (cssOptions, preProcessor) => { - const loaders = [ - isEnvDevelopment && require.resolve("style-loader"), - isEnvProduction && { - loader: MiniCssExtractPlugin.loader, - // css is located in `static/css`, use '../../' to locate index.html folder - // in production `paths.publicUrlOrPath` can be a relative path - options: paths.publicUrlOrPath.startsWith(".") ? { publicPath: "../../" } : {}, - }, - { - loader: require.resolve("css-loader"), - options: cssOptions, - }, - { - // Options for PostCSS as we reference these options twice - // Adds vendor prefixing based on your specified browser support in - // package.json - loader: require.resolve("postcss-loader"), - options: { - postcssOptions: { - // Necessary for external CSS imports to work - // https://github.com/facebook/create-react-app/issues/2677 - ident: "postcss", - config: false, - plugins: !useTailwind - ? [ - "postcss-flexbugs-fixes", - [ - "postcss-preset-env", - { - autoprefixer: { - flexbox: "no-2009", - }, - stage: 3, - }, - ], - // Adds PostCSS Normalize as the reset css with default options, - // so that it honors browserslist config in package.json - // which in turn let's users customize the target behavior as per their needs. - "postcss-normalize", - ] - : [ - "tailwindcss", - "postcss-flexbugs-fixes", - [ - "postcss-preset-env", - { - autoprefixer: { - flexbox: "no-2009", - }, - stage: 3, - }, - ], - ], - }, - sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, - }, - }, - ].filter(Boolean); - if (preProcessor) { - loaders.push( - { - loader: require.resolve("resolve-url-loader"), - options: { - sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, - root: paths.appSrc, - }, - }, - { - loader: require.resolve(preProcessor), - options: { - sourceMap: true, - }, - } - ); - } - return loaders; - }; + // common function to get style loaders + const getStyleLoaders = (cssOptions, preProcessor) => { + const loaders = [ + isEnvDevelopment && require.resolve("style-loader"), + isEnvProduction && { + loader: MiniCssExtractPlugin.loader, + // css is located in `static/css`, use '../../' to locate index.html folder + // in production `paths.publicUrlOrPath` can be a relative path + options: paths.publicUrlOrPath.startsWith(".") ? { publicPath: "../../" } : {}, + }, + { + loader: require.resolve("css-loader"), + options: cssOptions, + }, + { + // Options for PostCSS as we reference these options twice + // Adds vendor prefixing based on your specified browser support in + // package.json + loader: require.resolve("postcss-loader"), + options: { + postcssOptions: { + // Necessary for external CSS imports to work + // https://github.com/facebook/create-react-app/issues/2677 + ident: "postcss", + config: false, + plugins: !useTailwind + ? [ + "postcss-flexbugs-fixes", + [ + "postcss-preset-env", + { + autoprefixer: { + flexbox: "no-2009", + }, + stage: 3, + }, + ], + // Adds PostCSS Normalize as the reset css with default options, + // so that it honors browserslist config in package.json + // which in turn let's users customize the target behavior as per their needs. + "postcss-normalize", + ] + : [ + "tailwindcss", + "postcss-flexbugs-fixes", + [ + "postcss-preset-env", + { + autoprefixer: { + flexbox: "no-2009", + }, + stage: 3, + }, + ], + ], + }, + sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, + }, + }, + ].filter(Boolean); + if (preProcessor) { + loaders.push( + { + loader: require.resolve("resolve-url-loader"), + options: { + sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, + root: paths.appSrc, + }, + }, + { + loader: require.resolve(preProcessor), + options: { + sourceMap: true, + }, + } + ); + } + return loaders; + }; - return { - target: ["browserslist"], - // Webpack noise constrained to errors and warnings - stats: "errors-warnings", - mode: isEnvProduction ? "production" : isEnvDevelopment && "development", - // Stop compilation early in production - bail: isEnvProduction, - devtool: isEnvProduction - ? shouldUseSourceMap - ? "source-map" - : false - : isEnvDevelopment && "cheap-module-source-map", - // These are the "entry points" to our application. - // This means they will be the "root" imports that are included in JS bundle. - entry: paths.appIndexJs, - output: { - // The build folder. - path: isEnvProduction ? paths.appBuild : paths.appDevBuild, - // Add /* filename */ comments to generated require()s in the output. - pathinfo: isEnvDevelopment, - // There will be one main bundle, and one file per asynchronous chunk. - // In development, it does not produce real files. - filename: isEnvProduction ? "static/js/bundle.js" : isEnvDevelopment && "static/js/bundle.js", - // There are also additional JS chunk files if you use code splitting. - assetModuleFilename: "static/media/[name][ext]", - // webpack uses `publicPath` to determine where the app is being served from. - // It requires a trailing slash, or the file assets will get an incorrect path. - // We inferred the "public path" (such as / or /my-project) from homepage. - publicPath: paths.publicUrlOrPath, - // Point sourcemap entries to original disk location (format as URL on Windows) - devtoolModuleFilenameTemplate: isEnvProduction - ? (info) => path.relative(paths.appSrc, info.absoluteResourcePath).replace(/\\/g, "/") - : isEnvDevelopment && ((info) => path.resolve(info.absoluteResourcePath).replace(/\\/g, "/")), - }, - cache: { - type: "filesystem", - version: createEnvironmentHash(env.raw), - cacheDirectory: paths.appWebpackCache, - store: "pack", - buildDependencies: { - defaultWebpack: ["webpack/lib/"], - config: [__filename], - tsconfig: [paths.appTsConfig, paths.appJsConfig].filter((f) => fs.existsSync(f)), - }, - }, - infrastructureLogging: { - level: "none", - }, - optimization: { - minimize: isEnvProduction, - minimizer: [ - // This is only used in production mode - new TerserPlugin({ - terserOptions: { - parse: { - // We want terser to parse ecma 8 code. However, we don't want it - // to apply any minification steps that turns valid ecma 5 code - // into invalid ecma 5 code. This is why the 'compress' and 'output' - // sections only apply transformations that are ecma 5 safe - // https://github.com/facebook/create-react-app/pull/4234 - ecma: 8, - }, - compress: { - ecma: 5, - warnings: false, - // Disabled because of an issue with Uglify breaking seemingly valid code: - // https://github.com/facebook/create-react-app/issues/2376 - // Pending further investigation: - // https://github.com/mishoo/UglifyJS2/issues/2011 - comparisons: false, - // Disabled because of an issue with Terser breaking valid code: - // https://github.com/facebook/create-react-app/issues/5250 - // Pending further investigation: - // https://github.com/terser-js/terser/issues/120 - inline: 2, - }, - mangle: { - safari10: true, - }, - // Added for profiling in devtools - keep_classnames: isEnvProductionProfile, - keep_fnames: isEnvProductionProfile, - output: { - ecma: 5, - comments: false, - // Turned on because emoji and regex is not minified properly using default - // https://github.com/facebook/create-react-app/issues/2488 - ascii_only: true, - }, - }, - }), - // This is only used in production mode - new CssMinimizerPlugin(), - ], - }, - resolve: { - // This allows you to set a fallback for where webpack should look for modules. - // We placed these paths second because we want `node_modules` to "win" - // if there are any conflicts. This matches Node resolution mechanism. - // https://github.com/facebook/create-react-app/issues/253 - modules: ["node_modules", paths.appNodeModules].concat(modules.additionalModulePaths || []), - // These are the reasonable defaults supported by the Node ecosystem. - // We also include JSX as a common component filename extension to support - // some tools, although we do not recommend using it, see: - // https://github.com/facebook/create-react-app/issues/290 - // `web` extension prefixes have been added for better support - // for React Native Web. - extensions: paths.moduleFileExtensions - .map((ext) => `.${ext}`) - .filter((ext) => useTypeScript || !ext.includes("ts")), - alias: { - // Support React Native Web - // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ - "react-native": "react-native-web", - // Allows for better profiling with ReactDevTools - ...(isEnvProductionProfile && { - "react-dom$": "react-dom/profiling", - "scheduler/tracing": "scheduler/tracing-profiling", - }), - ...(modules.webpackAliases || {}), - }, - plugins: [ - // Prevents users from importing files from outside of src/ (or node_modules/). - // This often causes confusion because we only process files within src/ with babel. - // To fix this, we prevent you from importing files out of src/ -- if you'd like to, - // please link the files into your node_modules/ and let module-resolution kick in. - // Make sure your source files are compiled, as they will not be processed in any way. - new ModuleScopePlugin(paths.appSrc, [ - paths.appPackageJson, - reactRefreshRuntimeEntry, - reactRefreshWebpackPluginRuntimeEntry, - babelRuntimeEntry, - babelRuntimeEntryHelpers, - babelRuntimeRegenerator, - ]), - ], - }, - module: { - strictExportPresence: true, - rules: [ - // Handle node_modules packages that contain sourcemaps - shouldUseSourceMap && { - enforce: "pre", - exclude: /@babel(?:\/|\\{1,2})runtime/, - test: /\.(js|mjs|jsx|ts|tsx|css)$/, - loader: require.resolve("source-map-loader"), - }, - { - // "oneOf" will traverse all following loaders until one will - // match the requirements. When no loader matches it will fall - // back to the "file" loader at the end of the loader list. - oneOf: [ - // TODO: Merge this config once `image/avif` is in the mime-db - // https://github.com/jshttp/mime-db - { - test: [/\.avif$/], - type: "asset", - mimetype: "image/avif", - parser: { - dataUrlCondition: { - maxSize: imageInlineSizeLimit, - }, - }, - }, - // "url" loader works like "file" loader except that it embeds assets - // smaller than specified limit in bytes as data URLs to avoid requests. - // A missing `test` is equivalent to a match. - { - test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/], - type: "asset", - parser: { - dataUrlCondition: { - maxSize: imageInlineSizeLimit, - }, - }, - }, - { - test: /\.svg$/, - use: [ - { - loader: require.resolve("@svgr/webpack"), - options: { - prettier: false, - svgo: false, - svgoConfig: { - plugins: [{ removeViewBox: false }], - }, - titleProp: true, - ref: true, - }, - }, - { - loader: require.resolve("file-loader"), - options: { - name: "static/media/[name].[ext]", - }, - }, - ], - issuer: { - and: [/\.(ts|tsx|js|jsx|md|mdx)$/], - }, - }, - // Process application JS with Babel. - // The preset includes JSX, Flow, TypeScript, and some ESnext features. - { - test: /\.(js|mjs|jsx|ts|tsx)$/, - include: paths.appSrc, - loader: require.resolve("babel-loader"), - options: { - customize: require.resolve("babel-preset-react-app/webpack-overrides"), - presets: [ - [ - require.resolve("babel-preset-react-app"), - { - runtime: hasJsxRuntime ? "automatic" : "classic", - }, - ], - ], + return { + target: ["browserslist"], + // Webpack noise constrained to errors and warnings + stats: "errors-warnings", + mode: isEnvProduction ? "production" : isEnvDevelopment && "development", + // Stop compilation early in production + bail: isEnvProduction, + devtool: isEnvProduction + ? shouldUseSourceMap + ? "source-map" + : false + : isEnvDevelopment && "cheap-module-source-map", + // These are the "entry points" to our application. + // This means they will be the "root" imports that are included in JS bundle. + entry: paths.appIndexJs, + output: { + // The build folder. + path: isEnvProduction ? paths.appBuild : paths.appDevBuild, + // Add /* filename */ comments to generated require()s in the output. + pathinfo: isEnvDevelopment, + // There will be one main bundle, and one file per asynchronous chunk. + // In development, it does not produce real files. + filename: isEnvProduction ? "static/js/bundle.js" : isEnvDevelopment && "static/js/bundle.js", + // There are also additional JS chunk files if you use code splitting. + assetModuleFilename: "static/media/[name][ext]", + // webpack uses `publicPath` to determine where the app is being served from. + // It requires a trailing slash, or the file assets will get an incorrect path. + // We inferred the "public path" (such as / or /my-project) from homepage. + publicPath: paths.publicUrlOrPath, + // Point sourcemap entries to original disk location (format as URL on Windows) + devtoolModuleFilenameTemplate: isEnvProduction + ? (info) => path.relative(paths.appSrc, info.absoluteResourcePath).replace(/\\/g, "/") + : isEnvDevelopment && ((info) => path.resolve(info.absoluteResourcePath).replace(/\\/g, "/")), + }, + cache: { + type: "filesystem", + version: createEnvironmentHash(env.raw), + cacheDirectory: paths.appWebpackCache, + store: "pack", + buildDependencies: { + defaultWebpack: ["webpack/lib/"], + config: [__filename], + tsconfig: [paths.appTsConfig, paths.appJsConfig].filter((f) => fs.existsSync(f)), + }, + }, + infrastructureLogging: { + level: "none", + }, + optimization: { + minimize: isEnvProduction, + minimizer: [ + // This is only used in production mode + new TerserPlugin({ + terserOptions: { + parse: { + // We want terser to parse ecma 8 code. However, we don't want it + // to apply any minification steps that turns valid ecma 5 code + // into invalid ecma 5 code. This is why the 'compress' and 'output' + // sections only apply transformations that are ecma 5 safe + // https://github.com/facebook/create-react-app/pull/4234 + ecma: 8, + }, + compress: { + ecma: 5, + warnings: false, + // Disabled because of an issue with Uglify breaking seemingly valid code: + // https://github.com/facebook/create-react-app/issues/2376 + // Pending further investigation: + // https://github.com/mishoo/UglifyJS2/issues/2011 + comparisons: false, + // Disabled because of an issue with Terser breaking valid code: + // https://github.com/facebook/create-react-app/issues/5250 + // Pending further investigation: + // https://github.com/terser-js/terser/issues/120 + inline: 2, + }, + mangle: { + safari10: true, + }, + // Added for profiling in devtools + keep_classnames: isEnvProductionProfile, + keep_fnames: isEnvProductionProfile, + output: { + ecma: 5, + comments: false, + // Turned on because emoji and regex is not minified properly using default + // https://github.com/facebook/create-react-app/issues/2488 + ascii_only: true, + }, + }, + }), + // This is only used in production mode + new CssMinimizerPlugin(), + ], + }, + resolve: { + // This allows you to set a fallback for where webpack should look for modules. + // We placed these paths second because we want `node_modules` to "win" + // if there are any conflicts. This matches Node resolution mechanism. + // https://github.com/facebook/create-react-app/issues/253 + modules: ["node_modules", paths.appNodeModules].concat(modules.additionalModulePaths || []), + // These are the reasonable defaults supported by the Node ecosystem. + // We also include JSX as a common component filename extension to support + // some tools, although we do not recommend using it, see: + // https://github.com/facebook/create-react-app/issues/290 + // `web` extension prefixes have been added for better support + // for React Native Web. + extensions: paths.moduleFileExtensions + .map((ext) => `.${ext}`) + .filter((ext) => useTypeScript || !ext.includes("ts")), + alias: { + // Support React Native Web + // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ + "react-native": "react-native-web", + // Allows for better profiling with ReactDevTools + ...(isEnvProductionProfile && { + "react-dom$": "react-dom/profiling", + "scheduler/tracing": "scheduler/tracing-profiling", + }), + ...(modules.webpackAliases || {}), + }, + plugins: [ + // Prevents users from importing files from outside of src/ (or node_modules/). + // This often causes confusion because we only process files within src/ with babel. + // To fix this, we prevent you from importing files out of src/ -- if you'd like to, + // please link the files into your node_modules/ and let module-resolution kick in. + // Make sure your source files are compiled, as they will not be processed in any way. + new ModuleScopePlugin(paths.appSrc, [ + paths.appPackageJson, + reactRefreshRuntimeEntry, + reactRefreshWebpackPluginRuntimeEntry, + babelRuntimeEntry, + babelRuntimeEntryHelpers, + babelRuntimeRegenerator, + ]), + ], + }, + module: { + strictExportPresence: true, + rules: [ + // Handle node_modules packages that contain sourcemaps + shouldUseSourceMap && { + enforce: "pre", + exclude: /@babel(?:\/|\\{1,2})runtime/, + test: /\.(js|mjs|jsx|ts|tsx|css)$/, + loader: require.resolve("source-map-loader"), + }, + { + // "oneOf" will traverse all following loaders until one will + // match the requirements. When no loader matches it will fall + // back to the "file" loader at the end of the loader list. + oneOf: [ + // TODO: Merge this config once `image/avif` is in the mime-db + // https://github.com/jshttp/mime-db + { + test: [/\.avif$/], + type: "asset", + mimetype: "image/avif", + parser: { + dataUrlCondition: { + maxSize: imageInlineSizeLimit, + }, + }, + }, + // "url" loader works like "file" loader except that it embeds assets + // smaller than specified limit in bytes as data URLs to avoid requests. + // A missing `test` is equivalent to a match. + { + test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/], + type: "asset", + parser: { + dataUrlCondition: { + maxSize: imageInlineSizeLimit, + }, + }, + }, + { + test: /\.svg$/, + use: [ + { + loader: require.resolve("@svgr/webpack"), + options: { + prettier: false, + svgo: false, + svgoConfig: { + plugins: [{ removeViewBox: false }], + }, + titleProp: true, + ref: true, + }, + }, + { + loader: require.resolve("file-loader"), + options: { + name: "static/media/[name].[ext]", + }, + }, + ], + issuer: { + and: [/\.(ts|tsx|js|jsx|md|mdx)$/], + }, + }, + // Process application JS with Babel. + // The preset includes JSX, Flow, TypeScript, and some ESnext features. + { + test: /\.(js|mjs|jsx|ts|tsx)$/, + include: paths.appSrc, + loader: require.resolve("babel-loader"), + options: { + customize: require.resolve("babel-preset-react-app/webpack-overrides"), + presets: [ + [ + require.resolve("babel-preset-react-app"), + { + runtime: hasJsxRuntime ? "automatic" : "classic", + }, + ], + ], - plugins: [isEnvDevelopment && shouldUseReactRefresh && require.resolve("react-refresh/babel")].filter( - Boolean - ), - // This is a feature of `babel-loader` for webpack (not Babel itself). - // It enables caching results in ./node_modules/.cache/babel-loader/ - // directory for faster rebuilds. - cacheDirectory: true, - // See #6846 for context on why cacheCompression is disabled - cacheCompression: false, - compact: isEnvProduction, - }, - }, - // Process any JS outside of the app with Babel. - // Unlike the application JS, we only compile the standard ES features. - { - test: /\.(js|mjs)$/, - exclude: /@babel(?:\/|\\{1,2})runtime/, - loader: require.resolve("babel-loader"), - options: { - babelrc: false, - configFile: false, - compact: false, - presets: [[require.resolve("babel-preset-react-app/dependencies"), { helpers: true }]], - cacheDirectory: true, - // See #6846 for context on why cacheCompression is disabled - cacheCompression: false, + plugins: [ + isEnvDevelopment && shouldUseReactRefresh && require.resolve("react-refresh/babel"), + ].filter(Boolean), + // This is a feature of `babel-loader` for webpack (not Babel itself). + // It enables caching results in ./node_modules/.cache/babel-loader/ + // directory for faster rebuilds. + cacheDirectory: true, + // See #6846 for context on why cacheCompression is disabled + cacheCompression: false, + compact: isEnvProduction, + }, + }, + // Process any JS outside of the app with Babel. + // Unlike the application JS, we only compile the standard ES features. + { + test: /\.(js|mjs)$/, + exclude: /@babel(?:\/|\\{1,2})runtime/, + loader: require.resolve("babel-loader"), + options: { + babelrc: false, + configFile: false, + compact: false, + presets: [[require.resolve("babel-preset-react-app/dependencies"), { helpers: true }]], + cacheDirectory: true, + // See #6846 for context on why cacheCompression is disabled + cacheCompression: false, - // Babel sourcemaps are needed for debugging into node_modules - // code. Without the options below, debuggers like VSCode - // show incorrect code and set breakpoints on the wrong lines. - sourceMaps: shouldUseSourceMap, - inputSourceMap: shouldUseSourceMap, - }, - }, - // "postcss" loader applies autoprefixer to our CSS. - // "css" loader resolves paths in CSS and adds assets as dependencies. - // "style" loader turns CSS into JS modules that inject