@procaaso/alphinity-ui-components 1.0.1 → 1.0.3
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/IMPLEMENTATION_GUIDE.md +1351 -0
- package/README.md +13 -26
- package/dist/index.cjs +3177 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +682 -2
- package/dist/index.d.ts +682 -2
- package/dist/index.js +3155 -1
- package/dist/index.js.map +1 -1
- package/package.json +5 -2
package/README.md
CHANGED
|
@@ -1,50 +1,37 @@
|
|
|
1
|
-
# @alphinity
|
|
1
|
+
# @procaaso/alphinity-ui-components
|
|
2
2
|
|
|
3
3
|
A TypeScript React component library for Alphinity branded systems.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
npm install @alphinity
|
|
8
|
+
npm install @procaaso/alphinity-ui-components
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
## Usage
|
|
12
12
|
|
|
13
13
|
```tsx
|
|
14
|
-
import { Button, ValueEntry, StatusIndicator } from '@alphinity
|
|
14
|
+
import { Button, ValueEntry, StatusIndicator } from '@procaaso/alphinity-ui-components';
|
|
15
15
|
import { useState } from 'react';
|
|
16
16
|
|
|
17
17
|
function HMIPanel() {
|
|
18
18
|
const [temperature, setTemperature] = useState(72.5);
|
|
19
19
|
const [pressure, setPressure] = useState(14.7);
|
|
20
20
|
const [systemStatus, setSystemStatus] = useState('normal');
|
|
21
|
-
|
|
21
|
+
|
|
22
22
|
return (
|
|
23
23
|
<div className="p-4 space-y-4">
|
|
24
24
|
{/* System status indicators */}
|
|
25
25
|
<div className="flex gap-4 items-center">
|
|
26
|
-
<StatusIndicator
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
led={true}
|
|
31
|
-
/>
|
|
32
|
-
<StatusIndicator
|
|
33
|
-
status="alarm"
|
|
34
|
-
label="Temperature Alert"
|
|
26
|
+
<StatusIndicator status="normal" label="Power" size="medium" led={true} />
|
|
27
|
+
<StatusIndicator
|
|
28
|
+
status="alarm"
|
|
29
|
+
label="Temperature Alert"
|
|
35
30
|
animation="pulse"
|
|
36
31
|
shape="circle"
|
|
37
32
|
/>
|
|
38
|
-
<StatusIndicator
|
|
39
|
-
|
|
40
|
-
label="Maintenance Due"
|
|
41
|
-
animation="blink"
|
|
42
|
-
/>
|
|
43
|
-
<StatusIndicator
|
|
44
|
-
status="active"
|
|
45
|
-
label="Process Running"
|
|
46
|
-
size="large"
|
|
47
|
-
/>
|
|
33
|
+
<StatusIndicator status="warning" label="Maintenance Due" animation="blink" />
|
|
34
|
+
<StatusIndicator status="active" label="Process Running" size="large" />
|
|
48
35
|
</div>
|
|
49
36
|
|
|
50
37
|
{/* Process control values */}
|
|
@@ -58,7 +45,7 @@ function HMIPanel() {
|
|
|
58
45
|
precision={1}
|
|
59
46
|
status="normal"
|
|
60
47
|
/>
|
|
61
|
-
|
|
48
|
+
|
|
62
49
|
<ValueEntry
|
|
63
50
|
value={pressure}
|
|
64
51
|
onChange={setPressure}
|
|
@@ -67,7 +54,7 @@ function HMIPanel() {
|
|
|
67
54
|
status="warning"
|
|
68
55
|
readOnly
|
|
69
56
|
/>
|
|
70
|
-
|
|
57
|
+
|
|
71
58
|
{/* Control buttons */}
|
|
72
59
|
<Button variant="primary" onClick={() => console.log('Start process')}>
|
|
73
60
|
Start
|
|
@@ -94,4 +81,4 @@ function HMIPanel() {
|
|
|
94
81
|
|
|
95
82
|
## Publishing
|
|
96
83
|
|
|
97
|
-
This package is
|
|
84
|
+
This package is published to the npm registry at https://www.npmjs.com/package/@procaaso/alphinity-ui-components
|