From 3eac40c5e24be3c1ac137e369d65e2a45dac7927 Mon Sep 17 00:00:00 2001 From: Ruggero Cino Date: Mon, 18 Sep 2023 10:12:27 +0200 Subject: [PATCH 001/103] Remove old components, update dependencies, fix setup --- .eslintrc.js | 2 + index.css | 1 - package.json | 93 +- prettier.config.js | 8 +- src/assets/avatar-token.svg | 14 - .../actionItems/actionItemAddress.stories.tsx | 65 - .../actionItems/actionItemAddress.tsx | 176 - src/components/actionItems/index.ts | 1 - src/components/alerts/alertBanner.stories.tsx | 16 - src/components/alerts/alertBanner.test.tsx | 17 - src/components/alerts/alertBanner.tsx | 33 - src/components/alerts/alertCard.stories.tsx | 17 - src/components/alerts/alertCard.tsx | 71 - src/components/alerts/alertChip.stories.tsx | 18 - src/components/alerts/alertChip.test.tsx | 16 - src/components/alerts/alertChip.tsx | 111 - src/components/alerts/alertInline.stories.tsx | 16 - src/components/alerts/alertInline.test.tsx | 17 - src/components/alerts/alertInline.tsx | 53 - src/components/alerts/index.ts | 4 - src/components/avatar/avatar.stories.tsx | 34 - src/components/avatar/avatar.test.tsx | 16 - src/components/avatar/avatar.tsx | 69 - src/components/avatar/avatarDao.stories.tsx | 22 - src/components/avatar/avatarDao.tsx | 64 - src/components/avatar/avatarToken.stories.tsx | 19 - src/components/avatar/avatarToken.tsx | 32 - .../avatar/avatarWallet.stories.tsx | 20 - src/components/avatar/avatarWallet.tsx | 40 - src/components/avatar/index.ts | 4 - src/components/backdrop/backdrop.test.tsx | 16 - src/components/backdrop/backdrop.tsx | 79 - src/components/backdrop/index.ts | 1 - src/components/breadcrumb/breadcrumb.test.tsx | 52 - src/components/breadcrumb/breadcrumb.tsx | 92 - .../breadcrumb/breadcrumbs.stories.tsx | 39 - src/components/breadcrumb/crumb.tsx | 36 - src/components/breadcrumb/index.ts | 1 - src/components/button/button.test.tsx | 24 - src/components/button/button.tsx | 7 + src/components/button/buttonBase.stories.tsx | 25 - src/components/button/buttonBase.tsx | 96 - src/components/button/buttonGroup/button.tsx | 26 - .../buttonGroup/buttonGroup.stories.tsx | 26 - .../button/buttonGroup/buttonGroup.test.tsx | 22 - .../button/buttonGroup/buttonGroup.tsx | 83 - src/components/button/buttonGroup/index.ts | 2 - src/components/button/buttonIcon.stories.tsx | 18 - src/components/button/buttonIcon.tsx | 76 - src/components/button/buttonText.stories.tsx | 26 - src/components/button/buttonText.tsx | 78 - .../button/buttonWallet.stories.tsx | 25 - src/components/button/buttonWallet.tsx | 68 - src/components/button/index.ts | 5 +- .../cards/cardExecution.stories.tsx | 26 - src/components/cards/cardExecution.test.tsx | 16 - src/components/cards/cardExecution.tsx | 105 - src/components/cards/cardProposal.stories.tsx | 45 - src/components/cards/cardProposal.test.tsx | 34 - src/components/cards/cardProposal.tsx | 246 - src/components/cards/cardText.stories.tsx | 18 - src/components/cards/cardText.test.tsx | 16 - src/components/cards/cardText.tsx | 32 - src/components/cards/cardToken.stories.tsx | 42 - src/components/cards/cardToken.test.tsx | 16 - src/components/cards/cardToken.tsx | 153 - src/components/cards/cardTransfer.stories.tsx | 18 - src/components/cards/cardTransfer.test.tsx | 16 - src/components/cards/cardTransfer.tsx | 63 - src/components/cards/cardWallet.stories.tsx | 17 - src/components/cards/cardWallet.test.tsx | 16 - src/components/cards/cardWallet.tsx | 76 - src/components/cards/index.ts | 6 - .../checkbox/checkboxListItem.stories.tsx | 49 - .../checkbox/checkboxListItem.test.tsx | 16 - src/components/checkbox/checkboxListItem.tsx | 78 - .../checkbox/checkboxSimple.stories.tsx | 20 - .../checkbox/checkboxSimple.test.tsx | 16 - src/components/checkbox/checkboxSimple.tsx | 42 - src/components/checkbox/index.ts | 2 - src/components/dropdown/dropdown.stories.tsx | 48 - src/components/dropdown/dropdown.test.tsx | 21 - src/components/dropdown/dropdown.tsx | 83 - src/components/dropdown/index.ts | 1 - src/components/headers/headerDao.stories.tsx | 40 - src/components/headers/headerDao.test.tsx | 16 - src/components/headers/headerDao.tsx | 249 - src/components/headers/headerPage.stories.tsx | 38 - src/components/headers/headerPage.test.tsx | 16 - src/components/headers/headerPage.tsx | 74 - src/components/headers/index.ts | 2 - src/components/icons/icons.stories.tsx | 56 - src/components/icons/index.tsx | 14 - src/components/icons/interface/icon_add.tsx | 13 - src/components/icons/interface/icon_block.tsx | 17 - .../icons/interface/icon_calendar.tsx | 20 - .../icons/interface/icon_checkbox_default.tsx | 14 - .../icons/interface/icon_checkbox_multi.tsx | 19 - .../interface/icon_checkbox_selected.tsx | 13 - .../icons/interface/icon_checkmark.tsx | 13 - .../icons/interface/icon_chevron_down.tsx | 15 - .../icons/interface/icon_chevron_left.tsx | 15 - .../icons/interface/icon_chevron_right.tsx | 15 - .../icons/interface/icon_chevron_up.tsx | 15 - src/components/icons/interface/icon_clock.tsx | 29 - src/components/icons/interface/icon_close.tsx | 13 - src/components/icons/interface/icon_copy.tsx | 47 - .../icons/interface/icon_deposit.tsx | 15 - .../icons/interface/icon_expand.tsx | 15 - .../icons/interface/icon_explore.tsx | 33 - .../icons/interface/icon_failure.tsx | 27 - .../icons/interface/icon_favorite_default.tsx | 14 - .../interface/icon_favorite_selected.tsx | 13 - .../icons/interface/icon_feedback.tsx | 29 - .../icons/interface/icon_filter.tsx | 13 - src/components/icons/interface/icon_flag.tsx | 13 - src/components/icons/interface/icon_home.tsx | 13 - src/components/icons/interface/icon_info.tsx | 13 - .../icons/interface/icon_link_external.tsx | 20 - src/components/icons/interface/icon_menu.tsx | 17 - .../icons/interface/icon_menu_vertical.tsx | 21 - .../icons/interface/icon_person.tsx | 15 - .../icons/interface/icon_question.tsx | 27 - .../icons/interface/icon_radio_default.tsx | 10 - .../icons/interface/icon_radio_multi.tsx | 15 - .../icons/interface/icon_radio_pause.tsx | 27 - .../icons/interface/icon_radio_selected.tsx | 19 - .../icons/interface/icon_reload.tsx | 20 - .../icons/interface/icon_remove.tsx | 13 - .../icons/interface/icon_search.tsx | 13 - .../icons/interface/icon_settings.tsx | 13 - .../icons/interface/icon_shrink.tsx | 29 - .../icons/interface/icon_smart_contract.tsx | 33 - .../icons/interface/icon_spinner.tsx | 13 - .../icons/interface/icon_storage.tsx | 27 - .../icons/interface/icon_success.tsx | 13 - .../icons/interface/icon_switch.tsx | 15 - .../icons/interface/icon_turn_off.tsx | 15 - .../icons/interface/icon_update.tsx | 25 - .../icons/interface/icon_warning.tsx | 13 - .../icons/interface/icon_withdraw.tsx | 15 - src/components/icons/interface/index.ts | 49 - .../icons/interface/radio/cancel.tsx | 15 - src/components/icons/interface/radio/index.ts | 1 - src/components/icons/markdown/icon_bold.tsx | 20 - src/components/icons/markdown/icon_italic.tsx | 13 - .../icons/markdown/icon_link_set.tsx | 15 - .../icons/markdown/icon_link_unset.tsx | 15 - .../icons/markdown/icon_list_ordered.tsx | 15 - .../icons/markdown/icon_list_unordered.tsx | 15 - src/components/icons/markdown/index.ts | 6 - .../icons/module/icon_community.tsx | 15 - .../icons/module/icon_dashboard.tsx | 25 - src/components/icons/module/icon_finance.tsx | 27 - .../icons/module/icon_governance.tsx | 21 - src/components/icons/module/index.ts | 4 - .../human/human_accessories/buddha.tsx | 17 - .../human_accessories/earrings_circle.tsx | 17 - .../human_accessories/earrings_hoops.tsx | 17 - .../human_accessories/earrings_rhombus.tsx | 14 - .../human_accessories/earrings_skull.tsx | 21 - .../human_accessories/earrings_thunder.tsx | 17 - .../human/human_accessories/expression.tsx | 41 - .../human/human_accessories/flushed.tsx | 17 - .../human/human_accessories/head_flower.tsx | 13 - .../human/human_accessories/index.tsx | 63 - .../human/human_accessories/piercings.tsx | 33 - .../human_accessories/piercings_tattoo.tsx | 41 - .../human/human_bodies/aragon.tsx | 73 - .../human/human_bodies/blocks.tsx | 69 - .../human/human_bodies/chart.tsx | 53 - .../human/human_bodies/computer.tsx | 61 - .../human/human_bodies/computer_correct.tsx | 81 - .../human/human_bodies/correct.tsx | 41 - .../human/human_bodies/double_correct.tsx | 45 - .../human/human_bodies/elevating.tsx | 49 - .../human/human_bodies/index.tsx | 56 - .../human/human_bodies/relaxed.tsx | 53 - .../human/human_bodies/sending_love.tsx | 69 - .../human/human_bodies/voting.tsx | 57 - .../human/human_expressions/angry.tsx | 41 - .../human/human_expressions/casual.tsx | 39 - .../human/human_expressions/crying.tsx | 47 - .../human/human_expressions/decided.tsx | 39 - .../human/human_expressions/excited.tsx | 41 - .../human/human_expressions/index.tsx | 56 - .../human/human_expressions/sad_left.tsx | 41 - .../human/human_expressions/sad_right.tsx | 39 - .../human/human_expressions/smile.tsx | 39 - .../human/human_expressions/smile_wink.tsx | 57 - .../human/human_expressions/surprised.tsx | 39 - .../human/human_expressions/suspecting.tsx | 57 - .../illustrations/human/human_hairs/afro.tsx | 13 - .../illustrations/human/human_hairs/bald.tsx | 14 - .../illustrations/human/human_hairs/bun.tsx | 13 - .../illustrations/human/human_hairs/cool.tsx | 13 - .../illustrations/human/human_hairs/curly.tsx | 13 - .../human/human_hairs/curly_bangs.tsx | 13 - .../illustrations/human/human_hairs/index.tsx | 67 - .../human/human_hairs/informal.tsx | 21 - .../illustrations/human/human_hairs/long.tsx | 13 - .../human/human_hairs/middle.tsx | 13 - .../human/human_hairs/oldschool.tsx | 13 - .../illustrations/human/human_hairs/punk.tsx | 13 - .../illustrations/human/human_hairs/short.tsx | 13 - .../human/human_sunglasses/big_rounded.tsx | 16 - .../human_sunglasses/big_semirounded.tsx | 15 - .../human/human_sunglasses/index.tsx | 63 - .../human/human_sunglasses/large_stylized.tsx | 16 - .../human_sunglasses/large_stylized_xl.tsx | 15 - .../human/human_sunglasses/pirate.tsx | 17 - .../human_sunglasses/small_intellectual.tsx | 15 - .../human_sunglasses/small_sympathetic.tsx | 15 - .../human_sunglasses/small_weird_one.tsx | 15 - .../human_sunglasses/small_weird_two.tsx | 15 - .../human/human_sunglasses/thuglife.tsx | 45 - .../human_sunglasses/thuglife_rounded.tsx | 45 - .../illustrations/human/illuHuman.stories.tsx | 21 - .../illustrations/human/illuHuman.test.tsx | 24 - .../illustrations/human/illuHuman.tsx | 68 - src/components/illustrations/index.ts | 2 - .../illustrations/object/action.tsx | 41 - src/components/illustrations/object/app.tsx | 29 - .../illustrations/object/archive.tsx | 35 - src/components/illustrations/object/book.tsx | 19 - src/components/illustrations/object/build.tsx | 61 - src/components/illustrations/object/chain.tsx | 34 - .../illustrations/object/database.tsx | 85 - src/components/illustrations/object/error.tsx | 30 - .../illustrations/object/explore.tsx | 19 - src/components/illustrations/object/gas.tsx | 25 - src/components/illustrations/object/goal.tsx | 19 - .../object/illuObject.stories.tsx | 15 - .../illustrations/object/illuObject.test.tsx | 19 - .../illustrations/object/illuObject.tsx | 109 - src/components/illustrations/object/index.tsx | 23 - .../illustrations/object/labels.tsx | 22 - .../illustrations/object/lightbulb.tsx | 47 - .../illustrations/object/magnifyingGlass.tsx | 28 - .../illustrations/object/notFound.tsx | 45 - .../illustrations/object/security.tsx | 19 - .../illustrations/object/settings.tsx | 29 - .../illustrations/object/smartContract.tsx | 43 - .../illustrations/object/smartContracts.tsx | 43 - .../illustrations/object/success.tsx | 22 - src/components/illustrations/object/users.tsx | 55 - src/components/illustrations/object/wagmi.tsx | 35 - .../illustrations/object/wallet.tsx | 22 - .../illustrations/object/warning.tsx | 23 - src/components/index.ts | 26 - src/components/input/dateInput.stories.tsx | 16 - src/components/input/dateInput.test.tsx | 16 - src/components/input/dateInput.tsx | 41 - .../input/dropdownInput.stories.tsx | 16 - src/components/input/dropdownInput.test.tsx | 24 - src/components/input/dropdownInput.tsx | 63 - src/components/input/index.ts | 31 - .../input/inputImageSingle.stories.tsx | 32 - .../input/inputImageSingle.test.tsx | 16 - src/components/input/inputImageSingle.tsx | 167 - src/components/input/numberInput.stories.tsx | 20 - src/components/input/numberInput.test.tsx | 16 - src/components/input/numberInput.tsx | 211 - src/components/input/searchInput.stories.tsx | 20 - src/components/input/searchInput.test.tsx | 16 - src/components/input/searchInput.tsx | 63 - src/components/input/textInput.stories.tsx | 16 - src/components/input/textInput.test.tsx | 16 - src/components/input/textInput.tsx | 69 - src/components/input/timeInput.stories.tsx | 18 - src/components/input/timeInput.test.tsx | 16 - src/components/input/timeInput.tsx | 138 - src/components/input/valueInput.stories.tsx | 19 - src/components/input/valueInput.test.tsx | 16 - src/components/input/valueInput.tsx | 66 - src/components/input/walletInput.stories.tsx | 65 - src/components/input/walletInput.test.tsx | 16 - src/components/input/walletInput.tsx | 516 -- src/components/input/walletInputLegacy.tsx | 70 - src/components/label/index.ts | 1 - src/components/label/label.stories.tsx | 17 - src/components/label/label.test.tsx | 16 - src/components/label/label.tsx | 52 - src/components/link/index.ts | 1 - src/components/link/link.stories.tsx | 46 - src/components/link/link.test.tsx | 15 - src/components/link/link.tsx | 90 - src/components/listItem/action.stories.tsx | 35 - src/components/listItem/action.test.tsx | 16 - src/components/listItem/action.tsx | 114 - src/components/listItem/address.stories.tsx | 27 - src/components/listItem/address.test.tsx | 16 - src/components/listItem/address.tsx | 72 - .../listItem/blockchain.stories.tsx | 48 - src/components/listItem/blockchain.test.tsx | 16 - src/components/listItem/blockchain.tsx | 56 - src/components/listItem/dao.stories.tsx | 41 - src/components/listItem/dao.test.tsx | 28 - src/components/listItem/dao.tsx | 72 - src/components/listItem/header.stories.tsx | 19 - src/components/listItem/header.test.tsx | 36 - src/components/listItem/header.tsx | 80 - src/components/listItem/index.ts | 7 - src/components/listItem/link.stories.tsx | 21 - src/components/listItem/link.test.tsx | 16 - src/components/listItem/link.tsx | 51 - src/components/listItem/voter.stories.tsx | 28 - src/components/listItem/voter.test.tsx | 16 - src/components/listItem/voter.tsx | 107 - src/components/modal/index.tsx | 1 - src/components/modal/modal.stories.tsx | 45 - src/components/modal/modal.test.tsx | 16 - src/components/modal/modal.tsx | 129 - src/components/pagination/index.tsx | 1 - .../pagination/pagination.stories.tsx | 15 - src/components/pagination/pagination.test.tsx | 16 - src/components/pagination/pagination.tsx | 186 - src/components/progress/index.ts | 2 - src/components/progress/linear.stories.tsx | 16 - src/components/progress/linear.test.tsx | 16 - src/components/progress/linear.tsx | 42 - src/components/progress/status.stories.tsx | 22 - src/components/progress/status.test.tsx | 16 - src/components/progress/status.tsx | 149 - src/components/spinner/index.ts | 1 - src/components/spinner/spinner.stories.tsx | 12 - src/components/spinner/spinner.test.tsx | 16 - src/components/spinner/spinner.tsx | 62 - src/components/table/index.ts | 2 - src/components/table/tableCell.stories.tsx | 47 - src/components/table/tableCell.test.tsx | 24 - src/components/table/tableCell.tsx | 71 - src/components/table/votersTable.stories.tsx | 45 - src/components/table/votersTable.test.tsx | 25 - src/components/table/votersTable.tsx | 106 - src/components/tag/index.ts | 2 - src/components/tag/tag.api.ts | 17 - src/components/tag/tag.spec.tsx | 21 - src/components/tag/tag.stories.tsx | 31 - src/components/tag/tag.tsx | 24 - src/components/textarea/index.ts | 2 - src/components/textarea/textarea.stories.tsx | 16 - src/components/textarea/textarea.test.tsx | 16 - src/components/textarea/textarea.tsx | 24 - src/components/textarea/wysiwyg.stories.tsx | 20 - src/components/textarea/wysiwyg.tsx | 282 - src/components/tokenListItem/index.ts | 1 - .../tokenListItem/tokenListItem.stories.tsx | 18 - .../tokenListItem/tokenListItem.test.tsx | 16 - .../tokenListItem/tokenListItem.tsx | 75 - src/components/transferListItem/index.ts | 1 - .../transferListItem.stories.tsx | 41 - .../transferListItem.test.tsx | 16 - .../transferListItem/transferListItem.tsx | 97 - src/components/widgets/index.ts | 1 - src/components/widgets/status.stories.tsx | 120 - src/components/widgets/status.test.tsx | 16 - src/components/widgets/status.tsx | 40 - src/components/wizard/index.ts | 1 - src/components/wizard/wizard.stories.tsx | 23 - src/components/wizard/wizard.test.tsx | 16 - src/components/wizard/wizard.tsx | 80 - src/hooks/index.ts | 1 - src/hooks/use-screen/index.ts | 1 - src/hooks/use-screen/use-screen.ts | 36 - src/index.ts | 2 - src/utils/addresses.test.ts | 28 - src/utils/addresses.tsx | 44 - src/utils/illustrations.tsx | 26 - src/utils/index.ts | 2 - tailwind.config.js | 40 +- tsconfig.json | 8 +- yarn.lock | 6522 ++++++++--------- 373 files changed, 2983 insertions(+), 16984 deletions(-) delete mode 100644 src/assets/avatar-token.svg delete mode 100644 src/components/actionItems/actionItemAddress.stories.tsx delete mode 100644 src/components/actionItems/actionItemAddress.tsx delete mode 100644 src/components/actionItems/index.ts delete mode 100644 src/components/alerts/alertBanner.stories.tsx delete mode 100644 src/components/alerts/alertBanner.test.tsx delete mode 100644 src/components/alerts/alertBanner.tsx delete mode 100644 src/components/alerts/alertCard.stories.tsx delete mode 100644 src/components/alerts/alertCard.tsx delete mode 100644 src/components/alerts/alertChip.stories.tsx delete mode 100644 src/components/alerts/alertChip.test.tsx delete mode 100644 src/components/alerts/alertChip.tsx delete mode 100644 src/components/alerts/alertInline.stories.tsx delete mode 100644 src/components/alerts/alertInline.test.tsx delete mode 100644 src/components/alerts/alertInline.tsx delete mode 100644 src/components/alerts/index.ts delete mode 100644 src/components/avatar/avatar.stories.tsx delete mode 100644 src/components/avatar/avatar.test.tsx delete mode 100644 src/components/avatar/avatar.tsx delete mode 100644 src/components/avatar/avatarDao.stories.tsx delete mode 100644 src/components/avatar/avatarDao.tsx delete mode 100644 src/components/avatar/avatarToken.stories.tsx delete mode 100644 src/components/avatar/avatarToken.tsx delete mode 100644 src/components/avatar/avatarWallet.stories.tsx delete mode 100644 src/components/avatar/avatarWallet.tsx delete mode 100644 src/components/avatar/index.ts delete mode 100644 src/components/backdrop/backdrop.test.tsx delete mode 100644 src/components/backdrop/backdrop.tsx delete mode 100644 src/components/backdrop/index.ts delete mode 100644 src/components/breadcrumb/breadcrumb.test.tsx delete mode 100644 src/components/breadcrumb/breadcrumb.tsx delete mode 100644 src/components/breadcrumb/breadcrumbs.stories.tsx delete mode 100644 src/components/breadcrumb/crumb.tsx delete mode 100644 src/components/breadcrumb/index.ts delete mode 100644 src/components/button/button.test.tsx create mode 100644 src/components/button/button.tsx delete mode 100644 src/components/button/buttonBase.stories.tsx delete mode 100644 src/components/button/buttonBase.tsx delete mode 100644 src/components/button/buttonGroup/button.tsx delete mode 100644 src/components/button/buttonGroup/buttonGroup.stories.tsx delete mode 100644 src/components/button/buttonGroup/buttonGroup.test.tsx delete mode 100644 src/components/button/buttonGroup/buttonGroup.tsx delete mode 100644 src/components/button/buttonGroup/index.ts delete mode 100644 src/components/button/buttonIcon.stories.tsx delete mode 100644 src/components/button/buttonIcon.tsx delete mode 100644 src/components/button/buttonText.stories.tsx delete mode 100644 src/components/button/buttonText.tsx delete mode 100644 src/components/button/buttonWallet.stories.tsx delete mode 100644 src/components/button/buttonWallet.tsx delete mode 100644 src/components/cards/cardExecution.stories.tsx delete mode 100644 src/components/cards/cardExecution.test.tsx delete mode 100644 src/components/cards/cardExecution.tsx delete mode 100644 src/components/cards/cardProposal.stories.tsx delete mode 100644 src/components/cards/cardProposal.test.tsx delete mode 100644 src/components/cards/cardProposal.tsx delete mode 100644 src/components/cards/cardText.stories.tsx delete mode 100644 src/components/cards/cardText.test.tsx delete mode 100644 src/components/cards/cardText.tsx delete mode 100644 src/components/cards/cardToken.stories.tsx delete mode 100644 src/components/cards/cardToken.test.tsx delete mode 100644 src/components/cards/cardToken.tsx delete mode 100644 src/components/cards/cardTransfer.stories.tsx delete mode 100644 src/components/cards/cardTransfer.test.tsx delete mode 100644 src/components/cards/cardTransfer.tsx delete mode 100644 src/components/cards/cardWallet.stories.tsx delete mode 100644 src/components/cards/cardWallet.test.tsx delete mode 100644 src/components/cards/cardWallet.tsx delete mode 100644 src/components/cards/index.ts delete mode 100644 src/components/checkbox/checkboxListItem.stories.tsx delete mode 100644 src/components/checkbox/checkboxListItem.test.tsx delete mode 100644 src/components/checkbox/checkboxListItem.tsx delete mode 100644 src/components/checkbox/checkboxSimple.stories.tsx delete mode 100644 src/components/checkbox/checkboxSimple.test.tsx delete mode 100644 src/components/checkbox/checkboxSimple.tsx delete mode 100644 src/components/checkbox/index.ts delete mode 100644 src/components/dropdown/dropdown.stories.tsx delete mode 100644 src/components/dropdown/dropdown.test.tsx delete mode 100644 src/components/dropdown/dropdown.tsx delete mode 100644 src/components/dropdown/index.ts delete mode 100644 src/components/headers/headerDao.stories.tsx delete mode 100644 src/components/headers/headerDao.test.tsx delete mode 100644 src/components/headers/headerDao.tsx delete mode 100644 src/components/headers/headerPage.stories.tsx delete mode 100644 src/components/headers/headerPage.test.tsx delete mode 100644 src/components/headers/headerPage.tsx delete mode 100644 src/components/headers/index.ts delete mode 100644 src/components/icons/icons.stories.tsx delete mode 100644 src/components/icons/index.tsx delete mode 100644 src/components/icons/interface/icon_add.tsx delete mode 100644 src/components/icons/interface/icon_block.tsx delete mode 100644 src/components/icons/interface/icon_calendar.tsx delete mode 100644 src/components/icons/interface/icon_checkbox_default.tsx delete mode 100644 src/components/icons/interface/icon_checkbox_multi.tsx delete mode 100644 src/components/icons/interface/icon_checkbox_selected.tsx delete mode 100644 src/components/icons/interface/icon_checkmark.tsx delete mode 100644 src/components/icons/interface/icon_chevron_down.tsx delete mode 100644 src/components/icons/interface/icon_chevron_left.tsx delete mode 100644 src/components/icons/interface/icon_chevron_right.tsx delete mode 100644 src/components/icons/interface/icon_chevron_up.tsx delete mode 100644 src/components/icons/interface/icon_clock.tsx delete mode 100644 src/components/icons/interface/icon_close.tsx delete mode 100644 src/components/icons/interface/icon_copy.tsx delete mode 100644 src/components/icons/interface/icon_deposit.tsx delete mode 100644 src/components/icons/interface/icon_expand.tsx delete mode 100644 src/components/icons/interface/icon_explore.tsx delete mode 100644 src/components/icons/interface/icon_failure.tsx delete mode 100644 src/components/icons/interface/icon_favorite_default.tsx delete mode 100644 src/components/icons/interface/icon_favorite_selected.tsx delete mode 100644 src/components/icons/interface/icon_feedback.tsx delete mode 100644 src/components/icons/interface/icon_filter.tsx delete mode 100644 src/components/icons/interface/icon_flag.tsx delete mode 100644 src/components/icons/interface/icon_home.tsx delete mode 100644 src/components/icons/interface/icon_info.tsx delete mode 100644 src/components/icons/interface/icon_link_external.tsx delete mode 100644 src/components/icons/interface/icon_menu.tsx delete mode 100644 src/components/icons/interface/icon_menu_vertical.tsx delete mode 100644 src/components/icons/interface/icon_person.tsx delete mode 100644 src/components/icons/interface/icon_question.tsx delete mode 100644 src/components/icons/interface/icon_radio_default.tsx delete mode 100644 src/components/icons/interface/icon_radio_multi.tsx delete mode 100644 src/components/icons/interface/icon_radio_pause.tsx delete mode 100644 src/components/icons/interface/icon_radio_selected.tsx delete mode 100644 src/components/icons/interface/icon_reload.tsx delete mode 100644 src/components/icons/interface/icon_remove.tsx delete mode 100644 src/components/icons/interface/icon_search.tsx delete mode 100644 src/components/icons/interface/icon_settings.tsx delete mode 100644 src/components/icons/interface/icon_shrink.tsx delete mode 100644 src/components/icons/interface/icon_smart_contract.tsx delete mode 100644 src/components/icons/interface/icon_spinner.tsx delete mode 100644 src/components/icons/interface/icon_storage.tsx delete mode 100644 src/components/icons/interface/icon_success.tsx delete mode 100644 src/components/icons/interface/icon_switch.tsx delete mode 100644 src/components/icons/interface/icon_turn_off.tsx delete mode 100644 src/components/icons/interface/icon_update.tsx delete mode 100644 src/components/icons/interface/icon_warning.tsx delete mode 100644 src/components/icons/interface/icon_withdraw.tsx delete mode 100644 src/components/icons/interface/index.ts delete mode 100644 src/components/icons/interface/radio/cancel.tsx delete mode 100644 src/components/icons/interface/radio/index.ts delete mode 100644 src/components/icons/markdown/icon_bold.tsx delete mode 100644 src/components/icons/markdown/icon_italic.tsx delete mode 100644 src/components/icons/markdown/icon_link_set.tsx delete mode 100644 src/components/icons/markdown/icon_link_unset.tsx delete mode 100644 src/components/icons/markdown/icon_list_ordered.tsx delete mode 100644 src/components/icons/markdown/icon_list_unordered.tsx delete mode 100644 src/components/icons/markdown/index.ts delete mode 100644 src/components/icons/module/icon_community.tsx delete mode 100644 src/components/icons/module/icon_dashboard.tsx delete mode 100644 src/components/icons/module/icon_finance.tsx delete mode 100644 src/components/icons/module/icon_governance.tsx delete mode 100644 src/components/icons/module/index.ts delete mode 100644 src/components/illustrations/human/human_accessories/buddha.tsx delete mode 100644 src/components/illustrations/human/human_accessories/earrings_circle.tsx delete mode 100644 src/components/illustrations/human/human_accessories/earrings_hoops.tsx delete mode 100644 src/components/illustrations/human/human_accessories/earrings_rhombus.tsx delete mode 100644 src/components/illustrations/human/human_accessories/earrings_skull.tsx delete mode 100644 src/components/illustrations/human/human_accessories/earrings_thunder.tsx delete mode 100644 src/components/illustrations/human/human_accessories/expression.tsx delete mode 100644 src/components/illustrations/human/human_accessories/flushed.tsx delete mode 100644 src/components/illustrations/human/human_accessories/head_flower.tsx delete mode 100644 src/components/illustrations/human/human_accessories/index.tsx delete mode 100644 src/components/illustrations/human/human_accessories/piercings.tsx delete mode 100644 src/components/illustrations/human/human_accessories/piercings_tattoo.tsx delete mode 100644 src/components/illustrations/human/human_bodies/aragon.tsx delete mode 100644 src/components/illustrations/human/human_bodies/blocks.tsx delete mode 100644 src/components/illustrations/human/human_bodies/chart.tsx delete mode 100644 src/components/illustrations/human/human_bodies/computer.tsx delete mode 100644 src/components/illustrations/human/human_bodies/computer_correct.tsx delete mode 100644 src/components/illustrations/human/human_bodies/correct.tsx delete mode 100644 src/components/illustrations/human/human_bodies/double_correct.tsx delete mode 100644 src/components/illustrations/human/human_bodies/elevating.tsx delete mode 100644 src/components/illustrations/human/human_bodies/index.tsx delete mode 100644 src/components/illustrations/human/human_bodies/relaxed.tsx delete mode 100644 src/components/illustrations/human/human_bodies/sending_love.tsx delete mode 100644 src/components/illustrations/human/human_bodies/voting.tsx delete mode 100644 src/components/illustrations/human/human_expressions/angry.tsx delete mode 100644 src/components/illustrations/human/human_expressions/casual.tsx delete mode 100644 src/components/illustrations/human/human_expressions/crying.tsx delete mode 100644 src/components/illustrations/human/human_expressions/decided.tsx delete mode 100644 src/components/illustrations/human/human_expressions/excited.tsx delete mode 100644 src/components/illustrations/human/human_expressions/index.tsx delete mode 100644 src/components/illustrations/human/human_expressions/sad_left.tsx delete mode 100644 src/components/illustrations/human/human_expressions/sad_right.tsx delete mode 100644 src/components/illustrations/human/human_expressions/smile.tsx delete mode 100644 src/components/illustrations/human/human_expressions/smile_wink.tsx delete mode 100644 src/components/illustrations/human/human_expressions/surprised.tsx delete mode 100644 src/components/illustrations/human/human_expressions/suspecting.tsx delete mode 100644 src/components/illustrations/human/human_hairs/afro.tsx delete mode 100644 src/components/illustrations/human/human_hairs/bald.tsx delete mode 100644 src/components/illustrations/human/human_hairs/bun.tsx delete mode 100644 src/components/illustrations/human/human_hairs/cool.tsx delete mode 100644 src/components/illustrations/human/human_hairs/curly.tsx delete mode 100644 src/components/illustrations/human/human_hairs/curly_bangs.tsx delete mode 100644 src/components/illustrations/human/human_hairs/index.tsx delete mode 100644 src/components/illustrations/human/human_hairs/informal.tsx delete mode 100644 src/components/illustrations/human/human_hairs/long.tsx delete mode 100644 src/components/illustrations/human/human_hairs/middle.tsx delete mode 100644 src/components/illustrations/human/human_hairs/oldschool.tsx delete mode 100644 src/components/illustrations/human/human_hairs/punk.tsx delete mode 100644 src/components/illustrations/human/human_hairs/short.tsx delete mode 100644 src/components/illustrations/human/human_sunglasses/big_rounded.tsx delete mode 100644 src/components/illustrations/human/human_sunglasses/big_semirounded.tsx delete mode 100644 src/components/illustrations/human/human_sunglasses/index.tsx delete mode 100644 src/components/illustrations/human/human_sunglasses/large_stylized.tsx delete mode 100644 src/components/illustrations/human/human_sunglasses/large_stylized_xl.tsx delete mode 100644 src/components/illustrations/human/human_sunglasses/pirate.tsx delete mode 100644 src/components/illustrations/human/human_sunglasses/small_intellectual.tsx delete mode 100644 src/components/illustrations/human/human_sunglasses/small_sympathetic.tsx delete mode 100644 src/components/illustrations/human/human_sunglasses/small_weird_one.tsx delete mode 100644 src/components/illustrations/human/human_sunglasses/small_weird_two.tsx delete mode 100644 src/components/illustrations/human/human_sunglasses/thuglife.tsx delete mode 100644 src/components/illustrations/human/human_sunglasses/thuglife_rounded.tsx delete mode 100644 src/components/illustrations/human/illuHuman.stories.tsx delete mode 100644 src/components/illustrations/human/illuHuman.test.tsx delete mode 100644 src/components/illustrations/human/illuHuman.tsx delete mode 100644 src/components/illustrations/index.ts delete mode 100644 src/components/illustrations/object/action.tsx delete mode 100644 src/components/illustrations/object/app.tsx delete mode 100644 src/components/illustrations/object/archive.tsx delete mode 100644 src/components/illustrations/object/book.tsx delete mode 100644 src/components/illustrations/object/build.tsx delete mode 100644 src/components/illustrations/object/chain.tsx delete mode 100644 src/components/illustrations/object/database.tsx delete mode 100644 src/components/illustrations/object/error.tsx delete mode 100644 src/components/illustrations/object/explore.tsx delete mode 100644 src/components/illustrations/object/gas.tsx delete mode 100644 src/components/illustrations/object/goal.tsx delete mode 100644 src/components/illustrations/object/illuObject.stories.tsx delete mode 100644 src/components/illustrations/object/illuObject.test.tsx delete mode 100644 src/components/illustrations/object/illuObject.tsx delete mode 100644 src/components/illustrations/object/index.tsx delete mode 100644 src/components/illustrations/object/labels.tsx delete mode 100644 src/components/illustrations/object/lightbulb.tsx delete mode 100644 src/components/illustrations/object/magnifyingGlass.tsx delete mode 100644 src/components/illustrations/object/notFound.tsx delete mode 100644 src/components/illustrations/object/security.tsx delete mode 100644 src/components/illustrations/object/settings.tsx delete mode 100644 src/components/illustrations/object/smartContract.tsx delete mode 100644 src/components/illustrations/object/smartContracts.tsx delete mode 100644 src/components/illustrations/object/success.tsx delete mode 100644 src/components/illustrations/object/users.tsx delete mode 100644 src/components/illustrations/object/wagmi.tsx delete mode 100644 src/components/illustrations/object/wallet.tsx delete mode 100644 src/components/illustrations/object/warning.tsx delete mode 100644 src/components/input/dateInput.stories.tsx delete mode 100644 src/components/input/dateInput.test.tsx delete mode 100644 src/components/input/dateInput.tsx delete mode 100644 src/components/input/dropdownInput.stories.tsx delete mode 100644 src/components/input/dropdownInput.test.tsx delete mode 100644 src/components/input/dropdownInput.tsx delete mode 100644 src/components/input/index.ts delete mode 100644 src/components/input/inputImageSingle.stories.tsx delete mode 100644 src/components/input/inputImageSingle.test.tsx delete mode 100644 src/components/input/inputImageSingle.tsx delete mode 100644 src/components/input/numberInput.stories.tsx delete mode 100644 src/components/input/numberInput.test.tsx delete mode 100644 src/components/input/numberInput.tsx delete mode 100644 src/components/input/searchInput.stories.tsx delete mode 100644 src/components/input/searchInput.test.tsx delete mode 100644 src/components/input/searchInput.tsx delete mode 100644 src/components/input/textInput.stories.tsx delete mode 100644 src/components/input/textInput.test.tsx delete mode 100644 src/components/input/textInput.tsx delete mode 100644 src/components/input/timeInput.stories.tsx delete mode 100644 src/components/input/timeInput.test.tsx delete mode 100644 src/components/input/timeInput.tsx delete mode 100644 src/components/input/valueInput.stories.tsx delete mode 100644 src/components/input/valueInput.test.tsx delete mode 100644 src/components/input/valueInput.tsx delete mode 100644 src/components/input/walletInput.stories.tsx delete mode 100644 src/components/input/walletInput.test.tsx delete mode 100644 src/components/input/walletInput.tsx delete mode 100644 src/components/input/walletInputLegacy.tsx delete mode 100644 src/components/label/index.ts delete mode 100644 src/components/label/label.stories.tsx delete mode 100644 src/components/label/label.test.tsx delete mode 100644 src/components/label/label.tsx delete mode 100644 src/components/link/index.ts delete mode 100644 src/components/link/link.stories.tsx delete mode 100644 src/components/link/link.test.tsx delete mode 100644 src/components/link/link.tsx delete mode 100644 src/components/listItem/action.stories.tsx delete mode 100644 src/components/listItem/action.test.tsx delete mode 100644 src/components/listItem/action.tsx delete mode 100644 src/components/listItem/address.stories.tsx delete mode 100644 src/components/listItem/address.test.tsx delete mode 100644 src/components/listItem/address.tsx delete mode 100644 src/components/listItem/blockchain.stories.tsx delete mode 100644 src/components/listItem/blockchain.test.tsx delete mode 100644 src/components/listItem/blockchain.tsx delete mode 100644 src/components/listItem/dao.stories.tsx delete mode 100644 src/components/listItem/dao.test.tsx delete mode 100644 src/components/listItem/dao.tsx delete mode 100644 src/components/listItem/header.stories.tsx delete mode 100644 src/components/listItem/header.test.tsx delete mode 100644 src/components/listItem/header.tsx delete mode 100644 src/components/listItem/index.ts delete mode 100644 src/components/listItem/link.stories.tsx delete mode 100644 src/components/listItem/link.test.tsx delete mode 100644 src/components/listItem/link.tsx delete mode 100644 src/components/listItem/voter.stories.tsx delete mode 100644 src/components/listItem/voter.test.tsx delete mode 100644 src/components/listItem/voter.tsx delete mode 100644 src/components/modal/index.tsx delete mode 100644 src/components/modal/modal.stories.tsx delete mode 100644 src/components/modal/modal.test.tsx delete mode 100644 src/components/modal/modal.tsx delete mode 100644 src/components/pagination/index.tsx delete mode 100644 src/components/pagination/pagination.stories.tsx delete mode 100644 src/components/pagination/pagination.test.tsx delete mode 100644 src/components/pagination/pagination.tsx delete mode 100644 src/components/progress/index.ts delete mode 100644 src/components/progress/linear.stories.tsx delete mode 100644 src/components/progress/linear.test.tsx delete mode 100644 src/components/progress/linear.tsx delete mode 100644 src/components/progress/status.stories.tsx delete mode 100644 src/components/progress/status.test.tsx delete mode 100644 src/components/progress/status.tsx delete mode 100644 src/components/spinner/index.ts delete mode 100644 src/components/spinner/spinner.stories.tsx delete mode 100644 src/components/spinner/spinner.test.tsx delete mode 100644 src/components/spinner/spinner.tsx delete mode 100644 src/components/table/index.ts delete mode 100644 src/components/table/tableCell.stories.tsx delete mode 100644 src/components/table/tableCell.test.tsx delete mode 100644 src/components/table/tableCell.tsx delete mode 100644 src/components/table/votersTable.stories.tsx delete mode 100644 src/components/table/votersTable.test.tsx delete mode 100644 src/components/table/votersTable.tsx delete mode 100644 src/components/tag/index.ts delete mode 100644 src/components/tag/tag.api.ts delete mode 100644 src/components/tag/tag.spec.tsx delete mode 100644 src/components/tag/tag.stories.tsx delete mode 100644 src/components/tag/tag.tsx delete mode 100644 src/components/textarea/index.ts delete mode 100644 src/components/textarea/textarea.stories.tsx delete mode 100644 src/components/textarea/textarea.test.tsx delete mode 100644 src/components/textarea/textarea.tsx delete mode 100644 src/components/textarea/wysiwyg.stories.tsx delete mode 100644 src/components/textarea/wysiwyg.tsx delete mode 100644 src/components/tokenListItem/index.ts delete mode 100644 src/components/tokenListItem/tokenListItem.stories.tsx delete mode 100644 src/components/tokenListItem/tokenListItem.test.tsx delete mode 100644 src/components/tokenListItem/tokenListItem.tsx delete mode 100644 src/components/transferListItem/index.ts delete mode 100644 src/components/transferListItem/transferListItem.stories.tsx delete mode 100644 src/components/transferListItem/transferListItem.test.tsx delete mode 100644 src/components/transferListItem/transferListItem.tsx delete mode 100644 src/components/widgets/index.ts delete mode 100644 src/components/widgets/status.stories.tsx delete mode 100644 src/components/widgets/status.test.tsx delete mode 100644 src/components/widgets/status.tsx delete mode 100644 src/components/wizard/index.ts delete mode 100644 src/components/wizard/wizard.stories.tsx delete mode 100644 src/components/wizard/wizard.test.tsx delete mode 100644 src/components/wizard/wizard.tsx delete mode 100644 src/hooks/index.ts delete mode 100644 src/hooks/use-screen/index.ts delete mode 100644 src/hooks/use-screen/use-screen.ts delete mode 100644 src/utils/addresses.test.ts delete mode 100644 src/utils/addresses.tsx delete mode 100644 src/utils/illustrations.tsx delete mode 100644 src/utils/index.ts diff --git a/.eslintrc.js b/.eslintrc.js index fb0309ac3..5d64218c5 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -12,6 +12,7 @@ const extendsBase = [ 'plugin:import/typescript', 'plugin:jsx-a11y/recommended', 'plugin:react/recommended', + 'plugin:react/jsx-runtime', 'plugin:react-hooks/recommended', 'plugin:testing-library/react', 'plugin:tailwindcss/recommended', @@ -35,6 +36,7 @@ const rulesBase = { const typescriptRules = { ...rulesBase, '@typescript-eslint/no-explicit-any': 'warn', + '@typescript-eslint/no-empty-interface': 'off', '@typescript-eslint/prefer-nullish-coalescing': 'warn', '@typescript-eslint/array-type': ['warn', { default: 'array-simple' }], '@typescript-eslint/consistent-type-imports': ['warn', { fixStyle: 'inline-type-imports' }], diff --git a/index.css b/index.css index ffc9ffa47..9ce43842c 100644 --- a/index.css +++ b/index.css @@ -1,5 +1,4 @@ @import "./src/styles/colors.css"; -@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;700&display=swap"); @tailwind base; @tailwind components; diff --git a/package.json b/package.json index 395a32d41..25457fd3d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@aragon/ods", - "version": "0.2.14", + "version": "1.0.0", "description": "Implementation of the Aragon's Open Design System", "main": "dist/index.cjs.js", "types": "dist/types/index.d.ts", @@ -39,71 +39,58 @@ ], "author": "Aragon Association", "dependencies": { - "@radix-ui/react-dialog": "^1.0.4", - "@radix-ui/react-dropdown-menu": "^2.0.5", - "@tiptap/extension-link": "^2.0.3", - "@tiptap/extension-placeholder": "^2.0.3", - "@tiptap/pm": "^2.0.3", - "@tiptap/react": "^2.0.3", - "@tiptap/starter-kit": "^2.0.3", "classnames": "^2.3.2", - "react": "^17.0.0", - "react-blockies": "^1.4.1", - "react-dom": "^17.0.0", - "react-dropzone": "^11.5.1", - "styled-components": "^5.0.0", - "tailwindcss": "^2.0.0", - "tailwindcss-fluid-type": "^1.0.0" + "react": "^18.2.0", + "react-dom": "^18.2.0", + "tailwindcss": "^3.3.3" }, "devDependencies": { - "@babel/core": "^7.0.0", - "@babel/preset-env": "^7.22.6", - "@babel/preset-react": "^7.22.5", - "@babel/preset-typescript": "^7.22.5", - "@rollup/plugin-commonjs": "^25.0.2", + "@babel/core": "^7.22.20", + "@babel/preset-env": "^7.22.20", + "@babel/preset-react": "^7.22.15", + "@babel/preset-typescript": "^7.22.15", + "@rollup/plugin-commonjs": "^25.0.4", "@rollup/plugin-image": "^3.0.2", - "@rollup/plugin-node-resolve": "^15.1.0", + "@rollup/plugin-node-resolve": "^15.2.1", "@rollup/plugin-terser": "^0.4.3", - "@rollup/plugin-typescript": "^11.1.2", - "@storybook/addon-essentials": "^7.0.26", - "@storybook/addon-interactions": "^7.0.26", - "@storybook/addon-links": "^7.0.26", - "@storybook/addon-styling": "^1.3.2", - "@storybook/blocks": "^7.0.26", - "@storybook/react": "^7.0.26", - "@storybook/react-webpack5": "^7.0.26", + "@rollup/plugin-typescript": "^11.1.3", + "@storybook/addon-essentials": "^7.4.2", + "@storybook/addon-interactions": "^7.4.2", + "@storybook/addon-links": "^7.4.2", + "@storybook/addon-styling": "^1.3.7", + "@storybook/blocks": "^7.4.2", + "@storybook/react": "^7.4.2", + "@storybook/react-webpack5": "^7.4.2", "@storybook/storybook-deployer": "^2.8.16", - "@storybook/testing-library": "^0.2.0", - "@testing-library/jest-dom": "^5.16.5", - "@testing-library/react": "^12.0.0", - "@types/react-blockies": "^1.4.1", - "@types/styled-components": "^5.0.0", - "@typescript-eslint/eslint-plugin": "^5.61.0", - "@typescript-eslint/parser": "^5.61.0", - "autoprefixer": "^10.4.14", + "@storybook/testing-library": "^0.2.1", + "@testing-library/jest-dom": "^6.1.3", + "@testing-library/react": "^14.0.0", + "@typescript-eslint/eslint-plugin": "^6.7.0", + "@typescript-eslint/parser": "^6.7.0", + "autoprefixer": "^10.4.15", "cross-env": "^7.0.3", - "eslint": "^8.44.0", - "eslint-plugin-import": "^2.27.5", + "eslint": "^8.49.0", + "eslint-plugin-import": "^2.28.1", "eslint-plugin-jsx-a11y": "^6.7.1", - "eslint-plugin-react": "^7.32.2", + "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", - "eslint-plugin-storybook": "^0.6.12", - "eslint-plugin-tailwindcss": "^2.0.0", - "eslint-plugin-testing-library": "^5.11.0", + "eslint-plugin-storybook": "^0.6.13", + "eslint-plugin-tailwindcss": "^3.13.0", + "eslint-plugin-testing-library": "^6.0.1", "husky": "^8.0.3", - "jest": "^29.6.0", - "jest-environment-jsdom": "^29.6.0", - "lint-staged": "^13.2.3", - "postcss": "^8.4.24", - "prettier": "^2.8.8", - "prettier-plugin-organize-imports": "^3.2.2", - "prop-types": "^15.8.1", - "rollup": "^3.26.1", + "jest": "^29.7.0", + "jest-environment-jsdom": "^29.7.0", + "lint-staged": "^14.0.1", + "postcss": "^8.4.29", + "prettier": "^3.0.3", + "prettier-plugin-organize-imports": "^3.2.3", + "prettier-plugin-tailwindcss": "^0.5.4", + "rollup": "^3.29.2", "rollup-plugin-postcss": "^4.0.2", "rollup-plugin-visualizer": "^5.9.2", - "storybook": "^7.0.26", + "storybook": "^7.4.2", "ts-jest": "^29.1.1", - "typescript": "^5.1.5" + "typescript": "^5.2.2" }, "bugs": { "url": "https://github.com/aragon/ods/issues" diff --git a/prettier.config.js b/prettier.config.js index 52ef825d1..f30a478c5 100644 --- a/prettier.config.js +++ b/prettier.config.js @@ -21,11 +21,5 @@ module.exports = { }, }, ], - plugins: [ - require.resolve('prettier-plugin-organize-imports'), - // TODO: introduce tailwind prettier plugin after migration to Prettier v3 as not supported by V2 - // require('prettier-plugin-tailwindcss'), - ], - // TODO: introduce plugin options when prettier-plugin-tailwindcss is enabled - // tailwindFunctions: ['twMerge'], + plugins: [require.resolve('prettier-plugin-organize-imports'), 'prettier-plugin-tailwindcss'], }; diff --git a/src/assets/avatar-token.svg b/src/assets/avatar-token.svg deleted file mode 100644 index 5aa20d650..000000000 --- a/src/assets/avatar-token.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/src/components/actionItems/actionItemAddress.stories.tsx b/src/components/actionItems/actionItemAddress.stories.tsx deleted file mode 100644 index 4294a89be..000000000 --- a/src/components/actionItems/actionItemAddress.stories.tsx +++ /dev/null @@ -1,65 +0,0 @@ -// Button.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; -import React from 'react'; - -import { IconCopy, IconGovernance, IconLinkExternal } from '../icons'; -import { ListItemAction } from '../listItem'; -import { ActionItemAddress, TAG_WALLET_ID_VARIANTS } from './actionItemAddress'; - -const meta: Meta = { - component: ActionItemAddress, - title: 'Components/ActionItems/Address', - tags: ['autodocs'], - argTypes: { - addressOrEns: { control: { type: 'text' } }, - avatar: { control: { type: 'text' } }, - tagLabel: { control: { type: 'text' } }, - walletId: { - options: TAG_WALLET_ID_VARIANTS, - control: { type: 'radio' }, - }, - }, -}; - -export default meta; - -type Story = StoryObj; - -export const Primary: Story = { - render: ({ ...args }) => , - args: { - addressOrEns: '0x0000000000000000000000000000000000000000', - tagLabel: 'You', - delegations: 2, - delegationLabel: 'Delegations', - supplyPercentage: 10, - tokenAmount: '1000', - tokenSymbol: 'ANT', - menuOptions: [ - { - component: ( - } bgWhite /> - ), - }, - { - component: ( - } - bgWhite - /> - ), - }, - { - component: ( - } - bgWhite - /> - ), - }, - ], - }, -}; diff --git a/src/components/actionItems/actionItemAddress.tsx b/src/components/actionItems/actionItemAddress.tsx deleted file mode 100644 index 26ea535ca..000000000 --- a/src/components/actionItems/actionItemAddress.tsx +++ /dev/null @@ -1,176 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; - -import { useScreen } from '../../hooks'; -import { shortenAddress } from '../../utils'; -import { Avatar } from '../avatar'; -import { ButtonIcon } from '../button'; -import { Dropdown, type ListItemProps } from '../dropdown'; -import { IconLinkExternal, IconMenuVertical } from '../icons'; -import { Tag } from '../tag'; - -/** - * Type declarations for `ActionItemAddressProps`. - */ -export type ActionItemAddressProps = { - /** Wallet address or ENS domain name. */ - addressOrEns: string; - - /** Optional ENS avatar URL. If not provided and the wallet address is valid, - * it will be used to generate a Blockies avatar. - */ - avatar?: string; - - /** Label for the delegation amount. */ - delegationLabel: string; - - /** Number of delegations. */ - delegations: number; - - /** List of dropdown menu options. */ - menuOptions: ListItemProps[]; - - /** Optional click handler for the "view on-chain" action. */ - onViewOnChainClick?: React.MouseEventHandler; - - /** Percentage of supply. */ - supplyPercentage: number; - - /** Optional label for the wallet tag. */ - tagLabel?: string; - - /** Number of tokens delegated. */ - tokenAmount: string; - - /** Symbol of the token delegated. */ - tokenSymbol: string; - - /** ID variant for the wallet, which can be 'delegate' or 'you'. */ - walletId?: TagWalletIdProps['variant']; -}; - -/** - * `ActionItemAddress` component: Displays an address item with associated actions. - * @param props - Component properties following `ActionItemAddressProps` type. - * @returns JSX Element. - */ -export const ActionItemAddress: React.FC = (props) => { - const { - addressOrEns, - avatar, - delegationLabel, - delegations, - menuOptions, - onViewOnChainClick, - supplyPercentage, - tagLabel, - tokenAmount, - tokenSymbol, - walletId, - } = props; - - const { isDesktop } = useScreen(); - - return ( - - - - - - {shortenAddress(addressOrEns)} - {walletId && tagLabel && ( - - )} - - - - {tokenAmount} - {tokenSymbol} - {supplyPercentage}% - - - {delegations > 0 && ( - <> - {delegations} - {delegationLabel} - - )} - - - - - {isDesktop && ( - } - size="small" - bgWhite - onClick={onViewOnChainClick} - /> - )} - - } size="small" bgWhite />} - /> - - - ); -}; - -export const TAG_WALLET_ID_VARIANTS = ['delegate', 'you'] as const; -type TagWalletIdVariant = (typeof TAG_WALLET_ID_VARIANTS)[number]; - -/** - * Type declarations for `TagWalletIdProps`. - */ -type TagWalletIdProps = { - /** Optional CSS classes to apply to the tag. */ - className?: string; - /** Label to display on the tag. */ - label: string; - /** Variant of the tag which affects its color. Can be 'delegate' or 'you'. */ - variant: TagWalletIdVariant; -}; - -/** - * `TagWalletId` component: Displays a styled tag based on the provided variant. - * @param props - Component properties following `TagWalletIdProps` type. - * @returns JSX Element. - */ -const TagWalletId: React.FC = ({ className, label, variant }) => { - const colorScheme = variant === 'you' ? 'neutral' : 'info'; - return ; -}; - -const Container = styled.div.attrs({ - className: - 'bg-ui-0 flex py-2 items-center px-1.5 desktop:pr-2 desktop:pl-3 space-x-2 w-full border-b border-b-ui-100', -})``; - -const ContentWrapper = styled.div.attrs({ className: 'desktop:flex flex-1 space-y-0.5' })``; - -const Content = styled.div.attrs({ - className: 'flex desktop:flex-1 space-x-1.5 font-semibold text-ui-600 ft-text-sm', -})``; - -const InfoWrapper = styled.div.attrs({ - className: 'flex desktop:flex-1 space-x-0.25', -})``; - -const InfoLabel = styled.span.attrs({ className: 'font-normal text-ui-500' })``; - -const Wallet = styled.div.attrs({ className: 'flex desktop:flex-1 items-center' })``; - -const AddressOrEns = styled.div.attrs({ className: 'font-semibold text-ui-800 ft-text-base' })``; - -const ButtonGroup = styled.div.attrs({ className: 'flex gap-x-1.5' })``; diff --git a/src/components/actionItems/index.ts b/src/components/actionItems/index.ts deleted file mode 100644 index e962e4f44..000000000 --- a/src/components/actionItems/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './actionItemAddress'; diff --git a/src/components/alerts/alertBanner.stories.tsx b/src/components/alerts/alertBanner.stories.tsx deleted file mode 100644 index 74a4a95c3..000000000 --- a/src/components/alerts/alertBanner.stories.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { AlertBanner, type AlertBannerProps } from './alertBanner'; - -export default { - title: 'Components/Alerts/Banner', - component: AlertBanner, -} as Meta; - -const Template: Story = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - mode: 'info', - label: 'Testnet Active', -}; diff --git a/src/components/alerts/alertBanner.test.tsx b/src/components/alerts/alertBanner.test.tsx deleted file mode 100644 index 9901e56cd..000000000 --- a/src/components/alerts/alertBanner.test.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import React from 'react'; -import { AlertBanner } from './alertBanner'; - -describe('AlertBanner', () => { - // eslint-disable-next-line - function setup(args: any) { - render(); - return screen.getByRole('alert'); - } - - test('should render without crashing', () => { - const element = setup({ label: 'Test Message' }); - expect(element).toBeInTheDocument; - expect(screen.getByText(/test/i)).toBeInTheDocument; - }); -}); diff --git a/src/components/alerts/alertBanner.tsx b/src/components/alerts/alertBanner.tsx deleted file mode 100644 index 0ecf1a2df..000000000 --- a/src/components/alerts/alertBanner.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; - -export type AlertBannerProps = { - /** type and severity of alert */ - mode?: 'info' | 'success' | 'warning' | 'critical'; - - /** alert copy */ - label: string; -}; - -export const AlertBanner: React.FC = ({ mode = 'info', label }) => { - return ( - - {label} - - ); -}; - -const styles = { - info: 'text-info-900 bg-info-100', - success: 'text-success-900 bg-success-100', - warning: 'text-warning-900 bg-warning-100', - critical: 'text-critical-900 bg-critical-100', -}; - -type ContainerProps = { - mode: NonNullable; -}; - -const Container = styled.div.attrs(({ mode }: ContainerProps) => ({ - className: `ft-text-xs py-0.5 px-2 text-center font-bold ${styles[mode]}`, -}))``; diff --git a/src/components/alerts/alertCard.stories.tsx b/src/components/alerts/alertCard.stories.tsx deleted file mode 100644 index 972b64b6f..000000000 --- a/src/components/alerts/alertCard.stories.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { AlertCard, type AlertCardProps } from './alertCard'; - -export default { - title: 'Components/Alerts/Card', - component: AlertCard, -} as Meta; - -const Template: Story = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - mode: 'info', - title: 'This is a title', - helpText: 'This is a help text', -}; diff --git a/src/components/alerts/alertCard.tsx b/src/components/alerts/alertCard.tsx deleted file mode 100644 index 3ca8608a3..000000000 --- a/src/components/alerts/alertCard.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; - -import { IconInfo, IconSuccess, IconWarning } from '../icons'; - -const styles = { - info: { - icon: , - color: 'text-info-800', - borderColor: 'border-info-400', - bgColor: 'bg-info-100', - }, - success: { - icon: , - color: 'text-success-800', - borderColor: 'border-success-400', - bgColor: 'bg-success-100', - }, - warning: { - icon: , - color: 'text-warning-800', - borderColor: 'border-warning-400', - bgColor: 'bg-warning-100', - }, - critical: { - icon: , - color: 'text-critical-800', - borderColor: 'border-critical-400', - bgColor: 'bg-critical-100', - }, -}; - -export type AlertCardProps = { - /** type and severity of alert */ - mode?: 'info' | 'success' | 'warning' | 'critical'; - /** card title */ - title: string; - /** card subtitle */ - helpText?: string; -}; - -export const AlertCard: React.FC = ({ mode = 'info', title, helpText }) => { - return ( - -
{styles[mode].icon}
- - {title} - {helpText} - - - ); -}; - -type ContainerProps = { - mode: NonNullable; -}; -const Container = styled.div.attrs(({ mode }: ContainerProps) => ({ - className: `flex gap-1.5 box-border px-2 py-1.5 border-2 rounded-xl ${styles[mode].bgColor} ${styles[mode].borderColor}`, -}))``; - -const TextContainer = styled.div.attrs(() => ({ - className: 'flex flex-col gap-0.25 ', -}))``; - -const Title = styled.div.attrs(({ mode }: ContainerProps) => ({ - className: `flex flex-col font-bold ft-text-base ${styles[mode].color}`, -}))``; - -const HelpText = styled.div.attrs(() => ({ - className: 'text-ui-600 ft-text-sm', -}))``; diff --git a/src/components/alerts/alertChip.stories.tsx b/src/components/alerts/alertChip.stories.tsx deleted file mode 100644 index c553aec55..000000000 --- a/src/components/alerts/alertChip.stories.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { IconCheckmark } from '../icons'; -import { AlertChip, type AlertChipProps } from './alertChip'; - -export default { - title: 'Components/Alerts/Chip', - component: AlertChip, -} as Meta; - -const Template: Story = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - label: 'Pasted', - icon: , - showIcon: true, -}; diff --git a/src/components/alerts/alertChip.test.tsx b/src/components/alerts/alertChip.test.tsx deleted file mode 100644 index 06451f886..000000000 --- a/src/components/alerts/alertChip.test.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import React from 'react'; -import { AlertChip } from './alertChip'; - -describe('AlertChip', () => { - // eslint-disable-next-line - function setup(args: any) { - render(); - return screen.getByTestId('alertChip'); - } - - test('should render without crashing', () => { - const element = setup({}); - expect(element).toBeInTheDocument; - }); -}); diff --git a/src/components/alerts/alertChip.tsx b/src/components/alerts/alertChip.tsx deleted file mode 100644 index 94982931a..000000000 --- a/src/components/alerts/alertChip.tsx +++ /dev/null @@ -1,111 +0,0 @@ -import React, { type ReactComponentElement } from 'react'; -import styled, { css } from 'styled-components'; - -import { IconCheckmark, type IconType } from '../icons'; - -export type AlertChipProps = { - /** Chip Label */ - label: string; - /** Icon component */ - icon?: ReactComponentElement; - /** control Icon visibility */ - showIcon?: boolean; - /** Is chip visible */ - isShown: boolean; -}; - -export const AlertChip: React.FC = ({ - label, - icon = , - showIcon = false, - isShown = false, -}) => { - return ( - - - {showIcon && - React.cloneElement(icon, { - height: 12, - width: 12, - className: 'text-ui-300', - })} - - - - ); -}; - -type ContainerProps = Pick; - -const WrapperAnimationCSS = css` - animation: ${({ isShown }: ContainerProps) => (isShown ? 'fadein 0.3s' : 'fadeout 0.3s')}; - - @-webkit-keyframes fadein { - from { - top: 0; - opacity: 0; - z-index: 0; - } - to { - top: 24px; - opacity: 1; - z-index: 50; - } - } - - @keyframes fadein { - from { - top: 0; - opacity: 0; - z-index: 0; - } - to { - top: 24px; - opacity: 1; - z-index: 50; - } - } - - @-webkit-keyframes fadeout { - from { - top: 24px; - opacity: 1; - z-index: 50; - } - to { - top: 0; - opacity: 0; - z-index: 0; - } - } - - @keyframes fadeout { - from { - top: 24px; - opacity: 1; - z-index: 50; - } - to { - top: 0;s - opacity: 0; - z-index: 0; - } - } -`; - -const Wrapper = styled.div.attrs(({ isShown }: ContainerProps) => ({ - className: `fixed w-full flex items-center justify-center top-3 ${ - isShown ? 'opacity-100 fixed' : 'opacity-0 none' - }`, -}))` - z-index: ${(props) => (props.isShown ? '50' : '-50')}; - ${WrapperAnimationCSS} -`; - -const BadgeContainer = styled.div.attrs(() => ({ - className: 'flex items-center bg-ui-900 rounded-full px-3 py-2 space-x-1 cursor-default', -}))``; - -const Label = styled.span.attrs({ - className: 'text-ui-100 ft-text-sm', -})``; diff --git a/src/components/alerts/alertInline.stories.tsx b/src/components/alerts/alertInline.stories.tsx deleted file mode 100644 index ecd1a574a..000000000 --- a/src/components/alerts/alertInline.stories.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { AlertInline, type AlertInlineProps } from './alertInline'; - -export default { - title: 'Components/Alerts/Inline', - component: AlertInline, -} as Meta; - -const Template: Story = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - mode: 'critical', - label: 'Message text', -}; diff --git a/src/components/alerts/alertInline.test.tsx b/src/components/alerts/alertInline.test.tsx deleted file mode 100644 index c1232d206..000000000 --- a/src/components/alerts/alertInline.test.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import React from 'react'; -import { AlertInline } from './alertInline'; - -describe('AlertInline', () => { - // eslint-disable-next-line - function setup(args: any) { - render(); - return screen.getByTestId('alertInline'); - } - - test('should render without crashing', () => { - const element = setup({ label: 'Test Message' }); - expect(element).toBeInTheDocument; - expect(screen.getByText(/test/i)).toBeInTheDocument; - }); -}); diff --git a/src/components/alerts/alertInline.tsx b/src/components/alerts/alertInline.tsx deleted file mode 100644 index 736dd55aa..000000000 --- a/src/components/alerts/alertInline.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; - -import { IconInfo, IconSuccess, IconWarning, type IconType } from '../icons'; - -export type AlertInlineProps = { - /** type and severity of alert */ - mode?: 'neutral' | 'success' | 'warning' | 'critical'; - - /** alert copy */ - label: string; - icon?: React.FunctionComponentElement; -}; - -const styles = { - neutral: { - icon: , - color: 'text-info-800', - }, - success: { - icon: , - color: 'text-success-800', - }, - warning: { - icon: , - color: 'text-warning-800', - }, - critical: { - icon: , - color: 'text-critical-800', - }, -}; - -/** - * Inline alert used in combination with form-fields - */ -export const AlertInline: React.FC = ({ mode = 'neutral', label, icon }) => { - return ( - -
{icon ?? styles[mode].icon}
- - - ); -}; - -type ContainerProps = { - mode: NonNullable; -}; -const Container = styled.div.attrs(({ mode }: ContainerProps) => ({ - className: `flex items-center space-x-1 ${styles[mode].color}`, -}))``; - -const Label = styled.p.attrs({ className: 'font-bold ft-text-sm' })``; diff --git a/src/components/alerts/index.ts b/src/components/alerts/index.ts deleted file mode 100644 index b03d24eae..000000000 --- a/src/components/alerts/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export * from './alertBanner'; -export * from './alertCard'; -export * from './alertChip'; -export * from './alertInline'; diff --git a/src/components/avatar/avatar.stories.tsx b/src/components/avatar/avatar.stories.tsx deleted file mode 100644 index e3095ed3d..000000000 --- a/src/components/avatar/avatar.stories.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { Avatar, type AvatarProps } from './avatar'; - -export default { - title: 'Components/Avatar', - component: Avatar, -} as Meta; - -const Template: Story = (args) => ; - -export const Square = Template.bind({}); -Square.args = { - src: 'https://cdn.discordapp.com/icons/672466989217873929/a_51c83f18bd98ca37916f540b3ecf40f7.webp?size=1024', - mode: 'square', -}; - -export const Circle = Template.bind({}); -Circle.args = { - src: 'https://cdn.discordapp.com/icons/672466989217873929/a_51c83f18bd98ca37916f540b3ecf40f7.webp?size=1024', - mode: 'circle', -}; - -export const Initials = Template.bind({}); -Initials.args = { - src: 'https://eu.ui-avatars.com/api/?name=Dao+Name+three&background=0037D2&color=fff', - mode: 'circle', -}; - -export const Identicon = Template.bind({}); -Identicon.args = { - src: '0x6720000000000000000000000000000000007739', - mode: 'circle', -}; diff --git a/src/components/avatar/avatar.test.tsx b/src/components/avatar/avatar.test.tsx deleted file mode 100644 index 6956055f8..000000000 --- a/src/components/avatar/avatar.test.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import React from 'react'; -import { Avatar } from './avatar'; - -describe('Avatar', () => { - // eslint-disable-next-line - function setup(args: any) { - render(); - return screen.getByRole('img'); - } - - test('should render without crashing', () => { - const element = setup({}); - expect(element).toBeInTheDocument; - }); -}); diff --git a/src/components/avatar/avatar.tsx b/src/components/avatar/avatar.tsx deleted file mode 100644 index 2212f135e..000000000 --- a/src/components/avatar/avatar.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import Blockies from 'react-blockies'; -import styled from 'styled-components'; - -import { IsAddress } from '../../utils/addresses'; - -export type AvatarProps = { - /** Change Avatar's border Radius */ - mode?: 'circle' | 'square'; - /** Changes a Avatar's size */ - size: 'small' | 'default' | 'large'; - /** URL of the Avatar's src */ - src: string; -}; - -type SizesType = Record; - -const BLOCKIES_SQUARES = 8; -const sizes: SizesType = { - small: { sizes: 'w-3 h-3', scale: 3 }, - default: { sizes: 'w-5 h-5', scale: 5 }, - large: { sizes: 'w-6 h-6', scale: 6 }, -}; - -/** Simple Avatar*/ -export const Avatar: React.FC = ({ mode = 'circle', size = 'default', src }) => { - const [error, setError] = useState(false); - - useEffect(() => { - setError(false); - }, [src]); - - if (!error) { - return ( - - {IsAddress(src) || src?.endsWith('.eth') ? ( - - ) : ( - { - setError(true); - }} - /> - )} - - ); - } - - return ; -}; - -type StyledAvatarProps = Pick; -type StyledContainerProps = Pick; - -const StyledAvatar = styled.img.attrs(({ size }: StyledAvatarProps) => { - const className = `${sizes[size].sizes}`; - return { className }; -})``; - -const AvatarContainer = styled.div.attrs(({ size, mode }: StyledContainerProps) => { - const className = `overflow-hidden bg-ui-100 - ${sizes[size].sizes} - ${mode === 'circle' ? 'rounded-full' : 'rounded-2xl'} - `; - return { className }; -})``; - -const FallbackAvatar = styled.div.attrs({ className: 'w-3 h-3 rounded-full bg-gradient-to-tl from-ui-900' })``; diff --git a/src/components/avatar/avatarDao.stories.tsx b/src/components/avatar/avatarDao.stories.tsx deleted file mode 100644 index 1f1049d27..000000000 --- a/src/components/avatar/avatarDao.stories.tsx +++ /dev/null @@ -1,22 +0,0 @@ -// TODO: combine all avatar stories -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { AvatarDao, type AvatarDaoProps } from './avatarDao'; - -export default { - title: 'Components/Avatar/Dao', - component: AvatarDao, -} as Meta; - -const Template: Story = (args) => ; - -export const WithIcon = Template.bind({}); -WithIcon.args = { - src: 'https://cdn.discordapp.com/icons/672466989217873929/a_51c83f18bd98ca37916f540b3ecf40f7.webp?size=1024', - daoName: 'DAO Name', -}; - -export const NoIcon = Template.bind({}); -NoIcon.args = { - daoName: 'DAO Abc', -}; diff --git a/src/components/avatar/avatarDao.tsx b/src/components/avatar/avatarDao.tsx deleted file mode 100644 index 50617c74b..000000000 --- a/src/components/avatar/avatarDao.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import React, { useEffect, useMemo, useState, type HTMLAttributes } from 'react'; -import styled from 'styled-components'; - -export interface AvatarDaoProps extends HTMLAttributes { - daoName: string; - src?: string; - size?: 'small' | 'medium' | 'big' | 'hero' | 'unset'; - onClick?: () => void; -} - -export const AvatarDao: React.FC = ({ daoName, src, size = 'medium', onClick, ...props }) => { - const [error, setError] = useState(false); - - useEffect(() => { - setError(false); - }, [src]); - - const daoInitials = useMemo(() => { - // To allow for no name daos - should not be a thing - if (!daoName) { - return ''; - } - - const arr = daoName.trim().split(' '); - if (arr.length === 1) { - return arr[0][0]; - } else { - return arr[0][0] + arr[1][0]; - } - }, [daoName]); - - return error || !src ? ( - - {daoInitials?.toUpperCase()} - - ) : ( - setError(true)} {...props} /> - ); -}; - -type AvatarPropsType = { - size: NonNullable; -}; - -const sizes = { - small: 'w-3 h-3 ft-text-xs', - medium: 'w-6 h-6 ft-text-base', - big: 'w-10 h-10 ft-text-lg', - hero: 'w-14 h-14 ft-text-xl', -}; - -const Avatar = styled.img.attrs(({ size }: AvatarPropsType) => ({ - className: `${size !== 'unset' && sizes[size]} rounded-full` as string, -}))``; - -const FallBackAvatar = styled.div.attrs(({ size }: AvatarPropsType) => ({ - className: - 'flex items-center justify-center font-bold text-ui-0 bg-gradient-to-r' + - ` from-primary-500 to-primary-800 ${size !== 'unset' && sizes[size]} rounded-full border`, -}))``; - -const DaoInitials = styled.p.attrs({ - className: 'w-4 h-4 flex items-center justify-center', -})``; diff --git a/src/components/avatar/avatarToken.stories.tsx b/src/components/avatar/avatarToken.stories.tsx deleted file mode 100644 index 7a9e325d6..000000000 --- a/src/components/avatar/avatarToken.stories.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { AvatarToken, type AvatarTokenProps } from './avatarToken'; - -export default { - title: 'Components/Avatar/Token', - component: AvatarToken, -} as Meta; - -const Template: Story = (args) => ; - -export const WithIcon = Template.bind({}); -WithIcon.args = { - src: 'https://eu.ui-avatars.com/api/?name=Dao+Name+three&background=0037D2&color=fff', - size: 'small', -}; - -export const WithFallback = Template.bind({}); -WithFallback.args = {}; diff --git a/src/components/avatar/avatarToken.tsx b/src/components/avatar/avatarToken.tsx deleted file mode 100644 index 34cfdbcbe..000000000 --- a/src/components/avatar/avatarToken.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React, { type SyntheticEvent } from 'react'; -import styled from 'styled-components'; -import FallbackImg from '../../assets/avatar-token.svg'; - -export type AvatarTokenProps = { - size?: 'small' | 'medium' | 'large'; - src?: string; -}; - -export const AvatarToken: React.FC = ({ size = 'medium', src }) => { - return ( - ) => { - e.currentTarget.src = FallbackImg; - }} - /> - ); -}; - -const styles = { - small: 'w-2 h-2', - medium: 'w-3 h-3', - large: 'w-5 h-5', -}; - -type SizesType = Pick; - -const StyledImage = styled.img.attrs(({ size = 'medium' }: SizesType) => { - return { className: `${styles[size]} rounded-full` }; -})``; diff --git a/src/components/avatar/avatarWallet.stories.tsx b/src/components/avatar/avatarWallet.stories.tsx deleted file mode 100644 index f02c6fe48..000000000 --- a/src/components/avatar/avatarWallet.stories.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { AvatarWallet, type AvatarWalletProps } from './avatarWallet'; - -export default { - title: 'Components/Avatar/Wallet', - component: AvatarWallet, -} as Meta; - -const Template: Story = (args) => ; - -export const WithIcon = Template.bind({}); -WithIcon.args = { - src: 'https://eu.ui-avatars.com/api/?name=Dao+Name+three&background=0037D2&color=fff', -}; - -export const WithAddress = Template.bind({}); -WithAddress.args = { - src: '0x6720000000000000000000000000000000007739', -}; diff --git a/src/components/avatar/avatarWallet.tsx b/src/components/avatar/avatarWallet.tsx deleted file mode 100644 index 1b618f2db..000000000 --- a/src/components/avatar/avatarWallet.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; -import Blockies from 'react-blockies'; -import styled from 'styled-components'; -import { IsAddress } from '../../utils/addresses'; - -const SQUARES = 8; - -export type AvatarWalletProps = { - size?: 'small' | 'medium'; - /** - * Url of the avatar icon OR wallet address - */ - src: string; -}; - -type SizesType = Record, { style: string; scale: number }>; - -const styles: SizesType = { - small: { style: 'w-2 h-2', scale: 2 }, - medium: { style: 'w-3 h-3', scale: 3 }, -}; - -export const AvatarWallet: React.FC = ({ src, size = 'medium' }) => { - return IsAddress(src) ? ( - - ) : ( - - ); -}; - -const StyledBlockies = styled(Blockies).attrs({ - className: 'rounded-full', -})``; - -type SizeProps = Pick; -const StyledAvatar = styled.img.attrs(({ size = 'medium' }: SizeProps) => { - return { - className: `${styles[size].style} rounded-full`, - }; -})``; diff --git a/src/components/avatar/index.ts b/src/components/avatar/index.ts deleted file mode 100644 index ccda4b78a..000000000 --- a/src/components/avatar/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export * from './avatar'; -export * from './avatarDao'; -export * from './avatarToken'; -export * from './avatarWallet'; diff --git a/src/components/backdrop/backdrop.test.tsx b/src/components/backdrop/backdrop.test.tsx deleted file mode 100644 index 24bc7d033..000000000 --- a/src/components/backdrop/backdrop.test.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import React from 'react'; -import { Backdrop } from './backdrop'; - -describe('Backdrop', () => { - // eslint-disable-next-line - function setup(args: any) { - render(); - return screen.getByTestId('backdrop-container'); - } - - test('should render without crashing', () => { - const element = setup({}); - expect(element).toBeInTheDocument; - }); -}); diff --git a/src/components/backdrop/backdrop.tsx b/src/components/backdrop/backdrop.tsx deleted file mode 100644 index 88c19b01f..000000000 --- a/src/components/backdrop/backdrop.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import React, { useEffect, type ReactNode } from 'react'; -import styled, { type CSSProperties } from 'styled-components'; - -export interface BackdropProps { - /** - * The `visible` prop determines whether your modal is visible. - */ - visible?: boolean; - /** - * The `onClose` prop allows passing a function that will be called once the modal has been dismissed. - */ - onClose?: () => void; - /** - * Children Element - */ - children?: ReactNode; -} - -const togglePageOverflow = (visible: boolean) => { - const html = document.querySelector('html'); - - if (!html) { - return; - } - - html.style.overflow = visible ? 'hidden' : 'auto'; -}; - -/** - * Backdrop UI component - */ -export const Backdrop: React.FC = ({ visible = false, children, onClose, ...props }) => { - useEffect(() => { - togglePageOverflow(visible); - }, [visible]); - - useEffect(() => { - const handleResize = () => togglePageOverflow(visible); - - window?.addEventListener?.('resize', handleResize); - - return () => { - window?.removeEventListener?.('resize', handleResize); - }; - }, [visible]); - - return ( - - {children} - - ); -}; - -type StyledBackdropProps = { - visible: boolean; -}; - -export const BackdropStyles = ({ visible }: StyledBackdropProps) => { - const className: string = visible ? 'visible opacity-100 z-20' : 'invisible opacity-0'; - const css: CSSProperties = { - position: 'fixed', - top: 0, - left: 0, - right: 0, - bottom: 0, - background: 'linear-gradient(167.96deg, rgba(31, 41, 51, 0.24) 0%, #1F2933 100%)', - transition: 'visibility 0.2s, opacity 0.2s linear', - backdropFilter: 'blur(24px)', - cursor: 'pointer', - marginTop: 0, - }; - - return { className, css }; -}; - -const StyledBackdrop = styled.div.attrs(({ visible }: StyledBackdropProps) => { - const { className, css } = BackdropStyles({ visible }); - return { className, style: css }; -})``; diff --git a/src/components/backdrop/index.ts b/src/components/backdrop/index.ts deleted file mode 100644 index 349647233..000000000 --- a/src/components/backdrop/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './backdrop'; diff --git a/src/components/breadcrumb/breadcrumb.test.tsx b/src/components/breadcrumb/breadcrumb.test.tsx deleted file mode 100644 index c25a37b3b..000000000 --- a/src/components/breadcrumb/breadcrumb.test.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { fireEvent, render, screen } from '@testing-library/react'; -import React from 'react'; -import { IconAdd } from '../icons'; -import { Breadcrumb } from './breadcrumb'; - -const crumbs = [ - { label: 'label-1', path: 'path-1' }, - { label: 'label-2', path: 'path-2' }, -]; - -describe('Breadcrumb', () => { - test('should render default crumbs without crashing', () => { - render(} />); - - const element = screen.getByTestId(/breadcrumbs/i); - expect(element).toBeInTheDocument; - }); - - test('should render process crumb without crashing', () => { - render(); - - const element = screen.getByTestId(/breadcrumbs/i); - expect(element).toBeInTheDocument; - }); - - test('should display the breadcrumbs with given labels', () => { - render(} />); - const breadcrumbs = screen.getAllByRole('button'); - - breadcrumbs.forEach((crumb, index) => expect(crumb.textContent).toBe(crumbs[index].label)); - }); - - test('should call the onClick method with the correct path when breadcrumb is clicked', () => { - const mockHandler = jest.fn(); - - render(} />); - fireEvent.click(screen.getAllByRole('button')[0]); - - expect(mockHandler).toHaveBeenCalledTimes(1); - expect(mockHandler).toBeCalledWith(crumbs[0].path); - }); - - test('should not call the onClick method when last breadcrumb is clicked', () => { - const mockHandler = jest.fn(); - - render(} />); - const breadcrumbs = screen.getAllByRole('button'); - fireEvent.click(breadcrumbs[breadcrumbs.length - 1]); - - expect(mockHandler).not.toHaveBeenCalled(); - }); -}); diff --git a/src/components/breadcrumb/breadcrumb.tsx b/src/components/breadcrumb/breadcrumb.tsx deleted file mode 100644 index 6a05ed48d..000000000 --- a/src/components/breadcrumb/breadcrumb.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import React, { type ReactComponentElement } from 'react'; -import styled from 'styled-components'; -import { ButtonIcon } from '../button'; -import { IconChevronLeft, IconChevronRight, type IconType } from '../icons'; -import { type TagProps } from '../tag'; -import Crumb from './crumb'; - -export type CrumbType = { - label: string; - path: string; -}; - -export type DefaultCrumbProps = { - /** - * Array of breadcrumbs to be displayed; each breadcrumb should - * include a label and its corresponding path - */ - crumbs: CrumbType[]; - - /** Base path icon to be displayed */ - icon: ReactComponentElement; -}; - -export type ProcessCrumbProps = { - crumbs: CrumbType; - icon?: ReactComponentElement; -}; - -export type BreadcrumbProps = { - /** Tag shown at the end of the list of breadcrumbs */ - tag?: React.FunctionComponentElement; - - /** Callback returning the path value of the breadcrumb clicked */ - onClick?: (path: string) => void; -} & (ProcessCrumbProps | DefaultCrumbProps); - -/** Component displaying given list as breadcrumbs. */ -export const Breadcrumb: React.FC = ({ crumbs, icon, tag, onClick }) => { - if (Array.isArray(crumbs)) { - let isLast: boolean; - - return ( - - {crumbs.map(({ label, path }, index) => { - isLast = index === crumbs.length - 1; - return ( -
- onClick?.(path) })} - /> - {!isLast && } -
- ); - })} - - ); - } else { - return ( - - - } - onClick={() => onClick?.(crumbs.path)} - bgWhite - /> -

{crumbs?.label}

- {tag} - - - ); - } -}; - -const Container = styled.div.attrs({ - className: - 'inline-flex items-center py-0.5 desktop:px-2 space-x-1 ' + - 'desktop:space-x-1.5 h-5 desktop:h-6 desktop:bg-ui-0 desktop:rounded-xl', -})``; - -const ProcessContainer = styled.div.attrs({ - className: 'inline-flex py-0.5 desktop:pr-2 desktop:pl-0.5 desktop:rounded-xl desktop:bg-ui-0 h-6', -})``; - -const ProcessCrumbContainer = styled.div.attrs({ - className: 'flex items-center space-x-1.5 font-bold text-ui-600', -})``; diff --git a/src/components/breadcrumb/breadcrumbs.stories.tsx b/src/components/breadcrumb/breadcrumbs.stories.tsx deleted file mode 100644 index eed6f5e20..000000000 --- a/src/components/breadcrumb/breadcrumbs.stories.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { type Meta, type StoryFn } from '@storybook/react'; -import React from 'react'; -import { IconFinance } from '../icons'; -import { Tag } from '../tag'; -import { Breadcrumb, type BreadcrumbProps } from './breadcrumb'; - -export default { - title: 'Components/Breadcrumb', - component: Breadcrumb, -} as Meta; - -const Template: StoryFn = (args: BreadcrumbProps) => ; - -export const Default = Template.bind({}); -export const NoTag = Template.bind({}); -export const Process = Template.bind({}); - -Default.args = { - crumbs: [ - { label: 'Finance', path: '/abc' }, - { label: 'Tokens', path: '/abc' }, - { label: 'Third Level', path: '/abc' }, - ], - tag: , - icon: , -}; - -NoTag.args = { - crumbs: [ - { label: 'Finance', path: '/abc' }, - { label: 'Tokens', path: '/abc' }, - ], - icon: , -}; - -Process.args = { - crumbs: [{ label: 'New Proposal', path: '/abc' }], - tag: , -}; diff --git a/src/components/breadcrumb/crumb.tsx b/src/components/breadcrumb/crumb.tsx deleted file mode 100644 index d33b96a94..000000000 --- a/src/components/breadcrumb/crumb.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React, { type ReactComponentElement } from 'react'; -import styled from 'styled-components'; -import { type IconType } from '../icons'; -import { type TagProps } from '../tag'; - -type CrumbProps = { - first?: boolean; - label: string; - last?: boolean; - icon?: ReactComponentElement; - tag?: React.FunctionComponentElement; - onClick?: React.MouseEventHandler; -}; - -const Crumb: React.FC = (props) => { - return ( - - {props.first && - props.icon && - React.cloneElement(props.icon, { - className: 'desktop:w-2.5 desktop:h-2.5', - })} -

{props.label}

- {props.last && props.tag} - - ); -}; - -export default Crumb; - -const CrumbContainer = styled.button.attrs({ - className: 'flex items-center space-x-1 desktop:space-x-1.5' as string, -})``; diff --git a/src/components/breadcrumb/index.ts b/src/components/breadcrumb/index.ts deleted file mode 100644 index e10b05199..000000000 --- a/src/components/breadcrumb/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './breadcrumb'; diff --git a/src/components/button/button.test.tsx b/src/components/button/button.test.tsx deleted file mode 100644 index b38797d43..000000000 --- a/src/components/button/button.test.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { fireEvent, render, screen } from '@testing-library/react'; -import React from 'react'; -import { ButtonBase as Button } from './buttonBase'; - -describe('Button', () => { - // eslint-disable-next-line - function setup(args: any) { - render( - ) - } - {...props} - /> - ); -}; - -const LeftAdornmentWrapper = styled.div.attrs({ - className: 'pl-2 pr-1.5', -})``; - -const RightAdornmentWrapper = styled.div.attrs({ - className: 'pr-2', -})``; diff --git a/src/components/input/textInput.stories.tsx b/src/components/input/textInput.stories.tsx deleted file mode 100644 index e713a96f2..000000000 --- a/src/components/input/textInput.stories.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { TextInput, type TextInputProps } from './textInput'; - -export default { - title: 'Components/Input/Text', - component: TextInput, -} as Meta; - -const Template: Story = (args) => ; - -export const Text = Template.bind({}); -Text.args = { - mode: 'default', - placeholder: 'Placeholder', -}; diff --git a/src/components/input/textInput.test.tsx b/src/components/input/textInput.test.tsx deleted file mode 100644 index 2a3725871..000000000 --- a/src/components/input/textInput.test.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import React from 'react'; -import { TextInput } from './textInput'; - -describe('TextInput', () => { - // eslint-disable-next-line - function setup(args: any) { - render(); - return screen.getByTestId('input'); - } - - test('should render without crashing', () => { - const element = setup({}); - expect(element).toBeInTheDocument; - }); -}); diff --git a/src/components/input/textInput.tsx b/src/components/input/textInput.tsx deleted file mode 100644 index 6d886a0b4..000000000 --- a/src/components/input/textInput.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import React, { type ReactNode } from 'react'; -import styled from 'styled-components'; - -export type TextInputProps = React.InputHTMLAttributes & { - /** Changes a input's color schema */ - mode?: 'default' | 'success' | 'warning' | 'critical'; - /** - * left adornment - */ - leftAdornment?: ReactNode; - /** - * right adornment - */ - rightAdornment?: ReactNode; - disabled?: boolean; -}; - -/** Simple input with variable styling (depending on mode) */ -export const TextInput: React.FC = ({ - mode = 'default', - disabled, - leftAdornment, - rightAdornment, - ...props -}) => { - return ( - - {leftAdornment} - - - - {rightAdornment} - - ); -}; - -type StyledContainerProps = Pick; - -export const Container = styled.div.attrs(({ mode, disabled }: StyledContainerProps) => { - let className = `${disabled ? 'bg-ui-100 border-ui-200 border-2' : 'bg-ui-0'} flex items-center focus-within:ring-2 - focus-within:ring-primary-500 - rounded-xl hover:border-ui-300 border-2 h-6 - active:border-primary-500 active:ring-0 `; - - if (mode === 'default') { - className += 'border-ui-100'; - } else if (mode === 'success') { - className += 'border-success-600'; - } else if (mode === 'warning') { - className += 'border-warning-600'; - } else if (mode === 'critical') { - className += 'border-critical-600'; - } - - return { className }; -})``; - -export const StyledInput = styled.input.attrs(() => { - const className: string | undefined = 'w-full bg-transparent h-4 truncate'; - return { className }; -})` - outline: 0; -`; - -type StyledInputWrapper = Pick; - -const InputWrapper = styled.div.attrs(({ leftAdornment }: StyledInputWrapper) => ({ - className: `py-1.5 ${leftAdornment ? 'pr-2' : 'px-2'} w-full`, -}))``; diff --git a/src/components/input/timeInput.stories.tsx b/src/components/input/timeInput.stories.tsx deleted file mode 100644 index 4efced9f7..000000000 --- a/src/components/input/timeInput.stories.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React, { useState } from 'react'; -import { TimeInput, type TimeInputProps } from './timeInput'; - -export default { - title: 'Components/Input/Time', - component: TimeInput, -} as Meta; - -const Template: Story = (args) => { - const [value, setValue] = useState('12:23'); - return setValue(nextValue)} />; -}; - -export const Time = Template.bind({}); -Time.args = { - mode: 'default', -}; diff --git a/src/components/input/timeInput.test.tsx b/src/components/input/timeInput.test.tsx deleted file mode 100644 index 9b6ea1383..000000000 --- a/src/components/input/timeInput.test.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import React from 'react'; -import { TimeInput } from './timeInput'; - -describe('TimeInput', () => { - // eslint-disable-next-line - function setup(args: any) { - render(); - return screen.getByTestId('time-input'); - } - - test('should render without crashing', () => { - const element = setup({}); - expect(element).toBeInTheDocument; - }); -}); diff --git a/src/components/input/timeInput.tsx b/src/components/input/timeInput.tsx deleted file mode 100644 index fb56e625f..000000000 --- a/src/components/input/timeInput.tsx +++ /dev/null @@ -1,138 +0,0 @@ -import React, { useMemo } from 'react'; -import styled from 'styled-components'; - -import { ButtonGroup, Option } from '../button/buttonGroup'; - -export type valueType = { time: string; midday: 'pm' | 'am' }; - -export type TimeInputProps = Omit, 'onChange'> & { - /** Changes a input's color schema */ - mode?: 'default' | 'success' | 'warning' | 'critical'; - disabled?: boolean; - onChange: (value: string) => void; - width?: number; - value: string; -}; - -export const TimeInput: React.FC = ({ - mode = 'default', - disabled, - width, - value, - onChange: onChangeCallback, - ...props -}) => { - const midday = useMemo(() => { - const hours = Number(value?.match(/^(\d+)/)?.[1]); - return hours > 11 ? 'pm' : 'am'; - }, [value]); - - const onChange = (nextValue: React.FormEvent | string, type: 'time' | 'midday') => { - if (type === 'time') { - const currentTarget = (nextValue as React.FormEvent).target; - - const hours = Number((currentTarget as HTMLInputElement).value.match(/^(\d+)/)?.[1]); - - const minutes = Number((currentTarget as HTMLInputElement).value.match(/:(\d+)/)?.[1]); - - let sHours = hours.toString(); - let sMinutes = minutes.toString(); - if (hours < 10) { - sHours = `0${sHours}`; - } - if (minutes < 10) { - sMinutes = `0${sMinutes}`; - } - - onChangeCallback(`${sHours}:${sMinutes}`); - } else { - let hours = Number(value.match(/^(\d+)/)?.[1]); - const minutes = Number(value.match(/:(\d+)/)?.[1]); - - if (nextValue === 'am' && hours > 12) { - hours = hours - 12; - } - - if (nextValue === 'pm' && hours < 12) { - hours = hours + 12; - } - - let sHours = hours.toString(); - let sMinutes = minutes.toString(); - if (hours < 10) { - sHours = `0${sHours}`; - } - if (minutes < 10) { - sMinutes = `0${sMinutes}`; - } - - onChangeCallback(`${sHours}:${sMinutes}`); - } - }; - - return ( - - onChange(e, 'time')} - type="time" - value={value} - required - /> - {/* TODO: This Radio button need to be customized. For now we used a - default Radio button but it should update soon - */} - onChange(e, 'midday')} value={midday}> - - - ); -}; - -export type StyledContainerProps = Pick; - -const Container = styled.div.attrs(({ mode, disabled, width }: StyledContainerProps) => { - let className = `${disabled ? 'bg-ui-100' : 'bg-ui-0'} inline-flex p-1 bg-ui-0 ${ - width ? '' : 'w-30' - } focus:outline-none items-center font-normal - focus-within:ring-2 focus-within:ring-primary-500 justify-between - rounded-xl hover:border-ui-300 border-2 active:border-primary-500 - active:ring-0 - `; - - if (mode === 'default') { - className += 'border-ui-100'; - } else if (mode === 'success') { - className += 'border-success-600'; - } else if (mode === 'warning') { - className += 'border-warning-600'; - } else if (mode === 'critical') { - className += 'border-critical-600'; - } - - return { - className, - ...(width && { style: { width: `${width}px` } }), - }; -})``; - -const StyledTimeInput = styled.input.attrs(({ disabled }) => { - const className: string | undefined = `${ - disabled ? 'text-ui-300' : 'text-ui-600' - } bg-transparent focus:outline-none margin-0 w-full`; - - return { - className, - }; -})` - ::-webkit-calendar-picker-indicator { - display: none; - } - ::-webkit-datetime-edit-ampm-field { - display: none; - } - - outline: 0; -`; diff --git a/src/components/input/valueInput.stories.tsx b/src/components/input/valueInput.stories.tsx deleted file mode 100644 index 7d12516f5..000000000 --- a/src/components/input/valueInput.stories.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { ValueInput, type ValueInputProps } from './valueInput'; - -export default { - title: 'Components/Input/Value', - component: ValueInput, -} as Meta; - -const Template: Story = (args) => ; - -export const Value = Template.bind({}); -Value.args = { - adornmentText: 'Max', - onAdornmentClick: () => alert('Button clicked'), - mode: 'default', - disabled: false, - placeholder: 'Placeholder', -}; diff --git a/src/components/input/valueInput.test.tsx b/src/components/input/valueInput.test.tsx deleted file mode 100644 index 2b3e6c4c2..000000000 --- a/src/components/input/valueInput.test.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import React from 'react'; -import { ValueInput } from './valueInput'; - -describe('ValueInput', () => { - // eslint-disable-next-line - function setup(args: any) { - render(); - return screen.getByTestId('input-value'); - } - - test('should render without crashing', () => { - const element = setup({}); - expect(element).toBeInTheDocument; - }); -}); diff --git a/src/components/input/valueInput.tsx b/src/components/input/valueInput.tsx deleted file mode 100644 index 8a8df75fb..000000000 --- a/src/components/input/valueInput.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; - -import { ButtonText } from '../button'; -import { StyledInput } from './textInput'; - -export type ValueInputProps = React.InputHTMLAttributes & { - /** Text that appears on the button present on the right side of the input; if no text - * is provided, the button will not be rendered */ - adornmentText?: string; - /** Handler for when the button present on the right side of the input is - * clicked */ - onAdornmentClick?: () => void; - /** Changes a input's color schema */ - mode?: 'default' | 'success' | 'warning' | 'critical'; -}; - -export const ValueInput = React.forwardRef( - ({ mode = 'default', disabled = false, adornmentText = '', onAdornmentClick, ...props }, ref) => ( - - { - e.preventDefault(); - (e.target as HTMLInputElement).blur(); - }} - /> - {adornmentText && ( - - )} - - ), -); - -ValueInput.displayName = 'ValueInput'; - -type StyledContainerProps = Pick; - -export const Container = styled.div.attrs(({ mode, disabled }: StyledContainerProps) => { - let className = `${ - disabled ? 'bg-ui-100 border-ui-200' : 'bg-ui-0' - } flex items-center space-x-1.5 p-0.75 pl-2 text-ui-600 rounded-xl - border-2 focus-within:ring-2 focus-within:ring-primary-500 - hover:border-ui-300 active:border-primary-500 active:ring-0 `; - - if (mode === 'default') { - className += 'border-ui-100'; - } else if (mode === 'success') { - className += 'border-success-600'; - } else if (mode === 'warning') { - className += 'border-warning-600'; - } else if (mode === 'critical') { - className += 'border-critical-600'; - } - - return { className }; -})``; diff --git a/src/components/input/walletInput.stories.tsx b/src/components/input/walletInput.stories.tsx deleted file mode 100644 index bca35d4dc..000000000 --- a/src/components/input/walletInput.stories.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React, { useState } from 'react'; -import { WalletInput, type WalletInputProps, type WalletInputValue } from './walletInput'; - -export default { - title: 'Components/Input/Wallet', - component: WalletInput, -} as Meta; - -const Template: Story = (args) => { - const [value, setValue] = useState({ - address: '', - ensName: '', - }); - - return ; -}; - -export const Default = Template.bind({}); -Default.args = { - placeholder: 'ENS or 0x…', - blockExplorerURL: 'https://etherscan.io/name-lookup-search?id=', - resolveEnsNameFromAddress: async () => { - new Promise((resolve) => setTimeout(resolve, 2000)); - return 'sio.eth'; - }, - resolveAddressFromEnsName: async () => { - new Promise((resolve) => setTimeout(resolve, 2000)); - return '0xd5fb864ACfD6BB2f72939f122e89fF7F475924f5'; - }, -}; - -export const AddressOnly = Template.bind({}); -AddressOnly.args = { - placeholder: '0x…', - blockExplorerURL: 'https://etherscan.io/name-lookup-search?id=', -}; - -Default.args = { - placeholder: 'ENS or 0x…', - blockExplorerURL: 'https://etherscan.io/name-lookup-search?id=', - resolveEnsNameFromAddress: async () => { - new Promise((resolve) => setTimeout(resolve, 2000)); - return 'sio.eth'; - }, - resolveAddressFromEnsName: async () => { - new Promise((resolve) => setTimeout(resolve, 2000)); - return '0xd5fb864ACfD6BB2f72939f122e89fF7F475924f5'; - }, -}; - -export const Disabled = Template.bind({}); -Disabled.args = { - disabled: true, - placeholder: 'ENS or 0x…', - blockExplorerURL: 'https://etherscan.io/name-lookup-search?id=', - resolveEnsNameFromAddress: async () => { - new Promise((resolve) => setTimeout(resolve, 2000)); - return 'sio.eth'; - }, - resolveAddressFromEnsName: async () => { - new Promise((resolve) => setTimeout(resolve, 2000)); - return '0xd5fb864ACfD6BB2f72939f122e89fF7F475924f5'; - }, -}; diff --git a/src/components/input/walletInput.test.tsx b/src/components/input/walletInput.test.tsx deleted file mode 100644 index d60a1be77..000000000 --- a/src/components/input/walletInput.test.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import React from 'react'; -import { WalletInput } from './walletInput'; - -describe.skip('WalletInput', () => { - // eslint-disable-next-line - function setup(args: any) { - render(); - return screen.getByTestId('input-wallet'); - } - - test('should render without crashing', () => { - const element = setup({}); - expect(element).toBeInTheDocument; - }); -}); diff --git a/src/components/input/walletInput.tsx b/src/components/input/walletInput.tsx deleted file mode 100644 index 91a289e30..000000000 --- a/src/components/input/walletInput.tsx +++ /dev/null @@ -1,516 +0,0 @@ -import React, { useCallback, useEffect, useMemo, useRef, useState, type ReactEventHandler } from 'react'; -import styled from 'styled-components'; - -import { IsAddress, isEnsDomain, shortenAddress, shortenENS } from '../../utils/addresses'; -import { ButtonIcon, ButtonText } from '../button'; -import { IconCopy, IconLinkExternal } from '../icons'; - -/** Input Wallet value type */ -export type WalletInputValue = { - ensName: string; - address: string; -}; - -// Toggle type for value to show in textarea input -type DisplayMode = 'address' | 'ensName'; - -/** - * WalletInputProps is a type that defines the properties for a wallet input component. - * It extends the properties of an HTMLTextAreaElement, except for 'value' and 'onChange'. - */ -export type WalletInputProps = Omit, 'value' | 'onChange'> & { - /** Input field props */ - /** - * The current value of the input field. Note that this is the full value. - */ - value: WalletInputValue; - - /** - * A callback function that is called when the value of the input field changes. - * It takes the new value as an argument. - */ - onValueChange: (newValue: WalletInputValue) => void; - - /** - * Changes the input's color schema. - */ - state?: 'success' | 'warning' | 'critical'; - - /** Button event handlers */ - /** - * An optional event handler that is called when the toggle button is clicked. - */ - onToggleButtonClick?: ReactEventHandler; - - /** - * An optional event handler that is called when the clear button is clicked. - */ - onClearButtonClick?: ReactEventHandler; - - /** - * An optional event handler that is called when the paste button is clicked. - */ - onPasteButtonClick?: ReactEventHandler; - - /** - * An optional event handler that is called when the copy button is clicked. - */ - onCopyButtonClick?: ReactEventHandler; - - /** - * An optional event handler that is called when the view explorer button is clicked. - */ - onViewExplorerButtonClick?: (e: React.MouseEvent, addressOrEns: string) => void; - - /** - * The URL to be used for opening the ENS name and address in an external block explorer. - * This requires a format where the ENS name or address can be appended to the end of the - * given URL - */ - blockExplorerURL?: string; - - /** ENS and address resolvers */ - /** - * Function to get ENS subdomain using an address. - */ - resolveEnsNameFromAddress?: (address: string | Promise) => Promise; - - /** - * Function to get address from an ENS subdomain. - */ - resolveAddressFromEnsName?: (ensName: string | Promise) => Promise; - - /** - * An optional event handler to be called when the corresponding address has been found - */ - onEnsResolved?: (ensName: string | null) => void; - - /** - * An optional event handler to be called when the address has been validated - */ - onAddressValidated?: (address: string | null) => void; - - /** - * An optional event handler to be called when an error occurs while resolving - * an address or ENS name - */ - onResolvingError?: (error: Error) => void; -}; - -export const WalletInput = React.forwardRef( - ( - { - state, - value, - disabled, - blockExplorerURL, - onFocus, - onWheel, - onValueChange, - onToggleButtonClick, - onClearButtonClick, - onPasteButtonClick, - onCopyButtonClick, - onViewExplorerButtonClick, - resolveEnsNameFromAddress, - resolveAddressFromEnsName, - onAddressValidated, - onEnsResolved, - onResolvingError, - ...props - }, - ref, - ) => { - const textareaRef = useRef(null); - const wasNotEditingRef = useRef(true); - - const [truncate, setTruncate] = useState(false); - const [isEditing, setIsEditing] = useState(false); - const [displayMode, setDisplayMode] = useState(() => (value.ensName ? 'ensName' : 'address')); - const [initialHeight, setInitialHeight] = useState(0); - - const canToggle = !!value.address && !!value.ensName; - const togglerLabel = displayMode === 'address' ? 'ENS' : '0x…'; - const ensSupported = !!resolveAddressFromEnsName && !!resolveEnsNameFromAddress; - - // holds the full format of the potentially shortened value in the input - const fullValue: string = useMemo(() => { - return String(displayMode === 'address' ? value.address : value.ensName); - }, [displayMode, value.address, value.ensName]); - - // Only show see on scan button if the input is valid - const showExternalButton = blockExplorerURL && (IsAddress(fullValue) || isEnsDomain(fullValue)); - const adornmentsDisabled = disabled && !fullValue; - - // This displays the truncated address/ens when the value is not being - // edited by the user, or in the case of ens, when the length of the name - // would have otherwise overflown - const displayedValue = useMemo(() => { - // show full value if user is editing - if (isEditing) { - return fullValue; - } - - if (displayMode === 'address') { - return shortenAddress(value.address); - } - - // Get the current height and compare it with the initial height. - // because the input row is set to 1, when the input gets filled, - // the height is being adjusted so that the overflow is not hidden. - // The height being modified means that the text would have otherwise - // wrapped/overflown. - if (getTextAreaHeight(textareaRef.current) > initialHeight || truncate) { - setTruncate(false); - return shortenENS(value.ensName); - } else { - return value.ensName as string; - } - }, [displayMode, fullValue, initialHeight, isEditing, truncate, value.address, value.ensName]); - - /************************************************* - * Hooks & Effects * - *************************************************/ - useEffect(() => { - async function resolveValues() { - const newValue = { ...value }; - - if (displayMode === 'address') { - try { - // only fetch when it's a valid address - if (IsAddress(fullValue)) { - onAddressValidated?.(fullValue); - - // resolve ens name - const result = await resolveEnsNameFromAddress?.(fullValue); - newValue.ensName = result?.toLowerCase() ?? ''; - } - } catch (error) { - onResolvingError?.(error as Error); - newValue.ensName = ''; - } - } else if (resolveAddressFromEnsName) { - try { - // only fetch when it's a valid ens - if (isEnsDomain(fullValue)) { - const result = await resolveAddressFromEnsName?.(fullValue); - newValue.address = result?.toLowerCase() ?? ''; - - // wait until the corresponding ens value is resolved - newValue.address && onEnsResolved?.(value.address); - } - } catch (error) { - onResolvingError?.(error as Error); - newValue.address = ''; - } - } - - if (value.address !== newValue.address || value.ensName !== newValue.ensName) { - onValueChange(newValue); - } - } - - if (ensSupported && value[displayMode]) { - resolveValues(); - } - }, [ - displayMode, - ensSupported, - fullValue, - onAddressValidated, - onEnsResolved, - onResolvingError, - resolveAddressFromEnsName, - resolveEnsNameFromAddress, - onValueChange, - value, - ]); - - // resolve the forwarded ref and local ref - useEffect(() => { - if (typeof ref === 'function') { - ref(textareaRef.current); - } else if (ref) { - (ref as React.MutableRefObject).current = textareaRef.current; - } - }, [ref]); - - // adjust textarea height so that it grows as filled - useEffect(() => { - if (textareaRef.current) { - // get the initial height of the text area - if (textareaRef.current.style.height !== null) { - setInitialHeight((prev) => { - if (prev) { - return prev; - } else { - return getTextAreaHeight(textareaRef.current); - } - }); - } - - // adjust height so input grows as filled - textareaRef.current.style.height = 'auto'; - textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`; - } - }, [isEditing, value, displayedValue]); - - // select text on focus, this needs to be done here instead of onFocus because - // updating the isEditing state will remove the focus when the component re-renders - useEffect(() => { - if (wasNotEditingRef && isEditing) { - textareaRef.current?.select(); - } - }, [isEditing]); - - useEffect(() => { - if (!isEditing) { - if (getTextAreaHeight(textareaRef.current) > initialHeight) { - setTruncate(true); - } - } - }, [initialHeight, isEditing, displayedValue]); - - /************************************************* - * Callbacks and handlers * - *************************************************/ - // Show ens or address - const toggleDisplayMode = useCallback( - (event: React.MouseEvent) => { - const newDisplayMode: DisplayMode = displayMode === 'address' ? 'ensName' : 'address'; - - setDisplayMode(newDisplayMode); - onToggleButtonClick?.(event); - }, - [displayMode, onToggleButtonClick], - ); - - const handleContainerBlur = useCallback((event: React.FocusEvent) => { - event.preventDefault(); - setIsEditing(false); - wasNotEditingRef.current = false; - }, []); - - const handleFocus = useCallback( - (event: React.FocusEvent) => { - setIsEditing(true); - wasNotEditingRef.current = true; - onFocus?.(event); - }, - [onFocus], - ); - - const handleOnWheel = useCallback( - (event: React.WheelEvent) => { - event.preventDefault(); - event.currentTarget.blur(); - onWheel?.(event); - }, - [onWheel], - ); - - const setValue = useCallback( - (addressOrEns: string) => { - if (addressOrEns === '') { - return { ensName: '', address: '' }; - } - - // set proper display mode based on the value - if (IsAddress(addressOrEns) || !ensSupported || addressOrEns.startsWith('0x')) { - setDisplayMode('address'); - return { ensName: '', address: addressOrEns.toLowerCase() }; - } else { - setDisplayMode('ensName'); - return { address: '', ensName: addressOrEns.toLowerCase() }; - } - }, - [ensSupported], - ); - - const handleChange = useCallback( - (event: React.ChangeEvent) => { - onValueChange(setValue(event.target.value)); - }, - - [onValueChange, setValue], - ); - - const handleClearInput = useCallback( - (event: React.MouseEvent) => { - event.preventDefault(); - onValueChange(setValue('')); - setIsEditing(true); - onClearButtonClick?.(event); - }, - [onClearButtonClick, onValueChange, setValue], - ); - - const handlePasteFromClipboard = useCallback( - async (event: React.MouseEvent) => { - try { - const clipboardData = await navigator.clipboard.readText(); - - setIsEditing(false); - onValueChange(setValue(clipboardData)); - onPasteButtonClick?.(event); - } catch (err) { - // eslint-disable-next-line no-console - console.error('Failed to read clipboard contents: ', err); - } - }, - [onPasteButtonClick, onValueChange, setValue], - ); - - const handleCopyToClipboard = useCallback( - (event: React.MouseEvent) => { - navigator.clipboard.writeText((displayMode === 'address' ? value.address : value.ensName) || ''); - onCopyButtonClick?.(event); - }, - [displayMode, onCopyButtonClick, value.address, value.ensName], - ); - - const handleViewOnExplorer = useCallback( - (event: React.MouseEvent) => { - window.open(blockExplorerURL + fullValue); - onViewExplorerButtonClick?.(event, fullValue); - }, - [blockExplorerURL, fullValue, onViewExplorerButtonClick], - ); - - /************************************************* - * Render * - *************************************************/ - return ( - <> - - - - - -
- {!displayedValue && ( - - )} - {displayedValue && isEditing && ( - - )} - - {displayedValue && !isEditing && ( - - {canToggle && ( - - )} - } - mode="secondary" - size="small" - bgWhite - onClick={handleCopyToClipboard} - disabled={adornmentsDisabled} - /> - {showExternalButton && ( - } - mode="secondary" - size="small" - bgWhite - disabled={adornmentsDisabled} - onClick={handleViewOnExplorer} - /> - )} - - )} -
- - - ); - }, -); - -WalletInput.displayName = 'WalletInput'; - -function getTextAreaHeight(element: HTMLTextAreaElement | null) { - if (element === null) { - return 0; - } - - return Number(element.style.height.split('px')[0]); -} - -export const StyledInput = styled.textarea.attrs(() => { - const baseClassName = - 'w-full items-center appearance-none bg-transparent border-none outline-none resize-none font-inherit p-0 m-0'; - const disabledClassName = 'disabled:cursor-not-allowed'; - - const className: string | undefined = `${baseClassName} ${disabledClassName}`; - - return { className }; -})``; - -export const InputWrapper = styled.div.attrs({ - className: 'flex items-center w-full', -})``; - -type StyledContainerProps = Pick; - -const AdornmentWrapper = styled.div.attrs(() => { - const className = 'flex items-center space-x-0.75 border-blue-600'; - - return { className }; -})``; - -const modeStyles = (state: WalletInputProps['state']) => { - switch (state) { - case 'success': - return 'border-success-600'; - case 'warning': - return 'border-warning-600'; - case 'critical': - return 'border-critical-600'; - default: - return 'border-ui-100'; - } -}; - -export const Container = styled.div.attrs(({ state, disabled }: StyledContainerProps) => { - const baseClassName = 'border-2 flex space-x-1.5 py-0.75 pr-1 pl-2 rounded-xl'; - const modeClassName = modeStyles(state); - - const focusClass = disabled ? '' : 'focus-within:ring-2 focus-within:ring-primary-500'; - - const bgAndBorderColor = disabled ? 'bg-ui-100 border-ui-200 text-ui-700' : 'bg-ui-0 text-ui-600'; - - return { - className: `${baseClassName} ${modeClassName} ${bgAndBorderColor} ${focusClass}`, - }; -})``; diff --git a/src/components/input/walletInputLegacy.tsx b/src/components/input/walletInputLegacy.tsx deleted file mode 100644 index 18b399492..000000000 --- a/src/components/input/walletInputLegacy.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; -import { ButtonText } from '../button'; -import { StyledInput } from './textInput'; - -export type WalletInputLegacyProps = React.InputHTMLAttributes & { - /** Text that appears on the button present on the right side of the input; if no text - * is provided, the button will not be rendered */ - adornmentText?: string; - /** Handler for when the button present on the right side of the input is - * clicked */ - onAdornmentClick?: () => void; - /** Changes a input's color schema */ - mode?: 'default' | 'success' | 'warning' | 'critical'; - /** Disable the input but keep the adornment button active */ - disabledFilled?: boolean; -}; - -export const WalletInputLegacy = React.forwardRef( - ( - { mode = 'default', disabled = false, disabledFilled = false, adornmentText = '', onAdornmentClick, ...props }, - ref, - ) => ( - - { - e.preventDefault(); - (e.target as HTMLInputElement).blur(); - }} - /> - {adornmentText && ( - - )} - - ), -); - -WalletInputLegacy.displayName = 'WalletInputLegacy'; - -type StyledContainerProps = Pick; - -export const Container = styled.div.attrs(({ mode, disabled }: StyledContainerProps) => { - let className = `${ - disabled ? 'bg-ui-100 border-ui-200' : 'bg-ui-0' - } flex items-center space-x-1.5 p-0.75 pl-2 text-ui-600 rounded-xl - border-2 focus-within:ring-2 focus-within:ring-primary-500 - hover:border-ui-300 active:border-primary-500 active:ring-0 `; - - if (mode === 'default') { - className += 'border-ui-100'; - } else if (mode === 'success') { - className += 'border-success-600'; - } else if (mode === 'warning') { - className += 'border-warning-600'; - } else if (mode === 'critical') { - className += 'border-critical-600'; - } - - return { className }; -})``; diff --git a/src/components/label/index.ts b/src/components/label/index.ts deleted file mode 100644 index 301fbded1..000000000 --- a/src/components/label/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './label'; diff --git a/src/components/label/label.stories.tsx b/src/components/label/label.stories.tsx deleted file mode 100644 index 19883287c..000000000 --- a/src/components/label/label.stories.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { type Meta, type Story } from '@storybook/react'; -import React from 'react'; -import { Label, type LabelProps } from './label'; - -export default { - title: 'Components/Label', - component: Label, -} as Meta; - -const Template: Story = (args) =>