mywhy-ui 0.1.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 +102 -0
- package/dist/index.cjs +767 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +189 -0
- package/dist/index.d.ts +189 -0
- package/dist/index.js +747 -0
- package/dist/index.js.map +1 -0
- package/package.json +62 -0
- package/src/globals.css +68 -0
- package/tailwind-preset.js +119 -0
package/README.md
ADDED
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
# mywhy-ui
|
|
2
|
+
|
|
3
|
+
React component library for the [mywhy](https://github.com/mywhy/mywhy) robotics framework. Built with TypeScript, Tailwind CSS, and semantic design tokens.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install mywhy-ui
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
**Peer dependencies:** `react >= 18` and `react-dom >= 18`
|
|
12
|
+
|
|
13
|
+
## Setup
|
|
14
|
+
|
|
15
|
+
### 1. Tailwind preset
|
|
16
|
+
|
|
17
|
+
Add the mywhy-ui preset to your `tailwind.config.js`:
|
|
18
|
+
|
|
19
|
+
```js
|
|
20
|
+
import mywhyPreset from 'mywhy-ui/tailwind-preset'
|
|
21
|
+
|
|
22
|
+
export default {
|
|
23
|
+
content: [
|
|
24
|
+
"./src/**/*.{js,ts,jsx,tsx}",
|
|
25
|
+
"./node_modules/mywhy-ui/dist/**/*.{js,cjs}",
|
|
26
|
+
],
|
|
27
|
+
presets: [mywhyPreset],
|
|
28
|
+
}
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### 2. CSS variables (optional)
|
|
32
|
+
|
|
33
|
+
Import the global CSS custom properties for runtime theming:
|
|
34
|
+
|
|
35
|
+
```ts
|
|
36
|
+
// main.tsx
|
|
37
|
+
import 'mywhy-ui/globals.css'
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## Usage
|
|
41
|
+
|
|
42
|
+
```tsx
|
|
43
|
+
import { Button, Input, Badge, StatusBadge } from 'mywhy-ui'
|
|
44
|
+
|
|
45
|
+
function App() {
|
|
46
|
+
return (
|
|
47
|
+
<div>
|
|
48
|
+
<Button variant="solid" theme="brand">Launch</Button>
|
|
49
|
+
<Input label="Robot Name" placeholder="Enter name" />
|
|
50
|
+
<Badge theme="green">Online</Badge>
|
|
51
|
+
<StatusBadge status="online" label="Base Station" />
|
|
52
|
+
</div>
|
|
53
|
+
)
|
|
54
|
+
}
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
## Components
|
|
58
|
+
|
|
59
|
+
### Foundation
|
|
60
|
+
- **Button** — Variants: `solid`, `subtle`, `outline`, `ghost`. Themes: `brand`, `gray`, `green`, `red`, `orange`.
|
|
61
|
+
- **Input** — With label, error state, prefix/suffix icons.
|
|
62
|
+
- **Select** — Dropdown with label and error state.
|
|
63
|
+
- **Spinner** — Loading indicator.
|
|
64
|
+
|
|
65
|
+
### Core UI
|
|
66
|
+
- **Badge** — Status labels with color themes.
|
|
67
|
+
- **Avatar** — User avatars with initials fallback.
|
|
68
|
+
- **Card** — Container with optional title and subtitle.
|
|
69
|
+
- **Checkbox** — Labeled checkbox.
|
|
70
|
+
- **Textarea** — Multi-line input.
|
|
71
|
+
|
|
72
|
+
### Overlays
|
|
73
|
+
- **Dialog** — Modal dialog with backdrop.
|
|
74
|
+
- **Toast / ToastContainer** — Notification toasts.
|
|
75
|
+
- **Tooltip** — Hover tooltips with placement control.
|
|
76
|
+
- **Link** — Styled anchor.
|
|
77
|
+
|
|
78
|
+
### Robotics
|
|
79
|
+
- **StatusBadge** — Robot status with pulse animation (`online`, `warning`, `error`, `offline`, `connecting`).
|
|
80
|
+
- **ConnectionIndicator / ConnectionIcon** — WebSocket connection status display.
|
|
81
|
+
|
|
82
|
+
### Hooks
|
|
83
|
+
- **useDisclosure** — Toggle state for modals/drawers.
|
|
84
|
+
- **useToast** — Programmatic toast notifications.
|
|
85
|
+
|
|
86
|
+
## Design Tokens
|
|
87
|
+
|
|
88
|
+
The Tailwind preset provides semantic color tokens:
|
|
89
|
+
|
|
90
|
+
| Token | Purpose |
|
|
91
|
+
|-------|---------|
|
|
92
|
+
| `ink-*` | Text colors (default, gray, light, faint) |
|
|
93
|
+
| `surface-*` | Backgrounds (default, gray, light, subtle, overlay) |
|
|
94
|
+
| `brand-*` | Primary brand colors |
|
|
95
|
+
| `outline-*` | Border colors |
|
|
96
|
+
| `status-*` | Robot health (online, warning, error, offline) |
|
|
97
|
+
| `role-*` | User roles (admin, operator, viewer) |
|
|
98
|
+
| `ros-*` | ROS2 accents (topic, service, action, parameter) |
|
|
99
|
+
|
|
100
|
+
## License
|
|
101
|
+
|
|
102
|
+
MIT
|