add prettier and format code

Author: MichelML

CODE_OF_CONDUCT.md

@@ -20,28 +20,28 @@ If you see someone who is making an extra effort to ensure our community is welc
 
 The following behaviors are expected and requested of all community members:
 
- * Participate in an authentic and active way. In doing so, you contribute to the health and longevity of this community.
- * Exercise consideration and respect in your speech and actions.
- * Attempt collaboration before conflict.
- * Refrain from demeaning, discriminatory, or harassing behavior and speech.
- * Be mindful of your surroundings and of your fellow participants. Alert community leaders if you notice a dangerous situation, someone in distress, or violations of this Code of Conduct, even if they seem inconsequential.
- * Remember that community event venues may be shared with members of the public; please be respectful to all patrons of these locations.
+- Participate in an authentic and active way. In doing so, you contribute to the health and longevity of this community.
+- Exercise consideration and respect in your speech and actions.
+- Attempt collaboration before conflict.
+- Refrain from demeaning, discriminatory, or harassing behavior and speech.
+- Be mindful of your surroundings and of your fellow participants. Alert community leaders if you notice a dangerous situation, someone in distress, or violations of this Code of Conduct, even if they seem inconsequential.
+- Remember that community event venues may be shared with members of the public; please be respectful to all patrons of these locations.
 
 ## 4. Unacceptable Behavior
 
 The following behaviors are considered harassment and are unacceptable within our community:
 
- * Violence, threats of violence or violent language directed against another person.
- * Sexist, racist, homophobic, transphobic, ableist or otherwise discriminatory jokes and language.
- * Posting or displaying sexually explicit or violent material.
- * Posting or threatening to post other people's personally identifying information ("doxing").
- * Personal insults, particularly those related to gender, sexual orientation, race, religion, or disability.
- * Inappropriate photography or recording.
- * Inappropriate physical contact. You should have someone's consent before touching them.
- * Unwelcome sexual attention. This includes, sexualized comments or jokes; inappropriate touching, groping, and unwelcomed sexual advances.
- * Deliberate intimidation, stalking or following (online or in person).
- * Advocating for, or encouraging, any of the above behavior.
- * Sustained disruption of community events, including talks and presentations.
+- Violence, threats of violence or violent language directed against another person.
+- Sexist, racist, homophobic, transphobic, ableist or otherwise discriminatory jokes and language.
+- Posting or displaying sexually explicit or violent material.
+- Posting or threatening to post other people's personally identifying information ("doxing").
+- Personal insults, particularly those related to gender, sexual orientation, race, religion, or disability.
+- Inappropriate photography or recording.
+- Inappropriate physical contact. You should have someone's consent before touching them.
+- Unwelcome sexual attention. This includes, sexualized comments or jokes; inappropriate touching, groping, and unwelcomed sexual advances.
+- Deliberate intimidation, stalking or following (online or in person).
+- Advocating for, or encouraging, any of the above behavior.
+- Sustained disruption of community events, including talks and presentations.
 
 ## 5. Weapons Policy
 
@@ -59,15 +59,11 @@ If a community member engages in unacceptable behavior, the community organizers
 
 If you are subject to or witness unacceptable behavior, or have any other concerns, please notify a community organizer as soon as possible. michmoreau.l@gmail.com.
 
-
-
 Additionally, community organizers are available to help community members engage with local law enforcement or to otherwise help those experiencing unacceptable behavior feel safe. In the context of in-person events, organizers will also provide escorts as desired by the person experiencing distress.
 
 ## 8. Addressing Grievances
 
-If you feel you have been falsely or unfairly accused of violating this Code of Conduct, you should notify  with a concise description of your grievance. Your grievance will be handled in accordance with our existing governing policies. 
-
-
+If you feel you have been falsely or unfairly accused of violating this Code of Conduct, you should notify with a concise description of your grievance. Your grievance will be handled in accordance with our existing governing policies.
 
 ## 9. Scope
 
@@ -81,7 +77,7 @@ michmoreau.l@gmail.com
 
 ## 11. License and attribution
 
-The Citizen Code of Conduct is distributed by [Stumptown Syndicate](http://stumptownsyndicate.org) under a [Creative Commons Attribution-ShareAlike license](http://creativecommons.org/licenses/by-sa/3.0/). 
+The Citizen Code of Conduct is distributed by [Stumptown Syndicate](http://stumptownsyndicate.org) under a [Creative Commons Attribution-ShareAlike license](http://creativecommons.org/licenses/by-sa/3.0/).
 
 Portions of text derived from the [Django Code of Conduct](https://www.djangoproject.com/conduct/) and the [Geek Feminism Anti-Harassment Policy](http://geekfeminism.wikia.com/wiki/Conference_anti-harassment/Policy).
 

README.md

@@ -1,4 +1,5 @@
 New demos in progress at:
+
 - Vanilla JavaScript Example: https://michelml.github.io/rdkit-js/examples/vanilla-javascript/
 - React Example: https://michelml.github.io/rdkit-js/examples/react-example/build/
 - React Redux Example: https://michelml.github.io/rdkit-js/examples/react-redux-example/build/
@@ -27,23 +28,23 @@ New demos in progress at:
 
 ## Table of contents
 
-  - [Introduction](#introduction)
-  - [Install](#install)
-  - [Using the RDKit package assets](#using-the-rdkit-package-assets)
-    - [Option 1: Use the npm package distribution files](#option-1-use-the-npm-package-distribution-files)
-    - [Option 2: Use the remote distribution files from unpkg.com](#option-2-use-the-remote-distribution-files-from-unpkgcom)
-  - [Running RDKit in your JavaScript code](#running-rdkit-in-your-javascript-code)
-  - [Usage](#usage)
-  - [Live demos](#live-demos)
-  - [Contributing](#contributing)
-    - [Preparing a new release of the package](#preparing-a-new-release-of-the-package)
-    - [Releasing a new beta version of the package](#releasing-a-new-beta-version-of-the-package)
+- [Introduction](#introduction)
+- [Install](#install)
+- [Using the RDKit package assets](#using-the-rdkit-package-assets)
+  - [Option 1: Use the npm package distribution files](#option-1-use-the-npm-package-distribution-files)
+  - [Option 2: Use the remote distribution files from unpkg.com](#option-2-use-the-remote-distribution-files-from-unpkgcom)
+- [Running RDKit in your JavaScript code](#running-rdkit-in-your-javascript-code)
+- [Usage](#usage)
+- [Live demos](#live-demos)
+- [Contributing](#contributing)
+  - [Preparing a new release of the package](#preparing-a-new-release-of-the-package)
+  - [Releasing a new beta version of the package](#releasing-a-new-beta-version-of-the-package)
 
 ## Introduction
 
 **Note: This package should be considered experimental. The API is not yet stable and may change from release to release.**
 
-The idea of this package is to allow the [RDKit](https://github.com/rdkit/rdkit) to be used from JavaScript so that we can add chemical capabilities to web applications.  
+The idea of this package is to allow the [RDKit](https://github.com/rdkit/rdkit) to be used from JavaScript so that we can add chemical capabilities to web applications.
 
 Rather than attempting a comprehensive wrapper (like the old [RDKitJS](https://github.com/rdkit/RDKitjs)), this exposes a small set of key functionality. I think the general approach, including this actual library, can be useful for other wrapper projects in the future.
 
@@ -53,7 +54,7 @@ This initial set of functionality is not complete, but it is intended to already
 
 ```bash
 npm i @rdkit/rdkit
-```  
+```
 
 ## Using the RDKit package assets
 
@@ -77,28 +78,28 @@ To use RDKit, load the javascript file and instantiate the wasm module inside th
 
 ```html
 <head>
-    <!-- ...other files and HTML tags... -->
-    <!-- Load the RDKit JS file -->
-    <script src="https://unpkg.com/@rdkit/rdkit/Code/MinimalLib/dist/RDKit_minimal.js"></script>
-
-    <!-- Instantiate the WASM module. The inline script below could live elsewhere inside your application code. -->
-    <script>
-        window.initRDKitModule()
-            .then(function(RDKit) {
-                console.log("RDKit version: " + RDKit.version());
-                window.RDKit = RDKit;
-                /**
-                 * The RDKit module is now loaded.
-                 * You can use it anywhere.
-                 */
-            })
-            .catch(() => {
-                // handle loading errors here...
-            });
-    </script>
-    <!-- ...your application code goes here... -->
+  <!-- ...other files and HTML tags... -->
+  <!-- Load the RDKit JS file -->
+  <script src="https://unpkg.com/@rdkit/rdkit/Code/MinimalLib/dist/RDKit_minimal.js"></script>
+
+  <!-- Instantiate the WASM module. The inline script below could live elsewhere inside your application code. -->
+  <script>
+    window
+      .initRDKitModule()
+      .then(function (RDKit) {
+        console.log("RDKit version: " + RDKit.version());
+        window.RDKit = RDKit;
+        /**
+         * The RDKit module is now loaded.
+         * You can use it anywhere.
+         */
+      })
+      .catch(() => {
+        // handle loading errors here...
+      });
+  </script>
+  <!-- ...your application code goes here... -->
 </head>
-
 ```
 
 ## Usage
@@ -140,7 +141,7 @@ Once you have verified that the distribution files have been properly added in `
 
 ```bash
 npm publish --access public
-```  
+```
 
 #### Step 4: Set back the placeholder version in package.json
 

examples/react-example/README.md

@@ -1 +1 @@
-# WORK IN PROGRESS
+# WORK IN PROGRESS

examples/react-example/public/index.html

@@ -51,7 +51,7 @@
         border-radius: 2px;
         display: block;
       }
-      
+
       .back_to_top:hover {
         background: #e9ebec;
       }
@@ -73,13 +73,7 @@
             top: 0;
             box-shadow: 3px 0px 0 0 #f5f5f5;
           "
-          class="
-            menu
-            has-background-white-bis
-            is-narrow-mobile is-fullheight
-            section
-            is-hidden-mobile
-          "
+          class="menu has-background-white-bis is-narrow-mobile is-fullheight section is-hidden-mobile"
           id="side-navigation"
         ></aside>
         <div class="container column is-10">

examples/react-example/src/components/MoleculeStructure/MoleculeStructure.js

@@ -20,7 +20,7 @@ class MoleculeStructure extends Component {
     structure: PropTypes.string.isRequired,
     subStructure: PropTypes.string,
     extraDetails: PropTypes.object,
-    drawingDelay: PropTypes.number,
+    drawingDelay: PropTypes.number
   };
 
   static defaultProps = {
@@ -30,7 +30,7 @@ class MoleculeStructure extends Component {
     height: 200,
     svgMode: false,
     extraDetails: {},
-    drawingDelay: undefined,
+    drawingDelay: undefined
   };
 
   constructor(props) {
@@ -41,13 +41,13 @@ class MoleculeStructure extends Component {
       height: this.props.height,
       bondLineWidth: 1,
       addStereoAnnotation: true,
-      ...this.props.extraDetails,
+      ...this.props.extraDetails
     };
 
     this.state = {
       svg: undefined,
       rdKitLoaded: false,
-      rdKitError: false,
+      rdKitError: false
     };
   }
 
@@ -96,20 +96,20 @@ class MoleculeStructure extends Component {
         ? subStructHighlightDetails.reduce(
             (acc, { atoms, bonds }) => ({
               atoms: [...acc.atoms, ...atoms],
-              bonds: [...acc.bonds, ...bonds],
+              bonds: [...acc.bonds, ...bonds]
             }),
             { bonds: [], atoms: [] }
           )
         : subStructHighlightDetails;
       return JSON.stringify({
         ...this.MOL_DETAILS,
         ...(this.props.extraDetails || {}),
-        ...subStructHighlightDetailsMerged,
+        ...subStructHighlightDetailsMerged
       });
     } else {
       return JSON.stringify({
         ...this.MOL_DETAILS,
-        ...(this.props.extraDetails || {}),
+        ...(this.props.extraDetails || {})
       });
     }
   }

examples/react-example/src/components/NavBar/NavBar.js

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 
 export default class NavBar extends Component {
   state = {
-    burgerActive: false,
+    burgerActive: false
   };
   render() {
     const brugerActiveClass = this.state.burgerActive ? " is-active" : "";

examples/react-example/src/components/SideNav/SideNav.js

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 
 export default class SideNav extends Component {
   state = {
-    activeLink: "#component-introduction",
+    activeLink: "#component-introduction"
   };
 
   componentDidMount() {
@@ -18,52 +18,52 @@ export default class SideNav extends Component {
         children: [
           {
             id: "#component-introduction",
-            name: "Introduction",
+            name: "Introduction"
           },
           {
             id: "#component-example-list",
-            name: "Overview",
-          },
-        ],
+            name: "Overview"
+          }
+        ]
       },
       {
         name: "Components",
         children: [
           {
             id: "#component-example-moleculestructure",
-            name: "MoleculeStructure",
-          },
-        ],
+            name: "MoleculeStructure"
+          }
+        ]
       },
       {
         name: "Examples",
         children: [
           {
             id: "#component-example-svg",
-            name: "SVG Rendering",
+            name: "SVG Rendering"
           },
           {
             id: "#component-example-canvas",
-            name: "Canvas Rendering",
+            name: "Canvas Rendering"
           },
           {
             id: "#component-example-substruct",
-            name: "Substructure Highlighting",
+            name: "Substructure Highlighting"
           },
           {
             id: "#component-example-multi-substruct",
-            name: "Multi-Substructure Highlighting",
+            name: "Multi-Substructure Highlighting"
           },
           {
             id: "#component-example-substruct-search",
-            name: "Substructure Search",
+            name: "Substructure Search"
           },
           {
             id: "#component-example-drawing-options",
-            name: "Additional Options",
-          },
-        ],
-      },
+            name: "Additional Options"
+          }
+        ]
+      }
     ];
 
     const renderedSections = sections.map((section) => (

examples/react-example/src/examples/ExampleDrawingOptions.js

@@ -18,7 +18,7 @@ class ExampleDrawingOptions extends React.Component {
     highlightColour: "#fd5c63",
     legendColour: "#000000",
     symbolColour: "#000000",
-    backgroundColour: "#ffffff",
+    backgroundColour: "#ffffff"
   };
 
   state = { ...ExampleDrawingOptions.initialState };
@@ -280,7 +280,7 @@ class ExampleDrawingOptions extends React.Component {
               width: width + 12,
               height: height + 12,
               border: "1px solid rgba(0,0,0,.1)",
-              borderRadius: "2px",
+              borderRadius: "2px"
             }}
           >
             <MoleculeStructure
@@ -298,7 +298,7 @@ class ExampleDrawingOptions extends React.Component {
                 highlightColour,
                 legendColour,
                 backgroundColour,
-                symbolColour,
+                symbolColour
               }}
             />
           </div>

examples/react-example/src/examples/ExampleSubstructureSearch.js

@@ -7,7 +7,7 @@ class ExampleList extends React.Component {
   state = {
     matches: SMILES_LIST,
     searchValue: "",
-    searching: false,
+    searching: false
   };
 
   render() {