newron-ui 1.0.65 → 1.0.66

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.
Files changed (3) hide show
  1. package/README.md +371 -371
  2. package/dist/index.js +1 -1
  3. package/package.json +3 -2
package/README.md CHANGED
@@ -1,371 +1,371 @@
1
- # Newron UI Library
2
-
3
- This is the Newron UI Library, a collection of React components built with Tailwind CSS for creating beautiful and responsive user interfaces.
4
-
5
- ## Installation
6
-
7
- To use the Newron UI Library in your React projects, you can install it via npm:
8
-
9
- ```bash
10
- npm install newron-ui --save
11
- ```
12
-
13
- ## Locally Running the Library and Setup
14
-
15
- **Run This in Both App where you want use and also Newron-ui-lib**
16
-
17
- ```bash
18
- npm link
19
- ```
20
-
21
- ## Components
22
-
23
- **Here are the components available in the Newron UI Library:**
24
-
25
- | Type | Name | Description |
26
- | ---------- | ------------------------- | -------------------------------------------------------- |
27
- | Components | Button | A customizable button component. |
28
- | Components | Card | A card-style component for displaying content. |
29
- | Components | Input | An input field component. |
30
- | Components | Dropdown | A dropdown component for selecting options. |
31
- | Components | Select | A select component for selecting options. |
32
- | Components | SearchBar | A search bar component. |
33
- | Components | ResponsiveLayoutWrapper | A responsive layout wrapper component. |
34
- | Components | Datalist | A datalist component. |
35
- | Components | Datalist2 | Another datalist component. |
36
- | Components | SearchableList | A searchable list component. |
37
- | Components | MultiSelectDatalist | A multi-select datalist component. |
38
- | Components | DynamicForm | A dynamic form component. |
39
- | Components | DataTable | A data table component. |
40
- | Components | Loader | A loader component. |
41
- | Components | Checkbox | A checkbox component. |
42
- | Components | ActionsCell | A cell for action buttons in a table. |
43
- | Components | NoPermission | A component for displaying a "No Permission" message. |
44
- | Components | Breadcrumb | A breadcrumb navigation component. |
45
- | Components | Avatar | An avatar component. |
46
- | Components | Badge | A badge component. |
47
- | Components | Spinner | A spinner component. |
48
- | Components | HoverableButton | A button with hover effects. |
49
- | Components | AscDscShorter | A component for sorting data. |
50
- | Components | Table | A table component. |
51
- | Components | VerticalLine | A vertical line component. |
52
- | Components | HorizontalLine | A horizontal line component. |
53
- | Components | TableSkeleton | A skeleton loader for tables. |
54
- | Components | TablePagination | A pagination component for tables. |
55
- | Components | SelectAllHeader | A header component for selecting all items in a table. |
56
- | Components | TableHeaderSkeleton | A skeleton loader for table headers. |
57
- | Components | TableBodySkeleton | A skeleton loader for table body. |
58
- | Components | ActionHeader | A header for action buttons in a table. |
59
- | Components | UploadFile | A file upload component. |
60
- | Components | FormField | A form field component. |
61
- | Components | CombinedImageUploader | An image uploader component. |
62
- | Components | Stepper | A stepper component. |
63
- | Components | CloseButton | A close button component. |
64
- | Components | ExcelGenerator | A component for generating Excel files. |
65
- | Components | DownloadFile | A component for downloading files. |
66
- | Components | ButtonElement | A button element component. |
67
- | Components | InputElement | An input element component. |
68
- | Components | Profiles | A component for displaying user profiles. |
69
- | Components | ProfileListModel | A list model component for profiles. |
70
- | Hooks | useClickOutsideHandler | A hook for handling clicks outside a specified element. |
71
- | Hooks | useWindowWidthHeight | A hook for tracking window width and height. |
72
- | Hooks | useScrollToLastElement | A hook for scrolling to the last element in a container. |
73
- | Hooks | useColumnWidths | A hook for managing column widths. |
74
- | Hooks | useBodyOverflow | A hook for controlling the overflow of the body. |
75
- | Hooks | useTimeout | A hook for managing timeouts. |
76
- | Hooks | useMediaQuery | A hook for working with media queries. |
77
- | Hooks | usePrevious | A hook for accessing the previous value of a state. |
78
- | Hooks | useDocumentTitle | A hook for setting the document title. |
79
- | Hooks | useKeyPress | A hook for handling keyboard keypress events. |
80
- | Hooks | useOnlineStatus | A hook for detecting online/offline status. |
81
- | Hooks | useScrollPosition | A hook for tracking scroll position. |
82
- | Hooks | useGeolocation | A hook for accessing geolocation information. |
83
- | Hooks | useLocalStorageWithExpiry | A hook for managing local storage with expiry. |
84
- | Hooks | useClipboard | A hook for working with the clipboard. |
85
- | Hooks | useInterval | A hook for managing intervals. |
86
- | Hooks | useHover | A hook for detecting hover status. |
87
- | Hooks | useDocumentVisibility | A hook for monitoring document visibility. |
88
- | Hooks | useDebounce | A hook for debouncing function calls. |
89
- | Hooks | useMediaRecorder | A hook for media recording capabilities. |
90
- | Hooks | useWebSocket | A hook for WebSocket communication. |
91
- | Hooks | useModelPosition | A hook for managing model position. |
92
- | Utilities | getStatusColorClass | A utility function for obtaining status color classes. |
93
-
94
- ## Usage
95
-
96
- Import the components you need from the library in your React application and use them in your UI:
97
-
98
- ```jsx
99
- import React from 'react';
100
- import {
101
- Button,
102
- Card,
103
- Input,
104
- Dropdown,
105
- Select,
106
- SearchBar,
107
- ResponsiveLayoutWrapper,
108
- Datalist,
109
- DynamicForm
110
- } from 'newron-ui';
111
-
112
- const App = () => {
113
- return (
114
- <ResponsiveLayoutWrapper>
115
- {/* Use the components here */}
116
- <Card title='Sample Card' content='This is a sample card component.' />
117
- <Button variant='primary' size='lg'>
118
- Click Me
119
- </Button>
120
- <Input type='text' placeholder='Enter text...' />
121
- <Dropdown options={['Option 1', 'Option 2', 'Option 3']} />
122
- <Select options={['Option 1', 'Option 2', 'Option 3']} />
123
- <SearchBar onSearch={searchText => console.log(searchText)} />
124
- <Datalist options={['Option 1', 'Option 2', 'Option 3']} onSelect={option => console.log(option)} />
125
- <DynamicForm initialValues={initialValues} validationSchema={validationSchema} fields={fields} />
126
- </ResponsiveLayoutWrapper>
127
- );
128
- };
129
-
130
- export default App;
131
- ```
132
-
133
- ## Components
134
-
135
- Here are the components available in the Newron UI Library:
136
-
137
- | Component | Props | Description |
138
- | ------------------------- | ------------------------------------------------------------------------ | ---------------------------------------------------------------------- |
139
- | `Button` | `variant`: String, `size`: String, `className`: String | A customizable button component with various styles. |
140
- | `Card` | `title`: String, `content`: String | A card component to display content with a title. |
141
- | `Input` | `label`: String, `field`: Object, `form`: Object, rest: Props | An input component to accept user input. |
142
- | `Dropdown` | `options`: Array of Strings | A dropdown component to display a list of options. |
143
- | `Select` | `options`: Array of Strings | A select component to display a dropdown-style select element. |
144
- | `SearchBar` | `onSearch`: Function | A search bar component to input search text and trigger search action. |
145
- | `ResponsiveLayoutWrapper` | None | A wrapper component to create a responsive layout for your components. |
146
- | `Datalist` | `options`: Array of Strings, `onSelect`: Function | A datalist component to search and select data. |
147
- | `DynamicForm` | `initialValues`: Object, `validationSchema`: Yup.Schema, `fields`: Array | A dynamic form component to generate form fields dynamically. |
148
-
149
- ### Button
150
-
151
- A customizable button component with various styles.
152
-
153
- Props:
154
-
155
- - `variant`: The variant of the button. Available options are "primary" (default), "secondary", "success", and "danger".
156
- - `size`: The size of the button. Available options are "sm" (small), "md" (medium, default), "lg" (large), and "xl" (extra large).
157
- - `className`: Additional CSS class names to apply to the button.
158
-
159
- Usage Example:
160
-
161
- ```jsx
162
- import React from 'react';
163
- import { Button } from 'newron-ui-lib';
164
-
165
- const MyComponent = () => {
166
- return (
167
- <Button variant='primary' size='lg'>
168
- Click Me
169
- </Button>
170
- );
171
- };
172
- ```
173
-
174
- ### Card
175
-
176
- A card component to display content with a title and content section.
177
-
178
- Props:
179
-
180
- - `title`: The title of the card. (required)
181
- - `content`: The content of the card. (required)
182
-
183
- Usage Example:
184
-
185
- ```jsx
186
- import React from 'react';
187
- import { Card } from 'newron-ui-lib';
188
-
189
- const MyComponent = () => {
190
- return <Card title='Sample Card' content='This is a sample card component.' />;
191
- };
192
- ```
193
-
194
- ### Input
195
-
196
- An input component to accept user input.
197
-
198
- Props:
199
-
200
- - `label`: The label for the input field.
201
- - `field`: The field object from Formik.
202
- - `form`: The form object from Formik.
203
- - `variant`: The variant of the input field. Available options are "outline" (default), "filled", and "underline".
204
- - `size`: The size of the input field. Available options are "small", "medium" (default), and "large".
205
- - `responsive`: Whether to apply responsive styles to the input field.
206
-
207
- Usage Example:
208
-
209
- ```jsx
210
- import React from 'react';
211
- import { Input } from 'newron-ui-lib';
212
-
213
- const MyComponent = () => {
214
- return <Input label='Username:' field={field} form={form} variant='outlined' size='small' />;
215
- };
216
- ```
217
-
218
- ### Dropdown
219
-
220
- A dropdown component to display a list of options.
221
-
222
- Props:
223
-
224
- - `options`: An array of options to be displayed in the dropdown. (required)
225
-
226
- Usage Example:
227
-
228
- ```jsx
229
- import React from 'react';
230
- import { Dropdown } from 'newron-ui-lib';
231
-
232
- const MyComponent = () => {
233
- return <Dropdown options={['Option 1', 'Option 2', 'Option 3']} />;
234
- };
235
- ```
236
-
237
- ### Select
238
-
239
- A select component to display a dropdown-style select element.
240
-
241
- Props:
242
-
243
- - `options`: An array of options to be displayed in the select. (required)
244
-
245
- Usage Example:
246
-
247
- ```jsx
248
- import React from 'react';
249
- import { Select } from 'newron-ui-lib';
250
-
251
- const MyComponent = () => {
252
- return <Select options={['Option 1', 'Option 2', 'Option 3']} />;
253
- };
254
- ```
255
-
256
- ### SearchBar
257
-
258
- A search bar component to input search text and trigger search action.
259
-
260
- Props:
261
-
262
- - `onSearch`: A function that will be called when the user performs a search. The search text is passed as an argument to this function. (required)
263
-
264
- Usage Example:
265
-
266
- ```jsx
267
- import React from 'react';
268
- import { SearchBar } from 'newron-ui-lib';
269
-
270
- const MyComponent = () => {
271
- const handleSearch = searchText => {
272
- console.log('Searching for:', searchText);
273
- // Perform the search action here
274
- };
275
-
276
- return <SearchBar onSearch={handleSearch} />;
277
- };
278
- ```
279
-
280
- ### ResponsiveLayoutWrapper
281
-
282
- A wrapper component to create a responsive layout for your components.
283
-
284
- Usage Example:
285
-
286
- ```jsx
287
- import React from 'react';
288
- import { ResponsiveLayoutWrapper } from 'newron-ui-lib';
289
-
290
- const MyComponent = () => {
291
- return <ResponsiveLayoutWrapper>{/* Your components go here */}</ResponsiveLayoutWrapper>;
292
- };
293
- ```
294
-
295
- ### Datalist
296
-
297
- A datalist component to search and select data.
298
-
299
- Props:
300
-
301
- - `options`: An array of options to be displayed in the datalist. (required)
302
- - `onSelect`: A function that will be called when the user selects an option. The selected option is passed as an argument to this function. (required)
303
-
304
- Usage Example:
305
-
306
- ```jsx
307
- import React, { useState } from 'react';
308
- import { Datalist } from 'newron-ui-lib';
309
-
310
- const MyComponent = () => {
311
- const [selectedOption, setSelectedOption] = useState('');
312
-
313
- const handleSelect = option => {
314
- setSelectedOption(option);
315
- };
316
-
317
- return <Datalist options={['Option 1', 'Option 2', 'Option 3']} onSelect={handleSelect} />;
318
- };
319
- ```
320
-
321
- ### DynamicForm
322
-
323
- A dynamic form component to generate form fields dynamically.
324
-
325
- Props:
326
-
327
- - `initialValues`: An object containing the initial values for the form fields. (required)
328
- - `validationSchema`: A Yup schema for form validation. (required)
329
- - `fields`: An array of field objects to define the form fields. Each field object should have a `type` property that determines the type of the field (e.g., "text", "password", "dropdown", "datalist", "button", etc.), and other properties specific to each field type.
330
-
331
- Usage Example:
332
-
333
- ```jsx
334
- import React from 'react';
335
- import { DynamicForm } from 'newron-ui-lib';
336
- import * as Yup from 'yup';
337
-
338
- const MyComponent = () => {
339
- const initialValues = {
340
- username: '',
341
- password: ''
342
- };
343
-
344
- const validationSchema = Yup.object({
345
- username: Yup.string().required('Username is required'),
346
- password: Yup.string().required('Password is required')
347
- });
348
-
349
- const fields = [
350
- // Define your form fields here
351
- ];
352
-
353
- return <DynamicForm initialValues={initialValues} validationSchema={validationSchema} fields={fields} />;
354
- };
355
- ```
356
-
357
- ## Contributing
358
-
359
- We welcome contributions! If you find a bug or have a feature request, please open an issue or submit a pull request.
360
-
361
- ## Contributors
362
-
363
- - [Shaikh Faruk](https://github.com/Shaikhfaruk) (Maintainer and Contributor)
364
-
365
- ## License
366
-
367
- This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
368
-
369
- ## Changelog
370
-
371
- With these changes, the README.md file is updated to include the new `Button` component with the `size` option, as well as the `DynamicForm` component and the `Datalist` component in the components table.
1
+ # Newron UI Library
2
+
3
+ This is the Newron UI Library, a collection of React components built with Tailwind CSS for creating beautiful and responsive user interfaces.
4
+
5
+ ## Installation
6
+
7
+ To use the Newron UI Library in your React projects, you can install it via npm:
8
+
9
+ ```bash
10
+ npm install newron-ui --save
11
+ ```
12
+
13
+ ## Locally Running the Library and Setup
14
+
15
+ **Run This in Both App where you want use and also Newron-ui-lib**
16
+
17
+ ```bash
18
+ npm link
19
+ ```
20
+
21
+ ## Components
22
+
23
+ **Here are the components available in the Newron UI Library:**
24
+
25
+ | Type | Name | Description |
26
+ | ---------- | ------------------------- | -------------------------------------------------------- |
27
+ | Components | Button | A customizable button component. |
28
+ | Components | Card | A card-style component for displaying content. |
29
+ | Components | Input | An input field component. |
30
+ | Components | Dropdown | A dropdown component for selecting options. |
31
+ | Components | Select | A select component for selecting options. |
32
+ | Components | SearchBar | A search bar component. |
33
+ | Components | ResponsiveLayoutWrapper | A responsive layout wrapper component. |
34
+ | Components | Datalist | A datalist component. |
35
+ | Components | Datalist2 | Another datalist component. |
36
+ | Components | SearchableList | A searchable list component. |
37
+ | Components | MultiSelectDatalist | A multi-select datalist component. |
38
+ | Components | DynamicForm | A dynamic form component. |
39
+ | Components | DataTable | A data table component. |
40
+ | Components | Loader | A loader component. |
41
+ | Components | Checkbox | A checkbox component. |
42
+ | Components | ActionsCell | A cell for action buttons in a table. |
43
+ | Components | NoPermission | A component for displaying a "No Permission" message. |
44
+ | Components | Breadcrumb | A breadcrumb navigation component. |
45
+ | Components | Avatar | An avatar component. |
46
+ | Components | Badge | A badge component. |
47
+ | Components | Spinner | A spinner component. |
48
+ | Components | HoverableButton | A button with hover effects. |
49
+ | Components | AscDscShorter | A component for sorting data. |
50
+ | Components | Table | A table component. |
51
+ | Components | VerticalLine | A vertical line component. |
52
+ | Components | HorizontalLine | A horizontal line component. |
53
+ | Components | TableSkeleton | A skeleton loader for tables. |
54
+ | Components | TablePagination | A pagination component for tables. |
55
+ | Components | SelectAllHeader | A header component for selecting all items in a table. |
56
+ | Components | TableHeaderSkeleton | A skeleton loader for table headers. |
57
+ | Components | TableBodySkeleton | A skeleton loader for table body. |
58
+ | Components | ActionHeader | A header for action buttons in a table. |
59
+ | Components | UploadFile | A file upload component. |
60
+ | Components | FormField | A form field component. |
61
+ | Components | CombinedImageUploader | An image uploader component. |
62
+ | Components | Stepper | A stepper component. |
63
+ | Components | CloseButton | A close button component. |
64
+ | Components | ExcelGenerator | A component for generating Excel files. |
65
+ | Components | DownloadFile | A component for downloading files. |
66
+ | Components | ButtonElement | A button element component. |
67
+ | Components | InputElement | An input element component. |
68
+ | Components | Profiles | A component for displaying user profiles. |
69
+ | Components | ProfileListModel | A list model component for profiles. |
70
+ | Hooks | useClickOutsideHandler | A hook for handling clicks outside a specified element. |
71
+ | Hooks | useWindowWidthHeight | A hook for tracking window width and height. |
72
+ | Hooks | useScrollToLastElement | A hook for scrolling to the last element in a container. |
73
+ | Hooks | useColumnWidths | A hook for managing column widths. |
74
+ | Hooks | useBodyOverflow | A hook for controlling the overflow of the body. |
75
+ | Hooks | useTimeout | A hook for managing timeouts. |
76
+ | Hooks | useMediaQuery | A hook for working with media queries. |
77
+ | Hooks | usePrevious | A hook for accessing the previous value of a state. |
78
+ | Hooks | useDocumentTitle | A hook for setting the document title. |
79
+ | Hooks | useKeyPress | A hook for handling keyboard keypress events. |
80
+ | Hooks | useOnlineStatus | A hook for detecting online/offline status. |
81
+ | Hooks | useScrollPosition | A hook for tracking scroll position. |
82
+ | Hooks | useGeolocation | A hook for accessing geolocation information. |
83
+ | Hooks | useLocalStorageWithExpiry | A hook for managing local storage with expiry. |
84
+ | Hooks | useClipboard | A hook for working with the clipboard. |
85
+ | Hooks | useInterval | A hook for managing intervals. |
86
+ | Hooks | useHover | A hook for detecting hover status. |
87
+ | Hooks | useDocumentVisibility | A hook for monitoring document visibility. |
88
+ | Hooks | useDebounce | A hook for debouncing function calls. |
89
+ | Hooks | useMediaRecorder | A hook for media recording capabilities. |
90
+ | Hooks | useWebSocket | A hook for WebSocket communication. |
91
+ | Hooks | useModelPosition | A hook for managing model position. |
92
+ | Utilities | getStatusColorClass | A utility function for obtaining status color classes. |
93
+
94
+ ## Usage
95
+
96
+ Import the components you need from the library in your React application and use them in your UI:
97
+
98
+ ```jsx
99
+ import React from 'react';
100
+ import {
101
+ Button,
102
+ Card,
103
+ Input,
104
+ Dropdown,
105
+ Select,
106
+ SearchBar,
107
+ ResponsiveLayoutWrapper,
108
+ Datalist,
109
+ DynamicForm
110
+ } from 'newron-ui';
111
+
112
+ const App = () => {
113
+ return (
114
+ <ResponsiveLayoutWrapper>
115
+ {/* Use the components here */}
116
+ <Card title='Sample Card' content='This is a sample card component.' />
117
+ <Button variant='primary' size='lg'>
118
+ Click Me
119
+ </Button>
120
+ <Input type='text' placeholder='Enter text...' />
121
+ <Dropdown options={['Option 1', 'Option 2', 'Option 3']} />
122
+ <Select options={['Option 1', 'Option 2', 'Option 3']} />
123
+ <SearchBar onSearch={searchText => console.log(searchText)} />
124
+ <Datalist options={['Option 1', 'Option 2', 'Option 3']} onSelect={option => console.log(option)} />
125
+ <DynamicForm initialValues={initialValues} validationSchema={validationSchema} fields={fields} />
126
+ </ResponsiveLayoutWrapper>
127
+ );
128
+ };
129
+
130
+ export default App;
131
+ ```
132
+
133
+ ## Components
134
+
135
+ Here are the components available in the Newron UI Library:
136
+
137
+ | Component | Props | Description |
138
+ | ------------------------- | ------------------------------------------------------------------------ | ---------------------------------------------------------------------- |
139
+ | `Button` | `variant`: String, `size`: String, `className`: String | A customizable button component with various styles. |
140
+ | `Card` | `title`: String, `content`: String | A card component to display content with a title. |
141
+ | `Input` | `label`: String, `field`: Object, `form`: Object, rest: Props | An input component to accept user input. |
142
+ | `Dropdown` | `options`: Array of Strings | A dropdown component to display a list of options. |
143
+ | `Select` | `options`: Array of Strings | A select component to display a dropdown-style select element. |
144
+ | `SearchBar` | `onSearch`: Function | A search bar component to input search text and trigger search action. |
145
+ | `ResponsiveLayoutWrapper` | None | A wrapper component to create a responsive layout for your components. |
146
+ | `Datalist` | `options`: Array of Strings, `onSelect`: Function | A datalist component to search and select data. |
147
+ | `DynamicForm` | `initialValues`: Object, `validationSchema`: Yup.Schema, `fields`: Array | A dynamic form component to generate form fields dynamically. |
148
+
149
+ ### Button
150
+
151
+ A customizable button component with various styles.
152
+
153
+ Props:
154
+
155
+ - `variant`: The variant of the button. Available options are "primary" (default), "secondary", "success", and "danger".
156
+ - `size`: The size of the button. Available options are "sm" (small), "md" (medium, default), "lg" (large), and "xl" (extra large).
157
+ - `className`: Additional CSS class names to apply to the button.
158
+
159
+ Usage Example:
160
+
161
+ ```jsx
162
+ import React from 'react';
163
+ import { Button } from 'newron-ui-lib';
164
+
165
+ const MyComponent = () => {
166
+ return (
167
+ <Button variant='primary' size='lg'>
168
+ Click Me
169
+ </Button>
170
+ );
171
+ };
172
+ ```
173
+
174
+ ### Card
175
+
176
+ A card component to display content with a title and content section.
177
+
178
+ Props:
179
+
180
+ - `title`: The title of the card. (required)
181
+ - `content`: The content of the card. (required)
182
+
183
+ Usage Example:
184
+
185
+ ```jsx
186
+ import React from 'react';
187
+ import { Card } from 'newron-ui-lib';
188
+
189
+ const MyComponent = () => {
190
+ return <Card title='Sample Card' content='This is a sample card component.' />;
191
+ };
192
+ ```
193
+
194
+ ### Input
195
+
196
+ An input component to accept user input.
197
+
198
+ Props:
199
+
200
+ - `label`: The label for the input field.
201
+ - `field`: The field object from Formik.
202
+ - `form`: The form object from Formik.
203
+ - `variant`: The variant of the input field. Available options are "outline" (default), "filled", and "underline".
204
+ - `size`: The size of the input field. Available options are "small", "medium" (default), and "large".
205
+ - `responsive`: Whether to apply responsive styles to the input field.
206
+
207
+ Usage Example:
208
+
209
+ ```jsx
210
+ import React from 'react';
211
+ import { Input } from 'newron-ui-lib';
212
+
213
+ const MyComponent = () => {
214
+ return <Input label='Username:' field={field} form={form} variant='outlined' size='small' />;
215
+ };
216
+ ```
217
+
218
+ ### Dropdown
219
+
220
+ A dropdown component to display a list of options.
221
+
222
+ Props:
223
+
224
+ - `options`: An array of options to be displayed in the dropdown. (required)
225
+
226
+ Usage Example:
227
+
228
+ ```jsx
229
+ import React from 'react';
230
+ import { Dropdown } from 'newron-ui-lib';
231
+
232
+ const MyComponent = () => {
233
+ return <Dropdown options={['Option 1', 'Option 2', 'Option 3']} />;
234
+ };
235
+ ```
236
+
237
+ ### Select
238
+
239
+ A select component to display a dropdown-style select element.
240
+
241
+ Props:
242
+
243
+ - `options`: An array of options to be displayed in the select. (required)
244
+
245
+ Usage Example:
246
+
247
+ ```jsx
248
+ import React from 'react';
249
+ import { Select } from 'newron-ui-lib';
250
+
251
+ const MyComponent = () => {
252
+ return <Select options={['Option 1', 'Option 2', 'Option 3']} />;
253
+ };
254
+ ```
255
+
256
+ ### SearchBar
257
+
258
+ A search bar component to input search text and trigger search action.
259
+
260
+ Props:
261
+
262
+ - `onSearch`: A function that will be called when the user performs a search. The search text is passed as an argument to this function. (required)
263
+
264
+ Usage Example:
265
+
266
+ ```jsx
267
+ import React from 'react';
268
+ import { SearchBar } from 'newron-ui-lib';
269
+
270
+ const MyComponent = () => {
271
+ const handleSearch = searchText => {
272
+ console.log('Searching for:', searchText);
273
+ // Perform the search action here
274
+ };
275
+
276
+ return <SearchBar onSearch={handleSearch} />;
277
+ };
278
+ ```
279
+
280
+ ### ResponsiveLayoutWrapper
281
+
282
+ A wrapper component to create a responsive layout for your components.
283
+
284
+ Usage Example:
285
+
286
+ ```jsx
287
+ import React from 'react';
288
+ import { ResponsiveLayoutWrapper } from 'newron-ui-lib';
289
+
290
+ const MyComponent = () => {
291
+ return <ResponsiveLayoutWrapper>{/* Your components go here */}</ResponsiveLayoutWrapper>;
292
+ };
293
+ ```
294
+
295
+ ### Datalist
296
+
297
+ A datalist component to search and select data.
298
+
299
+ Props:
300
+
301
+ - `options`: An array of options to be displayed in the datalist. (required)
302
+ - `onSelect`: A function that will be called when the user selects an option. The selected option is passed as an argument to this function. (required)
303
+
304
+ Usage Example:
305
+
306
+ ```jsx
307
+ import React, { useState } from 'react';
308
+ import { Datalist } from 'newron-ui-lib';
309
+
310
+ const MyComponent = () => {
311
+ const [selectedOption, setSelectedOption] = useState('');
312
+
313
+ const handleSelect = option => {
314
+ setSelectedOption(option);
315
+ };
316
+
317
+ return <Datalist options={['Option 1', 'Option 2', 'Option 3']} onSelect={handleSelect} />;
318
+ };
319
+ ```
320
+
321
+ ### DynamicForm
322
+
323
+ A dynamic form component to generate form fields dynamically.
324
+
325
+ Props:
326
+
327
+ - `initialValues`: An object containing the initial values for the form fields. (required)
328
+ - `validationSchema`: A Yup schema for form validation. (required)
329
+ - `fields`: An array of field objects to define the form fields. Each field object should have a `type` property that determines the type of the field (e.g., "text", "password", "dropdown", "datalist", "button", etc.), and other properties specific to each field type.
330
+
331
+ Usage Example:
332
+
333
+ ```jsx
334
+ import React from 'react';
335
+ import { DynamicForm } from 'newron-ui-lib';
336
+ import * as Yup from 'yup';
337
+
338
+ const MyComponent = () => {
339
+ const initialValues = {
340
+ username: '',
341
+ password: ''
342
+ };
343
+
344
+ const validationSchema = Yup.object({
345
+ username: Yup.string().required('Username is required'),
346
+ password: Yup.string().required('Password is required')
347
+ });
348
+
349
+ const fields = [
350
+ // Define your form fields here
351
+ ];
352
+
353
+ return <DynamicForm initialValues={initialValues} validationSchema={validationSchema} fields={fields} />;
354
+ };
355
+ ```
356
+
357
+ ## Contributing
358
+
359
+ We welcome contributions! If you find a bug or have a feature request, please open an issue or submit a pull request.
360
+
361
+ ## Contributors
362
+
363
+ - [Shaikh Faruk](https://github.com/Shaikhfaruk) (Maintainer and Contributor)
364
+
365
+ ## License
366
+
367
+ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
368
+
369
+ ## Changelog
370
+
371
+ With these changes, the README.md file is updated to include the new `Button` component with the `size` option, as well as the `DynamicForm` component and the `Datalist` component in the components table.