@bradtech/form

React form generator originally used in Brad Technology web applications.

Getting started

npm i @bradtech/form

OR

yarn add @bradtech/form

Building a basic form

index.tsx

import React from 'react'
import { FormComponent } from '@bradtech/form'
import userForm from './user-form'

export default class App extends React.Component<any, any> {
   constructor(props: MyProps) {
      super(props)
      this.state = {}
   }

   render() {
      return (
         <>
            <FormComponent form={userForm} {...this.props} />
         </>
      )
   }
}

user-form.js

import { FormComponent } from '@bradtech/form'

export default {
   fields: {
      email: {
         type: FormComponent.EMAIL,
         label: 'fields.email',
         mandatory: true,
         searchable: true,
         options: {
            autoComplete: 'email',
         },
      },

      password: {
         label: 'password.title',
         type: FormComponent.PASSWORD,
         mandatory: FormComponent.MODE_CREATE,
         options: {
            minLength: 6,
         },
      },

      name: {
         type: FormComponent.GROUP,
         fields: {
            lastname: {
               label: 'fields.lastname',
               mandatory: true,
               searchable: true,
               options: {
                  autoComplete: 'family-name',
               },
            },
            firstname: {
               label: 'fields.firstname',
               mandatory: true,
               searchable: true,
               options: {
                  autoComplete: 'given-name',
               },
            },
         },
      },
   },

   buttons: {
      submit: true,
      delete: true,
      cancel: true,
      extras: [],
   },
   actions: {
      create: data => console.log(data),
      read: uid => console.log(`users/${uid}`),
      update: ({ uid, ...data }) => console.log(uid, data),
      delete: ({ uid }) => console.log(`users/${uid}`),
   },
   extras: [],
}

Result

Using the search component

index.tsx

import React from 'react'
import { SearchComponent } from '@bradtech/form'
import userSearch from './user-search'

export default class App extends React.Component {
   constructor(props: any) {
      super(props)
      this.state = {}
   }

   render() {
      const { tableType } = this.state

      return <SearchComponent form={userSearch} {...this.props} />
   }
}

user-search.js

import { FormComponent } from '@bradtech/form'
import Api from '../../Api'
import { SearchComponent } from '../../Form'

export default {
   mode: FormComponent.MODE_SEARCH,
   fields: {
      search: {
         type: FormComponent.GROUP,
         fields: {
            keywords: {
               label: 'fields.lastname_firstname_email',
               search: {
                  mode: SearchComponent.BEGINS_WITH,
               },
               options: {
                  autoComplete: 'off',
               },
            },
         },
      },
   },
   buttons: {
      submit: {
         label: 'fields.search',
         icon: 'search',
      },
      cancel: {
         label: 'fields.reset',
         icon: 'undo',
      },
      extras: [],
   },
   actions: {},
   extras: [],
}

Search component result

License

MIT