0.1.138 • Published 2 months ago

@amsterdam/amsterdam-react-final-form v0.1.138

Weekly downloads
517
License
MIT
Repository
github
Last release
2 months ago

Amsterdam react final form

Provides a way to generate a complete functional, but still customizable, amsterdam styled forms. Based on OpenApi specs.

Demo

Please have a look at our storybook!

Goals

  • Aims to be as close to the design system as possible.
  • All fields should be able to render a:
    • Label
    • Input control (input, select, textarea, etc.)
    • Error message
  • All fields should be as wide as their container.
  • All fields should be able to render using a JSON. (Which can be generated)
  • All fields should be fully unit-tested.
  • Form should be able to handle its state. No extra handling needed.

Example

import React from 'react'
import { ScaffoldForm, TextField, Button } from 'amsterdam-react-final-form'

const MyForm:React.FC = () => {
  const handleSubmit = useCallback((formValues) => console.log(formValues), [])  
  return (
     <ScaffoldForm onSubmit={handleSubmit}>                
         <TextField name='firstname' label='First name' />
         <TextField name='surname' label='Surname' />
         <Button variant='secondary' type='submit' />
     <ScaffoldForm>        
  )

Image of simple form

Scaffold example:

import React from 'react'
import { ScaffoldForm, Scaffold, ScaffoldFields } from 'amsterdam-react-final-form'
import { FormPositioner } from 'amsterdam-scaffold-form'

// NOTE: You could generate these fields. 
// For instance, based on an OpenAPI spec.
 
const scaffoldFields:ScaffoldFields = {
  title: { 
    type: "TextField", 
    props: { label: "Title", name: "title" } 
  },
  field1: { 
    type: "TextField", 
    props: { label: "Field 1", name: "field1", hint: "some hint" } 
  },
  field2: { 
    type: "TextField", 
    props: { label: "Field 2", name: "field2" } 
  },
  field3: { 
    type: "TextField", 
    props: { label: "Field 3", name: "field3" } 
  },
  textarea: { 
    type: "TextAreaField", 
    props: { label: "TextArea", name: "textarea" } 
  },
  field4: { 
    type: "TextField", 
    props: { label: "Field 4", name: "field4" } 
  },
  submit: { 
    type: "SubmitButton", 
    props: { label: "Submit" } 
  }
}

// NOTE: Field positioning is handled using purely css. Using breakpoints and css-grid.
// We support all major browsers, including IE11. 

const scaffoldProps = new FormPositioner(scaffoldFields)
  
    .setVertical("mobileS")               // <- Render fields vertically in a single column for breakpoint "mobileS"
    
    .setGrid("laptop", "1fr 1fr", [       // <- Render fields in a grid with two equal columns for breakPoint "laptop". 
        ["title", "title"],               // <- Title is stretched over two columns 
        ["field1", "textarea"],           // <- TextArea is stretched over three rows
        ["field2", "textarea"],
        ["field3", "textarea"],
        ["field4", "field4"],             // <- Field4 is stretched over two columns
        ["submit"],
    ])
  
    .getScaffoldProps()                   // Get props for scaffold field
;

const MyForm:React.FC = () => {
  const handleSubmit = useCallback((formValues) => console.log(formValues), [])  
  return (
     <ScaffoldForm onSubmit={handleSubmit}>                
         <Scaffold {...scaffoldProps} />
     <ScaffoldForm>        
  )
}

Image of scaffolded form

Scaffold example of an ArrayField

import React from 'react'
import { ScaffoldForm, Scaffold, ScaffoldFields } from 'amsterdam-react-final-form'
import { FormPositioner } from 'amsterdam-scaffold-form'

// NOTE: You could generate these fields. 
// For instance, based on an OpenAPI spec.
 
const scaffoldFields:ScaffoldFields = {
  title: { 
    type: "TextField", 
    props: { label: "Title", name: "title" } 
  },
  arrayField: {
    type: "ArrayField",
    props: {
      name: "myArray",
      allowAdd: true,
      allowRemove: true,
      minItems: 1,
      scaffoldFields: {
           description: {
             type: "TextField",
             props: { name: "description", label: "Description" }
           },
           amount: {
             type: "TextField",
             props: { name: "amount", label: "Amount" }
           },
           price: {
             type: "TextField",
             props: { name: "price", label: "Price" }
           }
         }   
    } 
  },  
  submit: { 
    type: "SubmitButton", 
    props: { label: "Submit" } 
  }
}

// NOTE: Field positioning is handled using purely css. Using breakpoints and css-grid.
// We support all major browsers, including IE11. 

const scaffoldProps = new FormPositioner(scaffoldFields)  
    .setVertical("mobileS")               // <- Render fields vertically in a single column for breakpoint "mobileS"        
    .getScaffoldProps()                   // Get props for scaffold field
;

const MyForm:React.FC = () => {
  const handleSubmit = useCallback((formValues) => console.log(formValues), [])  
  return (
     <ScaffoldForm onSubmit={handleSubmit}>                
         <Scaffold {...scaffoldProps} />
     <ScaffoldForm>        
  )
}

Image of scaffolded form with an array field

Implement custom form-components to be used in scaffolding.

TODO document.

Generate scaffolds based on OpenAPI3

Have a look at this repository

Install

Install dependencies:

npm i amsterdam-react-final-form
0.1.138

2 months ago

0.1.137

2 months ago

0.1.136

4 months ago

0.1.134

8 months ago

0.1.133

9 months ago

0.1.132

10 months ago

0.1.131

10 months ago

0.1.130

11 months ago

0.1.129

11 months ago

0.1.128

11 months ago

0.1.127

11 months ago

0.1.126

11 months ago

0.1.125

11 months ago

0.1.124

12 months ago

0.1.123

12 months ago

0.1.122

12 months ago

0.1.121

12 months ago

0.1.120

12 months ago

0.1.119

12 months ago

0.1.116

1 year ago

0.1.115

1 year ago

0.1.114

1 year ago

0.1.113

1 year ago

0.1.112

1 year ago

0.1.111

1 year ago

0.1.109

1 year ago

0.1.110

1 year ago

0.1.108

1 year ago

0.1.107

1 year ago

0.1.106

1 year ago

0.1.104

1 year ago

0.1.103

1 year ago

0.1.102

1 year ago

0.1.101

1 year ago

0.1.100

1 year ago