@spl/zero

A set of React UI component and utilities

Install

npm install --save @spl/zero

Usage

import React from 'react';

import { hexToRgbA, hexToRgb } from '@spl/zero'; // utils
import { Row, Col, Button, ButtonGroup, Typography } from '@spl/zero';
import { useMediaQuery, useBreakpoints, Breakpoints } from '@spl/zero'; // Rwd

const grid = {
	xs: 12,
	sm: 10,
	md: 8,
	lg: 6,
	xl: 4,
}

function Comp() {
	return (
		<div>
			<Btn />
			<Rwd />
			<Utils />
			<Text />
		</div>
	);
}

function Btn() {
	return (
		<div style={{ background: '#fff' }}>
			<ButtonGroup>
				<Button color="primary"> primary</Button>
				<Button> secondary</Button>
				<Button> success</Button>
			</ButtonGroup>
			<Typography>Contain</Typography>
			<Button color="primary"> primary</Button>
			<Button color="secondary"> secondary</Button>
			<Button color="success"> success</Button>
			<Button color="info"> info</Button>
			<Button color="warning"> warning</Button>
			<Button color="danger"> danger</Button>
			<Button color="light"> light</Button>
			<Button color="dark"> dark</Button>
			<Typography>Outline</Typography>
			<Button variant="outline" color="primary"> primary</Button>
			<Button variant="outline" color="secondary"> secondary</Button>
			<Button variant="outline" color="success"> success</Button>
			<Button variant="outline" color="info"> info</Button>
			<Button variant="outline" color="warning"> warning</Button>
			<Button variant="outline" color="danger"> danger</Button>
			<Button variant="outline" color="light"> light</Button>
			<Button variant="outline" color="dark"> dark</Button>
			<Typography>Text</Typography>
			<Button variant="text" color="primary"> primary</Button>
			<Button variant="text" color="secondary"> secondary</Button>
			<Button variant="text" color="success"> success</Button>
			<Button variant="text" color="info"> info</Button>
			<Button variant="text" color="warning"> warning</Button>
			<Button variant="text" color="danger"> danger</Button>
			<Button variant="text" color="light"> light</Button>
			<Button variant="text" color="dark"> dark</Button>
			<Typography>link</Typography>
			<Button variant="link" color="primary"> primary</Button>
			<Button variant="link" color="secondary"> secondary</Button>
			<Button variant="link" color="success"> success</Button>
			<Button variant="link" color="info"> info</Button>
			<Button variant="link" color="warning"> warning</Button>
			<Button variant="link" color="danger"> danger</Button>
			<Button variant="link" color="light"> light</Button>
			<Button variant="link" color="dark"> dark</Button>
			<Typography>Pill</Typography>
			<Button shape="pill" color="primary"> primary</Button>
			<Button shape="pill" color="secondary"> secondary</Button>
			<Button shape="pill" color="success"> success</Button>
			<Button shape="pill" color="info"> info</Button>
			<Button shape="pill" color="warning"> warning</Button>
			<Button shape="pill" color="danger"> danger</Button>
			<Button shape="pill" color="light"> light</Button>
			<Button shape="pill" color="dark"> dark</Button>
			<Typography>Square</Typography>
			<Button shape="square" color="primary"> primary</Button>
			<Button shape="square" color="secondary"> secondary</Button>
			<Button shape="square" color="success"> success</Button>
			<Button shape="square" color="info"> info</Button>
			<Button shape="square" color="warning"> warning</Button>
			<Button shape="square" color="danger"> danger</Button>
			<Button shape="square" color="light"> light</Button>
			<Button shape="square" color="dark"> dark</Button>
			<Typography>Size</Typography>
			<Button size="small">small</Button>
			<Button size="medium">medium</Button>
			<Button size="large">large</Button>

			<Button disabled>disabled</Button>
		</div>
	)
}

function Rwd() {
	const breakpoints = useBreakpoints();
	const matches = useMediaQuery('(min-width:600px)');

	return (
		<React.Fragment>

			<Typography>Breakpoints</Typography>
			<Breakpoints only='sm'>
				Breakpoints: SM
			</Breakpoints>
			<Breakpoints only={['xs', 'sm', 'xl']}>
				Show only: xs or sm or xl
			</Breakpoints>

			<Typography>media query, breakpoints (hook)</Typography>
			<Typography>
				<code>
					const matches = useMediaQuery('(min-width:600px)')
				</code>
				<Typography size="small">matches: {JSON.stringify(matches)}</Typography>
			</Typography>


			<Typography>Grid</Typography>
			<Row>
				<Col {...grid} style={{ background: '#ffc107' }}>
					<code>
						const breakpoints = useBreakpoints()
					</code>
					<br />
					media query: {breakpoints} {grid[breakpoints]}
				</Col>
			</Row>
			<br />
		</React.Fragment>
	)
}

function Utils() {
	return (
		<React.Fragment>
			<Typography>Utils</Typography>
			<p style={{ background: hexToRgb('#f50057') }}>hexToRgb<br /> #f50057<br /> {hexToRgb('#f50057')}</p>
			<p style={{ background: hexToRgb('#84D70D') }}>hexToRgbA<br /> #84D70D<br /> {hexToRgbA('#84D70D', 0.5)}</p>
		</React.Fragment>
	)
}

function Text() {
	return (
		<React.Fragment>
			<Typography as='h1' color='primary' variant='h1'>This is h1</Typography>
			<Typography as='h2' color='secondary' variant='h2'>This is h2</Typography>
			<Typography as='h3' variant='h3'>This is h3</Typography>
			<Typography as='h4' variant='h4'>This is h4</Typography>
			<Typography as='h5' variant='h5'>This is h5</Typography>
			<Typography as='h6' variant='h6'>This is h6</Typography>
			<Typography as='code' variant='code'>This is code</Typography>
			<Typography variant='paragraph'>This is code</Typography>
		</React.Fragment>
	)
}

export default Comp;

License

MIT © sanpyaelin