microsoft · corinagum · Sep 16, 2019 · Sep 11, 2019 · Sep 11, 2019 · Sep 15, 2019
@@ -63,6 +63,7 @@
     "*.{js,jsx,ts,tsx}": [
       "prettier --write packages/{bundle,component,core,embed,playground}/src/**/*.{js,jsx,ts,tsx}",
       "prettier --write __tests__/**/*.{js,jsx,ts,tsx}",
+      "prettier --write samples/**/*.{js,html}",
       "git add"
     ]
   },

@@ -0,0 +1,90 @@
+extends:
+- plugin:react/recommended
+plugins:
+- prettier
+- react-hooks
+rules:
+# plugins
+  prettier/prettier: error
+
+  react/button-has-type: error
+  react/default-props-match-prop-types: error
+  react/destructuring-assignment: error
+  react/forbid-component-props:
+  - error
+  - forbid:
+    - style
+  react/forbid-dom-props:
+  - error
+  - forbid:
+    - id
+  # react/forbid-prop-types: error // How to deal with Adaptive Card schema?
+  react/no-access-state-in-setstate: error
+  react/no-array-index-key: error
+  react/no-danger: error
+  react/no-did-mount-set-state: error
+  react/no-did-update-set-state: error
+  react/no-redundant-should-component-update: error
+  react/no-typos: error
+  react/no-this-in-sfc: error
+  react/no-unescaped-entities: error
+  react/no-unsafe: error
+  react/no-unused-prop-types: error
+  react/no-unused-state: error
+  react/no-will-update-set-state: error
+  react/prefer-es6-class: error
+  react/prefer-read-only-props: error
+  react/require-default-props: error
+  react/self-closing-comp: error
+  react/sort-prop-types: error
+  react/state-in-constructor: error
+  react/static-property-placement:
+  - error
+  - property assignment
+  react/style-prop-object: error
+  react/void-dom-elements-no-children: error
+  react/jsx-boolean-value:
+  - error
+  - always
+  react/jsx-closing-bracket-location:
+  - error
+  - tag-aligned
+  react/jsx-closing-tag-location: error
+  react/jsx-equals-spacing:
+  - error
+  - never
+  react/jsx-first-prop-new-line:
+  - error
+  - multiline-multiprop
+  react/jsx-handler-names: error
+  react/jsx-indent:
+  - error
+  - 2
+  react/jsx-indent-props:
+  - error
+  - 2
+  react/jsx-max-props-per-line:
+  - error
+  - maximum: 1
+    when: multiline
+  react/jsx-no-bind: error
+  react/jsx-no-literals: error
+  # react/jsx-one-expression-per-line: #conflicts with prettier
+  # - error
+  # - allow: literal
+  react/jsx-fragments:
+  - error
+  - element
+  react/jsx-pascal-case: error
+  react/jsx-props-no-multi-spaces: error
+  react/jsx-sort-default-props: error
+  react/jsx-sort-props: error
+  react/jsx-tag-spacing:
+  - error
+  - afterOpening: never
+    beforeClosing: never
+    beforeSelfClosing: always
+    closingSlash: never
+  react/jsx-wrap-multilines: error # Conflict with no-extra-parens
+  react-hooks/rules-of-hooks: error
+  react-hooks/exhaustive-deps: warn
@@ -0,0 +1,10 @@
+arrowParens: avoid
+bracketSpacing: true
+jsxBracketSameLine: false
+printWidth: 120
+proseWrap: preserve
+quoteProps: as-needed
+semi: true
+singleQuote: true
+tabWidth: 2
+trailingComma: none
@@ -2,15 +2,20 @@
 <html lang="en-US">
   <head>
     <title>Web Chat: Full-featured bundle</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <!--
       This CDN points to the latest official release of Web Chat. If you need to test against Web Chat's latest bits, please refer to pointing to Web Chat's MyGet feed:
       https://github.com/microsoft/BotFramework-WebChat#how-to-test-with-web-chats-latest-bits
     -->
     <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
     <style>
-      html, body { height: 100% }
-      body { margin: 0 }
+      html,
+      body {
+        height: 100%;
+      }
+      body {
+        margin: 0;
+      }
 
       #webchat {
         height: 100%;
@@ -21,7 +26,7 @@
   <body>
     <div id="webchat" role="main"></div>
     <script>
-      (async function () {
+      (async function() {
         // In this demo, we are using Direct Line token from MockBot.
         // Your client code must provide either a secret or a token to talk to your bot.
         // Tokens are more secure. To learn about the differences between secrets and tokens
@@ -30,9 +35,12 @@
         const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
         const { token } = await res.json();
 
-        window.WebChat.renderWebChat({
-          directLine: window.WebChat.createDirectLine({ token })
-        }, document.getElementById('webchat'));
+        window.WebChat.renderWebChat(
+          {
+            directLine: window.WebChat.createDirectLine({ token })
+          },
+          document.getElementById('webchat')
+        );
 
         document.querySelector('#webchat > *').focus();
       })().catch(err => console.error(err));

@@ -2,15 +2,20 @@
 <html lang="en-US">
   <head>
     <title>Web Chat: Full-featured bundle with ES5 polyfills</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <!--
       This CDN points to the latest official release of Web Chat. If you need to test against Web Chat's latest bits, please refer to pointing to Web Chat's MyGet feed:
       https://github.com/microsoft/BotFramework-WebChat#how-to-test-with-web-chats-latest-bits
     -->
     <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat-es5.js"></script>
     <style>
-      html, body { height: 100% }
-      body { margin: 0 }
+      html,
+      body {
+        height: 100%;
+      }
+      body {
+        margin: 0;
+      }
 
       #webchat {
         height: 100%;
@@ -27,18 +32,22 @@
       // https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication
 
       // This code is modified to run in browser without async and Promise support
-      window.fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' })
-        .then(function (res) {
+      window
+        .fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' })
+        .then(function(res) {
           return res.json();
         })
-        .then(function (json) {
+        .then(function(json) {
           const token = json.token;
 
-          window.WebChat.renderWebChat({
-            directLine: window.WebChat.createDirectLine({
-              token: token
-            })
-          }, document.getElementById('webchat'));
+          window.WebChat.renderWebChat(
+            {
+              directLine: window.WebChat.createDirectLine({
+                token: token
+              })
+            },
+            document.getElementById('webchat')
+          );
 
           document.querySelector('#webchat > *').focus();
         });

@@ -2,15 +2,20 @@
 <html lang="en-US">
   <head>
     <title>Web Chat: Full-featured bundle</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <!--
       This CDN points to the latest official release of Web Chat. If you need to test against Web Chat's latest bits, please refer to pointing to Web Chat's MyGet feed:
       https://github.com/microsoft/BotFramework-WebChat#how-to-test-with-web-chats-latest-bits
     -->
     <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
     <style>
-      html, body { height: 100% }
-      body { margin: 0 }
+      html,
+      body {
+        height: 100%;
+      }
+      body {
+        margin: 0;
+      }
 
       #webchat {
         height: 100%;
@@ -21,7 +26,7 @@
   <body>
     <div id="webchat" role="main"></div>
     <script>
-      (async function () {
+      (async function() {
         // In this demo, we are using Direct Line token from MockBot.
         // Your client code must provide either a secret or a token to talk to your bot.
         // Tokens are more secure. To learn about the differences between secrets and tokens
@@ -30,9 +35,12 @@
         const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
         const { token } = await res.json();
 
-        window.WebChat.renderWebChat({
-          directLine: window.WebChat.createDirectLine({ token })
-        }, document.getElementById('webchat'));
+        window.WebChat.renderWebChat(
+          {
+            directLine: window.WebChat.createDirectLine({ token })
+          },
+          document.getElementById('webchat')
+        );
 
         document.querySelector('#webchat > *').focus();
       })().catch(err => console.error(err));

@@ -2,7 +2,7 @@
 <html lang="en-US">
   <head>
     <title>Web Chat: Minimal bundle</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <!--
       We are using a "minimal" build, which does not contain:
       - Adaptive Cards
@@ -19,8 +19,13 @@
     -->
     <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat-minimal.js"></script>
     <style>
-      html, body { height: 100% }
-      body { margin: 0 }
+      html,
+      body {
+        height: 100%;
+      }
+      body {
+        margin: 0;
+      }
 
       #webchat {
         height: 100%;
@@ -31,7 +36,7 @@
   <body>
     <div id="webchat" role="main"></div>
     <script>
-      (async function () {
+      (async function() {
         // In this demo, we are using Direct Line token from MockBot.
         // Your client code must provide either a secret or a token to talk to your bot.
         // Tokens are more secure. To learn about the differences between secrets and tokens
@@ -40,9 +45,12 @@
         const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
         const { token } = await res.json();
 
-        window.WebChat.renderWebChat({
-          directLine: window.WebChat.createDirectLine({ token })
-        }, document.getElementById('webchat'));
+        window.WebChat.renderWebChat(
+          {
+            directLine: window.WebChat.createDirectLine({ token })
+          },
+          document.getElementById('webchat')
+        );
 
         document.querySelector('#webchat > *').focus();
       })().catch(err => console.error(err));

@@ -2,7 +2,7 @@
 <html lang="en-US">
   <head>
     <title>Web Chat: Minimal bundle with Markdown</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <!--
       We are using a "core" build, which does not contains:
       - Adaptive Cards
@@ -19,8 +19,13 @@
     <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat-minimal.js"></script>
     <script src="https://unpkg.com/markdown-it@8.4.2/dist/markdown-it.min.js"></script>
     <style>
-      html, body { height: 100% }
-      body { margin: 0 }
+      html,
+      body {
+        height: 100%;
+      }
+      body {
+        margin: 0;
+      }
 
       #webchat {
         height: 100%;
@@ -31,7 +36,7 @@
   <body>
     <div id="webchat" role="main"></div>
     <script>
-      (async function () {
+      (async function() {
         // In this demo, we are using Direct Line token from MockBot.
         // Your client code must provide either a secret or a token to talk to your bot.
         // Tokens are more secure. To learn about the differences between secrets and tokens
@@ -41,10 +46,13 @@
         const { token } = await res.json();
         const markdownIt = window.markdownit();
 
-        window.WebChat.renderWebChat({
-          directLine: window.WebChat.createDirectLine({ token }),
-          renderMarkdown: markdownIt.render.bind(markdownIt)
-        }, document.getElementById('webchat'));
+        window.WebChat.renderWebChat(
+          {
+            directLine: window.WebChat.createDirectLine({ token }),
+            renderMarkdown: markdownIt.render.bind(markdownIt)
+          },
+          document.getElementById('webchat')
+        );
 
         document.querySelector('#webchat > *').focus();
       })().catch(err => console.error(err));