master-components-react-ts 2.5.19 → 2.6.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 +250 -5
- package/dist/index.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,8 +1,253 @@
|
|
|
1
|
-
# React
|
|
1
|
+
# Master Components React TypeScript
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A comprehensive React TypeScript component library featuring modern, accessible, and customizable UI components for building professional web applications.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## 🚀 Features
|
|
6
6
|
|
|
7
|
-
-
|
|
8
|
-
-
|
|
7
|
+
- **20+ Production-Ready Components** - From basic inputs to complex data tables
|
|
8
|
+
- **TypeScript Support** - Full type safety with comprehensive type definitions
|
|
9
|
+
- **Modern Design System** - Consistent styling with SCSS modules
|
|
10
|
+
- **Accessibility First** - Built with accessibility best practices
|
|
11
|
+
- **Highly Customizable** - Extensive styling and behavior customization options
|
|
12
|
+
- **Tree Shakeable** - Import only what you need
|
|
13
|
+
- **React 18+ Compatible** - Built for modern React applications
|
|
14
|
+
|
|
15
|
+
## 📦 Installation
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install master-components-react-ts
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## 🎯 Quick Start
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import React from 'react'
|
|
25
|
+
import { MainButton, FormInput, Table, DatePicker } from 'master-components-react-ts'
|
|
26
|
+
import 'master-components-react-ts/style.css'
|
|
27
|
+
|
|
28
|
+
function App() {
|
|
29
|
+
return (
|
|
30
|
+
<div>
|
|
31
|
+
<FormInput label="Email" placeholder="Enter your email" type="email" required />
|
|
32
|
+
<MainButton label="Submit" buttonType="primary" onClick={() => console.log('Clicked!')} />
|
|
33
|
+
</div>
|
|
34
|
+
)
|
|
35
|
+
}
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## 🧩 Components
|
|
39
|
+
|
|
40
|
+
### Form Components
|
|
41
|
+
|
|
42
|
+
- **FormInput** - Text input with validation states, slots, and multiple types
|
|
43
|
+
- **Textarea** - Multi-line text input with character counting
|
|
44
|
+
- **Checkbox** - Customizable checkbox with different styles
|
|
45
|
+
- **Radio** - Radio button groups with custom styling
|
|
46
|
+
- **Toggle** - Switch/toggle component with multiple sizes
|
|
47
|
+
- **Dropdown** - Advanced dropdown with search, multiselect, and tree support
|
|
48
|
+
- **DatePicker** - Date selection with range and dual picker modes
|
|
49
|
+
- **TimePicker** - Time selection with range support
|
|
50
|
+
- **Slider** - Range slider with single and dual handle support
|
|
51
|
+
- **FileUploader** - Drag & drop file upload component
|
|
52
|
+
|
|
53
|
+
### Layout & Navigation
|
|
54
|
+
|
|
55
|
+
- **Table** - Feature-rich data table with sorting, pagination, and row actions
|
|
56
|
+
- **TreeNode** - Hierarchical tree component with checkboxes
|
|
57
|
+
- **Tabs** - Tab navigation component
|
|
58
|
+
- **Popup** - Modal and drawer popup system
|
|
59
|
+
- **ActionDropdown** - Context menu dropdown for actions
|
|
60
|
+
|
|
61
|
+
### Feedback & Status
|
|
62
|
+
|
|
63
|
+
- **MainButton** - Primary button component with loading states
|
|
64
|
+
- **InlineLoading** - Loading indicators with success/error states
|
|
65
|
+
- **Skeleton** - Content loading placeholders
|
|
66
|
+
- **NotificationToast** - Toast notification system
|
|
67
|
+
- **Tooltip** - Contextual help tooltips
|
|
68
|
+
|
|
69
|
+
### Advanced Components
|
|
70
|
+
|
|
71
|
+
- **FilterWithTags** - Advanced filtering interface with multiple input types
|
|
72
|
+
- **DropdownPill** - Pill-style dropdown selector
|
|
73
|
+
|
|
74
|
+
## 📚 Documentation
|
|
75
|
+
|
|
76
|
+
For detailed documentation, examples, and API references, visit our documentation website:
|
|
77
|
+
|
|
78
|
+
**🌐 [components.nebi.com](https://components.nebi.com)**
|
|
79
|
+
|
|
80
|
+
The documentation includes:
|
|
81
|
+
|
|
82
|
+
- Interactive component playground
|
|
83
|
+
- Complete API documentation
|
|
84
|
+
- Usage examples and best practices
|
|
85
|
+
- Customization guides
|
|
86
|
+
- Accessibility guidelines
|
|
87
|
+
|
|
88
|
+
## 🎨 Styling
|
|
89
|
+
|
|
90
|
+
The library uses SCSS modules for styling. Import the main CSS file to get started:
|
|
91
|
+
|
|
92
|
+
```tsx
|
|
93
|
+
import 'master-components-react-ts/style.css'
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
### Customization
|
|
97
|
+
|
|
98
|
+
Components support extensive customization through props:
|
|
99
|
+
|
|
100
|
+
```tsx
|
|
101
|
+
<MainButton label="Custom Button" size="lg" colorType="positive" buttonType="secondary" leftSlot={<Icon />} buttonStyle={{ borderRadius: '8px' }} />
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
## 🔧 TypeScript Support
|
|
105
|
+
|
|
106
|
+
Full TypeScript support with comprehensive type definitions:
|
|
107
|
+
|
|
108
|
+
```tsx
|
|
109
|
+
import { FormInputProps, TableProps, DropdownItemType, ColumnType } from 'master-components-react-ts'
|
|
110
|
+
|
|
111
|
+
interface MyComponentProps {
|
|
112
|
+
inputProps: FormInputProps
|
|
113
|
+
tableData: ColumnType[]
|
|
114
|
+
}
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
## 📋 Component Examples
|
|
118
|
+
|
|
119
|
+
### Advanced Table with Actions
|
|
120
|
+
|
|
121
|
+
```tsx
|
|
122
|
+
import { Table, ColumnType } from 'master-components-react-ts'
|
|
123
|
+
|
|
124
|
+
const columns: ColumnType[] = [
|
|
125
|
+
{ key: 'name', label: 'Name', visible: true },
|
|
126
|
+
{ key: 'email', label: 'Email', visible: true },
|
|
127
|
+
{
|
|
128
|
+
key: 'status',
|
|
129
|
+
label: 'Status',
|
|
130
|
+
visible: true,
|
|
131
|
+
render: (row) => (
|
|
132
|
+
<span className={`status-${row.status}`}>
|
|
133
|
+
{row.status}
|
|
134
|
+
</span>
|
|
135
|
+
)
|
|
136
|
+
}
|
|
137
|
+
]
|
|
138
|
+
|
|
139
|
+
<Table
|
|
140
|
+
uniqueKey="id"
|
|
141
|
+
columns={columns}
|
|
142
|
+
data={userData}
|
|
143
|
+
withSortIcons
|
|
144
|
+
showPagination
|
|
145
|
+
withSelectAll
|
|
146
|
+
actionButtons={[
|
|
147
|
+
{ text: 'Delete', onClick: handleDelete },
|
|
148
|
+
{ text: 'Edit', onClick: handleEdit }
|
|
149
|
+
]}
|
|
150
|
+
onRowClick={handleRowClick}
|
|
151
|
+
/>
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
### Form with Validation
|
|
155
|
+
|
|
156
|
+
```tsx
|
|
157
|
+
import { FormInput, MainButton, Checkbox } from 'master-components-react-ts'
|
|
158
|
+
|
|
159
|
+
<FormInput
|
|
160
|
+
label="Email Address"
|
|
161
|
+
placeholder="Enter your email"
|
|
162
|
+
type="email"
|
|
163
|
+
required
|
|
164
|
+
helperText="We'll never share your email"
|
|
165
|
+
inputState={{ error: hasError }}
|
|
166
|
+
onChange={setEmail}
|
|
167
|
+
/>
|
|
168
|
+
|
|
169
|
+
<Checkbox
|
|
170
|
+
checked={agreeToTerms}
|
|
171
|
+
change={setAgreeToTerms}
|
|
172
|
+
label="I agree to the terms and conditions"
|
|
173
|
+
/>
|
|
174
|
+
|
|
175
|
+
<MainButton
|
|
176
|
+
label="Submit"
|
|
177
|
+
buttonType="primary"
|
|
178
|
+
loading={isSubmitting}
|
|
179
|
+
disabled={!isFormValid}
|
|
180
|
+
onClick={handleSubmit}
|
|
181
|
+
/>
|
|
182
|
+
```
|
|
183
|
+
|
|
184
|
+
### Advanced Dropdown with Search
|
|
185
|
+
|
|
186
|
+
```tsx
|
|
187
|
+
import { Dropdown, DropdownItemType } from 'master-components-react-ts'
|
|
188
|
+
|
|
189
|
+
const countryData: DropdownItemType[] = [
|
|
190
|
+
{ id: 1, label: 'United States' },
|
|
191
|
+
{ id: 2, label: 'Canada' },
|
|
192
|
+
{ id: 3, label: 'United Kingdom' }
|
|
193
|
+
]
|
|
194
|
+
|
|
195
|
+
<Dropdown
|
|
196
|
+
label="Select Country"
|
|
197
|
+
placeholder="Choose a country"
|
|
198
|
+
data={countryData}
|
|
199
|
+
withInput
|
|
200
|
+
withMultiselect
|
|
201
|
+
withApply
|
|
202
|
+
onSelect={handleCountrySelect}
|
|
203
|
+
onApply={handleApply}
|
|
204
|
+
/>
|
|
205
|
+
```
|
|
206
|
+
|
|
207
|
+
## 🎯 Key Features
|
|
208
|
+
|
|
209
|
+
### Table Component
|
|
210
|
+
|
|
211
|
+
- **Sorting** - Click headers to sort data
|
|
212
|
+
- **Pagination** - Numbered and simple pagination styles
|
|
213
|
+
- **Row Selection** - Single and multi-row selection
|
|
214
|
+
- **Row Actions** - Custom actions per row
|
|
215
|
+
- **Column Configuration** - Show/hide and reorder columns
|
|
216
|
+
- **Custom Rendering** - Render custom content in cells
|
|
217
|
+
- **Tooltips** - Row-level tooltips for additional information
|
|
218
|
+
|
|
219
|
+
### Form Components
|
|
220
|
+
|
|
221
|
+
- **Validation States** - Error, success, and loading states
|
|
222
|
+
- **Custom Slots** - Left, right, and helper slots for icons/content
|
|
223
|
+
- **Multiple Input Types** - Text, email, password, number, etc.
|
|
224
|
+
- **Accessibility** - Full keyboard navigation and screen reader support
|
|
225
|
+
|
|
226
|
+
### Styling System
|
|
227
|
+
|
|
228
|
+
- **SCSS Modules** - Scoped styling to prevent conflicts
|
|
229
|
+
- **CSS Custom Properties** - Easy theme customization
|
|
230
|
+
- **Responsive Design** - Mobile-first responsive components
|
|
231
|
+
- **Dark Mode Ready** - Components support dark theme variants
|
|
232
|
+
|
|
233
|
+
## 🔄 Migration Guide
|
|
234
|
+
|
|
235
|
+
If you're upgrading from a previous version, check the [migration guide](https://components.nebi.com/migration) on our documentation site.
|
|
236
|
+
|
|
237
|
+
## 🤝 Contributing
|
|
238
|
+
|
|
239
|
+
We welcome contributions! Please see our [contributing guidelines](https://components.nebi.com/contributing) for details.
|
|
240
|
+
|
|
241
|
+
## 📄 License
|
|
242
|
+
|
|
243
|
+
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
|
244
|
+
|
|
245
|
+
## 🆘 Support
|
|
246
|
+
|
|
247
|
+
- **Documentation**: [components.nebi.com](https://components.nebi.com)
|
|
248
|
+
- **Issues**: Report bugs and request features on our documentation site
|
|
249
|
+
- **Community**: Join our community discussions
|
|
250
|
+
|
|
251
|
+
---
|
|
252
|
+
|
|
253
|
+
Built with ❤️ for the React community. For the latest updates and announcements, visit [components.nebi.com](https://components.nebi.com).
|
package/dist/index.js
CHANGED
|
@@ -3574,7 +3574,7 @@ xt.propKeys = [
|
|
|
3574
3574
|
"dropdownPillTextStyle",
|
|
3575
3575
|
"onClick"
|
|
3576
3576
|
];
|
|
3577
|
-
xt.displayName = "
|
|
3577
|
+
xt.displayName = "Dropdown Pill";
|
|
3578
3578
|
xt.description = "A dropdown pill component with multiple styles and orientations for organizing content sections.";
|
|
3579
3579
|
export {
|
|
3580
3580
|
yt as ActionDropdown,
|