From 69b1b38202ef44f9c25e772ecd4128e7c51d8d19 Mon Sep 17 00:00:00 2001
From: Aleksandr Gumroian <aleksandr.gumroian@nic.cz>
Date: Thu, 17 Apr 2025 17:13:54 +0200
Subject: [PATCH] docs: Fix code snippets syntax highlighting & some
 refactoring

---
 src/bootstrap/Checkbox.md         |   2 +-
 src/bootstrap/CopyInput.md        |   2 +-
 src/bootstrap/DataTimeInput.md    |   2 +-
 src/bootstrap/DownloadButton.md   |   2 +-
 src/bootstrap/EmailInput.md       |   4 +-
 src/bootstrap/FileInput.md        |   4 +-
 src/bootstrap/Modal.md            |   8 +-
 src/bootstrap/NumberInput.md      |   3 +-
 src/bootstrap/PasswordInput.md    |   2 +-
 src/bootstrap/RadioSet.md         |   3 +-
 src/bootstrap/Select.md           |   3 +-
 src/bootstrap/Spinner.md          |   2 +-
 src/bootstrap/Switch.md           |   2 +-
 src/bootstrap/TextInput.md        |   3 +-
 src/bootstrap/ThreeDotsMenu.md    |   2 +-
 src/common/RichTable/RichTable.md | 128 ++----------------------------
 src/common/RichTable/mockData.js  | 119 +++++++++++++++++++++++++++
 src/form/components/ForisForm.md  |  40 +++++-----
 18 files changed, 171 insertions(+), 160 deletions(-)
 create mode 100644 src/common/RichTable/mockData.js

diff --git a/src/bootstrap/Checkbox.md b/src/bootstrap/Checkbox.md
index ccf1c43..49e82f0 100644
--- a/src/bootstrap/Checkbox.md
+++ b/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);
 
diff --git a/src/bootstrap/CopyInput.md b/src/bootstrap/CopyInput.md
index dcd6b4c..b778664 100644
--- a/src/bootstrap/CopyInput.md
+++ b/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.");
 
diff --git a/src/bootstrap/DataTimeInput.md b/src/bootstrap/DataTimeInput.md
index 4dfc33f..fb4af69 100644
--- a/src/bootstrap/DataTimeInput.md
+++ b/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";
diff --git a/src/bootstrap/DownloadButton.md b/src/bootstrap/DownloadButton.md
index e70e3d6..30066f5 100644
--- a/src/bootstrap/DownloadButton.md
+++ b/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>
 ```
diff --git a/src/bootstrap/EmailInput.md b/src/bootstrap/EmailInput.md
index 1178756..fcb22ae 100644
--- a/src/bootstrap/EmailInput.md
+++ b/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}
diff --git a/src/bootstrap/FileInput.md b/src/bootstrap/FileInput.md
index 8dcbe09..40357bb 100644
--- a/src/bootstrap/FileInput.md
+++ b/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([]);
diff --git a/src/bootstrap/Modal.md b/src/bootstrap/Modal.md
index 08d4878..7e70b6d 100644
--- a/src/bootstrap/Modal.md
+++ b/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";
diff --git a/src/bootstrap/NumberInput.md b/src/bootstrap/NumberInput.md
index 1106437..4271a1e 100644
--- a/src/bootstrap/NumberInput.md
+++ b/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
diff --git a/src/bootstrap/PasswordInput.md b/src/bootstrap/PasswordInput.md
index 33436d1..39184c5 100644
--- a/src/bootstrap/PasswordInput.md
+++ b/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");
 
diff --git a/src/bootstrap/RadioSet.md b/src/bootstrap/RadioSet.md
index 1a01b0e..54faee3 100644
--- a/src/bootstrap/RadioSet.md
+++ b/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" },
diff --git a/src/bootstrap/Select.md b/src/bootstrap/Select.md
index acbac8c..6e9d09e 100644
--- a/src/bootstrap/Select.md
+++ b/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",
diff --git a/src/bootstrap/Spinner.md b/src/bootstrap/Spinner.md
index 1b78108..afc51fc 100644
--- a/src/bootstrap/Spinner.md
+++ b/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>
 ```
diff --git a/src/bootstrap/Switch.md b/src/bootstrap/Switch.md
index 4969b9b..6dab5b4 100644
--- a/src/bootstrap/Switch.md
+++ b/src/bootstrap/Switch.md
@@ -1,5 +1,5 @@
 Switch example:
 
-```js
+```jsx
 <Switch label="Enable Switch" helpText="Toggle that switch!" />
 ```
diff --git a/src/bootstrap/TextInput.md b/src/bootstrap/TextInput.md
index 4125289..ae5dc21 100644
--- a/src/bootstrap/TextInput.md
+++ b/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
diff --git a/src/bootstrap/ThreeDotsMenu.md b/src/bootstrap/ThreeDotsMenu.md
index a405014..e414caa 100644
--- a/src/bootstrap/ThreeDotsMenu.md
+++ b/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";
diff --git a/src/common/RichTable/RichTable.md b/src/common/RichTable/RichTable.md
index 16a496c..8e85d14 100644
--- a/src/common/RichTable/RichTable.md
+++ b/src/common/RichTable/RichTable.md
@@ -4,132 +4,14 @@ Rich Table is a table component based on
 [Tanstack React Table](https://tanstack.com/table/). It adds some features to
 the table component, such as:
 
--   **Pagination**: The table can be paginated.
--   **Sorting**: The table can be sorted by columns.
--   **Row Expansion**: The table rows can be expanded. (To be implemented)
+- **Pagination**: The table can be paginated.
+- **Sorting**: The table can be sorted by columns.
+- **Row Expansion**: The table rows can be expanded. (To be implemented)
 
 ### Example
 
-```js
-import RichTable from "./RichTable";
-
-const columns = [
-    {
-        header: "Name",
-        accessorKey: "name",
-    },
-    {
-        header: "Surname",
-        accessorKey: "surname",
-    },
-    {
-        header: "Age",
-        accessorKey: "age",
-    },
-    {
-        header: "Phone",
-        accessorKey: "phone",
-    },
-];
-
-const data = [
-    {
-        name: "John",
-        surname: "Coltrane",
-        age: 30,
-        phone: "123456789",
-    },
-    {
-        name: "Jane",
-        surname: "Doe",
-        age: 25,
-        phone: "987654321",
-    },
-    {
-        name: "Alice",
-        surname: "Smith",
-        age: 35,
-        phone: "123456789",
-    },
-    {
-        name: "Bob",
-        surname: "Smith",
-        age: 40,
-        phone: "987654321",
-    },
-    {
-        name: "Charlie",
-        surname: "Brown",
-        age: 45,
-        phone: "123456789",
-    },
-    {
-        name: "Daisy",
-        surname: "Brown",
-        age: 50,
-        phone: "987654321",
-    },
-    {
-        name: "Eve",
-        surname: "Johnson",
-        age: 55,
-        phone: "123456789",
-    },
-    {
-        name: "Frank",
-        surname: "Johnson",
-        age: 60,
-        phone: "987654321",
-    },
-    {
-        name: "Grace",
-        surname: "Williams",
-        age: 65,
-        phone: "123456789",
-    },
-    {
-        name: "Henry",
-        surname: "Williams",
-        age: 70,
-        phone: "987654321",
-    },
-    {
-        name: "Ivy",
-        surname: "Brown",
-        age: 75,
-        phone: "123456789",
-    },
-    {
-        name: "Jack",
-        surname: "Brown",
-        age: 80,
-        phone: "987654321",
-    },
-    {
-        name: "Kelly",
-        surname: "Johnson",
-        age: 85,
-        phone: "123456789",
-    },
-    {
-        name: "Liam",
-        surname: "Johnson",
-        age: 90,
-        phone: "987654321",
-    },
-    {
-        name: "Mia",
-        surname: "Williams",
-        age: 95,
-        phone: "123456789",
-    },
-    {
-        name: "Nathan",
-        surname: "Williams",
-        age: 100,
-        phone: "987654321",
-    },
-];
+```jsx
+import { columns, data } from "./mockData";
 
 <RichTable columns={columns} data={data} withPagination />;
 ```
diff --git a/src/common/RichTable/mockData.js b/src/common/RichTable/mockData.js
new file mode 100644
index 0000000..f1ec472
--- /dev/null
+++ b/src/common/RichTable/mockData.js
@@ -0,0 +1,119 @@
+const columns = [
+    {
+        header: "Name",
+        accessorKey: "name",
+    },
+    {
+        header: "Surname",
+        accessorKey: "surname",
+    },
+    {
+        header: "Age",
+        accessorKey: "age",
+    },
+    {
+        header: "Phone",
+        accessorKey: "phone",
+    },
+];
+
+const data = [
+    {
+        name: "John",
+        surname: "Coltrane",
+        age: 30,
+        phone: "123456789",
+    },
+    {
+        name: "Jane",
+        surname: "Doe",
+        age: 25,
+        phone: "987654321",
+    },
+    {
+        name: "Alice",
+        surname: "Smith",
+        age: 35,
+        phone: "123456789",
+    },
+    {
+        name: "Bob",
+        surname: "Smith",
+        age: 40,
+        phone: "987654321",
+    },
+    {
+        name: "Charlie",
+        surname: "Brown",
+        age: 45,
+        phone: "123456789",
+    },
+    {
+        name: "Daisy",
+        surname: "Brown",
+        age: 50,
+        phone: "987654321",
+    },
+    {
+        name: "Eve",
+        surname: "Johnson",
+        age: 55,
+        phone: "123456789",
+    },
+    {
+        name: "Frank",
+        surname: "Johnson",
+        age: 60,
+        phone: "987654321",
+    },
+    {
+        name: "Grace",
+        surname: "Williams",
+        age: 65,
+        phone: "123456789",
+    },
+    {
+        name: "Henry",
+        surname: "Williams",
+        age: 70,
+        phone: "987654321",
+    },
+    {
+        name: "Ivy",
+        surname: "Brown",
+        age: 75,
+        phone: "123456789",
+    },
+    {
+        name: "Jack",
+        surname: "Brown",
+        age: 80,
+        phone: "987654321",
+    },
+    {
+        name: "Kelly",
+        surname: "Johnson",
+        age: 85,
+        phone: "123456789",
+    },
+    {
+        name: "Liam",
+        surname: "Johnson",
+        age: 90,
+        phone: "987654321",
+    },
+    {
+        name: "Mia",
+        surname: "Williams",
+        age: 95,
+        phone: "123456789",
+    },
+    {
+        name: "Nathan",
+        surname: "Williams",
+        age: 100,
+        phone: "987654321",
+    },
+];
+
+export { columns, data };
diff --git a/src/form/components/ForisForm.md b/src/form/components/ForisForm.md
index c6cdc91..c030b22 100644
--- a/src/form/components/ForisForm.md
+++ b/src/form/components/ForisForm.md
@@ -6,26 +6,30 @@ comfort API and allows to create typical Foris module forms easily.
 
 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>
+```jsx static
+export default function WAN({ ws }) {
+    return (
+        <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
+```jsx static
 export default function MACForm({
     formData,
     formErrors,
@@ -64,9 +68,9 @@ export default function MACForm({
 }
 ```
 
-The <ForisForm/> passes subsequent `props` to the child components.
+The `<ForisForm/>` passes subsequent `props` to the child components.
 
-| Prop           | Type   | Description                                                                |
+| Prop name      | Type   | Description                                                                |
 | -------------- | ------ | -------------------------------------------------------------------------- |
 | `formData`     | object | Data returned from API.                                                    |
 | `formErrors`   | object | Errors returned after validation via validator.                            |