Client configuration

src/bootstrap/CheckBox.js

@@ -7,7 +7,7 @@
 
 import React from "react";
 import PropTypes from "prop-types";
-import { useUID } from "react-uid/dist/es5/index";
+import { useUID } from "react-uid";
 
 import { formFieldsSize } from "./constants";
 

src/bootstrap/FileInput.js

@@ -0,0 +1,34 @@
+/*
+ * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ *
+ * This is free software, licensed under the GNU General Public License v3.
+ * See /LICENSE for more information.
+ */
+
+import React from "react";
+
+import PropTypes from "prop-types";
+import { Input } from "./Input";
+
+FileInput.propTypes = {
+    /** Field label. */
+    label: PropTypes.string.isRequired,
+    /** Error message. */
+    error: PropTypes.string,
+    /** Help text message. */
+    helpText: PropTypes.string,
+    /** Email value. */
+    value: PropTypes.string,
+};
+
+export function FileInput({ ...props }) {
+    return (
+        <Input
+            type="file"
+            className="custom-file-input"
+            labelClassName="custom-file-label"
+            groupClassName="custom-file"
+            {...props}
+        />
+    );
+}

src/bootstrap/FileInput.md

@@ -0,0 +1,15 @@
+Bootstrap component for file input. Includes label and has predefined sizes and structure for using in foris forms. 
+
+All additional `props` are passed to the `<input type="file">` HTML component.
+
+```js
+import {useState} from 'react';
+const [files, setFiles] = useState([]);
+
+<FileInput
+    files={files}
+    label="Some file"
+    helpText="Will be uploaded"
+    onChange={event =>setFiles(event.target.files)}
+/>
+```

src/bootstrap/Input.js

@@ -6,7 +6,7 @@
  */
 
 import React from "react";
-import { useUID } from "react-uid/dist/es5/index";
+import { useUID } from "react-uid";
 import PropTypes from "prop-types";
 
 import { formFieldsSize } from "./constants";
@@ -21,31 +21,31 @@ Input.propTypes = {
         PropTypes.arrayOf(PropTypes.node),
         PropTypes.node,
     ]),
+    labelClassName: PropTypes.string,
+    groupClassName: PropTypes.string,
 };
 
 /** Base bootstrap input component. */
 export function Input({
-    type, label, helpText, error, className, children, ...props
+    type, label, helpText, error, className, children, labelClassName, groupClassName, ...props
 }) {
     const uid = useUID();
     const inputClassName = `form-control ${className || ""} ${(error ? "is-invalid" : "")}`.trim();
     return (
-        <div className={formFieldsSize}>
-            <div className="form-group">
-                <label htmlFor={uid}>{label}</label>
-                <div className="input-group">
-                    <input
-                        className={inputClassName}
-                        type={type}
-                        id={uid}
+        <div className={`form-group ${formFieldsSize}`}>
+            <label className={labelClassName} htmlFor={uid}>{label}</label>
+            <div className={`input-group ${groupClassName || ""}`.trim()}>
+                <input
+                    className={inputClassName}
+                    type={type}
+                    id={uid}
 
-                        {...props}
-                    />
-                    {children}
-                </div>
-                {error ? <div className="invalid-feedback">{error}</div> : null}
-                {helpText ? <small className="form-text text-muted">{helpText}</small> : null}
+                    {...props}
+                />
+                {children}
             </div>
+            {error ? <div className="invalid-feedback">{error}</div> : null}
+            {helpText ? <small className="form-text text-muted">{helpText}</small> : null}
         </div>
     );
 }

src/bootstrap/RadioSet.js

@@ -7,7 +7,7 @@
 
 import React from "react";
 import PropTypes from "prop-types";
-import { useUID } from "react-uid/dist/es5/index";
+import { useUID } from "react-uid";
 
 import { formFieldsSize } from "./constants";
 

src/bootstrap/Select.js

@@ -7,7 +7,7 @@
 
 import React from "react";
 import PropTypes from "prop-types";
-import { useUID } from "react-uid/dist/es5/index";
+import { useUID } from "react-uid";
 
 
 Select.propTypes = {

src/bootstrap/__tests__/__snapshots__/NumberInput.test.js.snap

@@ -2,53 +2,49 @@
 
 exports[`<NumberInput/> Render number input 1`] = `
 <div
-  class="col-sm-12 offset-lg-1 col-lg-10"
+  class="form-group col-sm-12 offset-lg-1 col-lg-10"
 >
-  <div
-    class="form-group"
+  <label
+    for="1"
   >
-    <label
-      for="1"
-    >
-      Test label
-    </label>
+    Test label
+  </label>
+  <div
+    class="input-group"
+  >
+    <input
+      class="form-control"
+      id="1"
+      type="number"
+      value="1"
+    />
     <div
-      class="input-group"
+      class="input-group-append"
     >
-      <input
-        class="form-control"
-        id="1"
-        type="number"
-        value="1"
-      />
-      <div
-        class="input-group-append"
+      <button
+        aria-label="Increase"
+        class="btn btn-outline-secondary"
+        type="button"
       >
-        <button
-          aria-label="Increase"
-          class="btn btn-outline-secondary"
-          type="button"
-        >
-          <i
-            class="fas fa-plus"
-          />
-        </button>
-        <button
-          aria-label="Decrease"
-          class="btn btn-outline-secondary"
-          type="button"
-        >
-          <i
-            class="fas fa-minus"
-          />
-        </button>
-      </div>
+        <i
+          class="fas fa-plus"
+        />
+      </button>
+      <button
+        aria-label="Decrease"
+        class="btn btn-outline-secondary"
+        type="button"
+      >
+        <i
+          class="fas fa-minus"
+        />
+      </button>
     </div>
-    <small
-      class="form-text text-muted"
-    >
-      Some help text
-    </small>
   </div>
+  <small
+    class="form-text text-muted"
+  >
+    Some help text
+  </small>
 </div>
 `;

src/bootstrap/__tests__/__snapshots__/PasswordInput.test.js.snap

@@ -2,32 +2,28 @@
 
 exports[`<PasswordInput/> Render password input 1`] = `
 <div
-  class="col-sm-12 offset-lg-1 col-lg-10"
+  class="form-group col-sm-12 offset-lg-1 col-lg-10"
 >
-  <div
-    class="form-group"
+  <label
+    for="1"
   >
-    <label
-      for="1"
-    >
-      Test label
-    </label>
-    <div
-      class="input-group"
-    >
-      <input
-        autocomplete="new-password"
-        class="form-control"
-        id="1"
-        type="password"
-        value="Some password"
-      />
-    </div>
-    <small
-      class="form-text text-muted"
-    >
-      Some help text
-    </small>
+    Test label
+  </label>
+  <div
+    class="input-group"
+  >
+    <input
+      autocomplete="new-password"
+      class="form-control"
+      id="1"
+      type="password"
+      value="Some password"
+    />
   </div>
+  <small
+    class="form-text text-muted"
+  >
+    Some help text
+  </small>
 </div>
 `;

src/bootstrap/__tests__/__snapshots__/TextInput.test.js.snap

@@ -2,31 +2,27 @@
 
 exports[`<TextInput/> Render text input 1`] = `
 <div
-  class="col-sm-12 offset-lg-1 col-lg-10"
+  class="form-group col-sm-12 offset-lg-1 col-lg-10"
 >
-  <div
-    class="form-group"
+  <label
+    for="1"
   >
-    <label
-      for="1"
-    >
-      Test label
-    </label>
-    <div
-      class="input-group"
-    >
-      <input
-        class="form-control"
-        id="1"
-        type="text"
-        value="Some text"
-      />
-    </div>
-    <small
-      class="form-text text-muted"
-    >
-      Some help text
-    </small>
+    Test label
+  </label>
+  <div
+    class="input-group"
+  >
+    <input
+      class="form-control"
+      id="1"
+      type="text"
+      value="Some text"
+    />
   </div>
+  <small
+    class="form-text text-muted"
+  >
+    Some help text
+  </small>
 </div>
 `;