@procaaso/alphinity-ui-components 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +97 -0
- package/dist/index.cjs +1084 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +181 -0
- package/dist/index.d.ts +181 -0
- package/dist/index.js +1050 -0
- package/dist/index.js.map +1 -0
- package/package.json +77 -0
package/README.md
ADDED
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
# @alphinity/ui
|
|
2
|
+
|
|
3
|
+
A TypeScript React component library for Alphinity branded systems.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @alphinity/ui
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
import { Button, ValueEntry, StatusIndicator } from '@alphinity/ui';
|
|
15
|
+
import { useState } from 'react';
|
|
16
|
+
|
|
17
|
+
function HMIPanel() {
|
|
18
|
+
const [temperature, setTemperature] = useState(72.5);
|
|
19
|
+
const [pressure, setPressure] = useState(14.7);
|
|
20
|
+
const [systemStatus, setSystemStatus] = useState('normal');
|
|
21
|
+
|
|
22
|
+
return (
|
|
23
|
+
<div className="p-4 space-y-4">
|
|
24
|
+
{/* System status indicators */}
|
|
25
|
+
<div className="flex gap-4 items-center">
|
|
26
|
+
<StatusIndicator
|
|
27
|
+
status="normal"
|
|
28
|
+
label="Power"
|
|
29
|
+
size="medium"
|
|
30
|
+
led={true}
|
|
31
|
+
/>
|
|
32
|
+
<StatusIndicator
|
|
33
|
+
status="alarm"
|
|
34
|
+
label="Temperature Alert"
|
|
35
|
+
animation="pulse"
|
|
36
|
+
shape="circle"
|
|
37
|
+
/>
|
|
38
|
+
<StatusIndicator
|
|
39
|
+
status="warning"
|
|
40
|
+
label="Maintenance Due"
|
|
41
|
+
animation="blink"
|
|
42
|
+
/>
|
|
43
|
+
<StatusIndicator
|
|
44
|
+
status="active"
|
|
45
|
+
label="Process Running"
|
|
46
|
+
size="large"
|
|
47
|
+
/>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
{/* Process control values */}
|
|
51
|
+
<ValueEntry
|
|
52
|
+
value={temperature}
|
|
53
|
+
onChange={setTemperature}
|
|
54
|
+
label="Temperature"
|
|
55
|
+
unit="°C"
|
|
56
|
+
min={0}
|
|
57
|
+
max={100}
|
|
58
|
+
precision={1}
|
|
59
|
+
status="normal"
|
|
60
|
+
/>
|
|
61
|
+
|
|
62
|
+
<ValueEntry
|
|
63
|
+
value={pressure}
|
|
64
|
+
onChange={setPressure}
|
|
65
|
+
label="Pressure"
|
|
66
|
+
unit="PSI"
|
|
67
|
+
status="warning"
|
|
68
|
+
readOnly
|
|
69
|
+
/>
|
|
70
|
+
|
|
71
|
+
{/* Control buttons */}
|
|
72
|
+
<Button variant="primary" onClick={() => console.log('Start process')}>
|
|
73
|
+
Start
|
|
74
|
+
</Button>
|
|
75
|
+
</div>
|
|
76
|
+
);
|
|
77
|
+
}
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
## Development
|
|
81
|
+
|
|
82
|
+
### Scripts
|
|
83
|
+
|
|
84
|
+
- `npm run build` - Build the library using tsup (ESM + CJS + DTS)
|
|
85
|
+
- `npm test` - Run tests with Vitest
|
|
86
|
+
- `npm run lint` - Lint code with ESLint
|
|
87
|
+
- `npm run typecheck` - Type check with TypeScript
|
|
88
|
+
|
|
89
|
+
### Components
|
|
90
|
+
|
|
91
|
+
- **Button** - Control buttons with primary and secondary variants for industrial actions
|
|
92
|
+
- **ValueEntry** - Numeric/text input with validation, units, status indicators, and precision control
|
|
93
|
+
- **StatusIndicator** - LED-style status indicators with multiple states, animations, and customizable appearance
|
|
94
|
+
|
|
95
|
+
## Publishing
|
|
96
|
+
|
|
97
|
+
This package is configured to publish to GitHub Packages. The `publishConfig.registry` is set to `https://npm.pkg.github.com/`.
|