1.1.112 • Published 4 years ago

bondsports-utils v1.1.112

Weekly downloads
-
License
ISC
Repository
-
Last release
4 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

4 years ago

1.1.108

4 years ago

1.1.107

4 years ago

1.1.106

4 years ago

1.1.105

4 years ago

1.1.104

4 years ago

1.1.102

4 years ago

1.1.101

4 years ago

1.1.99

4 years ago

1.1.111

4 years ago

1.1.110

4 years ago

1.1.112

4 years ago

1.1.92

4 years ago

1.1.91

4 years ago

1.1.90

4 years ago

1.1.96

4 years ago

1.1.94

4 years ago

1.1.98

4 years ago

1.1.97

4 years ago

1.1.89

4 years ago

1.1.88

4 years ago

1.1.84

4 years ago

1.1.83

4 years ago

1.1.82

4 years ago

1.1.87

4 years ago

1.1.86

4 years ago

1.1.70

4 years ago

1.1.73

4 years ago

1.1.72

4 years ago

1.1.78

4 years ago

1.1.77

4 years ago

1.1.76

4 years ago

1.1.75

4 years ago

1.1.79

4 years ago

1.1.81

4 years ago

1.1.80

4 years ago

1.1.69

4 years ago

1.1.67

4 years ago

1.1.66

4 years ago

1.1.65

4 years ago

1.1.68

4 years ago

1.1.59

4 years ago

1.1.63

4 years ago

1.1.62

4 years ago

1.1.61

4 years ago

1.1.64

4 years ago

1.1.56

4 years ago

1.1.54

4 years ago

1.1.58

4 years ago

1.1.57

4 years ago

1.1.52

4 years ago

1.1.51

4 years ago

1.1.53

4 years ago

1.1.49

4 years ago

1.1.46

4 years ago

1.1.43

4 years ago

1.1.41

4 years ago

1.1.40

4 years ago

1.1.42

4 years ago

1.1.34

4 years ago

1.1.33

4 years ago

1.1.38

4 years ago

1.1.37

4 years ago

1.1.36

4 years ago

1.1.35

4 years ago

1.1.39

4 years ago

1.1.32

4 years ago

1.1.31

4 years ago

1.1.29

4 years ago

1.1.28

4 years ago

1.1.30

4 years ago

1.1.27

4 years ago

1.1.26

4 years ago

1.1.25

4 years ago

1.1.12

4 years ago

1.1.11

4 years ago

1.1.16

4 years ago

1.1.15

4 years ago

1.1.14

4 years ago

1.1.13

4 years ago

1.1.19

4 years ago

1.1.18

4 years ago

1.1.17

4 years ago

1.1.23

4 years ago

1.1.20

4 years ago

1.1.9

4 years ago

1.1.10

4 years ago

1.1.8

4 years ago

1.1.7

4 years ago

1.1.6

4 years ago

1.1.5

4 years ago

1.1.3

4 years ago

1.1.2

4 years ago

1.1.1

4 years ago

1.1.0

4 years ago

1.0.200

4 years ago

1.0.202

4 years ago

1.0.201

4 years ago

1.0.203

4 years ago

1.0.198

4 years ago

1.0.197

4 years ago

1.0.199

4 years ago

1.0.196

4 years ago

1.0.195

4 years ago

1.0.194

4 years ago

1.0.193

4 years ago

1.0.189

4 years ago

1.0.192

4 years ago

1.0.188

4 years ago

1.0.187

4 years ago

1.0.186

4 years ago

1.0.183

4 years ago

1.0.185

4 years ago

1.0.184

4 years ago

1.0.182

4 years ago

1.0.181

4 years ago

1.0.180

4 years ago

1.0.178

4 years ago

1.0.177

4 years ago

1.0.179

4 years ago

1.0.176

4 years ago

1.0.165

4 years ago

1.0.167

4 years ago

1.0.166

4 years ago

1.0.169

4 years ago

1.0.168

4 years ago

1.0.175

4 years ago

1.0.172

4 years ago

1.0.174

4 years ago

1.0.173

4 years ago

1.0.170

4 years ago

1.0.161

4 years ago

1.0.162

4 years ago

1.0.160

4 years ago

1.0.154

4 years ago

1.0.156

4 years ago

1.0.155

4 years ago

1.0.158

4 years ago

1.0.157

4 years ago

1.0.153

4 years ago

1.0.150

4 years ago

1.0.152

4 years ago

1.0.151

4 years ago

1.0.149

4 years ago

1.0.145

4 years ago

1.0.147

4 years ago

1.0.146

4 years ago

1.0.148

4 years ago

1.0.143

4 years ago

1.0.142

4 years ago

1.0.144

4 years ago

1.0.141

4 years ago

1.0.140

4 years ago

1.0.139

4 years ago

1.0.136

4 years ago

1.0.138

4 years ago

1.0.137

4 years ago

1.0.132

4 years ago

1.0.134

4 years ago

1.0.133

4 years ago

1.0.135

4 years ago

1.0.131

4 years ago

1.0.130

4 years ago

1.0.123

4 years ago

1.0.128

4 years ago

1.0.125

4 years ago

1.0.124

4 years ago

1.0.127

4 years ago

1.0.126

4 years ago

1.0.121

4 years ago

1.0.120

4 years ago

1.0.122

4 years ago

1.0.114

4 years ago

1.0.116

4 years ago

1.0.115

4 years ago

1.0.112

4 years ago

1.0.113

4 years ago

1.0.111

4 years ago

1.0.109

4 years ago

1.0.110

4 years ago

1.0.108

4 years ago

1.0.107

4 years ago

1.0.106

4 years ago

1.0.105

4 years ago

1.0.104

4 years ago

1.0.102

4 years ago

1.0.101

4 years ago

1.0.100

4 years ago

1.0.99

4 years ago

1.0.98

4 years ago

1.0.95

4 years ago

1.0.97

4 years ago

1.0.96

4 years ago

1.0.94

4 years ago

1.0.93

4 years ago

1.0.88

4 years ago

1.0.87

4 years ago

1.0.89

4 years ago

1.0.91

4 years ago

1.0.90

4 years ago

1.0.92

4 years ago

1.0.86

4 years ago

1.0.85

4 years ago

1.0.84

4 years ago

1.0.83

4 years ago

1.0.82

4 years ago

1.0.81

4 years ago

1.0.77

4 years ago

1.0.76

4 years ago

1.0.75

4 years ago

1.0.79

4 years ago

1.0.78

4 years ago

1.0.80

4 years ago

1.0.73

4 years ago

1.0.72

4 years ago

1.0.71

4 years ago

1.0.74

4 years ago

1.0.69

4 years ago

1.0.68

4 years ago

1.0.70

4 years ago

1.0.67

4 years ago

1.0.66

4 years ago

1.0.65

4 years ago

1.0.64

4 years ago

1.0.63

4 years ago

1.0.19

4 years ago

1.0.18

4 years ago

1.0.17

4 years ago

1.0.16

4 years ago

1.0.62

4 years ago

1.0.61

4 years ago

1.0.60

4 years ago

1.0.22

4 years ago

1.0.21

4 years ago

1.0.20

4 years ago

1.0.26

4 years ago

1.0.25

4 years ago

1.0.24

4 years ago

1.0.23

4 years ago

1.0.28

4 years ago

1.0.27

4 years ago

1.0.33

4 years ago

1.0.32

4 years ago

1.0.31

4 years ago

1.0.30

4 years ago

1.0.37

4 years ago

1.0.36

4 years ago

1.0.35

4 years ago

1.0.34

4 years ago

1.0.39

4 years ago

1.0.38

4 years ago

1.0.40

4 years ago

1.0.44

4 years ago

1.0.43

4 years ago

1.0.41

4 years ago

1.0.48

4 years ago

1.0.47

4 years ago

1.0.46

4 years ago

1.0.45

4 years ago

1.0.49

4 years ago

1.0.51

4 years ago

1.0.50

4 years ago

1.0.55

4 years ago

1.0.54

4 years ago

1.0.53

4 years ago

1.0.52

4 years ago

1.0.59

4 years ago

1.0.15

4 years ago

1.0.58

4 years ago

1.0.14

4 years ago

1.0.57

4 years ago

1.0.13

4 years ago

1.0.56

4 years ago

1.0.12

4 years ago

1.0.10

4 years ago

1.0.9

4 years ago

1.0.8

4 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago