GGLinnk/foris-js
1
0
Fork 0
mirror of https://gitlab.nic.cz/turris/reforis/foris-js.git synced 2024-07-02 20:30:27 +00:00
Code Issues Releases Activity

Merge branch 'fluid-aid' into 'dev'

Browse Source 
Add auxiliary features in order to support Fluid Layout

See merge request turris/reforis/foris-js!121
This commit is contained in:
Aleksandr Gumroian 2020-08-25 17:35:28 +02:00
commit 61b349c6cc
94 changed files with 20058 additions and 19569 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.eslintrc.js
View File

@ -1,6 +1,8 @@
module.exports = {
extends: "eslint-config-reforis",
extends: ["eslint-config-reforis", "prettier"],
plugins: ["prettier"],
rules: {
"prettier/prettier": ["error"],
"import/prefer-default-export": "off",
},
};

1
.gitignore vendored
View File

@ -51,3 +51,4 @@ coverage.xml
dist/
foris-*.tgz
styleguide/
testUtils

60
.gitlab-ci.yml
View File

@ -1,44 +1,44 @@
image: node:8-alpine
image: node:10-alpine
stages:
- test
- build
- publish
- test
- build
- publish
before_script:
- apk add make
- npm install
- apk add make
- npm install
test:
stage: test
script:
- make test
stage: test
script:
- make test
lint:
stage: test
script:
- make lint
stage: test
script:
- make lint
build:
stage: build
script:
- make pack
artifacts:
paths:
- dist/foris-*.tgz
stage: build
script:
- make pack
artifacts:
paths:
- dist/foris-*.tgz
publish_beta:
stage: publish
only:
refs:
- dev
script:
- make publish-beta
stage: publish
only:
refs:
- dev
script:
- make publish-beta
publish_latest:
stage: publish
only:
refs:
- master
script:
- make publish-latest
stage: publish
only:
refs:
- master
script:
- make publish-latest

11
.prettierrc Normal file
View File

@ -0,0 +1,11 @@
{
"singleQuote": false,
"printWidth": 80,
"proseWrap": "always",
"tabWidth": 4,
"useTabs": false,
"trailingComma": "es5",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"semi": true
}

20
README.md
View File

@ -1,4 +1,5 @@
# foris-js
Set of utils and common React elements for reForis.
## Publishing package
@ -6,24 +7,27 @@ Set of utils and common React elements for reForis.
### Beta versions
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.
tagged `beta`. Versions names are based on commit SHA, e.g.
`foris@0.1.0-beta.d9073aa4`.
### Preparing a release
1. Crete a merge request to `dev` branch with version bumped
2. When merging add `[skip ci]` to commit message to prevent publishing
unnecessary version
unnecessary version
3. Create a merge request from `dev` to `master` branch
4. New version should be published automatically
## Manually managed dependencies
Because of `<ForisForm />` component it's required to use exposed `ReactRouterDOM`
object from `react-router-dom` library. `ReactRouterDOM` is exposed by
Because of `<ForisForm />` component it's required to use exposed
`ReactRouterDOM` object from `react-router-dom` library. `ReactRouterDOM` is
exposed by
[reForis](https://gitlab.labs.nic.cz/turris/reforis/reforis/blob/master/js/webpack.config.js).
It can be done by following steps:
1. Setting `react-router-dom` as `peerDependencies` and `devDependencies` in `package.json`.
1. Setting `react-router-dom` as `peerDependencies` and `devDependencies` in
`package.json`.
2. Adding the following rules to `externals` in `webpack.conf.js` of the plugin:
```js
@ -34,11 +38,15 @@ externals: {
```
### Docs
Build or watch docs to get more info about library:
```bash
make docs
```
or
```bash
make docs-watch
```

9
babel.config.js
View File

@ -1,9 +1,4 @@
module.exports = {
presets: [
"@babel/preset-env",
"@babel/preset-react",
],
plugins: [
"@babel/plugin-transform-runtime",
],
presets: ["@babel/preset-env", "@babel/preset-react"],
plugins: ["@babel/plugin-transform-runtime"],
};

17
docs/development.md
View File

@ -1,12 +1,15 @@
Sooner or later you will face with situation when you want/need to make some changes in the library.
Then the most important tool for you it's [`npm link`](https://docs.npmjs.com/cli/link).
Sooner or later you will face with situation when you want/need to make some
changes in the library. Then the most important tool for you it's
[`npm link`](https://docs.npmjs.com/cli/link).
Please, notice that it will not work if you link library just from root of the repo. It happens due to location of
sources `./src`. You need to pack library first `make pack` and then link it from `./dist` directory.
Please, notice that it will not work if you link library just from root of the
repo. It happens due to location of sources `./src`. You need to pack library
first `make pack` and then link it from `./dist` directory.
Yeah it's not such comfortable solution for development. But it can fixed by writing small script similar as `make pack`
but with linking every file and directory from `./src` to the some directory and linking then from it. Notice that you
need to link `package.json` and `package-lock.json` as well.
Yeah it's not such comfortable solution for development. But it can fixed by
writing small script similar as `make pack` but with linking every file and
directory from `./src` to the some directory and linking then from it. Notice
that you need to link `package.json` and `package-lock.json` as well.
So step by step:

8
docs/intro.md
View File

@ -1,4 +1,6 @@
Foris JS library is set of components and utils for Foris JS application and plugins.
Foris JS library is set of components and utils for Foris JS application and
plugins.
Please notice that all of these components or utils are used in reForis and plugins. If you like to study by example I would
recommend to full-text search these repos.
Please notice that all of these components or utils are used in reForis and
plugins. If you like to study by example I would recommend to full-text search
these repos.

4
jest.config.js
View File

@ -27,7 +27,5 @@ module.exports = {
globals: {
TZ: "utc",
},
transformIgnorePatterns: [
"node_modules/(?!(react-datetime)/)",
],
transformIgnorePatterns: ["node_modules/(?!(react-datetime)/)"],
};

37004
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

133
package.json
View File

@ -1,67 +1,70 @@
{
"name": "foris",
"version": "5.0.1",
"description": "Set of components and utils for Foris and its plugins.",
"author": "CZ.NIC, z.s.p.o.",
"repository": {
"type": "git",
"url": "https://gitlab.labs.nic.cz/turris/reforis/foris-js.git"
},
"keywords": [
"foris",
"reforis"
],
"license": "GPL-3.0",
"main": "./src/index.js",
"dependencies": {
"axios": "^0.19.2",
"immutability-helper": "3.0.1",
"moment": "^2.24.0",
"qrcode.react": "^0.9.3",
"react-datetime": "^2.16.3",
"react-uid": "^2.2.0"
},
"peerDependencies": {
"bootstrap": "4.4.1",
"prop-types": "15.7.2",
"react": "16.9.0",
"react-dom": "16.9.0",
"react-router-dom": "^5.1.2"
},
"devDependencies": {
"@babel/cli": "^7.8.4",
"@babel/core": "^7.9.0",
"@babel/plugin-transform-runtime": "^7.9.0",
"@babel/preset-env": "^7.9.0",
"@babel/preset-react": "^7.9.4",
"@fortawesome/fontawesome-free": "^5.13.0",
"@testing-library/react": "^8.0.9",
"babel-loader": "^8.1.0",
"babel-polyfill": "^6.26.0",
"bootstrap": "^4.5.0",
"css-loader": "^3.5.3",
"eslint": "^6.8.0",
"eslint-config-reforis": "^1.0.0",
"file-loader": "^6.0.0",
"jest": "^25.2.0",
"jest-mock-axios": "^3.2.0",
"moment-timezone": "^0.5.28",
"prop-types": "15.7.2",
"react": "16.9.0",
"react-dom": "16.9.0",
"react-router-dom": "^5.1.2",
"react-styleguidist": "^10.6.2",
"snapshot-diff": "^0.7.0",
"style-loader": "^1.2.1",
"webpack": "^4.43.0"
},
"scripts": {
"lint": "eslint src",
"lint:fix": "eslint --fix src",
"test": "jest",
"test:watch": "jest --watch",
"test:coverage": "jest --coverage --colors",
"docs": "npx styleguidist build ",
"docs:watch": "styleguidist server"
}
"name": "foris",
"version": "5.1.0",
"description": "Set of components and utils for Foris and its plugins.",
"author": "CZ.NIC, z.s.p.o.",
"repository": {
"type": "git",
"url": "https://gitlab.nic.cz/turris/reforis/foris-js.git"
},
"keywords": [
"foris",
"reforis"
],
"license": "GPL-3.0",
"main": "./src/index.js",
"dependencies": {
"axios": "^0.19.2",
"immutability-helper": "3.0.1",
"moment": "^2.24.0",
"qrcode.react": "^0.9.3",
"react-datetime": "^2.16.3",
"react-uid": "^2.2.0"
},
"peerDependencies": {
"bootstrap": "4.4.1",
"prop-types": "15.7.2",
"react": "16.9.0",
"react-dom": "16.9.0",
"react-router-dom": "^5.1.2"
},
"devDependencies": {
"@babel/cli": "^7.8.4",
"@babel/core": "^7.9.0",
"@babel/plugin-transform-runtime": "^7.9.0",
"@babel/preset-env": "^7.9.0",
"@babel/preset-react": "^7.9.4",
"@fortawesome/fontawesome-free": "^5.13.0",
"@testing-library/react": "^8.0.9",
"babel-loader": "^8.1.0",
"babel-polyfill": "^6.26.0",
"bootstrap": "^4.5.0",
"css-loader": "^3.5.3",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.11.0",
"eslint-config-reforis": "^1.0.0",
"eslint-plugin-prettier": "^3.1.4",
"file-loader": "^6.0.0",
"jest": "^25.2.0",
"jest-mock-axios": "^3.2.0",
"moment-timezone": "^0.5.28",
"prettier": "2.0.5",
"prop-types": "15.7.2",
"react": "16.9.0",
"react-dom": "16.9.0",
"react-router-dom": "^5.1.2",
"react-styleguidist": "^10.6.2",
"snapshot-diff": "^0.7.0",
"style-loader": "^1.2.1",
"webpack": "^4.43.0"
},
"scripts": {
"lint": "eslint src",
"lint:fix": "eslint --fix src",
"test": "jest",
"test:watch": "jest --watch",
"test:coverage": "jest --coverage --colors",
"docs": "npx styleguidist build ",
"docs:watch": "styleguidist server"
}
}

11
src/alertContext/AlertContext.js
View File

@ -22,9 +22,12 @@ function AlertContextProvider({ children }) {
const { AlertContext } = window;
const [alert, setAlert] = useState(null);
const setAlertWrapper = useCallback((message, type = ALERT_TYPES.DANGER) => {
setAlert({ message, type });
}, [setAlert]);
const setAlertWrapper = useCallback(
(message, type = ALERT_TYPES.DANGER) => {
setAlert({ message, type });
},
[setAlert]
);
const dismissAlert = useCallback(() => setAlert(null), [setAlert]);
@ -38,7 +41,7 @@ function AlertContextProvider({ children }) {
</Portal>
)}
<AlertContext.Provider value={[setAlertWrapper, dismissAlert]}>
{ children }
{children}
</AlertContext.Provider>
</>
);

7
src/alertContext/AlertContext.md
View File

@ -1,4 +1,5 @@
It provides alert context to children. `AlertContext` allows using `useAlert` in components.
It provides alert context to children. `AlertContext` allows using `useAlert` in
components.
Notice that `<div id="alert-container"/>` should be presented in HTML doc to get it work (In reForis it's already done
with base Jinja2 templates).
Notice that `<div id="alert-container"/>` should be presented in HTML doc to get
it work (In reForis it's already done with base Jinja2 templates).

6
src/alertContext/__tests__/AlertContext.test.js
View File

@ -6,9 +6,7 @@
*/
import React from "react";
import {
render, getByText, queryByText, fireEvent,
} from "customTestRender";
import { render, getByText, queryByText, fireEvent } from "customTestRender";
import { useAlert, AlertContextProvider } from "../AlertContext";
@ -31,7 +29,7 @@ describe("AlertContext", () => {
const { container } = render(
<AlertContextProvider>
<AlertTest />
</AlertContextProvider>,
</AlertContextProvider>
);
componentContainer = container;
});

145
src/api/hooks.js
View File

@ -5,13 +5,16 @@
* See /LICENSE for more information.
*/
import {
useCallback, useEffect, useReducer, useState,
} from "react";
import { useCallback, useEffect, useReducer, useState } from "react";
import { ForisURLs } from "../utils/forisUrls";
import {
API_ACTIONS, API_METHODS, API_STATE, getErrorPayload, HEADERS, TIMEOUT,
API_ACTIONS,
API_METHODS,
API_STATE,
getErrorPayload,
HEADERS,
TIMEOUT,
} from "./utils";
const DATA_METHODS = ["POST", "PATCH", "PUT"];
@ -23,76 +26,83 @@ function createAPIHook(method) {
data: null,
});
const sendRequest = useCallback(async ({ data, suffix } = {}) => {
const headers = { ...HEADERS };
if (contentType) {
headers["Content-Type"] = contentType;
}
dispatch({ type: API_ACTIONS.INIT });
try {
// Prepare request
const request = API_METHODS[method];
const config = {
timeout: TIMEOUT,
headers,
};
const url = suffix ? `${urlRoot}/${suffix}` : urlRoot;
// Make request
let result;
if (DATA_METHODS.includes(method)) {
result = await request(url, data, config);
} else {
result = await request(url, config);
const sendRequest = useCallback(
async ({ data, suffix } = {}) => {
const headers = { ...HEADERS };
if (contentType) {
headers["Content-Type"] = contentType;
}
// Process request result
dispatch({
type: API_ACTIONS.SUCCESS,
payload: result.data,
});
} catch (error) {
const errorPayload = getErrorPayload(error);
dispatch({
type: API_ACTIONS.FAILURE,
status: error.response && error.response.status,
payload: errorPayload,
});
}
}, [urlRoot, contentType]);
dispatch({ type: API_ACTIONS.INIT });
try {
// Prepare request
const request = API_METHODS[method];
const config = {
timeout: TIMEOUT,
headers,
};
const url = suffix ? `${urlRoot}/${suffix}` : urlRoot;
// Make request
let result;
if (DATA_METHODS.includes(method)) {
result = await request(url, data, config);
} else {
result = await request(url, config);
}
// Process request result
dispatch({
type: API_ACTIONS.SUCCESS,
payload: result.data,
});
} catch (error) {
const errorPayload = getErrorPayload(error);
dispatch({
type: API_ACTIONS.FAILURE,
status: error.response && error.response.status,
payload: errorPayload,
});
}
},
[urlRoot, contentType]
);
return [state, sendRequest];
};
}
function APIReducer(state, action) {
switch (action.type) {
case API_ACTIONS.INIT:
return {
...state,
state: API_STATE.SENDING,
};
case API_ACTIONS.SUCCESS:
return {
state: API_STATE.SUCCESS,
data: action.payload,
};
case API_ACTIONS.FAILURE:
if (action.status === 403) {
window.location.assign(ForisURLs.login);
}
case API_ACTIONS.INIT:
return {
...state,
state: API_STATE.SENDING,
};
case API_ACTIONS.SUCCESS:
return {
state: API_STATE.SUCCESS,
data: action.payload,
};
case API_ACTIONS.FAILURE:
if (action.status === 403) {
window.location.assign(ForisURLs.login);
}
// Not an API error - should be rethrown.
if (action.payload && action.payload.stack && action.payload.message) {
throw (action.payload);
}
// Not an API error - should be rethrown.
if (
action.payload &&
action.payload.stack &&
action.payload.message
) {
throw action.payload;
}
return {
state: API_STATE.ERROR,
data: action.payload,
};
default:
throw new Error();
return {
state: API_STATE.ERROR,
data: action.payload,
};
default:
throw new Error();
}
}
@ -102,11 +112,10 @@ const useAPIPatch = createAPIHook("PATCH");
const useAPIPut = createAPIHook("PUT");
const useAPIDelete = createAPIHook("DELETE");
export {
useAPIGet, useAPIPost, useAPIPatch, useAPIPut, useAPIDelete,
};
export { useAPIGet, useAPIPost, useAPIPatch, useAPIPut, useAPIDelete };
export function useAPIPolling(endpoint, delay = 1000, until) { // delay ms
export function useAPIPolling(endpoint, delay = 1000, until) {
// delay ms
const [state, setState] = useState({ state: API_STATE.INIT });
const [getResponse, get] = useAPIGet(endpoint);

6
src/api/utils.js
View File

@ -43,8 +43,10 @@ function getCookie(name) {
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (`${name}=`)) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
if (cookie.substring(0, name.length + 1) === `${name}=`) {
cookieValue = decodeURIComponent(
cookie.substring(name.length + 1)
);
break;
}
}

12
src/bootstrap/Alert.js
View File

@ -35,12 +35,16 @@ Alert.defaultProps = {
type: ALERT_TYPES.DANGER,
};
export function Alert({
type, onDismiss, children,
}) {
export function Alert({ type, onDismiss, children }) {
return (
<div className={`alert alert-dismissible alert-${type}`}>
{onDismiss ? <button type="button" className="close" onClick={onDismiss}>&times;</button> : false}
{onDismiss ? (
<button type="button" className="close" onClick={onDismiss}>
&times;
</button>
) : (
false
)}
{children}
</div>
);

28
src/bootstrap/Alert.md
View File

@ -1,21 +1,21 @@
Bootstrap alert component.
```jsx
import {useState} from 'react';
import { useState } from "react";
function AlertExample(){
function AlertExample() {
const [alert, setAlert] = useState(true);
if (alert)
return <Alert
type='warning'
onDismiss={()=>setAlert(false)}
>
Some warning out there!
</Alert>;
return <button
className='btn btn-secondary'
onClick={()=>setAlert(true)}
>Show alert again</button>;
};
<AlertExample/>
return (
<Alert type="warning" onDismiss={() => setAlert(false)}>
Some warning out there!
</Alert>
);
return (
<button className="btn btn-secondary" onClick={() => setAlert(true)}>
Show alert again
</button>
);
}
<AlertExample />;
```

19
src/bootstrap/Button.js
View File

@ -25,22 +25,29 @@ Button.propTypes = {
};
export function Button({
className, loading, forisFormSize, children, ...props
className,
loading,
forisFormSize,
children,
...props
}) {
let buttonClass = className ? `btn ${className}` : "btn btn-primary ";
if (forisFormSize) {
buttonClass = `${buttonClass} col-sm-12 col-lg-3`;
buttonClass = `${buttonClass} col-sm-12 col-md-3 col-lg-2`;
}
const span = loading
? <span className="spinner-border spinner-border-sm" role="status" aria-hidden="true" /> : null;
const span = loading ? (
<span
className="spinner-border spinner-border-sm"
role="status"
aria-hidden="true"
/>
) : null;
return (
<button type="button" className={buttonClass} {...props}>
{span}
{" "}
{span ? " " : null}
{" "}
{children}
</button>
);

4
src/bootstrap/Button.md
View File

@ -11,5 +11,7 @@ Can be used without parameters:
Using loading spinner:
```jsx
<Button loading disabled>Loading...</Button>
<Button loading disabled>
Loading...
</Button>
```

11
src/bootstrap/CheckBox.js
View File

@ -22,9 +22,7 @@ CheckBox.defaultProps = {
disabled: false,
};
export function CheckBox({
label, helpText, disabled, ...props
}) {
export function CheckBox({ label, helpText, disabled, ...props }) {
const uid = useUID();
return (
<div className="form-group">
@ -34,12 +32,15 @@ export function CheckBox({
type="checkbox"
id={uid}
disabled={disabled}
{...props}
/>
<label className="custom-control-label" htmlFor={uid}>
{label}
{helpText && <small className="form-text text-muted">{helpText}</small>}
{helpText && (
<small className="form-text text-muted">
{helpText}
</small>
)}
</label>
</div>
</div>

15
src/bootstrap/Checkbox.md
View File

@ -1,16 +1,17 @@
Checkbox with label Bootstrap component with predefined sizes and structure for using in foris forms.
All additional `props` are passed to the `<input type="checkbox">` HTML component.
Checkbox with label Bootstrap component with predefined sizes and structure for
using in foris forms.
All additional `props` are passed to the `<input type="checkbox">` HTML
component.
```js
import {useState} from 'react';
import { useState } from "react";
const [value, setValue] = useState(false);
<CheckBox
value={value}
label="Some label"
label="Some label"
helpText="Read the small text!"
onChange={event =>setValue(event.target.value)}
/>
onChange={(event) => setValue(event.target.value)}
/>;
```

21
src/bootstrap/DataTimeInput.js
View File

@ -38,14 +38,17 @@ const DEFAULT_DATE_FORMAT = "YYYY-MM-DD";
const DEFAULT_TIME_FORMAT = "HH:mm:ss";
export function DataTimeInput({
value, onChange, isValidDate, dateFormat, timeFormat, children, ...props
value,
onChange,
isValidDate,
dateFormat,
timeFormat,
children,
...props
}) {
function renderInput(datetimeProps) {
return (
<Input
{...props}
{...datetimeProps}
>
<Input {...props} {...datetimeProps}>
{children}
</Input>
);
@ -54,8 +57,12 @@ export function DataTimeInput({
return (
<Datetime
locale={ForisTranslations.locale}
dateFormat={dateFormat !== undefined ? dateFormat : DEFAULT_DATE_FORMAT}
timeFormat={timeFormat !== undefined ? timeFormat : DEFAULT_TIME_FORMAT}
dateFormat={
dateFormat !== undefined ? dateFormat : DEFAULT_DATE_FORMAT
}
timeFormat={
timeFormat !== undefined ? timeFormat : DEFAULT_TIME_FORMAT
}
value={value}
onChange={onChange}
isValidDate={isValidDate}

29
src/bootstrap/DataTimeInput.md
View File

@ -1,25 +1,26 @@
Adopted from `react-datetime/DateTime` datatime picker component.
It uses `momentjs` see example.
Adopted from `react-datetime/DateTime` datatime picker component. It uses
`momentjs` see example.
It requires `ForisTranslations.locale` to be defined in order to use right locale.
It requires `ForisTranslations.locale` to be defined in order to use right
locale.
```js
ForisTranslations={locale:'en'};
ForisTranslations = { locale: "en" };
import {useState, useEffect} from 'react';
import moment from 'moment/moment';
import { useState, useEffect } from "react";
import moment from "moment/moment";
const [dataTime, setDataTime] = useState(moment());
const [error, setError] = useState();
useEffect(()=>{
dataTime.isValid() ? setError(null) : setError('Invalid value!');
},[dataTime]);
useEffect(() => {
dataTime.isValid() ? setError(null) : setError("Invalid value!");
}, [dataTime]);
<DataTimeInput
label='Time to sleep'
label="Time to sleep"
value={dataTime}
error={error}
helpText='Example helptext...'
onChange={value => setDataTime(value)}
/>
helpText="Example helptext..."
onChange={(value) => setDataTime(value)}
/>;
```

6
src/bootstrap/DownloadButton.js
View File

@ -23,11 +23,7 @@ DownloadButton.defaultProps = {
export function DownloadButton({ href, className, children }) {
return (
<a
href={href}
className={`btn ${className}`.trim()}
download
>
<a href={href} className={`btn ${className}`.trim()} download>
{children}
</a>
);

5
src/bootstrap/DownloadButton.md
View File

@ -1,6 +1,9 @@
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.
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>

17
src/bootstrap/EmailInput.md
View File

@ -1,18 +1,19 @@
Bootstrap component of email input with label with predefined sizes and structure for using in foris forms.
It use built-in browser email address checking. It's only meaningful using inside `<form>`.
Bootstrap component of email input with label with predefined sizes and
structure for using in foris forms. It use built-in browser email address
checking. It's only meaningful using inside `<form>`.
All additional `props` are passed to the `<input type="email">` HTML component.
```js
import {useState} from 'react';
const [email, setEmail] = useState('Wrong email');
<form onSubmit={e=>e.preventDefault()}>
import { useState } from "react";
const [email, setEmail] = useState("Wrong email");
<form onSubmit={(e) => e.preventDefault()}>
<EmailInput
value={email}
label="Some label"
label="Some label"
helpText="Read the small text!"
onChange={event =>setEmail(event.target.value)}
onChange={(event) => setEmail(event.target.value)}
/>
<button type="submit">Try to submit</button>
</form>
</form>;
```

23
src/bootstrap/FileInput.md
View File

@ -1,9 +1,10 @@
Bootstrap component for file input. Includes label and has predefined sizes and structure for using in foris forms.
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';
import { useState } from "react";
const [files, setFiles] = useState([]);
@ -15,27 +16,33 @@ const label = files.length === 1 ? files[0].name : "Choose file";
files={files}
label={label}
helpText="Will be uploaded"
onChange={event=>setFiles(event.target.files)}
onChange={(event) => setFiles(event.target.files)}
/>
</form>
</form>;
```
### FileInput with multiple files
```js
import { useState } from 'react';
import { useState } from "react";
const [files, setFiles] = useState([]);
// Note that files is not an array but FileList.
const label = files.length > 0 ? Array.from(files).map(file=>file.name).join(", ") : "Choose files";
const label =
files.length > 0
? Array.from(files)
.map((file) => file.name)
.join(", ")
: "Choose files";
<form className="col">
<FileInput
files={files}
label={label}
helpText="Will be uploaded"
onChange={event=>setFiles(event.target.files)}
onChange={(event) => setFiles(event.target.files)}
multiple
/>
</form>
</form>;
```

23
src/bootstrap/Input.js
View File

@ -25,25 +25,38 @@ Input.propTypes = {
/** Base bootstrap input component. */
export function Input({
type, label, helpText, error, className, children, labelClassName, groupClassName, ...props
type,
label,
helpText,
error,
className,
children,
labelClassName,
groupClassName,
...props
}) {
const uid = useUID();
const inputClassName = `form-control ${className || ""} ${(error ? "is-invalid" : "")}`.trim();
const inputClassName = `form-control ${className || ""} ${
error ? "is-invalid" : ""
}`.trim();
return (
<div className="form-group">
<label className={labelClassName} htmlFor={uid}>{label}</label>
<label className={labelClassName} htmlFor={uid}>
{label}
</label>
<div className={`input-group ${groupClassName || ""}`.trim()}>
<input
className={inputClassName}
type={type}
id={uid}
{...props}
/>
{children}
</div>
{error ? <div className="invalid-feedback">{error}</div> : null}
{helpText ? <small className="form-text text-muted">{helpText}</small> : null}
{helpText ? (
<small className="form-text text-muted">{helpText}</small>
) : null}
</div>
);
}

2
src/bootstrap/Modal.css
View File

@ -10,6 +10,6 @@
.modal.show {
display: block;
animation-name: modalFade;
animation-duration: .3s;
animation-duration: 0.3s;
background: rgba(0, 0, 0, 0.2);
}

24
src/bootstrap/Modal.js
View File

@ -26,9 +26,7 @@ Modal.propTypes = {
]).isRequired,
};
export function Modal({
shown, setShown, scrollable, children,
}) {
export function Modal({ shown, setShown, scrollable, children }) {
const dialogRef = useRef();
useClickOutside(dialogRef, () => setShown(false));
@ -38,12 +36,12 @@ export function Modal({
<div className={`modal fade ${shown ? "show" : ""}`} role="dialog">
<div
ref={dialogRef}
className={`modal-dialog modal-dialog-centered${scrollable ? " modal-dialog-scrollable" : ""}`}
className={`modal-dialog modal-dialog-centered${
scrollable ? " modal-dialog-scrollable" : ""
}`}
role="document"
>
<div className="modal-content">
{children}
</div>
<div className="modal-content">{children}</div>
</div>
</div>
</Portal>
@ -59,7 +57,11 @@ export function ModalHeader({ setShown, title }) {
return (
<div className="modal-header">
<h5 className="modal-title">{title}</h5>
<button type="button" className="close" onClick={() => setShown(false)}>
<button
type="button"
className="close"
onClick={() => setShown(false)}
>
<span aria-hidden="true">&times;</span>
</button>
</div>
@ -85,9 +87,5 @@ ModalFooter.propTypes = {
};
export function ModalFooter({ children }) {
return (
<div className="modal-footer">
{children}
</div>
);
return <div className="modal-footer">{children}</div>;
}

29
src/bootstrap/Modal.md
View File

@ -1,31 +1,36 @@
Bootstrap modal component.
it's required to have an element `<div id={"modal-container"}/>` somewhere on the page since modals are rendered in portals.
it's required to have an element `<div id={"modal-container"}/>` somewhere on
the page since modals are rendered in portals.
```js
<div id="modal-container"/>
<div id="modal-container" />
```
```js
import {ModalHeader, ModalBody, ModalFooter} from './Modal';
import { ModalHeader, ModalBody, ModalFooter } from "./Modal";
import {useState} from 'react';
import { useState } from "react";
const [shown, setShown] = useState(false);
<>
<Modal setShown={setShown} shown={shown}>
<ModalHeader setShown={setShown} title='Warning!'/>
<ModalBody><p>Bla bla bla...</p></ModalBody>
<ModalHeader setShown={setShown} title="Warning!" />
<ModalBody>
<p>Bla bla bla...</p>
</ModalBody>
<ModalFooter>
<button
className='btn btn-secondary'
<button
className="btn btn-secondary"
onClick={() => setShown(false)}
>Skip it</button>
>
Skip it
</button>
</ModalFooter>
</Modal>
<button className='btn btn-secondary' onClick={()=>setShown(true)}>
<button className="btn btn-secondary" onClick={() => setShown(true)}>
Show modal
</button>
</>
</>;
```

4
src/bootstrap/NumberInput.css
View File

@ -4,7 +4,7 @@ input[type="number"] {
appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
}

21
src/bootstrap/NumberInput.js
View File

@ -20,10 +20,7 @@ NumberInput.propTypes = {
/** Help text message. */
helpText: PropTypes.string,
/** Number value. */
value: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]),
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/** Function called when value changes. */
onChange: PropTypes.func.isRequired,
/** Additional description dispaled to the right of input value. */
@ -34,15 +31,21 @@ NumberInput.defaultProps = {
value: 0,
};
export function NumberInput({
onChange, inlineText, value, ...props
}) {
export function NumberInput({ onChange, inlineText, value, ...props }) {
function updateValue(initialValue, difference) {
onChange({ target: { value: initialValue + difference } });
}
const enableIncrease = useConditionalTimeout({ callback: updateValue }, value, 1);
const enableDecrease = useConditionalTimeout({ callback: updateValue }, value, -1);
const enableIncrease = useConditionalTimeout(
{ callback: updateValue },
value,
1
);
const enableDecrease = useConditionalTimeout(
{ callback: updateValue },
value,
-1
);
return (
<Input type="number" onChange={onChange} value={value} {...props}>

15
src/bootstrap/NumberInput.md
View File

@ -1,17 +1,18 @@
Bootstrap component of number input with label with predefined sizes and structure for using in foris forms.
Bootstrap component of number input with label with predefined sizes and
structure for using in foris forms.
All additional `props` are passed to the `<input type="number">` HTML component.
```js
import {useState} from 'react';
import { useState } from "react";
const [value, setValue] = useState(42);
<NumberInput
value={value}
label="Some number"
label="Some number"
helpText="Read the small text!"
min='33'
max='54'
onChange={event =>setValue(event.target.value)}
/>
min="33"
max="54"
onChange={(event) => setValue(event.target.value)}
/>;
```

34
src/bootstrap/PasswordInput.js
View File

@ -31,22 +31,24 @@ export function PasswordInput({ withEye, ...props }) {
autoComplete={isHidden ? "new-password" : null}
{...props}
>
{withEye
? (
<div className="input-group-append">
<button
type="button"
className="input-group-text"
onClick={(e) => {
e.preventDefault();
setHidden((shouldBeHidden) => !shouldBeHidden);
}}
>
<i className={`fa ${isHidden ? "fa-eye" : "fa-eye-slash"}`} />
</button>
</div>
)
: null}
{withEye ? (
<div className="input-group-append">
<button
type="button"
className="input-group-text"
onClick={(e) => {
e.preventDefault();
setHidden((shouldBeHidden) => !shouldBeHidden);
}}
>
<i
className={`fa ${
isHidden ? "fa-eye" : "fa-eye-slash"
}`}
/>
</button>
</div>
) : null}
</Input>
);
}

17
src/bootstrap/PasswordInput.md
View File

@ -1,17 +1,18 @@
Password Bootstrap component input with label and predefined sizes and structure for using in foris forms.
Can be used with "eye" button, see example.
Password Bootstrap component input with label and predefined sizes and structure
for using in foris forms. Can be used with "eye" button, see example.
All additional `props` are passed to the `<input type="password">` HTML component.
All additional `props` are passed to the `<input type="password">` HTML
component.
```js
import {useState} from 'react';
const [value, setValue] = useState('secret');
import { useState } from "react";
const [value, setValue] = useState("secret");
<PasswordInput
withEye
value={value}
label="Some password"
label="Some password"
helpText="Read the small text!"
onChange={event =>setValue(event.target.value)}
/>
onChange={(event) => setValue(event.target.value)}
/>;
```

61
src/bootstrap/RadioSet.js
View File

@ -15,26 +15,27 @@ RadioSet.propTypes = {
/** RadioSet label . */
label: PropTypes.string,
/** Choices . */
choices: PropTypes.arrayOf(PropTypes.shape({
/** Choice lable . */
label: PropTypes.oneOfType([
PropTypes.string,
PropTypes.element,
PropTypes.node,
PropTypes.arrayOf(PropTypes.node),
]).isRequired,
/** Choice value . */
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
})).isRequired,
choices: PropTypes.arrayOf(
PropTypes.shape({
/** Choice lable . */
label: PropTypes.oneOfType([
PropTypes.string,
PropTypes.element,
PropTypes.node,
PropTypes.arrayOf(PropTypes.node),
]).isRequired,
/** Choice value . */
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
.isRequired,
})
).isRequired,
/** Initial value . */
value: PropTypes.string,
/** Help text message . */
helpText: PropTypes.string,
};
export function RadioSet({
name, label, choices, value, helpText, ...props
}) {
export function RadioSet({ name, label, choices, value, helpText, ...props }) {
const uid = useUID();
const radios = choices.map((choice, key) => {
const id = `${name}-${key}`;
@ -47,7 +48,6 @@ export function RadioSet({
value={choice.value}
helpText={choice.helpText}
checked={choice.value === value}
{...props}
/>
);
@ -55,9 +55,15 @@ export function RadioSet({
return (
<div className="form-group">
{label && <label htmlFor={uid} className="d-block">{label}</label>}
{label && (
<label htmlFor={uid} className="d-block">
{label}
</label>
)}
{radios}
{helpText && <small className="form-text text-muted">{helpText}</small>}
{helpText && (
<small className="form-text text-muted">{helpText}</small>
)}
</div>
);
}
@ -73,21 +79,28 @@ Radio.propTypes = {
helpText: PropTypes.string,
};
export function Radio({
label, id, helpText, ...props
}) {
export function Radio({ label, id, helpText, ...props }) {
return (
<>
<div className={`custom-control custom-radio ${!helpText ? "custom-control-inline" : ""}`.trim()}>
<div
className={`custom-control custom-radio ${
!helpText ? "custom-control-inline" : ""
}`.trim()}
>
<input
id={id}
className="custom-control-input"
type="radio"
{...props}
/>
<label className="custom-control-label" htmlFor={id}>{label}</label>
{helpText && <small className="form-text text-muted mt-0 mb-3">{helpText}</small>}
<label className="custom-control-label" htmlFor={id}>
{label}
</label>
{helpText && (
<small className="form-text text-muted mt-0 mb-3">
{helpText}
</small>
)}
</div>
</>
);

19
src/bootstrap/RadioSet.md
View File

@ -1,15 +1,16 @@
Set of radio Bootstrap component input with label and predefined sizes and structure for using in foris forms.
Set of radio Bootstrap component input with label and predefined sizes and
structure for using in foris forms.
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=[
{value:'one',label:'1'},
{value:'two',label:'2'},
{value:'three',label:'3'},
import { useState } from "react";
const CHOICES = [
{ value: "one", label: "1" },
{ value: "two", label: "2" },
{ value: "three", label: "3" },
];
const [value, setValue] = useState(CHOICES[0].value);
@ -17,10 +18,10 @@ const [value, setValue] = useState(CHOICES[0].value);
{/*Yeah, it gets event, not value!*/}
<RadioSet
value={value}
name='some-radio'
name="some-radio"
choices={CHOICES}
onChange={event =>setValue(event.target.value)}
onChange={(event) => setValue(event.target.value)}
/>
<p>Selected value: {value}</p>
</>
</>;
```

31
src/bootstrap/Select.js
View File

@ -15,35 +15,30 @@ Select.propTypes = {
/** Choices if form of {value : "Label",...}. */
choices: PropTypes.object.isRequired,
/** Current value. */
value: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]).isRequired,
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
/** Help text message. */
helpText: PropTypes.string,
};
export function Select({
label, choices, helpText, ...props
}) {
export function Select({ label, choices, helpText, ...props }) {
const uid = useUID();
const options = Object.keys(choices).sort(
(a, b) => a - b || a.toString().localeCompare(b.toString()),
).map(
(key) => <option key={key} value={key}>{choices[key]}</option>,
);
const options = Object.keys(choices)
.sort((a, b) => a - b || a.toString().localeCompare(b.toString()))
.map((key) => (
<option key={key} value={key}>
{choices[key]}
</option>
));
return (
<div className="form-group">
<label htmlFor={uid}>{label}</label>
<select
className="custom-select"
id={uid}
{...props}
>
<select className="custom-select" id={uid} {...props}>
{options}
</select>
{helpText ? <small className="form-text text-muted">{helpText}</small> : null}
{helpText ? (
<small className="form-text text-muted">{helpText}</small>
) : null}
</div>
);
}

17
src/bootstrap/Select.md
View File

@ -1,13 +1,14 @@
Select with options Bootstrap component input with label and predefined sizes and structure for using in foris forms.
Select with options Bootstrap component input with label and predefined sizes
and structure for using in foris forms.
All additional `props` are passed to the `<select>` HTML component.
```js
import {useState} from 'react';
const CHOICES={
apple:'Apple',
banana:'Banana',
peach:'Peach',
import { useState } from "react";
const CHOICES = {
apple: "Apple",
banana: "Banana",
peach: "Peach",
};
const [value, setValue] = useState(Object.keys(CHOICES)[0]);
@ -17,9 +18,9 @@ const [value, setValue] = useState(Object.keys(CHOICES)[0]);
label="Fruit"
value={value}
choices={CHOICES}
onChange={event=>setValue(event.target.value)}
onChange={(event) => setValue(event.target.value)}
/>
<p>Selected choice label: {CHOICES[value]}</p>
<p>Selected choice value: {value}</p>
</>
</>;
```

2
src/bootstrap/Spinner.css
View File

@ -5,7 +5,7 @@
}
.spinner-fs-background {
background-color: rgba(2, 2, 2, .5);
background-color: rgba(2, 2, 2, 0.5);
color: rgb(230, 230, 230);
position: fixed;
width: 100%;

12
src/bootstrap/Spinner.js
View File

@ -25,12 +25,12 @@ Spinner.defaultProps = {
fullScreen: false,
};
export function Spinner({
fullScreen, children, className,
}) {
export function Spinner({ fullScreen, children, className }) {
if (!fullScreen) {
return (
<div className={`spinner-wrapper ${className || "my-3 text-center"}`}>
<div
className={`spinner-wrapper ${className || "my-3 text-center"}`}
>
<SpinnerElement>{children}</SpinnerElement>
</div>
);
@ -61,7 +61,9 @@ export function SpinnerElement({ small, className, children }) {
return (
<>
<div
className={`spinner-border ${small ? "spinner-border-sm" : ""} ${className || ""}`.trim()}
className={`spinner-border ${
small ? "spinner-border-sm" : ""
} ${className || ""}`.trim()}
role="status"
>
<span className="sr-only" />

49
src/bootstrap/Switch.js Normal file
View File

@ -0,0 +1,49 @@
/*
* Copyright (c) 2020 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 { useUID } from "react-uid";
Switch.propTypes = {
label: PropTypes.oneOfType([
PropTypes.string,
PropTypes.element,
PropTypes.node,
PropTypes.arrayOf(PropTypes.node),
]).isRequired,
helpText: PropTypes.string,
switchHeading: PropTypes.bool,
};
export function Switch({ label, helpText, switchHeading, ...props }) {
const uid = useUID();
return (
<div className="form-group">
<div
className={`custom-control custom-switch ${
!helpText ? "custom-control-inline" : ""
} ${switchHeading ? "switch-heading" : ""}`.trim()}
>
<input
type="checkbox"
className="custom-control-input"
id={uid}
{...props}
/>
<label className="custom-control-label" htmlFor={uid}>
{label}
</label>
{helpText && (
<small className="form-text text-muted mt-0 mb-3">
{helpText}
</small>
)}
</div>
</div>
);
}

13
src/bootstrap/TextInput.md
View File

@ -1,15 +1,16 @@
Text Bootstrap component input with label and predefined sizes and structure for using in foris forms.
Text Bootstrap component input with label and predefined sizes and structure for
using in foris forms.
All additional `props` are passed to the `<input type="text">` HTML component.
```js
import {useState} from 'react';
const [value, setValue] = useState('Bla bla');
import { useState } from "react";
const [value, setValue] = useState("Bla bla");
<TextInput
value={value}
label="Some text"
label="Some text"
helpText="Read the small text!"
onChange={event =>setValue(event.target.value)}
/>
onChange={(event) => setValue(event.target.value)}
/>;
```

13
src/bootstrap/__tests__/Button.test.js
View File

@ -14,19 +14,18 @@ import { Button } from "../Button";
describe("<Button />", () => {
it("Render button correctly", () => {
const { container } = render(<Button>Test Button</Button>);
expect(container.firstChild)
.toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
it("Render button with custom classes", () => {
const { container } = render(<Button className="one two three">Test Button</Button>);
expect(container.firstChild)
.toMatchSnapshot();
const { container } = render(
<Button className="one two three">Test Button</Button>
);
expect(container.firstChild).toMatchSnapshot();
});
it("Render button with spinner", () => {
const { container } = render(<Button loading>Test Button</Button>);
expect(container.firstChild)
.toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
});

16
src/bootstrap/__tests__/CheckBox.test.js
View File

@ -18,22 +18,16 @@ describe("<Checkbox/>", () => {
label="Test label"
checked
helpText="Some help text"
onChange={() => {
}}
/>,
onChange={() => {}}
/>
);
expect(container.firstChild)
.toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
it("Render uncheked checkbox", () => {
const { container } = render(
<CheckBox
label="Test label"
helpText="Some help text"
/>,
<CheckBox label="Test label" helpText="Some help text" />
);
expect(container.firstChild)
.toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
});

6
src/bootstrap/__tests__/DownloadButton.test.js
View File

@ -13,7 +13,11 @@ import { DownloadButton } from "../DownloadButton";
describe("<DownloadButton />", () => {
it("should have download attribute", () => {
const { container } = render(<DownloadButton href="http://example.com">Test Button</DownloadButton>);
const { container } = render(
<DownloadButton href="http://example.com">
Test Button
</DownloadButton>
);
expect(container.firstChild.getAttribute("download")).not.toBeNull();
});
});

14
src/bootstrap/__tests__/NumberInput.test.js
View File

@ -7,9 +7,7 @@
import React from "react";
import {
render, fireEvent, getByLabelText, wait,
} from "customTestRender";
import { render, fireEvent, getByLabelText, wait } from "customTestRender";
import { NumberInput } from "../NumberInput";
@ -24,7 +22,7 @@ describe("<NumberInput/>", () => {
helpText="Some help text"
value={1}
onChange={onChangeMock}
/>,
/>
);
componentContainer = container;
});
@ -36,12 +34,16 @@ describe("<NumberInput/>", () => {
it("Increase number with button", async () => {
const increaseButton = getByLabelText(componentContainer, "Increase");
fireEvent.mouseDown(increaseButton);
await wait(() => expect(onChangeMock).toHaveBeenCalledWith({ target: { value: 2 } }));
await wait(() =>
expect(onChangeMock).toHaveBeenCalledWith({ target: { value: 2 } })
);
});
it("Decrease number with button", async () => {
const decreaseButton = getByLabelText(componentContainer, "Decrease");
fireEvent.mouseDown(decreaseButton);
await wait(() => expect(onChangeMock).toHaveBeenCalledWith({ target: { value: 0 } }));
await wait(() =>
expect(onChangeMock).toHaveBeenCalledWith({ target: { value: 0 } })
);
});
});

8
src/bootstrap/__tests__/PasswordInput.test.js
View File

@ -18,11 +18,9 @@ describe("<PasswordInput/>", () => {
label="Test label"
helpText="Some help text"
value="Some password"
onChange={() => {
}}
/>,
onChange={() => {}}
/>
);
expect(container.firstChild)
.toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
});

8
src/bootstrap/__tests__/RadioSet.test.js
View File

@ -35,11 +35,9 @@ describe("<RadioSet/>", () => {
value="value"
choices={TEST_CHOICES}
helpText="Some help text"
onChange={() => {
}}
/>,
onChange={() => {}}
/>
);
expect(container.firstChild)
.toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
});

20
src/bootstrap/__tests__/Select.test.js
View File

@ -8,7 +8,10 @@
import React from "react";
import {
fireEvent, getByDisplayValue, getByText, render,
fireEvent,
getByDisplayValue,
getByText,
render,
} from "customTestRender";
import { Select } from "../Select";
@ -29,29 +32,24 @@ describe("<Select/>", () => {
value="1"
choices={TEST_CHOICES}
helpText="Help text"
onChange={onChangeHandler}
/>,
/>
);
selectContainer = container;
});
it("Test with snapshot.", () => {
expect(selectContainer)
.toMatchSnapshot();
expect(selectContainer).toMatchSnapshot();
});
it("Test onChange handling.", () => {
const select = getByDisplayValue(selectContainer, "one");
expect(select.value)
.toBe("1");
expect(select.value).toBe("1");
fireEvent.change(select, { target: { value: "2" } });
const option = getByText(selectContainer, "two");
expect(onChangeHandler)
.toBeCalled();
expect(onChangeHandler).toBeCalled();
expect(option.value)
.toBe("2");
expect(option.value).toBe("2");
});
});

33
src/bootstrap/__tests__/Switch.test.js Normal file
View File

@ -0,0 +1,33 @@
/*
* Copyright (C) 2020 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 { Switch } from "../Switch";
describe("<Switch/>", () => {
it("Render switch", () => {
const { container } = render(
<Switch
label="Test label"
checked
helpText="Some help text"
onChange={() => {}}
/>
);
expect(container.firstChild).toMatchSnapshot();
});
it("Render uncheked switch", () => {
const { container } = render(
<Switch label="Test label" helpText="Some help text" />
);
expect(container.firstChild).toMatchSnapshot();
});
});

8
src/bootstrap/__tests__/TextInput.test.js
View File

@ -18,11 +18,9 @@ describe("<TextInput/>", () => {
label="Test label"
helpText="Some help text"
value="Some text"
onChange={() => {
}}
/>,
onChange={() => {}}
/>
);
expect(container.firstChild)
.toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
});

6
src/bootstrap/__tests__/__snapshots__/Button.test.js.snap
View File

@ -5,8 +5,6 @@ exports[`<Button /> Render button correctly 1`] = `
class="btn btn-primary "
type="button"
>
Test Button
</button>
`;
@ -16,8 +14,6 @@ exports[`<Button /> Render button with custom classes 1`] = `
class="btn one two three"
type="button"
>
Test Button
</button>
`;
@ -33,8 +29,6 @@ exports[`<Button /> Render button with spinner 1`] = `
role="status"
/>
Test Button
</button>
`;

56
src/bootstrap/__tests__/__snapshots__/Switch.test.js.snap Normal file
View File

@ -0,0 +1,56 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Switch/> Render switch 1`] = `
<div
class="form-group"
>
<div
class="custom-control custom-switch"
>
<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>
</div>
`;
exports[`<Switch/> Render uncheked switch 1`] = `
<div
class="form-group"
>
<div
class="custom-control custom-switch"
>
<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>
</div>
`;

3
src/bootstrap/constants.js
View File

@ -7,4 +7,5 @@
/** 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 p-0 mb-3";
export const formFieldsSize = "card p-4 col-sm-12 col-lg-12 p-0 mb-3";
export const buttonFormFieldsSize = "col-sm-12 col-lg-12 p-0 mb-3";

23
src/common/RebootButton.js
View File

@ -13,15 +13,9 @@ 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 { Modal, ModalHeader, ModalBody, ModalFooter } from "../bootstrap/Modal";
import { useAlert } from "../alertContext/AlertContext";
RebootButton.propTypes = {
forisFormSize: PropTypes.bool,
};
export function RebootButton(props) {
const [triggered, setTriggered] = useState(false);
const [modalShown, setModalShown] = useState(false);
@ -42,13 +36,16 @@ export function RebootButton(props) {
return (
<>
<RebootModal shown={modalShown} setShown={setModalShown} onReboot={rebootHandler} />
<RebootModal
shown={modalShown}
setShown={setModalShown}
onReboot={rebootHandler}
/>
<Button
className="btn-danger"
loading={triggered}
disabled={triggered}
onClick={() => setModalShown(true)}
{...props}
>
{_("Reboot")}
@ -67,10 +64,14 @@ function RebootModal({ shown, setShown, onReboot }) {
return (
<Modal shown={shown} setShown={setShown}>
<ModalHeader setShown={setShown} title={_("Reboot confirmation")} />
<ModalBody><p>{_("Are you sure you want to restart the router?")}</p></ModalBody>
<ModalBody>
<p>{_("Are you sure you want to restart the router?")}</p>
</ModalBody>
<ModalFooter>
<Button onClick={() => setShown(false)}>{_("Cancel")}</Button>
<Button className="btn-danger" onClick={onReboot}>{_("Confirm reboot")}</Button>
<Button className="btn-danger" onClick={onReboot}>
{_("Confirm reboot")}
</Button>
</ModalFooter>
</Modal>
);

21
src/common/WiFiSettings/ResetWiFiSettings.js
View File

@ -13,7 +13,7 @@ import { useAlert } from "../../alertContext/AlertContext";
import { ALERT_TYPES } from "../../bootstrap/Alert";
import { useAPIPost } from "../../api/hooks";
import { API_STATE } from "../../api/utils";
import { formFieldsSize } from "../../bootstrap/constants";
import { buttonFormFieldsSize } from "../../bootstrap/constants";
ResetWiFiSettings.propTypes = {
ws: PropTypes.object.isRequired,
@ -25,11 +25,10 @@ export default function ResetWiFiSettings({ ws, endpoint }) {
useEffect(() => {
const module = "wifi";
ws.subscribe(module)
.bind(module, "reset", () => {
// eslint-disable-next-line no-restricted-globals
setTimeout(() => location.reload(), 1000);
});
ws.subscribe(module).bind(module, "reset", () => {
// eslint-disable-next-line no-restricted-globals
setTimeout(() => location.reload(), 1000);
});
}, [ws]);
const [postResetResponse, postReset] = useAPIPost(endpoint);
@ -38,7 +37,10 @@ export default function ResetWiFiSettings({ ws, endpoint }) {
if (postResetResponse.state === API_STATE.ERROR) {
setAlert(_("An error occurred during resetting Wi-Fi settings."));
} else if (postResetResponse.state === API_STATE.SUCCESS) {
setAlert(_("Wi-Fi settings are set to defaults."), ALERT_TYPES.SUCCESS);
setAlert(
_("Wi-Fi settings are set to defaults."),
ALERT_TYPES.SUCCESS
);
}
}, [postResetResponse, setAlert]);
@ -50,20 +52,19 @@ export default function ResetWiFiSettings({ ws, endpoint }) {
return (
<>
<h4>{_("Reset Wi-Fi Settings")}</h4>
<h2>{_("Reset Wi-Fi Settings")}</h2>
<p>
{_(`
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={`${formFieldsSize} text-right`}>
<div className={`${buttonFormFieldsSize} text-right`}>
<Button
className="btn-warning"
forisFormSize
loading={isLoading}
disabled={isLoading}
onClick={onReset}
>
{_("Reset Wi-Fi Settings")}

277
src/common/WiFiSettings/WiFiForm.js
View File

@ -7,7 +7,7 @@
import React from "react";
import PropTypes from "prop-types";
import { Switch } from "../../bootstrap/Switch";
import { CheckBox } from "../../bootstrap/CheckBox";
import { PasswordInput } from "../../bootstrap/PasswordInput";
import { RadioSet } from "../../bootstrap/RadioSet";
@ -18,25 +18,25 @@ import WifiGuestForm from "./WiFiGuestForm";
import { HELP_TEXTS, HTMODES, HWMODES } from "./constants";
WiFiForm.propTypes = {
formData: PropTypes.shape(
{ devices: PropTypes.arrayOf(PropTypes.object) },
).isRequired,
formErrors: PropTypes.oneOfType([
PropTypes.object,
PropTypes.array,
]),
formData: PropTypes.shape({ devices: PropTypes.arrayOf(PropTypes.object) })
.isRequired,
formErrors: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
setFormValue: PropTypes.func.isRequired,
hasGuestNetwork: PropTypes.bool,
};
WiFiForm.defaultProps = {
formData: { devices: [] },
setFormValue: () => { },
setFormValue: () => {},
hasGuestNetwork: true,
};
export default function WiFiForm({
formData, formErrors, setFormValue, hasGuestNetwork, disabled,
formData,
formErrors,
setFormValue,
hasGuestNetwork,
disabled,
}) {
return formData.devices.map((device, index) => (
<DeviceForm
@ -47,6 +47,7 @@ export default function WiFiForm({
setFormValue={setFormValue}
hasGuestNetwork={hasGuestNetwork}
disabled={disabled}
divider={index + 1 !== formData.devices.length}
/>
));
}
@ -67,6 +68,7 @@ DeviceForm.propTypes = {
setFormValue: PropTypes.func.isRequired,
hasGuestNetwork: PropTypes.bool,
deviceIndex: PropTypes.number,
divider: PropTypes.bool,
};
DeviceForm.defaultProps = {
@ -75,144 +77,135 @@ DeviceForm.defaultProps = {
};
function DeviceForm({
formData, formErrors, setFormValue, hasGuestNetwork, deviceIndex, ...props
formData,
formErrors,
setFormValue,
hasGuestNetwork,
deviceIndex,
divider,
...props
}) {
const deviceID = formData.id;
return (
<>
<h3>{_(`Wi-Fi ${deviceID + 1}`)}</h3>
<CheckBox
label={_("Enable")}
<Switch
label={<h2>{_(`Wi-Fi ${deviceID + 1}`)}</h2>}
checked={formData.enabled}
onChange={setFormValue(
(value) => ({ devices: { [deviceIndex]: { enabled: { $set: value } } } }),
)}
onChange={setFormValue((value) => ({
devices: {
[deviceIndex]: { enabled: { $set: value } },
},
}))}
switchHeading
{...props}
/>
{formData.enabled
? (
<>
<TextInput
label="SSID"
value={formData.SSID}
error={formErrors.SSID || null}
required
onChange={setFormValue(
(value) => ({
devices: {
[deviceIndex]: {
SSID: { $set: value },
},
},
}),
)}
{...props}
>
<div className="input-group-append">
<WiFiQRCode
SSID={formData.SSID}
password={formData.password}
/>
</div>
</TextInput>
<PasswordInput
withEye
label="Password"
value={formData.password}
error={formErrors.password}
helpText={HELP_TEXTS.password}
required
onChange={setFormValue(
(value) => (
{ devices: { [deviceIndex]: { password: { $set: value } } } }
),
)}
{...props}
/>
<CheckBox
label="Hide SSID"
helpText={HELP_TEXTS.hidden}
checked={formData.hidden}
onChange={setFormValue(
(value) => (
{ devices: { [deviceIndex]: { hidden: { $set: value } } } }
),
)}
{...props}
/>
<RadioSet
name={`hwmode-${deviceID}`}
label="GHz"
choices={getHwmodeChoices(formData)}
value={formData.hwmode}
helpText={HELP_TEXTS.hwmode}
onChange={setFormValue(
(value) => ({
devices: {
[deviceIndex]: {
hwmode: { $set: value },
channel: { $set: "0" },
},
},
}),
)}
{...props}
/>
<Select
label="802.11n/ac mode"
choices={getHtmodeChoices(formData)}
value={formData.htmode}
helpText={HELP_TEXTS.htmode}
onChange={setFormValue(
(value) => (
{ devices: { [deviceIndex]: { htmode: { $set: value } } } }
),
)}
{...props}
/>
<Select
label="Channel"
choices={getChannelChoices(formData)}
value={formData.channel}
onChange={setFormValue(
(value) => (
{ devices: { [deviceIndex]: { channel: { $set: value } } } }
),
)}
{...props}
/>
{hasGuestNetwork && (
<WifiGuestForm
formData={{ id: deviceIndex, ...formData.guest_wifi }}
formErrors={formErrors.guest_wifi || {}}
setFormValue={setFormValue}
{...props}
{formData.enabled ? (
<>
<TextInput
label="SSID"
value={formData.SSID}
error={formErrors.SSID || null}
required
onChange={setFormValue((value) => ({
devices: {
[deviceIndex]: {
SSID: { $set: value },
},
},
}))}
{...props}
>
<div className="input-group-append">
<WiFiQRCode
SSID={formData.SSID}
password={formData.password}
/>
)}
</>
)
: null}
</div>
</TextInput>
<PasswordInput
withEye
label="Password"
value={formData.password}
error={formErrors.password}
helpText={HELP_TEXTS.password}
required
onChange={setFormValue((value) => ({
devices: {
[deviceIndex]: { password: { $set: value } },
},
}))}
{...props}
/>
<CheckBox
label="Hide SSID"
helpText={HELP_TEXTS.hidden}
checked={formData.hidden}
onChange={setFormValue((value) => ({
devices: {
[deviceIndex]: { hidden: { $set: value } },
},
}))}
{...props}
/>
<RadioSet
name={`hwmode-${deviceID}`}
label="GHz"
choices={getHwmodeChoices(formData)}
value={formData.hwmode}
helpText={HELP_TEXTS.hwmode}
onChange={setFormValue((value) => ({
devices: {
[deviceIndex]: {
hwmode: { $set: value },
channel: { $set: "0" },
},
},
}))}
{...props}
/>
<Select
label="802.11n/ac mode"
choices={getHtmodeChoices(formData)}
value={formData.htmode}
helpText={HELP_TEXTS.htmode}
onChange={setFormValue((value) => ({
devices: {
[deviceIndex]: { htmode: { $set: value } },
},
}))}
{...props}
/>
<Select
label="Channel"
choices={getChannelChoices(formData)}
value={formData.channel}
onChange={setFormValue((value) => ({
devices: {
[deviceIndex]: { channel: { $set: value } },
},
}))}
{...props}
/>
{hasGuestNetwork && (
<WifiGuestForm
formData={{
id: deviceIndex,
...formData.guest_wifi,
}}
formErrors={formErrors.guest_wifi || {}}
setFormValue={setFormValue}
{...props}
/>
)}
</>
) : null}
{divider ? <hr /> : null}
</>
);
}
@ -228,7 +221,9 @@ function getChannelChoices(device) {
availableBand.available_channels.forEach((availableChannel) => {
channelChoices[availableChannel.number.toString()] = `
${availableChannel.number}
(${availableChannel.frequency} MHz ${availableChannel.radar ? " ,DFS" : ""})
(${availableChannel.frequency} MHz ${
availableChannel.radar ? " ,DFS" : ""
})
`;
});
});

115
src/common/WiFiSettings/WiFiGuestForm.js
View File

@ -8,8 +8,8 @@
import React from "react";
import PropTypes from "prop-types";
import { CheckBox } from "../../bootstrap/CheckBox";
import { TextInput } from "../../bootstrap/TextInput";
import { Switch } from "../../bootstrap/Switch";
import { PasswordInput } from "../../bootstrap/PasswordInput";
import WiFiQRCode from "./WiFiQRCode";
import { HELP_TEXTS } from "./constants";
@ -26,75 +26,72 @@ WifiGuestForm.propTypes = {
password: PropTypes.string,
}),
setFormValue: PropTypes.func.isRequired,
deviceIndex: PropTypes.string,
};
export default function WifiGuestForm({
formData, formErrors, setFormValue, ...props
formData,
formErrors,
setFormValue,
deviceIndex,
...props
}) {
return (
<>
<CheckBox
label={_("Enable Guest Wifi")}
<Switch
label={_("Enable Guest Wi-Fi")}
checked={formData.enabled}
helpText={HELP_TEXTS.guest_wifi_enabled}
onChange={setFormValue(
(value) => (
{ devices: { [formData.id]: { guest_wifi: { enabled: { $set: value } } } } }
),
)}
onChange={setFormValue((value) => ({
devices: {
[formData.id]: {
guest_wifi: { enabled: { $set: value } },
},
},
}))}
{...props}
/>
{formData.enabled
? (
<>
<TextInput
label="SSID"
value={formData.SSID}
error={formErrors.SSID}
{formData.enabled ? (
<>
<TextInput
label="SSID"
value={formData.SSID}
error={formErrors.SSID}
onChange={setFormValue((value) => ({
devices: {
[formData.id]: {
guest_wifi: { SSID: { $set: value } },
},
},
}))}
{...props}
>
<div className="input-group-append">
<WiFiQRCode
SSID={formData.SSID}
password={formData.password}
/>
</div>
</TextInput>
onChange={setFormValue(
(value) => ({
devices: {
[formData.id]: { guest_wifi: { SSID: { $set: value } } },
},
}),
)}
{...props}
>
<div className="input-group-append">
<WiFiQRCode
SSID={formData.SSID}
password={formData.password}
/>
</div>
</TextInput>
<PasswordInput
withEye
label={_("Password")}
value={formData.password}
helpText={HELP_TEXTS.password}
error={formErrors.password}
required
onChange={setFormValue(
(value) => ({
devices: {
[formData.id]: {
guest_wifi: { password: { $set: value } },
},
},
}),
)}
{...props}
/>
</>
)
: null}
<PasswordInput
withEye
label={_("Password")}
value={formData.password}
helpText={HELP_TEXTS.password}
error={formErrors.password}
required
onChange={setFormValue((value) => ({
devices: {
[formData.id]: {
guest_wifi: { password: { $set: value } },
},
},
}))}
{...props}
/>
</>
) : null}
</>
);
}

27
src/common/WiFiSettings/WiFiQRCode.js
View File

@ -12,7 +12,10 @@ import PropTypes from "prop-types";
import { ForisURLs } from "../../utils/forisUrls";
import { Button } from "../../bootstrap/Button";
import {
Modal, ModalBody, ModalFooter, ModalHeader,
Modal,
ModalBody,
ModalFooter,
ModalHeader,
} from "../../bootstrap/Modal";
import { createAndDownloadPdf, toQRCodeContent } from "./qrCodeHelpers";
@ -36,11 +39,21 @@ export default function WiFiQRCode({ SSID, password }) {
setModal(true);
}}
>
<img width="20" src={QR_ICON_PATH} alt="QR" style={{ opacity: 0.67 }} />
<img
width="20"
src={QR_ICON_PATH}
alt="QR"
style={{ opacity: 0.67 }}
/>
</button>
{modal
? <QRCodeModal setShown={setModal} shown={modal} SSID={SSID} password={password} />
: null}
{modal ? (
<QRCodeModal
setShown={setModal}
shown={modal}
SSID={SSID}
password={password}
/>
) : null}
</>
);
}
@ -52,9 +65,7 @@ QRCodeModal.propTypes = {
setShown: PropTypes.func.isRequired,
};
function QRCodeModal({
shown, setShown, SSID, password,
}) {
function QRCodeModal({ shown, setShown, SSID, password }) {
return (
<Modal setShown={setShown} shown={shown}>
<ModalHeader setShown={setShown} title={_("Wi-Fi QR Code")} />

48
src/common/WiFiSettings/WiFiSettings.js
View File

@ -19,9 +19,7 @@ WiFiSettings.propTypes = {
hasGuestNetwork: PropTypes.bool,
};
export function WiFiSettings({
ws, endpoint, resetEndpoint, hasGuestNetwork,
}) {
export function WiFiSettings({ ws, endpoint, resetEndpoint, hasGuestNetwork }) {
return (
<>
<ForisForm
@ -59,35 +57,41 @@ function prepDataToSubmit(formData) {
return;
}
if (!device.guest_wifi.enabled) formData.devices[idx].guest_wifi = { enabled: false };
if (!device.guest_wifi.enabled)
formData.devices[idx].guest_wifi = { enabled: false };
});
return formData;
}
export function validator(formData) {
const formErrors = formData.devices.map(
(device) => {
if (!device.enabled) return {};
const formErrors = formData.devices.map((device) => {
if (!device.enabled) return {};
const errors = {};
if (device.SSID.length > 32) errors.SSID = _("SSID can't be longer than 32 symbols");
if (device.SSID.length === 0) errors.SSID = _("SSID can't be empty");
const errors = {};
if (device.SSID.length > 32)
errors.SSID = _("SSID can't be longer than 32 symbols");
if (device.SSID.length === 0) errors.SSID = _("SSID can't be empty");
if (device.password.length < 8) errors.password = _("Password must contain at least 8 symbols");
if (device.password.length < 8)
errors.password = _("Password must contain at least 8 symbols");
if (!device.guest_wifi.enabled) return errors;
if (!device.guest_wifi.enabled) return errors;
const guest_wifi_errors = {};
if (device.guest_wifi.SSID.length > 32) guest_wifi_errors.SSID = _("SSID can't be longer than 32 symbols");
if (device.guest_wifi.SSID.length === 0) guest_wifi_errors.SSID = _("SSID can't be empty");
const guest_wifi_errors = {};
if (device.guest_wifi.SSID.length > 32)
guest_wifi_errors.SSID = _("SSID can't be longer than 32 symbols");
if (device.guest_wifi.SSID.length === 0)
guest_wifi_errors.SSID = _("SSID can't be empty");
if (device.guest_wifi.password.length < 8) guest_wifi_errors.password = _("Password must contain at least 8 symbols");
if (device.guest_wifi.password.length < 8)
guest_wifi_errors.password = _(
"Password must contain at least 8 symbols"
);
if (guest_wifi_errors.SSID || guest_wifi_errors.password) {
errors.guest_wifi = guest_wifi_errors;
}
return errors;
},
);
if (guest_wifi_errors.SSID || guest_wifi_errors.password) {
errors.guest_wifi = guest_wifi_errors;
}
return errors;
});
return JSON.stringify(formErrors).match(/\[[{},?]+\]/) ? null : formErrors;
}

23
src/common/WiFiSettings/__tests__/ResetWiFiSettings.test.js
View File

@ -22,19 +22,34 @@ describe("<ResetWiFiSettings/>", () => {
let getAllByText;
beforeEach(() => {
({ getAllByText } = render(<ResetWiFiSettings ws={webSockets} endpoint={endpoint} />));
({ getAllByText } = render(
<ResetWiFiSettings ws={webSockets} endpoint={endpoint} />
));
});
it("should display alert on open ports - success", async () => {
fireEvent.click(getAllByText("Reset Wi-Fi Settings")[1]);
expect(mockAxios.post).toBeCalledWith(endpoint, undefined, expect.anything());
expect(mockAxios.post).toBeCalledWith(
endpoint,
undefined,
expect.anything()
);
mockAxios.mockResponse({ data: { foo: "bar" } });
await wait(() => expect(mockSetAlert).toBeCalledWith("Wi-Fi settings are set to defaults.", ALERT_TYPES.SUCCESS));
await wait(() =>
expect(mockSetAlert).toBeCalledWith(
"Wi-Fi settings are set to defaults.",
ALERT_TYPES.SUCCESS
)
);
});
it("should display alert on open ports - failure", async () => {
fireEvent.click(getAllByText("Reset Wi-Fi Settings")[1]);
mockJSONError();
await wait(() => expect(mockSetAlert).toBeCalledWith("An error occurred during resetting Wi-Fi settings."));
await wait(() =>
expect(mockSetAlert).toBeCalledWith(
"An error occurred during resetting Wi-Fi settings."
)
);
});
});

80
src/common/WiFiSettings/__tests__/WiFiSettings.test.js
View File

@ -13,7 +13,12 @@ import { fireEvent, render, wait } from "customTestRender";
import { WebSockets } from "webSockets/WebSockets";
import { mockJSONError } from "testUtils/network";
import { wifiSettingsFixture, oneDevice, twoDevices, threeDevices } from "./__fixtures__/wifiSettings";
import {
wifiSettingsFixture,
oneDevice,
twoDevices,
threeDevices,
} from "./__fixtures__/wifiSettings";
import { WiFiSettings, validator } from "../WiFiSettings";
describe("<WiFiSettings/>", () => {
@ -26,7 +31,13 @@ describe("<WiFiSettings/>", () => {
beforeEach(async () => {
const webSockets = new WebSockets();
const renderRes = render(<WiFiSettings ws={webSockets} endpoint={endpoint} resetEndpoint="foo" />);
const renderRes = render(
<WiFiSettings
ws={webSockets}
endpoint={endpoint}
resetEndpoint="foo"
/>
);
asFragment = renderRes.asFragment;
getAllByText = renderRes.getAllByText;
getAllByLabelText = renderRes.getAllByLabelText;
@ -38,7 +49,14 @@ describe("<WiFiSettings/>", () => {
it("should handle error", async () => {
const webSockets = new WebSockets();
const { getByText } = render(<WiFiSettings ws={webSockets} ws={webSockets} endpoint={endpoint} resetEndpoint="foo" />);
const { getByText } = render(
<WiFiSettings
ws={webSockets}
ws={webSockets}
endpoint={endpoint}
resetEndpoint="foo"
/>
);
const errorMessage = "An API error occurred.";
mockJSONError(errorMessage);
await wait(() => {
@ -51,21 +69,21 @@ describe("<WiFiSettings/>", () => {
});
it("Snapshot one module enabled.", () => {
fireEvent.click(getAllByText("Enable")[0]);
fireEvent.click(getByText("Wi-Fi 1"));
expect(diffSnapshot(firstRender, asFragment())).toMatchSnapshot();
});
it("Snapshot 2.4 GHz", () => {
fireEvent.click(getAllByText("Enable")[0]);
fireEvent.click(getByText("Wi-Fi 1"));
const enabledRender = asFragment();
fireEvent.click(getAllByText("2.4")[0]);
expect(diffSnapshot(enabledRender, asFragment())).toMatchSnapshot();
});
it("Snapshot guest network.", () => {
fireEvent.click(getAllByText("Enable")[0]);
fireEvent.click(getByText("Wi-Fi 1"));
const enabledRender = asFragment();
fireEvent.click(getAllByText("Enable Guest Wifi")[0]);
fireEvent.click(getAllByText("Enable Guest Wi-Fi")[0]);
expect(diffSnapshot(enabledRender, asFragment())).toMatchSnapshot();
});
@ -78,11 +96,15 @@ describe("<WiFiSettings/>", () => {
{ enabled: false, id: 1 },
],
};
expect(mockAxios.post).toHaveBeenCalledWith(endpoint, data, expect.anything());
expect(mockAxios.post).toHaveBeenCalledWith(
endpoint,
data,
expect.anything()
);
});
it("Post form: one module enabled.", () => {
fireEvent.click(getAllByText("Enable")[0]);
fireEvent.click(getByText("Wi-Fi 1"));
fireEvent.click(getByText("Save"));
expect(mockAxios.post).toBeCalled();
@ -102,11 +124,15 @@ describe("<WiFiSettings/>", () => {
{ enabled: false, id: 1 },
],
};
expect(mockAxios.post).toHaveBeenCalledWith(endpoint, data, expect.anything());
expect(mockAxios.post).toHaveBeenCalledWith(
endpoint,
data,
expect.anything()
);
});
it("Post form: 2.4 GHz", () => {
fireEvent.click(getAllByText("Enable")[0]);
fireEvent.click(getByText("Wi-Fi 1"));
fireEvent.click(getAllByText("2.4")[0]);
fireEvent.click(getByText("Save"));
@ -127,13 +153,19 @@ describe("<WiFiSettings/>", () => {
{ enabled: false, id: 1 },
],
};
expect(mockAxios.post).toHaveBeenCalledWith(endpoint, data, expect.anything());
expect(mockAxios.post).toHaveBeenCalledWith(
endpoint,
data,
expect.anything()
);
});
it("Post form: guest network.", () => {
fireEvent.click(getAllByText("Enable")[0]);
fireEvent.click(getAllByText("Enable Guest Wifi")[0]);
fireEvent.change(getAllByLabelText("Password")[1], { target: { value: "test_password" } });
fireEvent.click(getByText("Wi-Fi 1"));
fireEvent.click(getAllByText("Enable Guest Wi-Fi")[0]);
fireEvent.change(getAllByLabelText("Password")[1], {
target: { value: "test_password" },
});
fireEvent.click(getByText("Save"));
expect(mockAxios.post).toBeCalled();
@ -157,20 +189,28 @@ describe("<WiFiSettings/>", () => {
{ enabled: false, id: 1 },
],
};
expect(mockAxios.post).toHaveBeenCalledWith(endpoint, data, expect.anything());
expect(mockAxios.post).toHaveBeenCalledWith(
endpoint,
data,
expect.anything()
);
});
it("Validator function using regex for one device", () => {
expect(validator(oneDevice)).toEqual(null);
it("Validator function using regex for one device", () => {
expect(validator(oneDevice)).toEqual(null);
});
it("Validator function using regex for two devices", () => {
const twoDevicesFormErrors = [{SSID: "SSID can't be empty"}, {}];
const twoDevicesFormErrors = [{ SSID: "SSID can't be empty" }, {}];
expect(validator(twoDevices)).toEqual(twoDevicesFormErrors);
});
it("Validator function using regex for three devices", () => {
const threeDevicesFormErrors = [{}, {}, {password: "Password must contain at least 8 symbols"}];
const threeDevicesFormErrors = [
{},
{},
{ password: "Password must contain at least 8 symbols" },
];
expect(validator(threeDevices)).toEqual(threeDevicesFormErrors);
});
});

32
src/common/WiFiSettings/__tests__/__fixtures__/wifiSettings.js
View File

@ -292,11 +292,7 @@ export function wifiSettingsFixture() {
radar: false,
},
],
available_htmodes: [
"NOHT",
"HT20",
"HT40",
],
available_htmodes: ["NOHT", "HT20", "HT40"],
hwmode: "11g",
},
],
@ -327,9 +323,9 @@ const oneDevice = {
htmode: "HT40",
hwmode: "11a",
id: 0,
password: "TestPass"
}
]
password: "TestPass",
},
],
};
const twoDevices = {
@ -343,7 +339,7 @@ const twoDevices = {
htmode: "HT40",
hwmode: "11a",
id: 0,
password: "TestPass"
password: "TestPass",
},
{
SSID: "Turris2",
@ -354,9 +350,9 @@ const twoDevices = {
htmode: "HT40",
hwmode: "11a",
id: 0,
password: "TestPass"
}
]
password: "TestPass",
},
],
};
const threeDevices = {
@ -370,7 +366,7 @@ const threeDevices = {
htmode: "HT40",
hwmode: "11a",
id: 0,
password: "TestPass"
password: "TestPass",
},
{
SSID: "Turris2",
@ -381,7 +377,7 @@ const threeDevices = {
htmode: "HT40",
hwmode: "11a",
id: 0,
password: "TestPass"
password: "TestPass",
},
{
SSID: "Turris3",
@ -392,9 +388,9 @@ const threeDevices = {
htmode: "HT40",
hwmode: "11a",
id: 0,
password: ""
}
]
password: "",
},
],
};
export {oneDevice, twoDevices, threeDevices};
export { oneDevice, twoDevices, threeDevices };

85
src/common/WiFiSettings/__tests__/__snapshots__/WiFiSettings.test.js.snap
View File

@ -5,7 +5,7 @@ exports[`<WiFiSettings/> Snapshot 2.4 GHz 1`] = `
- First value
+ Second value
@@ -246,207 +246,95 @@
@@ -245,207 +245,95 @@
value=\\"0\\"
>
auto
@ -251,17 +251,14 @@ exports[`<WiFiSettings/> Snapshot 2.4 GHz 1`] = `
exports[`<WiFiSettings/> Snapshot both modules disabled. 1`] = `
<DocumentFragment>
<div
class="col-sm-12 offset-lg-1 col-lg-10 p-0 mb-3"
class="card p-4 col-sm-12 col-lg-12 p-0 mb-3"
>
<form>
<h3>
Wi-Fi 1
</h3>
<div
class="form-group"
>
<div
class="custom-control custom-checkbox "
class="custom-control custom-switch custom-control-inline switch-heading"
>
<input
class="custom-control-input"
@ -272,18 +269,18 @@ exports[`<WiFiSettings/> Snapshot both modules disabled. 1`] = `
class="custom-control-label"
for="1"
>
Enable
<h2>
Wi-Fi 1
</h2>
</label>
</div>
</div>
<h3>
Wi-Fi 2
</h3>
<hr />
<div
class="form-group"
>
<div
class="custom-control custom-checkbox "
class="custom-control custom-switch custom-control-inline switch-heading"
>
<input
class="custom-control-input"
@ -294,7 +291,9 @@ exports[`<WiFiSettings/> Snapshot both modules disabled. 1`] = `
class="custom-control-label"
for="2"
>
Enable
<h2>
Wi-Fi 2
</h2>
</label>
</div>
</div>
@ -302,17 +301,17 @@ exports[`<WiFiSettings/> Snapshot both modules disabled. 1`] = `
class="text-right"
>
<button
class="btn btn-primary col-sm-12 col-lg-3"
class="btn btn-primary col-sm-12 col-md-3 col-lg-2"
type="submit"
>
Save
Save
</button>
</div>
</form>
</div>
<h4>
<h2>
Reset Wi-Fi Settings
</h4>
</h2>
<p>
If a number of wireless cards doesn't match, you may try to reset the Wi-Fi settings. Note that this will remove the
@ -320,13 +319,13 @@ current Wi-Fi configuration and restore the default values.
</p>
<div
class="col-sm-12 offset-lg-1 col-lg-10 p-0 mb-3 text-right"
class="col-sm-12 col-lg-12 p-0 mb-3 text-right"
>
<button
class="btn btn-warning col-sm-12 col-lg-3"
class="btn btn-warning col-sm-12 col-md-3 col-lg-2"
type="button"
>
Reset Wi-Fi Settings
Reset Wi-Fi Settings
</button>
</div>
</DocumentFragment>
@ -337,10 +336,10 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
- First value
+ Second value
@@ -475,10 +475,89 @@
@@ -474,10 +474,89 @@
Parameters of the guest network can be set in the Guest network tab.
</small>
</label>
</small>
</div>
</div>
+ <div
@ -422,21 +421,21 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
+
+ </small>
+ </div>
<h3>
Wi-Fi 2
</h3>
<hr />
<div
class=\\"form-group\\"
@@ -502,10 +581,11 @@
>
<div
@@ -501,10 +580,11 @@
<div
class=\\"text-right\\"
>
<button
class=\\"btn btn-primary col-sm-12 col-lg-3\\"
class=\\"btn btn-primary col-sm-12 col-md-3 col-lg-2\\"
+ disabled=\\"\\"
type=\\"submit\\"
>
Save
Save
</button>
</div>"
`;
@ -446,9 +445,9 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
- First value
+ Second value
@@ -23,10 +23,462 @@
>
Enable
@@ -22,10 +22,462 @@
Wi-Fi 1
</h2>
</label>
</div>
</div>
@ -880,7 +879,7 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
+ class=\\"form-group\\"
+ >
+ <div
+ class=\\"custom-control custom-checkbox \\"
+ class=\\"custom-control custom-switch\\"
+ >
+ <input
+ class=\\"custom-control-input\\"
@ -891,22 +890,22 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
+ class=\\"custom-control-label\\"
+ for=\\"10\\"
+ >
+ Enable Guest Wifi
+ <small
+ class=\\"form-text text-muted\\"
+ >
+
+ Enable Guest Wi-Fi
+ </label>
+ <small
+ class=\\"form-text text-muted mt-0 mb-3\\"
+ >
+
+ Enables Wi-Fi for guests, which is separated from LAN network. Devices connected to this network are allowed to
+ access the internet, but aren't allowed to access other devices and the configuration interface of the router.
+ Parameters of the guest network can be set in the Guest network tab.
+
+ </small>
+ </label>
+ </small>
+ </div>
+ </div>
<h3>
Wi-Fi 2
</h3>
<hr />
<div
class=\\"form-group\\""
class=\\"form-group\\"
>
<div"
`;

4
src/common/WiFiSettings/constants.js
View File

@ -22,7 +22,9 @@ export const HELP_TEXTS = {
password: _(`
WPA2 pre-shared key, that is required to connect to the network.
`),
hidden: _("If set, network is not visible when scanning for available networks."),
hidden: _(
"If set, network is not visible when scanning for available networks."
),
hwmode: _(`
The 2.4 GHz band is more widely supported by clients, but tends to have more interference. The 5 GHz band is a
newer standard and may not be supported by all your devices. It usually has less interference, but the signal

37
src/common/__tests__/RebootButton.test.js
View File

@ -8,7 +8,11 @@
import React from "react";
import {
fireEvent, getByText, queryByText, render, wait,
fireEvent,
getByText,
queryByText,
render,
wait,
} from "customTestRender";
import mockAxios from "jest-mock-axios";
import { mockJSONError } from "testUtils/network";
@ -19,38 +23,41 @@ import { RebootButton } from "../RebootButton";
describe("<RebootButton/>", () => {
let componentContainer;
beforeEach(() => {
const { container } = render(<>
<div id="modal-container" />
<RebootButton />
</>);
const { container } = render(
<>
<div id="modal-container" />
<RebootButton />
</>
);
componentContainer = container;
});
it("Render.", () => {
expect(componentContainer)
.toMatchSnapshot();
expect(componentContainer).toMatchSnapshot();
});
it("Render modal.", () => {
expect(queryByText(componentContainer, "Confirm reboot"))
.toBeNull();
expect(queryByText(componentContainer, "Confirm reboot")).toBeNull();
fireEvent.click(getByText(componentContainer, "Reboot"));
expect(componentContainer)
.toMatchSnapshot();
expect(componentContainer).toMatchSnapshot();
});
it("Confirm reboot.", () => {
fireEvent.click(getByText(componentContainer, "Reboot"));
fireEvent.click(getByText(componentContainer, "Confirm reboot"));
expect(mockAxios.post)
.toHaveBeenCalledWith("/reforis/api/reboot", undefined, expect.anything());
expect(mockAxios.post).toHaveBeenCalledWith(
"/reforis/api/reboot",
undefined,
expect.anything()
);
});
it("Hold error.", async () => {
fireEvent.click(getByText(componentContainer, "Reboot"));
fireEvent.click(getByText(componentContainer, "Confirm reboot"));
mockJSONError();
await wait(() => expect(mockSetAlert)
.toBeCalledWith("Reboot request failed."));
await wait(() =>
expect(mockSetAlert).toBeCalledWith("Reboot request failed.")
);
});
});

8
src/common/__tests__/__snapshots__/RebootButton.test.js.snap
View File

@ -49,16 +49,12 @@ exports[`<RebootButton/> Render modal. 1`] = `
class="btn btn-primary "
type="button"
>
Cancel
</button>
<button
class="btn btn-danger"
type="button"
>
Confirm reboot
</button>
</div>
@ -70,8 +66,6 @@ exports[`<RebootButton/> Render modal. 1`] = `
class="btn btn-danger"
type="button"
>
Reboot
</button>
</div>
@ -86,8 +80,6 @@ exports[`<RebootButton/> Render. 1`] = `
class="btn btn-danger"
type="button"
>
Reboot
</button>
</div>

9
src/form/__tests__/SubmitButton.test.js
View File

@ -13,17 +13,14 @@ import { STATES, SubmitButton } from "../components/SubmitButton";
describe("<SubmitButton/>", () => {
it("Render ready", () => {
const { container } = render(<SubmitButton state={STATES.READY} />);
expect(container)
.toMatchSnapshot();
expect(container).toMatchSnapshot();
});
it("Render saving", () => {
const { container } = render(<SubmitButton state={STATES.SAVING} />);
expect(container)
.toMatchSnapshot();
expect(container).toMatchSnapshot();
});
it("Render load", () => {
const { container } = render(<SubmitButton state={STATES.LOAD} />);
expect(container)
.toMatchSnapshot();
expect(container).toMatchSnapshot();
});
});

12
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 col-sm-12 col-lg-3"
class="btn btn-primary col-sm-12 col-md-3 col-lg-2"
disabled=""
type="submit"
>
@ -13,8 +13,6 @@ exports[`<SubmitButton/> Render load 1`] = `
role="status"
/>
Load settings
</button>
</div>
@ -23,11 +21,9 @@ exports[`<SubmitButton/> Render load 1`] = `
exports[`<SubmitButton/> Render ready 1`] = `
<div>
<button
class="btn btn-primary col-sm-12 col-lg-3"
class="btn btn-primary col-sm-12 col-md-3 col-lg-2"
type="submit"
>
Save
</button>
</div>
@ -36,7 +32,7 @@ exports[`<SubmitButton/> Render ready 1`] = `
exports[`<SubmitButton/> Render saving 1`] = `
<div>
<button
class="btn btn-primary col-sm-12 col-lg-3"
class="btn btn-primary col-sm-12 col-md-3 col-lg-2"
disabled=""
type="submit"
>
@ -46,8 +42,6 @@ exports[`<SubmitButton/> Render saving 1`] = `
role="status"
/>
Updating
</button>
</div>

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

@ -7,9 +7,7 @@
import React from "react";
import {
act, fireEvent, render, waitForElement,
} from "customTestRender";
import { act, fireEvent, render, waitForElement } from "customTestRender";
import mockAxios from "jest-mock-axios";
import { WebSockets } from "webSockets/WebSockets";
import { ForisForm } from "../components/ForisForm";
@ -38,8 +36,12 @@ describe("useForm hook.", () => {
beforeEach(async () => {
mockPrepData = jest.fn(() => ({ field: "preparedData" }));
mockPrepDataToSubmit = jest.fn(() => ({ field: "preparedDataToSubmit" }));
mockValidator = jest.fn((data) => (data.field === "invalidValue" ? { field: "Error" } : {}));
mockPrepDataToSubmit = jest.fn(() => ({
field: "preparedDataToSubmit",
}));
mockValidator = jest.fn((data) =>
data.field === "invalidValue" ? { field: "Error" } : {}
);
const { getByTestId, container } = render(
<ForisForm
ws={new WebSockets()}
@ -53,7 +55,7 @@ describe("useForm hook.", () => {
validator={mockValidator}
>
<Child />
</ForisForm>,
</ForisForm>
);
mockAxios.mockResponse({ field: "fetchedData" });
@ -67,16 +69,22 @@ describe("useForm hook.", () => {
expect(Child.mock.calls[0][0].formErrors).toMatchObject({});
act(() => {
fireEvent.change(input, { target: { value: "invalidValue", type: "text" } });
fireEvent.change(input, {
target: { value: "invalidValue", type: "text" },
});
});
expect(Child).toHaveBeenCalledTimes(2);
expect(mockValidator).toHaveBeenCalledTimes(2);
expect(Child.mock.calls[1][0].formErrors).toMatchObject({ field: "Error" });
expect(Child.mock.calls[1][0].formErrors).toMatchObject({
field: "Error",
});
});
it("Update text value.", () => {
fireEvent.change(input, { target: { value: "newValue", type: "text" } });
fireEvent.change(input, {
target: { value: "newValue", type: "text" },
});
expect(input.value).toBe("newValue");
});
@ -86,14 +94,21 @@ describe("useForm hook.", () => {
});
it("Update checkbox value.", () => {
fireEvent.change(input, { target: { checked: true, type: "checkbox" } });
fireEvent.change(input, {
target: { checked: true, type: "checkbox" },
});
expect(input.checked).toBe(true);
});
it("Fetch data.", () => {
expect(mockAxios.get).toHaveBeenCalledWith("testEndpoint", expect.anything());
expect(mockAxios.get).toHaveBeenCalledWith(
"testEndpoint",
expect.anything()
);
expect(mockPrepData).toHaveBeenCalledTimes(1);
expect(Child.mock.calls[0][0].formData).toMatchObject({ field: "preparedData" });
expect(Child.mock.calls[0][0].formData).toMatchObject({
field: "preparedData",
});
});
it("Submit.", () => {
@ -107,7 +122,7 @@ describe("useForm hook.", () => {
expect(mockAxios.post).toHaveBeenCalledWith(
"testEndpoint",
{ field: "preparedDataToSubmit" },
expect.anything(),
expect.anything()
);
});
});

131
src/form/__tests__/validation.test.js
View File

@ -16,120 +16,75 @@ import {
describe("Validation functions", () => {
it("validateIPv4Address valid", () => {
expect(validateIPv4Address("192.168.1.1"))
.toBe(undefined);
expect(validateIPv4Address("1.1.1.1"))
.toBe(undefined);
expect(validateIPv4Address("0.0.0.0"))
.toBe(undefined);
expect(validateIPv4Address("192.168.1.1")).toBe(undefined);
expect(validateIPv4Address("1.1.1.1")).toBe(undefined);
expect(validateIPv4Address("0.0.0.0")).toBe(undefined);
});
it("validateIPv4Address invalid", () => {
expect(validateIPv4Address("invalid"))
.not
.toBe(undefined);
expect(validateIPv4Address("192.256.1.1"))
.not
.toBe(undefined);
expect(validateIPv4Address("192.168.256.1"))
.not
.toBe(undefined);
expect(validateIPv4Address("192.168.1.256"))
.not
.toBe(undefined);
expect(validateIPv4Address("192.168.1.256"))
.not
.toBe(undefined);
expect(validateIPv4Address("invalid")).not.toBe(undefined);
expect(validateIPv4Address("192.256.1.1")).not.toBe(undefined);
expect(validateIPv4Address("192.168.256.1")).not.toBe(undefined);
expect(validateIPv4Address("192.168.1.256")).not.toBe(undefined);
expect(validateIPv4Address("192.168.1.256")).not.toBe(undefined);
});
it("validateIPv6Address valid", () => {
expect(validateIPv6Address("2001:0db8:85a3:0000:0000:8a2e:0370:7334"))
.toBe(undefined);
expect(validateIPv6Address("0:0:0:0:0:0:0:1"))
.toBe(undefined);
expect(validateIPv6Address("::1"))
.toBe(undefined);
expect(validateIPv6Address("::"))
.toBe(undefined);
expect(
validateIPv6Address("2001:0db8:85a3:0000:0000:8a2e:0370:7334")
).toBe(undefined);
expect(validateIPv6Address("0:0:0:0:0:0:0:1")).toBe(undefined);
expect(validateIPv6Address("::1")).toBe(undefined);
expect(validateIPv6Address("::")).toBe(undefined);
});
it("validateIPv6Address invalid", () => {
expect(validateIPv6Address("invalid"))
.not
.toBe(undefined);
expect(validateIPv6Address("1.1.1.1"))
.not
.toBe(undefined);
expect(validateIPv6Address("1200::AB00:1234::2552:7777:1313"))
.not
.toBe(undefined);
expect(validateIPv6Address("1200:0000:AB00:1234:O000:2552:7777:1313"))
.not
.toBe(undefined);
expect(validateIPv6Address("invalid")).not.toBe(undefined);
expect(validateIPv6Address("1.1.1.1")).not.toBe(undefined);
expect(validateIPv6Address("1200::AB00:1234::2552:7777:1313")).not.toBe(
undefined
);
expect(
validateIPv6Address("1200:0000:AB00:1234:O000:2552:7777:1313")
).not.toBe(undefined);
});
it("validateIPv6Prefix valid", () => {
expect(validateIPv6Prefix("2002:0000::/16"))
.toBe(undefined);
expect(validateIPv6Prefix("0::/0"))
.toBe(undefined);
expect(validateIPv6Prefix("2002:0000::/16")).toBe(undefined);
expect(validateIPv6Prefix("0::/0")).toBe(undefined);
});
it("validateIPv6Prefix invalid", () => {
expect(validateIPv6Prefix("2001:0db8:85a3:0000:0000:8a2e:0370:7334"))
.not
.toBe(undefined);
expect(validateIPv6Prefix("::1"))
.not
.toBe(undefined);
expect(validateIPv6Prefix("2002:0000::/999"))
.not
.toBe(undefined);
expect(
validateIPv6Prefix("2001:0db8:85a3:0000:0000:8a2e:0370:7334")
).not.toBe(undefined);
expect(validateIPv6Prefix("::1")).not.toBe(undefined);
expect(validateIPv6Prefix("2002:0000::/999")).not.toBe(undefined);
});
it("validateDomain valid", () => {
expect(validateDomain("example.com"))
.toBe(undefined);
expect(validateDomain("one.two.three"))
.toBe(undefined);
expect(validateDomain("example.com")).toBe(undefined);
expect(validateDomain("one.two.three")).toBe(undefined);
});
it("validateDomain invalid", () => {
expect(validateDomain("test/"))
.not
.toBe(undefined);
expect(validateDomain("."))
.not
.toBe(undefined);
expect(validateDomain("test/")).not.toBe(undefined);
expect(validateDomain(".")).not.toBe(undefined);
});
it("validateDUID valid", () => {
expect(validateDUID("abcdefAB"))
.toBe(undefined);
expect(validateDUID("ABCDEF12"))
.toBe(undefined);
expect(validateDUID("ABCDEF12AB"))
.toBe(undefined);
expect(validateDUID("abcdefAB")).toBe(undefined);
expect(validateDUID("ABCDEF12")).toBe(undefined);
expect(validateDUID("ABCDEF12AB")).toBe(undefined);
});
it("validateDUID invalid", () => {
expect(validateDUID("gggggggg"))
.not
.toBe(undefined);
expect(validateDUID("abcdefABa"))
.not
.toBe(undefined);
expect(validateDUID("gggggggg")).not.toBe(undefined);
expect(validateDUID("abcdefABa")).not.toBe(undefined);
});
it("validateMAC valid", () => {
expect(validateMAC("00:D0:56:F2:B5:12"))
.toBe(undefined);
expect(validateMAC("00:26:DD:14:C4:EE"))
.toBe(undefined);
expect(validateMAC("06:00:00:00:00:00"))
.toBe(undefined);
expect(validateMAC("00:D0:56:F2:B5:12")).toBe(undefined);
expect(validateMAC("00:26:DD:14:C4:EE")).toBe(undefined);
expect(validateMAC("06:00:00:00:00:00")).toBe(undefined);
});
it("validateMAC invalid", () => {
expect(validateMAC("00:00:00:00:00:0G"))
.not
.toBe(undefined);
expect(validateMAC("06:00:00:00:00:00:00"))
.not
.toBe(undefined);
expect(validateMAC("00:00:00:00:00:0G")).not.toBe(undefined);
expect(validateMAC("06:00:00:00:00:00:00")).not.toBe(undefined);
});
});

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

@ -52,19 +52,25 @@ ForisForm.propTypes = {
onSubmitOverridden: PropTypes.func,
/** Reference to actual form element (useful for programmatically submitting it).
* Pass the output of useRef hook to this prop.
*/
*/
formReference: PropTypes.object,
/** reForis form components. */
children: PropTypes.node.isRequired,
// eslint-disable-next-line react/no-unused-prop-types
customWSProp(props) {
const wsModuleIsSpecified = !!(props.forisConfig && props.forisConfig.wsModule);
const wsModuleIsSpecified = !!(
props.forisConfig && props.forisConfig.wsModule
);
if (props.ws && !wsModuleIsSpecified) {
return new Error("forisConfig.wsModule should be specified when ws object is passed.");
return new Error(
"forisConfig.wsModule should be specified when ws object is passed."
);
}
if (!props.ws && wsModuleIsSpecified) {
return new Error("forisConfig.wsModule is specified without passing ws object.");
return new Error(
"forisConfig.wsModule is specified without passing ws object."
);
}
},
};
@ -95,7 +101,10 @@ export function ForisForm({
formReference,
children,
}) {
const [formState, onFormChangeHandler, resetFormData] = useForm(validator, prepData);
const [formState, onFormChangeHandler, resetFormData] = useForm(
validator,
prepData
);
const [setAlert, dismissAlert] = useAlert();
const [forisModuleState] = useForisModule(ws, forisConfig);
@ -141,29 +150,39 @@ export function ForisForm({
return SUBMIT_BUTTON_STATES.READY;
}
const formIsDisabled = (disabled
|| forisModuleState.state === API_STATE.SENDING
|| postState.state === API_STATE.SENDING);
const formIsDisabled =
disabled ||
forisModuleState.state === API_STATE.SENDING ||
postState.state === API_STATE.SENDING;
const submitButtonIsDisabled = disabled || !!formState.errors;
const childrenWithFormProps = React.Children.map(
children,
(child) => React.cloneElement(child, {
const childrenWithFormProps = React.Children.map(children, (child) =>
React.cloneElement(child, {
initialData: formState.initialData,
formData: formState.data,
formErrors: formState.errors,
setFormValue: onFormChangeHandler,
disabled: formIsDisabled,
}),
})
);
const onSubmit = onSubmitOverridden
? onSubmitOverridden(formState.data, onFormChangeHandler, onSubmitHandler)
? onSubmitOverridden(
formState.data,
onFormChangeHandler,
onSubmitHandler
)
: onSubmitHandler;
function getMessageOnLeavingPage() {
if (JSON.stringify(formState.data) === JSON.stringify(formState.initialData)) return true;
return _("Changes you made may not be saved. Are you sure you want to leave?");
if (
JSON.stringify(formState.data) ===
JSON.stringify(formState.initialData)
)
return true;
return _(
"Changes you made may not be saved. Are you sure you want to leave?"
);
}
return (

53
src/form/components/ForisForm.md
View File

@ -1,8 +1,11 @@
`<ForisForm/>` is Higher-Order Component which encapsulates entire form logic and provides with children required props.
This component structure provides comfort API and allows to create typical Foris module forms easily.
`<ForisForm/>` is Higher-Order Component which encapsulates entire form logic
and provides with children required props. This component structure provides
comfort API and allows to create typical Foris module forms easily.
## Example of usage of `<ForisForm/>`
You can pass more forms as children.
```js
<ForisForm
ws={ws}
@ -24,7 +27,10 @@ You can pass more forms as children.
```js
export default function MACForm({
formData, formErrors, setFormValue, ...props
formData,
formErrors,
setFormValue,
...props
}) {
const macSettings = formData.mac_settings;
const errors = (formErrors || {}).mac_settings || {};
@ -35,38 +41,33 @@ export default function MACForm({
label={_("Custom MAC address")}
checked={macSettings.custom_mac_enabled}
helpText={HELP_TEXTS.custom_mac_enabled}
onChange={setFormValue(
(value) => ({ mac_settings: { custom_mac_enabled: { $set: value } } }),
)}
onChange={setFormValue((value) => ({
mac_settings: { custom_mac_enabled: { $set: value } },
}))}
{...props}
/>
{macSettings.custom_mac_enabled
? (
<TextInput
label={_("MAC address")}
value={macSettings.custom_mac || ""}
helpText={HELP_TEXTS.custom_mac}
error={errors.custom_mac}
required
onChange={setFormValue(
(value) => ({ mac_settings: { custom_mac: { $set: value } } }),
)}
{...props}
/>
)
: null}
{macSettings.custom_mac_enabled ? (
<TextInput
label={_("MAC address")}
value={macSettings.custom_mac || ""}
helpText={HELP_TEXTS.custom_mac}
error={errors.custom_mac}
required
onChange={setFormValue((value) => ({
mac_settings: { custom_mac: { $set: value } },
}))}
{...props}
/>
) : null}
</>
);
}
```
The <ForisForm/> passes subsequent `props` to the child components.
| Prop | Type | Description |
|----------------|--------|----------------------------------------------------------------------------|
| -------------- | ------ | -------------------------------------------------------------------------- |
| `formData` | object | Data returned from API. |
| `formErrors` | object | Errors returned after validation via validator. |
| `setFormValue` | func | Function for data update. It takes update rule as arg (see example above). |

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

@ -18,8 +18,7 @@ export const STATES = {
SubmitButton.propTypes = {
disabled: PropTypes.bool,
state: PropTypes.oneOf(Object.keys(STATES)
.map((key) => STATES[key])),
state: PropTypes.oneOf(Object.keys(STATES).map((key) => STATES[key])),
};
export function SubmitButton({ disabled, state, ...props }) {
@ -28,14 +27,14 @@ export function SubmitButton({ disabled, state, ...props }) {
let labelSubmitButton;
switch (state) {
case STATES.SAVING:
labelSubmitButton = _("Updating");
break;
case STATES.LOAD:
labelSubmitButton = _("Load settings");
break;
default:
labelSubmitButton = _("Save");
case STATES.SAVING:
labelSubmitButton = _("Updating");
break;
case STATES.LOAD:
labelSubmitButton = _("Load settings");
break;
default:
labelSubmitButton = _("Save");
}
return (
@ -44,7 +43,6 @@ export function SubmitButton({ disabled, state, ...props }) {
loading={loadingSubmitButton}
disabled={disableSubmitButton}
forisFormSize
{...props}
>
{labelSubmitButton}

90
src/form/hooks.js
View File

@ -23,57 +23,61 @@ export function useForm(validator, dataPreprocessor) {
errors: {},
});
const onFormReload = useCallback((data) => {
dispatch({
type: FORM_ACTIONS.resetData,
data,
dataPreprocessor,
validator,
});
}, [dataPreprocessor, validator]);
const onFormReload = useCallback(
(data) => {
dispatch({
type: FORM_ACTIONS.resetData,
data,
dataPreprocessor,
validator,
});
},
[dataPreprocessor, validator]
);
const onFormChangeHandler = useCallback((updateRule) => (event) => {
dispatch({
type: FORM_ACTIONS.updateValue,
value: getChangedValue(event.target),
updateRule,
validator,
});
}, [validator]);
const onFormChangeHandler = useCallback(
(updateRule) => (event) => {
dispatch({
type: FORM_ACTIONS.updateValue,
value: getChangedValue(event.target),
updateRule,
validator,
});
},
[validator]
);
return [
state,
onFormChangeHandler,
onFormReload,
];
return [state, onFormChangeHandler, onFormReload];
}
function formReducer(state, action) {
switch (action.type) {
case FORM_ACTIONS.updateValue: {
const newData = update(state.data, action.updateRule(action.value));
const errors = action.validator(newData);
return {
...state,
data: newData,
errors,
};
}
case FORM_ACTIONS.resetData: {
if (!action.data) {
return { ...state, initialData: state.data };
case FORM_ACTIONS.updateValue: {
const newData = update(state.data, action.updateRule(action.value));
const errors = action.validator(newData);
return {
...state,
data: newData,
errors,
};
}
case FORM_ACTIONS.resetData: {
if (!action.data) {
return { ...state, initialData: state.data };
}
const data = action.dataPreprocessor ? action.dataPreprocessor(action.data) : action.data;
return {
data,
initialData: data,
errors: action.data ? action.validator(data) : undefined,
};
}
default: {
throw new Error();
}
const data = action.dataPreprocessor
? action.dataPreprocessor(action.data)
: action.data;
return {
data,
initialData: data,
errors: action.data ? action.validator(data) : undefined,
};
}
default: {
throw new Error();
}
}
}

33
src/index.js
View File

@ -30,18 +30,11 @@ 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 { formFieldsSize, buttonFormFieldsSize } from "./bootstrap/constants";
export { Switch } from "./bootstrap/Switch";
export {
Spinner,
SpinnerElement,
} from "./bootstrap/Spinner";
export {
Modal,
ModalBody,
ModalFooter,
ModalHeader,
} from "./bootstrap/Modal";
export { Spinner, SpinnerElement } from "./bootstrap/Spinner";
export { Modal, ModalBody, ModalFooter, ModalHeader } from "./bootstrap/Modal";
// Common
export { RebootButton } from "./common/RebootButton";
@ -49,7 +42,10 @@ export { WiFiSettings } from "./common/WiFiSettings/WiFiSettings";
// Form
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";
// WebSockets
@ -58,9 +54,18 @@ export { WebSockets } from "./webSockets/WebSockets";
// Utils
export { Portal } from "./utils/Portal";
export { undefinedIfEmpty, withoutUndefinedKeys, onlySpecifiedKeys } from "./utils/objectHelpers";
export {
withEither, withSpinner, withSending, withSpinnerOnSending, withError, withErrorMessage,
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";

2
src/testUtils/alertContextMock.js
View File

@ -15,7 +15,7 @@ window.AlertContext = React.createContext();
function AlertContextMock({ children }) {
return (
<AlertContext.Provider value={[mockSetAlert, mockDismissAlert]}>
{ children }
{children}
</AlertContext.Provider>
);
}

7
src/testUtils/customTestRender.js
View File

@ -26,15 +26,14 @@ function Wrapper({ children }) {
return (
<AlertContextMock>
<StaticRouter>
<UIDReset>
{children}
</UIDReset>
<UIDReset>{children}</UIDReset>
</StaticRouter>
</AlertContextMock>
);
}
const customTestRender = (ui, options) => render(ui, { wrapper: Wrapper, ...options });
const customTestRender = (ui, options) =>
render(ui, { wrapper: Wrapper, ...options });
// re-export everything
export * from "@testing-library/react";

4
src/testUtils/network.js
View File

@ -8,5 +8,7 @@
import mockAxios from "jest-mock-axios";
export function mockJSONError(data) {
mockAxios.mockError({ response: { data, headers: { "content-type": "application/json" } } });
mockAxios.mockError({
response: { data, headers: { "content-type": "application/json" } },
});
}

4
src/utils/ErrorMessage.js
View File

@ -17,7 +17,5 @@ ErrorMessage.defaultProps = {
};
export function ErrorMessage({ message }) {
return (
<p className="text-center text-danger">{message}</p>
);
return <p className="text-center text-danger">{message}</p>;
}

31
src/utils/__tests__/conditionalHOCs.test.js
View File

@ -9,7 +9,12 @@ import React from "react";
import { render } from "customTestRender";
import { API_STATE } from "api/utils";
import {
withEither, withSpinner, withSending, withSpinnerOnSending, withError, withErrorMessage,
withEither,
withSpinner,
withSending,
withSpinnerOnSending,
withError,
withErrorMessage,
} from "../conditionalHOCs";
describe("conditional HOCs", () => {
@ -52,14 +57,18 @@ describe("conditional HOCs", () => {
it("should render First component", () => {
const withAlternative = withSending(Alternative);
const FirstWithConditional = withAlternative(First);
const { getByText } = render(<FirstWithConditional apiState={API_STATE.SUCCESS} />);
const { getByText } = render(
<FirstWithConditional apiState={API_STATE.SUCCESS} />
);
expect(getByText("First")).toBeDefined();
});
it("should render Alternative component", () => {
const withAlternative = withSending(Alternative);
const FirstWithConditional = withAlternative(First);
const { getByText } = render(<FirstWithConditional apiState={API_STATE.SENDING} />);
const { getByText } = render(
<FirstWithConditional apiState={API_STATE.SENDING} />
);
expect(getByText("Alternative")).toBeDefined();
});
});
@ -67,13 +76,17 @@ describe("conditional HOCs", () => {
describe("withSpinnerOnSending", () => {
it("should render First component", () => {
const FirstWithConditional = withSpinnerOnSending(First);
const { getByText } = render(<FirstWithConditional apiState={API_STATE.SUCCESS} />);
const { getByText } = render(
<FirstWithConditional apiState={API_STATE.SUCCESS} />
);
expect(getByText("First")).toBeDefined();
});
it("should render spinner", () => {
const FirstWithConditional = withSpinnerOnSending(First);
const { container } = render(<FirstWithConditional apiState={API_STATE.SENDING} />);
const { container } = render(
<FirstWithConditional apiState={API_STATE.SENDING} />
);
expect(container).toMatchSnapshot();
});
});
@ -97,13 +110,17 @@ describe("conditional HOCs", () => {
describe("withErrorMessage", () => {
it("should render First component", () => {
const FirstWithConditional = withErrorMessage(First);
const { getByText } = render(<FirstWithConditional apiState={API_STATE.SUCCESS} />);
const { getByText } = render(
<FirstWithConditional apiState={API_STATE.SUCCESS} />
);
expect(getByText("First")).toBeDefined();
});
it("should render error message", () => {
const FirstWithConditional = withErrorMessage(First);
const { container } = render(<FirstWithConditional apiState={API_STATE.ERROR} />);
const { container } = render(
<FirstWithConditional apiState={API_STATE.ERROR} />
);
expect(container).toMatchSnapshot();
});
});

36
src/utils/__tests__/datetime.test.js
View File

@ -10,42 +10,40 @@ import { toLocaleDateString } from "../datetime";
describe("toLocaleDateString", () => {
it("should work with different locale", () => {
global.ForisTranslations = { locale: "fr" };
expect(
toLocaleDateString("2020-02-20T12:51:36+00:00")
).toBe("20 février 2020 12:51");
expect(toLocaleDateString("2020-02-20T12:51:36+00:00")).toBe(
"20 février 2020 12:51"
);
global.ForisTranslations = { locale: "en" };
})
});
it("should convert with default format", () => {
expect(
toLocaleDateString("2020-02-20T12:51:36+00:00")
).toBe("February 20, 2020 12:51 PM");
expect(toLocaleDateString("2020-02-20T12:51:36+00:00")).toBe(
"February 20, 2020 12:51 PM"
);
});
it("should convert with custom input format", () => {
expect(
toLocaleDateString(
"2020-02-20 12:51:36 +0000",
{ inputFormat: "YYYY-MM-DD HH:mm:ss Z" },
)
toLocaleDateString("2020-02-20 12:51:36 +0000", {
inputFormat: "YYYY-MM-DD HH:mm:ss Z",
})
).toBe("February 20, 2020 12:51 PM");
});
it("should convert with custom output format", () => {
expect(
toLocaleDateString(
"2020-02-20T12:51:36+00:00",
{ outputFormat: "LL" },
)
toLocaleDateString("2020-02-20T12:51:36+00:00", {
outputFormat: "LL",
})
).toBe("February 20, 2020");
});
it("should convert with custom input and output format", () => {
expect(
toLocaleDateString(
"2020-02-20 12:51:36 +0000",
{ inputFormat: "YYYY-MM-DD HH:mm:ss Z", outputFormat: "LL" },
)
toLocaleDateString("2020-02-20 12:51:36 +0000", {
inputFormat: "YYYY-MM-DD HH:mm:ss Z",
outputFormat: "LL",
})
).toBe("February 20, 2020");
});
});

25
src/utils/conditionalHOCs.js
View File

@ -24,8 +24,8 @@ function withEither(conditionalFn, Either) {
function isSending(props) {
if (Array.isArray(props.apiState)) {
return props.apiState.some(
(state) => [API_STATE.INIT, API_STATE.SENDING].includes(state),
return props.apiState.some((state) =>
[API_STATE.INIT, API_STATE.SENDING].includes(state)
);
}
return [API_STATE.INIT, API_STATE.SENDING].includes(props.apiState);
@ -38,15 +38,18 @@ const withSpinnerOnSending = withSpinner(isSending);
// Error handling
const withError = (conditionalFn) => withEither(conditionalFn, ErrorMessage);
const withErrorMessage = withError(
(props) => {
if (Array.isArray(props.apiState)) {
return props.apiState.includes(API_STATE.ERROR);
}
return props.apiState === API_STATE.ERROR;
},
);
const withErrorMessage = withError((props) => {
if (Array.isArray(props.apiState)) {
return props.apiState.includes(API_STATE.ERROR);
}
return props.apiState === API_STATE.ERROR;
});
export {
withEither, withSpinner, withSending, withSpinnerOnSending, withError, withErrorMessage,
withEither,
withSpinner,
withSending,
withSpinnerOnSending,
withError,
withErrorMessage,
};

9
src/utils/datetime.js
View File

@ -1,8 +1,9 @@
import moment from "moment";
export function toLocaleDateString(date, { inputFormat, outputFormat = "LLL" } = {}) {
export function toLocaleDateString(
date,
{ inputFormat, outputFormat = "LLL" } = {}
) {
const parsedDate = inputFormat ? moment(date, inputFormat) : moment(date);
return parsedDate
.locale(ForisTranslations.locale)
.format(outputFormat);
return parsedDate.locale(ForisTranslations.locale).format(outputFormat);
}

6
src/utils/forisUrls.js
View File

@ -21,9 +21,13 @@ export const ForisURLs = {
},
// Notifications links are used with <Link/> inside Router, thus url subdir is not required.
notifications: "/notifications",
overview: "/overview",
notifications: "/overview#notifications",
notificationsSettings: "/administration/notifications-settings",
approveUpdates: "/package-management/updates",
languages: "/package-management/languages",
rebootPage: "/reforis/administration/reboot",
luci: "/cgi-bin/luci",
// API

10
src/utils/hooks.js
View File

@ -8,11 +8,17 @@
import { useState, useEffect } from "react";
/** Execute callback when condition is set to true. */
export function useConditionalTimeout({ callback, timeout = 125 }, ...callbackArgs) {
export function useConditionalTimeout(
{ callback, timeout = 125 },
...callbackArgs
) {
const [condition, setCondition] = useState(false);
useEffect(() => {
if (condition) {
const interval = setTimeout(() => callback(...callbackArgs), timeout);
const interval = setTimeout(
() => callback(...callbackArgs),
timeout
);
return () => setTimeout(interval);
}
}, [condition, callback, timeout, callbackArgs]);

23
src/utils/objectHelpers.js
View File

@ -15,21 +15,18 @@ export function undefinedIfEmpty(instance) {
/** Return object without keys that have undefined value. */
export function withoutUndefinedKeys(instance) {
return Object.keys(instance).reduce(
(accumulator, key) => {
if (instance[key] !== undefined) {
accumulator[key] = instance[key];
}
return accumulator;
},
{},
);
return Object.keys(instance).reduce((accumulator, key) => {
if (instance[key] !== undefined) {
accumulator[key] = instance[key];
}
return accumulator;
}, {});
}
/** Return copy of passed object that has only desired keys. */
export function onlySpecifiedKeys(object, desiredKeys) {
return desiredKeys.reduce(
(accumulator, key) => { accumulator[key] = object[key]; return accumulator; },
{},
);
return desiredKeys.reduce((accumulator, key) => {
accumulator[key] = object[key];
return accumulator;
}, {});
}

5
src/utils/validations.js
View File

@ -30,7 +30,10 @@ const REs = {
};
const createValidator = (fieldType) => (value) => {
if (value && value !== "") return REs[fieldType].test(value) ? undefined : ERROR_MESSAGES[fieldType];
if (value && value !== "")
return REs[fieldType].test(value)
? undefined
: ERROR_MESSAGES[fieldType];
};
const validateIPv4Address = createValidator("IPv4");

8
src/webSockets/WebSockets.js
View File

@ -22,7 +22,9 @@ export class WebSockets {
this.ws = new WebSocket(URL);
this.ws.onerror = (e) => {
if (window.location.pathname !== ForisURLs.login) {
console.error("WS: Error observed, you aren't logged probably.");
console.error(
"WS: Error observed, you aren't logged probably."
);
window.location.replace(ForisURLs.login);
}
console.error(`WS: Error: ${e}`);
@ -111,7 +113,9 @@ export class WebSockets {
chain = this.callbacks[json.module][json.action];
} catch (error) {
if (error instanceof TypeError) {
console.warn(`Callback for this message wasn't found:${error.data}`);
console.warn(
`Callback for this message wasn't found:${error.data}`
);
} else throw error;
}

15
src/webSockets/hooks.js
View File

@ -7,7 +7,12 @@
import { useEffect, useState } from "react";
export function useWSForisModule(ws, module, action = "update_settings", controllerID) {
export function useWSForisModule(
ws,
module,
action = "update_settings",
controllerID
) {
const [data, setData] = useState(null);
useEffect(() => {
@ -18,14 +23,16 @@ export function useWSForisModule(ws, module, action = "update_settings", control
function callback(message) {
// Accept only messages addressed to device with passed controller ID.
if (controllerID !== undefined && controllerID !== message.controller_id) {
if (
controllerID !== undefined &&
controllerID !== message.controller_id
) {
return;
}
setData(message.data);
}
ws.subscribe(module)
.bind(module, action, callback);
ws.subscribe(module).bind(module, action, callback);
return () => {
ws.unbind(module, action, callback);

24
styleguide.config.js
View File

@ -30,9 +30,7 @@ module.exports = {
},
{
name: "Alert Context",
components: [
"src/alertContext/AlertContext.js",
],
components: ["src/alertContext/AlertContext.js"],
exampleMode: "expand",
usageMode: "expand",
},
@ -42,16 +40,20 @@ module.exports = {
components: "src/bootstrap/*.js",
exampleMode: "expand",
usageMode: "expand",
ignore: [
"src/bootstrap/constants.js",
],
ignore: ["src/bootstrap/constants.js"],
},
],
require: [
"babel-polyfill",
path.join(__dirname, "src/testUtils/mockGlobals"),
path.join(__dirname, "node_modules/bootstrap/dist/css/bootstrap.min.css"),
path.join(__dirname, "node_modules/@fortawesome/fontawesome-free/css/all.min.css"),
path.join(
__dirname,
"node_modules/bootstrap/dist/css/bootstrap.min.css"
),
path.join(
__dirname,
"node_modules/@fortawesome/fontawesome-free/css/all.min.css"
),
],
webpackConfig: {
module: {
@ -60,10 +62,12 @@ module.exports = {
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
}, {
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
}, {
},
{
test: /\.(jpg|jpeg|png|woff|woff2|eot|ttf|svg)$/,
loader: "file-loader",
},