myst-to-react 0.1.14

package/README.md

@@ -0,0 +1,6 @@
+# myst-to-react
+
+[![myst-to-react on npm](https://img.shields.io/npm/v/myst-to-react.svg)](https://www.npmjs.com/package/myst-to-react)
+[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/curvenote/curvenote/blob/main/LICENSE)
+
+Convert a MyST AST to React.

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "myst-to-react",
+  "version": "0.1.14",
+  "main": "./src/index.tsx",
+  "types": "./src/index.tsx",
+  "files": [
+    "src"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "lint": "eslint \"src/**/*.ts*\" \"src/**/*.tsx\" -c ./.eslintrc.js",
+    "lint:format": "prettier --check \"src/**/*.{ts,tsx,md}\""
+  },
+  "dependencies": {
+    "@curvenote/blocks": "*",
+    "@curvenote/connect": "^0.0.6",
+    "@curvenote/nbtx": "^0.1.11",
+    "@curvenote/ui-providers": "*",
+    "@headlessui/react": "^1.6.5",
+    "@heroicons/react": "^1.0.6",
+    "@popperjs/core": "^2.11.5",
+    "@remix-run/react": "^1.6.3",
+    "ansi-to-react": "^6.1.6",
+    "classnames": "^2.3.1",
+    "mermaid": "^9.1.6",
+    "myst-spec": "^0.0.4",
+    "myst-to-tex": "*",
+    "myst-transforms": "*",
+    "mystjs": "^0.0.13",
+    "nanoid": "^4.0.0",
+    "react-dom": "^17.0.2",
+    "react-popper": "^2.3.0",
+    "react-redux": "^8.0.2",
+    "react-syntax-highlighter": "^15.5.0",
+    "swr": "^1.3.0",
+    "unist-util-select": "^4.0.1"
+  },
+  "devDependencies": {
+    "@types/mermaid": "^8.2.9",
+    "@types/react": "^17.0.37",
+    "@types/react-dom": "^17.0.11",
+    "eslint": "^8.21.0",
+    "eslint-config-curvenote": "*",
+    "react": "^17.0.2",
+    "tsconfig": "*",
+    "typescript": "latest"
+  }
+}

package/src/admonitions.tsx

@@ -0,0 +1,183 @@
+import type * as spec from 'myst-spec';
+import React, { useState } from 'react';
+import type { NodeRenderer } from './types';
+import {
+  InformationCircleIcon,
+  ExclamationIcon as OExclamationIcon,
+  SpeakerphoneIcon,
+  PencilAltIcon,
+  ArrowCircleRightIcon,
+} from '@heroicons/react/outline';
+import {
+  ExclamationIcon as SExclamationIcon,
+  ExclamationCircleIcon as SExclamationCircleIcon,
+  XCircleIcon,
+  LightBulbIcon,
+  LightningBoltIcon,
+  ChevronRightIcon,
+} from '@heroicons/react/solid';
+import classNames from 'classnames';
+// import { AdmonitionKind } from 'mystjs';
+
+// TODO: get this from myst-spec?
+enum AdmonitionKind {
+  admonition = 'admonition',
+  attention = 'attention',
+  caution = 'caution',
+  danger = 'danger',
+  error = 'error',
+  important = 'important',
+  hint = 'hint',
+  note = 'note',
+  seealso = 'seealso',
+  tip = 'tip',
+  warning = 'warning',
+}
+
+type ColorAndKind = {
+  kind: AdmonitionKind;
+  color: 'blue' | 'green' | 'yellow' | 'red';
+};
+
+function getClasses(className?: string) {
+  const classes =
+    className
+      ?.split(' ')
+      .map((s) => s.trim().toLowerCase())
+      .filter((s) => !!s) ?? [];
+  return [...new Set(classes)];
+}
+
+function getFirstKind({
+  kind,
+  classes = [],
+}: {
+  kind?: AdmonitionKind | string;
+  classes?: string[];
+}): ColorAndKind {
+  if (kind === AdmonitionKind.note || classes.includes('note')) {
+    return { kind: AdmonitionKind.note, color: 'blue' };
+  }
+  if (kind === AdmonitionKind.important || classes.includes('important')) {
+    return { kind: AdmonitionKind.important, color: 'blue' };
+  }
+  if (kind === AdmonitionKind.hint || classes.includes('hint')) {
+    return { kind: AdmonitionKind.hint, color: 'green' };
+  }
+  if (kind === AdmonitionKind.seealso || classes.includes('seealso')) {
+    return { kind: AdmonitionKind.seealso, color: 'green' };
+  }
+  if (kind === AdmonitionKind.tip || classes.includes('tip')) {
+    return { kind: AdmonitionKind.tip, color: 'green' };
+  }
+  if (kind === AdmonitionKind.attention || classes.includes('attention')) {
+    return { kind: AdmonitionKind.attention, color: 'yellow' };
+  }
+  if (kind === AdmonitionKind.warning || classes.includes('warning')) {
+    return { kind: AdmonitionKind.warning, color: 'yellow' };
+  }
+  if (kind === AdmonitionKind.caution || classes.includes('caution')) {
+    return { kind: AdmonitionKind.caution, color: 'yellow' };
+  }
+  if (kind === AdmonitionKind.danger || classes.includes('danger')) {
+    return { kind: AdmonitionKind.danger, color: 'red' };
+  }
+  if (kind === AdmonitionKind.error || classes.includes('error')) {
+    return { kind: AdmonitionKind.error, color: 'red' };
+  }
+  return { kind: AdmonitionKind.note, color: 'blue' };
+}
+
+const iconClass = 'h-8 w-8 inline-block pl-2 mr-2 -translate-y-[1px]';
+
+function AdmonitionIcon({ kind }: { kind: AdmonitionKind }) {
+  if (kind === AdmonitionKind.note) return <InformationCircleIcon className={iconClass} />;
+  if (kind === AdmonitionKind.caution) return <OExclamationIcon className={iconClass} />;
+  if (kind === AdmonitionKind.warning) return <SExclamationIcon className={iconClass} />;
+  if (kind === AdmonitionKind.danger) return <SExclamationCircleIcon className={iconClass} />;
+  if (kind === AdmonitionKind.error) return <XCircleIcon className={iconClass} />;
+  if (kind === AdmonitionKind.attention) return <SpeakerphoneIcon className={iconClass} />;
+  if (kind === AdmonitionKind.tip) return <PencilAltIcon className={iconClass} />;
+  if (kind === AdmonitionKind.hint) return <LightBulbIcon className={iconClass} />;
+  if (kind === AdmonitionKind.important) return <LightningBoltIcon className={iconClass} />;
+  if (kind === AdmonitionKind.seealso) return <ArrowCircleRightIcon className={iconClass} />;
+  return <InformationCircleIcon className={iconClass} />;
+}
+
+export const AdmonitionTitle: NodeRenderer<spec.AdmonitionTitle> = (node, children) => {
+  return children;
+};
+
+function Admonition({
+  title,
+  kind,
+  color,
+  dropdown,
+  children,
+}: ColorAndKind & { title: React.ReactNode; children: React.ReactNode[]; dropdown: boolean }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <aside
+      className={classNames(
+        'admonition rounded-md my-4 border-l-4 shadow-md dark:shadow-2xl dark:shadow-neutral-900 overflow-hidden',
+        {
+          'border-blue-500': color === 'blue',
+          'border-green-600': color === 'green',
+          'border-amber-600': color === 'yellow',
+          'border-red-600': color === 'red',
+        },
+      )}
+    >
+      <p
+        className={classNames('admonition-header m-0 text-lg font-medium py-1', {
+          'text-blue-600 bg-blue-50 dark:bg-slate-900': color === 'blue',
+          'text-green-600 bg-green-50 dark:bg-slate-900': color === 'green',
+          'text-amber-600 bg-amber-50 dark:bg-slate-900': color === 'yellow',
+          'text-red-600 bg-red-50 dark:bg-slate-900': color === 'red',
+          'cursor-pointer hover:shadow-[inset_0_0_0px_20px_#00000003] dark:hover:shadow-[inset_0_0_0px_20px_#FFFFFF03]':
+            dropdown,
+        })}
+        onClick={dropdown ? () => setOpen(!open) : undefined}
+      >
+        <AdmonitionIcon kind={kind} />
+        <span className="text-neutral-900 dark:text-white">
+          {dropdown && (
+            <span className="block float-right font-thin text-sm text-neutral-700 dark:text-neutral-200">
+              {!open && 'Click to show'}
+              <ChevronRightIcon
+                className={classNames(iconClass, 'transition-transform', {
+                  'rotate-90 -translate-y-[5px]': open,
+                })}
+              />
+            </span>
+          )}
+          {title}
+        </span>
+      </p>
+      {(!dropdown || open) && (
+        <div className="px-4 py-1 bg-gray-50 dark:bg-stone-800">{children}</div>
+      )}
+    </aside>
+  );
+}
+
+export const AdmonitionRenderer: NodeRenderer<spec.Admonition> = (node, children) => {
+  const [title, ...rest] = children as any[];
+  const classes = getClasses(node.class);
+  const { kind, color } = getFirstKind({ kind: node.kind, classes });
+  const isDropdown = classes.includes('dropdown');
+
+  return (
+    <Admonition key={node.key} title={title} kind={kind} color={color} dropdown={isDropdown}>
+      {rest}
+    </Admonition>
+  );
+};
+
+const ADMONITION_RENDERERS = {
+  admonition: AdmonitionRenderer,
+  admonitionTitle: AdmonitionTitle,
+};
+
+export default ADMONITION_RENDERERS;

package/src/basic.tsx

@@ -0,0 +1,217 @@
+import type * as spec from 'myst-spec';
+import { HashLink } from './heading';
+import type { NodeRenderer } from './types';
+
+type TableExts = {
+  rowspan?: number;
+  colspan?: number;
+};
+
+type Delete = {
+  type: 'delete';
+};
+
+type Underline = {
+  type: 'underline';
+};
+
+type SmallCaps = {
+  type: 'smallcaps';
+};
+
+type DefinitionList = {
+  type: 'definitionList';
+};
+
+type DefinitionTerm = {
+  type: 'definitionTerm';
+};
+
+type DefinitionDescription = {
+  type: 'definitionDescription';
+};
+
+type CaptionNumber = {
+  type: 'captionNumber';
+  kind: string;
+  identifier: string;
+};
+
+type BasicNodeRenderers = {
+  strong: NodeRenderer<spec.Strong>;
+  emphasis: NodeRenderer<spec.Emphasis>;
+  link: NodeRenderer<spec.Link>;
+  paragraph: NodeRenderer<spec.Paragraph>;
+  break: NodeRenderer<spec.Break>;
+  inlineMath: NodeRenderer<spec.InlineMath>;
+  math: NodeRenderer<spec.Math>;
+  list: NodeRenderer<spec.List>;
+  listItem: NodeRenderer<spec.ListItem>;
+  container: NodeRenderer<spec.Container>;
+  caption: NodeRenderer<spec.Caption>;
+  blockquote: NodeRenderer<spec.Blockquote>;
+  thematicBreak: NodeRenderer<spec.ThematicBreak>;
+  subscript: NodeRenderer<spec.Subscript>;
+  superscript: NodeRenderer<spec.Superscript>;
+  abbreviation: NodeRenderer<spec.Abbreviation>;
+  // Tables
+  table: NodeRenderer<spec.Table>;
+  tableRow: NodeRenderer<spec.TableRow>;
+  tableCell: NodeRenderer<spec.TableCell & TableExts>;
+  // Comment
+  comment: NodeRenderer<spec.Comment>;
+  mystComment: NodeRenderer<spec.Comment>;
+  // Our additions
+  captionNumber: NodeRenderer<CaptionNumber>;
+  delete: NodeRenderer<Delete>;
+  underline: NodeRenderer<Underline>;
+  smallcaps: NodeRenderer<SmallCaps>;
+  // definitions
+  definitionList: NodeRenderer<DefinitionList>;
+  definitionTerm: NodeRenderer<DefinitionTerm>;
+  definitionDescription: NodeRenderer<DefinitionDescription>;
+};
+
+const BASIC_RENDERERS: BasicNodeRenderers = {
+  delete(node, children) {
+    return <del key={node.key}>{children}</del>;
+  },
+  strong(node, children) {
+    return <strong key={node.key}>{children}</strong>;
+  },
+  emphasis(node, children) {
+    return <em key={node.key}>{children}</em>;
+  },
+  underline(node, children) {
+    return (
+      <span key={node.key} style={{ textDecoration: 'underline' }}>
+        {children}
+      </span>
+    );
+  },
+  smallcaps(node, children) {
+    return (
+      <span key={node.key} style={{ fontVariant: 'small-caps' }}>
+        {children}
+      </span>
+    );
+  },
+  link(node, children) {
+    return (
+      <a key={node.key} target="_blank" href={node.url} rel="noreferrer">
+        {children}
+      </a>
+    );
+  },
+  paragraph(node, children) {
+    return <p key={node.key}>{children}</p>;
+  },
+  break(node) {
+    return <br key={node.key} />;
+  },
+  inlineMath(node) {
+    return <code key={node.key}>{node.value}</code>;
+  },
+  math(node) {
+    return <code key={node.key}>{node.value}</code>;
+  },
+  list(node, children) {
+    if (node.ordered) {
+      return (
+        <ol key={node.key} start={node.start || undefined}>
+          {children}
+        </ol>
+      );
+    }
+    return <ul key={node.key}>{children}</ul>;
+  },
+  listItem(node, children) {
+    return <li key={node.key}>{children}</li>;
+  },
+  container(node, children) {
+    return (
+      <figure key={node.key} id={node.html_id || node.identifier || node.key} className={node.kind}>
+        {children}
+      </figure>
+    );
+  },
+  caption(node, children) {
+    return (
+      <figcaption key={node.key} className="group">
+        {children}
+      </figcaption>
+    );
+  },
+  blockquote(node, children) {
+    return <blockquote key={node.key}>{children}</blockquote>;
+  },
+  thematicBreak(node) {
+    return <hr key={node.key} />;
+  },
+  captionNumber(node, children) {
+    function backwardsCompatibleLabel(value: string, kind?: string) {
+      const capital = kind?.slice(0, 1).toUpperCase() ?? 'F';
+      const body = kind?.slice(1) ?? 'igure';
+      return `${capital}${body}: ${children}`;
+    }
+    const label =
+      typeof children === 'string' ? backwardsCompatibleLabel(children, node.kind) : children;
+    const id = node.html_id || node.identifier || node.key;
+    return (
+      <span key={node.key} className="font-bold mr-1 select-none relative">
+        <HashLink id={id} align="left" kind={node.kind} />
+        {label}
+      </span>
+    );
+  },
+  table(node, children) {
+    return <table key={node.key}>{children}</table>;
+  },
+  tableRow(node, children) {
+    return <tr key={node.key}>{children}</tr>;
+  },
+  tableCell(node, children) {
+    const ifGreaterThanOne = (num?: number) => (num === 1 ? undefined : num);
+    const attrs = {
+      key: node.key,
+      rowSpan: ifGreaterThanOne(node.rowspan),
+      colSpan: ifGreaterThanOne(node.colspan),
+    };
+    if (node.header) return <th {...attrs}>{children}</th>;
+    return <td {...attrs}>{children}</td>;
+  },
+  subscript(node, children) {
+    return <sub key={node.key}>{children}</sub>;
+  },
+  superscript(node, children) {
+    return <sup key={node.key}>{children}</sup>;
+  },
+  abbreviation(node, children) {
+    return (
+      <abbr key={node.key} title={node.title}>
+        {children}
+      </abbr>
+    );
+  },
+  mystComment() {
+    return null;
+  },
+  comment() {
+    return null;
+  },
+  definitionList(node, children) {
+    return <dl key={node.key}>{children}</dl>;
+  },
+  definitionTerm(node, children) {
+    return (
+      <dt key={node.key}>
+        <strong>{children}</strong>
+      </dt>
+    );
+  },
+  definitionDescription(node, children) {
+    return <dd key={node.key}>{children}</dd>;
+  },
+};
+
+export default BASIC_RENDERERS;

package/src/cite.tsx

@@ -0,0 +1,94 @@
+import classNames from 'classnames';
+import { useReferences } from '@curvenote/ui-providers';
+import type { NodeRenderer } from './types';
+import { useState } from 'react';
+import { ClickPopover } from './components/ClickPopover';
+import { InlineError } from './inlineError';
+
+function CiteChild({ label }: { label: string }) {
+  const references = useReferences();
+  const { html } = references?.cite?.data[label] ?? {};
+  return <div dangerouslySetInnerHTML={{ __html: html || '' }} />;
+}
+
+export const CiteGroup: NodeRenderer = (node, children) => {
+  return (
+    <span
+      key={node.key}
+      className={classNames('cite-group', {
+        narrative: node.kind === 'narrative',
+        parenthetical: node.kind === 'parenthetical',
+      })}
+    >
+      {children}
+    </span>
+  );
+};
+
+export const Cite: NodeRenderer = (node, children) => {
+  if (node.error) {
+    return <InlineError key={node.key} value={node.label} message={'Citation Not Found'} />;
+  }
+  return (
+    <ClickPopover key={node.key} card={<CiteChild label={node.label as string} />}>
+      {children}
+    </ClickPopover>
+  );
+};
+
+const HIDE_OVER_N_REFERENCES = 5;
+
+export function Bibliography() {
+  const references = useReferences();
+  const { order, data } = references?.cite ?? {};
+  const filtered = order?.filter((l) => l);
+  const [hidden, setHidden] = useState(true);
+  if (!filtered || !data || filtered.length === 0) return null;
+  const refs = hidden ? filtered.slice(0, HIDE_OVER_N_REFERENCES) : filtered;
+  return (
+    <section>
+      {filtered.length > HIDE_OVER_N_REFERENCES && (
+        <button
+          onClick={() => setHidden(!hidden)}
+          className="float-right text-xs p-1 px-2 border rounded hover:border-blue-500 dark:hover:border-blue-400"
+        >
+          {hidden ? 'Show All' : 'Collapse'}
+        </button>
+      )}
+      <header className="text-lg font-semibold text-stone-900 dark:text-white">References</header>
+      <div className="text-xs mb-8 pl-3 text-stone-500 dark:text-stone-300">
+        <ol>
+          {refs.map((label) => {
+            const { html } = data[label];
+            return (
+              <li
+                key={label}
+                className="break-words"
+                id={`cite-${label}`}
+                dangerouslySetInnerHTML={{ __html: html || '' }}
+              />
+            );
+          })}
+          {filtered.length > HIDE_OVER_N_REFERENCES && (
+            <li className="list-none text-center">
+              <button
+                onClick={() => setHidden(!hidden)}
+                className="p-2 border rounded hover:border-blue-500 dark:hover:border-blue-400"
+              >
+                {hidden ? `Show all ${filtered.length} references` : 'Collapse references'}
+              </button>
+            </li>
+          )}
+        </ol>
+      </div>
+    </section>
+  );
+}
+
+const CITE_RENDERERS: Record<string, NodeRenderer> = {
+  citeGroup: CiteGroup,
+  cite: Cite,
+  bibliography: (node) => <Bibliography key={node.key}></Bibliography>,
+};
+
+export default CITE_RENDERERS;

package/src/code.tsx

@@ -0,0 +1,119 @@
+import type { Code, InlineCode } from 'myst-spec';
+import type { NodeRenderer } from './types';
+import { useTheme } from '@curvenote/ui-providers';
+import { LightAsync as SyntaxHighlighter } from 'react-syntax-highlighter';
+import light from 'react-syntax-highlighter/dist/cjs/styles/hljs/xcode';
+import dark from 'react-syntax-highlighter/dist/cjs/styles/hljs/vs2015';
+import classNames from 'classnames';
+import { CopyIcon } from './components/CopyIcon';
+
+type Props = {
+  value: string;
+  lang?: string;
+  showCopy?: boolean;
+  showLineNumbers?: boolean;
+  startingLineNumber?: number;
+  emphasizeLines?: number[];
+  className?: string;
+};
+
+export function CodeBlock(props: Props) {
+  const { isLight } = useTheme();
+  const {
+    value,
+    lang,
+    emphasizeLines,
+    showLineNumbers,
+    className,
+    showCopy = true,
+    startingLineNumber = 1,
+  } = props;
+  const highlightLines = new Set(emphasizeLines);
+
+  return (
+    <div className={classNames('relative group not-prose overflow-auto', className)}>
+      <SyntaxHighlighter
+        language={lang}
+        startingLineNumber={startingLineNumber}
+        showLineNumbers={showLineNumbers}
+        style={isLight ? light : dark}
+        wrapLines
+        lineNumberContainerStyle={{
+          // This stops page content shifts
+          display: 'inline-block',
+          float: 'left',
+          minWidth: '1.25em',
+          paddingRight: '1em',
+          textAlign: 'right',
+          userSelect: 'none',
+          borderLeft: '4px solid transparent',
+        }}
+        lineProps={(line) => {
+          if (typeof line === 'boolean') return {};
+          return highlightLines.has(line)
+            ? ({
+                'data-line-number': `${line}`,
+                'data-highlight': 'true',
+              } as any)
+            : ({ 'data-line-number': `${line}` } as any);
+        }}
+        customStyle={{ padding: '0.8rem' }}
+      >
+        {value}
+      </SyntaxHighlighter>
+      {showCopy && (
+        <div className="absolute hidden top-1 right-1 group-hover:block">
+          <CopyIcon text={value} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+const code: NodeRenderer<Code> = (node) => {
+  return (
+    <CodeBlock
+      key={node.key}
+      className="rounded shadow-md dark:shadow-2xl dark:shadow-neutral-900 my-8 text-sm border border-l-4 border-l-blue-400 border-gray-200 dark:border-l-blue-400 dark:border-gray-800"
+      value={node.value || ''}
+      lang={node.lang}
+      emphasizeLines={node.emphasizeLines}
+      showLineNumbers={node.showLineNumbers}
+      startingLineNumber={node.startingLineNumber}
+    />
+  );
+};
+
+function isColor(maybeColorHash: string): string | undefined {
+  if (!maybeColorHash || maybeColorHash.length > 9) return undefined;
+  if (!new Set([4, 7, 9]).has(maybeColorHash.length)) return undefined;
+  const match = /^#([0-9A-Fa-f]{3,8})$/.exec(maybeColorHash);
+  if (!match) return undefined;
+  const color = match[1];
+  return color;
+}
+
+const inlineCode: NodeRenderer<InlineCode> = (node, children) => {
+  if (isColor(node.value)) {
+    return (
+      <code
+        key={node.key}
+        className="bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-100 px-1 rounded"
+      >
+        {children}
+        <span
+          style={{ backgroundColor: node.value }}
+          className="inline-block w-[10px] h-[10px] rounded-full ml-1"
+        ></span>
+      </code>
+    );
+  }
+  return <code key={node.key}>{children}</code>;
+};
+
+const CODE_RENDERERS = {
+  code,
+  inlineCode,
+};
+
+export default CODE_RENDERERS;