myst-to-react 0.1.18 → 0.1.19

package/src/admonitions.tsx

@@ -1,183 +0,0 @@
-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',
-        {
-          '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

@@ -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;