From 546ff14ee1b0234558832371df80b763eda71455 Mon Sep 17 00:00:00 2001 From: Bram van der Holst Date: Fri, 21 Jul 2023 12:17:59 +0200 Subject: [PATCH 01/25] Fixed spacing for snackbars with long text content --- packages/next-ui/Theme/MuiSnackbar.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/next-ui/Theme/MuiSnackbar.ts b/packages/next-ui/Theme/MuiSnackbar.ts index aed1738788..aebd1c5ab6 100644 --- a/packages/next-ui/Theme/MuiSnackbar.ts +++ b/packages/next-ui/Theme/MuiSnackbar.ts @@ -22,8 +22,10 @@ export const MuiSnackbar: SnackbarVariants = [ }, }, '&.MuiSnackbar-anchorOriginBottomCenter': { - left: 0, - right: 0, + [theme.breakpoints.up('md')]: { + left: theme.page.horizontal, + right: theme.page.horizontal, + }, transform: 'unset', }, }), From f7ae03d99ca48002fbad85e0ea5a21c95e930082 Mon Sep 17 00:00:00 2001 From: Bram van der Holst Date: Fri, 21 Jul 2023 13:13:36 +0200 Subject: [PATCH 02/25] Set default severity for MessageSnackbar to success --- .changeset/young-suns-decide.md | 5 +++++ packages/next-ui/Snackbar/MessageSnackbarImpl.tsx | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 .changeset/young-suns-decide.md diff --git a/.changeset/young-suns-decide.md b/.changeset/young-suns-decide.md new file mode 100644 index 0000000000..91942b89fc --- /dev/null +++ b/.changeset/young-suns-decide.md @@ -0,0 +1,5 @@ +--- +'@graphcommerce/next-ui': patch +--- + +Set default severity for MessageSnackbar to 'success' diff --git a/packages/next-ui/Snackbar/MessageSnackbarImpl.tsx b/packages/next-ui/Snackbar/MessageSnackbarImpl.tsx index fb1ce728d0..b786c15608 100644 --- a/packages/next-ui/Snackbar/MessageSnackbarImpl.tsx +++ b/packages/next-ui/Snackbar/MessageSnackbarImpl.tsx @@ -54,7 +54,7 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) { sticky, children, onClose, - severity = 'info', + severity = 'success', sx, ...snackbarProps } = props From da2135744dddfa0d211c59589090ebb1977c38c9 Mon Sep 17 00:00:00 2001 From: Bram van der Holst Date: Fri, 21 Jul 2023 13:20:37 +0200 Subject: [PATCH 03/25] Added info icon for Snackbar when severity is set to info --- .changeset/famous-impalas-destroy.md | 5 +++++ packages/next-ui/Snackbar/MessageSnackbarImpl.tsx | 2 ++ 2 files changed, 7 insertions(+) create mode 100644 .changeset/famous-impalas-destroy.md diff --git a/.changeset/famous-impalas-destroy.md b/.changeset/famous-impalas-destroy.md new file mode 100644 index 0000000000..ca38c60a16 --- /dev/null +++ b/.changeset/famous-impalas-destroy.md @@ -0,0 +1,5 @@ +--- +'@graphcommerce/next-ui': patch +--- + +Added info icon for Snackbar when severity is set to info diff --git a/packages/next-ui/Snackbar/MessageSnackbarImpl.tsx b/packages/next-ui/Snackbar/MessageSnackbarImpl.tsx index b786c15608..c3ca1f84ed 100644 --- a/packages/next-ui/Snackbar/MessageSnackbarImpl.tsx +++ b/packages/next-ui/Snackbar/MessageSnackbarImpl.tsx @@ -14,6 +14,7 @@ import React, { useEffect, useState } from 'react' import { IconSvg } from '../IconSvg' import { extendableComponent, breakpointVal } from '../Styles' import { iconClose, iconCheckmark, iconSadFace } from '../icons' +import iconInfo from '../icons/info.svg' type Size = 'normal' | 'wide' type Variant = 'contained' | 'pill' @@ -80,6 +81,7 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) { } let icon = iconCheckmark + if (severity === 'info') icon = iconInfo if (severity === 'error') icon = iconSadFace return ( From 94e1ae811fe9eb0051863e8be91c6399ddcdf22f Mon Sep 17 00:00:00 2001 From: Bram van der Holst Date: Fri, 21 Jul 2023 13:40:59 +0200 Subject: [PATCH 04/25] Added storageType prop to MessageSnackbar to allow messages to be shown only once --- .changeset/shiny-radios-cover.md | 5 +++ packages/next-ui/Snackbar/MessageSnackbar.tsx | 34 ++++++++++++++++++- 2 files changed, 38 insertions(+), 1 deletion(-) create mode 100644 .changeset/shiny-radios-cover.md diff --git a/.changeset/shiny-radios-cover.md b/.changeset/shiny-radios-cover.md new file mode 100644 index 0000000000..c9ba5218c6 --- /dev/null +++ b/.changeset/shiny-radios-cover.md @@ -0,0 +1,5 @@ +--- +'@graphcommerce/next-ui': patch +--- + +Added storageType prop to MessageSnackbar to allow messages to be shown only once diff --git a/packages/next-ui/Snackbar/MessageSnackbar.tsx b/packages/next-ui/Snackbar/MessageSnackbar.tsx index 8b828d27b7..e242824925 100644 --- a/packages/next-ui/Snackbar/MessageSnackbar.tsx +++ b/packages/next-ui/Snackbar/MessageSnackbar.tsx @@ -1,4 +1,36 @@ import dynamic from 'next/dynamic' +import { MessageSnackbarProps as MessageSnackbarImpl } from './MessageSnackbarImpl' /** Always load the MessageSnackbar dynamically */ -export const MessageSnackbar = dynamic(() => import('./MessageSnackbarImpl'), { ssr: false }) +export const MessageSnackbarImplLoader = dynamic(() => import('./MessageSnackbarImpl'), { + ssr: false, +}) + +export type MessageSnackbarProps = MessageSnackbarImpl & { + id?: string + storageType?: 'localStorage' | 'sessionStorage' +} +export function MessageSnackbar(props: MessageSnackbarProps) { + const { storageType, id, onClose, ...rest } = props + const messageId = `MessageSnackBar_${id}` + + if (storageType && !id && process.env.NODE_ENV !== 'production') { + console.error('MessageSnackbar with a storageType set must has an id.') + } + + if (storageType && id && globalThis[storageType].getItem(messageId)) { + return null + } + + return ( + { + if (id && storageType) { + globalThis[storageType].setItem(messageId, `${Date.now()}`) + } + onClose?.() + }} + /> + ) +} From 53947d39f2f3ee578c14903c96a2b356d99d9475 Mon Sep 17 00:00:00 2001 From: Bram van der Holst Date: Fri, 21 Jul 2023 14:55:27 +0200 Subject: [PATCH 05/25] Implemented Message variant for RowColumnOne to show an important message which, after dismissing, will not show again --- .changeset/thirty-spiders-battle.md | 6 ++++ .../RowColumnOne/RowColumnOne.graphql | 2 ++ .../GraphCMS/RowColumnOne/RowColumnOne.tsx | 36 ++++++++++++++----- .../GraphCMS/RowColumnOne/variant/Default.tsx | 17 +++++++++ .../GraphCMS/RowColumnOne/variant/Message.tsx | 17 +++++++++ .../GraphCMS/RowColumnOne/variant/index.tsx | 2 ++ .../Row/ColumnOne/variant/VariantMessage.tsx | 12 +++++++ .../next-ui/Row/ColumnOne/variant/index.ts | 1 + packages/next-ui/Row/index.ts | 1 + 9 files changed, 85 insertions(+), 9 deletions(-) create mode 100644 .changeset/thirty-spiders-battle.md create mode 100644 examples/magento-graphcms/components/GraphCMS/RowColumnOne/variant/Default.tsx create mode 100644 examples/magento-graphcms/components/GraphCMS/RowColumnOne/variant/Message.tsx create mode 100644 examples/magento-graphcms/components/GraphCMS/RowColumnOne/variant/index.tsx create mode 100644 packages/next-ui/Row/ColumnOne/variant/VariantMessage.tsx create mode 100644 packages/next-ui/Row/ColumnOne/variant/index.ts diff --git a/.changeset/thirty-spiders-battle.md b/.changeset/thirty-spiders-battle.md new file mode 100644 index 0000000000..03ad7a1b92 --- /dev/null +++ b/.changeset/thirty-spiders-battle.md @@ -0,0 +1,6 @@ +--- +'@graphcommerce/magento-graphcms': patch +'@graphcommerce/next-ui': patch +--- + +Implemented Message variant for RowColumnOne to show an important message which, after dismissing, will not show again diff --git a/examples/magento-graphcms/components/GraphCMS/RowColumnOne/RowColumnOne.graphql b/examples/magento-graphcms/components/GraphCMS/RowColumnOne/RowColumnOne.graphql index baeba66324..bd122dd247 100644 --- a/examples/magento-graphcms/components/GraphCMS/RowColumnOne/RowColumnOne.graphql +++ b/examples/magento-graphcms/components/GraphCMS/RowColumnOne/RowColumnOne.graphql @@ -1,4 +1,6 @@ fragment RowColumnOne on RowColumnOne { + id + rowColumnOneVariant colOne { raw } diff --git a/examples/magento-graphcms/components/GraphCMS/RowColumnOne/RowColumnOne.tsx b/examples/magento-graphcms/components/GraphCMS/RowColumnOne/RowColumnOne.tsx index d170c36fbf..7c237607f5 100644 --- a/examples/magento-graphcms/components/GraphCMS/RowColumnOne/RowColumnOne.tsx +++ b/examples/magento-graphcms/components/GraphCMS/RowColumnOne/RowColumnOne.tsx @@ -1,17 +1,35 @@ -import { RichText, RichTextProps } from '@graphcommerce/graphcms-ui' -import { ColumnOne } from '@graphcommerce/next-ui' +import { RichTextProps } from '@graphcommerce/graphcms-ui' import type { RowColumnOneFragment } from './RowColumnOne.gql' +import { Default, Message } from './variant' -export type RowColumnOneProps = RowColumnOneFragment & { +type VariantRenderer = Record< + NonNullable, + React.VFC +> + +type RowColumnOneProps = RowColumnOneFragment & { + renderer?: Partial richTextOne?: Omit } +const defaultRenderer: Partial = { + Default, + Message, +} + export function RowColumnOne(props: RowColumnOneProps) { - const { colOne, richTextOne } = props + const { renderer, rowColumnOneVariant, ...RowColumnOneProps } = props + const mergedRenderer = { ...defaultRenderer, ...renderer } as VariantRenderer + + if (!rowColumnOneVariant) return + + const RenderType = + mergedRenderer?.[rowColumnOneVariant] ?? + (() => { + if (process.env.NODE_ENV !== 'production') + return <>renderer for {rowColumnOneVariant} not found + return null + }) - return ( - - - - ) + return } diff --git a/examples/magento-graphcms/components/GraphCMS/RowColumnOne/variant/Default.tsx b/examples/magento-graphcms/components/GraphCMS/RowColumnOne/variant/Default.tsx new file mode 100644 index 0000000000..36d419506b --- /dev/null +++ b/examples/magento-graphcms/components/GraphCMS/RowColumnOne/variant/Default.tsx @@ -0,0 +1,17 @@ +import { RichText, RichTextProps } from '@graphcommerce/graphcms-ui' +import { ColumnOne } from '@graphcommerce/next-ui' +import type { RowColumnOneFragment } from '../RowColumnOne.gql' + +type RowColumnOneProps = RowColumnOneFragment & { + richTextOne?: Omit +} + +export function Default(props: RowColumnOneProps) { + const { colOne, richTextOne } = props + + return ( + + + + ) +} diff --git a/examples/magento-graphcms/components/GraphCMS/RowColumnOne/variant/Message.tsx b/examples/magento-graphcms/components/GraphCMS/RowColumnOne/variant/Message.tsx new file mode 100644 index 0000000000..6e543f2deb --- /dev/null +++ b/examples/magento-graphcms/components/GraphCMS/RowColumnOne/variant/Message.tsx @@ -0,0 +1,17 @@ +import { RichText, RichTextProps } from '@graphcommerce/graphcms-ui' +import { VariantMessage } from '@graphcommerce/next-ui' +import type { RowColumnOneFragment } from '../RowColumnOne.gql' + +type RowColumnOneProps = RowColumnOneFragment & { + richTextOne?: Omit +} + +export function Message(props: RowColumnOneProps) { + const { colOne, richTextOne, id } = props + + return ( + + + + ) +} diff --git a/examples/magento-graphcms/components/GraphCMS/RowColumnOne/variant/index.tsx b/examples/magento-graphcms/components/GraphCMS/RowColumnOne/variant/index.tsx new file mode 100644 index 0000000000..24a3e580af --- /dev/null +++ b/examples/magento-graphcms/components/GraphCMS/RowColumnOne/variant/index.tsx @@ -0,0 +1,2 @@ +export * from './Default' +export * from './Message' diff --git a/packages/next-ui/Row/ColumnOne/variant/VariantMessage.tsx b/packages/next-ui/Row/ColumnOne/variant/VariantMessage.tsx new file mode 100644 index 0000000000..0319af7a32 --- /dev/null +++ b/packages/next-ui/Row/ColumnOne/variant/VariantMessage.tsx @@ -0,0 +1,12 @@ +import { Portal } from '@mui/material' +import { MessageSnackbar, MessageSnackbarProps } from '../../../Snackbar/MessageSnackbar' + +export type VariantMessageProps = MessageSnackbarProps + +export function VariantMessage(props: VariantMessageProps) { + return ( + + + + ) +} diff --git a/packages/next-ui/Row/ColumnOne/variant/index.ts b/packages/next-ui/Row/ColumnOne/variant/index.ts new file mode 100644 index 0000000000..98c645145a --- /dev/null +++ b/packages/next-ui/Row/ColumnOne/variant/index.ts @@ -0,0 +1 @@ +export * from './VariantMessage' diff --git a/packages/next-ui/Row/index.ts b/packages/next-ui/Row/index.ts index 598d6c949d..aa70e83c17 100644 --- a/packages/next-ui/Row/index.ts +++ b/packages/next-ui/Row/index.ts @@ -1,6 +1,7 @@ export * from './Row' export * from './ButtonLinkList' export * from './ColumnOne/ColumnOne' +export * from './ColumnOne/variant' export * from './ColumnOneBoxed/ColumnOneBoxed' export * from './ColumnOneCentered/ColumnOneCentered' export * from './ColumnThree/ColumnThree' From 66f8075fea236f9e5114d0938bb1aa99f12f305c Mon Sep 17 00:00:00 2001 From: Bram van der Holst Date: Fri, 21 Jul 2023 16:58:29 +0200 Subject: [PATCH 06/25] Cleanup MessageSnackbar props types --- packages/next-ui/Snackbar/ErrorSnackbar.tsx | 3 +-- packages/next-ui/Snackbar/MessageSnackbar.tsx | 4 ++-- packages/next-ui/Snackbar/MessageSnackbarImpl.tsx | 4 ++-- 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/next-ui/Snackbar/ErrorSnackbar.tsx b/packages/next-ui/Snackbar/ErrorSnackbar.tsx index 8e8ee6b725..4fb9540c01 100644 --- a/packages/next-ui/Snackbar/ErrorSnackbar.tsx +++ b/packages/next-ui/Snackbar/ErrorSnackbar.tsx @@ -1,7 +1,6 @@ import { Trans } from '@lingui/react' import { Button } from '@mui/material' -import { MessageSnackbar } from './MessageSnackbar' -import { MessageSnackbarProps } from './MessageSnackbarImpl' +import { MessageSnackbar, MessageSnackbarProps } from './MessageSnackbar' export type ErrorSnackbarProps = MessageSnackbarProps diff --git a/packages/next-ui/Snackbar/MessageSnackbar.tsx b/packages/next-ui/Snackbar/MessageSnackbar.tsx index e242824925..6f9d90744c 100644 --- a/packages/next-ui/Snackbar/MessageSnackbar.tsx +++ b/packages/next-ui/Snackbar/MessageSnackbar.tsx @@ -1,12 +1,12 @@ import dynamic from 'next/dynamic' -import { MessageSnackbarProps as MessageSnackbarImpl } from './MessageSnackbarImpl' +import { MessageSnackbarImplProps } from './MessageSnackbarImpl' /** Always load the MessageSnackbar dynamically */ export const MessageSnackbarImplLoader = dynamic(() => import('./MessageSnackbarImpl'), { ssr: false, }) -export type MessageSnackbarProps = MessageSnackbarImpl & { +export type MessageSnackbarProps = MessageSnackbarImplProps & { id?: string storageType?: 'localStorage' | 'sessionStorage' } diff --git a/packages/next-ui/Snackbar/MessageSnackbarImpl.tsx b/packages/next-ui/Snackbar/MessageSnackbarImpl.tsx index c3ca1f84ed..6ba7158996 100644 --- a/packages/next-ui/Snackbar/MessageSnackbarImpl.tsx +++ b/packages/next-ui/Snackbar/MessageSnackbarImpl.tsx @@ -19,7 +19,7 @@ import iconInfo from '../icons/info.svg' type Size = 'normal' | 'wide' type Variant = 'contained' | 'pill' -export type MessageSnackbarProps = Omit< +export type MessageSnackbarImplProps = Omit< SnackbarProps, 'autoHideDuration' | 'anchorOrigin' | 'color' > & { @@ -42,7 +42,7 @@ const parts = ['root', 'content', 'children', 'actionButton', 'close'] as const const { withState } = extendableComponent(name, parts) // eslint-disable-next-line import/no-default-export -export default function MessageSnackbarImpl(props: MessageSnackbarProps) { +export default function MessageSnackbarImpl(props: MessageSnackbarImplProps) { const [showSnackbar, setShowSnackbar] = useState(false) const { From dc2aea61361d3df2648637f3d43b33d92599df26 Mon Sep 17 00:00:00 2001 From: Bram van der Holst Date: Fri, 21 Jul 2023 16:58:41 +0200 Subject: [PATCH 07/25] Added missing type export --- .../components/GraphCMS/RowColumnOne/RowColumnOne.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/magento-graphcms/components/GraphCMS/RowColumnOne/RowColumnOne.tsx b/examples/magento-graphcms/components/GraphCMS/RowColumnOne/RowColumnOne.tsx index 7c237607f5..6eeeac55fd 100644 --- a/examples/magento-graphcms/components/GraphCMS/RowColumnOne/RowColumnOne.tsx +++ b/examples/magento-graphcms/components/GraphCMS/RowColumnOne/RowColumnOne.tsx @@ -7,7 +7,7 @@ type VariantRenderer = Record< React.VFC > -type RowColumnOneProps = RowColumnOneFragment & { +export type RowColumnOneProps = RowColumnOneFragment & { renderer?: Partial richTextOne?: Omit } From d608830ce77f85ff725cc106b9fc55a22012c74c Mon Sep 17 00:00:00 2001 From: Bram van der Holst Date: Mon, 24 Jul 2023 15:04:27 +0200 Subject: [PATCH 08/25] =?UTF-8?q?Added=20=E2=80=98type=E2=80=99=20prop=20t?= =?UTF-8?q?o=20MessageSnackbar=20to=20allow=20or=20disallow=20closing=20th?= =?UTF-8?q?e=20snackbar=20on=20page=20interaction=20(or=20just=20on=20clos?= =?UTF-8?q?e=20button=20and=20escape=20key)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/plenty-icons-cough.md | 5 +++++ packages/next-ui/Snackbar/MessageSnackbarImpl.tsx | 12 +++++++++++- 2 files changed, 16 insertions(+), 1 deletion(-) create mode 100644 .changeset/plenty-icons-cough.md diff --git a/.changeset/plenty-icons-cough.md b/.changeset/plenty-icons-cough.md new file mode 100644 index 0000000000..3935126032 --- /dev/null +++ b/.changeset/plenty-icons-cough.md @@ -0,0 +1,5 @@ +--- +'@graphcommerce/next-ui': patch +--- + +Added ‘type’ prop to MessageSnackbar to allow or disallow closing the snackbar on page interaction (or just on close button and escape key) diff --git a/packages/next-ui/Snackbar/MessageSnackbarImpl.tsx b/packages/next-ui/Snackbar/MessageSnackbarImpl.tsx index 6ba7158996..e4d9609189 100644 --- a/packages/next-ui/Snackbar/MessageSnackbarImpl.tsx +++ b/packages/next-ui/Snackbar/MessageSnackbarImpl.tsx @@ -35,6 +35,11 @@ type OwnerState = { size?: Size severity?: 'success' | 'info' | 'warning' | 'error' variant?: Variant + /** + * Dialogs are dismissed on page interaction, whilst popups remain open on page interaction and + * can only be closed using the close button or escape key. + */ + type?: 'dialog' | 'popup' } const name = 'MessageSnackbarImpl' as const @@ -57,6 +62,7 @@ export default function MessageSnackbarImpl(props: MessageSnackbarImplProps) { onClose, severity = 'success', sx, + type = 'dialog', ...snackbarProps } = props @@ -66,7 +72,11 @@ export default function MessageSnackbarImpl(props: MessageSnackbarImplProps) { setShowSnackbar(!!open) }, [open]) - const hideSnackbar = () => { + const hideSnackbar = (event: React.SyntheticEvent | Event, reason?: string) => { + if (type === 'popup' && reason === 'clickaway') { + return + } + setShowSnackbar(false) onClose?.() } From 362daa4f8bc72a4861d45912414bd9d0a6fe9f41 Mon Sep 17 00:00:00 2001 From: Bram van der Holst Date: Mon, 24 Jul 2023 15:06:06 +0200 Subject: [PATCH 09/25] Only close RowColumnOne messages when purposefully clicking the close button or pressing the esc key and prevent closing on page interaction --- .../components/GraphCMS/RowColumnOne/variant/Message.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/magento-graphcms/components/GraphCMS/RowColumnOne/variant/Message.tsx b/examples/magento-graphcms/components/GraphCMS/RowColumnOne/variant/Message.tsx index 6e543f2deb..3bb4a7b520 100644 --- a/examples/magento-graphcms/components/GraphCMS/RowColumnOne/variant/Message.tsx +++ b/examples/magento-graphcms/components/GraphCMS/RowColumnOne/variant/Message.tsx @@ -10,7 +10,7 @@ export function Message(props: RowColumnOneProps) { const { colOne, richTextOne, id } = props return ( - + ) From 921144ea871ffafc0d70e5db937bcb3fdf21882d Mon Sep 17 00:00:00 2001 From: Bram van der Holst Date: Tue, 1 Aug 2023 12:36:28 +0200 Subject: [PATCH 10/25] Allow clicking outside of messages --- .../Row/ColumnOne/variant/VariantMessage.tsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/next-ui/Row/ColumnOne/variant/VariantMessage.tsx b/packages/next-ui/Row/ColumnOne/variant/VariantMessage.tsx index 0319af7a32..ecfa8b9469 100644 --- a/packages/next-ui/Row/ColumnOne/variant/VariantMessage.tsx +++ b/packages/next-ui/Row/ColumnOne/variant/VariantMessage.tsx @@ -4,9 +4,23 @@ import { MessageSnackbar, MessageSnackbarProps } from '../../../Snackbar/Message export type VariantMessageProps = MessageSnackbarProps export function VariantMessage(props: VariantMessageProps) { + const { sx, ...rest } = props + return ( - + *': { pointerEvents: 'auto' }, + }, + ...(Array.isArray(sx) ? sx : [sx]), + ]} + /> ) } From 959a16a98e6292333b9671cf4e6ff787816f1142 Mon Sep 17 00:00:00 2001 From: Bram van der Holst Date: Tue, 1 Aug 2023 15:03:49 +0200 Subject: [PATCH 11/25] Fix potentially undefined property --- packages/next-ui/Snackbar/MessageSnackbar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/next-ui/Snackbar/MessageSnackbar.tsx b/packages/next-ui/Snackbar/MessageSnackbar.tsx index 6f9d90744c..da1dcb304a 100644 --- a/packages/next-ui/Snackbar/MessageSnackbar.tsx +++ b/packages/next-ui/Snackbar/MessageSnackbar.tsx @@ -18,7 +18,7 @@ export function MessageSnackbar(props: MessageSnackbarProps) { console.error('MessageSnackbar with a storageType set must has an id.') } - if (storageType && id && globalThis[storageType].getItem(messageId)) { + if (storageType && id && globalThis[storageType]?.getItem(messageId)) { return null } @@ -27,7 +27,7 @@ export function MessageSnackbar(props: MessageSnackbarProps) { {...rest} onClose={() => { if (id && storageType) { - globalThis[storageType].setItem(messageId, `${Date.now()}`) + globalThis[storageType]?.setItem(messageId, `${Date.now()}`) } onClose?.() }} From d98ac5a28bc168ad0c051342436aee8297bde01c Mon Sep 17 00:00:00 2001 From: Bram van der Holst Date: Wed, 15 Nov 2023 17:07:56 +0100 Subject: [PATCH 12/25] Split DismissibleSnackbar into separate file --- .changeset/shiny-radios-cover.md | 2 +- .../Row/ColumnOne/variant/VariantMessage.tsx | 6 ++-- .../next-ui/Snackbar/DismissibleSnackbar.tsx | 31 +++++++++++++++++ packages/next-ui/Snackbar/ErrorSnackbar.tsx | 3 +- packages/next-ui/Snackbar/MessageSnackbar.tsx | 34 +------------------ .../next-ui/Snackbar/MessageSnackbarImpl.tsx | 4 +-- 6 files changed, 40 insertions(+), 40 deletions(-) create mode 100644 packages/next-ui/Snackbar/DismissibleSnackbar.tsx diff --git a/.changeset/shiny-radios-cover.md b/.changeset/shiny-radios-cover.md index c9ba5218c6..d334548f78 100644 --- a/.changeset/shiny-radios-cover.md +++ b/.changeset/shiny-radios-cover.md @@ -2,4 +2,4 @@ '@graphcommerce/next-ui': patch --- -Added storageType prop to MessageSnackbar to allow messages to be shown only once +Added DismissibleSnackbar component to allow messages to be shown only once diff --git a/packages/next-ui/Row/ColumnOne/variant/VariantMessage.tsx b/packages/next-ui/Row/ColumnOne/variant/VariantMessage.tsx index ecfa8b9469..93e456e446 100644 --- a/packages/next-ui/Row/ColumnOne/variant/VariantMessage.tsx +++ b/packages/next-ui/Row/ColumnOne/variant/VariantMessage.tsx @@ -1,14 +1,14 @@ import { Portal } from '@mui/material' -import { MessageSnackbar, MessageSnackbarProps } from '../../../Snackbar/MessageSnackbar' +import { DismissibleSnackbar, DismissibleSnackbarProps } from '../../../Snackbar/DismissibleSnackbar' -export type VariantMessageProps = MessageSnackbarProps +export type VariantMessageProps = DismissibleSnackbarProps export function VariantMessage(props: VariantMessageProps) { const { sx, ...rest } = props return ( - { + if (id && storageType) { + globalThis[storageType]?.setItem(messageId, `${Date.now()}`) + } + onClose?.() + }} + /> + ) +} diff --git a/packages/next-ui/Snackbar/ErrorSnackbar.tsx b/packages/next-ui/Snackbar/ErrorSnackbar.tsx index 4fb9540c01..8e8ee6b725 100644 --- a/packages/next-ui/Snackbar/ErrorSnackbar.tsx +++ b/packages/next-ui/Snackbar/ErrorSnackbar.tsx @@ -1,6 +1,7 @@ import { Trans } from '@lingui/react' import { Button } from '@mui/material' -import { MessageSnackbar, MessageSnackbarProps } from './MessageSnackbar' +import { MessageSnackbar } from './MessageSnackbar' +import { MessageSnackbarProps } from './MessageSnackbarImpl' export type ErrorSnackbarProps = MessageSnackbarProps diff --git a/packages/next-ui/Snackbar/MessageSnackbar.tsx b/packages/next-ui/Snackbar/MessageSnackbar.tsx index da1dcb304a..8b828d27b7 100644 --- a/packages/next-ui/Snackbar/MessageSnackbar.tsx +++ b/packages/next-ui/Snackbar/MessageSnackbar.tsx @@ -1,36 +1,4 @@ import dynamic from 'next/dynamic' -import { MessageSnackbarImplProps } from './MessageSnackbarImpl' /** Always load the MessageSnackbar dynamically */ -export const MessageSnackbarImplLoader = dynamic(() => import('./MessageSnackbarImpl'), { - ssr: false, -}) - -export type MessageSnackbarProps = MessageSnackbarImplProps & { - id?: string - storageType?: 'localStorage' | 'sessionStorage' -} -export function MessageSnackbar(props: MessageSnackbarProps) { - const { storageType, id, onClose, ...rest } = props - const messageId = `MessageSnackBar_${id}` - - if (storageType && !id && process.env.NODE_ENV !== 'production') { - console.error('MessageSnackbar with a storageType set must has an id.') - } - - if (storageType && id && globalThis[storageType]?.getItem(messageId)) { - return null - } - - return ( - { - if (id && storageType) { - globalThis[storageType]?.setItem(messageId, `${Date.now()}`) - } - onClose?.() - }} - /> - ) -} +export const MessageSnackbar = dynamic(() => import('./MessageSnackbarImpl'), { ssr: false }) diff --git a/packages/next-ui/Snackbar/MessageSnackbarImpl.tsx b/packages/next-ui/Snackbar/MessageSnackbarImpl.tsx index e4d9609189..e5cdf50cef 100644 --- a/packages/next-ui/Snackbar/MessageSnackbarImpl.tsx +++ b/packages/next-ui/Snackbar/MessageSnackbarImpl.tsx @@ -19,7 +19,7 @@ import iconInfo from '../icons/info.svg' type Size = 'normal' | 'wide' type Variant = 'contained' | 'pill' -export type MessageSnackbarImplProps = Omit< +export type MessageSnackbarProps = Omit< SnackbarProps, 'autoHideDuration' | 'anchorOrigin' | 'color' > & { @@ -47,7 +47,7 @@ const parts = ['root', 'content', 'children', 'actionButton', 'close'] as const const { withState } = extendableComponent(name, parts) // eslint-disable-next-line import/no-default-export -export default function MessageSnackbarImpl(props: MessageSnackbarImplProps) { +export default function MessageSnackbarImpl(props: MessageSnackbarProps) { const [showSnackbar, setShowSnackbar] = useState(false) const { From 66322a4d00c220e20dd6c38549535d51580a3f24 Mon Sep 17 00:00:00 2001 From: Bram van der Holst Date: Wed, 15 Nov 2023 17:10:04 +0100 Subject: [PATCH 13/25] Removed unnecessary Portal --- .../Row/ColumnOne/variant/VariantMessage.tsx | 28 +++++++++---------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/packages/next-ui/Row/ColumnOne/variant/VariantMessage.tsx b/packages/next-ui/Row/ColumnOne/variant/VariantMessage.tsx index 93e456e446..0abf98c089 100644 --- a/packages/next-ui/Row/ColumnOne/variant/VariantMessage.tsx +++ b/packages/next-ui/Row/ColumnOne/variant/VariantMessage.tsx @@ -7,20 +7,18 @@ export function VariantMessage(props: VariantMessageProps) { const { sx, ...rest } = props return ( - - *': { pointerEvents: 'auto' }, - }, - ...(Array.isArray(sx) ? sx : [sx]), - ]} - /> - + *': { pointerEvents: 'auto' }, + }, + ...(Array.isArray(sx) ? sx : [sx]), + ]} + /> ) } From 4c6c466519e72c36f4a818803b53404d79059b55 Mon Sep 17 00:00:00 2001 From: Bram van der Holst Date: Thu, 16 Nov 2023 10:45:43 +0100 Subject: [PATCH 14/25] Cleanup setting a default renderer for RowColumnOne --- .../components/GraphCMS/RowColumnOne/RowColumnOne.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/examples/magento-graphcms/components/GraphCMS/RowColumnOne/RowColumnOne.tsx b/examples/magento-graphcms/components/GraphCMS/RowColumnOne/RowColumnOne.tsx index 6eeeac55fd..738b143683 100644 --- a/examples/magento-graphcms/components/GraphCMS/RowColumnOne/RowColumnOne.tsx +++ b/examples/magento-graphcms/components/GraphCMS/RowColumnOne/RowColumnOne.tsx @@ -18,10 +18,12 @@ const defaultRenderer: Partial = { } export function RowColumnOne(props: RowColumnOneProps) { - const { renderer, rowColumnOneVariant, ...RowColumnOneProps } = props + const { renderer, ...RowColumnOneProps } = props + let { rowColumnOneVariant } = props + const mergedRenderer = { ...defaultRenderer, ...renderer } as VariantRenderer - if (!rowColumnOneVariant) return + if (!rowColumnOneVariant) rowColumnOneVariant = 'Default' const RenderType = mergedRenderer?.[rowColumnOneVariant] ?? From 471aed142083f35346b39883962278724d0735a6 Mon Sep 17 00:00:00 2001 From: Bram van der Holst Date: Thu, 16 Nov 2023 13:31:40 +0100 Subject: [PATCH 15/25] Remove unused import --- packages/next-ui/Row/ColumnOne/variant/VariantMessage.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/next-ui/Row/ColumnOne/variant/VariantMessage.tsx b/packages/next-ui/Row/ColumnOne/variant/VariantMessage.tsx index 0abf98c089..d8cfa15bb2 100644 --- a/packages/next-ui/Row/ColumnOne/variant/VariantMessage.tsx +++ b/packages/next-ui/Row/ColumnOne/variant/VariantMessage.tsx @@ -1,5 +1,7 @@ -import { Portal } from '@mui/material' -import { DismissibleSnackbar, DismissibleSnackbarProps } from '../../../Snackbar/DismissibleSnackbar' +import { + DismissibleSnackbar, + DismissibleSnackbarProps, +} from '../../../Snackbar/DismissibleSnackbar' export type VariantMessageProps = DismissibleSnackbarProps From 29645c7f282f892f035550660bfcd7681eec58ae Mon Sep 17 00:00:00 2001 From: Bram van der Holst Date: Thu, 16 Nov 2023 13:49:10 +0100 Subject: [PATCH 16/25] =?UTF-8?q?Set=20default=20MessageSnackbar=20severit?= =?UTF-8?q?y=20back=20to=20=E2=80=98info=E2=80=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/young-suns-decide.md | 5 ----- .../magento-compare/components/CompareMessageSnackbar.tsx | 1 + .../components/ChangeNameForm/ChangeNameForm.tsx | 6 +++++- .../components/ChangePasswordForm/ChangePasswordForm.tsx | 2 +- .../CreateCustomerAddressForm/CreateCustomerAddressForm.tsx | 2 +- .../UpdateCustomerEmailForm/UpdateCustomerEmailForm.tsx | 2 +- .../components/GuestNewsletter/GuestNewsletter.tsx | 1 + .../ConfigurableProductAddToCart.tsx | 1 + .../AddProductsToCart/AddProductsToCartSnackbar.tsx | 1 + .../components/ProductAddToCart/ProductAddToCart.tsx | 1 + .../ProductWishlistChip/ProductWishlistChipBase.tsx | 1 + .../components/WishlistItem/ProductAddToCart.tsx | 1 + packages/next-ui/Snackbar/MessageSnackbarImpl.tsx | 2 +- 13 files changed, 16 insertions(+), 10 deletions(-) delete mode 100644 .changeset/young-suns-decide.md diff --git a/.changeset/young-suns-decide.md b/.changeset/young-suns-decide.md deleted file mode 100644 index 91942b89fc..0000000000 --- a/.changeset/young-suns-decide.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@graphcommerce/next-ui': patch ---- - -Set default severity for MessageSnackbar to 'success' diff --git a/packages/magento-compare/components/CompareMessageSnackbar.tsx b/packages/magento-compare/components/CompareMessageSnackbar.tsx index 01403e432e..0bb21c5a47 100644 --- a/packages/magento-compare/components/CompareMessageSnackbar.tsx +++ b/packages/magento-compare/components/CompareMessageSnackbar.tsx @@ -25,6 +25,7 @@ export function CompareMessageSnackbar(props: CompareMessageSnackbarProps) { setDisplayMessageBar(false) }} variant='pill' + severity='success' action={ count && count > 1 ? ( - + diff --git a/packages/magento-newsletter/components/GuestNewsletter/GuestNewsletter.tsx b/packages/magento-newsletter/components/GuestNewsletter/GuestNewsletter.tsx index 450e979662..acd7a0f754 100644 --- a/packages/magento-newsletter/components/GuestNewsletter/GuestNewsletter.tsx +++ b/packages/magento-newsletter/components/GuestNewsletter/GuestNewsletter.tsx @@ -54,6 +54,7 @@ export function GuestNewsletter(props: GuestNewsletterProps) { diff --git a/packages/magento-product-configurable/ConfigurableProductAddToCart/ConfigurableProductAddToCart.tsx b/packages/magento-product-configurable/ConfigurableProductAddToCart/ConfigurableProductAddToCart.tsx index 76332cd150..86246a466d 100644 --- a/packages/magento-product-configurable/ConfigurableProductAddToCart/ConfigurableProductAddToCart.tsx +++ b/packages/magento-product-configurable/ConfigurableProductAddToCart/ConfigurableProductAddToCart.tsx @@ -156,6 +156,7 @@ export function ConfigurableProductAddToCart(props: ConfigurableProductAddToCart !data?.addProductsToCart?.user_errors?.length } variant='pill' + severity='success' autoHide action={