Skip to main content

Studio UI Developer Guide

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