Add styleguidist docs.

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 
-        className='btn btn-secondary'
-        onClick={()=>setShown(true)}
-    >Show modal</button>
+    <button className='btn btn-secondary' onClick={()=>setShown(true)}>
+        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)}
 />
 ```