Write React Components

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

I can help you with that

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.

`CodeBox` (Done)

Implementation to match: nodejs.org CodeBox

`CodeTabs` (Done)

Implementation to match: nodejs.org CodeTabs

`DataTag` (Done)

`ChangeHistory` (In Review)

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` (Done)

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` (Done)

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 (Done)

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

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

We already 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).

The other components, however, should like in ui-components, so they can be tested with Storybook.

Good stuff! Thanks for documenting this!

All react components have been written (one still needs to land in ui components). this'll close once they are all merged into this repository in the linked PR.

I've self assigned to discourage users from taking on this issue, since it's all but completed.

Navigation Menu

Repository navigation

Write React Components #10

`CodeBox` (Done)

`CodeTabs` (Done)

`DataTag` (Done)

`ChangeHistory` (In Review)

`SideBar` (Done)

`MetaBar` (Done)

Prop-less Wrapper Components

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Write React Components #10

Description

Activity

Avinashshiyani commented on Aug 15, 2024

AugustinMauroy commented on Sep 11, 2024

avivkeller commented on May 27, 2025

CodeBox (Done)

CodeTabs (Done)

DataTag (Done)

ChangeHistory (In Review)

SideBar (Done)

MetaBar (Done)

Prop-less Wrapper Components

AugustinMauroy commented on May 28, 2025

avivkeller commented on May 28, 2025

ovflowd commented on May 28, 2025

avivkeller commented on Jun 15, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

`CodeBox` (Done)

`CodeTabs` (Done)

`DataTag` (Done)

`ChangeHistory` (In Review)

`SideBar` (Done)

`MetaBar` (Done)