@deriv-web-design/ui 0.0.1 → 0.0.2
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 +65 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
# @deriv-web-design/ui
|
|
2
|
+
|
|
3
|
+
React component library for the Deriv Web Design System. Built with TypeScript and powered by Deriv design tokens.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @deriv-web-design/ui
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Setup
|
|
12
|
+
|
|
13
|
+
### 1. Import the styles
|
|
14
|
+
|
|
15
|
+
In your app's entry file (e.g. `main.tsx` or `App.tsx`), import the component styles and design tokens:
|
|
16
|
+
|
|
17
|
+
```js
|
|
18
|
+
import "@deriv-web-design/ui/styles.css";
|
|
19
|
+
import "@deriv-web-design/ui/tokens.css";
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
### 2. Use components
|
|
23
|
+
|
|
24
|
+
```tsx
|
|
25
|
+
import { Button, TextField, Chip } from "@deriv-web-design/ui";
|
|
26
|
+
|
|
27
|
+
export default function App() {
|
|
28
|
+
return (
|
|
29
|
+
<div>
|
|
30
|
+
<Button variant="primary">Get started</Button>
|
|
31
|
+
<TextField label="Email" placeholder="you@example.com" />
|
|
32
|
+
<Chip label="Active" />
|
|
33
|
+
</div>
|
|
34
|
+
);
|
|
35
|
+
}
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## Available Components
|
|
39
|
+
|
|
40
|
+
| Component | Description |
|
|
41
|
+
| ------------- | ------------------------------------------------ |
|
|
42
|
+
| `Button` | Primary, secondary, and ghost button variants |
|
|
43
|
+
| `Accordion` | Expandable/collapsible content sections |
|
|
44
|
+
| `Breadcrumb` | Navigation breadcrumb trail |
|
|
45
|
+
| `Chip` | Compact selection or filter element |
|
|
46
|
+
| `ChipDropdown`| Chip with dropdown selection |
|
|
47
|
+
| `Link` | Styled anchor link |
|
|
48
|
+
| `Pagination` | Page navigation control |
|
|
49
|
+
| `SearchField` | Input field with search icon |
|
|
50
|
+
| `Tag` | Status or category label |
|
|
51
|
+
| `TextField` | Text input with label and validation support |
|
|
52
|
+
| `Card` | Content card container |
|
|
53
|
+
|
|
54
|
+
## TypeScript
|
|
55
|
+
|
|
56
|
+
This package ships with full TypeScript definitions — no `@types` package needed.
|
|
57
|
+
|
|
58
|
+
## Design Tokens
|
|
59
|
+
|
|
60
|
+
Design tokens are included in this package via `tokens.css`. If you only need the tokens without components, install [`@deriv-web-design/tokens`](https://www.npmjs.com/package/@deriv-web-design/tokens) separately.
|
|
61
|
+
|
|
62
|
+
## Requirements
|
|
63
|
+
|
|
64
|
+
- React 18 or 19
|
|
65
|
+
- Node.js 18+
|