newron-ui 1.0.117 → 1.0.118
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 +79 -47
- package/package.json +1 -1
- /package/dist/{styles.css → newron.css} +0 -0
package/README.md
CHANGED
|
@@ -12,7 +12,7 @@ npm install newron-ui --save
|
|
|
12
12
|
|
|
13
13
|
## Locally Running the Library and Setup
|
|
14
14
|
|
|
15
|
-
**Run This in Both App where you want use and also Newron-ui
|
|
15
|
+
**Run This in Both App where you want use and also Newron-ui**
|
|
16
16
|
|
|
17
17
|
```bash
|
|
18
18
|
npm link
|
|
@@ -96,7 +96,7 @@ npm link
|
|
|
96
96
|
Import the components you need from the library in your React application and use them in your UI:
|
|
97
97
|
|
|
98
98
|
```jsx
|
|
99
|
-
import React from
|
|
99
|
+
import React from "react";
|
|
100
100
|
import {
|
|
101
101
|
Button,
|
|
102
102
|
Card,
|
|
@@ -106,23 +106,30 @@ import {
|
|
|
106
106
|
SearchBar,
|
|
107
107
|
ResponsiveLayoutWrapper,
|
|
108
108
|
Datalist,
|
|
109
|
-
DynamicForm
|
|
110
|
-
} from
|
|
109
|
+
DynamicForm,
|
|
110
|
+
} from "newron-ui";
|
|
111
111
|
|
|
112
112
|
const App = () => {
|
|
113
113
|
return (
|
|
114
114
|
<ResponsiveLayoutWrapper>
|
|
115
115
|
{/* Use the components here */}
|
|
116
|
-
<Card title=
|
|
117
|
-
<Button variant=
|
|
116
|
+
<Card title="Sample Card" content="This is a sample card component." />
|
|
117
|
+
<Button variant="primary" size="lg">
|
|
118
118
|
Click Me
|
|
119
119
|
</Button>
|
|
120
|
-
<Input type=
|
|
121
|
-
<Dropdown options={[
|
|
122
|
-
<Select options={[
|
|
123
|
-
<SearchBar onSearch={searchText => console.log(searchText)} />
|
|
124
|
-
<Datalist
|
|
125
|
-
|
|
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
|
|
125
|
+
options={["Option 1", "Option 2", "Option 3"]}
|
|
126
|
+
onSelect={(option) => console.log(option)}
|
|
127
|
+
/>
|
|
128
|
+
<DynamicForm
|
|
129
|
+
initialValues={initialValues}
|
|
130
|
+
validationSchema={validationSchema}
|
|
131
|
+
fields={fields}
|
|
132
|
+
/>
|
|
126
133
|
</ResponsiveLayoutWrapper>
|
|
127
134
|
);
|
|
128
135
|
};
|
|
@@ -159,12 +166,12 @@ Props:
|
|
|
159
166
|
Usage Example:
|
|
160
167
|
|
|
161
168
|
```jsx
|
|
162
|
-
import React from
|
|
163
|
-
import { Button } from
|
|
169
|
+
import React from "react";
|
|
170
|
+
import { Button } from "newron-ui-lib";
|
|
164
171
|
|
|
165
172
|
const MyComponent = () => {
|
|
166
173
|
return (
|
|
167
|
-
<Button variant=
|
|
174
|
+
<Button variant="primary" size="lg">
|
|
168
175
|
Click Me
|
|
169
176
|
</Button>
|
|
170
177
|
);
|
|
@@ -183,11 +190,13 @@ Props:
|
|
|
183
190
|
Usage Example:
|
|
184
191
|
|
|
185
192
|
```jsx
|
|
186
|
-
import React from
|
|
187
|
-
import { Card } from
|
|
193
|
+
import React from "react";
|
|
194
|
+
import { Card } from "newron-ui-lib";
|
|
188
195
|
|
|
189
196
|
const MyComponent = () => {
|
|
190
|
-
return
|
|
197
|
+
return (
|
|
198
|
+
<Card title="Sample Card" content="This is a sample card component." />
|
|
199
|
+
);
|
|
191
200
|
};
|
|
192
201
|
```
|
|
193
202
|
|
|
@@ -207,11 +216,19 @@ Props:
|
|
|
207
216
|
Usage Example:
|
|
208
217
|
|
|
209
218
|
```jsx
|
|
210
|
-
import React from
|
|
211
|
-
import { Input } from
|
|
219
|
+
import React from "react";
|
|
220
|
+
import { Input } from "newron-ui-lib";
|
|
212
221
|
|
|
213
222
|
const MyComponent = () => {
|
|
214
|
-
return
|
|
223
|
+
return (
|
|
224
|
+
<Input
|
|
225
|
+
label="Username:"
|
|
226
|
+
field={field}
|
|
227
|
+
form={form}
|
|
228
|
+
variant="outlined"
|
|
229
|
+
size="small"
|
|
230
|
+
/>
|
|
231
|
+
);
|
|
215
232
|
};
|
|
216
233
|
```
|
|
217
234
|
|
|
@@ -226,11 +243,11 @@ Props:
|
|
|
226
243
|
Usage Example:
|
|
227
244
|
|
|
228
245
|
```jsx
|
|
229
|
-
import React from
|
|
230
|
-
import { Dropdown } from
|
|
246
|
+
import React from "react";
|
|
247
|
+
import { Dropdown } from "newron-ui-lib";
|
|
231
248
|
|
|
232
249
|
const MyComponent = () => {
|
|
233
|
-
return <Dropdown options={[
|
|
250
|
+
return <Dropdown options={["Option 1", "Option 2", "Option 3"]} />;
|
|
234
251
|
};
|
|
235
252
|
```
|
|
236
253
|
|
|
@@ -245,11 +262,11 @@ Props:
|
|
|
245
262
|
Usage Example:
|
|
246
263
|
|
|
247
264
|
```jsx
|
|
248
|
-
import React from
|
|
249
|
-
import { Select } from
|
|
265
|
+
import React from "react";
|
|
266
|
+
import { Select } from "newron-ui-lib";
|
|
250
267
|
|
|
251
268
|
const MyComponent = () => {
|
|
252
|
-
return <Select options={[
|
|
269
|
+
return <Select options={["Option 1", "Option 2", "Option 3"]} />;
|
|
253
270
|
};
|
|
254
271
|
```
|
|
255
272
|
|
|
@@ -264,12 +281,12 @@ Props:
|
|
|
264
281
|
Usage Example:
|
|
265
282
|
|
|
266
283
|
```jsx
|
|
267
|
-
import React from
|
|
268
|
-
import { SearchBar } from
|
|
284
|
+
import React from "react";
|
|
285
|
+
import { SearchBar } from "newron-ui-lib";
|
|
269
286
|
|
|
270
287
|
const MyComponent = () => {
|
|
271
|
-
const handleSearch = searchText => {
|
|
272
|
-
console.log(
|
|
288
|
+
const handleSearch = (searchText) => {
|
|
289
|
+
console.log("Searching for:", searchText);
|
|
273
290
|
// Perform the search action here
|
|
274
291
|
};
|
|
275
292
|
|
|
@@ -284,11 +301,15 @@ A wrapper component to create a responsive layout for your components.
|
|
|
284
301
|
Usage Example:
|
|
285
302
|
|
|
286
303
|
```jsx
|
|
287
|
-
import React from
|
|
288
|
-
import { ResponsiveLayoutWrapper } from
|
|
304
|
+
import React from "react";
|
|
305
|
+
import { ResponsiveLayoutWrapper } from "newron-ui-lib";
|
|
289
306
|
|
|
290
307
|
const MyComponent = () => {
|
|
291
|
-
return
|
|
308
|
+
return (
|
|
309
|
+
<ResponsiveLayoutWrapper>
|
|
310
|
+
{/* Your components go here */}
|
|
311
|
+
</ResponsiveLayoutWrapper>
|
|
312
|
+
);
|
|
292
313
|
};
|
|
293
314
|
```
|
|
294
315
|
|
|
@@ -304,17 +325,22 @@ Props:
|
|
|
304
325
|
Usage Example:
|
|
305
326
|
|
|
306
327
|
```jsx
|
|
307
|
-
import React, { useState } from
|
|
308
|
-
import { Datalist } from
|
|
328
|
+
import React, { useState } from "react";
|
|
329
|
+
import { Datalist } from "newron-ui-lib";
|
|
309
330
|
|
|
310
331
|
const MyComponent = () => {
|
|
311
|
-
const [selectedOption, setSelectedOption] = useState(
|
|
332
|
+
const [selectedOption, setSelectedOption] = useState("");
|
|
312
333
|
|
|
313
|
-
const handleSelect = option => {
|
|
334
|
+
const handleSelect = (option) => {
|
|
314
335
|
setSelectedOption(option);
|
|
315
336
|
};
|
|
316
337
|
|
|
317
|
-
return
|
|
338
|
+
return (
|
|
339
|
+
<Datalist
|
|
340
|
+
options={["Option 1", "Option 2", "Option 3"]}
|
|
341
|
+
onSelect={handleSelect}
|
|
342
|
+
/>
|
|
343
|
+
);
|
|
318
344
|
};
|
|
319
345
|
```
|
|
320
346
|
|
|
@@ -331,26 +357,32 @@ Props:
|
|
|
331
357
|
Usage Example:
|
|
332
358
|
|
|
333
359
|
```jsx
|
|
334
|
-
import React from
|
|
335
|
-
import { DynamicForm } from
|
|
336
|
-
import * as Yup from
|
|
360
|
+
import React from "react";
|
|
361
|
+
import { DynamicForm } from "newron-ui-lib";
|
|
362
|
+
import * as Yup from "yup";
|
|
337
363
|
|
|
338
364
|
const MyComponent = () => {
|
|
339
365
|
const initialValues = {
|
|
340
|
-
username:
|
|
341
|
-
password:
|
|
366
|
+
username: "",
|
|
367
|
+
password: "",
|
|
342
368
|
};
|
|
343
369
|
|
|
344
370
|
const validationSchema = Yup.object({
|
|
345
|
-
username: Yup.string().required(
|
|
346
|
-
password: Yup.string().required(
|
|
371
|
+
username: Yup.string().required("Username is required"),
|
|
372
|
+
password: Yup.string().required("Password is required"),
|
|
347
373
|
});
|
|
348
374
|
|
|
349
375
|
const fields = [
|
|
350
376
|
// Define your form fields here
|
|
351
377
|
];
|
|
352
378
|
|
|
353
|
-
return
|
|
379
|
+
return (
|
|
380
|
+
<DynamicForm
|
|
381
|
+
initialValues={initialValues}
|
|
382
|
+
validationSchema={validationSchema}
|
|
383
|
+
fields={fields}
|
|
384
|
+
/>
|
|
385
|
+
);
|
|
354
386
|
};
|
|
355
387
|
```
|
|
356
388
|
|
package/package.json
CHANGED
|
File without changes
|