myst-to-react 0.1.18 → 0.1.20

package/src/basic.tsx

@@ -1,229 +0,0 @@
-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) {
-    // TODO: actually render the tbody on the server if it isn't included here.
-    return (
-      <table key={node.key}>
-        <tbody>{children}</tbody>
-      </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) {
-    let strongChildren: React.ReactNode = children;
-    if (Array.isArray(children)) {
-      const allowedStrongTypes = new Set(['emphasis']);
-      strongChildren = children.map((child, i) => {
-        if (typeof child === 'string') return <strong key={node.key + i}>{child}</strong>;
-        if (allowedStrongTypes.has(child?.type)) return <strong key={node.key + i}>{child}</strong>;
-        return child;
-      });
-    } else if (typeof children === 'string') {
-      strongChildren = <strong key={node.key + '0'}>{children}</strong>;
-    }
-    return <dt key={node.key}>{strongChildren}</dt>;
-  },
-  definitionDescription(node, children) {
-    return <dd key={node.key}>{children}</dd>;
-  },
-};
-
-export default BASIC_RENDERERS;

package/src/card.tsx

@@ -1,153 +0,0 @@
-import React from 'react';
-import type { NodeRenderer } from './types';
-import classNames from 'classnames';
-import { Link } from '@remix-run/react';
-// import { AdmonitionKind } from 'mystjs';
-
-type CardSpec = {
-  type: 'card';
-  url?: string;
-  static?: boolean;
-};
-type CardTitleSpec = {
-  type: 'cardTitle';
-};
-type HeaderSpec = {
-  type: 'header';
-};
-type FooterSpec = {
-  type: 'footer';
-};
-
-export const Header: NodeRenderer<HeaderSpec> = (node, children) => {
-  return (
-    <header
-      key={node.key}
-      className="m-0 py-1 pl-3 bg-gray-50 dark:bg-slate-900 border-b border-gray-100 dark:border-gray-800"
-    >
-      {children}
-    </header>
-  );
-};
-
-export const Footer: NodeRenderer<FooterSpec> = (node, children) => {
-  return (
-    <footer
-      key={node.key}
-      className="m-0 py-1 pl-3 bg-gray-50 dark:bg-slate-900 border-t border-gray-100 dark:border-gray-800"
-    >
-      {children}
-    </footer>
-  );
-};
-
-export const CardTitle: NodeRenderer<CardTitleSpec> = (node, children) => {
-  return (
-    <div key={node.key} className="pt-3 font-bold group-hover:underline">
-      {children}
-    </div>
-  );
-};
-
-type Parts = {
-  header?: React.ReactNode;
-  body?: React.ReactNode;
-  footer?: React.ReactNode;
-};
-
-function getParts(children: React.ReactNode): Parts {
-  const parts: Parts = {};
-  if (!Array.isArray(children)) return parts;
-  const next = [...children];
-  if (next[0]?.type === 'header') {
-    parts.header = next.splice(0, 1);
-  }
-  if (next[next.length - 1]?.type === 'footer') {
-    parts.footer = next.splice(-1, 1);
-  }
-  parts.body = next;
-  return parts;
-}
-
-function ExternalOrInternalLink({
-  to,
-  className,
-  isStatic,
-  prefetch = 'intent',
-  children,
-}: {
-  to: string;
-  className?: string;
-  isStatic?: boolean;
-  prefetch?: 'intent' | 'render' | 'none';
-  children: React.ReactNode;
-}) {
-  if (to.startsWith('http') || isStatic) {
-    return (
-      <a href={to} className={className} target="_blank" rel="noopener noreferrer">
-        {children}
-      </a>
-    );
-  }
-  return (
-    <Link to={to} className={className} prefetch={prefetch}>
-      {children}
-    </Link>
-  );
-}
-
-function Card({
-  children,
-  url,
-  isStatic,
-}: {
-  children: React.ReactNode;
-  url?: string;
-  isStatic?: boolean;
-}) {
-  const parts = getParts(children);
-  const link = !!url;
-  const sharedStyle =
-    'rounded-md shadow dark:shadow-neutral-800 overflow-hidden border border-gray-100 dark:border-gray-800 flex flex-col';
-  if (link) {
-    return (
-      <ExternalOrInternalLink
-        to={url}
-        isStatic={isStatic}
-        className={classNames(
-          sharedStyle,
-          'block font-normal no-underline cursor-pointer group',
-          'hover:border-blue-500 dark:hover:border-blue-400',
-        )}
-      >
-        {parts.header}
-        <div className="py-2 px-4 flex-grow">{parts.body}</div>
-        {parts.footer}
-      </ExternalOrInternalLink>
-    );
-  }
-  return (
-    <div className={sharedStyle}>
-      {parts.header}
-      <div className="py-2 px-4 flex-grow">{parts.body}</div>
-      {parts.footer}
-    </div>
-  );
-}
-
-export const CardRenderer: NodeRenderer<CardSpec> = (node, children) => {
-  return (
-    <Card key={node.key} url={node.url} isStatic={node.static || false}>
-      {children}
-    </Card>
-  );
-};
-
-const CARD_RENDERERS = {
-  card: CardRenderer,
-  cardTitle: CardTitle,
-  header: Header,
-  footer: Footer,
-};
-
-export default CARD_RENDERERS;

package/src/cite.tsx

@@ -1,43 +0,0 @@
-import classNames from 'classnames';
-import { useReferences } from '@curvenote/ui-providers';
-import type { NodeRenderer } from './types';
-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 CITE_RENDERERS: Record<string, NodeRenderer> = {
-  citeGroup: CiteGroup,
-  cite: Cite,
-};
-
-export default CITE_RENDERERS;

package/src/code.tsx

@@ -1,119 +0,0 @@
-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;

package/src/components/ClickPopover.tsx

@@ -1,56 +0,0 @@
-import type { ElementType } from 'react';
-import React, { useState } from 'react';
-import { Popover, Transition } from '@headlessui/react';
-import { usePopper } from 'react-popper';
-import classNames from 'classnames';
-
-export function ClickPopover({
-  children,
-  card,
-  as = 'cite',
-}: {
-  children: React.ReactNode;
-  card: React.ReactNode | ((args: { open: boolean; close: () => void }) => React.ReactNode);
-  as?: ElementType;
-}) {
-  const [referenceElement, setReferenceElement] = useState<HTMLSpanElement | null>(null);
-  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
-  const { styles, attributes } = usePopper(referenceElement, popperElement);
-  return (
-    <Popover as="span">
-      {({ open, close }) => (
-        <>
-          <Popover.Button
-            ref={setReferenceElement}
-            as={as}
-            className={classNames(
-              { 'border-dotted': !open },
-              'cursor-zoom-in border-b-2 border-b-blue-600 hover:text-blue-600 hover:border-solid',
-              { 'text-blue-600 border-solid': open },
-            )}
-          >
-            {children}
-          </Popover.Button>
-          <Popover.Panel
-            className="exclude-from-outline absolute z-30 sm:max-w-[500px]"
-            ref={setPopperElement}
-            style={{ ...styles.popper }}
-            {...attributes.popper}
-          >
-            <Transition
-              className="my-2 p-4 shadow-xl bg-white dark:bg-zinc-900 text-sm dark:text-white rounded border-2 border-slate-200 dark:border-zinc-500 break-words"
-              enter="transition ease-out duration-200"
-              enterFrom="opacity-0 translate-y-1"
-              enterTo="opacity-100 translate-y-0"
-              leave="transition ease-in duration-150"
-              leaveFrom="opacity-100 translate-y-0"
-              leaveTo="opacity-0 translate-y-1"
-            >
-              {open && (typeof card === 'function' ? card({ open, close }) : card)}
-            </Transition>
-          </Popover.Panel>
-        </>
-      )}
-    </Popover>
-  );
-}

package/src/components/CopyIcon.tsx

@@ -1,40 +0,0 @@
-import DuplicateIcon from '@heroicons/react/outline/DuplicateIcon';
-import CheckIcon from '@heroicons/react/outline/CheckIcon';
-import { useState } from 'react';
-import classNames from 'classnames';
-
-export function CopyIcon({ text }: { text: string }) {
-  const [copied, setCopied] = useState(false);
-  const onClick = () => {
-    if (copied) return;
-    navigator.clipboard.writeText(text).then(() => {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 3000);
-    });
-  };
-  return (
-    <button
-      title={copied ? 'Copied!!' : 'Copy to Clipboard'}
-      suppressHydrationWarning
-      className={classNames(
-        'inline-flex items-center opacity-60 hover:opacity-100 active:opacity-40 cursor-pointer ml-2',
-        'transition-color duration-200 ease-in-out',
-        {
-          // This is hidden if on the server or no clipboard access
-          'sr-only hidden': typeof document === 'undefined' || !navigator.clipboard,
-          'text-primary-500 border-primary-500': !copied,
-          'text-success border-success ': copied,
-        },
-      )}
-      onClick={onClick}
-      aria-pressed={copied ? 'true' : 'false'}
-      aria-label="Copy code to clipboard"
-    >
-      {copied ? (
-        <CheckIcon className="w-[24px] h-[24px] text-success" />
-      ) : (
-        <DuplicateIcon className="w-[24px] h-[24px]" />
-      )}
-    </button>
-  );
-}

package/src/components/HoverPopover.tsx

@@ -1,60 +0,0 @@
-import React, { useRef, useState } from 'react';
-import { Transition } from '@headlessui/react';
-import { usePopper } from 'react-popper';
-
-export function HoverPopover({
-  children,
-  card,
-}: {
-  children: React.ReactNode;
-  card: React.ReactNode | ((args: { open: boolean; close?: () => void }) => React.ReactNode);
-}) {
-  const buttonRef = useRef<HTMLSpanElement | null>(null);
-  const timeoutDuration = 300;
-  const [open, setOpen] = useState(false);
-  let openTimeout: NodeJS.Timeout | undefined;
-  let closeTimeout: NodeJS.Timeout | undefined;
-
-  const onMouseEnter = () => {
-    clearTimeout(closeTimeout);
-    if (open) return;
-    setOpen(true);
-  };
-
-  const onMouseLeave = () => {
-    clearTimeout(openTimeout);
-    if (!open) return;
-    closeTimeout = setTimeout(() => setOpen(false), timeoutDuration);
-  };
-  const [popperElement, setPopperElement] = useState<HTMLSpanElement | null>(null);
-  const { styles, attributes } = usePopper(buttonRef.current, popperElement, {
-    placement: 'bottom-start',
-  });
-  return (
-    <span onMouseLeave={onMouseLeave}>
-      <span ref={buttonRef} onMouseMove={onMouseEnter} onMouseEnter={onMouseEnter}>
-        {children}
-      </span>
-      <span
-        className="exclude-from-outline absolute z-30 sm:max-w-[500px]"
-        ref={setPopperElement}
-        style={{ ...styles.popper }}
-        {...attributes.popper}
-      >
-        <Transition
-          className="my-2 p-4 shadow-xl bg-white dark:bg-zinc-900 text-sm dark:text-white rounded border border-slate-100 dark:border-zinc-500 break-words"
-          enter="transition ease-out duration-200"
-          enterFrom="opacity-0 translate-y-1"
-          enterTo="opacity-100 translate-y-0"
-          leave="transition ease-in duration-150"
-          leaveFrom="opacity-100 translate-y-0"
-          leaveTo="opacity-0 translate-y-1"
-          onMouseEnter={onMouseEnter}
-          show={open}
-        >
-          {typeof card === 'function' ? card({ open, close: () => setOpen(false) }) : card}
-        </Transition>
-      </span>
-    </span>
-  );
-}