GGLinnk/foris-js
1
0
Fork 0
mirror of https://gitlab.nic.cz/turris/reforis/foris-js.git synced 2024-12-25 00:11:36 +01:00
Code Issues Releases Activity

Merge branch 'dev' into 'master'

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
Makefile
View File

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

1
babel.cfg
View File

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

1436
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

10
package.json
View File

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

5
scripts/collect_files.sh
View File

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

4
src/alertContext/AlertContext.js
View File

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

2
src/api/hooks.js
View File

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

13
src/bootstrap/Button.js
View File

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

9
src/bootstrap/CheckBox.js
View File

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

2
src/bootstrap/EmailInput.js
View File

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

4
src/bootstrap/Input.js
View File

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

4
src/bootstrap/Modal.js
View File

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

2
src/bootstrap/NumberInput.js
View File

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

4
src/bootstrap/RadioSet.js
View File

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

2
src/bootstrap/Select.js
View File

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

4
src/bootstrap/__tests__/__snapshots__/CheckBox.test.js.snap
View File

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

2
src/bootstrap/__tests__/__snapshots__/NumberInput.test.js.snap
View File

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

2
src/bootstrap/__tests__/__snapshots__/PasswordInput.test.js.snap
View File

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

2
src/bootstrap/__tests__/__snapshots__/RadioSet.test.js.snap
View File

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

2
src/bootstrap/__tests__/__snapshots__/Select.test.js.snap
View File

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

2
src/bootstrap/__tests__/__snapshots__/TextInput.test.js.snap
View File

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

2
src/bootstrap/constants.js
View File

@ -7,4 +7,4 @@
/** Bootstrap column size for form fields */
// 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";

12
src/common/RebootButton.js
View File

@ -8,15 +8,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 "forisUrls";
import { useAPIPost } from "../api/hooks";
import { API_STATE } from "../api/utils";
import { ForisURLs } from "../forisUrls";
import { Button } from "bootstrap/Button";
import { Button } from "../bootstrap/Button";
import {
Modal, ModalHeader, ModalBody, ModalFooter,
} from "bootstrap/Modal";
import { useAlert } from "alertContext/AlertContext";
} from "../bootstrap/Modal";
import { useAlert } from "../alertContext/AlertContext";
RebootButton.propTypes = {
forisFormSize: PropTypes.bool,

6
src/form/__tests__/__snapshots__/SubmitButton.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`<SubmitButton/> Render load 1`] = `
<div>
<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=""
type="submit"
>
@ -23,7 +23,7 @@ exports[`<SubmitButton/> Render load 1`] = `
exports[`<SubmitButton/> Render ready 1`] = `
<div>
<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"
>
@ -36,7 +36,7 @@ exports[`<SubmitButton/> Render ready 1`] = `
exports[`<SubmitButton/> Render saving 1`] = `
<div>
<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=""
type="submit"
>

2
src/form/__tests__/hooks.test.js
View File

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

31
src/form/components/ForisForm.js
View File

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

2
src/form/components/SubmitButton.js
View File

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

4
src/form/hooks.js
View File

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

64
src/index.js
View File

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

4
src/utils/conditionalHOCs.js
View File

@ -7,8 +7,8 @@
import React from "react";
import { Spinner } from "bootstrap/Spinner";
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) {

2
src/webSockets/WebSockets.js
View File

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