groovinads-ui

v1.1.7

Published

10 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

510

0High
0Medium
0Low

pablo.pinero

css sass groovinads responsive front-end components

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>

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>

Switch

import { Switch } from 'groovinads-ui';

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

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>

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.