grommet-forms proposal

This is a proposal for a new repository for grommet-forms.

The idea is to make it easier to build typical forms with grommet components. Here is an example of how it could be used:

import { Form, FormField, FormSubmitButton, FormTextInput, FormTextArea } from 'grommet-forms';

class FormExample extends Component {
  state = { value: {} }

  onSubmit = () => {
    const { value } = this.state;
    // whatever submitting the form should entail
  }

  render() {
    const { value } = this.state;
    return (
      <Form
        value={value}
        onChange={value => this.setState({ value })}
        onSubmit={this.onSubmit}
      >
        <FormField label="Name" name="name" required />
        <FormField label="Email" name="email" type="email" />
        <FormField label="Employee ID" name="employeeId" validate={/^[0-9]+$/} />
        <FormField label="Size" name="size" options={['small', 'medium', 'large']} /> {/* renders RadioButtons */}
        <FormField label="Comments" name="comments">
          <FormTextArea name="comments" />
        </FormField>
        <FormSubmitButton label="Update" />
      </Form>
    );
  }
}

FormField.propTypes = {
  label: PropTypes.string.description("Human readable label"),
  name: PropTypes.string
    .description("The key to use within the Form value to store the data.")
    .isRequired,
  options: PropTypes.arrayOf(PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.object,
  ])).description("Array of options. If less than four, RadioButtons, otherwise, Select."),
  optionLabelKey: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.func,
  ]).description("When options are objects, the key to get the label."),
  optionValueKey: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.func,
  ]).description("When options are objects, the key to get the value."),
  required: PropTypes.bool.description("Whether the field is required."),
  validate: PropTypes.oneOfType([
    PropTypes.object, // regular expression
    PropTypes.func,
  ]).description("Validation rule. Provide a regular expression or a function."),
};

Please let us know if you have any feedback. We’d like some discussion in this issue before proceeding further.

[murbanowicz]

Formik is currently best or at least one of the best solutions for forms with React. Maybe instead of creating something new it is better to either just document how to use Formik with Grommet or create simple wrapper for Grommet & Formik ?

[krawalli]

I’ve played a little bit with this and -> very nice and thumb up!

However, I’m struggling with e.g. CheckBox. If used as component= parameter - e.g. the label= is rendered twice. The OnChange Method seems to be implemented by user (it could be done with auto-magic in the background).The value itself seems not to be picked up by the submit method.

Beyond that:

• Still having problems to get “validator” to do what i want.
• for validation, there should be any i18n for the error text
• if you have two password inputs, a validator should compare to other inputs in that form. How to reference them in code. Maybe a “auto-ref” could be handy here.
• if I set “errors” via var before first submit, then these are not rendered (or at least i did it wrong)

i would suggest to have a form with all standard input types, so there is a kind of documentation for usage.