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

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.79.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.79.0"
+    "react-redux": "^5.0.4",
+    "react-talend-components": "^0.79.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;