add: commits from another branch that was done

.gitignore

@@ -8,8 +8,10 @@ node_modules/
 tmp/
 .DS_Store
 yarn.lock
+.yarn-metadata.json
 .nyc_output/
 dist/
 tmp/
 .yalc/
 yalc.lock
+.eslintcache

docs/2.getting-started/2.creating-your-first-bot.mdx

@@ -6,7 +6,6 @@ menu: 2. Getting Started
 
 import { NextButton } from '../components/nextButton.tsx'
 
-
 # **Creating Your First Bot**
 
 Now that you have [Botonic and its dependencies installed](/getting-started/installation), you can build your first bot!
@@ -29,19 +28,19 @@ To start a new bot, open your terminal/command prompt and run:
 botonic new testBot blank
 ```
 
-* `new` will tell the CLI to create a new bot.
-* `testBot` will be the directory name for your project.
-* `blank` will be the starter template for your project.
+- `new` will tell the CLI to create a new bot.
+- `testBot` will be the directory name for your project.
+- `blank` will be the starter template for your project.
 
 Along with creating your project, this will also install node modules for the application, and make the first build.
 
 Along with the blank template, Botonic also provides the following official templates:
 
-* `tutorial`: a bot that explains you some basic concepts in Botonic. This template has lots of comments in its code so you can learn by reading through the source files.
-* `childs`: a simple example on how `childRoutes` works.
-* `dynamic_carousel`: a bot that gets data from an external API and renders a Carousel (see: [RCML](/main-concepts/rich-conversational-markup-language)).
-* `handoff`: a simple bot that transfer the conversation into Hubtype Desk. (see: [human handOff](/tutorials-and-examples/human-handoff))
-* `intent`: a bot that use external AI like DialogFlow.
+- `tutorial`: a bot that explains you some basic concepts in Botonic. This template has lots of comments in its code so you can learn by reading through the source files.
+- `childs`: a simple example on how `childRoutes` works.
+- `dynamic_carousel`: a bot that gets data from an external API and renders a Carousel (see: [RCML](/main-concepts/rich-conversational-markup-language)).
+- `handoff`: a simple bot that transfer the conversation into Hubtype Desk. (see: [human handOff](/tutorials-and-examples/human-handoff))
+- `intent`: a bot that use external AI like DialogFlow.
 
 If you don’t specify a template at the start, you will be prompted to pick one.
 
@@ -53,19 +52,20 @@ Now, you can `cd` into the folder that was created. To get a quick preview of yo
 cd testBot
 botonic serve
 ```
-*If you are running windows use `npm run start` instead of `botonic serve`*
+
+_If you are running windows use `npm run start` instead of `botonic serve`_
 
 This will give you a local browser url where you can have a chat session with your bot. Just type any text and press enter to send a message to the bot. If you started with the "blank" template the bot will always respond with "I don't understand you".
 
 ## Project Structure
 
-* `routes.js`: Here you'll define routes, which maps user inputs and payloads to actions. You can use imported subroutes from other files.
-* `integrations.js`: Define your integrations keys with 3rd party services, like NLP platforms.
-* `locales`: Locales are objects from which your bot takes your multilanguage definitions. This is useful if you want that your bot addresses to different audiences. The `locales/index.js` file is where all the languages are imported.
-* `webviews`: Webviews are small web pages that pop up in the middle of the conversation flow. This lets you offer experiences and features that might be difficult to offer with message bubbles, such as picking products to buy, seats to book, or dates to reserve.
-* `actions`: Actions are the units of logic that your bot can perform and where the responses of your bot are defined. You are free to organize them into subdirectories.
-* `assets`: Assets is where you can store all the media required for your bot. 
-* `...`: The rest of the files are needed for the [babel](https://babeljs.io/) and [Botonic](https://github.com/hubtype/botonic) project configuration. We suggest you to not modify its contents, and if not, it's at your own risk!
+- `routes.js`: Here you'll define routes, which maps user inputs and payloads to actions. You can use imported subroutes from other files.
+- `integrations.js`: Define your integrations keys with 3rd party services, like NLP platforms.
+- `locales`: Locales are objects from which your bot takes your multilanguage definitions. This is useful if you want that your bot addresses to different audiences. The `locales/index.js` file is where all the languages are imported.
+- `webviews`: Webviews are small web pages that pop up in the middle of the conversation flow. This lets you offer experiences and features that might be difficult to offer with message bubbles, such as picking products to buy, seats to book, or dates to reserve.
+- `actions`: Actions are the units of logic that your bot can perform and where the responses of your bot are defined. You are free to organize them into subdirectories.
+- `assets`: Assets is where you can store all the media required for your bot.
+- `...`: The rest of the files are needed for the [babel](https://babeljs.io/) and [Botonic](https://github.com/hubtype/botonic) project configuration. We suggest you to not modify its contents, and if not, it's at your own risk!
 
 ## Adding basic functionality to your bot
 
@@ -78,14 +78,12 @@ The first step is to create a route that captures any text. Edit your `src/route
 ```javascript
 import Echo from './actions/echo'
 
-export const routes = [
-  {path: 'echo', text: /^.+$/, action: Echo}
-]
+export const routes = [{ path: 'echo', text: /^.+$/, action: Echo }]
 ```
 
-* `path: 'echo'` means the path that the bot flow has taken.
-* `text: /^.+$/` means that this route will capture any text that matches this regular expression.
-* `action: "echo"` means that when a user input is matched by this rule, the action named "echo" (that we're going to create in the next step) will be triggered.
+- `path: 'echo'` means the path that the bot flow has taken.
+- `text: /^.+$/` means that this route will capture any text that matches this regular expression.
+- `action: "echo"` means that when a user input is matched by this rule, the action named "echo" (that we're going to create in the next step) will be triggered.
 
 ### Create an action
 
@@ -106,16 +104,17 @@ export default class extends React.Component {
 
 This is the code that will be executed when the user types anything. As you can see, this is just a React component.
 
-* `render`: this is where you construct the answer of your bot. In this example we return just one message 'Text' whose content is the user input. This data is stored in the variable `context.input.data`.
+- `render`: this is where you construct the answer of your bot. In this example we return just one message 'Text' whose content is the user input. This data is stored in the variable `context.input.data`.
 
 > ### NOTE:
-> Usually the `render` method spits out HTML code in a typical React project. However, this is sent to messaging platforms like Whatsapp or Facebook Messenger so sending HTML won't work. We've created this HTML-like language called [Rich Conversational Markup Language (RCML)](/api/rich-conversational-markup-language) to help you construct the bot response in a dynamic way.
+>
+> Usually the `render` method spits out HTML code in a typical React project. However, this is sent to messaging platforms like Whatsapp or Facebook Messenger so sending HTML won't work. We've created this HTML-like language called [Rich Conversational Markup Language (RCML)](/main-concepts/rich-conversational-markup-language) to help you construct the bot response in a dynamic way.
 
 Now try to execute `botonic serve` again and type "hello world" 😊
 
 ## Adding Natural Language Understanding
 
-You can go a long way capturing user inputs using regular expressions, but it obviously has its limitations. As you find yourself adding more and more functionality to your bot you get to a point where you need Natural [Language Understanding (NLU)](/api/nlu) capabilities.
+You can go a long way capturing user inputs using regular expressions, but it obviously has its limitations. As you find yourself adding more and more functionality to your bot you get to a point where you need Natural [Language Understanding (NLU)](/main-concepts/nlu) capabilities.
 
 NLU lets you capture user inputs by "intent" instead of parsing its raw text. An intent represents all the different ways users can express a unit of meaning that is valid for your bot. For example, you can group the sentences "What's the weather in California?" and "Do you know if it's sunny today in California?" to the intent `get_weather` and the parameter `city=California`. You can then map that intent to an action using a route.
 
@@ -153,18 +152,18 @@ import Smalltalk from './actions/smalltalk'
 import Echo from './actions/echo'
 
 export const routes = [
-  {path:'age', intent: "smalltalk.agent.age", action: Age},
-  {path:'smalltalk', intent: /^smalltalk/, action: Smalltalk},
-  {path: 'echo', text: /^.+$/, action: Echo}
+  { path: 'age', intent: 'smalltalk.agent.age', action: Age },
+  { path: 'smalltalk', intent: /^smalltalk/, action: Smalltalk },
+  { path: 'echo', text: /^.+$/, action: Echo }
 ]
 ```
 
-* `{path:'age', intent: "smalltalk.agent.age", action: Age}` will match exactly the intent "smalltalk.agent.age".
-* `{path:'smalltalk', intent: /^smalltalk/, action: Smalltalk}` will match any other "smalltalk" intent.
+- `{path:'age', intent: "smalltalk.agent.age", action: Age}` will match exactly the intent "smalltalk.agent.age".
+- `{path:'smalltalk', intent: /^smalltalk/, action: Smalltalk}` will match any other "smalltalk" intent.
 
 Routes are checked in order, that's why we put the more specific ones first and the more generic at the end.
 
-Finally, just crete a couple of actions that respond to these intents:
+Finally, just create a couple of actions that respond to these intents:
 
 **src/actions/age.js**
 
@@ -189,9 +188,7 @@ export default class extends React.Component {
   render() {
     return (
       <>
-        <Text>
-          I'm not interested in talking about that...
-        </Text>
+        <Text>I'm not interested in talking about that...</Text>
         <Image src='https://i.pinimg.com/originals/eb/4d/d1/eb4dd12ae0b4a57a3fbb85e61d0c1cf4.gif' />
       </>
     )
@@ -201,4 +198,4 @@ export default class extends React.Component {
 
 That's it! You can run `botonic serve` and play a little bit. Try adding more routes/actions for different Dialogflow intents. When you're ready, go to the next section to learn how to put your bot in production and publish it to messaging platforms like Facebook Messenger.
 
-<NextButton title="Deploying" href="/getting-started/deploying" />
+<NextButton title='Deploying' href='/getting-started/deploying' />

docs/3.main-concepts/3.rcml.mdx

@@ -41,7 +41,7 @@ In order to create a line break, you new to use `{'\\n'}`.
 _Example of how it looks in the Messenger platform:_
 
 <img
-  src="https://botonic-doc-static.netlify.com/images/buttons.png"
+  src='https://botonic-doc-static.netlify.com/images/buttons.png'
   style={{ display: 'block', margin: 'auto', maxWidth: '50%' }}
 />
 
@@ -51,22 +51,22 @@ _Example of how it looks in the Messenger platform:_
 <Text>
   I will show you three quickreplies. One with a payload, one to go to an action
   and another to pass values to that action:
-  <Reply payload="yes">Cool</Reply>
-  <Reply path="paradise">Take me to paradise</Reply>
-  <Reply path="paradise?withfruit=coconut">To a better paradise</Reply>
+  <Reply payload='yes'>Cool</Reply>
+  <Reply path='paradise'>Take me to paradise</Reply>
+  <Reply path='paradise?withfruit=coconut'>To a better paradise</Reply>
 </Text>
 ```
 
 _Example of how it looks in the Messenger platform:_
 
 <img
-  src="https://botonic-doc-static.netlify.com/images/quickreplies.png"
+  src='https://botonic-doc-static.netlify.com/images/quickreplies.png'
   style={{ display: 'block', margin: 'auto', maxWidth: '60%' }}
 />
 
 > #### NOTE:
 >
-> Buttons and quickreplies can have an url link, a payload attached, a href attribute, or an action to be triggered. When passing parameters through actions as seen in the example, the data will be accessiblein the field `params` inside the `botonicInit` function.
+> Buttons and quickreplies can have an url link, a payload attached, a href attribute, or an action to be triggered. When passing parameters through actions as seen in the example, the data will be accessible in the field `params` inside the `botonicInit` function.
 
 ## Carousel
 
@@ -129,7 +129,7 @@ export default class extends React.Component {
 _Example of how it looks in the Messenger app:_
 
 <img
-  src="https://botonic-doc-static.netlify.com/images/carrousel.gif"
+  src='https://botonic-doc-static.netlify.com/images/carrousel.gif'
   style={{ display: 'block', margin: 'auto' }}
 />
 
@@ -139,17 +139,17 @@ You can send all this types of media files:
 
 ```javascript
 <>
-  <Image src="https://botonic.io/images/botonic_react_logo-p-500.png" />
-  <Video src="https://www.w3schools.com/html/mov_bbb.mp4" />
-  <Audio src="https://www.w3schools.com/html/horse.mp3" />
-  <Document src="http://unec.edu.az/application/uploads/2014/12/pdf-sample.pdf" />
+  <Image src='https://botonic.io/images/botonic_react_logo-p-500.png' />
+  <Video src='https://www.w3schools.com/html/mov_bbb.mp4' />
+  <Audio src='https://www.w3schools.com/html/horse.mp3' />
+  <Document src='http://unec.edu.az/application/uploads/2014/12/pdf-sample.pdf' />
 </>
 ```
 
 _Example of the media types:_
 
 <img
-  src="https://botonic-doc-static.netlify.com/images/media_files.png"
+  src='https://botonic-doc-static.netlify.com/images/media_files.png'
   style={{
     display: 'block',
     margin: 'auto',
@@ -170,7 +170,7 @@ _Example of the media types:_
 _Example in Facebook Messenger:_
 
 <img
-  src="https://botonic-doc-static.netlify.com/images/doc_location.png"
+  src='https://botonic-doc-static.netlify.com/images/doc_location.png'
   style={{ display: 'block', margin: 'auto' }}
 />
 
@@ -223,21 +223,21 @@ export default class extends React.Component {
 _This will produce the following output in Facebook Messenger:_
 
 <img
-  src="https://botonic-doc-static.netlify.com/images/share_1.png"
+  src='https://botonic-doc-static.netlify.com/images/share_1.png'
   style={{ display: 'block', margin: 'auto' }}
 />
 
 _After clicking on it, your defined elements will be displayed:_
 
 <img
-  src="https://botonic-doc-static.netlify.com/images/share_2.png"
+  src='https://botonic-doc-static.netlify.com/images/share_2.png'
   style={{ display: 'block', margin: 'auto' }}
 />
 
 _This is how it looks on the receiver side:_
 
 <img
-  src="https://botonic-doc-static.netlify.com/images/share_3.png"
+  src='https://botonic-doc-static.netlify.com/images/share_3.png'
   style={{ display: 'block', margin: 'auto' }}
 />
 
@@ -325,7 +325,7 @@ export default class extends React.Component {
 _In this case, this template will produce this nice boarding pass._
 
 <img
-  src="https://botonic-doc-static.netlify.com/images/message_template.png"
+  src='https://botonic-doc-static.netlify.com/images/message_template.png'
   style={{ display: 'block', margin: 'auto' }}
 />
 

packages/botonic-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botonic/core",
-  "version": "0.9.0-alpha.6",
+  "version": "0.9.0-alpha.7",
   "description": "Build Chatbots using React",
   "main": "src/index.js",
   "scripts": {

packages/botonic-plugin-contentful/.eslintrc.js

@@ -27,17 +27,17 @@ module.exports = {
   rules: {
     // style. Soon a precommit githook will fix prettier errors
     "prettier/prettier": "error",
-    "filenames/match-regex": [2, "^[a-z-.]+$", true],
-
+    "filenames/match-regex": ["warn", "^[a-z-.]+$", true],
 
     // In typescript we must use obj.field when we have the types, and obj['field'] when we don't
     // Not set to warn because Webstorm cannot fix eslint rules with --quiet https://youtrack.jetbrains.com/issue/WEB-39246
     "dot-notation": "off",
-
+    "no-console" :"off",
     // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
     // e.g. "@typescript-eslint/explicit-function-return-type": "off",
     "node/no-unsupported-features/es-syntax": "off", //babel will take care of ES compatibility
     "unicorn/no-abusive-eslint-disable" : "off",
+    "@typescript-eslint/camelcase" : "warn",
 
     // special for TYPESCRIPT
     "@typescript-eslint/explicit-function-return-type": "off", // annoying for tests
@@ -51,13 +51,28 @@ module.exports = {
     // allow public functions/classes to call private functions/classes declared below.
     // otoh, variables (typically constants) should be declared at the top
     "@typescript-eslint/no-use-before-define": ["error", { "variables": true, "functions": false, "classes": false }],
-    "@typescript-eslint/no-useless-constructor": "warn",
     "@typescript-eslint/require-await": "error",
     "no-empty-pattern" : "off",
     "no-null/no-null": "warn", // fields declared with ? are undefined, not null (be aware that React uses null)
     "unicorn/prevent-abbreviations" : "off", // the plugin removes removes type annotations from typescript code :-(
     "unicorn/filename-case" : "off", // React convention is in CamelCase
     "valid-jsdoc": "off", // function comments hide code complexity (and typescript already have type specifications),
+
+  },
+  "overrides": [
+    {
+      "files": [
+        "tests/**/*.ts" // to be able to skip required fields when not used in a particular test
+      ],
+      "rules": {
+        "@typescript-eslint/no-object-literal-type-assertion" : "off",
+      }
+    }
+  ],
+  settings: {
+    react: {
+      version: "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
+    }
   },
   env: {
     jest: true,

packages/botonic-plugin-contentful/README.md → packages/botonic-plugin-contentful/README_wip.md

@@ -1,5 +1,5 @@
 # Design
- See [diagram](./doc/class-diagram.png). Exported from https://www.draw.io/#G1fMaHqDYF-DsGWC6JrCWvo6f7Psx7Vpzw
+ See [diagram](/packages/botonic-plugin-contentful/doc/class-diagram.png). Exported from https://www.draw.io/#G1fMaHqDYF-DsGWC6JrCWvo6f7Psx7Vpzw
 # Management
 ## Export 
 Install cli:
@@ -11,7 +11,3 @@ Generate personal token from https://app.contentful.com/spaces/p2iyhzd1u4a7/api/
 ````
 contentful space export --space-id=p2iyhzd1u4a7 --management-token=xxx --download-assets
 ````
-
-## Build
-
-* @babel/runtime must be a dependency in case the plugin is used from a bot packaged with babel-loader