block list in home. update docs

Author: eyak

circuito-schema

@@ -1,8 +1,11 @@
 import React from "react";
 import { Typeahead } from "react-bootstrap-typeahead";
 import { toast } from "react-toastify";
+import { ListGroup } from "react-bootstrap";
 import { update_a_block, update_a_coder } from "./controller.js";
 import { createNewCoder } from "./form/coderfield.js";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 function createNewBlockData(blockName) {
   var blockId = Math.floor(Math.random() * 5000 + 5000);
@@ -22,9 +25,32 @@ function createNewBlockData(blockName) {
   };
 }
 
+function MenuOption(props) {
+  return (
+    <div
+      style={{
+        height: 45,
+        verticalAlign: "middle"
+      }}
+      key={props.id}
+    >
+      <span style={{ width: 45, display: "inline-block" }}>
+        {props.img && (
+          <img
+            src={props.img.replace("/image/upload/", "/image/upload/h_42/")}
+          />
+        )}
+      </span>
+      {props.label}
+    </div>
+  );
+}
+
 export class BlocksList extends React.Component {
   constructor(props) {
     super(props);
+
+    this.state = { input: "" };
   }
 
   render() {
@@ -42,16 +68,34 @@ export class BlocksList extends React.Component {
         <Typeahead
           options={blocksIdsLabels}
           selectHintOnEnter={true}
-          allowNew={true}
-          newSelectionPrefix="Create new block:"
+          emptyLabel={false}
+          onInputChange={input => {
+            this.setState({ input });
+          }}
           onChange={selection => {
-            if (
-              selection[0] &&
-              typeof selection[0] === "object" &&
-              "customOption" in selection[0]
-            ) {
+            analytics.track("Block Opened", { name: selection[0].id });
+            this.props.onBlockSelected(selection[0].id);
+          }}
+          bsSize={"small"}
+          open
+          maxHeight="600px"
+          menuId="main-block-list"
+          placeholder="Choose a block to edit or enter name to create a new one..."
+          renderMenuItemChildren={(option, props, index) => (
+            <MenuOption {...option} />
+          )}
+        />
+
+        <ListGroup>
+          <ListGroup.Item
+            disabled={
+              this.state.input === "" ||
+              this.props.cachedData.blocks.includes(this.state.input)
+            }
+            action
+            onClick={event => {
               // clicked create new
-              var newBlockName = selection[0].label;
+              var newBlockName = this.state.input;
 
               analytics.track("Block Created", { name: newBlockName });
               analytics.track("Block Opened", { name: newBlockName });
@@ -84,39 +128,17 @@ export class BlocksList extends React.Component {
                     this.props.onBlockSelected(newBlockName);
                   }
                 });
-            } else {
-              analytics.track("Block Opened", { name: selection[0].id });
-              this.props.onBlockSelected(selection[0].id);
-            }
-          }}
-          bsSize={"small"}
-          open
-          maxHeight="600px"
-          menuId="main-block-list"
-          placeholder="Choose a block to edit or enter name to create a new one..."
-          renderMenuItemChildren={(option, props, index) => (
-            <React.Fragment key={index}>
-              <div
-                style={{
-                  height: 45,
-                  verticalAlign: "middle"
-                }}
-              >
-                <span style={{ width: 45, display: "inline-block" }}>
-                  {option.img && (
-                    <img
-                      src={option.img.replace(
-                        "/image/upload/",
-                        "/image/upload/h_42/"
-                      )}
-                    />
-                  )}
-                </span>
-                {option.label}
-              </div>
-            </React.Fragment>
-          )}
-        />
+            }}
+          >
+            <FontAwesomeIcon icon={faPlus} style={{ width: "45px" }} />
+            Create new block: &nbsp;
+            <span>
+              <mark class="rbt-highlight-text">
+                {this.state.input || "Enter name"}
+              </mark>
+            </span>
+          </ListGroup.Item>
+        </ListGroup>
       </React.Fragment>
     );
   }

public/bundle.js

@@ -22,12 +22,12 @@ export const docs = {
     img: "block_image.png"
   },
   "block.requiresSoldering": {
-    text: "Display an indicator in the app that parts in this block require soldering",
+    text:
+      "Display an indicator in the app that parts in this block require soldering",
     img: "block_soldering.png"
   },
   "block.description": {
-    text:
-      `A short paragraph in html describing the block, its features and uses. This description will appear in the block’s info pop up.
+    text: `A short paragraph in html describing the block, its features and uses. This description will appear in the block’s info pop up.
       always wrap you paragraphs in \`\`\`<p>text</p>\`\`\``,
     img: "block_desc.png"
   },
@@ -80,13 +80,11 @@ E.g:  when adding a controller similar to Arduino Uno, choose “Arduino Uno”
     text:
       "If blank, the system will try to optimally place the part on the circuit, based on the geometry of its SVG file. To override this preset, specify the rotation angle in degrees."
   },
-"circuit.part.includeInFirmware": {
+  "circuit.part.includeInFirmware": {
     text: `Adds the port definition in the code.`
   },
 
-
-
-"circuit.ports": {
+  "circuit.ports": {
     text: `Ports are the representation of the physical interface between circuits.
 A port can either require or provide attributes. These attributes are used by the system to connect between ports.`
   },
@@ -109,16 +107,17 @@ A port can either require or provide attributes. These attributes are used by th
   "circuit.port.requires.load": {
     text: `Specify the load that the port provides/requires (Only for significant load above 50mA).`
   },
-  "circuit.port.unique" : {
-    text: "Defines that no other ports will be routed to its provider. 	Connecting Arduino Uno with 2 flex sensors with unique ports, will determine that each unique port will be connected to a different ADC port on the Arduino."
+  "circuit.port.unique": {
+    text:
+      "Defines that no other ports will be routed to its provider. 	Connecting Arduino Uno with 2 flex sensors with unique ports, will determine that each unique port will be connected to a different ADC port on the Arduino."
   },
   "circuit.port.chainTo": {
     text: `Used for chainable blocks. (e.g. Led Matrix, Led Strips) When these are defined, the system will connect only the first instance of the chainable blocks to the controller and the rest will be chained to one another using this definition. 
 In this field, specify a port name to chain to, it comes together with the ‘Port is Chainable’ in the corresponding provides port.`,
-img: "block_chainBlocks.png"
+    img: "block_chainBlocks.png"
   },
 
-"circuit.port.provides": {
+  "circuit.port.provides": {
     text: `List all attributes it can provide.
     Note: 
 - For power (3.3-5v and GND) pins, leave the spec blank. 
@@ -160,38 +159,39 @@ Relative units. (0-inf)
 Support blocks with a lower cost will be tried first. For controllers, there may be more than one support block.`
   },
 
-
-
   "circuit.coders": {
     text: `The coder information is used to generate the test code provided in the app.
   A block can have multiple coders which will differ according to their supported controllers.
 
   The coder links between the block and the auto-generated code according to the selected controller. The coder’s information will be used to render the code for your controller. It’s also possible to add external code libraries to coders.`
   },
-"circuit.name":{
-  text:`Internal name of the code in the database. Must be unique.`
-},
-"circuit.supportedControllers":{
-  text:`List the controllers for which this coder is applicable.`
-},
-"circuit.files":{
-  text:`Upload external code libraries if necessary.`
-},
-"circuit.license":{
-  text:`It is important to also upload the license of the library added, and make sure that it is …`
-},
-"circuit.classname":{
-  text:`Specify the class name for this coder if necessary.`
-},
-"circuit.varname":{
-  text:`Specify the var name for this coder. Must be unique among all coders.`
-},
-"circuit.code":{
-  text:`The firmware.ino is generated by combining templates from all selected coders.
+  "coder.name": {
+    text: `Internal name of the code in the database. Must be unique.`
+  },
+  "coder.supportedControllers": {
+    text: `List the controllers for which this coder is applicable.`
+  },
+  "coder.files": {
+    text: `Upload external code libraries if necessary.`
+  },
+  "coder.headers": {
+    text: `Specify a list of header files to be included in the firmware.ino (could also be built-in Arduino IDE libraries such as SoftwareSerial.h).`
+  },
+  "coder.license": {
+    text: `It is important to upload the license of the library added, specify the license type here and make sure that it is under the public domain.`
+  },
+  "coder.classname": {
+    text: `Specify the class name for this coder if necessary.`
+  },
+  "coder.varname": {
+    text: `Specify the var name for this coder. Must be unique among all coders.`
+  },
+  "coder.code": {
+    text: `The firmware.ino is generated by combining templates from all selected coders.
 Fill in the following sections and preview the renderd code example to verify.
 `
-},
-"coder.code.global": {
+  },
+  "coder.code.global": {
     text: "Used for global variables. Rendered at the top of the file."
   },
   "coder.code.constructors": {
@@ -205,8 +205,7 @@ Fill in the following sections and preview the renderd code example to verify.
     text: `demonstrates basic use of the part. Should include comments.`
   },
 
-
-"circuit.parts": {
+  "circuit.parts": {
     text: `Parts are the building blocks of the circuits. They are physical components, represented by an illustrated SVG file, and refer to a specific electronic component model.
 A circuit consists of at least one part which interconnects with other parts and ports of the block. These connections are defined in the ‘wiring’ section.
 `
@@ -281,5 +280,4 @@ E.g. screws, nuts, bolts, heatsinks, breakouts or special connectors.
 Note: these parts aren’t represented in the schematics.
 `
   }
-
 };

src/client/blocks-list.js

@@ -6,6 +6,9 @@ export function supportedControllersUISchema(controllersList) {
       placeholder: "Select controllers",
       multiple: true,
       minLength: 0
+    },
+    "ui:options": {
+      forceLabelDisplay: true
     }
   };
 }

src/client/docs.js

@@ -27,6 +27,9 @@ export const TooltipDescriptionField = ({ id, description }) => {
       .use(html)
       .processSync(docText);
 
+    if (!(doc && doc.text))
+      console.warn("Missing doc key ", descText)
+
     return (
       <div className="tooltip-hint" id={id} data-tip={`${docHTML}${imgTag}`}>
         <a>

src/client/form/commonfields.js

@@ -15,7 +15,7 @@ export class Home extends React.Component {
 
   render() {
     return (
-      <Container>
+      <Container style={{ maxWidth: "unset" }}>
         <Row>
           <Col>
             <Card>
@@ -35,6 +35,7 @@ export class Home extends React.Component {
                 <h3>How this works</h3>
               </Card.Header>
               <Card.Body>
+                Welcome to the <a href="www.circuito.io" target="_blank">circuito.io</a> Component Editor!
                 <ol>
                   <li>
                     Choose a block to <b>edit</b> or create a new one
@@ -50,6 +51,13 @@ export class Home extends React.Component {
                     it
                   </li>
                 </ol>
+                Need help? Visitr our{" "}
+                <a
+                  href="https://talk.circuito.io/c/component-editor"
+                  target="_blank"
+                >
+                  support forum
+                </a>
               </Card.Body>
             </Card>
           </Col>