Getting Started

Set up the monorepo locally, configure environment variables, and learn the development workflow.

Setup

This repository uses pnpm workspaces and Turbo. Install dependencies and start the dev graph.

pnpm install && pnpm dev

The docs app is served from apps/www and auto-reloads as workspace packages rebuild.

Environment variables

Base development works without secrets. Search and indexing features require Algolia variables.

Optional for docs search in apps/www

  • NEXT_PUBLIC_ALGOLIA_APP_ID
  • NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY
  • NEXT_PUBLIC_ALGOLIA_INDEX_NAME

Required for index update script

  • ALGOLIA_APP_ID
  • ALGOLIA_ADMIN_KEY
  • ALGOLIA_INDEX_NAME

Script env loading resolves .env first, then .env.local(overrides).

Developer scripts

Use these scripts during normal development. They are optimized for either fast local iteration or full pre-PR validation.

Generators

  • pnpm gen-ui - scaffold a new UI component with starter implementation, demo, docs narrative, and metadata files.
  • pnpm gen-util - scaffold a new utility module with docs companions required by the docs generator.
  • pnpm gen-hook - scaffold a new hook module with consistent workspace structure.

Docs generation

Regenerates markdown and index artifacts under generated/docs/. Run this after adding or changing public APIs, demos, metadata, or MDX docs.

pnpm generate-doc

Common package checks

  • pnpm --filter @branditdev/ui build - verify UI package output.
  • pnpm -C apps/www exec tsc --noEmit - type-check docs app changes.

Fast local loop

pnpm lint && pnpm test

Pre-PR quality gates

pnpm format:check && pnpm lint && pnpm test && pnpm build

Troubleshooting

  • Preview unavailable: usually a demo id mismatch between generated docs and packages/ui/src/demos/index.ts.
  • Missing component page: withexcludeNotDocumented, ensure primary exports have JSDoc comments.
  • `generate-doc` failures: confirm required companion files exist (.demo.tsx, .mdx, .meta.json).