react-cheminfo 0.11.0 → 0.13.0

package/src/ecosystem/core/types.ts

@@ -0,0 +1,94 @@
+import type { SiteGroupId } from './groups.ts';
+
+/** The sites the menu links to. */
+export type SiteId =
+  | 'learn'
+  | 'inchi'
+  | 'vcl'
+  | 'smiles'
+  | 'openbabel'
+  | 'chemcalc'
+  | 'nmrium'
+  | 'metabo'
+  | 'derepflow'
+  | 'surge'
+  | 'tex'
+  | 'lcao'
+  | 'regexp'
+  | 'pdb'
+  | 'elucidation'
+  | 'equilibrium'
+  | 'polycarp'
+  | '3d'
+  | 'periodic-table'
+  | 'database';
+
+/** A site's name, split the way its own wordmark splits it. */
+export interface SiteName {
+  /**
+   * First half of the name, set in the site's leading colour unless `ink`
+   * names it.
+   */
+  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;
+  /**
+   * The half a site's own wordmark sets in the family's ink rather than in a
+   * colour. The other half then carries `brand`, so a site whose logo spends
+   * its one colour on the second half is written the way it is drawn.
+   * @default undefined
+   */
+  ink?: 'lead' | 'alt';
+}
+
+/** One site of the family: its name, address, topic and two colours. */
+export interface EcosystemSite {
+  /** The identifier every component and helper names the site by. */
+  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;
+  /** Where the sources live, and what a Source link opens. */
+  repository: string;
+  /** One line on what the site does. */
+  tagline: string;
+  /**
+   * The topic the site is written under, which is what decides where it sits
+   * in the menu and in the footer.
+   */
+  group: SiteGroupId;
+  /**
+   * The colour the name is written in — the first half, or the second when
+   * `name.ink` leaves the first in the family's ink.
+   */
+  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;
+}
+
+/** The colours a site's mark is drawn in. */
+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;
+}

package/src/ecosystem/ui/EcosystemButton.tsx

@@ -2,10 +2,12 @@ import type { ReactElement } from 'react';
 
 import type { HeaderButtonProps } from '../../shared/ui/MenuButton.tsx';
 import { MenuButton } from '../../shared/ui/MenuButton.tsx';
+import { joinClassNames } from '../../shared/ui/joinClassNames.ts';
 import type { SiteId } from '../core/sites.ts';
 
 import { EcosystemMenu } from './EcosystemMenu.tsx';
 
+/** What the Tools entry of a header needs. */
 export interface EcosystemButtonProps extends HeaderButtonProps {
   /**
    * The site this button sits on, which is shown but never linked.
@@ -18,6 +20,11 @@ export interface EcosystemButtonProps extends HeaderButtonProps {
    * @default 'Tools'
    */
   label?: string;
+  /**
+   * Class names added to the root element, after the component's own.
+   * @default undefined
+   */
+  className?: string;
 }
 
 /**
@@ -27,12 +34,12 @@ export interface EcosystemButtonProps extends HeaderButtonProps {
  * @returns The button and its menu.
  */
 export function EcosystemButton(props: EcosystemButtonProps): ReactElement {
-  const { currentSiteId, label = 'Tools', ...rest } = props;
+  const { currentSiteId, label = 'Tools', className, ...rest } = props;
 
   return (
     <MenuButton
       {...rest}
-      className="ecosystem-button"
+      className={joinClassNames('ecosystem-button', className)}
       icon="grid-view"
       label={label}
       menu={<EcosystemMenu currentSiteId={currentSiteId} />}

package/src/ecosystem/ui/EcosystemLinks.tsx

@@ -1,36 +1,42 @@
 import type { CSSProperties, ReactElement } from 'react';
 
+import { joinClassNames } from '../../shared/ui/joinClassNames.ts';
+import { TOKEN } from '../../tokens/core/familyTokens.ts';
+import { groupedSites } from '../core/lookup.ts';
 import type { SiteId } from '../core/sites.ts';
-import { ECOSYSTEM_SITES, siteUrl } from '../core/sites.ts';
+import { siteUrl } from '../core/sites.ts';
 
-import { SiteTile } from './SiteTile.tsx';
+import { SiteGroupGrid } from './SiteGroupGrid.tsx';
+import { ECOSYSTEM_HEADING_STYLE } from './ecosystemStyles.ts';
 
 // The menu of `EcosystemMenu` lives inside a popover, so its links only enter
 // the document once somebody clicks. A crawler never clicks, so these are the
 // links that carry the family: always rendered, in the page, followed — and
 // each one carrying the name and the one line that says what it opens, as real
-// text rather than a `title` a crawler ignores.
+// text rather than a `title` a crawler ignores. The topic headings give it the
+// one thing a flat list of addresses cannot: what they have in common.
 const SECTION_STYLE: CSSProperties = {
   display: 'flex',
   flexDirection: 'column',
   gap: 8,
 };
-const HEADING_STYLE: CSSProperties = {
-  margin: 0,
-  color: 'var(--text-muted, #5b6875)',
-  fontSize: '0.75rem',
-  fontWeight: 600,
-};
-const GRID_STYLE: CSSProperties = {
-  display: 'grid',
-  gridTemplateColumns: 'repeat(auto-fit, minmax(15rem, 1fr))',
-  gap: 2,
+const ROWS_STYLE: CSSProperties = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 6,
 };
 const ROW_STYLE: CSSProperties = {
   display: 'flex',
   flexWrap: 'wrap',
   alignItems: 'baseline',
-  gap: '0.35rem 0.9rem',
+  gap: '0.3rem 0.85rem',
+};
+const ROW_LABEL_STYLE: CSSProperties = {
+  color: TOKEN.textFaint,
+  fontSize: '0.6875rem',
+  fontWeight: 700,
+  letterSpacing: '0.06em',
+  textTransform: 'uppercase',
 };
 const LINK_STYLE: CSSProperties = {
   fontSize: '0.8125rem',
@@ -40,10 +46,11 @@ const LINK_STYLE: CSSProperties = {
 };
 const CURRENT_STYLE: CSSProperties = {
   ...LINK_STYLE,
-  color: 'var(--text-faint, #8a96a3)',
+  color: TOKEN.textFaint,
   cursor: 'default',
 };
 
+/** What the footer's list of the family needs. */
 export interface EcosystemLinksProps {
   /**
    * The site the visitor is already on, which is written but never linked.
@@ -58,55 +65,66 @@ export interface EcosystemLinksProps {
   /**
    * How much of each site is written. `grid` gives every site its mark, its
    * name and the line saying what it does — which is what a crawler reads to
-   * know what it is following, so it is the default. `row` writes the names
-   * only, for a footer with no room.
+   * know what it is following, so it is the default. `row` writes one line per
+   * topic, the names only, for a footer with no room.
    * @default 'grid'
    */
   layout?: 'grid' | 'row';
+  /**
+   * Class names added to the root element, after the component's own.
+   * @default undefined
+   */
+  className?: string;
 }
 
 /**
- * Every site of the family as a plain link, for the footer of a site. It is
- * what lets a crawler — and a visitor with no patience for menus — walk from
- * one of our tools to the next, so it is rendered on every page rather than
- * behind a button.
+ * Every site of the family as a plain link, gathered under its topic, for the
+ * footer of a site. It is what lets a crawler — and a visitor with no patience
+ * for menus — walk from one of our tools to the next, so it is rendered on
+ * every page rather than behind a button.
  * @param props - The site it sits on, what introduces the section, and how much
  * of each site is written.
  * @returns The section of links.
  */
 export function EcosystemLinks(props: EcosystemLinksProps): ReactElement {
-  const { currentSiteId, heading = 'Our other tools', layout = 'grid' } = props;
+  const {
+    className,
+    currentSiteId,
+    heading = 'Our other tools',
+    layout = 'grid',
+  } = props;
 
   return (
-    <nav className="ecosystem-links" style={SECTION_STYLE} aria-label={heading}>
-      <h2 style={HEADING_STYLE}>{heading}</h2>
+    <nav
+      className={joinClassNames('ecosystem-links', className)}
+      style={SECTION_STYLE}
+      aria-label={heading}
+    >
+      <h2 style={ECOSYSTEM_HEADING_STYLE}>{heading}</h2>
       {layout === 'grid' ? (
-        <div style={GRID_STYLE}>
-          {ECOSYSTEM_SITES.map((site) => (
-            <SiteTile
-              key={site.id}
-              site={site}
-              isCurrent={site.id === currentSiteId}
-            />
-          ))}
-        </div>
+        <SiteGroupGrid currentSiteId={currentSiteId} />
       ) : (
-        <div style={ROW_STYLE}>
-          {ECOSYSTEM_SITES.map((site) =>
-            site.id === currentSiteId ? (
-              <span key={site.id} style={CURRENT_STYLE}>
-                {site.host}
-              </span>
-            ) : (
-              <a
-                key={site.id}
-                style={{ ...LINK_STYLE, color: site.brand }}
-                href={siteUrl(site)}
-              >
-                {site.host}
-              </a>
-            ),
-          )}
+        <div style={ROWS_STYLE}>
+          {groupedSites().map(({ group, sites }) => (
+            <div key={group.id} style={ROW_STYLE}>
+              <span style={ROW_LABEL_STYLE}>{group.label}</span>
+              {sites.map((site) =>
+                site.id === currentSiteId ? (
+                  <span key={site.id} style={CURRENT_STYLE}>
+                    {site.host}
+                  </span>
+                ) : (
+                  <a
+                    key={site.id}
+                    style={{ ...LINK_STYLE, color: site.brand }}
+                    href={siteUrl(site)}
+                  >
+                    {site.host}
+                  </a>
+                ),
+              )}
+            </div>
+          ))}
         </div>
       )}
     </nav>

package/src/ecosystem/ui/EcosystemMenu.tsx

@@ -1,64 +1,57 @@
 import type { CSSProperties, ReactElement } from 'react';
-import { useState } from 'react';
 
+import { joinClassNames } from '../../shared/ui/joinClassNames.ts';
 import type { SiteId } from '../core/sites.ts';
-import { ECOSYSTEM_SITES } from '../core/sites.ts';
 
-import { SiteTile } from './SiteTile.tsx';
+import { SiteGroupGrid } from './SiteGroupGrid.tsx';
+import { ECOSYSTEM_HEADING_STYLE } from './ecosystemStyles.ts';
 
 const PANEL_STYLE: CSSProperties = {
   display: 'flex',
-  width: 'min(34rem, 90vw)',
+  width: 'min(62rem, 92vw)',
+  maxHeight: 'min(72vh, 44rem)',
   flexDirection: 'column',
-  padding: 12,
-  gap: 8,
-};
-const HEADING_STYLE: CSSProperties = {
-  color: 'var(--text-muted, #5b6875)',
-  fontSize: '0.75rem',
-  fontWeight: 600,
-};
-const GRID_STYLE: CSSProperties = {
-  display: 'grid',
-  gridTemplateColumns: 'repeat(auto-fit, minmax(15rem, 1fr))',
-  gap: 2,
+  padding: '12px 16px 4px',
+  gap: 10,
+  overflowY: 'auto',
 };
 
+/** What the Tools menu needs. */
 export interface EcosystemMenuProps {
   /**
    * The site the visitor is already on, which is shown but never linked.
    * @default undefined
    */
   currentSiteId?: SiteId;
+  /**
+   * Class names added to the root element, after the component's own.
+   * @default undefined
+   */
+  className?: string;
 }
 
 /**
- * What the ecosystem button opens: every site of the family, each behind its
- * own little logo and the two colours it owns. It lives in a popover, so a
- * crawler never reaches it — `EcosystemLinks` is what carries the family
- * through the page itself.
+ * What the ecosystem button opens: every site of the family, gathered under the
+ * topic it belongs to, each behind its own little logo and the two colours it
+ * owns.
+ *
+ * The topics are what make the menu answer a question a flat grid of tiles
+ * never could — which of these is for a first-year course, and which for
+ * a research project. It lives in a popover, so a crawler never reaches it;
+ * `EcosystemLinks` is what carries the family through the page itself.
  * @param props - The site the visitor is already on.
- * @returns The grid of sites.
+ * @returns The topics and their sites.
  */
 export function EcosystemMenu(props: EcosystemMenuProps): ReactElement {
-  const { currentSiteId } = props;
-  const [hovered, setHovered] = useState<SiteId | null>(null);
+  const { className, currentSiteId } = props;
 
   return (
-    <div className="ecosystem-menu" style={PANEL_STYLE}>
-      <div style={HEADING_STYLE}>Our other tools, all in the browser</div>
-      <div style={GRID_STYLE}>
-        {ECOSYSTEM_SITES.map((site) => (
-          <SiteTile
-            key={site.id}
-            site={site}
-            isCurrent={site.id === currentSiteId}
-            isHovered={hovered === site.id}
-            onHover={setHovered}
-            newTab
-          />
-        ))}
-      </div>
+    <div
+      className={joinClassNames('ecosystem-menu', className)}
+      style={PANEL_STYLE}
+    >
+      <div style={ECOSYSTEM_HEADING_STYLE}>Our tools, all in the browser</div>
+      <SiteGroupGrid currentSiteId={currentSiteId} lit newTab />
     </div>
   );
 }

package/src/ecosystem/ui/SiteGroupGrid.tsx

@@ -0,0 +1,65 @@
+import type { CSSProperties, ReactElement } from 'react';
+import { useState } from 'react';
+
+import { groupedSites } from '../core/lookup.ts';
+import type { SiteId } from '../core/sites.ts';
+
+import { SiteGroupSection } from './SiteGroupSection.tsx';
+import { SiteTile } from './SiteTile.tsx';
+
+const TOPICS_STYLE: CSSProperties = {
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fit, minmax(17rem, 1fr))',
+  alignItems: 'start',
+  gap: '4px 28px',
+};
+
+/** What a grid of the family's topics needs. */
+interface SiteGroupGridProps {
+  /**
+   * The site the visitor is already on, which is written but never linked.
+   * @default undefined
+   */
+  currentSiteId?: SiteId;
+  /**
+   * Whether a tile lights up in its own colour under the pointer, which a menu
+   * the visitor opened on purpose does and a footer does not.
+   * @default false
+   */
+  lit?: boolean;
+  /**
+   * Whether each link opens a tab of its own.
+   * @default false
+   */
+  newTab?: boolean;
+}
+
+/**
+ * Every site of the family as a tile, gathered under its topic, in the columns
+ * the footer and the Tools menu both draw.
+ * @param props - The site it sits on, and how the tiles behave.
+ * @returns The grid of topics.
+ */
+export function SiteGroupGrid(props: SiteGroupGridProps): ReactElement {
+  const { currentSiteId, lit = false, newTab = false } = props;
+  const [hovered, setHovered] = useState<SiteId | null>(null);
+
+  return (
+    <div style={TOPICS_STYLE}>
+      {groupedSites().map(({ group, sites }) => (
+        <SiteGroupSection key={group.id} group={group}>
+          {sites.map((site) => (
+            <SiteTile
+              key={site.id}
+              site={site}
+              isCurrent={site.id === currentSiteId}
+              isHovered={lit && hovered === site.id}
+              onHover={lit ? setHovered : undefined}
+              newTab={newTab}
+            />
+          ))}
+        </SiteGroupSection>
+      ))}
+    </div>
+  );
+}

package/src/ecosystem/ui/SiteGroupSection.tsx

@@ -0,0 +1,64 @@
+import type { CSSProperties, ReactElement, ReactNode } from 'react';
+import { useId } from 'react';
+
+import { TOKEN } from '../../tokens/core/familyTokens.ts';
+import type { SiteGroup } from '../core/groups.ts';
+
+// A topic is separated by a hairline and a small heading rather than by a
+// colour of its own: every site brings its own two, and a
+// menu that also colours its headings stops reading as a list of tools.
+const SECTION_STYLE: CSSProperties = {
+  paddingTop: 12,
+  borderTop: `1px solid ${TOKEN.border}`,
+  marginBottom: 16,
+};
+const LABEL_STYLE: CSSProperties = {
+  margin: 0,
+  color: TOKEN.text,
+  fontSize: '0.6875rem',
+  fontWeight: 700,
+  letterSpacing: '0.07em',
+  textTransform: 'uppercase',
+};
+const BLURB_STYLE: CSSProperties = {
+  margin: '2px 0 8px',
+  color: TOKEN.textFaint,
+  fontSize: '0.72rem',
+  lineHeight: 1.4,
+};
+const BODY_STYLE: CSSProperties = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 2,
+};
+
+/** What one topic of the family needs. */
+interface SiteGroupSectionProps {
+  /** The topic being headed. */
+  group: SiteGroup;
+  /** The sites written under it. */
+  children: ReactNode;
+}
+
+/**
+ * One topic of the family: its heading, the line saying who it is for, and the
+ * sites under it.
+ * The heading id is unique to each render, because the footer and the open
+ * Tools menu write the same topics into one document.
+ * @param props - The topic, and its sites.
+ * @returns The section.
+ */
+export function SiteGroupSection(props: SiteGroupSectionProps): ReactElement {
+  const { group, children } = props;
+  const headingId = `${useId()}ecosystem-${group.id}`;
+
+  return (
+    <section style={SECTION_STYLE} aria-labelledby={headingId}>
+      <h3 id={headingId} style={LABEL_STYLE}>
+        {group.label}
+      </h3>
+      <p style={BLURB_STYLE}>{group.blurb}</p>
+      <div style={BODY_STYLE}>{children}</div>
+    </section>
+  );
+}

package/src/ecosystem/ui/SiteTheme.tsx

@@ -3,6 +3,7 @@ import type { ReactElement } from 'react';
 import type { SiteId } from '../core/sites.ts';
 import { siteTokensCss } from '../core/tokens.ts';
 
+/** What the site palette needs. */
 export interface SiteThemeProps {
   /** The site whose palette the page takes. */
   siteId: SiteId;

package/src/ecosystem/ui/SiteTile.tsx

@@ -1,5 +1,7 @@
 import type { CSSProperties, ReactElement } from 'react';
 
+import { TOKEN } from '../../tokens/core/familyTokens.ts';
+import { siteNameColors } from '../core/nameColors.ts';
 import type { EcosystemSite, SiteId } from '../core/sites.ts';
 import { siteUrl } from '../core/sites.ts';
 
@@ -7,17 +9,20 @@ import { SiteMark } from './marks.tsx';
 
 const TILE_STYLE: CSSProperties = {
   display: 'flex',
-  alignItems: 'center',
+  alignItems: 'flex-start',
   padding: '7px 8px',
   border: '1px solid transparent',
   borderRadius: 10,
-  color: 'var(--text, #16202c)',
+  color: TOKEN.text,
   gap: 10,
   textDecoration: 'none',
   transition: 'background 120ms, border-color 120ms, transform 120ms',
 };
 const MARK_HOLDER_STYLE: CSSProperties = {
   display: 'flex',
+  // The name sits on the first line, so the mark answers that line rather than
+  // the middle of a tagline that may run to three.
+  marginTop: 1,
   transition: 'transform 160ms',
 };
 const TEXT_STYLE: CSSProperties = { minWidth: 0 };
@@ -37,11 +42,12 @@ const HERE_STYLE: CSSProperties = {
   textTransform: 'uppercase',
 };
 const TAGLINE_STYLE: CSSProperties = {
-  color: 'var(--text-muted, #5b6875)',
+  color: TOKEN.textMuted,
   fontSize: '0.75rem',
   lineHeight: 1.35,
 };
 
+/** What one tile of the family needs. */
 export interface SiteTileProps {
   /** The site the tile opens. */
   site: EcosystemSite;
@@ -63,6 +69,11 @@ export interface SiteTileProps {
    * @default false
    */
   newTab?: boolean;
+  /**
+   * Class names added to the root element.
+   * @default undefined
+   */
+  className?: string;
 }
 
 /**
@@ -74,8 +85,16 @@ export interface SiteTileProps {
  * @returns The tile.
  */
 export function SiteTile(props: SiteTileProps): ReactElement {
-  const { site, isCurrent, isHovered = false, onHover, newTab = false } = props;
+  const {
+    className,
+    site,
+    isCurrent,
+    isHovered = false,
+    onHover,
+    newTab = false,
+  } = props;
   const lit = isHovered && !isCurrent;
+  const colors = siteNameColors(site);
 
   const body = (
     <>
@@ -90,11 +109,11 @@ export function SiteTile(props: SiteTileProps): ReactElement {
       <div style={TEXT_STYLE}>
         <div style={NAME_STYLE}>
           <span>
-            <span style={{ color: site.brand }}>{site.name.lead}</span>
+            <span style={{ color: colors.lead }}>{site.name.lead}</span>
             {site.name.dot ? (
-              <span style={{ color: 'var(--text-faint, #8a96a3)' }}>.</span>
+              <span style={{ color: colors.dot }}>.</span>
             ) : null}
-            <span style={{ color: site.brandAlt }}>{site.name.alt}</span>
+            <span style={{ color: colors.alt }}>{site.name.alt}</span>
           </span>
           {isCurrent ? (
             <span style={{ ...HERE_STYLE, color: site.brandAlt }}>
@@ -119,6 +138,7 @@ export function SiteTile(props: SiteTileProps): ReactElement {
 
   return (
     <a
+      className={className}
       style={style}
       href={siteUrl(site)}
       target={newTab ? '_blank' : undefined}
@@ -136,7 +156,7 @@ export function SiteTile(props: SiteTileProps): ReactElement {
 // A tile lights up in the colour of the site it opens, never in ours: the
 // pointer moving down the grid is what makes the pairs of colours read.
 function tint(site: EcosystemSite, isCurrent: boolean, lit: boolean): string {
-  if (isCurrent) return 'var(--surface-sunken, #f5f7fa)';
+  if (isCurrent) return TOKEN.surfaceSunken;
   return lit ? `color-mix(in oklab, ${site.brand} 9%, white)` : 'transparent';
 }
 
@@ -145,6 +165,6 @@ function borderOf(
   isCurrent: boolean,
   lit: boolean,
 ): string {
-  if (isCurrent) return 'var(--border, #dfe3e8)';
+  if (isCurrent) return TOKEN.border;
   return lit ? `color-mix(in oklab, ${site.brand} 32%, white)` : 'transparent';
 }