Forse Chart Library

A monorepo for the Forse Chart component library built with TypeScript, React, and Tailwind CSS.

📦 Packages

• @stablelab/forse-chart – Chart component library

Check out the package README for installation and usage instructions.

🚀 Getting Started

Prerequisites

• Node.js 18+
• Yarn 4.5.0 (managed via Corepack)

Installation

# Install dependencies
yarn install

Available Scripts

# Build all packages
yarn build

# Watch mode for development (rebuilds on file changes)
yarn dev

# Watch mode with output sync (syncs to target project's node_modules for hot reload)
yarn dev /path/to/target-project

# Clean build artifacts
yarn clean

# Format code (prettier + eslint fix)
yarn format

# Run all tests (prettier, syncpack, lint)
yarn test

Development Mode

The dev script runs in watch mode, automatically rebuilding when source files change:

• Basic watch: yarn dev - Files stay in package directories
• With output sync: yarn dev /path/to/target-project - Syncs build outputs to the target project's node_modules/@stablelab/forse-chart folder for hot reload during development (the node_modules path is automatically appended)

Example:

# Sync to a Next.js project (automatically syncs to node_modules)
yarn dev /Users/username/my-project/frontend

The watch mode uses Rollup's built-in watch API for efficient incremental rebuilds. Output syncing only runs in development environments and uses rsync (when available) for fast incremental file updates.

Project Structure

forse-chart-lib/
├── packages/
│   └── @stablelab/
│       └── forse-chart/          # Chart component library package
├── scripts/                      # Build and release scripts
├── .github/                      # GitHub workflows
└── package.json                  # Root package.json

Built With

• TypeScript – Type safety and better developer experience
• React – UI component framework
• Tailwind CSS – Utility-first styling
• Rollup – Module bundler
• ESLint – Code linting
• Prettier – Code formatting

Development Workflow

1. Make your changes in the appropriate package
2. Run yarn format to format your code
3. Run yarn test to ensure all checks pass
4. Build with yarn build to verify the build works
5. Commit your changes (commitlint will validate your commit message)

🔄 Commit Convention

This project uses Conventional Commits. Commit messages are validated using commitlint with Husky hooks.

Example commit messages:

feat: add new chart component
fix: resolve tooltip positioning issue
docs: update README
chore: update dependencies

License

UNLICENSED - Internal use only