docs: Fix code snippets syntax highlighting & some refactoring

src/bootstrap/Checkbox.md

@@ -4,7 +4,7 @@ using in foris forms.
 All additional `props` are passed to the `<input type="checkbox">` HTML
 component.
 
-```js
+```jsx
 import { useState } from "react";
 const [value, setValue] = useState(false);
 

src/bootstrap/CopyInput.md

@@ -4,7 +4,7 @@ be used with `readOnly` and `disabled` parameters, please see an example.
 
 All additional `props` are passed to the `<input type="text">` HTML component.
 
-```js
+```jsx
 import React, { useState } from "react";
 const [value, setValue] = useState("Text to appear in clipboard.");
 

src/bootstrap/DataTimeInput.md

@@ -4,7 +4,7 @@ Adopted from `react-datetime/DateTime` datatime picker component. It uses
 It requires `ForisTranslations.locale` to be defined in order to use right
 locale.
 
-```js
+```jsx
 ForisTranslations = { locale: "en" };
 
 import { useState, useEffect } from "react";

src/bootstrap/DownloadButton.md

@@ -5,6 +5,6 @@ Firefox. See
 [related issue](https://bugzilla.mozilla.org/show_bug.cgi?id=858538) for more
 details.
 
-```js
+```jsx
 <DownloadButton href="example.zip">Download</DownloadButton>
 ```

src/bootstrap/EmailInput.md

@@ -4,10 +4,12 @@ checking. It's only meaningful using inside `<form>`.
 
 All additional `props` are passed to the `<input type="email">` HTML component.
 
-```js
+```jsx
 import { useState } from "react";
 import Button from "./Button";
+
 const [email, setEmail] = useState("Wrong email");
+
 <form onSubmit={(e) => e.preventDefault()}>
     <EmailInput
         value={email}

src/bootstrap/FileInput.md

@@ -3,7 +3,7 @@ structure for using in foris forms.
 
 All additional `props` are passed to the `<input type="file">` HTML component.
 
-```js
+```jsx
 import { useState } from "react";
 
 const [files, setFiles] = useState([]);
@@ -23,7 +23,7 @@ const label = files.length === 1 ? files[0].name : "Choose file";
 
 ### FileInput with multiple files
 
-```js
+```jsx
 import { useState } from "react";
 
 const [files, setFiles] = useState([]);

src/bootstrap/Modal.md

@@ -6,9 +6,9 @@ the page since modals are rendered in portals.
 Modals also have three optional sizes, which can be defined through the `size`
 prop:
 
--   small - `sm`
--   large - `lg`
--   extra-large - `xl`
+- small - `sm`
+- large - `lg`
+- extra-large - `xl`
 
 For more details please visit Bootstrap
 <a href="https://getbootstrap.com/docs/4.5/components/modal/#optional-sizes" target="_blank">
@@ -18,7 +18,7 @@ documentation</a>.
 <div id="modal-container" />
 ```
 
-```js
+```jsx
 import { ModalHeader, ModalBody, ModalFooter } from "./Modal";
 
 import { useState } from "react";

src/bootstrap/NumberInput.md

@@ -3,8 +3,9 @@ structure for using in foris forms.
 
 All additional `props` are passed to the `<input type="number">` HTML component.
 
-```js
+```jsx
 import { useState } from "react";
+
 const [value, setValue] = useState(42);
 
 <NumberInput

src/bootstrap/PasswordInput.md

@@ -4,7 +4,7 @@ for using in foris forms. Can be used with "eye" button, see example.
 All additional `props` are passed to the `<input type="password">` HTML
 component.
 
-```js
+```jsx
 import { useState } from "react";
 const [value, setValue] = useState("secret");
 

src/bootstrap/RadioSet.md

@@ -5,8 +5,9 @@ All additional `props` are passed to the `<input type="number">` HTML component.
 
 Unless `helpText` is set for one of the options they are displayed inline.
 
-```js
+```jsx
 import { useState } from "react";
+
 const CHOICES = [
     { value: "one", label: "1" },
     { value: "two", label: "2" },

src/bootstrap/Select.md

@@ -3,8 +3,9 @@ and structure for using in foris forms.
 
 All additional `props` are passed to the `<select>` HTML component.
 
-```js
+```jsx
 import { useState } from "react";
+
 const CHOICES = {
     apple: "Apple",
     banana: "Banana",

src/bootstrap/Spinner.md

@@ -1,5 +1,5 @@
 Spiner Bootstrap component.
 
-```js
+```jsx
 <Spinner>You can put text inside or any component you wish.</Spinner>
 ```

src/bootstrap/Switch.md

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

src/bootstrap/TextInput.md

@@ -3,8 +3,9 @@ using in foris forms.
 
 All additional `props` are passed to the `<input type="text">` HTML component.
 
-```js
+```jsx
 import { useState } from "react";
+
 const [value, setValue] = useState("Bla bla");
 
 <TextInput

src/bootstrap/ThreeDotsMenu.md

@@ -2,7 +2,7 @@ ThreeDotsMenu Bootstrap component is a dropdown menu that appears when the user
 clicks on three dots. It is used to display a list of actions that can be
 performed on a particular item.
 
-```js
+```jsx
 import { useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faEdit, faTrash } from "@fortawesome/free-solid-svg-icons";