@graphcommerce/next-ui 4.1.0 → 4.1.1

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # Change Log
 
+## 4.1.1
+
+### Patch Changes
+
+- [#1274](https://github.com/ho-nl/m2-pwa/pull/1274)
+  [`381e4c86a`](https://github.com/ho-nl/m2-pwa/commit/381e4c86a8321ce96e1fa5c7d3c0a0c0ff3e02c7)
+  Thanks [@paales](https://github.com/paales)! - Moved `ApolloErrorAlert`, `ApolloErrorFullPage` and
+  `ApolloErrorSnackbar` to the ecommerce-ui package.
+
+  Created `ComposedSubmitButton` and `ComposedSubmitLinkOrButton` to reduce complexity from
+  `magento-graphcms` example.
+
+  Removed dependency an `@graphcommerce/react-hook-form` from `magento-graphcms` example.
+
+  Added dependency `@graphcommerce/ecommerce-ui` from `magento-graphcms` example.
+
+* [#1276](https://github.com/ho-nl/m2-pwa/pull/1276)
+  [`ce09388e0`](https://github.com/ho-nl/m2-pwa/commit/ce09388e0d7ef33aee660612340f6fbae15ceec2)
+  Thanks [@paales](https://github.com/paales)! - We've moved lots of internal packages from
+  `dependencies` to `peerDependencies`. The result of this is that there will be significantly less
+  duplicate packages in the node_modules folders.
+
+- [#1276](https://github.com/ho-nl/m2-pwa/pull/1276)
+  [`e7c8e2756`](https://github.com/ho-nl/m2-pwa/commit/e7c8e2756d637cbcd2e793d62ef5721d35d9fa7b)
+  Thanks [@paales](https://github.com/paales)! - CartFab positioning was incorrect
+
+* [#1276](https://github.com/ho-nl/m2-pwa/pull/1276)
+  [`52a45bba4`](https://github.com/ho-nl/m2-pwa/commit/52a45bba4dc6dd6df3c81f5023df7d23ed8a534d)
+  Thanks [@paales](https://github.com/paales)! - Upgraded to
+  [NextJS 12.1](https://nextjs.org/blog/next-12-1)! This is just for compatibility, but we'll be
+  implementing
+  [On-demand Incremental Static Regeneration](https://nextjs.org/blog/next-12-1#on-demand-incremental-static-regeneration-beta)
+  soon.
+
+  This will greatly reduce the requirement to rebuid stuff and we'll add a management UI on the
+  frontend to be able to revalidate pages manually.
+
+* Updated dependencies
+  [[`381e4c86a`](https://github.com/ho-nl/m2-pwa/commit/381e4c86a8321ce96e1fa5c7d3c0a0c0ff3e02c7),
+  [`ce09388e0`](https://github.com/ho-nl/m2-pwa/commit/ce09388e0d7ef33aee660612340f6fbae15ceec2),
+  [`52a45bba4`](https://github.com/ho-nl/m2-pwa/commit/52a45bba4dc6dd6df3c81f5023df7d23ed8a534d)]:
+  - @graphcommerce/framer-next-pages@3.0.2
+  - @graphcommerce/framer-scroller@2.0.2
+  - @graphcommerce/framer-utils@3.0.2
+  - @graphcommerce/image@3.0.2
+
 ## 4.1.0
 
 ### Minor Changes

package/Form/Form.tsx

@@ -30,6 +30,8 @@ const styles = ({ theme, contained = false, background }: { theme: Theme } & For
     },
   ])
 
-export const Form = styled('form')<FormStyleProps>(styles)
+export const Form = styled('form', {
+  shouldForwardProp: (prop) => prop !== 'contained',
+})<FormStyleProps>(styles)
 
 export const FormDiv = styled('div')<FormStyleProps>(styles)

package/LayoutDefault/components/LayoutDefault.tsx

@@ -97,7 +97,10 @@ export function LayoutDefault(props: LayoutDefaultProps) {
                 padding: `0 ${theme.page.horizontal}`,
                 position: 'sticky',
                 marginTop: `calc(${theme.appShell.headerHeightMd} * -1 + calc(${fabIconSize} / 2))`,
-                top: `calc(${theme.appShell.headerHeightMd} / 2 - 28px)`,
+                top: `calc(${theme.appShell.headerHeightMd} / 2 - ${responsiveVal(
+                  42 / 2,
+                  56 / 2,
+                )})`,
               },
               [theme.breakpoints.down('md')]: {
                 position: 'fixed',

package/Page/types.ts

@@ -1,6 +1,7 @@
 import { ParsedUrlQuery } from 'querystring'
-import { NormalizedCacheObject } from '@graphcommerce/graphql'
 import { UpPage } from '@graphcommerce/framer-next-pages/types'
+// todo: remove references to GraphQL
+import { NormalizedCacheObject } from '@graphcommerce/graphql'
 import { GetStaticProps as GetStaticPropsNext } from 'next'
 
 type AnyObj = Record<string, unknown>

package/index.ts

@@ -1,5 +1,4 @@
 export * from './AnimatedRow'
-export * from './ApolloError'
 export * from './Blog/BlogAuthor'
 export * from './Blog/BlogContent'
 export * from './Blog/BlogHeader'

package/package.json

@@ -2,13 +2,16 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "author": "",
   "license": "MIT",
-  "scripts": {
-    "dev": "next",
-    "build": "next build",
-    "start": "next start"
+  "sideEffects": false,
+  "prettier": "@graphcommerce/prettier-config-pwa",
+  "eslintConfig": {
+    "extends": "@graphcommerce/eslint-config-pwa",
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    }
   },
   "dependencies": {
     "@emotion/babel-preset-css-prop": "^11.2.0",
@@ -16,40 +19,31 @@
     "@emotion/react": "^11.7.1",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.6.0",
-    "@graphcommerce/framer-next-pages": "^3.0.1",
-    "@graphcommerce/framer-scroller": "^2.0.1",
-    "@graphcommerce/framer-utils": "^3.0.1",
-    "@graphcommerce/graphql": "^3.0.1",
-    "@graphcommerce/image": "^3.0.1",
+    "@graphcommerce/framer-next-pages": "^3.0.2",
+    "@graphcommerce/framer-scroller": "^2.0.2",
+    "@graphcommerce/framer-utils": "^3.0.2",
+    "@graphcommerce/image": "^3.0.2",
+    "react-is": "^17.0.2",
+    "react-schemaorg": "^2.0.0",
+    "schema-dts": "^1.0.0",
+    "type-fest": "^2.11.2"
+  },
+  "peerDependencies": {
     "@lingui/macro": "^3.13.2",
     "@mui/base": "^5.0.0-alpha.68",
     "@mui/lab": "^5.0.0-alpha.68",
     "@mui/material": "^5.4.1",
     "framer-motion": "^6.2.4",
-    "graphql": "^16.3.0",
     "next": "^12.0.10",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-is": "^17.0.2",
-    "react-schemaorg": "^2.0.0",
-    "schema-dts": "^1.0.0",
-    "type-fest": "^2.11.2"
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.0.1",
+    "@graphcommerce/eslint-config-pwa": "^4.0.2",
     "@graphcommerce/prettier-config-pwa": "^4.0.1",
     "@graphcommerce/typescript-config-pwa": "^4.0.1",
-    "@playwright/test": "^1.18.1",
+    "@playwright/test": "^1.19.1",
     "@types/react-is": "^17.0.3",
-    "graphql-tag": "2.12.6",
     "typescript": "^4.5.5"
-  },
-  "sideEffects": false,
-  "prettier": "@graphcommerce/prettier-config-pwa",
-  "eslintConfig": {
-    "extends": "@graphcommerce/eslint-config-pwa",
-    "parserOptions": {
-      "project": "./tsconfig.json"
-    }
   }
 }

package/ApolloError/ApolloErrorAlert.tsx

@@ -1,58 +0,0 @@
-import { ApolloError } from '@graphcommerce/graphql'
-import { AlertProps, Alert, Box, SxProps, Theme } from '@mui/material'
-import { AnimatePresence } from 'framer-motion'
-import { AnimatedRow } from '../AnimatedRow'
-import { extendableComponent } from '../Styles/extendableComponent'
-
-const { classes, selectors } = extendableComponent('ApolloErrorAlert', ['root', 'alert'] as const)
-
-export type ApolloErrorAlertProps = {
-  error?: ApolloError
-  graphqlErrorAlertProps?: Omit<AlertProps, 'severity'>
-  networkErrorAlertProps?: Omit<AlertProps, 'severity'>
-  sx?: SxProps<Theme>
-}
-export default function ApolloErrorAlert(props: ApolloErrorAlertProps) {
-  const { error, graphqlErrorAlertProps, networkErrorAlertProps, sx } = props
-
-  return (
-    <AnimatePresence initial={false}>
-      {error && (
-        <AnimatedRow key='alerts'>
-          <Box sx={sx} className={classes.root}>
-            <AnimatePresence initial={false}>
-              {error.graphQLErrors.map((e, index) => (
-                // eslint-disable-next-line react/no-array-index-key
-                <AnimatedRow key={index}>
-                  <div className={classes.alert}>
-                    <Alert severity='error' {...graphqlErrorAlertProps}>
-                      {e.message}
-                    </Alert>
-                  </div>
-                </AnimatedRow>
-              ))}
-              {error.networkError && (
-                <AnimatedRow key='networkError'>
-                  <Box
-                    sx={(theme) => ({
-                      paddingTop: theme.spacings.xxs,
-                      paddingBottom: theme.spacings.xxs,
-                    })}
-                    className={classes.alert}
-                    key='networkError'
-                  >
-                    <Alert severity='error' {...networkErrorAlertProps}>
-                      Network Error: {error.networkError.message}
-                    </Alert>
-                  </Box>
-                </AnimatedRow>
-              )}
-            </AnimatePresence>
-          </Box>
-        </AnimatedRow>
-      )}
-    </AnimatePresence>
-  )
-}
-
-ApolloErrorAlert.selectors = selectors

package/ApolloError/ApolloErrorFullPage.tsx

@@ -1,31 +0,0 @@
-import { ApolloError } from '@graphcommerce/graphql'
-import { AlertProps } from '@mui/material'
-import { FullPageMessage, FullPageMessageProps } from '../FullPageMessage'
-import ApolloErrorAlert from './ApolloErrorAlert'
-
-export type ApolloErrorFullPageProps = {
-  error?: ApolloError
-  graphqlErrorAlertProps?: Omit<AlertProps, 'severity'>
-  networkErrorAlertProps?: Omit<AlertProps, 'severity'>
-} & Omit<FullPageMessageProps, 'title' | 'description'>
-
-export default function ApolloErrorFullPage(props: ApolloErrorFullPageProps) {
-  const {
-    error,
-    graphqlErrorAlertProps,
-    networkErrorAlertProps,
-    children,
-    ...fullPageMessageProps
-  } = props
-
-  const singleError = error?.graphQLErrors.length === 1
-
-  return (
-    <FullPageMessage
-      title={singleError ? error?.graphQLErrors[0].message : 'Several errors occured'}
-      {...fullPageMessageProps}
-    >
-      {singleError ? children : <ApolloErrorAlert error={error} />}
-    </FullPageMessage>
-  )
-}

package/ApolloError/ApolloErrorSnackbar.tsx

@@ -1,35 +0,0 @@
-import { ApolloError } from '@graphcommerce/graphql'
-import { Trans } from '@lingui/macro'
-import { Button } from '@mui/material'
-import { MessageSnackbar } from '../Snackbar/MessageSnackbar'
-import { MessageSnackbarImplProps } from '../Snackbar/MessageSnackbarImpl'
-
-export type ApolloErrorSnackbarProps = {
-  error?: ApolloError
-} & Pick<MessageSnackbarImplProps, 'action' | 'onClose'>
-
-export default function ApolloErrorSnackbar(props: ApolloErrorSnackbarProps) {
-  const { error, action, ...passedProps } = props
-
-  if (!error) return null
-  return (
-    <MessageSnackbar
-      variant='pill'
-      severity='error'
-      {...passedProps}
-      open={!!error}
-      action={
-        action ?? (
-          <Button size='medium' variant='pill' color='secondary'>
-            <Trans>Ok</Trans>
-          </Button>
-        )
-      }
-    >
-      <>
-        {error.graphQLErrors.map((e) => e.message)}
-        {error.networkError && <>Network Error: {error.networkError.message}</>}
-      </>
-    </MessageSnackbar>
-  )
-}

package/ApolloError/index.ts

@@ -1,6 +0,0 @@
-export * from './ApolloErrorAlert'
-export { default as ApolloErrorAlert } from './ApolloErrorAlert'
-export * from './ApolloErrorFullPage'
-export { default as ApolloErrorFullPage } from './ApolloErrorFullPage'
-export * from './ApolloErrorSnackbar'
-export { default as ApolloErrorSnackbar } from './ApolloErrorSnackbar'