@startupjs-ui/mdx 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,19 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.1.3](https://github.com/startupjs/startupjs-ui/compare/v0.1.2...v0.1.3) (2025-12-29)
+
+**Note:** Version bump only for package @startupjs-ui/mdx
+
+
+
+
+
+## [0.1.2](https://github.com/startupjs/startupjs-ui/compare/v0.1.1...v0.1.2) (2025-12-29)
+
+
+### Features
+
+* add mdx and docs packages. Refactor docs to get rid of any @startupjs/ui usage and use startupjs-ui instead ([703c926](https://github.com/startupjs/startupjs-ui/commit/703c92636efb0421ffd11783f692fc892b74018f))

package/README.md

@@ -0,0 +1,35 @@
+# MDX components
+
+> Components to use during .mdx compilation
+
+## Installation
+
+```sh
+yarn @startupjs-ui/mdx @react-native-clipboard/clipboard
+```
+
+## Usage
+
+This will be used automatically by `@startupjs/bundler` to compile `.mdx` and `.md` files.
+
+## Custom components
+
+You can override the default MDX components by setting the custom ones
+using the `overrideMDXComponents` function. Do it once as early as possible
+(for example in the topmost `_layout` file of your Expo project):
+
+```jsx
+// _layout.js
+import { overrideMDXComponents } from '@startupjs/mdx'
+
+overrideMDXComponents({
+  h1: ({ children }) => <Text style={{ fontSize: 40 }}>{children}</Text>,
+  p: ({ children }) => <Text style={{ fontSize: 14 }}>{children}</Text>
+})
+```
+
+For the full list of components check [here](https://mdxjs.com/table-of-components)
+
+## License
+
+MIT

package/client/Code/index.js

@@ -0,0 +1,144 @@
+import React, { useMemo, memo } from 'react'
+import { pug } from 'startupjs'
+import Div from '@startupjs-ui/div'
+import Span from '@startupjs-ui/span'
+import ScrollView from '@startupjs-ui/scroll-view'
+import refractor from 'refractor/core.js'
+// Supported languages
+import languageJsx from 'refractor/lang/jsx.js'
+import languageStyl from 'refractor/lang/stylus.js'
+import languagePug from 'refractor/lang/pug.js'
+import languageMarkdown from 'refractor/lang/markdown.js'
+import languageJson from 'refractor/lang/json.js'
+import languageBash from 'refractor/lang/bash.js'
+import './index.styl'
+
+const SUB_LANGUAGE_REGEX = /(^|\W)(pug|styl|css)(`\s*\n)([^`]*\s*\n)(`)/
+
+// Register all supported languages
+refractor.register(languageJsx)
+refractor.register(languageStyl)
+refractor.register(languagePug)
+refractor.register(languageMarkdown)
+refractor.register(languageJson)
+refractor.register(languageBash)
+
+// Register aliases
+refractor.alias({ stylus: ['styl'] })
+refractor.alias({ bash: ['sh'] })
+
+// This method mutates highlighted array to remove the last template
+// backtick symbol and also returns it
+function modifyAndGetLastBacktick (highlighted) {
+  if (!(highlighted && highlighted.length)) return []
+  const lastLine = highlighted[highlighted.length - 1]
+  const lastSymbol = lastLine.children[lastLine.children.length - 1]
+
+  // check close backtick
+  if (lastSymbol?.value !== '`') {
+    throw new Error(`
+      [@startupjs/mdx] Last symbol is not a backtick.
+      This should never happen.
+      Maybe refractor got updated or <Code> component is broken.
+    `)
+  }
+
+  // remove last line with backtick
+  highlighted.pop()
+
+  return {
+    type: 'element',
+    tagName: 'span',
+    properties: { className: ['line'] },
+    children: [{ type: 'text', value: '`' }]
+  }
+}
+
+function getLines (code, language) {
+  const lines = code.split('\n')
+  if (lines[lines.length - 1] === '') lines.pop()
+
+  return lines.reduce((acc, line) => {
+    const children = refractor.highlight(line, language)
+    const className = ['line']
+    const node = {
+      type: 'element',
+      tagName: 'span',
+      properties: { className },
+      children
+    }
+
+    acc.push(node)
+    return acc
+  }, [])
+}
+
+function highlight (code, language) {
+  if (language === 'jsx') {
+    const match = code.match(SUB_LANGUAGE_REGEX)
+    if (match) {
+      const splitIndex = match.index + match[0].length
+      const start = code.slice(0, splitIndex)
+      const next = code.slice(splitIndex + 1)
+
+      const jsx = start.replace(SUB_LANGUAGE_REGEX, '$1$2$3$5')
+      const highlightedJsx = getLines(jsx, 'jsx')
+
+      const subLanguageName = match[2]
+      const bodySubLanguage = match[4]
+      const closingBacktick = modifyAndGetLastBacktick(highlightedJsx)
+
+      const merge = [
+        ...highlightedJsx, // without trailing ` sign
+        ...highlight(bodySubLanguage, subLanguageName),
+        closingBacktick // the trailing ` sign
+      ]
+
+      if (next) merge.push(...highlight(next, 'jsx'))
+      return merge
+    }
+  }
+  return getLines(code, language)
+}
+
+export default memo(function Code ({
+  children = '',
+  language = 'txt',
+  style,
+  textStyle,
+  ...props
+}) {
+  if (typeof children !== 'string') throw Error('[Code] Code must be a string')
+  const code = useMemo(() => {
+    if (!language) {
+      return pug`
+        Span= children
+      `
+    }
+
+    return renderer(highlight(children, language), textStyle)
+  }, [children, language]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  return pug`
+    ScrollView.root(
+      ...props
+      horizontal
+      style=style
+    )
+      Div= code
+  `
+})
+
+function renderer (tree, style) {
+  if (!(tree && Array.isArray(tree))) return null
+  return tree.map((child, index) => {
+    if (child.type === 'text') {
+      return child.value
+    } else {
+      const className = (child.properties && child.properties.className) || []
+      return pug`
+        Span(key=index style=style styleName=className)= renderer(child.children)
+      `
+    }
+  })
+}

package/client/Code/index.styl

@@ -0,0 +1,96 @@
+$bg = var(--color-bg-main)
+
+monospace()
+  font-family monospace
+  +ios()
+    font-family Menlo-Regular
+
+.root
+  padding 2u
+  background-color $bg
+  border-radius 1u
+
+.line
+  min-height 2.5u
+  monospace()
+  +web()
+    white-space pre
+
+.token
+  monospace()
+
+// default Prism theme
+// ref: https://github.com/PrismJS/prism/blob/master/themes/prism.css
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: slategray;
+}
+
+.token.punctuation {
+	color: #999;
+}
+
+.token.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+	color: #9a6e3a;
+	/* This background color was intended by the author of this theme. */
+	background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+	color: #07a;
+}
+
+.token.function,
+.token.class-name {
+	color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+	color: #e90;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}

package/client/mdxComponents/index.js

@@ -0,0 +1,320 @@
+import React, { useState, useContext } from 'react'
+import { Image, ScrollView, Platform } from 'react-native'
+import Clipboard from '@react-native-clipboard/clipboard'
+import { pug, observer, $, BASE_URL } from 'startupjs'
+import Alert from '@startupjs-ui/alert'
+import Div from '@startupjs-ui/div'
+import Span from '@startupjs-ui/span'
+import Divider from '@startupjs-ui/divider'
+import Br from '@startupjs-ui/br'
+import Link from '@startupjs-ui/link'
+import Icon from '@startupjs-ui/icon'
+import { Table, Tbody, Td, Th, Thead, Tr } from '@startupjs-ui/table'
+import Collapse from '@startupjs-ui/collapse'
+// import { Anchor, scrollTo } from '@startupjs/scrollable-anchors'
+// import { faLink } from '@fortawesome/free-solid-svg-icons/faLink'
+import { faCode } from '@fortawesome/free-solid-svg-icons/faCode'
+import { faCopy } from '@fortawesome/free-solid-svg-icons/faCopy'
+// import _kebabCase from 'lodash/kebabCase'
+// import _get from 'lodash/get'
+import './index.styl'
+import Code from '../Code'
+
+// const RowComponent = props => pug`Div(...props row)`
+const ALPHABET = 'abcdefghigklmnopqrstuvwxyz'
+const ListLevelContext = React.createContext()
+const BlockquoteContext = React.createContext()
+const PreContext = React.createContext()
+
+function getOrderedListMark (index, level) {
+  switch (level) {
+    case 1:
+      return ALPHABET.charAt(index % ALPHABET.length) + ')'
+    default:
+      return '' + (index + 1) + '.'
+  }
+}
+
+function P (props) {
+  return pug`
+    Span.p(style=props.style ...props)
+  `
+}
+
+// function getTextChildren (children) {
+//   const nestedChildren = _get(children, 'props.children')
+//   if (nestedChildren) {
+//     return getTextChildren(nestedChildren)
+//   }
+
+//   return children
+// }
+
+// function MDXAnchor ({
+//   children,
+//   style,
+//   anchor,
+//   size
+// }) {
+//   const [hover, setHover] = useState()
+//   const anchorKebab = _kebabCase(anchor)
+
+//   return pug`
+//     Anchor.anchor(
+//       style=style
+//       id=anchorKebab
+//       Component=RowComponent
+//       vAlign='center'
+//       onMouseEnter=() => setHover(true)
+//       onMouseLeave=() => setHover()
+//     )
+//       = children
+//       Link.anchor-link(
+//         styleName={ hover }
+//         to='#' + anchorKebab
+//       )
+//         Icon(icon=faLink size=size)
+//   `
+// }
+
+export default {
+  wrapper: ({ children }) => pug`
+    Div= children
+  `,
+  // TODO: MDXAnchor(anchor=getTextChildren(children) size='xl')
+  h1: ({ children }) => pug`
+    Span(h2 bold)
+      = children
+  `,
+  // TODO: MDXAnchor.h2(anchor=getTextChildren(children))
+  h2: ({ children }) => pug`
+    Span.h2.h2-text(h5)= children
+    Div.divider
+  `,
+  // TODO: MDXAnchor.h3(anchor=getTextChildren(children) size='s')
+  h3: ({ children }) => pug`
+    Span.h3.h3-text(h6 bold)= children
+  `,
+  h4: P,
+  h5: P,
+  h6: P,
+  p: ({ children }) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const inBlockquote = useContext(BlockquoteContext)
+
+    if (inBlockquote) {
+      return pug`
+        Span.blockquoteP= children
+      `
+    }
+    return pug`
+      P= children
+    `
+  },
+  strong: ({ children }) => pug`
+    P(bold)= children
+  `,
+  em: ({ children }) => pug`
+    P(italic)= children
+  `,
+  hr: ({ children }) => pug`
+    Divider(size='l')
+  `,
+  center: ({ children }) => {
+    return pug`
+      P.center= children
+    `
+  },
+  br: Br,
+  thematicBreak: P,
+  table: ({ children }) => {
+    return pug`
+      Table(style={ marginTop: 16 })= children
+    `
+  },
+  thead: Thead,
+  tbody: Tbody,
+  tr: Tr,
+  td: Td,
+  th: Th,
+  delete: P,
+  a: ({ children, href }) => {
+    // function onPress (event) {
+    //   const { url, hash } = $root.get('$render')
+    //   const [_url, _hash] = href.split('#')
+    //   if (url === _url && hash === `#${_hash}`) {
+    //     event.preventDefault()
+    //     // scrollTo({ anchorId: _hash })
+    //   }
+    // }
+
+    // TODO: handle Anchor click with onPress
+    return pug`
+      Link.link(
+        to=href
+        size='l'
+        color='primary'
+      )= children
+    `
+  },
+  ul: ({ children }) => children,
+  ol: ({ children }) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const currentLevel = useContext(ListLevelContext)
+    const nextLevel = currentLevel == null ? 0 : currentLevel + 1
+    const filteredChildren = React.Children
+      .toArray(children)
+      .filter(child => child !== '\n')
+      .map((child, index) => React.cloneElement(child, { index }))
+    return pug`
+      ListLevelContext.Provider(value=nextLevel)
+        Div
+          = filteredChildren
+    `
+  },
+  li: ({ children, index }) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const level = useContext(ListLevelContext)
+    const listIndex = index == null ? '•' : getOrderedListMark(index, level)
+    let hasTextChild = false
+    children = React.Children
+      .toArray(children)
+      .filter(child => child !== '\n')
+      .map(child => {
+        if (typeof child === 'string') {
+          hasTextChild = true
+        }
+        return child
+      })
+    return pug`
+      Div(row)
+        Span.listIndex= listIndex
+        Div.listContent
+          if hasTextChild
+            P(size='l')= children
+          else
+            = children
+    `
+  },
+  blockquote: ({ children }) => {
+    const filteredChildren = React.Children
+      .toArray(children)
+      .filter(child => child !== '\n')
+
+    return pug`
+      BlockquoteContext.Provider(value=true)
+        Alert.alert= filteredChildren
+    `
+  },
+  img: ({ src }) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [style, setStyle] = useState({})
+    const isUrl = /^(http|https):\/\//.test(src)
+    const isLocalUrl = /^\//.test(src)
+
+    if (isLocalUrl) {
+      src = BASE_URL + src
+    } else if (!isUrl) {
+      console.warn('[@startupjs/mdx] Need to provide the url for the image')
+      return null
+    }
+
+    function onLayout (e) {
+      const maxWidth = e.nativeEvent.layout.width
+      Image.getSize(src, (width, height) => {
+        const coefficient = maxWidth / width
+        setStyle({
+          width: Math.min(width, maxWidth),
+          height: coefficient < 1 ? Math.ceil(height * coefficient) : height
+        })
+      },
+      error => console.warn(`[@startupjs/mdx], ${error}`)
+      )
+    }
+    return pug`
+      Div.img(onLayout=onLayout)
+        Image(style=style source={ uri: src })
+    `
+  },
+  section: ({ children, noscroll }) => {
+    const Wrapper = noscroll
+      ? ({ children }) => pug`
+        Div.example.padding= children
+      `
+      : ({ children }) => pug`
+        ScrollView.example(
+          contentContainerStyleName=['exampleContent', 'padding']
+          horizontal
+        )= children
+      `
+
+    return pug`
+      Wrapper= children
+    `
+  },
+  pre: ({ children }) => {
+    return pug`
+      PreContext.Provider(value=true)
+        = children
+    `
+  },
+  code: observer(({ children, className, ...props }) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const isBlockCode = useContext(PreContext)
+
+    if (!isBlockCode) {
+      return pug`
+        Span.inlineCodeWrapper
+          Span.inlineCodeSpacer &#160;
+          Span.inlineCode(style={
+            fontFamily: Platform.OS === 'ios' ? 'Menlo-Regular' : 'monospace'
+          })= children
+          Span.inlineCodeSpacer &#160;
+      `
+    }
+
+    const language = (className || 'language-txt').replace(/language-/, '')
+    const [open, setOpen] = useState(false)
+    const $copyText = $('Copy code')
+
+    function copyHandler () {
+      Clipboard.setString(children)
+      $copyText.set('Copied')
+    }
+
+    function onMouseEnter () {
+      // we need to reutrn default text if it was copied
+      $copyText.set('Copy code')
+    }
+
+    let example
+
+    if (typeof children === 'string' && children.includes('[HACK EXAMPLE CODE]')) {
+      children = children.replace('[HACK EXAMPLE CODE]', '')
+      example = true
+    }
+
+    return pug`
+      Div.code(styleName={ 'code-example': example })
+        if example
+          Collapse.code-collapse(open=open variant='pure')
+            Collapse.Header.code-collapse-header(icon=false onPress=null)
+              Div.code-actions(align='right' row)
+                Div.code-action(
+                  tooltip=open ? 'Hide code' : 'Show code'
+                  onPress=()=> setOpen(!open)
+                )
+                  Icon.code-action-collapse(icon=faCode color='error')
+                Div.code-action(
+                  tooltip=$copyText.get()
+                  onPress=copyHandler
+                  onMouseEnter=onMouseEnter
+                )
+                  Icon.code-action-copy(icon=faCopy)
+            Collapse.Content.code-collapse-content
+              Code(language=language)= children
+        else
+          Code(language=language)= children
+    `
+  })
+}

package/client/mdxComponents/index.styl

@@ -0,0 +1,115 @@
+$codeBg = var(--color-bg-main)
+$exampleBg = var(--color-bg-main)
+
+.p
+.blockquoteP
+.link
+.listIndex
+.inlineCode
+.inlineCodeSpacer
+  font(body1)
+
+.h2
+  margin-top 8u
+
+  &-text
+    fontFamily('heading', 600)
+
+.h3
+  margin-top 6u
+
+  &-text
+    fontFamily('heading', 600)
+
+.anchor
+  align-self flex-start
+  word-break break-word
+
+  &-link
+    margin-left 1u
+    opacity 0
+
+    &.hover
+      opacity 1
+
+.divider
+  height 0.5u
+  background-color var(--color-bg-secondary)
+  margin-bottom 1.5u
+
+.p
+  margin-top 2u
+
+.center
+  text-align center
+
+.listIndex
+  width 3u
+  margin-top 2u
+  text-align center
+  padding-right 2px
+
+.listContent
+  flex 1
+
+.alert
+  margin-top 2u
+
+.img
+  margin-top 2u
+  width 100%
+
+.inlineCodeWrapper
+  background-color $codeBg
+  border-width 1px
+  border-color var(--color-border-main)
+  border-radius .5u
+
+
+
+
+
+.example
+  margin-top 2u
+  background-color $exampleBg
+  border-top-left-radius 1u
+  border-top-right-radius 1u
+
+  &Content
+    flex-direction column
+    flex-grow 1
+
+.padding
+  padding 2u
+
+
+
+.code
+  margin-top 2u
+
+  &-example
+    margin-top 0
+
+  &-collapse
+    background-color $exampleBg
+    border-bottom-left-radius 1u
+    border-bottom-right-radius 1u
+
+    &-header
+      padding-top 1u
+      padding-bottom 2u
+      padding-left 2u
+      padding-right 2u
+
+      +tablet()
+        padding-top 2u
+
+    &-content
+      padding 2u
+
+  &-action
+    margin-left 2u
+
+    &-collapse
+    &-copy
+      color var(--color-text-description)

package/index.js

@@ -0,0 +1,15 @@
+import defaultMdxComponents from './client/mdxComponents/index.js'
+
+const mdxComponents = { ...defaultMdxComponents }
+
+// this can be used to override default MDX components globally
+export function overrideMDXComponents (newComponents) {
+  Object.assign(mdxComponents, newComponents)
+}
+
+// magic named export used by @mdx-js/mdx (in mdxLoader of @startupjs/bundler)
+export function useMDXComponents () {
+  return mdxComponents
+}
+
+export default mdxComponents

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@startupjs-ui/mdx",
+  "description": "MDX provider with a set of custom components for react-native support and syntax highlighting",
+  "version": "0.1.3",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "exports": {
+    ".": "./index.js"
+  },
+  "dependencies": {
+    "@fortawesome/free-solid-svg-icons": "^5.12.0",
+    "@mdx-js/react": "^3.0.0",
+    "@startupjs-ui/alert": "^0.1.3",
+    "@startupjs-ui/br": "^0.1.3",
+    "@startupjs-ui/collapse": "^0.1.3",
+    "@startupjs-ui/div": "^0.1.3",
+    "@startupjs-ui/divider": "^0.1.3",
+    "@startupjs-ui/icon": "^0.1.3",
+    "@startupjs-ui/link": "^0.1.3",
+    "@startupjs-ui/scroll-view": "^0.1.3",
+    "@startupjs-ui/span": "^0.1.3",
+    "@startupjs-ui/table": "^0.1.3",
+    "refractor": "^3.0.0"
+  },
+  "peerDependencies": {
+    "@react-native-clipboard/clipboard": "*",
+    "react": "*",
+    "react-native": "*",
+    "startupjs": "*"
+  },
+  "gitHead": "fd964ebc3892d3dd0a6c85438c0af619cc50c3f0"
+}