bluechilli/chillisource.web.forms

:memo: Form and form elements built in React

ChilliSource.Web.Forms

This project is part of the ChilliSource framework developed by BlueChilli.

Summary

ChilliSource.Web.Forms is a collection of React form components, helpers and abstractions that are shared across all React-based ChilliSource.Web frameworks.

Main Features

Reusable Components

Standard components like input, button and the rest are already available to use directly in React projects. Our components build upon these standard components to provide React-style way of using them. The list:

• CheckBox
• DatePicker
• DropZone
• Form
• Input
• Number
• Radio
• Select
• Switch (base component for CheckBox & Radio)
• TextArea

State Retention

The state of the form is stored within the Form itself. Although this framework can be used with Redux, not having it within your stack will not prevent you from using it.

Validations

All the components can have their own validation(even custom validation is allowed) with custom validation messages as your project requires. The Validation component provides the necessary implementation so that you can directly start using them.

<Input name="sample-input" required maxLength="6">
  <Validation isFor="required">This input can not be blank.</Validation>
  <Validation isFor="maxLength">You can only enter a max of 50 characters</Validation>
</Input>

Installation

The library is available via NPM here

npm install --save cs.forms

Releases

See the releases.

Contribution

Please see the contribution guide.

License

ChilliSource.Web.Forms is licensed under the MIT license.

Feedback and Contact

For questions or feedback, please contact us at [email protected]

chillisource.web.forms's Issues

Remove name prefix from id for SwitchBase

Update to TS 2.3

Add --strict to .tsconfig
Add defaults for generics

Email and number type validations no longer working

<Input type="number"> and <Input type="email"> no longer validating properly.

Enzyme fails to run tests with style sheets

In files where .css or .scss style sheet is being imported, enzyme gives unexpected token error in the console

Unify tests for TextArea & Input

The tests for TextAreaBase and InputBase are similar to the point they can be considered the same. Similar thing for TextArea and Input. We should find a way of unifying the tests so that we are not testing same thing(s) in two different places.

Write tests for Checkbox

DatePicker default value is getting set in state

When no default value is provided the field displays today's date but state is not reflecting that

Ensure that a change to context triggers a force reload in the required component

Better dropzone

The current implementation of drop zone is buggy, in JS and very fragile. Following are the enhancements we are implementing:

• Convert to TypeScript
• Support single as well as multiple file upload
• Allow user customisation for UI after the files are dropped onto it

If you would like to add/suggest more, you can add a comment here

Integrate Prettier

Integrating Prettier allows us to have uniformly styled and formatted code base. Its an experiment initially with this repo and probably will be implemented in other repos depending on how it works in the current project.

InputMapper bypasses redux when fetching data

When the InputMapper is required to fetch data (i.e. for a select) it directly calls the API. If the users session is expired or the API returns an error this is not detected by Redux.

Update Fieldset props

Currently, the Fieldset interface has the current struct

interface FieldsetProps {
    id: string,
    name: string
}

This causes issues when trying to use it due to two reasons:

• Fieldset can be used without the id prop as evident in the implementation
• id & name props do not have descriptions which is confusing when using the component out of the box

Proposed changes

• Update FieldsetProps interface

// 😡 Current
interface FieldsetProps {
    id: string,
    name: string
}

// 😃 New
interface FieldsetProps {
    id?: string,
    name: string
}

• Add descriptions for each property
• Update the implementation of Fieldset

// 😡 Current
export default withContext<FormContext, FieldSetProps>({
  fieldSetNameSpace: PropTypes.string
}, ({name, id} : FieldSetProps) => ({
  fieldSetNameSpace: id ? `${name}/${id}` : name
}))(Fieldset);


// 😃 New
export default withContext<FormContext, FieldSetProps>({
  fieldSetNameSpace: PropTypes.string
}, ({name, id} : FieldSetProps) => ({
  fieldSetNameSpace: (id && id.length > 0) ? `${name}/${id}` : name
}))(Fieldset);

Allow build to work in http

Not all inputs are receiving labelPostFix parameter

Seems that Textarea, checkbox and a few other input types are not receiving the labelPostFix anymore.

pattern validation does not work in IE11 if input type="number"

Problem :
In IE11, if you set the input type to "number" and try to do a pattern matching, It still allow to enter the character other than numbers into the textbox. This seems to be by design in IE11 based on the standard according to here => see here https://social.msdn.microsoft.com/Forums/en-US/2110439d-2f1b-40ca-8e43-f2703fffdeec/input-pattern09-broken-in-ie11?forum=winappswithhtml5

Solution : solution would be to add the custom validation to run the regex to check numeric validation

Write tests for Switch

Cannot upload via DropZone

Automatic validation display is no longer working

Fix mapping between ids and lists of values

This issue is regarding the use of components grouped by a common identifier i.e.

<Input id="one" name="array[]" />
<Input id="two" name="array[]" />
<Input id="three" name="array[]" />
<Input id="four" name="array[]" />

The redux state is not grouping the fields aptly.

Write tests for Radio & RadioTabs

Add a test validate decimal number

Test checklist

A quick brainstorm of tests we should have

Inputs

• Value is fixed can't be overridden by user input
• All attributes work (getAttributes)
• onChange and onBlur are applied
• [] Groups inputs
• Value is used for

Performance Wrapper

• Applies defaultValue

Input Group

• Input group appends and prepends

Fieldset

• Fieldset correctly namespaces things

Validation

• Validation runs
• Validation only show while invalid and blurred

Form

• Forms only submit with valid inputs

All

• Rerenders only when required
• No ES6 objects

Write tests for Select Component

Write test for DatePicker

Add test to ensure that checkbox/radio components always rerender

Privacy error

I'm trying to get up and running with this library so I can start contributing. I can't access the server because i get that 'Your connection is not private' error on the browser. Please help.

Missing props in TextArea

TextArea, which is based on HTML tag textarea has an attribute rows which controls the number of lines of text visible on the page.

Our implementation, at least at some point, has that property. But it seems to have disappeared in the latest version.

Solution:

• Add rows?: number to TextAreaProps
• Add rows to the list of valid HTML attributes for getHTMLAttributes function

Write tests for Number Component

Although the Number component is not completely fleshed out right now, its been separated into its own component so as to allow more functionality in the future. So we should start writing tests for it now, however trivial.

Serialized selectors not working

Moved over from Chillisauce.Web

Prerequisites

Put an X between the brackets on this line if you have done all of the following:
+[X] Followed all applicable steps in the debugging guide: //TODO
+[X] Checked the FAQs on the message board for common solutions: //TODO
+[X] Checked that your issue isn't already filed: https://github.com/BlueChilli/ChilliSource.Web/issues
+[X] Checked that there is not already a package or module that provides the described functionality

Description

While using many inputs in a form, Fieldset and serialized selectors help towards grouping of the data for easier manipulation and eventual form submission.

Steps to Reproduce

Create a form, for example

<Form name="SampleForm">
    <Fieldset name="SampleFieldset">
        <input name="input1" />
        <input name="input2" />
        <input name="input3" />
        <input name="input4" />
    </Fieldset>
</Form>

and inspect the resulting redux state.

Expected behavior:
The data in the redux state should be grouped along the following lines

FormState: {
    SampleForm: {
        SampleFieldset: {
            input1: {
                changed: true,
                value: 'something'
            },
            input2: {
                changed: true,
                value: 'something'
            },
            input3: {
                changed: true,
                value: 'something'
            },
            input4: {
                changed: true,
                value: 'something'
            }
        }
    }
}

Actual behavior:
The changes for the input field are not recorded in the redux state. Instead errors appear in the console. The state looks like the following i.e. looks like an empty state

FormState: {
    SampleForm: {
        SampleFieldset: {
            
        }
    }
}

Reproduces how often:
This can be reproduced all the time

SVGs not working in releasable build

Correctly import PropTypes

As of React v15 and higher, importing PropTypes from the main React package has been deprecated. Instead, we should be importing PropTypes from the npm package prop-types.

Write tests for TextArea Component

Write tests for Input Component

Unified Types

Description

Currently the types and interface declarations are spread out throughout the module. Although there are a few being exported from the current typescript.d.ts file, our own FRECL is using types and components from within the source. Me and @onikiri2007 had been talking today and decided on better types.

Problems

• Scattered type declarations
• Source being used instead of the compiled version

Solution

As a result of our problem, I've been going through the instructions on TypeScript Docs and declaration files from popular repos. Following are the benefits I believe:

• Unified Types
• Module will be published on npm => usable as npm install --save CSForms
• Ensure that compiled version is used everytime instead of source

I shall raise a PR and you all can follow along.

Changes backed out from PR #121

Looks my changes from the following PR have been reverted, any reason why?
#121

Write tests for performanceWrapper

Remove shallow compare

Provide better typings for the value prop in inputs (use records)