feat(Forms) : rendering lib based on json-schema-form-core

output/cmf.eslint.txt

@@ -1,7 +1,7 @@
 Lerna v2.0.0-beta.36
 Scoping to packages that match 'react-cmf'
 
-> react-cmf@0.79.0 lint:es /home/travis/build/Talend/ui/packages/cmf
+> react-cmf@0.80.0 lint:es /home/travis/build/Talend/ui/packages/cmf
 > eslint --config .eslintrc --ext .js src
 
 The react/require-extension rule is deprecated. Please use the import/extensions rule from eslint-plugin-import instead.

output/components.eslint.txt

@@ -1,7 +1,7 @@
 Lerna v2.0.0-beta.36
 Scoping to packages that match 'react-talend-components'
 
-> react-talend-components@0.79.0 lint:es /home/travis/build/Talend/ui/packages/components
+> react-talend-components@0.80.0 lint:es /home/travis/build/Talend/ui/packages/components
 > eslint --config .eslintrc src
 
 

output/components.sasslint.txt

@@ -1,7 +1,7 @@
 Lerna v2.0.0-beta.36
 Scoping to packages that match 'react-talend-components'
 
-> react-talend-components@0.79.0 lint:style /home/travis/build/Talend/ui/packages/components
+> react-talend-components@0.80.0 lint:style /home/travis/build/Talend/ui/packages/components
 > sass-lint -v -q
 
 

output/containers.eslint.txt

@@ -1,7 +1,7 @@
 Lerna v2.0.0-beta.36
 Scoping to packages that match 'react-talend-containers'
 
-> react-talend-containers@0.79.0 lint:es /home/travis/build/Talend/ui/packages/containers
+> react-talend-containers@0.80.0 lint:es /home/travis/build/Talend/ui/packages/containers
 > eslint --config .eslintrc src
 
 The react/require-extension rule is deprecated. Please use the import/extensions rule from eslint-plugin-import instead.

output/forms.eslint.txt

@@ -1,7 +1,7 @@
 Lerna v2.0.0-beta.36
 Scoping to packages that match 'react-talend-forms'
 
-> react-talend-forms@0.79.0 lint:es /home/travis/build/Talend/ui/packages/forms
+> react-talend-forms@0.80.0 lint:es /home/travis/build/Talend/ui/packages/forms
 > eslint --config .eslintrc src
 
 The react/require-extension rule is deprecated. Please use the import/extensions rule from eslint-plugin-import instead.

output/forms.sasslint.txt

@@ -1,6 +1,6 @@
 Lerna v2.0.0-beta.36
 Scoping to packages that match 'react-talend-forms'
 
-> react-talend-forms@0.79.0 lint:style /home/travis/build/Talend/ui/packages/forms
+> react-talend-forms@0.80.0 lint:style /home/travis/build/Talend/ui/packages/forms
 > sass-lint -v -q
 

output/logging.eslint.txt

@@ -1,7 +1,7 @@
 Lerna v2.0.0-beta.36
 Scoping to packages that match 'talend-log'
 
-> talend-log@0.79.0 lint:es /home/travis/build/Talend/ui/packages/logging
+> talend-log@0.80.0 lint:es /home/travis/build/Talend/ui/packages/logging
 > eslint --config .eslintrc --ext .js src
 
 

output/theme.sasslint.txt

@@ -1,7 +1,7 @@
 Lerna v2.0.0-beta.36
 Scoping to packages that match 'bootstrap-talend-theme'
 
-> bootstrap-talend-theme@0.79.0 lint:style /home/travis/build/Talend/ui/packages/theme
+> bootstrap-talend-theme@0.80.0 lint:style /home/travis/build/Talend/ui/packages/theme
 > sass-lint -q -v
 
 
@@ -16,12 +16,12 @@ src/theme/_forms.scss
    24:8   error    Qualifying elements are not allowed for class selectors  no-qualifying-elements
    41:10  error    Qualifying elements are not allowed for class selectors  no-qualifying-elements
    42:7   error    Qualifying elements are not allowed for class selectors  no-qualifying-elements
-   79:8   error    Qualifying elements are not allowed for class selectors  no-qualifying-elements
-  262:8   error    Qualifying elements are not allowed for class selectors  no-qualifying-elements
-  275:8   error    Qualifying elements are not allowed for class selectors  no-qualifying-elements
-  288:8   error    Qualifying elements are not allowed for class selectors  no-qualifying-elements
-  311:9   error    Qualifying elements are not allowed for class selectors  no-qualifying-elements
-  447:8   warning  Vendor prefixes should not be used                       no-vendor-prefixes
+   84:8   error    Qualifying elements are not allowed for class selectors  no-qualifying-elements
+  267:8   error    Qualifying elements are not allowed for class selectors  no-qualifying-elements
+  280:8   error    Qualifying elements are not allowed for class selectors  no-qualifying-elements
+  293:8   error    Qualifying elements are not allowed for class selectors  no-qualifying-elements
+  316:9   error    Qualifying elements are not allowed for class selectors  no-qualifying-elements
+  457:8   warning  Vendor prefixes should not be used                       no-vendor-prefixes
 
 src/theme/_tables.scss
   21:2   warning  Vendor prefixes should not be used  no-vendor-prefixes

packages/forms/.storybook/config.js

@@ -7,6 +7,7 @@ setAddon(infoAddon);
 
 function loadStories() {
 	require('../stories');
+	require('../stories-core');
 }
 
 configure(loadStories, module);

packages/forms/__mocks__/data.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import configureMockStore from 'redux-mock-store';
+
+export const data = {
+	jsonSchema: {
+		type: 'object',
+		title: 'Comment',
+		properties: {
+			lastname: {
+				type: 'string',
+				minLength: 10,
+			},
+			firstname: {
+				type: 'string',
+			},
+			check: {},
+		},
+		required: [
+			'firstname',
+		],
+	},
+	uiSchema: [
+		{
+			key: 'lastname',
+			title: 'Last Name (with description)',
+			description: 'Hint: this is the last name',
+			autoFocus: true,
+		},
+		{
+			key: 'firstname',
+			title: 'First Name (with placeholder)',
+			placeholder: 'Enter your firstname here',
+			triggers: ['after'],
+		},
+		{
+			key: 'check',
+			type: 'button',
+			title: 'Check the thing',
+			triggers: ['after'],
+		},
+	],
+	properties: {},
+	errors: {},
+};
+
+export const mergedSchema = [
+	{
+		autoFocus: true,
+		description: 'Hint: this is the last name',
+		key: ['lastname'],
+		minlength: 10,
+		ngModelOptions: {},
+		schema: { minLength: 10, type: 'string' },
+		title: 'Last Name (with description)',
+		type: 'text',
+	},
+	{
+		key: ['firstname'],
+		ngModelOptions: {},
+		placeholder: 'Enter your firstname here',
+		required: true,
+		schema: { type: 'string' },
+		title: 'First Name (with placeholder)',
+		triggers: ['after'],
+		type: 'text',
+	},
+	{
+		key: ['check'],
+		title: 'Check the thing',
+		triggers: ['after'],
+		type: 'button',
+	},
+];
+
+export function initProps() {
+	return {
+		autoComplete: 'off',
+		customValidation: jest.fn(),
+		formName: 'myFormName',
+		id: 'myFormId',
+		onChange: jest.fn(),
+		onSubmit: jest.fn(),
+		onTrigger: jest.fn(),
+		widgets: {
+			custom: () => (<div>Custom</div>),
+		},
+	};
+}
+
+export function initStore(formName, form) {
+	const mockStore = configureMockStore();
+	const state = { forms: {} };
+
+	if (formName && form) {
+		state.forms[formName] = { ...form };
+	}
+
+	return mockStore(state);
+}

packages/forms/package.json

@@ -46,9 +46,12 @@
     "react-bootstrap": "^0.30.3",
     "react-css-transition": "^0.7.4",
     "react-dom": "^15.4.0",
+    "react-redux": "^5.0.4",
     "react-talend-components": "^0.80.0",
     "react-test-renderer": "15.4.0",
     "react-virtualized": "^9.1.0",
+    "redux": "^3.6.0",
+    "redux-mock-store": "^1.2.3",
     "rimraf": "^2.5.4",
     "sass-lint": "^1.10.2",
     "sass-loader": "^4.1.1",
@@ -60,13 +63,16 @@
     "classnames": "^2.2.5",
     "keycode": "^2.1.8",
     "react-autowhatever": "^7.0.0",
-    "react-jsonschema-form": "^0.42.0"
+    "react-jsonschema-form": "^0.42.0",
+    "talend-json-schema-form-core": "1.0.2-alpha.2"
   },
   "peerDependencies": {
     "react": "^15.4.0",
     "react-bootstrap": "^0.30.3",
     "react-dom": "^15.4.0",
-    "react-talend-components": "^0.80.0"
+    "react-redux": "^5.0.4",
+    "react-talend-components": "^0.80.0",
+    "redux": "^3.6.0"
   },
   "scripts": {
     "prepublish": "rimraf lib && babel -d lib ./src/ && cpx \"./src/**/*.scss\" lib",

packages/forms/src/UIForm/Message/Message.component.js

@@ -0,0 +1,29 @@
+import React, { PropTypes } from 'react';
+
+export default function Message(props) {
+	const {
+		errorMessage,
+		description,
+		isValid,
+	} = props;
+
+	const message = isValid ? description : errorMessage;
+	return message ?
+		(
+			<p
+				className="help-block"
+				role="status"
+			>
+				{ message }
+			</p>
+		) :
+		null;
+}
+
+if (process.env.NODE_ENV !== 'production') {
+	Message.propTypes = {
+		errorMessage: PropTypes.string,
+		description: PropTypes.string,
+		isValid: PropTypes.bool,
+	};
+}

packages/forms/src/UIForm/Message/Message.component.test.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import Message from './Message.component';
+
+describe('Message component', () => {
+	it('should render provided description if the field is valid', () => {
+		// when
+		const wrapper = shallow(
+			<Message
+				errorMessage={'My error message'}
+				description={'My description'}
+				isValid
+			/>
+		);
+
+		// then
+		expect(wrapper.node).toMatchSnapshot();
+	});
+
+	it('should render provided error message if the field is invalid', () => {
+		// when
+		const wrapper = shallow(
+			<Message
+				errorMessage={'My error message'}
+				description={'My description'}
+				isValid={false}
+			/>
+		);
+
+		// then
+		expect(wrapper.node).toMatchSnapshot();
+	});
+
+	it('should render nothing when field is valid and no description is provided', () => {
+		// when
+		const wrapper = shallow(
+			<Message
+				errorMessage={'My error message'}
+				isValid
+			/>
+		);
+
+		// then
+		expect(wrapper.node).toMatchSnapshot();
+	});
+});

packages/forms/src/UIForm/Message/__snapshots__/Message.component.test.js.snap

@@ -0,0 +1,17 @@
+exports[`Message component should render nothing when field is valid and no description is provided 1`] = `null`;
+
+exports[`Message component should render provided description if the field is valid 1`] = `
+<p
+  className="help-block"
+  role="status">
+  My description
+</p>
+`;
+
+exports[`Message component should render provided error message if the field is invalid 1`] = `
+<p
+  className="help-block"
+  role="status">
+  My error message
+</p>
+`;

packages/forms/src/UIForm/Message/index.js

@@ -0,0 +1,3 @@
+import Message from './Message.component';
+
+export default Message;