Release-contracts-ui-components NPM

release-contracts-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 release-contracts-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 'release-contracts-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