@graphcommerce/graphcms-ui 9.0.0-canary.99 → 9.0.0

package/index.ts

@@ -1,3 +1 @@
-export * from './components'
-export * from './graphql'
-export * from './lib'
+export * from '@graphcommerce/hygraph-ui'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/graphcms-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.0-canary.99",
+  "version": "9.0.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,16 +12,6 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.99",
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.99",
-    "@graphcommerce/graphql": "^9.0.0-canary.99",
-    "@graphcommerce/image": "^9.0.0-canary.99",
-    "@graphcommerce/next-ui": "^9.0.0-canary.99",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.99",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.99",
-    "@mui/material": "^5.10.16",
-    "next": "*",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "@graphcommerce/hygraph-ui": "^9.0.0"
   }
 }

package/Config.graphqls

@@ -1,17 +0,0 @@
-extend input GraphCommerceConfig {
-  """
-  The HyGraph endpoint.
-
-  > Read-only endpoint that allows low latency and high read-throughput content delivery.
-
-  Project settings -> API Access -> High Performance Read-only Content API
-  """
-  hygraphEndpoint: String!
-}
-
-extend input GraphCommerceStorefrontConfig {
-  """
-  Add a gcms-locales header to make sure queries return in a certain language, can be an array to define fallbacks.
-  """
-  hygraphLocales: [String!]
-}

package/README.md

@@ -1,4 +0,0 @@
-## Configuration
-
-Configure the following ([configuration values](./Config.graphqls)) in your
-graphcommerce.config.js

package/components/Asset/Asset.graphql

@@ -1,7 +0,0 @@
-fragment Asset on Asset {
-  url
-  width
-  height
-  mimeType
-  size
-}

package/components/Asset/Asset.tsx

@@ -1,59 +0,0 @@
-import { Image, ImageProps } from '@graphcommerce/image'
-import { styled, SxProps, Theme } from '@mui/material'
-import { memo } from 'react'
-import { AssetFragment } from './Asset.gql'
-
-export type { AssetFragment } from './Asset.gql'
-
-type ImageAsset = Omit<AssetFragment, 'width' | 'height'> & {
-  width: number
-  height: number
-}
-
-function isImage(asset: AssetFragment): asset is ImageAsset {
-  return !!(asset.width && asset.height)
-}
-
-type AssetProps = {
-  asset: AssetFragment
-  sx?: SxProps<Theme>
-} & Omit<ImageProps, 'src' | 'width' | 'height' | 'alt' | 'sx'>
-
-export const Asset = memo<AssetProps>((props) => {
-  const { asset, sx = [], ...imgProps } = props
-
-  if (isImage(asset)) {
-    const { url, height, mimeType, size, width, alt, ...assetProps } = asset
-    return (
-      <Image
-        src={url}
-        height={height}
-        width={width}
-        alt={alt ?? undefined}
-        {...imgProps}
-        {...assetProps}
-        unoptimized={mimeType === 'image/svg+xml'}
-        sx={[...(Array.isArray(sx) ? sx : [sx])]}
-      />
-    )
-  }
-
-  if (asset.mimeType === 'video/mp4') {
-    const Video = styled('video')({})
-
-    return (
-      <Video
-        src={asset.url}
-        autoPlay
-        muted
-        loop
-        playsInline
-        disableRemotePlayback
-        sx={[...(Array.isArray(sx) ? sx : [sx])]}
-      />
-    )
-  }
-
-  if (process.env.NODE_ENV !== 'production') return <div>{asset.mimeType} not supported</div>
-  return null
-})

package/components/RichText/RichText.tsx

@@ -1,199 +0,0 @@
-/* eslint-disable @typescript-eslint/no-use-before-define */
-import { SxProps, Theme } from '@mui/material'
-import React from 'react'
-import { defaultRenderers } from './defaultRenderers'
-import { defaultSxRenderer } from './defaultSxRenderer'
-import {
-  AdditionalProps,
-  Renderers,
-  Renderer,
-  SxRenderer,
-  TextNode,
-  ElementOrTextNode,
-  ElementNode,
-  SimpleElement,
-} from './types'
-
-const sxArr = (sxAny?: SxProps<Theme> | false) => {
-  if (!sxAny) return []
-  return Array.isArray(sxAny) ? sxAny : [sxAny]
-}
-
-function useRenderProps(
-  { first, last, sxRenderer }: Pick<AdditionalProps, 'first' | 'last' | 'sxRenderer'>,
-  type?: ElementNode['type'],
-) {
-  if (!type) return []
-  const sx: SxProps<Theme> = sxRenderer?.[type] ?? []
-
-  return [
-    ...sxArr(sxRenderer.all),
-    ...sxArr(sx),
-    ...sxArr(first && sxRenderer.first),
-    ...sxArr(last && sxRenderer.last),
-  ]
-}
-
-function LineBreakToBr(props: { text: string }) {
-  const { text } = props
-
-  const textA = text.split('\n')
-  const textArray: React.ReactNode[] = []
-  textA.forEach((val, index) => {
-    textArray.push(val)
-    if (index < textA.length - 1) textArray.push(<br />)
-  })
-
-  // eslint-disable-next-line react/no-array-index-key
-  return textArray.map((val, idx) => <React.Fragment key={idx}>{val}</React.Fragment>)
-}
-
-function RenderText({
-  text,
-  renderers,
-  sxRenderer,
-  first,
-  last,
-  ...textProps
-}: TextNode & AdditionalProps) {
-  let type: 'bold' | 'italic' | 'underlined' | undefined
-
-  if (textProps.bold) type = 'bold'
-  if (textProps.italic) type = 'italic'
-  if (textProps.underlined) type = 'underlined'
-
-  const sx = useRenderProps({ first, last, sxRenderer }, type)
-
-  if (!type) return <LineBreakToBr text={text} />
-  const Component: Renderer<SimpleElement> = renderers[type]
-  return (
-    <Component sx={sx}>
-      <LineBreakToBr text={text} />
-    </Component>
-  )
-}
-
-export function isTextNode(node: ElementOrTextNode): node is TextNode {
-  return (node as TextNode).text !== undefined
-}
-
-export function isElementNode(node: ElementOrTextNode): node is ElementNode {
-  return (node as ElementNode).children !== undefined
-}
-
-function RenderNode(node: ElementOrTextNode & AdditionalProps) {
-  if (isTextNode(node)) {
-    return <RenderText {...node} />
-  }
-  if (isElementNode(node)) {
-    // eslint-disable-next-line @typescript-eslint/no-use-before-define
-    return <RenderElement {...node} />
-  }
-
-  if (process.env.NODE_ENV !== 'production') {
-    console.error(node)
-    throw Error(`RichText: Node not recognized`)
-  }
-
-  return null
-}
-
-function RenderChildren({
-  childNodes,
-  noMargin,
-  ...props
-}: { childNodes: ElementNode['children']; noMargin?: boolean } & AdditionalProps) {
-  return (
-    <>
-      {childNodes.map((node, key) => (
-        <RenderNode
-          {...node}
-          {...props}
-          // Since we don't know any unique identifiers of the element and since this doesn't rerender often this is fine.
-          // eslint-disable-next-line react/no-array-index-key
-          key={key}
-          first={noMargin && key === 0}
-          last={noMargin && key === childNodes.length - 1}
-        />
-      ))}
-    </>
-  )
-}
-
-function RenderElement(element: ElementNode & AdditionalProps) {
-  const { type, children, sxRenderer, renderers, first, last, ...props } = element
-
-  // todo: this has the any type, could be improved
-  const Component: Renderer<SimpleElement> = renderers[type]
-  const sx = useRenderProps({ first, last, sxRenderer }, type)
-
-  if (Component) {
-    return (
-      <Component {...props} sx={sx}>
-        <RenderChildren childNodes={children} sxRenderer={sxRenderer} renderers={renderers} />
-      </Component>
-    )
-  }
-
-  if (process.env.NODE_ENV !== 'production') {
-    console.error(element)
-    throw Error(`RichText: Unknown Element: ${type}`)
-  }
-  return <RenderChildren childNodes={children} sxRenderer={sxRenderer} renderers={renderers} />
-}
-
-function mergeSxRenderer(base: SxRenderer, sxRenderer?: SxRenderer) {
-  if (!sxRenderer) return base
-
-  return Object.fromEntries(
-    Object.entries<SxProps<Theme>>(base).map(([key, sx]) => {
-      const sxOverride: SxProps<Theme> = sxRenderer?.[key]
-
-      return sxOverride
-        ? [
-            key,
-            [
-              ...(Array.isArray(sx) ? sx : [sx]),
-              ...(Array.isArray(sxOverride) ? sxOverride : [sxOverride]),
-            ],
-          ]
-        : [key, sx]
-    }),
-  ) as SxRenderer
-}
-
-export type RichTextProps = { raw: ElementNode } & {
-  renderers?: Partial<Renderers>
-  /**
-   * Allows you to theme all the types of components
-   *
-   * ```tsx
-   * function MyComponent()f {
-   *   return <RichText
-   *     sxRenderer={{
-   *       paragraph: (theme) => ({
-   *         columnCount: { xs: 1, md: getColumnCount(props, 2) },
-   *         columnGap: theme.spacings.md,
-   *       }),
-   *       //other props here
-   *     }}
-   *   />
-   * }
-   * ```
-   */
-  sxRenderer?: SxRenderer
-
-  /** By default the component will render the first and last element without any margins */
-  withMargin?: boolean
-}
-
-export function RichText({ raw, sxRenderer, renderers, withMargin = false }: RichTextProps) {
-  return (
-    <RenderChildren
-      childNodes={raw.children}
-      sxRenderer={mergeSxRenderer(defaultSxRenderer, sxRenderer)}
-      renderers={{ ...defaultRenderers, ...renderers }}
-      noMargin={!withMargin}
-    />
-  )
-}

package/components/RichText/defaultRenderers.tsx

@@ -1,58 +0,0 @@
-import { Box, Typography, Link } from '@mui/material'
-import { Asset } from '../Asset/Asset'
-import { Renderers } from './types'
-
-export const defaultRenderers: Renderers = {
-  'heading-one': (props) => <Typography variant='h1' {...props} />,
-  'heading-two': (props) => <Typography variant='h2' {...props} />,
-  'heading-three': (props) => <Typography variant='h3' {...props} />,
-  'heading-four': (props) => <Typography variant='h4' {...props} />,
-  'heading-five': (props) => <Typography variant='h5' {...props} />,
-  'heading-six': (props) => <Typography variant='h6' {...props} />,
-  paragraph: (props) => <Typography variant='body1' gutterBottom {...props} />,
-  'bulleted-list': (props) => <Box component='ul' {...props} />,
-  'numbered-list': (props) => <Box component='ol' {...props} />,
-  'list-item': (props) => <Box component='li' {...props} />,
-  'list-item-child': (props) => <Box component='span' {...props} />,
-  'block-quote': (props) => <Box component='blockquote' {...props} />,
-  iframe: (props) => {
-    const { url, width, height, sx = [] } = props
-    return (
-      // todo add security attributes to iframe
-      // todo make iframe responsive (generic IFrame component?)
-      <Box
-        component='iframe'
-        src={url}
-        loading='lazy'
-        sx={[
-          { aspectRatio: `${width} / ${height}`, width: '100%' },
-          ...(Array.isArray(sx) ? sx : [sx]),
-        ]}
-      />
-    )
-  },
-  image: ({ src, width, height, title, altText, mimeType, sx }) => (
-    <Box sx={sx}>
-      <Asset asset={{ url: src, alt: altText ?? title, width, height, mimeType }} />
-    </Box>
-  ),
-  video: ({ src, width, height, title, mimeType, sx }) => (
-    <Box sx={sx}>
-      <Asset asset={{ url: src, alt: title, width, height, mimeType }} />
-    </Box>
-  ),
-  link: ({ href, openInNewTab, ...props }) => (
-    <Link href={href} underline='hover' {...props} target={openInNewTab ? '_blank' : undefined} />
-  ),
-  table: (props) => <Box component='table' {...props} />,
-  table_head: (props) => <Box component='thead' {...props} />,
-  table_header_cell: (props) => <Box component='th' {...props} />,
-  table_body: (props) => <Box component='tbody' {...props} />,
-  table_row: (props) => <Box component='tr' {...props} />,
-  table_cell: (props) => <Box component='td' {...props} />,
-  code: (props) => <Box component='code' {...props} />,
-  bold: (props) => <Box component='strong' fontWeight='bold' {...props} />,
-  italic: (props) => <Box component='em' fontStyle='italic' {...props} />,
-  underlined: (props) => <Box component='span' {...props} />,
-  class: (props) => <Box component='div' {...props} />,
-}

package/components/RichText/defaultSxRenderer.ts

@@ -1,108 +0,0 @@
-import { SxRenderer } from './types'
-
-export const defaultSxRenderer: SxRenderer = {
-  all: {
-    '&:empty:not(iframe)': {
-      display: 'none',
-    },
-  },
-  first: {
-    marginTop: 0,
-  },
-  last: {
-    marginBottom: 0,
-  },
-  paragraph: {
-    marginBottom: '1em',
-    wordBreak: 'break-word',
-  },
-  'heading-one': {
-    marginTop: '0.5em',
-    marginBottom: '0.5em',
-  },
-  'heading-two': {
-    marginTop: '0.5em',
-    marginBottom: '0.5em',
-  },
-  'heading-three': {
-    marginTop: '0.5em',
-    marginBottom: '0.5em',
-  },
-  'heading-four': {
-    marginTop: '0.5em',
-    marginBottom: '0.5em',
-  },
-  'heading-five': {
-    marginTop: '0.5em',
-    marginBottom: '0.5em',
-  },
-  image: {
-    width: '100%',
-    height: 'auto',
-  },
-  video: {
-    width: '100%',
-    height: 'auto',
-  },
-  'block-quote': (theme) => ({
-    paddingLeft: theme.spacings.sm,
-    margin: `${theme.spacings.md} 0`,
-  }),
-  'bulleted-list': {
-    marginBottom: '1em',
-  },
-  'numbered-list': {
-    marginBottom: '1em',
-  },
-  code: {
-    width: 'fit-content',
-    maxWidth: '100%',
-    padding: 5,
-    overflow: 'scroll',
-  },
-  table: (theme) => ({
-    display: 'table',
-    width: '100%',
-    borderSpacing: '2px',
-    borderCollapse: 'collapse',
-    marginTop: theme.spacings.md,
-    marginBottom: theme.spacings.sm,
-    '& thead, tbody': {
-      '& td': {
-        padding: '10px 20px',
-      },
-    },
-    '& thead': {
-      '& tr': {
-        '& td': {
-          '& p': {
-            fontWeight: theme.typography.fontWeightBold,
-          },
-        },
-      },
-    },
-    '& tbody': {
-      display: 'table-row-group',
-      verticalAlign: 'center',
-      borderColor: 'inherit',
-      '& tr': {
-        '&:nth-of-type(odd)': {
-          background: theme.palette.background.paper,
-        },
-      },
-      '& td': {
-        [theme.breakpoints.up('sm')]: {
-          minWidth: '150px',
-        },
-        '& p': {},
-      },
-    },
-  }),
-  link: {
-    wordBreak: 'break-word',
-  },
-  underlined: {
-    textDecoration: 'underline',
-  },
-  iframe: {},
-}

package/components/RichText/getNodeLength.tsx

@@ -1,11 +0,0 @@
-import { isElementNode, isTextNode } from './RichText'
-import { ElementOrTextNode } from './types'
-
-export function getNodeLength(node: ElementOrTextNode): number {
-  if (isElementNode(node))
-    return node.children.map(getNodeLength).reduce<number>((prev, curr) => prev + curr, 0)
-
-  if (isTextNode(node)) return node.text.length
-
-  return 0
-}

package/components/RichText/index.ts

@@ -1,2 +0,0 @@
-export * from './RichText'
-export * from './getNodeLength'

package/components/RichText/types.ts

@@ -1,117 +0,0 @@
-import { SxProps, Theme } from '@mui/material'
-import type { LiteralUnion } from 'type-fest'
-
-type BaseElementTypes =
-  | 'heading-one'
-  | 'heading-two'
-  | 'heading-three'
-  | 'heading-four'
-  | 'heading-five'
-  | 'heading-six'
-  | 'paragraph'
-  | 'numbered-list'
-  | 'bulleted-list'
-  | 'block-quote'
-  | 'list-item'
-  | 'list-item-child'
-  | 'table'
-  | 'table_head'
-  | 'table_header_cell'
-  | 'table_body'
-  | 'table_row'
-  | 'table_cell'
-  | 'code'
-  | 'bold'
-  | 'italic'
-  | 'underlined'
-
-export type SimpleElement = {
-  children: ElementOrTextNode[]
-  type: LiteralUnion<BaseElementTypes, string>
-}
-
-export type TextNode = {
-  text: string
-  bold?: true
-  italic?: true
-  underlined?: true
-  [key: string]: unknown
-}
-
-type LinkElement = {
-  type: 'link'
-  children: ElementOrTextNode[]
-  href: string
-  openInNewTab?: boolean
-}
-
-type ClassElement = {
-  type: 'class'
-  children: ElementOrTextNode[]
-  className: string
-}
-
-type ImageElement = {
-  type: 'image'
-  children: ElementOrTextNode[]
-  src: string
-  title: string
-  altText: string
-  width: number
-  height: number
-  mimeType: string
-}
-
-type VideoElement = {
-  type: 'image'
-  children: ElementOrTextNode[]
-  src: string
-  title: string
-  width: number
-  height: number
-  mimeType: string
-}
-
-type IframeElement = {
-  type: 'iframe'
-  children: ElementOrTextNode[]
-  url: string
-  width?: number
-  height?: number
-}
-
-export type ElementNode =
-  | SimpleElement
-  | LinkElement
-  | ImageElement
-  | VideoElement
-  | IframeElement
-  | ClassElement
-export type ElementOrTextNode = ElementNode | TextNode
-
-type RendererBase = { sx?: SxProps<Theme>; children?: React.ReactNode }
-export type Renderer<P extends ElementNode> = (
-  props: Omit<P, 'children' | 'type'> & RendererBase,
-) => React.ReactElement | null
-
-export type Renderers = {
-  [k in BaseElementTypes]: Renderer<SimpleElement>
-} & {
-  link: Renderer<LinkElement>
-  image: Renderer<ImageElement>
-  video: Renderer<VideoElement>
-  iframe: Renderer<IframeElement>
-  class: Renderer<ClassElement>
-}
-
-export type SxRenderer = {
-  [k in keyof Renderers | 'all' | 'first' | 'last']?: SxProps<Theme>
-}
-
-export type AdditionalProps = {
-  renderers: Renderers
-  sxRenderer: SxRenderer
-  first?: boolean
-  last?: boolean
-  className?: string
-}

package/components/index.ts

@@ -1,2 +0,0 @@
-export * from './RichText'
-export * from './Asset/Asset'

package/graphql/HygraphAllPages.graphql

@@ -1,11 +0,0 @@
-query HygraphAllPages($first: Int = 100, $skip: Int) {
-  pages(first: $first, skip: $skip) {
-    url
-  }
-
-  pagesConnection {
-    aggregate {
-      count
-    }
-  }
-}

package/graphql/HygraphPage.graphql

@@ -1,16 +0,0 @@
-fragment HygraphPage on Page {
-  title
-  metaTitle
-  metaDescription
-  metaRobots
-  url
-  author
-  date
-  relatedPages {
-    title
-    url
-  }
-  asset {
-    ...Asset
-  }
-}

package/graphql/HygraphPages.graphql

@@ -1,7 +0,0 @@
-query HygraphPages($url: String!) {
-  pages(where: { url: $url }) {
-    id
-    __typename
-    ...HygraphPage
-  }
-}

package/graphql/HygraphStaticPaths.graphql

@@ -1,11 +0,0 @@
-query HygraphStaticPaths($pageSize: Int!, $skip: Int, $where: PageWhereInput) {
-  pages(first: $pageSize, skip: $skip, where: $where) {
-    url
-  }
-
-  pagesConnection {
-    aggregate {
-      count
-    }
-  }
-}

package/graphql/PageLink.graphql

@@ -1,10 +0,0 @@
-fragment PageLink on PageLink {
-  title
-  url
-  description {
-    raw
-  }
-  asset {
-    ...Asset
-  }
-}