From 8371ffd3d9cbe9213b91237715c2e724ff1749a4 Mon Sep 17 00:00:00 2001 From: Starttoaster Date: Tue, 24 Sep 2024 10:53:48 -0700 Subject: [PATCH 1/8] ci: Use GitHub Glue Action for requests instead of curl --- .github/workflows/build-installers.yaml | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/.github/workflows/build-installers.yaml b/.github/workflows/build-installers.yaml index c716156..88410d4 100644 --- a/.github/workflows/build-installers.yaml +++ b/.github/workflows/build-installers.yaml @@ -227,10 +227,10 @@ jobs: run: | echo "TAGNAME=$(echo $GITHUB_REF | cut -d / -f 3)" >>$GITHUB_OUTPUT - - name: Gets JWT Token from GitHub - uses: Chia-Network/actions/github/jwt@main - - name: Trigger apt repo update - run: | - curl -s -XPOST -H "Authorization: Bearer ${{ env.JWT_TOKEN }}" --data '{"climate_tokenization_repo":"${{ steps.repo-name.outputs.REPO_NAME }}","application_name":"[\"climate-tokenization-engine-ui\"]","release_version":"${{ steps.tag-name.outputs.TAGNAME }}","add_debian_version":"false","arm64":"false"}' ${{ secrets.GLUE_API_URL }}/api/v1/climate-tokenization/${{ github.sha }}/start - curl -s -XPOST -H "Authorization: Bearer ${{ env.JWT_TOKEN }}" --data '{"climate_tokenization_repo":"${{ steps.repo-name.outputs.REPO_NAME }}","application_name":"[\"climate-tokenization-engine-ui\"]","release_version":"${{ steps.tag-name.outputs.TAGNAME }}","add_debian_version":"false","arm64":"false"}' ${{ secrets.GLUE_API_URL }}/api/v1/climate-tokenization/${{ github.sha }}/success/deploy + uses: Chia-Network/actions/github/glue@main + with: + json_data: '{"climate_tokenization_repo":"${{ steps.repo-name.outputs.REPO_NAME }}","application_name":"[\"climate-tokenization-engine-ui\"]","release_version":"${{ steps.tag-name.outputs.TAGNAME }}","add_debian_version":"false","arm64":"false"}' + glue_url: ${{ secrets.GLUE_API_URL }} + glue_project: "climate-tokenization" + glue_path: "trigger" From ddcc544106bd23b1562df8db5b8d17ff4f57cfa5 Mon Sep 17 00:00:00 2001 From: "William \"Zan\" Wills" Date: Tue, 12 Nov 2024 18:05:30 -0500 Subject: [PATCH 2/8] feat: Refactor of entire UI codebase MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: refactor initial commit * feat: untokenized Units WIP * feat: tokenize units page feat: untokenized units tab WIP * feat: untokenized units table * feat: organization api and sync indicator * feat: header feat: app logo * feat: untokenized units page layout improvements feat: api improvements feat: no home org modal * feat: added base tokenize modal hooked up to queries and url hashes feat: added sentance-case url hash feat: adjusted getUnit and getProject queries to not cache results * chore: dummy tokenize form * feat: tokenize form feat: tokenize modal layout * fix: tokenization re-render on trigger create token * feat: tokenization flow and success modal * feat: tokenized units tab * feat: revert tokens page feat: detokenize unit modal WIP * feat: detokenization form * feat: detokenization modal logic feat: form improvements * feat: detokenization modal logic - WIP - needs to display dotokenization data to user feat: dotokenization success modal feat: form improvements * feat: confirm tokenization modal WIP * feat: confirm detokenization modal complete feat: detokenization workflow complete * feat: disable revert tokens functionality in core-registry mode fix: untokenized data unavailable on tokenization success * feat: data display improvements * fix: loading screen conditionsø * feat: query param hook automatically sets query param default value * feat: added config.example.json file * feat: adjusted application to run as core registry ui child app WIP * feat: minor adjustments and fixes * feat: minor adjustments and fixes * feat: adjusted app window size when child app feat: navigation to active page prevented --------- Co-authored-by: Zachary Brown --- .babelrc | 7 - .env | 2 - .eslintignore | 1 + .eslintrc.cjs | 23 + .eslintrc.json | 30 - .github/dependabot.yml | 54 +- .github/workflows/auto-release.yml | 12 +- .github/workflows/build-installers.yaml | 85 +- .gitignore | 47 +- .husky/commit-msg | 5 +- .husky/pre-commit | 5 +- .lintstagedrc | 7 +- .mocharc.yaml | 1 - .nvmrc | 2 +- .prettierrc.js => .prettierrc.cjs | 5 +- .repo-content-updater.yaml | 4 - .vscode/settings.json | 3 - CHANGELOG.md | 244 - LICENSE | 201 - Procfile | 2 - README.MD | 124 - README.md | 90 + check_node_version.js | 8 - commitlint.config.cjs | 6 + commitlint.config.js | 6 - docs/contributing.md | 537 - index.html | 13 + jsconfig.json | 3 - logo.svg | 98 + package-lock.json | 32629 +++++----------- package.json | 207 +- postcss.config.js | 6 + public/android-chrome-512x512.png | Bin 9979 -> 0 bytes public/apple-touch-icon.png | Bin 2929 -> 0 bytes public/colors.example.json | 5 + public/config.example.json | 3 + public/electron.js | 139 - public/favicon.ico | Bin 15086 -> 0 bytes public/index.html | 48 - public/manifest.json | 25 - public/preload.js | 2 - public/robots.txt | 3 - public/vite.svg | 1 + src/App.js | 77 - src/assets/fonts/Poppins-Black.ttf | Bin 151396 -> 0 bytes src/assets/fonts/Poppins-BlackItalic.ttf | Bin 171604 -> 0 bytes src/assets/fonts/Poppins-Bold.ttf | Bin 153944 -> 0 bytes src/assets/fonts/Poppins-BoldItalic.ttf | Bin 176588 -> 0 bytes src/assets/fonts/Poppins-ExtraBold.ttf | Bin 152764 -> 0 bytes src/assets/fonts/Poppins-ExtraBoldItalic.ttf | Bin 173916 -> 0 bytes src/assets/fonts/Poppins-ExtraLight.ttf | Bin 161456 -> 0 bytes src/assets/fonts/Poppins-ExtraLightItalic.ttf | Bin 186168 -> 0 bytes src/assets/fonts/Poppins-Italic.ttf | Bin 182012 -> 0 bytes src/assets/fonts/Poppins-Light.ttf | Bin 159892 -> 0 bytes src/assets/fonts/Poppins-LightItalic.ttf | Bin 184460 -> 0 bytes src/assets/fonts/Poppins-Medium.ttf | Bin 156520 -> 0 bytes src/assets/fonts/Poppins-MediumItalic.ttf | Bin 180444 -> 0 bytes src/assets/fonts/Poppins-Regular.ttf | Bin 158240 -> 0 bytes src/assets/fonts/Poppins-SemiBold.ttf | Bin 155232 -> 0 bytes src/assets/fonts/Poppins-SemiBoldItalic.ttf | Bin 178584 -> 0 bytes src/assets/fonts/Poppins-Thin.ttf | Bin 161652 -> 0 bytes src/assets/fonts/Poppins-ThinItalic.ttf | Bin 187044 -> 0 bytes src/assets/fonts/Roboto-Light.ttf | Bin 170012 -> 0 bytes src/assets/fonts/Roboto-Medium.ttf | Bin 171656 -> 0 bytes src/assets/fonts/Roboto-Regular.ttf | Bin 171272 -> 0 bytes src/assets/img/android-chrome-192x192.png | Bin 3092 -> 0 bytes src/assets/img/android-chrome-512x512.png | Bin 9979 -> 0 bytes src/assets/img/apple-touch-icon.png | Bin 9979 -> 0 bytes src/assets/img/favicon-16x16.png | Bin 887 -> 0 bytes src/assets/img/favicon-32x32.png | Bin 1222 -> 0 bytes src/assets/img/favicon.ico | Bin 15086 -> 0 bytes src/assets/img/favicon_package_v0.16.zip | Bin 40544 -> 0 bytes src/assets/img/mstile-150x150.png | Bin 2501 -> 0 bytes src/assets/img/safari-pinned-tab.svg | 1737 - src/assets/img/tokenization-engine-logo.png | Bin 14131 -> 0 bytes src/components/blocks/Alert.js | 299 - src/components/blocks/BasicMenu.js | 66 - src/components/blocks/Card.js | 26 - src/components/blocks/ComponentRepeater.js | 103 - src/components/blocks/Connect.js | 247 - src/components/blocks/LocalMessage.js | 56 - src/components/blocks/LocaleChangeListener.js | 29 - src/components/blocks/LocaleSwitcher.js | 57 - src/components/blocks/Message.js | 51 - src/components/blocks/Modal.js | 234 - src/components/blocks/NotificationCard.js | 9 - src/components/blocks/Notifications.js | 131 - src/components/blocks/OrganizationLogo.js | 63 - src/components/blocks/Pagination.js | 147 - src/components/blocks/Popover.js | 82 - src/components/blocks/Table.js | 174 - src/components/blocks/TableCell.js | 119 - src/components/blocks/TableDrawer.js | 142 - src/components/blocks/Tag.js | 52 - src/components/blocks/ToolTip.js | 58 - src/components/blocks/ToolTipContainer.js | 12 - src/components/blocks/UnitDetails.js | 92 - src/components/blocks/index.js | 21 - .../forms/ConfirmDetokanizationModal.js | 89 - src/components/forms/CreateTokenModal.js | 282 - src/components/forms/DetokenizeModal.js | 163 - src/components/forms/FormikRepeater.js | 110 - src/components/forms/index.js | 4 - src/components/icons/AddIcon.js | 27 - src/components/icons/AddIconCircle.js | 25 - src/components/icons/AppLogo.js | 28 - src/components/icons/ArrowDownIcon.js | 20 - src/components/icons/AscendingClockIcon.js | 13 - src/components/icons/CheckIcon.js | 21 - src/components/icons/CloseIcon.js | 24 - src/components/icons/CloseIconWithBorder.js | 26 - src/components/icons/CopyIcon.js | 22 - src/components/icons/DarkThemeIcon.js | 25 - src/components/icons/DescendingClockIcon.js | 14 - src/components/icons/DescriptionIcon.js | 24 - src/components/icons/Divider.js | 15 - src/components/icons/DownloadIcon.js | 24 - src/components/icons/EditIcon.js | 22 - src/components/icons/EllipseIcon.js | 19 - src/components/icons/EllipsisMenuIcon.js | 22 - src/components/icons/ErrorIcon.js | 26 - src/components/icons/ErrorIconSmall.js | 22 - src/components/icons/IconColorsWrapper.js | 23 - src/components/icons/InfoIcon.js | 27 - src/components/icons/InfoIconSmall.js | 22 - src/components/icons/LightThemeIcon.js | 25 - src/components/icons/LinkIcon.js | 20 - src/components/icons/LocaleIcon.js | 23 - src/components/icons/MagnifyGlassIcon.js | 25 - src/components/icons/MagnifyGlassIconWhite.js | 25 - src/components/icons/MinusIcon.js | 24 - src/components/icons/OrganizationIcon.js | 21 - src/components/icons/RegistryIcon.js | 21 - src/components/icons/ReloadIcon.js | 25 - src/components/icons/RemoveIcon.js | 22 - src/components/icons/SuccessIcon.js | 27 - src/components/icons/SuccessIconSmall.js | 23 - src/components/icons/ThreeDotsIcon.js | 20 - src/components/icons/UploadIcon.js | 26 - src/components/icons/WarehouseIcon.js | 29 - src/components/icons/WarningIcon.js | 27 - src/components/icons/WarningIconSmall.js | 23 - src/components/icons/index.js | 39 - src/components/input/DateSelect.js | 113 - src/components/input/FormikError.js | 37 - src/components/input/PrimaryButton.js | 126 - src/components/input/SearchInput.js | 144 - src/components/input/SearchInputField.js | 66 - src/components/input/SelectCreatable.js | 244 - src/components/input/StandardInput.js | 256 - src/components/input/Textarea.js | 143 - src/components/input/UploadFileInput.js | 55 - src/components/input/UploadPngInput.js | 50 - src/components/input/YearSelect.js | 101 - src/components/input/index.js | 11 - src/components/layout/AppContainer.js | 16 - src/components/layout/AppHeader.js | 45 - src/components/layout/Dashboard.js | 46 - src/components/layout/ErrorBoundary.js | 41 - src/components/layout/FormContainers.js | 85 - .../layout/IndeterminateProgressOverlay.js | 24 - src/components/layout/LeftNav.js | 87 - src/components/layout/TabPanel.js | 22 - src/components/layout/Tabs.js | 29 - src/components/layout/index.js | 11 - src/components/typography/Body.js | 60 - src/components/typography/ButtonText.js | 26 - src/components/typography/H1.js | 24 - src/components/typography/H2.js | 23 - src/components/typography/H3.js | 24 - src/components/typography/H4.js | 25 - src/components/typography/MenuText.js | 25 - src/components/typography/Subtitle.js | 24 - src/components/typography/index.js | 8 - src/constants/index.js | 14 - src/hooks/useWindowSize.js | 22 - src/index.css | 47 - src/index.js | 37 - src/main.ts | 58 + src/navigation/AppNavigator.js | 86 - src/pages/CreateTokens.js | 381 - src/pages/RevertTokens.js | 91 - src/pages/StoryBook.js | 814 - src/pages/index.js | 3 - src/preload.js | 2 + src/renderer/App.css | 65 + src/renderer/App.tsx | 186 + src/renderer/api/index.ts | 4 + src/renderer/api/tokenization-engine/index.ts | 50 + .../tokenization-engine/organizations.api.ts | 21 + .../api/tokenization-engine/projects.api.ts | 78 + .../api/tokenization-engine/system.api.ts | 80 + .../api/tokenization-engine/units.api.ts | 151 + src/renderer/assets/img/Tokenization.svg | 41 + src/renderer/assets/img/react.svg | 1 + .../blocks/buttons/ConnectButton.tsx | 63 + .../blocks/buttons/DetokenizeUnitButton.tsx | 94 + .../components/blocks/buttons/FormButton.tsx | 22 + .../components/blocks/buttons/index.ts | 3 + .../components/blocks/forms/ConnectForm.tsx | 138 + .../blocks/forms/CreateTokenForm.tsx | 117 + .../blocks/forms/DetokenizeUnitForm.tsx | 217 + src/renderer/components/blocks/forms/index.ts | 3 + src/renderer/components/blocks/index.ts | 7 + .../blocks/layout/InformationDisplayField.tsx | 56 + .../blocks/layout/IssuanceInformation.tsx | 47 + .../blocks/layout/LabelInformation.tsx | 84 + .../components/blocks/layout/LeftNav.tsx | 76 + .../components/blocks/layout/PageCounter.tsx | 25 + .../components/blocks/layout/Template.tsx | 32 + .../blocks/layout/UnitInformation.tsx | 135 + .../components/blocks/layout/index.ts | 7 + .../ConfirmUnitDetokenizationDataModal.tsx | 115 + .../components/blocks/modals/ConnectModal.tsx | 68 + .../blocks/modals/CreateTokenModal.tsx | 209 + .../modals/DetokenizationSuccessModal.tsx | 31 + .../blocks/modals/NoHomeOrgModal.tsx | 50 + .../modals/SubmitDetokenizationFileModal.tsx | 85 + .../modals/TokenizationSuccessModal.tsx | 32 + .../components/blocks/modals/index.ts | 7 + .../blocks/tables/SkeletonTable.tsx | 63 + .../blocks/tables/TokenizedUnitListTable.tsx | 121 + .../tables/UntokenizedUnitListTable.tsx | 164 + .../components/blocks/tables/index.ts | 3 + .../blocks/tabs/TokenizedUnitsTab.tsx | 124 + .../blocks/tabs/UntokenizedUnitsTab.tsx | 134 + src/renderer/components/blocks/tabs/index.ts | 2 + .../components/blocks/widgets/SearchBox.tsx | 28 + .../blocks/widgets/SyncIndicator.tsx | 92 + .../blocks/widgets/ThemeModeSelector.tsx | 27 + .../components/blocks/widgets/index.ts | 3 + src/renderer/components/form/Field.tsx | 179 + src/renderer/components/form/Repeater.tsx | 81 + src/renderer/components/form/TagInput.tsx | 99 + src/renderer/components/form/index.ts | 3 + src/renderer/components/icons/AppLogo.tsx | 20 + src/renderer/components/icons/index.ts | 1 + .../index.js => renderer/components/index.ts} | 8 +- .../layout/ComponentCenteredSpinner.tsx | 21 + src/renderer/components/layout/DataTable.tsx | 183 + src/renderer/components/layout/Header.tsx | 38 + .../layout/IndeterminateProgressOverlay.tsx | 11 + src/renderer/components/layout/Spacer.tsx | 18 + src/renderer/components/layout/index.ts | 5 + src/renderer/components/proxy/Alert.tsx | 7 + src/renderer/components/proxy/Badge.tsx | 7 + src/renderer/components/proxy/Button.tsx | 13 + src/renderer/components/proxy/Card.tsx | 7 + src/renderer/components/proxy/Dropdown.tsx | 13 + src/renderer/components/proxy/FileInput.tsx | 7 + .../components/proxy/FloatingLabel.tsx | 7 + src/renderer/components/proxy/HelperText.tsx | 7 + src/renderer/components/proxy/Label.tsx | 7 + src/renderer/components/proxy/Modal.tsx | 37 + src/renderer/components/proxy/Pagination.tsx | 7 + src/renderer/components/proxy/Popover.tsx | 7 + src/renderer/components/proxy/Select.tsx | 150 + src/renderer/components/proxy/Sidebar.tsx | 44 + src/renderer/components/proxy/Spinner.tsx | 7 + src/renderer/components/proxy/Table.tsx | 40 + src/renderer/components/proxy/Tabs.tsx | 13 + src/renderer/components/proxy/TextInput.tsx | 7 + src/renderer/components/proxy/Toast.tsx | 7 + src/renderer/components/proxy/Tooltip.tsx | 7 + src/renderer/components/proxy/index.ts | 20 + .../components/typography/Caption1.tsx | 24 + .../components/typography/Caption2.tsx | 25 + src/renderer/components/typography/index.ts | 2 + src/renderer/hooks/index.ts | 6 + src/renderer/hooks/useColumnOrder.tsx | 43 + .../hooks/useGetProjectOptionsList.ts | 55 + src/renderer/hooks/useManageSavedLocation.tsx | 44 + src/renderer/hooks/useQueryParamState.tsx | 55 + src/renderer/hooks/useUrlHash.tsx | 46 + src/renderer/hooks/useWildCardUrlHash.tsx | 44 + src/renderer/index.css | 9 + src/renderer/index.tsx | 24 + src/renderer/pages/ErrorBoundary.tsx | 51 + src/renderer/pages/RevertTokensPage.tsx | 20 + src/renderer/pages/TokensPage.tsx | 85 + src/renderer/pages/index.ts | 3 + src/renderer/routes/AppNavigator.tsx | 32 + .../index.js => renderer/routes/index.ts} | 0 src/renderer/routes/route-constants.ts | 4 + src/renderer/schemas/CoBenefit.schema.ts | 6 + src/renderer/schemas/Estimation.schema.ts | 8 + src/renderer/schemas/Governance.schema.ts | 9 + src/renderer/schemas/Issuance.schema.ts | 16 + src/renderer/schemas/Label.schema.ts | 16 + src/renderer/schemas/LabelUnit.schema.ts | 12 + src/renderer/schemas/Organization.schema.ts | 24 + src/renderer/schemas/PickList.schema.ts | 21 + src/renderer/schemas/Project.schema.ts | 40 + .../schemas/ProjectLocation.schema.ts | 10 + src/renderer/schemas/Rating.schema.ts | 10 + src/renderer/schemas/RelatedProject.schema.ts | 14 + src/renderer/schemas/Unit.schema.ts | 37 + src/renderer/store/index.ts | 45 + .../store/middleware/rtkQueryErrorLogger.js | 22 + .../store/slices/app/app.initialstate.ts | 21 + src/renderer/store/slices/app/app.slice.ts | 49 + src/renderer/store/slices/app/index.ts | 1 + src/renderer/store/slices/index.ts | 3 + src/renderer/translations/index.ts | 36 + src/renderer/translations/tokens/en-US.json | 107 + src/renderer/utils/formik-utils.ts | 58 + src/renderer/utils/hex-utils.ts | 3 + src/renderer/utils/transforms.ts | 47 + src/renderer/utils/unified-ui-utils.ts | 86 + src/renderer/utils/zip-utils.ts | 49 + src/renderer/vite-env.d.ts | 7 + src/reportWebVitals.js | 13 - src/setupTests.js | 5 - src/start-react.js | 26 - src/start.js | 85 - src/store/actions/appActions.js | 702 - src/store/index.js | 8 - src/store/mocks/example.js | 3 - src/store/mocks/index.js | 3 - src/store/mocks/projects.js | 142 - src/store/mocks/untokenized-units.js | 11063 ------ src/store/reducers/appReducer.js | 121 - src/store/reducers/index.js | 1 - src/store/store-functions.js | 3 - src/store/validations/example.validations.js | 72 - src/store/validations/index.js | 1 - src/store/view/organization.view.js | 5 - src/theme.js | 83 - src/translations/index.js | 32 - src/translations/tokens/de.json | 68 - src/translations/tokens/en-US.json | 68 - src/translations/tokens/es.json | 68 - src/translations/tokens/fr.json | 68 - src/translations/tokens/zh-cn.json | 68 - src/utils/dateUtils.js | 26 - src/utils/json.js | 8 - src/utils/message-types.js | 5 - src/utils/notificationUtils.js | 41 - src/utils/stringUtils.js | 31 - src/utils/urlUtils.js | 27 - src/utils/xlsxUtils.js | 21 - src/utils/zip.js | 23 - tailwind.config.js | 19 + tsconfig.json | 38 + vite.config.ts | 21 + 345 files changed, 15036 insertions(+), 47417 deletions(-) delete mode 100644 .babelrc delete mode 100644 .env create mode 100644 .eslintignore create mode 100644 .eslintrc.cjs delete mode 100644 .eslintrc.json mode change 100755 => 100644 .husky/commit-msg mode change 100755 => 100644 .husky/pre-commit delete mode 100644 .mocharc.yaml rename .prettierrc.js => .prettierrc.cjs (66%) delete mode 100644 .repo-content-updater.yaml delete mode 100644 .vscode/settings.json delete mode 100644 CHANGELOG.md delete mode 100644 LICENSE delete mode 100644 Procfile delete mode 100644 README.MD create mode 100644 README.md delete mode 100644 check_node_version.js create mode 100644 commitlint.config.cjs delete mode 100644 commitlint.config.js delete mode 100644 docs/contributing.md create mode 100644 index.html delete mode 100644 jsconfig.json create mode 100644 logo.svg create mode 100644 postcss.config.js delete mode 100644 public/android-chrome-512x512.png delete mode 100644 public/apple-touch-icon.png create mode 100644 public/colors.example.json create mode 100644 public/config.example.json delete mode 100644 public/electron.js delete mode 100644 public/favicon.ico delete mode 100644 public/index.html delete mode 100644 public/manifest.json delete mode 100644 public/preload.js delete mode 100644 public/robots.txt create mode 100644 public/vite.svg delete mode 100644 src/App.js delete mode 100644 src/assets/fonts/Poppins-Black.ttf delete mode 100644 src/assets/fonts/Poppins-BlackItalic.ttf delete mode 100644 src/assets/fonts/Poppins-Bold.ttf delete mode 100644 src/assets/fonts/Poppins-BoldItalic.ttf delete mode 100644 src/assets/fonts/Poppins-ExtraBold.ttf delete mode 100644 src/assets/fonts/Poppins-ExtraBoldItalic.ttf delete mode 100644 src/assets/fonts/Poppins-ExtraLight.ttf delete mode 100644 src/assets/fonts/Poppins-ExtraLightItalic.ttf delete mode 100644 src/assets/fonts/Poppins-Italic.ttf delete mode 100644 src/assets/fonts/Poppins-Light.ttf delete mode 100644 src/assets/fonts/Poppins-LightItalic.ttf delete mode 100644 src/assets/fonts/Poppins-Medium.ttf delete mode 100644 src/assets/fonts/Poppins-MediumItalic.ttf delete mode 100644 src/assets/fonts/Poppins-Regular.ttf delete mode 100644 src/assets/fonts/Poppins-SemiBold.ttf delete mode 100644 src/assets/fonts/Poppins-SemiBoldItalic.ttf delete mode 100644 src/assets/fonts/Poppins-Thin.ttf delete mode 100644 src/assets/fonts/Poppins-ThinItalic.ttf delete mode 100644 src/assets/fonts/Roboto-Light.ttf delete mode 100644 src/assets/fonts/Roboto-Medium.ttf delete mode 100644 src/assets/fonts/Roboto-Regular.ttf delete mode 100644 src/assets/img/android-chrome-192x192.png delete mode 100644 src/assets/img/android-chrome-512x512.png delete mode 100644 src/assets/img/apple-touch-icon.png delete mode 100644 src/assets/img/favicon-16x16.png delete mode 100644 src/assets/img/favicon-32x32.png delete mode 100644 src/assets/img/favicon.ico delete mode 100644 src/assets/img/favicon_package_v0.16.zip delete mode 100644 src/assets/img/mstile-150x150.png delete mode 100644 src/assets/img/safari-pinned-tab.svg delete mode 100644 src/assets/img/tokenization-engine-logo.png delete mode 100644 src/components/blocks/Alert.js delete mode 100644 src/components/blocks/BasicMenu.js delete mode 100644 src/components/blocks/Card.js delete mode 100644 src/components/blocks/ComponentRepeater.js delete mode 100644 src/components/blocks/Connect.js delete mode 100644 src/components/blocks/LocalMessage.js delete mode 100644 src/components/blocks/LocaleChangeListener.js delete mode 100644 src/components/blocks/LocaleSwitcher.js delete mode 100644 src/components/blocks/Message.js delete mode 100644 src/components/blocks/Modal.js delete mode 100644 src/components/blocks/NotificationCard.js delete mode 100644 src/components/blocks/Notifications.js delete mode 100644 src/components/blocks/OrganizationLogo.js delete mode 100644 src/components/blocks/Pagination.js delete mode 100644 src/components/blocks/Popover.js delete mode 100644 src/components/blocks/Table.js delete mode 100644 src/components/blocks/TableCell.js delete mode 100644 src/components/blocks/TableDrawer.js delete mode 100644 src/components/blocks/Tag.js delete mode 100644 src/components/blocks/ToolTip.js delete mode 100644 src/components/blocks/ToolTipContainer.js delete mode 100644 src/components/blocks/UnitDetails.js delete mode 100644 src/components/blocks/index.js delete mode 100644 src/components/forms/ConfirmDetokanizationModal.js delete mode 100644 src/components/forms/CreateTokenModal.js delete mode 100644 src/components/forms/DetokenizeModal.js delete mode 100644 src/components/forms/FormikRepeater.js delete mode 100644 src/components/forms/index.js delete mode 100644 src/components/icons/AddIcon.js delete mode 100644 src/components/icons/AddIconCircle.js delete mode 100644 src/components/icons/AppLogo.js delete mode 100644 src/components/icons/ArrowDownIcon.js delete mode 100644 src/components/icons/AscendingClockIcon.js delete mode 100644 src/components/icons/CheckIcon.js delete mode 100644 src/components/icons/CloseIcon.js delete mode 100644 src/components/icons/CloseIconWithBorder.js delete mode 100644 src/components/icons/CopyIcon.js delete mode 100644 src/components/icons/DarkThemeIcon.js delete mode 100644 src/components/icons/DescendingClockIcon.js delete mode 100644 src/components/icons/DescriptionIcon.js delete mode 100644 src/components/icons/Divider.js delete mode 100644 src/components/icons/DownloadIcon.js delete mode 100644 src/components/icons/EditIcon.js delete mode 100644 src/components/icons/EllipseIcon.js delete mode 100644 src/components/icons/EllipsisMenuIcon.js delete mode 100644 src/components/icons/ErrorIcon.js delete mode 100644 src/components/icons/ErrorIconSmall.js delete mode 100644 src/components/icons/IconColorsWrapper.js delete mode 100644 src/components/icons/InfoIcon.js delete mode 100644 src/components/icons/InfoIconSmall.js delete mode 100644 src/components/icons/LightThemeIcon.js delete mode 100644 src/components/icons/LinkIcon.js delete mode 100644 src/components/icons/LocaleIcon.js delete mode 100644 src/components/icons/MagnifyGlassIcon.js delete mode 100644 src/components/icons/MagnifyGlassIconWhite.js delete mode 100644 src/components/icons/MinusIcon.js delete mode 100644 src/components/icons/OrganizationIcon.js delete mode 100644 src/components/icons/RegistryIcon.js delete mode 100644 src/components/icons/ReloadIcon.js delete mode 100644 src/components/icons/RemoveIcon.js delete mode 100644 src/components/icons/SuccessIcon.js delete mode 100644 src/components/icons/SuccessIconSmall.js delete mode 100644 src/components/icons/ThreeDotsIcon.js delete mode 100644 src/components/icons/UploadIcon.js delete mode 100644 src/components/icons/WarehouseIcon.js delete mode 100644 src/components/icons/WarningIcon.js delete mode 100644 src/components/icons/WarningIconSmall.js delete mode 100644 src/components/icons/index.js delete mode 100644 src/components/input/DateSelect.js delete mode 100644 src/components/input/FormikError.js delete mode 100644 src/components/input/PrimaryButton.js delete mode 100644 src/components/input/SearchInput.js delete mode 100644 src/components/input/SearchInputField.js delete mode 100644 src/components/input/SelectCreatable.js delete mode 100644 src/components/input/StandardInput.js delete mode 100644 src/components/input/Textarea.js delete mode 100644 src/components/input/UploadFileInput.js delete mode 100644 src/components/input/UploadPngInput.js delete mode 100644 src/components/input/YearSelect.js delete mode 100644 src/components/input/index.js delete mode 100644 src/components/layout/AppContainer.js delete mode 100644 src/components/layout/AppHeader.js delete mode 100644 src/components/layout/Dashboard.js delete mode 100644 src/components/layout/ErrorBoundary.js delete mode 100644 src/components/layout/FormContainers.js delete mode 100644 src/components/layout/IndeterminateProgressOverlay.js delete mode 100644 src/components/layout/LeftNav.js delete mode 100644 src/components/layout/TabPanel.js delete mode 100644 src/components/layout/Tabs.js delete mode 100644 src/components/layout/index.js delete mode 100644 src/components/typography/Body.js delete mode 100644 src/components/typography/ButtonText.js delete mode 100644 src/components/typography/H1.js delete mode 100644 src/components/typography/H2.js delete mode 100644 src/components/typography/H3.js delete mode 100644 src/components/typography/H4.js delete mode 100644 src/components/typography/MenuText.js delete mode 100644 src/components/typography/Subtitle.js delete mode 100644 src/components/typography/index.js delete mode 100644 src/constants/index.js delete mode 100644 src/hooks/useWindowSize.js delete mode 100644 src/index.css delete mode 100644 src/index.js create mode 100644 src/main.ts delete mode 100644 src/navigation/AppNavigator.js delete mode 100644 src/pages/CreateTokens.js delete mode 100644 src/pages/RevertTokens.js delete mode 100644 src/pages/StoryBook.js delete mode 100644 src/pages/index.js create mode 100644 src/preload.js create mode 100644 src/renderer/App.css create mode 100644 src/renderer/App.tsx create mode 100644 src/renderer/api/index.ts create mode 100644 src/renderer/api/tokenization-engine/index.ts create mode 100644 src/renderer/api/tokenization-engine/organizations.api.ts create mode 100644 src/renderer/api/tokenization-engine/projects.api.ts create mode 100644 src/renderer/api/tokenization-engine/system.api.ts create mode 100644 src/renderer/api/tokenization-engine/units.api.ts create mode 100644 src/renderer/assets/img/Tokenization.svg create mode 100644 src/renderer/assets/img/react.svg create mode 100644 src/renderer/components/blocks/buttons/ConnectButton.tsx create mode 100644 src/renderer/components/blocks/buttons/DetokenizeUnitButton.tsx create mode 100644 src/renderer/components/blocks/buttons/FormButton.tsx create mode 100644 src/renderer/components/blocks/buttons/index.ts create mode 100644 src/renderer/components/blocks/forms/ConnectForm.tsx create mode 100644 src/renderer/components/blocks/forms/CreateTokenForm.tsx create mode 100644 src/renderer/components/blocks/forms/DetokenizeUnitForm.tsx create mode 100644 src/renderer/components/blocks/forms/index.ts create mode 100644 src/renderer/components/blocks/index.ts create mode 100644 src/renderer/components/blocks/layout/InformationDisplayField.tsx create mode 100644 src/renderer/components/blocks/layout/IssuanceInformation.tsx create mode 100644 src/renderer/components/blocks/layout/LabelInformation.tsx create mode 100644 src/renderer/components/blocks/layout/LeftNav.tsx create mode 100644 src/renderer/components/blocks/layout/PageCounter.tsx create mode 100644 src/renderer/components/blocks/layout/Template.tsx create mode 100644 src/renderer/components/blocks/layout/UnitInformation.tsx create mode 100644 src/renderer/components/blocks/layout/index.ts create mode 100644 src/renderer/components/blocks/modals/ConfirmUnitDetokenizationDataModal.tsx create mode 100644 src/renderer/components/blocks/modals/ConnectModal.tsx create mode 100644 src/renderer/components/blocks/modals/CreateTokenModal.tsx create mode 100644 src/renderer/components/blocks/modals/DetokenizationSuccessModal.tsx create mode 100644 src/renderer/components/blocks/modals/NoHomeOrgModal.tsx create mode 100644 src/renderer/components/blocks/modals/SubmitDetokenizationFileModal.tsx create mode 100644 src/renderer/components/blocks/modals/TokenizationSuccessModal.tsx create mode 100644 src/renderer/components/blocks/modals/index.ts create mode 100644 src/renderer/components/blocks/tables/SkeletonTable.tsx create mode 100644 src/renderer/components/blocks/tables/TokenizedUnitListTable.tsx create mode 100644 src/renderer/components/blocks/tables/UntokenizedUnitListTable.tsx create mode 100644 src/renderer/components/blocks/tables/index.ts create mode 100644 src/renderer/components/blocks/tabs/TokenizedUnitsTab.tsx create mode 100644 src/renderer/components/blocks/tabs/UntokenizedUnitsTab.tsx create mode 100644 src/renderer/components/blocks/tabs/index.ts create mode 100644 src/renderer/components/blocks/widgets/SearchBox.tsx create mode 100644 src/renderer/components/blocks/widgets/SyncIndicator.tsx create mode 100644 src/renderer/components/blocks/widgets/ThemeModeSelector.tsx create mode 100644 src/renderer/components/blocks/widgets/index.ts create mode 100644 src/renderer/components/form/Field.tsx create mode 100644 src/renderer/components/form/Repeater.tsx create mode 100644 src/renderer/components/form/TagInput.tsx create mode 100644 src/renderer/components/form/index.ts create mode 100644 src/renderer/components/icons/AppLogo.tsx create mode 100644 src/renderer/components/icons/index.ts rename src/{components/index.js => renderer/components/index.ts} (52%) create mode 100644 src/renderer/components/layout/ComponentCenteredSpinner.tsx create mode 100644 src/renderer/components/layout/DataTable.tsx create mode 100644 src/renderer/components/layout/Header.tsx create mode 100644 src/renderer/components/layout/IndeterminateProgressOverlay.tsx create mode 100644 src/renderer/components/layout/Spacer.tsx create mode 100644 src/renderer/components/layout/index.ts create mode 100644 src/renderer/components/proxy/Alert.tsx create mode 100644 src/renderer/components/proxy/Badge.tsx create mode 100644 src/renderer/components/proxy/Button.tsx create mode 100644 src/renderer/components/proxy/Card.tsx create mode 100644 src/renderer/components/proxy/Dropdown.tsx create mode 100644 src/renderer/components/proxy/FileInput.tsx create mode 100644 src/renderer/components/proxy/FloatingLabel.tsx create mode 100644 src/renderer/components/proxy/HelperText.tsx create mode 100644 src/renderer/components/proxy/Label.tsx create mode 100644 src/renderer/components/proxy/Modal.tsx create mode 100644 src/renderer/components/proxy/Pagination.tsx create mode 100644 src/renderer/components/proxy/Popover.tsx create mode 100644 src/renderer/components/proxy/Select.tsx create mode 100644 src/renderer/components/proxy/Sidebar.tsx create mode 100644 src/renderer/components/proxy/Spinner.tsx create mode 100644 src/renderer/components/proxy/Table.tsx create mode 100644 src/renderer/components/proxy/Tabs.tsx create mode 100644 src/renderer/components/proxy/TextInput.tsx create mode 100644 src/renderer/components/proxy/Toast.tsx create mode 100644 src/renderer/components/proxy/Tooltip.tsx create mode 100644 src/renderer/components/proxy/index.ts create mode 100644 src/renderer/components/typography/Caption1.tsx create mode 100644 src/renderer/components/typography/Caption2.tsx create mode 100644 src/renderer/components/typography/index.ts create mode 100644 src/renderer/hooks/index.ts create mode 100644 src/renderer/hooks/useColumnOrder.tsx create mode 100644 src/renderer/hooks/useGetProjectOptionsList.ts create mode 100644 src/renderer/hooks/useManageSavedLocation.tsx create mode 100644 src/renderer/hooks/useQueryParamState.tsx create mode 100644 src/renderer/hooks/useUrlHash.tsx create mode 100644 src/renderer/hooks/useWildCardUrlHash.tsx create mode 100644 src/renderer/index.css create mode 100644 src/renderer/index.tsx create mode 100644 src/renderer/pages/ErrorBoundary.tsx create mode 100644 src/renderer/pages/RevertTokensPage.tsx create mode 100644 src/renderer/pages/TokensPage.tsx create mode 100644 src/renderer/pages/index.ts create mode 100644 src/renderer/routes/AppNavigator.tsx rename src/{navigation/index.js => renderer/routes/index.ts} (100%) create mode 100644 src/renderer/routes/route-constants.ts create mode 100644 src/renderer/schemas/CoBenefit.schema.ts create mode 100644 src/renderer/schemas/Estimation.schema.ts create mode 100644 src/renderer/schemas/Governance.schema.ts create mode 100644 src/renderer/schemas/Issuance.schema.ts create mode 100644 src/renderer/schemas/Label.schema.ts create mode 100644 src/renderer/schemas/LabelUnit.schema.ts create mode 100644 src/renderer/schemas/Organization.schema.ts create mode 100644 src/renderer/schemas/PickList.schema.ts create mode 100644 src/renderer/schemas/Project.schema.ts create mode 100644 src/renderer/schemas/ProjectLocation.schema.ts create mode 100644 src/renderer/schemas/Rating.schema.ts create mode 100644 src/renderer/schemas/RelatedProject.schema.ts create mode 100644 src/renderer/schemas/Unit.schema.ts create mode 100644 src/renderer/store/index.ts create mode 100644 src/renderer/store/middleware/rtkQueryErrorLogger.js create mode 100644 src/renderer/store/slices/app/app.initialstate.ts create mode 100644 src/renderer/store/slices/app/app.slice.ts create mode 100644 src/renderer/store/slices/app/index.ts create mode 100644 src/renderer/store/slices/index.ts create mode 100644 src/renderer/translations/index.ts create mode 100644 src/renderer/translations/tokens/en-US.json create mode 100644 src/renderer/utils/formik-utils.ts create mode 100644 src/renderer/utils/hex-utils.ts create mode 100644 src/renderer/utils/transforms.ts create mode 100644 src/renderer/utils/unified-ui-utils.ts create mode 100644 src/renderer/utils/zip-utils.ts create mode 100644 src/renderer/vite-env.d.ts delete mode 100644 src/reportWebVitals.js delete mode 100644 src/setupTests.js delete mode 100644 src/start-react.js delete mode 100644 src/start.js delete mode 100644 src/store/actions/appActions.js delete mode 100644 src/store/index.js delete mode 100644 src/store/mocks/example.js delete mode 100644 src/store/mocks/index.js delete mode 100644 src/store/mocks/projects.js delete mode 100644 src/store/mocks/untokenized-units.js delete mode 100644 src/store/reducers/appReducer.js delete mode 100644 src/store/reducers/index.js delete mode 100644 src/store/store-functions.js delete mode 100644 src/store/validations/example.validations.js delete mode 100644 src/store/validations/index.js delete mode 100644 src/store/view/organization.view.js delete mode 100644 src/theme.js delete mode 100644 src/translations/index.js delete mode 100644 src/translations/tokens/de.json delete mode 100644 src/translations/tokens/en-US.json delete mode 100644 src/translations/tokens/es.json delete mode 100644 src/translations/tokens/fr.json delete mode 100644 src/translations/tokens/zh-cn.json delete mode 100644 src/utils/dateUtils.js delete mode 100644 src/utils/json.js delete mode 100644 src/utils/message-types.js delete mode 100644 src/utils/notificationUtils.js delete mode 100644 src/utils/stringUtils.js delete mode 100644 src/utils/urlUtils.js delete mode 100644 src/utils/xlsxUtils.js delete mode 100644 src/utils/zip.js create mode 100644 tailwind.config.js create mode 100644 tsconfig.json create mode 100644 vite.config.ts diff --git a/.babelrc b/.babelrc deleted file mode 100644 index c1f3127..0000000 --- a/.babelrc +++ /dev/null @@ -1,7 +0,0 @@ -{ - "presets": ["@babel/preset-env", "@babel/preset-react"], - "plugins": [ - "@babel/plugin-transform-runtime", - "@babel/plugin-proposal-private-property-in-object" - ] -} \ No newline at end of file diff --git a/.env b/.env deleted file mode 100644 index 3a15b49..0000000 --- a/.env +++ /dev/null @@ -1,2 +0,0 @@ -REACT_APP_VERSION=$npm_package_version -BROWSER=none \ No newline at end of file diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..b230979 --- /dev/null +++ b/.eslintignore @@ -0,0 +1 @@ +*.config.js \ No newline at end of file diff --git a/.eslintrc.cjs b/.eslintrc.cjs new file mode 100644 index 0000000..9b0f644 --- /dev/null +++ b/.eslintrc.cjs @@ -0,0 +1,23 @@ +module.exports = { + root: true, + env: { browser: true, es2020: true }, + extends: [ + "eslint:recommended", + "plugin:@typescript-eslint/recommended", + "plugin:react-hooks/recommended", + ], + ignorePatterns: ["dist", ".eslintrc.cjs"], + parser: "@typescript-eslint/parser", + plugins: ["react-refresh"], + rules: { + "react-refresh/only-export-components": [ + "warn", + { allowConstantExport: true }, + ], + // Disabling the rules related to enforcing types + "@typescript-eslint/explicit-module-boundary-types": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-implicit-any-catch": "off", + "@typescript-eslint/ban-ts-comment": "off", + }, +}; diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index 66de1e0..0000000 --- a/.eslintrc.json +++ /dev/null @@ -1,30 +0,0 @@ -{ - "env": { - "browser": true, - "amd": true, - "node": true, - "es6": true - }, - "parser": "@babel/eslint-parser", - "parserOptions": { - "ecmaFeatures": { - "jsx": true - } - }, - "extends": [ - "eslint:recommended", - "plugin:react/recommended", - "plugin:mocha/recommended" - ], - "rules": { - "react/prop-types": "off", - "mocha/no-mocha-arrows": 0, - "react/jsx-filename-extension": ["error", { "extensions": [".js", ".jsx"] }] - }, - "plugins": ["react", "mocha"], - "settings": { - "react": { - "version": "detect" - } - } -} diff --git a/.github/dependabot.yml b/.github/dependabot.yml index dfaf3c8..6ce1d1e 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -1,8 +1,56 @@ +# This file is managed by the repo-content-updater project. Manual changes here will result in a PR to bring back +# inline with the upstream template, unless you remove the dependabot managed file property from the repo + version: 2 updates: + - package-ecosystem: "gomod" + directory: / + schedule: + interval: "weekly" + day: "tuesday" + open-pull-requests-limit: 10 + labels: + - dependencies + - go + - "Changed" + reviewers: ["cmmarslender", "starttoaster"] + groups: + global: + patterns: + - "*" + + - package-ecosystem: "pip" + directory: / + schedule: + interval: "weekly" + day: "tuesday" + open-pull-requests-limit: 10 + labels: + - dependencies + - python + - "Changed" + reviewers: ["emlowe", "altendky"] + + - package-ecosystem: "github-actions" + directory: / + schedule: + interval: "weekly" + day: "tuesday" + open-pull-requests-limit: 10 + labels: + - dependencies + - github_actions + - "Changed" + reviewers: ["cmmarslender", "Starttoaster", "pmaslana"] + - package-ecosystem: "npm" - directory: "/" + directory: / schedule: interval: "weekly" - day: "sunday" - target-branch: "develop" + day: "tuesday" + open-pull-requests-limit: 10 + labels: + - dependencies + - javascript + - "Changed" + reviewers: ["cmmarslender", "emlowe"] diff --git a/.github/workflows/auto-release.yml b/.github/workflows/auto-release.yml index 6b4ebcd..28d57ad 100644 --- a/.github/workflows/auto-release.yml +++ b/.github/workflows/auto-release.yml @@ -11,11 +11,12 @@ concurrency: group: main-release-check jobs: - tag-and-changelog: - name: Create Changelog and tag release + check-version: + name: Check version increment runs-on: ubuntu-latest steps: - - uses: Chia-Network/actions/clean-workspace@main + - name: Clean workspace + uses: Chia-Network/actions/clean-workspace@main - name: Checkout current branch uses: actions/checkout@v3 @@ -24,7 +25,7 @@ jobs: token: ${{ secrets.PACKAGE_ADMIN_PAT }} fetch-depth: 0 - - name: Configure commit signing for ChiaAutomation + - name: Setup commit signing for ChiaAutomation uses: Chia-Network/actions/commit-sign/gpg@main with: gpg_private_key: ${{ secrets.CHIA_AUTOMATION_PRIVATE_GPG_KEY }} @@ -43,7 +44,8 @@ jobs: npx conventional-changelog-cli -p angular -i CHANGELOG.md -s -r 0 changes=$(npx conventional-changelog-cli -r 1 | tail -n +2) git add CHANGELOG.md - git commit -m "chore: Updating changelog for $version" + sed -i -e '//d' CHANGELOG.md + git commit -m "Updating changelog for $version" git tag $version -m "Release $version $changes" git push origin $version git push origin main diff --git a/.github/workflows/build-installers.yaml b/.github/workflows/build-installers.yaml index 88410d4..14f5624 100644 --- a/.github/workflows/build-installers.yaml +++ b/.github/workflows/build-installers.yaml @@ -4,6 +4,8 @@ on: push: tags: - '**' + branches: + - refactor/refactor-base #remove this once rebuild is merged pull_request: branches: - '**' @@ -27,18 +29,21 @@ jobs: - name: Checkout Code uses: actions/checkout@v3 - - name: Setup Node 18.16 + - name: Setup Node 20 uses: actions/setup-node@v3 with: - node-version: '18.16' + node-version: '20.10' + + - name: Install Husky + run: npm install --save-dev husky - name: install dmg-license run: npm i dmg-license - name: npm install run: | - node --version npm install + - name: Import Apple installer signing certificate uses: Apple-Actions/import-codesign-certs@v1 with: @@ -47,7 +52,7 @@ jobs: - name: Build electron app env: - CSC_FOR_PULL_REQUEST: 'true' + CSC_FOR_PULL_REQUEST: "true" run: npm run electron:package:mac - name: Notarize @@ -63,7 +68,7 @@ jobs: - name: Upload Mac Installer uses: actions/upload-artifact@v3 with: - name: mac-installer + name: tokenization-engine-ui-mac-installer path: ${{ github.workspace }}/dist/*.dmg build_windows: @@ -73,10 +78,16 @@ jobs: - name: Checkout Code uses: actions/checkout@v3 - - name: Setup Node 18.16 + - name: Setup Node 20.10 uses: actions/setup-node@v3 with: - node-version: '18.16' + node-version: '20.10' + + - name: Install Husky + run: npm install --save-dev husky + + - name: Ignore Husky where not compatible + run: npm pkg delete scripts.prepare - name: npm install run: | @@ -106,7 +117,7 @@ jobs: - name: Upload Windows Installer uses: actions/upload-artifact@v3 with: - name: windows-installer + name: tokenization-engine-ui-windows-installer path: "${{ github.workspace }}/${{ env.INSTALLER_FILE }}" build_linux: @@ -116,35 +127,45 @@ jobs: - name: Checkout Code uses: actions/checkout@v3 - - name: Setup Node 18.16 + - name: Setup Node 20.10 uses: actions/setup-node@v3 with: - node-version: '18.16' + node-version: '20.10' + + - name: Install Husky + run: npm install --save-dev husky - name: npm install run: | node --version npm install + - name: Build electron app run: npm run electron:package:linux + - name: Rename Linux installer to be standard format for apt + run: | + ORIGINAL=$(ls dist/*.deb) + MODIFIED=${ORIGINAL:0:-10}-1${ORIGINAL#${ORIGINAL:0:-10}} + mv $ORIGINAL $MODIFIED + - name: Upload Linux Installer uses: actions/upload-artifact@v3 with: - name: linux-installer + name: tokenization-engine-ui-linux-installer path: ${{ github.workspace }}/dist/*.deb build_web: - name: Build Web App + name: Build CADT UI Web App runs-on: ubuntu-latest steps: - name: Checkout Code uses: actions/checkout@v3 - - name: Setup Node 18.16 + - name: Setup Node 20.10 uses: actions/setup-node@v3 with: - node-version: '18.16' + node-version: '20.10' - name: Install Husky run: npm install --save-dev husky @@ -156,13 +177,13 @@ jobs: npm run build - name: Create .tar.gz of the web build - run: tar -cvzf climate-tokenization-engine-ui-web-build.tar.gz build + run: tar -cvzf tokenization-engine-ui-web-build.tar.gz build - name: Upload build artifact uses: actions/upload-artifact@v3 with: - name: climate-tokenization-engine-ui-web-build - path: climate-tokenization-engine-ui-web-build.tar.gz + name: tokenization-engine-ui-web-build + path: tokenization-engine-ui-web-build.tar.gz release: runs-on: ubuntu-latest @@ -171,37 +192,38 @@ jobs: - build_mac - build_windows - build_linux + - build_web steps: - name: Download Windows artifacts uses: actions/download-artifact@v3 with: - name: windows-installer - path: windows-installer + name: tokenization-engine-ui-windows-installer + path: tokenization-engine-ui-windows-installer - name: Download MacOS artifacts uses: actions/download-artifact@v3 with: - name: mac-installer - path: mac-installer + name: tokenization-engine-ui-mac-installer + path: tokenization-engine-ui-mac-installer - name: Download Linux artifacts uses: actions/download-artifact@v3 with: - name: linux-installer - path: linux-installer + name: tokenization-engine-ui-linux-installer + path: tokenization-engine-ui-linux-installer - name: Download Web artifact uses: actions/download-artifact@v3 with: - name: climate-tokenization-engine-ui-web-build - path: climate-tokenization-engine-ui-web-build + name: tokenization-engine-ui-web-build + path: tokenization-engine-ui-web-build - name: Get Filenames run: | - DMG_FILE=$(find ${{ github.workspace }}/mac-installer/ -type f -name '*.dmg') - DEB_FILE=$(find ${{ github.workspace }}/linux-installer/ -type f -name '*.deb') - EXE_FILE=$(find ${{ github.workspace }}/windows-installer/ -type f -name '*.exe') - WEB_FILE=$(find ${{ github.workspace }}/climate-tokenization-engine-ui-web-build/ -type f -name '*.tar.gz') + DMG_FILE=$(find ${{ github.workspace }}/cadt-ui-mac-installer/ -type f -name '*.dmg') + DEB_FILE=$(find ${{ github.workspace }}/cadt-ui-linux-installer/ -type f -name '*.deb') + EXE_FILE=$(find ${{ github.workspace }}/cadt-ui-windows-installer/ -type f -name '*.exe') + WEB_FILE=$(find ${{ github.workspace }}/cadt-ui-web-build/ -type f -name '*.tar.gz') echo "DMG_FILE=$DMG_FILE" >>$GITHUB_ENV echo "DEB_FILE=$DEB_FILE" >>$GITHUB_ENV @@ -217,11 +239,6 @@ jobs: ${{ env.EXE_FILE }} ${{ env.WEB_FILE }} - - name: Get repo name - id: repo-name - run: | - echo "REPO_NAME=$(echo "$GITHUB_REPOSITORY" | cut -d "/" -f 2)" >>$GITHUB_OUTPUT - - name: Get tag name id: tag-name run: | diff --git a/.gitignore b/.gitignore index 800f3a8..14aa347 100644 --- a/.gitignore +++ b/.gitignore @@ -1,24 +1,33 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* +tsconfig.tsbuildinfo -# dependencies -/node_modules -/.pnp -.pnp.js +node_modules +build +dist +dist-ssr +*.local -# testing -/coverage +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? -# production -/build -/dist -# misc -.DS_Store -.env.local -.env.development.local -.env.test.local -.env.production.local +# Contentlayer +.contentlayer -npm-debug.log* -yarn-debug.log* -yarn-error.log* +.package-lock.json +.history diff --git a/.husky/commit-msg b/.husky/commit-msg old mode 100755 new mode 100644 index 8796e17..a78cc75 --- a/.husky/commit-msg +++ b/.husky/commit-msg @@ -1,4 +1 @@ -#!/bin/sh -. "$(dirname "$0")/_/husky.sh" - -npx commitlint --edit $1 \ No newline at end of file +npx commitlint --edit $1 diff --git a/.husky/pre-commit b/.husky/pre-commit old mode 100755 new mode 100644 index c37466e..2312dc5 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,4 +1 @@ -#!/bin/sh -. "$(dirname "$0")/_/husky.sh" - -npx lint-staged \ No newline at end of file +npx lint-staged diff --git a/.lintstagedrc b/.lintstagedrc index 712abff..2b00401 100644 --- a/.lintstagedrc +++ b/.lintstagedrc @@ -1,7 +1,6 @@ { - "*.js": [ + "*.+(js|ts|tsx)": [ "eslint", - "prettier --write" - ], - "(*.json)": [] + "prettier --write 'src/**/*.(js|ts|tsx)'" + ] } diff --git a/.mocharc.yaml b/.mocharc.yaml deleted file mode 100644 index fd703c9..0000000 --- a/.mocharc.yaml +++ /dev/null @@ -1 +0,0 @@ -require: ['@babel/register', 'mock-local-storage'] diff --git a/.nvmrc b/.nvmrc index 6d80269..8ce7030 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -18.16.0 +20.16.0 diff --git a/.prettierrc.js b/.prettierrc.cjs similarity index 66% rename from .prettierrc.js rename to .prettierrc.cjs index 9dd8782..89f4c5d 100644 --- a/.prettierrc.js +++ b/.prettierrc.cjs @@ -1,8 +1,7 @@ module.exports = { bracketSpacing: true, - jsxBracketSameLine: true, singleQuote: true, trailingComma: 'all', - arrowParens: 'avoid', endOfLine: 'auto', -}; + printWidth: 120 +} diff --git a/.repo-content-updater.yaml b/.repo-content-updater.yaml deleted file mode 100644 index b27194a..0000000 --- a/.repo-content-updater.yaml +++ /dev/null @@ -1,4 +0,0 @@ -pr_target_branch: develop -assign_users: - - TheLastCicada -commit_prefix: "chore: " diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 862b25a..0000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "ansible.python.interpreterPath": "/bin/python3" -} diff --git a/CHANGELOG.md b/CHANGELOG.md deleted file mode 100644 index 1c05a07..0000000 --- a/CHANGELOG.md +++ /dev/null @@ -1,244 +0,0 @@ -## [1.1.8](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/compare/1.1.7...1.1.8) (2024-03-07) - - - -## [1.1.7](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/compare/1.1.6...1.1.7) (2024-03-01) - - - -## [1.1.6](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/compare/1.1.5...1.1.6) (2024-02-22) - - - -## [1.1.5](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/compare/1.1.4...1.1.5) (2023-09-20) - - -### Bug Fixes - -* server override fixes ([67cddd2](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/67cddd29bf4983c27709dbb17eff2b29b50adfad)) - - - -## [1.1.4](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/compare/1.1.3...1.1.4) (2023-09-12) - - -### Features - -* light theme ([d783dab](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/d783dab6bf0f9a3ef0689b00424ad559812d24f5)) - - - -## [1.1.3](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/compare/1.1.2...1.1.3) (2023-08-29) - - -### Features - -* hide connect button on iframe ([00573b1](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/00573b100c9f310dd0045b5d0bf47f05c348f790)) -* hide header if in iframe ([099060a](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/099060adece619961a4f4ff7b0d4e29681217613)) -* listen to iframe message ([0d4d792](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/0d4d792398e06bcc810bbc935652cfb708084653)) -* namespace localstorage keys ([e90f08e](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/e90f08ef6d3941c2814799fc8f06e105811c24a5)) - - - -## [1.1.2](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/compare/1.1.1...1.1.2) (2023-07-31) - - - -## [1.1.1](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/compare/1.1.0...1.1.1) (2023-07-31) - - - -# [1.1.0](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/compare/1.0.21...1.1.0) (2023-07-31) - - - -## [1.0.21](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/compare/1.0.20...1.0.21) (2023-07-19) - - - -## [1.0.20](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/compare/1.0.19...1.0.20) (2023-07-19) - - - -## [1.0.19](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/compare/1.0.18...1.0.19) (2023-07-19) - - - -## [1.0.18](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/compare/1.0.17...1.0.18) (2023-07-18) - - - -## [1.0.17](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/compare/1.0.16...1.0.17) (2023-06-29) - - - -## [1.0.16](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/compare/1.0.15...1.0.16) (2023-06-13) - - -### Bug Fixes - -* disable close modal on out of modal click ([3500635](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/3500635f7753442677c8fd0eab3ef602103669f0)) - - - -## [1.0.15](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/compare/1.0.14...1.0.15) (2023-05-23) - - - -## [1.0.14](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/compare/1.0.13...1.0.14) (2023-04-18) - - -### Bug Fixes - -* electron navbar ([3a0ea79](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/3a0ea794ff8f2020d086ddcefc18bc52766087fc)) -* link opening in electron not in browser ([4d2f209](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/4d2f209349935c462726b2da8545d487b3360013)) -* link opening in electron not in browser ([dbfe714](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/dbfe714ee2067394d7f6395374ed9c053b1022aa)) -* table counter not displaying correct number ([86ec77c](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/86ec77ceb725ff5d256a27022b69d3dd6eee6591)) -* xlsx download shown weirdly ([9fb210a](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/9fb210a90f0c7c8f0b03a65a215ec18e762dd60b)) - - -### Features - -* add hyperlink to marketplace field ([995b15c](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/995b15c2d75b9c8528fddc92bf30a4650009fddf)) -* add hyperlink to marketplace field ([2ca1571](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/2ca157186e34eba82355181e53a849b4d969d8e8)) -* add link support to table ([5ed1f8d](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/5ed1f8d70d397634dc1a4c589464a3522f40cdb5)) -* add remote connect tab ([0016bef](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/0016bef50b8ee534bdcf83bff651d4fa301b6cef)) - - - -## [1.0.13](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/compare/1.0.12...1.0.13) (2023-01-04) - - -### Bug Fixes - -* fonts for react notifications ([b58155b](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/b58155bfe5da7a03bb91f0ec141239e5930f1198)) -* progress circle is displayed in the background ([781501b](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/781501b8dd59f6522b91e4f1cdc00079acc0d088)) -* remove hovertext from specific columns ([bf31a78](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/bf31a783fff093b28bc857eab73c95105aaaa34a)) - - -### Features - -* add count to tab names ([ea516da](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/ea516dae89abfcb8b0f9601ef368a778b4afbd7a)) -* add tooltip for serial number block and project name ([80cb529](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/80cb529b6dd56f7d448a424281cd1b631bfd2507)) -* download tokens ([1ef1ce2](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/1ef1ce22b55db1a289f99b93a25fb8de4afb8c5b)) -* fix app icon ([44c16b7](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/44c16b765596c97f47e14140fde337d62aade39a)) -* freeze table title row ([2141baa](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/2141baa48a26f61f1ce77f1f307e7e7276d6d649)) -* refactor table ([f9616b9](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/f9616b9bda09da3aff3404d0c316567970284ef7)) -* refactor table ([d79e675](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/d79e675542adaa8b4148b8fb05ef5c5bce4be8cc)) -* refactor table ([1565766](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/1565766b4bed797c73357f8308d8e845169d2ea2)) -* refresh app ([2af1851](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/2af185175a9263935bf82c9f1ca1daeb32569132)) -* take localization from browser headers ([97186f9](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/97186f9a99a1b5cc74d64931952a3f77ee083652)) -* update ports for all 3 apps ([28966b4](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/28966b41fcb101bc5add60a3bb7e2222ffa60305)) - - - -## [1.0.12](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/compare/1.0.11...1.0.12) (2022-12-05) - - -### Features - -* remove leaves ([51dae61](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/51dae610a3e9c1863253ff0d19c90c075b6daac5)) - - - -## [1.0.11](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/compare/1.0.10...1.0.11) (2022-12-02) - - -### Bug Fixes - -* change existing tokens name ([50058ac](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/50058ac74d4ad556ae6bf52c9c22d4d74da38f08)) -* confirm detokenization failing ([dc40651](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/dc406517bfcb4715164e0d4ab723264d6703bca1)) -* contenttype ([e25cab4](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/e25cab4384a9b4d2d033701c06837042567534d2)) -* detokanization amount divided to 1000 ([7b3323e](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/7b3323e8dc1ffaa1602e71ddc19b0ef2086b3911)) -* primary button wrap issue ([76bee96](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/76bee9613766d7f1339549df14690f07ba1817ee)) -* project name not showing for tokens ([ff39429](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/ff39429e61bd4f9b464b7a6285f631abed79500b)) -* project name not showing for tokens ([f0ab668](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/f0ab6682e257f7784320d1901e2cf0660b09ddce)) -* project names not showing on both tabs ([21e814c](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/21e814cae90166baca08c205f735366ab7918866)) -* show registry id in create modal ([246670d](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/246670d9f06f82e5960386600975a2e4323c8d8f)) - - -### Features - -* add about page ([7465238](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/7465238b4e29b921079000c74dd9789e167bcd34)) -* add about window ([6448a1c](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/6448a1cb667137a07fa0206c4983ddfedd1dbc75)) -* add amount / unitCount to tokenize request ([0ee6499](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/0ee6499834a70c68eb0b6a458018dd0b048ac1fb)) -* add include project info param to search ([06f4566](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/06f45669f1297e77aa7f4a0995637d3677e39b10)) -* add sort order ([8faeba6](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/8faeba6a7c9331add9fa66e2ea91cea830bbb044)) -* add sort order ([042ac2f](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/042ac2f69cb37f4a04300164475e9fc9ec6a0070)) -* confirm detokanization modal with detailed view ([2cc8e36](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/2cc8e367d6f565f366f1b570d265302d51062db3)) -* confirm detokanization modal with detailed view ([bb2a99e](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/bb2a99e8b87d4ab58e8bb155a2ed7317f8d4ca18)) -* decrypt detok on ui ([883a21a](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/883a21a0e350ab372cfbf95223920ff7356bfc13)) -* detokenize modal ([cbf2421](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/cbf2421022563d75104e8feec0a27d2f6cb8dd39)) -* detokenize modal ([abb56c6](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/abb56c68f959d2590649e4a5bb3c4dd537b01edb)) -* detokenize modal ([9f94443](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/9f9444323d76aabfd5ab34763e5c1752cf110451)) -* display and confirm detokanization ([4ed4ff6](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/4ed4ff64dd3b7477b2305a0789e708a22c2b9466)) -* process detok file on ui ([89ac4ab](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/89ac4abded09eb25ce9b2025d1d4fad177717677)) -* process detok file on ui ([2243464](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/2243464992da5eadf6f8f6e6207ddb6f97a2dc21)) -* process detok on ui ([9d8fbb8](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/9d8fbb82493c5fe39c3cb2eefa9b8787fe11bad5)) -* rebranding for summit ([bd4e1f6](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/bd4e1f68f2eb815d97dacd56251a15418852f78b)) -* remove create token starts except wallet ([915f81c](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/915f81c9dea47800c3642b771c473f0bd3661b11)) -* remove download capability from untokenized ([d669632](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/d669632b6cca0946e0e8a2db20d17623a1bcc501)) -* remove marketplace identifiers ([2f58e10](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/2f58e105351bf9fe8bc9929f4917048ca9c01b4e)) -* remove prefix for tooltip ([9f259c3](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/9f259c320bfd22885a3bbb9cf96fdc23c6d212ef)) -* remove project search param ([27078e8](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/27078e8b7454fee23b5d487e0af19014498541d4)) -* update app name and icons ([e93a8af](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/e93a8afef26c9a0a4f782bf61fdc9574cb7d7b7c)) -* update colors ([a904d7c](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/a904d7c9bd74ba9738788f71cb6e038f76b9bb51)) -* update date formatting with hyphens ([406b2a2](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/406b2a2e2d83fc9d01c2a7fb7caa5e4883c2ce0d)) -* update fonts ([efe36c9](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/efe36c9f3b61ddcac5da6c5b884fcaad434451eb)) -* update fonts ([eef8053](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/eef8053e5eb18724dc9cc03d944d8e344061adac)) -* update fonts ([e9c4465](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/e9c446520763eb8a2f5fbb638c2bfb46dc592faa)) -* update fonts ([69ab72c](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/69ab72c6591c2665b3be3c6a48a38c6a247d5489)) -* update icons ([6b6a9c1](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/6b6a9c1176e629c7c285d7286716254437ec8dc8)) -* update tokens headers ([b786b1f](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/b786b1f9ed34a157332b1db6793893cfb7565fdc)) -* update untokenized headers ([c6741db](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/c6741dbc9ca333594e2ba951e6f6dbe656dee992)) - - - -## [1.0.10](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/compare/2bd4c07b695d8e9ca36d6264a26d037e53f6c287...1.0.10) (2022-10-28) - - -### Bug Fixes - -* fields not being populated ([b07f9f4](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/b07f9f467b4185b4504ec072ef8677c0a10c6950)) -* fix column not showing in ui table ([a1a3aa9](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/a1a3aa9064956093dd08eccd2c4ff91199c711fd)) -* fix mock requests for untokenized data ([3f9f5e4](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/3f9f5e43cd90cec84ec80cd7acabe352904ea4f1)) -* styling for data table ([344818f](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/344818f6a3c791f8d623bf15b74617ef2c3c9bf9)) -* vintage not being displayed ([0388b74](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/0388b746e2c353bcb30b330f58d66916a821ff16)) - - -### Features - -* add connect/import modal ([7cc8038](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/7cc8038b031de6b5431f815ec7de12781eecf8a8)) -* add create token form ([621030f](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/621030fd6555eecedfb29006215bcbb655ead60d)) -* add create token modal ([6cc50ea](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/6cc50eae791d1105dcd9a40089ec09711f9cc84e)) -* add create tokens page ([fa1582a](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/fa1582a0770eaafe46c8204329a0b282aa0a9c47)) -* add create tokens page ([2bd4c07](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/2bd4c07b695d8e9ca36d6264a26d037e53f6c287)) -* add import only in electron app ([967166e](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/967166e963d26e2589b2fdfa3d140399af46b8d5)) -* add pagination ([9e90055](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/9e90055964b4954f6307c52a8ee3bbb00e6f70fb)) -* add pagination ([4e60f32](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/4e60f322e23186e038354c12d98de27152201bb7)) -* add search query to ui tokens and untokenized ([45c189b](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/45c189b37d88d0319cc977e6c3f00317b4292fab)) -* add search query to ui tokens and untokenized ([7e1d9ba](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/7e1d9baf563d007e7e0da466994f8212c2c64e72)) -* add token creation pending modal ([99f0ff0](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/99f0ff0f8f7f13dd3da3b3327f69225213d8a00d)) -* add wallet holder ([35e6db8](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/35e6db8ca75d17849efde1ae5199a8f50c02b428)) -* added disconnect and server info ([d3314be](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/d3314beb3e7b32d4a8412679da08789aa2b33dba)) -* added homeOrg ([038a76c](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/038a76cd234cd72d95df493f618b6a07b746480d)) -* added import info ([a68ec4b](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/a68ec4ba68b200f59cded982dd5a8884b197c646)) -* build electron app ([ac35ad6](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/ac35ad612c0d4af0a1026f356bfe1958768b9dbc)) -* display connected if headers org exists ([2c04eb5](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/2c04eb5cdbf14a8fcebc2b4de6e1ba8a8c90b9c8)) -* display connected if headers org exists ([a1912e6](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/a1912e662ef01647290ed75fb63803ebf53d6d6c)) -* display connected if headers org exists ([4330a04](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/4330a04f2c49943d18a6d169e28df9950bce061c)) -* enable untokenized / tokens pagination on UI ([ab86a35](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/ab86a3585e5523f490080f7851687e6e49a8ad9d)) -* hide search and filters ([6068005](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/606800536327bd36d7bc8811dfb4e91c1b360455)) -* hide search and filters ([f2b2324](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/f2b23245c7560e7b03c52a6385a0ed35b93f9ec6)) -* import org ([14bb7f2](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/14bb7f2889429ec632453385520b79834c156cd0)) -* infer project name and display in table ([70a383a](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/70a383a81883063067ca68f3cfbd7304e32fde52)) -* make login button look the same as language selector ([ed80186](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/ed80186a784faed78c4b33177e92b43b77cdd996)) -* replace tabel 3 dots menu with button ([d738a6c](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/d738a6cc823101ac8c80d17e399046b593f78808)) -* show tokens and untokenized units from api ([9937029](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/9937029e54658b037e3380ddcd959d35471f61a1)) -* sign in/out ([5603425](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/560342549422375a8fb1813d5bc3f66040e39f75)) -* update hosted API_HOST in constants ([00353eb](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/00353eb4d24f88829fc1854e9ac3c6ab2a17fcad)) -* update hosted API_HOST in constants ([d6651d9](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/d6651d9df3b34b52046cf320cff6c7e8b2c8d1e9)) -* update hosted API_HOST in constants ([a977c6b](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/commit/a977c6b38122fb2f47513b0efe8c9715492ef2a5)) - - - diff --git a/LICENSE b/LICENSE deleted file mode 100644 index 7e8bb6b..0000000 --- a/LICENSE +++ /dev/null @@ -1,201 +0,0 @@ - Apache License - Version 2.0, January 2004 - http://www.apache.org/licenses/ - - 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. - - 2. Grant of Copyright License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - copyright license to reproduce, prepare Derivative Works of, - publicly display, publicly perform, sublicense, and distribute the - Work and such Derivative Works in Source or Object form. - - 3. Grant of Patent License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - (except as stated in this section) patent license to make, have made, - use, offer to sell, sell, import, and otherwise transfer the Work, - where such license applies only to those patent claims licensable - by such Contributor that are necessarily infringed by their - Contribution(s) alone or by combination of their Contribution(s) - with the Work to which such Contribution(s) was submitted. If You - institute patent litigation against any entity (including a - cross-claim or counterclaim in a lawsuit) alleging that the Work - or a Contribution incorporated within the Work constitutes direct - or contributory patent infringement, then any patent licenses - granted to You under this License for that Work shall terminate - as of the date such litigation is filed. - - 4. Redistribution. You may reproduce and distribute copies of the - Work or Derivative Works thereof in any medium, with or without - 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. - - 5. Submission of Contributions. Unless You explicitly state otherwise, - any Contribution intentionally submitted for inclusion in the Work - by You to the Licensor shall be under the terms and conditions of - this License, without any additional terms or conditions. - Notwithstanding the above, nothing herein shall supersede or modify - the terms of any separate license agreement you may have executed - with Licensor regarding such Contributions. - - 6. Trademarks. This License does not grant permission to use the trade - names, trademarks, service marks, or product names of the Licensor, - except as required for reasonable and customary use in describing the - origin of the Work and reproducing the content of the NOTICE file. - - 7. Disclaimer of Warranty. Unless required by applicable law or - agreed to in writing, Licensor provides the Work (and each - Contributor provides its Contributions) on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or - implied, including, without limitation, any warranties or conditions - of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A - PARTICULAR PURPOSE. You are solely responsible for determining the - appropriateness of using or redistributing the Work and assume any - risks associated with Your exercise of permissions under this License. - - 8. Limitation of Liability. In no event and under no legal theory, - whether in tort (including negligence), contract, or otherwise, - unless required by applicable law (such as deliberate and grossly - negligent acts) or agreed to in writing, shall any Contributor be - liable to You for damages, including any direct, indirect, special, - incidental, or consequential damages of any character arising as a - result of this License or out of the use or inability to use the - Work (including but not limited to damages for loss of goodwill, - work stoppage, computer failure or malfunction, or any and all - other commercial damages or losses), even if such Contributor - has been advised of the possibility of such damages. - - 9. Accepting Warranty or Additional Liability. While redistributing - the Work or Derivative Works thereof, You may choose to offer, - and charge a fee for, acceptance of support, warranty, indemnity, - or other liability obligations and/or rights consistent with this - License. However, in accepting such obligations, You may act only - on Your own behalf and on Your sole responsibility, not on behalf - of any other Contributor, and only if You agree to indemnify, - defend, and hold each Contributor harmless for any liability - incurred by, or claims asserted against, such Contributor by reason - of your accepting any such warranty or additional liability. - - END OF TERMS AND CONDITIONS - - APPENDIX: How to apply the Apache License to your work. - - To apply the Apache License to your work, attach the following - boilerplate notice, with the fields enclosed by brackets "[]" - replaced with your own identifying information. (Don't include - the brackets!) The text should be enclosed in the appropriate - comment syntax for the file format. We also recommend that a - file or class name and description of purpose be included on the - same "printed page" as the copyright notice for easier - identification within third-party archives. - - Copyright 2024 Chia Network Inc. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. diff --git a/Procfile b/Procfile deleted file mode 100644 index 6386a1e..0000000 --- a/Procfile +++ /dev/null @@ -1,2 +0,0 @@ -react: npm run react-start -electron: npm run electron-start \ No newline at end of file diff --git a/README.MD b/README.MD deleted file mode 100644 index 6b23fdb..0000000 --- a/README.MD +++ /dev/null @@ -1,124 +0,0 @@ -# Climate Tokenization Engine User Interface - -User interface for the [Climate Tokenization Engine](https://github.com/Chia-Network/Climate-Tokenization-Engine). Intended to be run as a desktop application and connect to the [Climate Tokenization Engine](https://github.com/Chia-Network/Climate-Tokenization-Engine) API running either locally or remotely. - -## Related Projects - -* [Chia Blockchain](https://github.com/Chia-Network/chia-blockchain) -* [Climate Tokenization Engine](https://github.com/Chia-Network/Climate-Tokenization-Engine) -* [Climate Explorer](https://github.com/Chia-Network/climate-token-driver) -* [Chia Climate Tokenization](https://github.com/Chia-Network/climate-token-driver) -* [Climate Explorer UI](https://github.com/Chia-Network/climate-explorer-ui) -* [Climate Wallet](https://github.com/Chia-Network/Climate-Wallet) -* [Climate Action Data Trust](https://github.com/Chia-Network/cadt) -* [Climate Action Data Trust UI](https://github.com/Chia-Network/cadt-ui) - -## Installation - -Packages are available for Windows, Mac, and Debian-based Linux distribution on the [releases](https://github.com/Chia-Network/Climate-Tokenization-Engine-UI/releases) page. - -### Using APT on Debian-based Linux Distros (Ubuntu, Mint, etc) - -The Climate Tokenization Engine UI can be installed with `apt`. - -1. Start by updating apt and allowing repository download over HTTPS: - -``` -sudo apt-get update -sudo apt-get install ca-certificates curl gnupg -``` - -2. Add Chia's official GPG Key (if you have installed Chia with `apt`, you'll have this key already and will get a message about overwriting the existing key, which is safe to do): - -``` -curl -sL https://repo.chia.net/FD39E6D3.pubkey.asc | sudo gpg --dearmor -o /usr/share/keyrings/chia.gpg -``` - -3. Use the following command to setup the repository. - -``` -echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/chia.gpg] https://repo.chia.net/climate-tokenization/debian/ stable main" | sudo tee /etc/apt/sources.list.d/climate-tokenization.list > /dev/null -``` - -4. Install the Climate Tokenization Engine UI - -``` -sudo apt-get update -sudo apt-get install climate-tokenization-engine-ui -``` - -5. Run the Climate Explorer UI from your OS launcher or at the command line with `climate-tokenization-engine-ui`. - -## Developer Guide - -### Installation From Source - -``` -npm install -g react-scripts -git clone git@github.com:Chia-Network/Climate-Portal-UI -cd Climate-Portal-Ui -nvm install 18.16.0 -nvm use 18.16.0 -npm install foreman -g -npm install -g husky -npm install -g prettier -npm install -g lint-staged -npm install -g git-authors-cli -npm set-script prepare "husky install" -npm run prepare - -// If you are on linux or mac run -chmod ug+x .husky/* -chmod ug+x .git/hooks/* - -npm run start -``` - -#### Prerequisites - -You'll need: - -- Git -- [nvm](https://github.com/nvm-sh/nvm) - -This app uses `nvm` to align node versions across development, CI and production. If you're working on Windows you should consider [nvm-windows](https://github.com/coreybutler/nvm-windows) - -### Contributing - -Upon your first commit, you will automatically be added to the package.json file as a contributor. - -#### Commiting - -[Signed commits](https://docs.github.com/en/authentication/managing-commit-signature-verification/signing-commits) are required. - -This repo uses a commit convention. A typical commit message might read: - -``` - fix: correct home screen layout -``` - -The first part of this is the commit "type". The most common types are "feat" for new features, and "fix" for bugfixes. Using these commit types helps us correctly manage our version numbers and changelogs. Since our release process calculates new version numbers from our commits it is very important to get this right. - -- `feat` is for introducing a new feature -- `fix` is for bug fixes -- `docs` for documentation only changes -- `style` is for code formatting only -- `refactor` is for changes to code which should not be detectable by users or testers -- `perf` is for a code change that improves performance -- `test` is for changes which only touch test files or related tooling -- `build` is for changes which only touch our develop/release tools -- `ci` is for changes to the continuous integration files and scripts -- `chore` is for changes that don't modify code, like a version bump -- `revert` is for reverting a previous commit - -After the type and scope there should be a colon. - -The "subject" of the commit follows. It should be a short indication of the change. The commit convention prefers that this is written in the present-imperative tense. - -#### Commit linting - -Each time you commit the message will be checked against these standards in a pre-commit hook. Additionally all the commits in a PR branch will be linted before it can be merged to master. - -#### Branch Layout - -All pull requests should be made against the `develop` branch. Commits to the `main` branch will trigger a release, so the `main` branch is always the code in the latest release. diff --git a/README.md b/README.md new file mode 100644 index 0000000..901bbe3 --- /dev/null +++ b/README.md @@ -0,0 +1,90 @@ +# Carbon UI Template + +This repo contains the base architecture for a robust client rendered single page application built on React JS and typescript. +Applications built on this template can be packaged into electron applications. Other base technologies used are +Vite JS, Redux Tool Kit, RTKquery and Flowbite-React. The application has a left navigation bar listing pages to be +navigated to. + +### General +The app resides almost entirely in src/renderer. main.ts exists only to start the electron process and open a window +requesting the site from the vite server. Exports within the renderer directory are exported from the directory in +which they reside via index.ts files up to the respective top level folder in the renderer directory. Imports are handled +by importing from @/top-level-dir. for instance to import foo which resides in directory components/fuz/baz, merely import +from @/components. When exporting via the established pattern, there is no need for relative imports. + +The left navigation bar's buttons are hooked up to the react-router which handles page navigation. the router resides +in routes/AppNavigator.tsx and the page paths exist in route-constants.ts + +### API Calls +API calls are handled via RTKquery, whose base configuration resides in /api/cadt/v1/index.js. It is recommended to +retain this directory structure and configuration as it allows for dynamic host configuration which is already baked +into this template. The 'cadt' directory can be renamed to whatever is appropriate. +endpoints are defined in the /v1 directory alongside index.ts. + +The endpoints define hooks which mutate or query their resources. There are 2 illustrative examples of how to +define RTKQuery endpoints in the /v1 directory. Note that when exporting a hook from an endpoint, the name to export +is prepended with use, and appended with either query or mutation. To export resource query hook foo, the export name +will need to be useFooQuery. For mutation hook foo it will need to be useFooMutation. + +projects.api.ts can be deleted as it is only use in other sample code that will be deleted, but it is highly +recommended that system.api.ts be kept and the resource url's changed to the /health equivalent for the backend the +app will be connected to. the application uses these system hooks to determine if the backend is available or not. +removing it will require refactoring, and it will likely end-up being reimplemented over the course of development. + +### Components +Please see the next section on theming details and implementation + +This UI is built on Flowbite-React tailwind CSS components. Flowbite component theming is handled by importing the +flowbite components into /components/proxy, then re-exporting the components with a flowbite theme applied. +If a component needs to be themed, the theme should be declared and set in the proxy component. Page and +component layouts are achieved via tailwind CSS (with few exceptions). It is recommended to keep it that way. The style +prop is only set in circumstances when tailwind classes would not suffice. Flowbite components should only be imported +via @/components. Importing directly from flowbite will introduce inconsistent theming since the theming is set in the +/components/proxy components. Note that there is a theme selector component which toggles between the tailwind defined +light mode and dark mode provided by flowbite. + +Forms are handled with formik. the forms themselves can be found in components/blocks/forms and prebuild form components +can be found in components/form. + +### Theme +Preface - Flowbite-React Documentation: https://flowbite-react.com/docs/components/accordion (See component list in left nav) + +The Flowbite component library is built on tailwind css classes, but in most cases the components will not react to a +class or classname being set. To customize the appearance of a flowbite component, a theme will need to be set on the +component (see the next section on where to do this in the codebase). In the flowbite documentation at the bottom of each component page the theme +that defines the component is provided. The theme is an object with each prop representing a sub-component of the component to +style and the value being a string of the tailwind classes that define the component. When styling a component the entire tailwind string +should be copied, and generally only colors should be changed. At the time of writing any color prefaced with dark: should +NOT be changed. Additionally, colors should only be changed if they're set from the global custom colors. More in the next +paragraph. An example theme can be found in components/proxy/sidebar.tsx + +Global theme colors are provided via an optional colors.json file that the app attempts to fetch. if it exists, the colors +are set via global css properties defined in App.css. To define new colors, the new color must be defined in: +- App.css +- tailwind.config.js +- colors.json + +From there the color CSS property should be declared in the components that need to apply it. + +### Patterns +The sample patterns in this application are what allow it to be so robust. There are 2 general patterns employed, one +pattern for displaying data and another pattern for initiating backend operations (or anything else). +The pattern for displaying data has 3 general steps: +- the data is fetched with RTKquery hooks at the page level, and all display and organization options are set +- the data and options are passed to a data organization component which defines the structure and configuration +of how to display the data +- the structure, data, and options are passed to a common base component responsible for rendering the data + +This pattern is exemplified by pages/TokensPage.tsx, components/blocks/tables/ProjectsListTable.tsx, and +components/layout/Datatable.tsx. TokensPage.tsx fetches the data via the RTKQuery hooks, then passes the data, +filters, and sorts to ProjectsListTable.tsx, which defines the structure (columns) of the table and passes the structure and data +down to the generalized DataTable.tsx. The project table and data table are directly controlled at the page level and +make no assumptions about the data or how to display it. The data table can be used in any capacity for any table and +any data set. + +For all other operations that don't involve fetching and sorting data, a pattern of self-contained components which +pull date directly from the api hooks and are parent component-agnostic is used. Prop drilling is explicitly avoided. + +For deep-linking components and state, the hooks/ directory contains hooks for manipulating query params and url hashes. +these hooks operate much like the useState hook with additional arguments. pages/TokensPage.tsx has examples for +how to use these hooks. \ No newline at end of file diff --git a/check_node_version.js b/check_node_version.js deleted file mode 100644 index 64a8522..0000000 --- a/check_node_version.js +++ /dev/null @@ -1,8 +0,0 @@ -const semver = require('semver'); -const { engines } = require('./package'); -const version = engines.node; -if (!semver.satisfies(process.version, version)) { - throw new Error( - `The current node version${process.version} does not satisfy the required version ${version} .`, - ); -} diff --git a/commitlint.config.cjs b/commitlint.config.cjs new file mode 100644 index 0000000..d46a3a9 --- /dev/null +++ b/commitlint.config.cjs @@ -0,0 +1,6 @@ +module.exports = { + extends: ['@commitlint/config-conventional'], + rules: { + 'scope-case': [2, 'always', 'upper-case'], + }, + }; \ No newline at end of file diff --git a/commitlint.config.js b/commitlint.config.js deleted file mode 100644 index 3515b87..0000000 --- a/commitlint.config.js +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = { - extends: ['@commitlint/config-conventional'], - rules: { - 'scope-case': [2, 'always', 'upper-case'], - }, -}; diff --git a/docs/contributing.md b/docs/contributing.md deleted file mode 100644 index 2453aaf..0000000 --- a/docs/contributing.md +++ /dev/null @@ -1,537 +0,0 @@ -This SPA React Architecture that this project adopted aims for rapid development and contribution to the project in a predictable way. While there are a lot of competing mindsets in how a react application should be architected, this architecture has proven to be robust and allow for rapid development across a variety of use cases. - -## Key Concepts: - -- Organizes the project in predictable and semantically correct way. -- Provides easy access to Global App State -- Includes Theme Engine -- Supports multiple languages to be hot swapped via its language engine - -## Application Structure - -The top level application structure is as follows: - -- components - this is where the custom component library should live -- constants - constants files shall be exported from this directory -- mocks - json files that returned mocked responses to endpoints -- navigation - this is where the app router should reside -- pages - the application pages, each page should get its own folder -- store - home to actions/reducers/initial state -- translations - includes the translation files for the app -- utils - any application utilities and helpers -- theme.js - the theme file that is used across the app - -## Components - -The components folder holds the reusable components for the application. While the structure in this folder is fluid. Its been found that the following folders are generally useful for most projects: - -#### Component Sub-Folders - -- form - holds form related components -- layout - layout based components example: grids, Spacers etc.. -- typography - H1, H2, H3 and any other typography that sets up the standard font, sizes line-heights etc, for the app. All typography for the app should be defined in this folder. Not text should appear in the app that doesnt use a component defined here. -- icons - library of SVG icons that are used in the app. Please dont import SVG files directly into the app, instead pull the SVG into a component. This allows props such as width, height, color that can control the SVG. -- blocks - Application specific reusable components, example: AppHeader, AppFooter, DataTable, Footer etc… - -Feel free to add other subfolders if necessary - -## Themes and styling - -We use the styled-components library to assign css-like styles to components. Generally CSS should only be written within the component folder to build our components. We try to keep our ‘Page Views’ in the pages folder css-free and only compose these components within the page view. - -The theme itself uses the Material color system defined by google. More about it can be read here. https://material.io/design/color/the-color-system.html#tools-for-picking-colors - -The theme file supports both a light theme and a dark theme. - -The color system is as follows: - -``` -interface ColorSystem { - // The color displayed most frequently across the app screens - primary: string; - primaryVarient: string; - // Secondary color provides more ways to accent and distinguish the app - secondary: string; - secondaryVarient: string; - // appears behind scrollable content - background: string; - // affect surfaces of componennts such as cards sheets and menus - surface: string; - // indicates errors in components - error: string; - errorVarient: string; - //"On" colors - // App surfaces use colors from specific categories in your color palette, - // such as a primary color. Whenever elements, such as text or icons, appear in - // front of those surfaces, those elements should use colors designed to be clear - // and legible against the colors behind them. - // - // This category of colors is called "on" colors, referring to the fact that - // they color elements that appear "on" top of surfaces that use the following - // colors: a primary color, secondary color, surface color, background color, - // or error color. When a color appears "on" top of a primary color, it's called - // an "on primary color." They are labelled using the original color category - //(such as primary color) with the prefix "on." - // - // "On" colors are primarily applied to text, iconography, and strokes. - // Sometimes, they are applied to surfaces. - onPrimary: string; - onSecondary: string; - onBackground: string; - onSurface: string; - onError: string; -} -``` - -To apply a theme to a component you import the withTheme HOC from the styled-components module - -``` -import {withTheme} from 'styled-components'; -``` - -Once this HOC is applied to a component it injects the theme prop that can be accessed. - -#### Determining if light or dark theme is used - -The theme selected is held in the redux ‘App Store' under the key 'theme’. - -You can use a the react hook `useSelector` to retrieve it. In any react component use the following to get the theme selection: - -``` -const {theme} = useSelector(state => state); -``` - -#### Putting it all together - -Together with the `withTheme` HOC and the selected theme, you can build components that are follow the color system and instantly display the theme that is selected. The example is a simple H1 component that does this: - -``` -const Text = styled('h1')` - color: ${props => props.theme.colors[props.selectedTheme].onSurface}; - font-size: 1.5rem; - font-family: ${props => props.theme.typography.primary}; - font-weight: 400; - line-height: 1.334; - letter-spacing: 0em; -`; - -const H1 = withTheme(({children, color}) => { - const appStore = useSelector(state => state); - return ( - - {children} - - ); -}); - -export {H1}; -``` - -## App Navigation - -The app navigation folder exports the AppRouter that routes pages for the app. Because the AppRouter is a top level component in which all the pages are mounted within, A secondary use for the App router is to mount global components that need to appear on every page. Examples include Header components or modals that appear above the page when activated. - -Here is an example component that shows all this: - -``` -const AppNavigator = () => { - const {showProgressOverlay} = useSelector(store => store.app); - return ( - - { /* The AppHeader needs to show above every page */ } - - - { /* Conditionally show the activity indicator component above all pages - if its activated in the store. */ - showProgressOverlay && - } - { /* mount all the pages in the router below */ } - }> - - - - - - - ); -}; - -export {AppNavigator}; -``` - -## Store and Actions - -We use unidirectional data flow utilizing a modern ‘Redux’ design to control app state. Redux was chosen because it is one of the most known state systems for developers. The modern redux hooks to create a easy to use state system. - -Unlike older iterations of Redux that require concepts of “smart components/dumb components” and prop drilling state. We assume that any component can be smart. A smart component is simply a component that can pull data from the store. - -This can be done using a simple `useSelector` hook. - -``` -import {useSelector} from 'react-redux'; - -const MyComponent= ({children}) => { - const appStore = useSelector(state => state); - - return ( -
- {appStore.bar} -
- ); -}); - -export {MyComponent}; -``` - -Also dispatching an action is simple to, there are 2 parts to dispatching an action - -1. import the useDispatch hook -2. import the action to be dispatched - -``` -import {useDispatch} from 'react-redux'; -import {setButtonAsClicked} from '../store/actions/app'; - -const MyComponent= ({children}) => { - const dispatch = useDispatch(); - - const handleButtonClick = () => { - dispatch(setButtonAsClicked); - } - - return ( - - - {options && - options.length > 0 && - options.map((option, index) => ( - { - item ? option.action(item) : option.action(); - handleClose(); - }} - key={index}> - {option.label} - - ))} - - - ); -}; - -export { BasicMenu }; diff --git a/src/components/blocks/Card.js b/src/components/blocks/Card.js deleted file mode 100644 index 72b79a1..0000000 --- a/src/components/blocks/Card.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import styled, { withTheme } from 'styled-components'; -import { useSelector } from 'react-redux'; - -const CardContainer = styled('div')` - border-radius: 0.25rem; - padding: 1rem; - margin: 0.75rem; - box-sizing: border-box; - max-height: ${props => props.maxHeight}; - overflow: auto; - overflow-x: scroll; - height: 100%; -`; - -const Card = withTheme(({ children, maxHeight = '100%' }) => { - const appStore = useSelector(state => state); - - return ( - - {children} - - ); -}); - -export { Card }; diff --git a/src/components/blocks/ComponentRepeater.js b/src/components/blocks/ComponentRepeater.js deleted file mode 100644 index 585acfb..0000000 --- a/src/components/blocks/ComponentRepeater.js +++ /dev/null @@ -1,103 +0,0 @@ -import React, { useCallback, useEffect, useMemo } from 'react'; -import styled from 'styled-components'; -import { v4 as generateUUID } from '@lukeed/uuid'; -import _ from 'lodash'; - -import { Body } from '../typography'; -import { FormattedMessage } from 'react-intl'; -import { ToolTipContainer } from '.'; -import { DescriptionIcon } from '..'; - -const StyledRepeatedComponentContainer = styled('div')` - display: flex; - flex-direction: row; - align-items: center; - gap: 10px; - margin: 20px 0; - ${props => !props.disabled && `cursor: pointer;`}; -`; - -const ComponentRepeater = ({ - component, - values, - updateValues, - initialValue, - addIcon, - removeIcon, - useToolTip, - maxRepetitions = 2, - minRepetitions = 0, -}) => { - const addNewInstance = useCallback(() => { - if (values.length < maxRepetitions) { - updateValues( - values && values.length - ? [..._.cloneDeep(values), _.cloneDeep(initialValue)] - : [_.cloneDeep(initialValue)], - ); - } - }, [values]); - - useEffect(() => { - const currentNumberOfRepetitions = values.length; - if (currentNumberOfRepetitions < minRepetitions) { - addNewInstance(); - } - }, [values]); - - const allInstances = useMemo(() => { - return values.map((value, index) => { - const onChange = value => { - const newValues = [...values]; - newValues[index] = _.cloneDeep(value); - updateValues(newValues); - }; - const onRemove = () => { - const newValues = [...values]; - newValues.splice(index, 1); - updateValues(newValues); - }; - - if (!value?.id && !value?.tempId) { - value.tempId = generateUUID(); - } - const key = value?.id || value.tempId; - - return ( - - {component && React.cloneElement(component, { value, onChange })} - {removeIcon &&
{removeIcon}
} - - ); - }); - }, [values]); - - return ( -
- {addIcon && values.length < maxRepetitions && ( - - {addIcon} - - - {useToolTip && ( - - - - )} - - - )} - {addIcon && values.length >= maxRepetitions && ( - - {React.cloneElement(addIcon, { fill: '#d9d9d9' })} - - - - - )} - {allInstances} -
- ); -}; - -export { ComponentRepeater }; diff --git a/src/components/blocks/Connect.js b/src/components/blocks/Connect.js deleted file mode 100644 index b85f1c2..0000000 --- a/src/components/blocks/Connect.js +++ /dev/null @@ -1,247 +0,0 @@ -import React, { useEffect } from 'react'; -import { useCallback } from 'react'; -import { useState } from 'react'; -import { useDispatch, useSelector } from 'react-redux'; -import { FormattedMessage, useIntl } from 'react-intl'; -import styled, { withTheme } from 'styled-components'; -import { Modal } from '.'; -import { - Body, - InputContainer, - InputSizeEnum, - InputVariantEnum, - ModalFormContainerStyle, - StandardInput, - StyledFieldContainer, - StyledLabelContainer, - Tab, - TabPanel, - Tabs, -} from '..'; -import { importHomeOrg, signIn } from '../../store/actions/appActions'; -import { validateUrl } from '../../utils/urlUtils'; - -const ConnectContainer = styled('div')` - background: none; - cursor: pointer; - align-items: center; - - color: ${props => props.theme.colors.default.primaryDark}; - - :hover { - color: ${props => props.theme.colors.default.primary}; - } - - text-transform: uppercase; - font-family: ${props => props.theme.typography.primary.semiBold}; -`; - -const StyledContainer = styled('div')` - height: 12.5rem; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -`; - -const Connect = withTheme(({ openModal = false, onClose, isHeader = true }) => { - const intl = useIntl(); - const dispatch = useDispatch(); - const [isConnectModalOpen, setIsConnectModalOpen] = useState(openModal); - const { homeOrgUid } = useSelector(state => state); - const [orgUid, setOrgUid] = useState(homeOrgUid || ''); - const [tabValue, setTabValue] = useState(0); - const [apiKey, setApiKey] = useState(null); - const [serverAddress, setServerAddress] = useState(null); - - const handleTabChange = useCallback( - (event, newValue) => { - setTabValue(newValue); - }, - [setTabValue], - ); - - const connectToHomeOrg = () => { - if (apiKey && serverAddress && validateUrl(serverAddress)) { - dispatch( - signIn({ - insertedApiKey: apiKey, - insertedServerAddress: serverAddress, - }), - ); - setServerAddress(null); - setApiKey(null); - } - dispatch(importHomeOrg(orgUid)); - setIsConnectModalOpen(false); - }; - - useEffect(() => { - setOrgUid(homeOrgUid); - }, [homeOrgUid]); - - useEffect(() => { - // Function to handle the message event - const handleMessage = event => { - if (event.origin !== window.location.origin) { - return; - } - console.log('Received message:', event.data); - if ( - event?.data?.serverAddress && - validateUrl(event?.data?.serverAddress) - ) { - dispatch( - signIn({ - apiKey: event?.data?.apiKey, - serverAddress: event?.data?.serverAddress, - }), - ); - setServerAddress(null); - setApiKey(null); - setIsConnectModalOpen(false); - dispatch(importHomeOrg(orgUid)); - } - }; - - // Add the event listener - window.addEventListener('message', handleMessage, false); - - // Return a function that will be called when the component unmounts - return () => { - // Remove the event listener - window.removeEventListener('message', handleMessage, false); - }; - }, []); - - return ( - <> - {isHeader && window.self === window.top && ( - setIsConnectModalOpen(true)}> - {!homeOrgUid && } - {homeOrgUid && } - - )} - - {isConnectModalOpen && ( - - - - - } - onClose={() => (onClose ? onClose() : setIsConnectModalOpen(false))} - body={ - - - - - - - * - - - - setOrgUid(value)} - placeholderText="Org Uid" - /> - - - - - - - - - - *{' '} - - - - setServerAddress(value)} - placeholderText="http://0.0.0.0:31310" - /> - - {(serverAddress === null || - validateUrl(serverAddress) === false) && ( - - {intl.formatMessage({ - id: 'add-valid-server-address', - })} - - )} - - - - - * - - - - setApiKey(value)} - placeholderText="xxxxxxx-xxxxxx-xxxxxx" - /> - - {apiKey === null && ( - - {intl.formatMessage({ - id: 'add-valid-api-key', - })} - - )} - - - - - * - - - - setOrgUid(value)} - placeholderText="Org Uid" - /> - - - - - - } - /> - )} - - ); -}); - -export { Connect }; diff --git a/src/components/blocks/LocalMessage.js b/src/components/blocks/LocalMessage.js deleted file mode 100644 index e8f6803..0000000 --- a/src/components/blocks/LocalMessage.js +++ /dev/null @@ -1,56 +0,0 @@ -import React, { useRef } from 'react'; -import { useIntl } from 'react-intl'; - -import { NotificationCard, Alert } from '../../components'; - -const LocalMessageTypeEnum = { - error: 'error', - success: 'success', -}; - -const LocalMessage = ({ type, msg, onClose }) => { - const intl = useIntl(); - const ref = useRef(null); - - const handleOnClose = () => { - if (onClose) { - onClose(); - } - if (ref && ref.current) { - ref.current.remove(); - } - }; - - return ( - - {type === LocalMessageTypeEnum.error && ( - - - - )} - {type === LocalMessageTypeEnum.success && ( - - - - )} - - ); -}; - -export { LocalMessage, LocalMessageTypeEnum }; diff --git a/src/components/blocks/LocaleChangeListener.js b/src/components/blocks/LocaleChangeListener.js deleted file mode 100644 index b59f601..0000000 --- a/src/components/blocks/LocaleChangeListener.js +++ /dev/null @@ -1,29 +0,0 @@ -import React, { useEffect } from 'react'; -import { useDispatch } from 'react-redux'; -import { setLocale } from '../../store/actions/appActions'; - -const LocaleChangeListener = () => { - const dispatch = useDispatch(); - - useEffect(() => { - // Function to handle the message event - const handleMessage = event => { - if (event?.data?.changeLocale) { - dispatch(setLocale(event?.data?.changeLocale)); - } - }; - - // Add the event listener - window.addEventListener('message', handleMessage, false); - - // Return a function that will be called when the component unmounts - return () => { - // Remove the event listener - window.removeEventListener('message', handleMessage, false); - }; - }, []); - - return <>; -}; - -export { LocaleChangeListener }; diff --git a/src/components/blocks/LocaleSwitcher.js b/src/components/blocks/LocaleSwitcher.js deleted file mode 100644 index 47fa67e..0000000 --- a/src/components/blocks/LocaleSwitcher.js +++ /dev/null @@ -1,57 +0,0 @@ -import React from 'react'; -import { useDispatch, useSelector } from 'react-redux'; -import { Select, MenuItem } from '@mui/material'; -import { LANGUAGE_CODES } from '../../translations'; -import { setLocale } from '../../store/actions/appActions'; -import styled, { withTheme } from 'styled-components'; - -const Container = styled('div')` - display: flex; - justify-content: flex-end; - align-items: center; - - .MuiSelect-root, - .MuiSvgIcon-root, - .MuiSelect-select { - color: ${props => props.theme.colors.default.primaryDark}; - font-family: ${props => props.theme.typography.primary.semiBold}; - } - - .MuiSelect-select { - color: ${props => props.theme.colors.default.primary}}; - } - - .MuiSelect-root:hover, - .MuiSvgIcon-root:hover, - .MuiSelect-select:hover { - color: ${props => props.theme.colors.default.primary}; - } - - .MuiOutlinedInput-notchedOutline { - border: 0 !important; - outline: 0; - } -`; - -const LocaleSwitcher = withTheme(() => { - const dispatch = useDispatch(); - const appStore = useSelector(state => state); - - const handleLocaleChange = event => { - dispatch(setLocale(event.target.value)); - }; - - return ( - - - - ); -}); - -export { LocaleSwitcher }; diff --git a/src/components/blocks/Message.js b/src/components/blocks/Message.js deleted file mode 100644 index 5d1e041..0000000 --- a/src/components/blocks/Message.js +++ /dev/null @@ -1,51 +0,0 @@ -import React from 'react'; -import { useDispatch } from 'react-redux'; -import { useIntl } from 'react-intl'; - -import { - setNotificationMessage, - NotificationMessageTypeEnum, -} from '../../store/actions/appActions'; - -import { NotificationCard, Alert } from '../../components'; - -const Message = ({ type, id }) => { - const dispatch = useDispatch(); - const intl = useIntl(); - - const setNotificationMessageToNull = () => - dispatch(setNotificationMessage(null)); - - return ( - <> - {type === NotificationMessageTypeEnum.error && ( - - - - )} - {type === NotificationMessageTypeEnum.success && ( - - - - )} - - ); -}; - -export { Message }; diff --git a/src/components/blocks/Modal.js b/src/components/blocks/Modal.js deleted file mode 100644 index 7784c50..0000000 --- a/src/components/blocks/Modal.js +++ /dev/null @@ -1,234 +0,0 @@ -import React from 'react'; -import styled, { withTheme } from 'styled-components'; -import { useIntl } from 'react-intl'; -import { - SuccessIcon, - InfoIcon, - ErrorIcon, - WarningIcon, - Body, - PrimaryButton, - CloseIcon, -} from '..'; - -const MaskContainer = styled('div')` - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - z-index: 100; - background-color: rgba(0, 0, 0, 0.25); - display: flex; - justify-content: center; - align-items: center; -`; - -const ModalContainer = styled('div')` - background-color: ${props => props.theme.colors.default.onButton}; - box-sizing: border-box; - display: flex; - flex-direction: column; - box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05), - 0px 6px 16px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12); - - ${props => { - if (props.left && props.top && props.width && props.height) { - return ` - position: absolute; - left: ${props.left}px; - top: ${props.top}px; - width: ${props.width}px; - height: ${props.height}px; - `; - } - if (props.modalType === modalTypeEnum.basic) { - return ` - height: fit-content; - max-height: 80%; - `; - } - if ( - props.modalType === modalTypeEnum.information || - props.modalType === modalTypeEnum.confirmation - ) { - return `height: fit-content;`; - } - }} -`; - -const ButtonsContainer = styled('div')` - box-sizing: border-box; - width: 100%; - display: flex; - flex-direction: row; - align-items: center; - justify-content: flex-end; - gap: 0.5rem; - flex-shrink: 0; - ${props => { - if (props.modalType === modalTypeEnum.basic) { - return `border-top: 1px solid #e5e5e5; padding-right: 1rem; height: 3.25rem;`; - } - if ( - props.modalType === modalTypeEnum.information || - props.modalType === modalTypeEnum.confirmation - ) { - return `padding: 0px 2rem 24px 0px;`; - } - }}; -`; - -const ContentContainer = styled('div')` - box-sizing: border-box; - overflow: auto; - display: flex; - flex-direction: column; - flex-grow: 1; - ${props => { - if ( - props.modalType === modalTypeEnum.confirmation || - props.modalType === modalTypeEnum.information - ) { - return `padding: 8px 32px 24px 72px; max-width: 296px;`; - } - if (props.modalType === modalTypeEnum.basic) { - return `padding: 16px 24px 30px 24px;`; - } - }}; -`; - -const TitleContainer = styled('div')` - box-sizing: border-box; - width: 100%; - display: flex; - flex-direction: row; - ${props => { - if (props.modalType === modalTypeEnum.basic) { - return ` - justify-content: space-between; - align-items: center; - height: 3.5rem; - align-self: center; - border-bottom: 1px solid #e5e5e5; - padding: 16px 24px; - `; - } - if ( - props.modalType === modalTypeEnum.confirmation || - props.modalType === modalTypeEnum.information - ) { - return ` - justify-content: flex-start; - height: 3.5rem; - padding: 32px 33.5px; - gap: 17.5px; - `; - } - }}; -`; - -const modalTypeEnum = { - basic: 'basic', - confirmation: 'confirmation', - information: 'information', -}; - -const Modal = withTheme( - ({ - title, - body, - hideButtons, - onClose, - onOk, - modalType, - informationType, - label, - modalSizeAndPosition, - extraButtonLabel, - extraButtonOnClick, - addComponent, - }) => { - const intl = useIntl(); - - return ( - - e.stopPropagation()} - modalType={modalType} - top={modalSizeAndPosition?.top} - left={modalSizeAndPosition?.left} - width={modalSizeAndPosition?.width} - height={modalSizeAndPosition?.height} - > - - {modalType === modalTypeEnum.information && ( - - {informationType === 'info' && ( - - )} - {informationType === 'error' && ( - - )} - {informationType === 'success' && ( - - )} - {informationType === 'warning' && ( - - )} - - )} - {modalType === modalTypeEnum.confirmation && ( - - - - )} - {title} - {modalType === modalTypeEnum.basic && ( -
- -
- )} - - - - {modalType === modalTypeEnum.basic && body} - {(modalType === modalTypeEnum.information || - modalType === modalTypeEnum.confirmation) && ( - {body} - )} - - - {!hideButtons && ( - - {addComponent} - {(modalType === modalTypeEnum.confirmation || - modalType === modalTypeEnum.basic) && ( - - )} - {extraButtonLabel && extraButtonOnClick && ( - - )} - - - )} - - - ); - }, -); - -export { Modal, modalTypeEnum }; diff --git a/src/components/blocks/NotificationCard.js b/src/components/blocks/NotificationCard.js deleted file mode 100644 index 3718f31..0000000 --- a/src/components/blocks/NotificationCard.js +++ /dev/null @@ -1,9 +0,0 @@ -import styled from "styled-components"; - -export const NotificationCard = styled('div')` - position: absolute; - top: 2.0625rem; - left: 50%; - transform: translateX(-50%); - z-index: 1000; -`; \ No newline at end of file diff --git a/src/components/blocks/Notifications.js b/src/components/blocks/Notifications.js deleted file mode 100644 index 3b08358..0000000 --- a/src/components/blocks/Notifications.js +++ /dev/null @@ -1,131 +0,0 @@ -import React from 'react'; -import styled, { css, withTheme } from 'styled-components'; -import { - SuccessIcon, - InfoIcon, - CloseIcon, - ErrorIcon, - WarningIcon, - Body, - ButtonText, -} from '..'; -import theme from '../../theme'; - -const NotificationCard = styled('div')` - display: flex; - flex-direction: column; - justify-content: space-evenly; - box-shadow: 0rem 0.5625rem 1.75rem 0.5rem rgba(0, 0, 0, 0.05), - 0rem 0.375rem 1rem rgba(0, 0, 0, 0.08), - 0rem 0.1875rem 0.375rem -0.25rem rgba(0, 0, 0, 0.12); - background-color: ${props => props.theme.colors.default.onButton}; - border: none; - height: ${props => (props.buttonText ? '9rem' : "fit-content")}; - width: 100%; -`; - -const CloseButton = styled('div')` -height: fit-content; - margin-top: 1.1587rem; - margin-right: 1.5rem; - cursor: pointer; -`; - -const ConfirmButton = styled('button')` - font-family: ${props => props.theme.typography.primary.regular}; - width: 3.6875rem; - height: 1.8125rem; - margin-right: 1.5rem; - margin-bottom: 1rem; - align-self: flex-end; - background-color: #1890ff; - border-radius: 0.125rem; - border: none; - color: ${props => props.theme.colors.default.onButton}; - cursor: pointer; -`; - -const NotificationMessage = styled('div')` - margin: 3.125rem; - display: flex; - word-wrap: break-word; - flex-direction: column; - justify-content: unset; - width: 100%; - height: 100%; - margin-left: 1.2rem; - margin-top:16px; -`; - -const ShowIcons = styled('div')` - margin-top: 1.0938rem; - margin-left: 1.5938rem; - ${props => - props.showIcon && - css` - margin-left: 1.8438rem; - `}; -`; - -const Notification = withTheme( - ({ - onClick, - onClose, - showIcon, - buttonText, - title, - body - }) => { - return ( - <> - -
- {showIcon === 'info' && ( - - - - )} - {showIcon === 'success' && ( - - - - )} - {showIcon === 'error' && ( - - - - )} - - {showIcon === 'warning' && ( - - - - )} - - {title} - - {body} - - - - - - -
- {buttonText && ( - - {buttonText} - - )} - - - ); - }, -); - -export { Notification }; diff --git a/src/components/blocks/OrganizationLogo.js b/src/components/blocks/OrganizationLogo.js deleted file mode 100644 index d9aa0a2..0000000 --- a/src/components/blocks/OrganizationLogo.js +++ /dev/null @@ -1,63 +0,0 @@ -import React, { useCallback, useMemo } from 'react'; -import styled from 'styled-components'; - -import { validateUrl } from '../../utils/urlUtils'; - -const StyledImg = styled('img')` - width: 100px; - height: 100px; - object-fit: contain; -`; - -const StyledSvgContainer = styled('div')` - width: 100px; - height: 100px; - display: flex; - justify-content: center; - align-items: center; - & svg { - width: 100px; - height: 100px; - } -`; - -const LogoTypeEnum = { - svg: 'svg', - url: 'url', - pngObject: 'pngObject', - pngBase64: 'pngBase64', -}; - -const OrganizationLogo = ({ logo }) => { - const createMarkup = icon => { - return { __html: icon }; - }; - - const getLogoType = useCallback(logo => { - if (logo && typeof logo === 'object') { - return LogoTypeEnum.pngObject; - } else if (logo?.includes('data:image/png;base64')) { - return LogoTypeEnum.pngBase64; - } else if (logo?.includes(' getLogoType(logo), [logo]); - - if (logoType === LogoTypeEnum.pngObject) - return ; - - if (logoType === LogoTypeEnum.pngBase64 || logoType === LogoTypeEnum.url) - return ; - - if (logoType === LogoTypeEnum.svg) - return ; - - return null; -}; - -export { OrganizationLogo }; diff --git a/src/components/blocks/Pagination.js b/src/components/blocks/Pagination.js deleted file mode 100644 index d015c72..0000000 --- a/src/components/blocks/Pagination.js +++ /dev/null @@ -1,147 +0,0 @@ -import React from 'react'; -import styled, { withTheme, css } from 'styled-components'; -import { ArrowDownIcon, ThreeDotsIcon } from '..'; - -const PaginationContainer = styled('div')` - display: inline-flex; - flex-direction: row; - justify-content: center; - align-items: center; - gap: 8px; - width: 100%; - background-color: ${props => props.theme.colors.default.onButton}; - color: ${props => props.theme.colors.default.secondary}; -`; - -const ControlsContainer = styled('div')` - cursor: pointer; - width: 32px; - height: 32px; - display: flex; - justify-content: center; - align-items: center; - border: 1px solid #d9d9d9; - box-sizing: border-box; - border-radius: 2px; - ${props => - props.isDisabled && - `background: #F5F5F5; color: #D9D9D9; cursor: default;`}; - ${props => - props.isBackButton && - `transform-origin: center; - transform: rotate(90deg);`}; - ${props => - props.isNextButton && - `transform-origin: center; - transform: rotate(270deg);`}; - - ${props => - !props.isDisabled && - (props.isNextButton || props.isBackButton) && - css` - :hover { - color: ${props => props.theme.colors.default.primary}; - border: 1px solid ${props => props.theme.colors.default.primary}; - } - `} -`; - -const PagesContainer = styled(ControlsContainer)` - font-family: ${props => props.theme.typography.primary.regular}; - font-style: normal; - font-weight: bold; - font-size: 14px; - line-height: 150%; - ${props => { - if (props.isActive) { - return `border: 1px solid ${props.theme.colors.default.primary}; - color: ${props.theme.colors.default.primary};`; - } else { - return `border: 1px solid ${props.theme.colors.default.gray4}; - color: ${props.theme.colors.default.secondary};`; - } - }}; - - :hover { - border: 1px solid ${props => props.theme.colors.default.primary}; - color: ${props => props.theme.colors.default.primary}; - } -`; - -const Pagination = withTheme( - ({ pages, current, showLast = false, callback }) => { - // if current page number higher or equal than number of pages, first page is displayed - const currentPageNumber = - current && current > 0 && current < pages ? current : 1; - const numberOfPages = pages && pages !== 0 ? pages : 1; - const changeCurrentPageTo = value => callback(value - 1); - const backButtonIsDisabled = currentPageNumber === 1; - const nextButtonIsDisabled = currentPageNumber === numberOfPages; - - let displayedPages = [currentPageNumber]; - let numberOfAddedPages = 1; - for ( - let x = 1; - x < 5 && numberOfAddedPages < 5 && numberOfAddedPages < numberOfPages; - x++ - ) { - if (currentPageNumber - x > 0) { - displayedPages.unshift(currentPageNumber - x); - numberOfAddedPages++; - } - if (currentPageNumber + x <= numberOfPages) { - displayedPages.push(currentPageNumber + x); - numberOfAddedPages++; - } - } - - return ( - - - !backButtonIsDisabled && changeCurrentPageTo(currentPageNumber - 1) - } - > - - - {displayedPages && - displayedPages.map(element => ( - - currentPageNumber !== element && changeCurrentPageTo(element) - } - > - {element} - - ))} - {showLast && - currentPageNumber + 2 + 1 < numberOfPages && - numberOfPages > 5 && ( - <> - - changeCurrentPageTo(numberOfPages)} - > - {numberOfPages} - - - )} - - !nextButtonIsDisabled && changeCurrentPageTo(currentPageNumber + 1) - } - > - - - - ); - }, -); - -export { Pagination }; diff --git a/src/components/blocks/Popover.js b/src/components/blocks/Popover.js deleted file mode 100644 index f95fc86..0000000 --- a/src/components/blocks/Popover.js +++ /dev/null @@ -1,82 +0,0 @@ -import React from 'react'; -import styled, { withTheme } from 'styled-components'; -import Tooltip, { tooltipClasses } from '@mui/material/Tooltip'; - -const PopoverPlacement = { - Top: 'top', - Bottom: 'bottom', - Left: 'left', - Right: 'right', - TopLeft: 'top-start', - TopRight: 'top-end', - BottomLeft: 'bottom-start', - BottomRight: 'bottom-end', - LeftTop: 'left-start', - LeftBottom: 'left-end', - RightTop: 'right-start', - RightBottom: 'right-end', -}; - -const StyledPopoverTitle = styled('div')` - margin: 0; - padding: 0.3125rem 1rem 0.3125rem 1rem; - line-height: 1.375rem; - font-size: 0.875rem; - font-weight: 600; - font-style: normal; -`; - -const StyledPopoverContent = styled('div')` - margin: 0; - padding: 0.75rem 1rem 0.75rem 1rem; - font-size: 0.875rem; - line-height: 1.375rem; - font-weight: 400; - font-style: normal; -`; - -const StyledPopoverDivider = styled('div')` - border-bottom: 1px solid #F0F0F0; -`; - -const Popover = withTheme(({ children, body, placement, title }) => { - const popoverContent = ( - - {title} - - {body} - - ); - - return ( - -
- {children} -
- - ); -}); - -export { PopoverPlacement, Popover }; diff --git a/src/components/blocks/Table.js b/src/components/blocks/Table.js deleted file mode 100644 index fcc9d3a..0000000 --- a/src/components/blocks/Table.js +++ /dev/null @@ -1,174 +0,0 @@ -import React, { useEffect } from 'react'; -import { useSelector } from 'react-redux'; -import styled, { withTheme, css } from 'styled-components'; - -import { Pagination, TableCell } from '..'; -import { useWindowSize } from '../../hooks/useWindowSize'; - -const TableColumnTypeEnum = { - string: 'string', - quantity: 'quantity', - date: 'date', - image: 'image', - button: 'button', - link: 'link', -}; - -const StyledTable = styled('table')` - box-sizing: border-box; - background-color: ${props => props.theme.colors.default.onButton}; - width: 100%; - display: table; - border-spacing: 0; - border-collapse: collapse; - overflow-x: scroll; -`; - -const StyledTableHead = styled('thead')` - font-weight: 500; - background-color: ${props => props.theme.colors.default.gray3}; - border-left: 1px solid whitesmoke; - border-right: 1px solid whitesmoke; - position: sticky; - top: 0; - z-index: 2; -`; - -const Th = styled('th')` - padding: 1rem; - display: table-cell; - text-align: left; - border-bottom: 1px solid rgba(224, 224, 224, 1); - letter-spacing: 0.01071em; - vertical-align: inherit; - text-align: center; - color: ${props => props.color || props.theme.colors.default.secondary}; - font-size: 0.875rem; - font-family: ${props => props.theme.typography.primary.semiBold}; - font-style: normal; - font-weight: 600; - line-height: 1.375rem; -`; - -const Tr = styled('tr')` - color: ${props => props.theme.colors.default.secondary}; - background-color: ${props => props.theme.colors.default.onButton}; - - ${props => - props.onClick && - css` - :hover { - background-color: ${props => props.theme.colors.default.gray6}; - cursor: pointer; - } - `} -`; - -const Td = styled('td')` - display: table-cell; - padding: 1rem; - text-align: left; - border-bottom: 1px solid rgba(224, 224, 224, 1); - letter-spacing: 0.01071em; - vertical-align: inherit; - max-width: 200px; - text-align: center; - button { - white-space: nowrap; - } - overflow: hidden; -`; - -export const StyledPaginationContainer = styled('div')` - box-sizing: border-box; - background-color: ${props => props.theme.colors.default.onButton}; - display: flex; - justify-content: center; - align-items: center; - min-height: 70px; - width: 100%; - max-height: 70px; - margin: 25px 0px 25px 0px; -`; - -const StyledRefContainer = styled('div')` - height: 100%; - position: relative; -`; - -const StyledScalableContainer = styled('div')` - overflow: auto; - position: relative; - width: 100%; - ${props => - props.height && - css` - height: ${props.height}; - `} -`; - -const Table = withTheme( - ({ data, config, changePageTo, currentPage, numberOfPages }) => { - const { theme } = useSelector(state => state); - const ref = React.useRef(null); - const [height, setHeight] = React.useState(0); - const windowSize = useWindowSize(); - - useEffect(() => { - setHeight( - windowSize.height - ref.current.getBoundingClientRect().top - 20, - ); - }, [ref.current, windowSize.height]); - - return ( - - - - - - {config.columns.map(columnConfig => ( - - {columnConfig.title} - - ))} - - - - {data.map((record, index) => ( - config?.rows?.onRowClick(record) - : undefined - } - > - {config.columns.map(columnConfig => ( - - - - ))} - - ))} - - - - - - - - ); - }, -); - -export { Table, TableColumnTypeEnum }; diff --git a/src/components/blocks/TableCell.js b/src/components/blocks/TableCell.js deleted file mode 100644 index dfead4b..0000000 --- a/src/components/blocks/TableCell.js +++ /dev/null @@ -1,119 +0,0 @@ -import { Chip } from '@mui/material'; -import React from 'react'; -import { useSelector } from 'react-redux'; -import styled, { withTheme } from 'styled-components'; - -import { - TableColumnTypeEnum, - ToolTip, - ToolTipPlacement, - PrimaryButton, -} from '..'; -import { getISODateWithHyphens } from '../../utils/dateUtils'; -import { isStringOfNoValueType } from '../../utils/stringUtils'; - -const Text = styled('p')` - color: ${props => props.color || props.theme.colors.default.secondary}; - font-size: 0.875rem; - font-family: ${props => props.theme.typography.primary.regular}; - font-style: normal; - font-weight: 400; - line-height: 1.375rem; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - text-align: center; -`; - -const StyledAlignedDiv = styled('div')` - text-align: center; -`; - -const StyledCenterContentContainer = styled('div')` - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; -`; - -const StyledLink = styled('a')` - white-space: nowrap; - display: block; - overflow: hidden; - width: 80%; - text-overflow: ellipsis; -`; - -const TableCell = withTheme(({ config, value, record }) => { - const appStore = useSelector(state => state); - - if (config.type === TableColumnTypeEnum.button) { - return ( - - config.buttonOnClick(record)} - /> - - ); - } - - if (isStringOfNoValueType(value)) { - return --; - } - - if (config.type === TableColumnTypeEnum.link) { - return ( - - - {value} - - - ); - } - - if (config.type === TableColumnTypeEnum.image) { - return ( - - - - ); - } - - if (config.type === TableColumnTypeEnum.date) { - return ( - {getISODateWithHyphens(value)} - ); - } - - if (config.type === TableColumnTypeEnum.pill) { - return ( - - - - ); - } - - if (config.type === TableColumnTypeEnum.quantity) { - return ( - - {value.toLocaleString(navigator.language)} - - ); - } - - const valueToDisplay = value.toString(); - return config?.isTooltipVisible ? ( - - {valueToDisplay} - - ) : ( - {valueToDisplay} - ); -}); - -export { TableCell }; diff --git a/src/components/blocks/TableDrawer.js b/src/components/blocks/TableDrawer.js deleted file mode 100644 index e87623c..0000000 --- a/src/components/blocks/TableDrawer.js +++ /dev/null @@ -1,142 +0,0 @@ -import { Drawer } from '@mui/material'; -import React from 'react'; -import styled, { withTheme } from 'styled-components'; -import { CloseIconWithBorder, Body, SuccessIcon, ErrorIcon } from '..'; -import { convertPascalCaseToSentenceCase } from '../../utils/stringUtils'; - -const drawerStyles = { - marginTop: '70px', - width: '340px', - height: '80%', -}; - -const IconContainer = styled('div')` - top: 17px; - right: 24px; - position: absolute; - background-color: white; - cursor: pointer; -`; -const TableContentContainer = styled('div')` - display: flex; - flex-direction: column; - align-items: center; - overflow-x: hidden; - width: 100%; - padding: 20px 30px 20px 20px; - height: 100%; - display: flex; - flex-direction: column; - align-self: center; - box-sizing: border-box; -`; - -const TableContent = styled('div')` - display: flex; - flex-direction: column; - justify-content: space-evenly; - width: 100%; - padding: 7px 0px 7px 0px; - box-sizing: border-box; - body { - word-wrap: break-word; - } -`; - -const StyledDetails = styled('div')` - display: flex; - justify-content: flex-start; - align-items: center; - gap: 5px; - ${props => - props.isGreen && `body {color: ${props.theme.colors.default.status.ok.primary}}`}; - ${props => - props.isRed && - `body {color: ${props.theme.colors.default.status.error.primary}}`}; -`; - -const StyledValuesContainer = styled('div')` - display: flex; - flex-direction: column; - body { - width: 90%; - } - gap: 4px; -`; - -const TableDrawer = withTheme(({ drawerRecord, drawerUpdates, onClose }) => { - const updatesAreVisible = drawerUpdates && drawerUpdates.length > 0; - const splitIsVisible = drawerUpdates && drawerUpdates.length > 1; - - return ( - - - - - - {drawerRecord && - Object.entries(drawerRecord) - .filter( - unfilteredKeyValuePair => - !Array.isArray(drawerRecord[unfilteredKeyValuePair[0]]) && - unfilteredKeyValuePair[0] !== 'unitBlockEnd' && - unfilteredKeyValuePair[0] !== 'unitBlockStart' && - typeof unfilteredKeyValuePair[1] !== 'object', - ) - .map(keyValuePair => { - return ( - - - {convertPascalCaseToSentenceCase(keyValuePair[0])} - - {updatesAreVisible && - keyValuePair[1] !== drawerUpdates[0][keyValuePair[0]] && ( - - - - - {keyValuePair[1] ? keyValuePair[1] : '--'} - - - - - - - {drawerUpdates[0][keyValuePair[0]] - ? drawerUpdates[0][keyValuePair[0]] - : '--'} - - - - {splitIsVisible && ( - - - - {drawerUpdates[1][keyValuePair[0]] - ? drawerUpdates[1][keyValuePair[0]] - : '--'} - - - )} - - )} - {(!updatesAreVisible || - keyValuePair[1] === drawerUpdates[0][keyValuePair[0]]) && ( - - {keyValuePair[1] ? keyValuePair[1] : '--'} - - )} - - ); - })} - - - ); -}); - -export { TableDrawer }; diff --git a/src/components/blocks/Tag.js b/src/components/blocks/Tag.js deleted file mode 100644 index f222eca..0000000 --- a/src/components/blocks/Tag.js +++ /dev/null @@ -1,52 +0,0 @@ -import _ from 'lodash'; -import React from 'react'; -import styled, { withTheme } from 'styled-components'; -import { AddIcon, CloseIcon } from '..'; - -const AddTag = styled('div')` - display: flex; - justify-content: space-evenly; - align-items: center; - height: 1.375rem; - width: 2.3125rem; - background-color: #fafafa; - border-radius: 0.125rem; - ${props => - props.body === null - ? 'border: 0.0625rem dashed #D9D9D9 ; width:4.375rem;background-color: unset' - : 'border: 0.0625rem solid #D9D9D9'}; - ${props => props.closeable && 'width:4.25rem'}; -`; - -const TagBody = styled('p')` - margin: 0; - font-size: 0.75rem; -`; - -const TagButton = styled('div')` - cursor: pointer; -`; - -const Tag = withTheme( - ({ closeable, body = null, addNew = _.noop, onClose = _.noop }) => { - return ( - <> - - {addNew && ( - - - - )} - {body === null ? 'New Tag' : body} - {closeable && ( - - - - )} - - - ); - }, -); - -export { Tag }; diff --git a/src/components/blocks/ToolTip.js b/src/components/blocks/ToolTip.js deleted file mode 100644 index b57439b..0000000 --- a/src/components/blocks/ToolTip.js +++ /dev/null @@ -1,58 +0,0 @@ -import React from 'react'; -import { withTheme } from 'styled-components'; -import Tooltip, { tooltipClasses } from '@mui/material/Tooltip'; -import theme from '../../theme'; - -const ToolTipPlacement = { - Top: 'top', - Bottom: 'bottom', - Left: 'left', - Right: 'right', - TopLeft: 'top-start', - TopRight: 'top-end', - BottomLeft: 'bottom-start', - BottomRight: 'bottom-end', - LeftTop: 'left-start', - LeftBottom: 'left-end', - RightTop: 'right-start', - RightBottom: 'right-end', -}; - -const ToolTip = withTheme(({ children, body, placement }) => { - return ( - - {children} - - ); -}); - -export { ToolTipPlacement, ToolTip }; diff --git a/src/components/blocks/ToolTipContainer.js b/src/components/blocks/ToolTipContainer.js deleted file mode 100644 index 957a803..0000000 --- a/src/components/blocks/ToolTipContainer.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import { ToolTip, ToolTipPlacement } from '.'; - -const ToolTipContainer = ({ children, tooltip }) => { - return ( - - {children} - - ); -}; - -export { ToolTipContainer }; diff --git a/src/components/blocks/UnitDetails.js b/src/components/blocks/UnitDetails.js deleted file mode 100644 index aef88ee..0000000 --- a/src/components/blocks/UnitDetails.js +++ /dev/null @@ -1,92 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; - -import { Body } from '../../components'; -import { getHyphensISODate, getIsDateValid } from '../../utils/dateUtils'; -import { convertPascalCaseToSentenceCase } from '../../utils/stringUtils'; - -export const StyledDetailedViewTabItem = styled('div')` - display: flex; - justify-content: center; - background: #fafafa; - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); - border-radius: 10px; - padding: 16px 21px; - margin: 20px 0px; - gap: 20px; -`; - -export const StyledDetailedViewTab = styled('div')` - display: grid; - grid-template-columns: 50% 50%; - column-gap: 1rem; -`; - -export const StyledItem = styled('div')` - overflow-wrap: break-word; - display: flex; - flex-direction: column; - padding: 10px 0; -`; - -const UnitDetails = ({ data }) => { - const isDataOfArrayType = data instanceof Array; - - const getShouldKeyValueBeDisplayed = value => - typeof value !== 'object' || value === null; - - const getFormattedDateIfValueIsOfDateType = value => { - const isOfDateType = getIsDateValid(value); - if (!isOfDateType) { - return value; - } - - const formattedDate = getHyphensISODate(value); - return formattedDate; - }; - - if (isDataOfArrayType) - return data.map((item, arrayIndex) => ( - -
- - {Object.keys(item).map( - (key, index) => - getShouldKeyValueBeDisplayed(item[key]) && ( - - - {convertPascalCaseToSentenceCase(key)} - - - {getFormattedDateIfValueIsOfDateType(item[key])} - - - ), - )} - -
- - )); - - return ( - -
- - {Object.keys(data).map( - (key, index) => - getShouldKeyValueBeDisplayed(data[key]) && ( - - - {convertPascalCaseToSentenceCase(key)} - - {getFormattedDateIfValueIsOfDateType(data[key])} - - ), - )} - -
- - ); -}; - -export { UnitDetails }; diff --git a/src/components/blocks/index.js b/src/components/blocks/index.js deleted file mode 100644 index 07ca86d..0000000 --- a/src/components/blocks/index.js +++ /dev/null @@ -1,21 +0,0 @@ -export * from './Alert'; -export * from './BasicMenu'; -export * from './Card'; -export * from './ComponentRepeater'; -export * from './LocaleSwitcher'; -export * from './LocalMessage'; -export * from './Message'; -export * from './Modal'; -export * from './NotificationCard'; -export * from './Notifications'; -export * from './OrganizationLogo'; -export * from './Pagination'; -export * from './Popover'; -export * from './TableDrawer'; -export * from './Tag'; -export * from './ToolTip'; -export * from './ToolTipContainer'; -export * from './Table'; -export * from './TableCell'; -export * from './Connect'; -export * from './UnitDetails'; diff --git a/src/components/forms/ConfirmDetokanizationModal.js b/src/components/forms/ConfirmDetokanizationModal.js deleted file mode 100644 index bb1c993..0000000 --- a/src/components/forms/ConfirmDetokanizationModal.js +++ /dev/null @@ -1,89 +0,0 @@ -import React, { useEffect, useState, useCallback } from 'react'; -import { useDispatch, useSelector } from 'react-redux'; -import { useIntl } from 'react-intl'; - -import { Modal, modalTypeEnum, Tab, Tabs, TabPanel, UnitDetails } from '..'; -import { confirmDetokanization } from '../../store/actions/appActions'; - -const ConfirmDetokanizationModal = ({ - onClose, - data, - modalSizeAndPosition, -}) => { - const { notification } = useSelector(app => app); - const intl = useIntl(); - const [tabValue, setTabValue] = useState(0); - const dispatch = useDispatch(); - - const handleTabChange = useCallback( - (event, newValue) => setTabValue(newValue), - [setTabValue], - ); - - const { unit } = data; - const unitKeys = Object?.keys(unit); - const unitDetails = {}; - const unitTabs = []; - - unitKeys?.forEach(key => { - const keyValue = unit[key]; - if (typeof keyValue !== 'object' || keyValue === null) { - unitDetails[key] = keyValue; - } else if (keyValue instanceof Array && keyValue.length) { - unitTabs.unshift({ tabName: key, tabData: keyValue }); - } else if (!(keyValue instanceof Array)) { - unitTabs.unshift({ tabName: key, tabData: keyValue }); - } - }); - - if (unitDetails?.unitCount) unitDetails.unitCount /= 1000; - - const onSubmit = () => { - dispatch(confirmDetokanization(data)); - }; - - const isDetokanizationSuccessful = - notification && notification.id === 'detokanization-successful'; - useEffect(() => { - if (isDetokanizationSuccessful) { - onClose(); - } - }, [notification]); - - return ( - - - - {unitTabs?.length > 0 && - unitTabs.map(tab => ( - - ))} - - - - - {unitTabs?.length > 0 && - unitTabs.map((tab, index) => ( - - - - ))} - - } - /> - ); -}; - -export { ConfirmDetokanizationModal }; diff --git a/src/components/forms/CreateTokenModal.js b/src/components/forms/CreateTokenModal.js deleted file mode 100644 index 1fca6cd..0000000 --- a/src/components/forms/CreateTokenModal.js +++ /dev/null @@ -1,282 +0,0 @@ -import React, { useState } from 'react'; -import { FormattedMessage, useIntl } from 'react-intl'; -import { useDispatch } from 'react-redux'; - -import { - Body, - BodyContainer, - FormContainerStyle, - InputContainer, - InputSizeEnum, - InputStateEnum, - InputVariantEnum, - LabelContainer, - ModalFormContainerStyle, - StandardInput, - StyledFieldContainer, - StyledLabelContainer, - modalTypeEnum, - Modal, -} from '..'; -import { tokenizeUnit } from '../../store/actions/appActions'; - -const CreateTokenModal = ({ data, onClose }) => { - const dispatch = useDispatch(); - const intl = useIntl(); - const [formValues, setFormValues] = useState({ - quantityOfCredits: data?.unitCount ?? 0, - projectName: data?.projectName ?? '', - projectId: data?.registryProjectId ?? '', - vintage: data?.vintageYear, - projectLink: data?.projectLink ?? '', - unitOwner: data?.unitOwner ?? '', - accountHolderWalletAddress: '', - unitBlockStart: data?.unitBlockStart ?? '', - unitBlockEnd: data?.unitBlockEnd ?? '', - }); - const [isValidationOn, setIsValidationOn] = useState(false); - - const isWalletAddressValid = - formValues?.accountHolderWalletAddress?.length > 0; - - const onSubmitForm = () => { - setIsValidationOn(true); - - if (isWalletAddressValid) { - const submitData = { - org_uid: data?.orgUid, - warehouse_project_id: data?.issuance?.warehouseProjectId, - vintage_year: data?.vintageYear, - sequence_num: 0, - warehouseUnitId: data?.warehouseUnitId, - to_address: formValues?.accountHolderWalletAddress, - amount: data?.unitCount, - }; - dispatch(tokenizeUnit(submitData)); - onClose(); - } - }; - - const updateWalletAddress = newAddress => - setFormValues(prevValues => ({ - ...prevValues, - accountHolderWalletAddress: newAddress, - })); - - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * - - - - - - - {isValidationOn && !isWalletAddressValid && ( - - Add valid wallet address - - )} - - - - - } - /> - ); -}; - -export { CreateTokenModal }; diff --git a/src/components/forms/DetokenizeModal.js b/src/components/forms/DetokenizeModal.js deleted file mode 100644 index bc766c4..0000000 --- a/src/components/forms/DetokenizeModal.js +++ /dev/null @@ -1,163 +0,0 @@ -import React, { useMemo, useState, useEffect } from 'react'; -import { useDispatch, useSelector } from 'react-redux'; -import { useIntl, FormattedMessage } from 'react-intl'; - -import { - Body, - BodyContainer, - FormContainerStyle, - InputContainer, - InputSizeEnum, - InputStateEnum, - InputVariantEnum, - LabelContainer, - Modal, - ModalFormContainerStyle, - modalTypeEnum, - SpanTwoColumnsContainer, - StandardInput, - StyledFieldContainer, - StyledLabelContainer, - UploadFileInput, -} from '..'; -import { detokenizeUnit } from '../../store/actions/appActions'; -import { getContentFromEncryptedZip } from '../../utils/zip'; - -const DetokenizeModal = ({ onClose }) => { - const { notification } = useSelector(app => app); - const dispatch = useDispatch(); - const intl = useIntl(); - const [isValidationOn, setIsValidationOn] = useState(false); - const [formData, setFormData] = useState({ - password: '', - file: '', - }); - const [detokString, setDetokString] = useState(null); - - const isPasswordValid = useMemo( - () => formData.password !== '' && formData.password.indexOf(' ') === -1, - [formData], - ); - - const isFileValid = useMemo( - () => - formData.file !== '' && - formData.file.size > 0 && - formData.file.name.endsWith('.zip'), - [formData], - ); - - const isDetokStringValid = useMemo( - () => typeof detokString === 'string' && detokString.startsWith('detok'), - [detokString], - ); - - const onSubmit = () => { - setIsValidationOn(true); - if (isPasswordValid && isFileValid && isDetokStringValid) - dispatch(detokenizeUnit(detokString)); - }; - - const wasDetokFileParsedSuccessfully = - notification && notification.id === 'detok-file-parsed'; - useEffect(() => { - if (wasDetokFileParsedSuccessfully) { - onClose(); - } - }, [notification]); - - useEffect(() => { - if (isFileValid && isPasswordValid) { - getContentFromEncryptedZip(formData.file, formData.password, file => - setDetokString(file), - ); - } - }, [formData]); - - return ( - - - - - - - - - - - - - - - setFormData(prevData => ({ ...prevData, file })) - } - /> - {isValidationOn && !isFileValid && ( - - {intl.formatMessage({ id: 'add-valid-detok-file' })} - - )} - {isValidationOn && - isFileValid && - isPasswordValid && - !isDetokStringValid && ( - - {intl.formatMessage({ - id: 'detok-file-archive-not-valid', - })} - - )} - - - - - - - - - - - - - setFormData(prevData => ({ ...prevData, password })) - } - /> - - {isValidationOn && !isPasswordValid && ( - - {intl.formatMessage({ id: 'add-valid-detok-password' })} - - )} - - - - - } - /> - ); -}; - -export { DetokenizeModal }; diff --git a/src/components/forms/FormikRepeater.js b/src/components/forms/FormikRepeater.js deleted file mode 100644 index 5c0382f..0000000 --- a/src/components/forms/FormikRepeater.js +++ /dev/null @@ -1,110 +0,0 @@ -import _ from 'lodash'; -import React, { useEffect } from 'react'; -import { FieldArray, useFormikContext } from 'formik'; -import styled from 'styled-components'; -import { FormattedMessage } from 'react-intl'; - -import { - AddIcon, - CloseIcon, - Body, - DescriptionIcon, - ToolTipContainer, -} from '..'; - -const StyledRepeatedComponentContainer = styled('div')` - display: flex; - flex-direction: row; - align-items: center; - gap: 10px; - margin: 20px 0; - ${props => !props.disabled && `cursor: pointer;`}; -`; - -const FormikRepeater = ({ - empty, - min = 1, - max = 10, - name, - Component, - tooltip, - isControlVisible = true, -}) => { - const { values, setFieldValue, handleBlur, errors, touched } = - useFormikContext(); - const entriesArray = _.get(values, `${name}`, []); - const entriesNumber = entriesArray.length; - - // add necessary empty objects till min is reached - useEffect(() => { - if (entriesNumber < min) { - const additionalEntries = []; - while (additionalEntries.length < min - entriesNumber) { - additionalEntries.push(_.cloneDeep(empty)); - } - setFieldValue(name, [...entriesArray, ...additionalEntries]); - } - }, [values]); - - if (entriesNumber < min) { - return null; - } - - return ( -
- ( -
- {entriesNumber < max && isControlVisible && ( - <> - arrayHelpers.push(_.cloneDeep(empty))} - > - - - - {tooltip && ( - - - - )} - - - - )} - {!(entriesNumber < max) && isControlVisible && ( - - - - - - - )} - {entriesArray?.length > 0 && - entriesArray.map((entry, index) => ( - - - {isControlVisible && ( -
arrayHelpers.remove(index)}> - -
- )} - - ))} -
- )} - /> -
- ); -}; - -export { FormikRepeater }; diff --git a/src/components/forms/index.js b/src/components/forms/index.js deleted file mode 100644 index d3cb310..0000000 --- a/src/components/forms/index.js +++ /dev/null @@ -1,4 +0,0 @@ -export * from './FormikRepeater'; -export * from './DetokenizeModal'; -export * from './ConfirmDetokanizationModal'; -export * from './CreateTokenModal'; diff --git a/src/components/icons/AddIcon.js b/src/components/icons/AddIcon.js deleted file mode 100644 index 203727f..0000000 --- a/src/components/icons/AddIcon.js +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import { withTheme } from 'styled-components'; - -const AddIcon = withTheme(({ width, height, fill }) => { - return ( - <> - - - - - - ); -}); - -export { AddIcon }; diff --git a/src/components/icons/AddIconCircle.js b/src/components/icons/AddIconCircle.js deleted file mode 100644 index 128aa91..0000000 --- a/src/components/icons/AddIconCircle.js +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import { withTheme } from 'styled-components'; - -const AddIconCircle = withTheme(({ width, height }) => { - return ( - - - - - ); -}); - -export { AddIconCircle }; diff --git a/src/components/icons/AppLogo.js b/src/components/icons/AppLogo.js deleted file mode 100644 index 7b6b8e4..0000000 --- a/src/components/icons/AppLogo.js +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; -import { withTheme } from 'styled-components'; -import styled from 'styled-components'; - -import appLogo from '../../assets/img/tokenization-engine-logo.png'; - -const LogoContainer = styled('div')` - display: flex; - justify-content: center; - align-items: center; - height: 100%; - color: ${props => props.theme.colors.default.secondary}; - font-family: ${props => props.theme.typography.primary.bold}; - gap: 10px; - font-size: 1rem; - text-transform: uppercase; -`; - -const AppLogo = withTheme(({ width, height }) => { - return ( - - - Carbon Tokenization Engine - - ); -}); - -export { AppLogo }; diff --git a/src/components/icons/ArrowDownIcon.js b/src/components/icons/ArrowDownIcon.js deleted file mode 100644 index ed46ec9..0000000 --- a/src/components/icons/ArrowDownIcon.js +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import { withTheme } from 'styled-components'; - -const ArrowDownIcon = withTheme(({ width, height }) => { - return ( - - - - ); -}); - -export { ArrowDownIcon }; diff --git a/src/components/icons/AscendingClockIcon.js b/src/components/icons/AscendingClockIcon.js deleted file mode 100644 index 12f824b..0000000 --- a/src/components/icons/AscendingClockIcon.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; - -const AscendingClockIcon = props => { - return ( - - - - ); -}; -export { AscendingClockIcon }; diff --git a/src/components/icons/CheckIcon.js b/src/components/icons/CheckIcon.js deleted file mode 100644 index 9c60ac5..0000000 --- a/src/components/icons/CheckIcon.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import { withTheme } from 'styled-components'; - - -const CheckIcon = withTheme(({ width, height, theme }) => { - return ( - - - - ); -}); - -export { CheckIcon }; diff --git a/src/components/icons/CloseIcon.js b/src/components/icons/CloseIcon.js deleted file mode 100644 index 4f7b819..0000000 --- a/src/components/icons/CloseIcon.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import { withTheme } from 'styled-components'; -import { IconColorsWrapper } from '..'; - -const CloseIcon = withTheme(({ width, height, fill }) => { - return ( - - - - - - ); -}); - -export { CloseIcon }; diff --git a/src/components/icons/CloseIconWithBorder.js b/src/components/icons/CloseIconWithBorder.js deleted file mode 100644 index 09af751..0000000 --- a/src/components/icons/CloseIconWithBorder.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import { withTheme } from 'styled-components'; - -const CloseIconWithBorder = withTheme(({ width, height }) => { - return ( - <> - - - - - - ); -}); - -export { CloseIconWithBorder }; diff --git a/src/components/icons/CopyIcon.js b/src/components/icons/CopyIcon.js deleted file mode 100644 index 1a86b00..0000000 --- a/src/components/icons/CopyIcon.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import { withTheme } from 'styled-components'; - -const CopyIcon = withTheme(({ width, height, fill, onClick }) => { - return ( - - - - ); -}); - -export { CopyIcon }; diff --git a/src/components/icons/DarkThemeIcon.js b/src/components/icons/DarkThemeIcon.js deleted file mode 100644 index 774d1e7..0000000 --- a/src/components/icons/DarkThemeIcon.js +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import {useSelector} from 'react-redux'; -import {withTheme} from 'styled-components'; - -const DarkThemeIcon = withTheme( - ({width = 24, height = 24, theme, cursor = 'unset'}) => { - const appStore = useSelector(state => state); - - return ( -
- -
- ); - }, -); - -export {DarkThemeIcon}; diff --git a/src/components/icons/DescendingClockIcon.js b/src/components/icons/DescendingClockIcon.js deleted file mode 100644 index b8b9c42..0000000 --- a/src/components/icons/DescendingClockIcon.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; - -const DescendingClockIcon = props => { - return ( - - - - ); -}; - -export { DescendingClockIcon }; diff --git a/src/components/icons/DescriptionIcon.js b/src/components/icons/DescriptionIcon.js deleted file mode 100644 index ab12e68..0000000 --- a/src/components/icons/DescriptionIcon.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import { withTheme } from 'styled-components'; - -const DescriptionIcon = withTheme(({ width, height }) => { - return ( - - - - - ); -}); - -export { DescriptionIcon }; diff --git a/src/components/icons/Divider.js b/src/components/icons/Divider.js deleted file mode 100644 index 1af228a..0000000 --- a/src/components/icons/Divider.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { withTheme } from 'styled-components'; - -const Divider = withTheme(({ fill }) => { - return ( - - - - ); -}); - -export { Divider }; diff --git a/src/components/icons/DownloadIcon.js b/src/components/icons/DownloadIcon.js deleted file mode 100644 index 8a0706b..0000000 --- a/src/components/icons/DownloadIcon.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; - -import { IconColorsWrapper } from './IconColorsWrapper'; - -const DownloadIcon = ({ width = 16, height = 16, ...props }) => { - return ( - - - - - - ); -}; - -export { DownloadIcon }; diff --git a/src/components/icons/EditIcon.js b/src/components/icons/EditIcon.js deleted file mode 100644 index 9b8f1f5..0000000 --- a/src/components/icons/EditIcon.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import { withTheme } from 'styled-components'; - -const EditIcon = withTheme(({ width, height, fill, ...props }) => { - return ( - - - - ); -}); - -export { EditIcon }; diff --git a/src/components/icons/EllipseIcon.js b/src/components/icons/EllipseIcon.js deleted file mode 100644 index 51dacfe..0000000 --- a/src/components/icons/EllipseIcon.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import { withTheme } from 'styled-components'; - -const EllipseIcon = withTheme(({ width, height, fill }) => { - return ( - <> - - - - - ); -}); - -export { EllipseIcon }; diff --git a/src/components/icons/EllipsisMenuIcon.js b/src/components/icons/EllipsisMenuIcon.js deleted file mode 100644 index c327b52..0000000 --- a/src/components/icons/EllipsisMenuIcon.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; -import { EllipseIcon } from '..'; - -const StyledElipseContainer = styled('div')` - height: 29px; - display: flex; - flex-direction: column; - justify-content: space-evenly; -`; - -const EllipsisMenuIcon = () => { - return ( - - - - - - ); -} - -export { EllipsisMenuIcon }; \ No newline at end of file diff --git a/src/components/icons/ErrorIcon.js b/src/components/icons/ErrorIcon.js deleted file mode 100644 index 2fec7a8..0000000 --- a/src/components/icons/ErrorIcon.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import { withTheme } from 'styled-components'; - -const ErrorIcon = withTheme(({ width, height }) => { - return ( - <> - - - - - - ); -}); - -export { ErrorIcon }; diff --git a/src/components/icons/ErrorIconSmall.js b/src/components/icons/ErrorIconSmall.js deleted file mode 100644 index 6c5d6f7..0000000 --- a/src/components/icons/ErrorIconSmall.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import { withTheme } from 'styled-components'; - -const ErrorIconSmall = withTheme(({ width, height }) => { - return ( - <> - - - - - ); -}); - -export { ErrorIconSmall }; diff --git a/src/components/icons/IconColorsWrapper.js b/src/components/icons/IconColorsWrapper.js deleted file mode 100644 index 65d32ad..0000000 --- a/src/components/icons/IconColorsWrapper.js +++ /dev/null @@ -1,23 +0,0 @@ -import styled from 'styled-components'; - -export const IconColorsWrapperTypeEnum = { - default: 'default', - red: 'red', - disabled: 'disabled', -}; - -export const IconColorsWrapper = styled('div')` - cursor: pointer; - - color: ${props => - props.type === IconColorsWrapperTypeEnum.red - ? props.theme.colors.default.shade2 - : props.theme.colors.default.primaryDark}; - - :hover { - color: ${props => - props.type === IconColorsWrapperTypeEnum.red - ? props.theme.colors.default.shade1 - : props.theme.colors.default.primary}; - } -`; diff --git a/src/components/icons/InfoIcon.js b/src/components/icons/InfoIcon.js deleted file mode 100644 index a00206e..0000000 --- a/src/components/icons/InfoIcon.js +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import { withTheme } from 'styled-components'; - - -const InfoIcon = withTheme(({ width, height, theme }) => { - return ( - <> - - - - - - ); -}); - -export { InfoIcon }; diff --git a/src/components/icons/InfoIconSmall.js b/src/components/icons/InfoIconSmall.js deleted file mode 100644 index 58f29f5..0000000 --- a/src/components/icons/InfoIconSmall.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import { withTheme } from 'styled-components'; - -const InfoIconSmall = withTheme(({ width, height }) => { - return ( - <> - - - - - ); -}); - -export { InfoIconSmall }; diff --git a/src/components/icons/LightThemeIcon.js b/src/components/icons/LightThemeIcon.js deleted file mode 100644 index 28e39db..0000000 --- a/src/components/icons/LightThemeIcon.js +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import { useSelector } from 'react-redux'; -import { withTheme } from 'styled-components'; - -const LightThemeIcon = withTheme( - ({ color, width = 24, height = 24, theme, cursor = 'unset' }) => { - const appStore = useSelector(state => state); - - return ( -
- -
- ); - }, -); - -export { LightThemeIcon }; diff --git a/src/components/icons/LinkIcon.js b/src/components/icons/LinkIcon.js deleted file mode 100644 index a42c8fb..0000000 --- a/src/components/icons/LinkIcon.js +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import { withTheme } from 'styled-components'; - -const LinkIcon = withTheme(({ width, height }) => { - return ( - - - - - - - ); -}); - -export { LinkIcon }; diff --git a/src/components/icons/LocaleIcon.js b/src/components/icons/LocaleIcon.js deleted file mode 100644 index 6121e72..0000000 --- a/src/components/icons/LocaleIcon.js +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import {useSelector} from 'react-redux'; -import {withTheme} from 'styled-components'; - -const LocaleIcon = withTheme( - ({width = 24, height = 24, theme, cursor = 'unset', style}) => { - const appStore = useSelector(state => state); - - return ( -
- -
- ); - }, -); - -export {LocaleIcon}; diff --git a/src/components/icons/MagnifyGlassIcon.js b/src/components/icons/MagnifyGlassIcon.js deleted file mode 100644 index 06fb4af..0000000 --- a/src/components/icons/MagnifyGlassIcon.js +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; - -const MagnifyGlassIcon = ({ - style, - width = 16, - height = 16, - cursor = 'unset', -}) => { - return ( - - - - ); -}; - -export { MagnifyGlassIcon }; diff --git a/src/components/icons/MagnifyGlassIconWhite.js b/src/components/icons/MagnifyGlassIconWhite.js deleted file mode 100644 index 4f5a853..0000000 --- a/src/components/icons/MagnifyGlassIconWhite.js +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import { withTheme } from 'styled-components'; - -const MagnifyGlassIconWhite = withTheme( - ({ style, width = 24, height = 24, cursor = 'unset' }) => { - - return ( -
- - - -
- ); - }, -); - -export { MagnifyGlassIconWhite }; diff --git a/src/components/icons/MinusIcon.js b/src/components/icons/MinusIcon.js deleted file mode 100644 index 1c42762..0000000 --- a/src/components/icons/MinusIcon.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import { withTheme } from 'styled-components'; - -const MinusIcon = withTheme(({ width, height }) => { - return ( - - - - - ); -}); - -export { MinusIcon }; diff --git a/src/components/icons/OrganizationIcon.js b/src/components/icons/OrganizationIcon.js deleted file mode 100644 index 55c0f93..0000000 --- a/src/components/icons/OrganizationIcon.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import { withTheme } from 'styled-components'; - -const OrganizationIcon = withTheme(({ width, height, fill }) => { - return ( - - - - ); -}); - -export { OrganizationIcon }; diff --git a/src/components/icons/RegistryIcon.js b/src/components/icons/RegistryIcon.js deleted file mode 100644 index ff3e2c4..0000000 --- a/src/components/icons/RegistryIcon.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import { withTheme } from 'styled-components'; - -const RegistryIcon = withTheme(({ width, height }) => { - return ( - - - - ); -}); - -export { RegistryIcon }; diff --git a/src/components/icons/ReloadIcon.js b/src/components/icons/ReloadIcon.js deleted file mode 100644 index 0f1f66b..0000000 --- a/src/components/icons/ReloadIcon.js +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import { withTheme } from 'styled-components'; - -const ReloadIcon = withTheme(({ width, height, fill }) => { - return ( - - ); -}); - -export { ReloadIcon }; diff --git a/src/components/icons/RemoveIcon.js b/src/components/icons/RemoveIcon.js deleted file mode 100644 index 846d389..0000000 --- a/src/components/icons/RemoveIcon.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import { withTheme } from 'styled-components'; - -const RemoveIcon = withTheme(({ width, height, fill, ...props }) => { - return ( - - - - ); -}); - -export { RemoveIcon }; diff --git a/src/components/icons/SuccessIcon.js b/src/components/icons/SuccessIcon.js deleted file mode 100644 index 7ef4f62..0000000 --- a/src/components/icons/SuccessIcon.js +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import { withTheme } from 'styled-components'; - - -const SuccessIcon = withTheme(({ width, height, theme }) => { - return ( - <> - - - - - - ); -}); - -export { SuccessIcon }; diff --git a/src/components/icons/SuccessIconSmall.js b/src/components/icons/SuccessIconSmall.js deleted file mode 100644 index 07edda8..0000000 --- a/src/components/icons/SuccessIconSmall.js +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import { withTheme } from 'styled-components'; - - -const SuccessIconSmall = withTheme(({ width, height, theme }) => { - return ( - <> - - - - - ); -}); - -export { SuccessIconSmall }; \ No newline at end of file diff --git a/src/components/icons/ThreeDotsIcon.js b/src/components/icons/ThreeDotsIcon.js deleted file mode 100644 index 3fe6e2b..0000000 --- a/src/components/icons/ThreeDotsIcon.js +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import { withTheme } from 'styled-components'; - -const ThreeDotsIcon = withTheme(({ width, height }) => { - return ( - - - - ); -}); - -export { ThreeDotsIcon }; diff --git a/src/components/icons/UploadIcon.js b/src/components/icons/UploadIcon.js deleted file mode 100644 index 357b47a..0000000 --- a/src/components/icons/UploadIcon.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import { withTheme } from 'styled-components'; - -import { IconColorsWrapper } from './IconColorsWrapper'; - -const UploadIcon = withTheme(({ width, height, ...props }) => { - return ( - - - - - - ); -}); - -export { UploadIcon }; diff --git a/src/components/icons/WarehouseIcon.js b/src/components/icons/WarehouseIcon.js deleted file mode 100644 index a7a778c..0000000 --- a/src/components/icons/WarehouseIcon.js +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -import { withTheme } from 'styled-components'; - -const WarehouseIcon = withTheme(({ width, height }) => { - return ( - - - - - - ); -}); - -export { WarehouseIcon }; diff --git a/src/components/icons/WarningIcon.js b/src/components/icons/WarningIcon.js deleted file mode 100644 index 5348fab..0000000 --- a/src/components/icons/WarningIcon.js +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import { withTheme } from 'styled-components'; - - -const WarningIcon = withTheme(({ width, height, theme }) => { - return ( - <> - - - - - - ); -}); - -export { WarningIcon }; diff --git a/src/components/icons/WarningIconSmall.js b/src/components/icons/WarningIconSmall.js deleted file mode 100644 index 8a394cf..0000000 --- a/src/components/icons/WarningIconSmall.js +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import { withTheme } from 'styled-components'; - - -const WarningIconSmall = withTheme(({ width, height, theme }) => { - return ( - <> - - - - - ); -}); - -export { WarningIconSmall }; diff --git a/src/components/icons/index.js b/src/components/icons/index.js deleted file mode 100644 index 2faf5fb..0000000 --- a/src/components/icons/index.js +++ /dev/null @@ -1,39 +0,0 @@ -export * from './LightThemeIcon'; -export * from './DarkThemeIcon'; -export * from './MagnifyGlassIcon'; -export * from './LocaleIcon'; -export * from './InfoIcon'; -export * from './InfoIconSmall'; -export * from './SuccessIcon'; -export * from './SuccessIconSmall'; -export * from './ErrorIcon'; -export * from './ErrorIconSmall'; -export * from './CloseIcon'; -export * from './WarningIconSmall'; -export * from './WarningIcon'; -export * from './AppLogo'; -export * from './AddIcon'; -export * from './MagnifyGlassIconWhite'; -export * from './ArrowDownIcon'; -export * from './CheckIcon'; -export * from './ThreeDotsIcon'; -export * from './CloseIconWithBorder'; -export * from './Divider'; -export * from './EllipseIcon'; -export * from './MinusIcon'; -export * from './DownloadIcon'; -export * from './EllipsisMenuIcon'; -export * from './UploadIcon'; -export * from './WarehouseIcon'; -export * from './RegistryIcon'; -export * from './DescriptionIcon'; -export * from './AddIconCircle'; -export * from './OrganizationIcon'; -export * from './CopyIcon'; -export * from './LinkIcon'; -export * from './ReloadIcon'; -export * from './AscendingClockIcon'; -export * from './DescendingClockIcon'; -export * from './EditIcon'; -export * from './RemoveIcon'; -export * from './IconColorsWrapper'; diff --git a/src/components/input/DateSelect.js b/src/components/input/DateSelect.js deleted file mode 100644 index 9c134cc..0000000 --- a/src/components/input/DateSelect.js +++ /dev/null @@ -1,113 +0,0 @@ -import React from 'react'; -import DateAdapter from '@mui/lab/AdapterDayjs'; -import { LocalizationProvider } from '@mui/x-date-pickers'; -import styled, { css, withTheme } from 'styled-components'; -import TextField from '@mui/material/TextField'; -import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker'; - -import { getIsDateValid, formatDate, getISODate } from '../../utils/dateUtils'; - -const DateSelectVariantEnum = { - error: 'error', -}; - -const StyledTextField = styled(TextField)` - width: 100%; - - // set height depending on props - .MuiOutlinedInput-root, - .MuiInputBase-root { - height: ${props => { - if (props.size === 'large') return '40px'; - if (props.size === 'small') return '24px'; - return '32px'; - }}; - border-radius: 0.125rem; - border: 0.0625rem solid #d9d9d9; - } - - ${props => { - if (props.disabled) { - // disabled background color - return css` - .MuiOutlinedInput-root, - .MuiInputBase-root { - background-color: #f5f5f5; - } - `; - } else if (props.dateselectvariant === DateSelectVariantEnum.error) { - // error variant borders - return css` - .MuiOutlinedInput-root, - .MuiInputBase-root { - border: 1px solid ${props.theme.colors.default.status.error.primary}; - } - - .MuiOutlinedInput-root:focus-within, - .MuiInputBase-root:focus-within { - border: 1px solid #f5222d; - box-shadow: 0px 0px 4px rgba(245, 34, 45, 0.5); - } - `; - } else { - // default borders - return css` - .MuiOutlinedInput-root:hover, - .MuiInputBase-root:hover { - border: 1px solid #40a9ff; - } - - .MuiOutlinedInput-root:focus-within, - .MuiInputBase-root:focus-within { - border: 1px solid #1890ff; - box-shadow: 0px 0px 4px rgba(24, 144, 255, 0.5); - } - `; - } - }} - - // remove inner mui border - .MuiOutlinedInput-notchedOutline { - border: 0; - } -`; - -const DateSelect = withTheme( - ({ - size = 'default', - disabled, - dateValue, - setDateValue, - variant, - onBlur, - name, - }) => ( - - - getIsDateValid(newValue) - ? setDateValue(formatDate(newValue)) - : setDateValue(newValue) - } - disabled={disabled} - renderInput={params => ( - - )} - /> - - ), -); - -export { DateSelect, DateSelectVariantEnum }; diff --git a/src/components/input/FormikError.js b/src/components/input/FormikError.js deleted file mode 100644 index bc5d8c3..0000000 --- a/src/components/input/FormikError.js +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; -import { formatValidationError } from '../../utils/stringUtils'; -import { useIntl } from 'react-intl'; -import { ErrorMessage } from 'formik'; - -import { Body } from '../typography'; - -const FormikError = ({ name }) => { - if (!name) { - return null; - } - - const intl = useIntl(); - - const getTranslatedOrFormattedError = error => { - const isErrorOfTranslationIdType = error - ? error.includes('yup-validation-') - : false; - if (isErrorOfTranslationIdType) { - return intl.formatMessage({ id: error }); - } - /* fallback in case error is not of translation id type */ - return formatValidationError(error); - }; - - return ( - - {msg => ( - - {getTranslatedOrFormattedError(msg)} - - )} - - ); -}; - -export { FormikError }; diff --git a/src/components/input/PrimaryButton.js b/src/components/input/PrimaryButton.js deleted file mode 100644 index 810b6c0..0000000 --- a/src/components/input/PrimaryButton.js +++ /dev/null @@ -1,126 +0,0 @@ -import React from 'react'; -import { useSelector } from 'react-redux'; -import styled, { withTheme, css } from 'styled-components'; -import { CircularProgress } from '@mui/material'; -import { ButtonText } from '../typography'; - -const Button = styled('button')` - display: flex; - justify-content: space-between; - align-items: center; - flex-direction: row; - max-width: 100%; - background-color: ${props => - props.danger ? '#FF4D4F' : props.theme.colors.default.primaryDark}; - border: 1px solid #1a8385; - border-radius: 5px; - padding: 10px; - height: 32px; - cursor: pointer; - - ${props => props.size === 'large' && `height: 40px !important;`}; - ${props => props.size === 'small' && `height: 28px !important;`}; - - ${props => props.size === 'large' && `padding: 15px !important;`}; - ${props => props.size === 'small' && `padding: 3px !important;`}; - - &:hover { - background-color: ${props => - props.danger ? '#FF7875' : props.theme.colors.default.primary}; - } - - &:active { - background-color: ${props => - props.danger ? '#F5222D' : props.theme.colors.default.primary}; - } - - ${props => - props.loading && - ` - background-color: ${props => (props.danger ? '#FF7875' : '#40A9FF')}; - opacity: 0.65; - `} - - &:disabled { - background-color: #f5f5f5; - border: 1px solid #d9d9d9; - box-sizing: border-box; - cursor: default; - } - - ${props => { - if (props.type === 'default') { - if (props.loading) { - return ` - background-color: white; - :hover, :active { - background-color: white; - }; - h4 { color: #BFBFBF }; - border: 1px solid #e5e5e5; - `; - } - return css` - background-color: white; - :hover, - :active { - background-color: white; - } - - border: 1px solid #e5e5e5; - - h4 { - color: ${props.theme.colors.default.primaryDark}; - } - h4:hover, - h4:active { - color: ${props.theme.colors.default.primary}; - } - `; - } - }}; -`; - -const PrimaryButton = withTheme( - ({ - label, - loading, - icon, - size, - danger, - disabled, - onClick, - type = 'primary', - }) => { - const appStore = useSelector(state => state); - return ( - - ); - }, -); - -export { PrimaryButton }; diff --git a/src/components/input/SearchInput.js b/src/components/input/SearchInput.js deleted file mode 100644 index a62398e..0000000 --- a/src/components/input/SearchInput.js +++ /dev/null @@ -1,144 +0,0 @@ -import _ from 'lodash'; -import React from 'react'; -import { useIntl } from 'react-intl'; -import { useSelector } from 'react-redux'; -import styled, { withTheme } from 'styled-components'; - -import { MagnifyGlassIcon, MagnifyGlassIconWhite } from '../icons'; - -const Input = styled('input')` - color: ${props => props.theme.colors[props.selectedTheme].onSurface}; - transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - background-color: transparent; - display: flex; - border: 1px solid #d9d9d9; - justify-content: center; - border-top-left-radius: 0.1rem; - border-bottom-left-radius: 0.1rem; - padding-left: 0.75rem; - font-size: 1rem; - margin: 0; - box-sizing: border-box; - ${props => - (props.size === 'large' && 'width: 31.5625rem;height:2.5rem') || - (props.size === 'default' && 'width: 32.0625rem;height:2rem') || - (props.size === 'small' && 'width: 32.5625rem;height:1.5rem')}; - - &:focus { - outline: none; - } - - &::placeholder { - font-family: ${props => props.theme.typography.primary.regular}; - color: ${props => - props.theme.hexToRgba( - props.theme.colors[props.selectedTheme].onSurface, - 0.25, - )}; - } -`; - -const SearchIconContainer = styled('div')` - cursor: pointer; - display: flex; - justify-content: center; - align-items: center; - border-top-right-radius: 0.1rem; - border-bottom-right-radius: 0.1rem; - - ${props => props.outline && 'border: 0.0625rem solid #d9d9d9;'}; - border-left-style: none; - ${props => - (props.size === 'large' && 'width: 2.6875rem;height:2.5rem') || - (props.size === 'default' && 'width: 2.1875rem;height:2rem') || - (props.size === 'small' && 'width: 1.6875rem;height:1.5rem')}; - - ${props => - (props.buttonText && props.size === 'large' && 'width:5.0625rem;') || - (props.buttonText && props.size === 'default' && 'width:5.0625rem;') || - (props.buttonText && props.size === 'small' && 'width:5.0625rem;')}; - - ${props => - (props.usePrimaryButton && - props.size === 'large' && - 'background-color: #1890FF;') || - (props.usePrimaryButton && - props.size === 'default' && - 'background-color: #1890FF;') || - (props.usePrimaryButton && - props.size === 'small' && - 'background-color: #1890FF;')}; - - box-sizing: border-box; - ${props => props.disabled && `cursor: default; color: #d9d9d9;`} -`; - -const SearchContainer = styled('div')` - font-family: ${props => props.theme.typography.primary.regular}; - display: flex; - justify-content: center; - align-items: center; - padding: 0; - margin: 0; -`; - -const ButtonSearchText = styled('p')` - margin: 0; - display: flex; - justify-content: center; - align-items: center; - font-size: 1rem; - width: 3.125rem; - color: ${props => (props.usePrimaryButton ? props.theme.colors.default.onButton : props.theme.colors.default.onSurface)}; - box-sizing: border-box; -`; - -const SearchInput = withTheme( - ({ - usePrimaryButton = false, - buttonText, - onChange = _.noop, - size = 'default', - outline = false, - onSearch = _.noop, - disabled = false, - }) => { - const intl = useIntl(); - const appStore = useSelector(state => state); - - return ( - - - - {(buttonText && ( - - {buttonText} - - )) || - (!buttonText && usePrimaryButton ? ( - - ) : ( - - ))} - - - ); - }, -); - -export { SearchInput }; diff --git a/src/components/input/SearchInputField.js b/src/components/input/SearchInputField.js deleted file mode 100644 index de1f788..0000000 --- a/src/components/input/SearchInputField.js +++ /dev/null @@ -1,66 +0,0 @@ -import React from 'react'; -import { useIntl } from 'react-intl'; -import { useSelector } from 'react-redux'; -import styled, { withTheme } from 'styled-components'; - -import { MagnifyGlassIcon } from '../icons'; - -const Input = styled('input')` - border: 1px solid - ${props => - props.theme.hexToRgba( - props.theme.colors[props.selectedTheme].onSurface, - 0.2, - )}; - color: ${props => props.theme.colors[props.selectedTheme].onSurface}; - transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - background-color: transparent; - display: flex; - justify-content: center; - border-radius: 0.25rem; - padding: 0.625rem; - font-size: 1rem; - padding-right: 1.875rem; - margin: 0; - - &:focus { - outline: ${props => props.theme.colors[props.selectedTheme].onSurface} solid - 0.0625rem; - } - - &::placeholder { - font-weight: bold; - color: ${props => - props.theme.hexToRgba( - props.theme.colors[props.selectedTheme].onSurface, - 0.25, - )}; - } -`; - -const SearchIconContainer = styled('div')` - position: absolute; - top: 0.625rem; - right: -0.9375rem; -`; - -const SearchInputField = withTheme(({ onChange }) => { - const intl = useIntl(); - const appStore = useSelector(state => state); - - return ( -
- - - - -
- ); -}); - -export { SearchInputField }; diff --git a/src/components/input/SelectCreatable.js b/src/components/input/SelectCreatable.js deleted file mode 100644 index 60ac476..0000000 --- a/src/components/input/SelectCreatable.js +++ /dev/null @@ -1,244 +0,0 @@ -import React, { useCallback, useMemo } from 'react'; -import CreatableSelect from 'react-select/creatable'; -import Select from 'react-select'; -import styled, { css, withTheme } from 'styled-components'; -import { useIntl } from 'react-intl'; - -import { Body } from '../typography'; - -const SelectCreatableVariantEnum = { - disabled: 'disabled', - error: 'error', - default: 'default', -}; - -const SelectCreatableSizeEnum = { - large: 'large', - default: 'default', - small: 'small', -}; - -const StyledCreatableSelect = styled(CreatableSelect)` - ${props => { - if (props.variant === SelectCreatableVariantEnum.error) { - // error variant style - return css` - div[class*='control'] { - border-radius: 0.125rem; - border: 1px solid ${props.theme.colors.default.status.error.primary}; - } - - div[class*='control']:focus-within { - border: 1px solid #f5222d; - box-shadow: 0px 0px 4px rgba(245, 34, 45, 0.5); - } - `; - } else { - // default variant style - return css` - div[class*='control'] { - border-radius: 0.125rem; - border: 0.0625rem solid #d9d9d9; - } - - div[class*='control']:hover { - border: 1px solid #40a9ff; - } - - div[class*='control']:focus-within { - border: 1px solid #1890ff; - box-shadow: 0px 0px 4px rgba(24, 144, 255, 0.5); - } - `; - } - }}; - - ${props => { - if (props.size === SelectCreatableSizeEnum.large) { - return css` - div[class*='control'] { - height: ${props => (props.isMulti ? 'auto' : '2.5rem')}; - font-size: 1rem; - line-height: 1.5rem; - } - `; - } else if (props.size === SelectCreatableSizeEnum.small) { - return css` - div[class*='control'] { - height: ${props => (props.isMulti ? 'auto' : '1.5rem')}; - font-size: 0.875rem; - line-height: 1.375rem; - } - `; - } else { - return css` - div[class*='control'] { - height: ${props => (props.isMulti ? 'auto' : '2rem')}; - font-size: 0.875rem; - line-height: 1.375rem; - } - `; - } - }}; - - ::placeholder { - color: #8c8c8c; - } -`; - -const StyledSelect = styled(Select)` - ${props => { - if (props.variant === SelectCreatableVariantEnum.error) { - // error variant style - return css` - div[class*='control'] { - border-radius: 0.125rem; - border: 1px solid ${props.theme.colors.default.status.error.primary}; - } - - div[class*='control']:focus-within { - border: 1px solid #f5222d; - box-shadow: 0px 0px 4px rgba(245, 34, 45, 0.5); - } - `; - } else { - // default variant style - return css` - div[class*='control'] { - border-radius: 0.125rem; - border: 0.0625rem solid #d9d9d9; - } - - div[class*='control']:hover { - border: 1px solid #40a9ff; - } - - div[class*='control']:focus-within { - border: 1px solid #1890ff; - box-shadow: 0px 0px 4px rgba(24, 144, 255, 0.5); - } - `; - } - }}; - - ${props => { - if (props.size === SelectCreatableSizeEnum.large) { - return css` - div[class*='control'] { - height: ${props => (props.isMulti ? 'auto' : '2.5rem')}; - font-size: 1rem; - line-height: 1.5rem; - } - `; - } else if (props.size === SelectCreatableSizeEnum.small) { - return css` - div[class*='control'] { - height: ${props => (props.isMulti ? 'auto' : '1.5rem')}; - font-size: 0.875rem; - line-height: 1.375rem; - } - `; - } else { - return css` - div[class*='control'] { - height: ${props => (props.isMulti ? 'auto' : '2rem')}; - font-size: 0.875rem; - line-height: 1.375rem; - } - `; - } - }}; - - ::placeholder { - color: #8c8c8c; - } -`; - -const SelectCreatable = withTheme( - ({ - variant, - options, - onChange, - onBlur, - isMulti = false, - isCreatable = true, - isClearable = true, - placeholder, - selected, - size, - }) => { - const intl = useIntl(); - const placeholderText = useMemo( - () => - placeholder || - ` -- ${intl.formatMessage({ - id: 'select', - })} -- `, - [placeholder], - ); - - const optionsList = useMemo( - () => - options?.map(optionItem => ({ - value: optionItem, - label: optionItem, - })) ?? [], - [options], - ); - - const value = useMemo(() => { - if (isMulti) { - return selected?.map(item => ({ value: item, label: item })) ?? []; - } else { - return selected ? { value: selected, label: selected } : ''; - } - }, [selected]); - - const handleChange = useCallback( - newValue => { - if (isMulti) { - onChange(newValue?.map(selectedItem => selectedItem.value) ?? []); - } else { - onChange(newValue?.value ?? ''); - } - }, - [onChange], - ); - - return ( - - {isCreatable && ( - - )} - {!isCreatable && ( - - )} - - ); - }, -); - -export { SelectCreatable, SelectCreatableVariantEnum, SelectCreatableSizeEnum }; diff --git a/src/components/input/StandardInput.js b/src/components/input/StandardInput.js deleted file mode 100644 index 0772329..0000000 --- a/src/components/input/StandardInput.js +++ /dev/null @@ -1,256 +0,0 @@ -import React, { useCallback, useState, useEffect } from 'react'; -import styled, { css, withTheme } from 'styled-components'; -import { - WarningIconSmall, - ErrorIconSmall, - SuccessIconSmall, -} from '../icons/index'; - -const InputSizeEnum = { - large: 'large', - default: 'default', - small: 'small', -}; - -const InputVariantEnum = { - default: 'default', - error: 'error', - warning: 'warning', - success: 'success', -}; - -const InputStateEnum = { - default: 'default', - hover: 'hover', - focused: 'focused', - typing: 'typing', - filled: 'filled', - disabled: 'disabled', -}; - -const StyledInputContainer = styled('div')` - display: flex; - flex-direction: row; - align-items: center; - background-color: white; - border: 1px solid #d9d9d9; - box-sizing: border-box; - border-radius: 0.125rem; - ${props => { - if (props.size == InputSizeEnum.small) { - return css` - height: 1.5rem; - padding: 0.0625rem 0.5rem 0.0625rem 0.5rem; - `; - } else if (props.size == InputSizeEnum.large) { - return css` - height: 2.5rem; - padding: 0.5rem 0.75rem 0.5rem 0.75rem; - `; - } else { - return css` - height: 2rem; - padding: 0.3125rem 0.75rem 0.3125rem 0.75rem; - `; - } - }}; - ${props => { - if (props.variant === InputVariantEnum.warning) { - if (props.inputState === InputStateEnum.default) { - return css` - border: 1px solid ${props.theme.colors.default.status.warning.primary}; - `; - } else if (props.inputState === InputStateEnum.hover) { - return css` - border: 1px solid #ffc53d; - `; - } else if ( - props.inputState === InputStateEnum.focused || - props.inputState === InputStateEnum.typing - ) { - return css` - border: 1px solid ${props.theme.colors.default.status.warning.primary}; - box-shadow: 0px 0px 4px rgba(250, 173, 20, 0.5); - `; - } else if (props.inputState === InputStateEnum.disabled) { - return css` - background: #f5f5f5; - `; - } - } else if (props.variant === InputVariantEnum.error) { - if (props.inputState === InputStateEnum.default) { - return css` - border: 1px solid #f5222d; - `; - } else if (props.inputState === InputStateEnum.hover) { - return css` - border: 1px solid #ff4d4f; - `; - } else if ( - props.inputState === InputStateEnum.focused || - props.inputState === InputStateEnum.typing - ) { - return css` - border: 1px solid #f5222d; - box-shadow: 0px 0px 4px rgba(245, 34, 45, 0.5); - `; - } else if (props.inputState === InputStateEnum.disabled) { - return css` - background: #f5f5f5; - `; - } - } else { - // else for InputVariantEnum.default - if (props.inputState === InputStateEnum.hover) { - return css` - border: 1px solid #40a9ff; - `; - } else if ( - props.inputState === InputStateEnum.focused || - props.inputState === InputStateEnum.typing - ) { - return css` - border: 1px solid #1890ff; - box-shadow: 0px 0px 4px rgba(24, 144, 255, 0.5); - `; - } else if (props.inputState === InputStateEnum.disabled) { - return css` - background: #f5f5f5; - `; - } - } - }}; -`; - -const StyledInput = styled('input')` - border-color: white; - width: 100%; - height: 100%; - border-style: none; - border: none; - margin: 0; - box-sizing: border-box; - font-style: normal; - font-weight: normal; - color: #262626; - :focus { - outline: none; - } - ::placeholder { - color: #8c8c8c; - } - :disabled { - background: #f5f5f5; - } - ${props => { - if (props.size == InputSizeEnum.large) { - return css` - font-size: 1rem; - line-height: 1.5rem; - `; - } else if (props.size == InputSizeEnum.small) { - return css` - font-size: 0.875rem; - line-height: 1.375rem; - `; - } else { - return css` - font-size: 0.875rem; - line-height: 1.375rem; - `; - } - }}; -`; - -const StyledSuffixPrefixContainer = styled('div')` - margin-right: 0.375rem; -`; - -const StandardInput = withTheme( - ({ - size = InputSizeEnum.default, - placeholderText, - variant = InputVariantEnum.default, - state = InputStateEnum.default, - suffix, - prefix, - value, - type, - onChange, - onBlur, - name, - }) => { - const [inputState, setInputState] = useState(state); - - useEffect(() => { - setInputState(state); - }, [state]); - - const onMouseEnter = useCallback(() => { - inputState !== InputStateEnum.focused && - inputState !== InputStateEnum.disabled && - inputState !== InputStateEnum.typing && - setInputState(InputStateEnum.hover); - }, [inputState]); - - const onMouseLeave = useCallback(() => { - inputState !== InputStateEnum.focused && - inputState !== InputStateEnum.typing && - inputState !== InputStateEnum.disabled && - setInputState(InputStateEnum.default); - }, [inputState]); - - const onContainerBlur = useCallback(() => { - inputState !== InputStateEnum.default && - inputState !== InputStateEnum.disabled && - setInputState(InputStateEnum.default); - }, [inputState]); - - const onFocus = useCallback(() => { - inputState !== InputStateEnum.disabled && - setInputState(InputStateEnum.focused); - }, [inputState]); - - return ( - - {prefix && ( - {prefix} - )} - onChange(event.target.value)} - onBlur={onBlur} - name={name} - /> - {suffix && ( - {suffix} - )} - {variant === InputVariantEnum.warning && ( - - )} - {variant === InputVariantEnum.error && ( - - )} - {variant === InputVariantEnum.success && ( - - )} - - ); - }, -); - -export { StandardInput, InputSizeEnum, InputStateEnum, InputVariantEnum }; diff --git a/src/components/input/Textarea.js b/src/components/input/Textarea.js deleted file mode 100644 index 64b48cd..0000000 --- a/src/components/input/Textarea.js +++ /dev/null @@ -1,143 +0,0 @@ -import React, { useState, useCallback } from 'react'; -import { useSelector } from 'react-redux'; -import styled, { withTheme, css } from 'styled-components'; - -const TextareaStateEnum = { - default: 'default', - hover: 'hover', - focused: 'focused', - typing: 'typing', - filled: 'filled', - disabled: 'disabled', -}; - -const TextareaSizeEnum = { - large: 'large', - default: 'default', - small: 'small', -}; - -const StyledTextarea = styled('textarea')` - box-sizing: border-box; - border: 0.0625rem solid #d9d9d9; - resize: none; - color: #262626; - border-radius: 0.125rem; - ::placeholder { - font-family: ${props => props.theme.typography.primary.regular}; - color: #8c8c8c; - } - :focus { - outline: none; - } - ${props => { - if (props.size === TextareaSizeEnum.large) { - return css` - padding: 0.5rem 0.75rem 0.5rem 0.75rem; - font-family: ${props => props.theme.typography.primary.regular}; - font-style: normal; - font-weight: 400; - height: 4rem; - width: 100%; - font-size: 1rem; - line-height: 1.5rem; - `; - } else if (props.size === TextareaSizeEnum.small) { - return css` - padding: 0.0625rem 0.5rem 0.0625rem 0.5rem; - font-family: ${props => props.theme.typography.primary.regular}; - font-style: normal; - font-weight: 400; - height: 2.875rem; - font-size: 0.875rem; - line-height: 1.375rem; - `; - } else { - return css` - padding: 0.3125rem 0.75rem 0.3125rem 0.75rem; - font-family: ${props => props.theme.typography.primary.regular}; - font-style: normal; - font-weight: 400; - height: 3.375rem; - font-size: 0.875rem; - line-height: 1.375rem; - `; - } - }}; - ${props => { - if (props.state === TextareaStateEnum.hover) { - return `border: 1px solid #40A9FF;`; - } else if ( - props.state === TextareaStateEnum.typing || - props.state === TextareaStateEnum.focused - ) { - return ` - border: 1px solid #1890FF; - box-shadow: 0px 0px 4px rgba(24, 144, 255, 0.5); - `; - } - }}; -`; - -const Textarea = withTheme( - ({ - state = TextareaStateEnum.default, - size = TextareaSizeEnum.default, - value, - placeholder, - onChange, - name, - onBlur, - }) => { - const [textareaState, setTextareaState] = useState(state); - const appStore = useSelector(state => state); - - const onMouseEnter = useCallback(() => { - textareaState !== TextareaStateEnum.focused && - textareaState !== TextareaStateEnum.disabled && - textareaState !== TextareaStateEnum.typing && - setTextareaState(TextareaStateEnum.hover); - }, [textareaState]); - - const onMouseLeave = useCallback(() => { - textareaState !== TextareaStateEnum.focused && - textareaState !== TextareaStateEnum.typing && - textareaState !== TextareaStateEnum.disabled && - setTextareaState(TextareaStateEnum.default); - }, [textareaState]); - - const onBlurCallback = useCallback( - e => { - textareaState !== TextareaStateEnum.default && - textareaState !== TextareaStateEnum.disabled && - setTextareaState(TextareaStateEnum.default); - onBlur && onBlur(e); - }, - [textareaState, onBlur], - ); - - const onFocus = useCallback(() => { - textareaState !== TextareaStateEnum.disabled && - setTextareaState(TextareaStateEnum.focused); - }, []); - - return ( - - ); - }, -); - -export { Textarea, TextareaSizeEnum, TextareaStateEnum }; diff --git a/src/components/input/UploadFileInput.js b/src/components/input/UploadFileInput.js deleted file mode 100644 index b23bdd1..0000000 --- a/src/components/input/UploadFileInput.js +++ /dev/null @@ -1,55 +0,0 @@ -import React, { useCallback } from 'react'; -import styled from 'styled-components'; - -import { UploadIcon, SuccessIcon, Body } from '..'; - -const StyledDiv = styled('div')` - border: 1px dotted #d9d9d9; - display: flex; - justify-content: center; - align-items: center; - height: 120px; - & label { - cursor: pointer; - } -`; - -const StyledInput = styled('input')` - visibility: hidden; - width: 0px; - height: 0px; -`; - -const StyledNameContainer = styled('div')` - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - gap: 2px; -`; - -const UploadFileInput = ({ file, onChange }) => { - const onFileInputChange = useCallback(e => { - if (e.target.value && e.target.value !== '') { - const file = e.target.files[0]; - onChange(file); - } - }, []); - - return ( - - - - - ); -}; - -export { UploadFileInput }; diff --git a/src/components/input/UploadPngInput.js b/src/components/input/UploadPngInput.js deleted file mode 100644 index 236a5c6..0000000 --- a/src/components/input/UploadPngInput.js +++ /dev/null @@ -1,50 +0,0 @@ -import React, { useCallback } from 'react'; -import styled from 'styled-components'; - -import { UploadIcon, OrganizationLogo } from '..'; - -const StyledDiv = styled('div')` - border: 1px dotted #d9d9d9; - display: flex; - justify-content: center; - align-items: center; - height: 120px; - & label { - cursor: pointer; - } -`; - -const StyledInput = styled('input')` - visibility: hidden; - width: 0px; - height: 0px; -`; - -const UploadPngInput = ({ icon, onChange }) => { - const onPngInputChange = useCallback(e => { - if (e.target.value && e.target.value !== '') { - const fileNameIsValid = /\.png$/.test(e.target.value); - if (fileNameIsValid) { - const file = e.target.files[0]; - onChange(file); - } - } - }, []); - - return ( - - - - - ); -}; - -export { UploadPngInput }; diff --git a/src/components/input/YearSelect.js b/src/components/input/YearSelect.js deleted file mode 100644 index 8e98cb2..0000000 --- a/src/components/input/YearSelect.js +++ /dev/null @@ -1,101 +0,0 @@ -import React from 'react'; -import DateAdapter from '@mui/lab/AdapterDayjs'; -import { LocalizationProvider } from '@mui/x-date-pickers'; -import styled, { css, withTheme } from 'styled-components'; -import TextField from '@mui/material/TextField'; -import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker'; - -const YearSelectVariantEnum = { - error: 'error', -}; - -const StyledTextField = styled(TextField)` - width: 100%; - - // set height depending on props - .MuiOutlinedInput-root, - .MuiInputBase-root { - height: ${props => { - if (props.size === 'large') return '40px'; - if (props.size === 'small') return '24px'; - return '32px'; - }}; - border-radius: 0.125rem; - border: 0.0625rem solid #d9d9d9; - } - - ${props => { - if (props.disabled) { - // disabled background color - return css` - .MuiOutlinedInput-root, - .MuiInputBase-root { - background-color: #f5f5f5; - } - `; - } else if (props.dateselectvariant === YearSelectVariantEnum.error) { - // error variant borders - return css` - .MuiOutlinedInput-root, - .MuiInputBase-root { - border: 1px solid ${props.theme.colors.default.status.error.primary}; - } - - .MuiOutlinedInput-root:focus-within, - .MuiInputBase-root:focus-within { - border: 1px solid #f5222d; - box-shadow: 0px 0px 4px rgba(245, 34, 45, 0.5); - } - `; - } else { - // default borders - return css` - .MuiOutlinedInput-root:hover, - .MuiInputBase-root:hover { - border: 1px solid #40a9ff; - } - - .MuiOutlinedInput-root:focus-within, - .MuiInputBase-root:focus-within { - border: 1px solid #1890ff; - box-shadow: 0px 0px 4px rgba(24, 144, 255, 0.5); - } - `; - } - }} - - // remove inner mui border - .MuiOutlinedInput-notchedOutline { - border: 0; - } -`; - -const YearSelect = withTheme( - ({ size, yearValue, onChange, disabled, variant, onBlur, name }) => ( - - - newValue ? onChange(newValue.$y) : onChange(null) - } - disabled={disabled} - renderInput={params => ( - - )} - /> - - ), -); - -export { YearSelect, YearSelectVariantEnum }; diff --git a/src/components/input/index.js b/src/components/input/index.js deleted file mode 100644 index 0cb7c62..0000000 --- a/src/components/input/index.js +++ /dev/null @@ -1,11 +0,0 @@ -export * from './SearchInputField'; -export * from './PrimaryButton'; -export * from './StandardInput'; -export * from './SearchInput'; -export * from './Textarea'; -export * from './FormikError'; -export * from './SelectCreatable'; -export * from './UploadPngInput'; -export * from './UploadFileInput'; -export * from './YearSelect'; -export * from './DateSelect'; diff --git a/src/components/layout/AppContainer.js b/src/components/layout/AppContainer.js deleted file mode 100644 index 26d82c7..0000000 --- a/src/components/layout/AppContainer.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import {useSelector} from 'react-redux'; -import styled, {withTheme} from 'styled-components'; - -const Div = styled('div')` - background: ${props => props.theme.colors[props.selectedTheme].background}; - width: 100%; - height: 100%; -`; - -const AppContainer = withTheme(({children}) => { - const appStore = useSelector(state => state); - return
{children}
; -}); - -export {AppContainer}; diff --git a/src/components/layout/AppHeader.js b/src/components/layout/AppHeader.js deleted file mode 100644 index 29853b4..0000000 --- a/src/components/layout/AppHeader.js +++ /dev/null @@ -1,45 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; -import { useSelector } from 'react-redux'; - -import { LocaleSwitcher, AppLogo, Connect } from '../../components'; - -const AppHeaderContainer = styled('div')` - width: 100%; - height: 4rem; - background-color: ${props => props.theme.colors.default.onButton}; - width: 100%; - display: flex; - justify-content: space-between; - gap: 20px; - padding: 0rem 1.5rem; - box-sizing: border-box; -`; - -const ButtonsContainer = styled('div')` - display: flex; - justify-content: flex-end; - gap: 15px; - align-items: center; - - .MuiSelect-root, - .MuiSvgIcon-root { - color: ${props => props.theme.colors[props.selectedTheme].onSurface}; - } -`; - -const AppHeader = () => { - const appStore = useSelector(state => state); - - return ( - - - - - - - - ); -}; - -export { AppHeader }; diff --git a/src/components/layout/Dashboard.js b/src/components/layout/Dashboard.js deleted file mode 100644 index 1738596..0000000 --- a/src/components/layout/Dashboard.js +++ /dev/null @@ -1,46 +0,0 @@ -import React from 'react'; -import styled, { withTheme } from 'styled-components'; - -import { LeftNav, AppHeader, ErrorBoundary } from '../../components'; - -const Main = styled('div')` - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - background-color: ${props => props.theme.colors.default.gray4}; -`; - -const BodyText = styled('div')` - max-width: calc(100% - 3rem); - width: calc(100% - 3rem); - margin: 1.5rem; - background-color: ${props => props.theme.colors.default.onButton}; - overflow: hidden; - box-sizing: border-box; - padding: 0; -`; - -const InnerContainer = styled('div')` - display: flex; - height: 100%; - overflow: hidden; -`; - -const Dashboard = withTheme(({ children }) => { - return ( -
- {window.self === window.top && ( - - )} - - - - {children} - - -
- ); -}); - -export { Dashboard }; diff --git a/src/components/layout/ErrorBoundary.js b/src/components/layout/ErrorBoundary.js deleted file mode 100644 index 6c2163f..0000000 --- a/src/components/layout/ErrorBoundary.js +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; -import { FormattedMessage } from 'react-intl'; -import styled from 'styled-components'; - -const StyledContainer = styled('div')` - padding: 30px; -`; - -class ErrorBoundary extends React.Component { - constructor(props) { - super(props); - this.state = { error: null, errorInfo: null }; - } - - componentDidCatch(error, errorInfo) { - this.setState({ - error: error, - errorInfo: errorInfo, - }); - } - - render() { - if (this.state.errorInfo) { - return ( - -

- -

-
- {this.state.error && this.state.error.toString()} -
- {this.state.errorInfo.componentStack} -
- - ); - } - return this.props.children; - } -} - -export { ErrorBoundary }; diff --git a/src/components/layout/FormContainers.js b/src/components/layout/FormContainers.js deleted file mode 100644 index b3259bc..0000000 --- a/src/components/layout/FormContainers.js +++ /dev/null @@ -1,85 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; -import { FormattedMessage } from 'react-intl'; -import { Body } from '../../components'; - -export const ModalFormContainerStyle = styled('div')` - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - flex-wrap: wrap; - justify-content: center; - align-items: center; -`; - -export const FormContainerStyle = styled('div')` - display: flex; - flex-direction: column; - align-items: flex-start; -`; - -export const BodyContainer = styled('div')` - display: grid; - grid-template-columns: 320px 320px; - column-gap: 30px; -`; - -export const SpanTwoColumnsContainer = styled('div')` - grid-column: 1 / span 2; -`; - -export const SpanTwoDetailColumnsContainer = styled('div')` - width: 50%; - grid-column: 1 / span 2; -`; - -export const HrSpanTwoColumnsContainer = styled('div')` - grid-column: 1 / span 2; - margin: 10px 0; -`; - -export const RequiredContainer = styled('div')` - width: 42.5rem; -`; - -export const StyledLabelContainer = styled('div')` - margin-bottom: 0.5rem; - body { - color: #262626; - } -`; - -export const LabelContainer = styled('div')` - display: inline; - margin-right: 7px; -`; - -export const StyledFieldContainer = styled('div')` - padding-bottom: 1.25rem; -`; - -export const InputContainer = styled('div')` - width: 20rem; -`; - -export const StyledFieldRequired = styled('div')` - height: 35px; -`; - -export const FieldRequired = () => { - return ( - - - * - - - ); -}; - -export const StyledFormContainer = styled('div')` - display: flex; - flex-direction: column; - gap: 10px; - padding-top: 10px; -`; diff --git a/src/components/layout/IndeterminateProgressOverlay.js b/src/components/layout/IndeterminateProgressOverlay.js deleted file mode 100644 index 393223e..0000000 --- a/src/components/layout/IndeterminateProgressOverlay.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import { CircularProgress } from '@mui/material'; -import styled from 'styled-components'; - -const Container = styled('div')` - width: 100%; - height: 100%; - position: absolute; - background-color: rgba(0, 0, 0, 0.25); - display: flex; - justify-content: center; - align-items: center; - z-index: 7000; -`; - -const IndeterminateProgressOverlay = () => ( -
- - - -
-); - -export { IndeterminateProgressOverlay }; diff --git a/src/components/layout/LeftNav.js b/src/components/layout/LeftNav.js deleted file mode 100644 index 79d6e54..0000000 --- a/src/components/layout/LeftNav.js +++ /dev/null @@ -1,87 +0,0 @@ -import React from 'react'; -import styled, { withTheme } from 'styled-components'; -import { Link, useLocation } from 'react-router-dom'; -import { FormattedMessage } from 'react-intl'; - -import { Body } from '..'; -import constants from '../../constants'; - -const Container = styled('div')` - display: flex; - flex-direction: row; - height: 100%; -`; - -const StyledAppVersion = styled('div')` - position: absolute; - bottom: 12px; - left: 50px; -`; - -const NavContainer = styled('div')` - padding-top: 40px; - width: 16rem; - min-width: 16rem; - height: 100%; - background-color: ${props => props.theme.colors.default.leftNav.bg}; -`; - -const MenuItem = styled(Link)` - background: ${props => - props.selected - ? props.theme.colors.default.leftNav.highlight - : 'transparent'}; - :hover { - background: ${props => props.theme.colors.default.primary}; - } - padding: 0.5625rem 0rem 0.75rem 3.25rem; - text-transform: uppercase; - color: ${props => - props.selected - ? props.theme.colors.default.primary - : props.theme.colors.default.leftNav.text}; - font-family: ${props => props.theme.typography.primary.bold}; - cursor: pointer; - display: block; - text-decoration: none; - width: calc(100% - 1.625rem); - margin: auto; - font-size: 1.1rem; - box-sizing: border-box; - border-radius: 0.625rem; - margin-bottom: 0.625rem; -`; - -const LeftNav = withTheme(({ children }) => { - const location = useLocation(); - - return ( - - - - - -
- - - - - {children} - - - {typeof process !== 'undefined' && - process?.env?.REACT_APP_VERSION && - `v${process?.env?.REACT_APP_VERSION}`} - - - - ); -}); - -export { LeftNav }; diff --git a/src/components/layout/TabPanel.js b/src/components/layout/TabPanel.js deleted file mode 100644 index dd63acc..0000000 --- a/src/components/layout/TabPanel.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; - -const StyledContainer = styled('div')` - height: ${props => (props.noHeight ? '' : '100%')}; -`; - -const TabPanel = ({ children, value, index, noHeight, ...other }) => { - return ( - - ); -}; - -export { TabPanel }; diff --git a/src/components/layout/Tabs.js b/src/components/layout/Tabs.js deleted file mode 100644 index ca41297..0000000 --- a/src/components/layout/Tabs.js +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -import MuiTabs from '@mui/material/Tabs'; -import Tab from '@mui/material/Tab'; -import styled from 'styled-components'; - -const StyledTabs = styled(MuiTabs)` - .MuiButtonBase-root { - color: #6e7d7f; - font-family: ${props => props.theme.typography.primary.semiBold}; - } - - .MuiButtonBase-root:hover { - color: ${props => props.theme.colors.default.primary}; - } - - button.Mui-selected { - color: ${props => props.theme.colors.default.primary}; - } - - .MuiTabs-indicator { - background-color: ${props => props.theme.colors.default.primaryDark}; - } -`; - -const Tabs = ({ ...props }) => { - return ; -}; - -export { Tabs, Tab }; diff --git a/src/components/layout/index.js b/src/components/layout/index.js deleted file mode 100644 index 909539c..0000000 --- a/src/components/layout/index.js +++ /dev/null @@ -1,11 +0,0 @@ -export * from './AppContainer'; -export * from './IndeterminateProgressOverlay'; -export * from './Dashboard'; -export * from './TabPanel'; -export * from './Tabs'; -export * from './FormContainers'; -export * from './ErrorBoundary'; -export * from './AppHeader'; -export * from './AppHeader'; -export * from './LeftNav'; -export * from './AppHeader'; diff --git a/src/components/typography/Body.js b/src/components/typography/Body.js deleted file mode 100644 index f46c2cd..0000000 --- a/src/components/typography/Body.js +++ /dev/null @@ -1,60 +0,0 @@ -import React from 'react'; -import { useSelector } from 'react-redux'; -import styled, { withTheme, css } from 'styled-components'; - -const Text = styled('div')` - color: ${props => props.color || props.theme.colors.default.secondary}; - font-size: 16px; - font-family: ${props => props.theme.typography.primary.regular}; - font-weight: 400; - width: 100%; - line-height: 150%; - ${props => - props.size === 'Big' && - css` - font-size: 18px; - `} - ${props => - props.size === 'Bold' && - css` - font-weight: 700; - `} - ${props => - props.size === 'Small' && - css` - font-size: 14px; - `} - ${props => - props.size === 'Small Bold' && - css` - font-size: 14px; - font-weight: 700; - `} - ${props => - props.size === 'X-Small' && - css` - font-size: 12px; - `} - ${props => - props.size === 'X-Small Bold' && - css` - font-weight: 700; - font-size: 12px; - `} -`; - -const Body = withTheme(({ children, color, size, onClick }) => { - const appStore = useSelector(state => state); - return ( - - {children} - - ); -}); - -export { Body }; diff --git a/src/components/typography/ButtonText.js b/src/components/typography/ButtonText.js deleted file mode 100644 index 21eaa55..0000000 --- a/src/components/typography/ButtonText.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import { useSelector } from 'react-redux'; -import styled, { withTheme } from 'styled-components'; - -const Text = styled('h4')` - color: ${props => props.color || props.theme.colors.default.onSurface}; - font-size: 1rem; - font-family: ${props => props.theme.typography.primary.regular}; - line-height: 1.375rem; - font-style: normal; - font-weight: 400; - text-transform: capitalize; - margin: 0; - padding: 0; -`; - -const ButtonText = withTheme(({ children, color }) => { - const appStore = useSelector(state => state); - return ( - - {children} - - ); -}); - -export { ButtonText }; diff --git a/src/components/typography/H1.js b/src/components/typography/H1.js deleted file mode 100644 index 9f0e8e9..0000000 --- a/src/components/typography/H1.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import { useSelector } from 'react-redux'; -import styled, { withTheme } from 'styled-components'; - -const Text = styled('h1')` - color: ${props => props.color || props.theme.colors.default.secondary}; - font-size: 3.375rem; - font-family: ${props => props.theme.typography.primary.extraBold}; - font-style: normal; - font-weight: 800; - line-height: 150%; - letter-spacing: -0.0625rem; -`; - -const H1 = withTheme(({ children, color }) => { - const appStore = useSelector(state => state); - return ( - - {children} - - ); -}); - -export { H1 }; diff --git a/src/components/typography/H2.js b/src/components/typography/H2.js deleted file mode 100644 index 918bdc6..0000000 --- a/src/components/typography/H2.js +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import { useSelector } from 'react-redux'; -import styled, { withTheme } from 'styled-components'; - -const Text = styled('h2')` - color: ${props => props.color || props.theme.colors.default.secondary}; - font-size: 2rem; - font-family: ${props => props.theme.typography.primary.bold}; - font-weight: bold; - line-height: 3rem; - letter-spacing: -0.0625rem; -`; - -const H2 = withTheme(({ children, color }) => { - const appStore = useSelector(state => state); - return ( - - {children} - - ); -}); - -export { H2 }; diff --git a/src/components/typography/H3.js b/src/components/typography/H3.js deleted file mode 100644 index 335c6fc..0000000 --- a/src/components/typography/H3.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import { useSelector } from 'react-redux'; -import styled, { withTheme } from 'styled-components'; - -const Text = styled('h3')` - color: ${props => props.color || props.theme.colors.default.secondary}; - font-size: 1.5rem; - font-family: ${props => props.theme.typography.primary.bold}; - font-style: normal; - font-weight: 700; - line-height: 150%; - letter-spacing: 0.00938em; -`; - -const H3 = withTheme(({ children, color }) => { - const appStore = useSelector(state => state); - return ( - - {children} - - ); -}); - -export { H3 }; diff --git a/src/components/typography/H4.js b/src/components/typography/H4.js deleted file mode 100644 index 0e01e28..0000000 --- a/src/components/typography/H4.js +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import { useSelector } from 'react-redux'; -import styled, { withTheme } from 'styled-components'; - -const Text = styled('h4')` - margin: 0; - color: ${props => props.color || props.theme.colors.default.secondary}; - font-size: 1.3125rem; - font-family: ${props => props.theme.typography.primary.semiBold}; - font-weight: 600; - line-height: 1.9688rem; - font-style: normal; - letter-spacing: -0.0275rem; -`; - -const H4 = withTheme(({ children, color }) => { - const appStore = useSelector(state => state); - return ( - - {children} - - ); -}); - -export { H4 }; diff --git a/src/components/typography/MenuText.js b/src/components/typography/MenuText.js deleted file mode 100644 index 2b0953a..0000000 --- a/src/components/typography/MenuText.js +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import { useSelector } from 'react-redux'; -import styled, { withTheme } from 'styled-components'; - -const Text = styled('p')` - color: ${props => props.color || props.theme.colors.default.onSurface}; - font-size: 1.125rem; - font-family: ${props => props.theme.typography.primary.bold}; - font-style: normal; - font-weight: 700; - line-height: 1.5625rem; - text-transform: capitalize; - letter-spacing: -0.0274rem; -`; - -const MenuText = withTheme(({ children, color }) => { - const appStore = useSelector(state => state); - return ( - - {children} - - ); -}); - -export { MenuText }; diff --git a/src/components/typography/Subtitle.js b/src/components/typography/Subtitle.js deleted file mode 100644 index 589892c..0000000 --- a/src/components/typography/Subtitle.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import { useSelector } from 'react-redux'; -import styled, { withTheme } from 'styled-components'; - -const Text = styled('p')` - color: ${props => props.color || props.theme.colors.default.onSurface}; - font-size: 1.5rem; - font-family: ${props => props.theme.typography.primary.light}; - font-style: normal; - font-weight: 300; - line-height: 150%; - letter-spacing: -0.0274rem; -`; - -const Subtitle = withTheme(({ children, color }) => { - const appStore = useSelector(state => state); - return ( - - {children} - - ); -}); - -export { Subtitle }; diff --git a/src/components/typography/index.js b/src/components/typography/index.js deleted file mode 100644 index e4c8bbd..0000000 --- a/src/components/typography/index.js +++ /dev/null @@ -1,8 +0,0 @@ -export * from './H1'; -export * from './H2'; -export * from './H3'; -export * from './H4'; -export * from './Subtitle'; -export * from './MenuText'; -export * from './ButtonText'; -export * from './Body'; diff --git a/src/constants/index.js b/src/constants/index.js deleted file mode 100644 index 3cc65fa..0000000 --- a/src/constants/index.js +++ /dev/null @@ -1,14 +0,0 @@ - -export default { - API_HOST: 'http://localhost:31311', - HEADER_HEIGHT: 64, // Needed to be used to calculate max height for body components, - TABLE_ROWS: 7, - THEME: { - DEFAULT: 'default', - }, - ROUTES: { - createTokens: '/create-tokens', - revertTokens: '/revert-tokens', - storybook: '/storybook', - }, -}; diff --git a/src/hooks/useWindowSize.js b/src/hooks/useWindowSize.js deleted file mode 100644 index 88d18b7..0000000 --- a/src/hooks/useWindowSize.js +++ /dev/null @@ -1,22 +0,0 @@ -import { useState, useEffect } from 'react'; - -export function useWindowSize() { - const [windowSize, setWindowSize] = useState({ - width: undefined, - height: undefined, - }); - - useEffect(() => { - function handleResize() { - setWindowSize({ - width: window.innerWidth, - height: window.innerHeight, - }); - } - window.addEventListener('resize', handleResize); - handleResize(); - return () => window.removeEventListener('resize', handleResize); - }, []); - - return windowSize; -} diff --git a/src/index.css b/src/index.css deleted file mode 100644 index 8abf6f4..0000000 --- a/src/index.css +++ /dev/null @@ -1,47 +0,0 @@ -@font-face { - font-family: 'Poppins'; - src: url('./assets/fonts/Poppins-Regular.ttf') format('truetype'); - font-weight: 400; - font-style: normal; - font-display: auto; -} - -@font-face { - font-family: 'PoppinsBold'; - src: url('./assets/fonts/Poppins-Bold.ttf') format('truetype'); - font-weight: 700; - font-style: normal; - font-display: auto; -} - -@font-face { - font-family: 'PoppinsExtraBold'; - src: url('./assets/fonts/Poppins-ExtraBold.ttf') format('truetype'); - font-weight: 800; - font-style: normal; - font-display: auto; -} - -@font-face { - font-family: 'PoppinsSemiBold'; - src: url('./assets/fonts/Poppins-SemiBold.ttf') format('truetype'); - font-weight: 600; - font-style: normal; - font-display: auto; -} - -@font-face { - font-family: 'PoppinsLight'; - src: url('./assets/fonts/Poppins-Light.ttf') format('truetype'); - font-weight: 300; - font-style: normal; - font-display: auto; -} - -body { - margin: 0; -} - -.notification { - font-family: 'NunitoSans' !important; -} diff --git a/src/index.js b/src/index.js deleted file mode 100644 index 78938b4..0000000 --- a/src/index.js +++ /dev/null @@ -1,37 +0,0 @@ -import React, { useEffect } from 'react'; -import { useDispatch, useSelector } from 'react-redux'; -import { Provider } from 'react-redux'; -import { refreshApp } from './store/actions/appActions'; -import { createRoot } from 'react-dom/client'; -const container = document.getElementById('root'); -const root = createRoot(container); - -import 'react-notifications/lib/notifications.css'; -import './index.css'; - -import App from './App'; -import store from './store'; - -// Allows the app to reload in a platform agnostic way (either in browser or electron) -const RefreshWrapper = () => { - const dispatch = useDispatch(); - const appStore = useSelector(state => state); - - useEffect(() => { - dispatch(refreshApp(false)); - }, [appStore.refresh]); - - if (appStore.refresh) { - return null; - } - - return ; -}; - -root.render( - - - - - , -); diff --git a/src/main.ts b/src/main.ts new file mode 100644 index 0000000..e423100 --- /dev/null +++ b/src/main.ts @@ -0,0 +1,58 @@ +import { app, BrowserWindow, shell } from 'electron'; +import path from 'path'; +import express from 'express'; + +//electron +const serverPort = 61310; +const appServer = express(); + +const buildPath = path.join(app.getAppPath(), 'build/renderer'); // Path to your Vite build + +appServer.use(express.static(buildPath)); // Serve static files from the build directory + +// Catch-all handler to return index.html for any non-static file request +appServer.get('*', (_, res) => { + res.sendFile(path.join(buildPath, 'index.html')); +}); + +appServer.listen(serverPort); + +function createWindow() { + const win = new BrowserWindow({ + width: 1200, + height: 675, + webPreferences: { + contextIsolation: false, + nodeIntegration: true, + webviewTag: true, + // preload: path.join(__dirname, 'preload.js'), + }, + }); + + // Load URL based on the environment + const loadUrl = + process.env.NODE_ENV === 'development' + ? 'http://localhost:5174/' // Development URL + : `http://localhost:${serverPort}/`; // Production URL served by Express + + win.loadURL(loadUrl); + + win.webContents.setWindowOpenHandler(({ url }) => { + shell.openExternal(url); + return { action: 'deny' }; + }); +} + +app.whenReady().then(createWindow); + +app.on('window-all-closed', () => { + if (process.platform !== 'darwin') { + app.quit(); + } +}); + +app.on('activate', () => { + if (BrowserWindow.getAllWindows().length === 0) { + createWindow(); + } +}); diff --git a/src/navigation/AppNavigator.js b/src/navigation/AppNavigator.js deleted file mode 100644 index 4d7b1aa..0000000 --- a/src/navigation/AppNavigator.js +++ /dev/null @@ -1,86 +0,0 @@ -import React, { Suspense, useEffect } from 'react'; -import { useSelector, useDispatch } from 'react-redux'; -import { useIntl } from 'react-intl'; -import { - HashRouter as Router, - Routes, - Route, - Navigate, -} from 'react-router-dom'; - -import { setNotificationMessage } from '../store/actions/appActions'; -import * as Pages from '../pages'; -import { - createNotification, - NotificationContainer, -} from '../utils/notificationUtils'; -import { - AppContainer, - IndeterminateProgressOverlay, - Dashboard, - Connect, -} from '../components'; -import constants from '../constants'; - -const AppNavigator = () => { - const intl = useIntl(); - const dispatch = useDispatch(); - - const { showProgressOverlay, connectionCheck, notification } = useSelector( - store => store, - ); - - useEffect(() => { - if (notification) { - createNotification( - notification.type, - intl.formatMessage({ id: notification.id }), - ); - dispatch(setNotificationMessage(null)); - } - }, [notification]); - - return ( - - {showProgressOverlay && } - {!connectionCheck && } - - - - }> - - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - - - - - - ); -}; - -export { AppNavigator }; diff --git a/src/pages/CreateTokens.js b/src/pages/CreateTokens.js deleted file mode 100644 index 077f7d6..0000000 --- a/src/pages/CreateTokens.js +++ /dev/null @@ -1,381 +0,0 @@ -import _ from 'lodash'; -import React, { - useState, - useCallback, - useRef, - useEffect, - useMemo, -} from 'react'; -import styled from 'styled-components'; -import { useSelector, useDispatch } from 'react-redux'; -import { FormattedMessage, useIntl } from 'react-intl'; - -import { - Tab, - Tabs, - TabPanel, - DownloadIcon, - H3, - Table, - TableColumnTypeEnum, - SearchInput, - modalTypeEnum, - Modal, - CreateTokenModal, - SelectCreatable, -} from '../components'; -import { - getCountForTokensAndUntokenizedUnits, - getTokens, - getUntokenizedUnits, -} from '../store/actions/appActions'; -import constants from '../constants'; -import { downloadXlsxFromDataAndHeadings } from '../utils/xlsxUtils'; - -const StyledSectionContainer = styled('div')` - display: flex; - flex-direction: column; - height: 100%; -`; - -const StyledHeaderContainer = styled('div')` - display: flex; - align-items: center; - padding: 30px 24px 14px 16px; -`; - -const StyledFiltersContainer = styled('div')` - margin: 0rem 1.2813rem; -`; - -const StyledSubHeaderContainer = styled('div')` - display: flex; - justify-content: space-between; - align-items: center; - padding-right: 27.23px; -`; - -const StyledBodyContainer = styled('div')` - flex-grow: 1; -`; - -const NoDataMessageContainer = styled('div')` - display: flex; - height: 100%; - justify-content: center; - align-items: center; -`; - -const StyledCSVOperationsContainer = styled('div')` - display: flex; - justify-content: flex-end; - gap: 20px; - - svg { - cursor: pointer; - } -`; - -const StyledSearchContainer = styled('div')` - max-width: 25.1875rem; -`; - -const CreateTokens = () => { - const intl = useIntl(); - const dispatch = useDispatch(); - const [unitToBeTokenized, setUnitToBeTokenized] = useState(null); - const pageContainerRef = useRef(null); - - const [tabValue, setTabValue] = useState(0); - const [page, setPage] = useState(0); - const [searchQuery, setSearchQuery] = useState(''); - const { - untokenizedUnits, - paginationNrOfPages, - tokens, - notification, - untokenizedUnitsCount, - tokensCount, - } = useSelector(store => store); - const [ - isTokenCreationPendingModalVisible, - setIsTokenCreationPendingModalVisible, - ] = useState(false); - const sortOrderOptions = ['Ascending', 'Descending']; - const [sortOrder, setSortOrder] = useState(sortOrderOptions[1]); - - useEffect(() => { - dispatch(getCountForTokensAndUntokenizedUnits()); - }, []); - - const untokenizedUnitsTabLabel = untokenizedUnitsCount - ? `${intl.formatMessage({ - id: 'untokenized-units', - })} (${untokenizedUnitsCount})` - : intl.formatMessage({ - id: 'untokenized-units', - }); - - const tokensTabLabel = tokensCount - ? `${intl.formatMessage({ - id: 'existing-tokens', - })} (${tokensCount})` - : intl.formatMessage({ - id: 'existing-tokens', - }); - - useEffect(() => { - if (tabValue === 0) { - dispatch( - getUntokenizedUnits({ - page: page, - resultsLimit: constants.TABLE_ROWS, - searchQuery: searchQuery, - isRequestMocked: false, - sortOrder: sortOrder, - }), - ); - } else if (tabValue === 1) { - dispatch( - getTokens({ - page: page, - resultsLimit: constants.TABLE_ROWS, - searchQuery: searchQuery, - isRequestMocked: false, - sortOrder: sortOrder, - }), - ); - } - }, [page, tabValue, searchQuery, sortOrder]); - - const handleTabChange = useCallback( - (event, newValue) => { - setTabValue(newValue); - setPage(0); - setSearchQuery(''); - }, - [setTabValue], - ); - - const tokensTableConfig = useMemo( - () => ({ - columns: [ - { - title: 'Registry Project Id', - key: 'registryProjectId', - type: TableColumnTypeEnum.string, - isTooltipVisible: true, - }, - { - title: 'Project Name', - key: 'projectName', - type: TableColumnTypeEnum.string, - isTooltipVisible: true, - }, - { - title: 'Serial Number Block', - key: 'serialNumberBlock', - type: TableColumnTypeEnum.string, - isTooltipVisible: true, - }, - { - title: 'Unit Count', - key: 'unitCount', - type: TableColumnTypeEnum.quantity, - }, - { - title: 'Marketplace', - key: 'marketplace', - type: TableColumnTypeEnum.string, - }, - { - title: 'Marketplace Identifier', - key: 'marketplaceIdentifier', - type: TableColumnTypeEnum.string, - isTooltipVisible: true, - }, - { - title: 'Marketplace Link', - key: 'marketplaceLink', - type: TableColumnTypeEnum.link, - }, - ], - }), - [], - ); - - const tokensKeysToBeDisplayed = useMemo( - () => tokensTableConfig.columns.map(configItem => configItem.key), - [tokensTableConfig], - ); - - const untokenizedUnitsTableConfig = useMemo( - () => ({ - columns: [ - { - title: 'Registry Project Id', - key: 'registryProjectId', - type: TableColumnTypeEnum.string, - isTooltipVisible: true, - }, - { - title: 'Project Name', - key: 'projectName', - type: TableColumnTypeEnum.string, - isTooltipVisible: true, - }, - { - title: 'Serial Number Block', - key: 'serialNumberBlock', - type: TableColumnTypeEnum.string, - isTooltipVisible: true, - }, - { - title: 'Unit Status', - key: 'unitStatus', - type: TableColumnTypeEnum.string, - }, - { - title: 'Unit Count', - key: 'unitCount', - type: TableColumnTypeEnum.quantity, - }, - { - title: 'Actions', - key: 'actions', - type: TableColumnTypeEnum.button, - buttonLabel: intl.formatMessage({ id: 'create-token' }), - buttonOnClick: item => setUnitToBeTokenized(item), - }, - ], - }), - [], - ); - - const onSearch = useMemo( - () => - _.debounce(event => { - setSearchQuery(event.target.value); - setPage(0); - }, 300), - [setSearchQuery, setPage], - ); - - useEffect(() => { - return () => { - onSearch.cancel(); - }; - }, []); - - const isTokenCreationPending = - notification && notification.id === 'unit-was-tokenized'; - useEffect(() => { - if (isTokenCreationPending) { - setIsTokenCreationPendingModalVisible(true); - } - }, [notification]); - - return ( - <> - - - - - - - - setSortOrder(val)} - /> - - - - - - - - - - {tabValue === 1 && ( - - downloadXlsxFromDataAndHeadings( - tokens, - tokensKeysToBeDisplayed, - ) - } - /> - )} - - - - - {untokenizedUnits?.length > 0 ? ( - setPage(page)} - currentPage={page} - numberOfPages={paginationNrOfPages} - /> - ) : ( - -

- -

- - )} - - - {tokens?.length > 0 ? ( -
setPage(page)} - currentPage={page} - numberOfPages={paginationNrOfPages} - /> - ) : ( - -

- -

- - )} - - - {unitToBeTokenized && ( - setUnitToBeTokenized(null)} - data={unitToBeTokenized} - /> - )} - - {isTokenCreationPendingModalVisible && ( - setIsTokenCreationPendingModalVisible(false)} - hideButtons - /> - )} - - ); -}; - -export { CreateTokens }; diff --git a/src/pages/RevertTokens.js b/src/pages/RevertTokens.js deleted file mode 100644 index 024e2e2..0000000 --- a/src/pages/RevertTokens.js +++ /dev/null @@ -1,91 +0,0 @@ -import React, { useEffect, useState, useRef } from 'react'; -import { FormattedMessage, useIntl } from 'react-intl'; -import { useSelector, useDispatch } from 'react-redux'; -import styled from 'styled-components'; - -const StyledPageContainer = styled('div')` - padding-left: 40px; - padding-right: 40px; - height: 100%; -`; - -import { - Body, - ConfirmDetokanizationModal, - DetokenizeModal, - PrimaryButton, - StyledFieldContainer, - StyledLabelContainer, -} from '../components'; -import { useWindowSize } from '../hooks/useWindowSize'; -import { setUnitToBeDetokenized } from '../store/actions/appActions'; - -const RevertTokens = () => { - const [isDetokenizeModalOpen, setIsDetokenizeModalOpen] = useState(false); - const [isConfirmationModalOpen, setIsConfirmationModalOpen] = useState(false); - const { unitToBeDetokenized } = useSelector(app => app); - const intl = useIntl(); - const unitsContainerRef = useRef(null); - const [modalSizeAndPosition, setModalSizeAndPosition] = useState(null); - const windowSize = useWindowSize(); - const dispatch = useDispatch(); - - useEffect(() => { - if (unitToBeDetokenized) { - setIsConfirmationModalOpen(true); - } - }, [unitToBeDetokenized]); - - useEffect(() => { - if (unitsContainerRef && unitsContainerRef.current) { - setModalSizeAndPosition({ - left: unitsContainerRef.current.getBoundingClientRect().x, - top: unitsContainerRef.current.getBoundingClientRect().y, - width: unitsContainerRef.current.getBoundingClientRect().width, - height: unitsContainerRef.current.getBoundingClientRect().height, - }); - } - }, [ - unitsContainerRef, - unitsContainerRef.current, - windowSize.height, - windowSize.width, - ]); - - const closeConfirmationModal = () => { - setIsConfirmationModalOpen(false); - dispatch(setUnitToBeDetokenized(null)); - }; - - return ( - - - - - - - - - - setIsDetokenizeModalOpen(true)} - /> - {isDetokenizeModalOpen && ( - setIsDetokenizeModalOpen(false)} /> - )} - {isConfirmationModalOpen && ( - - )} - - - ); -}; - -export { RevertTokens }; diff --git a/src/pages/StoryBook.js b/src/pages/StoryBook.js deleted file mode 100644 index 9c66b09..0000000 --- a/src/pages/StoryBook.js +++ /dev/null @@ -1,814 +0,0 @@ -import React, { useState } from 'react'; - -import { - Card, - H3, - H2, - H4, - H1, - Subtitle, - MenuText, - ButtonText, - PrimaryButton, - LightThemeIcon, - ToolTip, - ToolTipPlacement, - Popover, - PopoverPlacement, - Alert, - Tag, - LocaleIcon, - StandardInput, - InputSizeEnum, - InputStateEnum, - InputVariantEnum, - SearchInput, - Textarea, - TextareaSizeEnum, - TextareaStateEnum, - AddIcon, - AppLogo, - CloseIcon, - DarkThemeIcon, - ErrorIconSmall, - ErrorIcon, - InfoIconSmall, - InfoIcon, - MagnifyGlassIcon, - MagnifyGlassIconWhite, - SuccessIcon, - SuccessIconSmall, - WarningIcon, - WarningIconSmall, - Body, - Notification, - ArrowDownIcon, - CheckIcon, - Pagination, - ComponentRepeater, - Tabs, - Tab, - TabPanel, - DownloadIcon, - EllipsisMenuIcon, - EllipseIcon, - BasicMenu, - UploadIcon, - WarehouseIcon, - RegistryIcon, - AddIconCircle, -} from '../components'; - -const StoryBook = () => { - const tooltipContent = - 'Distinctively monetize cost effective networks for cross-media bandwidth'; - - const standardInputPlaceholder = 'Input placeholder'; - - const popoverContent = - 'Conveniently initiate viral synergy without multi functional platforms. '; - - const paginationCallback = e => console.log(e); - - const addNewTagCallback = () => console.log('add tag'); - - const popoverTitle = 'Popover title'; - - const [repeaterValues, updateRepeaterValues] = useState([]); - - const [tabValue, setTabValue] = React.useState(0); - - const handleTabChange = (event, newValue) => { - setTabValue(newValue); - }; - - return ( - <> - -

This is an header H1

-

This is an header H2

-

This is an header H3

-

This is an header H4

- This is a Subtitle - This is Menu Text - This is Button Text - - - } - addIcon={} - removeIcon={} - /> - -
- - Tooltip Top - - - Bottom - - - Left - - - Right - - - Top-Left - - - Top-Right - - - Bottom-Left - - - Bottom-Right - - - Left-Top - - - Left-Bottom - - - Right-Top - - - Right-Bottom - -
- -
- - Popover Top - - - Bottom - - - Left - - - Right - - - Top-Left - - - Top-Right - - - Bottom-Left - - - Bottom-Right - - - Left-Top - - - Left-Bottom - - - Right-Top - - - Right-Bottom - -
- -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- } - /> - } - /> - } - suffix={} - /> -
-
- -
-
-