dga-ui-react 1.2.2 → 1.2.3
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 +138 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1 +1,138 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
## Definition
|
|
4
|
+
|
|
5
|
+
A React components library designed to streamline UI development by providing a set of reusable, accessible, and highly customizable components based on the DGA [design system](https://design.dga.gov.sa). <br/><br/>
|
|
6
|
+
Built with TypeScript for type safety and scalability, this library enables you to create modern, consistent, responsive user-friendly interfaces with minimal effort.
|
|
7
|
+
|
|
8
|
+
# [Demo](https://dgaui.vercel.app)
|
|
9
|
+
|
|
10
|
+
## Features
|
|
11
|
+
|
|
12
|
+
- A set of high-quality React components based on DGA design system.
|
|
13
|
+
- Implements components that adhere to the DGA design principles, ensuring consistency and usability.
|
|
14
|
+
- TypeScript support: full TypeScript integration for enhanced type safety and improved developer experience.
|
|
15
|
+
- Customizability: easily themeable and customizable to fit your specific project requirements.
|
|
16
|
+
- Responsive design: components are designed to work seamlessly across all screen sizes and devices.
|
|
17
|
+
|
|
18
|
+
## Install
|
|
19
|
+
|
|
20
|
+
```
|
|
21
|
+
npm install dga-ui-react
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
```
|
|
25
|
+
yarn add dga-ui-react
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## Usage Example
|
|
29
|
+
|
|
30
|
+
```
|
|
31
|
+
import { Button, StatusTag } from 'dga-ui-react';
|
|
32
|
+
|
|
33
|
+
export default () => (
|
|
34
|
+
<>
|
|
35
|
+
<Button>Click me</Button>
|
|
36
|
+
<StatusTag color="secondary">Secondary status</StatusTag>
|
|
37
|
+
</>
|
|
38
|
+
);
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## RTL
|
|
42
|
+
|
|
43
|
+
#### Theme override
|
|
44
|
+
|
|
45
|
+
By overriding the theme using ThemeProvider and setting its direction to rtl.
|
|
46
|
+
|
|
47
|
+
```
|
|
48
|
+
import {ThemeProvider, StatusTag} from "dga-ui-react";
|
|
49
|
+
|
|
50
|
+
export default () => (
|
|
51
|
+
<ThemeProvider theme={{ direction: "rtl" }}>
|
|
52
|
+
<StatusTag>status</StatusTag>
|
|
53
|
+
</ThemeProvider>
|
|
54
|
+
);
|
|
55
|
+
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
#### withRtl HOC
|
|
59
|
+
|
|
60
|
+
You can wrap any component by withRtl HOC to act as rtl;
|
|
61
|
+
|
|
62
|
+
```
|
|
63
|
+
import { withRtl } from 'dga-ui-react';
|
|
64
|
+
|
|
65
|
+
const MyComponent = () => (
|
|
66
|
+
<StatusTag>status</StatusTag>
|
|
67
|
+
);
|
|
68
|
+
|
|
69
|
+
export default withRtl(MyComponent)
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
## Theme
|
|
73
|
+
|
|
74
|
+
#### Theme Override
|
|
75
|
+
|
|
76
|
+
All theme values are overridable by passing a theme object containing the override values.
|
|
77
|
+
|
|
78
|
+
e.g override the golden secondary color to the lavender color:
|
|
79
|
+
|
|
80
|
+
```
|
|
81
|
+
import { ThemeProvider, Button } from 'dga-ui-react';
|
|
82
|
+
|
|
83
|
+
export default () => (
|
|
84
|
+
<ThemeProvider
|
|
85
|
+
theme={{
|
|
86
|
+
palette: {
|
|
87
|
+
secondary: {
|
|
88
|
+
25: "#FEFCFF",
|
|
89
|
+
50: "#F9F5FA",
|
|
90
|
+
100: "#F2E9F5",
|
|
91
|
+
200: "#E1CCE8",
|
|
92
|
+
300: "#CCADD9",
|
|
93
|
+
400: "#A57BBA",
|
|
94
|
+
500: "#80519F",
|
|
95
|
+
600: "#6D428F",
|
|
96
|
+
700: "#532D75",
|
|
97
|
+
800: "#3D1D5E",
|
|
98
|
+
900: "#281047",
|
|
99
|
+
950: "#16072E",
|
|
100
|
+
light: "#CCADD9",
|
|
101
|
+
main: "#80519F",
|
|
102
|
+
dark: "#532D75",
|
|
103
|
+
contrastText: "#FFF",
|
|
104
|
+
},
|
|
105
|
+
},
|
|
106
|
+
}}
|
|
107
|
+
>
|
|
108
|
+
<Button color="secondary">Button</Button>
|
|
109
|
+
</ThemeProvider>
|
|
110
|
+
);
|
|
111
|
+
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
#### useTheme hook
|
|
115
|
+
|
|
116
|
+
To retrieve the theme object:
|
|
117
|
+
|
|
118
|
+
```
|
|
119
|
+
import { useTheme } from "dga-ui-react";
|
|
120
|
+
|
|
121
|
+
export default () => {
|
|
122
|
+
const theme = useTheme();
|
|
123
|
+
|
|
124
|
+
return (
|
|
125
|
+
<p style={{color: theme.palette.primary[600]}}>Paragraph text colored from my custom theme</p>
|
|
126
|
+
);
|
|
127
|
+
};
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
## Dev Storybook
|
|
131
|
+
|
|
132
|
+
```
|
|
133
|
+
npm install
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
```
|
|
137
|
+
npm run storybook
|
|
138
|
+
```
|