@ws-ui/ui-components 1.0.0 → 1.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 +52 -3
- package/package.json +2 -4
package/README.md
CHANGED
|
@@ -16,7 +16,56 @@ A comprehensive design system built with React, TypeScript, TailwindCSS, and Sto
|
|
|
16
16
|
|
|
17
17
|
## 🚀 Quick Start
|
|
18
18
|
|
|
19
|
-
### Installation
|
|
19
|
+
### Installation from npm
|
|
20
|
+
|
|
21
|
+
Install the package in your project:
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npm install @ws-ui/ui-components
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
### Using Components
|
|
28
|
+
|
|
29
|
+
Import and use components in your React application:
|
|
30
|
+
|
|
31
|
+
```tsx
|
|
32
|
+
import { Button, Input, Checkbox } from '@ws-ui/ui-components';
|
|
33
|
+
|
|
34
|
+
function App() {
|
|
35
|
+
return (
|
|
36
|
+
<div>
|
|
37
|
+
<Input placeholder="Enter your name" label="Name" />
|
|
38
|
+
<Checkbox
|
|
39
|
+
label="Accept terms and conditions"
|
|
40
|
+
onChange={(checked) => console.log(checked)}
|
|
41
|
+
/>
|
|
42
|
+
<Button variant="primary" size="md" onClick={() => alert('Hello!')}>
|
|
43
|
+
Submit
|
|
44
|
+
</Button>
|
|
45
|
+
</div>
|
|
46
|
+
);
|
|
47
|
+
}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### Available Components
|
|
51
|
+
|
|
52
|
+
- **Button**: Versatile button with multiple variants and sizes
|
|
53
|
+
- **Input**: Text input with label, error states, and validation
|
|
54
|
+
- **Checkbox**: Accessible checkbox with indeterminate state
|
|
55
|
+
- **Radio**: Radio button with group management
|
|
56
|
+
- **Dropdown**: Customizable dropdown with search and multi-select
|
|
57
|
+
- **Menu**: Context menu with nested submenus and keyboard navigation
|
|
58
|
+
- And more...
|
|
59
|
+
|
|
60
|
+
Check the [Storybook documentation](#-storybook) for complete component APIs and examples.
|
|
61
|
+
|
|
62
|
+
---
|
|
63
|
+
|
|
64
|
+
## 🔧 Development Setup
|
|
65
|
+
|
|
66
|
+
For contributors who want to develop and extend the design system:
|
|
67
|
+
|
|
68
|
+
### Clone and Install
|
|
20
69
|
|
|
21
70
|
```bash
|
|
22
71
|
# Clone the repository
|
|
@@ -27,7 +76,7 @@ cd design-system
|
|
|
27
76
|
npm install
|
|
28
77
|
```
|
|
29
78
|
|
|
30
|
-
### Development
|
|
79
|
+
### Development Commands
|
|
31
80
|
|
|
32
81
|
```bash
|
|
33
82
|
# Start the development server
|
|
@@ -143,4 +192,4 @@ npm run test-storybook
|
|
|
143
192
|
- Ensure accessibility compliance
|
|
144
193
|
- Add comprehensive Storybook stories
|
|
145
194
|
- Include unit tests for complex logic
|
|
146
|
-
- Use semantic versioning for releases
|
|
195
|
+
- Use semantic versioning for releases
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ws-ui/ui-components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "Qodly Design System - UI component library",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -98,7 +98,5 @@
|
|
|
98
98
|
"vite-plugin-svgr": "^4.3.0",
|
|
99
99
|
"vitest": "^3.2.3",
|
|
100
100
|
"vitest-browser-react": "^1.0.0"
|
|
101
|
-
}
|
|
102
|
-
"author": "",
|
|
103
|
-
"license": "ISC"
|
|
101
|
+
}
|
|
104
102
|
}
|