Enno-component NPM

w# Get started

npm Start

To get started with E-nno Components, import {XXXX} from 'enno-component';

Components

Button

Available props :

name	types	Detail
text	String	Will be the text in the button
className	String	button-grey or button-blue or button-ghost or button-disabled
size	String	M or L or S
onClick	Function	Pass the onClick function you want on the button
icon	JSX icon	Add an icon to the button, ex:`<Icons type="ChevronLeft" size="large-icon" />`

Icon

Available props :

name	types	Detail
type	String	Will be the text in the button
size	String	small-icon or medium-icon or large-icon

Available of type: 1. ChevronLeft 2. ChevronRight 3. ChevronDown 4. ChevronUp 5. Plus 6. Minus 7. User 8. AtSign 9. Lock 10. X 11. ArrowUpCircle 12. Search 13. Lock 14. AlertCircle 15. CheckCircle 16. ArrowLeft 17. ArrowRight 18. Thermometer

Input

Available props :

name	types	Detail
element	String	Input or Select or TextArea
id	String
type	String	Html input types
label	String	Label on top of the input
validators	Function	Function to validate the inputs. If not needed, pass an empty array
errorText	String	Helper text below the input
onInput	Function	Function that handles the input
disabled	Boolean	Let to enable of disable the input. If true, add "disabled" className.
className	String	Can set a specific className to overpass the default.
data	Array	Let you pass an array for select html inputs
dataObject	Array of objects	Let you pass an array for select html inputs. Structure : {name:"", id:""}
min	Number	Work together with number type
max	Number	Work together with number type
logo	Icon component	Let you pass a logo on the right of the input
initialValue	String
initialValid	Boolean
labelLeft	Boolean	Align the labbel on the left of the input
styleInput	Object	Pass a style object to overwrite defaut styles
styleInputCont	Object	Pass a style object to overwrite defaut styles
styleLabel	Object	Pass a style object to overwrite defaut styles

NB : validators && onInput works together with the form-hook && validators

Toggle

Available props :

name	types	Detail
name	String	Input name
size	String	small or big
onChange	Function	Give a function to your toggle
labelRight	String	Label on the right of the toggle
labelLeft	String	Label on the left of the toggle
disabled	Boolean	Disable the toggle
customSliderWidth	String	custom slider width
customSliderHeight	String	custom slider height
customWidth	String	custom width
customHeight	String	custom height
customTranslate	String	custom translate

Radio

Available props :

name	types	Detail
onChange	Function	Give a function to your radio
value	String
label	String	Label on the right of your radio

Checkbox

Available props :

name	types	Detail
onChange	Function	Give a function to your checkbox
name	String	Give a function to your checkbox
checked	Boolean	Default checked
label	String	Label on the right of your checkbox

FilePicker

Available props :

name	types	Detail
onInput	Function	Handle downloaded file

NB: work together with form-hook

Login

Available props :

name	types	Detail
successLogin	Function	Pass a function on sucessfull login
retrievePassword	Function	Pass a function to retrieve password
handleSubmit	Function	Pass a function to submit handler

Avatar

Available props :

name	types	Detail
size	String	small-avatar or medium-avatar or large-avatar
image	Boolean	If true, pass the source. If false, passe the initials
source	String	link to an image
description	String	Let you pass a description to the picture
initiale	String	Display initials instead of picture ("S.B.")

Tag

Available props :

name	types	Detail
text	String	Pass string to be displayed in the tag
type	String	If true, pass the source. If false, passe the initials

Card

Available props :

name	types	Detail
title	String
children	JSX comp.	Pass your JSX component
styleCard	Object	Pass a style object to overwrite defaut styles

Navbar

Available props :

name	types	Detail
logoLink	String	Set up the path desired on click for the logo
logo	JSX comp	Pass your JSX component
children	JSX comp.	Pass your JSX component
styleCard	Object	Pass a style object to overwrite defaut styles

NB: As the children, you should pass a div with className="navbar-links-block" Containing 2 elements : an icon and a span

SmallCard

Available props :

name	types	Detail
icon	Icon	Imported from icon Component
title	String	Let you se a title to the card
subTitle	String	Let you se a sub-title to the card
temperature	Number	Label on the right of the toggle
menu	Boolean	Add or not an icon to the right of the card
onClick	Function	If Menu is set to true, possibility to add function to the icon
simpleCard	Boolean	if True, create a simple card with only Title and sub-title

Validators

Available validators :

VALIDATOR_REQUIRE -> input is required
VALIDATOR_FILE -> check if file is existing
VALIDATOR_MINLENGTH -> check min length of the input
VALIDATOR_MAXLENGTH -> check max length of the input
VALIDATOR_MIN -> check min value of the input
VALIDATOR_MAX -> check max value of the input
VALIDATOR_EMAIL -> check if e-mail is valid
VALIDATOR_BOOLEAN -> check if returned value is either true or false

useForm

useForm is a custom hook to help you handle form.

Import the formState and inputHandler to handle your form state and validity by deconstructing :

const [formState, inputHandler] = useForm(
  {
    name: {
      value: '',
      isValid: false
    }
  },
  false // is the default validity of the form
);