newron-ui 1.0.117 → 1.0.119

package/README.md

@@ -10,9 +10,15 @@ To use the Newron UI Library in your React projects, you can install it via npm:
 npm install newron-ui --save
 ```
 
+## Import newron-ui css in App.js
+
+```jsx
+import "newron-ui/dist/newron.css";
+```
+
 ## Locally Running the Library and Setup
 
-**Run This in Both App where you want use and also Newron-ui-lib**
+**Run This in Both App where you want use and also Newron-ui**
 
 ```bash
 npm link
@@ -96,7 +102,7 @@ npm link
 Import the components you need from the library in your React application and use them in your UI:
 
 ```jsx
-import React from 'react';
+import React from "react";
 import {
   Button,
   Card,
@@ -106,23 +112,30 @@ import {
   SearchBar,
   ResponsiveLayoutWrapper,
   Datalist,
-  DynamicForm
-} from 'newron-ui';
+  DynamicForm,
+} from "newron-ui";
 
 const App = () => {
   return (
     <ResponsiveLayoutWrapper>
       {/* Use the components here */}
-      <Card title='Sample Card' content='This is a sample card component.' />
-      <Button variant='primary' size='lg'>
+      <Card title="Sample Card" content="This is a sample card component." />
+      <Button variant="primary" size="lg">
         Click Me
       </Button>
-      <Input type='text' placeholder='Enter text...' />
-      <Dropdown options={['Option 1', 'Option 2', 'Option 3']} />
-      <Select options={['Option 1', 'Option 2', 'Option 3']} />
-      <SearchBar onSearch={searchText => console.log(searchText)} />
-      <Datalist options={['Option 1', 'Option 2', 'Option 3']} onSelect={option => console.log(option)} />
-      <DynamicForm initialValues={initialValues} validationSchema={validationSchema} fields={fields} />
+      <Input type="text" placeholder="Enter text..." />
+      <Dropdown options={["Option 1", "Option 2", "Option 3"]} />
+      <Select options={["Option 1", "Option 2", "Option 3"]} />
+      <SearchBar onSearch={(searchText) => console.log(searchText)} />
+      <Datalist
+        options={["Option 1", "Option 2", "Option 3"]}
+        onSelect={(option) => console.log(option)}
+      />
+      <DynamicForm
+        initialValues={initialValues}
+        validationSchema={validationSchema}
+        fields={fields}
+      />
     </ResponsiveLayoutWrapper>
   );
 };
@@ -159,12 +172,12 @@ Props:
 Usage Example:
 
 ```jsx
-import React from 'react';
-import { Button } from 'newron-ui-lib';
+import React from "react";
+import { Button } from "newron-ui-lib";
 
 const MyComponent = () => {
   return (
-    <Button variant='primary' size='lg'>
+    <Button variant="primary" size="lg">
       Click Me
     </Button>
   );
@@ -183,11 +196,13 @@ Props:
 Usage Example:
 
 ```jsx
-import React from 'react';
-import { Card } from 'newron-ui-lib';
+import React from "react";
+import { Card } from "newron-ui-lib";
 
 const MyComponent = () => {
-  return <Card title='Sample Card' content='This is a sample card component.' />;
+  return (
+    <Card title="Sample Card" content="This is a sample card component." />
+  );
 };
 ```
 
@@ -207,11 +222,19 @@ Props:
 Usage Example:
 
 ```jsx
-import React from 'react';
-import { Input } from 'newron-ui-lib';
+import React from "react";
+import { Input } from "newron-ui-lib";
 
 const MyComponent = () => {
-  return <Input label='Username:' field={field} form={form} variant='outlined' size='small' />;
+  return (
+    <Input
+      label="Username:"
+      field={field}
+      form={form}
+      variant="outlined"
+      size="small"
+    />
+  );
 };
 ```
 
@@ -226,11 +249,11 @@ Props:
 Usage Example:
 
 ```jsx
-import React from 'react';
-import { Dropdown } from 'newron-ui-lib';
+import React from "react";
+import { Dropdown } from "newron-ui-lib";
 
 const MyComponent = () => {
-  return <Dropdown options={['Option 1', 'Option 2', 'Option 3']} />;
+  return <Dropdown options={["Option 1", "Option 2", "Option 3"]} />;
 };
 ```
 
@@ -245,11 +268,11 @@ Props:
 Usage Example:
 
 ```jsx
-import React from 'react';
-import { Select } from 'newron-ui-lib';
+import React from "react";
+import { Select } from "newron-ui-lib";
 
 const MyComponent = () => {
-  return <Select options={['Option 1', 'Option 2', 'Option 3']} />;
+  return <Select options={["Option 1", "Option 2", "Option 3"]} />;
 };
 ```
 
@@ -264,12 +287,12 @@ Props:
 Usage Example:
 
 ```jsx
-import React from 'react';
-import { SearchBar } from 'newron-ui-lib';
+import React from "react";
+import { SearchBar } from "newron-ui-lib";
 
 const MyComponent = () => {
-  const handleSearch = searchText => {
-    console.log('Searching for:', searchText);
+  const handleSearch = (searchText) => {
+    console.log("Searching for:", searchText);
     // Perform the search action here
   };
 
@@ -284,11 +307,15 @@ A wrapper component to create a responsive layout for your components.
 Usage Example:
 
 ```jsx
-import React from 'react';
-import { ResponsiveLayoutWrapper } from 'newron-ui-lib';
+import React from "react";
+import { ResponsiveLayoutWrapper } from "newron-ui-lib";
 
 const MyComponent = () => {
-  return <ResponsiveLayoutWrapper>{/* Your components go here */}</ResponsiveLayoutWrapper>;
+  return (
+    <ResponsiveLayoutWrapper>
+      {/* Your components go here */}
+    </ResponsiveLayoutWrapper>
+  );
 };
 ```
 
@@ -304,17 +331,22 @@ Props:
 Usage Example:
 
 ```jsx
-import React, { useState } from 'react';
-import { Datalist } from 'newron-ui-lib';
+import React, { useState } from "react";
+import { Datalist } from "newron-ui-lib";
 
 const MyComponent = () => {
-  const [selectedOption, setSelectedOption] = useState('');
+  const [selectedOption, setSelectedOption] = useState("");
 
-  const handleSelect = option => {
+  const handleSelect = (option) => {
     setSelectedOption(option);
   };
 
-  return <Datalist options={['Option 1', 'Option 2', 'Option 3']} onSelect={handleSelect} />;
+  return (
+    <Datalist
+      options={["Option 1", "Option 2", "Option 3"]}
+      onSelect={handleSelect}
+    />
+  );
 };
 ```
 
@@ -331,26 +363,32 @@ Props:
 Usage Example:
 
 ```jsx
-import React from 'react';
-import { DynamicForm } from 'newron-ui-lib';
-import * as Yup from 'yup';
+import React from "react";
+import { DynamicForm } from "newron-ui-lib";
+import * as Yup from "yup";
 
 const MyComponent = () => {
   const initialValues = {
-    username: '',
-    password: ''
+    username: "",
+    password: "",
   };
 
   const validationSchema = Yup.object({
-    username: Yup.string().required('Username is required'),
-    password: Yup.string().required('Password is required')
+    username: Yup.string().required("Username is required"),
+    password: Yup.string().required("Password is required"),
   });
 
   const fields = [
     // Define your form fields here
   ];
 
-  return <DynamicForm initialValues={initialValues} validationSchema={validationSchema} fields={fields} />;
+  return (
+    <DynamicForm
+      initialValues={initialValues}
+      validationSchema={validationSchema}
+      fields={fields}
+    />
+  );
 };
 ```