groovinads-ui

v2.1.5

Published

23 days ago

Groovinads UI is a React component library designed exclusively for Groovinads applications. It provides ready-to-use UI elements styled according to Groovinads design guidelines to facilitate rapid development.

0High
0Medium
0Low

pablo.pinero

css sass groovinads responsive front-end components

Included components

The library includes the following components:

Context Providers:
- ThemeProvider: For managing application theme (light, dark, system).
Buttons:
- Button: For user actions.
Dropdowns:
- DropdownComponent: For dropdown menus.
- DropdownDatePicker: For filter dropdowns.
- DropdownFilter: For filter dropdowns.
- DropdownMultiSelect: For dynamically managing and displaying keywords.
- DropdownSimpleDatePicker: For filter dropdowns.
Inputs:
- Checkbox: For multiple option selections.
- Dropzone: For drag-and-drop file uploads with progress tracking.
- Input: For user data entry.
- InputChip: For dynamically managing and displaying keywords.
- InputEmail: For managing email lists.
- MultiValueInput: For adding multiple values via paste or one-by-one entry.
- Radio: For exclusive selections.
- Slider: For selecting values using a slider control.
- Switch: For toggle states.
- TemplateInput: For building message templates with text and variable pills.
- Textarea: For multiline text input.
Labels:
- Alert: For displaying alerts.
- BlockIcon: For displaying icons with block containers.
- Card: For containing and grouping related content.
- EditableContent: For inline editing of text content.
- Icon: For displaying icons.
- LoginSource: For show icons of login sources.
- PillComponent: For displaying information.
- ProgressBar: For displaying progress indicators.
- Spinner: For loading animations.
- StatusIcon: For displaying status icons.
Modals:
- ModalComponent: For displaying modals.
Navigation:
- Accordion: For collapsible content sections.
- Aside: For displaying aside panels.
- Navbar: For top navigation bars.
- PageHeader: For page detail headers with breadcrumbs, title, actions, and custom content.
- Pagination: For pagination of tables.
- Sidebar: For side navigation bars.
- Stepper: For step-by-step navigation.
- Tabnav: For tab navigation.
Tables:
- TableSkeleton: For displaying table skeletons.
Toasts:
- ToastComponent: For displaying notifications.
- ToastProgress: For displaying progress notifications.

Requirements

The component styles must be included from: https://ui.groovinads.com/2.0.0/styles.min.css.
npm (v20 or higher).
Font Awesome icons must be included in the project.

⚠️ Important: Use of additional CSS libraries

When utilizing external libraries that require additional CSS styles, it is important to ensure that these styles are not added directly to individual components. 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/2.0.0/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.

<!-- Example of how to include additional CSS styles in index.html -->
<head>
	<!-- Other CSS files -->
	<link rel="stylesheet" href="https://example.com/external-library.css" />
	<!-- Groovinads CSS file, ensure it is the last to be loaded -->
	<link rel="stylesheet" href="https://ui.groovinads.com/2.0.0/styles.min.css" />
</head>

Installation

1. Configure FontAwesome Pro Access

This library requires FontAwesome Pro packages. Before installing, you need to configure access to the FontAwesome Pro registry.

For Yarn Berry (v2+) users:

Create or update .yarnrc.yml in your project root:

npmScopes:
  fortawesome:
    npmAlwaysAuth: true
    npmRegistryServer: "https://npm.fontawesome.com/"
    npmAuthToken: "YOUR_FONTAWESOME_TOKEN_HERE"
  awesome.me:
    npmAlwaysAuth: true
    npmRegistryServer: "https://npm.fontawesome.com/"
    npmAuthToken: "YOUR_FONTAWESOME_TOKEN_HERE"

For npm and Yarn Classic (v1.x) users:

Create or update .npmrc in your project root:

@fortawesome:registry=https://npm.fontawesome.com/
@awesome.me:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=YOUR_FONTAWESOME_TOKEN_HERE

Replace YOUR_FONTAWESOME_TOKEN_HERE with your FontAwesome Pro token (available at https://fontawesome.com/account).

Note: This library is for internal use only and requires a valid FontAwesome Pro license.

Important: Check your Yarn version with yarn --version:

If you see 1.x.x, use the .npmrc file
If you see 2.x.x or higher, use the .yarnrc.yml file

2. Install Required Dependencies

This library requires several peer dependencies. Install them first:

# For npm users
npm install @awesome.me/kit-YOUR_CODE_HERE@^1.0.3 \
  @fortawesome/fontawesome-svg-core@^7.1.0 \
  @fortawesome/free-brands-svg-icons@^7.1.0 \
  @fortawesome/duotone-regular-svg-icons@^7.1.0 \
  @fortawesome/pro-duotone-svg-icons@^7.1.0 \
  @fortawesome/pro-regular-svg-icons@^7.1.0 \
  @fortawesome/pro-solid-svg-icons@^7.1.0 \
  @fortawesome/react-fontawesome@^3.1.1 \
  react-datepicker@^7.3.0 \
  react-loading-skeleton@^3.5.0 \
  react-responsive@^10.0.0

# For Yarn users
yarn add @awesome.me/kit-YOUR_CODE_HERE@^1.0.3 \
  @fortawesome/fontawesome-svg-core@^7.1.0 \
  @fortawesome/free-brands-svg-icons@^7.1.0 \
  @fortawesome/duotone-regular-svg-icons@^7.1.0 \
  @fortawesome/pro-duotone-svg-icons@^7.1.0 \
  @fortawesome/pro-regular-svg-icons@^7.1.0 \
  @fortawesome/pro-solid-svg-icons@^7.1.0 \
  @fortawesome/react-fontawesome@^3.1.1 \
  react-datepicker@^7.3.0 \
  react-loading-skeleton@^3.5.0 \
  react-responsive@^10.0.0

3. Install the Library

To use the Groovinads UI library in your project, run the following command:

yarn add groovinads-ui

Usage

Here are examples of how to use the components included in the Groovinads UI library:

Context Providers

ThemeProvider

The ThemeProvider manages the application's theme system, supporting three modes: 'light', 'dark', and 'default' (system preference).

Features

Automatic theme persistence: Theme preference is saved to browser cookies
Cross-subdomain sharing: Optional rootDomain prop enables theme sharing across subdomains
System integration: 'default' mode respects the operating system theme
SSR-safe: Works correctly with Server-Side Rendering
Auto-sync with DOM: Automatically sets data-theme attribute on document.documentElement

Basic Usage

Wrap your application root with the ThemeProvider:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ThemeProvider } from 'groovinads-ui';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

Cross-Subdomain Theme Sharing

By default, theme preferences are automatically shared across all Groovinads subdomains (.groovinads.com):

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ThemeProvider } from 'groovinads-ui';
import App from './App';

// Default behavior - shares theme across all *.groovinads.com subdomains
ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

Custom Domain or Disable Cross-Subdomain:

// Custom domain
<ThemeProvider rootDomain=".example.com">
  <App />
</ThemeProvider>

// Disable cross-subdomain (current domain only)
<ThemeProvider rootDomain={null}>
  <App />
</ThemeProvider>

Important Notes:

Default: .groovinads.com - theme is shared across all subdomains
The rootDomain should start with a dot (.) to work across all subdomains
On localhost, the domain attribute is automatically omitted for local development
Cookie is stored with a 1-year expiration and SameSite=Lax for security

Using the useTheme Hook

Access and control the theme from any component:

import React from 'react';
import { useTheme } from 'groovinads-ui';

function ThemeSelector() {
  const { theme, setTheme, isLight, isDark, isDefault } = useTheme();

  return (
    <div>
      <p>Current theme: {theme}</p>
      <button onClick={() => setTheme('light')}>Light</button>
      <button onClick={() => setTheme('dark')}>Dark</button>
      <button onClick={() => setTheme('default')}>System</button>
    </div>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | ReactNode | required | Application content to wrap with theme context | | initialTheme | 'light' \| 'dark' \| 'default' | 'default' | Initial theme value (overrides cookie on mount) | | rootDomain | string | '.groovinads.com' | Root domain for cross-subdomain cookies. Theme is automatically shared across all subdomains. Set to null to disable cross-subdomain sharing. |

useTheme Return Value

| Property | Type | Description | |----------|------|-------------| | isDark | boolean | true if theme is 'dark' | | isDefault | boolean | true if theme is 'default' | | isLight | boolean | true if theme is 'light' | | setTheme | (theme: ThemeMode) => void | Function to change theme | | theme | 'light' \| 'dark' \| 'default' | Current active theme |

Implementation Notes

Cookie Storage: Theme preference is stored in a cookie named theme_pref
When theme is 'default': The data-theme attribute is removed from the HTML element and the cookie is deleted
When theme is 'light' or 'dark': The data-theme attribute is set on document.documentElement and the preference is saved to a cookie with 1-year expiration
Cross-Subdomain: When rootDomain is provided, the cookie is set with the domain attribute to share across subdomains
Localhost Handling: On localhost, the domain attribute is automatically omitted to work in local development
SSR-Safe: The component checks for window existence before accessing document.cookie or document
Security: Cookies are set with SameSite=Lax and path=/ for security and accessibility

Integration with Navbar

The Navbar component with showUserMenu={true} automatically includes a theme selector in the user dropdown menu when wrapped with ThemeProvider.

import React from 'react';
import { ThemeProvider, Navbar } from 'groovinads-ui';

function App() {
  return (
    <ThemeProvider>
      <Navbar
        showUserMenu={true}
        userData={userData}
      />
      {/* Rest of your app */}
    </ThemeProvider>
  );
}

Buttons

Button

import React from 'react';
import { Button } from 'groovinads-ui';

<Button
	variant={'outline'}
	size={'sm'}
	onClick={() => {
		console.log('Button clicked');
	}}
	startIcon={'plus'}
	endIcon={'arrow-right'}
	style={'warning'}
	className={'mb-5'}
	processing={true}
	badge={'5'}
>
	Let's groove!
</Button>;

| Property | Type | Required | Options | Default | Description | | ------------------------- | -------- | -------- | --------------------------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | badge | String | No | n/a | n/a | Badge content to display as a data-badge attribute on the button element. Useful for notification counts or status indicators. | | 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. | | className | String | No | n/a | n/a | Additional CSS class names that can be applied to the button. | | disabled | Boolean | No | true false | false | If true, disables the button. If false, the button is enabled. | | endIcon | String | No | n/a | n/a | Specifies the name of the icon to be displayed at the end of the button (after the text). | | hideLabelOnDesktop | Boolean | No | true false | false | If true, the text inside the button will not be displayed on desktop (only visible on mobile). Cannot be used together with hideLabelOnMobile. | | hideLabelOnMobile | Boolean | No | true false | false | If true, the text inside the button will not be displayed on mobile. If false, the text will be displayed on mobile. Cannot be used together with hideLabelOnDesktop. | | onClick | Function | No | n/a | n/a | Function to be executed when the button is clicked. | | processing | Boolean | No | true false | false | If true, displays a loading animation (…) with a spinner. If false, it will not be displayed. | | size | String | No | sm md lg | md | Defines the size of the button. It's optional. | | startIcon | String | No | n/a | n/a | Specifies the name of the icon to be displayed at the start of the button (before the text). | | 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. | | variant | String | No | primary secondary terciary outline | primary | Defines the visual style of the button. It's optional. |

Dropdowns

All dropdown components support a unified validation system:

Validation System

All form dropdowns (DropdownComponent, DropdownFilter, DropdownMultiSelect, DropdownDatePicker, DropdownSimpleDatePicker) share a consistent validation approach:

showError (Boolean): Controls the visual error state. When true, applies the not-validated CSS class to the toggle.
requiredText (String): Custom error message displayed via the data-error attribute.
External Control: Validation state is managed by the parent component, providing full flexibility.
Auto-clear: Error messages can be configured to automatically disappear after 2 seconds (implemented in parent component).

Example validation pattern:

const [showError, setShowError] = useState(false);

const handleValidate = () => {
	if (!isValid) {
		setShowError(true);
		// Auto-hide after 2 seconds
		setTimeout(() => setShowError(false), 2000);
	} else {
		setShowError(false);
		// Validation passed
	}
};

// In the dropdown component
<DropdownComponent
	showError={showError}
	requiredText="Please select an option"
	// ... other props
/>

DropdownComponent

import React, { useState } from 'react';
import { DropdownComponent } from 'groovinads-ui';
import { DropdownMenu, DropdownItem } from 'react-bootstrap';

const DropdownComponentExample = () => {
	const [show, setShow] = useState(false);
	const [selected, setSelected] = useState('');

	return (
		<DropdownComponent
			show={show}
			setShow={setShow}
			autoClose={true}
			label='Category'
			selectedValue={selected}
			variant='input'
			fullWidth
		>
			<DropdownMenu>
				<DropdownItem onClick={() => setSelected('Option 1')}>
					Option 1
				</DropdownItem>
				<DropdownItem onClick={() => setSelected('Option 2')}>
					Option 2
				</DropdownItem>
				<DropdownItem onClick={() => setSelected('Option 3')}>
					Option 3
				</DropdownItem>
			</DropdownMenu>
		</DropdownComponent>
	);
};

export default DropdownComponentExample;

Dropdown with submenu

import React, { useState } from 'react';
import { DropdownComponent } from 'groovinads-ui';
import { DropdownMenu, DropdownItem } from 'react-bootstrap';

const NestedDropdownExample = () => {
	const [showParent, setShowParent] = useState(false);
	const [showChild, setShowChild] = useState(false);

	return (
		<DropdownComponent
			show={showParent}
			setShow={setShowParent}
			autoClose='outside'
			label='Parent Menu'
			variant='primary'
		>
			<DropdownMenu>
				<DropdownItem>
					<DropdownComponent
						show={showChild}
						setShow={setShowChild}
						autoClose={true}
						label='Child Menu'
						variant='primary'
						isChild
						drop='end'
					>
						<DropdownMenu>
							<DropdownItem>Submenu Item 1</DropdownItem>
							<DropdownItem>Submenu Item 2</DropdownItem>
							<DropdownItem>Submenu Item 3</DropdownItem>
						</DropdownMenu>
					</DropdownComponent>
				</DropdownItem>
				<DropdownItem>Regular Item 1</DropdownItem>
				<DropdownItem>Regular Item 2</DropdownItem>
			</DropdownMenu>
		</DropdownComponent>
	);
};

export default NestedDropdownExample;

| Property | Type | --------------- | align | autoClose | children | className | disabled | drop | fullWidth | helpText | icon | isChild | label | onToggle | overflow | processing | requiredText | selectedValue | Node | setShow | show | showError | size | style | variant | Required | Options | Default | Description | | ---------------- | -------- | ------------------------------------------------------ | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | | String | No | start end | start | Determines the alignment of the dropdown menu relative to the toggle. | | 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 outside click. | | Node | Yes | n/a | n/a | DropdownMenu component to be rendered inside the dropdown. | | String | No | n/a | '' | Adds a custom CSS class to the dropdown container. | | Boolean | No | true false | false | If true, disables the dropdown. | | String | No | up down start end | n/a | Determines the direction in which the dropdown menu will be displayed. Caret icon adapts automatically. | | Boolean | No | true false | false | If true, makes the dropdown menu match the toggle button width dynamically. | | String | No | n/a | n/a | Help text displayed below the dropdown to provide additional guidance to the user. | | String | No | n/a | n/a | FontAwesome icon name to display before the label in the toggle button. | | Boolean | No | true false | false | If true, renders the toggle without button styles (useful for nested dropdowns). | | Node | No | n/a | n/a | Label text for the dropdown toggle button. | | Function | No | n/a | n/a | Callback function triggered when dropdown visibility changes. | | Boolean | No | true false | false | Adjusts the dropdown's position to handle overflow situations with fixed positioning. | | Boolean | No | true false | false | If true, shows a spinner instead of the icon, appends "…" to the label, and disables the dropdown. | | String | No | n/a | n/a | Error message displayed when validation fails. Used with showError prop. | | No | n/a | n/a | Selected value to display (used with variant='input' to show the current selection). | | Function | No | n/a | n/a | Function to update the visibility state of the dropdown. | | Boolean | No | true false | n/a | Controls the visibility of the dropdown. If true, the dropdown is visible; if false, it is hidden. | | Boolean | No | true false | false | If true, displays the dropdown in error state with not-validated class. Used for validation. | | String | No | sm md lg | md | Size of the toggle button. | | String | No | default success danger warning link | default | Style/color scheme of the toggle button. | | String | No | primary secondary terciary outline input | primary | Variant of the toggle button. Use input for form-field style dropdowns with label and selected value display. |

DropdownDatePicker

import { DropdownDatePicker } from 'groovinads-ui';
import React, { useState } from 'react';

const DropdownDatePickerExample = () => {
	const [show, setShow] = useState(false);
	const [dateFrom, setDateFrom] = useState(null);
	const [dateTo, setDateTo] = useState(null);

	const handleToggle = () => {
		setShow((prevShow) => !prevShow);
	};

	const handleRemoveFilter = () => {
		setDateFrom(null);
		setDateTo(null);
	};

	return (
		<div>
			<DropdownFilter
				variant='filter'
				show={show}
				setShow={setShow}
				onToggle={handleToggle}
				label='Select Period'
				locked={false}
				overflow={true}
				onRemoveFilter={handleRemoveFilter}
				dateFrom={dateFrom}
				setDateFrom={setDateFrom}
				dateTo={dateTo}
				setDateTo={setDateTo}
				minDate={new Date('2025-01-01')}
				maxDate={new Date('2025-01-31')}
			/>
		</div>
	);
};

export default DropdownDatePickerExample;

| Property | Type | Required | Option | Default | Description | | ---------------- | -------- | -------- | ---------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------- | | className | String | No | n/a | n/a | Adds a custom CSS class to the component. | | dateFrom | String | No | n/a | null | Start date. | | dateTo | String | No | n/a | null | End date. | | disabled | Boolean | No | true false | false | If true, disables the dropdown. If false, the dropdown is enabled. | | helpText | String | No | n/a | n/a | Help text displayed below the dropdown to provide additional guidance to the user. | | label | String | No | n/a | period | Label to display on the dropdown toggle button. | | locked | Boolean | No | true false | false | Determines if the dropdown is locked. If true, it is not interactive. If false, it is interactive. | | maxDate | Object | No | n/a | n/a | Max date filter. | | minDate | Object | No | n/a | n/a | Min date filter. | | onRemoveFilter | Function | No | n/a | n/a | Remove the filter when the remove filter button is clicked. | | onToggle | Function | No | n/a | n/a | Function that is called when the dropdown is toggled. | | overflow | Boolean | No | true false | false | Adjusts the dropdown's position to handle overflow situations. | | requiredText | String | No | n/a | n/a | Error message displayed when validation fails. Used with showError prop. | | searchLabel | String | No | n/a | Search | Label to display on the search input. | | setDateFrom | Function | No | n/a | n/a | Allows updating the start date of the date range. Function to update the start date of the range to be selected. | | setDateTo | Function | No | n/a | n/a | Allows you to update the end date of the selection range. | | setShow | Function | No | n/a | n/a | Function to update the visibility state of the dropdown. | | show | Boolean | No | true false | false | Controls the visibility of the dropdown. If true, the dropdown is displayed; if false, it is hidden. | | showError | Boolean | No | true false | false | If true, displays the dropdown in error state with not-validated class. Controlled externally for validation. | | size | String | No | sm md lg | md | Size of the toggle button. | | 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. |

DropdownFilter

import React from 'react';
import { DropdownFilter } from 'groovinads-ui';

<DropdownFilter
	title='Filter'
	valuesSelected={['Value1', 'Value2']}
	setValuesSelected={(newValues) => console.log(newValues)}
	values={['Value1', 'Value2', 'Value3']}
	menuType='simple'
	locked={false}
	onRemoveFilter={() => console.log('Filter removed')}
	show={true}
	onToggle={(isOpen) => console.log(isOpen)}
	overflow={false}
	className='custom-class'
/>;

| Property | Type | Required | Options | Default | Description | | ------------------- | -------- | -------- | -------------------------- | -------- | --------------------------------------------------------- | | autoClose | Boolean | No | true false 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 outside, it closes when clicking outside the menu but not when clicking an item in the list. | | className | String | No | n/a | n/a | Additional CSS class names. | | disabled | Boolean | No | true false | false | If true, disables the dropdown. If false, the dropdown is enabled. | | helpText | String | No | n/a | n/a | Help text displayed below the dropdown to provide additional guidance to the user. | | locked | Boolean | No | true false | false | If true, the filter cannot be removed. | | menuType | String | No | simple selection | simple | Type of dropdown menu. | | onRemoveFilter | Function | No | n/a | n/a | Function to handle filter removal. | | onToggle | Function | No | n/a | n/a | Function to handle toggle state changes. | | overflow | Boolean | No | true false | false | Whether to enable overflow strategy for the dropdown. | | requiredText | String | No | n/a | n/a | Error message displayed when validation fails. Used with showError prop. | | setShow | Function | No | n/a | n/a | Function to update the visibility state of the dropdown. | | setValuesSelected | Function | No | n/a | n/a | Function to set the selected values. | | show | Boolean | No | true false | n/a | Controls the visibility of the dropdown. | | showError | Boolean | No | true false | false | If true, displays the dropdown in error state with not-validated class. Controlled externally for validation. | | title | String | No | n/a | n/a | Title of the dropdown filter. | | values | Array | No | n/a | [ ] | Available values for selection. | | valuesSelected | Array | No | n/a | [ ] | Available values for selection. |

DropdownMultiSelect

import React, { useState } from 'react';
import { DropdownMultiSelect } from 'groovinads-ui';

const MultiSelectComponent = () => {
	const [selectedValues, setSelectedValues] = useState([]);
	const [selectedValues1, setSelectedValues1] = useState([]);

	const [show, setShow] = useState(false);
	const [show1, setShow1] = useState(false);

	const handleToggle = () => setShow((prevShow) => !prevShow);
	const handleToggle1 = () => setShow1((prevShow) => !prevShow);

	const [filters] = useState([
		{ id: 1, name: 'Filter 1', showStatus: '1' },
		{ id: 2, name: 'Filter 2', showStatus: '0' },
		{ id: 3, name: 'Filter 3', showStatus: '1' },
		{ id: 4, name: 'Filter 4', showStatus: '0' },
		{ id: 5, name: 'Filter 5', showStatus: '0' },
		{ id: 6, name: 'Filter 6', showStatus: '2' },
	]);
	CUSTOM; /*  */
	const filters2 = [
		{ id: 1, name: 'Filter 1', showStatus: '1', name1: 'loreal' },
		{ id: 2, name: 'Filter 2', showStatus: '0', name1: 'jabon' },
		{ id: 3, name: 'Filter 3', showStatus: '1', name1: 'blue' },
		{ id: 4, name: 'Filter 4', showStatus: '0', name1: 'name' },
		{ id: 5, name: 'Filter 5', showStatus: '0', name1: 'name' },
		{ id: 6, name: 'Filter 6', showStatus: '2', name1: 'name' },
	];

	return (
		<>
			<DropdownMultiSelect
				valuesSelected={selectedValues}
				setValuesSelected={setSelectedValues}
				values={filters}
				show={show}
				onToggle={handleToggle}
				object={true}
				nameKey='name'
				idKey='id'
				label='Filters'
				focus={show}
				buttonVariant='primary'
				nowrap={true}
				showError={false}
				requiredText='Please select at least one filter'
			/>
			{/* OPCION 1 */}
			<DropdownMultiSelect
				{...args}
				values={filters1}
				valuesSelected={selectedValues1}
				setValuesSelected={setSelectedValues1}
				show={show1}
				onToggle={handleToggle1}
				object={true}
				nameKey='name'
				nameKey1='name1'
				idKey={'id'}
				label={'Filters (array de objetos)'}
				focus={show}
				hasId={false}
				showError={false}
				requiredText='Please select at least one filter'
			/>
		</>
	);
};

export default MultiSelectComponent;

| Property | Type | Required | Options | Default | Description | | ---------------------- | ---------------- | -------- | --------------------------------- | ------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | autoClose | Boolean / String | No | 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. | | buttonVariant | String | No | input | primary secondary terciary outline | Defines the visual style of the button, used to toggle the dropdown menu. | | className | String | No | n/a | n/a | Adds custom CSS properties to style the component. | | customKey | String | No | n/a | n/a | You must provide the name of a key within an object. It will allow customization of the displayed value by internally concatenating and displaying "nameKey - customKey" | | drop | String | No | up down | n/a | Specifies the direction in which the dropdown should open. | | focus | Boolean | No | true false | false | If true, the search input will be focused when the dropdown is shown. | | hasId | Boolean | No | true false | true | Controls wether the hashtag and id shows or not in the dropdown options | | helpText | String | No | n/a | n/a | Help text displayed below the dropdown to provide additional guidance to the user. | | idInPill | Boolean | No | true false | false | If true, ID will be shown in the pill component. | | idKey | String | No | 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. | | label | String | No | n/a | '' | Allows customizing the label for the input field within the dropdown menu. | | nameKey | String | No | n/a | n/a | Defines the key that will be used in the object to display the item's name. | | notMatchedText | String | No | n/a | 'No match found' | Text displayed when no matching items are found. | | nowrap | Boolean | No | 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. | | object | Boolean | No | true false | false | object determines whether the values in values are objects (with properties nameKey and idKey) or simple values (strings or numbers). | | onToggle | Function | No | n/a | n/a | Contains the handleToggle function which handles changing the show state between true and false, toggling the visibility of the menu. | | overflow | Boolean | No | true false | false | Whether to enable overflow strategy for the dropdown. | | requiredText | String | No | n/a | 'Required' | Error message displayed when validation fails. Used with showError prop. | | searchLabel | String | No | n/a | 'Search' | Label for the search input field. | | setValuesSelected | Function | No | n/a | n/a | Allows users to control the values that are currently selected. | | setShow | Function | No | n/a | n/a | Function to update the visibility state of the dropdown. | | show | Boolean | No | true false | n/a | Controls the visibility of the dropdown. | | showError | Boolean | No | true false | false | If true, displays the dropdown in error state with not-validated class. Controlled externally for validation. | | showStatus | String | No | n/a | String | Filter items by status if applicable. | | size | String | No | sm md lg | md | Size of the toggle button. | | values | Array | No | n/a | [ ] | Available values for selection. | | valuesSelected | Array / Object | No | n/a | [ ] | Represents the state of the values that are currently selected. |

DropdownSimpleDatePicker

import { DropdownDatePicker } from 'groovinads-ui';
import React, { useState } from 'react';

const DropdownSimpleDatePickerExample = () => {
	const [show, setShow] = useState(false);

	const [date, setDate] = useState('');

	const clearStartDate = () => {
		// Resets the date and updates the state as needed. Adjust as required.
		setDate(null);
		setShowDateDropdown(false);
		closeDateDropdown();
		markSelectedPlacements();
		setKey((prevKey) => prevKey + 1);
	};


	return (
		<>
			<button onClick={() => setShow(!show)}>Toggle</button>
			<div className='col-2'>
				<DropdownSimpleDatePicker
					{...args}
					date={date}
					setDate={setDate}
					handleClear={ExampleClearDate}
					minDate={new Date('2025-01-01')}
					maxDate={new Date('2025-01-31')}
				/>
			</div>
		</button>
	);
};

export default DropdownSimpleDatePickerExample;

| Property | Type | Required | Option | Default | Description | | -------------- | -------- | -------- | -------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | | className | String | No | n/a | n/a | Adds a custom CSS class to the component. | | date | String | No | n/a | null | Selected date. | | disabled | Boolean | No | true false | false | If true, disables the dropdown. If false, the dropdown is enabled. | | 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. | | helpText | String | No | n/a | n/a | Help text displayed below the dropdown to provide additional guidance to the user. | | label | String | No | n/a | period | Label to display on the dropdown toggle button. | | maxDate | Object | No | n/a | n/a | Max date filter. | | minDate | Object | No | n/a | n/a | Min date filter. | | onToggle | Function | No | n/a | n/a | Function that is called when the dropdown is toggled. | | overflow | Boolean | No | true false | false | Adjusts the dropdown's position to handle overflow situations. | | requiredText | String | No | n/a | n/a | Text displayed when input validation fails, used to indicate an error. | | setDate | Function | No | n/a | n/a | Function that updates the start date. | | setShow | Function | No | n/a | n/a | Function to update the visibility state of the dropdown. | | show | Boolean | No | true false | false | Controls the visibility of the dropdown. If true, the dropdown is displayed; if false, it is hidden. | | showError | Boolean | No | true false | false | If true, the input will be displayed with an error. | | size | String | No | sm md lg | md | Size of the toggle button. |

Checkbox

import React, { useState } from 'react';
import { Checkbox } from 'groovinads-ui';

const CheckboxComponent = () => {
	const [accepted, setAccepted] = useState(false);

	return (
		<Checkbox
			className=''
			id='acceptTerms'
			name='terms'
			status={accepted}
			setStatus={setAccepted}
		>
			{children}
		</Checkbox>
	);
};

export default CheckboxComponent;

| Property | Type | Required | Options | Default | Description | | ----------- | -------- | -------- | -------------- | ------- | ------------------------------------------------------------------------------------------------------------- | | children | Node | No | n/a | n/a | Content that is rendered as the label for the checkbox. | | className | String | No | n/a | n/a | Additional CSS class names that can be applied to the checkbox. | | disabled | Boolean | No | true false | false | If true, disables the checkbox. If false, the checkbox is enabled. | | id | String | No | n/a | n/a | The unique identifier for the checkbox. It's required for associating the label and checkbox. | | name | String | No | n/a | n/a | The name attribute of the checkbox. Used to identify the form data after it's submitted. | | setStatus | Function | No | n/a | n/a | Function to set the status of the checkbox. This is a handler function typically used for state management. | | size | String | No | sm md lg | md | Sets the size of the checkbox. | | status | Boolean | No | true false | false | Indicates whether the checkbox is checked, true or unchecked false. |

Input

import React from 'react';
import { Input } from 'groovinads-ui';

const InputComponent = () => {
	const handleInputChange = () => {
		console.log('Input changed');
	};

	const handleShowError = (showError) => {
		console.log(showError);
	};

	return (
		<div>
			<Input
				className={'mb-5'}
				helpText={'This is a text'}
				label={'Input label'}
				name={'input'}
				onChange={handleInputChange}
				requiredText={'This field is required'}
				showError={false}
				setShowError={handleShowError}
				type={'text'}
				disabled={false}
				icon={'user'}
				prefix={'DD/MM/YYYY'}
				suffix={'GMT'}
				size={'md'}
				value={''}
				autoFocus={false}
				customRef={null}
			/>
		</div>
	);
};

export default InputComponent;

| Property | Type | Required | Options | Default | Description | | -------------- | --------------- | -------- | ------------------------------------------------------------------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | | autoFocus | Boolean | No | true false | false | If true, automatically focuses the input when the component mounts. | | className | String | No | n/a | n/a | Additional CSS class names that can be applied to the input. | | disabled | Boolean | No | true false | false | If true, disables the input field. | | focus | Boolean | No | true false | false | Controls whether the input field should automatically receive focus when the component is rendered. | | helpText | String | No | n/a | n/a | Optional text under the input to guide the user or provide additional information. | | icon | String | No | n/a | n/a | Specifies the name of the icon to be displayed inside the input. | | label | String | No | n/a | 'Input 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. | | max | Number | No | n/a | n/a | Specifies the maximum value that the input field can accept. | | maxLength | Number | No | n/a | n/a | Specifies the maximum number of characters that the input field can accept. | | min | Number | No | n/a | n/a | Specifies the minimum value that the input field can accept. | | name | String | No | n/a | n/a | Indicates the name attribute for the input element, which represents the form data after it is submitted. | | onBlur | Function | No | n/a | n/a | Callback function triggered when the input loses focus. | | 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. | | prefix | String | No | n/a