react-context-form 2.9.0 → 2.11.1

package/docs/Button.md

@@ -0,0 +1,21 @@
+# <Button \/> Component
+This component is represents button for [<Form \/>](./Form.md).
+It requires [context](../src/FormGroup/FormGroupContext.ts) which is provided by [<FormGroup \/>](./FormGroup.md).
+
+### Usage
+
+```tsx
+<Form {...FormProps}>
+    <FormGroup {...FormGroupProps}>
+        <Button
+            action="button clicked"
+            activeClassName="is-active"
+            {...HTMLButtonElementProps}
+        />
+    </FormGroup>
+</Form>
+```
+
+where:
+- `action` - value, that passed to model. Requried.
+- `activeClassName` - className that attaching when `action` prop value is the same as value in model. Optional. Default - `is-active`.

package/docs/Checkbox.md

@@ -0,0 +1,19 @@
+# <Checkbox \/> Component
+This component is represents checkbox for [<Form \/>](./Form.md).
+It requires [context](../src/FormGroup/FormGroupContext.ts) which is provided by [<FormGroup \/>](./FormGroup.md).
+
+### Usage
+
+```tsx
+<Form {...FormProps}>
+    <FormGroup {...FormGroupProps}>
+        <Checkbox
+            activeClassName="is-active"
+            {...HTMLButtonElementProps}
+        />
+    </FormGroup>
+</Form>
+```
+
+where:
+- `activeClassName` - className that attaching when checkbox checked. Optional. Default - `is-active`.

package/docs/EventInterceptor.md

@@ -0,0 +1,25 @@
+# <EventInterceptor \/> Component
+This component is responsible for catching events in [<Form \/>](./Form.md).
+It requires [context](../src/Form/FormContext.ts) which is provided by [<Form \/>](./Form.md)  
+
+### Usage
+
+```tsx
+<Form {...FormProps}>
+    <EventInterceptor 
+        events={[Event.onChange, Event.onFocus, Event.onBlur]}
+        onBlur={(attribute: string, value: string) => console.log(attribute, value)}
+        onFocus={(attribute: string, value: string) => console.log(attribute, value)}
+        onFocus={(attribute: string, value: string) => console.log(attribute, value)}
+        onChange={(attribute: string, nextValue: string, prevValue: string) => console.log(attribute, nextValue, prevValue)}
+    >
+        // ...
+    </EventInterceptor>
+</Form>
+```
+
+where:
+- `events` - list of catching events. Required.
+- `onBlur` - callback, that triggered when some input is submit `blur` event. Optional.
+- `onFocus` - callback, that triggered when some input is submit `focus` event. Optional.
+- `onChange` - callback, that triggered when some input is submit `change` event. Optional.

package/docs/Form.md

@@ -1,4 +1,30 @@
 # <Form \/> Component
-This component is responsible for handling changing and providing values to [<FormGroup\/>](./FormGroup)
+This component is responsible for handling changing and providing values to [<FormGroup \/>](./FormGroup.md)
 
-[Props](../src/Form/FormProps.ts)
+### Usage
+
+```tsx
+<Form 
+    storageKey="my-form"
+    resetAfterSubmit={true}
+    storage={window.localStorage}
+    instantiate={() => new ExampleModel()}
+    afterSubmit={() => console.log("Submit is completed")}
+    onSubmit={async (model: ExampleModel, childContext: FormContext) => /* submit code */}
+    onValidate={(groups: Array<{ name: string, isValid: boolean }>) => console.log(groups)}
+>
+    // ...
+</Form>
+```
+
+where:
+- `storageKey` - unique string to store values in provided storage. Optional. If not passed - values does not be stored.
+- `resetAfterSubmit` - resets model to defaults after success submit. Optional.
+- `storage` - storage, that contains values. Optional. If not passed - localStorage will be used.
+- `instantiate` - function, that return instance of `Model`. Required.
+- `afterSubmit` - callback, that triggered after success submit. Optional.
+- `onSubmit` - function, that implements submit. Optional. If not passed - `method` prop must be pased.
+- `method` - string, that using when `onSubmit` prop does not passed.
+- `onValidate` - callback, that triggered when some fields are validated. Optional.
+
+*NOTE: `storage` must implement `getItem` and `setItem` methods*

package/docs/FormGroup.md

@@ -1,27 +1,27 @@
-## <FormGroup \/> Component
+# <FormGroup \/> Component
 This component is wrapper for input/textarea/select and hint/label.  
-It requires [context](../src/Form/FormContext.ts) which is provided by [<Form\/>](./Form.md)  
-[Props](../src/FormGroup/FormGroupProps.ts)
+It requires [context](../src/Form/FormContext.ts) which is provided by [<Form \/>](./Form.md)  
 
+### Usage
 
-Example
-```typescript jsx
-import {FormGroup, Input, Label, Hint} from "react-context-form";
-
-export function CustomGroup() {
-    return (
-        <FormGroup name="name">
-            <Label>Who will done this</Label>
-            <Input maxLength={10} placeholder="Worker" required/>
-        </FormGroup>
-    );  
-};
+```tsx
+<Form {...FormProps}>
+    <FormGroup
+        name="phone"
+        errorClassName="has-error"
+        focusClassName="has-focus"
+        valueClassName="has-value"
+        idPrefix="custom-phone-input"
+        {...HTMLDivElementProps}
+    >
+        // ...
+    </FormGroup>
+</Form>
 ```
 
-It will render
-```html
-<div class="form-group">
-    <label for="rcf-20170403">Who will done this</label>
-    <input maxlength="10" placeholder="Worker" name="name" id="rcf-20170403"/>
-</div>
-```
+where:
+- `name` - field model name (will be passed to input). Required.
+- `idPrefix` - id prefix for input and label. Optional.
+- `errorClassName` - className, that attaching to `FormGroup` when input does not passed validation. Optional. Default - `has-error`.
+- `focusClassName` - className, that attaching to `FormGroup` when input emit `focus` event. Optional. Default - `has-focus`.
+- `valueClassName` - className, that attaching to `FormGroup` when input has value. Optional. Default - `has-value`.

package/docs/Hint.md

@@ -0,0 +1,13 @@
+# <Hint \/> Component
+This component is represents error hint for [<Form \/>](./Form.md).
+It requires [context](../src/Form/FormGroupContext.ts) which is provided by [<FormGroup \/>](./FormGroup.md).
+
+### Usage
+
+```tsx
+<Form {...FormProps}>
+    <FormGroup {...FormGroupProps}>
+        <Hint  {...HTMLDivElementProps} />
+    </FormGroup>
+</Form>
+```

package/docs/HintPopup.md

@@ -0,0 +1,13 @@
+# <HintPopup \/> Component
+This component is represents error hint popup for [<Form \/>](./Form.md).
+It requires [context](../src/Form/FormGroupContext.ts) which is provided by [<FormGroup \/>](./FormGroup.md).
+
+### Usage
+
+```tsx
+<Form {...FormProps}>
+    <FormGroup {...FormGroupProps}>
+        <HintPopup  {...HTMLDivElementProps} />
+    </FormGroup>
+</Form>
+```

package/docs/Input.md

@@ -0,0 +1,19 @@
+# <Input \/> Component
+This component is represents input for [<Form \/>](./Form.md).
+It requires [context](../src/FormGroup/FormGroupContext.ts) which is provided by [<FormGroup \/>](./FormGroup.md).
+
+### Usage
+
+```tsx
+<Form {...FormProps}>
+    <FormGroup {...FormGroupProps}>
+        <Input 
+            transform={TransformTypes.capitalize} 
+            {...HTMLInputElementProps}
+        />
+    </FormGroup>
+</Form>
+```
+
+where:
+- `transform` - transform input value with specific preset. Optional. Can take on values: `TransformTypes.capitalize`, `TransformTypes.upperCase`, `TransformTypes.none`.

package/docs/InputRange.md

@@ -0,0 +1,22 @@
+# <NumericRange \/> Component
+This component is represents range for [<NumericInput \/>](./NumericInput.md).
+It requires [context](../src/FormGroup/FormGroupContext.ts) which is provided by [<FormGroup \/>](./FormGroup.md).
+
+### Usage
+
+```tsx
+<Form {...FormProps}>
+    <FormGroup {...FormGroupProps}>
+        <InputRange
+            max={900}
+            min={1}
+        >
+            <NumericInput  {...HTMLInputProps} />
+        </InputRange>   
+    </FormGroup>
+</Form>
+```
+
+where:
+- `max` - max value for input. Required.
+- `min` - min value for input. Optional.

package/docs/Label.md

@@ -0,0 +1,13 @@
+# <Label \/> Component
+This component is represents label for [<Form \/>](./Form.md).
+It requires [context](../src/Form/FormGroupContext.ts) which is provided by [<FormGroup \/>](./FormGroup.md).
+
+### Usage
+
+```tsx
+<Form {...FormProps}>
+    <FormGroup {...FormGroupProps}>
+        <Label  {...HTMLLabelElementProps} />
+    </FormGroup>
+</Form>
+```

package/docs/Model.md

@@ -1,12 +1,14 @@
 # Model Class
 This class is representation of your forms data.
 It also contains validation rules.
+
+Implemented interface can be founded [here](../src/Model.ts).
   
 [class-validator](https://github.com/pleerock/class-validator) is used for setting validation rules.
 
-Example:
+### Usage
 
-```typescript
+```ts
 import {Model, ModelGroups} from "react-context-form";
 import {IsBoolean, IsNotEmpty, IsString, Length, MaxLength, MinLength} from "class-validator";
 
@@ -42,6 +44,22 @@ export class TaskModel extends Model {
     }
 }
 ```
-*You need to specify attributes list for correct empty fields validation*  
-*You need to specify attributes groups to correct work of `AutoValidate` component*
 
+*NOTE: You need to specify attributes list for correct empty fields validation*  
+*NOTE: You need to specify attributes groups to correct work of `AutoValidate` component*
+
+You can also specify default values:
+
+```ts
+const model = new TaskModel({
+    name: "default name",
+    completed: true
+});
+```
+
+Model instance can be reseted to defaults or cleared:
+
+```ts
+model.reset(); // Fills fields with default values
+model.clear(); // Clear all fields
+```

package/docs/NumericInput.md

@@ -0,0 +1,16 @@
+# <NumericInput \/> Component
+This component is represents numeric input for [<Form \/>](./Form.md).
+It requires [context](../src/FormGroup/FormGroupContext.ts) which is provided by [<FormGroup \/>](./FormGroup.md).
+
+### Usage
+
+```tsx
+<Form {...FormProps}>
+    <FormGroup {...FormGroupProps}>
+        <NumericInput  {...HTMLInputElementProps} />
+    </FormGroup>
+</Form>
+```
+
+*NOTE: This input have type `tel`*
+*NOTE: This input can not contains chars besides numbers*

package/docs/OnValidate.md

@@ -0,0 +1,31 @@
+# <OnValidate \/> Component
+This component is responsible for handling validation result for specific inputs.
+It requires [context](../src/Form/FormContext.ts) which is provided by [<Form \/>](./Form.md).
+
+### Usage
+
+```tsx
+<Form {...FormProps}>
+    <OnValidate 
+        groups={["phone", "email"]}
+        onValidate={(isAllValid: boolean) => isAllValid ? console.log("Group is valid") : console.log("Group is invalid")}
+    >
+        <FormGroup name="phone" {...FormGroupProps}>
+            // ...
+        </FormGroup>
+        <FormGroup name="email" {...FormGroupProps}>
+            // ...
+        </FormGroup>
+        <FormGroup name="name" {...FormGroupProps}>
+            // ...
+        </FormGroup>
+    </OnValidate>
+     <FormGroup name="middleName" {...FormGroupProps}>
+        // ...
+    </FormGroup>
+</Form>
+```
+
+where:
+- `groups` - list of inputs name, that are in validation group. Required.
+- `onValidate` - callback, that triggered on validation. Required.

package/docs/PasswordGroup.md

@@ -0,0 +1,15 @@
+# <PasswordGroup \/> Component
+This component is represents wrapper for [<Input \/>](./Input.md), that must be password.
+It requires [context](../src/Form/FormContext.ts) which is provided by [<Form \/>](./Form.md).
+
+### Usage
+
+```tsx
+<Form {...FormProps}>
+    <FormGroup {...FormGroupProps}>
+        <PasswordGroup {...HTMLDivElementProps}>
+            <Input  {...HTMLInputProps} />
+        </InputRange>   
+    </FormGroup>
+</Form>
+```

package/docs/ResetButton.md

@@ -0,0 +1,11 @@
+# <ResetButton \/> Component
+This component is represents button, that reset [<Form \/>](./Form.md) to defaults.
+It requires [context](../src/Form/FormContext.ts) which is provided by [<Form \/>](./Form.md).
+
+### Usage
+
+```tsx
+<Form {...FormProps}>
+    <ResetButton  {...HTMLButtonElementProps} />
+</Form>
+```

package/docs/ShowPasswordButton.md

@@ -0,0 +1,24 @@
+# <ShowPasswordButton \/> Component
+This component is represents control visibility button for password [<Input \/>](./Input.md).
+It requires [context](../src/PasswordGroup/PasswordGroupContext.ts) which is provided by [<PasswordGroup \/>](./PasswordGroup.md).
+
+### Usage
+
+```tsx
+<Form {...FormProps}>
+    <FormGroup {...FormGroupProps}>
+        <PasswordGroup {...HTMLDivElementProps}>
+            <Input  {...HTMLInputProps} />
+            <ShowPasswordButton 
+                clickToShow={true}
+                hoverToShow={false}
+                {...HTMLButtonElementProps}          
+            />
+        </InputRange>   
+    </FormGroup>
+</Form>
+```
+
+where:
+- `clickToShow` - show password on click. Optional. Default - `true`.
+- `hoverToShow` - show password on hover. Optional. Default - `false`.

package/docs/SlowSubmitButton.md

@@ -0,0 +1,19 @@
+# <SlowSubmitButton \/> Component
+This component is represents button with type `submit` for [<Form \/>](./Form.md) with delay.
+It requires [context](../src/Form/FormContext.ts) which is provided by [<Form \/>](./Form.md).
+
+### Usage
+
+```tsx
+<Form {...FormProps}>
+    <SlowSubmitButton  
+        {...HTMLButtonElementProps}
+        loadingComponent={<span>...</span>}
+        duration={500}
+    />
+</Form>
+```
+
+where:
+- `loadingComponent` - markup, that attaching to button on submit. Required.
+- `duration` - time, that button be in loading state. Optional. Default - `500`.

package/docs/SubmitButton.md

@@ -0,0 +1,17 @@
+# <SubmitButton \/> Component
+This component is represents button with type `submit` for [<Form \/>](./Form.md).
+It requires [context](../src/Form/FormContext.ts) which is provided by [<Form \/>](./Form.md).
+
+### Usage
+
+```tsx
+<Form {...FormProps}>
+    <SubmitButton  
+        {...HTMLButtonElementProps}
+        loadingComponent={<span>...</span>}
+    />
+</Form>
+```
+
+where:
+- `loadingComponent` - markup, that attaching to button on submit. Required.

package/docs/TextArea.md

@@ -0,0 +1,19 @@
+# <TextArea \/> Component
+This component is represents textarea for [<Form \/>](./Form.md).
+It requires [context](../src/FormGroup/FormGroupContext.ts) which is provided by [<FormGroup \/>](./FormGroup.md).
+
+### Usage
+
+```tsx
+<Form {...FormProps}>
+    <FormGroup {...FormGroupProps}>
+        <TextArea 
+            transform={TransformTypes.capitalize} 
+            {...HTMLTextAreaElementProps}
+        />
+    </FormGroup>
+</Form>
+```
+
+where:
+- `transform` - transform input value with specific preset. Optional. Can take on values: `TransformTypes.capitalize`, `TransformTypes.upperCase`, `TransformTypes.none`.

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "react-context-form",
-  "version": "2.9.0",
+  "version": "2.11.1",
   "description": "One more way to handle forms on React",
   "main": "build/index.js",
   "typings": "build/index.d.ts",
   "scripts": {
-    "test": "cross-env TS_NODE_PROJECT=tsconfig.test.json ./node_modules/.bin/nyc mocha -r jsdom-global/register -r ts-node/register -r source-map-support/register tests/bootstrap.ts tests/**-specs.ts tests/**-specs.tsx",
+    "test": "cross-env TS_NODE_PROJECT=tsconfig.test.json ./node_modules/.bin/nyc mocha --exit -r jsdom-global/register -r ts-node/register -r source-map-support/register tests/bootstrap.ts tests/**-specs.ts tests/**-specs.tsx",
     "build": "cross-env NODE_ENV=production ./node_modules/.bin/webpack",
     "dev": "./node_modules/.bin/webpack-dev-server",
     "coverage": "./node_modules/.bin/nyc report --reporter=text-lcov > coverage.lcov && codecov",
@@ -32,10 +32,10 @@
   },
   "homepage": "https://github.com/Horat1us/react-formgroup#readme",
   "devDependencies": {
-    "@types/chai": "^4.1.4",
-    "@types/cheerio": "^0.22.2",
+    "@types/chai": "^4.3.4",
+    "@types/cheerio": "^0.22.31",
     "@types/enzyme": "^2.8.9",
-    "@types/mocha": "^2.2.48",
+    "@types/mocha": "^10.0.0",
     "@types/node": "^10.3.3",
     "@types/prop-types": "^15.5.3",
     "@types/react": "^16.3.17",
@@ -48,8 +48,8 @@
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "babel-regenerator-runtime": "^6.5.0",
-    "chai": "^4.1.2",
-    "cheerio": "^1.0.0-rc.2",
+    "chai": "^4.3.7",
+    "cheerio": "^1.0.0-rc.12",
     "circular-dependency-plugin": "^4.4.0",
     "class-validator": "^0.7.2",
     "clean-webpack-plugin": "^0.1.19",
@@ -59,7 +59,7 @@
     "enzyme-adapter-react-16": "^1.1.1",
     "jsdom": "^11.11.0",
     "jsdom-global": "^3.0.2",
-    "mocha": "^5.2.0",
+    "mocha": "^10.1.0",
     "nyc": "^11.9.0",
     "pre-commit": "^1.2.2",
     "prop-types": "^15.6.1",
@@ -72,15 +72,15 @@
     "ts-node": "^3.3.0",
     "tslint": "^5.10.0",
     "tslint-react": "^3.6.0",
-    "typescript": "^2.9.2",
+    "typescript": "^3.9.10",
     "webpack": "^3.12.0",
     "webpack-dev-server": "^2.11.2",
     "webpack-node-externals": "^1.7.2"
   },
   "peerDependencies": {
-    "class-validator": "^0.7.2",
-    "prop-types": "^15.6.0",
-    "react": "^16.2.0"
+    "class-validator": ">=0.7.2",
+    "prop-types": ">=15.6.0",
+    "react": ">=16.2.0"
   },
   "nyc": {
     "extension": [
@@ -99,7 +99,6 @@
     ],
     "report-dir": "./tests/output"
   },
-  "dependencies": {},
   "pre-commit": [
     "lint",
     "test"

package/tsconfig.json

@@ -10,7 +10,8 @@
     "jsx": "react",
     "declaration": true,
     "declarationDir": "build",
-    "strictNullChecks": true
+    "strictNullChecks": true,
+    "skipLibCheck": true
   },
   "exclude": [
     "./node_modules/**/*",

package/tslint.json

@@ -24,6 +24,7 @@
     "no-floating-promises": false,
     "no-invalid-this": true,
     "no-null-keyword": false,
+    "no-object-literal-type-assertion": false,
     "no-var-keyword": true,
     "triple-equals": true,
     "typeof-compare": false,

package/webpack.config.js

@@ -55,7 +55,7 @@ const config = {
                                 'react',
                                 ['env', {
                                     "targets": {
-                                        "browsers": ["last 2 versions", "safari >= 10", "ie >= 11"]
+                                        "browsers": ["last 2 versions"]
                                     }
                                 }]
                             ],
@@ -76,7 +76,7 @@ const config = {
                         'react',
                         ['env', {
                             "targets": {
-                                "browsers": ["last 2 versions", "safari >= 10", "ie >= 11"]
+                                "browsers": ["last 2 versions", "safari >= 10"]
                             }
                         }]
                     ],

package/.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-    "typescript.tsdk": "node_modules/typescript/lib"
-}