From 111f4475ddb790a4fce0bdfa2e3b442ed726cc7d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=92scar=20Casajuana?= Date: Wed, 4 Dec 2024 17:19:25 +0100 Subject: [PATCH] Upgrade chakra to latest V2 (#207) * Upgrade chakra to latest V2 Which is 2.10.4 as of writing this This also removes the custom Button implementation, since they fixed the chrome translation issue in version 2.9 if I don't recall wrong * Fix radio anatomy import * refs #2 Ensure proper ffjavascript version gets loaded for tests --- jest.config.mjs | 3 + packages/chakra-components/package.json | 44 +---- packages/chakra-components/src/client.tsx | 2 +- .../src/components/Account/Balance.tsx | 2 +- .../components/Election/Actions/Actions.tsx | 3 +- .../components/Election/Actions/Cancel.tsx | 5 +- .../Election/Actions/ConfirmActionModal.tsx | 15 +- .../components/Election/Actions/Continue.tsx | 4 +- .../src/components/Election/Actions/End.tsx | 5 +- .../src/components/Election/Actions/Pause.tsx | 4 +- .../Election/Actions/use-actions-toast.ts | 2 +- .../src/components/Election/Description.tsx | 2 +- .../src/components/Election/Election.tsx | 2 +- .../src/components/Election/Envelope.tsx | 3 +- .../src/components/Election/Header.tsx | 2 +- .../Election/Questions/Confirmation.tsx | 16 +- .../components/Election/Questions/Fields.tsx | 16 +- .../Election/Questions/Questions.tsx | 3 +- .../src/components/Election/Questions/Tip.tsx | 2 +- .../Election/Questions/TypeBadge.tsx | 3 +- .../components/Election/Questions/Voted.tsx | 4 +- .../src/components/Election/Results.tsx | 4 +- .../src/components/Election/Schedule.tsx | 3 +- .../components/Election/SpreadsheetAccess.tsx | 19 +- .../src/components/Election/StatusBadge.tsx | 2 +- .../src/components/Election/Title.tsx | 3 +- .../src/components/Election/VoteButton.tsx | 5 +- .../src/components/Organization/Avatar.tsx | 2 +- .../components/Organization/Description.tsx | 2 +- .../src/components/Organization/Header.tsx | 2 +- .../src/components/Organization/Name.tsx | 3 +- .../components/Pagination/EllipsisButton.tsx | 4 +- .../src/components/Pagination/Pagination.tsx | 13 +- .../components/Pagination/PaginatorButton.tsx | 3 +- .../src/components/layout/Button.tsx | 165 ------------------ .../layout/ConfirmModal/ConfirmModal.tsx | 3 +- .../src/components/layout/HR.tsx | 2 +- .../src/components/layout/Image.tsx | 3 +- .../src/components/layout/Markdown.tsx | 16 +- .../src/components/layout/index.ts | 1 - .../chakra-components/src/theme/confirm.ts | 2 +- .../chakra-components/src/theme/election.ts | 2 +- .../chakra-components/src/theme/envelope.ts | 2 +- .../chakra-components/src/theme/layout.ts | 2 +- .../chakra-components/src/theme/pagination.ts | 2 +- .../chakra-components/src/theme/questions.ts | 3 +- .../chakra-components/src/theme/results.ts | 2 +- packages/chakra-components/src/theme/vote.ts | 2 +- templates/chakra/package.json | 2 +- templates/chakra/src/theme/radio.ts | 2 +- 50 files changed, 114 insertions(+), 304 deletions(-) delete mode 100644 packages/chakra-components/src/components/layout/Button.tsx diff --git a/jest.config.mjs b/jest.config.mjs index 6ffb6dc4..9c1fc652 100644 --- a/jest.config.mjs +++ b/jest.config.mjs @@ -3,6 +3,9 @@ const config = { collectCoverageFrom: ['packages/**/*.{ts,tsx}'], moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'], modulePathIgnorePatterns: ['/templates'], + moduleNameMapper: { + '^ffjavascript$': '/node_modules/ffjavascript/build/main.cjs', + }, transform: { '^.+\\.(ts|tsx|js|jsx)?$': '@swc-node/jest', }, diff --git a/packages/chakra-components/package.json b/packages/chakra-components/package.json index cb49bb8a..f2dbdf29 100644 --- a/packages/chakra-components/package.json +++ b/packages/chakra-components/package.json @@ -32,27 +32,7 @@ "@vocdoni/react-providers": "~0.5.1" }, "peerDependencies": { - "@chakra-ui/alert": "^2.2.2", - "@chakra-ui/avatar": "^2.3.0", - "@chakra-ui/button": "^2.1.0", - "@chakra-ui/checkbox": "^2.3.2", - "@chakra-ui/form-control": "^2.2.0", - "@chakra-ui/image": "^2.1.0", - "@chakra-ui/input": "^2.1.2", - "@chakra-ui/layout": "^2.3.1", - "@chakra-ui/modal": "^2.3.1", - "@chakra-ui/progress": "^2.2.0", - "@chakra-ui/radio": "^2.1.2", - "@chakra-ui/react-use-disclosure": "^2.1.0", - "@chakra-ui/react-use-merge-refs": "^2.1.0", - "@chakra-ui/shared-utils": "^2.0.4", - "@chakra-ui/spinner": "^2.1.0", - "@chakra-ui/system": "2.6.2", - "@chakra-ui/table": "^2.1.0", - "@chakra-ui/tag": "^3.1.1", - "@chakra-ui/theme": "^3.3.1", - "@chakra-ui/toast": "^7.0.2", - "@chakra-ui/tooltip": "^2.3.1", + "@chakra-ui/react": "^2.10.4", "@ethersproject/abstract-signer": "^5.7.0", "@ethersproject/wallet": "^5.7.0", "@vocdoni/sdk": "~0.9.0", @@ -63,27 +43,7 @@ "remark-gfm": ">= 2.0.0" }, "devDependencies": { - "@chakra-ui/alert": "^2.2.2", - "@chakra-ui/avatar": "^2.3.0", - "@chakra-ui/button": "^2.1.0", - "@chakra-ui/checkbox": "^2.3.2", - "@chakra-ui/form-control": "^2.2.0", - "@chakra-ui/image": "^2.1.0", - "@chakra-ui/input": "^2.1.2", - "@chakra-ui/layout": "^2.3.1", - "@chakra-ui/modal": "^2.3.1", - "@chakra-ui/progress": "^2.2.0", - "@chakra-ui/radio": "^2.1.2", - "@chakra-ui/react-use-disclosure": "^2.1.0", - "@chakra-ui/react-use-merge-refs": "^2.1.0", - "@chakra-ui/shared-utils": "^2.0.4", - "@chakra-ui/spinner": "^2.1.0", - "@chakra-ui/system": "2.6.2", - "@chakra-ui/table": "^2.1.0", - "@chakra-ui/tag": "^3.1.1", - "@chakra-ui/theme": "^3.3.1", - "@chakra-ui/toast": "^7.0.2", - "@chakra-ui/tooltip": "^2.3.1", + "@chakra-ui/react": "^2.10.4", "@ethersproject/abstract-signer": "^5.7.0", "@ethersproject/wallet": "^5.7.0", "@types/react": "^18.0.30", diff --git a/packages/chakra-components/src/client.tsx b/packages/chakra-components/src/client.tsx index e237f768..0de917e0 100644 --- a/packages/chakra-components/src/client.tsx +++ b/packages/chakra-components/src/client.tsx @@ -1,4 +1,4 @@ -import { ToastProvider } from '@chakra-ui/toast' +import { ToastProvider } from '@chakra-ui/react' import { ClientProviderComponentProps, ClientProvider as RPClientProvider } from '@vocdoni/react-providers' import merge from 'ts-deepmerge' import { ConfirmProvider } from './components' diff --git a/packages/chakra-components/src/components/Account/Balance.tsx b/packages/chakra-components/src/components/Account/Balance.tsx index 249cb582..fdafad02 100644 --- a/packages/chakra-components/src/components/Account/Balance.tsx +++ b/packages/chakra-components/src/components/Account/Balance.tsx @@ -1,4 +1,4 @@ -import { Tag, TagProps } from '@chakra-ui/tag' +import { Tag, TagProps } from '@chakra-ui/react' import { useClient } from '@vocdoni/react-providers' export const Balance = (props: TagProps) => { diff --git a/packages/chakra-components/src/components/Election/Actions/Actions.tsx b/packages/chakra-components/src/components/Election/Actions/Actions.tsx index bb267746..57f5fdd2 100644 --- a/packages/chakra-components/src/components/Election/Actions/Actions.tsx +++ b/packages/chakra-components/src/components/Election/Actions/Actions.tsx @@ -1,5 +1,4 @@ -import { ButtonGroup, IconButton } from '@chakra-ui/button' -import { chakra, ChakraProps, useMultiStyleConfig } from '@chakra-ui/system' +import { ButtonGroup, chakra, ChakraProps, IconButton, useMultiStyleConfig } from '@chakra-ui/react' import { useClient, useElection } from '@vocdoni/react-providers' import { areEqualHexStrings, ElectionStatus, PublishedElection } from '@vocdoni/sdk' import { FaPause, FaPlay, FaStop } from 'react-icons/fa' diff --git a/packages/chakra-components/src/components/Election/Actions/Cancel.tsx b/packages/chakra-components/src/components/Election/Actions/Cancel.tsx index 8811fb92..e540a87a 100644 --- a/packages/chakra-components/src/components/Election/Actions/Cancel.tsx +++ b/packages/chakra-components/src/components/Election/Actions/Cancel.tsx @@ -1,8 +1,7 @@ -import { IconButtonProps } from '@chakra-ui/button' -import { forwardRef } from '@chakra-ui/system' +import { Button, forwardRef, IconButtonProps } from '@chakra-ui/react' import { useActions, useClient, useElection } from '@vocdoni/react-providers' import { areEqualHexStrings, ElectionStatus, PublishedElection } from '@vocdoni/sdk' -import { Button, useConfirm } from '../../layout' +import { useConfirm } from '../../layout' import { ConfirmActionModal } from './ConfirmActionModal' export const ActionCancel = forwardRef((props, ref) => { diff --git a/packages/chakra-components/src/components/Election/Actions/ConfirmActionModal.tsx b/packages/chakra-components/src/components/Election/Actions/ConfirmActionModal.tsx index 7337e6ed..6dc67c1d 100644 --- a/packages/chakra-components/src/components/Election/Actions/ConfirmActionModal.tsx +++ b/packages/chakra-components/src/components/Election/Actions/ConfirmActionModal.tsx @@ -1,9 +1,14 @@ -import { useMultiStyleConfig } from '@chakra-ui/system' -import { useConfirm } from '../../layout' +import { + Button, + ModalBody, + ModalCloseButton, + ModalFooter, + ModalHeader, + Text, + useMultiStyleConfig, +} from '@chakra-ui/react' import { useClient } from '@vocdoni/react-providers' -import { ModalBody, ModalCloseButton, ModalFooter, ModalHeader } from '@chakra-ui/modal' -import { Text } from '@chakra-ui/layout' -import { Button } from '@chakra-ui/button' +import { useConfirm } from '../../layout' export type ConfirmActionModalProps = { title: string diff --git a/packages/chakra-components/src/components/Election/Actions/Continue.tsx b/packages/chakra-components/src/components/Election/Actions/Continue.tsx index 03c29c4c..b0303fee 100644 --- a/packages/chakra-components/src/components/Election/Actions/Continue.tsx +++ b/packages/chakra-components/src/components/Election/Actions/Continue.tsx @@ -1,8 +1,6 @@ -import { IconButtonProps } from '@chakra-ui/button' -import { forwardRef } from '@chakra-ui/system' +import { Button, forwardRef, IconButtonProps } from '@chakra-ui/react' import { useActions, useClient, useElection } from '@vocdoni/react-providers' import { areEqualHexStrings, ElectionStatus, PublishedElection } from '@vocdoni/sdk' -import { Button } from '../../layout' export const ActionContinue = forwardRef((props, ref) => { const { account, localize } = useClient() diff --git a/packages/chakra-components/src/components/Election/Actions/End.tsx b/packages/chakra-components/src/components/Election/Actions/End.tsx index 24fc5ac3..5f3ed81b 100644 --- a/packages/chakra-components/src/components/Election/Actions/End.tsx +++ b/packages/chakra-components/src/components/Election/Actions/End.tsx @@ -1,8 +1,7 @@ -import { IconButtonProps } from '@chakra-ui/button' -import { forwardRef } from '@chakra-ui/system' +import { Button, forwardRef, IconButtonProps } from '@chakra-ui/react' import { useActions, useClient, useElection } from '@vocdoni/react-providers' import { areEqualHexStrings, ElectionStatus, PublishedElection } from '@vocdoni/sdk' -import { Button, useConfirm } from '../../layout' +import { useConfirm } from '../../layout' import { ConfirmActionModal } from './ConfirmActionModal' export const ActionEnd = forwardRef((props, ref) => { diff --git a/packages/chakra-components/src/components/Election/Actions/Pause.tsx b/packages/chakra-components/src/components/Election/Actions/Pause.tsx index 540796f4..befcdb0d 100644 --- a/packages/chakra-components/src/components/Election/Actions/Pause.tsx +++ b/packages/chakra-components/src/components/Election/Actions/Pause.tsx @@ -1,8 +1,6 @@ -import { IconButtonProps } from '@chakra-ui/button' -import { forwardRef } from '@chakra-ui/system' +import { Button, forwardRef, IconButtonProps } from '@chakra-ui/react' import { useActions, useClient, useElection } from '@vocdoni/react-providers' import { areEqualHexStrings, ElectionStatus, PublishedElection } from '@vocdoni/sdk' -import { Button } from '../../layout' export const ActionPause = forwardRef((props, ref) => { const { account, localize } = useClient() diff --git a/packages/chakra-components/src/components/Election/Actions/use-actions-toast.ts b/packages/chakra-components/src/components/Election/Actions/use-actions-toast.ts index cab0cf63..64d375db 100644 --- a/packages/chakra-components/src/components/Election/Actions/use-actions-toast.ts +++ b/packages/chakra-components/src/components/Election/Actions/use-actions-toast.ts @@ -1,4 +1,4 @@ -import { ToastId, useToast } from '@chakra-ui/toast' +import { ToastId, useToast } from '@chakra-ui/react' import { useActions } from '@vocdoni/react-providers' import { useEffect, useRef } from 'react' diff --git a/packages/chakra-components/src/components/Election/Description.tsx b/packages/chakra-components/src/components/Election/Description.tsx index 96a404d1..43eeafef 100644 --- a/packages/chakra-components/src/components/Election/Description.tsx +++ b/packages/chakra-components/src/components/Election/Description.tsx @@ -1,4 +1,4 @@ -import { ChakraProps, useStyleConfig } from '@chakra-ui/system' +import { ChakraProps, useStyleConfig } from '@chakra-ui/react' import { useElection } from '@vocdoni/react-providers' import { PublishedElection } from '@vocdoni/sdk' import { ReactMarkdownProps } from 'react-markdown/lib/complex-types' diff --git a/packages/chakra-components/src/components/Election/Election.tsx b/packages/chakra-components/src/components/Election/Election.tsx index 0fdf98a0..4ab98a9b 100644 --- a/packages/chakra-components/src/components/Election/Election.tsx +++ b/packages/chakra-components/src/components/Election/Election.tsx @@ -1,4 +1,4 @@ -import { Alert, AlertDescription, AlertIcon } from '@chakra-ui/alert' +import { Alert, AlertDescription, AlertIcon } from '@chakra-ui/react' import { ElectionProvider, ElectionProviderComponentProps, useElection } from '@vocdoni/react-providers' import { PublishedElection } from '@vocdoni/sdk' import { HR } from '../layout' diff --git a/packages/chakra-components/src/components/Election/Envelope.tsx b/packages/chakra-components/src/components/Election/Envelope.tsx index 22d9a071..fc8f11ff 100644 --- a/packages/chakra-components/src/components/Election/Envelope.tsx +++ b/packages/chakra-components/src/components/Election/Envelope.tsx @@ -1,5 +1,4 @@ -import { List, ListItem, Text } from '@chakra-ui/layout' -import { chakra, ChakraProps, useMultiStyleConfig } from '@chakra-ui/system' +import { chakra, ChakraProps, List, ListItem, Text, useMultiStyleConfig } from '@chakra-ui/react' import { useDatesLocale, useElection } from '@vocdoni/react-providers' import { ElectionResultsTypeNames, diff --git a/packages/chakra-components/src/components/Election/Header.tsx b/packages/chakra-components/src/components/Election/Header.tsx index e1d02ea7..f376a68a 100644 --- a/packages/chakra-components/src/components/Election/Header.tsx +++ b/packages/chakra-components/src/components/Election/Header.tsx @@ -1,4 +1,4 @@ -import { useStyleConfig } from '@chakra-ui/system' +import { useStyleConfig } from '@chakra-ui/react' import { useElection } from '@vocdoni/react-providers' import { PublishedElection } from '@vocdoni/sdk' import { Image, IPFSImageProps } from '../layout' diff --git a/packages/chakra-components/src/components/Election/Questions/Confirmation.tsx b/packages/chakra-components/src/components/Election/Questions/Confirmation.tsx index dc79b417..506c1ba6 100644 --- a/packages/chakra-components/src/components/Election/Questions/Confirmation.tsx +++ b/packages/chakra-components/src/components/Election/Questions/Confirmation.tsx @@ -1,7 +1,15 @@ -import { Button } from '@chakra-ui/button' -import { Box, Text } from '@chakra-ui/layout' -import { ModalBody, ModalCloseButton, ModalFooter, ModalHeader } from '@chakra-ui/modal' -import { chakra, omitThemingProps, useMultiStyleConfig } from '@chakra-ui/system' +import { + Box, + Button, + chakra, + ModalBody, + ModalCloseButton, + ModalFooter, + ModalHeader, + omitThemingProps, + Text, + useMultiStyleConfig, +} from '@chakra-ui/react' import { useClient } from '@vocdoni/react-providers' import { ElectionResultsTypeNames, PublishedElection } from '@vocdoni/sdk' import { FieldValues } from 'react-hook-form' diff --git a/packages/chakra-components/src/components/Election/Questions/Fields.tsx b/packages/chakra-components/src/components/Election/Questions/Fields.tsx index 946f436f..350fb2e4 100644 --- a/packages/chakra-components/src/components/Election/Questions/Fields.tsx +++ b/packages/chakra-components/src/components/Election/Questions/Fields.tsx @@ -1,8 +1,14 @@ -import { Checkbox } from '@chakra-ui/checkbox' -import { FormControl, FormErrorMessage } from '@chakra-ui/form-control' -import { Stack } from '@chakra-ui/layout' -import { Radio, RadioGroup } from '@chakra-ui/radio' -import { chakra, ChakraProps, useMultiStyleConfig } from '@chakra-ui/system' +import { + chakra, + ChakraProps, + Checkbox, + FormControl, + FormErrorMessage, + Radio, + RadioGroup, + Stack, + useMultiStyleConfig, +} from '@chakra-ui/react' import { useElection } from '@vocdoni/react-providers' import { ElectionResultsTypeNames, ElectionStatus, IQuestion, PublishedElection } from '@vocdoni/sdk' import { Controller, useFormContext } from 'react-hook-form' diff --git a/packages/chakra-components/src/components/Election/Questions/Questions.tsx b/packages/chakra-components/src/components/Election/Questions/Questions.tsx index 6538f6b8..ddbc8197 100644 --- a/packages/chakra-components/src/components/Election/Questions/Questions.tsx +++ b/packages/chakra-components/src/components/Election/Questions/Questions.tsx @@ -1,5 +1,4 @@ -import { Alert, AlertIcon } from '@chakra-ui/alert' -import { chakra, ChakraProps, useMultiStyleConfig } from '@chakra-ui/system' +import { Alert, AlertIcon, chakra, ChakraProps, useMultiStyleConfig } from '@chakra-ui/react' import { useElection } from '@vocdoni/react-providers' import { IQuestion, PublishedElection } from '@vocdoni/sdk' import { FieldValues, SubmitErrorHandler } from 'react-hook-form' diff --git a/packages/chakra-components/src/components/Election/Questions/Tip.tsx b/packages/chakra-components/src/components/Election/Questions/Tip.tsx index 333fb53d..4eff45e9 100644 --- a/packages/chakra-components/src/components/Election/Questions/Tip.tsx +++ b/packages/chakra-components/src/components/Election/Questions/Tip.tsx @@ -1,4 +1,4 @@ -import { chakra, useMultiStyleConfig } from '@chakra-ui/system' +import { chakra, useMultiStyleConfig } from '@chakra-ui/react' import { useElection } from '@vocdoni/react-providers' import { ElectionResultsTypeNames, PublishedElection } from '@vocdoni/sdk' diff --git a/packages/chakra-components/src/components/Election/Questions/TypeBadge.tsx b/packages/chakra-components/src/components/Election/Questions/TypeBadge.tsx index b71a9589..a1298fa8 100644 --- a/packages/chakra-components/src/components/Election/Questions/TypeBadge.tsx +++ b/packages/chakra-components/src/components/Election/Questions/TypeBadge.tsx @@ -1,5 +1,4 @@ -import { chakra, ChakraProps, useMultiStyleConfig } from '@chakra-ui/system' -import { Tooltip } from '@chakra-ui/tooltip' +import { chakra, ChakraProps, Tooltip, useMultiStyleConfig } from '@chakra-ui/react' import { useElection } from '@vocdoni/react-providers' import { ElectionResultsTypeNames, PublishedElection } from '@vocdoni/sdk' import type { HTMLAttributes } from 'react' diff --git a/packages/chakra-components/src/components/Election/Questions/Voted.tsx b/packages/chakra-components/src/components/Election/Questions/Voted.tsx index 0a3b0552..e482146c 100644 --- a/packages/chakra-components/src/components/Election/Questions/Voted.tsx +++ b/packages/chakra-components/src/components/Election/Questions/Voted.tsx @@ -1,6 +1,4 @@ -import { Alert, AlertDescription, AlertIcon, AlertTitle } from '@chakra-ui/alert' -import { Link } from '@chakra-ui/layout' -import { useMultiStyleConfig } from '@chakra-ui/system' +import { Alert, AlertDescription, AlertIcon, AlertTitle, Link, useMultiStyleConfig } from '@chakra-ui/react' import { useClient, useElection } from '@vocdoni/react-providers' import reactStringReplace from 'react-string-replace' import { environment } from '../../../environment' diff --git a/packages/chakra-components/src/components/Election/Results.tsx b/packages/chakra-components/src/components/Election/Results.tsx index d4e2eb12..351f9563 100644 --- a/packages/chakra-components/src/components/Election/Results.tsx +++ b/packages/chakra-components/src/components/Election/Results.tsx @@ -1,6 +1,4 @@ -import { Box, Flex, Text } from '@chakra-ui/layout' -import { Progress } from '@chakra-ui/progress' -import { chakra, ChakraProps, useMultiStyleConfig } from '@chakra-ui/system' +import { Box, chakra, ChakraProps, Flex, Progress, Text, useMultiStyleConfig } from '@chakra-ui/react' import { useClient, useDatesLocale, useElection } from '@vocdoni/react-providers' import { ElectionResultsTypeNames, diff --git a/packages/chakra-components/src/components/Election/Schedule.tsx b/packages/chakra-components/src/components/Election/Schedule.tsx index 2a6d1e79..51eb47a2 100644 --- a/packages/chakra-components/src/components/Election/Schedule.tsx +++ b/packages/chakra-components/src/components/Election/Schedule.tsx @@ -1,5 +1,4 @@ -import { HeadingProps } from '@chakra-ui/layout' -import { chakra, forwardRef, useMultiStyleConfig } from '@chakra-ui/system' +import { chakra, forwardRef, HeadingProps, useMultiStyleConfig } from '@chakra-ui/react' import { useDatesLocale, useElection, useLocalize } from '@vocdoni/react-providers' import { ElectionStatus, PublishedElection } from '@vocdoni/sdk' import { format as dformat, formatDistance } from 'date-fns' diff --git a/packages/chakra-components/src/components/Election/SpreadsheetAccess.tsx b/packages/chakra-components/src/components/Election/SpreadsheetAccess.tsx index 7f9dc7ff..9a9dffee 100644 --- a/packages/chakra-components/src/components/Election/SpreadsheetAccess.tsx +++ b/packages/chakra-components/src/components/Election/SpreadsheetAccess.tsx @@ -1,6 +1,12 @@ -import { FormControl, FormErrorMessage, FormHelperText, FormLabel } from '@chakra-ui/form-control' -import { Input, InputProps } from '@chakra-ui/input' import { + Button, + ChakraProps, + FormControl, + FormErrorMessage, + FormHelperText, + FormLabel, + Input, + InputProps, Modal, ModalBody, ModalCloseButton, @@ -8,16 +14,15 @@ import { ModalFooter, ModalHeader, ModalOverlay, -} from '@chakra-ui/modal' -import { useDisclosure } from '@chakra-ui/react-use-disclosure' -import { ChakraProps, useMultiStyleConfig } from '@chakra-ui/system' -import { useToast } from '@chakra-ui/toast' + useDisclosure, + useMultiStyleConfig, + useToast, +} from '@chakra-ui/react' import { Wallet } from '@ethersproject/wallet' import { errorToString, useClient, useElection, walletFromRow } from '@vocdoni/react-providers' import { dotobject, PublishedElection, VocdoniSDKClient } from '@vocdoni/sdk' import { useEffect, useState } from 'react' import { RegisterOptions, useForm } from 'react-hook-form' -import { Button } from '../layout/Button' type MetaSpecs = { [name: string]: { diff --git a/packages/chakra-components/src/components/Election/StatusBadge.tsx b/packages/chakra-components/src/components/Election/StatusBadge.tsx index f3ba81b3..00105039 100644 --- a/packages/chakra-components/src/components/Election/StatusBadge.tsx +++ b/packages/chakra-components/src/components/Election/StatusBadge.tsx @@ -1,4 +1,4 @@ -import { Tag, TagProps } from '@chakra-ui/tag' +import { Tag, TagProps } from '@chakra-ui/react' import { useElection } from '@vocdoni/react-providers' import { ElectionStatus, InvalidElection, PublishedElection } from '@vocdoni/sdk' diff --git a/packages/chakra-components/src/components/Election/Title.tsx b/packages/chakra-components/src/components/Election/Title.tsx index 05f7181d..49b85f38 100644 --- a/packages/chakra-components/src/components/Election/Title.tsx +++ b/packages/chakra-components/src/components/Election/Title.tsx @@ -1,5 +1,4 @@ -import { HeadingProps } from '@chakra-ui/layout' -import { chakra, forwardRef, omitThemingProps, useStyleConfig } from '@chakra-ui/system' +import { chakra, forwardRef, HeadingProps, omitThemingProps, useStyleConfig } from '@chakra-ui/react' import { useElection } from '@vocdoni/react-providers' import { PublishedElection } from '@vocdoni/sdk' diff --git a/packages/chakra-components/src/components/Election/VoteButton.tsx b/packages/chakra-components/src/components/Election/VoteButton.tsx index 26127514..e575c92b 100644 --- a/packages/chakra-components/src/components/Election/VoteButton.tsx +++ b/packages/chakra-components/src/components/Election/VoteButton.tsx @@ -1,11 +1,8 @@ -import { ButtonProps } from '@chakra-ui/button' -import { Text } from '@chakra-ui/layout' -import { chakra, useMultiStyleConfig } from '@chakra-ui/system' +import { Button, ButtonProps, chakra, Text, useMultiStyleConfig } from '@chakra-ui/react' import { Signer } from '@ethersproject/abstract-signer' import { useClient, useElection } from '@vocdoni/react-providers' import { ElectionStatus, InvalidElection, PublishedElection } from '@vocdoni/sdk' import { useEffect, useState } from 'react' -import { Button } from '../layout/Button' import { results } from './Results' export const VoteButton = (props: ButtonProps) => { diff --git a/packages/chakra-components/src/components/Organization/Avatar.tsx b/packages/chakra-components/src/components/Organization/Avatar.tsx index 7832c307..206c681e 100644 --- a/packages/chakra-components/src/components/Organization/Avatar.tsx +++ b/packages/chakra-components/src/components/Organization/Avatar.tsx @@ -1,4 +1,4 @@ -import { useStyleConfig } from '@chakra-ui/system' +import { useStyleConfig } from '@chakra-ui/react' import { useOrganization } from '@vocdoni/react-providers' import { Avatar, Image, IPFSAvatarProps, IPFSImageProps } from '../layout' diff --git a/packages/chakra-components/src/components/Organization/Description.tsx b/packages/chakra-components/src/components/Organization/Description.tsx index 13db7774..86dba164 100644 --- a/packages/chakra-components/src/components/Organization/Description.tsx +++ b/packages/chakra-components/src/components/Organization/Description.tsx @@ -1,4 +1,4 @@ -import { ChakraProps, useStyleConfig } from '@chakra-ui/system' +import { ChakraProps, useStyleConfig } from '@chakra-ui/react' import { useOrganization } from '@vocdoni/react-providers' import { ReactMarkdownProps } from 'react-markdown/lib/complex-types' import { Markdown } from '../layout' diff --git a/packages/chakra-components/src/components/Organization/Header.tsx b/packages/chakra-components/src/components/Organization/Header.tsx index 34df022e..9c73c411 100644 --- a/packages/chakra-components/src/components/Organization/Header.tsx +++ b/packages/chakra-components/src/components/Organization/Header.tsx @@ -1,4 +1,4 @@ -import { useStyleConfig } from '@chakra-ui/system' +import { useStyleConfig } from '@chakra-ui/react' import { useOrganization } from '@vocdoni/react-providers' import { Image, IPFSImageProps } from '../layout' diff --git a/packages/chakra-components/src/components/Organization/Name.tsx b/packages/chakra-components/src/components/Organization/Name.tsx index 90c0ac3a..5ed066ab 100644 --- a/packages/chakra-components/src/components/Organization/Name.tsx +++ b/packages/chakra-components/src/components/Organization/Name.tsx @@ -1,5 +1,4 @@ -import { HeadingProps } from '@chakra-ui/layout' -import { chakra, forwardRef, omitThemingProps, useStyleConfig } from '@chakra-ui/system' +import { chakra, forwardRef, HeadingProps, omitThemingProps, useStyleConfig } from '@chakra-ui/react' import { useOrganization } from '@vocdoni/react-providers' export const OrganizationName = forwardRef((props, ref) => { diff --git a/packages/chakra-components/src/components/Pagination/EllipsisButton.tsx b/packages/chakra-components/src/components/Pagination/EllipsisButton.tsx index f99c740f..0f85f0c1 100644 --- a/packages/chakra-components/src/components/Pagination/EllipsisButton.tsx +++ b/packages/chakra-components/src/components/Pagination/EllipsisButton.tsx @@ -1,6 +1,4 @@ -import { Button, ButtonProps } from '@chakra-ui/button' -import { Input, InputProps } from '@chakra-ui/input' -import { useStyleConfig } from '@chakra-ui/system' +import { Button, ButtonProps, Input, InputProps, useStyleConfig } from '@chakra-ui/react' import { useState } from 'react' type EllipsisButtonProps = ButtonProps & { diff --git a/packages/chakra-components/src/components/Pagination/Pagination.tsx b/packages/chakra-components/src/components/Pagination/Pagination.tsx index 0446327b..87ee560b 100644 --- a/packages/chakra-components/src/components/Pagination/Pagination.tsx +++ b/packages/chakra-components/src/components/Pagination/Pagination.tsx @@ -1,7 +1,12 @@ -import { ButtonGroup, ButtonGroupProps, ButtonProps } from '@chakra-ui/button' -import { InputProps } from '@chakra-ui/input' -import { Text } from '@chakra-ui/layout' -import { chakra, useMultiStyleConfig } from '@chakra-ui/system' +import { + ButtonGroup, + ButtonGroupProps, + ButtonProps, + chakra, + InputProps, + Text, + useMultiStyleConfig, +} from '@chakra-ui/react' import { useLocalize, usePagination, useRoutedPagination } from '@vocdoni/react-providers' import { PaginationResponse } from '@vocdoni/sdk' import { ReactElement, useMemo } from 'react' diff --git a/packages/chakra-components/src/components/Pagination/PaginatorButton.tsx b/packages/chakra-components/src/components/Pagination/PaginatorButton.tsx index 7a2952fd..749c3e31 100644 --- a/packages/chakra-components/src/components/Pagination/PaginatorButton.tsx +++ b/packages/chakra-components/src/components/Pagination/PaginatorButton.tsx @@ -1,5 +1,4 @@ -import { Button, ButtonProps } from '@chakra-ui/button' -import { forwardRef, useStyleConfig } from '@chakra-ui/system' +import { Button, ButtonProps, forwardRef, useStyleConfig } from '@chakra-ui/react' export const PageButton = forwardRef((props, ref) => { const styles = useStyleConfig('PageButton', props) diff --git a/packages/chakra-components/src/components/layout/Button.tsx b/packages/chakra-components/src/components/layout/Button.tsx deleted file mode 100644 index 0aa16eac..00000000 --- a/packages/chakra-components/src/components/layout/Button.tsx +++ /dev/null @@ -1,165 +0,0 @@ -import { ButtonOptions, ButtonSpinner, useButtonGroup } from '@chakra-ui/button' -import { useMergeRefs } from '@chakra-ui/react-use-merge-refs' -import { cx, dataAttr } from '@chakra-ui/shared-utils' -import { - chakra, - forwardRef, - HTMLChakraProps, - omitThemingProps, - SystemStyleObject, - ThemingProps, - useStyleConfig, -} from '@chakra-ui/system' -import { cloneElement, isValidElement, useCallback, useMemo, useState } from 'react' - -export interface ButtonProps extends HTMLChakraProps<'button'>, ButtonOptions, ThemingProps<'Button'> {} - -/** - * Button component is used to trigger an action or event, such as submitting a form, opening a Dialog, canceling an action, or performing a delete operation. - * - * @see Docs https://chakra-ui.com/docs/components/button - * @see WAI-ARIA https://www.w3.org/WAI/ARIA/apg/patterns/button/ - */ -export const Button = forwardRef((props, ref) => { - const group = useButtonGroup() - const styles = useStyleConfig('Button', { ...group, ...props }) - - const { - isDisabled = group?.isDisabled, - isLoading, - isActive, - children, - leftIcon, - rightIcon, - loadingText, - iconSpacing = '0.5rem', - type, - spinner, - spinnerPlacement = 'start', - className, - as, - ...rest - } = omitThemingProps(props) - - /** - * When button is used within ButtonGroup (i.e. flushed with sibling buttons), - * it is important to add a `zIndex` on focus. - * - * So let's read the component styles and then add `zIndex` to it. - */ - const buttonStyles: SystemStyleObject = useMemo(() => { - // @ts-ignore - const _focus = { ...styles?.['_focus'], zIndex: 1 } - return { - display: 'inline-flex', - appearance: 'none', - alignItems: 'center', - justifyContent: 'center', - userSelect: 'none', - position: 'relative', - whiteSpace: 'nowrap', - verticalAlign: 'middle', - outline: 'none', - ...styles, - ...(!!group && { _focus }), - } - }, [styles, group]) - - const { ref: _ref, type: defaultType } = useButtonType(as) - - const contentProps = { rightIcon, leftIcon, iconSpacing, children } - - return ( - - {isLoading && spinnerPlacement === 'start' && ( - - {spinner} - - )} - - {isLoading ? ( - loadingText || ( - - - - ) - ) : ( - - )} - - {isLoading && spinnerPlacement === 'end' && ( - - {spinner} - - )} - - ) -}) - -Button.displayName = 'Button' - -type ButtonContentProps = Pick - -function ButtonContent(props: ButtonContentProps) { - const { leftIcon, rightIcon, children, iconSpacing } = props - - // using fragments here causes google chrome to crash while using translate - return ( - - {leftIcon && {leftIcon}} - {children} - {rightIcon && {rightIcon}} - - ) -} - -export function ButtonIcon(props: HTMLChakraProps<'span'>) { - const { children, className, ...rest } = props - - const _children = isValidElement(children) - ? cloneElement(children, { - 'aria-hidden': true, - focusable: false, - }) - : children - - const _className = cx('chakra-button__icon', className) - - return ( - - {_children} - - ) -} - -ButtonIcon.displayName = 'ButtonIcon' - -export function useButtonType(value?: React.ElementType) { - const [isButton, setIsButton] = useState(!value) - const refCallback = useCallback((node: HTMLElement | null) => { - if (!node) return - setIsButton(node.tagName === 'BUTTON') - }, []) - const type = isButton ? 'button' : undefined - return { ref: refCallback, type } as const -} diff --git a/packages/chakra-components/src/components/layout/ConfirmModal/ConfirmModal.tsx b/packages/chakra-components/src/components/layout/ConfirmModal/ConfirmModal.tsx index a7528241..52880be4 100644 --- a/packages/chakra-components/src/components/layout/ConfirmModal/ConfirmModal.tsx +++ b/packages/chakra-components/src/components/layout/ConfirmModal/ConfirmModal.tsx @@ -1,5 +1,4 @@ -import { Modal, ModalContent, ModalOverlay } from '@chakra-ui/modal' -import { useMultiStyleConfig } from '@chakra-ui/system' +import { Modal, ModalContent, ModalOverlay, useMultiStyleConfig } from '@chakra-ui/react' import { useConfirm } from './ConfirmProvider' export const ConfirmModal = () => { diff --git a/packages/chakra-components/src/components/layout/HR.tsx b/packages/chakra-components/src/components/layout/HR.tsx index 2ca1b529..9ea85803 100644 --- a/packages/chakra-components/src/components/layout/HR.tsx +++ b/packages/chakra-components/src/components/layout/HR.tsx @@ -1,4 +1,4 @@ -import { chakra, ChakraProps, useStyleConfig } from '@chakra-ui/system' +import { chakra, ChakraProps, useStyleConfig } from '@chakra-ui/react' type HRProps = ChakraProps & { variant?: string diff --git a/packages/chakra-components/src/components/layout/Image.tsx b/packages/chakra-components/src/components/layout/Image.tsx index 52216d2a..aaa4c5cc 100644 --- a/packages/chakra-components/src/components/layout/Image.tsx +++ b/packages/chakra-components/src/components/layout/Image.tsx @@ -1,5 +1,4 @@ -import { AvatarProps, Avatar as CAvatar } from '@chakra-ui/avatar' -import { Image as CImage, ImageProps } from '@chakra-ui/image' +import { AvatarProps, Avatar as CAvatar, Image as CImage, ImageProps } from '@chakra-ui/react' export type IPFSImageProps = ImageProps & { gateway?: string diff --git a/packages/chakra-components/src/components/layout/Markdown.tsx b/packages/chakra-components/src/components/layout/Markdown.tsx index 13dc286f..806264b0 100644 --- a/packages/chakra-components/src/components/layout/Markdown.tsx +++ b/packages/chakra-components/src/components/layout/Markdown.tsx @@ -1,6 +1,16 @@ -import { Box, Code, Heading, Link, ListItem, OrderedList, Text, UnorderedList } from '@chakra-ui/layout' -import { chakra } from '@chakra-ui/system' -import { Table, Tr } from '@chakra-ui/table' +import { + Box, + chakra, + Code, + Heading, + Link, + ListItem, + OrderedList, + Table, + Text, + Tr, + UnorderedList, +} from '@chakra-ui/react' import ReactMarkdown, { Options } from 'react-markdown' import remarkGfm from 'remark-gfm' diff --git a/packages/chakra-components/src/components/layout/index.ts b/packages/chakra-components/src/components/layout/index.ts index 4b001fd3..baf52d08 100644 --- a/packages/chakra-components/src/components/layout/index.ts +++ b/packages/chakra-components/src/components/layout/index.ts @@ -1,4 +1,3 @@ -export * from './Button' export * from './ConfirmModal' export * from './HR' export * from './Image' diff --git a/packages/chakra-components/src/theme/confirm.ts b/packages/chakra-components/src/theme/confirm.ts index 5d863103..6d89b639 100644 --- a/packages/chakra-components/src/theme/confirm.ts +++ b/packages/chakra-components/src/theme/confirm.ts @@ -1,4 +1,4 @@ -import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system' +import { createMultiStyleConfigHelpers } from '@chakra-ui/react' export const confirmAnatomy = [ // modal parts diff --git a/packages/chakra-components/src/theme/election.ts b/packages/chakra-components/src/theme/election.ts index c91772fd..e43df436 100644 --- a/packages/chakra-components/src/theme/election.ts +++ b/packages/chakra-components/src/theme/election.ts @@ -1,4 +1,4 @@ -import { ComponentSingleStyleConfig, theme } from '@chakra-ui/theme' +import { ComponentSingleStyleConfig, theme } from '@chakra-ui/react' export const ElectionTitleTheme: ComponentSingleStyleConfig = { baseStyle: { diff --git a/packages/chakra-components/src/theme/envelope.ts b/packages/chakra-components/src/theme/envelope.ts index 26bcba40..7f59be8b 100644 --- a/packages/chakra-components/src/theme/envelope.ts +++ b/packages/chakra-components/src/theme/envelope.ts @@ -1,4 +1,4 @@ -import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system' +import { createMultiStyleConfigHelpers } from '@chakra-ui/react' export const envelopeAnatomy = [ // all questions wrapper diff --git a/packages/chakra-components/src/theme/layout.ts b/packages/chakra-components/src/theme/layout.ts index 28edc924..b5d9c53c 100644 --- a/packages/chakra-components/src/theme/layout.ts +++ b/packages/chakra-components/src/theme/layout.ts @@ -1,4 +1,4 @@ -import { defineStyleConfig } from '@chakra-ui/styled-system' +import { defineStyleConfig } from '@chakra-ui/react' export const HorizontalRulerTheme = defineStyleConfig({ baseStyle: { diff --git a/packages/chakra-components/src/theme/pagination.ts b/packages/chakra-components/src/theme/pagination.ts index 0928a83c..8a2872d1 100644 --- a/packages/chakra-components/src/theme/pagination.ts +++ b/packages/chakra-components/src/theme/pagination.ts @@ -1,4 +1,4 @@ -import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system' +import { createMultiStyleConfigHelpers } from '@chakra-ui/react' export const PaginationAnatomy = [ // Top level wrapper diff --git a/packages/chakra-components/src/theme/questions.ts b/packages/chakra-components/src/theme/questions.ts index 3bbc6104..93ea80e0 100644 --- a/packages/chakra-components/src/theme/questions.ts +++ b/packages/chakra-components/src/theme/questions.ts @@ -1,5 +1,4 @@ -import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system' -import { theme } from '@chakra-ui/theme' +import { createMultiStyleConfigHelpers, theme } from '@chakra-ui/react' export const questionsAnatomy = [ // main content wrapper diff --git a/packages/chakra-components/src/theme/results.ts b/packages/chakra-components/src/theme/results.ts index a562d2f6..c1406d1a 100644 --- a/packages/chakra-components/src/theme/results.ts +++ b/packages/chakra-components/src/theme/results.ts @@ -1,4 +1,4 @@ -import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system' +import { createMultiStyleConfigHelpers } from '@chakra-ui/react' export const resultsAnatomy = [ // all questions wrapper diff --git a/packages/chakra-components/src/theme/vote.ts b/packages/chakra-components/src/theme/vote.ts index 8b8f51d1..f75ce0a4 100644 --- a/packages/chakra-components/src/theme/vote.ts +++ b/packages/chakra-components/src/theme/vote.ts @@ -1,4 +1,4 @@ -import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system' +import { createMultiStyleConfigHelpers } from '@chakra-ui/react' export const VoteWeightAnatomy = [ // confirmation wrapper box diff --git a/templates/chakra/package.json b/templates/chakra/package.json index aad0a870..b30dbeae 100644 --- a/templates/chakra/package.json +++ b/templates/chakra/package.json @@ -11,7 +11,7 @@ "preview": "vite preview" }, "dependencies": { - "@chakra-ui/react": "2.5.5", + "@chakra-ui/react": "2.10.4", "@emotion/react": "^11.10.6", "@emotion/styled": "^11.10.6", "@rainbow-me/rainbowkit": "^1.2.0", diff --git a/templates/chakra/src/theme/radio.ts b/templates/chakra/src/theme/radio.ts index a76836e9..26eecd68 100644 --- a/templates/chakra/src/theme/radio.ts +++ b/templates/chakra/src/theme/radio.ts @@ -1,7 +1,7 @@ import { radioAnatomy } from '@chakra-ui/anatomy' import { createMultiStyleConfigHelpers } from '@chakra-ui/react' -const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(radioAnatomy.keys) +const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(radioAnatomy.keys) const Radio = defineMultiStyleConfig({ defaultProps: {