@graphcommerce/ecommerce-ui 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,43 @@
+# @graphcommerce/ecommerce-ui
+
+## 1.0.0
+### Major Changes
+
+
+
+- [#1274](https://github.com/ho-nl/m2-pwa/pull/1274) [`351347afe`](https://github.com/ho-nl/m2-pwa/commit/351347afeae5bd837408d46c7593bcf5473dc621) Thanks [@paales](https://github.com/paales)! - Created new `@graphcommerce/ecommerce-ui` package to connect generic components
+  from `@graphcommerce/next-ui` to `@graphcommerce/react-hook-form` and
+  `@graphcommerce/graphql`
+
+### 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) [`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), [`e7c8e2756`](https://github.com/ho-nl/m2-pwa/commit/e7c8e2756d637cbcd2e793d62ef5721d35d9fa7b), [`52a45bba4`](https://github.com/ho-nl/m2-pwa/commit/52a45bba4dc6dd6df3c81f5023df7d23ed8a534d)]:
+  - @graphcommerce/next-ui@4.1.1
+  - @graphcommerce/react-hook-form@3.0.2
+  - @graphcommerce/graphql@3.0.2

package/README.md

@@ -0,0 +1,4 @@
+# ecommerce-ui
+
+Package to connect generic components from `@graphcommerce/next-ui` to
+`@graphcommerce/react-hook-form` and `@graphcommerce/graphql`

package/components/ApolloError/ApolloErrorAlert.tsx

@@ -0,0 +1,58 @@
+import { ApolloError } from '@graphcommerce/graphql'
+import { AnimatedRow } from '@graphcommerce/next-ui/AnimatedRow'
+import { extendableComponent } from '@graphcommerce/next-ui/Styles/extendableComponent'
+import { AlertProps, Alert, Box, SxProps, Theme } from '@mui/material'
+import { AnimatePresence } from 'framer-motion'
+
+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 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/components/ApolloError/ApolloErrorFullPage.tsx

@@ -0,0 +1,31 @@
+import { ApolloError } from '@graphcommerce/graphql'
+import { FullPageMessage, FullPageMessageProps } from '@graphcommerce/next-ui/FullPageMessage'
+import { AlertProps } from '@mui/material'
+import { ApolloErrorAlert } from './ApolloErrorAlert'
+
+export type ApolloErrorFullPageProps = {
+  error?: ApolloError
+  graphqlErrorAlertProps?: Omit<AlertProps, 'severity'>
+  networkErrorAlertProps?: Omit<AlertProps, 'severity'>
+} & Omit<FullPageMessageProps, 'title' | 'description'>
+
+export 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/components/ApolloError/ApolloErrorSnackbar.tsx

@@ -0,0 +1,35 @@
+import { ApolloError } from '@graphcommerce/graphql'
+import { MessageSnackbar } from '@graphcommerce/next-ui/Snackbar/MessageSnackbar'
+import { MessageSnackbarImplProps } from '@graphcommerce/next-ui/Snackbar/MessageSnackbarImpl'
+import { Trans } from '@lingui/macro'
+import { Button } from '@mui/material'
+
+export type ApolloErrorSnackbarProps = {
+  error?: ApolloError
+} & Pick<MessageSnackbarImplProps, 'action' | 'onClose'>
+
+export 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/components/ApolloError/index.ts

@@ -0,0 +1,3 @@
+export * from './ApolloErrorAlert'
+export * from './ApolloErrorFullPage'
+export * from './ApolloErrorSnackbar'

package/components/ComposedSubmitButton/ComposedSubmitButton.tsx

@@ -0,0 +1,36 @@
+import {
+  iconChevronRight,
+  LinkOrButton,
+  LinkOrButtonProps,
+  SvgIcon,
+  Button,
+  ButtonProps,
+} from '@graphcommerce/next-ui'
+import { ComposedSubmitRenderComponentProps } from '@graphcommerce/react-hook-form'
+import { forwardRef } from 'react'
+
+type ComposedSubmitButtonProps = ComposedSubmitRenderComponentProps &
+  Omit<ButtonProps, 'loading' | 'onSubmit'>
+
+/** Makes a ComposedSubmitRenderComponent rendered as a LinkOrButton */
+export const ComposedSubmitButton = forwardRef<HTMLButtonElement, ComposedSubmitButtonProps>(
+  ({ buttonState, submit, error, children, ...otherProps }, ref) => {
+    const loading =
+      buttonState.isSubmitting || (buttonState.isSubmitSuccessful && !error) ? true : undefined
+
+    return (
+      <Button
+        ref={ref}
+        color='secondary'
+        variant='pill'
+        endIcon={<SvgIcon src={iconChevronRight} />}
+        type='submit'
+        {...otherProps}
+        loading={loading}
+        onClick={submit}
+      >
+        {children}
+      </Button>
+    )
+  },
+)

package/components/ComposedSubmitButton/ComposedSubmitLinkOrButton.tsx

@@ -0,0 +1,32 @@
+import { iconChevronRight, LinkOrButton, LinkOrButtonProps, SvgIcon } from '@graphcommerce/next-ui'
+import { ComposedSubmitRenderComponentProps } from '@graphcommerce/react-hook-form'
+import { forwardRef } from 'react'
+
+type ComposedLinkOrButtonProps = ComposedSubmitRenderComponentProps &
+  Omit<LinkOrButtonProps, 'loading'>
+
+/** Makes a ComposedSubmitRenderComponent rendered as a LinkOrButton */
+export const ComposedSubmitLinkOrButton = forwardRef<
+  HTMLButtonElement & HTMLAnchorElement,
+  ComposedLinkOrButtonProps
+>(({ buttonState, submit, error, children, button, ...otherProps }, ref) => {
+  const loading =
+    buttonState.isSubmitting || (buttonState.isSubmitSuccessful && !error) ? true : undefined
+  return (
+    <LinkOrButton
+      ref={ref}
+      button={{
+        variant: 'pill',
+        endIcon: <SvgIcon src={iconChevronRight} />,
+        ...button,
+        type: 'submit',
+      }}
+      loading={loading}
+      color='secondary'
+      onClick={submit}
+      {...otherProps}
+    >
+      {children}
+    </LinkOrButton>
+  )
+})

package/components/ComposedSubmitButton/index.ts

@@ -0,0 +1,2 @@
+export * from './ComposedSubmitLinkOrButton'
+export * from './ComposedSubmitButton'

package/components/index.ts

@@ -0,0 +1,2 @@
+export * from './ComposedSubmitButton'
+export * from './ApolloError'

package/index.ts

@@ -0,0 +1,2 @@
+export * from './components'
+export * from '@graphcommerce/react-hook-form'

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@graphcommerce/ecommerce-ui",
+  "homepage": "https://www.graphcommerce.org/",
+  "repository": "github:graphcommerce-org/graphcommerce",
+  "version": "1.0.0",
+  "sideEffects": false,
+  "prettier": "@graphcommerce/prettier-config-pwa",
+  "eslintConfig": {
+    "extends": "@graphcommerce/eslint-config-pwa",
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    }
+  },
+  "dependencies": {
+    "@graphcommerce/next-ui": "^4.1.1",
+    "@graphcommerce/react-hook-form": "^3.0.2",
+    "@graphcommerce/graphql": "^3.0.2"
+  },
+  "devDependencies": {
+    "@graphcommerce/eslint-config-pwa": "^4.0.2",
+    "@graphcommerce/prettier-config-pwa": "^4.0.1",
+    "@graphcommerce/typescript-config-pwa": "^4.0.1",
+    "@playwright/test": "^1.19.1"
+  },
+  "peerDependencies": {
+    "@mui/material": "^5.4.1",
+    "@lingui/macro": "^3.13.2",
+    "framer-motion": "^6.2.4",
+    "next": "^12.0.10",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  }
+}