Signoz Components Library

This guide explains how to use Signoz components library powered by Turborepo, React, and Storybook.

Getting Started

Clone the repository:

git clone git@github.com:SigNoz/components.git

Install dependencies:
```
pnpm install
```
Build the packages:
```
pnpm build
```
Start Storybook:
```
pnpm run dev
```

Useful Commands

pnpm build - Build all packages, including the Storybook site
pnpm dev - Run all packages locally and preview with Storybook
pnpm lint - Lint all packages
pnpm changeset - Generate a changeset
pnpm clean - Clean up all node_modules and dist folders
pnpm turbo gen new-package - Custom generator script to add new component/package to the component library

Available Packages

@signozhq/theme: Contains theme provider, theme switcher, ...
@signozhq/tailwind-config: UI configuration, including Tailwind CSS setup
@signozhq/button: Button component
@signozhq/input: Input component

Creating a New Package

To create a new package:

Create a new branch:

git checkout -b feature/new-package-name

From the root of the project, run:

pnpm turbo gen new-package

During the package creation process, you'll be asked to input a name, description, and choose between creating a component from scratch or importing one from shadcn. Provide the requested information as prompted. Here's an example:

Package name: component/package name (if you want to get the component from shadcn, Enter a name that corresponds to a shadcn component e.g. dropdown-menu)
Description: Provide a brief explanation of the package's purpose
You can choose to either import a pre-built component from shadcn or create a new component from scratch

e.g.

❯ pnpm turbo gen new-package
turbo 2.1.2

>>> Modify "design-system" using custom generators

? What is the name of the new package? dropdown-menu
? Provide a brief description of the package: dropdown menu package
? Do you want to import a shadcn component or create a component from scratch? (Use arrow keys)
❯ shadcn
from_scratch

Executing this generator will automatically set up and configure the new package with the necessary files and structure.

├── apps
│   └── docs
│       ├── package.json (modified)
│       └── stories
│           └── dropdown-menu.stories.tsx (new)
├── packages
│   └── dropdown-menu
│       ├── .eslintrc.js (new)
│       ├── components.json (new)
│       ├── package.json (new)
│       ├── postcss.config.js (new)
│       ├── src
│       │   ├── dropdown-menu.tsx (new)
│       │   ├── index.css (new)
│       │   └── lib
│       │       └── utils.ts (new)
│       ├── tailwind.config.js (new)
│       ├── tsconfig.app.json (new)
│       ├── tsconfig.json (new)
│       └── vite.config.ts (new)

Make the necessary changes:
- Modify the component (e.g. packages/dropdown-menu/src/dropdown-menu.tsx)
- Add a storybook story in apps/docs/stories/dropdown-menu.stories.tsx
From the root of the project, commit the changes to the new branch:
```
git add .
git commit -m "Add new package: dropdown-menu"
```
From the root of the project, run:
```
pnpm changeset
```
This will guide you through the process of creating a changeset, which is used to document changes and manage version bumps.

It will prompt you with the following:
- Which packages would you like to include? – This shows which packages and changed and which have remained the same. By default, no packages are included. Press space to select the packages you want to include in the changeset.
- Which packages should have a major bump? – Press space to select the packages you want to bump versions for.
- If doing the first major version, confirm you want to release.
- Write a summary for the changes.
- Confirm the changeset looks as expected.
- A new Markdown file will be created in the changeset folder with the summary and a list of the packages included.
Push the changes to the remote repository:
```
git push origin feature/new-package-name
```
Create a new PR