myst-to-react 0.1.18 → 0.1.19

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;

package/src/image.tsx

@@ -1,97 +0,0 @@
-import type { Alignment } from '@curvenote/blocks';
-import type { Image as ImageNodeSpec } from 'myst-spec';
-import type { NodeRenderer } from './types';
-
-type ImageNode = ImageNodeSpec & { height?: string };
-
-function getStyleValue(width?: number | string): string | number | undefined {
-  if (typeof width === 'number' && Number.isNaN(width)) {
-    // If it is nan, return undefined.
-    return undefined;
-  }
-  if (typeof width === 'string') {
-    if (width.endsWith('%')) {
-      return width;
-    } else if (width.endsWith('px')) {
-      return Number(width.replace('px', ''));
-    } else if (!Number.isNaN(Number(width))) {
-      return Number(width);
-    }
-    console.log(`Unknown width ${width} in getImageWidth`);
-    return undefined;
-  }
-  return width;
-}
-
-function alignToMargin(align: string) {
-  switch (align) {
-    case 'left':
-      return { marginRight: 'auto' };
-    case 'right':
-      return { marginLeft: 'auto' };
-    case 'center':
-      return { margin: '0 auto' };
-    default:
-      return {};
-  }
-}
-
-function Picture({
-  src,
-  srcOptimized,
-  urlSource,
-  align = 'center',
-  alt,
-  width,
-  height,
-}: {
-  src: string;
-  srcOptimized?: string;
-  urlSource?: string;
-  alt?: string;
-  width?: string;
-  height?: string;
-  align?: Alignment;
-}) {
-  const image = (
-    <img
-      style={{
-        width: getStyleValue(width),
-        height: getStyleValue(height),
-        ...alignToMargin(align),
-      }}
-      src={src}
-      alt={alt}
-      data-canonical-url={urlSource}
-    />
-  );
-  if (!srcOptimized) return image;
-  return (
-    <picture>
-      <source srcSet={srcOptimized} type="image/webp" />
-      {image}
-    </picture>
-  );
-}
-
-export const Image: NodeRenderer<ImageNode> = (node) => {
-  return (
-    <Picture
-      key={node.key}
-      src={node.url}
-      srcOptimized={(node as any).urlOptimized}
-      alt={node.alt || node.title}
-      width={node.width || undefined}
-      height={node.height || undefined}
-      align={node.align}
-      // Note that sourceUrl is for backwards compatibility
-      urlSource={(node as any).urlSource || (node as any).sourceUrl}
-    />
-  );
-};
-
-const IMAGE_RENDERERS = {
-  image: Image,
-};
-
-export default IMAGE_RENDERERS;

package/src/index.tsx

@@ -1,65 +0,0 @@
-import type { NodeRenderer } from './types';
-import type { GenericParent } from 'mystjs';
-import { mystToReact } from './convertToReact';
-import BASIC_RENDERERS from './basic';
-import ADMONITION_RENDERERS from './admonitions';
-import DROPDOWN_RENDERERS from './dropdown';
-import CARD_RENDERERS from './card';
-import GRID_RENDERERS from './grid';
-import CITE_RENDERERS from './cite';
-import FOOTNOTE_RENDERERS from './footnotes';
-import CODE_RENDERERS from './code';
-import MATH_RENDERERS from './math';
-import REACTIVE_RENDERERS from './reactive';
-import IFRAME_RENDERERS from './iframe';
-import IMAGE_RENDERERS from './image';
-import LINK_RENDERERS from './links';
-import OUTPUT_RENDERERS from './output';
-import HEADING_RENDERERS from './heading';
-import CROSS_REFERENCE_RENDERERS from './crossReference';
-import TAB_RENDERERS from './tabs';
-import MYST_RENDERERS from './myst';
-import MERMAID_RENDERERS from './mermaid';
-export { MySTRenderer } from './myst';
-import EXT_RENDERERS from './extensions';
-
-export type { NodeRenderer } from './types';
-export { CopyIcon } from './components/CopyIcon';
-export { CodeBlock } from './code';
-
-export const DEFAULT_RENDERERS: Record<string, NodeRenderer> = {
-  ...BASIC_RENDERERS,
-  ...IMAGE_RENDERERS,
-  ...LINK_RENDERERS,
-  ...CODE_RENDERERS,
-  ...MATH_RENDERERS,
-  ...CITE_RENDERERS,
-  ...TAB_RENDERERS,
-  ...IFRAME_RENDERERS,
-  ...FOOTNOTE_RENDERERS,
-  ...ADMONITION_RENDERERS,
-  ...REACTIVE_RENDERERS,
-  ...OUTPUT_RENDERERS,
-  ...HEADING_RENDERERS,
-  ...CROSS_REFERENCE_RENDERERS,
-  ...MYST_RENDERERS,
-  ...MERMAID_RENDERERS,
-  ...DROPDOWN_RENDERERS,
-  ...CARD_RENDERERS,
-  ...GRID_RENDERERS,
-  ...EXT_RENDERERS,
-};
-
-export function useParse(
-  node: GenericParent | null,
-  renderers: Record<string, NodeRenderer> = DEFAULT_RENDERERS,
-) {
-  if (!node) return null;
-  try {
-    const nodes = mystToReact(node, renderers);
-    return nodes;
-  } catch (error) {
-    console.error(error);
-    return null;
-  }
-}

package/src/inlineError.tsx

@@ -1,15 +0,0 @@
-import { ExclamationIcon } from '@heroicons/react/outline';
-
-interface Props {
-  value: string;
-  message?: string;
-}
-
-export function InlineError({ value, message }: Props) {
-  return (
-    <span className="text-yellow-600" title={message || value}>
-      <ExclamationIcon className="inline h-[1em] mr-1" />
-      {value}
-    </span>
-  );
-}

package/src/links/index.tsx

@@ -1,132 +0,0 @@
-import type { Link } from 'myst-spec';
-import { Link as RemixLink } from '@remix-run/react';
-import { ExternalLinkIcon, LinkIcon } from '@heroicons/react/outline';
-import { useSiteManifest } from '@curvenote/ui-providers';
-import type { ManifestProjectPage, SiteManifest } from '@curvenote/site-common';
-import type { NodeRenderer } from '../types';
-import { HoverPopover } from '../components/HoverPopover';
-import { LinkCard } from '../components/LinkCard';
-import { WikiLink } from './wiki';
-import { RRIDLink } from './rrid';
-
-type TransformedLink = Link & { internal?: boolean; protocol?: string };
-
-function getPageInfo(
-  site: SiteManifest | undefined,
-  path: string,
-): ManifestProjectPage | undefined {
-  if (!site) return undefined;
-  const [projectSlug, pageSlug] = path.replace(/^\//, '').split('/');
-  const project = site.projects.find((p) => p.slug === projectSlug);
-  if (!project) return undefined;
-  return project.pages.find(
-    (p) => (p as ManifestProjectPage).slug === pageSlug,
-  ) as ManifestProjectPage;
-}
-
-function InternalLink({ url, children }: { url: string; children: React.ReactNode }) {
-  const site = useSiteManifest();
-  const page = getPageInfo(site, url);
-  const skipPreview = !page || (!page.description && !page.thumbnail);
-  if (!page || skipPreview) {
-    return (
-      <RemixLink to={url} prefetch="intent">
-        {children}
-      </RemixLink>
-    );
-  }
-  return (
-    <HoverPopover
-      card={
-        <LinkCard
-          internal
-          url={url}
-          title={page.title}
-          description={page.description}
-          thumbnail={page.thumbnailOptimized || page.thumbnail}
-        />
-      }
-    >
-      <RemixLink to={url} prefetch="intent">
-        {children}
-      </RemixLink>
-    </HoverPopover>
-  );
-}
-
-export const link: NodeRenderer<TransformedLink> = (node, children) => {
-  const internal = node.internal ?? false;
-  const protocol = node.protocol;
-
-  switch (protocol) {
-    case 'wiki':
-      return (
-        <WikiLink
-          key={node.key}
-          url={node.url}
-          page={node.data?.page as string}
-          wiki={node.data?.wiki as string}
-        >
-          {children}
-        </WikiLink>
-      );
-    case 'rrid':
-      return <RRIDLink key={node.key} rrid={node.data?.rrid as string} />;
-    default:
-      if (internal) {
-        return (
-          <InternalLink key={node.key} url={node.url}>
-            {children}
-          </InternalLink>
-        );
-      }
-      return (
-        <a key={node.key} target="_blank" href={node.url} rel="noreferrer">
-          {children}
-        </a>
-      );
-  }
-};
-
-export const linkBlock: NodeRenderer<TransformedLink> = (node, children) => {
-  const iconClass = 'w-6 h-6 self-center transition-transform flex-none ml-3';
-  const containerClass =
-    'flex-1 p-4 my-4 block border font-normal hover:border-blue-500 dark:hover:border-blue-400 no-underline hover:text-blue-600 dark:hover:text-blue-400 text-gray-600 dark:text-gray-100 border-gray-200 dark:border-gray-500 rounded shadow-sm hover:shadow-lg dark:shadow-neutral-700';
-  const internal = node.internal ?? false;
-  const nested = (
-    <div className="flex align-middle h-full">
-      <div className="flex-grow">
-        {node.title}
-        <div className="text-xs text-gray-500 dark:text-gray-400">{children}</div>
-      </div>
-      {internal && <LinkIcon className={iconClass} />}
-      {!internal && <ExternalLinkIcon className={iconClass} />}
-    </div>
-  );
-
-  if (internal) {
-    return (
-      <RemixLink key={node.key} to={node.url} prefetch="intent" className={containerClass}>
-        {nested}
-      </RemixLink>
-    );
-  }
-  return (
-    <a
-      key={node.key}
-      className={containerClass}
-      target="_blank"
-      rel="noopener noreferrer"
-      href={node.url}
-    >
-      {nested}
-    </a>
-  );
-};
-
-const LINK_RENDERERS = {
-  link,
-  linkBlock,
-};
-
-export default LINK_RENDERERS;

package/src/links/rrid.tsx

@@ -1,81 +0,0 @@
-import useSWR from 'swr';
-import { ExternalLinkIcon } from '@heroicons/react/outline';
-import { ClickPopover } from '../components/ClickPopover';
-
-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}.`);
-  });
-
-function RRIDChild({ rrid }: { rrid: string }) {
-  const { data, error } = useSWR(`https://scicrunch.org/resolver/${rrid}.json`, fetcher);
-  if (!data && !error) {
-    return <span className="animate-pulse">Loading...</span>;
-  }
-  const hit = data?.hits?.hits?.[0];
-  if (error || !hit) {
-    return <span>Error loading {rrid}.</span>;
-  }
-  const {
-    name: title,
-    curie,
-    description,
-    supercategory,
-    keywords,
-    types: categories,
-  } = hit?._source?.item ?? {};
-  const category = supercategory?.[0]?.name;
-  const types = (categories?.map(({ name }: { name: string }) => name) as string[]) ?? [];
-  const tags = (keywords?.map(({ keyword }: { keyword: string }) => keyword) as string[]) ?? [];
-  return (
-    <div>
-      <a
-        href={`https://scicrunch.org/resolver/${rrid}`}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="absolute top-4 right-1 opacity-70 hover:opacity-100"
-      >
-        <ExternalLinkIcon className="w-6 h-6" />
-      </a>
-      <p className="text-sm font-light">RRID: {category}</p>
-      <div className="text-xl font-bold mb-4">
-        {title} <code>{curie}</code>
-      </div>
-      <p className="text-md">{description}</p>
-      {types.length > 0 && (
-        <>
-          <div className="text-xs font-thin my-2">Categories</div>
-          <div className="flex flex-wrap ml-1">
-            {types?.map((tag) => (
-              <span className="ml-1 text-xs inline-flex items-center uppercase px-3 py-1 rounded-full border">
-                {tag}
-              </span>
-            ))}
-          </div>
-        </>
-      )}
-      {tags.length > 0 && (
-        <>
-          <div className="text-xs font-thin my-2">Tags</div>
-          <div className="flex flex-wrap ml-1">
-            {tags?.map((tag) => (
-              <span className="ml-1 text-xs inline-flex items-center uppercase px-3 py-1 rounded-full border">
-                {tag}
-              </span>
-            ))}
-          </div>
-        </>
-      )}
-    </div>
-  );
-}
-
-export function RRIDLink({ rrid }: { rrid: string }) {
-  return (
-    <ClickPopover card={<RRIDChild rrid={rrid} />}>
-      <span>RRID: </span>
-      <cite className="italic">{rrid}</cite>
-    </ClickPopover>
-  );
-}