0.1.23 • Published 3 years ago
lyfegen.react-common v0.1.23
lyfegen-react-common
Made with create-react-library
Install
npm install --save lyfegen-react-common
Usage
import React from 'react';
import { Box, CssBaseline, Paper } from '@material-ui/core';
import { makeStyles, ThemeProvider } from '@material-ui/core/styles';
import { Button } from 'lyfegen-react-common';
import { TextField } from 'lyfegen-react-common';
import { Table } from 'lyfegen-react-common';
import { Status } from 'lyfegen-react-common';
import { Typography } from 'lyfegen-react-common';
import { Complete, CompleteInput } from 'lyfegen-react-common';
import { PhoneInput } from 'lyfegen-react-common';
import { lyfeTheme } from 'lyfegen-react-common';
function App() {
const classes = useStyles();
return (
<ThemeProvider theme={lyfeTheme}>
<CssBaseline />
<Box className={classes.root}>
<Paper className={classes.paper}>
<Typography>BUTTONS</Typography>
<Button app="lyfe-app" color="primary" variant="contained" children=" App Button contained" />
<Button app="lyfe-app" color="primary" variant="outlined" children=" App Button outlined" />
<Button app="lyfe-value" color="primary" variant="contained" children=" Value Button contained" />
<Button app="lyfe-value" color="primary" variant="outlined" children=" Value Button outlined" />
</Paper>
<Paper className={classes.paper}>
<Typography> INPUTS </Typography>
<TextField variant="outlined" label=" App" app="lyfe-app" required />
<TextField variant="outlined" label=" Value" app="lyfe-value" />
<TextField select required defaultValue={"0"} variant="outlined" label=" App Select" app="lyfe-app" options={[{ label: "Please select", value: "0" }, { label: "Treatment", value: "1" }, { label: "Patient", value: "2" }]} />
<TextField select defaultValue={"0"} variant="outlined" label=" Value Select" app="lyfe-value" options={[{ label: "Please select", value: "0" }, { label: "Contract", value: "1" }, { label: "Amount", value: "2" }]} />
</Paper>
<Paper className={classes.paper}>
<Typography> PHONE INPUTS </Typography>
<Box display="flex">
<PhoneInput app="lyfe-app" defaultCountry="ch" />
<PhoneInput app="lyfe-value" defaultCountry="ch" />
</Box>
</Paper>
<Paper className={classes.paper}>
<Typography> AUTOCOMPLETE </Typography>
<Box display="flex">
<Complete
id="lyfe-app"
app="lyfe-app"
optionLabel="title"
options={[{ title: "Patient", value: 0 }, { title: "Intervention", value: 1 }]}
renderInput={params => (
<CompleteInput params={params} label={'App AutoComplete'} app="lyfe-app"/>
)}
/>
<Complete
id="lyfe-value"
app="lyfe-value"
optionLabel="title"
multiple
options={[{ title: "Contract", value: 0 }, { title: "Amount", value: 1 }]}
renderInput={params => (
<CompleteInput params={params} label={'App AutoComplete'} required app="lyfe-value"/>
)}
/>
</Box>
</Paper>
<Paper className={classes.paper}>
<Typography> TABLE </Typography>
<Table app="lyfe-value" data={[{ name: "John", surname: "Doe" }]} columns={[{ title: "Name", field: "name" }, { title: "Surname", field: "surname" }]} title="Value Example" />
</Paper>
<Paper className={classes.paper}>
<Typography> STATUS </Typography>
<Box display="flex">
<Status type={0} />
<Status type={1} />
<Status type={2} />
<Status type={3} />
</Box>
</Paper>
<Paper className={classes.paper}>
<Typography> TYPOGRAPHY </Typography>
<Typography variant="h1" type="bold" >h1 Bold </Typography>
<Typography variant="h1" type="semi-bold" >h1 Semi-Bold </Typography>
<Typography variant="h1" >h1 Regular </Typography>
<Typography variant="h2" type="bold" >h2 Bold </Typography>
<Typography variant="h2" type="semi-bold" >h2 Semi-Bold </Typography>
<Typography variant="h2" >h2 Regular </Typography>
<Typography variant="h3" type="bold" >h3 Bold </Typography>
<Typography variant="h3" type="semi-bold" >h3 Semi-Bold </Typography>
<Typography variant="h3" >h3 Regular </Typography>
<Typography variant="h4" type="bold" >h4 Bold </Typography>
<Typography variant="h4" type="semi-bold" >h4 Semi-Bold </Typography>
<Typography variant="h4" >h4 Regular </Typography>
<Typography variant="h5" type="bold" >h5 Bold </Typography>
<Typography variant="h5" type="semi-bold" >h5 Semi-Bold </Typography>
<Typography variant="h5" >h5 Regular </Typography>
<Typography variant="h6" type="bold" >h6 Bold </Typography>
<Typography variant="h6" type="semi-bold" >h6 Semi-Bold </Typography>
<Typography variant="h6" >h6 Regular </Typography>
<Typography variant="inherit" type="bold" >inherit Bold </Typography>
<Typography variant="inherit" type="semi-bold" >inherit Semi-Bold </Typography>
<Typography variant="inherit" >inherit Regular </Typography>
<br />
<Typography variant="caption" type="bold" >caption Bold </Typography>
<Typography variant="caption" type="semi-bold" >caption Semi-Bold </Typography>
<Typography variant="caption" >caption Regular </Typography>
<br />
<Typography variant="overline" type="bold" >overline Bold </Typography>
<Typography variant="overline" type="semi-bold" >overline Semi-Bold </Typography>
<Typography variant="overline" >overline Regular </Typography>
<br />
<Typography variant="body1" type="bold" >body1 Bold </Typography>
<Typography variant="body1" type="semi-bold" >body1 Semi-Bold </Typography>
<Typography variant="body1" >body1 Regular </Typography>
<Typography variant="body2" type="bold" >body2 Bold </Typography>
<Typography variant="body2" type="semi-bold" >body2 Semi-Bold </Typography>
<Typography variant="body2" >body2 Regular </Typography>
<Typography variant="subtitle1" type="bold" >subtitle1 Bold </Typography>
<Typography variant="subtitle1" type="semi-bold" >subtitle1 Semi-Bold </Typography>
<Typography variant="subtitle1" >subtitle1 Regular </Typography>
<Typography variant="subtitle2" type="bold" >subtitle2 Bold </Typography>
<Typography variant="subtitle2" type="semi-bold" >subtitle2 Semi-Bold </Typography>
<Typography variant="subtitle2" >subtitle2 Regular </Typography>
</Paper>
</Box>
</ThemeProvider>
);
}
const useStyles = makeStyles((theme) => ({
root: {
height: '100vh',
},
paper: {
padding: theme.spacing(2),
marginBottom: theme.spacing(1),
marginTop: theme.spacing(2),
marginLeft: theme.spacing(2),
marginRight: theme.spacing(2),
}
}));
export default App;
License
0.1.23
3 years ago
0.1.22
3 years ago
0.1.21
3 years ago
0.1.20
3 years ago
0.1.19
3 years ago
0.1.18
3 years ago
0.1.16
3 years ago
0.1.15
3 years ago
0.1.14
3 years ago
0.1.13
3 years ago
0.1.12
3 years ago
0.1.11
3 years ago
0.1.10
3 years ago
0.1.9
3 years ago
0.1.8
3 years ago
0.1.7
3 years ago
0.1.6
3 years ago
0.1.5
3 years ago
0.1.4
3 years ago
0.1.3
3 years ago
0.1.2
3 years ago
0.1.1
3 years ago
0.1.0
3 years ago