icp-components

INTELLIGENT CONTACT PLATFORM - Components Library

This will be a set of re-usable components for the IcPlaftorm

Example:

For the use of the component:

import { Button, Header, Input, Title, ... } from 'icp-components';

<Header title="IcHub" />
<Title label="Create New Record"></Title>

Currently this library contain the following components:

1.- Button: Simple action Button
    - <Button/>
    - Props: ButtonHTMLAttributes
    - Kind?: 'delete' and 'edit'

2.- Header: Navbar for the child aplications
    - <Header/>
    - Props: title, user, onLogin, onLogout, onCreateAccount

3.- Footer: Footer for the child aplications
    - <Footer/>

4.- Input: Simple Input element
    - <Input/>
    - Props: InputHTMLAttributes

5.- Title: H2 title for the pages
    - <Title/>
    - Props: label

6.- Select: Simple dropdown menu element
    - <Select/>
    - Props: SelectHTMLAttributes

7.- SnakcBar: Snackbar Alert component (unfinished)
    - <Snack/>
    - Props: Label, type

8.- Select: Simple Select element
    - <Select/>
    - Props: SelectHTMLAttributes

9.- Modal:
    - Usage:

        const [modalActive, setModalActive] = useState(false);

    - The component need 3 prop elements: 'setOpen', 'setClose', title

        <IcModal setOpen={modalActive} setClose={() => setModalActive(false)} title="Modal Title">
			{children}
		</IcModal>

        Method to open:

        <Button onClick={() => setModalActive(true)} style={{ margin: '2rem' }}>
			Open Modal
		</Button>

10. Multi Select:
    - <IcMultiSelect options={element}/ >
    Props:
        autoFocus - focus the control when it mounts
        className - apply a className to the control
        classNamePrefix - apply classNames to inner elements with the given prefix
        isDisabled - disable the control
        isMulti - allow the user to select multiple values
        isSearchable - allow the user to search for matching options
        name - generate an HTML input with this name, containing the current value
        onChange - subscribe to change events
        options - specify the options the user can select from
        placeholder - change the text displayed when no option is selected
        noOptionsMessage - ({ inputValue: string }) => string | null - Text to display when there are no options
        value - control the current value