formol

!Formol logo with Baseline

• Enhanced native dom validation with cross field validation support
• Dynamic forms with dynamic field attributes based on fields values
• Lightweight (20kb gz) with webpack code-splitting (total: ~600kb gz)
• Support style theming (with currently two bundled)
• Works well with unrest and redux-api-unrest

Demos

Quick start -----------

yarn add formol

To use webpack code-splitting in formol, you will have to do these modifications to your webpack.config:

module: { rules: [ { test: /\.(mjs|jsx?)$/, exclude: /node_modules\/(?!(formol)\/).*/, // <- this line allows formol use: { // to be built alongside loader: 'babel-loader', // your project }, options: { presets: [ '@babel/preset-react', [ '@babel/preset-env', { targets: { browsers: 'last 1 version and > 3%' }, modules: false, }, ], ], plugins: [ // <- these plugins are needed to build formol '@babel/plugin-syntax-dynamic-import', ['@babel/plugin-proposal-decorators', { legacy: true }], 'add-react-static-displayname', ['@babel/plugin-proposal-class-properties', { loose: true }], ], }, }, ], }, resolve: { // <- these extensions needed to be loaded by webpack extensions: ['.mjs', '.js', '.jsx'], },

NB: It is also possible to use the prebuilt version of formol, in this case you will have to copy the javascript files in node\_modules/formol/lib in your output.path instead of modifying your webpack config.

Now you are all set.

But before going too deep, let’s take a look at the two following exemples:

Simple and elegant

import 'formol/lib/default.css' import Formol, {Field} from 'formol' const onSubmit = ({ login, password }) => doLogin(login, password) Login Password

Powerful

const item = { firstname: 'John', lastname: 'Doe', birth: '1988-04-12', address: { zip: '82937', city: 'Los Angeles', continent: 'North America', }, fastShipping: true, colors: ['#00ffff', '#008000'], } ({ firstname: (firstname ? firstname.length : 0) + (lastname ? lastname.length : 0) <= 6 ? 'Your full name must be greater than 6 characters.' : null, })} // eslint-disable-next-line no-alert onSubmit={item_ => alert(JSON.stringify(item_, null, 2))} submitText="Show me the new item" > First Name Last Name new Date(v) < new Date('1950-01-01') ? 'You can’t be too old' : '' } > Day of birth Zip code !zip}> City Continent [ 'Asia', 'North America', 'South America' ].includes(continent) } > Fast shipping (firstname ? firstname.length : 0) + (lastname ? lastname.length : 0) + (zip ? zip.length : 0) + (city ? city.length : 0) + (continent ? continent.length : 0) } > Indicative price [

Themable

The default theme is accessible by a simple css import (you will need the standard: css loader):

import 'formol/lib/default.css'

similarly with the clean theme:

import 'formol/lib/clean.css'

You can also use directly the sass import if you are using sass:

@import ~formol/src/sass/default

with the added benefit that you can override the formol variables:

$formol-color: #ce93d8 $formol-color-action: #ba68c8 $formol-color-inactive: #e1bee7 $formol-color-error: #f06292 $formol-background-color: #f3e5f5 $formol-font-size: 0.9em $formol-big-field-size: 70em $formol-medium-field-size: 50em $formol-field-margin: 2em $formol-field-padding: 1.5em @import ~formol/src/sass/default

Development

Getting the code and running Formol locally requires a typical yarn‑based workflow:

Use yarn v1

1. Install dependencies

yarn install

1. Check code style

yarn lint

Fix issues automatically when possible:

yarn fix

1. Run the unit tests

yarn test

This executes Jest with coverage enabled. You can inspect the HTML coverage report in coverage/lcov-report/index.html.

1. Check the live demos

yarn demos

1. Build the library

yarn build

The compiled production bundle is written to lib/.

1. Build the demos

yarn demos-build

The compiled demo bundle is written to demos/dist/.

Publish a new release

1. Merge the branches (features, fixes) into master
2. Create release commit:

1. Tag version bump commit e.g. git tag v3.0.0 and push it git push --tags
2. yarn prepublish
3. npm publish (requires being an npm package maintainer)
4. yarn demos-deploy