@gadgetinc/react/auto 

The @gadgetinc/react/auto package powers Gadget autocomponents: beautiful auto-generated tables and forms pre-configured to read and write data using your Gadget app's auto-generated API.

The following is a comprehensive list of each autocomponent and its properties. Refer to the autocomponents guide for examples of how to use these components in your application.

Polaris 

Autocomponents are rendered using components from Shopify's Polaris design system.

The Gadget team is looking to create autocomponents from different design systems like MUI. Let the team know which design system we should add next on Discord.

<AutoTable /> 

The AutoTable component reads data from your database and renders each record as a row in the table. Pagination, search, and sorting are included in AutoTable components and are configurable with parameters.

// The only required prop is "model": this is the data model you wish to show the records of
// Use your Gadget API to pass in the model:
<AutoTable model={api.widget} />

// The only required prop is "model": this is the data model you wish to show the records of
// Use your Gadget API to pass in the model:
<AutoTable model={api.widget} />

Props 

The AutoTable component accepts the following props:

<AutoForm /> 

<AutoForm /> renders a form that calls one of your app's backend API actions. You can use <AutoForm /> for model actions to create, update, or delete records. Global actions can also be called from <AutoForm />.

// The only required prop is "action": the action you wish to perform when the form is submitted
// Common actions are "create" & "update"
// These create/update a record based on the values entered in the form
<AutoForm action={api.widget.create} />

// The only required prop is "action": the action you wish to perform when the form is submitted
// Common actions are "create" & "update"
// These create/update a record based on the values entered in the form
<AutoForm action={api.widget.create} />

Parameters 

The AutoForm can be customized by adding children. Here's an example:

1import React from "react";
2import { AutoForm, AutoStringInput, AutoBooleanInput, AutoSubmit } from "@gadgetinc/react/auto/polaris";
3import { api } from "../api";
4
5export const MyCustomForm = () => {
6  return (
7    <>
8      <AutoForm action={api.customer.create}>
9        <h1>Subscribe to our newsletter!</h1>
10        <AutoStringInput field="email" />
11        <AutoSubmit />
12      </AutoForm>
13    </>
14  );
15};

1import React from "react";
2import { AutoForm, AutoStringInput, AutoBooleanInput, AutoSubmit } from "@gadgetinc/react/auto/polaris";
3import { api } from "../api";
4
5export const MyCustomForm = () => {
6  return (
7    <>
8      <AutoForm action={api.customer.create}>
9        <h1>Subscribe to our newsletter!</h1>
10        <AutoStringInput field="email" />
11        <AutoSubmit />
12      </AutoForm>
13    </>
14  );
15};

<AutoBooleanInput /> 

Renders a Polaris checkbox.

The <AutoBooleanInput /> takes the same props as the Polaris checkbox. The Polaris props list can be found here.

<AutoDateTimePicker /> 

Renders a Polaris themed date-time picker.

The DatePickerProps and TimePickerProps are passed in as objects.

<DateTimePicker field="testDate" datePickerProps={{ weekStartsOn: 1 }} timePickerProps={{ placeholder: "Local time" }} />

<DateTimePicker field="testDate" datePickerProps={{ weekStartsOn: 1 }} timePickerProps={{ placeholder: "Local time" }} />

<AutoEncryptedStringInput /> 

A Polaris text field that allows users to enter strings which they want to encrypt.

The <AutoEncryptedStringInput /> takes the same props as the Polaris text field. The Polaris props list can be found here.

<AutoEnumInput /> 

A Polaris combobox component that allows the user to select one or more options.

The <AutoEnumInput /> takes the same props as the Polaris combobox. The Polaris props list can be found here.

<AutoFileInput /> 

A Polaris file input box.

The <AutoFileInput /> takes the same props as the Polaris drop zone. The Polaris props list can be found here.

<AutoHiddenInput /> 

The hidden input allows you to add to the form submission without rendering an input. An example would be including user preferences in a hidden input. When a user submits the form, their preferences are included in the form submission without any extra input from them.

<AutoInput /> 

This input detects the type of the field, and renders the correct input type. If the field is of type date / time, the AutoInput will return a date/time picker.

If you wish to customize the AutoInput further, use the input that corresponds to the type of the field.

<AutoJSONInput /> 

An input with built-in JSON validation.

The <AutoJSONInput /> takes the same props as the Polaris text field, minus the onChange prop. The Polaris props list can be found here.

<AutoNumberInput /> 

A text field, with number validations.

The <AutoNumberInput /> takes the same props as the Polaris text field. The Polaris props list can be found here.

<AutoPasswordInput /> 

A text field, with special validations for passwords. Upon submission, inputs are encrypted and stored in a shared Postgres database hosted by Gadget.

The <AutoPasswordInput /> takes the same props as the Polaris text field. The Polaris props list can be found here.

<AutoRolesInput /> 

A Gadget app has one global list of roles that governs permissions across the application. This input allows users to select the roles that have been defined. Learn more about roles and access control here.

The <AutoRolesInput /> takes the same props as the Polaris text field. The Polaris props list can be found here.

<AutoEmailInput /> 

A text field that has validations so it only accepts strings that have a valid email format.

The <AutoEmailInput /> takes the same props as the Polaris text field. The Polaris props list can be found here.

<AutoStringInput /> 

A text field that accepts any string.

The <AutoStringInput /> takes the same props as the Polaris text field. The Polaris props list can be found here.

<AutoUrlInput /> 

A text input with builtin validation for URLs.

The <AutoUrlInput /> takes the same props as the Polaris text field. The Polaris props list can be found here.

<AutoRichTextInput /> 

A text input for rich text fields, powered by MDXEditor.

<AutoBelongsToInput /> 

The <AutoBelongsToInput /> component allows users to pick from the records that have a belongs to relationship with the record the form is associated with.

If the Gadget backend has a field like this:

<AutoBelongsToInput /> will render it like this:

Each email is taken from a record in the customer table. The autocomponents system labelled the options with the customer's email. To render a custom label, use the optionLabel prop.

<AutoBelongsToInput field="section" optionLabel={(record: { id: string }) => `Custom label for ${record.id}`} />

<AutoBelongsToInput field="section" optionLabel={(record: { id: string }) => `Custom label for ${record.id}`} />

<AutoHasManyInput /> 

The <AutoHasManyInput /> component allows users to pick from the records that have a has many relationship with the record the form is associated with.

A multi-select combobox is used. If AutoForm is associated the some model customer, each purchase that is selected belongs to the customer model.

<AutoButton /> 

<AutoButton /> renders a button that calls one of your app's backend API actions onClick. You can use <AutoButton /> for model actions to create, update, or delete records, or to call a global action.

The <AutoButton /> takes the same props as the Polaris button component. The Polaris props list can be found here.

<AutoSubmit /> 

Submits the AutoForm onClick.

<SubmitResultBanner /> 

The customizable banner users see when they submit your AutoForm.

The props list for Polaris.BannerProps can be found here.