groovinads-ui

v1.2.53

Published

13 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.

Downloads

323

0High
0Medium
0Low

pablo.pinero

css sass groovinads responsive front-end components

Included components

The library includes the following components:

Buttons:
- Button: For user actions.
Dropdowns:
- DropdownComponent: For dropdown menus.
- DropdownDatePicker: For filter dropdowns.
- DropdownSimpleDatePicker: For filter dropdowns.
- DropdownFilter: For filter dropdowns.
- DropdownMultiSelect: For multi-select dropdowns.
Inputs:
- Checkbox: For multiple option selections.
- Input: For user data entry.
- Radio: For exclusive selections.
- Switch: For toggle states.
- Textarea: For multiline text input.
Labels:
- Alert: For displaying alerts.
- Icon: For displaying icons.
- LoginSource: For show icons of login sources.
- PillComponent: For displaying information.
- Spinner: For loading animations.
- StatusIcon: For displaying status icons.
Navigation:
- Navbar: For top navigation bars.
- Sidebar: For side navigation bars.
- Stepper: For step-by-step navigation.
- Tabnav: For tab navigation.
Toast:
- ToastComponent: For displaying notifications.
- ToastProgress: For displaying progress notifications.

Requirements

The component styles must be included from: https://ui.groovinads.com/styles.min.css.
npm (v18 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/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/styles.min.css" />
</head>

Installation

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:

Buttons

Button

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

<Button
	variant={'outline'}
	size={'xs'}
	onClick={() => {
		console.log('Button clicked');
	}}
	icon={'plus'}
	iconPosition={'end'}
	style={'warning'}
	className={'mb-5'}
	processing={true}
>
	Let's groove!
</Button>;

| Property | Type | Required | Options | Default | Description | | -------------- | -------- | -------- | --------------------------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 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. | | icon | String | No | n/a | n/a | Specifies the name of the icon to be displayed inside the button. | | iconPosition | String | No | start end | start | Position of the icon relative to the text inside the button. It's optional. | | 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 | xs md lg | md | Defines the size of the button. It's optional. | | 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

DropdownComponent

import React, { useState } from 'react';
import { DropdownComponent, Button, , Icon } from 'groovinads-ui' ;
import { Dropdown } from 'react-bootstrap';

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

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

  return (
    <DropdownComponent
      show={show}
      setShow={setShow}
      onToggle={handleToggle}
      align='start'
      fullWidth={true}
    >
      <Button
        variant='outline'
        icon='plus'
        className='dropdown-toggle'
        onClick={handleToggle}
      >
        <span>Add filter</span>
        <Icon iconName='chevron-down' className='ms-2' />
      </Button>

      <DropdownComponentMenu>
        <DropdownComponent.Item onClick={() => console.log('Item 1 clicked')}>
          Item 1
        </DropdownComponent.Item>
      </DropdownComponentMenu>
    </DropdownComponent>
  );
};

export default DropdownComponentExample;

Dropdown width submenu

<DropdownComponent
	{...args}
	show={show}
	setShow={setShow}
	autoClose={'outside'}
>
	<DropdownToggle onClick={() => handleToggle()}>Toggle</DropdownToggle>
	<DropdownMenu>
		<DropdownItem>
			<DropdownComponent {...args} autoClose={'outside'} drop={'end'}>
				<DropdownToggle as={'div'}>Toggle</DropdownToggle>
				<DropdownMenu>
					<DropdownItem>Item 1</DropdownItem>
					<DropdownItem>Item 2</DropdownItem>
					<DropdownItem>Item 3</DropdownItem>
				</DropdownMenu>
			</DropdownComponent>
		</DropdownItem>
		<DropdownItem>Item 2</DropdownItem>
		<DropdownItem>Item 3</DropdownItem>
	</DropdownMenu>
</DropdownComponent>

| Property | Type | Required | Options | Default | Description | | ----------- | ------------------ | -------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 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. | | 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. | | children | Node | Yes | n/a | n/a | Child components to be rendered inside the dropdown. | | className | String | No | n/a | string | Adds a custom CSS class to the component.names. | | drop | String | No | up down start end | n/a | Determines the direction in which the dropdown menu will be displayed. | | fullWidth | Boolean | No | n/a | n/a | If true, the dropdown menu will span the full width of its container. | | overflow | Boolean | No | true false | false | Adjusts the dropdown's position to handle overflow situations. | | show | Boolean | No | true false | n/a | Controls the visibility of the dropdown. If true, the dropdown is visible; if false, it is hidden. |

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}
				inputLabel='Select Period'
				locked={false}
				overflow={true}
				onRemoveFilter={handleRemoveFilter}
				dateFrom={dateFrom}
				setDateFrom={setDateFrom}
				dateTo={dateTo}
				setDateTo={setDateTo}
			/>
		</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. | | inputLabel | 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. | | onToggle | Function | No | n/a | n/a | Function that is called when the dropdown is toggled. | | onRemoveFilter | Function | No | n/a | n/a | Remove the filter when the remove filter button is clicked. | | overflow | Boolean | No | true false | false | Adjusts the dropdown's position to handle overflow situations. | | 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. | | 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. |

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}
				/>
			</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. | | show | Boolean | No | true false | false | Controls the visibility of the dropdown. If true, the dropdown is displayed; if false, it is hidden. | | setShow | Function | No | n/a | n/a | Function to update the visibility state of the dropdown. | | onToggle | Function | No | n/a | n/a | Function that is called when the dropdown is toggled. | | inputLabel | String | No | n/a | period | Label to display on the dropdown toggle button. | | overflow | Boolean | No | true false | false | Adjusts the dropdown's position to handle overflow situations. | | date | String | No | n/a | null | Selected date. | | setDate | Function | No | n/a | n/a | Function that updates the start date. | | 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. |

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 | | ------------------- | -------- | -------- | -------------------- | -------- | ----------------------------------------------------- | | className | String | No | n/a | n/a | Additional CSS class names. | | 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. | | 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. | | 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 [show, setShow] = useState(false);

	const handleToggle = () => setShow((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' },
	]);

	return (
		<DropdownMultiSelect
			valuesSelected={selectedValues}
			setValuesSelected={setSelectedValues}
			values={filters}
			show={show}
			onToggle={handleToggle}
			object={true}
			nameKey='name'
			idKey='id'
			inputLabel='Filters'
			focus={show}
			buttonVariant='primary'
			nowrap={true}
		/>
	);
};

export default MultiSelectComponent;

| Property | Type | ---------------- | autoClose | buttonVariant | className | drop | focus | idInPill | idKey | inputLabel | nameKey | nowrap | object | onToggle | overflow | searchLabel | show | showStatus | values | valuesSelected | hasId | Required | Options | Default | Description | | ---------------- | -------- | --------------------------------- | ------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 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. | | String | No | input | primary secondary terciary outline | Defines the visual style of the button, used to toggle the dropdown menu. | | String | No | n/a | n/a | Adds custom CSS properties to style the component. | | String | No | up down | n/a | Specifies the direction in which the dropdown should open. | | Boolean | No | true false | false | If true, the search input will be focused when the dropdown is shown. | | Boolean | No | true false | false | If true, ID will be shown in the pill component. | | 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. | | String | No | n/a | '' | Allows customizing the label for the input field within the dropdown menu. | | String | No | n/a | n/a | Defines the key that will be used in the object to display the item's name. | | 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. | | 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). | | 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. | | Boolean | No | true false | false | Whether to enable overflow strategy for the dropdown. | | String | No | n/a | 'Search' | Label for the search input field. | | Boolean | No | true false | n/a | Controls the visibility of the dropdown. | | String | No | n/a | String | Filter items by status if applicable. | | Array | No | n/a | [ ] | Available values for selection. | | Array / Object | No | n/a | [ ] | Represents the state of the values that are currently selected. | | Boolean | No | true false | true | Controls wether the hashtag and id shows or not in the dropdown options |

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. | | 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. | | 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 | '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. | | 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. | | 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 | n/a | Text or characters to display at the start of the input, e.g., 'USD' for currency. | | requiredText | String | No | n/a | n/a | Text displayed when input validation fails, used to indicate an error. | | setShowError | Function | No | n/a | n/a | Function used to change the state of showError. | | size | String | No | xs md lg | md | Sets the size of the input field. | | suffix | String | No | n/a | n/a | Optional suffix text to display inside the input field. | | showError | Boolean | No | true false | false | If true, indicates that an error message should be displayed, usually controlled by setShowError. | | type | String | No | color date datetime-local email file image month number password tel text time url week | text | Type of input | | value | String / Number | No | n/a | n/a | The value of the input. |

Radio

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

<Radio
	className={'m-5'}
	id={'radio'}
	name={'radio'}
	setStatus={(status) => console.log(status)}
	status={true}
>
	Click me
</Radio>;

| Property | Type | Required | Options | Default | Description | | ----------- | -------- | -------- | -------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------- | | className | String | No | n/a | n/a | Additional CSS class names that can be applied to the radio button. | | 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. | | name | String | No | n/a | n/a | The name attribute of the radio button. Used to group multiple radios into a single group. | | setStatus | Function | No | n/a | n/a | It is used to update the selection state of the radio button based on user interaction. | | 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). |

Switch

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

<Switch
	className={'mb-5'}
	name={'switch'}
	setStatus={(status) => console.log(status)}
	status={0}
>
	This is a switch
</Switch>;

| Property | Type | Required | Options | Default | Description | | ---------------- | ---------------- | -------- | -------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------- | | className | String | No | n/a | n/a | Additional CSS class names that can be applied to the switch. | | icon | Boolean | No | true false | false | If true, displays an icon (play/pause) inside the switch. | | id | String | No | n/a | n/a | It will be used as the id of the switch input. If not specified, an ID will be automatically generated based on the text of the children. | | name | String | No | n/a | n/a | The name attribute of the switch. Used to identify the form data after it's submitted. | | setStatus | Function | No | n/a | n/a | Function to set the status of the switch. This is a handler function typically used for state management. | | status | Number / Boolean | No | 0 1 | 0 | Indicates whether the switch is on (1 / true) or off (0 / false). | | switchPosition | String | No | start end | start | Determines the position of the switch relative to the label. |

Textarea

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

<Textarea
	className={'mt-2'}
	helpText={'This is a help text'}
	label={'label'}
	name={'textarea'}
	requiredText={'This field is required'}
	setShowError={(showError) => console.log(showError)}
/>;

| Property | Type | Required | Options | Default | Description | | -------------- | -------- | -------- | -------------- | ------- | ------------------------------------------------------------------------------------------ | | className | String | No | n/a | n/a | Additional CSS class names that can be applied to the textarea. | | helpText | String | No | n/a | n/a | Optional text under the textarea to guide the user or provide additional help information. | | label | String | No | n/a | 'Label' | Text label for the textarea field. | | name | String | No | n/a | n/a | Attribute of the textarea. Used to identify the form data after it's submitted. | | onChange | Function | No | n/a | n/a | Function to handle changes to the textarea's value. Typically used to update state. | | requiredText | String | No | n/a | n/a | Text displayed when textarea validation fails, used to indicate an error. | | setShowError | Function | No | n/a | n/a | Function to set the visibility of the error message. | | showError | Boolean | No | true false | false | If true, indicates that an error message should be displayed controlled by setShowError. | | size | String | No | xs md lg | md | Sets the size of the textarea field. | | value | String | No | n/a | n/a | The value of the textarea. |

Labels

Alert

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

const ExampleAlert = () => (
	<div>
		<Alert
			icon={true}
			animation={false}
			type='info'
			size='md'
			onClose={null}
			className='mt-4'
		>
			{/* Children content goes here */}
			This is an alert component
		</Alert>

		<Alert type='info' onClose={() => console.log('Alert closed')} />
	</div>
);

export default ExampleAlert;

| Property | Type | Required | Options | Default | Description | | ----------- | -------- | -------- | ----------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | | animation | Boolean | No | true false | false | If true, adds animation effects to the alert. If false, does not add any effects. | | children | Node | Yes | n/a | n/a | Content inside the alert. | | className | String | No | n/a | n/a | Additional CSS class for the alert. | | icon | Boolean | No | true false | true | If true, displays an icon in the alert. The icon can vary depending on the alert type and settings. If false, no icon is displayed in the alert. | | onClose | Function | No | n/a | null | By default, onClose is null. You can provide a function for this property, which allows you to perform additional actions when the alert is closed. | | size | String | No | xs md lg md | info | Size of the alert. | | type | String | Yes | info success warning danger | info | Type of alert to display. Each type has a specific associated icon. |

Icon

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

<Icon
	style='solid'
	scale={1}
	iconName='location-dot'
	className=''
	animation=''
/>;

| Property | Type | Required | Options | Default | Description | | ----------- | ------ | -------- | ----------------------------------------------------------------------- | -------------------- | ---------------------------------- | | animation | String | No | beat fade beat-fade bounce flip shake spin spin-reverse | String | Animation for the icon. | | className | String | No | n/a | n/a | Additional CSS class for the icon. | | iconName | String | No | n/a | user-bounty-hunter | Name of the icon. | | scale | Number | No | 0.7, 1, 2, 3, 4 | 1 | Scale of the icon. | | style | String | No | light solid regular thin duotone sharp | solid | Style of the icon. |

LoginSource

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

<LoginSource logo={'groovinads'} />;

| Property | Type | Required | Options | Default | Description | | -------- | ------ | -------- | -------------------------------------------- | ------------ | -------------------------------------------------------------- | | logo | String | No | groovinads google microsoft linkedin | groovinads | Specifies the logo to be displayed on the login source button. |

PillComponent

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

const PillComponentExample = () => {
	const [showPill, setShowPill] = useState(true);

	const handleClosePill = () => {
		setShowPill(false);
	};

	return (
		<div>
			<PillComponent className='mt-3' color='blue'>
				Blue normal Pill
			</PillComponent>

			<PillComponent
				classNeme='mt-3'
				color='red'
				closeButton={true}
				onClick={handleClosePill}
			>
				Red Pill with Close Button
			</PillComponent>
		</div>
	);
};

export default PillComponentExample;

| Property | Type | Required | Options | Default | Description | | ------------- | -------- | -------- | ------------------------------------------------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | | children | Node | No | n/a | n/a | Content to be displayed inside the pill component. | | className | String | No | n/a | n/a | Additional CSS class names that can be applied to the pill. Defaults to an empty string. | | closeButton | Boolean | No | true false | false | If true, a close button is displayed on the pill, allowing it to be dismissed. If false, no close button is shown. | | color | String | No | blue danger dark green light midtone neutral red yellow | neutral | Specifies the background color of the pill. | | onClick | Function | No | n/a | n/a | Handles the click event to close the pill. This property is only relevant if closeButton is set to true. |

Spinner

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

<Spinner scale={1} className='mt-3' />;
<Spinner scale={4} className='m-5' />;

| Property | Type | Required | Options | Default | Description | | ----------- | ------ | -------- | ------------------------- | ------- | ------------------------------------- | | scale | Number | No | 0.7 1 2 3 4 1 | 1 | Scale (size) of the spinner. | | className | String | No | n/a | n/a | Additional CSS class for the spinner. |

StatusIcon

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

const StatusIconExamples = () => {
	return (
		<div>
			<StatusIcon animated={false} className='' status={0} />
			<StatusIcon animated={true} className='mt-2' status={1} />
			<StatusIcon animated={false} className='mt-2' status={3} />
			<StatusIcon animated={false} className='mt-2' status={4} />
			<StatusIcon animated={false} className='mt-2' status={5} />
		</div>
	);
};

export default StatusIconExamples;

| Property | Type | Required | Options | Default | Description | | ----------- | ------- | -------- | ------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | animated | Boolean | No | true false | false | If true, the icon will include animation effects, applied only to the active state (status={1}). If false, no animations will be applied. | | className | String | No | n/a | n/a | Add additional CSS class names for custom styling. | | status | Number | Yes | 0 1 3 4 5 | 0 | Specifies the visual state of the icon: Inactive (0), active (1), active-warning (3), warning (4), and danger (5). Each state reflects a specific condition of the system or interface. |

Navigation

Navbar

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

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

	return (
		<div>
			<Button onClick={() => setShow((prev) => !prev)}>Toggle Sidebar</Button>
			<Navbar
				logoUrl='https://ui.groovinads.com/assets/groovinads-logo.svg' // custom url
				showDeckMenu={true}
				showUserMenu={true}
				show={show}
				setShow={setShow}
			>
				<div>Custom Content</div>
			</Navbar>
		</div>
	);
};

export default NavbarComponent;

| Property | Type | Required | Options | Default | Description | | -------------- | -------- | -------- | -------------- | ------- | ------------------------------------------------------------------------------------------------------------- | | children | Node | No | n/a | n/a | Allows inserting custom content within the Navbar. | | logoUrl | String | No | n/a | n/a | Accepts a URL to customize the logo image. If empty, show the Groovinads logo. | | setShow | Function | No | n/a | n/a | Function to toggle the visibility state between visible and hidden. | | show | Boolean | No | true false | n/a | Controls the visibility of the sidebar. If true, the sidebar is displayed; if false, it is hidden. | | showDeckMenu | Boolean | No | true false | false | Controls the visibility of the deck menu in the navbar. If true, it is displayed; if false, it is hidden. | | showUserMenu | Boolean | No | true false | false | Controls the visibility of the user menu. If true, the user menu is shown; if false, it is hidden. |

Sidebar

import { Sidebar } from 'groovinads-ui';
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';

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

  const navigate = useNavigate();

    const handleNavigation = (url) => {
        navigate(url);
        console.log("Cliente seleccionado:", client);
    };

  return (
      <div>
        <button onClick={() => setShowSidebar(prev => !prev)}>
          Toggle Sidebar
        </button>
        <Sidebar
          customLinks={[
            {
              title: 'sectionTitle',
              links: [
                {
                  name: 'Home',
                  icon: 'home',
                  url: '/example-url',
                  children: [ // the section link item will be an item with expansion
                    name: 'Nested Link Name',
                    url: '/nested-link-url',
                  ],
                },
              ],
            },
            {
              title: 'sectionCustom2', // non-custom
              backData: true,
            },
          ]}
        defaultOpened={false}
        show={show}
        setShow={setShow}
        onNavigate={handleNavigation}
        dropdownVisible={true}
        setGroovinProfile={setGroovinProfile}
        selectedClient={selectedClient}

      />
    </div>
  );
};

export default SidebarComponent;

| Property | Type | Required | Options | Default | Description | | --------------- | --------- | -------- | -------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | | api | String | No | n/a | n/a | It is the url corresponding to your api. From which you will receive the data, which will be used in the non-custom section. | | customLinks | Array | Yes | n/a | n/a | Creates the sections of the component based on the array of objects it receives. title names each section, and links is a section link item, that can optionally, contain an array of children for nested links. To use external data obtained from the api property, the object must contain the property backData={true}.| | defaultOpened | Boolean | No | true false | false | Determines whether the sidebar is initially opened or closed. | | onNavigate | Function | Yes | n/a | n/a | Allows handling navigation to the url of the link when an item in the sidebar is clicked. You should provide a function to define how the navigation should be handled (handleNavigation). In our environment, use React Router DOM for navigation. | | setShow | Function | No | n/a | n/a | Function to toggle the visibility state between visible and hidden. | | show | Boolean | No | true false | false | Controls the visibility of the sidebar from an external state. If true, the sidebar is displayed; if false, it is hidden. | | showClients | Boolean String | No | true false single | false | Controls the visibility of the DropdownClient. . Accepts true or false for visibility, or 'single' to show only one client. | | setGroovinProfile | Function | No | n/a | n/a |Updates the user's profile when a client is selected, used in the DropdownClients subcomponent. | | selectedClient | Object | No | n/a | n/a | Represents the selected client object, used to display client-specific data in the sidebar. |

Stepper

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

const steps = ['Step 1', 'Step 2', 'Step 3'];

const StepperComponent = () => {
	return <Stepper list={steps} current={1} />;
};

export default StepperComponent;

| Property | Type | Required | Options | Default | Description | | --------- | ------ | -------- | ------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------- | | current | Number | Yes | n/a | n/a | Uses a number to specify the index in the list array, determining which step is highlighted as the current one and applying a specific style. | | list | Array | Yes | n/a | n/a | Array of steps to be displayed in the stepper. Each item represents a step. |

Tabnav

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

const tabs = [
	{
		tab: 'Tab Name', // Required, name of the tab to display.
		badgeNumber: 'Badge', // Badge number to display on the tab.
		url: '/url', // Navigation.
		warningIcon: false, // Boolean to display a warning icon.
	},
	//Other tabs...
];

const TabnavComponent = (
	tabs = [],
	activeTab = 1,
	navigateTab = false,
	setActiveTab,
) => {
	const [activeTab, setActiveTab] = useState(2);

	return (
		<div>
			{/* Usage with internally managed state */}
			<Tabnav tabs={tabs} />

			{/* External state to manage the active tab */}
			<Tabnav tabs={tabs} activeTab={activeTab} setActiveTab={setActiveTab} />

			{/* Usage with navigation enabled */}
			<Tabnav tabs={tabs} navigateTab={true} />
		</div>
	);
};

export default TabnavComponent;

| Property | Type | Required | Options | Default | Description | | -------------- | -------- | -------- | -------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------