@multiplatform.one/components 5.0.1 → 5.0.7

package/src/mdx/components.tsx

@@ -1,7 +1,7 @@
 /**
  * File: /src/mdx/components.tsx
  * Project: @multiplatform.one/components
- * File Created: 10-10-2023 06:39:34
+ * File Created: 19-11-2024 20:26:31
  * Author: Clay Risser
  * -----
  * BitSpur (c) Copyright 2021 - 2024
@@ -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 { Link as IconLink } from "@tamagui/lucide-icons";
+import type { MDXComponents } from "mdx/types";
+import { isWeb } from "multiplatform.one";
+import { Link } from "one";
+import { Children } from "react";
+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">
+      {Children.toArray(children).map((x) =>
+        typeof x === "string" ? null : x,
+      )}
+    </UL>
   ),
   ol: (props) => <YStack {...sanitizeProps(props)} marginBottom="$3" />,
   li: (props) => (
@@ -99,14 +142,17 @@ 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%" />
     </YStack>
   ),
   pre: ({ children }) => <>{children}</>,
-  code,
+  // TODO: Fix this type
+  code: code as any,
   blockquote: ({ children, ...props }) => (
     <YStack
       borderColor="$borderColor"
@@ -132,22 +178,34 @@ export const mdxComponents: MDXComponents = {
       </Paragraph>
     </YStack>
   ),
-  ...(Platform.OS === 'web'
+  ...(isWeb
     ? {}
     : {
         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="$4"
+    {...sanitizeProps(props)}
+  >
     {children}
     <YStack opacity={0.3}>
       <IconLink size={12} color="var(--color)" aria-hidden />
@@ -156,14 +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;
+  return Children.map(children, (x) => {
+    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;
   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/types";
+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);

package/src/mdx/util/rehypeMetaAttributes.ts

@@ -1,19 +1,21 @@
 // https://github.com/wooorm/xdm#syntax-highlighting-with-the-meta-field
 
-import { visit } from 'unist-util-visit';
+import { visit } from "unist-util-visit";
 const re = /\b([-\w]+)(?:=(?:"([^"]*)"|'([^']*)'|([^"'\s]+)))?/g;
 
 export function rehypeMetaAttributes(_options = {}) {
   function onElement(node: any) {
     let match: any;
-    if (node.tagName === 'code' && node.data && node.data.meta) {
+    if (node.tagName === "code" && node.data && node.data.meta) {
       re.lastIndex = 0; // Reset regex.
-      while ((match = re.exec(node.data.meta))) {
-        node.properties[match[1]] = match[2] || match[3] || match[4] || '';
+      match = re.exec(node.data.meta);
+      while (match) {
+        node.properties[match[1]] = match[2] || match[3] || match[4] || "";
+        match = re.exec(node.data.meta);
       }
     }
   }
   return (tree: any) => {
-    visit(tree, 'element', onElement);
+    visit(tree, "element", onElement);
   };
 }

package/src/organize/SimpleAccordion/SimpleAccordion.stories.tsx

@@ -1,13 +1,12 @@
-import React from 'react';
-import { AccordionItem, SimpleAccordion } from './index';
-import { YStack, Text, XStack, H5, Accordion } from 'tamagui';
-import { ChevronRight } from '@tamagui/lucide-icons';
+import { ChevronRight } from "@tamagui/lucide-icons";
+import { Accordion, H5, Text, XStack, YStack } from "tamagui";
+import { AccordionItem, SimpleAccordion } from "./index";
 
 export default {
-  title: 'organize/SimpleAccordion',
+  title: "organize/SimpleAccordion",
   component: SimpleAccordion,
   parameters: {
-    status: { type: 'beta' },
+    status: { type: "beta" },
   },
 };
 
@@ -19,7 +18,10 @@ export const main = (args) => {
           <Text> Apple Content</Text>
         </YStack>
       </AccordionItem>
-      <AccordionItem trigger={() => <Text>Trigger Banana </Text>} value="banana">
+      <AccordionItem
+        trigger={() => <Text>Trigger Banana </Text>}
+        value="banana"
+      >
         <YStack padding="$4">
           <Text>Banana Content</Text>
         </YStack>
@@ -27,7 +29,7 @@ export const main = (args) => {
       <AccordionItem
         trigger={(open) => (
           <XStack>
-            <YStack animation="quick" rotate={open ? '90deg' : '0deg'}>
+            <YStack animation="quick" rotate={open ? "90deg" : "0deg"}>
               <ChevronRight />
             </YStack>
             <H5 color="$color10">Folders</H5>
@@ -43,7 +45,7 @@ export const main = (args) => {
         <Accordion.Trigger flexDirection="row" justifyContent="space-between">
           {({ open }) => (
             <XStack>
-              <YStack animation="quick" rotate={open ? '90deg' : '0deg'}>
+              <YStack animation="quick" rotate={open ? "90deg" : "0deg"}>
                 <ChevronRight />
               </YStack>
               <H5 color="$color10">Folders</H5>

package/src/organize/SimpleAccordion/index.tsx

@@ -19,21 +19,25 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import type { AccordionContentProps, AccordionItemProps, AccordionTriggerProps } from 'tamagui';
-import { Accordion } from 'tamagui';
+import type { ReactNode } from "react";
+import type {
+  AccordionContentProps,
+  AccordionItemProps,
+  AccordionTriggerProps,
+} from "tamagui";
+import { Accordion } from "tamagui";
 
 interface SimpleAccordionProps {
-  children: React.ReactNode;
-  overflow?: 'visible' | 'hidden' | 'scroll';
-  type?: 'single' | 'multiple';
+  children: ReactNode;
+  overflow?: "visible" | "hidden" | "scroll";
+  type?: "single" | "multiple";
 }
 
 type SimpleAccordionItemProps = AccordionItemProps & {
-  trigger: (open: boolean) => React.ReactNode;
+  trigger: (open: boolean) => ReactNode;
   triggerStyle?: AccordionTriggerProps;
   contentStyle?: AccordionContentProps;
-  children: React.ReactNode;
+  children: ReactNode;
 };
 
 export function SimpleAccordion({ children, ...props }: SimpleAccordionProps) {
@@ -44,10 +48,20 @@ export function SimpleAccordion({ children, ...props }: SimpleAccordionProps) {
   );
 }
 
-export function AccordionItem({ trigger, triggerStyle, children, contentStyle, ...props }: SimpleAccordionItemProps) {
+export function AccordionItem({
+  trigger,
+  triggerStyle,
+  children,
+  contentStyle,
+  ...props
+}: SimpleAccordionItemProps) {
   return (
     <Accordion.Item {...props}>
-      <Accordion.Trigger flexDirection="row" justifyContent="space-between" {...triggerStyle}>
+      <Accordion.Trigger
+        flexDirection="row"
+        justifyContent="space-between"
+        {...triggerStyle}
+      >
         {({ open }) => trigger(open)}
       </Accordion.Trigger>
       <Accordion.Content {...contentStyle}>{children}</Accordion.Content>

package/src/organize/SimpleCarousel/Carousel.stories.tsx

@@ -18,22 +18,22 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { SimpleCarousel, CarouselProps } from './index';
-import React from 'react';
-import { SimpleImage } from '../../images/SimpleImage';
+
+import { SimpleImage } from "../../images/SimpleImage";
+import { type CarouselProps, SimpleCarousel } from "./index";
 
 export default {
-  title: 'organize/SimpleCarousel',
+  title: "organize/SimpleCarousel",
   component: SimpleCarousel,
   parameters: {
     status: {
-      type: 'beta',
+      type: "beta",
     },
   },
 };
 
-const mail = require('../../../assets/mail.png');
-const pentagon = require('../../../assets/pentagon.svg');
+const mail = require("../../../assets/mail.png");
+const pentagon = require("../../../assets/pentagon.svg");
 
 export const Main = (args: CarouselProps) => (
   <SimpleCarousel speed={args.speed} {...args} defaultSlide={4}>