Write React Components

[ovflowd]

This is the issue that requires nodejs/nodejs.org to be already as a monorepo or have a way that we can import the React Components created from there;

We would also need to add the API Docs-specific Components to this repository within the mdx-react generator folder. Layouts (header, footer, navigation) must probably exist within the react-web generator (?).. I assume that a good chunk can be reused from the Node.js Website ones.

The Figma design is available here: https://www.figma.com/design/pu1vZPqNIM7BePd6W8APA5/Node.js?node-id=422-7923

[Avinashshiyani]

I can help you with that

[AugustinMauroy]

Update on that:

• nodejs/nodejs.org as a monorepo
• i18n package
• UI package

Once we've created the UI package, we can open an output suite to create the components.

[avivkeller]

CodeBox

Implementation to match: nodejs.org CodeBox

---

CodeTabs

Implementation to match: nodejs.org CodeTabs

---

CircularIcon

Icon component for displaying single character emblems with colored backgrounds.

Props:

• symbol: Icon emblem (e.g., "C", "E", "W", "!")
• color: Icon color (e.g., "red", "green", "#FF5733")

Example:

<CircularIcon symbol="C" color="blue" />
<CircularIcon symbol="E" color="#FF5733" />
<CircularIcon symbol="S" color="orange" />

Design

---

ChangeHistory

Version history selector similar to @node-core/ui-components/Common/Select for displaying API changes across versions.

Props:

• changes: Array of change objects with structure:

  {
    versions: string[],  // e.g., ["v18.0.0", "v19.1.0", "v20.0.0"]
    label: string,       // e.g., "Added in", "Deprecated in", "Removed in"
    url?: string        // Optional link to changelog/release notes
  }

Example:

<ChangeHistory changes={[
  {
    versions: ["v16.0.0"],
    label: "Added in ...",
    url: "https://github.com/nodejs/node/pr/url"
  },
  {
    versions: ["v18.0.0", "v18.1.0"],
    label: "Modified in ..."
  },
  {
    versions: ["v20.0.0"],
    label: "Deprecated in ...",
    url: "https://github.com/nodejs/node/pr/url"
  }
]} />

Design

---

SideBar

Navigation sidebar for documentation pages, similar to @node-core/ui-components/Container/SideBar.

Props:

• versions: Array of available documentation versions (e.g., ["v18.0.0", "v20.0.0", "v21.0.0"])
• currentVersion: Currently selected version (e.g., "v20.1.0")
• currentPage: Current page identifier for highlighting (e.g., "async_context.html")
• docPages: Array of documentation page objects:

  {
    title: string,        // e.g., "Globals"
    headings: Array<[string, string]>,  // [title, hash] pairs
    doc: string          // filename, e.g., "globals.html"
  }

Example:

<SideBar
  versions={["v18.19.0", "v20.11.0", "v21.6.0"]}
  currentVersion="v20.11.0"
  currentPage="async_context.html"
  docPages={[
    {
      title: "Async Context",
      headings: [
        ["asyncLocalStorage", "#async-local-storage"],
        ["AsyncResource", "#async-resource"]
      ],
      doc: "async_context.html"
    },
    {
      title: "Buffer",
      headings: [
        ["Buffer.alloc()", "#buffer-alloc"],
        ["Buffer.from()", "#buffer-from"]
      ],
      doc: "buffer.html"
    }
  ]}
/>

Design

---

MetaBar

Wrapper of @node-core/ui-components/Containers/MetaBar.

Props:

• headings: Array of heading objects for table of contents:

  { depth: number, value: string }  // e.g., { depth: 2, value: "API Reference" }

• addedIn: Version when documentation/module was added (e.g., "v0.10.0")
• readingTime: Estimated reading time (e.g., "9 min read")
• viewAs: Array of alternative view formats:

  [string, string][]  // [Type, URL] pairs, e.g., [["JSON", "globals.json"]]

• editThisPage: GitHub URL for editing the current page

Example:

<MetaBar
  headings={[
    { depth: 1, value: "File System" },
    { depth: 2, value: "fs.readFile()" },
    { depth: 2, value: "fs.writeFile()" },
    { depth: 3, value: "Options" }
  ]}
  addedIn="v0.10.0"
  readingTime="12 min read"
  viewAs={[
    ["JSON", "fs.json"],
    ["Raw", "fs.md"]
  ]}
  editThisPage="https://github.com/nodejs/node/edit/main/doc/api/fs.md"
/>

---

Prop-less Wrapper Components

• NavBar: Wrapper of @node-core/ui-components/Containers/NavBar
• Footer: Wrapper of @node-core/ui-components/Containers/Footer

[AugustinMauroy]

For CodeBox and CodeTabs make them living in @node-core/ui-component

[avivkeller]

For CodeBox and CodeTabs make them living in @node-core/ui-component

No, we have base implementations there. The ones here should simply be a wrapper around those matching the wrappers we use on the website. (For example, adding the copy/paste functionality)

[ovflowd]

Good stuff! Thanks for documenting this!