@breathecode/breathecode-react-components NPM

BreatheCode Platform JS Components

This is the main UI Library used in all BreatheCode interfaces based on react.

Note: This is a very early development library, please help us debug it.

Philosophy

The BreatheCode UX is based on Markdown, it mainly relys on typography to create a neat experience but with a very minimalis approach.

Instalation

Install using npm

$ npm i @breathecode/breathecode-react-components --save

Import any component that you want to use

import { Panel, DropLink } from '@breathecode/breathecode-react-components';

Component Table of Contents:

Component	Description
Button	Simple button
Checkbox	It's a very simple checkbot
Droplink	It's a minimalist bootstrap dropdown
List	Just a list of stuff
Loading	Loading animation
MenuItem	Item on the left sidebar
Modal	Show stuff in the center of the screen
Notifier	Notifications in the top of the viewport
Panel	To display a box with material design shadow level
PrivateRoute	React Route that requiers autentication to display
ProgressKPI	Small indicator of progress
Sidebar	The Main Navegation component in BreatheCode's UI
BreatheCrumb	Show the path were the user is standing and allos the user to go back to previous levels

Actionable

A label that has a check on the right depending if its done or not.

Demo

Properties

{
  label: PropTypes.string.isRequired,
  dropdown: PropTypes.array,
  isSelected: PropTypes.bool,
  onDropdownSelect: PropTypes.func.isRequired,
  type: PropTypes.oneOf(['lesson', 'replit', 'quiz', 'assignment']),
}

    <ActionableItem key={i} type={l.type} 
        done={(l.status === "done")} 
        label={(typeof l.title !== 'undefined') ? l.title : l.associated_slug} 
        dropdown={l.menu} 
        onDropdownSelect={(option)=>this.actionableSelected(l,option)} 
      />;

Checkbox

Demo

Droplink

It displays a list of options when you click on it

Demo

=======

Usage

        <DropLink
            className='list_card' 
            dropdown={[
                { label: 'review students', slug: 'cohort_students', to: `/manage/student/?cohort=${data.slug}`},
                { label: 'change cohort stage', slug: 'change_stage', data: someData }
            ])}
            onSelect={(opt) => onEntitySelect(opt)}
        >
        Click me
        </DropLink>

List

It displays a ul with LIs or OLs depending on if it is ordered or not.

Demo

    <List className="any-class" ordered={true}>
        <ActionableItem key={i} label="Make the bed" done={false} />
        <ActionableItem key={i} label="Make the bed" done={false} />
        <ActionableItem key={i} label="Make the bed" done={false} />
        <ActionableItem key={i} label="Make the bed" done={false} />
    </List>

Loading

Show or hides a loadbar on the center of the screen

Demo

    <Loading show={true} />

Modal

Demo

Notifier

Displays a notification message on the top of the screen, you can specify if you want your notification to prompt the user for confirmation or not.

Demo

    let notifications = [{
        id: 1, //unique identifier
        msg: 'Are you sure you want to delete?', //message to display
        type: 'info', //info, error, success or warning
        onConfirm: confirm //this callback will be called on user confirmation 
    }];

    <Notifier notifications={notifications} />

PrivateRoute

It behaves like a normal react-router Route but with the addition that it redirects the user to /login if it loggedIn = false

    <BrowserRouter>
            <Switch>
                <Route exact path='/login' component={LoginView} />
                <PrivateRoute exact path='/' loggedIn={this.state.loggedIn} component={AnyPrivateView} />
                <Route render={() => (<p className="text-center mt-5">Not found</p>)} />
            </Switch>
        </div>
    </BrowserRouter>