REACT POWERED

yarn add react-powered

or

npm install react-powered

With react-powered you can make an user interface for any record or data than you needs send. We talking about from create simple contact form to a CRUD fully functional in matter of minutes.

No matter what the REST API 's, react-powered adapts to it.

react-powered uses material-ui by default, to guarantee a clear user interface, but this is completely customizable

In addition to material-ui, react-powered uses react-hook-form with yup resolver, avoiding unnecessary re-renders and facilitating form validation.

Quick example

For this example we use nextjs, but it works perfectly with create-next-app

We are going to make an simple crud of people.

Step 1: Make a layout

import Provider from 'react-powered';

//material-ui (optional)
import myTheme from '...';

const base_uri = 'https://api.example.com/people';
const api_key = '123-YourApiKey';

//this config will applies to all requests of the record
const recordConfig = {
  name: 'people',
  base_uri,
  headers: {
    Autorization: `Bearer ${api_key}`,
    'Content-Type': 'application/json',
  },
};

export default function PeopleLayout({children}) {
  return (
    <Provider config={recordConfig} theme={myTheme}>
      {children}
    </Provider>
  );
}

Step 2: List & delete your records

import PeopleLayout from './PeopleLayout';
import {Reader} from 'react-powered';

/*
dataMap receives the information from the endpoint and return  the
desired structure
*/
const reader = new Reader({dataMap: (data) => data.records});
const ListComponent = reader.list();

export default function PeopleList() {
  return (
    <PeopleLayout>
      <ListComponent
        columns={[
          {
            label: 'Surname',
            dataMap: (item) => item.fields.surname,
          },
          {
            label: 'Actions',
            CustomComponent: (
              {item, destroy}, // Black Magic!
            ) => (
              <button onClick={() => destroy({path: `/${item.id}`})}>
                Delete
              </button>
            ),
          },
        ]}
      />
    </PeopleLayout>
  );
}

This component return a list of people. Easy, true?

Step 3: Create an record with yup rules

import PeopleLayout from './PeopleLayout';
import {Sender} from 'react-powered';
import * as yup from 'yup';

const schema = yup.object().shape({
  name: yup.string().required('The name is required'),
  surname: yup.string().required('The surname is required'),
});

const sender = new Sender({
  dataMap: (data) => ({fields: data}),
});
const FormCompoment = sender.createForm([
  {name: 'name', label: 'Name'},
  {name: 'surname', label: 'Your surname, please'},
]);

export default function PeopleList() {
  return (
    <PeopleLayout>
      <FormCompoment schema={schema} />
    </PeopleLayout>
  );
}

Ready, we create a form with its respective validations;

Step 4: Modify your records

import {Sender} from 'react-powered';
import PeopleLayout from './PeopleLayout';
import * as yup from 'yup';
import {useRouter} from 'next/router';

const schema = yup.object().shape({
  name: yup.string().required('is required'),
});

export default function PeopleUpdate() {
  const router = useRouter();
  const {id} = router.query;

  if (!id) return null;

  const sender = new Sender({
    method: 'put',
    path: `/${id}`,
    dataMap: (data) => ({fields: data}),
    reader: {
      // GET request
      path: `/${id}`,
      dataMap: (data) => data.fields,
    },
  });
  const FormCompoment = sender.createForm([
    {name: 'name', label: 'Name'},
    {name: 'surname'},
  ]);

  return (
    <PeopleLayout>
      <FormCompoment schema={schema} />
    </PeopleLayout>
  );
}

This component creates a form with its respective default values and validates the information with yup

Step 5: Record details

import {useRouter} from 'next/router';
import {Reader} from 'react-powered';
import PeopleLayout from './PeopleLayout';

export default function PeopleShow() {
  const router = useRouter();
  const {id} = router.query;

  if (!id) return null;

  const reader = new Reader({dataMap: (data) => data.fields, path: `/${id}`}); //GET request

  const ShowComponent = reader.show();

  return (
    <PeopleLayout>
      <ShowComponent attributes={[{key: 'name'}, {key: 'surname'}]} />
    </PeopleLayout>
  );
}

FACT: this example is based on the airtable API REST

Settings & customization

Provider component

usage: <Provider config={config} theme={theme}>{children}</Provider>

config properties:

Property	Type	Required	Default value	Observation
name	String	false/true	undefined	The record name. Is required if you only use the provider for a record
base_uri	String	true	undefined	API REST endpoint
headers	Object	false	{}	If you applied the headers here they will apply to all requests

Reader class

This class should be used to read information through a GET request, be it for show details of a record or list records

• usage: new Reader(config)
• methods:
  • show(): return ShowComponent
  • list(): return ListComponent

config properties:

Property	Type	Required	Default value	Observation
path	String	false	"/"	-
dataMap	function	false	(data) => data	-
headers	Object	false	{}	It is combined with the provider headers
onRequestError	function	false	(error) => throw Error(...)	Handles http request error

ShowComponent properties:

Property	Type	Required	Default value	Observation/Usage
CustomComponent	Component	false	undefined	({loading, details, destroy}) => <YourComponent />
attributes	Array	true	[object]	Here you must define the attributes you want to display, in the order you prefer.
containerProps	Object	false	{}	These properties will be applied to the container component of ShowComponent: <Box {...containerProps}> ...

Properties of attributes items:

Property	Type	Required	Default value	Observation
key	String	true	undefined	This key refers to the received object
label	String	false	undefined	-

ListComponent properties

Property	Type	Required	Default value	Observation/Usage
CustomComponent	Component	false	undefined	({loading, records, destroy}) => <YourComponent />
columns	Array	true	[object]	Here you must define the columns you want to display, in the order you prefer.
containerProps	Object	false	{}	These properties will be applied to the container component of ShowComponent: <Box {...containerProps}> ...

Properties of columns items:

Property	Type	Required	Default value	Observation/Usage
label	String	false	undefined	-
dataMap	function	false	undefined	This property can return a string or a function that return a string
CustomComponent	Component	false	undefined	({item, destroy})=> <YourComponent> this component is returned (if it exists) before than dataMap

Property "destroy" on custom components:

Destroy is a function to delete records. It receives a config object as an argument:

Property	Type	Required	Default value	Observation
path	String	false	"/"	-
dataMap	function	false	(data) => data	-
headers	Object	false	{}	It is combined with the provider headers
onRequestError	function	false	(error) => throw Error(...)	Handles http request error

Sender class

This class should be used to send information through a POST, PUT or PATCH request, be it a contact form or create/modify records

• Usage: new Sender(config)
• methods:
  • setForm(CustomComponent): return createForm([], CustomComponent)
  • createForm([object, ...], CustomComponent): return FormComponent

config properties:

Property	Type	Required	Default value	Observation
method	String	false	"post"	Can be "post", "put" or "patch"
path	String	false	"/"	-
dataMap	function	false	(data) => data	-
headers	Object	false	{}	It is combined with the provider headers
onRequestError	function	false	(error) => throw Error(...)	Handles http request error
reader	object	false	{}	It's equal of config property of Reader class

CustomComponent (setForm & createForm):

({destroy, loading, details, onSubmit, watch, errors, register}) => (
  <YourComponent />
);

• details: If you supply the "reader" property inside the "config" object, this property will contain the default values of the record.
• onSubmit: This function receives the information that you want to send to the endpoint, remember that the information will be processed by dataMap.
• watch: Wacher of form fields (react-hook-form).
• errors: Object containing all validation errors by field/name (react-hook-form).
• register: This property is inherited from react-hook-form and must be used in the "ref" property of the fields to validate and / or submit them. For more information read the react-hook-form documentation.

Properties of fields items (createForms):

Property	Type	Required	Default value	Observation
type	String	false	"text"	Supported values: "text", "password", "textarea" or "checkbox"
name	String	true	undefined	The field name
label	String	false	name property	-
defaultValue	String/boolean	false	defaultValues[name] (FormComponent)	This props override value of defaultValues property on FormComponent
rows	Int	false	4	For textarea only
helperText	String	false	error.message	This property is overridden by any error message related with the field

FormComponent properties:

Property	Type	Required	Default value	Observation/Usage
HeaderComponent	Component	false	undefined	HeaderComponent={({destroy})=> <YourComponent />}
FooterComponent	Component	false	Submit button	FooterComponent={({destroy})=> <YourComponent />}
containerProps	Object	false	{}	These properties will be applied to the container component of ShowComponent: <Box {...containerProps}> ...
defaultValues	Object	false	{}	{field_name: "value", ...} This property is intended to set default values manually, if you used the "reader" property in the class configurator, this property is not required.
schema	Yup schema	false	undefined	Here you can set your yup schema, for more information read the yup documentation

Thanks!

I hope it helps you and allows you to promote the development of your projects!

:)