Merge branch 'docs-update' into 'dev'

Docs update

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

README.md

@@ -33,3 +33,12 @@ externals: {
 }
 ```
 
+### Docs
+Build or watch docs to get more info about library:
+```bash
+make docs
+```
+or
+```bash
+make docs-watch
+```

docs/development.md

@@ -0,0 +1,22 @@
+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.
+
+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:
+
+```bash
+make pack;
+cd dist;
+npm link;
+
+cd $project_dir/js # Navigate to JS directory of the project where you want to link the library
+npm link foris
+```
+
+And that's it ;)

docs/intro.md

@@ -1 +1,4 @@
-Foris JS library is set of componets 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.

package.json

@@ -38,8 +38,11 @@
     "@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",
@@ -48,7 +51,9 @@
     "react-dom": "16.9.0",
     "react-router-dom": "^5.1.2",
     "react-styleguidist": "^10.6.2",
-    "snapshot-diff": "^0.7.0"
+    "snapshot-diff": "^0.7.0",
+    "style-loader": "^1.2.1",
+    "webpack": "^4.43.0"
   },
   "scripts": {
     "lint": "eslint src",

src/alertContext/AlertContext.md

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

src/bootstrap/Alert.md

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

src/bootstrap/FileInput.js

@@ -19,6 +19,8 @@ FileInput.propTypes = {
     helpText: PropTypes.string,
     /** Email value. */
     value: PropTypes.string,
+    /** Allow selecting multiple files. */
+    multiple: PropTypes.bool,
 };
 
 export function FileInput({ ...props }) {

src/bootstrap/FileInput.md

@@ -3,13 +3,39 @@ Bootstrap component for file input. Includes label and has predefined sizes and
 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([]);
 
-<FileInput
+// Note that files is not an array but FileList.
-    files={files}
+const label = files.length === 1 ? files[0].name : "Choose file";
-    label="Some file"
+
-    helpText="Will be uploaded"
+<form className="col">
-    onChange={event =>setFiles(event.target.files)}
+    <FileInput
-/>
+        files={files}
+        label={label}
+        helpText="Will be uploaded"
+        onChange={event=>setFiles(event.target.files)}
+    />
+</form>
+```
+
+### FileInput with multiple files
+```js
+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";
+
+<form className="col">
+    <FileInput
+        files={files}
+        label={label}
+        helpText="Will be uploaded"
+        onChange={event=>setFiles(event.target.files)}
+        multiple
+    />
+</form>
 ```

src/bootstrap/Modal.md

@@ -6,8 +6,6 @@ it's required to have an element `<div id={"modal-container"}/>` somewhere on th
     <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';
 

src/testUtils/mockGlobals.js

@@ -0,0 +1,12 @@
+/*
+ * 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.
+ */
+
+// Mock babel (gettext)
+global._ = (str) => str;
+global.ngettext = (str) => str;
+global.babel = { format: (str) => str };
+global.ForisTranslations = { locale: "en" };

src/testUtils/setup.js

@@ -7,18 +7,13 @@
 
 import mockAxios from "jest-mock-axios";
 import moment from "moment-timezone";
+import "./mockGlobals";
 
 // Setup axios cleanup
 global.afterEach(() => {
     mockAxios.reset();
 });
 
-// Mock babel (gettext)
-global._ = (str) => str;
-global.ngettext = (str) => str;
-global.babel = { format: (str) => str };
-global.ForisTranslations = { locale: "en" };
-
 // Mock web sockets
 window.WebSocket = jest.fn();
 

styleguide.config.js

@@ -14,6 +14,10 @@ module.exports = {
             name: "Foris JS",
             content: "docs/intro.md",
         },
+        {
+            name: "Development (Linking)",
+            content: "docs/development.md",
+        },
         {
             name: "Foris forms",
             components: [
@@ -24,6 +28,14 @@ module.exports = {
             exampleMode: "expand",
             usageMode: "expand",
         },
+        {
+            name: "Alert Context",
+            components: [
+                "src/alertContext/AlertContext.js",
+            ],
+            exampleMode: "expand",
+            usageMode: "expand",
+        },
         {
             name: "Bootstrap components",
             description: "Set of bootstrap components.",
@@ -37,6 +49,7 @@ module.exports = {
     ],
     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"),
     ],