react-lib-tools

Tools for creating documentation for React component libraries. Used by packages like react-window, react-resizable-panels, and others.

Compiling docs and examples

TSDoc comments can be compiled into a formatted structure using the compile-docs script:

import { compileDocs } from "react-lib-tools/scripts/compile-docs.ts";

await compileDocs({
  componentNames: ["ComponentOne", "ComponentTwo"],
  imperativeHandleNames: ["ImperativeHandleOne"]
});

Example snippets can be compiled into syntax-highlighted HTML using the compile-examples script:

import { compileExamples } from "react-lib-tools/scripts/compile-examples.ts";

await compileExamples();

Rendering docs and examples

The recommended way to render documentation generated by this app is to use AppRoot component:

import { AppRoot, NavLink } from "react-lib-tools";

<AppRoot
  navLinks={
    <>
      <NavLink path="/">Getting started</NavLink>
      {/* Other links... */}
    </>
  }
  packageDescription="some short description"
  packageName="your-package-name"
  routes={routes}
/>

The components in this project require Tailwind CSS to display properly. You'll need to configure Tailwind to include the styles provided by this library by adding the following to your application's root CSS file:

@source "node_modules/react-lib-tools";

@import "tailwindcss";
@import "react-lib-tools/styles.css";

The following CSS variables can be overridden to customize the theme:

@theme {
  --color-background-gradient-1: var(--color-green-300);
  --color-background-gradient-2: var(--color-emerald-600);
  --color-background-gradient-3: var(--color-teal-400);

  --color-header-package-name: var(--color-white);
  --color-header-package-description: var(--color-black);
  --color-header-icons: var(--color-white);

  --color-data-focus: var(--color-green-200);
  --color-link: var(--color-green-300);
  --color-data-focus-bold: var(--color-green-500);
  
  --color-nav-active: var(--color-emerald-300);
  --color-nav-hover: var(--color-green-200);
  --color-common-question-header: var(--color-sky-400);
}

Note: this tool can be helpful in picking theme colors and generating an OG image.