groovinads-ui 1.2.35 → 1.2.37

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 +517 -191
  2. package/dist/index.es.js +4 -4
  3. package/dist/index.js +2 -2
  4. package/package.json +3 -2
  5. package/src/components/Dropdowns/DropdownFilter.jsx +1 -1
  6. package/src/components/Dropdowns/DropdownMultiSelect.jsx +1 -3
  7. package/src/components/Dropdowns/DropdownsDatePicker/DropdownDatePicker.jsx +3 -3
  8. package/src/components/Labels/StatusIcon.jsx +51 -52
  9. package/src/components/Navigation/Dropdowns/UserDropdown.jsx +1 -1
  10. package/src/components/Navigation/Sidebar.jsx +12 -27
  11. package/src/stories/Layout.stories.jsx +1 -0
  12. package/src/stories/Sidebar.stories.jsx +3 -3
  13. package/.yarn/install-state.gz +0 -0
package/README.md CHANGED
@@ -24,21 +24,23 @@ The library includes the following components:
24
24
  - **Textarea**: For multiline text input.
25
25
 
26
26
  # Requirements
27
+
27
28
  - The component styles must be included from: `https://ui.groovinads.com/styles.min.css`.
28
29
  - **npm** (v18 or higher).
29
30
  - [Font Awesome](https://fontawesome.com/) icons must be included in the project.
30
31
 
31
32
  ## ⚠️ Important: Use of additional CSS libraries
33
+
32
34
  When utilizing external libraries that require additional CSS styles, it is important to ensure that these styles are not added directly to individual components.
33
35
  Instead, they should be included in the `index.html` file of your project. This ensures that all styles are loaded correctly and in the desired order. Specifically, make sure that the CSS file `https://ui.groovinads.com/styles.min.css` is the last one to be loaded to avoid style conflicts and ensure that the default Groovinads styles have the proper priority.
34
36
 
35
37
  ```html
36
38
  <!-- Example of how to include additional CSS styles in index.html -->
37
39
  <head>
38
- <!-- Other CSS files -->
39
- <link rel="stylesheet" href="https://example.com/external-library.css">
40
- <!-- Groovinads CSS file, ensure it is the last to be loaded -->
41
- <link rel="stylesheet" href="https://ui.groovinads.com/styles.min.css">
40
+ <!-- Other CSS files -->
41
+ <link rel="stylesheet" href="https://example.com/external-library.css" />
42
+ <!-- Groovinads CSS file, ensure it is the last to be loaded -->
43
+ <link rel="stylesheet" href="https://ui.groovinads.com/styles.min.css" />
42
44
  </head>
43
45
  ```
44
46
 
@@ -51,290 +53,614 @@ yarn add groovinads-ui
51
53
  ```
52
54
 
53
55
  # Usage
56
+
54
57
  Here are examples of how to use the components included in the Groovinads UI library:
55
58
 
56
59
  ## Button
60
+
57
61
  ```jsx
58
62
  import { Button } from 'groovinads-ui';
59
63
 
60
64
  <Button
61
- variant={'primary'}
62
- onClick={()=>{console.log('Button clicked')}}
63
- icon={'fa-plus'}
64
- className={'mb-5'}
65
+ variant={'primary'}
66
+ onClick={() => {
67
+ console.log('Button clicked');
68
+ }}
69
+ icon={'fa-plus'}
70
+ className={'mb-5'}
65
71
  >
66
- Let's groove!
67
- </Button>
72
+ Let's groove!
73
+ </Button>;
68
74
  ```
69
75
 
70
- | Property | Type | Options | Default | Description |
71
- |--------------|--------------|--------------|--------------|--------------|
72
- | ```variant``` | String | ``` primary ``` ``` secondary ``` ``` terciary ``` ``` outline ```| ``` primary ```| Defines the visual style of the button. It's optional. |
73
- | ```size``` | String | ```xs``` ```md``` ```lg``` | ```md``` | Defines the size of the button. It's optional. |
74
- | ```onClick``` | Function | n/a | n/a | Function to be executed when the button is clicked. |
75
- | ```icon``` | String | n/a | n/a | Defines the size of the button. It's optional. |
76
- | ```iconPosition``` | String | n/a | ```start``` | Determines the position of the icon relative to the text inside the button. It's optional. |
77
- | ```className``` | String | n/a | n/a | Additional CSS class names that can be applied to the button. Defaults to an empty string. |
78
- | ```style``` | String | ```default``` ```success``` ```danger``` ```warning``` ```link```| ```default``` | Specifies the style variant of the button, which can change its color and visual appearance. It's optional. |
79
- | ```processing``` | Boolean | ```true``` ```false``` | ```false``` | If true, displays a spinner animation and appends '...' to the button label to indicate processing status. It's optional. |
80
- | ```children``` | ```Node``` | n/a | n/a | The content rendered inside the button component. It can include text, icons, or other components. |
76
+ | Property | Type | Options | Default | Description |
77
+ | -------------- | -------- | --------------------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------- |
78
+ | `variant` | String | `primary` `secondary` `terciary` `outline` | `primary` | Defines the visual style of the button. It's optional. |
79
+ | `size` | String | `xs` `md` `lg` | `md` | Defines the size of the button. It's optional. |
80
+ | `onClick` | Function | n/a | n/a | Function to be executed when the button is clicked. |
81
+ | `icon` | String | n/a | n/a | Defines the size of the button. It's optional. |
82
+ | `iconPosition` | String | n/a | `start` | Determines the position of the icon relative to the text inside the button. It's optional. |
83
+ | `className` | String | n/a | n/a | Additional CSS class names that can be applied to the button. Defaults to an empty string. |
84
+ | `style` | String | `default` `success` `danger` `warning` `link` | `default` | Specifies the style variant of the button, which can change its color and visual appearance. It's optional. |
85
+ | `processing` | Boolean | `true` `false` | `false` | If true, displays a spinner animation and appends '...' to the button label to indicate processing status. It's optional. |
86
+ | `children` | `Node` | n/a | n/a | The content rendered inside the button component. It can include text, icons, or other components. |
81
87
 
82
88
  ## Inputs
83
89
 
84
90
  ### Checkbox
91
+
85
92
  ```jsx
86
93
  import { Checkbox } from 'groovinads-ui';
87
94
 
88
95
  <Checkbox
89
- className={'mb-5'}
90
- id={'checkbox'}
91
- name={'checkbox'}
92
- setStatus={(status) => console.log(status)}
96
+ className={'mb-5'}
97
+ id={'checkbox'}
98
+ name={'checkbox'}
99
+ setStatus={(status) => console.log(status)}
93
100
  >
94
- This is a checkbox
95
- </Checkbox>
101
+ This is a checkbox
102
+ </Checkbox>;
96
103
  ```
97
104
 
98
- | Property | Type | Options | Default | Description |
99
- |--------------|--------------|--------------|--------------|--------------|
100
- | ```className``` | String | n/a | n/a | Additional CSS class names that can be applied to the checkbox. Defaults to an empty string. |
101
- | ```id``` | String | n/a | n/a | The unique identifier for the checkbox. It's required for associating the label and checkbox. |
102
- | ```name``` | String | n/a | n/a | The name attribute of the checkbox. Used to identify the form data after it's submitted. |
103
- | ```status``` | Boolean | ```true``` ```false``` | ```false``` | Indicates whether the checkbox is checked (```true```) or unchecked (```false```). Defaults to false. |
104
- | ```setStatus``` | Function | n/a | n/a | Function to set the ```status``` of the checkbox. This is a handler function typically used for state management. |
105
+ | Property | Type | Options | Default | Description |
106
+ | ----------- | -------- | -------------- | ------- | ------------------------------------------------------------------------------------------------------------- |
107
+ | `className` | String | n/a | n/a | Additional CSS class names that can be applied to the checkbox. Defaults to an empty string. |
108
+ | `id` | String | n/a | n/a | The unique identifier for the checkbox. It's required for associating the label and checkbox. |
109
+ | `name` | String | n/a | n/a | The name attribute of the checkbox. Used to identify the form data after it's submitted. |
110
+ | `status` | Boolean | `true` `false` | `false` | Indicates whether the checkbox is checked (`true`) or unchecked (`false`). Defaults to false. |
111
+ | `setStatus` | Function | n/a | n/a | Function to set the `status` of the checkbox. This is a handler function typically used for state management. |
112
+ | `children` | | | | |
105
113
 
106
114
  ### Input
115
+
107
116
  ```jsx
108
117
  import { Input } from 'groovinads-ui';
109
118
 
110
119
  <Input
111
- className={'mb-5'}
112
- helpText={'This is a help text'}
113
- label={'Input label'}
114
- name={'input'}
115
- onChange={() => console.log('Input changed')}
116
- requiredText={'This field is required'}
117
- showError={false}
118
- setShowError={(showError) => console.log(showError)}
119
- />
120
+ className={'mb-5'}
121
+ helpText={'This is a help text'}
122
+ label={'Input label'}
123
+ name={'input'}
124
+ onChange={() => console.log('Input changed')}
125
+ requiredText={'This field is required'}
126
+ showError={false}
127
+ setShowError={(showError) => console.log(showError)}
128
+ />;
120
129
  ```
121
- | Property | Type | Options | Default | Description |
122
- |--------------|--------------|--------------|--------------|--------------|
123
- | ```className``` | String | n/a | n/a | Additional CSS class names that can be applied to the input. Defaults to an empty string. |
124
- | ```disabled``` | Boolean | ```true``` ```false``` | ```false``` | If true, disables the input field. |
125
- | ```helpText``` | String | n/a | n/a | Optional text under the input to guide the user or provide additional information. |
126
- | ```icon``` | String | n/a | n/a | Icon to be displayed inside the input field, typically used for decoration or interaction. |
127
- | ```label``` | String | n/a | ```Label``` | Text label for the input field. Also used as the ```id``` attribute of the input for accessibility purposes. |
128
- | ```name``` | String | n/a | n/a | The name attribute for the input element, which represents the form data after it's submitted. |
129
- | ```onChange``` | Function | n/a | n/a | Function to handle changes to the input's value. Typically used to update state. |
130
- | ```prefix``` | String | n/a | n/a | Text or characters to display at the start of the input, e.g., 'USD' for currency.|
131
- | ```requiredText``` | String | n/a | n/a | Text displayed when input validation fails, typically used to indicate an error. |
132
- | ```size``` | String | ```xs``` ```md``` ```lg``` | ```md``` | Sets the size of the input field. |
133
- | ```showError``` | Boolean | ```true``` ```false``` | ```false``` | If true, indicates that an error message should be displayed, usually controlled by ```setShowError```. |
134
- | ```setShowError``` | Function | n/a | n/a | Function to set the visibility of the error message. |
135
- | ```type``` | String | n/a | n/a | Text or characters to display at the end of the input, e.g., 'USD' for currency. |
136
- | ```value``` | String or Number| n/a | n/a | The value of the input. |
137
- | ```autoFocus ``` | Boolean | ```true``` ```false``` | ```false``` | If true, automatically focuses the input when the component mounts. |
138
- | ```customRef ``` | React.RefObject, Function, null | n/a | ```null``` | Custom ref object or callback ref to access the input element. |
139
- | ```suffix ``` | string | n/a | n/a / Optional suffix text to display inside the input field. |
140
-
130
+
131
+ | Property | Type | Options | Default | Description |
132
+ | -------------- | ------------------------------- | -------------- | ------- | -------------------------------------------------------------------------------------------------------- |
133
+ | `className` | String | n/a | n/a | Additional CSS class names that can be applied to the input. Defaults to an empty string. |
134
+ | `disabled` | Boolean | `true` `false` | `false` | If true, disables the input field. |
135
+ | `helpText` | String | n/a | n/a | Optional text under the input to guide the user or provide additional information. |
136
+ | `icon` | String | n/a | n/a | Icon to be displayed inside the input field, typically used for decoration or interaction. |
137
+ | `label` | String | n/a | `Label` | Text label for the input field. Also used as the `id` attribute of the input for accessibility purposes. |
138
+ | `name` | String | n/a | n/a | The name attribute for the input element, which represents the form data after it's submitted. |
139
+ | `onChange` | Function | n/a | n/a | Function to handle changes to the input's value. Typically used to update state. |
140
+ | `prefix` | String | n/a | n/a | Text or characters to display at the start of the input, e.g., 'USD' for currency. |
141
+ | `requiredText` | String | n/a | n/a | Text displayed when input validation fails, typically used to indicate an error. |
142
+ | `size` | String | `xs` `md` `lg` | `md` | Sets the size of the input field. |
143
+ | `showError` | Boolean | `true` `false` | `false` | If true, indicates that an error message should be displayed, usually controlled by `setShowError`. |
144
+ | `setShowError` | Function | n/a | n/a | Function to set the visibility of the error message. |
145
+ | `type` | String | n/a | n/a | Text or characters to display at the end of the input, e.g., 'USD' for currency. |
146
+ | `value` | String or Number | n/a | n/a | The value of the input. |
147
+ | `autoFocus ` | Boolean | `true` `false` | `false` | If true, automatically focuses the input when the component mounts. |
148
+ | `customRef ` | React.RefObject, Function, null | n/a | `null` | Custom ref object or callback ref to access the input element. |
149
+ | `suffix ` | string | n/a | n/a | Optional suffix text to display inside the input field. |
150
+ | `focus` | | | | |
141
151
 
142
152
  ### Radio
153
+
143
154
  ```jsx
144
155
  import { Radio } from 'groovinads-ui';
145
156
 
146
157
  <Radio
147
- className={'mb-5'}
148
- id={'radio'}
149
- name={'radio'}
150
- setStatus={(status) => console.log(status)}
151
- status={true}
158
+ className={'mb-5'}
159
+ id={'radio'}
160
+ name={'radio'}
161
+ setStatus={(status) => console.log(status)}
162
+ status={true}
152
163
  >
153
- This is a radio button
154
- </Radio>
164
+ This is a radio button
165
+ </Radio>;
155
166
  ```
156
167
 
157
- | Property | Type | Options | Default | Description |
158
- |--------------|--------------|--------------|--------------|--------------|
159
- | ```className``` | String | n/a | n/a | Additional CSS class names that can be applied to the radio button. Defaults to an empty string. |
160
- | ```id``` | String | n/a | n/a | The unique identifier for the radio button. It is used for linking the label and the radio button.|
161
- | ```name``` | String | n/a | n/a | The name attribute of the radio button. Used to group multiple radios into a single group. |
162
- | ```setStatus``` | Function | n/a | n/a | Function to set the ```status``` of the radio button. This is a handler function typically used for state management. |
163
- | ```status``` | Boolean | ```true``` ```false``` | ```false``` | Indicates whether the radio button is checked (```true```) or unchecked (```false```). Defaults to ```false```. |
168
+ | Property | Type | Options | Default | Description |
169
+ | ----------- | -------- | -------------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
170
+ | `className` | String | n/a | n/a | Additional CSS class names that can be applied to the radio button. Defaults to an empty string. |
171
+ | `id` | String | n/a | n/a | The unique identifier for the radio button. It is used for linking the label and the radio button. |
172
+ | `name` | String | n/a | n/a | The name attribute of the radio button. Used to group multiple radios into a single group. |
173
+ | `setStatus` | Function | n/a | n/a | Function to set the `status` of the radio button. This is a handler function typically used for state management. |
174
+ | `status` | Boolean | `true` `false` | `false` | Indicates whether the radio button is checked (`true`) or unchecked (`false`). Defaults to `false`. |
164
175
 
165
176
  ### Switch
177
+
166
178
  ```jsx
167
179
  import { Switch } from 'groovinads-ui';
168
180
 
169
181
  <Switch
170
- className={'mb-5'}
171
- name={'switch'}
172
- setStatus={(status) => console.log(status)}
173
- status={0}
182
+ className={'mb-5'}
183
+ name={'switch'}
184
+ setStatus={(status) => console.log(status)}
185
+ status={0}
174
186
  >
175
- This is a switch
176
- </Switch>
187
+ This is a switch
188
+ </Switch>;
177
189
  ```
178
190
 
179
- | Property | Type | Options | Default | Description |
180
- |--------------|--------------|--------------|--------------|--------------|
181
- | ```className``` | String | n/a | n/a | Additional CSS class names that can be applied to the switch. Defaults to an empty string. |
182
- | ```icon``` | Boolean | ```true``` ```false``` | ```false``` | If ```true```, displays an icon (play/pause) inside the switch. |
183
- | ```id``` | String | Automatically generated | n/a | The ID is generated automatically based on the component's children, ensuring unique identifiers for accessibility. |
184
- | ```name``` | String | n/a | n/a | The name attribute of the switch. Used to identify the form data after it's submitted. |
185
- | ```setStatus``` | Function | n/a | n/a | Function to set the ```status``` of the switch. This is a handler function typically used for state management. |
186
- | ```status``` | Number / Boolean | ```0``` ```1``` ```true``` ```false``` | ```0``` | Indicates whether the switch is on (```1``` / ```true```) or off (```0``` / ```false```). Defaults to ```0```. |
187
- | ```switchPosition``` | String |```start``` ```end``` | ```start``` | Determines the position of the switch relative to the label. Defaults to ```start```. |
191
+ | Property | Type | Options | Default | Description |
192
+ | ---------------- | ---------------- | ----------------------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
193
+ | `className` | String | n/a | n/a | Additional CSS class names that can be applied to the switch. Defaults to an empty string. |
194
+ | `icon` | Boolean | `true` `false` | `false` | If `true`, displays an icon (play/pause) inside the switch. |
195
+ | `id` | String | Automatically generated | n/a | The ID is generated automatically based on the component's children, ensuring unique identifiers for accessibility. |
196
+ | `name` | String | n/a | n/a | The name attribute of the switch. Used to identify the form data after it's submitted. |
197
+ | `setStatus` | Function | n/a | n/a | Function to set the `status` of the switch. This is a handler function typically used for state management. |
198
+ | `status` | Number / Boolean | `0` `1` `true` `false` | `0` | Indicates whether the switch is on (`1` / `true`) or off (`0` / `false`). Defaults to `0`. |
199
+ | `switchPosition` | String | `start` `end` | `start` | Determines the position of the switch relative to the label. Defaults to `start`. |
200
+ | `swichPosition` | | | | |
188
201
 
189
202
  ### Textarea
203
+
190
204
  ```jsx
191
205
  import { Textarea } from 'groovinads-ui';
192
206
 
193
207
  <Textarea
194
- className={'mb-5'}
195
- label={'Textarea label'}
196
- name={'textarea'}
197
- requiredText={'This field is required'}
198
- setShowError={(showError) => console.log(showError)}
199
- />
208
+ className={'mb-5'}
209
+ label={'Textarea label'}
210
+ name={'textarea'}
211
+ requiredText={'This field is required'}
212
+ setShowError={(showError) => console.log(showError)}
213
+ />;
200
214
  ```
201
215
 
202
- | Property | Type | Options | Default | Description |
203
- |--------------|--------------|--------------|--------------|--------------|
204
- | ```className``` | String | n/a | n/a | Additional CSS class names that can be applied to the textarea. Defaults to an empty string. |
205
- | ```helpText``` | String | n/a | n/a | Optional text under the textarea to guide the user or provide additional information. |
206
- | ```label``` | String | n/a | ```Label``` | Text label for the textarea field. Also used as the ```id``` attribute of the textarea for accessibility purposes. |
207
- | ```name``` | String | n/a | n/a | The name attribute of the textarea. Used to identify the form data after it's submitted.|
208
- | ```onChange``` | Function | n/a | n/a | Function to handle changes to the textarea's value. Typically used to update state. |
209
- | ```requiredText``` | String | n/a | n/a | ext displayed when textarea validation fails, typically used to indicate an error. |
210
- | ```showError``` | Boolean | ```true``` ```false``` | ```false``` | If true, indicates that an error message should be displayed, usually controlled by ```setShowError```. |
211
- | ```setShowError``` | Function | n/a | n/a | Function to set the visibility of the error message. |
212
- | ```size``` | String | ```xs``` ```md``` ```lg``` | ```md``` | Sets the size of the textarea field. |
213
- | ```value``` | String | n/a | n/a | The value of the textarea |
216
+ | Property | Type | Options | Default | Description |
217
+ | -------------- | -------- | -------------- | ------- | -------------------------------------------------------------------------------------------------------------- |
218
+ | `className` | String | n/a | n/a | Additional CSS class names that can be applied to the textarea. Defaults to an empty string. |
219
+ | `helpText` | String | n/a | n/a | Optional text under the textarea to guide the user or provide additional information. |
220
+ | `label` | String | n/a | `Label` | Text label for the textarea field. Also used as the `id` attribute of the textarea for accessibility purposes. |
221
+ | `name` | String | n/a | n/a | The name attribute of the textarea. Used to identify the form data after it's submitted. |
222
+ | `onChange` | Function | n/a | n/a | Function to handle changes to the textarea's value. Typically used to update state. |
223
+ | `requiredText` | String | n/a | n/a | ext displayed when textarea validation fails, typically used to indicate an error. |
224
+ | `showError` | Boolean | `true` `false` | `false` | If true, indicates that an error message should be displayed, usually controlled by `setShowError`. |
225
+ | `setShowError` | Function | n/a | n/a | Function to set the visibility of the error message. |
226
+ | `size` | String | `xs` `md` `lg` | `md` | Sets the size of the textarea field. |
227
+ | `value` | String | n/a | n/a | The value of the textarea |
214
228
 
215
229
  ## Labels
230
+
216
231
  ### LoginSource
232
+
217
233
  ```jsx
218
234
  import { LoginSource } from 'groovinads-ui';
219
235
 
220
- <LoginSource logo={'groovinads'} />
236
+ <LoginSource logo={'groovinads'} />;
221
237
  ```
222
238
 
223
- | Property | Type | Options | Default | Description |
224
- |--------------|--------------|--------------|--------------|--------------|
225
- | ```logo``` | String | ```groovinads``` ```google``` ```microsoft``` ```linkedin``` | ```groovinads``` | Specifies the logo to be displayed on the login source button. This indicates the login method used. |
239
+ | Property | Type | Options | Default | Description |
240
+ | -------- | ------ | -------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------- |
241
+ | `logo` | String | `groovinads` `google` `microsoft` `linkedin` | `groovinads` | Specifies the logo to be displayed on the login source button. This indicates the login method used. |
226
242
 
227
243
  ### PillComponent
244
+
228
245
  ```jsx
229
246
  import { PillComponent } from 'groovinads-ui';
230
247
 
231
- <PillComponent color='green'>
232
- Active
233
- </PillComponent>
248
+ <PillComponent color='green'>Active</PillComponent>;
234
249
  ```
235
250
 
236
- | Property | Type | Options | Default | Description |
237
- |--------------|--------------|--------------|--------------|--------------|
238
- | ```className``` | String | n/a | n/a | Additional CSS class names that can be applied to the pill. Defaults to an empty string. |
239
- | ```color``` | String | ```blue``` ```danger``` ```dark``` ```green``` ```light``` ```midtone``` ```neutral``` ```red``` ```yellow``` | ```neutral``` | Specifies the background color of the pill. This helps to differentiate pills by context or severity. |
240
- | ```closeButton``` | Boolean | ```true``` ```false``` | ```false``` | If true, a close button is displayed on the pill, allowing it to be dismissed.|
241
- | ```onClick``` | Function | n/a | n/a | Function to handle the click event on the close button. This property is only relevant if ```closeButton``` is ```true```. |
242
- | ```children``` | Node | n/a | n/a | Content to be displayed inside the pill component. |
251
+ | Property | Type | Options | Default | Description |
252
+ | ------------- | -------- | ------------------------------------------------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ |
253
+ | `className` | String | n/a | n/a | Additional CSS class names that can be applied to the pill. Defaults to an empty string. |
254
+ | `color` | String | `blue` `danger` `dark` `green` `light` `midtone` `neutral` `red` `yellow` | `neutral` | Specifies the background color of the pill. This helps to differentiate pills by context or severity. |
255
+ | `closeButton` | Boolean | `true` `false` | `false` | If true, a close button is displayed on the pill, allowing it to be dismissed. |
256
+ | `onClick` | Function | n/a | n/a | Function to handle the click event on the close button. This property is only relevant if `closeButton` is `true`. |
257
+ | `children` | Node | n/a | n/a | Content to be displayed inside the pill component. |
243
258
 
244
259
  ### StatusIcon
260
+
245
261
  ```jsx
246
262
  import { StatusIcon } from 'groovinads-ui';
247
263
 
248
- <StatusIcon status={1} />
264
+ <StatusIcon status={1} />;
249
265
  ```
250
- | Property | Type | Options | Default | Description |
251
- |--------------|--------------|--------------|--------------|--------------|
252
- | ```animated``` | Boolean | ```true``` ```false``` | ```false``` | If true, the icon will include animation effects on active status. Defaults to false, indicating no animation. |
253
- | ```className``` | String | n/a | n/a | Additional CSS class names that can be applied to the status icon. Defaults to an empty string. |
254
- | ```status``` | Number | ```0``` ```1``` ```3``` | ```0``` | Specifies the visual state of the icon: ```0``` for inactive, ```1``` for active, and ```3``` for active with a warning. |
266
+
267
+ | Property | Type | Options | Default | Description |
268
+ | ----------- | ------- | -------------- | ------- | -------------------------------------------------------------------------------------------------------------- |
269
+ | `animated` | Boolean | `true` `false` | `false` | If true, the icon will include animation effects on active status. Defaults to false, indicating no animation. |
270
+ | `className` | String | n/a | n/a | Additional CSS class names that can be applied to the status icon. Defaults to an empty string. |
271
+ | `status` | Number | `0` `1` `3` | `0` | Specifies the visual state of the icon: `0` for inactive, `1` for active, and `3` for active with a warning. |
272
+
255
273
  ### DropdownComponent
274
+
256
275
  ```jsx
257
276
  import { DropdownComponent } from 'groovinads-ui';
258
277
 
259
- <DropdownComponent autoClose={false} className="custom-class" drop="down">
260
- {/* Child components go here */}
261
- </DropdownComponent>
278
+ <DropdownComponent autoClose={false} className='custom-class' drop='down'>
279
+ {/* Child components go here */}
280
+ </DropdownComponent>;
262
281
  ```
263
- | Property | Type | Options | Default | Description |
264
- |--------------|--------------|--------------|--------------|--------------|
265
- | ```autoClose``` | ```Boolean``` ```String``` |```true``` ```false``` ```outside``` ```inside``` | false | Determines the auto-close behavior of the dropdown. |
266
- | ```children``` | Node | n/a | n/a | Child components to be rendered inside the dropdown. |
267
- | ```className``` | String | n/a | string | Additional CSS class names. |
268
- | ```drop``` | String | ```up``` ```down``` | n/a | Specifies the direction in which the dropdown should open. |
269
- | ```fullWidth``` | Boolean| n/a | n/a | Function to handle toggle state changes. |
270
- | ```overflow``` | Boolean | ```true``` ```false``` | false | Whether to enable overflow strategy for the dropdown.|
271
- | ```aling``` | String | ```start``` ```end``` | ```star``` | Alignment of the dropdown menu. |
272
- | ```show``` | Boolean | ```true``` ```false``` | n/a | Controls the visibility of the dropdown. |
282
+
283
+ | Property | Type | Options | Default | Description |
284
+ | ----------- | ------------------ | --------------------------------- | ------- | ---------------------------------------------------------- |
285
+ | `autoClose` | `Boolean` `String` | `true` `false` `outside` `inside` | false | Determines the auto-close behavior of the dropdown. |
286
+ | `children` | Node | n/a | n/a | Child components to be rendered inside the dropdown. |
287
+ | `className` | String | n/a | string | Additional CSS class names. |
288
+ | `drop` | String | `up` `down` | n/a | Specifies the direction in which the dropdown should open. |
289
+ | `fullWidth` | Boolean | n/a | n/a | Function to handle toggle state changes. |
290
+ | `overflow` | Boolean | `true` `false` | false | Whether to enable overflow strategy for the dropdown. |
291
+ | `aling` | String | `start` `end` | `star` | Alignment of the dropdown menu. |
292
+ | `show` | Boolean | `true` `false` | n/a | Controls the visibility of the dropdown. |
293
+
273
294
  ### DropdownFilter
295
+
274
296
  ```jsx
275
297
  import { DropdownFilter } from 'groovinads-ui';
276
298
 
277
- <DropdownFilter
278
- title="Filter"
279
- valuesSelected={['Value1', 'Value2']}
280
- setValuesSelected={(newValues) => console.log(newValues)}
281
- values={['Value1', 'Value2', 'Value3']}
282
- menuType="simple"
283
- locked={false}
284
- onRemoveFilter={() => console.log('Filter removed')}
285
- show={true}
286
- onToggle={(isOpen) => console.log(isOpen)}
287
- overflow={false}
288
- className="custom-class"
289
- />
299
+ <DropdownFilter
300
+ title='Filter'
301
+ valuesSelected={['Value1', 'Value2']}
302
+ setValuesSelected={(newValues) => console.log(newValues)}
303
+ values={['Value1', 'Value2', 'Value3']}
304
+ menuType='simple'
305
+ locked={false}
306
+ onRemoveFilter={() => console.log('Filter removed')}
307
+ show={true}
308
+ onToggle={(isOpen) => console.log(isOpen)}
309
+ overflow={false}
310
+ className='custom-class'
311
+ />;
290
312
  ```
291
- | Property | Type | Options | Default | Description |
292
- |--------------|--------------|--------------|--------------|--------------|
293
- | ```title``` | String | n/a | n/a | Title of the dropdown filter. |
294
- | ```valuesSelected```| Array | n/a | [] | Available values for selection. |
295
- | ```setValuesSelected``` | Function | n/a | n/a | AFunction to set the selected values. |
296
- | ```values``` | Array | n/a | [] | Available values for selection. |
297
- | ```menuType``` | String | ```simple``` ```selecion``` | simple | Type of dropdown menu. |
298
- | ```locked``` | Boolean| ```true``` ```false```| false | If true, the filter cannot be removed. |
299
- | ```onRemoveFilter``` | Function | n/a | n/a | Function to handle filter removal. |
300
- | ```show``` | Boolean | ```true``` ```false``` | n/a | Controls the visibility of the dropdown. |
301
- | ```onToggle``` | Funtion | n/a | n/a | Function to handle toggle state changes. |
302
- | ``` overflow``` | Boolean | ```true``` ```false``` | false | Whether to enable overflow strategy for the dropdown. |
303
- | ```className``` | String | n/a | '' | Additional CSS class names. |
313
+
314
+ | Property | Type | Options | Default | Description |
315
+ | ------------------- | -------- | ------------------- | ------- | ----------------------------------------------------- |
316
+ | `title` | String | n/a | n/a | Title of the dropdown filter. |
317
+ | `valuesSelected` | Array | n/a | [] | Available values for selection. |
318
+ | `setValuesSelected` | Function | n/a | n/a | AFunction to set the selected values. |
319
+ | `values` | Array | n/a | [] | Available values for selection. |
320
+ | `menuType` | String | `simple` `selecion` | simple | Type of dropdown menu. |
321
+ | ````locked``` | Boolean | `true` `false` | false | If true, the filter cannot be removed.|
322
+ | `onRemoveFilter` | Function | n/a | n/a | Function to handle filter removal. |
323
+ | `show` | Boolean | `true` `false` | n/a | Controls the visibility of the dropdown. |
324
+ | `onToggle` | Funtion | n/a | n/a | Function to handle toggle state changes. |
325
+ | `overflow` | Boolean | `true` `false` | false | Whether to enable overflow strategy for the dropdown. |
326
+ | `className` | String | n/a | '' | Additional CSS class names. |
327
+
304
328
  ### DropdownMultiSelect
329
+
305
330
  ```jsx
306
331
  import { DropdownMultiSelect } from 'groovinads-ui';
332
+ import React, { useState } from 'react';
333
+
334
+ const MultiSelectComponent = () => {
335
+ const [selectedValues, setSelectedValues] = useState([]);
336
+ const [show, setShow] = useState(false);
337
+
338
+ const handleToggle = () => setShow(prevShow => !prevShow);
339
+
340
+ const [filters] = useState([
341
+ { id: 1, name: 'Filter 1', showStatus: '1' },
342
+ { id: 2, name: 'Filter 2', showStatus: '0' },
343
+ { id: 3, name: 'Filter 3', showStatus: '1' },
344
+ { id: 4, name: 'Filter 4', showStatus: '0' },
345
+ { id: 5, name: 'Filter 5', showStatus: '0' },
346
+ { id: 6, name: 'Filter 6', showStatus: '2' },
347
+ ]);
348
+
349
+ return (
350
+ <DropdownMultiSelect
351
+ valuesSelected={selectedValues}
352
+ setValuesSelected={setSelectedValues}
353
+ values={filters}
354
+ show={show}
355
+ onToggle={handleToggle}
356
+ object={true}
357
+ nameKey='name'
358
+ idKey='id'
359
+ inputLabel='Filters'
360
+ focus={show}
361
+ buttonVariant="primary"
362
+ nowrap={true}
363
+ />
364
+ );
365
+ };
366
+
367
+ export default MultiSelectComponent;
368
+
369
+ ```
370
+
371
+ | Property | Type | Options | Default | Description |
372
+ | ------------------- | -------- | ------------------- | ------- | ----------------------------------------------------- |
373
+ | ```autoClose```| Boolean String | `true` `false` `inside` `outside` | `false` | Controls when the dropdown menu closes. If `false`, the menu does not close on click. If `true`, it closes when clicking an item in the list or outside the menu. If `inside`, it closes when clicking an item in the list but not when clicking outside the menu. If `outside`, it closes when clicking outside the menu but not when clicking an item in the list.|
374
+ | ```className```| String | n/a | n/a | Adds custom CSS properties to style the component.|
375
+ | `show` | Boolean | `true` `false` | n/a | Controls the visibility of the dropdown.|
376
+ |```drop```| String | `up` `down` | n/a | Specifies the direction in which the dropdown should open.|
377
+ | ```inputLabel```| String | n/a | 'Search' | Allows customizing the label for the input field within the dropdown menu. |
378
+ | ```object```| Boolean| `true` `false` | `false` | `object` determines whether the values in values are objects (with properties `nameKey` and `idKey`) or simple values (strings or numbers).|
379
+ | ```nameKey``` | String | n/a | n/a | Defines the key that will be used in the object to display the item's name. |
380
+ | ```idKey```| String | n/a | n/a | Defines the key used in the object to find the item’s ID, allowing for the identification and handling of selected items and other operations within the component. |
381
+ | `searchLabel` | String | N/A | 'Search' | Label for the search input field. |
382
+ | ```onToggle``` | Function | n/a | n/a | Contains the handleToggle function which handles changing the show state between true and false, toggling the visibility of the menu. |
383
+ |```overflow```| Bolean |`true` `false` | false | Whether to enable overflow strategy for the dropdown. |
384
+ | `valuesSelected` | Array | n/a | [ ] | Represents the state of the values that are currently selected. |
385
+ | `values` | Array | n/a | [ ] | Available values for selection. |
386
+ | `idInPill` | Boolean | `true` `false` | false | If true, ID will be shown in the pill component. |
387
+ | showStatus | String | n/a | string | Filter items by status if applicable. |
388
+ | ```focus``` | Boolean | `true` `false` | false | If true, the search input will be focused when dropdown is shown. |
389
+ | `buttonVariant` | String | `input` | `primary` `secondary` `terciary` `outline` | Defines the visual style of the button, used to toggle the dropdown menu. |
390
+ |`nowrap`| Boolean | `true` `false` | false | If true, the content will be displayed on a single line. If it exceeds the width, a scroll will be shown. If false, it will fit the width of the button. If it exceeds, the content will be displayed on multiple lines.|
391
+
392
+ ### Alert
393
+
394
+ ```jsx
395
+ import { Alert } from 'groovinads-ui';
396
+
397
+ <Alert
398
+ icon={true}
399
+ animation={false}
400
+ type='info'
401
+ size='md'
402
+ onClose={null}
403
+ className=''
404
+ >
405
+ // Children content goes here
406
+ </Alert>;
407
+ ```
408
+
409
+ | Property | Type | Options | Default | Description |
410
+ | ----------- | -------- | ----------------------------------- | ------- | ------------------------------------------- |
411
+ | `con` | Boolean | `true` `false` | true | Displays an icon in the alert. |
412
+ | `animation` | Boolean | `true` `false` | false | Adds animation to the alert. |
413
+ | `type` | String | `info` `success` `warning` `danger` | info | Type of alert to display. |
414
+ | `size` | String | `xs` `md` `lg` `md` | | Size of the alert. |
415
+ | `onClose` | Function | | null | Callback function when the alert is closed. |
416
+ | `children` | Node | | | Content inside the alert. |
417
+ | `className` | String | | "" | Additional CSS class for the alert. |
418
+
419
+ ### Icon
420
+
421
+ ```jsx
422
+ import { Icon } from 'groovinads-ui';
423
+
424
+ <Icon
425
+ style='solid'
426
+ scale={1}
427
+ iconName='user-bounty-hunter'
428
+ className=''
429
+ animation=''
430
+ />;
431
+ ```
432
+
433
+ | Property | Type | Options | Default | Description |
434
+ | ----------- | ------ | ----------------------------------------------------------------------- | --------------- | ---------------------------------- | ----------------- |
435
+ | `style` | String | `light` `solid` `regular` `thin` `duotone` `sharp` | solid | Style of the icon. |
436
+ | `scale` | Number | 0.7, 1, 2, 3, 4 1 | | Scale of the icon. |
437
+ | `iconName` | String | Any | valid icon name | "user-bounty-hunter" | Name of the icon. |
438
+ | `className` | String | | "" | Additional CSS class for the icon. |
439
+ | `animation` | String | `beat` `fade` `beat-fade` `bounce` `flip` `shake` `spin` `spin-reverse` | "" | Animation for the icon. |
440
+
441
+ # PillComponent
442
+
443
+ ```jsx
444
+ import { PillComponent } from 'groovinads-ui';
445
+
446
+ <PillComponent
447
+ className=''
448
+ color='neutral'
449
+ closeButton={false}
450
+ onClick={() => {}}
451
+ >
452
+ // Children content goes here
453
+ </PillComponent>;
454
+ ```
455
+
456
+ | Property | Type | Options | Default | Description |
457
+ | ------------- | -------- | ------------------------------------------------------------------------- | ------- | ------------------------------------------- |
458
+ | `color` | String | `green` `yellow` `red` `danger` `neutral` `blue` `light` `midtone` `dark` | neutral | Color of the pill. |
459
+ | `closeButton` | Boolean | `true` `false` | false | Displays a close button inside the pill. |
460
+ | `onClick` | Function | | | Callback function when the pill is clicked. |
461
+ | `children` | Node | | | Content inside the pill. |
462
+ | `className` | String | | "" | Additional CSS class for the pill. |
463
+
464
+ # Spinner
307
465
 
308
- <DropdownMultiSelect
309
- autoClose={false}
310
- className="custom-class"
311
- drop="down"
312
- inputLabel="Select items"
313
- object={false}
314
- nameKey="name"
315
- idKey="id"
316
- searchLabel="Search"
317
- onToggle={(isOpen) => console.log(isOpen)}
318
- overflow={false}
319
- valuesSelected={[]}
320
- setValuesSelected={(newValues) => console.log(newValues)}
321
- values={['Item1', 'Item2', 'Item3']}
322
- show={true}
323
- idInPill={false}
324
- showStatus=""
325
- focus={false}
326
- />
466
+ ```jsx
467
+ import { Spinner } from 'groovinads-ui';
468
+
469
+ <Spinner scale={1} className='' />;
470
+ ```
471
+
472
+ | Property | Type | Options | Default | Description |
473
+ | --------- | ------ | ------------------------- | ------- | ------------------------------------- |
474
+ | `scale` | Number | `0.7` `1` `2` `3` `4` `1` | | Scale of the spinner. |
475
+ | className | String | | "" | Additional CSS class for the spinner. |
476
+
477
+ # StatusIcon
478
+
479
+ ```jsx
480
+ import { StatusIcon } from 'groovinads-ui';
481
+
482
+ <StatusIcon animated={false} className='' status={0} />;
327
483
  ```
328
- | Property | Type | Options | Default | Description |
329
- |--------------|--------------|--------------|--------------|--------------|
330
- | ```autoClose``` | ```Boolean``` ```String``` | ```true``` ```false```` ```outside``` ```inside``` | false | Determines the auto-close behavior of the dropdown. |
331
484
 
485
+ | Property | Type | Options | Default | Description |
486
+ | ----------- | ------- | -------------- | ------- | ----------------------------------------- |
487
+ | `animated` | Boolean | `true` `false` | false | Adds animation to the status icon. |
488
+ | `className` | String | | "" | Additional CSS class for the status icon. |
489
+ | `status` | Number | `0` `1` `3` | `0` | Status indicator (e.g., active, warning). |
332
490
 
491
+ # Navbar
492
+
493
+ ```jsx
494
+ import { Navbar } from 'groovinads-ui';
495
+
496
+ const NavbarComponent = () => {
497
+ const [show, setShow] = useState(false);
498
+
499
+ return (
500
+ <div>
501
+ <Button
502
+ onClick={() => setShow(prev => !prev)}
503
+ >
504
+ Toggle Sidebar
505
+ </Button>
506
+ <Navbar
507
+ logoUrl='https://ui.groovinads.com/assets/groovinads-logo.svg' // custom url
508
+ showDeckMenu={true}
509
+ showUserMenu={true}
510
+ show={show}
511
+ setShow={setShow}
512
+ >
513
+ <div>Custom Content</div>
514
+ </Navbar>
515
+ </div>
516
+ );
517
+ };
518
+
519
+ export default NavbarComponent;
520
+ ```
521
+
522
+ | Property | Type | Options | Default | Description |
523
+ | ----------- | ------- | -------------- | ------- | ----------------------------------------- |
524
+ | `logoUrl` | String | n/a | `appLogo` | Accepts a URL to customize the logo image. The default is the GroovinAdds logo (`appLogo`).|
525
+ | `showDeckMenu` | Boolean | `true` `false` | false | Controls the visibility of the deck menu in the navbar. If `true`, is displayed; if `false`, it is hidden.|
526
+ | `showUserMenu` | Boolean | `true` `false` | false | Controls the visibility. If true, the user menu is shown; if false, it is hidden. |
527
+ | `children` | React | Node | n/a | Permits inserting custom content within the Navbar. |
528
+ | ```show``` | Bolean | `true` `false` | n/a | Controla la visibilidad del sidebar. Si es true, el sidebar se muestra; si es false, está oculto. |
529
+ |setShow | Function | n/a | n/a | Función para alternar la visibilidad, el estado entre visible y oculto.
530
+
531
+ # Sidebar
532
+
533
+ ```jsx
534
+ import { Sidebar } from 'groovinads-ui';
535
+ import React, { useState } from 'react';
536
+
537
+ const SidebarComponent = () => {
538
+ const [show, setShow] = useState(false);
539
+
540
+ return (
541
+ <div>
542
+ <button onClick={() => setShowSidebar(prev => !prev)}>
543
+ Toggle Sidebar
544
+ </button>
545
+ <Sidebar
546
+ customLinks={[
547
+ {
548
+ title: 'sectionTitle',
549
+ links: [
550
+ {
551
+ name: 'Home',
552
+ icon: 'home',
553
+ url: '/example-url',
554
+ children: [ // the section link item will be an item with expansion
555
+ name: 'Nested Link Name',
556
+ url: '/nested-link-url',
557
+ ],
558
+ },
559
+ ],
560
+ },
561
+ {
562
+ title: 'sectionCustom2', // non-custom
563
+ backData: true,
564
+ },
565
+ ]}
566
+ defaultOpened={false}
567
+ show={show}
568
+ />
569
+ </div>
570
+ );
571
+ };
572
+
573
+ export default SidebarComponent;
574
+ ```
575
+
576
+ | Property | Type | Options | Default | Description |
577
+ | --------------- | ------- | -------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
578
+ | ```api```| string | 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. |
579
+ | ```customLinks``` | Array | 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 be contain the property `backData={true}`›.⁠ |
580
+ | ```defaultOpened``` | Boolean | `false` `true` | false | Determines whether the sidebar is initially opened or closed.
581
+ | ```show``` | Bolean | `true` `false` | false | Controls the visibility of the sidebar from an external state. If true, the sidebar is displayed; if false, it is hidden.| |
582
+
583
+ <!-- COMPLETAR TODO -->
584
+
585
+ # Stepper
586
+
587
+ ```jsx
588
+ import { Stepper } from 'groovinads-ui';
589
+
590
+ <Stepper list={['Step 1', 'Step 2', 'Step 3']} current={1} />;
591
+ ```
592
+
593
+ | Property | Type | Options | Default | Description |
594
+ | --------- | ------ | ------- | ------- | -------------------------- |
595
+ | `list` | Array | - | - | Array of steps. |
596
+ | `current` | Number | - | - | Index of the current step. |
597
+
598
+ # Tabnav
599
+
600
+ ```jsx
601
+ import { Tabnav } from 'groovinads-ui';
602
+
603
+ <Tabnav tabs={['Tab 1', 'Tab 2', 'Tab 3']} activeTab={0} />;
604
+ ```
605
+
606
+ | Property | Type | Options | Default | Description |
607
+ | ----------- | ------ | ------- | ------- | ------------------------ |
608
+ | `tabs` | Array | - | [] | Array of tab names. |
609
+ | `activeTab` | Number | - | - | Index of the active tab. |
610
+
611
+ # ToastComponent
612
+
613
+ ```jsx
614
+ import { ToastComponent } from 'groovinads-ui';
615
+
616
+ <ToastComponent
617
+ variant='info'
618
+ autoClose={true}
619
+ position='bottom-start'
620
+ className='custom-toast'
621
+ >
622
+ Toast Message
623
+ </ToastComponent>;
624
+ ```
625
+
626
+ | Property | Type | Options | Default | Description |
627
+ | ----------- | ---------- | ---------------------------------- | --------- | ------------------------------------------ | ---------------------- |
628
+ | `variant` | String | `info` `success` `warning` `error` | info | Type of toast. |
629
+ | `autoClose` | Boolean | `true` `false` | true | Determines whether the toast auto-closes. |
630
+ | `position` | String | `top-start` | `top-end` | `bottom-start` `bottom-end` `bottom-start` | Position of the toast. |
631
+ | `children` | React Node | - | - | Custom content inside the toast. |
632
+ | `className` | String | - | - | Custom class name for the toast. |
633
+
634
+ # ProgressToast
635
+
636
+ ```jsx
637
+ import { ProgressToast } from 'groovinads-ui';
638
+
639
+ <ProgressToast
640
+ variant='upload'
641
+ status='in-progress'
642
+ cancelButton={true}
643
+ onCancel={() => console.log('Cancelled')}
644
+ position='bottom-start'
645
+ currentProgress={50}
646
+ />;
647
+ ```
648
+
649
+ | Property | Type | Options | Default | Description |
650
+ | ----------------- | -------- | ------------------------------------------------- | ------------ | ------------------------------------------- | --------------------------- |
651
+ | variant | String | `upload` | `processing` | Type of progress toast. |
652
+ | `status` | String | `in-progress` `error` | in-progress | Current status of the progress. |
653
+ | `cancelButton` | Boolean | `true` `false` | false | Determines whether to show a cancel button. |
654
+ | `onCancel` | Function | - | - | Callback | function for cancel action. |
655
+ | `position` | String | `top-start` `top-end` `bottom-start` `bottom-end` | bottom-start | Position of the progress toast. |
656
+ | `currentProgress` | Number | - | - | Current progress value (0-100) |
333
657
 
334
658
  # Customization
659
+
335
660
  Currently, the components are not customizable.
336
661
 
337
662
  # Contributions
663
+
338
664
  This library is for internal use by Groovinads and is not open to external contributions.
339
665
 
340
666
  ---