Formulaik-Mui

Visit The Formulaik project to get started with Formulaik.

This a Formulaik components library built on top of Material UI. Formulaik components are a set of inputs compatible with a Formulaik engine. In this case, the Formulaik-Mui library is made for the Formulaik React engine.

The Formulaik project is an open source initiative for defining cross-platform forms, enabling reusable components in a JSON based declarative approach. Formulaik aims to simplify form building across various front-end frameworks. Formulaik defines a protocol for defining form inputs as a sole source of truth (data type, behaviour, validation) in json, which is interpreted by a platform-specific formulaik engine.

Install

1. Install the React formulaik engine

npm install @formulaik/react

2. Install the Formulaik React Mui components library

npm install @formulaik-community/formulaik-mui-react

Usage

Create your inputs and create the form using formulaik:

import Formulaik from '@formulaik/react'
import FormulaikMui from '@formulaik-community/formulaik-mui-react'

const inputs = [
 {
      component: 'input',
      id: 'email',
      label: 'Email',
      type: "string",
      params: {
        type: 'email',
        placeholder: "[email protected]"
      },
      validations: [
        {
          kind: "format",
          value: "email",
          message: 'Invalid email format',
        },
        {
          kind: "required",
          value: true,
          message: "This field can't be blank",
        },
      ],
    },
    {
      component: 'inputPassword',
      label: 'Password',
      id: 'password',
      type: "string",
      params: {
        autoComplete: "current-password",
        placeholder: "xxxx-xxxx-xxxx"
      },
      validations: [
        {
          kind: "required",
          value: true,
          message: "This field can't be blank",
        },
        {
          kind: "matches",
          value: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/,
          message: 'Invalid password, must contain at least 8 characters and at most 18 characters',
        },
      ]
    },
    {
      component: 'submit',
      id: 'submit',
      params: {
        text: 'Continue'
      }
    },
]

export default (props) => {
 const onSubmit = async (values) => {
    const { email, password } = values
    try {
      await myapi.submit({ email, password })
    }
    catch(e) {
      throw (new Error('Could not sign in: ', e.message))
    }
    return { message: t("Email validated") }
  }

  const values = {
      email: cookies.get('email'),
  }

  return <>
      <h3>Login</h3>
      <Formulaik
        components={[FormulaikMui]}
        values={values}
        inputs={inputs}
        onSubmit={onSubmit}
         />
    </>
}

Components

| Component Key | Description | Parameters | | ------------------- | -------------------------- | ------------ | | input | Text input | #TODO | | select | Choice component | #TODO | | submit | Formulaik submit button | #TODO | | dateTimePicker | Date time picker | #TODO | | checkbox | Checkbox | #TODO | | textArea | Autogrowing text area | #TODO | | dateRangePicker | Date range picker | #TODO | | autocomplete | Autocomplete input field | #TODO | | radioGroup | Radio group | #TODO | | autocomplete | Autocomplete input field | #TODO | | button | Button | #TODO | | buttonGroup | Button group | #TODO | | rating | Rating | #TODO | | switch | Switch | #TODO | | fileUpload | File uploader | #TODO |

Versionning

This repository follows the semantic branching model.

Contributing

<ahref="https://github.com/adoucoure">Aboubacar Doucouré</ahref=> This project follows the all-contributors specification. Contributions of any kind welcome! Please contact me if you want to contribute to the core frameworks or add a components library.

License

MIT © yelounak

References

• The Formulaik project documentation
• Getting started with Formulaik React 🚀
• Contribute to Formulaik
• Forumaik Blog