@sakura-ui/sakura-ui 0.2.0 → 0.3.0

package/packages/markdown/src/components/Markdown.tsx

@@ -0,0 +1,361 @@
+import React, { Children } from 'react'
+import * as production from 'react/jsx-runtime'
+import { remark } from 'remark'
+import { unified } from 'unified'
+import remarkParse from 'remark-parse'
+import remarkGfm from 'remark-gfm'
+import remarkDirective from 'remark-directive'
+import remarkRehype from 'remark-rehype'
+import remarkBreaks from 'remark-breaks'
+import rehypeRaw from 'rehype-raw'
+import rehypeExternalLinks from 'rehype-external-links'
+import rebypeShiftHeding from 'rehype-shift-heading'
+import rehypeReact from 'rehype-react'
+import rehypeSlug from 'rehype-slug'
+import { cx } from '@sakura-ui/helper'
+import {
+  Link,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  Table,
+  Caption,
+  Thead,
+  Tbody,
+  Th,
+  Tr,
+  Td,
+  Ul,
+  Ol,
+  Pre,
+  Code,
+  Faq,
+  Question,
+  Answer,
+  Button,
+  Card,
+  CardImg,
+  CardBody,
+  CardFooter,
+  LinkCard,
+  LinkCardHeader,
+  OverflowContainer
+} from '@sakura-ui/core'
+import {
+  attrPlugin,
+  youtubePlugin,
+  linkButtonPlugin,
+  gridPlugin,
+  cellPlugin,
+  cardPlugin,
+  faqPlugin,
+  headingsPlugin,
+  type HeadingItem
+} from '../plugins'
+
+interface TocProps {
+  items: HeadingItem[]
+}
+
+export const TableOfContents = ({ items }: TocProps) => {
+  return (
+    <>
+      {items.map((item) => {
+        return (
+          <li key={item.id}>
+            <Link href={`#${item.id}`}>{item.value}</Link>
+            {item.children ? (
+              <Ul>{<TableOfContents items={item.children} />}</Ul>
+            ) : null}
+          </li>
+        )
+      })}
+    </>
+  )
+}
+
+interface TableContainerProps extends React.ComponentPropsWithoutRef<'table'> {}
+
+const TableContainer = (props: TableContainerProps) => {
+  const { className, children, ...restProps } = props
+
+  return (
+    <OverflowContainer>
+      <Table className={cx(className)} {...restProps}>
+        {children}
+      </Table>
+    </OverflowContainer>
+  )
+}
+
+interface DataProps {
+  [key: `data-${string}`]: unknown
+}
+
+interface AnchorProps extends React.ComponentPropsWithoutRef<'a'>, DataProps {}
+
+const Anchor = (props: AnchorProps) => {
+  const { children, href, ...restProps } = props
+
+  if (restProps['data-node'] === 'link-button') {
+    return (
+      <Button as="a" variant="secondary" href={href}>
+        {children}
+      </Button>
+    )
+  }
+
+  return (
+    <Link href={href} {...restProps}>
+      {children}
+    </Link>
+  )
+}
+
+interface ArticleProps
+  extends React.ComponentPropsWithoutRef<'article'>,
+    DataProps {}
+
+const Article = (props: ArticleProps) => {
+  const { children, className, ...restProps } = props
+
+  const node = restProps['data-node']
+
+  if (node === 'card') {
+    if (restProps['data-behavior'] === 'link') {
+      const href = restProps['data-href'] as string
+
+      return (
+        <LinkCard href={href} className={cx(className)}>
+          {children}
+        </LinkCard>
+      )
+    }
+    return <Card className={cx(className)}>{children}</Card>
+  }
+
+  return (
+    <article className={className} {...restProps}>
+      {children}
+    </article>
+  )
+}
+
+interface DivProps extends React.ComponentPropsWithoutRef<'div'>, DataProps {}
+
+const Div = (props: DivProps) => {
+  const { children, ...restProps } = props
+
+  const node = restProps['data-node']
+
+  if (node === 'card-title') {
+    return <LinkCardHeader>{children}</LinkCardHeader>
+  }
+  if (node === 'card-description') {
+    return <CardBody>{children}</CardBody>
+  }
+  if (node === 'card-footer') {
+    return <CardFooter>{children}</CardFooter>
+  }
+
+  if (restProps['data-behavior'] === 'list') {
+    // Set the css class configured for cells to the ul tag
+    return (
+      <ul className={restProps.className}>
+        {Children.map(children, (child) => (
+          <li className="sm:grid" key={Math.random()}>
+            {child}
+          </li>
+        ))}
+      </ul>
+    )
+  }
+
+  return <div {...restProps}>{children}</div>
+}
+
+interface ImgProps extends React.ComponentPropsWithoutRef<'img'>, DataProps {}
+
+const Img = (props: ImgProps) => {
+  const { children, className, ...restProps } = props
+
+  if (restProps['data-node'] === 'card-img') {
+    return (
+      <CardImg
+        className={cx('w-full aspect-[352/226]', className)}
+        {...restProps}
+      />
+    )
+  }
+
+  if (restProps['data-node'] === 'cell-img') {
+    return <img className={cx('mb-4', className)} {...restProps} />
+  }
+
+  return <img className={className} {...restProps} />
+}
+
+interface IframeProps extends React.ComponentPropsWithoutRef<'iframe'> {}
+
+const Iframe = (props: IframeProps) => {
+  const { className, children, ...restProps } = props
+
+  const styleMargin = `
+    my-8
+  `
+
+  let style = `
+    aspect-video
+    w-full
+    max-w-[470px]
+  `
+
+  if (props.width || props.height) {
+    style = `
+      aspect-video
+      w-full
+      lg:aspect-auto
+      lg:w-[${props.width}px]
+      lg:h-[${props.height}px]
+    `
+  }
+
+  return (
+    <iframe className={cx(styleMargin, style, className)} {...restProps}>
+      {children}
+    </iframe>
+  )
+}
+
+const sleep = (time: number) =>
+  new Promise((resolve) => setTimeout(resolve, time))
+
+type Props = {
+  tocTitle?: string
+  showToc?: boolean
+  shiftHeding?: number
+  children: string
+}
+
+export const Markdown = ({
+  children,
+  showToc,
+  tocTitle = '目次',
+  shiftHeding = 0
+}: Props) => {
+  const [toc, setToc] = React.useState<HeadingItem[]>([])
+  const [element, setElement] = React.useState(<React.Fragment />)
+
+  const markdown2Headings = React.useCallback((md: string) => {
+    const result: any = remark().use(headingsPlugin).processSync(md)
+
+    const headings: HeadingItem[] = result.data.fm.headings.filter(
+      (obj: HeadingItem) => obj.depth < 3
+    )
+
+    return headings
+  }, [])
+
+  const markdown2ReactElements = React.useCallback(
+    (md: string) => {
+      const rhypeReactOptions = {
+        ...production,
+        components: {
+          a: Anchor,
+          article: Article,
+          button: Button,
+          code: Code,
+          dl: Faq,
+          dt: Question,
+          dd: Answer,
+          h1: H1,
+          h2: H2,
+          h3: H3,
+          h4: H4,
+          h5: H5,
+          h6: H6,
+          iframe: Iframe,
+          img: Img,
+          ul: Ul,
+          ol: Ol,
+          pre: Pre,
+          table: TableContainer,
+          caption: Caption,
+          thead: Thead,
+          tbody: Tbody,
+          th: Th,
+          tr: Tr,
+          td: Td,
+          div: Div
+        }
+      }
+
+      const elem = unified()
+        .use(remarkParse) // md    -> mdast     (Markdown Abstract Syntax Tree)
+        .use(remarkGfm) // mdast -> GFM mdast (GitHub Flavored Markdown Abstract Syntax Tree)
+        .use(remarkDirective) // support for directive syntax
+        .use(remarkBreaks)
+        .use(attrPlugin)
+        .use(youtubePlugin)
+        .use(linkButtonPlugin)
+        .use(cellPlugin)
+        .use(cardPlugin)
+        .use(faqPlugin)
+        .use(gridPlugin)
+        .use(remarkRehype, {
+          allowDangerousHtml: true
+        }) // mdast -> hast      (HTML Abstract Syntax Tree)
+        .use(rehypeRaw) // hast  -> hast
+        .use(rehypeExternalLinks, { target: '_blank' }) // hast  -> hast
+        .use(rebypeShiftHeding, { shift: shiftHeding }) // hast  -> hast
+        .use(rehypeSlug)
+        .use(rehypeReact, rhypeReactOptions as any) // hast  -> React Elements
+        .processSync(md).result
+      return elem
+    },
+    [shiftHeding]
+  )
+
+  React.useEffect(() => {
+    setToc(markdown2Headings(children))
+    setElement(markdown2ReactElements(children))
+  }, [children, markdown2Headings, markdown2ReactElements])
+
+  React.useEffect(() => {
+    // Necessary to make in-page links work.
+    const scrollToHash = async () => {
+      await sleep(500)
+      if (location.hash) {
+        document
+          .getElementById(decodeURI(location.hash.substring(1)))
+          ?.scrollIntoView()
+      }
+    }
+    scrollToHash()
+  }, [])
+
+  const style = `
+    rounded-3xl
+    p-10
+    bg-yellow-50
+  `
+
+  return (
+    <div className="py-8 flex flex-col gap-8">
+      {showToc && (
+        <nav className={style}>
+          <h2 className="mb-4 font-bold text-h-xs-m sm:text-h-xs">
+            {tocTitle}
+          </h2>
+          <Ul>
+            <TableOfContents items={toc} />
+          </Ul>
+        </nav>
+      )}
+      {element}
+    </div>
+  )
+}

package/packages/markdown/src/components/index.ts

@@ -0,0 +1 @@
+export { Markdown } from './Markdown'

package/packages/markdown/src/global.d.ts

@@ -0,0 +1,9 @@
+import type { JSX as Jsx } from 'react/jsx-runtime'
+
+declare global {
+  namespace JSX {
+    type ElementClass = Jsx.ElementClass
+    type Element = Jsx.Element
+    type IntrinsicElements = Jsx.IntrinsicElements
+  }
+}

package/packages/markdown/src/index.ts

@@ -0,0 +1 @@
+export { Markdown } from './components'

package/packages/markdown/src/plugins/attr.ts

@@ -0,0 +1,19 @@
+import type { Root } from 'mdast'
+import { h } from 'hastscript'
+import { visit } from 'unist-util-visit'
+import type { Directives } from 'mdast-util-directive'
+import { isDirective } from './helper'
+
+// This plugin is an example to turn `::node` into divs, passing arbitrary
+// attributes.
+export const attrPlugin = () => {
+  return (tree: Root) => {
+    visit(tree, isDirective, (node: Directives) => {
+      node.data = node.data ?? {}
+      const hast = h(node.name, node.attributes || {})
+
+      node.data.hName = hast.tagName
+      node.data.hProperties = hast.properties
+    })
+  }
+}

package/packages/markdown/src/plugins/card.ts

@@ -0,0 +1,57 @@
+import type { Root } from 'mdast'
+import { h } from 'hastscript'
+import { visit } from 'unist-util-visit'
+import type { Directives } from 'mdast-util-directive'
+import { isDirective } from './helper'
+
+// This plugin is to turn `:::card` into divs, passing arbitrary
+// attributes.
+export const cardPlugin = () => {
+  return (tree: Root) => {
+    visit(tree, isDirective, (node: Directives) => {
+      if (node.type !== 'containerDirective') {
+        return
+      }
+      if (node.name !== 'card') {
+        return
+      }
+
+      node.data = node.data ?? {}
+
+      const tagName = 'article'
+
+      node.data.hName = tagName
+
+      node.attributes = node.attributes ?? {}
+      node.attributes['data-node'] = node.name
+
+      if (node.attributes.as === 'link') {
+        node.attributes.as = undefined
+        node.attributes['data-behavior'] = 'link'
+        node.attributes['data-href'] = node.attributes.href || ''
+      }
+
+      node.data.hProperties = h(tagName, node.attributes).properties
+
+      node.children.forEach((child) => {
+        if (!isDirective(child)) {
+          return
+        }
+
+        child.data = child.data ?? {}
+
+        let tagName = 'div'
+        if (child.name === 'card-img') {
+          tagName = 'img'
+        }
+
+        child.data.hName = tagName
+
+        child.attributes = child.attributes ?? {}
+        child.attributes['data-node'] = child.name
+
+        child.data.hProperties = h(tagName, child.attributes).properties
+      })
+    })
+  }
+}

package/packages/markdown/src/plugins/cell.ts

@@ -0,0 +1,47 @@
+import type { Root } from 'mdast'
+import { h } from 'hastscript'
+import { visit } from 'unist-util-visit'
+import type { Directives } from 'mdast-util-directive'
+import { isContainerDirective, isDirective } from './helper'
+
+// This plugin is to turn `:::cell` into divs, passing arbitrary
+// attributes.
+export const cellPlugin = () => {
+  return (tree: Root) => {
+    visit(tree, isContainerDirective, (node: Directives) => {
+      if (node.name !== 'cell') {
+        return
+      }
+
+      node.data = node.data ?? {}
+      const tagName = 'div'
+
+      node.data.hName = tagName
+
+      node.attributes = node.attributes ?? {}
+      node.attributes['data-node'] = node.name
+
+      node.data.hProperties = h(tagName, node.attributes).properties
+
+      node.children.forEach((child) => {
+        if (!isDirective(child)) {
+          return
+        }
+        if (child.name !== 'cell-img') {
+          return
+        }
+
+        child.data = child.data ?? {}
+
+        const tagName = 'img'
+
+        child.data.hName = tagName
+
+        child.attributes = child.attributes ?? {}
+        child.attributes['data-node'] = child.name
+
+        child.data.hProperties = h(tagName, child.attributes).properties
+      })
+    })
+  }
+}

package/packages/markdown/src/plugins/faq.ts

@@ -0,0 +1,40 @@
+import type { Root } from 'mdast'
+import { h } from 'hastscript'
+import { visit } from 'unist-util-visit'
+import type { Directives } from 'mdast-util-directive'
+import { isContainerDirective, isDirective } from './helper'
+
+// This plugin is to turn `::linkButton` into divs, passing arbitrary
+// attributes.
+export const faqPlugin = () => {
+  return (tree: Root) => {
+    visit(tree, isContainerDirective, (node: Directives) => {
+      if (node.name !== 'faq') {
+        return
+      }
+
+      node.data = node.data ?? {}
+      const tagName = 'dl'
+
+      node.data.hName = tagName
+
+      node.data.hProperties = h(tagName, node.attributes || {}).properties
+
+      node.children.forEach((child) => {
+        if (!isDirective(child)) {
+          return
+        }
+        if (child.name !== 'faq-q' && child.name !== 'faq-a') {
+          return
+        }
+
+        child.data = child.data ?? {}
+        const tagName = child.name === 'faq-q' ? 'dt' : 'dd'
+
+        child.data.hName = tagName
+
+        child.data.hProperties = h(tagName, child.attributes || {}).properties
+      })
+    })
+  }
+}

package/packages/markdown/src/plugins/grid.ts

@@ -0,0 +1,51 @@
+import type { Root } from 'mdast'
+import { h } from 'hastscript'
+import { visit } from 'unist-util-visit'
+import type { Directives } from 'mdast-util-directive'
+import { isContainerDirective } from './helper'
+
+// This plugin is to turn `::linkButton` into divs, passing arbitrary
+// attributes.
+export const gridPlugin = () => {
+  return (tree: Root) => {
+    visit(tree, isContainerDirective, (node: Directives) => {
+      if (!node.name.startsWith('grid-cols-')) {
+        return
+      }
+
+      node.attributes = node.attributes ?? {}
+
+      if (node.attributes.as === 'list') {
+        node.attributes.as = undefined
+        node.attributes['data-behavior'] = 'list'
+      }
+
+      const gridNum: number = Number.parseInt(node.name.split('-').pop() || '1')
+
+      // Tailwind doesn't generate CSS for string interpolation
+      const gridClass: { [key: number]: string } = {
+        1: 'md:grid-cols-1',
+        2: 'md:grid-cols-2',
+        3: 'md:grid-cols-3',
+        4: 'md:grid-cols-4',
+        5: 'md:grid-cols-5',
+        6: 'md:grid-cols-6',
+        7: 'md:grid-cols-6',
+        8: 'md:grid-cols-6',
+        9: 'md:grid-cols-6',
+        10: 'md:grid-cols-6',
+        11: 'md:grid-cols-6',
+        12: 'md:grid-cols-12'
+      }
+
+      node.data = node.data ?? {}
+      const tagName = 'div'
+
+      node.data.hName = tagName
+
+      node.attributes.class = `flex flex-col md:grid ${gridClass[gridNum]} gap-8`
+
+      node.data.hProperties = h(tagName, node.attributes).properties
+    })
+  }
+}

package/packages/markdown/src/plugins/headings.ts

@@ -0,0 +1,35 @@
+import type { Heading, Root } from 'mdast'
+import Slugger from 'github-slugger'
+import { visit } from 'unist-util-visit'
+import { toString as mdastToString } from 'mdast-util-to-string'
+import { treefy } from '@sakura-ui/helper'
+import { isHeading } from './helper'
+
+export type HeadingItem = {
+  id?: string
+  depth: number
+  value?: string
+  children?: Array<HeadingItem>
+}
+
+export const headingsPlugin = () => {
+  return (tree: Root, vFile: any) => {
+    const headings: Array<HeadingItem> = []
+    const slugger = new Slugger()
+
+    const getFlatHeadingsList = (node: Heading) => {
+      const h: HeadingItem = {
+        id: slugger.slug(mdastToString(node)),
+        depth: node.depth,
+        value: mdastToString(node)
+      }
+
+      headings.push(h)
+    }
+
+    visit(tree, isHeading, getFlatHeadingsList)
+
+    if (!vFile.data.fm) vFile.data.fm = {}
+    vFile.data.fm.headings = treefy(headings)
+  }
+}

package/packages/markdown/src/plugins/helper.ts

@@ -0,0 +1,27 @@
+import type { Directives } from 'mdast-util-directive'
+import type { Node } from 'unist'
+import type { Heading } from 'mdast'
+
+export const isDirective = (node: Node): node is Directives => {
+  return (
+    node.type === 'containerDirective' ||
+    node.type === 'leafDirective' ||
+    node.type === 'textDirective'
+  )
+}
+
+export const isContainerDirective = (node: Node): node is Directives => {
+  return node.type === 'containerDirective'
+}
+
+export const isLeafDirective = (node: Node): node is Directives => {
+  return node.type === 'leafDirective'
+}
+
+export const isTextDirective = (node: Node): node is Directives => {
+  return node.type === 'textDirective'
+}
+
+export const isHeading = (node: Node): node is Heading => {
+  return node.type === 'heading'
+}

package/packages/markdown/src/plugins/index.ts

@@ -0,0 +1,8 @@
+export { youtubePlugin } from './youtube'
+export { attrPlugin } from './attr'
+export { linkButtonPlugin } from './linkButton'
+export { gridPlugin } from './grid'
+export { cellPlugin } from './cell'
+export { cardPlugin } from './card'
+export { faqPlugin } from './faq'
+export { headingsPlugin, type HeadingItem } from './headings'

package/packages/markdown/src/plugins/linkButton.ts

@@ -0,0 +1,25 @@
+import type { Root } from 'mdast'
+import { h } from 'hastscript'
+import { visit } from 'unist-util-visit'
+import type { Directives } from 'mdast-util-directive'
+import { isTextDirective } from './helper'
+
+// This plugin is to turn `::linkButton` into divs, passing arbitrary
+// attributes.
+export const linkButtonPlugin = () => {
+  return (tree: Root) => {
+    visit(tree, isTextDirective, (node: Directives) => {
+      if (node.name !== 'link-button') return
+
+      const data = node.data || (node.data = {})
+      const tagName = 'a'
+
+      data.hName = tagName
+
+      node.attributes = node.attributes ?? {}
+      node.attributes['data-node'] = node.name
+
+      data.hProperties = h(tagName, node.attributes).properties
+    })
+  }
+}