@graphcommerce/docs 3.1.4 → 4.1.0

package/components/theme.ts

@@ -1,410 +0,0 @@
-/// <reference types="@graphcommerce/next-ui/types" />
-
-import {
-  responsiveVal,
-  breakpointVal,
-  MuiButtonPill,
-  MuiButtonResponsive,
-  themeBaseDefaults,
-  MuiSnackbar,
-  MuiFabSizes,
-} from '@graphcommerce/next-ui'
-import { createTheme, Theme, alpha, darken, lighten } from '@mui/material'
-import { Components, PaletteOptions } from '@mui/material/styles'
-
-const main = '#85FFFD'
-const dark = '#CEFF99'
-
-const lightPalette: PaletteOptions = {
-  mode: 'light',
-  primary: {
-    main: darken(main, 0.175),
-    contrastText: '#FFFFFF',
-    dark: darken(dark, 0.175),
-  },
-  secondary: {
-    main: '#006BFF',
-    light: '#D1E4FF',
-    contrastText: '#ffffff',
-  },
-  background: {
-    default: '#ffffff',
-    paper: '#ffffff',
-    image: '#ffffff',
-  },
-  divider: '#00000015',
-  success: {
-    main: '#01D26A',
-  },
-  action: {
-    hoverOpacity: 0.16,
-  },
-  text: {
-    primary: '#000000',
-    secondary: 'hsl(229, 16%, 71%)',
-    disabled: '#00000030',
-  },
-}
-
-const darkPalette: PaletteOptions = {
-  mode: 'dark',
-  primary: {
-    main,
-    contrastText: '#ffffff',
-    dark,
-  },
-  secondary: {
-    main: '#62C7B0',
-    light: '#62C7B0',
-    contrastText: '#ffffff',
-  },
-  background: {
-    default: '#001727',
-    paper: lighten('#001727', 0.03),
-    image: '#F8F8F8',
-  },
-  divider: '#ffffff30',
-  success: {
-    main: '#01D26A',
-  },
-  action: {
-    hoverOpacity: 0.16,
-  },
-  text: {
-    primary: '#ffffff',
-    secondary: '#ffffff80',
-    disabled: '#ffffff30',
-  },
-}
-
-const fontSize = (from: number, to: number) =>
-  breakpointVal('fontSize', from, to, themeBaseDefaults.breakpoints.values)
-
-// Create a theme instance.
-const createThemeWithPalette = (palette: PaletteOptions) =>
-  createTheme({
-    palette,
-    ...themeBaseDefaults,
-    shape: { borderRadius: 4 },
-    typography: {
-      fontFamily:
-        '-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji',
-      // @see docs typography.md
-      h1: {
-        ...fontSize(36, 44),
-        fontWeight: 550,
-        lineHeight: 1.22,
-        fontVariationSettings: palette.mode === 'dark' ? "'wght' 550" : "'wght' 610",
-      },
-      h2: {
-        ...fontSize(24, 32),
-        fontWeight: 530,
-        lineHeight: 1.6,
-        fontVariationSettings: palette.mode === 'dark' ? "'wght' 480" : "'wght' 590",
-      },
-      h3: {
-        ...fontSize(18, 22),
-        fontWeight: 500,
-        lineHeight: 1.55,
-        fontVariationSettings: palette.mode === 'dark' ? "'wght' 500" : "'wght' 560",
-      },
-      h4: {
-        ...fontSize(18, 23),
-        fontWeight: 600,
-        lineHeight: 1.6,
-        fontVariationSettings: "'wght' 600",
-      },
-      h5: {
-        ...fontSize(18, 21),
-        fontWeight: 480,
-        lineHeight: 1.6,
-        fontVariationSettings: "'wght' 510",
-      },
-      h6: {
-        ...fontSize(16, 19),
-        fontWeight: 460,
-        lineHeight: 1.8,
-        fontVariationSettings: "'wght' 460",
-      },
-      subtitle1: {
-        ...fontSize(16, 19),
-        fontWeight: 450,
-        fontVariationSettings: "'wght' 460",
-        lineHeight: 1.7,
-      },
-      fontWeightBold: 600,
-      body1: {
-        ...fontSize(15, 18),
-        fontWeight: 370,
-        fontVariationSettings: palette.mode === 'dark' ? "'wght' 450" : "'wght' 370",
-        lineHeight: 1.7,
-      },
-      subtitle2: {
-        ...fontSize(14, 16),
-        fontWeight: 500,
-        fontVariationSettings: "'wght' 450",
-        lineHeight: 1.7,
-      },
-      body2: {
-        ...fontSize(13, 15),
-        lineHeight: 1.7,
-      },
-      caption: {
-        // https://web.dev/font-size/#how-the-lighthouse-font-size-audit-fails
-        ...fontSize(12, 13),
-      },
-      button: {},
-      overline: {
-        // https://web.dev/font-size/#how-the-lighthouse-font-size-audit-fails
-        ...fontSize(12, 14),
-        fontWeight: 500,
-        letterSpacing: 1,
-        lineHeight: 1.2,
-        textTransform: 'uppercase',
-      },
-    },
-    spacings: {
-      xxs: responsiveVal(10, 16),
-      xs: responsiveVal(12, 20),
-      sm: responsiveVal(14, 30),
-      md: responsiveVal(16, 50),
-      lg: responsiveVal(24, 80),
-      xl: responsiveVal(40, 100),
-      xxl: responsiveVal(80, 160),
-    },
-    page: {
-      horizontal: responsiveVal(10, 30),
-      vertical: responsiveVal(10, 30),
-    },
-    appShell: {
-      headerHeightSm: '46px',
-      headerHeightMd: '80px',
-      appBarHeightMd: '80px',
-      appBarInnerHeightMd: '46px',
-    },
-  })
-
-// todo: move most of the styles to the graphcommerce library while still allowing for extensibility.
-const createOverrides = (theme: Theme): Components => ({
-  MuiCssBaseline: {
-    styleOverrides: {
-      body: {
-        overflowY: 'scroll',
-      },
-      '::selection': { background: alpha(theme.palette.primary.main, 0.6) },
-      '::-moz-selection': { background: alpha(theme.palette.primary.main, 0.6) },
-      '#__next': {
-        position: 'relative',
-      },
-      img: {
-        filter: 'brightness(1.03)',
-        willChange: 'filter',
-      },
-    },
-  },
-
-  MuiContainer: {
-    variants: [
-      {
-        props: { disableGutters: false },
-        style: {
-          paddingLeft: theme.page.horizontal,
-          paddingRight: theme.page.horizontal,
-          [theme.breakpoints.up('sm')]: {
-            paddingLeft: theme.page.horizontal,
-            paddingRight: theme.page.horizontal,
-          },
-        },
-      },
-    ],
-  },
-
-  MuiInputBase: {
-    styleOverrides: {
-      root: {
-        fontSize: '16px', // https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/
-      },
-    },
-  },
-
-  MuiButton: {
-    defaultProps: { color: 'inherit' },
-    variants: [
-      ...MuiButtonResponsive,
-      ...MuiButtonPill,
-      {
-        props: { variant: 'contained', color: 'inherit' },
-        style: { backgroundColor: theme.palette.background.paper },
-      },
-      {
-        props: { variant: 'outlined' },
-        style: {
-          borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
-        },
-      },
-      {
-        props: { variant: 'text' },
-        style: { borderRadius: '99em' },
-      },
-    ],
-  },
-
-  MuiFab: {
-    styleOverrides: {
-      root: {
-        backgroundColor: theme.palette.background.paper,
-        '&:hover': {
-          backgroundColor: theme.palette.background.paper,
-        },
-        color: theme.palette.text.primary,
-      },
-      colorInherit: {
-        backgroundColor: 'inherit',
-        '&:hover, &:focus': {
-          backgroundColor: 'inherit',
-        },
-        boxShadow: 'none',
-      },
-      primary: {
-        color: theme.palette.text.primary,
-      },
-      secondary: {
-        color: theme.palette.text.primary,
-      },
-      extended: {
-        fontWeight: 400,
-        textTransform: 'none',
-      },
-    },
-    variants: [...MuiFabSizes],
-  },
-
-  MuiTextField: {
-    styleOverrides: {
-      root: {
-        '& label.Mui-focused': {
-          color: theme.palette.secondary.main,
-        },
-        '& .MuiOutlinedInput-root': {
-          borderRadius: responsiveVal(theme.shape.borderRadius * 1.5, theme.shape.borderRadius * 2),
-          '& fieldset': {
-            borderColor: theme.palette.divider,
-          },
-          '&.Mui-focused fieldset': {
-            borderColor: theme.palette.divider,
-            borderWidth: 1,
-          },
-        },
-      },
-    },
-  },
-
-  MuiListItemIcon: {
-    styleOverrides: {
-      root: {
-        color: theme.palette.text.primary,
-      },
-    },
-  },
-
-  MuiChip: {
-    styleOverrides: {
-      root: {
-        boxShadow: 'unset !important',
-        borderRadius: '99em',
-        height: responsiveVal(32, 40),
-        paddingLeft: responsiveVal(4, 8),
-        paddingRight: responsiveVal(4, 8),
-        ...theme.typography.body2,
-      },
-      sizeSmall: {
-        height: responsiveVal(26, 30),
-        paddingLeft: responsiveVal(3, 6),
-        paddingRight: responsiveVal(3, 6),
-        ...theme.typography.caption,
-      },
-      outlined: {
-        borderColor: theme.palette.divider,
-      },
-      label: {
-        paddingLeft: responsiveVal(6, 10),
-        paddingRight: responsiveVal(6, 10),
-      },
-      labelSmall: {
-        paddingLeft: responsiveVal(6, 8),
-        paddingRight: responsiveVal(6, 8),
-      },
-      deleteIcon: {
-        color: theme.palette.text.primary,
-        // display: 'flex',
-      },
-      deleteIconOutlinedColorPrimary: {
-        // color: theme.palette.primary.main,
-      },
-    },
-  },
-
-  MuiCheckbox: {
-    styleOverrides: {
-      colorPrimary: {
-        color: theme.palette.text.disabled,
-        '&.Mui-checked': {
-          color: theme.palette.primary.main,
-        },
-      },
-      colorSecondary: {
-        color: theme.palette.text.disabled,
-        '&.Mui-checked': {
-          color: theme.palette.secondary.main,
-        },
-      },
-    },
-  },
-
-  MuiSwitch: {
-    styleOverrides: {
-      track: {
-        '.Mui-colorPrimary + &': {
-          backgroundColor: theme.palette.primary,
-          borderRadius: '30px',
-        },
-        '.Mui-checked.Mui-colorPrimary + &': {
-          opacity: 1,
-          backgroundColor: theme.palette.primary,
-          borderRadius: '30px',
-        },
-      },
-      thumb: {
-        backgroundColor: '#fff',
-      },
-    },
-  },
-
-  MuiSnackbar: { variants: MuiSnackbar },
-
-  MuiAvatar: {
-    styleOverrides: {
-      colorDefault: {
-        backgroundColor: theme.palette.text.disabled,
-      },
-    },
-  },
-
-  MuiSlider: {
-    styleOverrides: {
-      rail: {
-        color: theme.palette.text.disabled,
-      },
-      thumb: {
-        background: theme.palette.background.default,
-        boxShadow: theme.shadows[6],
-      },
-    },
-  },
-})
-
-export const lightTheme = createThemeWithPalette(lightPalette)
-lightTheme.components = createOverrides(lightTheme)
-
-export const darkTheme = createThemeWithPalette(darkPalette)
-darkTheme.components = createOverrides(darkTheme)

package/lib/DocumentIndexer.ts

@@ -1,59 +0,0 @@
-/* eslint-disable class-methods-use-this */
-import path from 'path'
-import { remark } from 'remark'
-import remarkGfm from 'remark-gfm'
-import strip from 'strip-markdown'
-import { toVFile as vfile } from 'to-vfile'
-import { matter } from 'vfile-matter'
-import { FileNode, findByUrl, getDirectoryPaths, getDirectoryTree } from './files'
-import { indexName } from './instantSearch'
-import { BaseDocument, SearchIndexer } from './typesense/SearchIndexer'
-
-export type DocumentationDocument = BaseDocument & {
-  url: string
-  content: string
-  name: string
-}
-
-export class DocumentIndexer extends SearchIndexer<DocumentationDocument> {
-  #root: string
-
-  constructor(root: string) {
-    super({
-      name: indexName,
-      fields: {
-        id: { type: 'string' },
-        name: { type: 'string' },
-        url: { type: 'string' },
-        content: { type: 'string' },
-      },
-    })
-    this.#root = root
-  }
-
-  // load a single document
-  async #loadDocument(node?: FileNode | false): Promise<DocumentationDocument> {
-    if (!node) throw Error('Node not found')
-
-    const file = path.join(process.cwd(), this.#root, node.path)
-    const res = matter(await vfile.read(file), { strip: true })
-    const content = (await remark().use(strip).process(res)).value.toString()
-
-    if (!content) throw Error('Can not load file')
-
-    const { name, url } = node
-    return { id: node.path, content, url, name: node.matter.menu ?? name }
-  }
-
-  async *all() {
-    const paths = await getDirectoryPaths(this.#root)
-    const menuData = await getDirectoryTree(this.#root)
-    if (!menuData) return false
-
-    for (const p of paths) {
-      yield this.#loadDocument(findByUrl(p.split('/'), menuData))
-    }
-
-    return true
-  }
-}

package/lib/files.ts

@@ -1,168 +0,0 @@
-import fs from 'fs'
-import path from 'path'
-import { toVFile as vfile } from 'to-vfile'
-import { matter } from 'vfile-matter'
-
-export type MatterFields = {
-  menu?: string
-  order?: string
-  metaTitle?: string
-  metaDescription?: string
-}
-
-type BaseFields = {
-  type: 'folder' | 'file'
-  path: string
-  name: string
-  childNodes?: FileOrFolderNode[]
-  matter?: MatterFields
-}
-
-export type FolderNode = BaseFields & { type?: 'folder' }
-export type FileNode = BaseFields & { type?: 'file'; url: string; matter: MatterFields }
-
-export type FileOrFolderNode = FolderNode | FileNode
-
-function toUrl(p: string) {
-  let url = p.replace('.mdx', '')
-  url = url.replace('.md', '')
-  url = url.endsWith('/') ? url.slice(0, -1) : url
-  return url
-}
-
-async function dirTree(dir: string, root: string): Promise<FileOrFolderNode> {
-  const stats = await fs.promises.lstat(dir)
-
-  let name = path.basename(dir)
-  name = name.replace('.mdx', '')
-  name = name.replace('.md', '')
-  name = name.replace(/-/g, ' ').replace(/^./, (x) => x.toUpperCase())
-
-  const filePath = path.relative(root, dir)
-
-  const info: Partial<FileOrFolderNode> = { path: filePath, name }
-
-  if (stats.isDirectory()) {
-    info.type = 'folder'
-    info.childNodes = await Promise.all(
-      (await fs.promises.readdir(dir)).map((child) => dirTree(`${dir}/${child}`, root)),
-    )
-  } else {
-    info.type = 'file'
-  }
-
-  if (info.type === 'file') {
-    info.url = toUrl(path.relative(root, dir))
-    info.matter = matter(await vfile.read(dir)).data.matter as Record<string, string>
-  }
-
-  return info as FileOrFolderNode
-}
-
-// Replace the path of the parent with the path of the child having index.mdx as name and remove from children.
-// Do this recursively for each child.
-// Remove type from tree
-function hoistIndex(tree: FileOrFolderNode): FileOrFolderNode {
-  let newTree: FileOrFolderNode = tree
-
-  if (newTree.type === 'folder') {
-    const index = newTree.childNodes?.find(
-      (child) =>
-        child.path.endsWith('readme.mdx') ||
-        (child.path.endsWith('readme.md') && child.type === 'file'),
-    ) as FileNode | undefined
-
-    if (index) {
-      newTree = { ...index, name: tree.name, url: index.url.slice(0, -7) }
-      newTree.childNodes = tree.childNodes?.filter((child) => child !== index)
-
-      const order = index.matter?.order?.split(',').map((x) => x.trim())
-      if (order) {
-        newTree.childNodes = newTree.childNodes?.sort((a, b) => {
-          const aPath = toUrl(a.path.split('/').pop() as string)
-          const bPath = toUrl(b.path.split('/').pop() as string)
-          return order.indexOf(aPath) === -1 ? 1 : order.indexOf(aPath) - order.indexOf(bPath)
-        })
-      }
-
-      newTree.childNodes = newTree.childNodes?.map((child) => hoistIndex(child))
-    }
-  }
-  return newTree
-}
-
-export async function getDirectoryTree(dir: string): Promise<false | FileNode> {
-  const absDir = path.join(process.cwd(), dir)
-
-  const tree = await dirTree(absDir, absDir)
-
-  return hoistIndex(tree) as FileNode
-}
-
-export async function getDirectoryPaths(dir: string) {
-  const menuData = await getDirectoryTree(dir)
-
-  const paths: string[] = []
-  const addPathsFromTree = (tree: FileOrFolderNode) => {
-    if (tree.type === 'file') paths.push(tree.url)
-
-    if (tree.childNodes?.length) {
-      tree.childNodes.forEach((child) => addPathsFromTree(child))
-    }
-  }
-  if (menuData) addPathsFromTree(menuData)
-
-  return paths
-}
-
-/**
- * Recursively traverse the tree and return the aggregated path of of each node.
- *
- * Each URL segment should reference a path (except for the readme.md/readme.mdx file)
- */
-export function urlToPath(url: string[], node: FileOrFolderNode): string | false {
-  if (node.childNodes?.length) {
-    const child = node.childNodes?.reduce<string | false>((prev, curr) => {
-      if (prev) return prev
-      const childPath = urlToPath(url, curr)
-      return childPath ?? prev
-    }, false)
-
-    if (child) return child
-  }
-
-  if (node.type === 'file' && node.url === url.join('/')) return node.path
-
-  return false
-}
-
-/** Get the contens of the requested file. */
-export function getFileContents(dir: string, filePath: string) {
-  const absDir = path.join(process.cwd(), dir, filePath)
-  try {
-    return fs.promises.readFile(absDir, 'utf8')
-  } catch (e) {
-    return false
-  }
-}
-
-/**
- * Recursively traverse the tree and return the aggregated path of of each node.
- *
- * Each URL segment should reference a path (except for the readme.md/readme.mdx file)
- */
-export function findByUrl(url: string[], node: FileOrFolderNode): FileNode | false {
-  if (node.childNodes?.length) {
-    const child = node.childNodes?.reduce<FileNode | false>((prev, curr) => {
-      if (prev) return prev
-      const childPath = findByUrl(url, curr)
-      return childPath ?? prev
-    }, false)
-
-    if (child) return child
-  }
-
-  if (node.type === 'file' && node.url === url.join('/')) return node
-
-  return false
-}

package/lib/instantSearch.ts

@@ -1,26 +0,0 @@
-import type { HitsRenderState } from 'instantsearch.js/es/connectors/hits/connectHits'
-import { useHits as useHitsBase } from 'react-instantsearch-hooks'
-import { SetReturnType } from 'type-fest'
-import type { DocumentationDocument } from './DocumentIndexer'
-import { createInstantSearchProps } from './typesense/createInstantSearchProps'
-
-export const indexName = 'documents'
-
-export const instantSearchProps = createInstantSearchProps<DocumentationDocument>(indexName, {
-  query_by: {
-    name: 2,
-    content: 1,
-  },
-  numTypos: '1',
-  typoTokensThreshold: 1,
-  highlight_fields: 'content',
-  highlight_full_fields: 'name',
-  include_fields: 'name,url',
-  // highlight_affix_num_tokens: ,
-})
-
-const useHits: SetReturnType<typeof useHitsBase, HitsRenderState<DocumentationDocument>> = (
-  ...params
-) => useHitsBase(...params) as HitsRenderState<DocumentationDocument>
-
-export { useHits }

package/lib/typesense/IndexerHandler.ts

@@ -1,47 +0,0 @@
-import { Client } from 'typesense/lib/Typesense'
-import { ConfigurationOptions } from 'typesense/lib/Typesense/Configuration'
-import { ObjectNotFound } from 'typesense/lib/Typesense/Errors'
-import { BaseDocument, SearchIndexer } from './SearchIndexer'
-import { batchIterable } from './batchInterable'
-
-export class IndexerHandler {
-  client: Client
-
-  constructor(
-    clientOptions: ConfigurationOptions,
-    public indexers: SearchIndexer<BaseDocument>[],
-    private batchSize: number = 1000,
-  ) {
-    this.client = new Client(clientOptions)
-  }
-
-  async all() {
-    let count = 0
-    for await (const indexer of this.indexers) {
-      const resCount = await this.#reindex(indexer)
-      count += resCount
-    }
-    return count
-  }
-
-  /** @throws {TypesenseError} */
-  async #reindex(indexer: SearchIndexer<BaseDocument>) {
-    const { name } = indexer.schema
-
-    try {
-      await this.client.collections(name).retrieve()
-      await this.client.collections(name).delete()
-    } catch (e) {
-      if (!(e instanceof ObjectNotFound)) throw e
-    }
-    await this.client.collections().create(indexer.schema)
-
-    let count = 0
-    for await (const documents of batchIterable(indexer.all(), this.batchSize)) {
-      const result = await this.client.collections(name).documents().import(documents)
-      count += result.length
-    }
-
-    return count
-  }
-}