Merge branch 'docs' into 'dev'

Fix docs, extract CSS to Foris JS.

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

.gitignore

@@ -43,8 +43,8 @@ coverage.xml
 ## Translations
 *.mo
 
-/js/styleguide/
 .gitignore
 
 dist/
 foris-*.tgz
+styleguide/

Makefile

@@ -1,4 +1,4 @@
-.PHONY: all install-js watch-js build-js publish-beta lint-js test-js create-messages update-messages clean
+.PHONY: all install-js watch-js build-js publish-beta lint-js test-js create-messages update-messages docs clean
 
 all:
 	@echo "make install-js"
@@ -17,6 +17,10 @@ all:
 	@echo "    Create locale messages (.pot)."
 	@echo "make update-messages"
 	@echo "    Update locale messages from .pot file."
+	@echo "make docs"
+	@echo "    Build project documentation."
+	@echo "make docs-watch"
+	@echo "    Start styleguidist server."
 	@echo "make clean"
 	@echo "    Remove python artifacts and virtualenv."
 
@@ -42,5 +46,10 @@ create-messages:
 update-messages:
 	pybabel update -i translations/forisjs.pot -d translations
 
+docs:
+	npm run-script docs
+docs-watch:
+	npm run-script docs:watch
+
 clean:
 	rm -rf node_modules dist

docs/intro.md

@@ -0,0 +1 @@
+Foris JS library is set of componets and utils for Foris JS application and plugins.

jest.config.js

@@ -24,4 +24,8 @@ module.exports = {
     globals: {
         TZ: "utc",
     },
+    transform: {
+        "^.+\\.js$": "babel-jest",
+        "^.+\\.css$": "jest-transform-css",
+    },
 };

package.json

@@ -16,12 +16,13 @@
   "dependencies": {
     "axios": "^0.19.0",
     "immutability-helper": "^3.0.0",
+    "jest-transform-css": "^2.0.0",
+    "moment": "^2.24.0",
+    "moment-timezone": "^0.5.25",
     "prop-types": "^15.7.2",
     "react-datetime": "^2.16.3",
     "react-router": "^5.0.1",
-    "react-uid": "^2.2.0",
+    "react-uid": "^2.2.0"
-    "moment": "^2.24.0",
-    "moment-timezone": "^0.5.25"
   },
   "peerDependencies": {
     "react": "^16.9.0",
@@ -31,10 +32,11 @@
     "@babel/cli": "^7.4.4",
     "@babel/core": "^7.4.5",
     "@babel/plugin-proposal-class-properties": "^7.4.4",
-    "@babel/plugin-transform-runtime": "^7.4.4",
     "@babel/plugin-syntax-export-default-from": "^7.2.0",
+    "@babel/plugin-transform-runtime": "^7.4.4",
     "@babel/preset-env": "^7.4.5",
     "@babel/preset-react": "^7.0.0",
+    "@fortawesome/fontawesome-free": "^5.11.2",
     "@testing-library/react": "^8.0.9",
     "babel-eslint": "^9.0.0",
     "babel-jest": "^24.8.0",
@@ -42,31 +44,38 @@
     "babel-plugin-module-resolver": "^3.2.0",
     "babel-plugin-react-transform": "^3.0.0",
     "babel-polyfill": "^6.26.0",
+    "bootstrap": "^4.3.1",
+    "copy-webpack-plugin": "^5.0.4",
+    "css-loader": "^3.2.0",
     "eslint": "^6.1.0",
     "eslint-config-airbnb": "^18.0.1",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.14.3",
     "eslint-plugin-react-hooks": "^1.7.0",
+    "file-loader": "^4.2.0",
     "jest": "^24.8.0",
     "jest-mock-axios": "^3.0.0",
     "moment": "^2.24.0",
     "moment-timezone": "^0.5.25",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "react-styleguidist": "^9.1.11",
+    "react-styleguidist": "^9.1.16",
-    "snapshot-diff": "^0.5.1"
+    "snapshot-diff": "^0.5.1",
+    "style-loader": "^1.0.0",
+    "webpack": "^4.41.0"
   },
   "scripts": {
-    "watch": "babel src --verbose --watch --out-dir dist --ignore '**/__tests__' --source-maps inline",
+    "build": "rm -rf dist; babel src --out-dir dist --ignore '**/__tests__' --source-maps inline --copy-files",
-    "build": "rm -rf dist; babel src --out-dir dist --ignore '**/__tests__' --source-maps inline",
+    "build:watch": "babel src --verbose --watch --out-dir dist --ignore '**/__tests__' --source-maps inline --copy-files",
-    "build:watch": "babel src --verbose --watch --out-dir dist --ignore '**/__tests__' --source-maps inline",
     "prepare": "rm -rf ./dist && npm run build",
     "lint": "eslint src",
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage --colors",
-    "test:update-snapshots": "jest -u"
+    "test:update-snapshots": "jest -u",
+    "docs": "npx styleguidist build ",
+    "docs:watch": "styleguidist server"
   },
   "files": [
     "dist/**",

src/bootstrap/Checkbox.md

@@ -11,6 +11,6 @@ const [value, setValue] = useState(false);
     value={value}
     label="Some label" 
     helpText="Read the small text!"
-    onChange={value => setValue(value)}
+    onChange={event =>setValue(event.target.value)}
 />
 ```

src/bootstrap/DataTimeInput.js

@@ -9,6 +9,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import Datetime from "react-datetime/DateTime";
 import moment from "moment/moment";
+import "react-datetime/css/react-datetime.css";
 
 import { Input } from "./Input";
 

src/bootstrap/EmailInput.md

@@ -11,7 +11,7 @@ const [email, setEmail] = useState('Wrong email');
         value={email}
         label="Some label" 
         helpText="Read the small text!"
-        onChange={target => setEmail(target.value)}
+        onChange={event =>setEmail(event.target.value)}
     />
     <button type="submit">Try to submit</button>
 </form>

src/bootstrap/Modal.md

@@ -1,6 +1,13 @@
 Bootstrap modal component.
 
-I have no idea why example doesn't work here but you can investigate HTML code...
+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"/>
+```
+
+I have no idea why example doesn't work here but you can investigate HTML code and Foris project.
+
 ```js
 import {ModalHeader, ModalBody, ModalFooter} from './Modal';
 
@@ -8,7 +15,7 @@ import {useState} from 'react';
 const [shown, setShown] = useState(false);
 
 <>
-    <Modal shown={shown}>
+    <Modal setShown={setShown} shown={shown}>
         <ModalHeader setShown={setShown} title='Warning!'/>
         <ModalBody><p>Bla bla bla...</p></ModalBody>
         <ModalFooter>
@@ -19,9 +26,8 @@ const [shown, setShown] = useState(false);
         </ModalFooter>
     </Modal>
     
-    <button 
+    <button className='btn btn-secondary' onClick={()=>setShown(true)}>
-        className='btn btn-secondary'
+        Show modal
-        onClick={()=>setShown(true)}
+    </button>
-    >Show modal</button>
 </>
 ```

src/bootstrap/NumberInput.css

@@ -0,0 +1,10 @@
+input[type="number"] {
+    -webkit-appearance: textfield;
+    -moz-appearance: textfield;
+    appearance: textfield;
+}
+
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+}

src/bootstrap/NumberInput.js

@@ -9,6 +9,7 @@ import React from "react";
 
 import PropTypes from "prop-types";
 import { Input } from "./Input";
+import "./NumberInput.css";
 
 NumberInput.propTypes = {
     /** Field label. */

src/bootstrap/NumberInput.md

@@ -12,6 +12,6 @@ const [value, setValue] = useState(42);
     helpText="Read the small text!"
     min='33'
     max='54'
-    onChange={target => setValue(target.value)}
+    onChange={event =>setValue(event.target.value)}
 />
 ```

src/bootstrap/PasswordInput.md

@@ -12,6 +12,6 @@ const [value, setValue] = useState('secret');
     value={value}
     label="Some password" 
     helpText="Read the small text!"
-    onChange={target => setValue(target.value)}
+    onChange={event =>setValue(event.target.value)}
 />
 ```

src/bootstrap/RadioSet.md

@@ -17,7 +17,7 @@ const [value, setValue] = useState(CHOICES[0].value);
         value={value}
         name='some-radio'
         choices={CHOICES}
-        onChange={event=>setValue(event.target.value)}
+        onChange={event =>setValue(event.target.value)}
     />
     <p>Selected value: {value}</p>
 </>

src/bootstrap/TextInput.md

@@ -10,6 +10,6 @@ const [value, setValue] = useState('Bla bla');
     value={value}
     label="Some text" 
     helpText="Read the small text!"
-    onChange={event => setValue(event.target.value)}
+    onChange={event =>setValue(event.target.value)}
 />
 ```

src/forisUrls.js

@@ -1,3 +1,10 @@
+/*
+ * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ *
+ * This is free software, licensed under the GNU General Public License v3.
+ * See /LICENSE for more information.
+ */
+
 export const REFORIS_URL_PREFIX = process.env.LIGHTTPD ? "/reforis" : "";
 
 export const ForisURLs = {

src/form/components/ForisForm.md

@@ -0,0 +1,73 @@
+`<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}
+    forisConfig={{
+        endpoint: API_URLs.wan,
+        wsModule: "wan",
+    }}
+    prepData={prepData}
+    prepDataToSubmit={prepDataToSubmit}
+    validator={validator}
+>
+    <WANForm />
+    <WAN6Form />
+    <MACForm />
+</ForisForm>
+```
+
+### Example of children forms `props` usage
+
+```js
+export default function MACForm({
+    formData, formErrors, setFormValue, ...props
+}) {
+    const macSettings = formData.mac_settings;
+    const errors = (formErrors || {}).mac_settings || {};
+    return (
+        <>
+            <h3>{_("MAC")}</h3>
+            <CheckBox
+                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 } } }),
+                )}
+
+                {...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}
+        </>
+    );
+}
+```
+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). |
+| `disabled`     | bool   | Flag to disable form elements (during updates or loadings e.t.c.).         |

src/index.js

@@ -1,3 +1,10 @@
+/*
+ * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ *
+ * This is free software, licensed under the GNU General Public License v3.
+ * See /LICENSE for more information.
+ */
+
 // API
 export { useAPIGet } from "api/get";
 export { useAPIPost } from "api/post";

src/utils/objectHelpers.js

@@ -1,3 +1,10 @@
+/*
+ * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ *
+ * This is free software, licensed under the GNU General Public License v3.
+ * See /LICENSE for more information.
+ */
+
 /** Return undefined if object has no keys, otherwise return object. */
 export function undefinedIfEmpty(instance) {
     if (Object.keys(instance).length > 0) {

styleguide.config.js

@@ -0,0 +1,60 @@
+/*
+ * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ *
+ * This is free software, licensed under the GNU General Public License v3.
+ * See /LICENSE for more information.
+ */
+
+const path = require("path");
+
+module.exports = {
+    title: "Foris JS docs",
+    sections: [
+        {
+            name: "Foris JS",
+            content: "docs/intro.md",
+        },
+        {
+            name: "Foris forms",
+            components: [
+                "src/form/components/ForisForm.js",
+                "src/form/components/alerts.js",
+                "src/form/components/SubmitButton.js",
+            ],
+            exampleMode: "expand",
+            usageMode: "expand",
+        },
+        {
+            name: "Bootstrap components",
+            description: "Set of bootstrap components.",
+            components: "src/bootstrap/*.js",
+            exampleMode: "expand",
+            usageMode: "expand",
+            ignore: [
+                "src/bootstrap/constants.js",
+            ],
+        },
+    ],
+    require: [
+        "babel-polyfill",
+        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: {
+            rules: [
+                {
+                    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",
+                },
+            ],
+        },
+    },
+};