ui component kit for bionet
git clone https://github.com/TS22082/biokit.git
cd biokit
npm install
cd biokit
npm run
create new tab or new terminal window and navigate to root folder of project
cd example
npm run
npm install --save biokit
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>
MIT © TS22082