react-conversation-form - npm Package Compare versions

Comparing version 1.0.1 to 2.0.0

dist/index.js

@@ -7,11 +7,38 @@ 'use strict';
 
-var _FormChat = require('./FormChat');
+var _Conversation = require('./Conversation');
 
-Object.defineProperty(exports, 'default', {
+Object.defineProperty(exports, 'Conversation', {
   enumerable: true,
   get: function get() {
-    return _interopRequireDefault(_FormChat).default;
+    return _interopRequireDefault(_Conversation).default;
   }
 });
 
+var _Question = require('./Question');
+
+Object.defineProperty(exports, 'Question', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_Question).default;
+  }
+});
+
+var _Select = require('./Select');
+
+Object.defineProperty(exports, 'Select', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_Select).default;
+  }
+});
+
+var _Option = require('./Option');
+
+Object.defineProperty(exports, 'Option', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_Option).default;
+  }
+});
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package.json

 {
   "name": "react-conversation-form",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "description": "A React wrapper for Space10's Conversational Form",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -1,5 +0,6 @@
-# react-conversation-form · [![npm](https://img.shields.io/npm/v/react-conversation-form.svg?style=flat-square)]()   [![npm](https://img.shields.io/npm/dw/react-conversation-form.svg?style=flat-square)]()
+# react-conversation-form · [![npm](https://img.shields.io/npm/v/react-conversation-form.svg?style=flat-square)](https://www.npmjs.com/package/react-conversation-form)   [![npm](https://img.shields.io/npm/dw/react-conversation-form.svg?style=flat-square)]()
 
 A React wrapper for Conversational Form (https://github.com/space10-community/conversational-form).
 
+v2.X is not compatible with v1.X. You'll need to change your implementation. The key difference is the use of new components instead of the 'questions' prop.
 ## Table of Contents
@@ -9,2 +10,3 @@
 - [Usage](#usage)
+- [Options](#options)
 - [ToDo](#todo)
@@ -24,39 +26,43 @@
 
-    <FormChat
-      onSubmit={() => {}}
-      chatOptions={{
-        thankTheUser: ['identifier', 'feedback'],
-        introText: 'Hi there. Lets leave some feedback! To edit any of your responses, just click on them.',
-        submitText: 'Thanks for giving us your feedback!'
-      }}
-      questions={[
-        {
-          id: 'feedbackType',
-          componentType: 'select',
-          type: 'text',
-          question: 'What type of feedback are you thinking of?',
-          selectOptions: [
-            { label: 'Issue', value: 'issue' },
-            { label: 'Typo', value: 'typo' },
-            { label: 'Praise', value: 'praise' },
-            { label: 'Other', value: 'other' }
-          ]
-        },
-        {
-          id: 'identifier',
-          componentType: 'input',
-          type: 'text',
-          question: 'What\'s your company name/email address, so we can identify you?'
-        },
-        {
-          id: 'feedback',
-          componentType: 'input',
-          type: 'text',
-          question: 'What are you thinking?'
-        }
-      ]}
-    />
-  );
+     <Conversation
+          onSubmit={(a) => {console.log(a)}}
+          chatOptions={{
+              thankTheUser: ['identifier', 'feedback'],
+              introText: 'Hi there. Lets leave some feedback! To edit any of your responses, just click on them.',
+              submitText: 'Thanks for giving us your feedback!'
+          }}
+      >
+          <Select id="feedbackType" question="What type of feedback are you thinking of?">
+              <Option value="issue">Issue</Option>
+              <Option value="typo">Typo</Option>
+              <Option value="praise">Praise</Option>
+              <Option value="other">Other</Option>
+          </Select>
+          <Question id="email" validation={text => text.includes('@')}>
+              {'What\'s your company email address, so we can identify you?'}
+          </Question>
+          <Question id="feedback" validation={[]}>
+              What are you thinking?
+          </Question>
+      </Conversation>
+  
+## Options
 
+### Conversation
+* `onSubmit` - *function* Callback function for the form contents when the user has finished (**required**)
+* `chatOptions` - *object* Extra options for the chat `default: {}`
+    * `robotResponseTime` - *number* The time (ms) the robot takes before responding
+    * `robotChainResponseTime` - *number* The time (ms) the robot takes between chained messages
+    * `showUserThinking` - *boolean* Whether to show the user writing '...' while waiting for response
+    * `robotChainResponseTime` - *number* The time (ms) the robot takes between chained messages
+    * `thankTheUser` - *array* Array of question IDs that the bot should thank the user after answering
+    * `introText` - *string* The opening message from the bot
+    * `submittedResponseText` - *string* Closing response message from the bot
 
+### Question
+
+### Select
+
+### Option
+
 ## ToDo:
@@ -63,0 +69,0 @@

src/index.js

@@ -1,1 +0,4 @@
-export { default } from './FormChat';
+export { default as Conversation } from './Conversation';
+export { default as Question } from './Question';
+export { default as Select } from './Select';
+export { default as Option } from './Option';

stories/conversation-form.story.js

 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import FormChat from '../src/FormChat';
+import { Conversation, Question, Select, Option } from '../src';
 
 storiesOf('Conversation Form', module)
   .add('Feedback Example', () => (
-      <FormChat
-          onSubmit={() => {}}
+      <Conversation
+          onSubmit={(a) => {console.log(a)}}
           chatOptions={{
@@ -14,29 +14,16 @@ thankTheUser: ['identifier', 'feedback'],
           }}
-          questions={[
-              {
-                  id: 'feedbackType',
-                  componentType: 'select',
-                  type: 'text',
-                  question: 'What type of feedback are you thinking of?',
-                  selectOptions: [
-                      { label: 'Issue', value: 'issue' },
-                      { label: 'Typo', value: 'typo' },
-                      { label: 'Praise', value: 'praise' },
-                      { label: 'Other', value: 'other' }
-                  ]
-              },
-              {
-                  id: 'identifier',
-                  componentType: 'input',
-                  type: 'text',
-                  question: 'What\'s your company name/email address, so we can identify you?'
-              },
-              {
-                  id: 'feedback',
-                  componentType: 'input',
-                  type: 'text',
-                  question: 'What are you thinking?'
-              }
-          ]}
-      />
+      >
+          <Select id="feedbackType" question="What type of feedback are you thinking of?">
+              <Option value="issue">Issue</Option>
+              <Option value="typo">Typo</Option>
+              <Option value="praise">Praise</Option>
+              <Option value="other">Other</Option>
+          </Select>
+          <Question id="email" validation={text => text.includes('@')}>
+              {'What\'s your company email address, so we can identify you?'}
+          </Question>
+          <Question id="feedback" validation={[]}>
+              What are you thinking?
+          </Question>
+      </Conversation>
   ));

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of package files

23

increased by35.29%

Lines of code

1212

increased by83.08%

Number of lines in readme file

70

increased by9.38%

Worsened metrics

Total package byte prevSize

724134

decreased by-37.73%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes