npm package: @lefapps/forms-pages
Description: Compose stuff with predefined or custom react components.
Author: @lefapps
Latest version: 1.7.3

# Page Components

This is an extension package for [@lefapps/forms](https://www.npmjs.com/package/@lefapps/forms).

## Install

`npm install @lefapps/forms-pages --save`

## Usage

```JSX
import { EasyForm } from '@lefapps/forms'
import { Components, Decorators } from '@lefapps/forms-pages'

const MyForm = new EasyForm()

// Use all provided extensions
Object.keys(Components).forEach(component =>
  MyForm.addComponent(component, Components[component]))
Object.keys(Decorators).forEach(decorator =>
  MyForm.addDecorator(decorator, Decorators[decorator]))

// OR use some
['markdown'].forEach(component =>
  MyForm.addComponent(component, Components[component]))

const Form = MyForm.instance()
Form.displayName = 'EasyForm'

const FormEditor = MyForm.editor()
FormEditor.displayName = 'EasyFormEditor'

export default Form
export { Form, FormEditor }
```

You can the use the `<Form>` component as described in [@lefapps/forms](https://www.npmjs.com/package/@lefapps/forms#props).

## Extensions

|             name              |   type    | description                                |
| :---------------------------: | :-------: | :----------------------------------------- |
|    [ `buttons` ](#buttons)    | component | Inserts submit and other buttons           |
|   [ `markdown` ](#markdown)   | component | Display MarkDown content                   |
| [ `tangential` ](#tangential) | component | Display Aside content                      |
|      [ `video` ](#video)      | component | Full width video                           |
|   [ `question` ](#question)   | component | Predefined question types                  |
|                               |
|    [ `columns` ](#columns)    | decorator | simplification of default layout decorator |
|       [ `name` ](#name)       | decorator | add name field to elements                 |

### Buttons

Renders buttons inline.

```JSX
const config = {
  type: 'buttons',
  types: ['reset', 'cancel', 'submit']
}
```

**Note:** when using the type `submit` , you can use the `onSubmit` handler on the `<Form>` component which returns the model.

### MarkDown

Renders a markdown string provided by `content` .

```JSX
const config = {
  type: 'markdown',
  content: '### Title\n\nI am paragraph with a [link](#title).\n\n>Hello World!'
}
```

### Tangential

Renders a markdown string provided by `content` inside a `aside` element with an optional marker symbol.

**Note:** the marker is attached as a data-marker attribute to the aside element to give you plenty of room to position it using pseudo-elements.

```JSX
const config = {
  type: 'tangential',
  marker: '', // any symbol, rendered as text, e.g. "?" or "i"
  content: 'Want to know more about forms? Checkout [npm](https://www.npmjs.com/package/@lefapps/forms).'
}
```

### Video

Renders an embedded video using the full available width.

```JSX
const config = {
  type: 'video',
  url: 'youtube or vimeo URL'
}
```

### Question

Renders an input field defined by `questionType` .

```JSX
const configOpen = {
  name: 'modelKey',
  type: 'question',
  questionType: 'open'
}

const configMC = {
  name: 'modelKey',
  type: 'question',
  questionType: 'radio',
  label: 'Question?',
  options: ['Answer 1', 'Answer 2', 'Answer 3']
  options: [
    { _id: 'answer-1', default: 'Answer 1', score: 1 },
    { _id: 'answer-2', default: 'Answer 2', score: 0 },
    { _id: 'answer-3', default: 'Answer 3', score: 0 }
  ]
}
```

| questionType | required<br>fields |                 optional<br>fields                  | result                                  |
| :----------: | :----------------: | :-------------------------------------------------: | :-------------------------------------- |
|     bool     |                    |                                                     | Radio input with _Yes_ and _No_         |
|     open     |                    |                md<br>attributes.rows                | Textarea, with optional markdown editor |
|    number    |                    | attributes.min<br>attributes.max<br>attributes.step | input                                   |
|      mc      |      options       |                                                     | Multiple answers, multiple selectable   |
|    radio     |      options       |                                                     | Multiple answers, one selectable        |

### Columns

**Note:** we advise to remove the default `layout` decorators before using this one to avoid layout conflicts.

```JSX
MyForm.removeDecorator('layout')
```

### Name

Updates the default `name` decorator with modified label and added help text.