Merge pull request #3 from AirHelp/bootstrap4-rebased

Bootstrap 4 + React 16 compatibility
AirHelp · Jan 3, 2019 · 0961b81 · 0961b81
2 parents ae9e58d + 2c9475c
commit 0961b81
Show file tree

Hide file tree

Showing 31 changed files with 342 additions and 329 deletions.
diff --git a/devServer.js b/devServer.js
@@ -2,7 +2,7 @@ const path = require("path");
 const express = require("express");
 const webpack = require("webpack");
 
-const server = process.env.RJSF_DEV_SERVER || "localhost:8080";
+const server = process.env.RJSF_DEV_SERVER || "localhost:18080";
 const splitServer = server.split(":");
 const host = splitServer[0];
 const port = splitServer[1];

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "react-jsonschema-form",
-  "version": "1.0.6",
+  "name": "@airhelp/react-jsonschema-form",
+  "version": "1.0.4",
   "description": "A simple React component capable of building HTML forms out of a JSON schema.",
   "scripts": {
     "build:readme": "toctoc README.md -w",
@@ -39,7 +39,8 @@
     "node": ">=6"
   },
   "peerDependencies": {
-    "react": ">=15"
+    "react": ">=16",
+    "react-dom": ">=16"
   },
   "dependencies": {
     "ajv": "^5.2.3",
@@ -83,10 +84,9 @@
     "mini-css-extract-plugin": "^0.4.3",
     "mocha": "^5.2.0",
     "prettier": "^1.15.1",
-    "react": "^15.5.0",
-    "react-addons-test-utils": "^15.3.2",
+    "react": "^16.7.0",
     "react-codemirror2": "^4.1.0",
-    "react-dom": "^15.3.2",
+    "react-dom": "^16.7.0",
     "react-transform-catch-errors": "^1.0.0",
     "react-transform-hmr": "^1.0.1",
     "redbox-react": "^1.3.3",
@@ -104,7 +104,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/mozilla-services/react-jsonschema-form.git"
+    "url": "git+https://github.com/AirHelp/react-jsonschema-form.git"
   },
   "author": "Nicolas Perriault <nperriault@mozilla.com>",
   "keywords": [
@@ -113,5 +113,5 @@
     "json-schema"
   ],
   "license": "Apache-2.0",
-  "homepage": "https://github.com/mozilla-services/react-jsonschema-form#readme"
+  "homepage": "https://github.com/AirHelp/react-jsonschema-form"
 }
diff --git a/playground/app.js b/playground/app.js
@@ -211,8 +211,8 @@ class Editor extends Component {
     const icon = this.state.valid ? "ok" : "remove";
     const cls = this.state.valid ? "valid" : "invalid";
     return (
-      <div className="panel panel-default">
-        <div className="panel-heading">
+      <div className="card mb-3">
+        <div className="card-header">
           <span className={`${cls} glyphicon glyphicon-${icon}`} />
           {" " + title}
         </div>
@@ -250,11 +250,13 @@ class Selector extends Component {
       <ul className="nav nav-pills">
         {Object.keys(samples).map((label, i) => {
           return (
-            <li
-              key={i}
-              role="presentation"
-              className={this.state.current === label ? "active" : ""}>
-              <a href="#" onClick={this.onLabelClick(label)}>
+            <li key={i} role="presentation" className="nav-item">
+              <a
+                href="#"
+                onClick={this.onLabelClick(label)}
+                className={
+                  this.state.current === label ? "nav-link active" : "nav-link"
+                }>
                 {label}
               </a>
             </li>
@@ -415,7 +417,7 @@ class App extends Component {
     } = this.state;
 
     return (
-      <div className="container-fluid">
+      <div className="container-fluid row pl-4">
         <div className="page-header">
           <h1>react-jsonschema-form</h1>
           <div className="row">

diff --git a/playground/index.html b/playground/index.html
@@ -5,7 +5,9 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>react-jsonschema-form playground</title>
-  <link rel="stylesheet" id="theme" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+  <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+  <script src="//cdn.polyfill.io/v2/polyfill.min.js"></script>
 </head>
 <body>
   <div id="app"></div>

diff --git a/playground/samples/propertyDependencies.js b/playground/samples/propertyDependencies.js
@@ -1,5 +1,3 @@
-import React from "react";
-
 module.exports = {
   schema: {
     title: "Property dependencies",
@@ -56,12 +54,8 @@ module.exports = {
   uiSchema: {
     unidirectional: {
       credit_card: {
-        "ui:help": (
-          <p>
-            If you enter anything here then <code>billing_address</code> will
-            become required.
-          </p>
-        ),
+        "ui:help":
+          "If you enter anything here then billing_address will become required.",
       },
       billing_address: {
         "ui:help":
@@ -70,20 +64,12 @@ module.exports = {
     },
     bidirectional: {
       credit_card: {
-        "ui:help": (
-          <p>
-            "If you enter anything here then <code>billing_address</code> will
-            become required.
-          </p>
-        ),
+        "ui:help":
+          "If you enter anything here then billing_address will become required.",
       },
       billing_address: {
-        "ui:help": (
-          <p>
-            If you enter anything here then <code>credit_card</code> will become
-            required.
-          </p>
-        ),
+        "ui:help":
+          "If you enter anything here then credit_card will become required.",
       },
     },
   },

diff --git a/playground/samples/schemaDependencies.js b/playground/samples/schemaDependencies.js
@@ -1,5 +1,3 @@
-import React from "react";
-
 module.exports = {
   schema: {
     title: "Schema dependencies",
@@ -110,12 +108,8 @@ module.exports = {
   uiSchema: {
     simple: {
       credit_card: {
-        "ui:help": (
-          <p>
-            If you enter anything here then <code>billing_address</code> will be
-            dynamically added to the form.
-          </p>
-        ),
+        "ui:help":
+          "If you enter anything here then billing_address will be dynamically added to the form.",
       },
     },
     conditional: {

diff --git a/src/components/AddButton.js b/src/components/AddButton.js
@@ -3,12 +3,12 @@ import IconButton from "./IconButton";
 
 export default function AddButton({ className, onClick, disabled }) {
   return (
-    <div className="row">
-      <p className={`col-xs-3 col-xs-offset-9 text-right ${className}`}>
+    <div className="row no-gutters">
+      <p className={`col-3 offset-9 text-right ${className}`}>
         <IconButton
           type="info"
           icon="plus"
-          className="btn-add col-xs-12"
+          className="btn-add col-12"
           tabIndex="0"
           onClick={onClick}
           disabled={disabled}

diff --git a/src/components/ErrorList.js b/src/components/ErrorList.js
@@ -3,14 +3,14 @@ import React from "react";
 export default function ErrorList(props) {
   const { errors } = props;
   return (
-    <div className="panel panel-danger errors">
-      <div className="panel-heading">
-        <h3 className="panel-title">Errors</h3>
+    <div className="card bg-danger text-white errors mb-4">
+      <div className="card-header">
+        <h5 className="card-title m-0">Errors</h5>
       </div>
-      <ul className="list-group">
+      <ul className="list-group ">
         {errors.map((error, i) => {
           return (
-            <li key={i} className="list-group-item text-danger">
+            <li key={i} className="list-group-item bg-white text-danger">
               {error.stack}
             </li>
           );

diff --git a/src/components/IconButton.js b/src/components/IconButton.js
@@ -7,7 +7,7 @@ export default function IconButton(props) {
       type="button"
       className={`btn btn-${type} ${className}`}
       {...otherProps}>
-      <i className={`glyphicon glyphicon-${icon}`} />
+      <i className={`fas fa-${icon}`} />
     </button>
   );
 }
diff --git a/src/components/fields/ArrayField.js b/src/components/fields/ArrayField.js
@@ -39,32 +39,21 @@ function ArrayFieldDescription({ DescriptionField, idSchema, description }) {
 
 // Used in the two templates
 function DefaultArrayItem(props) {
-  const btnStyle = {
-    flex: 1,
-    paddingLeft: 6,
-    paddingRight: 6,
-    fontWeight: "bold",
-  };
   return (
-    <div key={props.index} className={props.className}>
-      <div className={props.hasToolbar ? "col-xs-9" : "col-xs-12"}>
+    <div key={props.index} className={`row no-gutters ${props.className}`}>
+      <div className={props.hasToolbar ? "col-9" : "col-12"}>
         {props.children}
       </div>
 
       {props.hasToolbar && (
-        <div className="col-xs-3 array-item-toolbox">
-          <div
-            className="btn-group"
-            style={{
-              display: "flex",
-              justifyContent: "space-around",
-            }}>
+        <div className="col-3 array-item-toolbox">
+          <div className="btn-group">
             {(props.hasMoveUp || props.hasMoveDown) && (
               <IconButton
                 icon="arrow-up"
                 className="array-item-move-up"
                 tabIndex="-1"
-                style={btnStyle}
+                type="secondary"
                 disabled={props.disabled || props.readonly || !props.hasMoveUp}
                 onClick={props.onReorderClick(props.index, props.index - 1)}
               />
@@ -75,7 +64,7 @@ function DefaultArrayItem(props) {
                 icon="arrow-down"
                 className="array-item-move-down"
                 tabIndex="-1"
-                style={btnStyle}
+                type="secondary"
                 disabled={
                   props.disabled || props.readonly || !props.hasMoveDown
                 }
@@ -86,10 +75,9 @@ function DefaultArrayItem(props) {
             {props.hasRemove && (
               <IconButton
                 type="danger"
-                icon="remove"
+                icon="times"
                 className="array-item-remove"
                 tabIndex="-1"
-                style={btnStyle}
                 disabled={props.disabled || props.readonly}
                 onClick={props.onDropIndexClick(props.index)}
               />
@@ -121,7 +109,7 @@ function DefaultFixedArrayFieldTemplate(props) {
       )}
 
       <div
-        className="row array-item-list"
+        className="array-item-list"
         key={`array-item-list-${props.idSchema.$id}`}>
         {props.items && props.items.map(DefaultArrayItem)}
       </div>
@@ -160,7 +148,7 @@ function DefaultNormalArrayFieldTemplate(props) {
       )}
 
       <div
-        className="row array-item-list"
+        className="array-item-list"
         key={`array-item-list-${props.idSchema.$id}`}>
         {props.items && props.items.map(p => DefaultArrayItem(p))}
       </div>

diff --git a/src/components/fields/DescriptionField.js b/src/components/fields/DescriptionField.js
@@ -4,22 +4,15 @@ import PropTypes from "prop-types";
 function DescriptionField(props) {
   const { id, description } = props;
   if (!description) {
-    // See #312: Ensure compatibility with old versions of React.
-    return <div />;
+    return null;
   }
-  if (typeof description === "string") {
-    return (
-      <p id={id} className="field-description">
+  return (
+    <div>
+      <label id={id} className="field-description">
         {description}
-      </p>
-    );
-  } else {
-    return (
-      <div id={id} className="field-description">
-        {description}
-      </div>
-    );
-  }
+      </label>
+    </div>
+  );
 }
 
 if (process.env.NODE_ENV !== "production") {

diff --git a/src/components/fields/SchemaField.js b/src/components/fields/SchemaField.js
@@ -51,8 +51,7 @@ function getFieldComponent(schema, uiSchema, idSchema, fields) {
 function Label(props) {
   const { label, required, id } = props;
   if (!label) {
-    // See #312: Ensure compatibility with old versions of React.
-    return <div />;
+    return null;
   }
   return (
     <label className="control-label" htmlFor={id}>
@@ -78,19 +77,15 @@ function LabelInput(props) {
 function Help(props) {
   const { help } = props;
   if (!help) {
-    // See #312: Ensure compatibility with old versions of React.
-    return <div />;
-  }
-  if (typeof help === "string") {
-    return <p className="help-block">{help}</p>;
+    return null;
   }
-  return <div className="help-block">{help}</div>;
+  return <small className="form-text text-muted help-block">{help}</small>;
 }
 
 function ErrorList(props) {
   const { errors = [] } = props;
   if (errors.length === 0) {
-    return <div />;
+    return null;
   }
   return (
     <div>