biokit

    1.2.0 • Public • Published

    biokit

    ui component kit for bionet

    NPM JavaScript Style Guide

    Clone project

    git clone https://github.com/TS22082/biokit.git
    cd biokit
    npm install

    Work on project

    cd biokit
    npm run

    create new tab or new terminal window and navigate to root folder of project

    cd example
    npm run

    Install

    npm install --save biokit

    Usage

    This library assumes you have the latest bootstrap and mdi icons package imported through. The latest CDN links needed at the time of writing are:

      <link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> 
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> 
    import React, { Component } from 'react'
    import {TextInput, Form, FormGroup, Card, Container, Row, Column} from 'biokit'
     
    export default class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          name: '',
          email: '',
          pw: '',
          pw2: '',
        };
      }
      handleNameChange = e => {
        const name = e.target.value;
        this.setState({ name });
      };
      handlePwChange = e => {
        const pw = e.target.value;
        this.setState({ pw });
      };
      handlePw2Change = e => {
        const pw2 = e.target.value;
        this.setState({ pw2 });
      };
      handleEmailChange = e => {
        const email = e.target.value;
        this.setState({ email });
      };
      
      pwMatch = () => {
        if (this.state.pw === this.state.pw2){
          return true
        } else {
          return false
        }
      }
     
      validPw = (pw) => {
        var re = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])\w{6,}$/;
        return re.test(pw)
      }
     
      render () {
        return (
          <Container
            fluid={true}>
            <Row>
              <Column sm={'12'} md={'12'} lg={'6'}>
                <Card
                  rounded={'0'}
                  spacing={'mt-0'}
                  icon={<i className='mdi mdi-account-box mr-2'/>}
                  title={'Sign In'}>
                  <Form>
                    <FormGroup>
                      <TextInput
                        inputTitle={'Username'}
                        type={'text'}
                        name={'name'}
                        placeholder={'Please enter text'}
                        handleChange={this.handleNameChange}
                        text={this.state.name}
                        theme={'light'}
                      />
                      <TextInput
                        inputTitle={'Email'}
                        type={'email'}
                        name={'email'}
                        placeholder={'Please enter name'}
                        handleChange={this.handleEmailChange}
                        text={this.state.email}
                        theme={'light'}
                      />
                      <TextInput
                        inputTitle={'Password'}
                        type={'password'}
                        name={'password'}
                        placeholder={'Please enter password'}
                        handleChange={this.handlePwChange}
                        text={this.state.pw}
                        theme={'light'}
                        trueWhen={this.validPw(this.state.pw)}
                        falseMessage={'Needed:  minimum six charectures: one number, one lowercase and one uppercase letter'}
                      />
                      <TextInput
                        inputTitle={'Password'}
                        type={'password'}
                        name={'pw'}
                        placeholder={'Please repeat password'}
                        handleChange={this.handlePw2Change}
                        text={this.state.pw2}
                        theme={'light'}
                        trueWhen={this.pwMatch()}
                        falseMessage={'Does not match first password'}
                      />
                    </FormGroup>
                  </Form>
                </Card>
              </Column>
              <Column sm={'12'} md={'12'} lg={'6'}>
                <Card
                  rounded={'0'}
                  spacing={'mt-0'}
                  icon={<i className='mdi mdi-account-box mr-2'/>}
                  title={'example card with content'}>
                  <h3>Inspirational quote</h3>
                  <p>Not every day is going to offer us a chance to save somebody's life, but every day offers us an opportunity to affect one.</p>
                  <p>- Mark Bezos</p>
                  <iframe width="100%" height="350" src="https://www.youtube.com/embed/GVG4wgCqeEQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </Card>
              </Column>
            </Row>
          </Container>

    License

    MIT © TS22082

    Keywords

    none

    Install

    npm i biokit

    DownloadsWeekly Downloads

    42

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    47.5 kB

    Total Files

    6

    Last publish

    Collaborators

    • geekcentric