groovinads-ui 1.2.58 → 1.2.61

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 (13) hide show
  1. package/README.md +100 -61
  2. package/dist/index.es.js +3 -3
  3. package/dist/index.js +3 -3
  4. package/package.json +1 -1
  5. package/src/components/Button/Button.jsx +4 -3
  6. package/src/components/Inputs/InputEmail.jsx +166 -0
  7. package/src/components/Inputs/index.js +2 -1
  8. package/src/components/Navigation/Sidebar.jsx +1 -1
  9. package/src/services/components.services.js +15 -7
  10. package/src/services/helpers.js +1 -1
  11. package/src/stories/Button.stories.jsx +1 -4
  12. package/src/stories/InputEmail.stories.jsx +28 -0
  13. package/src/stories/PillComponent.stories.jsx +9 -1
package/README.md CHANGED
@@ -21,18 +21,19 @@ The library includes the following components:
21
21
 
22
22
  - [DropdownComponent](#dropdowncomponent): For dropdown menus.
23
23
  - [DropdownDatePicker](#dropdowndatepicker): For filter dropdowns.
24
- - [DropdownSimpleDatePicker](#dropdownsimpledatepicker): For filter dropdowns.
25
24
  - [DropdownFilter](#dropdownfilter): For filter dropdowns.
26
25
  - [DropdownMultiSelect](#dropdownmultiselect): For dynamically managing and displaying keywords.
26
+ - [DropdownSimpleDatePicker](#dropdownsimpledatepicker): For filter dropdowns.
27
27
 
28
28
  - [Inputs](#inputs):
29
29
 
30
30
  - [Checkbox](#checkbox): For multiple option selections.
31
31
  - [Input](#input): For user data entry.
32
+ - [InputChip](#inputChip): For dynamically managing and displaying keywords.
33
+ - [InputEmail] (#inputEmail) : For managing email lists, including adding, displaying, and deleting email addresses.
32
34
  - [Radio](#radio): For exclusive selections.
33
35
  - [Switch](#switch): For toggle states.
34
36
  - [Textarea](#textarea): For multiline text input.
35
- - [InputChip](#inputChip): For dynamically managing and displaying keywords.
36
37
 
37
38
  - [Labels](#labels):
38
39
 
@@ -271,60 +272,6 @@ export default DropdownDatePickerExample;
271
272
  | `minDate` | Object | No | n/a | n/a | Min date filter. |
272
273
  | `maxDate` | Object | No | n/a | n/a | Max date filter. |
273
274
 
274
- ### DropdownSimpleDatePicker
275
-
276
- ```jsx
277
- import { DropdownDatePicker } from 'groovinads-ui';
278
- import React, { useState } from 'react';
279
-
280
- const DropdownSimpleDatePickerExample = () => {
281
- const [show, setShow] = useState(false);
282
-
283
- const [date, setDate] = useState('');
284
-
285
- const clearStartDate = () => {
286
- // Resets the date and updates the state as needed. Adjust as required.
287
- setDate(null);
288
- setShowDateDropdown(false);
289
- closeDateDropdown();
290
- markSelectedPlacements();
291
- setKey((prevKey) => prevKey + 1);
292
- };
293
-
294
-
295
- return (
296
- <>
297
- <button onClick={() => setShow(!show)}>Toggle</button>
298
- <div className='col-2'>
299
- <DropdownSimpleDatePicker
300
- {...args}
301
- date={date}
302
- setDate={setDate}
303
- handleClear={ExampleClearDate}
304
- minDate={new Date('2025-01-01')}
305
- maxDate={new Date('2025-01-31')}
306
- />
307
- </div>
308
- </button>
309
- );
310
- };
311
-
312
- export default DropdownSimpleDatePickerExample;
313
- ```
314
-
315
- | Property | Type | Required | Option | Default | Description |
316
- | ------------- | -------- | -------- | -------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
317
- | `className` | String | No | n/a | n/a | Adds a custom CSS class to the component. |
318
- | `show` | Boolean | No | `true` `false` | `false` | Controls the visibility of the dropdown. If true, the dropdown is displayed; if false, it is hidden. |
319
- | `setShow` | Function | No | n/a | n/a | Function to update the visibility state of the dropdown. |
320
- | `onToggle` | Function | No | n/a | n/a | Function that is called when the dropdown is toggled. |
321
- | `inputLabel` | String | No | n/a | `period` | Label to display on the dropdown toggle button. |
322
- | `overflow` | Boolean | No | `true` `false` | `false` | Adjusts the dropdown's position to handle overflow situations. |
323
- | `date` | String | No | n/a | `null` | Selected date. |
324
- | `setDate` | Function | No | n/a | n/a | Function that updates the start date. |
325
- | `handleClear` | Function | No | n/a | n/a | Allows providing, as needed, a function to reset the date, update the state as necessary, etc. If none is provided, the date will be cleared by default. |
326
- | `minDate` | Object | No | n/a | n/a | Min date filter. |
327
- | `maxDate` | Object | No | n/a | n/a | Max date filter. |
328
275
 
329
276
  ### DropdownFilter
330
277
 
@@ -425,6 +372,61 @@ export default MultiSelectComponent;
425
372
  | `valuesSelected` | Array / Object | No | n/a | [ ] | Represents the state of the values that are currently selected. |
426
373
  | `hasId` | Boolean | No | `true` `false` | `true` | Controls wether the hashtag and id shows or not in the dropdown options |
427
374
 
375
+ ### DropdownSimpleDatePicker
376
+
377
+ ```jsx
378
+ import { DropdownDatePicker } from 'groovinads-ui';
379
+ import React, { useState } from 'react';
380
+
381
+ const DropdownSimpleDatePickerExample = () => {
382
+ const [show, setShow] = useState(false);
383
+
384
+ const [date, setDate] = useState('');
385
+
386
+ const clearStartDate = () => {
387
+ // Resets the date and updates the state as needed. Adjust as required.
388
+ setDate(null);
389
+ setShowDateDropdown(false);
390
+ closeDateDropdown();
391
+ markSelectedPlacements();
392
+ setKey((prevKey) => prevKey + 1);
393
+ };
394
+
395
+
396
+ return (
397
+ <>
398
+ <button onClick={() => setShow(!show)}>Toggle</button>
399
+ <div className='col-2'>
400
+ <DropdownSimpleDatePicker
401
+ {...args}
402
+ date={date}
403
+ setDate={setDate}
404
+ handleClear={ExampleClearDate}
405
+ minDate={new Date('2025-01-01')}
406
+ maxDate={new Date('2025-01-31')}
407
+ />
408
+ </div>
409
+ </button>
410
+ );
411
+ };
412
+
413
+ export default DropdownSimpleDatePickerExample;
414
+ ```
415
+
416
+ | Property | Type | Required | Option | Default | Description |
417
+ | ------------- | -------- | -------- | -------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
418
+ | `className` | String | No | n/a | n/a | Adds a custom CSS class to the component. |
419
+ | `show` | Boolean | No | `true` `false` | `false` | Controls the visibility of the dropdown. If true, the dropdown is displayed; if false, it is hidden. |
420
+ | `setShow` | Function | No | n/a | n/a | Function to update the visibility state of the dropdown. |
421
+ | `onToggle` | Function | No | n/a | n/a | Function that is called when the dropdown is toggled. |
422
+ | `inputLabel` | String | No | n/a | `period` | Label to display on the dropdown toggle button. |
423
+ | `overflow` | Boolean | No | `true` `false` | `false` | Adjusts the dropdown's position to handle overflow situations. |
424
+ | `date` | String | No | n/a | `null` | Selected date. |
425
+ | `setDate` | Function | No | n/a | n/a | Function that updates the start date. |
426
+ | `handleClear` | Function | No | n/a | n/a | Allows providing, as needed, a function to reset the date, update the state as necessary, etc. If none is provided, the date will be cleared by default. |
427
+ | `minDate` | Object | No | n/a | n/a | Min date filter. |
428
+ | `maxDate` | Object | No | n/a | n/a | Max date filter. |
429
+
428
430
  ### Checkbox
429
431
 
430
432
  ```jsx
@@ -524,7 +526,7 @@ export default InputComponent;
524
526
  | `type` | String | No | `color` `date` `datetime-local` `email` `file` `image` `month` `number` `password` `tel` `text` `time` `url` `week` | `text` | Type of input |
525
527
  | `value` | String / Number | No | n/a | n/a | The value of the input. |
526
528
 
527
- ### inputChip
529
+ ### InputChip
528
530
  ```jsx
529
531
  import React, { useState } from 'react';
530
532
  import { InputChip } from 'groovinads-ui';
@@ -545,7 +547,7 @@ const ExampleIputChip = () => (
545
547
  recomendedKeywords={5}
546
548
  maxKeywords={15}
547
549
  requiredText='You can only add up to 15 keywords.'
548
- />
550
+ />
549
551
 
550
552
  {/* INITIALIZED EMPTY, WITHOUT KEYWORDS */}
551
553
  <InputChip
@@ -554,9 +556,9 @@ const ExampleIputChip = () => (
554
556
  setKeywordsList={setKeywordsList2}
555
557
  nonRecomendedKeywords={nonRecomendedKeywords}
556
558
  maxKeywordLength={10}
557
- maxKeywords={15}
558
- requiredText='You can only add up to 15 keywords.'
559
- counter={true}
559
+ maxKeywords={15}
560
+ requiredText='You can only add up to 15 keywords.'
561
+ counter={true}
560
562
  />
561
563
  </>
562
564
  );
@@ -576,6 +578,43 @@ export default ExampleInputChip;
576
578
  | ` 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. |
577
579
  | `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. |
578
580
 
581
+ ### InputEmail
582
+ ``` jsx
583
+ // Example Usage
584
+ import React, { useState } from 'react';
585
+ import { InputEmail } from '../components/Inputs';
586
+
587
+ const ExampleInputEmail = () => {
588
+ const [showModal, setShowModal] = useState(true); // Received from the parent component.
589
+
590
+ return (
591
+ <InputEmail
592
+ titleList='Added emails'
593
+ label='Email addresses'
594
+ textButton='Add'
595
+ textError='You must enter a valid email address'
596
+ /* The responses from the three APIs expect an array of strings (or an empty array) */
597
+ apiGetEmail='incert/your/endpoint'
598
+ apiPostEmail='incert/your/endpoint'
599
+ apiDeleteEmail='incert/your/endpoint'
600
+ showModal={showModal} // showModal indicates the visibility of the parent component of InputEmail.
601
+ />
602
+ );
603
+ };
604
+ export default ExampleInputChip;
605
+
606
+ ```
607
+ Property | Type | Required | Options | Default | Description |
608
+ | ------------------ | ------ | -------- | -------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------- |
609
+ | ` apiDeleteEmail ` | String | Yes | n/a | n/a | Endpoint required to remove emails from the list of added emails. |
610
+ | ` 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`. |
611
+ | ` 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.|
612
+ | ` label ` | String | No | n/a | '' | Allows adding custom text as the input label. |
613
+ | ` showModal ` | Boolean | No | `true` `false` | `true` | If true, the email list received from apiGetEmail will be shown when rendering InputEmail. |
614
+ | ` textButton ` | String | No | n/a | '' | Allows adding custom text to the button for adding emails. |
615
+ | ` textError ` | String | No | n/a | '' | Allows adding custom error text when entering an invalid email address. |
616
+ | ` titleList ` | String | No | n/a | '' | Allows adding a custom text that will be shown as the title of the email list. |
617
+
579
618
  ### Radio
580
619
 
581
620
  ```jsx