enorm-ui-components

This little library is meant to speed up the UI development process of react applications. It contains a set of self contained UI elements which can be used for any project via NPM.

Install ui library and it's peer dependencies

yarn add --save enorm-ui-components @material-ui/icons @material-ui/core formik 

Add the fonts and icons of material-ui to your index.html

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

setup seed data to build up a form inside a /seed/index.jx file with correct structure

// ./seed/index.js

import * as yup from 'yup'

const seed = [{ <-- important: each object in the array represents an input field in the form
  id: 'identifier', <-- important: this name is being used to setup the initial values for formik state
  name: 'identifier',
  label: 'Email',
  type: 'email',
  placeholder: 'Email',
  autoComplete: 'email'
}, {
  id: 'password',
  name: 'password',
  label: 'Wachtwoord',
  type: 'password',
  placeholder: '********',
  autoComplete: 'current-password',
  helperText: 'Wachtwoord vergeten?'
}]

const loginValidationSchema = yup.object().shape({
  identifier: yup
    .string()
    .email()
    .required('Email must be filled in'),
  password: yup
    .string()
    .min(0)
    .required('Password is required')
})

export { seed, validationSchema }

Currently we are only supporting input type text fields. In the next release more to come

Usage

import React, { Component } from 'react'

import { CustomForm } from 'enorm-ui-components'
import { seed } from './seed'

class Example extends Component {
  render () {
    return (
      {/* This creates a form with 2 fields: username and password. It also contains a custom onSubmit callback */}
      <Form title='form title' fields={seed} validationSchema={validationSchema} onSubmit={() => console.log('submitting')} />
    )
  }
}

Supported Components

| Props | Type | Limitations | isRequired | ------------- |:-------------:| -----:| -----:| | Title | string | only-strings | true | subTitle | string | only-strings | fales | fields | object | only-object | true | validationSchema | object | only-object | true | onSubmit | func | only-function | true

| Props | Type | Limitations | isRequired | ------------- |:-------------:| -----:| -----:| | Title | string | only-strings | true | color | string | only-strings | false | inhertis all material-ui props | material-ui API | see docs | false

| Props | Type | Limitations | isRequired | ------------- |:-------------:| -----:| -----:| | Title | string | only-strings | true | loading | bool | only-boolean | true | type | string | only-string | true (will change in next major) | disabled | bool | only-boolean | false | color | string | only-string | false

| Props | Type | Limitations | isRequired | ------------- |:-------------:| -----:| -----:| | Title | string | only-strings | true | inhertis all material-ui props | material-ui API | see docs | false

License

MIT © [Kevin Vugts](https://github.com/Kevin Vugts)