@startupjs-ui/mdx 0.1.13 → 0.1.17

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.1.17](https://github.com/startupjs/startupjs-ui/compare/v0.1.16...v0.1.17) (2026-02-12)
+
+**Note:** Version bump only for package @startupjs-ui/mdx
+
+
+
+
+
+## [0.1.16](https://github.com/startupjs/startupjs-ui/compare/v0.1.15...v0.1.16) (2026-02-10)
+
+
+### Bug Fixes
+
+* **mdx:** fix bold and italic ([415b5b8](https://github.com/startupjs/startupjs-ui/commit/415b5b8c0ec4f9e16ea4f762d175c1e14df5012b))
+
+
+
+
+
 ## [0.1.13](https://github.com/startupjs/startupjs-ui/compare/v0.1.12...v0.1.13) (2026-02-03)
 
 **Note:** Version bump only for package @startupjs-ui/mdx

package/README.md

@@ -1,26 +1,24 @@
 # MDX components
 
-> Components to use during .mdx compilation
+MDX provider with a set of custom components for React Native support and syntax highlighting. It maps standard Markdown and HTML elements (headings, paragraphs, lists, tables, code blocks, etc.) to React Native components so that `.mdx` and `.md` files render correctly on all platforms.
 
 ## Installation
 
 ```sh
-yarn @startupjs-ui/mdx expo-clipboard
+yarn add @startupjs-ui/mdx expo-clipboard
 ```
 
 ## Usage
 
-This will be used automatically by `@startupjs/bundler` to compile `.mdx` and `.md` files.
+This package is used automatically by `@startupjs/bundler` to compile `.mdx` and `.md` files. No additional configuration is required -- the bundler picks up the `useMDXComponents` export and applies the component mappings during compilation.
 
 ## 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):
+You can override the default MDX components globally by calling the `overrideMDXComponents` function. Call 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'
+import { overrideMDXComponents } from '@startupjs-ui/mdx'
 
 overrideMDXComponents({
   h1: ({ children }) => <Text style={{ fontSize: 40 }}>{children}</Text>,
@@ -28,7 +26,37 @@ overrideMDXComponents({
 })
 ```
 
-For the full list of components check [here](https://mdxjs.com/table-of-components)
+For the full list of overridable component names, see the [MDX Table of Components](https://mdxjs.com/table-of-components/).
+
+## Exports
+
+- **default** -- an object containing all MDX component mappings
+- **overrideMDXComponents(newComponents)** -- merges your custom components into the global component map, overriding any existing mappings for the same keys
+- **useMDXComponents()** -- returns the current component map (used internally by `@mdx-js/mdx`)
+
+## Built-in component mappings
+
+The following Markdown elements are mapped to React Native components out of the box:
+
+- **h1** -- renders as a bold `Span` with `h2` styling
+- **h2** -- renders as a `Span` with `h5` styling followed by a divider line
+- **h3** -- renders as a bold `Span` with `h6` styling
+- **h4, h5, h6** -- render as standard paragraph text
+- **p** -- renders as a `Span`; inside blockquotes, uses a special blockquote style
+- **strong** -- bold `Span`
+- **em** -- italic `Span`
+- **a** -- renders as a `Link` component
+- **ul, ol, li** -- list items with bullet or ordered markers; nested ordered lists use alphabetic markers
+- **blockquote** -- renders as an `Alert` component
+- **table, thead, tbody, tr, td, th** -- renders using the `Table` component
+- **img** -- renders as a React Native `Image` with automatic aspect-ratio scaling
+- **hr** -- renders as a large `Divider`
+- **code** -- inline code uses a monospace `Span`; block code uses the `Code` component with syntax highlighting
+- **pre** -- wraps block-level code
+
+## Syntax highlighting
+
+Code blocks support syntax highlighting for the following languages: JSX, Stylus, Pug, Markdown, JSON, and Bash (including `sh`). The highlighting is powered by [refractor](https://github.com/wooorm/refractor).
 
 ## License
 

package/client/Code/index.styl

@@ -8,7 +8,7 @@ monospace()
 .root
   padding 2u
   background-color $bg
-  border-radius 1u
+  radius(l)
 
 .line
   min-height 2.5u

package/client/mdxComponents/index.js

@@ -1,5 +1,5 @@
 import React, { useState, useContext } from 'react'
-import { Image, ScrollView, Platform } from 'react-native'
+import { Image, ScrollView, Platform, Text } from 'react-native'
 import { pug, observer, $, BASE_URL } from 'startupjs'
 import Alert from '@startupjs-ui/alert'
 import Div from '@startupjs-ui/div'
@@ -112,10 +112,10 @@ export default {
     `
   },
   strong: ({ children }) => pug`
-    P(bold)= children
+    Text(style={ fontWeight: 'bold' })= children
   `,
   em: ({ children }) => pug`
-    P(italic)= children
+    Text(style={ fontStyle: 'italic' })= children
   `,
   hr: ({ children }) => pug`
     Divider(size='l')

package/client/mdxComponents/index.styl

@@ -63,11 +63,7 @@ $exampleBg = var(--color-bg-main)
   background-color $codeBg
   border-width 1px
   border-color var(--color-border-main)
-  border-radius .5u
-
-
-
-
+  radius()
 
 .example
   margin-top 2u
@@ -82,8 +78,6 @@ $exampleBg = var(--color-bg-main)
 .padding
   padding 2u
 
-
-
 .code
   margin-top 2u
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@startupjs-ui/mdx",
   "description": "MDX provider with a set of custom components for react-native support and syntax highlighting",
-  "version": "0.1.13",
+  "version": "0.1.17",
   "publishConfig": {
     "access": "public"
   },
@@ -12,16 +12,16 @@
   "dependencies": {
     "@fortawesome/free-solid-svg-icons": "^7.1.0",
     "@mdx-js/react": "^3.0.0",
-    "@startupjs-ui/alert": "^0.1.13",
-    "@startupjs-ui/br": "^0.1.11",
-    "@startupjs-ui/collapse": "^0.1.13",
-    "@startupjs-ui/div": "^0.1.13",
-    "@startupjs-ui/divider": "^0.1.11",
-    "@startupjs-ui/icon": "^0.1.13",
-    "@startupjs-ui/link": "^0.1.13",
-    "@startupjs-ui/scroll-view": "^0.1.11",
-    "@startupjs-ui/span": "^0.1.13",
-    "@startupjs-ui/table": "^0.1.13",
+    "@startupjs-ui/alert": "^0.1.16",
+    "@startupjs-ui/br": "^0.1.16",
+    "@startupjs-ui/collapse": "^0.1.16",
+    "@startupjs-ui/div": "^0.1.16",
+    "@startupjs-ui/divider": "^0.1.16",
+    "@startupjs-ui/icon": "^0.1.16",
+    "@startupjs-ui/link": "^0.1.16",
+    "@startupjs-ui/scroll-view": "^0.1.16",
+    "@startupjs-ui/span": "^0.1.16",
+    "@startupjs-ui/table": "^0.1.16",
     "refractor": "^3.0.0"
   },
   "peerDependencies": {
@@ -30,5 +30,5 @@
     "react-native": "*",
     "startupjs": "*"
   },
-  "gitHead": "5cfdccf2bdae3873e968289a3e6b938fad02101a"
+  "gitHead": "902cb7536d017b53dc268cc54e8e54818279744c"
 }