Add styleguidist docs.

.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

css/custom.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;
+}

docs/forms.md

@@ -0,0 +1,2 @@
+`<ForisForm/>` is HOC which encapsulates entire form logic and provided children required props.
+This component structure provides comfort API and allows to create typical Foris module forms easily.

docs/intro.md

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

package.json

@@ -31,8 +31,8 @@
     "@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",
     "@testing-library/react": "^8.0.9",
@@ -42,6 +42,7 @@
     "babel-plugin-module-resolver": "^3.2.0",
     "babel-plugin-react-transform": "^3.0.0",
     "babel-polyfill": "^6.26.0",
+    "css-loader": "^3.2.0",
     "eslint": "^6.1.0",
     "eslint-config-airbnb": "^18.0.1",
     "eslint-plugin-import": "^2.18.2",
@@ -54,8 +55,10 @@
     "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",
@@ -66,7 +69,9 @@
     "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={e => setValue(e.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={e => setEmail(e.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.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={e => setValue(e.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={e => setValue(e.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={e => setValue(e.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={e => setValue(e.target.value)}
 />
 ```

styleguide.config.js

@@ -0,0 +1,74 @@
+/*
+ * 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",
+            content: "docs/forms.md",
+            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",
+            ],
+        },
+    ],
+    template: {
+        head: {
+            links: [
+                {
+                    rel: "stylesheet",
+                    href: "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css",
+                },
+                {
+                    rel: "stylesheet",
+                    href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css",
+                },
+            ],
+        },
+    },
+    require: [
+        path.join(__dirname, "css/custom.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",
+                },
+            ],
+        },
+    },
+};