Skip to content
This repository has been archived by the owner on Mar 30, 2021. It is now read-only.
/ 4all-ui Public archive

Biblioteca de componentes de front-end

License

Notifications You must be signed in to change notification settings

4alltecnologia/4all-ui

Repository files navigation

4all-ui

Biblioteca de componentes de UI utilizados pela 4all

NPM JavaScript Style Guide Build Status

npm-badge

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



License

MIT © 4all Tecnologia