Flex, Grid, Container

Box

Props|Values|Default --|--|-- justifyContent|string|center| alignItems|"flex-start" , "flex-end" , "center" , "baseline" , "stretch"|center| alignContent | "flex-start" , "flex-end" , "center" , "space-between" , "space-around" , "stretch" | null width | string eg: 20px | 100% height | string eg: 20px | 100% textAlign | "left" , "right" , "center" , "justify" , "inherit" | center wrap(fle-wrap) | "nowrap" , "wrap" , "wrap-reverse" | wrap direction(flex-direction)| row, row-reverse, column, column-reverse | row margin | string. Eg: 20px | 0 pad(padding) | string | 0 bgColor(background-color) | string | transparent

Usage

    import { Components, ThemeTypes } from "devs-react-box"
    
    const theme: ThemeTypes = {
        palette: {
            Blue: {
                dark: {
                    5: '#F2F6FA'
                },
            },
        };
        // shadows,
        // typography,
        // zIndex,
        // shape,
        // fontSizes,
    };
    const { Flex } = Components(theme)

   const App = () => (
        <Flex
            justifyContent="center"
            bgColor='Blue.dark.5'
            // ...other propps if needed
        >
            This is a div
        </Flex>
   )

Grid

Props|Values|Default --|--|-- columns(grid-template-columns) | string | 1fr rows(gird-template-rows) | string | auto gap(grid-gap) | string | 10px justifyContent|string|center| alignItems|"flex-start" , "flex-end" , "center" , "baseline" , "stretch"|center| width | | 100%

Usage

    import { Components, ThemeTypes } from "devs-react-component-library"

    const theme: ThemeTypes = {
        // palette: 
        // shadows,
        // typography,
        // zIndex,
        // shape,
        // fontSizes,
    };
    const { Grid } = Components(theme)

   const App = () => (
        <Grid
            row="1fr 1fr"
            // ...other propps if needed
        >
            This is a div
        </Grid>
   )

   

Container

Props |Values|Default --|--|-- width | string eg: 20px | 100% height | string eg: 20px | 100% textAlign | "left" , "right" , "center" , "justify" , "inherit" | center margin | string. Eg: 20px | 0 pad(padding) | string | 0 bgColor(background-color) | string | transparent

Usage

     import { Components, ThemeTypes } from "devs-react-component-library"
    
    const theme: ThemeTypes = {
        palette: {
            read:   '#F2F6FA' 
        };
        // shadows,
        // typography,
        // zIndex,
        // shape,
        // fontSizes,
    };
    const { Grid } = Components(theme)


    const App = () => (
        <Container
            width="50px"
            bgColor='read'
            // ...other propps if needed
        >
            This is a div
        </Container>
    )