peercore-ui-library 1.0.8 → 1.0.10
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 +81 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
<div align="center">
|
|
2
|
+
<br />
|
|
3
|
+
<img src="https://i.pinimg.com/736x/08/14/f2/0814f23e199ac243b6089e650d4a3d33.jpg" alt="PC UI Components Banner">
|
|
4
|
+
<br />
|
|
5
|
+
|
|
6
|
+
<div>
|
|
7
|
+
<img src="https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white" />
|
|
8
|
+
<img src="https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E" />
|
|
9
|
+
<img src="https://img.shields.io/badge/NPM-%23CB3837.svg?style=for-the-badge&logo=npm&logoColor=white" />
|
|
10
|
+
<img src="https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white" />
|
|
11
|
+
<img src="https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB" />
|
|
12
|
+
</div>
|
|
13
|
+
|
|
14
|
+
<h3 align="center">Peercore UI Components Library</h3>
|
|
15
|
+
|
|
16
|
+
<div align="center">
|
|
17
|
+
A reusable, customizable, and lightweight React component library built with simplicity and productivity in mind.
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
## 📦 Introduction
|
|
24
|
+
|
|
25
|
+
`peercore-ui-library` is a simple and flexible React component library including modals, currency inputs, toggles, and more, with built-in Storybook for documentation and local development.
|
|
26
|
+
|
|
27
|
+
---
|
|
28
|
+
|
|
29
|
+
## ⚙️ Tech Stack
|
|
30
|
+
|
|
31
|
+
- React 18+
|
|
32
|
+
- Bootstrap 5
|
|
33
|
+
- Storybook
|
|
34
|
+
- JavaScript (ES6+)
|
|
35
|
+
|
|
36
|
+
---
|
|
37
|
+
|
|
38
|
+
## 🔋 Components
|
|
39
|
+
|
|
40
|
+
✅ `PCModal` — Modal with title, content, footer, and outside click support
|
|
41
|
+
✅ `PCInputCurrency` — Currency input with live formatting and error states
|
|
42
|
+
✅ `PCToggle` — Bootstrap-styled toggle switch
|
|
43
|
+
... and more coming soon!
|
|
44
|
+
|
|
45
|
+
---
|
|
46
|
+
|
|
47
|
+
## 🤸 Quick Start
|
|
48
|
+
|
|
49
|
+
Install the package:
|
|
50
|
+
|
|
51
|
+
```bash
|
|
52
|
+
npm install peercore-ui-library
|
|
53
|
+
# or
|
|
54
|
+
yarn add peercore-ui-library
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
Use a component:
|
|
58
|
+
|
|
59
|
+
```jsx
|
|
60
|
+
import { PCModal } from "peercore-ui-library";
|
|
61
|
+
|
|
62
|
+
<PCModal title="Sample Modal" onClose={() => setShow(false)}>
|
|
63
|
+
Hello from the modal!
|
|
64
|
+
</PCModal>;
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
---
|
|
68
|
+
|
|
69
|
+
## 📚 Storybook
|
|
70
|
+
|
|
71
|
+
To explore components visually:
|
|
72
|
+
|
|
73
|
+
```bash
|
|
74
|
+
npm run storybook
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
---
|
|
78
|
+
|
|
79
|
+
## 📄 License
|
|
80
|
+
|
|
81
|
+
MIT © [Peercore Software Solutions](https://www.peercore.com.au/)
|