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

Merge branch 'dev' into 'master'

Master

See merge request turris/reforis/foris-js!203
This commit is contained in:
Aleksandr Gumroian 2022-12-02 15:48:41 +01:00
commit ab13b7aa08
12 changed files with 206 additions and 53 deletions

36
docs/components/Logo.js Normal file
View File

@ -0,0 +1,36 @@
import React from "react";
import PropTypes from "prop-types";
import Styled from "rsg-components/Styled";
import logo from "./logo.svg";
const styles = ({ fontFamily }) => ({
logo: {
display: "flex",
alignItems: "center",
margin: 0,
fontFamily: fontFamily.base,
fontSize: 18,
fontWeight: "normal",
},
image: {
height: "1.3em",
marginLeft: "-0.2em",
marginRight: "0.2em",
},
});
export function LogoRenderer({ classes, children }) {
return (
<h1 className={classes.logo}>
<img className={classes.image} src={logo} alt="React logo" />
{children}
</h1>
);
}
LogoRenderer.propTypes = {
classes: PropTypes.object.isRequired,
children: PropTypes.node,
};
export default Styled(styles)(LogoRenderer);

3
docs/components/logo.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000">
<path d="M288.258 240.0394L717.5586-.44c.803 62.277-1.8207 124.502-1.4996 186.7266 1.8208 7.6343-7.2288 10.1966-12.102 13.4908L286.4375 432.1518l1.8206-192.1124zm2.284 277.645L711 278.3176l-.8416 192.7742L457.357 614.514l-1.842 289.03-167.7097 95.8926 2.7365-481.753z"/>
</svg>

After

Width:  |  Height:  |  Size: 349 B

View File

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

4
docs/forisjs-npm.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" fill="white">
<path d="M49.5 171.722222222222h400v133.333333333333h-200v22.222222222223h-88.888888888889v-22.222222222223H49.5V171.722222222222zm22.222222222222 111.111111111111h44.444444444445v-66.666666666667h22.222222222222v66.666666666667h22.222222222222v-88.888888888889H71.722222222222v88.888888888889zm111.111111111111-88.888888888889v111.111111111111h44.444444444445v-22.222222222222h44.444444444444v-88.888888888889h-88.888888888889zm44.444444444445 22.222222222222H249.5v44.444444444445h-22.222222222222v-44.444444444445zm66.666666666666-22.222222222222v88.888888888889h44.444444444445v-66.666666666667h22.222222222222v66.666666666667h22.222222222222v-66.666666666667h22.222222222222v66.666666666667h22.222222222223v-88.888888888889H293.944444444444z" fill="#cb3837" />
<path d="M71.722222222222 282.833333333333h44.444444444444v-66.666666666667h22.222222222223v66.666666666667h22.222222222222v-88.888888888889H71.722222222222zm111.111111111111-88.888888888889v111.111111111111h44.444444444444v-22.222222222222h44.444444444445v-88.888888888889h-88.888888888889zM249.5 260.611111111111h-22.222222222223v-44.444444444445H249.5v44.444444444445zm44.444444444444-66.666666666667v88.888888888889h44.444444444444v-66.666666666667h22.222222222223v66.666666666667h22.222222222222v-66.666666666667h22.222222222222v66.666666666667h22.222222222222v-88.888888888889z" />
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

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

37
docs/introduction.md Normal file
View File

@ -0,0 +1,37 @@
Welcome! This is the official documentation for Foris JS.
## What Foris JS is
Foris JS library is a set of components and utils for reForis application and
plugins.
Please notice that all of these components or utils are used in reForis and
plugins. If you want to study them by example, I recommend you to full-text
search those repositories.
# Installation
## Prerequisites
Please make sure that [Node.js](https://nodejs.org/en/) is installed on your
system.
The current Long Term Support (LTS) release is an ideal starting point, see
[here](https://github.com/nodejs/Release#release-schedule).
## Installation
To install the latest release:
```plain
npm install foris
```
To install a specific version:
```plain
npm install foris@version
```
<a target="_blank" href="https://www.npmjs.com/package/foris">Check
on<img width="100px" src="./docs/forisjs-npm.svg"></a>

View File

@ -1,7 +1,7 @@
{ {
"name": "foris", "name": "foris",
"version": "5.4.1", "version": "5.4.1",
"description": "Set of components and utils for Foris and its plugins.", "description": "Foris JS library is a set of components and utils for reForis application and plugins.",
"author": "CZ.NIC, z.s.p.o.", "author": "CZ.NIC, z.s.p.o.",
"repository": { "repository": {
"type": "git", "type": "git",

5
src/bootstrap/Switch.md Normal file
View File

@ -0,0 +1,5 @@
Switch example:
```js
<Switch label="Enable Switch" helpText="Toggle that switch!" />
```

View File

@ -8,7 +8,6 @@
import React from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { Switch } from "../../bootstrap/Switch"; import { Switch } from "../../bootstrap/Switch";
import { CheckBox } from "../../bootstrap/CheckBox";
import { PasswordInput } from "../../bootstrap/PasswordInput"; import { PasswordInput } from "../../bootstrap/PasswordInput";
import { RadioSet } from "../../bootstrap/RadioSet"; import { RadioSet } from "../../bootstrap/RadioSet";
import { Select } from "../../bootstrap/Select"; import { Select } from "../../bootstrap/Select";
@ -65,6 +64,7 @@ DeviceForm.propTypes = {
guest_wifi: PropTypes.object.isRequired, guest_wifi: PropTypes.object.isRequired,
encryption: PropTypes.string.isRequired, encryption: PropTypes.string.isRequired,
available_bands: PropTypes.array.isRequired, available_bands: PropTypes.array.isRequired,
ieee80211w_disabled: PropTypes.bool.isRequired,
}), }),
formErrors: PropTypes.object.isRequired, formErrors: PropTypes.object.isRequired,
setFormValue: PropTypes.func.isRequired, setFormValue: PropTypes.func.isRequired,
@ -102,7 +102,7 @@ function DeviceForm({
switchHeading switchHeading
{...props} {...props}
/> />
{formData.enabled ? ( {formData.enabled && (
<> <>
<TextInput <TextInput
label="SSID" label="SSID"
@ -142,7 +142,7 @@ function DeviceForm({
{...props} {...props}
/> />
<CheckBox <Switch
label={_("Hide SSID")} label={_("Hide SSID")}
helpText={HELP_TEXTS.hidden} helpText={HELP_TEXTS.hidden}
checked={formData.hidden} checked={formData.hidden}
@ -220,6 +220,25 @@ function DeviceForm({
{...props} {...props}
/> />
{(formData.encryption === "WPA3" ||
formData.encryption === "WPA2/3") && (
<Switch
label={_("Disable Management Frame Protection")}
helpText={_(
"In case you have trouble connecting to WiFi Access Point, try disabling Management Frame Protection."
)}
checked={formData.ieee80211w_disabled}
onChange={setFormValue((value) => ({
devices: {
[deviceIndex]: {
ieee80211w_disabled: { $set: value },
},
},
}))}
{...props}
/>
)}
{hasGuestNetwork && ( {hasGuestNetwork && (
<WifiGuestForm <WifiGuestForm
formData={{ formData={{
@ -232,8 +251,8 @@ function DeviceForm({
/> />
)} )}
</> </>
) : null} )}
{divider ? <hr /> : null} {divider && <hr />}
</> </>
); );
} }

View File

@ -59,6 +59,10 @@ function prepDataToSubmit(formData) {
if (!device.guest_wifi.enabled) if (!device.guest_wifi.enabled)
formData.devices[idx].guest_wifi = { enabled: false }; formData.devices[idx].guest_wifi = { enabled: false };
if (device.encryption === "WPA2") {
delete formData.devices[idx].ieee80211w_disabled;
}
}); });
return formData; return formData;
} }

View File

@ -337,7 +337,7 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
- First value - First value
+ Second value + Second value
@@ -500,10 +500,92 @@ @@ -524,10 +524,92 @@
> >
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. 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> </small>
@ -347,7 +347,7 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
+ class=\\"form-group\\" + class=\\"form-group\\"
+ > + >
+ <label + <label
+ for=\\"22\\" + for=\\"24\\"
+ > + >
+ SSID + SSID
+ </label> + </label>
@ -356,7 +356,7 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
+ > + >
+ <input + <input
+ class=\\"form-control\\" + class=\\"form-control\\"
+ id=\\"22\\" + id=\\"24\\"
+ type=\\"text\\" + type=\\"text\\"
+ value=\\"TestGuestSSID\\" + value=\\"TestGuestSSID\\"
+ /> + />
@ -386,7 +386,7 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
+ class=\\"form-group\\" + class=\\"form-group\\"
+ > + >
+ <label + <label
+ for=\\"23\\" + for=\\"25\\"
+ > + >
+ Password + Password
+ </label> + </label>
@ -396,7 +396,7 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
+ <input + <input
+ autocomplete=\\"current-password\\" + autocomplete=\\"current-password\\"
+ class=\\"form-control is-invalid\\" + class=\\"form-control is-invalid\\"
+ id=\\"23\\" + id=\\"25\\"
+ required=\\"\\" + required=\\"\\"
+ type=\\"password\\" + type=\\"password\\"
+ value=\\"\\" + value=\\"\\"
@ -430,7 +430,7 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
class=\\"form-group switch\\" class=\\"form-group switch\\"
> >
<div <div
@@ -527,10 +609,11 @@ @@ -551,10 +633,11 @@
<div <div
class=\\"text-right\\" class=\\"text-right\\"
> >
@ -449,7 +449,7 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
- First value - First value
+ Second value + Second value
@@ -22,10 +22,488 @@ @@ -22,10 +22,512 @@
Wi-Fi 1 Wi-Fi 1
</h2> </h2>
</label> </label>
@ -537,7 +537,7 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
+ class=\\"form-group\\" + class=\\"form-group\\"
+ > + >
+ <div + <div
+ class=\\"custom-control custom-checkbox \\" + class=\\"custom-control custom-switch\\"
+ > + >
+ <input + <input
+ class=\\"custom-control-input\\" + class=\\"custom-control-input\\"
@ -549,12 +549,12 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
+ for=\\"6\\" + for=\\"6\\"
+ > + >
+ Hide SSID + Hide SSID
+ <small
+ class=\\"form-text text-muted\\"
+ >
+ If set, network is not visible when scanning for available networks.
+ </small>
+ </label> + </label>
+ <small
+ class=\\"form-text text-muted mt-0 mb-3\\"
+ >
+ If set, network is not visible when scanning for available networks.
+ </small>
+ </div> + </div>
+ </div> + </div>
+ <div + <div
@ -924,6 +924,30 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
+ class=\\"custom-control-label\\" + class=\\"custom-control-label\\"
+ for=\\"11\\" + for=\\"11\\"
+ > + >
+ Disable Management Frame Protection
+ </label>
+ <small
+ class=\\"form-text text-muted mt-0 mb-3\\"
+ >
+ In case you have trouble connecting to WiFi Access Point, try disabling Management Frame Protection.
+ </small>
+ </div>
+ </div>
+ <div
+ class=\\"form-group\\"
+ >
+ <div
+ class=\\"custom-control custom-switch\\"
+ >
+ <input
+ class=\\"custom-control-input\\"
+ id=\\"12\\"
+ type=\\"checkbox\\"
+ />
+ <label
+ class=\\"custom-control-label\\"
+ for=\\"12\\"
+ >
+ Enable Guest Wi-Fi + Enable Guest Wi-Fi
+ </label> + </label>
+ <small + <small

View File

@ -1,39 +1,56 @@
/* /*
* Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/) * Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://www.nic.cz/)
* *
* This is free software, licensed under the GNU General Public License v3. * This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information. * See /LICENSE for more information.
*/ */
const path = require("path"); const path = require("path");
const pjson = require("./package.json");
module.exports = { module.exports = {
title: "Foris JS docs", title: "Foris JS Docs",
version: `v${pjson.version}`,
theme: {
color: {
link: "#0075a3",
linkHover: "#00a2e2",
},
},
tocMode: "collapse",
pagePerSection: true,
sections: [ sections: [
{ {
name: "Foris JS", name: "Introduction",
content: "docs/intro.md", content: "docs/introduction.md",
}, },
{ {
name: "Development (Linking)", name: "Development",
content: "docs/development.md", content: "docs/development.md",
}, },
{ {
name: "Foris forms", name: "Components",
components: [ description: "Set of main components.",
"src/form/components/ForisForm.js", sections: [
"src/form/components/alerts.js", {
"src/form/components/SubmitButton.js", name: "Foris forms",
components: [
"src/form/components/ForisForm.js",
"src/form/components/alerts.js",
"src/form/components/SubmitButton.js",
],
exampleMode: "expand",
usageMode: "expand",
},
{
name: "Alert Context",
components: ["src/alertContext/AlertContext.js"],
exampleMode: "expand",
usageMode: "expand",
},
], ],
exampleMode: "expand", sectionDepth: 1,
usageMode: "expand",
},
{
name: "Alert Context",
components: ["src/alertContext/AlertContext.js"],
exampleMode: "expand",
usageMode: "expand",
}, },
{ {
name: "Bootstrap components", name: "Bootstrap components",
description: "Set of bootstrap components.", description: "Set of bootstrap components.",
@ -41,8 +58,12 @@ module.exports = {
exampleMode: "expand", exampleMode: "expand",
usageMode: "expand", usageMode: "expand",
ignore: ["src/bootstrap/constants.js"], ignore: ["src/bootstrap/constants.js"],
sectionDepth: 0,
}, },
], ],
template: {
favicon: "/docs/components/logo.svg",
},
require: [ require: [
"babel-polyfill", "babel-polyfill",
path.join(__dirname, "src/testUtils/mockGlobals"), path.join(__dirname, "src/testUtils/mockGlobals"),
@ -55,6 +76,9 @@ module.exports = {
"node_modules/@fortawesome/fontawesome-free/css/all.min.css" "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
), ),
], ],
styleguideComponents: {
LogoRenderer: path.join(__dirname, "docs/components/Logo"),
},
webpackConfig: { webpackConfig: {
module: { module: {
rules: [ rules: [
@ -73,5 +97,8 @@ module.exports = {
}, },
], ],
}, },
devServer: {
publicPath: "/",
},
}, },
}; };