Contributing to @scenarix/jadu-ui

Development Setup

Prerequisites

• Node.js >= 18.0.0
• npm or yarn

Getting Started

# Clone the repository
git clone https://github.com/scenarix/jadu-ui.git
cd jadu-ui

# Install dependencies
npm install

# Start Storybook development server
npm run storybook

Storybook will be available at http://localhost:6006.

---

Project Structure

jadu-ui/
├── src/
│   ├── components/ui/     # shadcn/ui components
│   ├── hooks/             # React hooks
│   ├── lib/               # Utilities (cn, etc.)
│   ├── stories/           # Storybook stories
│   ├── styles/            # Global CSS
│   ├── tokens/            # Design tokens
│   └── index.ts           # Main entry point
├── .storybook/            # Storybook configuration
├── dist/                  # Build output (git-ignored)
└── package.json

---

Adding a New Component

1. Add the component

Components are sourced from shadcn/ui. Use the shadcn CLI:

npx shadcn@latest add <component-name>

Or manually add to src/components/ui/.

2. Export the component

Add exports to src/components/ui/index.ts:

// Component Name
export { Component, ComponentPart } from './component'

3. Create a story

Create src/stories/<component>.stories.tsx:

import type { Meta, StoryObj } from '@storybook/react'
import { Component } from '@/components/ui'

const meta: Meta<typeof Component> = {
  title: 'Components/Component',
  component: Component,
  tags: ['autodocs'],
}

export default meta
type Story = StoryObj<typeof Component>

export const Default: Story = {
  render: () => <Component>Example</Component>,
}

---

Available Scripts

Script	Description
npm run dev	Start Vite dev server
npm run build	Build the library for production
npm run storybook	Start Storybook dev server
npm run build:storybook	Build Storybook static site
npm run lint	Run ESLint

---

Code Style

• Use TypeScript for all components
• Follow the existing component patterns from shadcn/ui
• Use the cn() utility for merging class names
• Components should support className prop for customization
• Use forwardRef for components that need ref forwarding

---

Publishing

Publishing is done via GitHub Actions - no local write token needed.

1. Update version

# Bump version in package.json
npm version patch  # or minor, major

2. Push and create release

# Push the version commit and tag
git push && git push --tags

# Create GitHub release (triggers publish workflow)
gh release create v0.1.0 --title "v0.1.0" --notes "Release notes here"

Or create a release via GitHub web UI: 1. Go to repo → Releases → "Create a new release" 2. Choose/create tag (e.g., v0.1.0) 3. Add title and release notes 4. Click "Publish release"

The publish workflow runs automatically and uses GITHUB_TOKEN (no setup required).

Local dry-run (optional)

To test publishing locally without actually publishing:

# Requires GITHUB_PKG_TOKEN with read:packages scope
npm run prepublish:check
npm run publish:dry

---

Commit Guidelines

• Use clear, descriptive commit messages
• Reference issue numbers where applicable
• Keep commits focused and atomic