Bright Lab TW Form

​

Installation

@bright-lab/tw-form

@bright-lab/tw-form is available as an [npm package] (https://www.npmjs.org/package/@bright-lab/tw-form)

// with npm
npm install @bright-lab/tw-form

// with yarn
yarn add @bright-lab/tw-form

What is so powerful about the TW-Form ?

This Form is so smart that it will handle everything for you, as well as you can style your own inputs, custom components, error validation and responsiveness!

Getting started with @bright-lab/tw-form

Here is an example of a basic app using @bright-lab/tw-form:

in App.tsx, Import the required css file.

import '@bright-lab/tw-form/css';

in Form.tsx for example, we will import useState, DynamicForm and start adding the required fields.

import React, { useState } from 'react';
import { DynamicForm, DynamicFields } from '@bright-lab/tw-form';

const fields: DynamicFields = [
  {
    label: 'Email',
    type: 'email',
    name: 'email',
    required: true,
    grid: {
      xs: 12,
      md: 6,
    },
  },
  {
    label: 'Password',
    type: 'password',
    name: 'password',
    required: true,
    grid: {
      xs: 12,
      md: 6,
    },
  },
  {
    label: 'Nationality',
    type: 'select',
    name: 'nationality',
    data: [
      {
        title: 'Lebanon',
        value: 'Lebanon',
      },
      {
        title: 'Spain',
        value: 'Spain',
      },
    ],
    grid: {
      xs: 12,
    },
  },
  {
    label: 'seperator',
    type: 'seperator',
    name: 'seperator',
  },
  {
    label: 'Gender',
    type: 'radioGroup',
    name: 'gender',
    content: 'between',
    data: [
      {
        label: 'Male',
        value: 'male',
      },
      {
        label: 'Female',
        value: 'female',
      },
    ],
    grid: {
      xs: 12,
      md: 6,
    },
  },
  {
    label: 'Software',
    type: 'checkboxGroup',
    name: 'software',
    content: 'between',
    data: [
      {
        label: 'Adobe',
        value: 'Adobe',
      },
      {
        label: 'VSCode',
        value: 'VSCode',
      },
    ],
    grid: {
      xs: 12,
      md: 6,
    },
  },
  {
    label: 'Married?',
    type: 'checkbox',
    name: 'married',
    grid: {
      xs: 12,
      md: 6,
    },
  },
  {
    label: 'Kids',
    type: 'number',
    name: 'kids',
    min: 0,
    required: true,
    grid: {
      xs: 12,
      md: 6,
    },
  },
  {
    label: 'Hobbies',
    type: 'chips',
    name: 'hobbies',
    grid: {
      xs: 12,
      md: 6,
    },
  },
];

Now Let's validate the form.

const validation = {
  email: (value: string) => {
    if (value?.trim()?.length === 0) {
      return 'Email is required';
    }
    if (!/\S+@\S+\.\S+/.test(value)) {
      return 'Email is invalid';
    }
    return '';
  },
  password: (value: string) => {
    if (value?.length < 8) {
      return 'Password is shorter than the minimum length (8)';
    }

    return '';
  },
};

Finally, Let's add the default values and return the Dynamic Form.

type values = {
  name: string,
  email: string,
  password: string,
  married: boolean,
  gender: string,
  nationality: string,
  kids: number,
  hobbies: string[],
};

const [values, setValues] = useState({
  name: '',
  email: '',
  password: '',
  married: false,
  gender: 'male',
  nationality: 'Lebanon',
  kids: 0,
  hobbies: ['basketball', 'football'],
});

const [isError, setIsError] = useState(false);

return (
  <div>
    <h1>Dynamic Form</h1>
    <div className="max-w-[800px] mx-auto bg-slate-50 p-5">
      <DynamicForm
        fields={fields}
        values={values}
        setValues={setValues}
        validation={validation}
        isError={(error) => setIsError(error)} //returns boolean
      />
      <button disabled={isError}>Submit</button>
    </div>
  </div>
);

Here's an example on how to add Custom Fields.

  {
    label: 'file',
    type: 'custom',
    name: 'image',
    Component: (customValue: File, customOnChange: () => void,  errors: Record<string, string>, expectedErrors: Record<string, string>) => {
      return <File value={customValue} onChange={customOnChange} errors={errors} expectedErrors={expectedErrors} />;
    },
    grid: {
      xs: 12,
      md: 6,
    },
  },


  const [values, setValues] = useState({
  name: '',
  email: '',
  drink: ''
});

File Component would look like this for example:

interface Props {
  onChange: (value: string) => void;
  value: string;
  errors: Record<string, string>;
  expectedErrors: Record<string, string>;
  handleBlur: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

const Drink: React.FC<Props> = ({
  onChange,
  value,
  errors,
  expectedErrors,
}) => {
  return (
    <>
      <input
        type="text"
        name="drink"
        value={value}
        onChange={(e) => {
          onChange(e.target.value);
        }}
        onBlur={handleBlur} // error validation on blur
      />
      {errors?.drink && 'error in drinks'}
    </>
  );
};

export default File;

Show errors when submitting the form.

Import useRef and DynamicRef Type

import { useRef } from 'react';
import { DynamicForm, DynamicRef } from '@bright-lab/tw-form';

Add the reference to the DynamicForm component, a submit button, and let's handle the functionality.

 const dynamicFormRef = useRef<DynamicRef>();

const handleSubmit = () => {
  if (isError) {
    return dynamicFormRef.current?.onSubmit();
  }
 console.log('no errors')
};

return (
  <>
    <DynamicForm
      ref={dynamicFormRef}
      fields={fields}
      values={values}
      setValues={setValues}
      validation={validation}
      isError={(error) => setIsError(error)}
      gap={{ rowGap: '3px', columnGap: '3px' }}
    />

    <button
      onClick={handleSubmit}
    >
      Submit
    </button>
  </>
);

CSS Styling

:root {
  --tw-label-text-color: #000;
  --tw-label-text-size: 1rem;
  --tw-input-bg-color: #fefefe;
  --tw-input-text-color: #4b5563;
  --tw-input-text-size: 1rem;
  --tw-input-border-color: #d1d5db;
  --tw-input-border-focus-color: #475569;
  --tw-input-border-radius: 0.5rem;
  --tw-input-padding: 0.5rem 0.7rem;
  --tw-input-error-border-color: #ef4444;
  --tw-input-error-text-color: #ef4444;
  --tw-input-radio-checked-color: dodgerblue;
  --tw-input-checkbox-checked-color: dodgerblue;
  --tw-input-select-arrow-color: #999;
  --tw-chips-add-btn-color: dodgerblue;
  --tw-chips-dlt-btn-color: #475569;
  --tw-chips-selected-bg-color: #e2e8f0;
}

Additional Props

Property	Type	Initial State	Example
isError	Callback function returns boolean	null	(error) => setIsError(error)
gap	object	null	rowGap: '10px', columnGap: '10px'
useCheckboxAsBoolean	boolean	true	false
darkMode	boolean	false	true

Keys in fields

Key	Type	Example	Required	For
label	String or JSX Element	Name	No	All
type	String	text	Yes	All
name	String	username	Yes	All
placeholder	String	write here..	No	All
required	Boolean	true	No	All
disabled	Boolean	false	No	All
grid	Object	{xs: 12, md: 6, lg: 3, xl: 2}	No	All
groupGrid	Object	{xs: 12, md: 6, lg: 3, xl: 2}	No	RadioGroup, checkboxGroup
minLength	Number	5	No	Text/Email/Password/Textarea
maxLength	Number	20	No	Text/Email/Password/Textarea
min	Number	1	No	Number
max	Number	100	No	Number
rows	Number	5	No	Textarea
cols	Number	5	No	Textarea
generatePassword	Boolean	true	No	Password
data	Array of Objects	[{label: 'Cream', value:'cream'}]	Yes	Select, RadioGroup, checkboxGroup
content	String	between, around, center, end	No	RadioGroup, checkboxGroup
groupCols	boolean	true	No	RadioGroup, checkboxGroup
style	Object	{marginBottom: '5px'}	No	All

Changelog

The changelog is regularly updated to reflect what's changed in each new release.