Created this project to create reusable components that will be used across delicious-basket project. You can find delicious recipe project at: https://github.com/vinodhkumar-k/delicious-basket
These components are based on the styled-system specification and rendered using styled-components.
The Box component serves as a wrapper component for layout related needs. Use Box to set values such as display, width, height, and more. In practice, this component is used as a wrapper around other components to achieve Box Model related styling.
This component uses the following functions from the styled-system: background, border, color, flexbox, layout, position, shadow, and space.
The Button component can use two different variants; primary and secondary, that can be manipulated through the variant property.
This component uses the following functions from styled-system: layout, space.
The Flex component behaves the same as the Box component except that it has display: flex set by default.
Grid is implemented through the styled-bootstrap-grid https://github.com/dragma/styled-bootstrap-grid
The List component renders a ul element with list-style-type: none set by default.
This component uses the following functions from styled-system: layout, space.
The ListItem component renders a li element, and it's recommended to be used as the children of the List component.
The Text component is a wrapper component that will apply typography styles to the text inside. It renders a div element as default, but using the "as" polyphormic property from the styled-components specification can render any text element, such as p, h1, span, etc.
npm i delicious-components
Example: const Components = require('delicious-components');
const Box = Components.Box; <Box color={'Green'}>Hello Delicious Basket
Example: // @ts-ignore import { Box } from 'delicious-components'; <Box color={'Red'}>Hello Delicious Basket