0.1.138 • Published 2 months ago
@amsterdam/amsterdam-react-final-form v0.1.138
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>
)
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>
)
}
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>
)
}
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