@graphcommerce/next-ui 3.25.1 → 4.0.0

package/docs/components/ComponentChildVariantExtendable.tsx

@@ -0,0 +1,62 @@
+import { ExtendableComponent, extendableComponent } from '@graphcommerce/next-ui'
+import { styled } from '@mui/material'
+import { ComponentProps } from 'react'
+
+// ---- Setup ----
+
+// To be able to select children from the consuming side, we define the classes.
+// Minimal utility to convert the classes to selectors. Hover over `selectors` to see what it means.
+const componentName = 'MyComponent' as const
+const { classes, selectors } = extendableComponent(componentName, ['root', 'child'] as const)
+
+// Props that are used in our styled elements to render different CSS
+type MyComponentStyleProps = { variant?: 'cool' | 'supercool' }
+
+// Expose the component to be exendable in your theme.components
+declare module '@mui/material/styles/components' {
+  interface Components {
+    MyComponent?: ExtendableComponent<MyComponentStyleProps>
+  }
+}
+
+// ---- Root component ----
+
+// We're creating a new styled('div') component and apply our styles to it.
+const Root = styled('div', {
+  name: componentName,
+  target: classes.root, // Adds a class name `MyComponent` to the div.
+})<MyComponentStyleProps>(({ theme }) => ({
+  // Styles are added
+  display: 'flex',
+  color: theme.palette.text.primary,
+}))
+
+// ---- Child component ----
+
+const Child = styled('div', {
+  name: componentName,
+  slot: 'child', // A slot is used as we do not want to receive style overrides from theme.components.MyComponent.variants.
+  target: classes.child, // Mandatory for children, adds a class name `MyComponent-child` so it can be styled from the outside.
+})<MyComponentStyleProps>(({ theme, variant }) => ({
+  backgroundColor: theme.palette.primary.main,
+  width: 100,
+  height: 100,
+  fontSize: variant === 'supercool' ? 'large' : 'normal',
+}))
+
+// ---- MyComponent component ----
+
+// Props of the component we are writing
+export type MyComponentProps = Pick<ComponentProps<typeof Root>, 'sx' | 'children'> &
+  MyComponentStyleProps
+
+export function MyComponent(props: MyComponentProps) {
+  const { sx, children, variant } = props
+  return (
+    <Root as='span' sx={sx} variant={variant}>
+      My Component <Child variant={variant}>{children}</Child>
+    </Root>
+  )
+}
+
+MyComponent.selectors = selectors

package/docs/components/ComponentStylable.tsx

@@ -0,0 +1,32 @@
+import { styled } from '@mui/material'
+import React from 'react'
+
+// ---- Setup ----
+
+const name = 'MyComponent'
+
+// ---- Root component ----
+
+// We're creating a new styled('div') component and apply our styles to it.
+const Root = styled('div', {
+  name, // Name of the component we are building, so 'MyComponent' in this example
+})(({ theme }) => ({
+  padding: '3px',
+  display: 'flex',
+  color: theme.palette.text.primary,
+}))
+
+// ---- MyComponent component ----
+
+// Props of the component we are writing
+export type MyComponentProps = Pick<React.ComponentProps<typeof Root>, 'sx' | 'children'>
+
+export function MyComponent(props: MyComponentProps) {
+  const { sx, children } = props
+  return (
+    <Root as='span' sx={sx}>
+      My Component
+      {children}
+    </Root>
+  )
+}

package/docs/pages/building-components.tsx

@@ -0,0 +1,62 @@
+import { ThemeProvider, Typography, useTheme } from '@mui/material'
+import { MyComponent as ComponentChild } from '../components/ComponentChild'
+import { MyComponent as ComponentChildVariant } from '../components/ComponentChildVariant'
+import { MyComponent as ComponentChildVariantExtendable } from '../components/ComponentChildVariantExtendable'
+import { MyComponent as ComponentStylable } from '../components/ComponentStylable'
+
+export function UsingBasic() {
+  const theme = useTheme()
+
+  return (
+    <>
+      <Typography variant='h3'>Basic</Typography>
+
+      <ComponentStylable
+        sx={{
+          backgroundColor: 'primary.main',
+        }}
+      >
+        Component Stylable
+      </ComponentStylable>
+
+      <Typography variant='h3'>With a child</Typography>
+
+      <ComponentChild
+        sx={{
+          backgroundColor: 'secondary.main',
+          [ComponentChild.selectors.child]: {
+            backgroundColor: 'secondary.dark',
+          },
+        }}
+      >
+        Component with a child
+      </ComponentChild>
+
+      <Typography variant='h3'>With a variant</Typography>
+
+      <ComponentChildVariant variant='supercool'>Component Child Variant</ComponentChildVariant>
+
+      <Typography variant='h3'>With a variant and extendable</Typography>
+
+      <ThemeProvider
+        theme={{
+          ...theme,
+          components: {
+            ...theme.components,
+            MyComponent: {
+              styleOverrides: {
+                root: {
+                  fontSize: '120%',
+                },
+              },
+            },
+          },
+        }}
+      >
+        <ComponentChildVariantExtendable>
+          Component Child Variant but extendable
+        </ComponentChildVariantExtendable>
+      </ThemeProvider>
+    </>
+  )
+}

package/index.ts

@@ -1,123 +1,69 @@
-export * from './AppShell'
-export * from './Layout'
-export * from './LayoutDefault'
-export * from './LayoutOverlay'
-export * from './Footer'
-
 export * from './AnimatedRow'
-export { default as AnimatedRow } from './AnimatedRow'
 export * from './ApolloError'
-export * from './AspectRatioContainer'
-export { default as AspectRationContainer } from './AspectRatioContainer'
+export * from './Blog/BlogAuthor'
 export * from './Blog/BlogContent'
-export { default as BlogContent } from './Blog/BlogContent'
 export * from './Blog/BlogHeader'
-export { default as BlogHeader } from './Blog/BlogHeader'
-export * from './Blog/BlogTitle'
-export { default as BlogTitle } from './Blog/BlogTitle'
-export { default as BlogTags } from './Blog/BlogTags'
-export * from './Blog/BlogAuthor'
-export { default as BlogAuthor } from './Blog/BlogAuthor'
 export * from './Blog/BlogList'
-export { default as BlogList } from './Blog/BlogList'
 export * from './Blog/BlogListItem'
-export { default as BlogListItem } from './Blog/BlogListItem'
+export * from './Blog/BlogTags'
+export * from './Blog/BlogTitle'
 export * from './Button'
-export { default as Button } from './Button'
-
 export * from './ChipMenu'
-export { default as ChipMenu } from './ChipMenu'
 export * from './ContainerWithHeader'
-export { default as ContainerWithHeader } from './ContainerWithHeader'
 export * from './FlagAvatar'
-export { default as FlagAvatar } from './FlagAvatar'
-export * from './Form'
-export { default as FormActions } from './Form/FormActions'
-export { default as FormDivider } from './Form/FormDivider'
+export * from './Footer'
+export * from './Form/Form'
+export * from './Form/FormActions'
+export * from './Form/FormDivider'
 export * from './Form/FormHeader'
-export { default as FormHeader } from './Form/FormHeader'
-export { default as FormRow } from './Form/FormRow'
+export * from './Form/FormRow'
 export * from './Form/InputCheckmark'
-export { default as InputCheckmark } from './Form/InputCheckmark'
-export * from './FramerScroller/components/SidebarGallery'
-export { default as SidebarGallery } from './FramerScroller/components/SidebarGallery'
-export * from './FramerScroller/components/SidebarSlider'
-export { default as SidebarSlider } from './FramerScroller/components/SidebarSlider'
+export * from './FramerScroller'
 export * from './FullPageMessage'
-export { default as FullPageMessage } from './FullPageMessage'
-export { default as Highlight } from './Highlight'
+export * from './Highlight'
 export * from './IconHeader'
-export { default as IconHeader } from './IconHeader'
 export * from './icons'
 export * from './JsonLd'
-export { default as JsonLd } from './JsonLd'
-export { default as App } from './Page/App'
-export * from './Page/types'
-export { default as PageLoadIndicator } from './PageLoadIndicator'
+export * from './Layout'
+export * from './LayoutDefault'
+export * from './LayoutOverlay'
+export * from './LayoutParts'
+export * from './Page'
+export * from './PageLoadIndicator'
 export * from './PageMeta'
-export { default as PageMeta } from './PageMeta'
 export * from './Pagination'
-export { default as Pagination } from './Pagination'
 export * from './RenderType'
-export { default as RenderType } from './RenderType'
-export { default as Row } from './Row'
+export * from './Row'
 export * from './Row/ButtonLinkList'
-export { default as ColumnOne } from './Row/ColumnOne'
-export { default as ColumnOneBoxed } from './Row/ColumnOneBoxed'
-export { default as ColumnOneCentered } from './Row/ColumnOneCentered'
+export * from './Row/ColumnOne'
+export * from './Row/ColumnOneBoxed'
+export * from './Row/ColumnOneCentered'
 export * from './Row/ColumnThree'
-export { default as ColumnThree } from './Row/ColumnThree'
 export * from './Row/ColumnTwo'
-export { default as ColumnTwo } from './Row/ColumnTwo'
 export * from './Row/ColumnTwoSpread'
-export { default as ColumnTwoSpread } from './Row/ColumnTwoSpread'
 export * from './Row/ColumnTwoWithTop'
-export { default as ColumnTwoWithTop } from './Row/ColumnTwoWithTop'
 export * from './Row/ContentLinks'
-export { default as ContentLinks } from './Row/ContentLinks'
 export * from './Row/HeroBanner'
-export { default as HeroBanner } from './Row/HeroBanner'
 export * from './Row/IconBlocks'
-export { default as IconBlocks } from './Row/IconBlocks'
 export * from './Row/IconBlocks/IconBlock'
-export { default as IconBlock } from './Row/IconBlocks/IconBlock'
-export * from './Row/ParagraphWithSidebarSlide'
-export { default as ParagraphWithSidebarSlide } from './Row/ParagraphWithSidebarSlide'
-export * from './Row/Quote'
-export { default as Quote } from './Row/Quote'
 export * from './Row/ImageText'
-export { default as ImageText } from './Row/ImageText'
 export * from './Row/ImageTextBoxed'
-export { default as ImageTextBoxed } from './Row/ImageTextBoxed'
+export * from './Row/ParagraphWithSidebarSlide'
+export * from './Row/Quote'
 export * from './Row/SpecialBanner'
-export { default as SpecialBanner } from './Row/SpecialBanner'
 export * from './SectionContainer'
-export { default as SectionContainer } from './SectionContainer'
 export * from './SectionHeader'
-export { default as SectionHeader } from './SectionHeader'
 export * from './Separator'
-export { default as Separator } from './Separator'
-export { default as MessageSnackbar } from './Snackbar/MessageSnackbar'
+export * from './Snackbar/MessageSnackbar'
 export * from './Snackbar/MessageSnackbarImpl'
-export { default as MessageSnackbarImpl } from './Snackbar/MessageSnackbarImpl'
 export * from './StarRatingField'
-export { default as StarRatingField } from './StarRatingField'
 export * from './Stepper/Stepper'
-export { default as Stepper } from './Stepper/Stepper'
-export { default as StyledBadge } from './StyledBadge'
 export * from './Styles'
-export * from './SvgImage'
-export { default as SvgImage } from './SvgImage'
-export { default as SvgImageSimple } from './SvgImage/SvgImageSimple'
+export * from './SvgIcon/SvgIcon'
 export * from './TextInputNumber'
-export { default as TextInputNumber } from './TextInputNumber'
+export * from './Theme'
 export * from './TimeAgo'
-export { default as TimeAgo } from './TimeAgo'
-export { default as ToggleButton } from './ToggleButton'
-export type { ToggleButtonProps } from './ToggleButton'
-export { default as ToggleButtonGroup } from './ToggleButtonGroup'
-export type { ToggleButtonPropsBase } from './ToggleButtonGroup'
+export * from './ToggleButton'
+export * from './ToggleButtonGroup'
 export * from './UspList'
-export { default as UspList } from './UspList'
 export * from './UspList/UspListItem'
-export { default as UspListItem } from './UspList/UspListItem'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.25.1",
+  "version": "4.0.0",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -9,47 +9,45 @@
     "start": "next start"
   },
   "dependencies": {
-    "@apollo/client": "^3.5.6",
-    "@graphcommerce/framer-next-pages": "^2.109.2",
-    "@graphcommerce/framer-scroller": "^1.2.10",
-    "@graphcommerce/framer-utils": "^2.103.21",
-    "@graphcommerce/graphql": "^2.105.13",
-    "@graphcommerce/image": "^2.105.13",
-    "@lingui/macro": "^3.13.0",
-    "@material-ui/core": "^4.12.3",
-    "@material-ui/lab": "^4.0.0-alpha.60",
-    "@material-ui/styles": "^4.11.4",
-    "clsx": "^1.1.1",
-    "framer-motion": "^5.5.5",
-    "graphql": "^16.2.0",
-    "next": "^12.0.7",
+    "@emotion/babel-preset-css-prop": "^11.2.0",
+    "@emotion/cache": "^11.7.1",
+    "@emotion/react": "^11.7.1",
+    "@emotion/server": "^11.4.0",
+    "@emotion/styled": "^11.6.0",
+    "@graphcommerce/framer-next-pages": "^3.0.0",
+    "@graphcommerce/framer-scroller": "^2.0.0",
+    "@graphcommerce/framer-utils": "^3.0.0",
+    "@graphcommerce/graphql": "^3.0.0",
+    "@graphcommerce/image": "^3.0.0",
+    "@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.8.0"
+    "type-fest": "^2.11.2"
   },
   "devDependencies": {
-    "@graphcommerce/browserslist-config-pwa": "^3.0.3",
-    "@graphcommerce/eslint-config-pwa": "^3.1.10",
-    "@graphcommerce/prettier-config-pwa": "^3.0.5",
-    "@graphcommerce/typescript-config-pwa": "^3.1.2",
-    "@playwright/test": "^1.17.1",
+    "@graphcommerce/eslint-config-pwa": "^4.0.0",
+    "@graphcommerce/prettier-config-pwa": "^4.0.0",
+    "@graphcommerce/typescript-config-pwa": "^4.0.0",
+    "@playwright/test": "^1.18.1",
     "@types/react-is": "^17.0.3",
     "graphql-tag": "2.12.6",
-    "typescript": "^4.5.4"
+    "typescript": "^4.5.5"
   },
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
-  "browserslist": [
-    "extends @graphcommerce/browserslist-config-pwa"
-  ],
   "eslintConfig": {
     "extends": "@graphcommerce/eslint-config-pwa",
     "parserOptions": {
       "project": "./tsconfig.json"
     }
-  },
-  "gitHead": "4f7fd2440fa20b9ad619b1172bc12deaaf8b2456"
+  }
 }

package/types.d.ts

@@ -2,7 +2,7 @@
 /// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
-import './Theme/types'
+import './Theme/createTheme'
 // eslint-disable-next-line react/no-typos
 import 'react'
 

package/AppShell/AppShellSticky/index.tsx

@@ -1,38 +0,0 @@
-import { Container, makeStyles, Theme } from '@material-ui/core'
-import React from 'react'
-import { UseStyles } from '../../Styles'
-
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    root: {
-      position: 'sticky',
-      top: theme.appShell.headerHeightSm,
-      zIndex: 96,
-      [theme.breakpoints.up('md')]: {
-        top: `${theme.page.vertical} !important`,
-      },
-    },
-  }),
-  { name: 'AppShellSticky' },
-)
-
-type AppShellStickyBaseProps = {
-  children: React.ReactNode
-}
-
-type AppShellStickyProps = AppShellStickyBaseProps & UseStyles<typeof useStyles>
-
-/*
- - makes the children sticky to the parent container
- - determines top offset based on header height dynamically
-*/
-export default function AppShellSticky(props: AppShellStickyProps) {
-  const { children } = props
-  const classes = useStyles(props)
-
-  return (
-    <Container maxWidth={false} className={classes.root}>
-      <>{children}</>
-    </Container>
-  )
-}

package/AppShell/DesktopNavActions.tsx

@@ -1,32 +0,0 @@
-import { makeStyles, Theme } from '@material-ui/core'
-import React from 'react'
-import { UseStyles } from '../Styles'
-
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    actions: {
-      display: 'none',
-      [theme.breakpoints.up('md')]: {
-        display: 'grid',
-        pointerEvents: 'none !important',
-        '& > *': {
-          pointerEvents: 'all',
-        },
-        alignItems: 'center',
-        gridAutoFlow: 'column',
-        columnGap: 6,
-      },
-    },
-  }),
-  { name: 'DesktopNavActions' },
-)
-
-export default function DesktopNavActions(
-  props: {
-    children?: React.ReactNode
-  } & UseStyles<typeof useStyles>,
-) {
-  const { children } = props
-  const classes = useStyles(props)
-  return <div className={classes.actions}>{children}</div>
-}

package/AppShell/DesktopNavBar.tsx

@@ -1,158 +0,0 @@
-import { Scroller, ScrollerButton, ScrollerProvider } from '@graphcommerce/framer-scroller'
-import { Link, LinkProps as MuiLinkProps, makeStyles, Theme } from '@material-ui/core'
-import clsx from 'clsx'
-import { m } from 'framer-motion'
-import PageLink from 'next/link'
-import { useRouter } from 'next/router'
-import React from 'react'
-import { UseStyles } from '../Styles'
-import SvgImageSimple from '../SvgImage/SvgImageSimple'
-import { iconChevronLeft, iconChevronRight } from '../icons'
-import { MenuProps } from './Menu'
-
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    container: {
-      minWidth: 200,
-      flex: 1,
-      position: 'relative',
-      pointerEvents: 'all',
-      [theme.breakpoints.down('sm')]: {
-        display: 'none',
-      },
-    },
-    scroller: {
-      display: 'grid',
-      columnGap: 40,
-      padding: '0 40px',
-      minHeight: 40,
-      gridAutoColumns: 'min-content',
-    },
-    prevNextBtnWrapper: {
-      position: 'absolute',
-      top: 0,
-    },
-    left: {
-      left: 0,
-    },
-    right: {
-      right: 0,
-    },
-    prevNextBtn: {
-      pointerEvents: 'all',
-      background: theme.palette.background.default,
-      boxShadow: 'none',
-      height: 48,
-      [theme.breakpoints.down('sm')]: {
-        display: 'none',
-      },
-    },
-    prevBtn: {
-      borderTopLeftRadius: 0,
-      borderBottomLeftRadius: 0,
-    },
-    nextBtn: {
-      borderTopRightRadius: 0,
-      borderBottomRightRadius: 0,
-    },
-    link: {
-      whiteSpace: 'nowrap',
-      color: theme.palette.text.primary,
-      '&:hover': {
-        textDecoration: 'none',
-      },
-      fontWeight: theme.typography.fontWeightBold,
-      paddingTop: 6,
-    },
-    line: {
-      maxWidth: 40,
-      width: '100%',
-      display: 'flex',
-      justifyContent: 'center',
-      height: 2,
-      background: theme.palette.primary.main,
-      margin: '0 auto',
-      marginTop: 6,
-      opacity: 0,
-    },
-    lineShow: {
-      opacity: 1,
-    },
-  }),
-  { name: 'DesktopNavBar' },
-)
-
-export type MenuTabsProps = MenuProps &
-  UseStyles<typeof useStyles> & {
-    LinkProps?: MuiLinkProps
-    iconScrollerBtnLeft?: React.ReactNode
-    iconScrollerBtnRight?: React.ReactNode
-  }
-
-export default function DesktopNavBar(props: MenuTabsProps) {
-  const { menu, LinkProps, iconScrollerBtnLeft, iconScrollerBtnRight } = props
-  const classes = useStyles(props)
-  const router = useRouter()
-
-  return (
-    <ScrollerProvider scrollSnapAlign='none'>
-      <div className={classes.container}>
-        <Scroller className={classes.scroller} hideScrollbar>
-          {menu.map(({ href, children, ...linkProps }) => (
-            <PageLink key={href.toString()} href={href} {...linkProps} passHref>
-              <Link
-                variant='subtitle1'
-                {...LinkProps}
-                className={clsx(classes.link, LinkProps?.className)}
-              >
-                {children}
-                <div
-                  className={clsx(
-                    classes.line,
-                    router.asPath.startsWith(href.toString()) && classes.lineShow,
-                  )}
-                />
-              </Link>
-            </PageLink>
-          ))}
-        </Scroller>
-
-        <m.div className={clsx(classes.prevNextBtnWrapper, classes.left)}>
-          <ScrollerButton
-            direction='left'
-            size='small'
-            classes={{ root: clsx(classes.prevNextBtn, classes.prevBtn) }}
-          >
-            {iconScrollerBtnLeft ?? <SvgImageSimple src={iconChevronLeft} />}
-          </ScrollerButton>
-        </m.div>
-
-        <m.div className={clsx(classes.prevNextBtnWrapper, classes.right)}>
-          <ScrollerButton
-            direction='right'
-            size='small'
-            classes={{ root: clsx(classes.prevNextBtn, classes.nextBtn) }}
-          >
-            {iconScrollerBtnRight ?? <SvgImageSimple src={iconChevronRight} />}
-          </ScrollerButton>
-        </m.div>
-      </div>
-
-      {/* <ScrollerButton
-          direction='left'
-          size='small'
-          className={clsx(classes.prevNext, classes.prev)}
-        >
-          <SvgImageSimple src={iconChevronLeft} />
-        </ScrollerButton>
-
-        <ScrollerButton
-          direction='right'
-          size='small'
-          className={clsx(classes.prevNext, classes.next)}
-        >
-          <SvgImageSimple src={iconChevronRight} />
-        </ScrollerButton> */}
-    </ScrollerProvider>
-  )
-}