@new-black/lyra 0.0.5 → 0.0.6
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 +75 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
# Lyra - Design System
|
|
2
|
+
|
|
3
|
+
**Note: This package is currently under development and should not be used in a production environment.**
|
|
4
|
+
|
|
5
|
+
Lyra is a comprehensive design system aimed at providing consistent and reusable components, styles, and guidelines for building user interfaces. It is designed to streamline the UI development process and ensure a cohesive visual and interactive experience across all projects.
|
|
6
|
+
|
|
7
|
+
## Features
|
|
8
|
+
|
|
9
|
+
- Pre-defined UI components such as buttons, accordions, modals, etc.
|
|
10
|
+
- Consistent typography, colors, and spacing guidelines, we use Tailwind for that.
|
|
11
|
+
- Accessibility considerations implemented by default (react-aria).
|
|
12
|
+
- Theming capabilities to match various branding requirements.
|
|
13
|
+
|
|
14
|
+
## Installation
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
npm install @new-black/lyra
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
npm i @new-black/lyra
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
or
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
yarn add @new-black/lyra
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
```ts
|
|
31
|
+
// tailwind.config.ts
|
|
32
|
+
import { lyraPreset } from "@new-black/lyra";
|
|
33
|
+
|
|
34
|
+
export default {
|
|
35
|
+
presets: [lyraPreset],
|
|
36
|
+
...
|
|
37
|
+
} satisfies Config;
|
|
38
|
+
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
```tsx
|
|
42
|
+
// Some root component
|
|
43
|
+
import { Provider } from "@new-black/lyra";
|
|
44
|
+
|
|
45
|
+
export const Root = () => {
|
|
46
|
+
return (
|
|
47
|
+
<Provider locale="en">
|
|
48
|
+
<App />
|
|
49
|
+
</Provider>
|
|
50
|
+
);
|
|
51
|
+
};
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
## Usage
|
|
55
|
+
|
|
56
|
+
Once installed, you can import Lyra components and styles into your project:
|
|
57
|
+
|
|
58
|
+
```javascript
|
|
59
|
+
import { Button, Accordion } from "@new-black/lyra";
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
Check out the documentation (not yet available) for a detailed guide on using and customizing Lyra.
|
|
63
|
+
|
|
64
|
+
## Roadmap
|
|
65
|
+
|
|
66
|
+
Our future plans for Lyra include:
|
|
67
|
+
|
|
68
|
+
- Adding more components and design elements.
|
|
69
|
+
- Enhancing documentation with usage examples and guidelines.
|
|
70
|
+
|
|
71
|
+
Please note that this roadmap is subject to change as the project evolves.
|
|
72
|
+
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
```
|
package/package.json
CHANGED