@procaaso/alphinity-ui-components 1.9.0 → 1.10.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/IMPLEMENTATION_GUIDE.md +1351 -1351
- package/README.md +95 -95
- package/dist/index.cjs +454 -127
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +172 -8
- package/dist/index.d.ts +172 -8
- package/dist/index.js +453 -127
- package/dist/index.js.map +1 -1
- package/package.json +85 -85
package/README.md
CHANGED
|
@@ -1,95 +1,95 @@
|
|
|
1
|
-
# @procaaso/alphinity-ui-components
|
|
2
|
-
|
|
3
|
-
A TypeScript React component library for Alphinity branded systems.
|
|
4
|
-
|
|
5
|
-
## Installation
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
npm install @procaaso/alphinity-ui-components
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
## Usage
|
|
12
|
-
|
|
13
|
-
```tsx
|
|
14
|
-
import { Button, ValueEntry, StatusIndicator } from '@procaaso/alphinity-ui-components';
|
|
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 status="normal" label="Power" size="medium" led={true} />
|
|
27
|
-
<StatusIndicator
|
|
28
|
-
status="alarm"
|
|
29
|
-
label="Temperature Alert"
|
|
30
|
-
animation="pulse"
|
|
31
|
-
shape="circle"
|
|
32
|
-
/>
|
|
33
|
-
<StatusIndicator status="warning" label="Maintenance Due" animation="blink" />
|
|
34
|
-
<StatusIndicator status="active" label="Process Running" size="large" />
|
|
35
|
-
</div>
|
|
36
|
-
|
|
37
|
-
{/* Process control values */}
|
|
38
|
-
<ValueEntry
|
|
39
|
-
value={temperature}
|
|
40
|
-
onChange={setTemperature}
|
|
41
|
-
label="Temperature"
|
|
42
|
-
unit="°C"
|
|
43
|
-
min={0}
|
|
44
|
-
max={100}
|
|
45
|
-
precision={1}
|
|
46
|
-
status="normal"
|
|
47
|
-
/>
|
|
48
|
-
|
|
49
|
-
<ValueEntry
|
|
50
|
-
value={pressure}
|
|
51
|
-
onChange={setPressure}
|
|
52
|
-
label="Pressure"
|
|
53
|
-
unit="PSI"
|
|
54
|
-
status="warning"
|
|
55
|
-
readOnly
|
|
56
|
-
/>
|
|
57
|
-
|
|
58
|
-
{/* Control buttons */}
|
|
59
|
-
<Button variant="primary" onClick={() => console.log('Start process')}>
|
|
60
|
-
Start
|
|
61
|
-
</Button>
|
|
62
|
-
</div>
|
|
63
|
-
);
|
|
64
|
-
}
|
|
65
|
-
```
|
|
66
|
-
|
|
67
|
-
## Development
|
|
68
|
-
|
|
69
|
-
### Scripts
|
|
70
|
-
|
|
71
|
-
- `npm run build` - Build the library using tsup (ESM + CJS + DTS)
|
|
72
|
-
- `npm test` - Run tests with Vitest
|
|
73
|
-
- `npm run lint` - Lint code with ESLint
|
|
74
|
-
- `npm run typecheck` - Type check with TypeScript
|
|
75
|
-
- `npm run dev` - Run the demo playground on http://localhost:3010
|
|
76
|
-
|
|
77
|
-
### Demo views
|
|
78
|
-
|
|
79
|
-
The demo (`npm run dev`) mounts one of three views, selected by a `?demo=` query param:
|
|
80
|
-
|
|
81
|
-
- `http://localhost:3010/` *(default)* - **Runtime**: full P&ID canvas with live telemetry, simulation, and device control/config panels
|
|
82
|
-
- `http://localhost:3010/?demo=single-node` - **Single-node HMI mockup** over the full plant SVG layout
|
|
83
|
-
- `http://localhost:3010/?demo=gallery` - **Component gallery** of individual widgets
|
|
84
|
-
|
|
85
|
-
> The demo is served, not opened as a file — `demo-dist/index.html` references assets by absolute path and will be blank if opened via `file://`. Use `npm run dev`, or `npx vite preview --config vite.demo.config.ts` for the built version.
|
|
86
|
-
|
|
87
|
-
### Components
|
|
88
|
-
|
|
89
|
-
- **Button** - Control buttons with primary and secondary variants for industrial actions
|
|
90
|
-
- **ValueEntry** - Numeric/text input with validation, units, status indicators, and precision control
|
|
91
|
-
- **StatusIndicator** - LED-style status indicators with multiple states, animations, and customizable appearance
|
|
92
|
-
|
|
93
|
-
## Publishing
|
|
94
|
-
|
|
95
|
-
This package is published to the npm registry at https://www.npmjs.com/package/@procaaso/alphinity-ui-components
|
|
1
|
+
# @procaaso/alphinity-ui-components
|
|
2
|
+
|
|
3
|
+
A TypeScript React component library for Alphinity branded systems.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @procaaso/alphinity-ui-components
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
import { Button, ValueEntry, StatusIndicator } from '@procaaso/alphinity-ui-components';
|
|
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 status="normal" label="Power" size="medium" led={true} />
|
|
27
|
+
<StatusIndicator
|
|
28
|
+
status="alarm"
|
|
29
|
+
label="Temperature Alert"
|
|
30
|
+
animation="pulse"
|
|
31
|
+
shape="circle"
|
|
32
|
+
/>
|
|
33
|
+
<StatusIndicator status="warning" label="Maintenance Due" animation="blink" />
|
|
34
|
+
<StatusIndicator status="active" label="Process Running" size="large" />
|
|
35
|
+
</div>
|
|
36
|
+
|
|
37
|
+
{/* Process control values */}
|
|
38
|
+
<ValueEntry
|
|
39
|
+
value={temperature}
|
|
40
|
+
onChange={setTemperature}
|
|
41
|
+
label="Temperature"
|
|
42
|
+
unit="°C"
|
|
43
|
+
min={0}
|
|
44
|
+
max={100}
|
|
45
|
+
precision={1}
|
|
46
|
+
status="normal"
|
|
47
|
+
/>
|
|
48
|
+
|
|
49
|
+
<ValueEntry
|
|
50
|
+
value={pressure}
|
|
51
|
+
onChange={setPressure}
|
|
52
|
+
label="Pressure"
|
|
53
|
+
unit="PSI"
|
|
54
|
+
status="warning"
|
|
55
|
+
readOnly
|
|
56
|
+
/>
|
|
57
|
+
|
|
58
|
+
{/* Control buttons */}
|
|
59
|
+
<Button variant="primary" onClick={() => console.log('Start process')}>
|
|
60
|
+
Start
|
|
61
|
+
</Button>
|
|
62
|
+
</div>
|
|
63
|
+
);
|
|
64
|
+
}
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
## Development
|
|
68
|
+
|
|
69
|
+
### Scripts
|
|
70
|
+
|
|
71
|
+
- `npm run build` - Build the library using tsup (ESM + CJS + DTS)
|
|
72
|
+
- `npm test` - Run tests with Vitest
|
|
73
|
+
- `npm run lint` - Lint code with ESLint
|
|
74
|
+
- `npm run typecheck` - Type check with TypeScript
|
|
75
|
+
- `npm run dev` - Run the demo playground on http://localhost:3010
|
|
76
|
+
|
|
77
|
+
### Demo views
|
|
78
|
+
|
|
79
|
+
The demo (`npm run dev`) mounts one of three views, selected by a `?demo=` query param:
|
|
80
|
+
|
|
81
|
+
- `http://localhost:3010/` *(default)* - **Runtime**: full P&ID canvas with live telemetry, simulation, and device control/config panels
|
|
82
|
+
- `http://localhost:3010/?demo=single-node` - **Single-node HMI mockup** over the full plant SVG layout
|
|
83
|
+
- `http://localhost:3010/?demo=gallery` - **Component gallery** of individual widgets
|
|
84
|
+
|
|
85
|
+
> The demo is served, not opened as a file — `demo-dist/index.html` references assets by absolute path and will be blank if opened via `file://`. Use `npm run dev`, or `npx vite preview --config vite.demo.config.ts` for the built version.
|
|
86
|
+
|
|
87
|
+
### Components
|
|
88
|
+
|
|
89
|
+
- **Button** - Control buttons with primary and secondary variants for industrial actions
|
|
90
|
+
- **ValueEntry** - Numeric/text input with validation, units, status indicators, and precision control
|
|
91
|
+
- **StatusIndicator** - LED-style status indicators with multiple states, animations, and customizable appearance
|
|
92
|
+
|
|
93
|
+
## Publishing
|
|
94
|
+
|
|
95
|
+
This package is published to the npm registry at https://www.npmjs.com/package/@procaaso/alphinity-ui-components
|