myst-to-react 0.1.18 → 0.1.20

package/src/components/LinkCard.tsx

@@ -1,42 +0,0 @@
-import { Link as RemixLink } from '@remix-run/react';
-import { ExternalLinkIcon } from '@heroicons/react/outline';
-import classNames from 'classnames';
-
-export function LinkCard({
-  url,
-  title,
-  internal = false,
-  loading = false,
-  description,
-  thumbnail,
-}: {
-  url: string;
-  internal?: boolean;
-  loading?: boolean;
-  title: React.ReactNode;
-  description?: React.ReactNode;
-  thumbnail?: string;
-}) {
-  return (
-    <div className={classNames('w-[300px]', { 'animate-pulse': loading })}>
-      {internal && (
-        <RemixLink to={url} className="block" prefetch="intent">
-          {title}
-        </RemixLink>
-      )}
-      {!internal && (
-        <a href={url} className="block" target="_blank" rel="noreferrer">
-          <ExternalLinkIcon className="w-4 h-4 float-right" />
-          {title}
-        </a>
-      )}
-      {!loading && thumbnail && (
-        <img src={thumbnail} className="w-full max-h-[200px] object-cover object-top" />
-      )}
-      {loading && (
-        <div className="animate-pulse bg-slate-100 dark:bg-slate-800 w-full h-[150px] mt-4" />
-      )}
-      {!loading && description && <div className="mt-2">{description}</div>}
-    </div>
-  );
-}

package/src/convertToReact.ts

@@ -1,33 +0,0 @@
-import type React from 'react';
-import { createElement as e } from 'react';
-import type { NodeRenderer } from './types';
-import type { GenericNode } from 'mystjs';
-
-export function toReact(
-  fragment: GenericNode[],
-  replacements: Record<string, NodeRenderer>,
-): React.ReactNode {
-  if (fragment.length === 0) return undefined;
-  return fragment.map((node) => {
-    if (node.type === 'text') return node.value;
-    const custom = replacements[node.type] as NodeRenderer | undefined;
-    if (node.children) {
-      const children = toReact(node.children, replacements);
-      if (custom) {
-        return custom(node, children);
-      }
-      return e('div', { key: node.key }, children);
-    }
-    if (custom) {
-      return custom(node, node.value);
-    }
-    return e('span', { children: node.value, key: node.key });
-  });
-}
-
-export function mystToReact(
-  content: GenericNode,
-  replacements: Record<string, NodeRenderer>,
-): React.ReactNode {
-  return toReact(content.children ?? [], replacements);
-}

package/src/crossReference.tsx

@@ -1,139 +0,0 @@
-import { selectAll } from 'unist-util-select';
-import { EXIT, SKIP, visit } from 'unist-util-visit';
-import type { Root } from 'mdast';
-import type { CrossReference } from 'myst-spec';
-import LinkIcon from '@heroicons/react/outline/LinkIcon';
-import ExternalLinkIcon from '@heroicons/react/outline/ExternalLinkIcon';
-import { useReferences, useXRefState, XRefProvider } from '@curvenote/ui-providers';
-import { useParse } from '.';
-import { InlineError } from './inlineError';
-import type { NodeRenderer } from './types';
-import { ClickPopover } from './components/ClickPopover';
-import useSWR from 'swr';
-import { Link } from '@remix-run/react';
-
-const MAX_NODES = 3; // Max nodes to show after a header
-
-function selectMdastNodes(mdast: Root, identifier: string) {
-  const identifiers = selectAll(`[identifier=${identifier}],[key=${identifier}]`, mdast);
-  const container = identifiers.filter(({ type }) => type === 'container' || type === 'math')[0];
-  const nodes = container ? [container] : [];
-  if (nodes.length === 0 && identifiers.length > 0 && mdast) {
-    let begin = false;
-    visit(mdast, (node) => {
-      if ((begin && node.type === 'heading') || nodes.length >= MAX_NODES) {
-        return EXIT;
-      }
-      if ((node as any).identifier === identifier && node.type === 'heading') begin = true;
-      if (begin) {
-        nodes.push(node);
-        return SKIP; // Don't traverse the children
-      }
-    });
-  }
-  if (nodes.length === 0 && identifiers.length > 0) {
-    // If we haven't found anything, push the first identifier that isn't a cite or crossReference
-    const resolved = identifiers.filter(
-      (node) => node.type !== 'crossReference' && node.type !== 'cite',
-    )[0];
-    nodes.push(resolved ?? identifiers[0]);
-  }
-  return nodes;
-}
-
-const fetcher = (...args: Parameters<typeof fetch>) =>
-  fetch(...args).then((res) => {
-    if (res.status === 200) return res.json();
-    throw new Error(`Content returned with status ${res.status}.`);
-  });
-
-export function ReferencedContent({
-  identifier,
-  close,
-}: {
-  identifier: string;
-  close: () => void;
-}) {
-  const { remote, url } = useXRefState();
-  const external = url?.startsWith('http') ?? false;
-  const lookupUrl = external ? `/api/lookup?url=${url}.json` : `${url}.json`;
-  const { data, error } = useSWR(remote ? lookupUrl : null, fetcher);
-  const references = useReferences();
-  const mdast = data?.mdast ?? references?.article;
-  const nodes = selectMdastNodes(mdast, identifier);
-  const htmlId = (nodes[0] as any)?.html_id || (nodes[0] as any)?.identifier;
-  const link = `${url}${htmlId ? `#${htmlId}` : ''}`;
-  const onClose = () => {
-    // Need to close it first because the ID is on the page twice ...
-    close();
-    setTimeout(() => {
-      const el = document.getElementById(htmlId);
-      el?.scrollIntoView({ behavior: 'smooth' });
-    }, 10);
-  };
-  const children = useParse({ type: 'block', children: nodes });
-  if (remote && !data) {
-    return <>Loading...</>;
-  }
-  if (remote && error) {
-    return <>Error loading remote page.</>;
-  }
-  if (!nodes || nodes.length === 0) {
-    return (
-      <>
-        <InlineError value={identifier || 'No Label'} message="Cross Reference Not Found" />
-      </>
-    );
-  }
-  return (
-    <div className="exclude-from-outline">
-      {remote && external && (
-        <a href={link} className="absolute top-4 right-1" target="_blank">
-          <ExternalLinkIcon className="w-4 h-4" />
-        </a>
-      )}
-      {remote && !external && (
-        <Link to={link} className="absolute top-4 right-1" prefetch="intent">
-          <ExternalLinkIcon className="w-4 h-4" />
-        </Link>
-      )}
-      {!remote && (
-        <button onClick={onClose} className="absolute top-4 right-1">
-          <LinkIcon className="w-4 h-4" />
-        </button>
-      )}
-      <div className="popout">{children}</div>
-    </div>
-  );
-}
-
-export const CrossReferenceNode: NodeRenderer<CrossReference> = (node, children) => {
-  if (!children) {
-    return (
-      <InlineError
-        key={node.key}
-        value={node.label || node.identifier || 'No Label'}
-        message="Cross Reference Not Found"
-      />
-    );
-  }
-  return (
-    <ClickPopover
-      key={node.key}
-      card={({ close }) => (
-        <XRefProvider remote={(node as any).remote} url={(node as any).url}>
-          <ReferencedContent identifier={node.identifier as string} close={close} />
-        </XRefProvider>
-      )}
-      as="span"
-    >
-      {children}
-    </ClickPopover>
-  );
-};
-
-const CROSS_REFERENCE_RENDERERS = {
-  crossReference: CrossReferenceNode,
-};
-
-export default CROSS_REFERENCE_RENDERERS;

package/src/dropdown.tsx

@@ -1,69 +0,0 @@
-import React from 'react';
-import type { NodeRenderer } from './types';
-import { ChevronRightIcon } from '@heroicons/react/solid';
-import classNames from 'classnames';
-
-type DropdownSpec = {
-  type: 'details';
-  open?: boolean;
-};
-type SummarySpec = {
-  type: 'summary';
-};
-
-const iconClass = 'h-8 w-8 inline-block pl-2 mr-2 -translate-y-[1px]';
-
-export const SummaryTitle: NodeRenderer<SummarySpec> = (node, children) => {
-  return children;
-};
-
-function Details({
-  title,
-  children,
-  open,
-}: {
-  title: React.ReactNode;
-  children: React.ReactNode[];
-  open?: boolean;
-}) {
-  return (
-    <details
-      className={classNames(
-        'rounded-md my-4 shadow dark:shadow-2xl dark:shadow-neutral-900 overflow-hidden',
-      )}
-      open={open}
-    >
-      <summary
-        className={classNames(
-          'm-0 text-lg font-medium py-1 min-h-[2em] pl-3',
-          'cursor-pointer hover:shadow-[inset_0_0_0px_20px_#00000003] dark:hover:shadow-[inset_0_0_0px_20px_#FFFFFF03]',
-          'bg-gray-100 dark:bg-slate-900',
-        )}
-      >
-        <span className="text-neutral-900 dark:text-white">
-          <span className="block float-right font-thin text-sm text-neutral-700 dark:text-neutral-200">
-            <ChevronRightIcon className={classNames(iconClass, 'transition-transform')} />
-          </span>
-          {title}
-        </span>
-      </summary>
-      <div className="px-4 py-1 bg-gray-50 dark:bg-stone-800">{children}</div>
-    </details>
-  );
-}
-
-export const DetailsRenderer: NodeRenderer<DropdownSpec> = (node, children) => {
-  const [title, ...rest] = children as any[];
-  return (
-    <Details key={node.key} title={title} open={node.open}>
-      {rest}
-    </Details>
-  );
-};
-
-const DROPDOWN_RENDERERS = {
-  details: DetailsRenderer,
-  summary: SummaryTitle,
-};
-
-export default DROPDOWN_RENDERERS;

package/src/extensions/chemicalFormula.tsx

@@ -1,42 +0,0 @@
-import type { NodeRenderer } from '../types';
-
-/**
- * Separate numbers and letters so that numbers can be <sub>2</sub>
- * @param formula a string H2O
- * @returns ['H', '2', '0']
- */
-function parseFormula(formula?: string) {
-  return [...(formula ?? '')].reduce((acc, letter) => {
-    const last = acc.pop();
-    const isNumber = letter.match(/[0-9]/);
-    const lastIsNumber = last?.match(/[0-9]/);
-    if (isNumber) {
-      if (lastIsNumber) {
-        return [...acc, `${last ?? ''}${letter}`];
-      }
-      return [...acc, last, letter].filter((v) => !!v) as string[];
-    }
-    if (lastIsNumber) {
-      return [...acc, last, letter].filter((v) => !!v) as string[];
-    }
-    return [...acc, `${last ?? ''}${letter}`];
-  }, [] as string[]);
-}
-
-export const ChemicalFormula: NodeRenderer = (node) => {
-  const parts = parseFormula(node.value);
-  return (
-    <code key={node.key} className="text-inherit">
-      {parts.map((letter, index) => {
-        if (letter.match(/[0-9]/)) return <sub key={index}>{letter}</sub>;
-        return <span key={index}>{letter}</span>;
-      })}
-    </code>
-  );
-};
-
-const CHEM_RENDERERS = {
-  chemicalFormula: ChemicalFormula,
-};
-
-export default CHEM_RENDERERS;

package/src/extensions/index.tsx

@@ -1,10 +0,0 @@
-import type { NodeRenderer } from '../types';
-import CHEM_RENDERERS from './chemicalFormula';
-import SI_RENDERERS from './siunits';
-
-const EXT_RENDERERS: Record<string, NodeRenderer> = {
-  ...CHEM_RENDERERS,
-  ...SI_RENDERERS,
-};
-
-export default EXT_RENDERERS;

package/src/extensions/siunits.tsx

@@ -1,15 +0,0 @@
-import type { NodeRenderer } from '../types';
-
-export const SIUnits: NodeRenderer = (node) => {
-  return (
-    <code key={node.key} className="text-inherit" title={`${node.num} ${node.units}`}>
-      {node.value}
-    </code>
-  );
-};
-
-const SI_RENDERERS = {
-  si: SIUnits,
-};
-
-export default SI_RENDERERS;

package/src/footnotes.tsx

@@ -1,30 +0,0 @@
-import type { GenericParent } from 'mystjs';
-import { useReferences } from '@curvenote/ui-providers';
-import type { NodeRenderer } from '.';
-import { useParse } from '.';
-import { ClickPopover } from './components/ClickPopover';
-
-export function FootnoteDefinition({ identifier }: { identifier: string }) {
-  const references = useReferences();
-  const node = references?.footnotes?.[identifier];
-  const children = useParse(node as GenericParent);
-  return <>{children}</>;
-}
-
-export const FootnoteReference: NodeRenderer = (node) => {
-  return (
-    <ClickPopover
-      key={node.key}
-      card={<FootnoteDefinition identifier={node.identifier as string} />}
-      as="span"
-    >
-      <sup>[{node.number ?? node.identifier}]</sup>
-    </ClickPopover>
-  );
-};
-
-const FOOTNOTE_RENDERERS = {
-  footnoteReference: FootnoteReference,
-};
-
-export default FOOTNOTE_RENDERERS;

package/src/grid.tsx

@@ -1,127 +0,0 @@
-import classNames from 'classnames';
-import React from 'react';
-import type { NodeRenderer } from './types';
-
-type GridSpec = {
-  type: 'grid';
-  columns: number[];
-};
-
-const gridClassNames = {
-  main: [
-    'grid-cols-1',
-    'grid-cols-2',
-    'grid-cols-3',
-    'grid-cols-4',
-    'grid-cols-5',
-    'grid-cols-6',
-    'grid-cols-7',
-    'grid-cols-8',
-    'grid-cols-9',
-    'grid-cols-10',
-    'grid-cols-11',
-    'grid-cols-12',
-  ],
-  sm: [
-    'sm:grid-cols-1',
-    'sm:grid-cols-2',
-    'sm:grid-cols-3',
-    'sm:grid-cols-4',
-    'sm:grid-cols-5',
-    'sm:grid-cols-6',
-    'sm:grid-cols-7',
-    'sm:grid-cols-8',
-    'sm:grid-cols-9',
-    'sm:grid-cols-10',
-    'sm:grid-cols-11',
-    'sm:grid-cols-12',
-  ],
-  md: [
-    'md:grid-cols-1',
-    'md:grid-cols-2',
-    'md:grid-cols-3',
-    'md:grid-cols-4',
-    'md:grid-cols-5',
-    'md:grid-cols-6',
-    'md:grid-cols-7',
-    'md:grid-cols-8',
-    'md:grid-cols-9',
-    'md:grid-cols-10',
-    'md:grid-cols-11',
-    'md:grid-cols-12',
-  ],
-  lg: [
-    'lg:grid-cols-1',
-    'lg:grid-cols-2',
-    'lg:grid-cols-3',
-    'lg:grid-cols-4',
-    'lg:grid-cols-5',
-    'lg:grid-cols-6',
-    'lg:grid-cols-7',
-    'lg:grid-cols-8',
-    'lg:grid-cols-9',
-    'lg:grid-cols-10',
-    'lg:grid-cols-11',
-    'lg:grid-cols-12',
-  ],
-  xl: [
-    'xl:grid-cols-1',
-    'xl:grid-cols-2',
-    'xl:grid-cols-3',
-    'xl:grid-cols-4',
-    'xl:grid-cols-5',
-    'xl:grid-cols-6',
-    'xl:grid-cols-7',
-    'xl:grid-cols-8',
-    'xl:grid-cols-9',
-    'xl:grid-cols-10',
-    'xl:grid-cols-11',
-    'xl:grid-cols-12',
-  ],
-};
-
-const DEFAULT_NUM_COLUMNS = 3;
-
-function getColumnClassName(classes: string[], number?: string | number): string {
-  const num = Number(number);
-  if (!number || Number.isNaN(num)) {
-    return getColumnClassName(classes, DEFAULT_NUM_COLUMNS);
-  }
-  return classes[num - 1] ?? classes[DEFAULT_NUM_COLUMNS];
-}
-
-function gridColumnClasses(columns?: number[]): string {
-  if (!columns || columns.length <= 1) {
-    return getColumnClassName(gridClassNames.main, columns?.[0]);
-  }
-  if (columns.length !== 4) {
-    return getColumnClassName(gridClassNames.main, columns[0]);
-  }
-  return [
-    // getColumnClassName(gridClassNames.main, columns[0]),
-    getColumnClassName(gridClassNames.sm, columns[0]),
-    getColumnClassName(gridClassNames.md, columns[1]),
-    getColumnClassName(gridClassNames.lg, columns[2]),
-    getColumnClassName(gridClassNames.xl, columns[3]),
-  ].join(' ');
-}
-
-function Grid({ columns, children }: { columns?: number[]; children: React.ReactNode }) {
-  const gridClasses = gridColumnClasses(columns);
-  const gutterClasses = 'gap-4';
-  return <div className={classNames('grid', gridClasses, gutterClasses)}>{children}</div>;
-}
-
-export const GridRenderer: NodeRenderer<GridSpec> = (node, children) => {
-  return (
-    <Grid key={node.key} columns={node.columns}>
-      {children}
-    </Grid>
-  );
-};
-
-const GRID_RENDERERS = {
-  grid: GridRenderer,
-};
-
-export default GRID_RENDERERS;

package/src/heading.tsx

@@ -1,68 +0,0 @@
-import { Heading } from 'myst-spec';
-import type { NodeRenderer } from './types';
-import { createElement as e } from 'react';
-import classNames from 'classnames';
-import { useXRefState } from '@curvenote/ui-providers';
-
-function getHelpHashText(kind: string) {
-  return `Link to this ${kind}`;
-}
-
-export function HashLink({
-  id,
-  kind,
-  align = 'left',
-}: {
-  id: string;
-  kind: string;
-  align?: 'left' | 'right';
-}) {
-  const { inCrossRef } = useXRefState();
-  // If we are in a cross-reference popout, hide the hash links
-  if (inCrossRef) return null;
-  const helpText = getHelpHashText(kind);
-  return (
-    <a
-      className={classNames(
-        'select-none absolute top-0 font-normal no-underline transition-opacity opacity-0 group-hover:opacity-70',
-        {
-          'left-0 -translate-x-[100%] pr-3': align === 'left',
-          'right-0 translate-x-[100%] pl-3': align === 'right',
-        },
-      )}
-      href={`#${id}`}
-      title={helpText}
-      aria-label={helpText}
-    >
-      #
-    </a>
-  );
-}
-
-const Heading: NodeRenderer<Heading> = (node, children) => {
-  const { enumerator, depth, key, identifier, html_id } = node;
-  const id = html_id || identifier || key;
-  const textContent = (
-    <>
-      <HashLink id={id} align="left" kind="Section" />
-      {enumerator && <span className="select-none mr-3">{enumerator}</span>}
-      <span className="heading-text">{children}</span>
-    </>
-  );
-  // The `heading-text` class is picked up in the Outline to select without the enumerator and "#" link
-  return e(
-    `h${depth}`,
-    {
-      key: node.key,
-      id,
-      className: 'relative group',
-    },
-    textContent,
-  );
-};
-
-const HEADING_RENDERERS = {
-  heading: Heading,
-};
-
-export default HEADING_RENDERERS;

package/src/iframe.tsx

@@ -1,42 +0,0 @@
-import type { NodeRenderer } from './types';
-
-export const IFrame: NodeRenderer = (node) => {
-  return (
-    <figure
-      key={node.key}
-      id={node.label || undefined}
-      style={{ textAlign: node.align || 'center' }}
-    >
-      <div
-        style={{
-          position: 'relative',
-          display: 'inline-block',
-          paddingBottom: '60%',
-          width: `min(max(${node.width || 70}%, 500px), 100%)`,
-        }}
-      >
-        <iframe
-          width="100%"
-          height="100%"
-          src={node.src}
-          allowFullScreen
-          allow="autoplay"
-          style={{
-            width: '100%',
-            height: '100%',
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            border: 'none',
-          }}
-        ></iframe>
-      </div>
-    </figure>
-  );
-};
-
-const IFRAME_RENDERERS = {
-  iframe: IFrame,
-};
-
-export default IFRAME_RENDERERS;