Make booleans appear as a dropdown

This makes styling booleans so much easier as they just inherit dropdown styles

Author: Dom Harrington

packages/api-explorer/api-explorer.css

@@ -130,36 +130,6 @@ fieldset fieldset .form-group label {
   margin-left: 15px;
 }
 
-/* Fix how booleans are displayed. */
-.checkbox {
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: flex-start;
-  align-items: center;
-  align-content: space-around;
-}
-
-.checkbox :nth-child(1) {
-  order: 2;
-}
-
-.checkbox :nth-child(2) {
-  order: 1;
-}
-
-.checkbox > .field-description {
-  margin-left: 1em;
-}
-
-.checkbox > label {
-  font-size: 14px !important;
-  font-weight: bold;
-}
-
-.checkbox input[type='checkbox'] {
-  margin-right: 1em;
-}
-
 /* Style select boxes. */
 
 .field .form-group select {

packages/api-explorer/src/Params.jsx

@@ -10,6 +10,7 @@ const DateTimeWidget = require('react-jsonschema-form/lib/components/widgets/Dat
 const createBaseInput = require('./form-components/BaseInput');
 const createSelectWidget = require('./form-components/SelectWidget');
 const createArrayField = require('./form-components/ArrayField');
+const createSchemaField = require('./form-components/SchemaField');
 const Oas = require('./lib/Oas');
 
 const { Operation } = Oas;
@@ -20,6 +21,7 @@ function Params({ oas, operation, formData, onChange, onSubmit }) {
   const BaseInput = createBaseInput(oas);
   const SelectWidget = createSelectWidget(oas);
   const ArrayField = createArrayField(oas);
+  const SchemaField = createSchemaField(oas);
 
   return (
     jsonSchema &&
@@ -56,6 +58,7 @@ function Params({ oas, operation, formData, onChange, onSubmit }) {
           fields={{
           //  DescriptionField,
             ArrayField,
+            SchemaField,
           }}
         >
           <button type="submit" style={{ display: 'none' }} />

packages/api-explorer/src/form-components/SchemaField.jsx

@@ -0,0 +1,22 @@
+const React = require('react');
+const extensions = require('@readme/oas-extensions');
+
+const SchemaField = require('react-jsonschema-form/lib/components/fields/SchemaField').default;
+
+function createSchemaField(oas) {
+  const explorerEnabled = oas[extensions.EXPLORER_ENABLED];
+
+  return function (props) {
+    // if (!explorerEnabled) {
+    //   props.uiSchema = Object.assign(props.uiSchema, { "ui:options": { addable: false }})
+    // };
+
+    if (props.schema.type === 'boolean') {
+      props.schema.enumNames = ['true', 'false']
+      return <SchemaField {...props} uiSchema={{ "ui:widget": "select" }} />
+    }
+    return <SchemaField {...props} />
+  }
+}
+
+module.exports = createSchemaField;