groovinads-ui 1.2.60 → 1.2.61

package/README.md

@@ -30,6 +30,7 @@ The library includes the following components:
   - [Checkbox](#checkbox): For multiple option selections.
   - [Input](#input): For user data entry.
   - [InputChip](#inputChip): For dynamically managing and displaying keywords.
+  - [InputEmail] (#inputEmail) : For managing email lists, including adding, displaying, and deleting email addresses.
   - [Radio](#radio): For exclusive selections.
   - [Switch](#switch): For toggle states.
   - [Textarea](#textarea): For multiline text input.
@@ -525,7 +526,7 @@ export default InputComponent;
 | `type`         | String          | No       | `color` `date` `datetime-local` `email` `file` `image` `month` `number` `password` `tel` `text` `time` `url` `week` | `text`  | Type of input                                                                                                                                                   |
 | `value`        | String / Number | No       | n/a                                                                                                                 | n/a     | The value of the input.                                                                                                                                         |
 
- ### inputChip
+ ### InputChip
 ```jsx
 import React, { useState } from 'react';
 import { InputChip } from 'groovinads-ui';
@@ -546,7 +547,7 @@ const ExampleIputChip = () => (
 			recomendedKeywords={5}
 			maxKeywords={15}
 			requiredText='You can only add up to 15 keywords.'
-		/>	
+		/>
 
 		{/* INITIALIZED EMPTY, WITHOUT KEYWORDS */}
 		<InputChip
@@ -555,9 +556,9 @@ const ExampleIputChip = () => (
 			setKeywordsList={setKeywordsList2}
 			nonRecomendedKeywords={nonRecomendedKeywords}
 			maxKeywordLength={10}
-			maxKeywords={15}   
-			requiredText='You can only add up to 15 keywords.'  
-			counter={true}       
+			maxKeywords={15}
+			requiredText='You can only add up to 15 keywords.'
+			counter={true}
 		/>
 	</>
 );
@@ -577,6 +578,43 @@ export default ExampleInputChip;
 | ` maxKeywords ` 		| Number | Yes | n/a | n/a | Indicates the maximum number of allowed keywords. When the keywordsList reaches this limit, an error message defined in requiredText will be displayed. Additionally, if the counter is enabled, its status will change to the 'danger' color. 		|
 | `requiredText`		| String | Yes | n/a | n/a | Texto que se mostrará como error cuando la lista de keywords (keywordsList) alcance el límite máximo definido en maxKeywords. |
 
+### InputEmail
+``` jsx
+// Example Usage
+import React, { useState } from 'react';
+import { InputEmail } from '../components/Inputs';
+
+const ExampleInputEmail = () => {
+	const [showModal, setShowModal] = useState(true); // Received from the parent component.
+
+	return (
+		<InputEmail
+			titleList='Added emails'
+			label='Email addresses'
+			textButton='Add'
+			textError='You must enter a valid email address'
+			/* The responses from the three APIs expect an array of strings (or an empty array) */
+			apiGetEmail='incert/your/endpoint'
+			apiPostEmail='incert/your/endpoint'
+			apiDeleteEmail='incert/your/endpoint'
+			showModal={showModal}  // showModal indicates the visibility of the parent component of InputEmail.
+		/>
+	);
+};
+export default ExampleInputChip;
+
+```
+ Property      		 | Type    | Required  | Options        | Default | Description  																					 	|
+| ------------------ | ------  | --------  | -------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| ` apiDeleteEmail ` | String  | Yes 	   | n/a 		    | n/a     | Endpoint required to remove emails from the list of added emails.									|
+| ` apiGetEmail `    | Array   | Yes	   | n/a 		    | n/a     | Endpoint required to fetch the email list. The response should be an array of strings (or empy array) displayed below the input and `titleList`. |
+| ` apiPostEmail `   | String  | Yes 	   | n/a 		    | n/a     | Endpoint required to update the list of added emails. It is used to add emails to the existing list.|
+| ` label `          | String  | No  	   | n/a 	  		| ''      | Allows adding custom text as the input label.														|
+| ` showModal ` 	 | Boolean | No        | `true` `false` | `true`  | If true, the email list received from apiGetEmail will be shown when rendering InputEmail.			|
+| ` textButton `     | String  | No  	   | n/a 		    | ''      | Allows adding custom text to the button for adding emails.											|
+| ` textError ` 	 | String  | No 	   | n/a 		    | ''      | Allows adding custom error text when entering an invalid email address.  							|
+| ` titleList `      | String  | No 	   | n/a 		    | ''      | Allows adding a custom text that will be shown as the title of the email list.						|
+
 ### Radio
 
 ```jsx