4all-ui NPM | npm.io

4all-ui

Biblioteca de componentes de UI utilizados pela 4all

npm-badge

Storybook

Use this link to see the library storybook and all components variations

Install

npm install --save 4all-ui

Usage

import React, { Component } from 'react';

import Button from '4all-ui/components/Button';

class Example extends Component {
  render() {
    return <Button onClick={() => console.log('Click')}>Button Text</Button>;
  }
}

Components

Button

Component Button Props

width - width of the button (type: String)
height - height of the button (type: String)
type - type of the button (type: String, e.g. submit, reset)
borderColor - color of the button border (type: String)
bgColor - background-color of the button (type: String)
disabled - disabled style (type: boolean)
customStyles - customStyles to be inserted inside styled-components with high prority type (type: default style object)
onClick - function for button click event (type: function)
color - font color of the button (type: String)
border - border of the button (e.g. 1px solid #ccc)
secondary - secondary style (type: boolean)
border - border of the button (type: String, e.g. 1px solid #ccc)
link - link style (type: boolean)

Loader

Loader props

size - size of the Loader (type: String)
width - border width of the Loader (type: String)
color - color of the Loader (type: String)

NavTabs

Component Button Props

secondary - secondary styles for NavTab (type: boolean)
customStyles - custom styles to be inserted inside styled-components with high prority (type: default's react style object)
children - the component NavTab (type: jsx)

NavTab

Component Button Props

path - path to go when click in NavTab (type: String)
exact - active style will be applied only if location match exact as the path (react router feature) (type: boolean)
activeStyle - custom styles to be inserted inside styled-components with high prority only for active tab (type: default's react style object)
hoverStyle - custom styles to be inserted inside styled-components with high prority only for hovered tab (type: default's react style object)
width - width of the tab (type: String)
height - height of the tab (type: String)
hoverColor - color of the tab when hovering (type: String)
activeBorderColor - color of the border when tab is active (type: String)
noOutline - remove default outline style when tab is focused (type: boolean)
children - anything, but normally just a string (type: jsx)
customStyles - custom styles to be inserted inside styled-components with high prority (type: default's react style object)

Tabs

Component Button Props

secondary - secondary styles for NavTab (type: boolean)
customStyles - custom styles to be inserted inside styled-components with high prority (type: default's react style object)
children - the component Tab (type: jsx)

Tab

Component Button Props

onClick - function to be called when Tab is clicked (type: function)
active - true/false that indicates if the current Tab is active (type: boolean)
activeStyle - custom styles to be inserted inside styled-components with high prority only for active tab (type: default's react style object)
hoverStyle - custom styles to be inserted inside styled-components with high prority only for hovered tab (type: default's react style object)
width - width of the tab (type: String)
height - height of the tab (type: String)
hoverColor - color of the tab when hovering (type: String)
activeBorderColor - color of the border when tab is active (type: String)
noOutline - remove default outline style when tab is focused (type: boolean)
children - anything, but normally just a string (type: jsx)
customStyles - custom styles to be inserted inside styled-components with high prority (type: default's react style object)

Input

Input props

disabled - disabled style (type: boolean)
error - error style (type: boolean)
onChange - function for input change event (type: function)
onFocus - function for input focus event (type: function)
customStyles - customStyles to be inserted inside styled-components with high prority type (type: default style object)
type - input type (type: String)
value - input value (type: any)
placeholder - default input placeholder (type: String)
maxLength - set a maximum length (type: String)
checked - checked style (type: bool)
search - search style (type: bool)
customIcon - customIcon to be inserted inside the input (type: any)
onIconClick - function for customIcon click event (type: function)
iconColor - color of the check and search icons (type: string)
required - set input as required (type: bool)

InputCurrency

InputCurrency props

disabled - disabled style (type: boolean)
error - error style (type: boolean)
onChange - function for input change event (type: function)
onFocus - function for input focus event (type: function)
customStyles - customStyles to be inserted inside styled-components with high prority type (type: default style object)
type - input type (type: String)
value - input value (type: any)
placeholder - default input placeholder (type: String)
checked - checked style (type: bool)
required - set input as required (type: bool)

SearchInput

For this component we are using react-debounce-input and customizing it, if you want to see its docs

Search Input props

disabled - disabled style (type: boolean)
error - error style (type: boolean)
onChange - function for input change event (type: function)
onFocus - function for input focus event (type: function)
customStyles - customStyles to be inserted inside styled-components with high prority type (type: default style object)
type - input type (type: String)
value - input value (type: any)
placeholder - default input placeholder (type: String)
maxLength - set a maximum length (type: String)
checked - checked style (type: bool)
minLength - min length of string typed to search (type: number, default: 2)
debounceTimeout - timeout to call onChange callback function of string typed to search (type: number, default: 300)
iconColor - color of search icon (type: string)
onClearSearch - it will add clear icon btn for clearing field if clicked (type: func, default: null)
onChangeAccessible - when user click on search icon or press enter for cases where you dont want to search together with input control (type: func, default: () => {})

Switch

Switch props

checked - check/uncheck the switch (type: boolean)
disabled - disabled style (type: boolean)
onChange - function for switch state change (type: function)
customStyles - customStyles to be inserted inside styled-components with high prority type (type: default style object)
sliderStyles - custom styles for the circle inside the switch (type: default style object)
labelStyles- custom styles for the text next to the switch (type: default style object)

Alert

Alert props

secondary - secondary style (type: bool)
fontColor - custom font color (type: String)
backgroundColor - custom background color (type: String)
iconColor - custom icon color (type: String)
width- component width (type: String)
customStyles - customStyles to be inserted inside styled-components with high prority type (type: default style object)

ProgressBar

ProgressBar props

progress - current progress (type: String)
barColor - progress bar's bar color (type: String)
height - component's height (type: String)
width - component's width (type: String)
roundness- component's roundness/border-radius (type: String)
customStyles - customStyles to be inserted inside styled-components with high prority type (type: default style object)

Textarea

Textarea props

value - input value (type: any)
disabled - disabled style (type: boolean)
onChange - function for state change (type: function)
customStyles - customStyles to be inserted inside styled-components with high prority type (type: default style object)
error - error style (type: boolean)
height - component height (type: String)
width - component width (type: String)
placeholder - default input placeholder (type: String)

Radio

Radio props

checked - check/uncheck the radio (type: boolean)
disabled - disabled style (type: boolean)
onChange - function for radio change (type: function)
customDescStyles - custom styles to be inserted into the styled-components with high prority type (type: default style object)
value - input value (type: any)
label - radio label text (type: String)
desc - radio description (type: String)

Checkbox

Checkbox props

checked - check/uncheck the checkbox (type: boolean)
disabled - disabled style (type: boolean)
onChange - function for state change (type: function)
customStyles - customStyles to be inserted inside styled-components with high prority type(type: default style object)
label - checkbox label text (type: String)
mixed- mixed style (type: boolean)

Tooltip

Tooltip props

top - tooltip above the button flag (type: boolean)
right - tooltip at the right of the button flag (type: boolean)
secondary - secondary style (type: boolean)
backgroundColor - background color (type: String)
fontColor - font color (type: String)
width - tooltip width (type: String)
buttonSize - button width/height (type: Number)
customStyles - customStyles to be inserted inside styled-components with high prority type (type: default style object)

Select

For this component we are using react-select and customizing it, if you want to see its docs

Select props

id - id of the select (type: String)
value - object passed as option (type: object)
options - array of options that can be selected docs (type: array)
name - name of the select (type: String)
onChange - function triggered when some option is clicked or removed (type: boolean)
isMultiple - can select more than one value (type: boolean)
formatLabel - function to format the selected label example (type: String)
error - style if some error ocurred on input (type: boolean)
closeMenuOnSelect - should close menu when select after select an option (type: boolean)
customValueStyles - object with custom styles to be applied to the value label (type: object)
canRemove - in multiselect show button to remove selected option (type: boolean)
valueBgColor - background color of the selected option label (type: String)
valueColor - color color of the selected option label (type: String)
iconColor - color of the icons (type: String)
height - height of the select input (type: String)
optionHeight - height of the options (type: String)
disabled - disabled select (type boolean)
containerCustomStyles - object with custom styles to be applied to the select container element (type: object)
optionIconColor - option check icon's color (type: string)
dotOptions - dot configuration object (type: object)
width - component's width (type: string)
borderColor - component's border color (type: string)
customPlaceholderStyles - placeholder custom styles (type: object)
customValueContainerStyles - value container custom styles (type: object)
customDropdownIndicatorStyles - dropdown indicator custom styles (type: object)
isSearchable - disables the search behavior (type: boolean)

ItemImage

ItemImage props

image - image path (type: String)
small - set the size to small (type: boolean)
alt - image alt text (type: String)
title - image title text (type: String)
size - image size (type: String)
backgroundColor - background color (type: String)
fontColor - font color (type: String)
customStyles - customStyles to be inserted inside styled-components with high prority type (type: default style object)
fontSize - text font size (type: String)
iconSize - icon size (type: String)
iconColor - icon color (type: String)
emptyText - custom text to show when there is no image (type: String)
loading - html img loading attribute (type: String)
iconOnly - hides the empty image text (type: boolean)
noImage - hide default image (type: boolean)
customDefaultIcon - Use your own default no photo icon (type: JSX)

Pagination

For this component we are using rc-pagination and customizing it, if you want to see its docs

Select props

id - id of the pagination (type: String)
className - class of the pagination (type: String)
pages - number of pages (type: Number)
secondary - apply secondary style (type: boolean)
currentPage - current page with active style of the pagination component (type: Number)
onChangePage - function triggered when some page or next/prev/jump is clicked (type: function)
itemWidth - width of every page button (type: String)
itemHeight - height of every page button (type: String)
activeBgColor - background-color of active page (type: String)
itemBgColor - background-color of page not selected (type: String)
customActiveItemStyles - object with custom styles to be applied active page (type: object)
customInactiveItemStyles - object with custom styles to be applied page not active (type: object)
iconColor - color of the icons (type: String)
showLessItems - show less pages (3), the default is always 5 (type: boolean)

Box

Box Props

colSize - number between 1 and 12 to identify the size of the box (type: Number)
colSpacing - Number in px to put spacing between boxes (margin-right) (type: Number)
customStyles - customStyles to be inserted inside styled-components with high prority type (type: default style object)

Header

Header Props

breadcrumbLinks - array of links to be added to breadcrumbtrail navigation, optional (type: array of objects)
title - main text to be displayed on header (type: String)
backlink - link to previous page, optional (type: object)
containerStyles - custom styles to be applied to container (type: default style object)

Theme

Usage

import styled from 'styled-components';
import { styles, mixins } from '4all-ui/styles';

const ContainerDiv = styled.div`
  background-color: ${styles.colors.MAIN_COLOR};
  ${mixins.flexPosition({ align: 'center', justify: 'space-between', direction: 'column' })}
`;

Properties

const theme = {
  styles: {
    fontSizes: {
      SIZE_1: '35px',
      SIZE_2: '30px',
      SIZE_3: '25px',
      SIZE_4: '20px',
      SIZE_5: '16px',
      SIZE_6: '14px',
      SIZE_7: '12px',
    },
    fontWeights: {
      BOLD: '700',
      SEMIBOLD: '600',
      NORMAL: 'normal',
    },
    fontFamily: "'Open Sans', sans-serif",
    buttons: {
      HEIGHT_SMALL: '40px',
      HEIGHT_MEDIUM: '45px',
      HEIGHT_LARGE: '50px',
    },
    colors: {
      MAIN_COLOR: '#4FA444',
      DANGER_COLOR: '#D34848',
      INFO_COLOR: '#588de7',
      HIGHLIGHT_COLOR: '#E29A09',
      GRAY_DARKER: '#333333',
      GRAY_MEDIUM: '#979797',
      GRAY_MEDIUM_3: '#a0a0a0',
      GRAY_LIGHT: '#F5F5F5',
      GRAY_LIGHT_2: '#E4E4E4',
      WHITE: '#FFFFFF',
    },
    borders: {
      RADIUS_1: '3px',
      RADIUS_ROUND: '50%',
    },
  },
  mixins: {
    flexPosition: function({
      align /*(align-items)*/,
      justify /*(justify-content)*/,
      direction /*(flex-direction)*/,
    }) {
      /* return string to be inserted into your styled-component */
    },
    fontStyle: function(color, fontSize, fontWeight) {
      /* return string to be inserted into your styled-component */
    },
    customScrollbar: function() {
      /* return string to be inserted into your styled-component */
    },
    globalStyle: function() {
      /* return string to be inserted into your styled-component */
    },
  },
};