connect-ui

Connect UI Library

This repository contains the essential files for building the Connect UI library. Connect UI library exports all the generic React Components used at various places on connect.trekhunt.com.

How to get started

Run npm install connect-ui.

How to contribute

First you need to pull the repo, connect-ui. You can add/edit/delete components in the src/components folder. Don't forget to export the new component in the /src/index.js file.

Components

List of the exported components:

• ConnectButton
• ConnectCheckbox
• ConnectDropDown
• ConnectTable
• ConnectTablePage
• ConnectTextInput

ConnectButton

<ConnectButton
   text="Text to be displayed"
   type="Type can be handler or link. Handler calls the handler function, link redirects to the given link"
   link="example-link"
   handler={()=>{}}
   theme="default is primary"
/>

ConnectCheckbox

<ConnectCheckbox
    isSelected="state of the checkbox, if it's selected or not"
    onChange={()=>{}}
/>

ConnectDropDown

<ConnectDropDown
    options={[{option: "opt", value: "val"}]}
    icon="String to pick an icon to display. Right now from a predefined list"
    placeholder="Placeholder text"
    selected="Selected value from the dropdown"
    onChange={()=>{}}
    bold="If the displayed text is bold or not"
    width="Width of the component"
/>

ConnectTable

<ConnectTable
    withCheckboxes="True if you want to display checkboxes for every row"
    globalActionButtons="List of the actionButtons to show next to the CheckBox"
    selection="The list of the selected rows"
    updateSelection={()=>{}}
    headers="Array of header items"
    items="Array of row items"
    itemsPerPage="Number of items to show on one table page"
/>

ConnectTablePage

<ConnectTablePage
    buttons="List of the buttons to show on the table page"
    filters="List of the dropdown filters to show next to the button"
    msg="Table pagination info"
    withCheckboxes="True, if you want to display checkboxes for every row"
    globalActionButtons="List of the actionButtons to show next to the CheckBox"
    selection="The list of the selected rows"
    updateSelection={()=>{}}
    headers="Array of header items"
    items="Array of row items"
    itemsPerPage="Number of items to show on one table page"
    itemCount="Number of items to show"
    itemsFrom="For pagination, the start number of the row"
    movePageTo="Function which handles the pagingation"
/>

ConnectTextInput

<ConnectTextInput
    onChange={()=>{}}
    value="State of the input"
    characterCount="True, if you want to have character limitation"
    maxCharacters="Number of characters to accept"
    placeholder="PlaceHolder text"
    number="If it's a numbers only inputform"
    width="The width of the component"
    onBlur="Function which is called when the input is invalid"
    disabled="True, if the input is disabled"
    readOnly="True, if the input is immutable"
    min="Minimum number to accept"
    max="Maximum number to accept"
    icon="Icon string to display in the input. Right now only from predefined ones."
/>

Icons

The list of the available icons right now:

• Activity
• Delete
• DownArrow
• Edit
• Owner
• Search
• Status
• View

Directories

• src/components - the place where you should add your new components
• dist - where the minified file is built