chore(website): implement TNodeTransformDisplay

apps/website/src/components/ExpoSnippet.module.scss → apps/website/src/components/RenderHTMLCard.module.scss

@@ -26,6 +26,12 @@
   padding-bottom: 0;
 }
 
+.notice {
+  display: block;
+  text-align: center;
+  color: var(--ifm-font-color-secondary);
+}
+
 .expoBox {
   display: flex;
   justify-content: center;

apps/website/src/components/ExpoSnippet.tsx → apps/website/src/components/RenderHTMLCard.tsx

@@ -7,7 +7,7 @@ import React, {
   useState
 } from 'react';
 import useThemeContext from '@theme/hooks/useThemeContext';
-import styles from './ExpoSnippet.module.scss';
+import styles from './RenderHTMLCard.module.scss';
 import ReactModal from 'react-modal';
 import CodeBlock from '@theme/CodeBlock';
 
@@ -219,6 +219,12 @@ export default function RenderHTMLCard({
         {caption && (
           <figcaption className={styles.caption}>{caption}</figcaption>
         )}
+        <small
+          style={caption && { paddingTop: 'var(--ifm-leading)' }}
+          className={styles.notice}>
+          Press on the button below to show how this code renders on your
+          device.
+        </small>
       </div>
       <div className={styles.expoBox}>
         <button
@@ -227,7 +233,7 @@ export default function RenderHTMLCard({
           role="button">
           <ExpoLogo color="var(--ifm-button-color)" size={40} />
           <span className={styles.expoBox__span}>
-            Open in Expo to See it Live
+            Run on Your Device with Expo
           </span>
         </button>
       </div>

apps/website/src/components/TNodeTransformDisplay.module.scss

@@ -0,0 +1,20 @@
+@import '../css/shared.scss';
+
+.arrow {
+  text-align: center;
+  font-size: 50px;
+  padding-bottom: var(--ifm-leading);
+}
+
+.figure {
+  @extend .figure;
+}
+
+.figure__caption {
+  @extend .figure__caption;
+}
+
+.figure__title {
+  text-align: center;
+  font-weight: bold;
+}

apps/website/src/components/TNodeTransformDisplay.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import CodeBlock from '@theme/CodeBlock';
+import styles from './TNodeTransformDisplay.module.scss';
+
+export default function TNodeTransformDisplay({
+  html,
+  snapshot,
+  caption,
+  title
+}: {
+  title?: string;
+  caption?: string;
+  html: string;
+  snapshot: string;
+}) {
+  const normalHtml = decodeURIComponent(html);
+  const normalSnapshot = decodeURIComponent(snapshot);
+  return (
+    <figure className={styles.figure}>
+      {title && <div className={styles.figure__title}>{title}</div>}
+      <CodeBlock title="HTML" className={'html'}>
+        {normalHtml}
+      </CodeBlock>
+      <div className={styles.arrow}>↓</div>
+      <CodeBlock title="TRT" className={'xml'}>
+        {normalSnapshot}
+      </CodeBlock>
+      {caption && (
+        <figcaption className={styles.figure__caption}>{caption}</figcaption>
+      )}
+    </figure>
+  );
+}

doc-tools/doc-mdx-gen-cli/src/MdxToolkitProvider.tsx

@@ -33,7 +33,7 @@ export default function MdxToolkitProvider({
     Paragraph: ({ children }) => <p>{children}</p>,
     Bold: ({ children }) => <strong>{children}</strong>,
     RenderHtmlCard: ({ caption, snippet, title, props, preferHtmlSrc }) => (
-      <exposnippet
+      <renderhtmlcard
         preferHtmlSrc={preferHtmlSrc}
         html={(props.source as HTMLSourceInline).html}
         title={title}
@@ -42,17 +42,8 @@ export default function MdxToolkitProvider({
       />
     ),
     SourceDisplay: (props) => <codeblockds {...props} />,
-    TNodeTransformDisplay: ({ html, snaphost, caption, title }) => {
-      return (
-        <figure>
-          {title && <strong>{title}</strong>}
-          <codeblockds content={html} lang="html" showLineNumbers={false} />
-          {/*@ts-ignore*/}
-          <p align="center">↓</p>
-          <codeblockds content={snaphost} lang="xml" showLineNumbers={false} />
-          {caption && <figcaption>{caption}</figcaption>}
-        </figure>
-      );
+    TNodeTransformDisplay: ({ snaphost, ...props }) => {
+      return <tnodetransformdisplay snapshot={snaphost} {...props} />;
     },
     Admonition: ({ children, type, title }) => (
       <admonition type={type} title={title}>

doc-tools/doc-mdx-gen-cli/src/render/components/ExpoSnippetElement.ts → doc-tools/doc-mdx-gen-cli/src/render/components/RenderHTMLCardElement.ts

@@ -3,24 +3,24 @@ import NodeWithChildren from './NodeWithChildren';
 
 const version = require('react-native-render-html/package.json').version;
 
-export type ExpoSnippetElementProps = {
+export type RenderHTMLCardElementProps = {
   snippet: string;
   title: string;
   html: string;
   caption?: string;
   preferHtmlSrc: boolean;
 };
 
-export default class ExpoSnippetElement extends NodeWithChildren {
-  props: ExpoSnippetElementProps;
-  constructor(props: ExpoSnippetElementProps, root: MDXDocument) {
+export default class RenderHTMLCardElement extends NodeWithChildren {
+  props: RenderHTMLCardElementProps;
+  constructor(props: RenderHTMLCardElementProps, root: MDXDocument) {
     super();
     this.props = props;
-    root.registerImport('ExpoSnippet');
+    root.registerImport('RenderHTMLCard');
   }
 
   toMdx(): string {
-    const tagName = 'ExpoSnippet';
+    const tagName = 'RenderHTMLCard';
     const { snippet, html, preferHtmlSrc, ...inlineProps } = this.props;
     const identifiers = [tagName, ...this.getInlineProps(inlineProps)];
     return `\n<${identifiers.join(

doc-tools/doc-mdx-gen-cli/src/render/components/TNodeTransformDisplayElement.ts

@@ -0,0 +1,27 @@
+import MDXDocument from './MDXDocument';
+import NodeWithChildren from './NodeWithChildren';
+
+export interface TNodeTransformDisplayElementProps {
+  title?: string;
+  caption?: string;
+  html: string;
+  snapshot: string;
+}
+
+export default class TNodeTransformDisplayElement extends NodeWithChildren {
+  props: TNodeTransformDisplayElementProps;
+  constructor(props: TNodeTransformDisplayElementProps, root: MDXDocument) {
+    super();
+    this.props = props;
+    root.registerImport('TNodeTransformDisplay');
+  }
+
+  toMdx(): string {
+    const tagName = 'TNodeTransformDisplay';
+    const { snapshot, html, ...inlineProps } = this.props;
+    const identifiers = [tagName, ...this.getInlineProps(inlineProps)];
+    return `\n<${identifiers.join(' ')} html="${encodeURIComponent(
+      html
+    )}" snapshot="${encodeURIComponent(snapshot)}" />\n`;
+  }
+}

doc-tools/doc-mdx-gen-cli/src/render/createElement.ts

@@ -1,6 +1,6 @@
 import AdmonitionElement from './components/AdmonitionElement';
 import CodeBlockElement from './components/CodeBlockElement';
-import ExpoSnippetElement from './components/ExpoSnippetElement';
+import RenderHTMLCardElement from './components/RenderHTMLCardElement';
 import SvgFigureElement from './components/SvgFigureElement';
 import H2Element from './components/H2Element';
 import HTMLElement from './components/HTMLElement';
@@ -10,6 +10,7 @@ import BoldElement from './components/AnchorElement';
 import ParagraphElement from './components/ParagraphElement';
 import StrongElement from './components/StrongElement';
 import H3Element from './components/H3Element';
+import TNodeTransformDisplayElement from './components/TNodeTransformDisplayElement';
 
 export type NodeType = 'ROOT' | keyof JSX.IntrinsicElements;
 
@@ -24,10 +25,12 @@ function createElement(type: NodeType, props: any, root: MDXDocument) {
       return new AdmonitionElement(props);
     case 'codeblockds':
       return new CodeBlockElement(props);
-    case 'exposnippet':
-      return new ExpoSnippetElement(props, root!);
+    case 'renderhtmlcard':
+      return new RenderHTMLCardElement(props, root!);
     case 'svgfigure':
       return new SvgFigureElement(props, root!);
+    case 'tnodetransformdisplay':
+      return new TNodeTransformDisplayElement(props, root!);
     case 'h2':
       return new H2Element();
     case 'h3':

doc-tools/doc-mdx-gen-cli/src/render/index.ts

@@ -1,17 +1,19 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { AdmonitionProps } from './components/AdmonitionElement';
 import { CodeBlockElementProps } from './components/CodeBlockElement';
-import { ExpoSnippetElementProps } from './components/ExpoSnippetElement';
+import { RenderHTMLCardElementProps } from './components/RenderHTMLCardElement';
 import { SvgFigureElementProps } from './components/SvgFigureElement';
+import { TNodeTransformDisplayElementProps } from './components/TNodeTransformDisplayElement';
 export { default as renderMdx } from './renderMdx';
 
 declare global {
   namespace JSX {
     interface IntrinsicElements {
       admonition: AdmonitionProps;
       codeblockds: CodeBlockElementProps;
-      exposnippet: ExpoSnippetElementProps;
+      renderhtmlcard: RenderHTMLCardElementProps;
       svgfigure: SvgFigureElementProps;
+      tnodetransformdisplay: TNodeTransformDisplayElementProps;
     }
   }
 }

doc-tools/doc-pages/src/pages/PageContentLists.tsx

@@ -5,7 +5,7 @@ import Page from '../Page';
 import useToolkit from '../toolkit/useToolkit';
 import olUpperRomanConfig from './cards/olUpperRomanConfig';
 import ulSquareConfig from './cards/ulSquareConfig';
-import customListThaiConfig from './cards/customListThaiConfig';
+import customListKatanaConfig from './cards/customListThaiConfig';
 import customListRussianConfig from './cards/customListRussianConfig';
 import rtlListArabicConfig from './cards/rtlListArabicConfig';
 import rtlListDiscConfig from './cards/rtlListDiscConfig';
@@ -129,7 +129,7 @@ export default function PageContentLists() {
             of presets with a one-liner! See below example with the{' '}
             <Bold>Thai</Bold> preset:
           </Paragraph>
-          <RenderHtmlCard {...customListThaiConfig} />
+          <RenderHtmlCard {...customListKatanaConfig} />
         </Section>
         <Section title="Creating a Counter Style">
           <Paragraph>