opus-react 0.2.5 → 0.2.7
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 +200 -23
- package/dist/index.cjs +82 -57
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +20 -2
- package/dist/index.d.ts +20 -2
- package/dist/index.js +144 -122
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
# opus-react
|
|
2
2
|
|
|
3
|
-
React component library for the Opus
|
|
3
|
+
A React component library for the **Opus Design System** — a modern, themeable UI kit for building professional business applications.
|
|
4
|
+
|
|
5
|
+
Opus includes form controls, overlays, navigation, data display, charts, dashboard widgets, and utility components with built-in light and dark themes, smooth rounded styling, and runtime accent colour support.
|
|
4
6
|
|
|
5
7
|
## Install
|
|
6
8
|
|
|
@@ -12,53 +14,201 @@ Peer dependencies:
|
|
|
12
14
|
|
|
13
15
|
```bash
|
|
14
16
|
npm install react react-dom
|
|
15
|
-
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
Optional dependency for 3D model components:
|
|
20
|
+
|
|
21
|
+
```bash
|
|
16
22
|
npm install three
|
|
17
23
|
```
|
|
18
24
|
|
|
19
|
-
##
|
|
25
|
+
## Quick start
|
|
20
26
|
|
|
21
|
-
Import
|
|
27
|
+
Import the Opus styles and wrap your application with `OpusThemeProvider`.
|
|
22
28
|
|
|
23
29
|
```tsx
|
|
24
30
|
import "opus-react/styles.css";
|
|
25
31
|
import "opus-react/index.css";
|
|
32
|
+
|
|
26
33
|
import { OpusThemeProvider, Button, TextField } from "opus-react";
|
|
27
34
|
|
|
28
35
|
export function App() {
|
|
29
36
|
return (
|
|
30
37
|
<OpusThemeProvider theme="dark">
|
|
31
|
-
<
|
|
32
|
-
|
|
33
|
-
</div>
|
|
38
|
+
<Button variant="primary">Save</Button>
|
|
39
|
+
<TextField label="Full name" placeholder="Jane Cooper" />
|
|
34
40
|
</OpusThemeProvider>
|
|
35
41
|
);
|
|
36
42
|
}
|
|
37
43
|
```
|
|
38
44
|
|
|
39
|
-
|
|
45
|
+
`OpusThemeProvider` sets `data-theme` on `document.documentElement` by default, so themed CSS variables apply everywhere — including portalled content such as modals, drawers, and toasts.
|
|
40
46
|
|
|
41
47
|
## Next.js
|
|
42
48
|
|
|
43
|
-
Add to `
|
|
49
|
+
Add `opus-react` to `transpilePackages`.
|
|
44
50
|
|
|
45
51
|
```ts
|
|
52
|
+
// next.config.ts
|
|
53
|
+
|
|
46
54
|
const nextConfig = {
|
|
47
55
|
transpilePackages: ["opus-react"],
|
|
48
56
|
};
|
|
57
|
+
|
|
58
|
+
export default nextConfig;
|
|
49
59
|
```
|
|
50
60
|
|
|
61
|
+
## Theme provider
|
|
62
|
+
|
|
63
|
+
```tsx
|
|
64
|
+
import { OpusThemeProvider } from "opus-react";
|
|
65
|
+
|
|
66
|
+
export function App() {
|
|
67
|
+
return (
|
|
68
|
+
<OpusThemeProvider theme="light">
|
|
69
|
+
<YourApp />
|
|
70
|
+
</OpusThemeProvider>
|
|
71
|
+
);
|
|
72
|
+
}
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
Available themes:
|
|
76
|
+
|
|
77
|
+
```tsx
|
|
78
|
+
theme="light"
|
|
79
|
+
theme="dark"
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
By default, the provider writes `data-theme` to `<html>` so CSS tokens resolve across the whole page, including portals. Pass `applyToDocument={false}` if you manage `data-theme` yourself (for example, on a scoped container in embedded widgets).
|
|
83
|
+
|
|
51
84
|
## Accent colour
|
|
52
85
|
|
|
86
|
+
Opus supports runtime accent colours.
|
|
87
|
+
|
|
88
|
+
```tsx
|
|
89
|
+
import { OpusThemeProvider, createAccentStyle } from "opus-react";
|
|
90
|
+
|
|
91
|
+
export function App() {
|
|
92
|
+
return (
|
|
93
|
+
<OpusThemeProvider theme="dark">
|
|
94
|
+
<div style={createAccentStyle("#8f6cff")}>
|
|
95
|
+
<YourApp />
|
|
96
|
+
</div>
|
|
97
|
+
</OpusThemeProvider>
|
|
98
|
+
);
|
|
99
|
+
}
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
You can also use the included accent colour picker.
|
|
103
|
+
|
|
104
|
+
```tsx
|
|
105
|
+
import { AccentColorPicker } from "opus-react";
|
|
106
|
+
|
|
107
|
+
<AccentColorPicker value={accent} onChange={setAccent} />;
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
## What's included
|
|
111
|
+
|
|
112
|
+
### Form components
|
|
113
|
+
|
|
114
|
+
- Text field
|
|
115
|
+
- Textarea
|
|
116
|
+
- Select
|
|
117
|
+
- Checkbox
|
|
118
|
+
- Radio group
|
|
119
|
+
- Switch
|
|
120
|
+
- Range slider
|
|
121
|
+
- Number input
|
|
122
|
+
- Date picker
|
|
123
|
+
- File upload
|
|
124
|
+
- Chip input / tag input
|
|
125
|
+
- Colour picker
|
|
126
|
+
- Form labels
|
|
127
|
+
- Helper text
|
|
128
|
+
- Error states
|
|
129
|
+
|
|
130
|
+
### Overlays
|
|
131
|
+
|
|
132
|
+
- Modal
|
|
133
|
+
- Dialog
|
|
134
|
+
- Drawer
|
|
135
|
+
- Popover
|
|
136
|
+
- Toast
|
|
137
|
+
|
|
138
|
+
### Content and layout
|
|
139
|
+
|
|
140
|
+
- Card
|
|
141
|
+
- Table
|
|
142
|
+
- Data grid
|
|
143
|
+
- Tabs
|
|
144
|
+
- Accordion
|
|
145
|
+
|
|
146
|
+
### Navigation
|
|
147
|
+
|
|
148
|
+
- Sidebar
|
|
149
|
+
- Top navigation
|
|
150
|
+
- Mega menu
|
|
151
|
+
|
|
152
|
+
### Data visualisation
|
|
153
|
+
|
|
154
|
+
- Charts
|
|
155
|
+
- Gauges
|
|
156
|
+
- KPI cards
|
|
157
|
+
- Dashboard widgets
|
|
158
|
+
|
|
159
|
+
### Utilities
|
|
160
|
+
|
|
161
|
+
- `AccentColorPicker`
|
|
162
|
+
- `IconPicker`
|
|
163
|
+
- `CatalogIcon`
|
|
164
|
+
- Theme helpers
|
|
165
|
+
- Accent style helpers
|
|
166
|
+
|
|
167
|
+
## Examples
|
|
168
|
+
|
|
169
|
+
### Button
|
|
170
|
+
|
|
171
|
+
```tsx
|
|
172
|
+
import { Button } from "opus-react";
|
|
173
|
+
|
|
174
|
+
<Button variant="primary">Create project</Button>;
|
|
175
|
+
<Button variant="secondary">Cancel</Button>;
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
### Text field with error
|
|
179
|
+
|
|
53
180
|
```tsx
|
|
54
|
-
import {
|
|
181
|
+
import { TextField } from "opus-react";
|
|
55
182
|
|
|
56
|
-
<
|
|
57
|
-
|
|
58
|
-
|
|
183
|
+
<TextField
|
|
184
|
+
label="Email address"
|
|
185
|
+
placeholder="you@example.com"
|
|
186
|
+
error="Enter a valid email address"
|
|
187
|
+
/>;
|
|
59
188
|
```
|
|
60
189
|
|
|
61
|
-
|
|
190
|
+
### Chip input
|
|
191
|
+
|
|
192
|
+
```tsx
|
|
193
|
+
import { ChipInput } from "opus-react";
|
|
194
|
+
|
|
195
|
+
<ChipInput
|
|
196
|
+
label="Tags"
|
|
197
|
+
placeholder="Type and press Enter"
|
|
198
|
+
value={tags}
|
|
199
|
+
onChange={setTags}
|
|
200
|
+
/>;
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
### Accent colour picker
|
|
204
|
+
|
|
205
|
+
```tsx
|
|
206
|
+
import { AccentColorPicker } from "opus-react";
|
|
207
|
+
|
|
208
|
+
<AccentColorPicker value="#8f6cff" onChange={setAccent} />;
|
|
209
|
+
```
|
|
210
|
+
|
|
211
|
+
## Publishing
|
|
62
212
|
|
|
63
213
|
From the monorepo root:
|
|
64
214
|
|
|
@@ -67,15 +217,42 @@ npm run build:lib
|
|
|
67
217
|
npm publish -w opus-react --access public
|
|
68
218
|
```
|
|
69
219
|
|
|
70
|
-
|
|
220
|
+
Before publishing, set the package name in:
|
|
71
221
|
|
|
72
|
-
|
|
222
|
+
```txt
|
|
223
|
+
packages/opus-react/package.json
|
|
224
|
+
```
|
|
225
|
+
|
|
226
|
+
For example:
|
|
227
|
+
|
|
228
|
+
```json
|
|
229
|
+
{
|
|
230
|
+
"name": "@your-org/opus-react"
|
|
231
|
+
}
|
|
232
|
+
```
|
|
233
|
+
|
|
234
|
+
## Not included in the package
|
|
235
|
+
|
|
236
|
+
The published package does not include:
|
|
73
237
|
|
|
74
|
-
-
|
|
75
|
-
-
|
|
76
|
-
-
|
|
77
|
-
-
|
|
78
|
-
- Charts, gauges, and dashboard widgets
|
|
79
|
-
- `AccentColorPicker`, `IconPicker`, `CatalogIcon`
|
|
238
|
+
- Documentation site shells
|
|
239
|
+
- Control preview tooling
|
|
240
|
+
- Generated usage-code tooling
|
|
241
|
+
- Internal build scripts
|
|
80
242
|
|
|
81
|
-
|
|
243
|
+
## Keywords
|
|
244
|
+
|
|
245
|
+
```txt
|
|
246
|
+
react
|
|
247
|
+
components
|
|
248
|
+
ui
|
|
249
|
+
design-system
|
|
250
|
+
component-library
|
|
251
|
+
forms
|
|
252
|
+
charts
|
|
253
|
+
dashboard
|
|
254
|
+
dark-theme
|
|
255
|
+
light-theme
|
|
256
|
+
typescript
|
|
257
|
+
opus
|
|
258
|
+
```
|