Dynamic Report Builder (dyrebu)

A monorepo containing a React/MUI component library for building dynamic filtered reports with Excel/CSV export functionality.

Project Structure

dyrebu/
├── packages/
│   ├── api/          # TypeSpec API definitions & TypeScript types
│   ├── mui/          # React/MUI component library
│   └── mocks/        # MSW mock handlers and data generators
├── app/
│   └── dynamic-report-builder/  # Integration test app
└── functional-requirements.md   # Detailed requirements document

Getting Started

Prerequisites

• Node.js >= 18.0.0
• npm >= 9.0.0

Installation

# Install all dependencies
npm install

Development

# Build the API types first
npm run build:api

# Build all packages
npm run build

# Start the development app
npm run dev

This will start the demo application at http://localhost:3000 with mock data served by MSW.

Packages

@dyrebu/api

TypeSpec definitions for the reporting API. Generates:

• OpenAPI 3.0 specification
• TypeScript types

# Build the API package
npm run build:api

@dyrebu/mui

React component library with the following exports:

• DynamicReportBuilder - Main component
• FilterBuilder - Standalone filter builder
• DataPreview - Standalone AG Grid preview
• useDynamicReport - Hook for managing report state

Peer Dependencies:

• react: ^18.3.1
• @mui/material: ^7.2.0
• ag-grid-community: ^32.0.0
• ag-grid-enterprise: ^32.0.0

@dyrebu/mocks

MSW handlers and mock data for development and testing.

Exports:

• handlers - MSW request handlers
• mockDatasets - Sample dataset definitions
• worker (from /browser) - Browser MSW worker
• server (from /node) - Node MSW server for testing

API Endpoints

| Method | Endpoint | Description | |--------|----------|-------------| | GET | /reporting/datasets | List available datasets | | GET | /reporting/datasets/{key}/columns | Get column metadata | | POST | /reporting/datasets/{key}/preview | Preview filtered data | | POST | /reporting/datasets/{key}/export | Export to CSV/XLSX |

Usage Example

import { DynamicReportBuilder } from '@dyrebu/mui';

function MyReportPage() {
  return (
    <DynamicReportBuilder
      datasetKey="sales"
      exportFormat="xlsx"
      onExport={(blob) => console.log('Exported:', blob)}
      onFilterChange={(filter) => console.log('Filter:', filter)}
    />
  );
}

Publishing Packages

This monorepo uses Changesets for version management and publishing to npm.

Quick Start

# Interactive publishing helper
./scripts/publish.sh

# Or use npm scripts:
npm run changeset:add    # Record what changed
npm run version          # Bump versions
npm run release          # Build and publish to npm

Workflow

1. Make changes to the packages
2. Add a changeset: npm run changeset:add
3. Commit the changeset with your changes
4. Version packages: npm run version (bumps versions, updates changelogs)
5. Publish: npm run release

See docs/PUBLISHING.md for the full publishing guide.

License

MIT