pillardash-ui-react 0.0.7 → 0.1.0
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 +170 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
# Pillardash Component Library
|
|
2
|
+
|
|
3
|
+
A collection of reusable React components for building modern web applications with consistent design and behavior.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **TypeScript Support**: Fully typed components with exported prop types
|
|
8
|
+
- **Accessible**: Built with WAI-ARIA standards
|
|
9
|
+
- **Customizable**: Theme support and style overrides
|
|
10
|
+
- **Responsive**: Works across all device sizes
|
|
11
|
+
- **Form Components**: Complete suite of form inputs and controls
|
|
12
|
+
|
|
13
|
+
## Installation
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install @your-org/component-library
|
|
17
|
+
# or
|
|
18
|
+
yarn add @your-org/component-library
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Peer Dependencies
|
|
22
|
+
|
|
23
|
+
This library requires:
|
|
24
|
+
|
|
25
|
+
```json
|
|
26
|
+
{
|
|
27
|
+
"react": "^18.0.0 || ^19.0.0",
|
|
28
|
+
"react-dom": "^18.0.0 || ^19.0.0"
|
|
29
|
+
}
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## Available Components
|
|
33
|
+
|
|
34
|
+
### Form Controls
|
|
35
|
+
- `Button` - Interactive button element
|
|
36
|
+
- `CheckBox` - Custom checkbox input
|
|
37
|
+
- `FileUpload` - File upload component with drag-and-drop
|
|
38
|
+
- `Input` - Text input field
|
|
39
|
+
- `Search` - Search input with debounce
|
|
40
|
+
- `Select` - Custom select dropdown
|
|
41
|
+
- `TextEditor` - Rich text editor
|
|
42
|
+
|
|
43
|
+
### Data Display
|
|
44
|
+
- `DataTable` - Sortable and paginated table
|
|
45
|
+
- `Card` - Flexible content container
|
|
46
|
+
|
|
47
|
+
### Feedback
|
|
48
|
+
- `Alert` - Contextual notification messages
|
|
49
|
+
- `Loading` - Animated loading indicators
|
|
50
|
+
|
|
51
|
+
## Usage
|
|
52
|
+
|
|
53
|
+
```tsx
|
|
54
|
+
import { Button, Input } from '@your-org/component-library';
|
|
55
|
+
|
|
56
|
+
function Example() {
|
|
57
|
+
return (
|
|
58
|
+
<div>
|
|
59
|
+
<Input
|
|
60
|
+
label="Email"
|
|
61
|
+
placeholder="Enter your email"
|
|
62
|
+
/>
|
|
63
|
+
<Button variant="primary">
|
|
64
|
+
Submit
|
|
65
|
+
</Button>
|
|
66
|
+
</div>
|
|
67
|
+
);
|
|
68
|
+
}
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
## Theming
|
|
72
|
+
|
|
73
|
+
Customize the look and feel by wrapping your app with the `ThemeProvider`:
|
|
74
|
+
|
|
75
|
+
```tsx
|
|
76
|
+
import { ThemeProvider } from '@your-org/component-library';
|
|
77
|
+
|
|
78
|
+
function App() {
|
|
79
|
+
return (
|
|
80
|
+
<ThemeProvider
|
|
81
|
+
theme={{
|
|
82
|
+
colors: {
|
|
83
|
+
primary: '#0E8A74',
|
|
84
|
+
secondary: '#0E8AAA'
|
|
85
|
+
}
|
|
86
|
+
}}
|
|
87
|
+
>
|
|
88
|
+
{/* Your app */}
|
|
89
|
+
</ThemeProvider>
|
|
90
|
+
);
|
|
91
|
+
}
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
## TypeScript Support
|
|
95
|
+
|
|
96
|
+
All components include TypeScript definitions. Import prop types for extended customization:
|
|
97
|
+
|
|
98
|
+
```tsx
|
|
99
|
+
import { Button, type ButtonProps } from '@your-org/component-library';
|
|
100
|
+
|
|
101
|
+
const CustomButton = (props: ButtonProps) => (
|
|
102
|
+
<Button {...props} className="custom-class" />
|
|
103
|
+
);
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
## Contributing
|
|
107
|
+
|
|
108
|
+
We welcome contributions! Please see our [Contributing Guidelines](CONTRIBUTING.md).
|
|
109
|
+
|
|
110
|
+
## License
|
|
111
|
+
|
|
112
|
+
MIT © [Osai Technologies](https://osaitech.dev)
|
|
113
|
+
|
|
114
|
+
---
|
|
115
|
+
|
|
116
|
+
## Component Documentation
|
|
117
|
+
|
|
118
|
+
### Button
|
|
119
|
+
|
|
120
|
+
```tsx
|
|
121
|
+
<Button
|
|
122
|
+
variant="primary" | "secondary" | "outline"
|
|
123
|
+
size="sm" | "md" | "lg"
|
|
124
|
+
loading={boolean}
|
|
125
|
+
disabled={boolean}
|
|
126
|
+
onClick={() => void}
|
|
127
|
+
>
|
|
128
|
+
Click me
|
|
129
|
+
</Button>
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
### Input
|
|
133
|
+
|
|
134
|
+
```tsx
|
|
135
|
+
<Input
|
|
136
|
+
label="Email"
|
|
137
|
+
placeholder="user@example.com"
|
|
138
|
+
error="Invalid email"
|
|
139
|
+
value={string}
|
|
140
|
+
onChange={(e) => void}
|
|
141
|
+
/>
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
### Select
|
|
145
|
+
|
|
146
|
+
```tsx
|
|
147
|
+
<Select
|
|
148
|
+
options={[
|
|
149
|
+
{ value: '1', label: 'Option 1' },
|
|
150
|
+
{ value: '2', label: 'Option 2' }
|
|
151
|
+
]}
|
|
152
|
+
value={string}
|
|
153
|
+
onChange={(selected) => void}
|
|
154
|
+
/>
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
## Development Setup
|
|
158
|
+
|
|
159
|
+
1. Clone the repository
|
|
160
|
+
2. Install dependencies: `npm install`
|
|
161
|
+
3. Run Storybook: `npm run storybook`
|
|
162
|
+
4. Build the library: `npm run build`
|
|
163
|
+
|
|
164
|
+
## Testing
|
|
165
|
+
|
|
166
|
+
```bash
|
|
167
|
+
npm test
|
|
168
|
+
# or
|
|
169
|
+
npm run test:watch
|
|
170
|
+
```
|