Merge branch 'dev' into 'master'

Dev

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

Makefile

@@ -11,7 +11,6 @@ MSGID_BUGS_ADDRESS="tech.support@turris.cz"
 
 DEV_PYTHON=python3
 VENV_NAME?=venv
-JS_DIR=js
 VENV_BIN=$(shell pwd)/$(VENV_NAME)/bin
 
 .PHONY: all

jest.config.js

@@ -19,7 +19,6 @@ module.exports = {
     collectCoverageFrom: ["src/**/*.{js,jsx}"],
     coverageDirectory: "coverage",
     testPathIgnorePatterns: ["/node_modules/", "/__fixtures__/", "/dist/"],
-    testEnvironment: "jsdom",
     verbose: false,
     setupFilesAfterEnv: [
         "@testing-library/react/cleanup-after-each",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "foris",
-    "version": "6.0.0",
+    "version": "5.6.1",
     "description": "Foris JS library is a set of components and utils for reForis application and plugins.",
     "author": "CZ.NIC, z.s.p.o.",
     "repository": {
@@ -14,50 +14,49 @@
     "license": "GPL-3.0",
     "main": "./src/index.js",
     "dependencies": {
-        "axios": "^1.7.2",
+        "axios": "^0.21.1",
-        "immutability-helper": "^3.1.1",
+        "immutability-helper": "3.0.1",
-        "moment": "^2.30.1",
+        "moment": "^2.24.0",
-        "qrcode.react": "^3.1.0",
+        "qrcode.react": "^1.0.1",
-        "react-datetime": "^3.2.0",
+        "react-datetime": "^3.1.1",
-        "react-uid": "^2.3.3"
+        "react-uid": "^2.2.0"
     },
     "peerDependencies": {
-        "bootstrap": "^5.3.3",
+        "bootstrap": "^4.6.2",
         "prop-types": "15.8.1",
         "react": "16.9.0",
         "react-dom": "16.9.0",
         "react-router-dom": "^5.1.2"
     },
     "devDependencies": {
-        "@babel/cli": "^7.24.7",
+        "@babel/cli": "^7.12.10",
-        "@babel/core": "^7.24.7",
+        "@babel/core": "^7.9.0",
-        "@babel/plugin-transform-runtime": "^7.24.7",
+        "@babel/plugin-transform-runtime": "^7.9.0",
-        "@babel/preset-env": "^7.24.7",
+        "@babel/preset-env": "^7.9.0",
-        "@babel/preset-react": "^7.24.7",
+        "@babel/preset-react": "^7.9.4",
-        "@fortawesome/fontawesome-free": "^6.5.2",
+        "@fortawesome/fontawesome-free": "^5.13.0",
         "@testing-library/react": "^8.0.9",
         "babel-loader": "^8.1.0",
         "babel-polyfill": "^6.26.0",
-        "bootstrap": "^5.3.3",
+        "bootstrap": "^4.6.2",
         "css-loader": "^5.2.4",
-        "eslint": "^8.57.0",
+        "eslint": "^6.8.0",
-        "eslint-config-prettier": "^9.1.0",
+        "eslint-config-prettier": "^6.11.0",
-        "eslint-config-reforis": "^2.1.1",
+        "eslint-config-reforis": "^1.0.0",
-        "eslint-plugin-prettier": "^5.1.3",
+        "eslint-plugin-prettier": "^3.1.4",
         "file-loader": "^6.0.0",
-        "jest": "^29.7.0",
+        "jest": "^25.2.0",
-        "jest-environment-jsdom": "^29.7.0",
+        "jest-mock-axios": "^3.2.0",
-        "jest-mock-axios": "^4.7.3",
+        "moment-timezone": "^0.5.34",
-        "moment-timezone": "^0.5.45",
+        "prettier": "2.0.5",
-        "prettier": "^3.3.1",
         "prop-types": "15.8.1",
         "react": "16.9.0",
         "react-dom": "16.9.0",
         "react-router-dom": "^5.1.2",
-        "react-styleguidist": "^12.0.1",
+        "react-styleguidist": "^11.2.0",
-        "snapshot-diff": "^0.10.0",
+        "snapshot-diff": "^0.7.0",
         "style-loader": "^1.2.1",
-        "webpack": "^5.91.0"
+        "webpack": "^5.68.0"
     },
     "scripts": {
         "lint": "eslint src",

src/api/hooks.js

@@ -111,7 +111,9 @@ const useAPIPatch = createAPIHook("PATCH");
 const useAPIPut = createAPIHook("PUT");
 const useAPIDelete = createAPIHook("DELETE");
 
-function useAPIPolling(endpoint, until, delay = 1000) {
+export { useAPIGet, useAPIPost, useAPIPatch, useAPIPut, useAPIDelete };
+
+export function useAPIPolling(endpoint, delay = 1000, until) {
     // delay ms
     const [state, setState] = useState({ state: API_STATE.INIT });
     const [getResponse, get] = useAPIGet(endpoint);
@@ -131,12 +133,3 @@ function useAPIPolling(endpoint, until, delay = 1000) {
 
     return [state];
 }
-
-export {
-    useAPIGet,
-    useAPIPost,
-    useAPIPatch,
-    useAPIPut,
-    useAPIDelete,
-    useAPIPolling,
-};

src/bootstrap/Alert.js

@@ -6,7 +6,6 @@
  */
 
 import React from "react";
-
 import PropTypes from "prop-types";
 
 export const ALERT_TYPES = Object.freeze({
@@ -39,17 +38,16 @@ Alert.defaultProps = {
 export function Alert({ type, onDismiss, children }) {
     return (
         <div
-            className={`alert alert-${type} ${
+            className={`alert ${
                 onDismiss ? "alert-dismissible" : ""
-            }`.trim()}
+            } alert-${type}`}
         >
-            {onDismiss && (
+            {onDismiss ? (
-                <button
+                <button type="button" className="close" onClick={onDismiss}>
-                    type="button"
+                    &times;
-                    className="btn-close"
+                </button>
-                    onClick={onDismiss}
+            ) : (
-                    aria-label={_("Close")}
+                false
-                />
             )}
             {children}
         </div>

src/bootstrap/Button.js

@@ -6,7 +6,6 @@
  */
 
 import React from "react";
-
 import PropTypes from "prop-types";
 
 Button.propTypes = {
@@ -34,7 +33,7 @@ export function Button({
 }) {
     let buttonClass = className ? `btn ${className}` : "btn btn-primary";
     if (forisFormSize) {
-        buttonClass = `${buttonClass} col-12 col-md-3 col-lg-2`;
+        buttonClass = `${buttonClass} col-sm-12 col-md-3 col-lg-2`;
     }
 
     return (
@@ -45,7 +44,7 @@ export function Button({
         >
             {loading && (
                 <span
-                    className="spinner-border spinner-border-sm me-1"
+                    className="spinner-border spinner-border-sm mr-1"
                     role="status"
                     aria-hidden="true"
                 />

src/bootstrap/CheckBox.js

@@ -6,7 +6,6 @@
  */
 
 import React from "react";
-
 import PropTypes from "prop-types";
 import { useUID } from "react-uid";
 
@@ -25,24 +24,25 @@ CheckBox.defaultProps = {
 
 export function CheckBox({ label, helpText, disabled, ...props }) {
     const uid = useUID();
-
     return (
-        <div className="mb-3 form-check">
+        <div className="form-group">
-            <input
+            <div className="custom-control custom-checkbox ">
-                className="form-check-input"
+                <input
-                type="checkbox"
+                    className="custom-control-input"
-                id={uid}
+                    type="checkbox"
-                disabled={disabled}
+                    id={uid}
-                {...props}
+                    disabled={disabled}
-            />
+                    {...props}
-            <label className="form-check-label" htmlFor={uid}>
+                />
-                {label}
+                <label className="custom-control-label" htmlFor={uid}>
-            </label>
+                    {label}
-            {helpText && (
+                    {helpText && (
-                <div className="form-text">
+                        <small className="form-text text-muted">
-                    <small>{helpText}</small>
+                            {helpText}
-                </div>
+                        </small>
-            )}
+                    )}
+                </label>
+            </div>
         </div>
     );
 }

src/bootstrap/CopyInput.js

@@ -6,9 +6,7 @@
  */
 
 import React, { useState, useRef } from "react";
-
 import PropTypes from "prop-types";
-
 import { Input } from "./Input";
 
 CopyInput.propTypes = {

src/bootstrap/DataTimeInput.js

@@ -6,10 +6,9 @@
  */
 
 import React from "react";
-
-import moment from "moment/moment";
 import PropTypes from "prop-types";
 import Datetime from "react-datetime";
+import moment from "moment/moment";
 import "react-datetime/css/react-datetime.css";
 import "./DataTimeInput.css";
 
@@ -47,13 +46,13 @@ export function DataTimeInput({
     children,
     ...props
 }) {
-    const renderInput = (datetimeProps) => {
+    function renderInput(datetimeProps) {
         return (
             <Input {...props} {...datetimeProps}>
                 {children}
             </Input>
         );
-    };
+    }
 
     return (
         <Datetime

src/bootstrap/DownloadButton.js

@@ -6,7 +6,6 @@
  */
 
 import React from "react";
-
 import PropTypes from "prop-types";
 
 DownloadButton.propTypes = {

src/bootstrap/EmailInput.js

@@ -6,14 +6,11 @@
  */
 
 import React from "react";
-
 import PropTypes from "prop-types";
 
 import { Input } from "./Input";
 
-export function EmailInput({ ...props }) {
+export const EmailInput = ({ ...props }) => <Input type="email" {...props} />;
-    return <Input type="email" {...props} />;
-}
 
 EmailInput.propTypes = {
     /** Field label. */

src/bootstrap/FileInput.js

@@ -8,7 +8,6 @@
 import React from "react";
 
 import PropTypes from "prop-types";
-
 import { Input } from "./Input";
 
 FileInput.propTypes = {

src/bootstrap/Input.js

@@ -6,12 +6,11 @@
  */
 
 import React, { forwardRef } from "react";
-
-import PropTypes from "prop-types";
 import { useUID } from "react-uid";
+import PropTypes from "prop-types";
 
 /** Base bootstrap input component. */
-const Input = forwardRef(
+export const Input = forwardRef(
     (
         {
             type,
@@ -28,21 +27,18 @@ const Input = forwardRef(
     ) => {
         const uid = useUID();
 
-        const inputClassName = `${className || ""} ${
+        const inputClassName = `form-control ${className || ""} ${
             error ? "is-invalid" : ""
         }`.trim();
 
         return (
-            <div className="mb-3">
+            <div className="form-group">
-                <label
+                <label className={labelClassName} htmlFor={uid}>
-                    className={`form-label ${labelClassName || ""}`.trim()}
-                    htmlFor={uid}
-                >
                     {label}
                 </label>
                 <div className={`input-group ${groupClassName || ""}`.trim()}>
                     <input
-                        className={`form-control ${inputClassName}`.trim()}
+                        className={inputClassName}
                         type={type}
                         id={uid}
                         ref={ref}
@@ -50,12 +46,10 @@ const Input = forwardRef(
                     />
                     {children}
                 </div>
-                {error && <div className="invalid-feedback">{error}</div>}
+                {error ? <div className="invalid-feedback">{error}</div> : null}
-                {helpText && (
+                {helpText ? (
-                    <div className="form-text">
+                    <small className="form-text text-muted">{helpText}</small>
-                        <small>{helpText}</small>
+                ) : null}
-                    </div>
-                )}
             </div>
         );
     }
@@ -74,5 +68,3 @@ Input.propTypes = {
     labelClassName: PropTypes.string,
     groupClassName: PropTypes.string,
 };
-
-export { Input };

src/bootstrap/Modal.js

@@ -6,11 +6,10 @@
  */
 
 import React, { useRef, useEffect } from "react";
-
 import PropTypes from "prop-types";
 
-import { useClickOutside } from "../utils/hooks";
 import { Portal } from "../utils/Portal";
+import { useClickOutside } from "../utils/hooks";
 import "./Modal.css";
 
 Modal.propTypes = {
@@ -93,10 +92,11 @@ export function ModalHeader({ setShown, title }) {
             <h5 className="modal-title">{title}</h5>
             <button
                 type="button"
-                className="btn-close"
+                className="close"
                 onClick={() => setShown(false)}
-                aria-label={_("Close")}
+            >
-            />
+                <span aria-hidden="true">&times;</span>
+            </button>
         </div>
     );
 }

src/bootstrap/NumberInput.js

@@ -6,11 +6,10 @@
  */
 
 import React from "react";
-
 import PropTypes from "prop-types";
 
-import { Input } from "./Input";
 import { useConditionalTimeout } from "../utils/hooks";
+import { Input } from "./Input";
 import "./NumberInput.css";
 
 NumberInput.propTypes = {
@@ -24,7 +23,7 @@ NumberInput.propTypes = {
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     /** Function called when value changes. */
     onChange: PropTypes.func.isRequired,
-    /** Additional description displayed to the right of input value. */
+    /** Additional description dispaled to the right of input value. */
     inlineText: PropTypes.string,
 };
 
@@ -50,27 +49,27 @@ export function NumberInput({ onChange, inlineText, value, ...props }) {
 
     return (
         <Input type="number" onChange={onChange} value={value} {...props}>
-            {inlineText && (
+            <div className="input-group-append">
-                <span className="input-group-text">{inlineText}</span>
+                {inlineText && <p className="input-group-text">{inlineText}</p>}
-            )}
+                <button
-            <button
+                    type="button"
-                type="button"
+                    className="btn btn-outline-secondary"
-                className="btn btn-outline-secondary"
+                    onMouseDown={() => enableIncrease(true)}
-                onMouseDown={() => enableIncrease(true)}
+                    onMouseUp={() => enableIncrease(false)}
-                onMouseUp={() => enableIncrease(false)}
+                    aria-label="Increase"
-                aria-label="Increase"
+                >
-            >
+                    <i className="fas fa-plus" />
-                <i className="fas fa-plus" />
+                </button>
-            </button>
+                <button
-            <button
+                    type="button"
-                type="button"
+                    className="btn btn-outline-secondary"
-                className="btn btn-outline-secondary"
+                    onMouseDown={() => enableDecrease(true)}
-                onMouseDown={() => enableDecrease(true)}
+                    onMouseUp={() => enableDecrease(false)}
-                onMouseUp={() => enableDecrease(false)}
+                    aria-label="Decrease"
-                aria-label="Decrease"
+                >
-            >
+                    <i className="fas fa-minus" />
-                <i className="fas fa-minus" />
+                </button>
-            </button>
+            </div>
         </Input>
     );
 }

src/bootstrap/PasswordInput.js

@@ -6,7 +6,6 @@
  */
 
 import React, { useState } from "react";
-
 import PropTypes from "prop-types";
 
 import { Input } from "./Input";
@@ -35,20 +34,24 @@ export function PasswordInput({ withEye, newPass, ...props }) {
             autoComplete={newPass ? "new-password" : "current-password"}
             {...props}
         >
-            {withEye && (
+            {withEye ? (
-                <button
+                <div className="input-group-append">
-                    type="button"
+                    <button
-                    className="input-group-text"
+                        type="button"
-                    onClick={(e) => {
+                        className="input-group-text"
-                        e.preventDefault();
+                        onClick={(e) => {
-                        setHidden((shouldBeHidden) => !shouldBeHidden);
+                            e.preventDefault();
-                    }}
+                            setHidden((shouldBeHidden) => !shouldBeHidden);
-                >
+                        }}
-                    <i
+                    >
-                        className={`fa ${isHidden ? "fa-eye" : "fa-eye-slash"}`}
+                        <i
-                    />
+                            className={`fa ${
-                </button>
+                                isHidden ? "fa-eye" : "fa-eye-slash"
-            )}
+                            }`}
+                        />
+                    </button>
+                </div>
+            ) : null}
         </Input>
     );
 }

src/bootstrap/RadioSet.js

@@ -6,7 +6,6 @@
  */
 
 import React from "react";
-
 import PropTypes from "prop-types";
 import { useUID } from "react-uid";
 
@@ -18,7 +17,7 @@ RadioSet.propTypes = {
     /** Choices . */
     choices: PropTypes.arrayOf(
         PropTypes.shape({
-            /** Choice label . */
+            /** Choice lable . */
             label: PropTypes.oneOfType([
                 PropTypes.string,
                 PropTypes.element,
@@ -65,7 +64,7 @@ export function RadioSet({
     });
 
     return (
-        <div className="mb-3">
+        <div className="form-group">
             {label && (
                 <label htmlFor={uid} className="d-block">
                     {label}
@@ -73,9 +72,7 @@ export function RadioSet({
             )}
             {radios}
             {helpText && (
-                <div className="form-text">
+                <small className="form-text text-muted">{helpText}</small>
-                    <small>{helpText}</small>
-                </div>
             )}
         </div>
     );
@@ -95,25 +92,27 @@ Radio.propTypes = {
 
 export function Radio({ label, id, helpText, inline, ...props }) {
     return (
-        <div
+        <>
-            className={`mb-2 ${
+            <div
-                inline ? "form-check form-check-inline" : ""
+                className={`custom-control custom-radio ${
-            }`.trim()}
+                    inline ? "custom-control-inline" : ""
-        >
+                }`.trim()}
-            <input
+            >
-                id={id}
+                <input
-                className="form-check-input me-2"
+                    id={id}
-                type="radio"
+                    className="custom-control-input"
-                {...props}
+                    type="radio"
-            />
+                    {...props}
-            <label className="form-check-label" htmlFor={id}>
+                />
-                {label}
+                <label className="custom-control-label" htmlFor={id}>
+                    {label}
+                </label>
                 {helpText && (
-                    <div className="form-text">
+                    <small className="form-text text-muted mt-0 mb-3">
-                        <small>{helpText}</small>
+                        {helpText}
-                    </div>
+                    </small>
                 )}
-            </label>
+            </div>
-        </div>
+        </>
     );
 }

src/bootstrap/Select.js

@@ -6,7 +6,6 @@
  */
 
 import React from "react";
-
 import PropTypes from "prop-types";
 import { useUID } from "react-uid";
 
@@ -31,18 +30,14 @@ export function Select({ label, choices, helpText, ...props }) {
     ));
 
     return (
-        <div className="mb-3">
+        <div className="form-group">
-            <label className="form-label" htmlFor={uid}>
+            <label htmlFor={uid}>{label}</label>
-                {label}
+            <select className="custom-select" id={uid} {...props}>
-            </label>
-            <select className="form-select" id={uid} {...props}>
                 {options}
             </select>
-            {helpText && (
+            {helpText ? (
-                <div className="form-text">
+                <small className="form-text text-muted">{helpText}</small>
-                    <small>{helpText}</small>
+            ) : null}
-                </div>
-            )}
         </div>
     );
 }

src/bootstrap/Spinner.css

@@ -1,11 +1,3 @@
-.spinner-fs-wrapper {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 1101; /* increase z-index by 1 to ensure it's on top of spinner-fs-background */
-}
-
 .spinner-wrapper .spinner-border {
     width: 4rem;
     height: 4rem;
@@ -15,8 +7,10 @@
 .spinner-fs-background {
     background-color: rgba(2, 2, 2, 0.5);
     color: rgb(230, 230, 230);
-    width: 100vw;
+    position: fixed;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
+    top: 0;
 
     display: flex;
     align-items: center;

src/bootstrap/Spinner.js

@@ -6,7 +6,6 @@
  */
 
 import React from "react";
-
 import PropTypes from "prop-types";
 
 import "./Spinner.css";
@@ -17,7 +16,7 @@ Spinner.propTypes = {
         PropTypes.arrayOf(PropTypes.node),
         PropTypes.node,
     ]),
-    /** Render component with full-screen mode (using appropriate `.css` styles) */
+    /** Render component with full-screen mode (using apropriate `.css` styles) */
     fullScreen: PropTypes.bool.isRequired,
     className: PropTypes.string,
 };

src/bootstrap/Switch.js

@@ -6,7 +6,6 @@
  */
 
 import React from "react";
-
 import PropTypes from "prop-types";
 import { useUID } from "react-uid";
 
@@ -23,30 +22,28 @@ Switch.propTypes = {
 
 export function Switch({ label, helpText, switchHeading, ...props }) {
     const uid = useUID();
-
     return (
-        <div
+        <div className={`form-group ${switchHeading ? "switch" : ""}`.trim()}>
-            className={`form-check form-switch mb-3 ${
+            <div
-                switchHeading ? "d-flex align-items-center" : null
+                className={`custom-control custom-switch ${
-            }`.trim()}
+                    !helpText ? "custom-control-inline" : ""
-        >
+                } ${switchHeading ? "switch-heading" : ""}`.trim()}
-            <input
+            >
-                type="checkbox"
+                <input
-                className={`form-check-input ${
+                    type="checkbox"
-                    switchHeading ? "me-2" : ""
+                    className="custom-control-input"
-                }`.trim()}
+                    id={uid}
-                role="switch"
+                    {...props}
-                id={uid}
+                />
-                {...props}
+                <label className="custom-control-label" htmlFor={uid}>
-            />
+                    {label}
-            <label className="form-check-label" htmlFor={uid}>
+                </label>
-                {label}
+                {helpText && (
-            </label>
+                    <small className="form-text text-muted mt-0 mb-3">
-            {helpText && (
+                        {helpText}
-                <div className="form-text">
+                    </small>
-                    <small>{helpText}</small>
+                )}
-                </div>
+            </div>
-            )}
         </div>
     );
 }

src/bootstrap/TextInput.js

@@ -6,14 +6,11 @@
  */
 
 import React from "react";
-
 import PropTypes from "prop-types";
 
 import { Input } from "./Input";
 
-export function TextInput({ ...props }) {
+export const TextInput = ({ ...props }) => <Input type="text" {...props} />;
-    return <Input type="text" {...props} />;
-}
 
 TextInput.propTypes = {
     /** Field label. */

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

@@ -29,7 +29,7 @@ exports[`<Button /> Render button with spinner 1`] = `
 >
   <span
     aria-hidden="true"
-    class="spinner-border spinner-border-sm me-1"
+    class="spinner-border spinner-border-sm mr-1"
     role="status"
   />
   <span>

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

@@ -2,51 +2,55 @@
 
 exports[`<Checkbox/> Render checkbox 1`] = `
 <div
-  class="mb-3 form-check"
+  class="form-group"
 >
-  <input
-    checked=""
-    class="form-check-input"
-    id="1"
-    type="checkbox"
-  />
-  <label
-    class="form-check-label"
-    for="1"
-  >
-    Test label
-  </label>
   <div
-    class="form-text"
+    class="custom-control custom-checkbox "
   >
-    <small>
+    <input
-      Some help text
+      checked=""
-    </small>
+      class="custom-control-input"
+      id="1"
+      type="checkbox"
+    />
+    <label
+      class="custom-control-label"
+      for="1"
+    >
+      Test label
+      <small
+        class="form-text text-muted"
+      >
+        Some help text
+      </small>
+    </label>
   </div>
 </div>
 `;
 
 exports[`<Checkbox/> Render uncheked checkbox 1`] = `
 <div
-  class="mb-3 form-check"
+  class="form-group"
 >
-  <input
-    class="form-check-input"
-    id="1"
-    type="checkbox"
-  />
-  <label
-    class="form-check-label"
-    for="1"
-  >
-    Test label
-  </label>
   <div
-    class="form-text"
+    class="custom-control custom-checkbox "
   >
-    <small>
+    <input
-      Some help text
+      class="custom-control-input"
-    </small>
+      id="1"
+      type="checkbox"
+    />
+    <label
+      class="custom-control-label"
+      for="1"
+    >
+      Test label
+      <small
+        class="form-text text-muted"
+      >
+        Some help text
+      </small>
+    </label>
   </div>
 </div>
 `;

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

@@ -2,10 +2,9 @@
 
 exports[`<NumberInput/> Render number input 1`] = `
 <div
-  class="mb-3"
+  class="form-group"
 >
   <label
-    class="form-label"
     for="1"
   >
     Test label
@@ -19,31 +18,33 @@ exports[`<NumberInput/> Render number input 1`] = `
       type="number"
       value="1"
     />
-    <button
+    <div
-      aria-label="Increase"
+      class="input-group-append"
-      class="btn btn-outline-secondary"
-      type="button"
     >
-      <i
+      <button
-        class="fas fa-plus"
+        aria-label="Increase"
-      />
+        class="btn btn-outline-secondary"
-    </button>
+        type="button"
-    <button
+      >
-      aria-label="Decrease"
+        <i
-      class="btn btn-outline-secondary"
+          class="fas fa-plus"
-      type="button"
+        />
-    >
+      </button>
-      <i
+      <button
-        class="fas fa-minus"
+        aria-label="Decrease"
-      />
+        class="btn btn-outline-secondary"
-    </button>
+        type="button"
+      >
+        <i
+          class="fas fa-minus"
+        />
+      </button>
+    </div>
   </div>
-  <div
+  <small
-    class="form-text"
+    class="form-text text-muted"
   >
-    <small>
+    Some help text
-      Some help text
+  </small>
-    </small>
-  </div>
 </div>
 `;

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

@@ -2,10 +2,9 @@
 
 exports[`<PasswordInput/> Render password input 1`] = `
 <div
-  class="mb-3"
+  class="form-group"
 >
   <label
-    class="form-label"
     for="1"
   >
     Test label
@@ -21,12 +20,10 @@ exports[`<PasswordInput/> Render password input 1`] = `
       value="Some password"
     />
   </div>
-  <div
+  <small
-    class="form-text"
+    class="form-text text-muted"
   >
-    <small>
+    Some help text
-      Some help text
+  </small>
-    </small>
-  </div>
 </div>
 `;

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

@@ -2,7 +2,7 @@
 
 exports[`<RadioSet/> Render radio set 1`] = `
 <div
-  class="mb-3"
+  class="form-group"
 >
   <label
     class="d-block"
@@ -11,63 +11,61 @@ exports[`<RadioSet/> Render radio set 1`] = `
     Radios set label
   </label>
   <div
-    class="mb-2"
+    class="custom-control custom-radio"
   >
     <input
       checked=""
-      class="form-check-input me-2"
+      class="custom-control-input"
       id="test_name-0"
       name="test_name"
       type="radio"
       value="value"
     />
     <label
-      class="form-check-label"
+      class="custom-control-label"
       for="test_name-0"
     >
       label
     </label>
   </div>
   <div
-    class="mb-2"
+    class="custom-control custom-radio"
   >
     <input
-      class="form-check-input me-2"
+      class="custom-control-input"
       id="test_name-1"
       name="test_name"
       type="radio"
       value="another value"
     />
     <label
-      class="form-check-label"
+      class="custom-control-label"
       for="test_name-1"
     >
       another label
     </label>
   </div>
   <div
-    class="mb-2"
+    class="custom-control custom-radio"
   >
     <input
-      class="form-check-input me-2"
+      class="custom-control-input"
       id="test_name-2"
       name="test_name"
       type="radio"
       value="another on value"
     />
     <label
-      class="form-check-label"
+      class="custom-control-label"
       for="test_name-2"
     >
       another one  label
     </label>
   </div>
-  <div
+  <small
-    class="form-text"
+    class="form-text text-muted"
   >
-    <small>
+    Some help text
-      Some help text
+  </small>
-    </small>
-  </div>
 </div>
 `;

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

@@ -3,16 +3,15 @@
 exports[`<Select/> Test with snapshot. 1`] = `
 <div>
   <div
-    class="mb-3"
+    class="form-group"
   >
     <label
-      class="form-label"
       for="1"
     >
       Test label
     </label>
     <select
-      class="form-select"
+      class="custom-select"
       id="1"
     >
       <option
@@ -31,13 +30,11 @@ exports[`<Select/> Test with snapshot. 1`] = `
         three
       </option>
     </select>
-    <div
+    <small
-      class="form-text"
+      class="form-text text-muted"
     >
-      <small>
+      Help text
-        Help text
+    </small>
-      </small>
-    </div>
   </div>
 </div>
 `;

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

@@ -2,25 +2,26 @@
 
 exports[`<Switch/> Render switch 1`] = `
 <div
-  class="form-check form-switch mb-3 null"
+  class="form-group"
 >
-  <input
-    checked=""
-    class="form-check-input"
-    id="1"
-    role="switch"
-    type="checkbox"
-  />
-  <label
-    class="form-check-label"
-    for="1"
-  >
-    Test label
-  </label>
   <div
-    class="form-text"
+    class="custom-control custom-switch"
   >
-    <small>
+    <input
+      checked=""
+      class="custom-control-input"
+      id="1"
+      type="checkbox"
+    />
+    <label
+      class="custom-control-label"
+      for="1"
+    >
+      Test label
+    </label>
+    <small
+      class="form-text text-muted mt-0 mb-3"
+    >
       Some help text
     </small>
   </div>
@@ -29,24 +30,25 @@ exports[`<Switch/> Render switch 1`] = `
 
 exports[`<Switch/> Render uncheked switch 1`] = `
 <div
-  class="form-check form-switch mb-3 null"
+  class="form-group"
 >
-  <input
-    class="form-check-input"
-    id="1"
-    role="switch"
-    type="checkbox"
-  />
-  <label
-    class="form-check-label"
-    for="1"
-  >
-    Test label
-  </label>
   <div
-    class="form-text"
+    class="custom-control custom-switch"
   >
-    <small>
+    <input
+      class="custom-control-input"
+      id="1"
+      type="checkbox"
+    />
+    <label
+      class="custom-control-label"
+      for="1"
+    >
+      Test label
+    </label>
+    <small
+      class="form-text text-muted mt-0 mb-3"
+    >
       Some help text
     </small>
   </div>

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

@@ -2,10 +2,9 @@
 
 exports[`<TextInput/> Render text input 1`] = `
 <div
-  class="mb-3"
+  class="form-group"
 >
   <label
-    class="form-label"
     for="1"
   >
     Test label
@@ -20,12 +19,10 @@ exports[`<TextInput/> Render text input 1`] = `
       value="Some text"
     />
   </div>
-  <div
+  <small
-    class="form-text"
+    class="form-text text-muted"
   >
-    <small>
+    Some help text
-      Some help text
+  </small>
-    </small>
-  </div>
 </div>
 `;

src/common/RebootButton.js

@@ -6,15 +6,15 @@
  */
 
 import React, { useState, useEffect } from "react";
-
 import PropTypes from "prop-types";
 
 import { useAPIPost } from "../api/hooks";
 import { API_STATE } from "../api/utils";
+import { ForisURLs } from "../utils/forisUrls";
+
 import { Button } from "../bootstrap/Button";
 import { Modal, ModalHeader, ModalBody, ModalFooter } from "../bootstrap/Modal";
 import { useAlert } from "../context/alertContext/AlertContext";
-import { ForisURLs } from "../utils/forisUrls";
 
 export function RebootButton(props) {
     const [triggered, setTriggered] = useState(false);

src/common/WiFiSettings/ResetWiFiSettings.js

@@ -6,15 +6,14 @@
  */
 
 import React, { useEffect, useState } from "react";
-
 import PropTypes from "prop-types";
 
+import { Button } from "../../bootstrap/Button";
+import { useAlert } from "../../context/alertContext/AlertContext";
+import { ALERT_TYPES } from "../../bootstrap/Alert";
 import { useAPIPost } from "../../api/hooks";
 import { API_STATE } from "../../api/utils";
-import { ALERT_TYPES } from "../../bootstrap/Alert";
-import { Button } from "../../bootstrap/Button";
 import { formFieldsSize } from "../../bootstrap/constants";
-import { useAlert } from "../../context/alertContext/AlertContext";
 
 ResetWiFiSettings.propTypes = {
     ws: PropTypes.object.isRequired,
@@ -59,7 +58,7 @@ export function ResetWiFiSettings({ ws, endpoint }) {
                     "If a number of wireless cards doesn't match, you may try to reset the Wi-Fi settings. Note that this will remove the current Wi-Fi configuration and restore the default values."
                 )}
             </p>
-            <div className="text-end">
+            <div className="text-right">
                 <Button
                     className="btn-primary"
                     forisFormSize

src/common/WiFiSettings/WiFiForm.js

@@ -6,17 +6,15 @@
  */
 
 import React from "react";
-
 import PropTypes from "prop-types";
-
+import { Switch } from "../../bootstrap/Switch";
-import { HELP_TEXTS, HTMODES, HWMODES, ENCRYPTIONMODES } from "./constants";
-import WifiGuestForm from "./WiFiGuestForm";
-import WiFiQRCode from "./WiFiQRCode";
 import { PasswordInput } from "../../bootstrap/PasswordInput";
 import { RadioSet } from "../../bootstrap/RadioSet";
 import { Select } from "../../bootstrap/Select";
-import { Switch } from "../../bootstrap/Switch";
 import { TextInput } from "../../bootstrap/TextInput";
+import WiFiQRCode from "./WiFiQRCode";
+import WifiGuestForm from "./WiFiGuestForm";
+import { HELP_TEXTS, HTMODES, HWMODES, ENCRYPTIONMODES } from "./constants";
 
 WiFiForm.propTypes = {
     formData: PropTypes.shape({ devices: PropTypes.arrayOf(PropTypes.object) })
@@ -94,7 +92,7 @@ function DeviceForm({
     return (
         <>
             <Switch
-                label={<h2 className="mb-0">{_(`Wi-Fi ${deviceID + 1}`)}</h2>}
+                label={<h2>{_(`Wi-Fi ${deviceID + 1}`)}</h2>}
                 checked={formData.enabled}
                 onChange={setFormValue((value) => ({
                     devices: {
@@ -121,10 +119,12 @@ function DeviceForm({
                         }))}
                         {...props}
                     >
-                        <WiFiQRCode
+                        <div className="input-group-append">
-                            SSID={formData.SSID}
+                            <WiFiQRCode
-                            password={formData.password}
+                                SSID={formData.SSID}
-                        />
+                                password={formData.password}
+                            />
+                        </div>
                     </TextInput>
 
                     <PasswordInput
@@ -269,8 +269,8 @@ function getChannelChoices(device) {
             channelChoices[availableChannel.number.toString()] = `
                         ${availableChannel.number}
                         (${availableChannel.frequency} MHz ${
-                            availableChannel.radar ? " ,DFS" : ""
+                availableChannel.radar ? " ,DFS" : ""
-                        })
+            })
                     `;
         });
     });

src/common/WiFiSettings/WiFiGuestForm.js

@@ -6,14 +6,13 @@
  */
 
 import React from "react";
-
 import PropTypes from "prop-types";
 
-import { HELP_TEXTS } from "./constants";
-import WiFiQRCode from "./WiFiQRCode";
-import { PasswordInput } from "../../bootstrap/PasswordInput";
-import { Switch } from "../../bootstrap/Switch";
 import { TextInput } from "../../bootstrap/TextInput";
+import { Switch } from "../../bootstrap/Switch";
+import { PasswordInput } from "../../bootstrap/PasswordInput";
+import WiFiQRCode from "./WiFiQRCode";
+import { HELP_TEXTS } from "./constants";
 
 WifiGuestForm.propTypes = {
     formData: PropTypes.shape({

src/common/WiFiSettings/WiFiQRCode.js

@@ -6,11 +6,10 @@
  */
 
 import React, { useState } from "react";
-
-import PropTypes from "prop-types";
 import QRCode from "qrcode.react";
+import PropTypes from "prop-types";
 
-import { createAndDownloadPdf, toQRCodeContent } from "./qrCodeHelpers";
+import { ForisURLs } from "../../utils/forisUrls";
 import { Button } from "../../bootstrap/Button";
 import {
     Modal,
@@ -18,7 +17,7 @@ import {
     ModalFooter,
     ModalHeader,
 } from "../../bootstrap/Modal";
-import { ForisURLs } from "../../utils/forisUrls";
+import { createAndDownloadPdf, toQRCodeContent } from "./qrCodeHelpers";
 
 WiFiQRCode.propTypes = {
     SSID: PropTypes.string.isRequired,
@@ -88,7 +87,7 @@ function QRCodeModal({ shown, setShown, SSID, password }) {
                         createAndDownloadPdf(SSID, password);
                     }}
                 >
-                    <i className="fas fa-file-download me-2" />
+                    <i className="fas fa-arrow-down mr-2" />
                     {_("Download PDF")}
                 </Button>
             </ModalFooter>

src/common/WiFiSettings/WiFiSettings.js

@@ -6,12 +6,11 @@
  */
 
 import React from "react";
-
 import PropTypes from "prop-types";
 
-import { ResetWiFiSettings } from "./ResetWiFiSettings";
-import WiFiForm from "./WiFiForm";
 import { ForisForm } from "../../form/components/ForisForm";
+import WiFiForm from "./WiFiForm";
+import { ResetWiFiSettings } from "./ResetWiFiSettings";
 
 WiFiSettings.propTypes = {
     ws: PropTypes.object.isRequired,

src/common/__tests__/__snapshots__/RebootButton.test.js.snap

@@ -25,10 +25,15 @@ exports[`<RebootButton/> Render modal. 1`] = `
               Warning!
             </h5>
             <button
-              aria-label="Close"
+              class="close"
-              class="btn-close"
               type="button"
-            />
+            >
+              <span
+                aria-hidden="true"
+              >
+                ×
+              </span>
+            </button>
           </div>
           <div
             class="modal-body"

src/context/alertContext/AlertContext.js

@@ -6,7 +6,6 @@
  */
 
 import React, { useState, useContext, useCallback } from "react";
-
 import PropTypes from "prop-types";
 
 import { Alert, ALERT_TYPES } from "../../bootstrap/Alert";

src/context/alertContext/__tests__/AlertContext.test.js

@@ -48,7 +48,7 @@ describe("AlertContext", () => {
         // Alert is present
         expect(getByText(componentContainer, "Alert content")).toBeDefined();
 
-        fireEvent.click(componentContainer.querySelector(".btn-close"));
+        fireEvent.click(componentContainer.querySelector(".close"));
         // Alert is gone
         expect(queryByText(componentContainer, "Alert content")).toBeNull();
     });

src/context/alertContext/__tests__/__snapshots__/AlertContext.test.js.snap

@@ -6,13 +6,14 @@ exports[`AlertContext should render alert 1`] = `
     id="alert-container"
   >
     <div
-      class="alert alert-danger alert-dismissible"
+      class="alert alert-dismissible alert-danger"
     >
       <button
-        aria-label="Close"
+        class="close"
-        class="btn-close"
         type="button"
-      />
+      >
+        ×
+      </button>
       Alert content
     </div>
   </div>

src/context/customizationContext/CustomizationContext.js

@@ -6,13 +6,13 @@
  */
 
 import React, { useContext, useEffect } from "react";
-
 import PropTypes from "prop-types";
 
 import { useAPIGet } from "../../api/hooks";
-import { Spinner } from "../../bootstrap/Spinner";
 import { ForisURLs } from "../../utils/forisUrls";
 
+import { Spinner } from "../../bootstrap/Spinner";
+
 CustomizationContextProvider.propTypes = {
     children: PropTypes.oneOfType([
         PropTypes.arrayOf(PropTypes.node),

src/form/__tests__/__snapshots__/SubmitButton.test.js.snap

@@ -3,13 +3,13 @@
 exports[`<SubmitButton/> Render load 1`] = `
 <div>
   <button
-    class="btn btn-primary col-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center"
+    class="btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center"
     disabled=""
     type="submit"
   >
     <span
       aria-hidden="true"
-      class="spinner-border spinner-border-sm me-1"
+      class="spinner-border spinner-border-sm mr-1"
       role="status"
     />
     <span>
@@ -22,7 +22,7 @@ exports[`<SubmitButton/> Render load 1`] = `
 exports[`<SubmitButton/> Render ready 1`] = `
 <div>
   <button
-    class="btn btn-primary col-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center"
+    class="btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center"
     type="submit"
   >
     <span>
@@ -35,13 +35,13 @@ exports[`<SubmitButton/> Render ready 1`] = `
 exports[`<SubmitButton/> Render saving 1`] = `
 <div>
   <button
-    class="btn btn-primary col-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center"
+    class="btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center"
     disabled=""
     type="submit"
   >
     <span
       aria-hidden="true"
-      class="spinner-border spinner-border-sm me-1"
+      class="spinner-border spinner-border-sm mr-1"
       role="status"
     />
     <span>

src/form/components/ForisForm.js

@@ -6,19 +6,19 @@
  */
 
 import React, { useEffect } from "react";
-
 import PropTypes from "prop-types";
 import { Prompt } from "react-router-dom";
 
-import { STATES as SUBMIT_BUTTON_STATES, SubmitButton } from "./SubmitButton";
-import { useAPIPost } from "../../api/hooks";
-import { API_STATE } from "../../api/utils";
 import { ALERT_TYPES } from "../../bootstrap/Alert";
+import { API_STATE } from "../../api/utils";
 import { formFieldsSize } from "../../bootstrap/constants";
 import { Spinner } from "../../bootstrap/Spinner";
 import { useAlert } from "../../context/alertContext/AlertContext";
-import { ErrorMessage } from "../../utils/ErrorMessage";
+import { useAPIPost } from "../../api/hooks";
+
 import { useForisModule, useForm } from "../hooks";
+import { STATES as SUBMIT_BUTTON_STATES, SubmitButton } from "./SubmitButton";
+import { ErrorMessage } from "../../utils/ErrorMessage";
 
 ForisForm.propTypes = {
     /** Optional WebSocket object. See `scr/common/WebSockets.js`.
@@ -190,7 +190,7 @@ export function ForisForm({
             <Prompt message={getMessageOnLeavingPage} />
             <form onSubmit={onSubmit} ref={formReference}>
                 {childrenWithFormProps}
-                <div className="text-end">
+                <div className="text-right">
                     <SubmitButton
                         state={getSubmitButtonState()}
                         disabled={submitButtonIsDisabled}

src/form/components/SubmitButton.js

@@ -6,7 +6,6 @@
  */
 
 import React from "react";
-
 import PropTypes from "prop-types";
 
 import { Button } from "../../bootstrap/Button";

src/form/hooks.js

@@ -6,7 +6,6 @@
  */
 
 import { useCallback, useEffect, useReducer } from "react";
-
 import update from "immutability-helper";
 
 import { useAPIGet } from "../api/hooks";

src/utils/ErrorMessage.js

@@ -6,7 +6,6 @@
  */
 
 import React from "react";
-
 import PropTypes from "prop-types";
 
 ErrorMessage.propTypes = {

src/utils/conditionalHOCs.js

@@ -7,18 +7,17 @@
 
 import React from "react";
 
-import { ErrorMessage } from "./ErrorMessage";
-import { API_STATE } from "../api/utils";
 import { Spinner } from "../bootstrap/Spinner";
+import { API_STATE } from "../api/utils";
+import { ErrorMessage } from "./ErrorMessage";
 
 function withEither(conditionalFn, Either) {
-    return (Component) =>
+    return (Component) => (props) => {
-        function (props) {
+        if (conditionalFn(props)) {
-            if (conditionalFn(props)) {
+            return <Either {...props} />;
-                return <Either {...props} />;
+        }
-            }
+        return <Component {...props} />;
-            return <Component {...props} />;
+    };
-        };
 }
 
 // Loading

src/utils/hooks.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ * 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.

src/utils/validations.js

@@ -23,15 +23,12 @@ export const ERROR_MESSAGES = {
 const REs = {
     IPv4: /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
     IPv6: /^(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))$/,
-    IPv6Prefix:
+    IPv6Prefix: /^s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:)))(%.+)?s*(\/([0-9]|[1-9][0-9]|1[0-1][0-9]|12[0-8]))$/,
-        /^s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:)))(%.+)?s*(\/([0-9]|[1-9][0-9]|1[0-1][0-9]|12[0-8]))$/,
     domain: /^([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{2,}$/,
-    hostname:
+    hostname: /^[a-z\d]([a-z\d-]{0,61}[a-z\d])?(\.[a-z\d]([a-z\d-]{0,61}[a-z\d])?)*$/i,
-        /^[a-z\d]([a-z\d-]{0,61}[a-z\d])?(\.[a-z\d]([a-z\d-]{0,61}[a-z\d])?)*$/i,
     DUID: /^([0-9a-fA-F]{2}){4}([0-9a-fA-F]{2})*$/,
     MAC: /^([a-fA-F0-9]{2}:){5}[a-fA-F0-9]{2}$/,
-    MultipleEmails:
+    MultipleEmails: /^([a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+ *)( *, *[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+ *)*$/,
-        /^([a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+ *)( *, *[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+ *)*$/,
 };
 
 const createValidator = (fieldType) => (value) => {

styleguide.config.js

@@ -105,5 +105,8 @@ module.exports = {
                 },
             ],
         },
+        devServer: {
+            publicPath: "/",
+        },
     },
 };