@multiplatform.one/components 4.1.0 → 4.1.1

package/src/mdx/MDXCodeBlock/index.tsx

@@ -19,17 +19,24 @@
  * limitations under the License.
  */
 
-import React, { useEffect, useRef, useState, useContext } from 'react';
-import type { MDXCodeBlockContextValue } from './MDXCodeBlockContext';
-import { Button, Spacer, TooltipSimple, XStack, YStack, getTokens } from 'tamagui';
-import { CheckCircle, Clipboard } from '@tamagui/lucide-icons';
-import { Code } from '../../code/Code';
-import { ErrorBoundary } from '../../ErrorBoundary';
-import { LinearGradient } from '@tamagui/linear-gradient';
-import { MDXCodeBlockContext } from './MDXCodeBlockContext';
-import { Pre } from '../../code/Pre';
-import { ScrollView } from 'react-native';
-import { useClipboard } from '../../hooks/useClipboard';
+import { LinearGradient } from "@tamagui/linear-gradient";
+import { CheckCircle, Clipboard } from "@tamagui/lucide-icons";
+import React, { useEffect, useRef, useState, useContext } from "react";
+import { ScrollView } from "react-native";
+import {
+  Button,
+  Spacer,
+  TooltipSimple,
+  XStack,
+  YStack,
+  getTokens,
+} from "tamagui";
+import { ErrorBoundary } from "../../ErrorBoundary";
+import { Code } from "../../code/Code";
+import { Pre } from "../../code/Pre";
+import { useClipboard } from "../../hooks/useClipboard";
+import type { MDXCodeBlockContextValue } from "./MDXCodeBlockContext";
+import { MDXCodeBlockContext } from "./MDXCodeBlockContext";
 
 export interface MDXCodeBlockProps extends MDXCodeBlockContextValue {
   className?: string;
@@ -49,7 +56,7 @@ export function MDXCodeBlock(props: MDXCodeBlockProps) {
     ...codeProps
   } = { ...useContext(MDXCodeBlockContext), ...props };
   const lines = Array.isArray(children) ? children.length : 0;
-  const showLineNumbers = propShowLineNumbers ?? (lines > 10 ? true : false);
+  const showLineNumbers = propShowLineNumbers ?? lines > 10;
   const [isCollapsed, setIsCollapsed] = useState(isCollapsible);
   const isLong = lines > 22;
   const [isCutoff, setIsCutoff] = useState(isLong && !isCollapsible);
@@ -61,9 +68,9 @@ export function MDXCodeBlock(props: MDXCodeBlockProps) {
   useEffect(() => {
     try {
       if (preRef.current) {
-        const codeElement = preRef.current.querySelector('code');
+        const codeElement = preRef.current.querySelector("code");
         if (codeElement) {
-          const code = codeElement.innerText.replace(/\n{3,}/g, '\n');
+          const code = codeElement.innerText.replace(/\n{3,}/g, "\n");
           setCode(code);
         }
       }
@@ -77,8 +84,8 @@ export function MDXCodeBlock(props: MDXCodeBlockProps) {
           position="relative"
           {...(isCutoff && {
             maxHeight: 400,
-            ov: 'hidden',
-            br: '$4',
+            ov: "hidden",
+            br: "$4",
           })}
         >
           {(!isCollapsed || !isCollapsible) && isCutoff && (
@@ -88,7 +95,7 @@ export function MDXCodeBlock(props: MDXCodeBlockProps) {
               left={0}
               right={0}
               height={200}
-              colors={['$backgroundTransparent', '$background']}
+              colors={["$backgroundTransparent", "$background"]}
               zIndex={1000}
             >
               <Spacer flex={1} />
@@ -109,8 +116,8 @@ export function MDXCodeBlock(props: MDXCodeBlockProps) {
               id={id}
             >
               <ScrollView
-                style={{ width: '100%' }}
-                contentContainerStyle={{ minWidth: '100%' }}
+                style={{ width: "100%" }}
+                contentContainerStyle={{ minWidth: "100%" }}
                 horizontal
                 showsHorizontalScrollIndicator={false}
               >
@@ -118,9 +125,9 @@ export function MDXCodeBlock(props: MDXCodeBlockProps) {
                   backgroundColor="transparent"
                   className={className}
                   flex={1}
-                  lineHeight={tokens.space[size || '$5'] as any}
+                  lineHeight={tokens.space[size || "$5"] as any}
                   padding="$4"
-                  size={size ?? '$5'}
+                  size={size ?? "$5"}
                   {...codeProps}
                 >
                   {children}
@@ -130,21 +137,25 @@ export function MDXCodeBlock(props: MDXCodeBlockProps) {
           )}
           <XStack position="absolute" top="$3" right="$3" gap="$3">
             {(!isCollapsed || !isCollapsible) && !disableCopy && (
-              <TooltipSimple label={hasCopied ? 'Copied' : 'Copy to clipboard'}>
+              <TooltipSimple label={hasCopied ? "Copied" : "Copy to clipboard"}>
                 <Button
                   aria-label="Copy code to clipboard"
                   size="$2"
                   icon={hasCopied ? CheckCircle : Clipboard}
                   onPress={onCopy}
                   $xs={{
-                    display: 'none',
+                    display: "none",
                   }}
                 />
               </TooltipSimple>
             )}
             {isCollapsible && (
-              <Button accessibilityLabel="Show or hide code" size="$2" onPress={() => setIsCollapsed((x) => !x)}>
-                {isCollapsed ? 'Show code' : 'Hide code'}
+              <Button
+                accessibilityLabel="Show or hide code"
+                size="$2"
+                onPress={() => setIsCollapsed((x) => !x)}
+              >
+                {isCollapsed ? "Show code" : "Hide code"}
               </Button>
             )}
           </XStack>

package/src/mdx/UL/UL.stories.tsx

@@ -19,19 +19,34 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import { Text } from 'tamagui';
-import { UL } from './index';
+import React from "react";
+import { Text } from "tamagui";
+import { UL } from "./index";
 
 export default {
-  title: 'mdx/UL',
+  title: "mdx/UL",
   component: UL,
-  parameters: { status: { type: 'beta' } },
-  controls: true,
+  parameters: { status: { type: "beta" } },
+  controls: {
+    argTypes: {
+      marginVertical: {
+        description: "Sets the vertical margin of the unordered list",
+        defaultValue: "$1",
+      },
+      marginLeft: {
+        description: "Sets the left margin of the unordered list",
+        defaultValue: "$4",
+      },
+      marginRight: {
+        description: "Sets the right margin of the unordered list",
+        defaultValue: "$2",
+      },
+    },
+  },
 };
 
 export const main = (args) => (
-  <UL>
+  <UL {...args}>
     <Text>Hello world</Text>
   </UL>
 );

package/src/mdx/UL/index.ts

@@ -1,8 +1,8 @@
-import { YStack, styled } from 'tamagui';
+import { YStack, styled } from "tamagui";
 
 export const UL = styled(YStack, {
-  tag: 'ul',
-  marginVertical: '$1',
-  marginLeft: '$4',
-  marginRight: '$2',
+  tag: "ul",
+  marginVertical: "$1",
+  marginLeft: "$4",
+  marginRight: "$2",
 });

package/src/mdx/components.tsx

@@ -19,21 +19,43 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import type { MDXComponents } from '@mdx-js/react/lib';
-import type { XStackProps } from 'tamagui';
-import { CodeInline } from '../code/Code';
-import { H1, H2, H3, H4, H5, H6, Paragraph, XStack, Text, YStack, styled } from 'tamagui';
-import { HR } from './HR';
-import { LI } from './LI';
-import { Link as IconLink } from '@tamagui/lucide-icons';
-import { Link } from 'solito/link';
-import { MDXCodeBlock } from './MDXCodeBlock';
-import { Platform } from 'react-native';
-import { UL } from './UL';
-import { unwrapText } from '../utils/unwrapText';
+import type { MDXComponents } from "@mdx-js/react/lib";
+import { Link as IconLink } from "@tamagui/lucide-icons";
+import React from "react";
+import { Platform } from "react-native";
+import { Link } from "solito/link";
+import type { XStackProps } from "tamagui";
+import {
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  Paragraph,
+  Text,
+  XStack,
+  YStack,
+  styled,
+} from "tamagui";
+import { CodeInline } from "../code/Code";
+import { unwrapText } from "../utils/unwrapText";
+import { HR } from "./HR";
+import { LI } from "./LI";
+import { MDXCodeBlock } from "./MDXCodeBlock";
+import { UL } from "./UL";
 
-const code = ({ hero, line, scrollable, className, children, id, showLineNumbers, collapsible, ...props }) => {
+const code = ({
+  hero,
+  line,
+  scrollable,
+  className,
+  children,
+  id,
+  showLineNumbers,
+  collapsible,
+  ...props
+}) => {
   if (!className) return <CodeInline>{unwrapText(children)}</CodeInline>;
   return (
     <YStack marginTop="$3">
@@ -50,13 +72,21 @@ const code = ({ hero, line, scrollable, className, children, id, showLineNumbers
 };
 
 export const TableHighlight = styled(YStack, {
-  backgroundColor: '$yellow1',
+  backgroundColor: "$yellow1",
   fullscreen: true,
 });
 
 export const mdxComponents: MDXComponents = {
   h1: (props) => <H1 marginBottom="$2" {...sanitizeProps(props)} />,
-  h2: (props) => <H2 paddingTop="$8" marginTop="$-4" marginBottom="$2" data-heading {...sanitizeProps(props)} />,
+  h2: (props) => (
+    <H2
+      paddingTop="$8"
+      marginTop="$-4"
+      marginBottom="$2"
+      data-heading
+      {...sanitizeProps(props)}
+    />
+  ),
   h3: ({ children, id, ...props }) => (
     <LinkHeading paddingTop="$8" marginTop="$-4" marginBottom="$1" id={id}>
       <H3 nativeID={id} {...sanitizeProps(props)}>
@@ -65,15 +95,24 @@ export const mdxComponents: MDXComponents = {
       {getNonTextChildren(children)}
     </LinkHeading>
   ),
-  h4: (props) => <H4 marginTop="$4" marginBottom="$3" {...sanitizeProps(props)} />,
+  h4: (props) => (
+    <H4 marginTop="$4" marginBottom="$3" {...sanitizeProps(props)} />
+  ),
   h5: (props) => <H5 marginTop="$4" {...sanitizeProps(props)} />,
   h6: (props) => <H6 marginTop="$4" {...sanitizeProps(props)} />,
-  p: (props) => <Paragraph size="$6" marginVertical="$2.5" {...sanitizeProps(props)} />,
-  a: ({ href = '', children, ...props }) => {
+  p: (props) => (
+    <Paragraph size="$6" marginVertical="$2.5" {...sanitizeProps(props)} />
+  ),
+  a: ({ href = "", children, ...props }) => {
     return (
       <Link href={href}>
         {/* @ts-ignore */}
-        <Paragraph fontSize="inherit" display="inline" cursor="pointer" {...sanitizeProps(props)}>
+        <Paragraph
+          fontSize="inherit"
+          display="inline"
+          cursor="pointer"
+          {...sanitizeProps(props)}
+        >
           {children}
           {/* {typeof href === 'string' && href.startsWith('http') ? (
             <>
@@ -90,7 +129,11 @@ export const mdxComponents: MDXComponents = {
   hr: (props) => <HR {...sanitizeProps(props)} />,
   ul: ({ children }) => (
     // @ts-ignore
-    <UL marginVertical="$4">{React.Children.toArray(children).map((x) => (typeof x === 'string' ? null : x))}</UL>
+    <UL marginVertical="$4">
+      {React.Children.toArray(children).map((x) =>
+        typeof x === "string" ? null : x,
+      )}
+    </UL>
   ),
   ol: (props) => <YStack {...sanitizeProps(props)} marginBottom="$3" />,
   li: (props) => (
@@ -99,7 +142,9 @@ export const mdxComponents: MDXComponents = {
     </LI>
   ),
   // @ts-ignore
-  strong: (props) => <Paragraph fontSize="inherit" {...sanitizeProps(props)} fontWeight="700" />,
+  strong: (props) => (
+    <Paragraph fontSize="inherit" {...sanitizeProps(props)} fontWeight="700" />
+  ),
   img: ({ ...props }) => (
     <YStack marginVertical="$6">
       <YStack {...sanitizeProps(props)} maxWidth="100%" />
@@ -132,22 +177,34 @@ export const mdxComponents: MDXComponents = {
       </Paragraph>
     </YStack>
   ),
-  ...(Platform.OS === 'web'
+  ...(Platform.OS === "web"
     ? {}
     : {
         div: (props) => <Text {...sanitizeProps(props)} />,
         span: (props: any) => {
           let color: string | undefined;
-          if (/^token punctuation/g.test(props?.className || '')) {
-            color = '$red10';
+          if (/^token punctuation/g.test(props?.className || "")) {
+            color = "$red10";
           }
           return <Text color={color} {...sanitizeProps(props)} />;
         },
       }),
 };
 
-const LinkHeading = ({ id, children, ...props }: { id?: string } & XStackProps) => (
-  <XStack href={`#${id}`} id={id} data-id={id} display="inline-flex" alignItems="center" gap {...sanitizeProps(props)}>
+const LinkHeading = ({
+  id,
+  children,
+  ...props
+}: { id?: string } & XStackProps) => (
+  <XStack
+    href={`#${id}`}
+    id={id}
+    data-id={id}
+    display="inline-flex"
+    alignItems="center"
+    gap
+    {...sanitizeProps(props)}
+  >
     {children}
     <YStack opacity={0.3}>
       <IconLink size={12} color="var(--color)" aria-hidden />
@@ -157,13 +214,13 @@ const LinkHeading = ({ id, children, ...props }: { id?: string } & XStackProps)
 
 const getNonTextChildren = (children) => {
   return React.Children.map(children, (x) => {
-    if (typeof x === 'string') return null;
-    if (x['type'] === code) return null;
+    if (typeof x === "string") return null;
+    if (x.type === code) return null;
     return x;
   }).flat();
 };
 
 function sanitizeProps<P>(props: any): P {
-  if (Platform.OS !== 'web') return props;
+  if (Platform.OS !== "web") return props;
   return props;
 }

package/src/mdx/hooks/index.ts

@@ -1,3 +1,3 @@
-export * from './useCompileAndEvaluateMdx';
-export * from './useCompileMdx';
-export * from './useEvaluateMdx';
+export * from "./useCompileAndEvaluateMdx";
+export * from "./useCompileMdx";
+export * from "./useEvaluateMdx";

package/src/mdx/hooks/useCompileAndEvaluateMdx.ts

@@ -19,9 +19,9 @@
  * limitations under the License.
  */
 
-import type { ComponentType } from 'react';
-import { useCompileMdx } from './useCompileMdx';
-import { useEvaluateMdx } from './useEvaluateMdx';
+import type { ComponentType } from "react";
+import { useCompileMdx } from "./useCompileMdx";
+import { useEvaluateMdx } from "./useEvaluateMdx";
 
 export function useCompileAndEvaluateMdx(
   source: string,

package/src/mdx/hooks/useCompileMdx.ts

@@ -19,7 +19,7 @@
  * limitations under the License.
  */
 
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from "react";
 
 export function useCompileMdx(
   source: string,
@@ -29,7 +29,9 @@ export function useCompileMdx(
   frontmatter?: Record<string, any>;
 } {
   const [code, setCode] = useState<string | undefined>();
-  const [frontmatter, setFrontmatter] = useState<Record<string, any> | undefined>();
+  const [frontmatter, setFrontmatter] = useState<
+    Record<string, any> | undefined
+  >();
 
   useEffect(() => {
     (async () => {
@@ -43,23 +45,23 @@ export function useCompileMdx(
         { rehypeHighlightCode },
         { rehypeMetaAttributes },
       ] = await Promise.all([
-        import('@mdx-js/mdx'),
-        import('gray-matter'),
-        import('rehype-autolink-headings'),
-        import('rehype-slug'),
-        import('remark-frontmatter'),
-        import('remark-mdx-frontmatter'),
-        import('../util/rehypeHighlightCode'),
-        import('../util/rehypeMetaAttributes'),
+        import("@mdx-js/mdx"),
+        import("gray-matter"),
+        import("rehype-autolink-headings"),
+        import("rehype-slug"),
+        import("remark-frontmatter"),
+        import("remark-mdx-frontmatter"),
+        import("../util/rehypeHighlightCode"),
+        import("../util/rehypeMetaAttributes"),
       ]);
       const { value } = await compile(source, {
         ...options,
         development: false,
-        outputFormat: 'function-body',
+        outputFormat: "function-body",
         // useDynamicImport: true,
         remarkPlugins: [
           ...(options?.remarkPlugins || []),
-          [remarkMdxFrontmatter, { name: 'frontmatter' }],
+          [remarkMdxFrontmatter, { name: "frontmatter" }],
           remarkFrontmatter,
         ],
         rehypePlugins: [

package/src/mdx/hooks/useEvaluateMdx.ts

@@ -19,13 +19,14 @@
  * limitations under the License.
  */
 
-import * as jsxRuntime from 'react/jsx-runtime';
-import type { ComponentType } from 'react';
-import type { MDXComponents } from '@mdx-js/react/lib';
-import { useState, useEffect } from 'react';
+import type { MDXComponents } from "@mdx-js/react/lib";
+import type { ComponentType } from "react";
+import { useEffect, useState } from "react";
+import * as jsxRuntime from "react/jsx-runtime";
 
 export function useEvaluateMdx(code?: string, options?: Record<string, any>) {
-  const [Component, setComponent] = useState<ComponentType<{ components?: Record<string, any> }>>();
+  const [Component, setComponent] =
+    useState<ComponentType<{ components?: Record<string, any> }>>();
 
   useEffect(() => {
     if (!code) return;

package/src/mdx/index.ts

@@ -1,8 +1,8 @@
-export * from './ExternalIcon';
-export * from './HR';
-export * from './LI';
-export * from './MDX';
-export * from './MDXCodeBlock';
-export * from './UL';
-export * from './components';
-export * from './hooks';
+export * from "./ExternalIcon";
+export * from "./HR";
+export * from "./LI";
+export * from "./MDX";
+export * from "./MDXCodeBlock";
+export * from "./UL";
+export * from "./components";
+export * from "./hooks";

package/src/mdx/util/rehypeHighlightCode.ts

@@ -1,28 +1,33 @@
 // https://github.com/tamagui/tamagui/blob/086f4d0a3ffb1767547e1ab9f51502c59a098504/apps/site/lib/rehype-highlight-code.ts
 
-import rangeParser from 'parse-numeric-range';
-import tsx from 'refractor/lang/tsx';
-import { refractor } from 'refractor';
-import { rehypeHighlightLine } from './rehypeHighlightLine';
-import { rehypeHighlightWord } from './rehypeHighlightWord';
-import { toString } from 'hast-util-to-string';
-import { visit } from 'unist-util-visit';
+import { toString as hastToString } from "hast-util-to-string";
+import rangeParser from "parse-numeric-range";
+import { refractor } from "refractor";
+import tsx from "refractor/lang/tsx";
+import { visit } from "unist-util-visit";
+import { rehypeHighlightLine } from "./rehypeHighlightLine";
+import { rehypeHighlightWord } from "./rehypeHighlightWord";
 
 refractor.register(tsx);
 
 export function rehypeHighlightCode(_options = {}) {
   function visitor(node: any, index: any, parent: any) {
-    if (!parent || parent.tagName !== 'pre' || node.tagName !== 'code' || !node.properties.className) {
+    if (
+      !parent ||
+      parent.tagName !== "pre" ||
+      node.tagName !== "code" ||
+      !node.properties.className
+    ) {
       return;
     }
-    const [, lang] = node.properties.className[0].split('-');
-    const codeString = toString(node);
+    const [, lang] = node.properties.className[0].split("-");
+    const codeString = hastToString(node);
     let result = refractor.highlight(codeString, lang);
-    const linesToHighlight = rangeParser(node.properties.line || '0');
+    const linesToHighlight = rangeParser(node.properties.line || "0");
     result = rehypeHighlightLine(result, linesToHighlight);
     node.children = rehypeHighlightWord(result);
   }
   return (tree: any) => {
-    visit(tree, 'element', visitor);
+    visit(tree, "element", visitor);
   };
 }

package/src/mdx/util/rehypeHighlightLine.ts

@@ -21,9 +21,9 @@
 
 // https://github.com/tamagui/tamagui/blob/086f4d0a3ffb1767547e1ab9f51502c59a098504/apps/site/lib/rehype-highlight-line.ts
 
-import parse from 'rehype-parse';
-import { toHtml } from 'hast-util-to-html';
-import { unified } from 'unified';
+import { toHtml } from "hast-util-to-html";
+import parse from "rehype-parse";
+import { unified } from "unified";
 
 export function rehypeHighlightLine(ast: any, lines: any[]) {
   const formattedAst = applyMultilineFix(ast);
@@ -35,18 +35,18 @@ function lineNumberify(ast: any, lineNum = 1) {
   let lineNumber = lineNum;
   return ast.reduce(
     (result: any, node: any) => {
-      if (node.type === 'text') {
-        if (node.value.indexOf('\n') === -1) {
+      if (node.type === "text") {
+        if (node.value.indexOf("\n") === -1) {
           node.lineNumber = lineNumber;
           result.nodes.push(node);
           return result;
         }
-        const lines = node.value.split('\n');
+        const lines = node.value.split("\n");
         for (let i = 0; i < lines.length; i++) {
           if (i !== 0) ++lineNumber;
           if (i === lines.length - 1 && lines[i].length === 0) continue;
           result.nodes.push({
-            type: 'text',
+            type: "text",
             value: i === lines.length - 1 ? lines[i] : `${lines[i]}\n`,
             lineNumber: lineNumber,
           });
@@ -70,7 +70,8 @@ function lineNumberify(ast: any, lineNum = 1) {
 }
 
 function wrapLines(ast: any[], linesToHighlight: any) {
-  const highlightAll = linesToHighlight.length === 1 && linesToHighlight[0] === 0;
+  const highlightAll =
+    linesToHighlight.length === 1 && linesToHighlight[0] === 0;
   const allLines: any[] = Array.from(new Set(ast.map((x) => x.lineNumber)));
   let i = 0;
   const wrapped = allLines.reduce((nodes, marker) => {
@@ -90,12 +91,13 @@ function wrapLines(ast: any[], linesToHighlight: any) {
       }
     }
     nodes.push({
-      type: 'element',
-      tagName: 'div',
+      type: "element",
+      tagName: "div",
       properties: {
         dataLine: line,
-        className: 'highlight-line',
-        dataHighlighted: linesToHighlight.includes(line) || highlightAll ? 'true' : 'false',
+        className: "highlight-line",
+        dataHighlighted:
+          linesToHighlight.includes(line) || highlightAll ? "true" : "false",
       },
       children,
       lineNumber: line,
@@ -106,7 +108,8 @@ function wrapLines(ast: any[], linesToHighlight: any) {
 }
 
 // https://github.com/gatsbyjs/gatsby/pull/26161/files
-const MULTILINE_TOKEN_SPAN = /<span class="token ([^"]+)">[^<]*\n[^<]*<\/span>/g;
+const MULTILINE_TOKEN_SPAN =
+  /<span class="token ([^"]+)">[^<]*\n[^<]*<\/span>/g;
 
 function applyMultilineFix(ast: any) {
   // AST to HTML

package/src/mdx/util/rehypeHighlightWord.ts

@@ -21,16 +21,19 @@
 
 // https://github.com/tamagui/tamagui/blob/086f4d0a3ffb1767547e1ab9f51502c59a098504/apps/site/lib/rehype-highlight-word.ts
 
-import parse from 'rehype-parse';
-import type { Node, Content } from 'hast-util-to-html/lib';
-import { toHtml } from 'hast-util-to-html';
-import { unified } from 'unified';
+import { toHtml } from "hast-util-to-html";
+import type { Content, Node } from "hast-util-to-html/lib";
+import parse from "rehype-parse";
+import { unified } from "unified";
 
 const CALLOUT = /__(.*?)__/g;
 
 export function rehypeHighlightWord(code: Node | Content[]) {
   const html = toHtml(code);
-  const result = html.replace(CALLOUT, (_, text) => `<span class="highlight-word">${text}</span>`);
+  const result = html.replace(
+    CALLOUT,
+    (_, text) => `<span class="highlight-word">${text}</span>`,
+  );
   const hast = unified()
     .use(parse as any, { emitParseErrors: true, fragment: true })
     .parse(result);