1.1.112 • Published 3 years ago

bondsports-utils v1.1.112

Weekly downloads
-
License
ISC
Repository
-
Last release
3 years ago

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
  1. wrap your app with the theme provider:
import {BnProvider} from 'bondsports-utils'

    export const App = () => {
        return (
    	    <BnProvider>
	// your app / router / whatever
    	    </BnProvider>
        )
    }
  1. 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>
        )
    }
@ctrl/tinycolor@dnd-kit/core@dnd-kit/modifiers@rollup/plugin-multi-entry@types/classnames@types/node@types/react@types/react-dom@types/react-router-domclassnamescleave.jsdayjsfinal-formpolishedreact-colorreact-final-formreact-indiana-drag-scrollreact-laagreact-router-domreact-sticky-tablerecoilrollup-plugin-sassrollup-plugin-svgrollup-plugin-typescript2shrink-stringtsconfig-paths-webpack-plugintypescript
@everything-registry/sub-chunk-1252@takala/frontend
1.1.100

3 years ago

1.1.108

3 years ago

1.1.107

3 years ago

1.1.106

3 years ago

1.1.105

3 years ago

1.1.104

3 years ago

1.1.102

3 years ago

1.1.101

3 years ago

1.1.99

3 years ago

1.1.111

3 years ago

1.1.110

3 years ago

1.1.112

3 years ago

1.1.92

3 years ago

1.1.91

3 years ago

1.1.90

3 years ago

1.1.96

3 years ago

1.1.94

3 years ago

1.1.98

3 years ago

1.1.97

3 years ago

1.1.89

3 years ago

1.1.88

3 years ago

1.1.84

3 years ago

1.1.83

3 years ago

1.1.82

3 years ago

1.1.87

3 years ago

1.1.86

3 years ago

1.1.70

3 years ago

1.1.73

3 years ago

1.1.72

3 years ago

1.1.78

3 years ago

1.1.77

3 years ago

1.1.76

3 years ago

1.1.75

3 years ago

1.1.79

3 years ago

1.1.81

3 years ago

1.1.80

3 years ago

1.1.69

3 years ago

1.1.67

3 years ago

1.1.66

3 years ago

1.1.65

3 years ago

1.1.68

3 years ago

1.1.59

3 years ago

1.1.63

3 years ago

1.1.62

3 years ago

1.1.61

3 years ago

1.1.64

3 years ago

1.1.56

3 years ago

1.1.54

3 years ago

1.1.58

3 years ago

1.1.57

3 years ago

1.1.52

3 years ago

1.1.51

3 years ago

1.1.53

3 years ago

1.1.49

3 years ago

1.1.46

3 years ago

1.1.43

3 years ago

1.1.41

3 years ago

1.1.40

3 years ago

1.1.42

3 years ago

1.1.34

3 years ago

1.1.33

3 years ago

1.1.38

3 years ago

1.1.37

3 years ago

1.1.36

3 years ago

1.1.35

3 years ago

1.1.39

3 years ago

1.1.32

3 years ago

1.1.31

3 years ago

1.1.29

3 years ago

1.1.28

3 years ago

1.1.30

3 years ago

1.1.27

3 years ago

1.1.26

3 years ago

1.1.25

3 years ago

1.1.12

3 years ago

1.1.11

3 years ago

1.1.16

3 years ago

1.1.15

3 years ago

1.1.14

3 years ago

1.1.13

3 years ago

1.1.19

3 years ago

1.1.18

3 years ago

1.1.17

3 years ago

1.1.23

3 years ago

1.1.20

3 years ago

1.1.9

3 years ago

1.1.10

3 years ago

1.1.8

3 years ago

1.1.7

3 years ago

1.1.6

3 years ago

1.1.5

3 years ago

1.1.3

3 years ago

1.1.2

3 years ago

1.1.1

3 years ago

1.1.0

3 years ago

1.0.200

3 years ago

1.0.202

3 years ago

1.0.201

3 years ago

1.0.203

3 years ago

1.0.198

3 years ago

1.0.197

3 years ago

1.0.199

3 years ago

1.0.196

3 years ago

1.0.195

3 years ago

1.0.194

3 years ago

1.0.193

3 years ago

1.0.189

3 years ago

1.0.192

3 years ago

1.0.188

3 years ago

1.0.187

3 years ago

1.0.186

3 years ago

1.0.183

3 years ago

1.0.185

3 years ago

1.0.184

3 years ago

1.0.182

3 years ago

1.0.181

3 years ago

1.0.180

3 years ago

1.0.178

3 years ago

1.0.177

3 years ago

1.0.179

3 years ago

1.0.176

3 years ago

1.0.165

3 years ago

1.0.167

3 years ago

1.0.166

3 years ago

1.0.169

3 years ago

1.0.168

3 years ago

1.0.175

3 years ago

1.0.172

3 years ago

1.0.174

3 years ago

1.0.173

3 years ago

1.0.170

3 years ago

1.0.161

3 years ago

1.0.162

3 years ago

1.0.160

3 years ago

1.0.154

3 years ago

1.0.156

3 years ago

1.0.155

3 years ago

1.0.158

3 years ago

1.0.157

3 years ago

1.0.153

3 years ago

1.0.150

3 years ago

1.0.152

3 years ago

1.0.151

3 years ago

1.0.149

3 years ago

1.0.145

3 years ago

1.0.147

3 years ago

1.0.146

3 years ago

1.0.148

3 years ago

1.0.143

3 years ago

1.0.142

3 years ago

1.0.144

3 years ago

1.0.141

3 years ago

1.0.140

3 years ago

1.0.139

3 years ago

1.0.136

3 years ago

1.0.138

3 years ago

1.0.137

3 years ago

1.0.132

3 years ago

1.0.134

3 years ago

1.0.133

3 years ago

1.0.135

3 years ago

1.0.131

3 years ago

1.0.130

3 years ago

1.0.123

3 years ago

1.0.128

3 years ago

1.0.125

3 years ago

1.0.124

3 years ago

1.0.127

3 years ago

1.0.126

3 years ago

1.0.121

3 years ago

1.0.120

3 years ago

1.0.122

3 years ago

1.0.114

3 years ago

1.0.116

3 years ago

1.0.115

3 years ago

1.0.112

3 years ago

1.0.113

3 years ago

1.0.111

3 years ago

1.0.109

3 years ago

1.0.110

3 years ago

1.0.108

3 years ago

1.0.107

3 years ago

1.0.106

3 years ago

1.0.105

3 years ago

1.0.104

3 years ago

1.0.102

3 years ago

1.0.101

3 years ago

1.0.100

3 years ago

1.0.99

3 years ago

1.0.98

3 years ago

1.0.95

3 years ago

1.0.97

3 years ago

1.0.96

3 years ago

1.0.94

3 years ago

1.0.93

3 years ago

1.0.88

3 years ago

1.0.87

3 years ago

1.0.89

3 years ago

1.0.91

3 years ago

1.0.90

3 years ago

1.0.92

3 years ago

1.0.86

3 years ago

1.0.85

3 years ago

1.0.84

3 years ago

1.0.83

3 years ago

1.0.82

3 years ago

1.0.81

3 years ago

1.0.77

3 years ago

1.0.76

3 years ago

1.0.75

3 years ago

1.0.79

3 years ago

1.0.78

3 years ago

1.0.80

3 years ago

1.0.73

3 years ago

1.0.72

3 years ago

1.0.71

3 years ago

1.0.74

3 years ago

1.0.69

3 years ago

1.0.68

3 years ago

1.0.70

3 years ago

1.0.67

3 years ago

1.0.66

3 years ago

1.0.65

3 years ago

1.0.64

3 years ago

1.0.63

3 years ago

1.0.19

3 years ago

1.0.18

3 years ago

1.0.17

3 years ago

1.0.16

3 years ago

1.0.62

3 years ago

1.0.61

3 years ago

1.0.60

3 years ago

1.0.22

3 years ago

1.0.21

3 years ago

1.0.20

3 years ago

1.0.26

3 years ago

1.0.25

3 years ago

1.0.24

3 years ago

1.0.23

3 years ago

1.0.28

3 years ago

1.0.27

3 years ago

1.0.33

3 years ago

1.0.32

3 years ago

1.0.31

3 years ago

1.0.30

3 years ago

1.0.37

3 years ago

1.0.36

3 years ago

1.0.35

3 years ago

1.0.34

3 years ago

1.0.39

3 years ago

1.0.38

3 years ago

1.0.40

3 years ago

1.0.44

3 years ago

1.0.43

3 years ago

1.0.41

3 years ago

1.0.48

3 years ago

1.0.47

3 years ago

1.0.46

3 years ago

1.0.45

3 years ago

1.0.49

3 years ago

1.0.51

3 years ago

1.0.50

3 years ago

1.0.55

3 years ago

1.0.54

3 years ago

1.0.53

3 years ago

1.0.52

3 years ago

1.0.59

3 years ago

1.0.15

3 years ago

1.0.58

3 years ago

1.0.14

3 years ago

1.0.57

3 years ago

1.0.13

3 years ago

1.0.56

3 years ago

1.0.12

3 years ago

1.0.10

3 years ago

1.0.9

3 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago