Groovinads UI is a React component library that provides ready-to-use UI elements based on the Groovinads UI kit. This library is designed to facilitate the implementation of common UI elements in Groovinads applications.

Included components

The library includes the following components:

Buttons: For user actions.
Checkbox: For multiple option selections.
Input: For user data entry.
LoginSource: For login source selection.
PillComponent: For displaying information.
StatusIcon: For displaying status icons.
Radio: For exclusive selections.
Switch: For toggle states.
Textarea: For multiline text input.

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:

Button

import { Button } from 'groovinads-ui';

<Button
    variant={'primary'}
    onClick={()=>{console.log('Button clicked')}}
    icon={'fa-plus'}
    className={'mb-5'}
>
    Let's groove!
</Button>

Property	Type	Options	Default	Description
`variant`	String	`primary` `secondary` `terciary` `outline`	`primary`	Defines the visual style of the button. It's optional.
`size`	String	`xs` `md` `lg`	`md`	Defines the size of the button. It's optional.
`onClick`	Function	n/a	n/a	Function to be executed when the button is clicked.
`icon`	String	n/a	n/a	Defines the size of the button. It's optional.
`iconPosition`	String	n/a	`start`	Determines the position of the icon relative to the text inside the button. It's optional.
`className`	String	n/a	n/a	Additional CSS class names that can be applied to the button. Defaults to an empty string.
`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.
`processing`	Boolean	`true` `false`	`false`	If true, displays a spinner animation and appends '...' to the button label to indicate processing status. It's optional.

Inputs

Checkbox

import { Checkbox } from 'groovinads-ui';

<Checkbox
  className={'mb-5'}
  id={'checkbox'}
  name={'checkbox'}
  setStatus={(status) => console.log(status)}
>
  This is a checkbox
</Checkbox>

Property	Type	Options	Default	Description
`className`	String	n/a	n/a	Additional CSS class names that can be applied to the checkbox. Defaults to an empty string.
`id`	String	n/a	n/a	The unique identifier for the checkbox. It's required for associating the label and checkbox.
`name`	String	n/a	n/a	The name attribute of the checkbox. Used to identify the form data after it's submitted.
`status`	Boolean	`true` `false`	`false`	Indicates whether the checkbox is checked (`true`) or unchecked (`false`). Defaults to false.
`setStatus`	Function	n/a	n/a	Function to set the `status` of the checkbox. This is a handler function typically used for state management.

Input

import { Input } from 'groovinads-ui';

<Input
  className={'mb-5'}
  helpText={'This is a help text'}
  label={'Input label'}
  name={'input'}
  onChange={() => console.log('Input changed')}
  requiredText={'This field is required'}
  showError={false}
  setShowError={(showError) => console.log(showError)}
/>

Property	Type	Options	Default	Description
`className`	String	n/a	n/a	Additional CSS class names that can be applied to the input. Defaults to an empty string.
`disabled`	Boolean	`true` `false`	`false`	If true, disables the input field.
`helpText`	String	n/a	n/a	Optional text under the input to guide the user or provide additional information.
`icon`	String	n/a	n/a	Icon to be displayed inside the input field, typically used for decoration or interaction.
`label`	String	n/a	`Label`	Text label for the input field. Also used as the `id` attribute of the input for accessibility purposes.
`name`	String	n/a	n/a	The name attribute for the input element, which represents the form data after it's submitted.
`onChange`	Function	n/a	n/a	Function to handle changes to the input's value. Typically used to update state.
`prefix`	String	n/a	n/a	Text or characters to display at the start of the input, e.g., 'USD' for currency.
`requiredText`	String	n/a	n/a	Text displayed when input validation fails, typically used to indicate an error.
`size`	String	`xs` `md` `lg`	`md`	Sets the size of the input field.
`showError`	Boolean	`true` `false`	`false`	If true, indicates that an error message should be displayed, usually controlled by `setShowError`.
`setShowError`	Function	n/a	n/a	Function to set the visibility of the error message.
`type`	String	n/a	n/a	Text or characters to display at the end of the input, e.g., 'USD' for currency.
`value`	String or Number	n/a	n/a	The value of the input.

Radio

import { Radio } from 'groovinads-ui';

<Radio
  className={'mb-5'}
  id={'radio'}
  name={'radio'}
  setStatus={(status) => console.log(status)}
  status={true}
>
    This is a radio button
</Radio>

Property	Type	Options	Default	Description
`className`	String	n/a	n/a	Additional CSS class names that can be applied to the radio button. Defaults to an empty string.
`id`	String	n/a	n/a	The unique identifier for the radio button. It is used for linking the label and the radio button.
`name`	String	n/a	n/a	The name attribute of the radio button. Used to group multiple radios into a single group.
`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.
`status`	Boolean	`true` `false`	`false`	Indicates whether the radio button is checked (`true`) or unchecked (`false`). Defaults to `false`.

Switch

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	Options	Default	Description
`className`	String	n/a	n/a	Additional CSS class names that can be applied to the switch. Defaults to an empty string.
`icon`	Boolean	`true` `false`	`false`	If `true`, displays an icon (play/pause) inside the switch.
`id`	String	Automatically generated	n/a	The ID is generated automatically based on the component's children, ensuring unique identifiers for accessibility.
`name`	String	n/a	n/a	The name attribute of the switch. Used to identify the form data after it's submitted.
`setStatus`	Function	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	`0` `1` `true` `false`	`0`	Indicates whether the switch is on (`1` / `true`) or off (`0` / `false`). Defaults to `0`.
`switchPosition`	String	`start` `end`	`start`	Determines the position of the switch relative to the label. Defaults to `start`.

Textarea

import { Textarea } from 'groovinads-ui';

<Textarea
  className={'mb-5'}
  label={'Textarea label'}
  name={'textarea'}
  requiredText={'This field is required'}
  setShowError={(showError) => console.log(showError)}
/>

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

Labels

LoginSource

import { LoginSource } from 'groovinads-ui';

<LoginSource logo={'groovinads'} />

Property	Type	Options	Default	Description
`logo`	String	`groovinads` `google` `microsoft` `linkedin`	`groovinads`	Specifies the logo to be displayed on the login source button. This indicates the login method used.

PillComponent

import { PillComponent } from 'groovinads-ui';

<PillComponent color='green'>
    Active
</PillComponent>

Property	Type	Options	Default	Description
`className`	String	n/a	n/a	Additional CSS class names that can be applied to the pill. Defaults to an empty string.
`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.
`closeButton`	Boolean	`true` `false`	`false`	If true, a close button is displayed on the pill, allowing it to be dismissed.
`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`.

StatusIcon

import { StatusIcon } from 'groovinads-ui';

<StatusIcon status={1} />

Property	Type	Options	Default	Description
`animated`	Boolean	`true` `false`	`false`	If true, the icon will include animation effects on active status. Defaults to false, indicating no animation.
`className`	String	n/a	n/a	Additional CSS class names that can be applied to the status icon. Defaults to an empty string.
`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.

Customization

Currently, the components are not customizable.

Contributions

This library is for internal use by Groovinads and is not open to external contributions.

For more information or support, contact the Groovinads development team.

groovinads-ui

Included components

Requirements

⚠️ Important: Use of additional CSS libraries

Installation

Usage

Button

Inputs

Checkbox

Input

Radio

Switch

Textarea

Labels

LoginSource

PillComponent

StatusIcon

Customization

Contributions

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

groovinads-ui

Included components

Requirements

⚠️ Important: Use of additional CSS libraries

Installation

Usage

Button

Inputs

Checkbox

Input

Radio

Switch

Textarea

Labels

LoginSource

PillComponent

StatusIcon

Customization

Contributions

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads