@procaaso/alphinity-ui-components

A TypeScript React component library for Alphinity branded systems.

Installation

npm install @procaaso/alphinity-ui-components

Usage

import { Button, ValueEntry, StatusIndicator } from '@procaaso/alphinity-ui-components';
import { useState } from 'react';

function HMIPanel() {
  const [temperature, setTemperature] = useState(72.5);
  const [pressure, setPressure] = useState(14.7);
  const [systemStatus, setSystemStatus] = useState('normal');

  return (
    <div className="p-4 space-y-4">
      {/* System status indicators */}
      <div className="flex gap-4 items-center">
        <StatusIndicator status="normal" label="Power" size="medium" led={true} />
        <StatusIndicator
          status="alarm"
          label="Temperature Alert"
          animation="pulse"
          shape="circle"
        />
        <StatusIndicator status="warning" label="Maintenance Due" animation="blink" />
        <StatusIndicator status="active" label="Process Running" size="large" />
      </div>

      {/* Process control values */}
      <ValueEntry
        value={temperature}
        onChange={setTemperature}
        label="Temperature"
        unit="°C"
        min={0}
        max={100}
        precision={1}
        status="normal"
      />

      <ValueEntry
        value={pressure}
        onChange={setPressure}
        label="Pressure"
        unit="PSI"
        status="warning"
        readOnly
      />

      {/* Control buttons */}
      <Button variant="primary" onClick={() => console.log('Start process')}>
        Start
      </Button>
    </div>
  );
}

Development

Scripts

• npm run build - Build the library using tsup (ESM + CJS + DTS)
• npm test - Run tests with Vitest
• npm run lint - Lint code with ESLint
• npm run typecheck - Type check with TypeScript

Components

• Button - Control buttons with primary and secondary variants for industrial actions
• ValueEntry - Numeric/text input with validation, units, status indicators, and precision control
• StatusIndicator - LED-style status indicators with multiple states, animations, and customizable appearance

Publishing

This package is published to the npm registry at https://www.npmjs.com/package/@procaaso/alphinity-ui-components