chore(website): implement better snippet viewers

meliorence · Jun 4, 2021 · 812f577 · 812f577
1 parent 02b6ab8
commit 812f577
Show file tree

Hide file tree

Showing 13 changed files with 299 additions and 61 deletions.
diff --git a/apps/website/package.json b/apps/website/package.json
@@ -23,7 +23,8 @@
     "clsx": "^1.1.1",
     "docusaurus-plugin-sass": "^0.1.12",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-modal": "^3.13.1"
   },
   "browserslist": {
     "production": [
@@ -45,6 +46,7 @@
     "@tsconfig/docusaurus": "^1.0.2",
     "@types/react": "^17.0.4",
     "@types/react-helmet": "^6.1.1",
+    "@types/react-modal": "^3.12.0",
     "@types/react-router-dom": "^5.1.7",
     "docusaurus-plugin-typedoc": "^0.12.1",
     "sass": "^1.32.13",

diff --git a/apps/website/src/components/ExpoSnippet.module.css b/apps/website/src/components/ExpoSnippet.module.css
diff --git a/apps/website/src/components/ExpoSnippet.module.scss b/apps/website/src/components/ExpoSnippet.module.scss
@@ -0,0 +1,91 @@
+@import '../css/shared.scss';
+
+.figure {
+  @extend .figure;
+  margin: 0 0 var(--ifm-leading) 0 !important;
+  padding: 0 !important;
+}
+
+.sourceContainer {
+  // padding: 0 var(--ifm-leading) 0 var(--ifm-leading);
+}
+
+.sourceContainer__code {
+  border-top-left-radius: var(--ifm-global-radius);
+  border-top-right-radius: var(--ifm-global-radius);
+  overflow: hidden;
+}
+
+.sourceContainer__fixRadius {
+  --ifm-global-radius: 0;
+  --ifm-leading: 0;
+}
+
+.caption {
+  @extend .figure__caption;
+  padding-bottom: 0;
+}
+
+.expoBox {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-top: var(--ifm-leading);
+  padding-bottom: var(--ifm-leading);
+}
+
+.expoBox__button {
+  cursor: grab;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.expoBox__span {
+  margin-left: var(--ifm-leading);
+  font-weight: bold;
+}
+
+/* EXPO */
+
+.expoIframe {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.modalContent {
+  width: calc(100vw - var(--modal-inset) * 2 - var(--scrollbar-width));
+  height: calc(100vh - var(--modal-inset) * 2);
+  max-width: 1024px;
+  margin: auto;
+}
+
+.modalContainer {
+  --modal-inset: calc(var(--ifm-leading) * 3);
+  --scrollbar-width: 10px;
+  margin: var(--modal-inset);
+  padding: 0;
+  z-index: 1000;
+  width: calc(100vw - var(--modal-inset) * 2) - var(--scrollbar-width);
+  height: calc(100vh - var(--modal-inset) * 2);
+}
+
+.modal__closeButton {
+  position: absolute;
+  top: var(--ifm-leading);
+  right: var(--ifm-leading);
+  font-size: 30px;
+  appearance: none;
+  background-color: var(--ifm-background-color);
+  color: var(--ifm-font-color-base);
+  border-radius: calc(var(--ifm-leading) * 2);
+  border: 0;
+  cursor: grab;
+}
+
+.overlay {
+  position: fixed;
+  inset: 0px;
+  background-color: rgba(0, 0, 0, 0.75);
+}
diff --git a/apps/website/src/components/ExpoSnippet.tsx b/apps/website/src/components/ExpoSnippet.tsx
@@ -3,10 +3,13 @@ import React, {
   PropsWithChildren,
   useEffect,
   useMemo,
-  useRef
+  useRef,
+  useState
 } from 'react';
 import useThemeContext from '@theme/hooks/useThemeContext';
-import styles from './ExpoSnippet.module.css';
+import styles from './ExpoSnippet.module.scss';
+import ReactModal from 'react-modal';
+import CodeBlock from '@theme/CodeBlock';
 
 function makeIframeSrcParamsQuery({
   name,
@@ -22,7 +25,8 @@ function makeIframeSrcParamsQuery({
   return [
     ['iframeId', iframeId],
     ['preview', 'true'],
-    ['platform', 'web'],
+    ['platform', 'my device'],
+    ['supportedPlatforms', 'ios,android'],
     name ? ['name', encodeURIComponent(name)] : null,
     description ? ['description', encodeURIComponent(description)] : null,
     ['theme', theme],
@@ -112,16 +116,14 @@ const ExpoIframe = memo(function ExpoIframe({
       className={styles.expoIframe}
       ref={ref}
       src={src}
-      width="100%"
-      height="100%"
       frameBorder="0"
       loading="lazy"
       data-snack-iframe={true}
     />
   );
 });
 
-export default function ExpoSnippet({
+function ExpoSnippet({
   snippet,
   title,
   caption,
@@ -133,16 +135,13 @@ export default function ExpoSnippet({
   version: string;
 }>) {
   const { isDarkTheme } = useThemeContext();
-  const normalSnippet = decodeURIComponent(snippet);
   const style: React.CSSProperties = {
-    height: Math.max(normalSnippet.split('\n').length * 18 + 48 + 36),
-    backgroundColor: isDarkTheme ? '#212121' : '#f9f9f9',
-    borderColor: isDarkTheme ? 'transparent' : 'lightgray'
+    backgroundColor: isDarkTheme ? '#212121' : '#f9f9f9'
   };
   return (
-    <div className={styles.expoContainer} style={style}>
+    <div className={styles.modalContent} style={style}>
       <ExpoIframe
-        code={normalSnippet}
+        code={snippet}
         theme={isDarkTheme ? 'dark' : 'light'}
         name={title}
         description={caption}
@@ -151,3 +150,87 @@ export default function ExpoSnippet({
     </div>
   );
 }
+
+const ExpoLogo = ({ color, size }) => (
+  <svg
+    width="24"
+    height="26"
+    viewBox="0 0 24 26"
+    style={{ width: size, height: size }}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M22.069 10.075a2.273 2.273 0 00-.887-.74 2.296 2.296 0 00-2.237.16 2.265 2.265 0 00-.77.859 2.016 2.016 0 00.392 2.274 3.342 3.342 0 002.23-.63 3.289 3.289 0 001.271-1.923zM15.3 1.3l-1.45-.788-6.31 3.481.503.27.957.498 1.732-.954 4.569-2.523-.001.016zm.584-.24a.225.225 0 01.16.15l2.114 6.182a.205.205 0 01-.1.269 4.063 4.063 0 00-1.798 1.974 4.017 4.017 0 00-.175 2.655 4.283 4.283 0 001.755 2.332c.842.55 1.852.79 2.854.68a.269.269 0 01.262.16l2.184 6.345a.256.256 0 01-.101.278l-6.712 3.89a.253.253 0 01-.101.02.27.27 0 01-.181-.03L13.69 24.5a.234.234 0 01-.1-.1l-4.6-10.483-7.005 3.95a.327.327 0 01-.272.01l-1.592-.898a.23.23 0 01-.1-.299l6.805-12.8a.243.243 0 01.11-.099L13.721.03a.259.259 0 01.241 0l1.923 1.03zM7.47 4.499L7.14 4.33.58 16.71l1.197.668 5.657-7.335a.275.275 0 01.231-.1.282.282 0 01.201.149l6.16 14.066 1.646 1.007L9.06 6.005l-.281-.798-1.318-.718.01.01zm10.145 7.382a2.51 2.51 0 01.12-1.663 2.54 2.54 0 011.138-1.23 2.798 2.798 0 013.261.4 2.513 2.513 0 01.073 3.568l-.073.073a2.77 2.77 0 01-3.788.01 2.719 2.719 0 01-.731-1.158z"
+      fill={color}
+    />
+  </svg>
+);
+
+export default function RenderHTMLCard({
+  snippet,
+  title,
+  caption,
+  html,
+  preferHtmlSrc,
+  ...props
+}: PropsWithChildren<{
+  snippet: string;
+  html: string;
+  title: string;
+  caption?: string;
+  preferHtmlSrc: boolean;
+  version: string;
+}>) {
+  const [isOpen, setIsOpen] = useState(false);
+  const normalSnippet = decodeURIComponent(snippet);
+  const onModalClose = () => setIsOpen(false);
+  console.info('isOpen', isOpen);
+  return (
+    <figure className={styles.figure}>
+      <div className={styles.sourceContainer}>
+        <div className={styles.sourceContainer__code}>
+          <div className={styles.sourceContainer__fixRadius}>
+            <CodeBlock className={preferHtmlSrc ? 'html' : 'jsx'} title={title}>
+              {preferHtmlSrc ? decodeURIComponent(html) : normalSnippet}
+            </CodeBlock>
+          </div>
+        </div>
+        <ReactModal
+          parentSelector={() => document.querySelector('body')}
+          overlayClassName={styles.overlay}
+          portalClassName={styles.portal}
+          className={styles.modalContainer}
+          isOpen={isOpen}
+          onRequestClose={onModalClose}
+          shouldCloseOnEsc
+          shouldCloseOnOverlayClick
+          appElement={document.body}
+          contentLabel="Expo Interactive Source">
+          <ExpoSnippet
+            snippet={normalSnippet}
+            title={title}
+            caption={caption}
+            {...props}
+          />
+          <button className={styles.modal__closeButton} onClick={onModalClose}>
+            X
+          </button>
+        </ReactModal>
+        {caption && (
+          <figcaption className={styles.caption}>{caption}</figcaption>
+        )}
+      </div>
+      <div className={styles.expoBox}>
+        <button
+          onClick={() => setIsOpen(true)}
+          className={`${styles.expoBox__button} button button--outline button--primary`}
+          role="button">
+          <ExpoLogo color="var(--ifm-button-color)" size={40} />
+          <span className={styles.expoBox__span}>
+            Open in Expo to See it Live
+          </span>
+        </button>
+      </div>
+    </figure>
+  );
+}
diff --git a/apps/website/src/components/SvgFigure.module.scss b/apps/website/src/components/SvgFigure.module.scss
@@ -0,0 +1,13 @@
+@import '../css/shared.scss';
+
+.figure {
+  @extend .figure;
+}
+
+.figure__caption {
+  @extend .figure__caption;
+}
+
+.svgContainer {
+  padding: 0 var(--ifm-leading);
+}
diff --git a/apps/website/src/components/SvgFigure.tsx b/apps/website/src/components/SvgFigure.tsx
@@ -1,8 +1,8 @@
 /* eslint-disable react-native/no-inline-styles */
 import React from 'react';
 import { SvgAssetType } from '@doc/pages';
-import useThemeContext from '@theme/hooks/useThemeContext';
 import DataFlowSvg from '../svg/data-flow.svg';
+import styles from './SvgFigure.module.scss';
 
 const svgAssetsIndex: Record<SvgAssetType, typeof DataFlowSvg> = {
   'data-flow': DataFlowSvg
@@ -16,29 +16,17 @@ export default function SvgFigure({
   description: string;
 }) {
   const SvgComponent = svgAssetsIndex[asset];
-  const { isDarkTheme } = useThemeContext();
-  const content = isDarkTheme ? 'white' : 'black';
-  const secondaryContent = isDarkTheme ? 'gray' : 'gray';
-  const codeBlockBg = 'rgba(125,125,125,0.2)';
   return (
-    <figure
-      style={{
-        borderColor: content,
-        borderWidth: 1,
-        borderStyle: 'solid',
-        padding: 30,
-        margin: 0
-      }}>
-      <SvgComponent
-        content={content}
-        secondaryContent={secondaryContent}
-        codeBlockBg={codeBlockBg}
-        width="100%"
-      />
-      <figcaption
-        style={{ fontStyle: 'italic', textAlign: 'center', paddingTop: 30 }}>
-        {description}
-      </figcaption>
+    <figure className={styles.figure}>
+      <div className={styles.svgContainer}>
+        <SvgComponent
+          content="var(--ifm-font-color-base)"
+          secondaryContent="var(--ifm-font-color-secondary)"
+          codeBlockBg="transparent"
+          width="100%"
+        />
+      </div>
+      <figcaption className={styles.figure__caption}>{description}</figcaption>
     </figure>
   );
 }
diff --git a/apps/website/src/css/custom.scss b/apps/website/src/css/custom.scss
@@ -16,6 +16,11 @@
   --ifm-color-primary-lighter: rgb(102, 212, 189);
   --ifm-color-primary-lightest: rgb(146, 224, 208);
   --ifm-code-font-size: 95%;
+  --ifm-font-color-secondary: rgb(131, 149, 167);
+}
+
+.ReactModal__Body--open .navbar.navbar--fixed-top {
+  z-index: 0;
 }
 
 .docusaurus-highlight-code-line {
@@ -45,4 +50,4 @@
     margin-top: 0;
     margin-bottom: 0;
   }
-}
+}
diff --git a/apps/website/src/css/shared.scss b/apps/website/src/css/shared.scss
@@ -0,0 +1,12 @@
+.figure {
+  padding: var(--ifm-leading);
+  background-color: var(--ifm-hover-overlay);
+  margin: 0 0 var(--ifm-leading) 0;
+  border-radius: var(--ifm-global-radius);
+}
+
+.figure__caption {
+  padding: var(--ifm-leading);
+  font-style: italic;
+  text-align: center;
+}
diff --git a/doc-tools/doc-mdx-gen-cli/src/MdxToolkitProvider.tsx b/doc-tools/doc-mdx-gen-cli/src/MdxToolkitProvider.tsx
@@ -1,4 +1,5 @@
 import React, { PropsWithChildren, Fragment } from 'react';
+import { HTMLSourceInline } from 'react-native-render-html';
 import { ToolkitProvider, UIToolkitConfig } from '@doc/pages';
 
 const Chapter = ({ children, title }: PropsWithChildren<{ title: string }>) => (
@@ -31,8 +32,14 @@ export default function MdxToolkitProvider({
     ListItem: ({ children }) => <li>{children}</li>,
     Paragraph: ({ children }) => <p>{children}</p>,
     Bold: ({ children }) => <strong>{children}</strong>,
-    RenderHtmlCard: ({ caption, snippet, title }) => (
-      <exposnippet title={title} caption={caption} snippet={snippet} />
+    RenderHtmlCard: ({ caption, snippet, title, props, preferHtmlSrc }) => (
+      <exposnippet
+        preferHtmlSrc={preferHtmlSrc}
+        html={(props.source as HTMLSourceInline).html}
+        title={title}
+        caption={caption}
+        snippet={snippet}
+      />
     ),
     SourceDisplay: (props) => <codeblockds {...props} />,
     TNodeTransformDisplay: ({ html, snaphost, caption, title }) => {