react-cheminfo 0.1.0

package/src/citation/ui/CitationMenu.tsx

@@ -0,0 +1,132 @@
+import { Menu, MenuDivider, MenuItem } from '@blueprintjs/core';
+import { SvgLogoDoi } from 'cheminfo-font';
+import type { CSSProperties, ReactElement } from 'react';
+import { useEffect, useRef, useState } from 'react';
+
+import { copyCitation } from '../core/clipboard.ts';
+import type { CitationFormat } from '../core/formats.ts';
+import { CITATION_DOWNLOADS, CITATION_FORMATS } from '../core/formats.ts';
+import type { Reference } from '../core/reference.ts';
+import { doiUrl } from '../core/reference.ts';
+import type { CitationStyle } from '../core/segments.ts';
+import { CITATION_STYLES } from '../core/segments.ts';
+
+import type { CopyState } from './entries.tsx';
+import { CopyEntry, DownloadEntry } from './entries.tsx';
+
+// How long the tick replaces the clipboard glyph of an entry after a copy.
+const FEEDBACK_MS = 1500;
+
+const MENU_STYLE: CSSProperties = { minWidth: 240 };
+const DOI_ICON_STYLE: CSSProperties = { width: 16, height: 16 };
+
+export interface CitationMenuProps {
+  /** The work being cited. */
+  reference: Reference;
+}
+
+/**
+ * What the Cite button opens: the article at its DOI, the reference copied in
+ * the style a journal asks for, and the files a reference manager imports.
+ * @param props - The work being cited.
+ * @returns The citation menu.
+ */
+export function CitationMenu(props: CitationMenuProps): ReactElement {
+  const { reference } = props;
+  // Which entry showed feedback last, keyed `format` or `format:style`.
+  const [copied, setCopied] = useState<string | null>(null);
+  const [hasFailed, setHasFailed] = useState(false);
+  const timeout = useRef<number | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (timeout.current !== null) window.clearTimeout(timeout.current);
+    };
+  }, []);
+
+  function announce(key: string, failed: boolean): void {
+    setCopied(key);
+    setHasFailed(failed);
+    if (timeout.current !== null) window.clearTimeout(timeout.current);
+    timeout.current = window.setTimeout(() => {
+      setCopied(null);
+      setHasFailed(false);
+    }, FEEDBACK_MS);
+  }
+
+  function copy(format: CitationFormat, style?: CitationStyle): void {
+    const key = style === undefined ? format.id : `${format.id}:${style.id}`;
+    copyCitation(reference, format.id, style?.id).then(
+      () => {
+        announce(key, false);
+      },
+      () => {
+        // A denied clipboard permission is the usual cause, and the menu is the
+        // only place the user can be told about it.
+        announce(key, true);
+      },
+    );
+  }
+
+  function stateOf(key: string): CopyState | null {
+    return copied === key ? feedback(hasFailed) : null;
+  }
+
+  return (
+    <Menu className="citation-menu" style={MENU_STYLE}>
+      <MenuItem
+        icon={<SvgLogoDoi style={DOI_ICON_STYLE} />}
+        text={`${reference.journalAbbreviation} ${reference.year}`}
+        label={reference.doi}
+        href={doiUrl(reference)}
+        target="_blank"
+        rel="noreferrer"
+      />
+      <MenuDivider title="Copy the reference as" />
+      {CITATION_FORMATS.map((format) =>
+        format.styled ? (
+          <MenuItem
+            key={format.id}
+            icon="clipboard"
+            text={format.label}
+            label={format.hint}
+          >
+            {CITATION_STYLES.map((style) => (
+              <CopyEntry
+                key={style.id}
+                reference={reference}
+                format={format}
+                style={style}
+                state={stateOf(`${format.id}:${style.id}`)}
+                onCopy={copy}
+              />
+            ))}
+          </MenuItem>
+        ) : (
+          <CopyEntry
+            key={format.id}
+            reference={reference}
+            format={format}
+            state={stateOf(format.id)}
+            onCopy={copy}
+          />
+        ),
+      )}
+      <MenuDivider title="Import into a reference manager" />
+      {CITATION_DOWNLOADS.map((download) => (
+        <DownloadEntry
+          key={download.format}
+          reference={reference}
+          download={download}
+        />
+      ))}
+    </Menu>
+  );
+}
+
+function feedback(failed: boolean): CopyState {
+  if (failed) {
+    return { icon: 'cross', intent: 'danger', label: 'copy failed' };
+  }
+  return { icon: 'tick', intent: 'success', label: 'copied' };
+}

package/src/citation/ui/CitationPreview.tsx

@@ -0,0 +1,84 @@
+import type { CSSProperties, ReactElement } from 'react';
+
+import type { CitationFormatId } from '../core/formats.ts';
+import { formatCitation } from '../core/formats.ts';
+import type { Reference } from '../core/reference.ts';
+import type { CitationStyleId } from '../core/segments.ts';
+import { citationSegments } from '../core/segments.ts';
+
+// A BibTeX entry and a one-line citation share this box, so the text wraps and
+// the box never grows past what a tooltip can hold. The height is the last
+// resort, for a window too short to show an entry whole.
+const PREVIEW_STYLE: CSSProperties = {
+  maxWidth: 440,
+  maxHeight: '70vh',
+  overflow: 'auto',
+  margin: 0,
+  color: '#e5e8eb',
+  fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
+  fontSize: 11.5,
+  lineHeight: 1.45,
+  whiteSpace: 'pre-wrap',
+  overflowWrap: 'anywhere',
+};
+// HTML is previewed as it reads once pasted, so it takes the reading font.
+const RICH_STYLE: CSSProperties = {
+  maxWidth: 440,
+  color: '#e5e8eb',
+  fontSize: 12,
+  lineHeight: 1.45,
+};
+const LINK_STYLE: CSSProperties = { color: '#8abbff' };
+
+export interface CitationPreviewProps {
+  reference: Reference;
+  format: CitationFormatId;
+  /** Journal style, for the formats that have one. */
+  style?: CitationStyleId;
+}
+
+/**
+ * What a copy of the reference puts on the clipboard, as it will read once
+ * pasted: the emphasis of the style for HTML, the source itself otherwise.
+ * @param props - Reference, format and style to preview.
+ * @returns The body of the preview tooltip.
+ */
+export function CitationPreview(props: CitationPreviewProps): ReactElement {
+  const { reference, format, style } = props;
+
+  if (format === 'html' && style !== undefined) {
+    return (
+      <div className="citation-preview" style={RICH_STYLE}>
+        {citationSegments(reference, style).map((segment, index) => (
+          // The segments of one citation are a fixed list, never reordered.
+          // eslint-disable-next-line react/no-array-index-key
+          <Segment key={index} segment={segment} />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <pre className="citation-preview" style={PREVIEW_STYLE}>
+      {formatCitation(reference, format, style)}
+    </pre>
+  );
+}
+
+function Segment(props: {
+  segment: ReturnType<typeof citationSegments>[number];
+}): ReactElement {
+  const { segment } = props;
+  switch (segment.kind) {
+    case 'italic':
+      return <em>{segment.text}</em>;
+    case 'bold':
+      return <strong>{segment.text}</strong>;
+    case 'link':
+      return <span style={LINK_STYLE}>{segment.text}</span>;
+    case 'text':
+      return <span>{segment.text}</span>;
+    default:
+      return <span />;
+  }
+}

package/src/citation/ui/CiteButton.tsx

@@ -0,0 +1,39 @@
+import type { ReactElement } from 'react';
+
+import type { HeaderButtonProps } from '../../shared/ui/MenuButton.tsx';
+import { MenuButton } from '../../shared/ui/MenuButton.tsx';
+import type { Reference } from '../core/reference.ts';
+
+import { CitationMenu } from './CitationMenu.tsx';
+
+export interface CiteButtonProps extends HeaderButtonProps {
+  /** The work the site asks to be cited. */
+  reference: Reference;
+  /**
+   * Text of the button. In a compact bar it is not written, but it stays what
+   * the pointer and a screen reader are told.
+   * @default 'Cite'
+   */
+  label?: string;
+}
+
+/**
+ * The Cite entry of a site header: one button opening the article at its DOI,
+ * the reference in the style a journal asks for, and the files a reference
+ * manager imports.
+ * @param props - The work being cited, and how the menu opens.
+ * @returns The button and its menu.
+ */
+export function CiteButton(props: CiteButtonProps): ReactElement {
+  const { reference, label = 'Cite', ...rest } = props;
+
+  return (
+    <MenuButton
+      {...rest}
+      className="citation-button"
+      icon="citation"
+      label={label}
+      menu={<CitationMenu reference={reference} />}
+    />
+  );
+}

package/src/citation/ui/entries.tsx

@@ -0,0 +1,144 @@
+import type { IconName, Intent } from '@blueprintjs/core';
+import { MenuItem, Tooltip } from '@blueprintjs/core';
+import type { CSSProperties, ReactElement } from 'react';
+
+import { downloadCitation } from '../core/download.ts';
+import type { CitationDownload, CitationFormat } from '../core/formats.ts';
+import type { Reference } from '../core/reference.ts';
+import type { CitationStyle } from '../core/segments.ts';
+
+import { CitationPreview } from './CitationPreview.tsx';
+
+// An entry carrying its preview tooltip is also a popover target, and
+// Blueprint's `.bp6-submenu .bp6-popover-target` then turns the row into a
+// block, stacking the icon, the name and the journals. An inline rule outranks
+// any selector, so the row survives wherever the entry is used.
+const ENTRY_STYLE: CSSProperties = { display: 'flex' };
+// Journal names are set in italic, as every one of these styles asks for.
+const JOURNALS_STYLE: CSSProperties = { fontStyle: 'italic' };
+// Long enough that running the pointer down the menu opens no preview.
+const PREVIEW_OPEN_DELAY = 400;
+
+/** Feedback shown on an entry just after it was clicked. */
+export interface CopyState {
+  icon: IconName;
+  intent: Intent;
+  label: string;
+}
+
+export interface CopyEntryProps {
+  /** The work being cited. */
+  reference: Reference;
+  /** The format the entry copies. */
+  format: CitationFormat;
+  /**
+   * Style of the entry, when it sits in the submenu of a styled format.
+   * @default undefined
+   */
+  style?: CitationStyle;
+  /** Feedback of the last copy, while it is showing. */
+  state: CopyState | null;
+  /** Called with what the entry copies. */
+  onCopy: (format: CitationFormat, style?: CitationStyle) => void;
+}
+
+/**
+ * One entry that copies, previewing on hover what it puts on the clipboard.
+ * @param props - The reference, the format, and the feedback showing.
+ * @returns The menu entry.
+ */
+export function CopyEntry(props: CopyEntryProps): ReactElement {
+  const { reference, format, style, state, onCopy } = props;
+  const entry = style ?? format;
+
+  return (
+    <PreviewTooltip reference={reference} format={format.id} style={style}>
+      {(targetProps) => (
+        <MenuItem
+          {...targetProps}
+          style={ENTRY_STYLE}
+          icon={state?.icon ?? 'clipboard'}
+          intent={state?.intent}
+          text={entry.label}
+          labelElement={
+            // The hint of a style entry is a list of journals, in italic.
+            style !== undefined && state === null ? (
+              <span style={JOURNALS_STYLE}>{entry.hint}</span>
+            ) : (
+              (state?.label ?? entry.hint)
+            )
+          }
+          shouldDismissPopover={false}
+          onClick={() => {
+            onCopy(format, style);
+          }}
+        />
+      )}
+    </PreviewTooltip>
+  );
+}
+
+export interface DownloadEntryProps {
+  /** The work being saved. */
+  reference: Reference;
+  /** The file to write, from `CITATION_DOWNLOADS`. */
+  download: CitationDownload;
+}
+
+/**
+ * One entry saving the file a reference manager imports.
+ * @param props - The entry options.
+ * @returns The menu entry.
+ */
+export function DownloadEntry(props: DownloadEntryProps): ReactElement {
+  const { reference, download } = props;
+  return (
+    <PreviewTooltip reference={reference} format={download.format}>
+      {(targetProps) => (
+        <MenuItem
+          {...targetProps}
+          style={ENTRY_STYLE}
+          icon="download"
+          text={download.label}
+          labelElement={download.hint}
+          onClick={() => {
+            downloadCitation(reference, download);
+          }}
+        />
+      )}
+    </PreviewTooltip>
+  );
+}
+
+/**
+ * The hover preview of what an entry copies or saves.
+ * @param props - The preview options.
+ * @param props.reference - The work being written.
+ * @param props.format - The format the entry produces.
+ * @param props.style - The journal style, for a format that has one.
+ * @param props.children - The entry the preview is anchored on.
+ * @returns The entry, wrapped in its preview tooltip.
+ */
+function PreviewTooltip(props: {
+  reference: Reference;
+  format: CitationFormat['id'];
+  style?: CitationStyle;
+  children: (targetProps: Record<string, unknown>) => ReactElement;
+}): ReactElement {
+  const { reference, format, style, children } = props;
+  return (
+    <Tooltip
+      placement="left"
+      popoverClassName="citation-tooltip"
+      hoverOpenDelay={PREVIEW_OPEN_DELAY}
+      content={
+        <CitationPreview
+          reference={reference}
+          format={format}
+          style={style?.id}
+        />
+      }
+      renderTarget={({ isOpen, ...targetProps }) => children(targetProps)}
+    />
+  );
+}

package/src/citation/ui/index.ts

@@ -0,0 +1,6 @@
+export type { CitationMenuProps } from './CitationMenu.tsx';
+export { CitationMenu } from './CitationMenu.tsx';
+export type { CitationPreviewProps } from './CitationPreview.tsx';
+export { CitationPreview } from './CitationPreview.tsx';
+export type { CiteButtonProps } from './CiteButton.tsx';
+export { CiteButton } from './CiteButton.tsx';

package/src/core.ts

@@ -0,0 +1,2 @@
+export * from './citation/core/index.ts';
+export * from './ecosystem/core/index.ts';

package/src/ecosystem/core/index.ts

@@ -0,0 +1,7 @@
+export type {
+  EcosystemSite,
+  SiteId,
+  SiteMarkColors,
+  SiteName,
+} from './sites.ts';
+export { ECOSYSTEM_SITES, siteUrl } from './sites.ts';

package/src/ecosystem/core/sites.ts

@@ -0,0 +1,164 @@
+/** The sites the menu links to, in the order they are listed. */
+export type SiteId =
+  | 'inchi'
+  | 'vcl'
+  | 'smiles'
+  | 'chemcalc'
+  | 'nmrium'
+  | 'surge'
+  | 'tex'
+  | 'lcao'
+  | 'regexp'
+  | 'pdb';
+
+export interface SiteName {
+  /** First half of the name, set in the site's leading colour. */
+  lead: string;
+  /** Second half, set in the site's answering colour. */
+  alt: string;
+  /**
+   * Whether a faint dot separates the two halves, as an address-shaped name
+   * takes and a product-shaped one does not.
+   * @default false
+   */
+  dot?: boolean;
+}
+
+export interface EcosystemSite {
+  id: SiteId;
+  /** The name, split the way the site's own wordmark splits it. */
+  name: SiteName;
+  /** Where the site lives, written the way it is typed. */
+  host: string;
+  /** One line on what the site does. */
+  tagline: string;
+  /** The colour the first half of the name is set in. */
+  brand: string;
+  /**
+   * The colour the second half is set in. It is the site's answering colour
+   * darkened until it is readable on white, because several of those are
+   * yellows and ambers that sit around 2:1 there.
+   */
+  brandAlt: string;
+  /** The plate of the site's mark, and the colour one element of it carries. */
+  mark: SiteMarkColors;
+}
+
+export interface SiteMarkColors {
+  /** The rounded square the mark is drawn on. */
+  plate: string;
+  /** The colour exactly one element of the mark takes. */
+  accent: string;
+  /**
+   * The hairline a plate as light as the tile behind it needs, so it still
+   * reads as a plate rather than as a drawing floating on the row.
+   * @default undefined
+   */
+  edge?: string;
+}
+
+/**
+ * Every site of the family, each with the two colours it owns. The marks that
+ * go with them live in `marks.tsx`.
+ */
+export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
+  {
+    id: 'inchi',
+    name: { lead: 'inchi', alt: 'cheminfo', dot: true },
+    host: 'inchi.cheminfo.org',
+    tagline: 'InChI and InChIKey from a structure, in the browser.',
+    brand: '#5b21b6',
+    brandAlt: '#a16207',
+    mark: { plate: '#5b21b6', accent: '#fcd34d' },
+  },
+  {
+    id: 'vcl',
+    name: { lead: 'vcl', alt: 'cheminfo', dot: true },
+    host: 'vcl.cheminfo.org',
+    tagline: 'Combine a core and fragments into a screened library.',
+    brand: '#2d72d2',
+    brandAlt: '#9a3412',
+    mark: { plate: '#2d72d2', accent: '#eb6847' },
+  },
+  {
+    id: 'smiles',
+    name: { lead: 'smiles', alt: 'cheminfo', dot: true },
+    host: 'smiles.cheminfo.org',
+    tagline: 'Draw a structure, read its SMILES, learn the notation.',
+    brand: '#1c6e42',
+    brandAlt: '#9a3412',
+    mark: { plate: '#1c6e42', accent: '#ea580c' },
+  },
+  {
+    id: 'chemcalc',
+    name: { lead: 'Chem', alt: 'Calc' },
+    host: 'www.chemcalc.org',
+    tagline: 'Molecular formula, exact mass and isotopic distribution.',
+    brand: '#5b52e0',
+    brandAlt: '#0d9488',
+    mark: { plate: '#5b52e0', accent: '#09d3ac' },
+  },
+  {
+    id: 'nmrium',
+    name: { lead: 'NMR', alt: 'ium' },
+    host: 'www.nmrium.org',
+    tagline: 'Process and assign NMR spectra in the browser.',
+    brand: '#ea580c',
+    brandAlt: '#2b143e',
+    mark: { plate: '#2b143e', accent: '#ea580c' },
+  },
+  {
+    id: 'surge',
+    name: { lead: 'surge', alt: 'cheminfo', dot: true },
+    host: 'surge.cheminfo.org',
+    tagline: 'Every constitutional isomer of a molecular formula.',
+    brand: '#4338ca',
+    brandAlt: '#be123c',
+    mark: { plate: '#4338ca', accent: '#e11d48' },
+  },
+  {
+    id: 'tex',
+    name: { lead: 'tex', alt: 'cheminfo', dot: true },
+    host: 'tex.cheminfo.org',
+    tagline: 'LaTeX formulas rendered to SVG or PNG from a URL.',
+    brand: '#a21caf',
+    brandAlt: '#a16207',
+    mark: { plate: '#a21caf', accent: '#facc15' },
+  },
+  {
+    id: 'lcao',
+    name: { lead: 'lcao', alt: 'cheminfo', dot: true },
+    host: 'lcao.cheminfo.org',
+    tagline: 'Combine atomic orbitals into molecular ones.',
+    brand: '#1565c0',
+    brandAlt: '#c62828',
+    mark: { plate: '#ffffff', accent: '#c62828', edge: '#dfe3e8' },
+  },
+  {
+    id: 'regexp',
+    name: { lead: 'regexp', alt: 'cheminfo', dot: true },
+    host: 'regexp.cheminfo.org',
+    tagline: 'Learn regular expressions in a live playground.',
+    brand: '#1e3a8a',
+    brandAlt: '#a16207',
+    mark: { plate: '#1e3a8a', accent: '#fde047' },
+  },
+  {
+    id: 'pdb',
+    name: { lead: 'pdb', alt: 'cheminfo', dot: true },
+    host: 'pdb.cheminfo.org',
+    tagline: 'A fast look at any Protein Data Bank entry.',
+    brand: '#2563eb',
+    brandAlt: '#b45309',
+    mark: { plate: '#2563eb', accent: '#fbbf24' },
+  },
+];
+
+/**
+ * The address of a site, which is its host over https.
+ * @param site - The site being linked to.
+ * @returns The URL to open.
+ */
+export function siteUrl(site: EcosystemSite): string {
+  return `https://${site.host}/`;
+}

package/src/ecosystem/ui/EcosystemButton.tsx

@@ -0,0 +1,41 @@
+import type { ReactElement } from 'react';
+
+import type { HeaderButtonProps } from '../../shared/ui/MenuButton.tsx';
+import { MenuButton } from '../../shared/ui/MenuButton.tsx';
+import type { SiteId } from '../core/sites.ts';
+
+import { EcosystemMenu } from './EcosystemMenu.tsx';
+
+export interface EcosystemButtonProps extends HeaderButtonProps {
+  /**
+   * The site this button sits on, which is shown but never linked.
+   * @default undefined
+   */
+  currentSiteId?: SiteId;
+  /**
+   * Text of the button. In a compact bar it is not written, but it stays what
+   * the pointer and a screen reader are told.
+   * @default 'Tools'
+   */
+  label?: string;
+}
+
+/**
+ * The Tools entry of a site header: one button opening every other site of the
+ * family, each behind its own little logo.
+ * @param props - The site it sits on, and how the menu opens.
+ * @returns The button and its menu.
+ */
+export function EcosystemButton(props: EcosystemButtonProps): ReactElement {
+  const { currentSiteId, label = 'Tools', ...rest } = props;
+
+  return (
+    <MenuButton
+      {...rest}
+      className="ecosystem-button"
+      icon="grid-view"
+      label={label}
+      menu={<EcosystemMenu currentSiteId={currentSiteId} />}
+    />
+  );
+}