groovinads-ui 1.2.46 → 1.2.48

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 (12) hide show
  1. package/README.md +64 -28
  2. package/dist/index.es.js +2 -2
  3. package/dist/index.js +2 -2
  4. package/package.json +1 -1
  5. package/src/components/Dropdowns/DropdownSimpleDatePicker.jsx +136 -0
  6. package/src/components/Dropdowns/index.js +2 -1
  7. package/src/components/Inputs/Input.jsx +8 -0
  8. package/src/components/Inputs/Radio.jsx +4 -2
  9. package/src/components/Navigation/Dropdowns/DeckDropdown.jsx +2 -2
  10. package/src/components/Navigation/Dropdowns/DropdownClient.jsx +0 -1
  11. package/src/stories/DropdownDatePicker.stories.jsx +2 -2
  12. package/src/stories/DropdownSimpleDatePicker.stories.jsx +32 -0
package/README.md CHANGED
@@ -21,6 +21,7 @@ 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.
24
25
  - [DropdownFilter](#dropdownfilter): For filter dropdowns.
25
26
  - [DropdownMultiSelect](#dropdownmultiselect): For multi-select dropdowns.
26
27
 
@@ -114,7 +115,7 @@ import { Button } from 'groovinads-ui';
114
115
  | `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. |
115
116
  | `className` | String | No | n/a | n/a | Additional CSS class names that can be applied to the button. |
116
117
  | `icon` | String | No | n/a | n/a | Specifies the name of the icon to be displayed inside the button. |
117
- | `iconPosition` | String | No | `start`, `end` | `start` | Position of the icon relative to the text inside the button. It's optional. |
118
+ | `iconPosition` | String | No | `start` `end` | `start` | Position of the icon relative to the text inside the button. It's optional. |
118
119
  | `onClick` | Function | No | n/a | n/a | Function to be executed when the button is clicked. |
119
120
  | `processing` | Boolean | No | `true` `false` | `false` | If true, displays a loading animation (...) with a spinner. If false, it will not be displayed. |
120
121
  | `size` | String | No | `xs` `md` `lg` | `md` | Defines the size of the button. It's optional. |
@@ -123,7 +124,7 @@ import { Button } from 'groovinads-ui';
123
124
 
124
125
  ## Dropdowns
125
126
 
126
- ### DropdownComponent
127
+ ### DropdownComponent (*Deprecated*)
127
128
 
128
129
  ```jsx
129
130
  import React, { useState } from 'react';
@@ -155,11 +156,11 @@ const DropdownComponentExample = () => {
155
156
  <Icon iconName='chevron-down' className='ms-2' />
156
157
  </Button>
157
158
 
158
- <DropdownComponent.Menu>
159
+ <DropdownComponentMenu>
159
160
  <DropdownComponent.Item onClick={() => console.log('Item 1 clicked')}>
160
161
  Item 1
161
162
  </DropdownComponent.Item>
162
- </DropdownComponent.Menu>
163
+ </DropdownComponentMenu>
163
164
  </DropdownComponent>
164
165
  );
165
166
  };
@@ -167,7 +168,7 @@ const DropdownComponentExample = () => {
167
168
  export default DropdownComponentExample;
168
169
  ```
169
170
 
170
- ##### Dropdown width submenu
171
+ ##### Dropdown with submenu
171
172
 
172
173
  ```jsx
173
174
  <DropdownComponent
@@ -197,7 +198,7 @@ export default DropdownComponentExample;
197
198
  | Property | Type | Required | Options | Default | Description |
198
199
  | ----------- | ------------------ | -------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
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. |
200
- | `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. |
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. |
201
202
  | `children` | Node | Yes | n/a | n/a | Child components to be rendered inside the dropdown. |
202
203
  | `className` | String | No | n/a | string | Adds a custom CSS class to the component.names. |
203
204
  | `drop` | String | No | `up` `down` `start` `end` | n/a | Determines the direction in which the dropdown menu will be displayed. |
@@ -245,7 +246,7 @@ const DropdownDatePickerExample = () => {
245
246
  );
246
247
  };
247
248
 
248
- export default ExampleUsage;
249
+ export default DropdownDatePickerExample;
249
250
  ```
250
251
 
251
252
  | Property | Type | Required | Option | Default | Description |
@@ -264,6 +265,49 @@ export default ExampleUsage;
264
265
  | `show` | Boolean | No | `true` `false` | `false` | Controls the visibility of the dropdown. If true, the dropdown is displayed; if false, it is hidden. |
265
266
  | `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. |
266
267
 
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 [dateFrom, setDateFrom] = useState('');
278
+ const [dateTo, setDateTo] = useState('');
279
+
280
+
281
+ return (
282
+ <>
283
+ <button onClick={() => setShow(!show)}>Toggle< button>
284
+ <div className='col-2'>
285
+ <DropdownSimpleDatePicker
286
+ {...args}
287
+ dateFrom={dateFrom}
288
+ setDateFrom={setDateFrom}
289
+ date={dateTo}
290
+ setDate={setDateTo}
291
+ />
292
+ </div>
293
+ </>
294
+ );
295
+ };
296
+
297
+ export default DropdownSimpleDatePickerExample;
298
+ ```
299
+
300
+ | Property | Type | Required | Option | Default | Description |
301
+ | ---------------- | -------- | -------- | ---------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------- |
302
+ | `className` | String | No | n/a | n/a | Adds a custom CSS class to the component. |
303
+ | `show` | Boolean | No | `true` `false` | `false` | Controls the visibility of the dropdown. If true, the dropdown is displayed; if false, it is hidden. |
304
+ | `setShow` | Function | No | n/a | n/a | Function to update the visibility state of the dropdown. |
305
+ | `onToggle` | Function | No | n/a | n/a | Function that is called when the dropdown is toggled. |
306
+ | `inputLabel` | String | No | n/a | `period` | Label to display on the dropdown toggle button. |
307
+ | `overflow` | Boolean | No | `true` `false` | `false` | Adjusts the dropdown's position to handle overflow situations. |
308
+ | `date` | String | No | n/a | `null` | Selected date. |
309
+ | `setDate` | Function | No | n/a | n/a | Function that updates the start date. |
310
+
267
311
  ### DropdownFilter
268
312
 
269
313
  ```jsx
@@ -291,7 +335,7 @@ import { DropdownFilter } from 'groovinads-ui';
291
335
  | `locked` | Boolean | No | `true` `false` | `false` | If true, the filter cannot be removed. |
292
336
  | `menuType` | String | No | `simple` `selection` | `simple` | Type of dropdown menu. |
293
337
  | `onRemoveFilter` | Function | No | n/a | n/a | Function to handle filter removal. |
294
- | `onToggle` | Funtion | No | n/a | n/a | Function to handle toggle state changes. |
338
+ | `onToggle` | Function | No | n/a | n/a | Function to handle toggle state changes. |
295
339
  | `overflow` | Boolean | No | `true` `false` | `false` | Whether to enable overflow strategy for the dropdown. |
296
340
  | `setValuesSelected` | Function | No | n/a | n/a | Function to set the selected values. |
297
341
  | `show` | Boolean | No | `true` `false` | n/a | Controls the visibility of the dropdown. |
@@ -451,13 +495,15 @@ export default InputComponent;
451
495
  | `helpText` | String | No | n/a | n/a | Optional text under the input to guide the user or provide additional information. |
452
496
  | `icon` | String | No | n/a | n/a | Specifies the name of the icon to be displayed inside the input. |
453
497
  | `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. |
498
+ | `max` | Number | No | n/a | n/a | Specifies the maximum value that the input field can accept. |
499
+ | `min` | Number | No | n/a | n/a | Specifies the minimum value that the input field can accept. |
454
500
  | `name` | String | No | n/a | n/a | Indicates the name attribute for the input element, which represents the form data after it is submitted. |
455
501
  | `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. |
456
502
  | `prefix` | String | No | n/a | n/a | Text or characters to display at the start of the input, e.g., 'USD' for currency. |
457
503
  | `requiredText` | String | No | n/a | n/a | Text displayed when input validation fails, used to indicate an error. |
458
504
  | `setShowError` | Function | No | n/a | n/a | Function used to change the state of `showError`. |
459
505
  | `size` | String | No | `xs` `md` `lg` | `md` | Sets the size of the input field. |
460
- | `suffix ` | String | No | n/a | n/a | Optional suffix text to display inside the input field. |
506
+ | `suffix` | String | No | n/a | n/a | Optional suffix text to display inside the input field. |
461
507
  | `showError` | Boolean | No | `true` `false` | `false` | If true, indicates that an error message should be displayed, usually controlled by `setShowError`. |
462
508
  | `type` | String | No | `color` `date` `datetime-local` `email` `file` `image` `month` `number` `password` `tel` `text` `time` `url` `week` | `text` | Type of input |
463
509
  | `value` | String / Number | No | n/a | n/a | The value of the input. |
@@ -479,13 +525,14 @@ import { Radio } from 'groovinads-ui';
479
525
  </Radio>;
480
526
  ```
481
527
 
482
- | Property | Type | Required | Options | Default | Description |
483
- | ----------- | -------- | -------- | -------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------- |
484
- | `className` | String | No | n/a | n/a | Additional CSS class names that can be applied to the radio button. |
485
- | `id` | String | No | n/a | n/a | The unique identifier for the radio button. It is used for linking the label and the radio button. |
486
- | `name` | String | No | n/a | n/a | The name attribute of the radio button. Used to group multiple radios into a single group. |
487
- | `setStatus` | Function | No | n/a | n/a | It is used to update the selection state of the radio button based on user interaction. |
488
- | `status` | Boolean | No | `true` `false` | `false` | Indicates whether the radio button is selected (true, the radio button appears selected) or not (false, it appears unselected). |
528
+ | Property | Type | Required | Options | Default | Description |
529
+ | ----------- | -------- | -------- | -------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
530
+ | `className` | String | No | n/a | n/a | Additional CSS class names that can be applied to the radio button. |
531
+ | `id` | String | No | n/a | n/a | The unique identifier for the radio button. It is used for linking the label and the radio button. |
532
+ | `fullWidth` | Boolean | No | n/a | `false` | If `true`, the input will take the full width of its container by adding the `w-100` class to both the container `div` and the `label`. |
533
+ | `name` | String | No | n/a | n/a | The name attribute of the radio button. Used to group multiple radios into a single group. |
534
+ | `setStatus` | Function | No | n/a | n/a | It is used to update the selection state of the radio button based on user interaction. |
535
+ | `status` | Boolean | No | `true` `false` | `false` | Indicates whether the radio button is selected (true, the radio button appears selected) or not (false, it appears unselected). |
489
536
 
490
537
  ### Switch
491
538
 
@@ -789,7 +836,7 @@ const SidebarComponent = () => {
789
836
  onNavigate={handleNavigation}
790
837
  dropdownVisible={true}
791
838
  setGroovinProfile={setGroovinProfile}
792
- selectedClient={selectedClient}
839
+ selectedClient={selectedClient}
793
840
 
794
841
  />
795
842
  </div>
@@ -957,17 +1004,6 @@ const MyToastExamples = () => {
957
1004
  export default MyToastExamples;
958
1005
  ```
959
1006
 
960
- | Property | Type | Required | Options | Default | Description |
961
- | ----------------- | --------- | -------- | ------------------------------------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
962
- | `cancelButton` | Boolean | No | `true` `false` | `false` | Determines whether to show a cancel button. |
963
- | `currentProgress` | Number | No | n/a | n/a | Indicates the current progress of the task as a percentage with a number from 1 to 100. Used only when `variant` is set to `upload` |
964
- | `onCancel` | Function | No | n/a | n/a | If `cancelButton` is true, it will display a cancel button that will execute the function provided in the `onCancel` prop when clicked. |
965
- | `position` | String | No | `top-start` `top-end` `bottom-start` `bottom-end` | `bottom-start` | Defines the position on the screen where the toast will be displayed. |
966
- | `status` | String | No | `in-progress` `error` | `in-progress` | Define the current state of the task. If `in-progress`, shows the ongoing progress, reflected in the progress bar. If `error`, indicates that the upload or processing has failed. |
967
- | `variant` | String | Yes | `upload` `processing` | n/a | Define the type of process being performed. If `upload`, displays a progress bar and a loading status indicator. If `upload`, displays a progress bar and a loading status indicator. |
968
-
969
-
970
-
971
1007
  | Property | Type | Required | Options | Default | Description |
972
1008
  | ----------------- | -------- | -------- | ------------------------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
973
1009
  | `cancelButton` | Boolean | No | `true` `false` | `false` | Determines whether to show a cancel button. |