4all-ui

Biblioteca de componentes de UI utilizados pela 4all

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)

Tag

Tag props

width - width of the tag (type: String)
height - height of the tag (type: String)
bgColor - background-color of the tag (type: String)
disabled - disabled style (type: boolean)
border - border of the tag (e.g. 1px solid #ccc)
onHoverTag - function for tag hover event (type: function)
onBlurTag - function for tag blur event (type: function)
onClick - function for tag click event (type: function)
onRemoveTag - function for tag icon click event (type: function)
color - font color of the tag (type: String)
customStyles - customStyles to be inserted inside styled-components with high prority type (type: default style object)
secondary - secondary style (type: boolean)
maxWidth - max width of the tag (type: String)
withEllipsis - add ellipsis if the content exceeds the maxWidth (type: boolean)

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 */
    },
  },
};

Name		Name	Last commit message	Last commit date
Latest commit History 331 Commits
.storybook		.storybook
example		example
src		src
.babelrc		.babelrc
.editorconfig		.editorconfig
.eslintrc		.eslintrc
.gitignore		.gitignore
.npmignore		.npmignore
.prettierrc		.prettierrc
.travis.yml		.travis.yml
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json
rollup.config.js		rollup.config.js

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

4all-ui

Storybook

Install

Usage

Components

Button

Loader

NavTabs

NavTab

Tabs

Tab

Tag

Input

InputCurrency

SearchInput

Switch

Alert

ProgressBar

Textarea

Radio

Checkbox

Tooltip

Select

ItemImage

Pagination

Box

Header

Theme

Usage

Properties

License

About

Releases 5

Packages

Contributors 6

Languages

License

4alltecnologia/4all-ui

Folders and files

Latest commit

History

Repository files navigation

4all-ui

Storybook

Install

Usage

Components

Button

Loader

NavTabs

NavTab

Tabs

Tab

Tag

Input

InputCurrency

SearchInput

Switch

Alert

ProgressBar

Textarea

Radio

Checkbox

Tooltip

Select

ItemImage

Pagination

Box

Header

Theme

Usage

Properties

License

About

Topics

Resources

License

Stars

Watchers

Forks

Releases 5

Packages 0

Contributors 6

Languages

Packages