@graphcommerce/next-ui 3.25.2 → 4.0.1

package/FramerScroller/components/SidebarSlider.tsx

@@ -1,97 +0,0 @@
-import {
-  Scroller,
-  ScrollerButton,
-  ScrollerPageCounter,
-  ScrollerProvider,
-} from '@graphcommerce/framer-scroller'
-import { Theme, makeStyles } from '@material-ui/core'
-import React, { ReactNode } from 'react'
-import Row from '../../Row'
-import { UseStyles } from '../../Styles'
-import { responsiveVal } from '../../Styles/responsiveVal'
-import SvgImageSimple from '../../SvgImage/SvgImageSimple'
-import { iconChevronLeft, iconChevronRight } from '../../icons'
-
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    root: {
-      display: 'grid',
-      gridTemplateColumns: 'minmax(150px, 25%) 1fr',
-      maxWidth: '100%',
-    },
-    sidebar: {
-      display: 'grid',
-      alignContent: 'space-between',
-      padding: `0 ${theme.spacings.lg} 0 ${theme.page.horizontal}`,
-    },
-    scrollerContainer: {
-      position: 'relative',
-      minWidth: 1,
-    },
-    scroller: {
-      gridColumnGap: theme.spacings.md,
-      gridRowGap: theme.spacings.lg,
-      paddingRight: theme.page.horizontal,
-      gridAutoColumns: responsiveVal(200, 400),
-    },
-    sliderButtons: {
-      [theme.breakpoints.down('sm')]: {
-        display: 'none',
-      },
-    },
-    centerLeft: {
-      display: 'grid',
-      gridAutoFlow: 'row',
-      gap: theme.spacings.xxs,
-      position: 'absolute',
-      left: theme.spacings.sm,
-      top: `calc(50% - 28px)`,
-    },
-    centerRight: {
-      display: 'grid',
-      gap: theme.spacings.xxs,
-      position: 'absolute',
-      right: theme.spacings.sm,
-      top: `calc(50% - 28px)`,
-    },
-  }),
-  { name: 'SidebarSlider' },
-)
-
-export type SidebarSliderProps = { children: ReactNode; sidebar: ReactNode } & UseStyles<
-  typeof useStyles
->
-
-export default function SidebarSlider(props: SidebarSliderProps) {
-  const { children, sidebar } = props
-  const classes = useStyles(props)
-
-  return (
-    <Row maxWidth={false} disableGutters>
-      <ScrollerProvider scrollSnapAlign='start'>
-        <div className={classes.root}>
-          <div className={classes.sidebar}>
-            <div>{sidebar}</div>
-            <ScrollerPageCounter />
-          </div>
-
-          <div className={classes.scrollerContainer}>
-            <Scroller className={classes.scroller} hideScrollbar>
-              {children}
-            </Scroller>
-            <div className={classes.centerLeft}>
-              <ScrollerButton direction='left' className={classes.sliderButtons}>
-                <SvgImageSimple src={iconChevronLeft} />
-              </ScrollerButton>
-            </div>
-            <div className={classes.centerRight}>
-              <ScrollerButton direction='right' className={classes.sliderButtons}>
-                <SvgImageSimple src={iconChevronRight} />
-              </ScrollerButton>
-            </div>
-          </div>
-        </div>
-      </ScrollerProvider>
-    </Row>
-  )
-}

package/Page/App.tsx

@@ -1,17 +0,0 @@
-import { FramerNextPages } from '@graphcommerce/framer-next-pages'
-import { LazyMotion } from 'framer-motion'
-import { AppPropsType } from 'next/dist/shared/lib/utils'
-import React, { useEffect } from 'react'
-import PageLoadIndicator from '../PageLoadIndicator'
-import { AppProps } from './types'
-
-export default function App(props: AppProps & AppPropsType) {
-  useEffect(() => document.getElementById('jss-server-side')?.remove())
-
-  return (
-    <LazyMotion features={async () => (await import('./framerFeatures')).default} strict>
-      <PageLoadIndicator />
-      <FramerNextPages {...props} />
-    </LazyMotion>
-  )
-}

package/Page/Document.tsx

@@ -1,24 +0,0 @@
-import { ServerStyleSheets } from '@material-ui/core/styles'
-// eslint-disable-next-line @next/next/no-document-import-in-page
-import NextDocument, { DocumentContext, DocumentInitialProps } from 'next/document'
-import React from 'react'
-
-export default class Document extends NextDocument {
-  static getInitialProps = async (ctx: DocumentContext): Promise<DocumentInitialProps> => {
-    const sheets = new ServerStyleSheets()
-    const originalRenderPage = ctx.renderPage
-
-    ctx.renderPage = () =>
-      originalRenderPage({
-        enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
-      })
-
-    const initialProps = await NextDocument.getInitialProps(ctx)
-
-    return {
-      ...initialProps,
-      // Styles fragment is rendered after the app and page rendering finish.
-      styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()],
-    }
-  }
-}

package/StyledBadge/index.tsx

@@ -1,20 +0,0 @@
-import { Badge, withStyles } from '@material-ui/core'
-
-const StyledBadge = withStyles((theme) => ({
-  colorError: {},
-  badge: {
-    ...theme.typography.caption,
-    right: 6,
-    top: 6,
-    padding: 3,
-    color: '#FFF',
-    borderRadius: '100%',
-    [theme.breakpoints.up('md')]: {
-      padding: 6,
-      right: 8,
-      top: 8,
-    },
-  },
-}))(Badge)
-
-export default StyledBadge

package/Styles/classesPicker.ts

@@ -1,41 +0,0 @@
-import { capitalize } from '@material-ui/core'
-import clsx from 'clsx'
-
-/**
- * This will pick classNames from the classes object based on the given value object.sf
- *
- * Example:
- *
- * ```tsx
- * const classes = makeStyles({
- *   root: {},
- *   rootColorRed: { color: 'red' }
- *   rootFloating: { display: 'inline-block' }
- * })
- *
- * function MyComponent() {
- *   const classes = useStyles(props)
- *   const classNames = pickClasses(classes, { color: 'red', floating: true })
- *
- *   return <div {...className('root')}>Hello</div>
- * }
- * ```
- */
-export function classesPicker<K extends string>(
-  classes: Record<string, string>,
-  values: Record<string, boolean | string | undefined>,
-) {
-  return (className: K, addClassName?: string) => {
-    const mapped: Record<string, string> = Object.fromEntries(
-      Object.entries(values)
-        .map(([key, value]) =>
-          typeof value === 'boolean' || typeof value === 'undefined'
-            ? [classes[`${className}${capitalize(key)}`], !!value]
-            : [classes[`${className}${capitalize(key)}${capitalize(value)}`], true],
-        )
-        .filter((v) => !!v[0] && v[1]),
-    )
-
-    return { className: clsx(classes[className], mapped, addClassName) }
-  }
-}

package/SvgImage/SvgImageSimple.tsx

@@ -1,100 +0,0 @@
-import { ImageProps, isStaticImport, isStaticRequire } from '@graphcommerce/image'
-import { makeStyles, capitalize } from '@material-ui/core'
-import clsx from 'clsx'
-import { forwardRef } from 'react'
-import { responsiveVal } from '../Styles/responsiveVal'
-
-export type SvgImageShade = 'muted' | 'default' | 'inverted'
-
-const useStyles = makeStyles(
-  {
-    image: {
-      userSelect: 'none',
-      width: responsiveVal(22, 24),
-      height: responsiveVal(22, 24),
-      strokeWidth: 1.8,
-      strokeLinecap: 'square',
-      strokeLinejoin: 'miter',
-      fill: 'none',
-      stroke: 'currentColor',
-    },
-    sizeInherit: {
-      fontSize: 'inherit',
-    },
-    sizeXs: {
-      width: responsiveVal(11, 13),
-      height: responsiveVal(11, 13),
-      strokeWidth: 2.1,
-    },
-    sizeSmall: {
-      width: responsiveVal(12, 16),
-      height: responsiveVal(12, 16),
-      strokeWidth: 2.1,
-    },
-    sizeLarge: {
-      width: responsiveVal(24, 28),
-      height: responsiveVal(24, 28),
-      strokeWidth: 1.4,
-    },
-    sizeXl: {
-      width: responsiveVal(38, 62),
-      height: responsiveVal(38, 62),
-      strokeWidth: 1.4,
-    },
-    sizeXxl: {
-      width: responsiveVal(96, 148),
-      height: responsiveVal(96, 148),
-      strokeWidth: 0.8,
-    },
-    muted: {},
-    inverted: {},
-  },
-  { name: 'SvgImageSimple' },
-)
-
-type SvgImageSimpleProps = Omit<ImageProps, 'fixed'> & {
-  /** The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size. */
-  size?: 'default' | 'inherit' | 'xxl' | 'xl' | 'large' | 'medium' | 'small' | 'xs'
-  fill?: boolean
-  muted?: boolean
-  inverted?: boolean
-}
-
-const SvgImageSimple = forwardRef<SVGSVGElement, SvgImageSimpleProps>((props, ref) => {
-  const {
-    style,
-    className,
-    size = 'medium',
-    muted,
-    inverted,
-    fill,
-    layout = 'fixed',
-    ...imageProps
-  } = props
-  const classes = useStyles()
-
-  let { src } = imageProps
-  let staticSrc = ''
-  if (isStaticImport(src)) staticSrc = (isStaticRequire(src) ? src.default : src).src
-  src = typeof src === 'string' ? src : staticSrc
-
-  return (
-    <svg
-      ref={ref}
-      className={clsx(
-        className,
-        classes.image,
-        classes?.[`size${capitalize(size)}`],
-        muted && classes.muted,
-        inverted && classes.inverted,
-      )}
-      aria-hidden='true'
-      style={style}
-    >
-      <use href={`${src}#icon`} />
-    </svg>
-  )
-})
-SvgImageSimple.displayName = 'SvgImageSimple'
-
-export default SvgImageSimple

package/SvgImage/index.tsx

@@ -1,74 +0,0 @@
-import { Image, ImageProps } from '@graphcommerce/image'
-import { makeStyles, Theme } from '@material-ui/core'
-import React from 'react'
-import { UseStyles } from '../Styles'
-
-// TODO: fix hot reloading issues when modifying implementations of this component
-export type SvgImageSize = 'small' | 'medium' | 'large' | 'extralarge'
-
-export type SvgImageProps = ImageProps & {
-  size?: SvgImageSize | number
-  mobileSize?: SvgImageSize | number
-  shade?: SvgImageShade
-} & UseStyles<typeof useStyles>
-
-export type SvgImageShade = 'muted' | 'default' | 'inverted'
-
-export const SvgImageShades: Record<SvgImageShade, number> = {
-  muted: 75,
-  default: 0,
-  inverted: 100,
-}
-
-export type UseStylesProps = { shade: number; baseSize: number; mobileSize: number }
-
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    root: ({ shade, baseSize, mobileSize }: UseStylesProps) => ({
-      filter: shade > 0 ? `invert(${shade}%)` : undefined,
-      objectFit: 'contain',
-      width: mobileSize ?? Math.round(baseSize * 0.75),
-      height: mobileSize ?? Math.round(baseSize * 0.75),
-      [theme.breakpoints.up('md')]: {
-        width: baseSize,
-        height: baseSize,
-      },
-    }),
-  }),
-  { name: 'SvgImage' },
-)
-
-export default function SvgImage(props: SvgImageProps) {
-  const { src, size = 'medium', mobileSize, shade = 'default', ...imageProps } = props
-
-  // if (isStaticImageData(src)) {
-  //   console.log(src.height)
-  //   console.log(src.width)
-  // }
-
-  const baseSizes = {
-    small: 24,
-    medium: 32,
-    large: 48,
-    extralarge: 64,
-  }
-
-  const classes = useStyles({
-    ...props,
-    mobileSize: baseSizes[mobileSize ?? ''] ?? mobileSize,
-    baseSize: baseSizes[size ?? ''] ?? size,
-    shade: SvgImageShades[shade],
-  })
-
-  return (
-    <Image
-      layout='fixed'
-      unoptimized
-      src={src}
-      className={classes.root}
-      // height={24}
-      // width={24}
-      {...imageProps}
-    />
-  )
-}