Studio UI Developer Guide

Overview

Package: @bluefly/studio-ui Version: Latest License: GPL-2.0+

Shared React/TypeScript UI component library for OSSA dashboard projects with Tailwind CSS, Radix UI primitives, and Storybook.

Key Features

• UI Components: Buttons, dialogs, tabs, toast, progress, tables
• Dashboard Layouts: Agent registry, deployment status, compliance dashboards
• Data Visualization: Recharts integration for charts and graphs
• GraphQL Integration: Apollo Client setup and hooks
• Accessibility: WCAG 2.1 AA compliance
• Responsive Design: Mobile-first approach
• Theming: CSS variables, dark mode support (planned)

Installation

npm install @bluefly/studio-ui

Quick Start

Basic Usage

import { Button, Alert, Card } from '@bluefly/studio-ui';

function MyDashboard() {
  return (
    <Card>
      <h2>Agent Status</h2>
      <Alert severity="success">All agents operational</Alert>
      <Button onClick={() => console.log('Deploy')}>
        Deploy Agent
      </Button>
    </Card>
  );
}

Charts

import { LineChart } from '@bluefly/studio-ui/charts';

function MetricsDashboard() {
  const data = [
    { timestamp: '10:00', value: 45 },
    { timestamp: '10:05', value: 67 },
  ];

  return (
    <LineChart
      data={data}
      xKey="timestamp"
      yKey="value"
      title="Request Latency"
    />
  );
}

Registry Components

import { AgentList, AgentCard } from '@bluefly/studio-ui/registry';

function AgentRegistry() {
  const agents = [
    { id: 'agent-1', name: 'Worker', status: 'active' }
  ];

  return (
    <AgentList>
      {agents.map(agent => (
        <AgentCard key={agent.id} agent={agent} />
      ))}
    </AgentList>
  );
}

Component Catalog

UI Primitives

• Button, Input, Dialog, Dropdown, Tabs
• Toast, Progress, Alert, Card, Table

Charts

• LineChart, BarChart, AreaChart, PieChart

Registry

• AgentList, AgentCard, CapabilityBadge, HealthIndicator

Deployment

• DeploymentStatus, DeploymentTimeline, RollbackButton

Compliance

• ComplianceScore, PolicyViolations, AuditLog

Workflow

• WorkflowGraph, TaskList, ExecutionTimeline

Development

npm run storybook    # Start Storybook
npm run build        # Build library
npm test             # Run tests
npm run typecheck    # Type checking

Storybook

npm run storybook
open http://localhost:6006

Testing

npm run test
npm run test:integration
npm run test:e2e
npm run test:coverage

Documentation

• GitLab: https://gitlab.bluefly.io/llm/npm/studio-ui
• Storybook: http://localhost:6006