bondsports-utils

Bondsports utils

This package include all the components we need according to the design system.

Get Started :

• install the package

npm i bondsports-utils@latest

• wrap your app with the theme provider:

import {BnProvider} from 'bondsports-utils'

    export const App = () => {
        return (
    	    <BnProvider>
	// your app / router / whatever
    	    </BnProvider>
        )
    }

• visit the storybook to see which components supported

Usage Examples

Button:

import {BnProvider,Button} from 'bondsports-utils'
    export const App = () => {
        return (
    	    <BnProvider >
    		    <Button theme="primary" sizer="M"
    		    onClick={()=>alert("Hello new Bondsports utils package")}>
    			    Submit
    		    </Button>
    	    </BnProvider>
        )
    }

with Dynamic styling (no need to pass colors object to each element in the BnProvider) :

import {BnProvider,Button} from 'bondsports-utils'
    export const App = () => {
	const {colors} = useColors()
        return (
    	    <BnProvider colors={colors}>
    		    <Button theme="primary" sizer="M"
    		    onClick={()=>alert("Hello new Bondsports utils package")}>
    			    Submit
    		    </Button>
    	    </BnProvider>
        )
    }

Modal:

Controlled

import {ModalWindow,useModal} from 'bondsports-utils'
    export const App = () => {
		const {isShowing,toggle} = useModal()

        return (
    	    <BnProvider >
				<button onClick={toggle}>open modal</button>
				<ModalWindow toggle={toggle} isShowing={isShowing}>
					just put here whatever you want in the modal
				</ModalWindow>
    	    </BnProvider>
        )
    }

UnControlled

import {Modal} from 'bondsports-utils'
    export const App = () => {
	const {colors} = useColors()
        return (
    	    <BnProvider colors={colors}>
			<Modal body={<div>this is the body of the modal</div>}>
    		    <Button theme="primary" sizer="M">
    			    Submit
    		    </Button>
				</Modal>
    	    </BnProvider>
        )
    }

Icons:

with no padding:

import {getIcon} from 'bondsports-utils'

    export const App = () => {
        return (
    	    <BnProvider>
		<div>
			{getIcon("search")}
		</div>
    	    </BnProvider>
        )
    }

with padding (4px) just add variable 'l' / 'r':

import {getIcon} from 'bondsports-utils'

    export const App = () => {
        return (
    	    <BnProvider>
		<div>
			{getIcon("search","r")}
		</div>
    	    </BnProvider>
        )
    }