# Bondsports utils

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

Get Started :

1. install the package

```
npm i bondsports-utils@latest
```

2. wrap your app with the theme provider:

```
import {BnProvider} from 'bondsports-utils'

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

3. visit the <a href="https://determined-bose-0023a7.netlify.app/">storybook</a> 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>
        )
    }
```