@graphcommerce/next-ui 4.6.2 → 4.7.2

package/Blog/BlogAuthor/BlogAuthor.tsx

@@ -33,6 +33,7 @@ export function BlogAuthor(props: BlogAuthorProps) {
     >
       <Chip
         sx={{
+          borderRadius: '99em',
           height: responsiveVal(44, 66),
           '& .MuiChip-label': {
             paddingLeft: responsiveVal(10, 14),

package/CHANGELOG.md

@@ -1,5 +1,69 @@
 # Change Log
 
+## 4.7.2
+
+### Patch Changes
+
+- [#1451](https://github.com/graphcommerce-org/graphcommerce/pull/1451) [`f698ff85d`](https://github.com/graphcommerce-org/graphcommerce/commit/f698ff85df6bb0922288471bb3c81856091b8061) Thanks [@paales](https://github.com/paales)! - Removed all occurences of @lingui/macro and moved to @lingui/macro / @lingui/core in preparation to move to swc.
+
+  Since we've removed @lingui/macro, all occurences need to be replaced with @lingui/core and @lingui/react.
+
+  All occurences of `<Trans>` and `t` need to be replaced:
+
+  ```tsx
+  import { Trans, t } from '@lingui/macro'
+
+  function MyComponent() {
+    const foo = 'bar'
+    return (
+      <div aria-label={t`Account ${foo}`}>
+        <Trans>My Translation {foo}</Trans>
+      </div>
+    )
+  }
+  ```
+
+  Needs to be replaced with:
+
+  ```tsx
+  import { Trans } from '@lingui/react'
+  import { i18n } from '@lingui/core'
+
+  function MyComponent() {
+    const foo = 'bar'
+    return (
+      <div aria-label={i18n._(/* i18n */ `Account {foo}`, { foo })}>
+        <Trans key='My Translation {foo}' values={{ foo }}></Trans>
+      </div>
+    )
+  }
+  ```
+
+  [More examples for Trans](https://lingui.js.org/ref/macro.html#examples-of-jsx-macros) and [more examples for `t`](https://lingui.js.org/ref/macro.html#examples-of-js-macros)
+
+- Updated dependencies [[`f698ff85d`](https://github.com/graphcommerce-org/graphcommerce/commit/f698ff85df6bb0922288471bb3c81856091b8061)]:
+  - @graphcommerce/framer-scroller@2.1.10
+
+## 4.7.1
+
+### Patch Changes
+
+- Updated dependencies [[`99600dd09`](https://github.com/graphcommerce-org/graphcommerce/commit/99600dd091980dd9ef335c04d2efac0835c20b2f)]:
+  - @graphcommerce/framer-next-pages@3.2.1
+  - @graphcommerce/framer-scroller@2.1.9
+
+## 4.7.0
+
+### Minor Changes
+
+- [#1416](https://github.com/graphcommerce-org/graphcommerce/pull/1416) [`f3d06dd83`](https://github.com/graphcommerce-org/graphcommerce/commit/f3d06dd836c9a76412b419d4d2c79bbd0ee92e04) Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - SEO audit
+
+### Patch Changes
+
+- Updated dependencies [[`f3d06dd83`](https://github.com/graphcommerce-org/graphcommerce/commit/f3d06dd836c9a76412b419d4d2c79bbd0ee92e04)]:
+  - @graphcommerce/framer-next-pages@3.2.0
+  - @graphcommerce/framer-scroller@2.1.8
+
 ## 4.6.2
 
 ### Patch Changes

package/Layout/components/LayoutHeaderBack.tsx

@@ -1,5 +1,5 @@
 import { useUp, usePrevUp, usePageContext } from '@graphcommerce/framer-next-pages'
-import { t } from '@lingui/macro'
+import { i18n } from '@lingui/core'
 import { Box, SxProps, Theme } from '@mui/material'
 import PageLink from 'next/link'
 import { useRouter } from 'next/router'
@@ -46,7 +46,7 @@ export function LayoutHeaderBack(props: BackProps) {
   const backIcon = <IconSvg src={iconChevronLeft} size='medium' />
   const canClickBack = backSteps > 0 && path !== prevUp?.href
 
-  let label = t`Back`
+  let label = i18n._(/* i18n */ `Back`)
   if (up?.href === path && up?.title) label = up.title
   if (prevUp?.href === path && prevUp?.title) label = prevUp.title
 

package/Row/ButtonLinkList/ButtonLinkList.tsx

@@ -1,6 +1,5 @@
-import { Box, SxProps, Theme } from '@mui/material'
+import { Box, SxProps, Theme, Typography } from '@mui/material'
 import React from 'react'
-import { SectionContainer } from '../../SectionContainer/SectionContainer'
 import { extendableComponent } from '../../Styles'
 import { responsiveVal } from '../../Styles/responsiveVal'
 import { Row } from '../Row'
@@ -8,6 +7,7 @@ import { Row } from '../Row'
 export type ButtonLinkListProps = {
   title: string
   children: React.ReactNode
+  component?: React.ElementType
   sx?: SxProps<Theme>
 } & OwnerState
 
@@ -21,7 +21,7 @@ const { withState } = extendableComponent<OwnerState, typeof compName, typeof pa
 )
 
 export function ButtonLinkList(props: ButtonLinkListProps) {
-  const { title, children, containsBigLinks, sx = [] } = props
+  const { title, children, component = 'span', containsBigLinks, sx = [] } = props
 
   const classes = withState({ containsBigLinks })
 
@@ -31,20 +31,39 @@ export function ButtonLinkList(props: ButtonLinkListProps) {
       className={classes.root}
       sx={[{ maxWidth: 820 }, ...(Array.isArray(sx) ? sx : [sx])]}
     >
-      <SectionContainer labelLeft={title}>
-        <Box
-          className={classes.links}
-          sx={(theme) => ({
-            display: 'grid',
-            columnGap: theme.spacings.sm,
-            '&:not(.containsBigLinks)': {
-              gridTemplateColumns: `repeat(auto-fill, minmax(${responsiveVal(210, 350)}, 1fr))`,
+      <Box
+        sx={[
+          (theme) => ({
+            position: 'relative',
+            '&:focus': {
+              outline: 'none',
             },
-          })}
-        >
-          {children}
-        </Box>
-      </SectionContainer>
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            marginTop: theme.spacings.sm,
+            marginBottom: theme.spacings.xxs,
+            paddingBottom: theme.spacings.xxs,
+            borderBottom: `1px solid ${theme.palette.divider}`,
+          }),
+        ]}
+      >
+        <Typography variant='overline' color='textSecondary' component={component}>
+          {title}
+        </Typography>
+      </Box>
+      <Box
+        className={classes.links}
+        sx={(theme) => ({
+          display: 'grid',
+          columnGap: theme.spacings.sm,
+          '&:not(.containsBigLinks)': {
+            gridTemplateColumns: `repeat(auto-fill, minmax(${responsiveVal(210, 350)}, 1fr))`,
+          },
+        })}
+      >
+        {children}
+      </Box>
     </Row>
   )
 }

package/Row/ButtonLinkList/ButtonLinkListItem.tsx

@@ -21,7 +21,7 @@ export function ButtonLinkListItem(props: ButtonLinkListItemProps) {
 
   return (
     <PageLink href={url} passHref>
-      <ButtonItem {...buttonProps} endIcon={endIcon}>
+      <ButtonItem {...buttonProps} endIcon={endIcon} LinkComponent='h3'>
         {children}
       </ButtonItem>
     </PageLink>

package/Row/ContentLinks/ContentLinks.tsx

@@ -37,7 +37,7 @@ export function ContentLinks(props: ContentLinksProps) {
             gridAutoColumns: `max-content`,
           })}
         >
-          <Typography variant='subtitle1' component='h3' className={classes.title}>
+          <Typography variant='subtitle1' component='h2' className={classes.title}>
             {title}
           </Typography>
           {children}

package/Row/IconBlocks/IconBlock.tsx

@@ -24,6 +24,7 @@ export const IconBlock = React.forwardRef<HTMLAnchorElement, IconBlockProps>((pr
         variant='subtitle1'
         className={classes.title}
         sx={(theme) => ({ fontWeight: theme.typography.fontWeightBold })}
+        component='span'
       >
         {title}
       </Typography>

package/Row/IconBlocks/IconBlocks.tsx

@@ -18,7 +18,11 @@ export function IconBlocks(props: IconBlocksProps) {
   const { title, children, sx = [] } = props
 
   return (
-    <Row className={classes.container} sx={[{ maxWidth: 820 }, ...(Array.isArray(sx) ? sx : [sx])]}>
+    <Row
+      maxWidth='md'
+      className={classes.container}
+      sx={[{ maxWidth: 820 }, ...(Array.isArray(sx) ? sx : [sx])]}
+    >
       <Box className={classes.wrapper} sx={(theme) => ({ paddingTop: `${theme.spacings.lg}` })}>
         <Box
           className={classes.title}

package/Snackbar/ErrorSnackbar.tsx

@@ -1,4 +1,4 @@
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react'
 import { Button } from '@mui/material'
 import { MessageSnackbar } from './MessageSnackbar'
 import { MessageSnackbarImplProps } from './MessageSnackbarImpl'
@@ -15,7 +15,7 @@ export function ErrorSnackbar(props: ErrorSnackbarProps) {
       action={
         action ?? (
           <Button size='medium' variant='pill' color='secondary'>
-            <Trans>Ok</Trans>
+            <Trans id='Ok' />
           </Button>
         )
       }

package/Styles/EmotionProvider.tsx

@@ -4,7 +4,7 @@ import { CacheProvider } from '@emotion/react'
 
 let muiCache: EmotionCache | undefined
 export const createMuiCache = () => {
-  muiCache = createCache({ key: 'mui', prepend: true })
+  muiCache = createCache({ key: 'mui' })
   return muiCache
 }
 

package/Theme/DarkLightModeThemeProvider.tsx

@@ -1,4 +1,4 @@
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react'
 import {
   Theme,
   ThemeProvider,
@@ -43,7 +43,7 @@ type ThemeProviderProps = {
  * The multi DarkLightModeThemeProvider allows switching between light and dark mode based on URL
  * and on user input.
  *
- * If you *just* wan't a single theme, use the import { ThemeProvider } from '@mui/material' instead.
+ * If you _just_ wan't a single theme, use the import { ThemeProvider } from '@mui/material' instead.
  */
 export function DarkLightModeThemeProvider(props: ThemeProviderProps) {
   const { children, light, dark } = props
@@ -109,9 +109,9 @@ export function DarkLightModeMenuSecondaryItem(props: ListItemButtonProps) {
       </ListItemIcon>
       <ListItemText>
         {currentMode === 'light' ? (
-          <Trans>Switch to Dark Mode</Trans>
+          <Trans id='Switch to Dark Mode' />
         ) : (
-          <Trans>Switch to Light Mode</Trans>
+          <Trans id='Switch to Light Mode' />
         )}
       </ListItemText>
     </ListItemButton>

package/icons/index.ts

@@ -39,3 +39,4 @@ export { default as icon404 } from './explore.svg'
 export { default as iconSun } from './sun.svg'
 export { default as iconMoon } from './moon.svg'
 export { default as iconPlay } from './play.svg'
+export { default as iconEllypsis } from './ellypsis.svg'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.6.2",
+  "version": "4.7.2",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -19,8 +19,8 @@
     "@emotion/react": "^11.9.0",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.6.0",
-    "@graphcommerce/framer-next-pages": "3.1.6",
-    "@graphcommerce/framer-scroller": "2.1.7",
+    "@graphcommerce/framer-next-pages": "3.2.1",
+    "@graphcommerce/framer-scroller": "2.1.10",
     "@graphcommerce/framer-utils": "3.1.2",
     "@graphcommerce/image": "3.1.5",
     "react-is": "^17.0.0",
@@ -28,7 +28,8 @@
     "schema-dts": "^1.1.0"
   },
   "peerDependencies": {
-    "@lingui/macro": "^3.13.2",
+    "@lingui/react": "^3.13.2",
+    "@lingui/core": "^3.13.2",
     "@mui/lab": "^5.0.0-alpha.68",
     "@mui/material": "5.5.3",
     "framer-motion": "^6.2.4",
@@ -37,9 +38,9 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.1.6",
+    "@graphcommerce/eslint-config-pwa": "^4.1.7",
     "@graphcommerce/prettier-config-pwa": "^4.0.6",
-    "@graphcommerce/typescript-config-pwa": "^4.0.2",
+    "@graphcommerce/typescript-config-pwa": "^4.0.3",
     "@playwright/test": "^1.21.1",
     "@types/react-is": "^17.0.3",
     "type-fest": "^2.12.2",