1
0
mirror of https://gitlab.nic.cz/turris/reforis/foris-js.git synced 2024-12-26 00:21:36 +01:00

Merge branch 'dev' into 'master'

Release 3.0.0

See merge request turris/reforis/foris-js!68
This commit is contained in:
Maciej Lenartowicz 2020-01-07 16:10:16 +01:00
commit 1e6278abdf
31 changed files with 989 additions and 657 deletions

View File

@ -35,11 +35,6 @@ $(VENV_NAME)/bin/activate:
install-js: package.json install-js: package.json
npm install --save-dev npm install --save-dev
watch-js:
npm run build:watch
build-js:
npm run build
collect-files: collect-files:
sh scripts/collect_files.sh sh scripts/collect_files.sh
pack: collect-files pack: collect-files

View File

@ -1 +0,0 @@
[javascript: src/**.js]

1436
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,6 +1,6 @@
{ {
"name": "foris", "name": "foris",
"version": "2.1.1", "version": "3.0.0",
"description": "Set of components and utils for Foris and its plugins.", "description": "Set of components and utils for Foris and its plugins.",
"author": "CZ.NIC, z.s.p.o.", "author": "CZ.NIC, z.s.p.o.",
"repository": { "repository": {
@ -12,7 +12,7 @@
"reforis" "reforis"
], ],
"license": "GPL-3.0", "license": "GPL-3.0",
"main": "index.js", "main": "./index.js",
"dependencies": { "dependencies": {
"axios": "^0.19.0", "axios": "^0.19.0",
"jest-transform-css": "^2.0.0", "jest-transform-css": "^2.0.0",
@ -44,7 +44,7 @@
"babel-plugin-react-transform": "^3.0.0", "babel-plugin-react-transform": "^3.0.0",
"babel-polyfill": "^6.26.0", "babel-polyfill": "^6.26.0",
"bootstrap": "^4.3.1", "bootstrap": "^4.3.1",
"copy-webpack-plugin": "^5.0.4", "copy-webpack-plugin": "^5.1.1",
"css-loader": "^3.2.0", "css-loader": "^3.2.0",
"eslint": "^6.1.0", "eslint": "^6.1.0",
"eslint-config-reforis": "^1.0.0", "eslint-config-reforis": "^1.0.0",
@ -56,14 +56,12 @@
"moment-timezone": "^0.5.25", "moment-timezone": "^0.5.25",
"react": "16.9.0", "react": "16.9.0",
"react-dom": "16.9.0", "react-dom": "16.9.0",
"react-styleguidist": "^9.1.16", "react-styleguidist": "^10.3.2",
"snapshot-diff": "^0.5.1", "snapshot-diff": "^0.5.1",
"style-loader": "^1.0.0", "style-loader": "^1.0.0",
"webpack": "^4.41.0" "webpack": "^4.41.0"
}, },
"scripts": { "scripts": {
"build": "rm -rf dist; babel src --out-dir dist --source-maps inline --copy-files",
"build:watch": "babel src --verbose --watch --out-dir dist --source-maps inline --copy-files",
"lint": "eslint src", "lint": "eslint src",
"test": "jest", "test": "jest",
"test:watch": "jest --watch", "test:watch": "jest --watch",

View File

@ -1,8 +1,9 @@
#!/bin/sh #!/bin/sh
# Collect files # Collect files
npm run build mkdir -p dist
cp package.json README.md dist cp -rf ./src/* dist
cp package.json package-lock.json README.md dist
cp -rf translations dist cp -rf translations dist
# Remove unwanted files # Remove unwanted files
rm -rf dist/**/__tests__ rm -rf dist/**/__tests__

View File

@ -8,8 +8,8 @@
import React, { useState, useContext, useCallback } from "react"; import React, { useState, useContext, useCallback } from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { Alert, ALERT_TYPES } from "bootstrap/Alert"; import { Alert, ALERT_TYPES } from "../bootstrap/Alert";
import { Portal } from "utils/Portal"; import { Portal } from "../utils/Portal";
AlertContextProvider.propTypes = { AlertContextProvider.propTypes = {
children: PropTypes.oneOfType([ children: PropTypes.oneOfType([

View File

@ -9,7 +9,7 @@ import {
useCallback, useEffect, useReducer, useState, useCallback, useEffect, useReducer, useState,
} from "react"; } from "react";
import { ForisURLs } from "forisUrls"; import { ForisURLs } from "../forisUrls";
import { import {
API_ACTIONS, API_METHODS, API_STATE, getErrorPayload, HEADERS, TIMEOUT, API_ACTIONS, API_METHODS, API_STATE, getErrorPayload, HEADERS, TIMEOUT,
} from "./utils"; } from "./utils";

View File

@ -8,11 +8,6 @@
import React from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
const OFFSET = 8;
const SIZE = 3;
const SIZE_CLASS = ` offset-lg-${OFFSET} col-lg-${SIZE}`;
const SIZE_CLASS_SM = " col-sm-12";
Button.propTypes = { Button.propTypes = {
/** Additional class name. */ /** Additional class name. */
className: PropTypes.string, className: PropTypes.string,
@ -32,14 +27,16 @@ Button.propTypes = {
export function Button({ export function Button({
className, loading, forisFormSize, children, ...props className, loading, forisFormSize, children, ...props
}) { }) {
className = className ? `btn ${className}` : "btn btn-primary "; let buttonClass = className ? `btn ${className}` : "btn btn-primary ";
if (forisFormSize) className += SIZE_CLASS + SIZE_CLASS_SM; if (forisFormSize) {
buttonClass = `${buttonClass} col-sm-12 col-lg-3`;
}
const span = loading const span = loading
? <span className="spinner-border spinner-border-sm" role="status" aria-hidden="true" /> : null; ? <span className="spinner-border spinner-border-sm" role="status" aria-hidden="true" /> : null;
return ( return (
<button type="button" className={className} {...props}> <button type="button" className={buttonClass} {...props}>
{span} {span}
{" "} {" "}
{span ? " " : null} {span ? " " : null}

View File

@ -9,30 +9,25 @@ import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { useUID } from "react-uid"; import { useUID } from "react-uid";
import { formFieldsSize } from "./constants";
CheckBox.propTypes = { CheckBox.propTypes = {
/** Label message */ /** Label message */
label: PropTypes.string.isRequired, label: PropTypes.string.isRequired,
/** Help text message */ /** Help text message */
helpText: PropTypes.string, helpText: PropTypes.string,
/** Apply default size (full-width) */
useDefaultSize: PropTypes.bool,
/** Control if checkbox is clickable */ /** Control if checkbox is clickable */
disabled: PropTypes.bool, disabled: PropTypes.bool,
}; };
CheckBox.defaultProps = { CheckBox.defaultProps = {
useDefaultSize: true,
disabled: false, disabled: false,
}; };
export function CheckBox({ export function CheckBox({
label, helpText, useDefaultSize, disabled, ...props label, helpText, disabled, ...props
}) { }) {
const uid = useUID(); const uid = useUID();
return ( return (
<div className={`form-group ${useDefaultSize ? formFieldsSize : ""}`.trim()}> <div className="form-group">
<div className="custom-control custom-checkbox "> <div className="custom-control custom-checkbox ">
<input <input
className="custom-control-input" className="custom-control-input"

View File

@ -6,8 +6,8 @@
*/ */
import React from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { Input } from "./Input"; import { Input } from "./Input";
export const EmailInput = ({ ...props }) => <Input type="email" {...props} />; export const EmailInput = ({ ...props }) => <Input type="email" {...props} />;

View File

@ -9,8 +9,6 @@ import React from "react";
import { useUID } from "react-uid"; import { useUID } from "react-uid";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { formFieldsSize } from "./constants";
Input.propTypes = { Input.propTypes = {
type: PropTypes.string.isRequired, type: PropTypes.string.isRequired,
label: PropTypes.string.isRequired, label: PropTypes.string.isRequired,
@ -32,7 +30,7 @@ export function Input({
const uid = useUID(); const uid = useUID();
const inputClassName = `form-control ${className || ""} ${(error ? "is-invalid" : "")}`.trim(); const inputClassName = `form-control ${className || ""} ${(error ? "is-invalid" : "")}`.trim();
return ( return (
<div className={`form-group ${formFieldsSize}`}> <div className="form-group">
<label className={labelClassName} htmlFor={uid}>{label}</label> <label className={labelClassName} htmlFor={uid}>{label}</label>
<div className={`input-group ${groupClassName || ""}`.trim()}> <div className={`input-group ${groupClassName || ""}`.trim()}>
<input <input

View File

@ -8,8 +8,8 @@
import React, { useRef } from "react"; import React, { useRef } from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { Portal } from "utils/Portal"; import { Portal } from "../utils/Portal";
import { useClickOutside } from "utils/hooks"; import { useClickOutside } from "../utils/hooks";
Modal.propTypes = { Modal.propTypes = {
/** Is modal shown value */ /** Is modal shown value */

View File

@ -8,7 +8,7 @@
import React from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { useConditionalTimeout } from "utils/hooks"; import { useConditionalTimeout } from "../utils/hooks";
import { Input } from "./Input"; import { Input } from "./Input";
import "./NumberInput.css"; import "./NumberInput.css";

View File

@ -9,8 +9,6 @@ import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { useUID } from "react-uid"; import { useUID } from "react-uid";
import { formFieldsSize } from "./constants";
RadioSet.propTypes = { RadioSet.propTypes = {
/** Name attribute of the input HTML tag. */ /** Name attribute of the input HTML tag. */
name: PropTypes.string.isRequired, name: PropTypes.string.isRequired,
@ -51,7 +49,7 @@ export function RadioSet({
}); });
return ( return (
<div className={`form-group ${formFieldsSize}`}> <div className="form-group">
{label && <label htmlFor={uid} className="d-block">{label}</label>} {label && <label htmlFor={uid} className="d-block">{label}</label>}
{radios} {radios}
{helpText && <small className="form-text text-muted">{helpText}</small>} {helpText && <small className="form-text text-muted">{helpText}</small>}

View File

@ -33,7 +33,7 @@ export function Select({
); );
return ( return (
<div className="form-group col-sm-12 offset-lg-1 col-lg-10"> <div className="form-group">
<label htmlFor={uid}>{label}</label> <label htmlFor={uid}>{label}</label>
<select <select
className="custom-select" className="custom-select"

View File

@ -2,7 +2,7 @@
exports[`<Checkbox/> Render checkbox 1`] = ` exports[`<Checkbox/> Render checkbox 1`] = `
<div <div
class="form-group col-sm-12 offset-lg-1 col-lg-10" class="form-group"
> >
<div <div
class="custom-control custom-checkbox " class="custom-control custom-checkbox "
@ -30,7 +30,7 @@ exports[`<Checkbox/> Render checkbox 1`] = `
exports[`<Checkbox/> Render uncheked checkbox 1`] = ` exports[`<Checkbox/> Render uncheked checkbox 1`] = `
<div <div
class="form-group col-sm-12 offset-lg-1 col-lg-10" class="form-group"
> >
<div <div
class="custom-control custom-checkbox " class="custom-control custom-checkbox "

View File

@ -2,7 +2,7 @@
exports[`<NumberInput/> Render number input 1`] = ` exports[`<NumberInput/> Render number input 1`] = `
<div <div
class="form-group col-sm-12 offset-lg-1 col-lg-10" class="form-group"
> >
<label <label
for="1" for="1"

View File

@ -2,7 +2,7 @@
exports[`<PasswordInput/> Render password input 1`] = ` exports[`<PasswordInput/> Render password input 1`] = `
<div <div
class="form-group col-sm-12 offset-lg-1 col-lg-10" class="form-group"
> >
<label <label
for="1" for="1"

View File

@ -2,7 +2,7 @@
exports[`<RadioSet/> Render radio set 1`] = ` exports[`<RadioSet/> Render radio set 1`] = `
<div <div
class="form-group col-sm-12 offset-lg-1 col-lg-10" class="form-group"
> >
<label <label
class="d-block" class="d-block"

View File

@ -3,7 +3,7 @@
exports[`<Select/> Test with snapshot. 1`] = ` exports[`<Select/> Test with snapshot. 1`] = `
<div> <div>
<div <div
class="form-group col-sm-12 offset-lg-1 col-lg-10" class="form-group"
> >
<label <label
for="1" for="1"

View File

@ -2,7 +2,7 @@
exports[`<TextInput/> Render text input 1`] = ` exports[`<TextInput/> Render text input 1`] = `
<div <div
class="form-group col-sm-12 offset-lg-1 col-lg-10" class="form-group"
> >
<label <label
for="1" for="1"

View File

@ -7,4 +7,4 @@
/** Bootstrap column size for form fields */ /** Bootstrap column size for form fields */
// eslint-disable-next-line import/prefer-default-export // eslint-disable-next-line import/prefer-default-export
export const formFieldsSize = "col-sm-12 offset-lg-1 col-lg-10"; export const formFieldsSize = "col-sm-12 offset-lg-1 col-lg-10 p-0 mb-3";

View File

@ -8,15 +8,15 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { useAPIPost } from "api/hooks"; import { useAPIPost } from "../api/hooks";
import { API_STATE } from "api/utils"; import { API_STATE } from "../api/utils";
import { ForisURLs } from "forisUrls"; import { ForisURLs } from "../forisUrls";
import { Button } from "bootstrap/Button"; import { Button } from "../bootstrap/Button";
import { import {
Modal, ModalHeader, ModalBody, ModalFooter, Modal, ModalHeader, ModalBody, ModalFooter,
} from "bootstrap/Modal"; } from "../bootstrap/Modal";
import { useAlert } from "alertContext/AlertContext"; import { useAlert } from "../alertContext/AlertContext";
RebootButton.propTypes = { RebootButton.propTypes = {
forisFormSize: PropTypes.bool, forisFormSize: PropTypes.bool,

View File

@ -3,7 +3,7 @@
exports[`<SubmitButton/> Render load 1`] = ` exports[`<SubmitButton/> Render load 1`] = `
<div> <div>
<button <button
class="btn btn-primary offset-lg-8 col-lg-3 col-sm-12" class="btn btn-primary col-sm-12 col-lg-3"
disabled="" disabled=""
type="submit" type="submit"
> >
@ -23,7 +23,7 @@ exports[`<SubmitButton/> Render load 1`] = `
exports[`<SubmitButton/> Render ready 1`] = ` exports[`<SubmitButton/> Render ready 1`] = `
<div> <div>
<button <button
class="btn btn-primary offset-lg-8 col-lg-3 col-sm-12" class="btn btn-primary col-sm-12 col-lg-3"
type="submit" type="submit"
> >
@ -36,7 +36,7 @@ exports[`<SubmitButton/> Render ready 1`] = `
exports[`<SubmitButton/> Render saving 1`] = ` exports[`<SubmitButton/> Render saving 1`] = `
<div> <div>
<button <button
class="btn btn-primary offset-lg-8 col-lg-3 col-sm-12" class="btn btn-primary col-sm-12 col-lg-3"
disabled="" disabled=""
type="submit" type="submit"
> >

View File

@ -59,7 +59,7 @@ describe('useForm hook.', () => {
input = await waitForElement(() => input = await waitForElement(() =>
getByTestId('test-input') getByTestId('test-input')
); );
form = container.firstChild form = container.firstChild.firstChild;
}); });
it('Validation on changing.', () => { it('Validation on changing.', () => {

View File

@ -7,15 +7,16 @@
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { Spinner } from "bootstrap/Spinner";
import { useAPIPost } from "api/hooks";
import { Prompt } from "react-router"; import { Prompt } from "react-router";
import { API_STATE } from "api/utils";
import { ErrorMessage } from "utils/ErrorMessage"; import { ALERT_TYPES } from "../../bootstrap/Alert";
import { useAlert } from "alertContext/AlertContext"; import { API_STATE } from "../../api/utils";
import { ALERT_TYPES } from "bootstrap/Alert"; import { ErrorMessage } from "../../utils/ErrorMessage";
import { formFieldsSize } from "../../bootstrap/constants";
import { Spinner } from "../../bootstrap/Spinner";
import { useAlert } from "../../alertContext/AlertContext";
import { useAPIPost } from "../../api/hooks";
import { useForisModule, useForm } from "../hooks"; import { useForisModule, useForm } from "../hooks";
import { STATES as SUBMIT_BUTTON_STATES, SubmitButton } from "./SubmitButton"; import { STATES as SUBMIT_BUTTON_STATES, SubmitButton } from "./SubmitButton";
@ -154,15 +155,17 @@ export function ForisForm({
} }
return ( return (
<> <div className={formFieldsSize}>
<Prompt message={getMessageOnLeavingPage} /> <Prompt message={getMessageOnLeavingPage} />
<form onSubmit={onSubmit}> <form onSubmit={onSubmit}>
{childrenWithFormProps} {childrenWithFormProps}
<SubmitButton <div className="text-right">
state={getSubmitButtonState()} <SubmitButton
disabled={submitButtonIsDisabled} state={getSubmitButtonState()}
/> disabled={submitButtonIsDisabled}
/>
</div>
</form> </form>
</> </div>
); );
} }

View File

@ -8,7 +8,7 @@
import React from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { Button } from "bootstrap/Button"; import { Button } from "../../bootstrap/Button";
export const STATES = { export const STATES = {
READY: 1, READY: 1,

View File

@ -8,8 +8,8 @@
import { useCallback, useEffect, useReducer } from "react"; import { useCallback, useEffect, useReducer } from "react";
import update from "immutability-helper"; import update from "immutability-helper";
import { useAPIGet } from "api/hooks"; import { useAPIGet } from "../api/hooks";
import { useWSForisModule } from "webSockets/hooks"; import { useWSForisModule } from "../webSockets/hooks";
const FORM_ACTIONS = { const FORM_ACTIONS = {
updateValue: 1, updateValue: 1,

View File

@ -13,59 +13,59 @@ export {
useAPIPut, useAPIPut,
useAPIDelete, useAPIDelete,
useAPIPolling, useAPIPolling,
} from "api/hooks"; } from "./api/hooks";
export { API_STATE } from "api/utils"; export { API_STATE } from "./api/utils";
// Bootstrap // Bootstrap
export { Alert, ALERT_TYPES } from "bootstrap/Alert"; export { Alert, ALERT_TYPES } from "./bootstrap/Alert";
export { Button } from "bootstrap/Button"; export { Button } from "./bootstrap/Button";
export { CheckBox } from "bootstrap/CheckBox"; export { CheckBox } from "./bootstrap/CheckBox";
export { DownloadButton } from "bootstrap/DownloadButton"; export { DownloadButton } from "./bootstrap/DownloadButton";
export { DataTimeInput } from "bootstrap/DataTimeInput"; export { DataTimeInput } from "./bootstrap/DataTimeInput";
export { EmailInput } from "bootstrap/EmailInput"; export { EmailInput } from "./bootstrap/EmailInput";
export { FileInput } from "bootstrap/FileInput"; export { FileInput } from "./bootstrap/FileInput";
export { Input } from "bootstrap/Input"; export { Input } from "./bootstrap/Input";
export { NumberInput } from "bootstrap/NumberInput"; export { NumberInput } from "./bootstrap/NumberInput";
export { PasswordInput } from "bootstrap/PasswordInput"; export { PasswordInput } from "./bootstrap/PasswordInput";
export { Radio, RadioSet } from "bootstrap/RadioSet"; export { Radio, RadioSet } from "./bootstrap/RadioSet";
export { Select } from "bootstrap/Select"; export { Select } from "./bootstrap/Select";
export { TextInput } from "bootstrap/TextInput"; export { TextInput } from "./bootstrap/TextInput";
export { formFieldsSize } from "bootstrap/constants"; export { formFieldsSize } from "./bootstrap/constants";
export { export {
Spinner, Spinner,
SpinnerElement, SpinnerElement,
} from "bootstrap/Spinner"; } from "./bootstrap/Spinner";
export { export {
Modal, Modal,
ModalBody, ModalBody,
ModalFooter, ModalFooter,
ModalHeader, ModalHeader,
} from "bootstrap/Modal"; } from "./bootstrap/Modal";
// Common // Common
export { RebootButton } from "common/RebootButton"; export { RebootButton } from "./common/RebootButton";
// Form // Form
export { ForisForm } from "form/components/ForisForm"; export { ForisForm } from "./form/components/ForisForm";
export { SubmitButton, STATES as SUBMIT_BUTTON_STATES } from "form/components/SubmitButton"; export { SubmitButton, STATES as SUBMIT_BUTTON_STATES } from "./form/components/SubmitButton";
export { useForisModule, useForm } from "form/hooks"; export { useForisModule, useForm } from "./form/hooks";
// WebSockets // WebSockets
export { useWSForisModule } from "webSockets/hooks"; export { useWSForisModule } from "./webSockets/hooks";
export { WebSockets } from "webSockets/WebSockets"; export { WebSockets } from "./webSockets/WebSockets";
// Utils // Utils
export { Portal } from "utils/Portal"; export { Portal } from "./utils/Portal";
export { undefinedIfEmpty, withoutUndefinedKeys, onlySpecifiedKeys } from "utils/objectHelpers"; export { undefinedIfEmpty, withoutUndefinedKeys, onlySpecifiedKeys } from "./utils/objectHelpers";
export { export {
withEither, withSpinner, withSending, withSpinnerOnSending, withError, withErrorMessage, withEither, withSpinner, withSending, withSpinnerOnSending, withError, withErrorMessage,
} from "utils/conditionalHOCs"; } from "./utils/conditionalHOCs";
export { ErrorMessage } from "utils/ErrorMessage"; export { ErrorMessage } from "./utils/ErrorMessage";
export { useClickOutside } from "utils/hooks"; export { useClickOutside } from "./utils/hooks";
// Foris URL // Foris URL
export { ForisURLs, REFORIS_URL_PREFIX } from "forisUrls"; export { ForisURLs, REFORIS_URL_PREFIX } from "./forisUrls";
// Validation // Validation
export { export {
@ -76,7 +76,7 @@ export {
validateDUID, validateDUID,
validateMAC, validateMAC,
validateMultipleEmails, validateMultipleEmails,
} from "validations"; } from "./validations";
// Alert context // Alert context
export { AlertContextProvider, useAlert } from "alertContext/AlertContext"; export { AlertContextProvider, useAlert } from "./alertContext/AlertContext";

View File

@ -7,8 +7,8 @@
import React from "react"; import React from "react";
import { Spinner } from "bootstrap/Spinner"; import { Spinner } from "../bootstrap/Spinner";
import { API_STATE } from "api/utils"; import { API_STATE } from "../api/utils";
import { ErrorMessage } from "./ErrorMessage"; import { ErrorMessage } from "./ErrorMessage";
function withEither(conditionalFn, Either) { function withEither(conditionalFn, Either) {

View File

@ -7,7 +7,7 @@
/* eslint no-console: "off" */ /* eslint no-console: "off" */
import { ForisURLs } from "forisUrls"; import { ForisURLs } from "../forisUrls";
const PROTOCOL = window.location.protocol === "http:" ? "ws" : "wss"; const PROTOCOL = window.location.protocol === "http:" ? "ws" : "wss";