@emporix/process-diagram

A React component library for building process diagrams and workflow visualizations.

Installation

npm install @emporix/process-diagram

Development

Install Dependencies

npm install

Development Server

Start the development server:

npm run dev

Build

Build the library for production:

npm run build

This command will:

• Build the library using Vite
• Generate TypeScript type definitions
• Copy type definitions to the dist folder

The output will be in the dist directory with:

• index.cjs - CommonJS bundle
• index.mjs - ES module bundle
• index.d.ts - TypeScript definitions
• types.d.ts - Additional type definitions

Publish

Before publishing, ensure you have:

1. Built the library (npm run build)
2. Updated the version in package.json
3. Committed all changes
4. Created a git tag (if using semantic versioning)

Publishing to npm

npm publish

For scoped packages, you may need to configure access:

npm publish --access public

Publishing a specific version

npm version patch|minor|major
npm publish

Storybook

Running Storybook

Start the Storybook development server:

npm run storybook

This will start Storybook on http://localhost:6006

Building Storybook

Build a static version of Storybook:

npm run build-storybook

The static build will be output to the storybook-static directory, which can be deployed to any static hosting service.

Storybook Features

• Component Documentation: View all components with interactive examples
• Accessibility Testing: Built-in accessibility addon
• Visual Testing: Integration with Chromatic for visual regression testing
• Component Playground: Test components in isolation

Available Scripts

• npm run dev - Start development server
• npm run build - Build the library for production
• npm run lint - Run ESLint and fix issues
• npm run format - Format code with Prettier
• npm run format:check - Check code formatting
• npm run preview - Preview production build
• npm run test - Run tests
• npm run test:watch - Run tests in watch mode
• npm run test:ui - Run tests with UI
• npm run test:coverage - Run tests with coverage
• npm run storybook - Start Storybook development server
• npm run build-storybook - Build static Storybook

Usage

import { Trigger, ProcessStep } from '@emporix/process-diagram'
import type { Step } from '@emporix/process-diagram'

const steps: Step[] = [
  { id: '1', title: 'Step 1' },
  { id: '2', title: 'Step 2' },
]

function App() {
  return <Trigger steps={steps} />
}

License

[Add your license here]