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" />
          &nbsp;
          <Button app="lyfe-app" color="primary" variant="outlined" children=" App Button outlined" />
          &nbsp;
          <Button app="lyfe-value" color="primary" variant="contained" children=" Value Button contained" />
          &nbsp;
          <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 />
          &nbsp;
          <TextField variant="outlined" label=" Value" app="lyfe-value" />
          &nbsp;
          <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" }]} />
          &nbsp;
          <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" />
          &nbsp;
          <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"/>
              )}
            />
          &nbsp;
          <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

MIT ©