@rufous/ui 0.1.56 β 0.1.57
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 +206 -145
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
# @rufous/ui
|
|
2
2
|
|
|
3
|
-
A
|
|
4
|
-
Includes buttons, floating inputs, checkboxes, theme support, and icons.
|
|
3
|
+
A lightweight React UI component library with theming, buttons, inputs, dialogs, progress and a rich icon set.
|
|
5
4
|
|
|
6
5
|
---
|
|
7
6
|
|
|
@@ -9,58 +8,120 @@ Includes buttons, floating inputs, checkboxes, theme support, and icons.
|
|
|
9
8
|
|
|
10
9
|
```bash
|
|
11
10
|
npm install @rufous/ui
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
or
|
|
15
|
-
|
|
16
|
-
```bash
|
|
11
|
+
# or
|
|
17
12
|
yarn add @rufous/ui
|
|
18
13
|
```
|
|
19
14
|
|
|
20
15
|
---
|
|
21
16
|
|
|
22
|
-
##
|
|
17
|
+
## π§ Setup
|
|
23
18
|
|
|
24
|
-
|
|
19
|
+
Import the global styles once in your app entry (e.g. `src/main.tsx`, `pages/_app.tsx`).
|
|
25
20
|
|
|
26
21
|
```javascript
|
|
27
22
|
import "@rufous/ui/style.css";
|
|
28
23
|
```
|
|
29
24
|
|
|
30
|
-
|
|
25
|
+
Optional but recommended: wrap your app with the theme provider to enable theme utilities.
|
|
31
26
|
|
|
32
|
-
|
|
27
|
+
```tsx
|
|
28
|
+
import React from "react";
|
|
29
|
+
import ReactDOM from "react-dom/client";
|
|
30
|
+
import { RufousThemeProvider } from "@rufous/ui";
|
|
31
|
+
import "@rufous/ui/style.css";
|
|
33
32
|
|
|
34
|
-
|
|
33
|
+
ReactDOM.createRoot(document.getElementById("root")!).render(
|
|
34
|
+
<RufousThemeProvider>
|
|
35
|
+
<App />
|
|
36
|
+
</RufousThemeProvider>
|
|
37
|
+
);
|
|
38
|
+
```
|
|
35
39
|
|
|
36
40
|
---
|
|
37
41
|
|
|
38
|
-
|
|
42
|
+
## π¨ Theming
|
|
39
43
|
|
|
40
|
-
|
|
41
|
-
import React from "react";
|
|
42
|
-
import { Button } from "@rufous/ui";
|
|
43
|
-
import "@rufous/ui/style.css";
|
|
44
|
+
`RufousThemeProvider` exposes `useRufousTheme` and `APP_THEMES`.
|
|
44
45
|
|
|
45
|
-
|
|
46
|
+
```tsx
|
|
47
|
+
import { useRufousTheme, APP_THEMES, Button } from "@rufous/ui";
|
|
48
|
+
|
|
49
|
+
export function ThemeToggle() {
|
|
50
|
+
const { previewTheme } = useRufousTheme();
|
|
46
51
|
return (
|
|
47
|
-
<
|
|
52
|
+
<div style={{ display: "flex", gap: 12 }}>
|
|
53
|
+
<Button
|
|
54
|
+
onClick={() => previewTheme(APP_THEMES.default.name.toLowerCase())}
|
|
55
|
+
>
|
|
56
|
+
Light
|
|
57
|
+
</Button>
|
|
58
|
+
<Button
|
|
59
|
+
onClick={() => previewTheme(APP_THEMES.rufous.name.toLowerCase())}
|
|
60
|
+
>
|
|
61
|
+
Dark
|
|
62
|
+
</Button>
|
|
63
|
+
</div>
|
|
48
64
|
);
|
|
49
65
|
}
|
|
50
66
|
```
|
|
51
67
|
|
|
52
68
|
---
|
|
53
69
|
|
|
54
|
-
|
|
70
|
+
## 𧩠Components
|
|
55
71
|
|
|
56
|
-
|
|
57
|
-
import React, { useState } from "react";
|
|
58
|
-
import { FloatingInput } from "@rufous/ui";
|
|
59
|
-
import "@rufous/ui/style.css";
|
|
72
|
+
Below are the primary components exported by the library with usage patterns and key props.
|
|
60
73
|
|
|
61
|
-
|
|
62
|
-
const [name, setName] = useState("");
|
|
74
|
+
### Buttons
|
|
63
75
|
|
|
76
|
+
All buttons accept native button props via `...rest`.
|
|
77
|
+
|
|
78
|
+
- **StandardButton**: Base neutral button
|
|
79
|
+
- **AddButton**: Prefixed with `+`
|
|
80
|
+
- **SubmitButton**: Submit/async actions with built-in loading and double-click handling
|
|
81
|
+
- **CancelButton**: Secondary/cancel action
|
|
82
|
+
|
|
83
|
+
```tsx
|
|
84
|
+
import {
|
|
85
|
+
StandardButton,
|
|
86
|
+
AddButton,
|
|
87
|
+
SubmitButton,
|
|
88
|
+
CancelButton,
|
|
89
|
+
} from "@rufous/ui";
|
|
90
|
+
|
|
91
|
+
export function ButtonsDemo() {
|
|
92
|
+
return (
|
|
93
|
+
<div style={{ display: "flex", gap: 12 }}>
|
|
94
|
+
<StandardButton onClick={() => alert("Standard")}>
|
|
95
|
+
Standard
|
|
96
|
+
</StandardButton>
|
|
97
|
+
<AddButton onClick={() => alert("Added")}>Add Item</AddButton>
|
|
98
|
+
<SubmitButton
|
|
99
|
+
onClick={async () => await new Promise((r) => setTimeout(r, 800))}
|
|
100
|
+
>
|
|
101
|
+
Save
|
|
102
|
+
</SubmitButton>
|
|
103
|
+
<CancelButton onClick={() => alert("Cancelled")}>Cancel</CancelButton>
|
|
104
|
+
</div>
|
|
105
|
+
);
|
|
106
|
+
}
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
- **SubmitButton props**
|
|
110
|
+
- `type`: "button" | "submit" | "reset" (auto-managed when `onClick` provided)
|
|
111
|
+
- `onClick(e)`: supports async; shows loader until resolved
|
|
112
|
+
- `onDoubleClick(e)`: optional alternate handler; debounced vs single click
|
|
113
|
+
- `isLoading`: boolean external control of loader
|
|
114
|
+
- `bgGradiant`: boolean gradient background
|
|
115
|
+
|
|
116
|
+
### Text Inputs
|
|
117
|
+
|
|
118
|
+
- **FloatingInput**: Floating label text input
|
|
119
|
+
|
|
120
|
+
```tsx
|
|
121
|
+
import { FloatingInput } from "@rufous/ui";
|
|
122
|
+
|
|
123
|
+
export function NameField() {
|
|
124
|
+
const [name, setName] = React.useState("");
|
|
64
125
|
return (
|
|
65
126
|
<FloatingInput
|
|
66
127
|
label="Your Name"
|
|
@@ -73,167 +134,167 @@ export default function Example() {
|
|
|
73
134
|
}
|
|
74
135
|
```
|
|
75
136
|
|
|
76
|
-
|
|
137
|
+
- **FloatingInput props**
|
|
138
|
+
- `label`: string (required)
|
|
139
|
+
- `name`: string (required)
|
|
140
|
+
- `id`: string (defaults to `name`)
|
|
141
|
+
- `type`: string = "text"
|
|
142
|
+
- `value`: string
|
|
143
|
+
- `onChange(e)`: (required for controlled usage)
|
|
144
|
+
- `required`: boolean = false
|
|
145
|
+
- `placeholder`: string
|
|
146
|
+
- `className`: string
|
|
147
|
+
- `...divProps` applied to the wrapper
|
|
77
148
|
|
|
78
|
-
###
|
|
149
|
+
### Checkboxes
|
|
79
150
|
|
|
80
|
-
|
|
81
|
-
import React from "react";
|
|
82
|
-
import { Button, useRufousTheme, APP_THEMES } from "@rufous/ui";
|
|
83
|
-
import "@rufous/ui/style.css";
|
|
151
|
+
- **Checkbox**: Controlled checkbox with label
|
|
84
152
|
|
|
85
|
-
|
|
86
|
-
|
|
153
|
+
```tsx
|
|
154
|
+
import { Checkbox } from "@rufous/ui";
|
|
87
155
|
|
|
156
|
+
export function Terms() {
|
|
157
|
+
const [checked, setChecked] = React.useState(false);
|
|
88
158
|
return (
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
<Button
|
|
96
|
-
onClick={() => previewTheme(APP_THEMES.rufous.name.toLowerCase())}
|
|
97
|
-
>
|
|
98
|
-
Dark
|
|
99
|
-
</Button>
|
|
100
|
-
</>
|
|
159
|
+
<Checkbox
|
|
160
|
+
id="terms"
|
|
161
|
+
label="I agree to the terms"
|
|
162
|
+
checked={checked}
|
|
163
|
+
onChange={setChecked}
|
|
164
|
+
/>
|
|
101
165
|
);
|
|
102
166
|
}
|
|
103
167
|
```
|
|
104
168
|
|
|
105
|
-
|
|
169
|
+
- **Checkbox props**
|
|
170
|
+
- `id`: string
|
|
171
|
+
- `label`: string
|
|
172
|
+
- `checked`: boolean
|
|
173
|
+
- `onChange(nextChecked: boolean)`: required
|
|
174
|
+
- `disabled`: boolean = false
|
|
175
|
+
- `className`: string
|
|
176
|
+
- `style`: React.CSSProperties
|
|
106
177
|
|
|
107
|
-
###
|
|
178
|
+
### Dialogs
|
|
108
179
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
import "@rufous/ui
|
|
180
|
+
- **BaseDialog**: Unopinionated modal container with header, close button, footer actions
|
|
181
|
+
|
|
182
|
+
```tsx
|
|
183
|
+
import { BaseDialog, SubmitButton } from "@rufous/ui";
|
|
113
184
|
|
|
114
|
-
export
|
|
185
|
+
export function ConfirmDialog({ open, onClose, onConfirm }) {
|
|
115
186
|
return (
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
187
|
+
<BaseDialog
|
|
188
|
+
open={open}
|
|
189
|
+
title="Confirm delete"
|
|
190
|
+
onClose={onClose}
|
|
191
|
+
onCancel={onClose}
|
|
192
|
+
onConfirm={onConfirm}
|
|
193
|
+
buttonAlign="flex-end"
|
|
194
|
+
showCancelButton
|
|
195
|
+
fullWidth
|
|
196
|
+
>
|
|
197
|
+
<p>Are you sure you want to delete this item?</p>
|
|
198
|
+
</BaseDialog>
|
|
120
199
|
);
|
|
121
200
|
}
|
|
122
201
|
```
|
|
123
202
|
|
|
124
|
-
|
|
203
|
+
- **BaseDialog props (key)**
|
|
204
|
+
- `open`: boolean (required to show)
|
|
205
|
+
- `title`: string
|
|
206
|
+
- `onClose()`: close handler
|
|
207
|
+
- `onCancel()`: cancel handler
|
|
208
|
+
- `onConfirm()`: sync/async confirm; built-in loading toggle
|
|
209
|
+
- `cancelText`, `confirmText`, `submitText`: strings
|
|
210
|
+
- `isLoading`, `loading`, `disableConfirmBtn`: booleans
|
|
211
|
+
- `minWidth`, `minHeight`, `fullWidth`, `fullScreen`: sizing controls
|
|
212
|
+
- `buttonAlign`: "flex-start" | "center" | "flex-end"
|
|
213
|
+
- `showCloseButton`, `showCancelButton`, `formatTitle`
|
|
214
|
+
- `className`, `dialogBodyStyle`
|
|
125
215
|
|
|
126
|
-
###
|
|
216
|
+
### Progress
|
|
127
217
|
|
|
128
|
-
|
|
129
|
-
import React from "react";
|
|
130
|
-
import { CopyIcon, EditIcon } from "@rufous/ui";
|
|
131
|
-
import "@rufous/ui/style.css";
|
|
218
|
+
- **CircularProgress**: Stroke-based loader
|
|
132
219
|
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
</div>
|
|
139
|
-
);
|
|
220
|
+
```tsx
|
|
221
|
+
import { CircularProgess } from "@rufous/ui"; // exported via SubmitButton internally as well
|
|
222
|
+
|
|
223
|
+
export function LoadingExample() {
|
|
224
|
+
return <CircularProgess size={36} color="#a81c08" />;
|
|
140
225
|
}
|
|
141
226
|
```
|
|
142
227
|
|
|
143
|
-
|
|
228
|
+
- **CircularProgess props**
|
|
229
|
+
- `size`: number = 50
|
|
230
|
+
- `color`: string = "#a81c08"
|
|
231
|
+
- `...divProps`
|
|
144
232
|
|
|
145
|
-
|
|
233
|
+
### Icons
|
|
146
234
|
|
|
147
|
-
|
|
235
|
+
All icons are React components that accept standard `svg`/`div`-style props depending on implementation; at minimum `className`, event handlers, and often `color` when applicable.
|
|
148
236
|
|
|
149
|
-
|
|
150
|
-
| ------- | -------- | ------- | --------------------- |
|
|
151
|
-
| variant | string | primary | Sets the button style |
|
|
152
|
-
| size | string | medium | Sets the button size |
|
|
153
|
-
| onClick | function | - | Click event handler |
|
|
237
|
+
Usage pattern:
|
|
154
238
|
|
|
155
|
-
|
|
239
|
+
```tsx
|
|
240
|
+
import { CopyIcon, EditIcon, DownloadIcon } from "@rufous/ui";
|
|
156
241
|
|
|
157
|
-
|
|
242
|
+
export function IconRow() {
|
|
243
|
+
return (
|
|
244
|
+
<div style={{ display: "flex", gap: 10 }}>
|
|
245
|
+
<CopyIcon onClick={() => alert("Copied!")} />
|
|
246
|
+
<EditIcon />
|
|
247
|
+
<DownloadIcon />
|
|
248
|
+
</div>
|
|
249
|
+
);
|
|
250
|
+
}
|
|
251
|
+
```
|
|
158
252
|
|
|
159
|
-
|
|
160
|
-
| -------- | -------- | ------- | ---------------------- |
|
|
161
|
-
| label | string | - | Floating label text |
|
|
162
|
-
| name | string | - | Input name attribute |
|
|
163
|
-
| value | string | - | Input value |
|
|
164
|
-
| onChange | function | - | Change event handler |
|
|
165
|
-
| required | boolean | false | Mark field as required |
|
|
253
|
+
Available icons include (non-exhaustive): `ActivateUserIcon`, `ArchivedIcon`, `AssignGroupIcon`, `CloseIcon`, `CopyIcon`, `DifficultyAllIcon`, `DifficultyEasyIcon`, `DifficultyMediumIcon`, `DifficultyHardIcon`, `DollarIcon`, `DownloadIcon`, `DownloadPdfIcon`, `EditChatIcon`, `EditIcon`, `EngagementIcon`, `FunctionIcon`, `HelpOutlinedIcon`, `HierarchyIcon`, `InactiveGroupIcon`, `IndustryIcon`, `InvoiceIcon`, `LocationPinIcon`, `LogsIcon`, `MinExperienceIcon`, `NineDotMenuIcon`, `NotificationIcon`, `ProjectIcon`, `QuestionStatusAllIcon`, `QuestionStatusPrivateIcon`, `QuestionStatusPublicIcon`, `QuestionTypeAllIcon`, `QuestionTypeCodingIcon`, `QuestionTypeDescriptiveIcon`, `QuestionTypeMultipleIcon`, `QuestionTypeSingleIcon`, `RefreshIcon`, `ResendInviteIcon`, `RolesIcon`, `RufousAiIcon`, `RufousBirdIcon`, `RufousLauncherIcon`, `SidebarIcon`, `SubscribeIcon`, `SuspendUserIcon`, `TickIcon`, `TimerIcon`, `TrashIcon`, `UnArchivedIcon`, `UnsubscribeIcon`, `UploadIcon`, `UserAssignIcon`, `ViewIcon`, `WorkItemIcon`.
|
|
166
254
|
|
|
167
255
|
---
|
|
168
256
|
|
|
169
|
-
|
|
257
|
+
## π§Ύ Exports
|
|
170
258
|
|
|
171
|
-
|
|
172
|
-
| -------- | -------- | ------- | -------------------- |
|
|
173
|
-
| label | string | - | Checkbox label |
|
|
174
|
-
| checked | boolean | false | Checked state |
|
|
175
|
-
| onChange | function | - | Change event handler |
|
|
259
|
+
The package main re-exports everything you need from a single entry point:
|
|
176
260
|
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
261
|
+
```ts
|
|
262
|
+
// main entry exports
|
|
263
|
+
export { APP_THEMES } from "./utils/constants";
|
|
264
|
+
export * from "./icons"; // all icons
|
|
265
|
+
export * from "./Buttons"; // AddButton, SubmitButton, CancelButton, StandardButton
|
|
266
|
+
export * from "./Dialogs"; // BaseDialog
|
|
267
|
+
export {
|
|
268
|
+
RufousThemeProvider,
|
|
269
|
+
useRufousTheme,
|
|
270
|
+
} from "./Contexts/rufousThemeProvider";
|
|
271
|
+
```
|
|
180
272
|
|
|
181
|
-
|
|
273
|
+
Import from `@rufous/ui` directly:
|
|
182
274
|
|
|
183
|
-
```
|
|
184
|
-
import React, { useState } from "react";
|
|
275
|
+
```tsx
|
|
185
276
|
import {
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
CopyIcon,
|
|
190
|
-
EditIcon,
|
|
277
|
+
SubmitButton,
|
|
278
|
+
BaseDialog,
|
|
279
|
+
RufousThemeProvider,
|
|
191
280
|
useRufousTheme,
|
|
192
281
|
APP_THEMES,
|
|
193
282
|
} from "@rufous/ui";
|
|
194
|
-
|
|
283
|
+
```
|
|
195
284
|
|
|
196
|
-
|
|
197
|
-
const [name, setName] = useState("");
|
|
198
|
-
const { previewTheme } = useRufousTheme();
|
|
285
|
+
---
|
|
199
286
|
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
required
|
|
212
|
-
/>
|
|
213
|
-
|
|
214
|
-
<Checkbox label="Accept Terms" />
|
|
215
|
-
|
|
216
|
-
<div style={{ marginTop: "10px" }}>
|
|
217
|
-
<Button
|
|
218
|
-
onClick={() => previewTheme(APP_THEMES.default.name.toLowerCase())}
|
|
219
|
-
>
|
|
220
|
-
Light Theme
|
|
221
|
-
</Button>
|
|
222
|
-
<Button
|
|
223
|
-
onClick={() => previewTheme(APP_THEMES.rufous.name.toLowerCase())}
|
|
224
|
-
>
|
|
225
|
-
Dark Theme
|
|
226
|
-
</Button>
|
|
227
|
-
</div>
|
|
228
|
-
|
|
229
|
-
<div style={{ display: "flex", gap: "10px", marginTop: "10px" }}>
|
|
230
|
-
<CopyIcon onClick={() => alert("Copied!")} />
|
|
231
|
-
<EditIcon onClick={() => alert("Edit clicked!")} />
|
|
232
|
-
</div>
|
|
233
|
-
</div>
|
|
234
|
-
);
|
|
235
|
-
}
|
|
236
|
-
```
|
|
287
|
+
## π§ Notes
|
|
288
|
+
|
|
289
|
+
- Always import `@rufous/ui/style.css` once to get base styles.
|
|
290
|
+
- `SubmitButton` manages `type` automatically when `onClick` is provided.
|
|
291
|
+
- Dialog confirm button disables while running async `onConfirm` to prevent repeats.
|
|
292
|
+
|
|
293
|
+
---
|
|
294
|
+
|
|
295
|
+
## π Issues / Feedback
|
|
296
|
+
|
|
297
|
+
Please open an issue or PR in your repository to report bugs, request components, or propose improvements.
|
|
237
298
|
|
|
238
299
|
---
|
|
239
300
|
|