groovinads-ui 1.2.57 → 1.2.60

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 (16) hide show
  1. package/README.md +220 -116
  2. package/dist/index.es.js +4 -4
  3. package/dist/index.js +3 -3
  4. package/package.json +1 -1
  5. package/src/components/Button/Button.jsx +14 -25
  6. package/src/components/Dropdowns/DropdownSimpleDatePicker.jsx +135 -137
  7. package/src/components/Dropdowns/DropdownsDatePicker/DropdownDatePicker.jsx +6 -6
  8. package/src/components/Inputs/InputChip.jsx +149 -0
  9. package/src/components/Inputs/index.js +2 -1
  10. package/src/components/Navigation/Sidebar.jsx +27 -16
  11. package/src/components/Toasts/Toast/ToastCardComponent.jsx +0 -2
  12. package/src/stories/Button.stories.jsx +13 -4
  13. package/src/stories/DropdownDatePicker.stories.jsx +19 -2
  14. package/src/stories/DropdownSimpleDatePicker.stories.jsx +22 -19
  15. package/src/stories/InputChip.stories.jsx +46 -0
  16. package/src/stories/PillComponent.stories.jsx +12 -1
package/README.md CHANGED
@@ -21,14 +21,15 @@ 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
- - [DropdownMultiSelect](#dropdownmultiselect): For multi-select dropdowns.
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.
32
33
  - [Radio](#radio): For exclusive selections.
33
34
  - [Switch](#switch): For toggle states.
34
35
  - [Textarea](#textarea): For multiline text input.
@@ -115,12 +116,13 @@ import { Button } from 'groovinads-ui';
115
116
  | `children` | Node | No | n/a | n/a | If true, children will be displayed alongside the spinner with '...' added to indicate the processing status in the label. If false, only the spinner will be shown. It can include text, icons, or other components. |
116
117
  | `className` | String | No | n/a | n/a | Additional CSS class names that can be applied to the button. |
117
118
  | `icon` | String | No | n/a | n/a | Specifies the name of the icon to be displayed inside the button. |
118
- | `iconPosition` | String | No | `start` `end` | `start` | Position of the icon relative to the text inside the button. It's optional. |
119
+ | `iconPosition` | String | No | `start` `end` | `start` | Position of the icon relative to the text inside the button. It's optional. |
119
120
  | `onClick` | Function | No | n/a | n/a | Function to be executed when the button is clicked. |
120
121
  | `processing` | Boolean | No | `true` `false` | `false` | If true, displays a loading animation (...) with a spinner. If false, it will not be displayed. |
121
122
  | `size` | String | No | `xs` `md` `lg` | `md` | Defines the size of the button. It's optional. |
122
123
  | `style` | String | No | `default` `success` `danger` `warning` `link` | `default` | Specifies the style variant of the button, which can change its color and visual appearance. It's optional. |
123
124
  | `variant` | String | No | `primary` `secondary` `terciary` `outline` | `primary` | Defines the visual style of the button. It's optional. |
125
+ | `disabled` | Boolean | No | `true` `false` | `false` | If true, disables the button. If false, the button is enabled. |
124
126
 
125
127
  ## Dropdowns
126
128
 
@@ -195,16 +197,16 @@ export default DropdownComponentExample;
195
197
  </DropdownComponent>
196
198
  ```
197
199
 
198
- | Property | Type | Required | Options | Default | Description |
199
- | ----------- | ------------------ | -------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
200
- | `align` | String | No | `start` `end` | `start` | Determines the alignment of the dropdown menu relative to the toggle. If `start`, the dropdown menu will align with the start of the toggle. If `end`, the dropdown menu will align with the end of the toggle. |
201
- | `autoClose` | Boolean / String | No | `true` `false` `outside` `inside` | false | Determines when the dropdown should auto-close. If `true` or `inside`, it closes on inside click. If `outside`, it closes on the outside click. |
202
- | `children` | Node | Yes | n/a | n/a | Child components to be rendered inside the dropdown. |
203
- | `className` | String | No | n/a | string | Adds a custom CSS class to the component.names. |
204
- | `drop` | String | No | `up` `down` `start` `end` | n/a | Determines the direction in which the dropdown menu will be displayed. |
205
- | `fullWidth` | Boolean | No | n/a | n/a | If true, the dropdown menu will span the full width of its container. |
206
- | `overflow` | Boolean | No | `true` `false` | false | Adjusts the dropdown's position to handle overflow situations. |
207
- | `show` | Boolean | No | `true` `false` | n/a | Controls the visibility of the dropdown. If true, the dropdown is visible; if false, it is hidden. |
200
+ | Property | Type | Required | Options | Default | Description |
201
+ | ----------- | ---------------- | -------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
202
+ | `align` | String | No | `start` `end` | `start` | Determines the alignment of the dropdown menu relative to the toggle. If `start`, the dropdown menu will align with the start of the toggle. If `end`, the dropdown menu will align with the end of the toggle. |
203
+ | `autoClose` | Boolean / String | No | `true` `false` `outside` `inside` | false | Determines when the dropdown should auto-close. If `true` or `inside`, it closes on inside click. If `outside`, it closes on the outside click. |
204
+ | `children` | Node | Yes | n/a | n/a | Child components to be rendered inside the dropdown. |
205
+ | `className` | String | No | n/a | string | Adds a custom CSS class to the component.names. |
206
+ | `drop` | String | No | `up` `down` `start` `end` | n/a | Determines the direction in which the dropdown menu will be displayed. |
207
+ | `fullWidth` | Boolean | No | n/a | n/a | If true, the dropdown menu will span the full width of its container. |
208
+ | `overflow` | Boolean | No | `true` `false` | false | Adjusts the dropdown's position to handle overflow situations. |
209
+ | `show` | Boolean | No | `true` `false` | n/a | Controls the visibility of the dropdown. If true, the dropdown is visible; if false, it is hidden. |
208
210
 
209
211
  ### DropdownDatePicker
210
212
 
@@ -241,6 +243,8 @@ const DropdownDatePickerExample = () => {
241
243
  setDateFrom={setDateFrom}
242
244
  dateTo={dateTo}
243
245
  setDateTo={setDateTo}
246
+ minDate={new Date('2025-01-01')}
247
+ maxDate={new Date('2025-01-31')}
244
248
  />
245
249
  </div>
246
250
  );
@@ -264,57 +268,9 @@ export default DropdownDatePickerExample;
264
268
  | `setShow` | Function | No | n/a | n/a | Function to update the visibility state of the dropdown. |
265
269
  | `show` | Boolean | No | `true` `false` | `false` | Controls the visibility of the dropdown. If true, the dropdown is displayed; if false, it is hidden. |
266
270
  | `variant` | String | No | `input` `filter` | `input` | Determines the type of dropdown. If 'input', it will be displayed as a button. If 'filter', it will be displayed as a filter dropdown. |
271
+ | `minDate` | Object | No | n/a | n/a | Min date filter. |
272
+ | `maxDate` | Object | No | n/a | n/a | Max date filter. |
267
273
 
268
- ### DropdownSimpleDatePicker
269
-
270
- ```jsx
271
- import { DropdownDatePicker } from 'groovinads-ui';
272
- import React, { useState } from 'react';
273
-
274
- const DropdownSimpleDatePickerExample = () => {
275
- const [show, setShow] = useState(false);
276
-
277
- const [date, setDate] = useState('');
278
-
279
- const clearStartDate = () => {
280
- // Resets the date and updates the state as needed. Adjust as required.
281
- setDate(null);
282
- setShowDateDropdown(false);
283
- closeDateDropdown();
284
- markSelectedPlacements();
285
- setKey((prevKey) => prevKey + 1);
286
- };
287
-
288
-
289
- return (
290
- <>
291
- <button onClick={() => setShow(!show)}>Toggle</button>
292
- <div className='col-2'>
293
- <DropdownSimpleDatePicker
294
- {...args}
295
- date={date}
296
- setDate={setDate}
297
- handleClear={ExampleClearDate}
298
- />
299
- </div>
300
- </button>
301
- );
302
- };
303
-
304
- export default DropdownSimpleDatePickerExample;
305
- ```
306
-
307
- | Property | Type | Required | Option | Default | Description |
308
- | ---------------- | -------- | -------- | ---------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------- |
309
- | `className` | String | No | n/a | n/a | Adds a custom CSS class to the component. |
310
- | `show` | Boolean | No | `true` `false` | `false` | Controls the visibility of the dropdown. If true, the dropdown is displayed; if false, it is hidden. |
311
- | `setShow` | Function | No | n/a | n/a | Function to update the visibility state of the dropdown. |
312
- | `onToggle` | Function | No | n/a | n/a | Function that is called when the dropdown is toggled. |
313
- | `inputLabel` | String | No | n/a | `period` | Label to display on the dropdown toggle button. |
314
- | `overflow` | Boolean | No | `true` `false` | `false` | Adjusts the dropdown's position to handle overflow situations. |
315
- | `date` | String | No | n/a | `null` | Selected date. |
316
- | `setDate` | Function | No | n/a | n/a | Function that updates the start date. |
317
- | `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. |
318
274
 
319
275
  ### DropdownFilter
320
276
 
@@ -415,6 +371,61 @@ export default MultiSelectComponent;
415
371
  | `valuesSelected` | Array / Object | No | n/a | [ ] | Represents the state of the values that are currently selected. |
416
372
  | `hasId` | Boolean | No | `true` `false` | `true` | Controls wether the hashtag and id shows or not in the dropdown options |
417
373
 
374
+ ### DropdownSimpleDatePicker
375
+
376
+ ```jsx
377
+ import { DropdownDatePicker } from 'groovinads-ui';
378
+ import React, { useState } from 'react';
379
+
380
+ const DropdownSimpleDatePickerExample = () => {
381
+ const [show, setShow] = useState(false);
382
+
383
+ const [date, setDate] = useState('');
384
+
385
+ const clearStartDate = () => {
386
+ // Resets the date and updates the state as needed. Adjust as required.
387
+ setDate(null);
388
+ setShowDateDropdown(false);
389
+ closeDateDropdown();
390
+ markSelectedPlacements();
391
+ setKey((prevKey) => prevKey + 1);
392
+ };
393
+
394
+
395
+ return (
396
+ <>
397
+ <button onClick={() => setShow(!show)}>Toggle</button>
398
+ <div className='col-2'>
399
+ <DropdownSimpleDatePicker
400
+ {...args}
401
+ date={date}
402
+ setDate={setDate}
403
+ handleClear={ExampleClearDate}
404
+ minDate={new Date('2025-01-01')}
405
+ maxDate={new Date('2025-01-31')}
406
+ />
407
+ </div>
408
+ </button>
409
+ );
410
+ };
411
+
412
+ export default DropdownSimpleDatePickerExample;
413
+ ```
414
+
415
+ | Property | Type | Required | Option | Default | Description |
416
+ | ------------- | -------- | -------- | -------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
417
+ | `className` | String | No | n/a | n/a | Adds a custom CSS class to the component. |
418
+ | `show` | Boolean | No | `true` `false` | `false` | Controls the visibility of the dropdown. If true, the dropdown is displayed; if false, it is hidden. |
419
+ | `setShow` | Function | No | n/a | n/a | Function to update the visibility state of the dropdown. |
420
+ | `onToggle` | Function | No | n/a | n/a | Function that is called when the dropdown is toggled. |
421
+ | `inputLabel` | String | No | n/a | `period` | Label to display on the dropdown toggle button. |
422
+ | `overflow` | Boolean | No | `true` `false` | `false` | Adjusts the dropdown's position to handle overflow situations. |
423
+ | `date` | String | No | n/a | `null` | Selected date. |
424
+ | `setDate` | Function | No | n/a | n/a | Function that updates the start date. |
425
+ | `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. |
426
+ | `minDate` | Object | No | n/a | n/a | Min date filter. |
427
+ | `maxDate` | Object | No | n/a | n/a | Max date filter. |
428
+
418
429
  ### Checkbox
419
430
 
420
431
  ```jsx
@@ -501,8 +512,8 @@ export default InputComponent;
501
512
  | `helpText` | String | No | n/a | n/a | Optional text under the input to guide the user or provide additional information. |
502
513
  | `icon` | String | No | n/a | n/a | Specifies the name of the icon to be displayed inside the input. |
503
514
  | `label` | String | No | n/a | 'Label' | Input field that handles different `type` of data based on the assigned type prop. Allows for adding icons, managing error messages, and other functionalities. |
504
- | `max` | Number | No | n/a | n/a | Specifies the maximum value that the input field can accept. |
505
- | `min` | Number | No | n/a | n/a | Specifies the minimum value that the input field can accept. |
515
+ | `max` | Number | No | n/a | n/a | Specifies the maximum value that the input field can accept. |
516
+ | `min` | Number | No | n/a | n/a | Specifies the minimum value that the input field can accept. |
506
517
  | `name` | String | No | n/a | n/a | Indicates the name attribute for the input element, which represents the form data after it is submitted. |
507
518
  | `onChange` | Function | No | n/a | n/a | Allows the user to update the value of the input field and synchronizes the field's value with the component's internal state. |
508
519
  | `prefix` | String | No | n/a | n/a | Text or characters to display at the start of the input, e.g., 'USD' for currency. |
@@ -514,6 +525,58 @@ export default InputComponent;
514
525
  | `type` | String | No | `color` `date` `datetime-local` `email` `file` `image` `month` `number` `password` `tel` `text` `time` `url` `week` | `text` | Type of input |
515
526
  | `value` | String / Number | No | n/a | n/a | The value of the input. |
516
527
 
528
+ ### inputChip
529
+ ```jsx
530
+ import React, { useState } from 'react';
531
+ import { InputChip } from 'groovinads-ui';
532
+
533
+ const ExampleIputChip = () => (
534
+ const [ keywordsList, setKeywordsList] = useState(['keyword1', 'keyword2', 'keyword3']);
535
+ const nonRecomendedKeywords = ['keyword4', 'keyword5'];
536
+ <>
537
+ {/* RECEIVES KEYWORDS INITIALLY */}
538
+ <InputChip
539
+ className={'mb-3'}
540
+ placeholder={'Add keywords…'}
541
+ keywordsList={keywordsList}
542
+ setKeywordsList={setKeywordsList}
543
+ nonRecomendedKeywords={nonRecomendedKeywords}
544
+ counter={true}
545
+ maxKeywordLength={10}
546
+ recomendedKeywords={5}
547
+ maxKeywords={15}
548
+ requiredText='You can only add up to 15 keywords.'
549
+ />
550
+
551
+ {/* INITIALIZED EMPTY, WITHOUT KEYWORDS */}
552
+ <InputChip
553
+ placeholder={'Add keywords…'}
554
+ keywordsList={keywordList2}
555
+ setKeywordsList={setKeywordsList2}
556
+ nonRecomendedKeywords={nonRecomendedKeywords}
557
+ maxKeywordLength={10}
558
+ maxKeywords={15}
559
+ requiredText='You can only add up to 15 keywords.'
560
+ counter={true}
561
+ />
562
+ </>
563
+ );
564
+
565
+ export default ExampleInputChip;
566
+
567
+ ```
568
+ Property | Type | Required | Options | Default | Description |
569
+ | ----------- | -------- | -------- | -------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------- |
570
+ | ` className ` | String | No | n/a | n/a | Additional CSS class names that can be applied to the inputChip. |
571
+ |` placeholder ` | String | Yes | n/a | n/a | Displays a suggested or descriptive text inside the input field before the user types. |
572
+ | ` keywordsList ` | Array | Yes | n/a | n/a | This property expects an array of keywords. You can initialize it as an empty array or with keywords, and it will be updated when new keywords are added or removed from the input field. |
573
+ | ` setKeywordsList `| String | Yes | n/a | n/a | Dynamically updates the list of keywords. It is called when a new keyword is added or removed from the list. The updated array will be passed to the `keywordsList` prop. |
574
+ | ` counter ` | Boolean | No | n/a | false | If true, it will display a progressive and numeric counter of keywords. If false, it will not display it. |
575
+ | ` nonRecomendedKeywords `| Number | No | n/a | n/a | This property expects an array of non-recommended keywords. When the user enters a word from this array in the input field, the pill for that keyword will appear in 'danger' color. |
576
+ | ` recomendedKeywords `| Number | No | n/a | n/a | Specifies the recommended number of keywords. When the keywords list (` keywordsList `) reaches the recommended number, the counter's status will change to the 'warning' color. |
577
+ | ` 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. |
578
+ | `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. |
579
+
517
580
  ### Radio
518
581
 
519
582
  ```jsx
@@ -557,7 +620,7 @@ import { Switch } from 'groovinads-ui';
557
620
 
558
621
  | Property | Type | Required | Options | Default | Description |
559
622
  | ---------------- | ---------------- | -------- | -------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
560
- | `className` | String | No | n/a | n/a | Additional CSS class names that can be applied to the switch. |
623
+ | `className` | String | No | n/a | ' ' | Additional CSS class names that can be applied to the switch. |
561
624
  | `icon` | Boolean | No | `true` `false` | `false` | If `true`, displays an icon (play/pause) inside the switch. |
562
625
  | `id` | String | No | n/a | n/a | It will be used as the id of the switch input. If not specified, an ID will be automatically generated based on the text of the children. |
563
626
  | `name` | String | No | n/a | n/a | The name attribute of the switch. Used to identify the form data after it's submitted. |
@@ -801,67 +864,110 @@ import { useNavigate } from 'react-router-dom';
801
864
 
802
865
  const SidebarComponent = () => {
803
866
  const [show, setShow] = useState(false);
867
+ const [selectedIndex, setSelectedIndex] = useState('0'); // use for change the customUrl value
804
868
 
805
869
  const navigate = useNavigate();
806
870
 
807
- const handleNavigation = (url) => {
808
- navigate(url);
809
- console.log("Cliente seleccionado:", client);
810
- };
871
+ const handleNavigation = (url) => {
872
+ navigate(url);
873
+ console.log("Cliente seleccionado:", client);
874
+ };
811
875
 
812
876
  return (
813
- <div>
814
- <button onClick={() => setShowSidebar(prev => !prev)}>
815
- Toggle Sidebar
816
- </button>
877
+ <div>
878
+ <button onClick={() => setShowSidebar(prev => !prev)}>
879
+ Toggle Sidebar
880
+ </button>
881
+ <Sidebar
882
+ customLinks={[
883
+ {
884
+ title: 'sectionTitle',
885
+ links: [
886
+ {
887
+ name: 'Home',
888
+ icon: 'home',
889
+ url: '/example-url',
890
+ children: [ // the section link item will be an item with expansion
891
+ name: 'Nested Link Name',
892
+ url: '/nested-link-url',
893
+ ],
894
+ },
895
+ ],
896
+ },
897
+ {
898
+ title: 'sectionCustom2', // non-custom
899
+ backData: true,
900
+ },
901
+ ]}
902
+ defaultOpened={false}
903
+ show={show}
904
+ setShow={setShow}
905
+ onNavigate={handleNavigation}
906
+ dropdownVisible={true}
907
+ setGroovinProfile={setGroovinProfile}
908
+ selectedClient={selectedClient}
909
+ />
910
+
911
+ {/* Example, if inModal={true} */}
912
+ <Modal>
817
913
  <Sidebar
818
914
  customLinks={[
819
915
  {
820
- title: 'sectionTitle',
821
916
  links: [
822
917
  {
823
- name: 'Home',
824
- icon: 'home',
825
- url: '/example-url',
826
- children: [ // the section link item will be an item with expansion
827
- name: 'Nested Link Name',
828
- url: '/nested-link-url',
829
- ],
918
+ name: 'Notifications',
919
+ icon: 'bell',
920
+ url: '0',
921
+ },
922
+ {
923
+ name: 'Logo',
924
+ icon: 'bell',
925
+ url: '1',
830
926
  },
831
927
  ],
832
928
  },
833
- {
834
- title: 'sectionCustom2', // non-custom
835
- backData: true,
836
- },
837
929
  ]}
838
- defaultOpened={false}
839
- show={show}
840
- setShow={setShow}
841
- onNavigate={handleNavigation}
842
- dropdownVisible={true}
843
- setGroovinProfile={setGroovinProfile}
844
- selectedClient={selectedClient}
845
-
846
- />
930
+ customLinks={customLinks}
931
+ defaultOpened={true}
932
+ showClients={false}
933
+ inModal={true}
934
+ customUrl={selectedIndex}
935
+ onNavigate={(url) => setSelectedIndex(url)}
936
+ />
937
+
938
+ {/* RENDER CONTENT */}
939
+ <div className="main-content px-5">
940
+ {selectedIndex === '0' ? (
941
+ <div>
942
+ <h2>lorem 1</h2>
943
+ </div>
944
+ ) : (
945
+ <div>
946
+ <h2>lorem 2</h2>
947
+ </div>
948
+ )}
949
+ </div>
950
+ </Modal>
847
951
  </div>
848
952
  );
849
953
  };
850
954
 
851
955
  export default SidebarComponent;
956
+
852
957
  ```
853
- | Property | Type | Required | Options | Default | Description |
854
- | --------------- | --------- | -------- | -------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
855
- | `api` | String | No | n/a | n/a | It is the `url` corresponding to your `api`. From which you will receive the data, which will be used in the non-custom section. |
856
- | `customLinks` | Array | Yes | n/a | n/a | Creates the sections of the component based on the array of objects it receives. `title` names each section, and `links` is a section link item, that can optionally, contain an array of children for nested links. To use external data obtained from the `api` property, the object must contain the property `backData={true}`.|
857
- | `defaultOpened` | Boolean | No | `true` `false` | `false` | Determines whether the sidebar is initially opened or closed. |
858
- | `onNavigate` | Function | Yes | n/a | n/a | Allows handling navigation to the url of the link when an item in the sidebar is clicked. You should provide a function to define how the navigation should be handled (handleNavigation). In our environment, use React Router DOM for navigation. |
859
- | `setShow` | Function | No | n/a | n/a | Function to toggle the visibility state between visible and hidden. |
860
- | `show` | Boolean | No | `true` `false` | `false` | Controls the visibility of the sidebar from an external state. If true, the sidebar is displayed; if false, it is hidden. |
861
- | `showClients` | Boolean String | No | `true` `false` `single` | `false` | Controls the visibility of the DropdownClient. . Accepts true or false for visibility, or 'single' to show only one client. |
862
- | `setGroovinProfile` | Function | No | n/a | n/a |Updates the user's profile when a client is selected, used in the `DropdownClients` subcomponent. |
863
- | `selectedClient` | Object | No | n/a | n/a | Represents the selected client object, used to display client-specific data in the sidebar. |
864
958
 
959
+ | Property | Type | Required | Options | Default | Description |
960
+ | ------------------- | -------------------- | -------- | ----------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
961
+ | `api` | String | No | n/a | n/a | It is the `url` corresponding to your `api`. From which you will receive the data, which will be used in the non-custom section. |
962
+ | `customLinks` | Array | Yes | n/a | n/a | Creates the sections of the component based on the array of objects it receives. `title` names each section, and `links` is a section link item, that can optionally, contain an array of children for nested links. To use external data obtained from the `api` property, the object must contain the property `backData={true}`. |
963
+ | `defaultOpened` | Boolean | No | `true` `false` | `false` | Determines whether the sidebar is initially opened or closed. |
964
+ | `onNavigate` | Function | Yes | n/a | n/a | Allows handling navigation to the url of the link when an item in the sidebar is clicked. You should provide a function to define how the navigation should be handled (handleNavigation). In our environment, use React Router DOM for navigation. |
965
+ | `show` | Boolean | No | `true` `false` | `false` | Controls the visibility of the sidebar from an external state. If true, the sidebar is displayed; if false, it is hidden. |
966
+ | `showClients` | Boolean String | No | `true` `false` `single` | `false` | Controls the visibility of the DropdownClient. . Accepts true or false for visibility, or 'single' to show only one client. |
967
+ | `setGroovinProfile` | Function | No | n/a | n/a | Updates the user's profile when a client is selected, used in the `DropdownClients` subcomponent. |
968
+ | `selectedClient` | Object | No | n/a | n/a | Represents the selected client object, used to display client-specific data in the sidebar. |
969
+ | `inModal` | Boolean | No | `true` `false` | `false` | If inModal is true, it will adjust the Sidebar based on the size of its parent container, allowing flexibility in a specific context, for example, a modal or a different layout. If false, its behavior will depend on the screen size. |
970
+ | `customURL` | `string` `undefined` | No | `string` `undefined` | `undefined` | Allows you to define a custom URL. You can provide a specific URL or a value representing a selected item in the Sidebar. If not defined, its value will be `undefined` (and window.location.pathname will be used as the default). |
865
971
 
866
972
  ### Stepper
867
973
 
@@ -943,7 +1049,6 @@ const ToastExample = () => {
943
1049
  const [selected, setSelected] = useState(null);
944
1050
 
945
1051
  const pushToast = () => {
946
-
947
1052
  const toast = {
948
1053
  variant: 'info',
949
1054
  autoClose: true,
@@ -964,16 +1069,15 @@ const ToastExample = () => {
964
1069
  export default ToastExample;
965
1070
  ```
966
1071
 
967
- | Property | Type | Required | Options | Default | Description |
968
- | Propiedad | Tipo | Requerido | Valores Permitidos | Valor Predeterminado | Descripción |
1072
+ | Property | Type | Required | Options | Default | Description |
1073
+ | Propiedad | Tipo | Requerido | Valores Permitidos | Valor Predeterminado | Descripción |
969
1074
  | ----------- | ------- | --------- | ------------------------------------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
970
- | `position` | String | No | `top-start` `top-end` `bottom-start` `bottom-end` | `bottom-end` | Define la posición en la pantalla donde se mostrará el toast. |
971
- | `toast` | Object | No | n/a | n/a | Objeto que contiene las propiedades del toast. |
972
- | `toast.autoClose` | Boolean | No | `true` `false` | `true` | Si es `true`, se cierra automáticamente después de un cierto tiempo. Si es `false`, permanece en la pantalla hasta que el usuario lo cierre manualmente. |
973
- | `toast.children` | Node | No | n/a | n/a | Contenido personalizado dentro del toast. |
974
- | `toast.className` | String | No | n/a | n/a | Nombre de clase personalizado para el toast. |
975
- | `toast.variant` | String | No | `info` `success` `warning` `error` | `info` | Define el tipo de mensaje que se mostrará. Dependiendo del valor, se muestra un icono diferente asociado con cada tipo de mensaje. |
976
-
1075
+ | `position` | String | No | `top-start` `top-end` `bottom-start` `bottom-end` | `bottom-end` | Define la posición en la pantalla donde se mostrará el toast. |
1076
+ | `toast` | Object | No | n/a | n/a | Objeto que contiene las propiedades del toast. |
1077
+ | `toast.autoClose` | Boolean | No | `true` `false` | `true` | Si es `true`, se cierra automáticamente después de un cierto tiempo. Si es `false`, permanece en la pantalla hasta que el usuario lo cierre manualmente. |
1078
+ | `toast.children` | Node | No | n/a | n/a | Contenido personalizado dentro del toast. |
1079
+ | `toast.className` | String | No | n/a | n/a | Nombre de clase personalizado para el toast. |
1080
+ | `toast.variant` | String | No | `info` `success` `warning` `error` | `info` | Define el tipo de mensaje que se mostrará. Dependiendo del valor, se muestra un icono diferente asociado con cada tipo de mensaje. |
977
1081
 
978
1082
  ### ToastProgress
979
1083