Merge branch 'dev' into 'master'

Release 1.2.0

See merge request turris/reforis/foris-js!28

Makefile

@@ -35,6 +35,8 @@ lint:
 
 test:
 	npm test
+test-js-update-snapshots:
+	npm test -- -u
 
 create-messages:
 	pybabel extract -F babel.cfg -o ./translations/forisjs.pot .

README.md

@@ -6,7 +6,7 @@
 
 Each commit to `dev` branch will result in publishing a new version of library
 tagged `beta`. Versions names are based on commit SHA, e.g. 
-`foris@0.1.0-d9073aa4.0`.
+`foris@0.1.0-beta.d9073aa4`.
 
 ### Preparing a release
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "foris",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "foris",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "Set of components and utils for Foris and its plugins.",
   "author": "CZ.NIC, z.s.p.o.",
   "repository": {
@@ -73,7 +73,6 @@
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage --colors",
-    "test:update-snapshots": "jest -u",
     "docs": "npx styleguidist build ",
     "docs:watch": "styleguidist server"
   },

scripts/publish.sh

@@ -6,11 +6,12 @@ then
     exit 1
 else
     # Need to replace "_" with "_" as GitLab CI won't accept secret vars with "-"
-    echo "//registry.npmjs.org/:_authToken=$(echo $NPM_TOKEN | tr _ -)" > .npmrc
+    echo "//registry.npmjs.org/:_authToken=$(echo "$NPM_TOKEN" | tr _ -)" > .npmrc
     echo "unsafe-perm = true" >> ~/.npmrc
     if test "$1" = "beta"
     then
-        npm version prerelease --preid=$CI_COMMIT_SHORT_SHA --git-tag-version false
+        BETA_VERSION=$(npx -c 'echo "$npm_package_version"')-beta.$CI_COMMIT_SHORT_SHA
+        npm version "$BETA_VERSION" --git-tag-version false
         npm publish --tag beta
     elif test "$1" = "latest"
     then

src/api/post.js

@@ -12,7 +12,7 @@ import {
     API_ACTIONS, TIMEOUT, HEADERS, APIReducer, getErrorMessage,
 } from "./utils";
 
-export function useAPIPost(url) {
+export function useAPIPost(url, contentType) {
     const [state, dispatch] = useReducer(APIReducer, {
         isSending: false,
         isError: false,
@@ -20,12 +20,17 @@ export function useAPIPost(url) {
         data: null,
     });
 
+    const headers = { ...HEADERS };
+    if (contentType) {
+        headers["Content-Type"] = contentType;
+    }
+
     const post = async (data) => {
         dispatch({ type: API_ACTIONS.INIT });
         try {
             const result = await axios.post(url, data, {
                 timeout: TIMEOUT,
-                headers: HEADERS,
+                headers,
             });
             dispatch({ type: API_ACTIONS.SUCCESS, payload: result.data });
         } catch (error) {

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";
 
@@ -32,8 +32,8 @@ export function CheckBox({
 }) {
     const uid = useUID();
     return (
-        <div className={useDefaultSize ? formFieldsSize : ""} style={{ marginBottom: "1rem" }}>
+        <div className={`form-group ${useDefaultSize ? formFieldsSize : ""}`.trim()}>
-            <div className="custom-control custom-checkbox" style={{ marginBottom: "0" }}>
+            <div className="custom-control custom-checkbox ">
                 <input
                     className="custom-control-input"
                     type="checkbox"
@@ -42,9 +42,9 @@ export function CheckBox({
 
                     {...props}
                 />
-                <label className="custom-control-label" htmlFor={uid} style={helpText ? { marginBottom: "0" } : null}>{label}</label>
+                <label className="custom-control-label" htmlFor={uid}>{label}</label>
+                {helpText && <small className="form-text text-muted">{helpText}</small>}
             </div>
-            {helpText ? <small className="form-text text-muted">{helpText}</small> : null}
         </div>
     );
 }

src/bootstrap/DownloadButton.js

@@ -0,0 +1,21 @@
+/*
+ * 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";
+
+DownloadButton.propTypes = {
+    href: PropTypes.string.isRequired,
+    children: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.node),
+        PropTypes.node,
+    ]),
+};
+
+export function DownloadButton({ href, children }) {
+    return <a href={href} className="btn btn-primary" download>{children}</a>;
+}

src/bootstrap/DownloadButton.md

@@ -0,0 +1,7 @@
+Hyperlink with apperance of a button.
+
+It has `download` attribute, which prevents closing WebSocket connection on Firefox. See [related issue](https://bugzilla.mozilla.org/show_bug.cgi?id=858538) for more details.
+
+```js
+<DownloadButton href="example.zip">Download</DownloadButton>
+```

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 ${formFieldsSize}`}>
-            <div className="form-group">
+            <label className={labelClassName} htmlFor={uid}>{label}</label>
-                <label htmlFor={uid}>{label}</label>
+            <div className={`input-group ${groupClassName || ""}`.trim()}>
-                <div className="input-group">
+                <input
-                    <input
+                    className={inputClassName}
-                        className={inputClassName}
+                    type={type}
-                        type={type}
+                    id={uid}
-                        id={uid}
 
-                        {...props}
+                    {...props}
-                    />
+                />
-                    {children}
+                {children}
-                </div>
-                {error ? <div className="invalid-feedback">{error}</div> : null}
-                {helpText ? <small className="form-text text-muted">{helpText}</small> : null}
             </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";
 
@@ -52,16 +52,10 @@ export function RadioSet({
     });
 
     return (
-        <div className={`form-group ${formFieldsSize}`} style={{ marginBottom: "1rem" }}>
+        <div className={`form-group ${formFieldsSize}`}>
-            {label
+            {label && <label htmlFor={uid} className="d-block">{label}</label>}
-                ? (
-                    <label className="col-12" htmlFor={uid} style={{ paddingLeft: "0" }}>
-                        {label}
-                    </label>
-                )
-                : null}
             {radios}
-            {helpText ? <small className="form-text text-muted">{helpText}</small> : null}
+            {helpText && <small className="form-text text-muted">{helpText}</small>}
         </div>
     );
 }
@@ -77,7 +71,7 @@ function Radio({
 }) {
     return (
         <>
-            <div className="custom-control custom-radio custom-control-inline">
+            <div className={`custom-control custom-radio ${!helpText ? "custom-control-inline" : ""}`.trim()}>
                 <input
                     id={id}
                     className="custom-control-input"
@@ -86,8 +80,8 @@ function Radio({
                     {...props}
                 />
                 <label className="custom-control-label" htmlFor={id}>{label}</label>
+                {helpText && <small className="form-text text-muted mt-0 mb-3">{helpText}</small>}
             </div>
-            {helpText ? <small className="form-text text-muted">{helpText}</small> : null}
         </>
     );
 }

src/bootstrap/RadioSet.md

@@ -2,6 +2,8 @@ Set of radio Bootstrap component input with label and predefined sizes and struc
 
 All additional `props` are passed to the `<input type="number">` HTML component.
 
+Unless `helpText` is set for one of the options they are displayed inline.
+
 ```js
 import {useState} from 'react';
 const CHOICES=[

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__/DownloadButton.test.js

@@ -0,0 +1,19 @@
+/*
+ * 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 { render } from "customTestRender";
+
+import { DownloadButton } from "../DownloadButton";
+
+describe("<DownloadButton />", () => {
+    it("should have download attribute", () => {
+        const { container } = render(<DownloadButton href="http://example.com">Test Button</DownloadButton>);
+        expect(container.firstChild.getAttribute("download")).not.toBeNull();
+    });
+});

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

@@ -2,12 +2,10 @@
 
 exports[`<Checkbox/> Render checkbox 1`] = `
 <div
-  class="col-sm-12 offset-lg-1 col-lg-10"
+  class="form-group col-sm-12 offset-lg-1 col-lg-10"
-  style="margin-bottom: 1rem;"
 >
   <div
-    class="custom-control custom-checkbox"
+    class="custom-control custom-checkbox "
-    style="margin-bottom: 0px;"
   >
     <input
       checked=""
@@ -18,27 +16,24 @@ exports[`<Checkbox/> Render checkbox 1`] = `
     <label
       class="custom-control-label"
       for="1"
-      style="margin-bottom: 0px;"
     >
       Test label
     </label>
+    <small
+      class="form-text text-muted"
+    >
+      Some help text
+    </small>
   </div>
-  <small
-    class="form-text text-muted"
-  >
-    Some help text
-  </small>
 </div>
 `;
 
 exports[`<Checkbox/> Render uncheked checkbox 1`] = `
 <div
-  class="col-sm-12 offset-lg-1 col-lg-10"
+  class="form-group col-sm-12 offset-lg-1 col-lg-10"
-  style="margin-bottom: 1rem;"
 >
   <div
-    class="custom-control custom-checkbox"
+    class="custom-control custom-checkbox "
-    style="margin-bottom: 0px;"
   >
     <input
       class="custom-control-input"
@@ -48,15 +43,14 @@ exports[`<Checkbox/> Render uncheked checkbox 1`] = `
     <label
       class="custom-control-label"
       for="1"
-      style="margin-bottom: 0px;"
     >
       Test label
     </label>
+    <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__/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
+  <label
-    class="form-group"
+    for="1"
   >
-    <label
+    Test label
-      for="1"
+  </label>
-    >
+  <div
-      Test label
+    class="input-group"
-    </label>
+  >
+    <input
+      class="form-control"
+      id="1"
+      type="number"
+      value="1"
+    />
     <div
-      class="input-group"
+      class="input-group-append"
     >
-      <input
+      <button
-        class="form-control"
+        aria-label="Increase"
-        id="1"
+        class="btn btn-outline-secondary"
-        type="number"
+        type="button"
-        value="1"
-      />
-      <div
-        class="input-group-append"
       >
-        <button
+        <i
-          aria-label="Increase"
+          class="fas fa-plus"
-          class="btn btn-outline-secondary"
+        />
-          type="button"
+      </button>
-        >
+      <button
-          <i
+        aria-label="Decrease"
-            class="fas fa-plus"
+        class="btn btn-outline-secondary"
-          />
+        type="button"
-        </button>
+      >
-        <button
+        <i
-          aria-label="Decrease"
+          class="fas fa-minus"
-          class="btn btn-outline-secondary"
+        />
-          type="button"
+      </button>
-        >
-          <i
-            class="fas fa-minus"
-          />
-        </button>
-      </div>
     </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
+  <label
-    class="form-group"
+    for="1"
   >
-    <label
+    Test label
-      for="1"
+  </label>
-    >
+  <div
-      Test label
+    class="input-group"
-    </label>
+  >
-    <div
+    <input
-      class="input-group"
+      autocomplete="new-password"
-    >
+      class="form-control"
-      <input
+      id="1"
-        autocomplete="new-password"
+      type="password"
-        class="form-control"
+      value="Some password"
-        id="1"
+    />
-        type="password"
-        value="Some password"
-      />
-    </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__/RadioSet.test.js.snap

@@ -3,12 +3,10 @@
 exports[`<RadioSet/> Render radio set 1`] = `
 <div
   class="form-group col-sm-12 offset-lg-1 col-lg-10"
-  style="margin-bottom: 1rem;"
 >
   <label
-    class="col-12"
+    class="d-block"
     for="1"
-    style="padding-left: 0px;"
   >
     Radios set label
   </label>

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
+  <label
-    class="form-group"
+    for="1"
   >
-    <label
+    Test label
-      for="1"
+  </label>
-    >
+  <div
-      Test label
+    class="input-group"
-    </label>
+  >
-    <div
+    <input
-      class="input-group"
+      class="form-control"
-    >
+      id="1"
-      <input
+      type="text"
-        class="form-control"
+      value="Some text"
-        id="1"
+    />
-        type="text"
-        value="Some text"
-      />
-    </div>
-    <small
-      class="form-text text-muted"
-    >
-      Some help text
-    </small>
   </div>
+  <small
+    class="form-text text-muted"
+  >
+    Some help text
+  </small>
 </div>
 `;

src/form/hooks.js

@@ -17,7 +17,7 @@ const FORM_ACTIONS = {
     resetData: 2,
 };
 
-export function useForm(validator, prepData) {
+export function useForm(validator, dataPreprocessor) {
     const [state, dispatch] = useReducer(formReducer, {
         data: null,
         initialData: null,
@@ -28,10 +28,10 @@ export function useForm(validator, prepData) {
         dispatch({
             type: FORM_ACTIONS.resetData,
             data,
-            prepData,
+            dataPreprocessor,
             validator,
         });
-    }, [prepData, validator]);
+    }, [dataPreprocessor, validator]);
 
     const onFormChangeHandler = useCallback((updateRule) => (event) => {
         dispatch({
@@ -41,6 +41,7 @@ export function useForm(validator, prepData) {
             validator,
         });
     }, [validator]);
+
     return [
         state,
         onFormChangeHandler,
@@ -61,12 +62,15 @@ function formReducer(state, action) {
         };
     }
     case FORM_ACTIONS.resetData: {
-        if (!action.data) return { ...state, initialData: state.data };
+        if (!action.data) {
-        const prepData = action.prepData ? action.prepData(action.data) : action.data;
+            return { ...state, initialData: state.data };
+        }
+
+        const data = action.dataPreprocessor ? action.dataPreprocessor(action.data) : action.data;
         return {
-            data: prepData,
+            data,
-            initialData: prepData,
+            initialData: data,
-            errors: action.data ? action.validator(prepData) : undefined,
+            errors: action.data ? action.validator(data) : undefined,
         };
     }
     default: {
@@ -82,6 +86,9 @@ function getChangedValue(target) {
     } else if (target.type === "number") {
         const parsedValue = parseInt(value);
         value = Number.isNaN(parsedValue) ? value : parsedValue;
+    } else if (target.type === "file") {
+        // Return first file (we don't need multiple yet)
+        [value] = target.files;
     }
     return value;
 }

src/index.js

@@ -15,15 +15,17 @@ export { useAPIPatch } from "api/patch";
 export { Alert } from "bootstrap/Alert";
 export { Button } from "bootstrap/Button";
 export { CheckBox } from "bootstrap/CheckBox";
-export { formFieldsSize } from "bootstrap/constants";
+export { DownloadButton } from "bootstrap/DownloadButton";
 export { DataTimeInput } from "bootstrap/DataTimeInput";
 export { EmailInput } from "bootstrap/EmailInput";
+export { FileInput } from "bootstrap/FileInput";
 export { Input } from "bootstrap/Input";
 export { NumberInput } from "bootstrap/NumberInput";
 export { PasswordInput } from "bootstrap/PasswordInput";
 export { RadioSet } from "bootstrap/RadioSet";
 export { Select } from "bootstrap/Select";
 export { TextInput } from "bootstrap/TextInput";
+export { formFieldsSize } from "bootstrap/constants";
 
 export {
     Spinner,