lunatk / protobuf-auto-form Goto Github PK

View Code? Open in Web Editor NEW

21.0 1.0 1.0 1.89 MB

Auto-generated form to construct protobuf message object, in React

Home Page: https://npmjs.com/package/protobuf-auto-form

License: MIT License

JavaScript 0.81% TypeScript 96.52% CSS 2.23% HTML 0.45%

form protobuf protobufjs react react-hook-form tailwindcss

protobuf-auto-form's Introduction

profobuf-auto-form

React component that renders a form corresponding to protobuf schema.

How to use

Using the protobuf schema below,

enum ArticleType {
    SIMPLE = 1;
    DETAILED = 2;
}

message Article {
    string title = 1;
    ArticleType type = 2;
    optional string content = 3;
    repeated string tags = 4;
}

Basic usage

AutoForm required protobufjs reflection object. You can find the documentation here.

// obtaining protobuf namespace object
const namespace = protobuf.Namespace.fromJson('', jsonDescriptor)

// jsx
<AutoForm
    messageType="Article"
    namespace={namespace}
    onSubmitValid={(result) => {
        // handle result
    }}
>
    <button type="submit" className="btn btn-xs btn-accent">Submit</button>
</AutoForm>

Providing initial values

The initial value must to be a plain JSON object which is a valid protobuf message.

<AutoForm
    messageType="Article"
    namespace={namespace}
    initialState={/* initial value here */}
    onSubmitValid={(result) => {
        // handle result
    }}
>
    <button type="submit" className="btn btn-xs btn-accent">Submit</button>
</AutoForm>

Overriding input component

There are two way of overriding input component.

Overriding field
Overriding type

Example

// Overriding input field
const LimittedInput: React.FC<OverriddenFieldProps<string>> = ({
  value,
  onChange,
}) => (
  <input
    value={value}
    maxLength={10} // whatever you want
    onChange={(e) => {
      onChange(e.target.value);
    }}
  />
);

// 1. field override
<AutoForm
    messageType="Article"
    namespace={namespace}
    fieldOverride={{
        title: LimittedInput
    }}
    onSubmitValid={(result) => {
        // handle result
    }}
>
    <button type="submit" className="btn btn-xs btn-accent">Submit</button>
</AutoForm>

// 2. type override
<AutoForm
    messageType="Article"
    namespace={namespace}
    typeOverride={{
        string: LimittedInput
    }}
    onSubmitValid={(result) => {
        // handle result
    }}
>
    <button type="submit" className="btn btn-xs btn-accent">Submit</button>
</AutoForm>

protobuf-auto-form's People

Contributors

Stargazers

Watchers

Forkers

hyp3rflow

protobuf-auto-form's Issues

Flatten message

AutoForm component factory function

In most of my use case, most of the props props AutoForm shares common values (e.g., namespace).

It'd better create factory function that takes these common props, and return the component with defaultized props.

Proposal: providing field attributes via child component

Field Override Pattern Using Child Component

Abstract

This document describes a new mechanism for providing field-specific attributes via special child component, namely AutoFormField. With field-specific attributes (e.g., label, disabled, and render), you can override how each field should be rendered.

Background

Generally, protobuf definition itself is not containing enough information for constructing user-friendly UI. For example, message field name tends to be in form of programming terminologies, making it hard to be understood by the end-user not familiar with programming.
It is necessary for developers being able to provide such additional information to AutoForm.

In React UI framework ecosystem, this is usually done through component props. However, the object passed as props becomes too verbose when the field hierarchy is complicated. In order to make it neat and idiomatic, child component can be used to target a specific field of the form.

Proposal

You can put AutoForm.Field as a child of AutoForm. AutoForm.Field has a required prop name, indicating which field of the current form should be associated with it.

Consider rendering protobuf message below.

message Article {
  id: int32
  title: string
  content: string
}

Say we do not want our end-users to edit id field, since it will be auto-generated.
We can achieve this by specifying disabled attribute of the id field like the code below.

<AutoForm messageType="Article" ... >
  <AutoForm.Field name="id" disabled />
</AutoForm>

Here, AutoForm.Field does not actually render any elements, it just delivers attributes to each field. Other fields not specified through AutoForm.Field will be rendered just like the default. Note that AutoForm.Field does not change ordering of the fields.