Skip to content

[WIP]Spike/chakra v3 #2296

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
alexvuong wants to merge 13 commits into from
Closed

[WIP]Spike/chakra v3 #2296

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
7011f91
upgrade chakra v3
alexvuong Feb 28, 2025
3f1f15a
revert changes from template-retail-app
alexvuong Mar 3, 2025
4087308
revert changes from template-retail-app
alexvuong Mar 3, 2025
5e64d83
revert changes from template-retail-app
alexvuong Mar 3, 2025
45b45a9
revert changes from template-retail-app
alexvuong Mar 3, 2025
159125d
Upgrade chakra ui v3
alexvuong Mar 4, 2025
3a78295
Upgrade chakra ui v3
alexvuong Mar 5, 2025
94865bb
Upgrade chakra ui v3
alexvuong Mar 5, 2025
192aef4
fix offline banner
alexvuong Mar 6, 2025
01c1c43
update theme and component styles
alexvuong Mar 6, 2025
9c0121e
update theme and component styles
alexvuong Mar 6, 2025
b26a9cc
update theme and component styles
alexvuong Mar 17, 2025
8382281
Debug data fetching
vmarta Jul 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2,671 changes: 1,104 additions & 1,567 deletions packages/extension-chakra-storefront/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 4 additions & 2 deletions packages/extension-chakra-storefront/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,9 @@
"typecheck": "tsc --noEmit"
},
"devDependencies": {
"@chakra-ui/react": "2.8.2",
"@chakra-ui/react": "3.8.1",
"@chakra-ui/skip-nav": "^2.0.15",
"@emotion/react": "^11.13.3",
"@loadable/component": "^5.15.3",
"@peculiar/webcrypto": "^1.4.2",
"@salesforce/commerce-sdk-react": "^3.2.0-extensibility-preview.4",
Expand Down Expand Up @@ -61,8 +62,9 @@
"react-router-dom": "^5.3.4"
},
"peerDependencies": {
"@chakra-ui/react": "^2.8.2",
"@chakra-ui/react": "3.8.1",
"@chakra-ui/skip-nav": "^2.0.15",
"@emotion/react": "^11.13.3",
"@loadable/component": "^5.15.3",
"@peculiar/webcrypto": "^1.4.2",
"@salesforce/commerce-sdk-react": "^3.2.0-extensibility-preview.0",
Expand Down
6 changes: 3 additions & 3 deletions packages/extension-chakra-storefront/src/components/action-card/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const ActionCard = ({children, onEdit, onRemove, editBtnRef, ...props}) => {

return (
<Box
spacing={4}
gap={4}
p={4}
position="relative"
border="1px solid"
Expand All @@ -39,9 +39,9 @@ const ActionCard = ({children, onEdit, onRemove, editBtnRef, ...props}) => {
{...props}
>
{showLoading && <LoadingSpinner />}
<Stack spacing={3}>
<Stack gap={3}>
<Box>{children}</Box>
<Stack direction="row" spacing={4}>
<Stack direction="row" gap={4}>
{onEdit && (
<Button onClick={onEdit} variant="link" size="sm" ref={editBtnRef}>
<FormattedMessage defaultMessage="Edit" id="action_card.action.edit" />
Expand Down
35 changes: 19 additions & 16 deletions packages/extension-chakra-storefront/src/components/confirmation-modal/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,14 @@ import React from 'react'
import {noop} from '../../utils/utils'
import {
Button,
AlertDialog,
AlertDialogBody,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogContent,
AlertDialogOverlay,
DialogBody,
DialogCloseTrigger,
DialogContent,
DialogFooter,
DialogHeader,
DialogRoot,
DialogTitle,
DialogTrigger,
Text
} from '@chakra-ui/react'

Expand Down Expand Up @@ -45,20 +47,21 @@ const ConfirmationModal = ({
}

return (
<AlertDialog
<DialogRoot
role="alertdialog"
isOpen={props.isOpen}
isCentered
onClose={handleAlternateActionClick}
{...props}
>
<AlertDialogOverlay />
<AlertDialogContent>
<AlertDialogHeader>{formatMessage(dialogTitle)}</AlertDialogHeader>
<AlertDialogBody>
{/*<AlertDialogOverlay />*/}
<DialogContent>
<DialogHeader>{formatMessage(dialogTitle)}</DialogHeader>
<DialogBody>
<Text>{formatMessage(confirmationMessage)}</Text>
</AlertDialogBody>
</DialogBody>

<AlertDialogFooter>
<DialogFooter>
{!hideAlternateAction ? (
<Button
variant="ghost"
Expand All @@ -76,9 +79,9 @@ const ConfirmationModal = ({
>
{formatMessage(primaryActionLabel)}
</Button>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</DialogFooter>
</DialogContent>
</DialogRoot>
)
}

Expand Down
2 changes: 1 addition & 1 deletion packages/extension-chakra-storefront/src/components/drawer-menu/drawer-menu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@ const DrawerMenu = ({
<DrawerSeparator />

{/* Application Actions */}
<VStack align="stretch" spacing={0} {...styles.actions} px={0}>
<VStack align="stretch" gap={0} {...styles.actions} px={0}>
<Box {...styles.actionsItem}>
{isRegistered ? (
<NestedAccordion
Expand Down
2 changes: 1 addition & 1 deletion packages/extension-chakra-storefront/src/components/error/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ const Error = (props) => {
</Box>
)}
</Box>
<Stack direction={['column', 'row']} spacing={4} width={['100%', 'auto']}>
<Stack direction={['column', 'row']} gap={4} width={['100%', 'auto']}>
<Button
variant="outline"
bg="white"
Expand Down
2 changes: 1 addition & 1 deletion packages/extension-chakra-storefront/src/components/footer/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ const Footer = ({...otherProps}) => {
<Box {...styles.content}>
<StylesProvider value={styles}>
<HideOnMobile>
<SimpleGrid columns={4} spacing={3}>
<SimpleGrid columns={4} gap={3}>
<LinksList
heading={intl.formatMessage({
id: 'footer.column.customer_support',
Expand Down
2 changes: 1 addition & 1 deletion packages/extension-chakra-storefront/src/components/forms/address-fields.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const AddressFields = ({form, prefix = '', formTitleAriaLabel = defaultFormTitle

return (
<Stack
spacing={5}
gap={5}
aria-label={intl.formatMessage(formTitleAriaLabel)}
tabIndex="0"
ref={addressFormRef}
Expand Down
6 changes: 3 additions & 3 deletions packages/extension-chakra-storefront/src/components/forms/credit-card-fields.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,13 +60,13 @@ const CreditCardFields = ({form, prefix = ''}) => {

return (
<Box>
<Stack spacing={5}>
<Stack gap={5}>
<Field
{...fields.number}
formLabel={
<Flex justify="space-between">
<FormLabel>{fields.number.label}</FormLabel>
<Stack direction="row" spacing={1}>
<Stack direction="row" gap={1}>
<VisaIcon layerStyle="ccIcon" />
<MastercardIcon layerStyle="ccIcon" />
<AmexIcon layerStyle="ccIcon" />
Expand Down Expand Up @@ -96,7 +96,7 @@ const CreditCardFields = ({form, prefix = ''}) => {

<Field {...fields.holder} />

<SimpleGrid columns={[2, 2, 3]} spacing={5}>
<SimpleGrid columns={[2, 2, 3]} gap={5}>
<Field
{...fields.expiry}
inputProps={({onChange}) => ({
Expand Down
2 changes: 1 addition & 1 deletion packages/extension-chakra-storefront/src/components/forms/form-action-buttons.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const FormActionButtons = ({
onCancel = () => {}
}) => {
return (
<Stack direction={{base: 'column', lg: 'row-reverse'}} spacing={4}>
<Stack direction={{base: 'column', lg: 'row-reverse'}} gap={4}>
<Button type="submit" minWidth={28} {...saveButtonProps}>
{saveButtonLabel ? (
<FormattedMessage {...saveButtonLabel} />
Expand Down
2 changes: 1 addition & 1 deletion packages/extension-chakra-storefront/src/components/forms/login-fields.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import Field from '../../components/field'
const LoginFields = ({form, prefix = ''}) => {
const fields = useLoginFields({form, prefix})
return (
<Stack spacing={5}>
<Stack gap={5}>
<Field {...fields.email} />
<Field {...fields.password} />
</Stack>
Expand Down
2 changes: 1 addition & 1 deletion packages/extension-chakra-storefront/src/components/forms/password-requirements.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ const PasswordRequirements = ({value}) => {
const pwValidations = validatePassword(value)

return (
<Stack spacing={2}>
<Stack gap={2}>
<PasswordRequirement isValid={pwValidations.hasMinChars}>
<FormattedMessage
id="password_requirements.error.eight_letter_minimum"
Expand Down
4 changes: 2 additions & 2 deletions ...es/extension-chakra-storefront/src/components/forms/post-checkout-registration-fields.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,10 @@ const PostCheckoutRegistrationFields = ({form, prefix = ''}) => {

return (
<Box>
<Stack spacing={5}>
<Stack gap={5}>
<Field {...fields.email} />

<Stack spacing={3} paddingBottom={2}>
<Stack gap={3} paddingBottom={2}>
<Field {...fields.password} />
<PasswordRequirements value={password} />
</Stack>
Expand Down
4 changes: 2 additions & 2 deletions packages/extension-chakra-storefront/src/components/forms/profile-fields.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ const ProfileFields = ({form, prefix = ''}) => {
const fields = useProfileFields({form, prefix})

return (
<Stack spacing={5}>
<SimpleGrid columns={[1, 1, 1, 2]} spacing={5}>
<Stack gap={5}>
<SimpleGrid columns={[1, 1, 1, 2]} gap={5}>
<Field {...fields.firstName} />
<Field {...fields.lastName} />
</SimpleGrid>
Expand Down
4 changes: 2 additions & 2 deletions packages/extension-chakra-storefront/src/components/forms/registration-fields.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,12 @@ const RegistrationFields = ({form, prefix = ''}) => {
const password = form.watch('password')

return (
<Stack spacing={5}>
<Stack gap={5}>
<Field {...fields.firstName} />
<Field {...fields.lastName} />
<Field {...fields.email} />

<Stack spacing={3} pb={2}>
<Stack gap={3} pb={2}>
<Field {...fields.password} />
<PasswordRequirements value={password} />
</Stack>
Expand Down
4 changes: 2 additions & 2 deletions packages/extension-chakra-storefront/src/components/forms/update-password-fields.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const UpdatePasswordFields = ({form, prefix = ''}) => {
const password = form.watch('password')

return (
<Stack spacing={5} divider={<StackDivider borderColor="gray.100" />}>
<Stack gap={5} divider={<StackDivider borderColor="gray.100" />}>
<Stack>
<Field {...fields.currentPassword} />
<Box>
Expand All @@ -30,7 +30,7 @@ const UpdatePasswordFields = ({form, prefix = ''}) => {
</Box>
</Stack>

<Stack spacing={3} pb={2}>
<Stack gap={3} pb={2}>
<Field {...fields.password} />
<PasswordRequirements value={password} />
</Stack>
Expand Down
Loading