# test-rollup-x01

> Formulir is a simple library for building instant forms with Material UI (MUI) components.

Latest version **1.0.3** (published 2021-09-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install test-rollup-x01
pnpm add test-rollup-x01
yarn add test-rollup-x01
bun add test-rollup-x01
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2021-09-24 |
| First published | 2021-09-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 1.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | gurngustar |

## Links

- npm: https://www.npmjs.com/package/test-rollup-x01
- npm.io page: https://npm.io/package/test-rollup-x01

## Dependencies (1)

- [rollup-plugin-peer-deps-external](https://npm.io/package/rollup-plugin-peer-deps-external.md) ^2.2.4

## Recent versions

- 1.0.3 (latest) — 2021-09-24
- 1.0.2-beta — 2021-09-24
- 1.0.1-beta — 2021-09-24
- 1.0.0-beta — 2021-09-24

## README

# Formulir - Build instant Material UI forms

Formulir is a simple library for building instant forms with Material UI (MUI) components.

## Installation

You’ll want to install Formulir and its peer-dependencies via yarn (or npm).

**MUI Core**

```sh
yarn add @mui/material @emotion/react @emotion/styled
```

**MUI Lab**

```sh
yarn add @mui/lab date-fns @date-io/date-fns
```

**Formulir**

```sh
yarn add formulir
```

**Note** :
_If you use ex. Next.js make sure server rendering is in Material UI (MUI), to make it easier, you can follow the sample project from the Material UI documentation._

-   [Example Projects (Official)](https://mui.com/getting-started/example-projects/)

## Basic Usage

```jsx
import {
    FForm,
    FButton,
    FTextField,
    FAutocomplete,
    FCheckbox,
    FDatePicker,
    FRadioGroup,
    FTimePicker,
} from 'formulir'

const FormFormulir = () => {
    const initialValues = {
        // FTextField, return {String}
        username: '',
        // FAutocomplete, return {String | Array}
        gender: '', // Single value
        favoriteSongs: [], // Multiple values
        // FCheckbox, return {Array}
        hobbies: [],
        // FDatePicker, return {Date}
        birthDate: '',
        // FRadioGroup, return {Array}
        yearOfCollege: [],
        // FTimePicker, return {Date}
        eventTime: '',
    }
    const validationSchema = {
        // [initialValues key]: 'string' | 'number' | 'array' | Yup Validation
        // Examples:
        username: 'string',
        favoriteSongs: Yup.array().min(1),
        // Notes: There is no validation for DatePicker and TimePicker, because it is confirmed that it is already filled
        // birthDate: 'date',   <-- Wrong!
        // eventTime: 'date'    <-- Wrong!
    }
    const handleSubmit = (values, { setSubmitting }) => {
        console.log(values)
        setSubmitting(false)
    }

    return (
        <FForm
            initialValues={initialValues}
            onSubmit={handleSubmit}
            validationSchema={validationSchema}
        >
            <FTextField
                name='username'
                type='text'
                errorMessage='Cusutom error message'
            />
            <FAutocomplete
                name='gender'
                // Notes: If the value is not defined it will return the value of the label
                options={[
                    { label: 'Laki-laki', value: 'male' },
                    { label: 'Perempuan', value: 'female' },
                ]}
                muiInputProps={{
                    TextFieldProps: {
                        variant: 'outlined',
                    },
                }}
            />
            <FAutocomplete
                name='favoriteSongs'
                // Notes: If the value is not defined it will return the value of the label
                options={[
                    { label: 'Eminem', value: 'optionID-XwP0-900' },
                    { label: 'A7X', value: 'optionID-XwP0-9222' },
                    { labelAndValue: 'Rex Orange Country' },
                ]}
                muiInputProps={{
                    AutocompleteProps: {
                        multiple: true,
                    },
                    TextFieldProps: {
                        placeholder: 'My Placeholder',
                    },
                }}
            />
            <FCheckbox
                name='hobbies'
                // Notes: If the value is not defined it will return the value of the label
                options={[{ label: 'Football' }, { label: 'Vollybal' }]}
            />
            <FDatePicker name='birthDate' />
            <FRadioGroup
                name='yearOfCollege'
                // Notes: If the value is not defined it will return the value of the label
                options={[
                    { label: '55', value: 'Saga Agrisatya' },
                    { label: '54' },
                    { label: '53' },
                ]}
            />
            <FTimePicker
                name='eventTime'
                muiInputProps={{
                    TimePickerProps: {
                        ampm: false,
                    },
                }}
            />
            <FButton />
        </FForm>
    )
}
```

## Setup

**DatePicker and TimePicker**

```jsx
// App.js
import AdapterDateFns from '@mui/lab/AdapterDateFns'
import LocalizationProvider from '@mui/lab/LocalizationProvider'

function App() {
    return (
        <LocalizationProvider dateAdapter={AdapterDateFns}>
            ...
        </LocalizationProvider>
    )
}
```

## API Reference

### FForm

| Name             | Type     | Note     |
| ---------------- | -------- | -------- |
| initialValues    | object   | required |
| validationSchema | object   | required |
| onSubmit         | function | required |

### FButton

| Name          | Type                   | Note     |
| ------------- | ---------------------- | -------- |
| muiInputProps | { ButtonProps: {...} } | optional |

### FTextField

| Name          | Type                      | Note     |
| ------------- | ------------------------- | -------- |
| muiInputProps | { TextFieldProps: {...} } | optional |
| name          | string                    | required |
| label         | string                    | optional |
| errorMessage  | string                    | optional |
| type          | string                    | required |

### FAutocomplete

| Name          | Type                                                | Note     |
| ------------- | --------------------------------------------------- | -------- |
| muiInputProps | { TextFieldProps: {...}, AutocompleteProps: {...} } | optional |
| name          | string                                              | required |
| label         | string                                              | optional |
| errorMessage  | string                                              | optional |
| options       | array                                               | required |

### FDatePicker

| Name          | Type                                              | Note     |
| ------------- | ------------------------------------------------- | -------- |
| muiInputProps | { TextFieldProps: {...}, DatePickerProps: {...} } | optional |
| name          | string                                            | required |
| label         | string                                            | optional |

### FTimePicker

| Name          | Type                                              | Note     |
| ------------- | ------------------------------------------------- | -------- |
| muiInputProps | { TextFieldProps: {...}, TimePickerProps: {...} } | optional |
| name          | string                                            | required |
| label         | string                                            | optional |

### FCheckbox

| Name          | Type                            | Note     |
| ------------- | ------------------------------- | -------- |
| muiInputProps | { FormControlLabelProps : {...} | optional |
| name          | string                          | required |
| label         | string                          | optional |
| errorMessage  | string                          | optional |
| options       | array                           | required |

### FRadioGroup

| Name          | Type                            | Note     |
| ------------- | ------------------------------- | -------- |
| muiInputProps | { FormControlLabelProps : {...} | optional |
| name          | string                          | required |
| label         | string                          | optional |
| errorMessage  | string                          | optional |
| options       | array                           | required |

**Note** :
TextFieldProps (https://mui.com/api/text-field/#props), ButtonProps (https://mui.com/api/button/), FormControlLabelProps (https://mui.com/api/form-control-label/), etc.

## Examples

-   [CodeSandbox](https://codesandbox.io/s/formulir-build-instant-material-ui-forms-m9n86?file=/src/App.js)
-   Documentation _(coming soon)_

---
_Source: https://npm.io/package/test-rollup-x01 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._