.eslintrc.js

@@ -1,3 +1,66 @@
+const path = require("path");
+
 module.exports = {
-    extends: "eslint-config-reforis",
+    "env": {
+        "browser": true,
+        "node": true,
+        "es6": true,
+        "jest": true
+    },
+    "extends": [
+        "airbnb",
+        "airbnb/hooks"
+    ],
+    "globals": {
+        "_": "readonly",
+        "babel": "readonly",
+        "ForisTranslations": "readonly",
+        "ngettext": "readonly",
+        "ForisPlugins": "readonly"
+    },
+    "parser": "babel-eslint",
+    "rules": {
+        "quotes": ["error", "double"],
+        "indent": ["error", 4],
+        "react/jsx-indent": ["error", 4],
+        "react/jsx-indent-props": ["error", 4],
+        "react/prop-types": "warn",
+        "react/no-array-index-key": "warn",
+        "react/button-has-type": "warn",
+        "import/prefer-default-export": "off",
+        "import/no-unresolved": [
+            "error",
+            // Ignore imports used only in tests
+            { ignore: ["customTestRender"] }
+        ],
+        "import/no-cycle": "warn",
+        "no-console": "error",
+        "no-use-before-define": ["error", {
+            functions: false,
+            classes: true,
+            variables: true
+        }],
+        "no-restricted-syntax": "warn",
+        // Should be enabled in the future
+        "camelcase": "off",
+        "no-param-reassign": "off",
+        "react/jsx-props-no-spreading": "off",
+        "react/require-default-props": "off",
+        "react/default-props-match-prop-types": "off",
+        "react/forbid-prop-types": "off",
+        // Permanently disabled
+        "react/jsx-filename-extension": "off",
+        "no-plusplus": "off",
+        "consistent-return": "off",
+        "radix": "off",
+        "no-continue": "off",
+        "react/no-danger": "off",
+    },
+    "settings": {
+        "import/resolver": {
+            "node": {
+                "paths": ["src"]
+            }
+        }
+    }
 };

.gitignore

@@ -4,9 +4,6 @@
 logs
 *.log
 
-# Python
-venv/
-
 # NodeJS
 ## Logs
 npm-debug.log*
@@ -46,8 +43,8 @@ coverage.xml
 ## Translations
 *.mo
 
+/js/styleguide/
 .gitignore
 
 dist/
 foris-*.tgz
-styleguide/

.gitlab-ci.yml

@@ -1,44 +1,26 @@
-image: registry.nic.cz/turris/reforis/reforis/reforis-image
+image: node:8-alpine
 
 stages:
-    - test
+  - test
-    - build
+  - build
-    - publish
 
 before_script:
-    - apt-get update && apt-get install -y make
+  - npm install
-    - npm install
 
 test:
-    stage: test
+  stage: test
-    script:
+  script:
-        - make test
+    - npm test
 
 lint:
-    stage: test
+  stage: test
-    script:
+  script:
-        - make lint
+    - npm run lint
 
 build:
-    stage: build
+  stage: build
-    script:
+  script:
-        - make pack
+    - npm pack
-    artifacts:
+  artifacts:
-        paths:
+    paths:
-            - dist/foris-*.tgz
+      - foris-*.tgz
-
-publish_beta:
-    stage: publish
-    only:
-        refs:
-            - dev
-    script:
-        - make publish-beta
-
-publish_latest:
-    stage: publish
-    only:
-        refs:
-            - master
-    script:
-        - make publish-latest

.weblate

@@ -1,3 +0,0 @@
-[weblate]
-url = https://hosted.weblate.org/api/
-translation = turris/foris-js

CHANGELOG.md

@@ -1,547 +0,0 @@
-# Changelog
-
-All notable changes to this project will be documented in this file.
-
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
-and this project adheres to
-[Semantic Versioning](https://semver.org/spec/v2.0.0.html).
-
-## [Unreleased]
-
-## [6.7.1] - 2025-04-04
-
-### Added
-
-- Added & updated Weblate translations
-
-## [6.7.0] - 2025-03-11
-
-### Added
-
-- Added encryption property to guest WiFi settings in tests
-- Added global fuzzy search and columns visibility to RichTable
-
-### Changed
-
-- Made thead of RichTable lighter
-- Updated dependencies in package.json to latest versions
-- Enhanced ActionButtonWithModal to support dynamic methods
-- NPM audit fix
-
-## [6.6.2] - 2025-02-20
-
-### Changed
-
-- Enhanced SubmitButton component to accept a custom label prop
-- Refactored RichTable component to remove forwardRef and simplify data handling
-
-## [6.6.1] - 2025-02-17
-
-### Changed
-
-- Refactored RichTable component to use forwardRef
-
-## [6.6.0] - 2025-02-07
-
-### Added
-
-- Added & updated Weblate translations
-- Added Wi-Fi and LAN settings URLs to ForisURLs
-- Added Wi-Fi modes VHT/HE 80+80
-- Added encryption selection to WiFiGuestForm
-- Added optional close button to ModalHeader component
-
-### Changed
-
-- Updated Wi-Fi API
-- Enhanced NumberInput component with keyboard & touch accessibility
-- Refactored pagination condition in RichTable component
-
-## [6.5.0] - 2024-11-13
-
-### Added
-
-- Added & updated Weblate translations
-- Added RichTable component with pagination and sorting
-- Added @tanstack/react-table v8.20.5 to dependencies
-
-### Changed
-
-- Updated documentation
-- Replaced RebootButton with ActionButtonWithModal component
-- Fixed import path for CustomizationContextMock in customTestRender.js
-
-## [6.4.0] - 2024-10-02
-
-### Changed
-
-- Refactored Alert component to include dismiss animation and timeout
-- Refactored ThreeDotsMenu component to include additional props
-
-## [6.3.0] - 2024-09-27
-
-### Added
-
-- Added ThreeDotsMenu component
-
-### Changed
-
-- Refactored EmailInput description
-- Refactored RadioSet & ignore Radio component
-- Refactored npm package badge in introduction.md
-- NPM audit fix
-
-## [6.2.1] - 2024-09-25
-
-### Added
-
-- Added & updated Weblate translations
-
-### Changed
-
-- Refactored CopyInput component
-- Refactored ForisURLs to include new URLs for Overview page
-
-## [6.2.0] - 2024-09-20
-
-### Added
-
-- Added useFocusTrap hook
-- Added extendSession endpoint
-
-### Changed
-
-- Refactored Spinner.css to use CSS variable for color
-- Refactored Modal component to use useFocusTrap hook
-- Refactored Alert component to use useFocusTrap hook
-
-## [6.1.1] - 2024-08-30
-
-### Added
-
-- Added & updated Weblate translations
-
-### Changed
-
-- Updated icon color classes to use "text-secondary" instead of "text-dark"
-- Updated Wi-Fi QRCodeModal component to use new styles & added close button
-- Refactored WiFiGuestForm component to get rid of obsolete div element
-- NPM audit fix
-
-## [6.1.0] - 2024-08-23
-
-### Added
-
-- Added & updated Weblate translations
-
-### Changed
-
-- Migrated to Font Awesome v6
-- NPM audit fix
-
-## [6.0.3] - 2024-07-26
-
-### Changed
-
-- Updated WiFiQRCode component
-
-## [6.0.2] - 2024-06-28
-
-### Added
-
-- Added className prop to CheckBox and Radio components
-
-## [6.0.1] - 2024-06-26
-
-### Added
-
-- Added className prop to Switch component
-
-### Changed
-
-- Updated dependencies in package.json
-- NPM audit fix
-
-## [6.0.0] - 2024-06-11
-
-### Added
-
-- Added CHANGELOG.md
-- Added JS_DIR variable to Makefile
-- Added support for shared reForis ESLint configuration
-
-### Changed
-
-- Updated dependencies in package.json
-- Updated Spinner.css styles for better positioning and responsiveness
-- Migrated to Bootstrap 5
-- NPM audit fix
-- Other small improvements
-
-## [5.6.1] - 2024-01-19
-
-- Added & updated Weblate translations
-- Fixed loading state & button's layout
-- Updated bootstrap library to version 4.6.2
-- Used custom reforis-image in GitLab CI/CD
-- NPM audit fix
-
-## [5.6.0] - 2022-12-29
-
-- Add & update Weblate translations
-- Add CustomizationContext and custom hook
-- Update caniuse-lite
-- Remove testUtils from .gitignore
-- Make ieee80211w_disabled as optional in WiFiForm
-- Move contexts in a context folder
-- NPM audit fix
-
-## [5.5.0] - 2022-12-02
-
-- Add & update translations
-- Add a switch to disable Management Frame Protection (802.11w)
-- Improved Foris JS documentation
-- NPM audit fix
-
-## [5.4.1] - 2022-06-03
-
-- Add Weblate translations
-- Update PropType peer dependency
-- NPM audit fix
-
-## [5.4.0] - 2022-05-20
-
-- Add & update translations
-- Add CopyInput bootstrap component
-- Update WiFiForm labels and description for wifi ax
-- Make WS path in lighttpd mode configurable
-- Fix Wi-Fi password helptext string
-- NPM audit fix
-
-## [5.3.0] - 2022-02-21
-
-- Added & update translations
-- Added rest of the props to DownloadButton component
-- Added hostname validation
-- Added wifi 802.11ax HE modes
-- Set best Wi-Fi HT mode depending on the checked frequency
-- Improved domain name RegEx pattern
-- Removed customOrder prop in Select component
-- Fixed Wi-Fi translation strings
-- Fixed autocomplete attribute in PasswordInput
-- Fixed WiFi password max length check
-- Fixed documentation build
-- Fixed access token in publish script
-- Refined & restructure Makefile
-- Updated GitLab CI image to Node.js v16
-- NPM update (several dependencies)
-- NPM audit fix
-
-## [5.2.0] - 2021-12-15
-
-- Remove login page
-- NPM audit fix
-
-## [5.1.16] - 2021-11-18
-
-- Revert bad NPM audit fix
-- NPM audit fix
-
-## [5.1.15] - 2021-11-03
-
-- Add WPA3 option
-- Add custom order ability of Select options
-- NPM audit fix
-
-## [5.1.14] - 2021-07-30
-
-- Add & update translations
-- Fix infinity redirect loop when WS error occurs
-- NPM audit fix
-
-## [5.1.13] - 2021-06-30
-
-- Add sentinelAgreement endpoint to forisUrls
-- NPM audit fix
-
-## [5.1.12] - 2021-05-14
-
-- Add & update translations
-- Add & fix obsolete links
-- Expend library with the ResetWifiSettings function
-- Fix switching Wi-Fi modes depending on bands in WiFiForm
-- Fix translation sources in WiFiForm
-- NPM audit fix
-- Other small improvements
-
-## [5.1.11] - 2021-01-04
-
-- Remove duplicated file for Norwegian language
-- Fix translations inconsistency
-
-## [5.1.10] - 2021-12-29
-
-- Add and update translations
-
-## [5.1.9] - 2021-12-20
-
-- Increase bottom margin of formFieldsSize
-- Change formFieldsSize of ResetWiFiSettings card
-- Fix trailing space in Modal classes
-
-## [5.1.8] - 2020-12-19
-
-- Add isPluginInstalled function
-
-## [5.1.7] - 2020-11-27
-
-## [5.1.6] - 2020-11-25
-
-- NPM audit fix
-- Add displayCard function to utils
-- Add optional sizes to Modal
-- Add information about optional sizes to docs
-- Remove redundant merge.py
-
-## [5.1.5] - 2020-09-25
-
-- Fix DateTime import
-- Fix extra empty space in Switch's classes
-
-## [5.1.4] - 2020-09-25
-
-- Add inline option to Wi-Fi's RadioSet
-- Fix Alert's dismissible class condition
-- Add closing bootstrap modal using ESC
-- Change reboot modal's heading to "Warning!"
-
-## [5.1.3] - 2020-09-11
-
-- Add SSID validation for 32 bytes length
-- Add helpText for SSID input
-
-## [5.1.2] - 2020-09-08
-
-- Fix infinity loop caused by WebSockets
-- Resolve small issues
-
-## [5.1.1] - 2020-08-31
-
-- Add "inline" option to RadioSet
-- NPM audit fix
-
-## [5.1.0] - 2020-08-25
-
-- Add new Switch component
-- Swap checkboxes for switches on Wi-Fi page
-- Decrease button width on different breakpoints
-- Add integration of Prettier + ESLint + reForis Style Guide
-- Add appropriate links to dropdown headers
-- Add semantic & accessibility structure for headings
-- NPM audit & Update packages
-- GitLab CI: image update to node 10
-
-## [5.0.3] - 2020-09-23
-
-- Fixes issue with WebSockets
-
-## [5.0.2] - 2020-09-22
-
-- Fix infinity loop caused by WebSockets
-
-## [5.0.1] - 2020-07-21
-
-- Fix Wi-Fi Form
-- NPM audit fix & update of packages
-
-## [5.0.0] - 2020-05-07
-
-- I've realized that it should be major update due to broken API.
-
-## [4.5.1] - 2020-05-07
-
-- Add initialData to ForisForm children.
-- Update translations .pot file.
-
-## [4.5.0] - 2020-03-25
-
-- Use exposed pdfmake.
-- NPM audit fix & update of packages.
-
-## [4.4.0] - 2020-03-13
-
-- Update domain validation.
-
-## [4.3.1] - 2020-03-06
-
-- Add logout link.
-
-## [4.3.0] - 2020-02-26
-
-- Allow RadioSet accept elements as children.
-- Add option to make modal scrollable.
-
-## [4.2.0] - 2020-02-21
-
-- Add translations.
-- Improve datatime localization.
-
-## [4.1.0] - 2020-02-20
-
-- Added date and time utilities.
-
-## [4.0.0] - 2020-02-20
-
-- Throw an error if unhandled exception happens during API request.
-
-## [3.4.0] - 2020-02-17
-
-- Display actual GET error response within the form.
-- Added styles extracted from reForis.
-- Added reference to form element (for programmatically submitting it).
-
-## [3.2.0] - 2020-01-17
-
-- Swapped react-router with react-router-dom. Prepared Foris JS for using
-  react-router-dom exposed by reForis.
-- Added controller ID filter to WebSocket hook.
-- Updated translation messages after moving WiFi form.
-- Increased request timeout to 30.5 sec.
-
-## [3.1.1] - 2020-01-10
-
-- Fixed package dependencies related to exposing libraries via reForis
-
-## [3.1.0] - 2020-01-09
-
-- Added Wi-Fi settings form
-- Fixed path to index.js file in package.json
-
-## [3.0.0] - 2020-01-07
-
-- Removal of Babel compiler
-- Fixed width of ForisForm, removed default sizing for form widgets (like
-  buttons)
-
-## [2.1.1] - 2020-01-06
-
-- Display date and time picker above input element
-
-## [2.1.0] - 2019-12-19
-
-- Set WebSocket logging to debug level
-- Added hook that detects clicking outside of component
-- Added Radio to list of publicly available components
-- Fixed link to git repository in package.json
-
-## [2.0.0] - 2019-12-09
-
-- Added dynamic suffix for API URLs (allowing to use one hook for different
-  resources with e.g. PUT)
-- Added unsubscribe method to WebSocket client
-- Added custom class to SpinnerElement
-- Improved documentation
-- Published README.md
-
-## [1.4.0] - 2019-11-29
-
-- Add reboot button.
-- Fix Foris URLs prefixes
-
-## [1.3.3] - 2019-11-22
-
-- Add translations from Weblate.
-
-## [1.3.2] - 2019-11-20
-
-- Expose only AlertContext.
-- Add hook for API pooling.
-
-## [1.3.1] - 2019-11-14
-
-## [1.2.0] - 2019-10-24
-
-## [1.1.0] - 2019-10-22
-
-## [1.0.0] - 2019-10-07
-
-## [0.0.7] - 2019-09-02
-
-[unreleased]:
-    https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.7.1...dev
-[6.7.1]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.7.0...v6.7.1
-[6.7.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.6.2...v6.7.0
-[6.6.2]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.6.1...v6.6.2
-[6.6.1]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.6.0...v6.6.1
-[6.6.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.5.0...v6.6.0
-[6.5.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.4.0...v6.5.0
-[6.4.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.3.0...v6.4.0
-[6.3.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.2.1...v6.3.0
-[6.2.1]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.2.0...v6.2.1
-[6.2.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.1.1...v6.2.0
-[6.1.1]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.1.0...v6.1.1
-[6.1.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.0.3...v6.1.0
-[6.0.3]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.0.2...v6.0.3
-[6.0.2]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.0.1...v6.0.2
-[6.0.1]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.0.0...v6.0.1
-[6.0.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.6.1...v6.0.0
-[5.6.1]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.6.0...v5.6.1
-[5.6.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.5.0...v5.6.0
-[5.5.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.4.1...v5.5.0
-[5.4.1]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.4.0...v5.4.1
-[5.4.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.3.0...v5.4.0
-[5.3.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.2.0...v5.3.0
-[5.2.0]:
-    https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.1.16...v5.2.0
-[5.1.16]:
-    https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.1.15...v5.1.16
-[5.1.15]:
-    https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.1.14...v5.1.15
-[5.1.14]:
-    https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.1.13...v5.1.14
-[5.1.13]:
-    https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.1.12...v5.1.13
-[5.1.12]:
-    https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.1.11...v5.1.12
-[5.1.11]:
-    https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.1.10...v5.1.11
-[5.1.10]:
-    https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.1.9...v5.1.10
-[5.1.9]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.1.8...v5.1.9
-[5.1.8]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.1.7...v5.1.8
-[5.1.7]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.1.6...v5.1.7
-[5.1.6]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.1.5...v5.1.6
-[5.1.5]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.1.4...v5.1.5
-[5.1.4]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.1.3...v5.1.4
-[5.1.3]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.1.2...v5.1.3
-[5.1.2]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.1.1...v5.1.2
-[5.1.1]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.1.0...v5.1.1
-[5.1.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.0.3...v5.1.0
-[5.0.3]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.0.2...v5.0.3
-[5.0.2]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.0.1...v5.0.2
-[5.0.1]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v5.5.0...v5.0.1
-[5.0.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v4.5.1...v5.0.0
-[4.5.1]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v4.5.0...v4.5.1
-[4.5.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v4.4.0...v4.5.0
-[4.4.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v4.3.1...v4.4.0
-[4.3.1]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v4.3.0...v4.3.1
-[4.3.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v4.2.0...v4.3.0
-[4.2.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v4.1.0...v4.2.0
-[4.1.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v4.0.0...v4.1.0
-[4.0.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v3.4.0...v4.0.0
-[3.4.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v3.2.0...v3.4.0
-[3.2.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v3.1.1...v3.2.0
-[3.1.1]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v3.1.0...v3.1.1
-[3.1.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v3.0.0...v3.1.0
-[3.0.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v2.1.1...v3.0.0
-[2.1.1]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v2.1.0...v2.1.1
-[2.1.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v2.0.0...v2.1.0
-[2.0.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v1.4.0...v2.0.0
-[1.4.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v1.3.3...v1.4.0
-[1.3.3]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v1.3.2...v1.3.3
-[1.3.2]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v1.3.1...v1.3.2
-[1.3.1]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v1.2.0...v1.3.1
-[1.2.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v1.1.0...v1.2.0
-[1.1.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v1.0.0...v1.1.0
-[1.0.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v0.0.7...v1.0.0
-[0.0.7]: https://gitlab.nic.cz/turris/reforis/foris-js/-/tags/v0.0.7

Makefile

@@ -1,129 +1,17 @@
-# Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+.PHONY: all create-messages update-messages clean
-#
-# This is free software, licensed under the GNU General Public License v3.
-# See /LICENSE for more information.
 
-PROJECT="Foris JS"
-# Retrieve Foris JS version from package.json 
-VERSION= $(shell sed -En "s/.*version['\"]: ['\"](.+)['\"].*/\1/p" package.json)
-COPYRIGHT_HOLDER="CZ.NIC, z.s.p.o. (https://www.nic.cz/)"
-MSGID_BUGS_ADDRESS="tech.support@turris.cz"
-
-DEV_PYTHON=python3
-VENV_NAME?=venv
-JS_DIR=js
-VENV_BIN=$(shell pwd)/$(VENV_NAME)/bin
-
-.PHONY: all
 all:
-	@echo "make install-js"
-	@echo "    Install npm dependencies."
-	@echo "make lint"
-	@echo "    Run linter on the project."
-	@echo "make test"
-	@echo "    Run tests on the project."
-	@echo "make test-js-watch"
-	@echo "    Run tests on the project in watch mode."
-	@echo "make test-js-update-snapshots"
-	@echo "    Update snapshots."
 	@echo "make create-messages"
 	@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."
 
+create-messages:
+	pybabel extract -F babel.cfg -o ./translations/forisjs.pot .
+update-messages:
+	pybabel update -i translations/forisjs.pot -d translations
 
-# Preparation
-
-.PHONY: venv
-venv: $(VENV_NAME)/bin/activate
-$(VENV_NAME)/bin/activate:
-	test -d $(VENV_NAME) || $(DEV_PYTHON) -m virtualenv -p $(DEV_PYTHON) $(VENV_NAME)
-	$(VENV_BIN)/$(DEV_PYTHON) -m pip install -r requirements.txt
-	touch $(VENV_NAME)/bin/activate
-
-
-# Installation
-
-.PHONY: install-js
-install-js: package.json
-	npm install --save-dev
-
-
-# Publishing
-
-.PHONY: collect-files
-collect-files:
-	sh scripts/collect_files.sh
-
-.PHONY: pack
-pack: collect-files
-	cd dist && npm pack
-
-.PHONY: publish-beta
-publish-beta: collect-files
-	sh scripts/publish.sh beta
-
-.PHONY: publish-latest
-publish-latest: collect-files
-	sh scripts/publish.sh latest
-
-
-# Linting
-
-.PHONY: lint
-lint:
-	npm run lint
-
-.PHONY: lint-js-fix
-lint-js-fix:
-	npm run lint:fix
-
-
-# Testing
-
-.PHONY: test
-test:
-	npm test
-
-.PHONY: test-js-watch
-test-js-watch:
-	cd $(JS_DIR); npm test -- --watch
-
-.PHONY: test-js-update-snapshots
-test-js-update-snapshots:
-	npm test -- -u
-
-
-# Translations
-
-.PHONY: create-messages
-create-messages: venv
-	$(VENV_BIN)/pybabel extract -F babel.cfg -o ./translations/forisjs.pot . --project=$(PROJECT) --version=$(VERSION) --copyright-holder=$(COPYRIGHT_HOLDER) --msgid-bugs-address=$(MSGID_BUGS_ADDRESS)
-
-.PHONY: update-messages
-update-messages: venv
-	$(VENV_BIN)/pybabel update -i ./translations/forisjs.pot -d ./translations -D forisjs --update-header-comment
-
-
-# Documentation
-
-.PHONY: docs
-docs:
-	npm run-script docs
-
-.PHONY: docs-watch
-docs-watch:
-	npm run-script docs:watch
-
-
-# Other
-
-.PHONY: clean
 clean:
 	rm -rf node_modules dist

README.md

@@ -1,52 +0,0 @@
-# foris-js
-
-Set of utils and common React elements for reForis.
-
-## Publishing package
-
-### Beta versions
-
-Each commit to `dev` branch will result in publishing a new version of library
-tagged `beta`. Versions names are based on commit SHA, e.g.
-`foris@0.1.0-beta.d9073aa4`.
-
-### Preparing a release
-
-1. Crete a merge request to `dev` branch with version bumped
-2. When merging add `[skip ci]` to commit message to prevent publishing
-   unnecessary version
-3. Create a merge request from `dev` to `master` branch
-4. New version should be published automatically
-
-## Manually managed dependencies
-
-Because of `<ForisForm />` component it's required to use exposed
-`ReactRouterDOM` object from `react-router-dom` library. `ReactRouterDOM` is
-exposed by
-[reForis](https://gitlab.labs.nic.cz/turris/reforis/reforis/blob/master/js/webpack.config.js).
-It can be done by following steps:
-
-1. Setting `react-router-dom` as `peerDependencies` and `devDependencies` in
-   `package.json`.
-2. Adding the following rules to `externals` in `webpack.conf.js` of the plugin:
-
-```js
-externals: {
-    ...
-    "react-router-dom": "ReactRouterDOM",
-}
-```
-
-### Docs
-
-Build or watch docs to get more info about library:
-
-```bash
-make docs
-```
-
-or
-
-```bash
-make docs-watch
-```

babel.config.js

@@ -1,4 +1,17 @@
 module.exports = {
-    presets: ["@babel/preset-env", "@babel/preset-react"],
+    presets: [
-    plugins: ["@babel/plugin-transform-runtime"],
+        "@babel/preset-env",
+        "@babel/preset-react",
+    ],
+    plugins: [
+        "@babel/plugin-transform-runtime",
+        "@babel/plugin-syntax-export-default-from",
+        ["module-resolver", {
+            root: ["./src"],
+            alias: {
+                test: "./test",
+                underscore: "lodash",
+            },
+        }],
+    ],
 };

docs/components/Logo.js

@@ -1,36 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import Styled from "rsg-components/Styled";
-import logo from "./logo.svg";
-
-const styles = ({ fontFamily }) => ({
-    logo: {
-        display: "flex",
-        alignItems: "center",
-        margin: 0,
-        fontFamily: fontFamily.base,
-        fontSize: 18,
-        fontWeight: "normal",
-    },
-    image: {
-        height: "1.3em",
-        marginLeft: "-0.2em",
-        marginRight: "0.2em",
-    },
-});
-
-export function LogoRenderer({ classes, children }) {
-    return (
-        <h1 className={classes.logo}>
-            <img className={classes.image} src={logo} alt="React logo" />
-            {children}
-        </h1>
-    );
-}
-
-LogoRenderer.propTypes = {
-    classes: PropTypes.object.isRequired,
-    children: PropTypes.node,
-};
-
-export default Styled(styles)(LogoRenderer);

docs/components/logo.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000">
-    <path d="M288.258 240.0394L717.5586-.44c.803 62.277-1.8207 124.502-1.4996 186.7266 1.8208 7.6343-7.2288 10.1966-12.102 13.4908L286.4375 432.1518l1.8206-192.1124zm2.284 277.645L711 278.3176l-.8416 192.7742L457.357 614.514l-1.842 289.03-167.7097 95.8926 2.7365-481.753z"/>
-</svg>

docs/development.md

@@ -1,25 +0,0 @@
-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 the
-[`npm link`](https://docs.npmjs.com/cli/link).
-
-Please, notice that it will not work if you link the library just from the root
-of the repo. It happens due to the location of sources `./src`. You need to pack
-the library first, `make pack` and then link it from the `./dist` directory.
-
-Yeah, it's not such a comfortable solution for development. But it can be fixed
-by writing a small script similar to making a pack but by linking every file and
-directory from `./src` to the same directory and linking then from it. Notice
-that you need to link a `package.json` and a `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/forisjs-npm.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" fill="white">
-    <path d="M49.5 171.722222222222h400v133.333333333333h-200v22.222222222223h-88.888888888889v-22.222222222223H49.5V171.722222222222zm22.222222222222 111.111111111111h44.444444444445v-66.666666666667h22.222222222222v66.666666666667h22.222222222222v-88.888888888889H71.722222222222v88.888888888889zm111.111111111111-88.888888888889v111.111111111111h44.444444444445v-22.222222222222h44.444444444444v-88.888888888889h-88.888888888889zm44.444444444445 22.222222222222H249.5v44.444444444445h-22.222222222222v-44.444444444445zm66.666666666666-22.222222222222v88.888888888889h44.444444444445v-66.666666666667h22.222222222222v66.666666666667h22.222222222222v-66.666666666667h22.222222222222v66.666666666667h22.222222222223v-88.888888888889H293.944444444444z" fill="#cb3837" />
-    <path d="M71.722222222222 282.833333333333h44.444444444444v-66.666666666667h22.222222222223v66.666666666667h22.222222222222v-88.888888888889H71.722222222222zm111.111111111111-88.888888888889v111.111111111111h44.444444444444v-22.222222222222h44.444444444445v-88.888888888889h-88.888888888889zM249.5 260.611111111111h-22.222222222223v-44.444444444445H249.5v44.444444444445zm44.444444444444-66.666666666667v88.888888888889h44.444444444444v-66.666666666667h22.222222222223v66.666666666667h22.222222222222v-66.666666666667h22.222222222222v66.666666666667h22.222222222222v-88.888888888889z" />
-</svg>

docs/introduction.md

@@ -1,36 +0,0 @@
-Welcome! This is the official documentation for Foris JS.
-
-## What Foris JS is
-
-Foris JS library is a set of components and utils for reForis application and
-plugins.
-
-Please notice that all of these components or utils are used in reForis and
-plugins. If you want to study them by example, I recommend you to full-text
-search those repositories.
-
-# Installation
-
-## Prerequisites
-
-Please make sure that [Node.js](https://nodejs.org/en/) is installed on your
-system.
-
-The current Long Term Support (LTS) release is an ideal starting point, see
-[here](https://github.com/nodejs/Release#release-schedule).
-
-## Installation
-
-To install the latest release:
-
-```plain
-npm install foris
-```
-
-To install a specific version:
-
-```plain
-npm install foris@version
-```
-
-[![npm version](https://badge.fury.io/js/foris.svg)](https://badge.fury.io/js/foris)

jest.config.js

@@ -12,18 +12,16 @@ module.exports = {
         "<rootDir>/src/testUtils",
         "<rootDir>/src/",
     ],
-    moduleNameMapper: {
-        "\\.(css|less)$": "<rootDir>/src/__mocks__/styleMock.js",
-    },
     clearMocks: true,
     collectCoverageFrom: ["src/**/*.{js,jsx}"],
     coverageDirectory: "coverage",
-    testPathIgnorePatterns: ["/node_modules/", "/__fixtures__/", "/dist/"],
+    testPathIgnorePatterns: ["/node_modules/", "/__fixtures__/"],
-    testEnvironment: "jsdom",
     verbose: false,
-    setupFilesAfterEnv: ["<rootDir>/src/testUtils/setup"],
+    setupFilesAfterEnv: [
+        "@testing-library/react/cleanup-after-each",
+        "<rootDir>/src/testUtils/setup",
+    ],
     globals: {
         TZ: "utc",
     },
-    transformIgnorePatterns: ["node_modules/(?!(react-datetime)/)"],
 };

package.json

@@ -1,74 +1,71 @@
 {
-    "name": "foris",
+  "name": "foris",
-    "version": "6.7.1",
+  "version": "0.0.7",
-    "description": "Foris JS library is a set of components and utils for reForis application and plugins.",
+  "description": "Set of components and utils for Foris and its plugins.",
-    "author": "CZ.NIC, z.s.p.o.",
+  "author": "CZ.NIC, z.s.p.o.",
-    "repository": {
+  "repository": {
-        "type": "git",
+    "type": "git",
-        "url": "https://gitlab.nic.cz/turris/reforis/foris-js.git"
+    "url": "https://gitlab.labs.nic.cz/turris/reforis/forisjs.git"
-    },
+  },
-    "keywords": [
+  "keywords": [
-        "foris",
+    "foris",
-        "reforis"
+    "reforis"
-    ],
+  ],
-    "license": "GPL-3.0",
+  "license": "GPL-3.0",
-    "main": "./src/index.js",
+  "main": "./dist/index.js",
-    "dependencies": {
+  "dependencies": {
-        "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "axios": "^0.19.0",
-        "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "immutability-helper": "^3.0.1",
-        "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "prop-types": "^15.7.2",
-        "@fortawesome/react-fontawesome": "^0.2.2",
+    "react-datetime": "^2.16.3",
-        "@tanstack/match-sorter-utils": "^8.19.4",
+    "react-router": "^5.0.1",
-        "@tanstack/react-table": "^8.21.2",
+    "react-uid": "^2.2.0",
-        "axios": "^1.7.9",
+    "moment": "^2.24.0",
-        "immutability-helper": "^3.1.1",
+    "moment-timezone": "^0.5.25"
-        "moment": "^2.30.1",
+  },
-        "qrcode.react": "^4.2.0",
+  "peerDependencies": {
-        "react-datetime": "^3.3.1",
+    "react": "^16.9.0",
-        "react-uid": "^2.4.0"
+    "react-dom": "^16.9.0"
-    },
+  },
-    "peerDependencies": {
+  "devDependencies": {
-        "bootstrap": "^5.3.3",
+    "@babel/cli": "^7.5.5",
-        "prop-types": "15.8.1",
+    "@babel/core": "^7.5.5",
-        "react": "16.9.0",
+    "@babel/plugin-syntax-export-default-from": "^7.2.0",
-        "react-dom": "16.9.0",
+    "@babel/plugin-transform-runtime": "^7.4.4",
-        "react-router-dom": "^5.1.2"
+    "@babel/preset-env": "^7.4.5",
-    },
+    "@babel/preset-react": "^7.0.0",
-    "devDependencies": {
+    "@testing-library/react": "^8.0.1",
-        "@babel/cli": "^7.26.4",
+    "babel-eslint": "^9.0.0",
-        "@babel/core": "^7.26.9",
+    "babel-jest": "^24.8.0",
-        "@babel/plugin-transform-runtime": "^7.26.9",
+    "babel-loader": "^8.0.6",
-        "@babel/preset-env": "^7.26.9",
+    "babel-plugin-module-resolver": "^3.2.0",
-        "@babel/preset-react": "^7.26.3",
+    "babel-plugin-react-transform": "^3.0.0",
-        "@testing-library/react": "^12.1.5",
+    "babel-polyfill": "^6.26.0",
-        "babel-loader": "^9.2.1",
+    "eslint": "^5.16.0",
-        "babel-polyfill": "^6.26.0",
+    "eslint-config-airbnb": "^18.0.1",
-        "bootstrap": "^5.3.3",
+    "eslint-plugin-import": "^2.17.3",
-        "css-loader": "^7.1.2",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
-        "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.13.0",
-        "eslint-config-reforis": "^2.2.1",
+    "eslint-plugin-react-hooks": "^1.6.0",
-        "file-loader": "^6.0.0",
+    "jest": "^24.8.0",
-        "jest": "^29.7.0",
+    "jest-mock-axios": "^3.0.0",
-        "jest-environment-jsdom": "^29.7.0",
+    "moment": "^2.24.0",
-        "jest-mock-axios": "^4.8.0",
+    "moment-timezone": "^0.5.25",
-        "moment-timezone": "^0.5.47",
+    "react": "^16.9.0",
-        "prettier": "^3.5.3",
+    "react-dom": "^16.9.0",
-        "prop-types": "15.8.1",
+    "react-styleguidist": "^9.1.11",
-        "react": "16.9.0",
+    "snapshot-diff": "^0.5.1"
-        "react-dom": "16.9.0",
+  },
-        "react-router-dom": "^5.1.2",
+  "scripts": {
-        "react-styleguidist": "^12.0.1",
+    "build": "rm -rf dist; babel src --out-dir dist --ignore '**/__tests__' --source-maps inline",
-        "snapshot-diff": "^0.10.0",
+    "prepare": "rm -rf ./dist && npm run build",
-        "style-loader": "^4.0.0",
+    "lint": "eslint src",
-        "webpack": "^5.98.0"
+    "test": "jest",
-    },
+    "test:watch": "jest --watch",
-    "scripts": {
+    "test:coverage": "jest --coverage --colors"
-        "lint": "eslint src",
+  },
-        "lint:fix": "eslint --fix src",
+  "files": [
-        "test": "jest",
+    "dist/**",
-        "test:watch": "jest --watch",
+    "translations"
-        "test:coverage": "jest --coverage --colors",
+  ]
-        "docs": "npx styleguidist build ",
+}
-        "docs:watch": "styleguidist server"
-    }
-}

prettier.config.js

@@ -1 +0,0 @@
-module.exports = require("eslint-config-reforis/prettier.config");

requirements.txt

@@ -1 +0,0 @@
-Babel

scripts/collect_files.sh

@@ -1,13 +0,0 @@
-#!/bin/sh
-
-# Collect files
-mkdir -p dist
-cp -rf ./src/* dist
-cp package.json package-lock.json README.md dist
-sed -i 's/\/src//g' dist/package.json # remove ./src from main js file path
-
-cp -rf translations dist
-
-# Remove unwanted files
-find dist -type d -name __tests__ -exec rm -r {} +
-rm -rf dist/__mocks__

scripts/publish.sh

@@ -1,23 +0,0 @@
-#!/bin/sh
-
-if test -z "$NPM_TOKEN"
-then
-    echo "\$NPM_TOKEN is not set"
-    exit 1
-else
-    cd dist
-    echo "//registry.npmjs.org/:_authToken=$(echo "$NPM_TOKEN")" > .npmrc
-    echo "unsafe-perm = true" >> ~/.npmrc
-    if test "$1" = "beta"
-    then
-        BETA_VERSION=$(npx -c 'echo "$npm_package_version"')-beta.$CI_COMMIT_SHORT_SHA
-        npm version "$BETA_VERSION" --git-tag-version false
-        npm publish --tag beta
-    elif test "$1" = "latest"
-    then
-        npm publish
-    else
-        echo "Usage: publish.sh [ beta | latest ]"
-        exit 1
-    fi
-fi

src/__mocks__/styleMock.js

@@ -1,8 +0,0 @@
-/*
- * 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.
- */
-
-module.exports = {};

src/api/hooks.js

@@ -1,143 +1,153 @@
 /*
- * Copyright (C) 2019-2021 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * 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.
  */
 
-import { useCallback, useEffect, useReducer, useState } from "react";
+import axios from "axios";
+import { useCallback, useReducer } from "react";
 
-import {
+import { ForisURLs } from "forisUrls";
-    API_ACTIONS,
-    API_METHODS,
-    API_STATE,
-    getErrorPayload,
-    HEADERS,
-    TIMEOUT,
-} from "./utils";
 
-const DATA_METHODS = ["POST", "PATCH", "PUT"];
 
-function createAPIHook(method) {
+const POST_HEADERS = {
-    return (urlRoot, contentType) => {
+    Accept: "application/json",
-        const [state, dispatch] = useReducer(APIReducer, {
+    "Content-Type": "application/json",
-            state: API_STATE.INIT,
+    "X-CSRFToken": getCookie("_csrf_token"),
-            data: null,
-        });
-
-        const sendRequest = useCallback(
-            async ({ data, suffix } = {}) => {
-                const headers = { ...HEADERS };
-                if (contentType) {
-                    headers["Content-Type"] = contentType;
-                }
-
-                dispatch({ type: API_ACTIONS.INIT });
-                try {
-                    // Prepare request
-                    const request = API_METHODS[method];
-                    const config = {
-                        timeout: TIMEOUT,
-                        headers,
-                    };
-                    const url = suffix ? `${urlRoot}/${suffix}` : urlRoot;
-
-                    // Make request
-                    let result;
-                    if (DATA_METHODS.includes(method)) {
-                        result = await request(url, data, config);
-                    } else {
-                        result = await request(url, config);
-                    }
-
-                    // Process request result
-                    dispatch({
-                        type: API_ACTIONS.SUCCESS,
-                        payload: result.data,
-                    });
-                } catch (error) {
-                    const errorPayload = getErrorPayload(error);
-                    dispatch({
-                        type: API_ACTIONS.FAILURE,
-                        status: error.response && error.response.status,
-                        payload: errorPayload,
-                    });
-                }
-            },
-            [urlRoot, contentType]
-        );
-        return [state, sendRequest];
-    };
-}
-
-function APIReducer(state, action) {
-    switch (action.type) {
-        case API_ACTIONS.INIT:
-            return {
-                ...state,
-                state: API_STATE.SENDING,
-            };
-        case API_ACTIONS.SUCCESS:
-            return {
-                state: API_STATE.SUCCESS,
-                data: action.payload,
-            };
-        case API_ACTIONS.FAILURE:
-            if (action.status === 401) {
-                window.location.reload();
-            }
-
-            // Not an API error - should be rethrown.
-            if (
-                action.payload &&
-                action.payload.stack &&
-                action.payload.message
-            ) {
-                throw action.payload;
-            }
-
-            return {
-                state: API_STATE.ERROR,
-                data: action.payload,
-            };
-        default:
-            throw new Error();
-    }
-}
-
-const useAPIGet = createAPIHook("GET");
-const useAPIPost = createAPIHook("POST");
-const useAPIPatch = createAPIHook("PATCH");
-const useAPIPut = createAPIHook("PUT");
-const useAPIDelete = createAPIHook("DELETE");
-
-/* eslint-disable default-param-last */
-function useAPIPolling(endpoint, delay = 1000, until) {
-    // delay ms
-    const [state, setState] = useState({ state: API_STATE.INIT });
-    const [getResponse, get] = useAPIGet(endpoint);
-
-    useEffect(() => {
-        if (getResponse.state !== API_STATE.INIT) {
-            setState(getResponse);
-        }
-    }, [getResponse]);
-
-    useEffect(() => {
-        if (until) {
-            const interval = setInterval(get, delay);
-            return () => clearInterval(interval);
-        }
-    }, [until, delay, get]);
-
-    return [state];
-}
-
-export {
-    useAPIGet,
-    useAPIPost,
-    useAPIPatch,
-    useAPIPut,
-    useAPIDelete,
-    useAPIPolling,
 };
+
+function getCookie(name) {
+    let cookieValue = null;
+    if (document.cookie && document.cookie !== "") {
+        const cookies = document.cookie.split(";");
+        for (let i = 0; i < cookies.length; i++) {
+            const cookie = cookies[i].trim();
+            // Does this cookie string begin with the name we want?
+            if (cookie.substring(0, name.length + 1) === (`${name}=`)) {
+                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                break;
+            }
+        }
+    }
+    return cookieValue;
+}
+
+export const TIMEOUT = 5000;
+
+const API_ACTIONS = {
+    INIT: 1,
+    SUCCESS: 2,
+    FAILURE: 3,
+};
+
+const APIGetReducer = (state, action) => {
+    switch (action.type) {
+    case API_ACTIONS.INIT:
+        return {
+            ...state,
+            isLoading: true,
+            isError: false,
+        };
+    case API_ACTIONS.SUCCESS:
+        return {
+            ...state,
+            isLoading: false,
+            isError: false,
+            data: action.payload,
+        };
+    case API_ACTIONS.FAILURE:
+        if (action.status === 403) window.location.assign(ForisURLs.login);
+        return {
+            ...state,
+            isLoading: false,
+            isError: true,
+            data: action.payload,
+        };
+    default:
+        throw new Error();
+    }
+};
+
+export function useAPIGet(url) {
+    const [state, dispatch] = useReducer(APIGetReducer, {
+        isLoading: false,
+        isError: false,
+        data: null,
+    });
+    const get = useCallback(async () => {
+        dispatch({ type: API_ACTIONS.INIT });
+        try {
+            const result = await axios.get(url, {
+                timeout: TIMEOUT,
+            });
+            dispatch({ type: API_ACTIONS.SUCCESS, payload: result.data });
+        } catch (error) {
+            dispatch({
+                type: API_ACTIONS.FAILURE,
+                payload: error.response.data,
+                status: error.response.status,
+            });
+        }
+    }, [url]);
+
+    return [state, get];
+}
+
+const APIPostReducer = (state, action) => {
+    switch (action.type) {
+    case API_ACTIONS.INIT:
+        return {
+            ...state,
+            isSending: true,
+            isError: false,
+            isSuccess: false,
+        };
+    case API_ACTIONS.SUCCESS:
+        return {
+            ...state,
+            isSending: false,
+            isError: false,
+            isSuccess: true,
+            data: action.payload,
+        };
+    case API_ACTIONS.FAILURE:
+        if (action.status === 403) window.location.assign(ForisURLs.login);
+        return {
+            ...state,
+            isSending: false,
+            isError: true,
+            isSuccess: false,
+            data: action.payload,
+        };
+    default:
+        throw new Error();
+    }
+};
+
+export function useAPIPost(url) {
+    const [state, dispatch] = useReducer(APIPostReducer, {
+        isSending: false,
+        isError: false,
+        isSuccess: false,
+        data: null,
+    });
+
+    const post = async (data) => {
+        dispatch({ type: API_ACTIONS.INIT });
+        try {
+            const result = await axios.post(url, data, {
+                timeout: TIMEOUT,
+                headers: POST_HEADERS,
+            });
+            dispatch({ type: API_ACTIONS.SUCCESS, payload: result.data });
+        } catch (error) {
+            dispatch({
+                type: API_ACTIONS.FAILURE,
+                payload: error.response.data,
+                status: error.response.status,
+            });
+        }
+    };
+    return [state, post];
+}

src/api/utils.js

@@ -1,80 +0,0 @@
-/*
- * Copyright (C) 2019-2021 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.
- */
-
-import axios from "axios";
-
-export const HEADERS = {
-    Accept: "application/json",
-    "Content-Type": "application/json",
-    "X-CSRFToken": getCookie("_csrf_token"),
-    "X-Requested-With": "json",
-};
-
-export const TIMEOUT = 30500;
-
-export const API_ACTIONS = {
-    INIT: 1,
-    SUCCESS: 2,
-    FAILURE: 3,
-};
-
-export const API_STATE = {
-    INIT: "init",
-    SENDING: "sending",
-    SUCCESS: "success",
-    ERROR: "error",
-};
-
-export const API_METHODS = {
-    GET: axios.get,
-    POST: axios.post,
-    PATCH: axios.patch,
-    PUT: axios.put,
-    DELETE: axios.delete,
-};
-
-function getCookie(name) {
-    let cookieValue = null;
-    if (document.cookie && document.cookie !== "") {
-        const cookies = document.cookie.split(";");
-        for (let i = 0; i < cookies.length; i++) {
-            const cookie = cookies[i].trim();
-            // Does this cookie string begin with the name we want?
-            if (cookie.substring(0, name.length + 1) === `${name}=`) {
-                cookieValue = decodeURIComponent(
-                    cookie.substring(name.length + 1)
-                );
-                break;
-            }
-        }
-    }
-    return cookieValue;
-}
-
-export function getErrorPayload(error) {
-    if (error.response) {
-        if (error.response.status === 401) {
-            return _("The session is expired. Please log in again.");
-        }
-        return getJSONErrorMessage(error);
-    }
-    if (error.code === "ECONNABORTED") {
-        return _("Timeout error occurred.");
-    }
-    if (error.request) {
-        return _("No response received.");
-    }
-    // Return original error because it's not directly related to API request/response.
-    return error;
-}
-
-export function getJSONErrorMessage(error) {
-    if (error.response.headers["content-type"] === "application/json") {
-        return error.response.data;
-    }
-    return _("An unknown API error occurred.");
-}

src/bootstrap/Alert.js

@@ -1,30 +1,18 @@
 /*
- * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ * 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.
  */
 
-import React, { useRef, useEffect, useState } from "react";
+import React from "react";
-
 import PropTypes from "prop-types";
 
-import { useFocusTrap } from "../utils/hooks";
-
-export const ALERT_TYPES = Object.freeze({
-    PRIMARY: "primary",
-    SECONDARY: "secondary",
-    SUCCESS: "success",
-    DANGER: "danger",
-    WARNING: "warning",
-    INFO: "info",
-    LIGHT: "light",
-    DARK: "dark",
-});
-
 Alert.propTypes = {
     /** Type of the alert it adds as `alert-${type}` class. */
-    type: PropTypes.oneOf(Object.values(ALERT_TYPES)),
+    type: PropTypes.string.isRequired,
+    /** Alert message. */
+    message: PropTypes.string,
     /** Alert content. */
     children: PropTypes.oneOfType([
         PropTypes.arrayOf(PropTypes.node),
@@ -34,48 +22,14 @@ Alert.propTypes = {
     onDismiss: PropTypes.func,
 };
 
-Alert.defaultProps = {
+export function Alert({
-    type: ALERT_TYPES.DANGER,
+    type, message, onDismiss, children,
-};
+}) {
-
-function Alert({ type, onDismiss, children }) {
-    const alertRef = useRef();
-    const [isVisible, setIsVisible] = useState(true);
-    useFocusTrap(alertRef, !!onDismiss);
-
-    useEffect(() => {
-        if (onDismiss) {
-            const timeout = setTimeout(() => setIsVisible(false), 7000);
-            return () => clearTimeout(timeout);
-        }
-    }, [onDismiss]);
-
-    const handleAnimationEnd = () => {
-        if (!isVisible && onDismiss) {
-            onDismiss();
-        }
-    };
-
     return (
-        <div
+        <div className={`alert alert-dismissible alert-${type}`}>
-            ref={alertRef}
+            {onDismiss ? <button type="button" className="close" onClick={onDismiss}>&times;</button> : false}
-            className={`alert alert-${type} ${isVisible ? "alert-fade-in" : "alert-slide-out-top"} ${
+            {message}
-                onDismiss ? "alert-dismissible" : ""
-            }`.trim()}
-            role="alert"
-            onAnimationEnd={handleAnimationEnd}
-        >
-            {onDismiss && (
-                <button
-                    type="button"
-                    className="btn-close"
-                    onClick={() => setIsVisible(false)}
-                    aria-label={_("Close")}
-                />
-            )}
             {children}
         </div>
     );
 }
-
-export default Alert;

src/bootstrap/Alert.md

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

src/bootstrap/Button.js

@@ -1,14 +1,18 @@
 /*
- * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ * 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.
  */
 
 import React from "react";
-
 import PropTypes from "prop-types";
 
+const OFFSET = 8;
+const SIZE = 3;
+const SIZE_CLASS = ` offset-lg-${OFFSET} col-lg-${SIZE}`;
+const SIZE_CLASS_SM = " col-sm-12";
+
 Button.propTypes = {
     /** Additional class name. */
     className: PropTypes.string,
@@ -25,28 +29,22 @@ Button.propTypes = {
     ]).isRequired,
 };
 
-function Button({ className, loading, forisFormSize, children, ...props }) {
+export function Button({
-    let buttonClass = className ? `btn ${className}` : "btn btn-primary";
+    className, loading, forisFormSize, children, ...props
-    if (forisFormSize) {
+}) {
-        buttonClass = `${buttonClass} col-12 col-md-3 col-lg-2`;
+    className = className ? `btn ${className}` : "btn btn-primary ";
-    }
+    if (forisFormSize) className += SIZE_CLASS + SIZE_CLASS_SM;
+
+    const span = loading
+        ? <span className="spinner-border spinner-border-sm" role="status" aria-hidden="true" /> : null;
 
     return (
-        <button
+        <button type="button" className={className} {...props}>
-            type="button"
+            {span}
-            className={`${buttonClass} d-inline-flex justify-content-center align-items-center`}
+            {" "}
-            {...props}
+            {span ? " " : null}
-        >
+            {" "}
-            {loading && (
+            {children}
-                <span
-                    className="spinner-border spinner-border-sm me-1"
-                    role="status"
-                    aria-hidden="true"
-                />
-            )}
-            <span>{children}</span>
         </button>
     );
 }
-
-export default Button;

src/bootstrap/Button.md

@@ -11,7 +11,5 @@ Can be used without parameters:
 Using loading spinner:
 
 ```jsx
-<Button loading disabled>
+<Button loading disabled>Loading...</Button>
-    Loading...
-</Button>
 ```

src/bootstrap/CheckBox.js

@@ -1,52 +1,50 @@
 /*
- * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ * 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.
  */
 
 import React from "react";
-
 import PropTypes from "prop-types";
-import { useUID } from "react-uid";
+import { useUID } from "react-uid/dist/es5/index";
+
+import { formFieldsSize } from "./constants";
 
 CheckBox.propTypes = {
     /** Label message */
     label: PropTypes.string.isRequired,
     /** Help text message */
     helpText: PropTypes.string,
+    /** Apply default size (full-width) */
+    useDefaultSize: PropTypes.bool,
     /** Control if checkbox is clickable */
     disabled: PropTypes.bool,
-    /** Additional class name */
-    className: PropTypes.string,
 };
 
 CheckBox.defaultProps = {
+    useDefaultSize: true,
     disabled: false,
 };
 
-function CheckBox({ label, helpText, disabled, className, ...props }) {
+export function CheckBox({
+    label, helpText, useDefaultSize, disabled, ...props
+}) {
     const uid = useUID();
-
     return (
-        <div className={`${className || "mb-3"} form-check`.trim()}>
+        <div className={useDefaultSize ? formFieldsSize : ""} style={{ marginBottom: "1rem" }}>
-            <input
+            <div className="custom-control custom-checkbox" style={{ marginBottom: "0" }}>
-                className="form-check-input"
+                <input
-                type="checkbox"
+                    className="custom-control-input"
-                id={uid}
+                    type="checkbox"
-                disabled={disabled}
+                    id={uid}
-                {...props}
+                    disabled={disabled}
-            />
+
-            <label className="form-check-label" htmlFor={uid}>
+                    {...props}
-                {label}
+                />
-            </label>
+                <label className="custom-control-label" htmlFor={uid} style={helpText ? { marginBottom: "0" } : null}>{label}</label>
-            {helpText && (
+            </div>
-                <div className="form-text">
+            {helpText ? <small className="form-text text-muted">{helpText}</small> : null}
-                    <small>{helpText}</small>
-                </div>
-            )}
         </div>
     );
 }
-
-export default CheckBox;

src/bootstrap/Checkbox.md

@@ -1,17 +1,16 @@
-Checkbox with label Bootstrap component with predefined sizes and structure for
+Checkbox with label Bootstrap component with predefined sizes and structure for using in foris forms.
-using in foris forms.
+
+All additional `props` are passed to the `<input type="checkbox">` HTML component.
 
-All additional `props` are passed to the `<input type="checkbox">` HTML
-component.
 
 ```js
-import { useState } from "react";
+import {useState} from 'react';
 const [value, setValue] = useState(false);
 
 <CheckBox
     value={value}
-    label="Some label"
+    label="Some label" 
     helpText="Read the small text!"
-    onChange={(event) => setValue(event.target.value)}
+    onChange={value => setValue(value)}
-/>;
+/>
 ```

src/bootstrap/CopyInput.js

@@ -1,62 +0,0 @@
-/*
- * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
- *
- * This is free software, licensed under the GNU General Public License v3.
- * See /LICENSE for more information.
- */
-
-import React, { useState, useRef } from "react";
-
-import PropTypes from "prop-types";
-
-import Input from "./Input";
-
-CopyInput.propTypes = {
-    /** Field label. */
-    label: PropTypes.string.isRequired,
-    /** Field value. */
-    value: PropTypes.string,
-    /** Help text message. */
-    helpText: PropTypes.string,
-    /** Disable input field */
-    disabled: PropTypes.bool,
-    /** Readonly input field */
-    readOnly: PropTypes.bool,
-};
-
-function CopyInput({ value, ...props }) {
-    const inputTextRef = useRef();
-    const [isCopied, setIsCopied] = useState(false);
-
-    const handleCopyClick = async () => {
-        // Clipboard API works only in a secure (HTTPS) context.
-        if (navigator.clipboard) {
-            await navigator.clipboard.writeText(value);
-        } else {
-            // Fallback to the "classic" copy to clipboard implementation.
-            inputTextRef.current.focus();
-            inputTextRef.current.select();
-            document.execCommand("copy");
-            inputTextRef.current.blur();
-        }
-
-        setIsCopied(true);
-        setTimeout(() => {
-            setIsCopied(false);
-        }, 1500);
-    };
-
-    return (
-        <Input type="text" value={value} ref={inputTextRef} {...props}>
-            <button
-                className="btn btn-outline-secondary"
-                type="button"
-                onClick={handleCopyClick}
-            >
-                <span>{isCopied ? _("Copied!") : _("Copy")}</span>
-            </button>
-        </Input>
-    );
-}
-
-export default CopyInput;

src/bootstrap/CopyInput.md

@@ -1,17 +0,0 @@
-CopyInput Bootstrap component contains input with a label, predefined sizes, and
-structure for use in ForisForm and the "Copy" button (copy to clipboard). It can
-be used with `readOnly` and `disabled` parameters, please see an example.
-
-All additional `props` are passed to the `<input type="text">` HTML component.
-
-```js
-import React, { useState } from "react";
-const [value, setValue] = useState("Text to appear in clipboard.");
-
-<CopyInput
-    label="Copy me"
-    value={value}
-    helpText="Read the small text!"
-    readOnly
-/>;
-```

src/bootstrap/DataTimeInput.css

@@ -1,4 +0,0 @@
-/* Override defaults from "react-datetime" - display picker above input */
-.rdtPicker {
-    bottom: 0;
-}

src/bootstrap/DataTimeInput.js

@@ -1,19 +1,16 @@
 /*
- * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ * 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.
  */
 
 import React from "react";
-
-import moment from "moment/moment";
 import PropTypes from "prop-types";
-import Datetime from "react-datetime";
+import Datetime from "react-datetime/DateTime";
-import "react-datetime/css/react-datetime.css";
+import moment from "moment/moment";
-import "./DataTimeInput.css";
 
-import Input from "./Input";
+import { Input } from "./Input";
 
 DataTimeInput.propTypes = {
     /** Field label. */
@@ -38,32 +35,25 @@ DataTimeInput.propTypes = {
 const DEFAULT_DATE_FORMAT = "YYYY-MM-DD";
 const DEFAULT_TIME_FORMAT = "HH:mm:ss";
 
-function DataTimeInput({
+export function DataTimeInput({
-    value,
+    value, onChange, isValidDate, dateFormat, timeFormat, children, ...props
-    onChange,
-    isValidDate,
-    dateFormat,
-    timeFormat,
-    children,
-    ...props
 }) {
-    const renderInput = (datetimeProps) => {
+    function renderInput(datetimeProps) {
         return (
-            <Input {...props} {...datetimeProps}>
+            <Input
+                {...props}
+                {...datetimeProps}
+            >
                 {children}
             </Input>
         );
-    };
+    }
 
     return (
         <Datetime
             locale={ForisTranslations.locale}
-            dateFormat={
+            dateFormat={dateFormat !== undefined ? dateFormat : DEFAULT_DATE_FORMAT}
-                dateFormat !== undefined ? dateFormat : DEFAULT_DATE_FORMAT
+            timeFormat={timeFormat !== undefined ? timeFormat : DEFAULT_TIME_FORMAT}
-            }
-            timeFormat={
-                timeFormat !== undefined ? timeFormat : DEFAULT_TIME_FORMAT
-            }
             value={value}
             onChange={onChange}
             isValidDate={isValidDate}
@@ -71,5 +61,3 @@ function DataTimeInput({
         />
     );
 }
-
-export default DataTimeInput;

src/bootstrap/DataTimeInput.md

@@ -1,26 +1,25 @@
-Adopted from `react-datetime/DateTime` datatime picker component. It uses
+Adopted from `react-datetime/DateTime` datatime picker component.
-`momentjs` see example.
+It uses `momentjs` see example.
 
-It requires `ForisTranslations.locale` to be defined in order to use right
+It requires `ForisTranslations.locale` to be defined in order to use right locale.
-locale.
 
 ```js
-ForisTranslations = { locale: "en" };
+ForisTranslations={locale:'en'};
 
-import { useState, useEffect } from "react";
+import {useState, useEffect} from 'react';
-import moment from "moment/moment";
+import moment from 'moment/moment';
 
 const [dataTime, setDataTime] = useState(moment());
 const [error, setError] = useState();
-useEffect(() => {
+useEffect(()=>{
-    dataTime.isValid() ? setError(null) : setError("Invalid value!");
+   dataTime.isValid() ? setError(null) : setError('Invalid value!');
-}, [dataTime]);
+},[dataTime]);
-
+ 
 <DataTimeInput
-    label="Time to sleep"
+    label='Time to sleep'
     value={dataTime}
     error={error}
-    helpText="Example helptext..."
+    helpText='Example helptext...'
-    onChange={(value) => setDataTime(value)}
+    onChange={value => setDataTime(value)}
-/>;
+/>
 ```

src/bootstrap/DownloadButton.js

@@ -1,38 +0,0 @@
-/*
- * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
- *
- * This is free software, licensed under the GNU General Public License v3.
- * See /LICENSE for more information.
- */
-
-import React from "react";
-
-import PropTypes from "prop-types";
-
-DownloadButton.propTypes = {
-    href: PropTypes.string.isRequired,
-    className: PropTypes.string,
-    children: PropTypes.oneOfType([
-        PropTypes.arrayOf(PropTypes.node),
-        PropTypes.node,
-    ]),
-};
-
-DownloadButton.defaultProps = {
-    className: "btn-primary",
-};
-
-function DownloadButton({ href, className, children, ...props }) {
-    return (
-        <a
-            href={href}
-            className={`btn ${className}`.trim()}
-            {...props}
-            download
-        >
-            {children}
-        </a>
-    );
-}
-
-export default DownloadButton;

src/bootstrap/DownloadButton.md

@@ -1,10 +0,0 @@
-Hyperlink with apperance of a button.
-
-It has `download` attribute, which prevents closing WebSocket connection on
-Firefox. See
-[related issue](https://bugzilla.mozilla.org/show_bug.cgi?id=858538) for more
-details.
-
-```js
-<DownloadButton href="example.zip">Download</DownloadButton>
-```

src/bootstrap/EmailInput.js

@@ -8,12 +8,10 @@
 import React from "react";
 
 import PropTypes from "prop-types";
+import { Input } from "./Input";
 
-import Input from "./Input";
+export const EmailInput = ({ ...props }) => <Input type="email" {...props} />;
 
-function EmailInput({ ...props }) {
-    return <Input type="email" {...props} />;
-}
 
 EmailInput.propTypes = {
     /** Field label. */
@@ -25,5 +23,3 @@ EmailInput.propTypes = {
     /** Email value. */
     value: PropTypes.string,
 };
-
-export default EmailInput;

src/bootstrap/EmailInput.md

@@ -1,20 +1,18 @@
-Bootstrap component of email input with label with predefined sizes and
+Bootstrap component of email input with label with predefined sizes and structure for using in foris forms.
-structure for using in foris forms. It use built-in browser email address
+It use built-in browser email address checking. It's only meaningful using inside `<form>`.
-checking. It's only meaningful using inside `<form>`.
 
 All additional `props` are passed to the `<input type="email">` HTML component.
 
 ```js
-import { useState } from "react";
+import {useState} from 'react';
-import Button from "./Button";
+const [email, setEmail] = useState('Wrong email');
-const [email, setEmail] = useState("Wrong email");
+<form onSubmit={e=>e.preventDefault()}>
-<form onSubmit={(e) => e.preventDefault()}>
     <EmailInput
         value={email}
-        label="Some label"
+        label="Some label" 
         helpText="Read the small text!"
-        onChange={(event) => setEmail(event.target.value)}
+        onChange={target => setEmail(target.value)}
     />
-    <Button type="submit">Try to submit</Button>
+    <button type="submit">Try to submit</button>
-</form>;
+</form>
 ```

src/bootstrap/FileInput.js

@@ -1,39 +0,0 @@
-/*
- * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
- *
- * This is free software, licensed under the GNU General Public License v3.
- * See /LICENSE for more information.
- */
-
-import React from "react";
-
-import PropTypes from "prop-types";
-
-import Input from "./Input";
-
-FileInput.propTypes = {
-    /** Field label. */
-    label: PropTypes.string.isRequired,
-    /** Error message. */
-    error: PropTypes.string,
-    /** Help text message. */
-    helpText: PropTypes.string,
-    /** Email value. */
-    value: PropTypes.string,
-    /** Allow selecting multiple files. */
-    multiple: PropTypes.bool,
-};
-
-function FileInput({ ...props }) {
-    return (
-        <Input
-            type="file"
-            className="custom-file-input"
-            labelClassName="custom-file-label"
-            groupClassName="custom-file"
-            {...props}
-        />
-    );
-}
-
-export default FileInput;

src/bootstrap/FileInput.md

@@ -1,48 +0,0 @@
-Bootstrap component for file input. Includes label and has predefined sizes and
-structure for using in foris forms.
-
-All additional `props` are passed to the `<input type="file">` HTML component.
-
-```js
-import { useState } from "react";
-
-const [files, setFiles] = useState([]);
-
-// Note that files is not an array but FileList.
-const label = files.length === 1 ? files[0].name : "Choose file";
-
-<form className="col">
-    <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/Input.js

@@ -1,73 +1,19 @@
 /*
- * Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ * 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.
  */
 
-import React, { forwardRef } from "react";
+import React from "react";
-
+import { useUID } from "react-uid/dist/es5/index";
 import PropTypes from "prop-types";
-import { useUID } from "react-uid";
 
-/** Base bootstrap input component. */
+import { formFieldsSize } from "./constants";
-const Input = forwardRef(
-    (
-        {
-            type,
-            label,
-            helpText,
-            error,
-            className,
-            children,
-            labelClassName,
-            groupClassName,
-            ...props
-        },
-        ref
-    ) => {
-        const uid = useUID();
-
-        const inputClassName = `${className || ""} ${
-            error ? "is-invalid" : ""
-        }`.trim();
-
-        return (
-            <div className="mb-3">
-                {label && (
-                    <label
-                        className={`form-label ${labelClassName || ""}`.trim()}
-                        htmlFor={uid}
-                    >
-                        {label}
-                    </label>
-                )}
-                <div className={`input-group ${groupClassName || ""}`.trim()}>
-                    <input
-                        className={`form-control ${inputClassName}`.trim()}
-                        type={type}
-                        id={uid}
-                        ref={ref}
-                        {...props}
-                    />
-                    {children}
-                </div>
-                {error && <div className="invalid-feedback">{error}</div>}
-                {helpText && (
-                    <div className="form-text">
-                        <small>{helpText}</small>
-                    </div>
-                )}
-            </div>
-        );
-    }
-);
-
-Input.displayName = "Input";
 
 Input.propTypes = {
     type: PropTypes.string.isRequired,
-    label: PropTypes.string,
+    label: PropTypes.string.isRequired,
     helpText: PropTypes.string,
     error: PropTypes.string,
     className: PropTypes.string,
@@ -75,8 +21,31 @@ Input.propTypes = {
         PropTypes.arrayOf(PropTypes.node),
         PropTypes.node,
     ]),
-    labelClassName: PropTypes.string,
-    groupClassName: PropTypes.string,
 };
 
-export default Input;
+/** Base bootstrap input component. */
+export function Input({
+    type, label, helpText, error, className, children, ...props
+}) {
+    const uid = useUID();
+    const inputClassName = `form-control ${className || ""} ${(error ? "is-invalid" : "")}`.trim();
+    return (
+        <div className={formFieldsSize}>
+            <div className="form-group">
+                <label htmlFor={uid}>{label}</label>
+                <div className="input-group">
+                    <input
+                        className={inputClassName}
+                        type={type}
+                        id={uid}
+
+                        {...props}
+                    />
+                    {children}
+                </div>
+                {error ? <div className="invalid-feedback">{error}</div> : null}
+                {helpText ? <small className="form-text text-muted">{helpText}</small> : null}
+            </div>
+        </div>
+    );
+}

src/bootstrap/Modal.css

@@ -1,15 +0,0 @@
-@keyframes modalFade {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-
-.modal.show {
-    display: block;
-    animation-name: modalFade;
-    animation-duration: 0.3s;
-    background: rgba(0, 0, 0, 0.2);
-}

src/bootstrap/Modal.js

@@ -1,25 +1,20 @@
 /*
- * Copyright (C) 2020-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ * 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.
  */
 
-import React, { useRef, useEffect } from "react";
+import React, { useEffect, useRef } from "react";
-
 import PropTypes from "prop-types";
 
-import { useClickOutside, useFocusTrap } from "../utils/hooks";
+import { Portal } from "utils/Portal";
-import Portal from "../utils/Portal";
-import "./Modal.css";
 
 Modal.propTypes = {
     /** Is modal shown value */
     shown: PropTypes.bool.isRequired,
     /** Callback to manage modal visibility */
     setShown: PropTypes.func.isRequired,
-    scrollable: PropTypes.bool,
-    size: PropTypes.string,
 
     /** Modal content use following: `ModalHeader`, `ModalBody`, `ModalFooter` */
     children: PropTypes.oneOfType([
@@ -28,57 +23,28 @@ Modal.propTypes = {
     ]).isRequired,
 };
 
-export function Modal({ shown, setShown, scrollable, size, children }) {
+export function Modal({ shown, setShown, children }) {
-    const modalRef = useRef();
+    const dialogRef = useRef();
-    let modalSize = "modal-";
-
-    useClickOutside(modalRef, () => setShown(false));
-    useFocusTrap(modalRef, shown);
 
     useEffect(() => {
-        const handleEsc = (event) => {
+        function handleClickOutsideDialog(e) {
-            if (event.keyCode === 27) {
+            if (!dialogRef.current.contains(e.target)) setShown(false);
-                setShown(false);
+        }
-            }
-        };
-        window.addEventListener("keydown", handleEsc);
 
+        document.addEventListener("mousedown", handleClickOutsideDialog);
         return () => {
-            window.removeEventListener("keydown", handleEsc);
+            document.removeEventListener("mousedown", handleClickOutsideDialog);
         };
     }, [setShown]);
 
-    switch (size) {
-        case "sm":
-            modalSize += "sm";
-            break;
-        case "lg":
-            modalSize += "lg";
-            break;
-        case "xl":
-            modalSize += "xl";
-            break;
-        default:
-            modalSize = "";
-            break;
-    }
 
     return (
         <Portal containerId="modal-container">
-            <div
+            <div className={`modal fade ${shown ? "show" : ""}`} role="dialog">
-                ref={modalRef}
+                <div ref={dialogRef} className="modal-dialog" role="document">
-                className={`modal fade ${shown ? "show" : ""}`.trim()}
+                    <div className="modal-content">
-                role="dialog"
+                        {children}
-                aria-modal="true"
+                    </div>
-                aria-labelledby="modal-title"
-            >
-                <div
-                    className={`${modalSize.trim()} modal-dialog modal-dialog-centered ${
-                        scrollable ? "modal-dialog-scrollable" : ""
-                    }`.trim()}
-                    role="document"
-                >
-                    <div className="modal-content">{children}</div>
                 </div>
             </div>
         </Portal>
@@ -88,21 +54,15 @@ export function Modal({ shown, setShown, scrollable, size, children }) {
 ModalHeader.propTypes = {
     setShown: PropTypes.func.isRequired,
     title: PropTypes.string.isRequired,
-    showCloseButton: PropTypes.bool,
 };
 
-export function ModalHeader({ setShown, title, showCloseButton = true }) {
+export function ModalHeader({ setShown, title }) {
     return (
         <div className="modal-header">
-            <h1 className="modal-title fs-5">{title}</h1>
+            <h5 className="modal-title">{title}</h5>
-            {showCloseButton && (
+            <button type="button" className="close" onClick={() => setShown(false)}>
-                <button
+                <span aria-hidden="true">&times;</span>
-                    type="button"
+            </button>
-                    className="btn-close"
-                    onClick={() => setShown(false)}
-                    aria-label={_("Close")}
-                />
-            )}
         </div>
     );
 }
@@ -126,5 +86,9 @@ ModalFooter.propTypes = {
 };
 
 export function ModalFooter({ children }) {
-    return <div className="modal-footer">{children}</div>;
+    return (
+        <div className="modal-footer">
+            {children}
+        </div>
+    );
 }

src/bootstrap/Modal.md

@@ -1,47 +1,27 @@
 Bootstrap modal component.
 
-It's required to have an element `<div id={"modal-container"}/>` somewhere on
+I have no idea why example doesn't work here but you can investigate HTML code...
-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`
-
-For more details please visit Bootstrap
-<a href="https://getbootstrap.com/docs/4.5/components/modal/#optional-sizes" target="_blank">
-documentation</a>.
-
 ```js
-<div id="modal-container" />
+import {ModalHeader, ModalBody, ModalFooter} from './Modal';
-```
 
-```js
+import {useState} from 'react';
-import { ModalHeader, ModalBody, ModalFooter } from "./Modal";
-
-import { useState } from "react";
 const [shown, setShown] = useState(false);
 
 <>
-    <Modal setShown={setShown} shown={shown} size="sm">
+    <Modal shown={shown}>
-        <ModalHeader setShown={setShown} title="Warning!" />
+        <ModalHeader setShown={setShown} title='Warning!'/>
-        <ModalBody>
+        <ModalBody><p>Bla bla bla...</p></ModalBody>
-            <p>Bla bla bla...</p>
-        </ModalBody>
         <ModalFooter>
-            <button
+            <button 
-                className="btn btn-secondary"
+                className='btn btn-secondary' 
                 onClick={() => setShown(false)}
-            >
+            >Skip it</button>
-                Skip it
-            </button>
         </ModalFooter>
     </Modal>
-
+    
-    <button className="btn btn-secondary" onClick={() => setShown(true)}>
+    <button 
-        Show modal
+        className='btn btn-secondary'
-    </button>
+        onClick={()=>setShown(true)}
-</>;
+    >Show modal</button>
+</>
 ```

src/bootstrap/NumberInput.css

@@ -1,10 +0,0 @@
-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;
-}

src/bootstrap/NumberInput.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ * 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.
@@ -7,13 +7,10 @@
 
 import React from "react";
 
-import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import PropTypes from "prop-types";
+import { Input } from "./Input";
 
-import Input from "./Input";
+export const NumberInput = ({ ...props }) => <Input type="number" {...props} />;
-import { useConditionalTimeout } from "../utils/hooks";
-import "./NumberInput.css";
 
 NumberInput.propTypes = {
     /** Field label. */
@@ -23,88 +20,8 @@ NumberInput.propTypes = {
     /** Help text message. */
     helpText: PropTypes.string,
     /** Number value. */
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    value: PropTypes.oneOfType([
-    /** Function called when value changes. */
+        PropTypes.string,
-    onChange: PropTypes.func.isRequired,
+        PropTypes.number,
-    /** Additional description displayed to the right of input value. */
+    ]),
-    inlineText: PropTypes.string,
 };
-
-NumberInput.defaultProps = {
-    value: 0,
-};
-
-function NumberInput({ onChange, inlineText, value, ...props }) {
-    function updateValue(initialValue, difference) {
-        onChange({ target: { value: initialValue + difference } });
-    }
-
-    const enableIncrease = useConditionalTimeout(
-        { callback: updateValue },
-        value,
-        1
-    );
-    const enableDecrease = useConditionalTimeout(
-        { callback: updateValue },
-        value,
-        -1
-    );
-
-    function handleKeyDown(event, enableFunction) {
-        if (event.key === "Enter" || event.key === " ") {
-            event.preventDefault();
-            enableFunction(true);
-        }
-    }
-
-    function handleKeyUp(event, enableFunction) {
-        if (event.key === "Enter" || event.key === " ") {
-            event.preventDefault();
-            enableFunction(false);
-        }
-    }
-
-    return (
-        <Input type="number" onChange={onChange} value={value} {...props}>
-            {inlineText && (
-                <span className="input-group-text">{inlineText}</span>
-            )}
-            <button
-                type="button"
-                className="btn btn-outline-secondary"
-                onMouseDown={() => enableIncrease(true)}
-                onMouseUp={() => enableIncrease(false)}
-                onMouseLeave={() => enableIncrease(false)}
-                onTouchStart={() => enableIncrease(true)}
-                onTouchEnd={() => enableIncrease(false)}
-                onTouchCancel={() => enableIncrease(false)}
-                onKeyDown={(event) => handleKeyDown(event, enableIncrease)}
-                onKeyUp={(event) => handleKeyUp(event, enableIncrease)}
-                onBlur={() => enableIncrease(false)}
-                title={_("Increase value. Hint: Hold to increase faster.")}
-                aria-label={_("Increase value. Hint: Hold to increase faster.")}
-            >
-                <FontAwesomeIcon icon={faPlus} />
-            </button>
-            <button
-                type="button"
-                className="btn btn-outline-secondary"
-                onMouseDown={() => enableDecrease(true)}
-                onMouseUp={() => enableDecrease(false)}
-                onMouseLeave={() => enableDecrease(false)}
-                onTouchStart={() => enableDecrease(true)}
-                onTouchEnd={() => enableDecrease(false)}
-                onTouchCancel={() => enableDecrease(false)}
-                onKeyDown={(event) => handleKeyDown(event, enableDecrease)}
-                onKeyUp={(event) => handleKeyUp(event, enableDecrease)}
-                onBlur={() => enableDecrease(false)}
-                title={_("Decrease value. Hint: Hold to decrease faster.")}
-                aria-label={_("Decrease value. Hint: Hold to decrease faster.")}
-            >
-                <FontAwesomeIcon icon={faMinus} />
-            </button>
-        </Input>
-    );
-}
-
-export default NumberInput;

src/bootstrap/NumberInput.md

@@ -1,18 +1,17 @@
-Bootstrap component of number input with label with predefined sizes and
+Bootstrap component of number input with label with predefined sizes and structure for using in foris forms.
-structure for using in foris forms.
 
 All additional `props` are passed to the `<input type="number">` HTML component.
 
 ```js
-import { useState } from "react";
+import {useState} from 'react';
 const [value, setValue] = useState(42);
 
 <NumberInput
     value={value}
-    label="Some number"
+    label="Some number" 
     helpText="Read the small text!"
-    min="33"
+    min='33'
-    max="54"
+    max='54'
-    onChange={(event) => setValue(event.target.value)}
+    onChange={target => setValue(target.value)}
-/>;
+/>
 ```

src/bootstrap/PasswordInput.js

@@ -1,17 +1,14 @@
 /*
- * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ * 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.
  */
 
 import React, { useState } from "react";
-
-import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import PropTypes from "prop-types";
 
-import Input from "./Input";
+import { Input } from "./Input";
 
 PasswordInput.propTypes = {
     /** Field label. */
@@ -24,37 +21,32 @@ PasswordInput.propTypes = {
     helpText: PropTypes.string,
     /** Use show/hide password button. */
     withEye: PropTypes.bool,
-    /** Use new-password in autocomplete attribute. */
-    newPass: PropTypes.bool,
 };
 
-function PasswordInput({ withEye, newPass, ...props }) {
+export function PasswordInput({ withEye, ...props }) {
     const [isHidden, setHidden] = useState(true);
-
     return (
         <Input
             type={withEye && !isHidden ? "text" : "password"}
-            autoComplete={newPass ? "new-password" : "current-password"}
+            autoComplete={isHidden ? "new-password" : null}
             {...props}
         >
-            {withEye && (
+            {withEye
-                <button
+                ? (
-                    type="button"
+                    <div className="input-group-append">
-                    className="input-group-text"
+                        <button
-                    onClick={(e) => {
+                            type="button"
-                        e.preventDefault();
+                            className="input-group-text"
-                        setHidden((shouldBeHidden) => !shouldBeHidden);
+                            onClick={(e) => {
-                    }}
+                                e.preventDefault();
-                >
+                                setHidden((shouldBeHidden) => !shouldBeHidden);
-                    <FontAwesomeIcon
+                            }}
-                        icon={isHidden ? faEye : faEyeSlash}
+                        >
-                        style={{ width: "1.25rem" }}
+                            <i className={`fa ${isHidden ? "fa-eye" : "fa-eye-slash"}`} />
-                        className="text-secondary"
+                        </button>
-                    />
+                    </div>
-                </button>
+                )
-            )}
+                : null}
         </Input>
     );
 }
-
-export default PasswordInput;

src/bootstrap/PasswordInput.md

@@ -1,18 +1,17 @@
-Password Bootstrap component input with label and predefined sizes and structure
+Password Bootstrap component input with label and predefined sizes and structure for using in foris forms.
-for using in foris forms. Can be used with "eye" button, see example.
+Can be used with "eye" button, see example.
 
-All additional `props` are passed to the `<input type="password">` HTML
+All additional `props` are passed to the `<input type="password">` HTML component.
-component.
 
 ```js
-import { useState } from "react";
+import {useState} from 'react';
-const [value, setValue] = useState("secret");
+const [value, setValue] = useState('secret');
 
 <PasswordInput
     withEye
     value={value}
-    label="Some password"
+    label="Some password" 
     helpText="Read the small text!"
-    onChange={(event) => setValue(event.target.value)}
+    onChange={target => setValue(target.value)}
-/>;
+/>
 ```

src/bootstrap/Radio.js

@@ -1,48 +0,0 @@
-/*
- * Copyright (C) 2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
- *
- * This is free software, licensed under the GNU General Public License v3.
- * See /LICENSE for more information.
- */
-
-import React from "react";
-
-import PropTypes from "prop-types";
-
-Radio.propTypes = {
-    label: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.element,
-        PropTypes.node,
-        PropTypes.arrayOf(PropTypes.node),
-    ]).isRequired,
-    id: PropTypes.string.isRequired,
-    inline: PropTypes.bool,
-    helpText: PropTypes.string,
-    className: PropTypes.string,
-};
-
-function Radio({ label, id, helpText, inline, className, ...props }) {
-    return (
-        <div
-            className={`${className || "mb-3"} ${inline ? "form-check form-check-inline" : ""}`.trim()}
-        >
-            <input
-                id={id}
-                className="form-check-input me-2"
-                type="radio"
-                {...props}
-            />
-            <label className="form-check-label" htmlFor={id}>
-                {label}
-                {helpText && (
-                    <div className="form-text">
-                        <small>{helpText}</small>
-                    </div>
-                )}
-            </label>
-        </div>
-    );
-}
-
-export default Radio;

src/bootstrap/RadioSet.js

@@ -1,16 +1,16 @@
 /*
- * Copyright (C) 2020-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ * 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.
  */
 
 import React from "react";
-
 import PropTypes from "prop-types";
-import { useUID } from "react-uid";
+import { useUID } from "react-uid/dist/es5/index";
+
+import { formFieldsSize } from "./constants";
 
-import Radio from "./Radio";
 
 RadioSet.propTypes = {
     /** Name attribute of the input HTML tag. */
@@ -18,28 +18,21 @@ RadioSet.propTypes = {
     /** RadioSet label . */
     label: PropTypes.string,
     /** Choices . */
-    choices: PropTypes.arrayOf(
+    choices: PropTypes.arrayOf(PropTypes.shape({
-        PropTypes.shape({
+        /** Choice lable . */
-            /** Choice label . */
+        label: PropTypes.string.isRequired,
-            label: PropTypes.oneOfType([
+        /** Choice value . */
-                PropTypes.string,
+        value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-                PropTypes.element,
+    })).isRequired,
-                PropTypes.node,
-                PropTypes.arrayOf(PropTypes.node),
-            ]).isRequired,
-            /** Choice value . */
-            value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-                .isRequired,
-        })
-    ).isRequired,
     /** Initial value . */
     value: PropTypes.string,
     /** Help text message . */
     helpText: PropTypes.string,
-    inline: PropTypes.bool,
 };
 
-function RadioSet({ name, label, choices, value, helpText, inline, ...props }) {
+export function RadioSet({
+    name, label, choices, value, helpText, ...props
+}) {
     const uid = useUID();
     const radios = choices.map((choice, key) => {
         const id = `${name}-${key}`;
@@ -52,27 +45,49 @@ function RadioSet({ name, label, choices, value, helpText, inline, ...props }) {
                 value={choice.value}
                 helpText={choice.helpText}
                 checked={choice.value === value}
-                inline={inline}
+
                 {...props}
             />
         );
     });
 
     return (
-        <div className="mb-3">
+        <div className={`form-group ${formFieldsSize}`} style={{ marginBottom: "1rem" }}>
-            {label && (
+            {label
-                <label htmlFor={uid} className="d-block">
+                ? (
-                    {label}
+                    <label className="col-12" htmlFor={uid} style={{ paddingLeft: "0" }}>
-                </label>
+                        {label}
-            )}
+                    </label>
+                )
+                : null}
             {radios}
-            {helpText && (
+            {helpText ? <small className="form-text text-muted">{helpText}</small> : null}
-                <div className="form-text">
-                    <small>{helpText}</small>
-                </div>
-            )}
         </div>
     );
 }
 
-export default RadioSet;
+Radio.propTypes = {
+    label: PropTypes.string.isRequired,
+    id: PropTypes.string.isRequired,
+    helpText: PropTypes.string,
+};
+
+function Radio({
+    label, id, helpText, ...props
+}) {
+    return (
+        <>
+            <div className="custom-control custom-radio custom-control-inline">
+                <input
+                    id={id}
+                    className="custom-control-input"
+                    type="radio"
+
+                    {...props}
+                />
+                <label className="custom-control-label" htmlFor={id}>{label}</label>
+            </div>
+            {helpText ? <small className="form-text text-muted">{helpText}</small> : null}
+        </>
+    );
+}

src/bootstrap/RadioSet.md

@@ -1,16 +1,13 @@
-Set of radio Bootstrap component input with label and predefined sizes and
+Set of radio Bootstrap component input with label and predefined sizes and structure for using in foris forms.
-structure for using in foris forms.
 
 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
-import { useState } from "react";
+import {useState} from 'react';
-const CHOICES = [
+const CHOICES=[
-    { value: "one", label: "1" },
+    {value:'one',label:'1'},
-    { value: "two", label: "2" },
+    {value:'two',label:'2'},
-    { value: "three", label: "3" },
+    {value:'three',label:'3'},
 ];
 const [value, setValue] = useState(CHOICES[0].value);
 
@@ -18,10 +15,10 @@ const [value, setValue] = useState(CHOICES[0].value);
     {/*Yeah, it gets event, not value!*/}
     <RadioSet
         value={value}
-        name="some-radio"
+        name='some-radio'
         choices={CHOICES}
-        onChange={(event) => setValue(event.target.value)}
+        onChange={event=>setValue(event.target.value)}
     />
     <p>Selected value: {value}</p>
-</>;
+</>
 ```

src/bootstrap/Select.js

@@ -1,14 +1,14 @@
 /*
- * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ * 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.
  */
 
 import React from "react";
-
 import PropTypes from "prop-types";
-import { useUID } from "react-uid";
+import { useUID } from "react-uid/dist/es5/index";
+
 
 Select.propTypes = {
     /** Select field Label. */
@@ -16,35 +16,34 @@ Select.propTypes = {
     /** Choices if form of {value : "Label",...}. */
     choices: PropTypes.object.isRequired,
     /** Current value. */
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    value: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number,
+    ]).isRequired,
     /** Help text message. */
     helpText: PropTypes.string,
 };
 
-function Select({ label, choices, helpText, ...props }) {
+export function Select({
+    label, choices, helpText, ...props
+}) {
     const uid = useUID();
 
-    const options = Object.keys(choices).map((choice) => (
+    const options = Object.keys(choices).map(
-        <option key={choice} value={choice}>
+        (key) => <option key={key} value={key}>{choices[key]}</option>,
-            {choices[choice]}
+    );
-        </option>
-    ));
 
     return (
-        <div className="mb-3">
+        <div className="form-group col-sm-12 offset-lg-1 col-lg-10">
-            <label className="form-label" htmlFor={uid}>
+            <label htmlFor={uid}>{label}</label>
-                {label}
+            <select
-            </label>
+                className="custom-select"
-            <select className="form-select" id={uid} {...props}>
+                id={uid}
+                {...props}
+            >
                 {options}
             </select>
-            {helpText && (
+            {helpText ? <small className="form-text text-muted">{helpText}</small> : null}
-                <div className="form-text">
-                    <small>{helpText}</small>
-                </div>
-            )}
         </div>
     );
 }
-
-export default Select;

src/bootstrap/Select.md

@@ -1,14 +1,13 @@
-Select with options Bootstrap component input with label and predefined sizes
+Select with options Bootstrap component input with label and predefined sizes and structure for using in foris forms.
-and structure for using in foris forms.
 
 All additional `props` are passed to the `<select>` HTML component.
 
 ```js
-import { useState } from "react";
+import {useState} from 'react';
-const CHOICES = {
+const CHOICES={
-    apple: "Apple",
+    apple:'Apple',
-    banana: "Banana",
+    banana:'Banana',
-    peach: "Peach",
+    peach:'Peach',
 };
 const [value, setValue] = useState(Object.keys(CHOICES)[0]);
 
@@ -18,9 +17,9 @@ const [value, setValue] = useState(Object.keys(CHOICES)[0]);
         label="Fruit"
         value={value}
         choices={CHOICES}
-        onChange={(event) => setValue(event.target.value)}
+        onChange={event=>setValue(event.target.value)}
     />
     <p>Selected choice label: {CHOICES[value]}</p>
     <p>Selected choice value: {value}</p>
-</>;
+</>
 ```

src/bootstrap/Spinner.css

@@ -1,43 +0,0 @@
-.spinner-fs-wrapper {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 1101; /* increase z-index by 1 to ensure it's on top of spinner-fs-background */
-}
-
-.spinner-wrapper .spinner-border {
-    width: 4rem;
-    height: 4rem;
-    color: var(--bs-primary);
-}
-
-.spinner-fs-background {
-    background-color: rgba(2, 2, 2, 0.5);
-    color: rgb(230, 230, 230);
-    width: 100vw;
-    height: 100vh;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    /*
-     * Set to high value to me sure that it always overlaps all components
-     * https://getbootstrap.com/docs/4.3/layout/overview/#z-index
-     */
-    z-index: 1100;
-}
-
-.spinner-fs-wrapper .spinner-border {
-    width: 6rem;
-    height: 6rem;
-}
-
-.spinner-fs-wrapper .spinner-text {
-    margin: 1rem;
-}
-
-.spinner-border-sm {
-    min-width: 16px;
-}

src/bootstrap/Spinner.js

@@ -6,18 +6,15 @@
  */
 
 import React from "react";
-
 import PropTypes from "prop-types";
 
-import "./Spinner.css";
-
 Spinner.propTypes = {
     /** Children components put into `div` with "spinner-text" class. */
     children: PropTypes.oneOfType([
         PropTypes.arrayOf(PropTypes.node),
         PropTypes.node,
     ]),
-    /** Render component with full-screen mode (using appropriate `.css` styles) */
+    /** Render component with full-screen mode (using apropriate `.css` styles) */
     fullScreen: PropTypes.bool.isRequired,
     className: PropTypes.string,
 };
@@ -26,19 +23,19 @@ Spinner.defaultProps = {
     fullScreen: false,
 };
 
-export function Spinner({ fullScreen, children, className }) {
+export function Spinner({
+    fullScreen, children, className, ...props
+}) {
     if (!fullScreen) {
         return (
-            <div
+            <div className={`spinner-wrapper ${className || ""}`} {...props}>
-                className={`spinner-wrapper ${className || "my-3 text-center"}`}
-            >
                 <SpinnerElement>{children}</SpinnerElement>
             </div>
         );
     }
 
     return (
-        <div className="spinner-fs-wrapper">
+        <div className="spinner-fs-wrapper" {...props}>
             <div className="spinner-fs-background">
                 <SpinnerElement>{children}</SpinnerElement>
             </div>
@@ -49,8 +46,6 @@ export function Spinner({ fullScreen, children, className }) {
 SpinnerElement.propTypes = {
     /** Spinner's size */
     small: PropTypes.bool,
-    /** Additional className */
-    className: PropTypes.string,
     /** Children components */
     children: PropTypes.oneOfType([
         PropTypes.arrayOf(PropTypes.node),
@@ -58,18 +53,13 @@ SpinnerElement.propTypes = {
     ]),
 };
 
-export function SpinnerElement({ small, className, children }) {
+export function SpinnerElement({ small, children }) {
     return (
         <>
-            <div
+            <div className={`spinner-border ${small ? "spinner-border-sm" : ""}`} role="status">
-                className={`spinner-border ${
-                    small ? "spinner-border-sm" : ""
-                } ${className || ""}`.trim()}
-                role="status"
-            >
                 <span className="sr-only" />
             </div>
-            {children && <div className="spinner-text">{children}</div>}
+            <div className="spinner-text">{children}</div>
         </>
     );
 }

src/bootstrap/Switch.js

@@ -1,53 +0,0 @@
-/*
- * Copyright (c) 2020-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
- *
- * This is free software, licensed under the GNU General Public License v3.
- * See /LICENSE for more information.
- */
-
-import React from "react";
-
-import PropTypes from "prop-types";
-import { useUID } from "react-uid";
-
-Switch.propTypes = {
-    label: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.element,
-        PropTypes.node,
-        PropTypes.arrayOf(PropTypes.node),
-    ]).isRequired,
-    helpText: PropTypes.string,
-    switchHeading: PropTypes.bool,
-    className: PropTypes.string,
-};
-
-function Switch({ label, helpText, switchHeading, className, ...props }) {
-    const uid = useUID();
-
-    return (
-        <div
-            className={`form-check form-switch ${className || "mb-3"} ${
-                switchHeading ? "d-flex align-items-center" : ""
-            }`.trim()}
-        >
-            <input
-                type="checkbox"
-                className={`form-check-input ${switchHeading ? "me-2" : ""}`.trim()}
-                role="switch"
-                id={uid}
-                {...props}
-            />
-            <label className="form-check-label" htmlFor={uid}>
-                {label}
-            </label>
-            {helpText && (
-                <div className="form-text">
-                    <small>{helpText}</small>
-                </div>
-            )}
-        </div>
-    );
-}
-
-export default Switch;

src/bootstrap/Switch.md

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

src/bootstrap/TextInput.js

@@ -1,19 +1,18 @@
 /*
- * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ * 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.
  */
 
 import React from "react";
-
 import PropTypes from "prop-types";
 
-import Input from "./Input";
+import { Input } from "./Input";
+
+
+export const TextInput = ({ ...props }) => <Input type="text" {...props} />;
 
-function TextInput({ ...props }) {
-    return <Input type="text" {...props} />;
-}
 
 TextInput.propTypes = {
     /** Field label. */
@@ -23,5 +22,3 @@ TextInput.propTypes = {
     /** Help text message. */
     helpText: PropTypes.string,
 };
-
-export default TextInput;

src/bootstrap/TextInput.md

@@ -1,16 +1,15 @@
-Text Bootstrap component input with label and predefined sizes and structure for
+Text Bootstrap component input with label and predefined sizes and structure for using in foris forms.
-using in foris forms.
 
 All additional `props` are passed to the `<input type="text">` HTML component.
 
 ```js
-import { useState } from "react";
+import {useState} from 'react';
-const [value, setValue] = useState("Bla bla");
+const [value, setValue] = useState('Bla bla');
 
 <TextInput
     value={value}
-    label="Some text"
+    label="Some text" 
     helpText="Read the small text!"
-    onChange={(event) => setValue(event.target.value)}
+    onChange={event => setValue(event.target.value)}
-/>;
+/>
 ```

src/bootstrap/ThreeDotsMenu.js

@@ -1,42 +0,0 @@
-/*
- * Copyright (C) 2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
- *
- * This is free software, licensed under the GNU General Public License v3.
- * See /LICENSE for more information.
- */
-
-import React from "react";
-
-import { faEllipsisVertical } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import PropTypes from "prop-types";
-
-import Button from "./Button";
-
-ThreeDotsMenu.propTypes = {
-    /** Menu items. */
-    children: PropTypes.arrayOf(PropTypes.node).isRequired,
-};
-
-function ThreeDotsMenu({ children, ...props }) {
-    return (
-        <div className="dropdown position-static" {...props}>
-            <Button
-                className="btn-sm btn-link text-body"
-                data-bs-toggle="dropdown"
-                aria-expanded="false"
-            >
-                <FontAwesomeIcon icon={faEllipsisVertical} />
-            </Button>
-            <ul className="dropdown-menu">
-                {children.map((child) => (
-                    <li key={child.key || child.props.id || Math.random()}>
-                        {child}
-                    </li>
-                ))}
-            </ul>
-        </div>
-    );
-}
-
-export default ThreeDotsMenu;

src/bootstrap/ThreeDotsMenu.md

@@ -1,40 +0,0 @@
-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
-import { useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faEdit, faTrash } from "@fortawesome/free-solid-svg-icons";
-
-const threeDotsMenuItems = [
-    {
-        text: "Edit",
-        icon: faEdit,
-        onClick: () => {
-            alert("Edit clicked");
-        },
-    },
-    {
-        text: "Delete",
-        icon: faTrash,
-        onClick: () => {
-            alert("Delete clicked");
-        },
-    },
-];
-
-<ThreeDotsMenu>
-    {threeDotsMenuItems.map((item, index) => (
-        <button key={index} onClick={item.onClick} className="dropdown-item">
-            <FontAwesomeIcon
-                icon={item.icon}
-                className="me-1"
-                width="1rem"
-                size="sm"
-            />
-            {item.text}
-        </button>
-    ))}
-</ThreeDotsMenu>;
-```

src/bootstrap/__tests__/Button.test.js

@@ -9,23 +9,24 @@ import React from "react";
 
 import { render } from "customTestRender";
 
-import Button from "../Button";
+import { Button } from "../Button";
 
 describe("<Button />", () => {
     it("Render button correctly", () => {
         const { container } = render(<Button>Test Button</Button>);
-        expect(container.firstChild).toMatchSnapshot();
+        expect(container.firstChild)
+            .toMatchSnapshot();
     });
 
     it("Render button with custom classes", () => {
-        const { container } = render(
+        const { container } = render(<Button className="one two three">Test Button</Button>);
-            <Button className="one two three">Test Button</Button>
+        expect(container.firstChild)
-        );
+            .toMatchSnapshot();
-        expect(container.firstChild).toMatchSnapshot();
     });
 
     it("Render button with spinner", () => {
-        const { container } = render(<Button loading>Test Button</Button>);
+        const { container } = render(<Button loading={true}>Test Button</Button>);
-        expect(container.firstChild).toMatchSnapshot();
+        expect(container.firstChild)
+            .toMatchSnapshot();
     });
 });

src/bootstrap/__tests__/CheckBox.test.js

@@ -9,7 +9,7 @@ import React from "react";
 
 import { render } from "customTestRender";
 
-import CheckBox from "../CheckBox";
+import { CheckBox } from "../CheckBox";
 
 describe("<Checkbox/>", () => {
     it("Render checkbox", () => {
@@ -18,16 +18,22 @@ describe("<Checkbox/>", () => {
                 label="Test label"
                 checked
                 helpText="Some help text"
-                onChange={() => {}}
+                onChange={() => {
+                }}
             />
         );
-        expect(container.firstChild).toMatchSnapshot();
+        expect(container.firstChild)
+            .toMatchSnapshot();
     });
 
     it("Render uncheked checkbox", () => {
         const { container } = render(
-            <CheckBox label="Test label" helpText="Some help text" />
+            <CheckBox
+                label="Test label"
+                helpText="Some help text"
+            />
         );
-        expect(container.firstChild).toMatchSnapshot();
+        expect(container.firstChild)
+            .toMatchSnapshot();
     });
 });

src/bootstrap/__tests__/DownloadButton.test.js

@@ -1,23 +0,0 @@
-/*
- * 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.
- */
-
-import React from "react";
-
-import { render } from "customTestRender";
-
-import DownloadButton from "../DownloadButton";
-
-describe("<DownloadButton />", () => {
-    it("should have download attribute", () => {
-        const { container } = render(
-            <DownloadButton href="http://example.com">
-                Test Button
-            </DownloadButton>
-        );
-        expect(container.firstChild.getAttribute("download")).not.toBeNull();
-    });
-});

src/bootstrap/__tests__/NumberInput.test.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ * 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.
@@ -7,43 +7,23 @@
 
 import React from "react";
 
-import { render, fireEvent, getByLabelText, waitFor } from "customTestRender";
+import { render } from "customTestRender";
+
+import { NumberInput } from "../NumberInput";
 
-import NumberInput from "../NumberInput";
 
 describe("<NumberInput/>", () => {
-    const onChangeMock = jest.fn();
+    it("Render number input", () => {
-    let componentContainer;
-
-    beforeEach(() => {
         const { container } = render(
             <NumberInput
                 label="Test label"
                 helpText="Some help text"
-                value={1}
+                value={1123}
-                onChange={onChangeMock}
+                onChange={() => {
+                }}
             />
         );
-        componentContainer = container;
+        expect(container.firstChild)
-    });
+            .toMatchSnapshot();
-
-    it("Render number input", () => {
-        expect(componentContainer.firstChild).toMatchSnapshot();
-    });
-
-    it("Increase number with button", async () => {
-        const increaseButton = getByLabelText(componentContainer, /Increase/);
-        fireEvent.mouseDown(increaseButton);
-        await waitFor(() =>
-            expect(onChangeMock).toHaveBeenCalledWith({ target: { value: 2 } })
-        );
-    });
-
-    it("Decrease number with button", async () => {
-        const decreaseButton = getByLabelText(componentContainer, /Decrease/);
-        fireEvent.mouseDown(decreaseButton);
-        await waitFor(() =>
-            expect(onChangeMock).toHaveBeenCalledWith({ target: { value: 0 } })
-        );
     });
 });

src/bootstrap/__tests__/PasswordInput.test.js

@@ -9,7 +9,7 @@ import React from "react";
 
 import { render } from "customTestRender";
 
-import PasswordInput from "../PasswordInput";
+import { PasswordInput } from "../PasswordInput";
 
 describe("<PasswordInput/>", () => {
     it("Render password input", () => {
@@ -18,9 +18,11 @@ describe("<PasswordInput/>", () => {
                 label="Test label"
                 helpText="Some help text"
                 value="Some password"
-                onChange={() => {}}
+                onChange={() => {
+                }}
             />
         );
-        expect(container.firstChild).toMatchSnapshot();
+        expect(container.firstChild)
+            .toMatchSnapshot();
     });
 });

src/bootstrap/__tests__/RadioSet.test.js

@@ -9,35 +9,37 @@ import React from "react";
 
 import { render } from "customTestRender";
 
-import RadioSet from "../RadioSet";
+import { RadioSet } from "../RadioSet";
 
 const TEST_CHOICES = [
     {
         label: "label",
-        value: "value",
+        value: "value"
     },
     {
         label: "another label",
-        value: "another value",
+        value: "another value"
     },
     {
         label: "another one  label",
-        value: "another on value",
+        value: "another on value"
-    },
+    }
 ];
 
 describe("<RadioSet/>", () => {
     it("Render radio set", () => {
         const { container } = render(
             <RadioSet
-                name="test_name"
+                name={"test_name"}
-                label="Radios set label"
+                label='Radios set label'
-                value="value"
+                value='value'
                 choices={TEST_CHOICES}
-                helpText="Some help text"
+                helpText={"Some help text"}
-                onChange={() => {}}
+                onChange={() => {
+                }}
             />
         );
-        expect(container.firstChild).toMatchSnapshot();
+        expect(container.firstChild)
+            .toMatchSnapshot();
     });
 });

src/bootstrap/__tests__/Select.test.js

@@ -7,31 +7,27 @@
 
 import React from "react";
 
-import {
+import { fireEvent, getByDisplayValue, getByText, render } from "customTestRender";
-    fireEvent,
-    getByDisplayValue,
-    getByText,
-    render,
-} from "customTestRender";
 
-import Select from "../Select";
+import { Select } from "../Select";
 
 const TEST_CHOICES = {
-    1: "one",
+    "1": "one",
-    2: "two",
+    "2": "two",
-    3: "three",
+    "3": "three",
 };
 
 describe("<Select/>", () => {
-    let selectContainer;
+    var selectContainer;
     const onChangeHandler = jest.fn();
     beforeEach(() => {
         const { container } = render(
             <Select
-                label="Test label"
+                label='Test label'
-                value="1"
+                value='1'
                 choices={TEST_CHOICES}
-                helpText="Help text"
+                helpText='Help text'
+
                 onChange={onChangeHandler}
             />
         );
@@ -39,17 +35,21 @@ describe("<Select/>", () => {
     });
 
     it("Test with snapshot.", () => {
-        expect(selectContainer).toMatchSnapshot();
+        expect(selectContainer)
+            .toMatchSnapshot();
     });
 
     it("Test onChange handling.", () => {
         const select = getByDisplayValue(selectContainer, "one");
-        expect(select.value).toBe("1");
+        expect(select.value)
+            .toBe("1");
         fireEvent.change(select, { target: { value: "2" } });
 
         const option = getByText(selectContainer, "two");
-        expect(onChangeHandler).toBeCalled();
+        expect(onChangeHandler)
+            .toBeCalled();
 
-        expect(option.value).toBe("2");
+        expect(option.value)
+            .toBe("2");
     });
 });

src/bootstrap/__tests__/Switch.test.js

@@ -1,33 +0,0 @@
-/*
- * 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.
- */
-
-import React from "react";
-
-import { render } from "customTestRender";
-
-import Switch from "../Switch";
-
-describe("<Switch/>", () => {
-    it("Render switch", () => {
-        const { container } = render(
-            <Switch
-                label="Test label"
-                checked
-                helpText="Some help text"
-                onChange={() => {}}
-            />
-        );
-        expect(container.firstChild).toMatchSnapshot();
-    });
-
-    it("Render uncheked switch", () => {
-        const { container } = render(
-            <Switch label="Test label" helpText="Some help text" />
-        );
-        expect(container.firstChild).toMatchSnapshot();
-    });
-});

src/bootstrap/__tests__/TextInput.test.js

@@ -9,7 +9,7 @@ import React from "react";
 
 import { render } from "customTestRender";
 
-import TextInput from "../TextInput";
+import { TextInput } from "../TextInput";
 
 describe("<TextInput/>", () => {
     it("Render text input", () => {
@@ -18,9 +18,11 @@ describe("<TextInput/>", () => {
                 label="Test label"
                 helpText="Some help text"
                 value="Some text"
-                onChange={() => {}}
+                onChange={() => {
+                }}
             />
         );
-        expect(container.firstChild).toMatchSnapshot();
+        expect(container.firstChild)
+            .toMatchSnapshot();
     });
 });

src/bootstrap/__tests__/__snapshots__/Button.test.js.snap

@@ -2,38 +2,39 @@
 
 exports[`<Button /> Render button correctly 1`] = `
 <button
-  class="btn btn-primary d-inline-flex justify-content-center align-items-center"
+  class="btn btn-primary "
   type="button"
 >
-  <span>
+   
-    Test Button
+   
-  </span>
+  Test Button
 </button>
 `;
 
 exports[`<Button /> Render button with custom classes 1`] = `
 <button
-  class="btn one two three d-inline-flex justify-content-center align-items-center"
+  class="btn one two three"
   type="button"
 >
-  <span>
+   
-    Test Button
+   
-  </span>
+  Test Button
 </button>
 `;
 
 exports[`<Button /> Render button with spinner 1`] = `
 <button
-  class="btn btn-primary d-inline-flex justify-content-center align-items-center"
+  class="btn btn-primary "
   type="button"
 >
   <span
     aria-hidden="true"
-    class="spinner-border spinner-border-sm me-1"
+    class="spinner-border spinner-border-sm"
     role="status"
   />
-  <span>
+   
-    Test Button
+   
-  </span>
+   
+  Test Button
 </button>
 `;

src/bootstrap/__tests__/__snapshots__/CheckBox.test.js.snap

@@ -2,51 +2,61 @@
 
 exports[`<Checkbox/> Render checkbox 1`] = `
 <div
-  class="mb-3 form-check"
+  class="col-sm-12 offset-lg-1 col-lg-10"
+  style="margin-bottom: 1rem;"
 >
-  <input
-    checked=""
-    class="form-check-input"
-    id="1"
-    type="checkbox"
-  />
-  <label
-    class="form-check-label"
-    for="1"
-  >
-    Test label
-  </label>
   <div
-    class="form-text"
+    class="custom-control custom-checkbox"
+    style="margin-bottom: 0px;"
   >
-    <small>
+    <input
-      Some help text
+      checked=""
-    </small>
+      class="custom-control-input"
+      id="1"
+      type="checkbox"
+    />
+    <label
+      class="custom-control-label"
+      for="1"
+      style="margin-bottom: 0px;"
+    >
+      Test label
+    </label>
   </div>
+  <small
+    class="form-text text-muted"
+  >
+    Some help text
+  </small>
 </div>
 `;
 
 exports[`<Checkbox/> Render uncheked checkbox 1`] = `
 <div
-  class="mb-3 form-check"
+  class="col-sm-12 offset-lg-1 col-lg-10"
+  style="margin-bottom: 1rem;"
 >
-  <input
-    class="form-check-input"
-    id="1"
-    type="checkbox"
-  />
-  <label
-    class="form-check-label"
-    for="1"
-  >
-    Test label
-  </label>
   <div
-    class="form-text"
+    class="custom-control custom-checkbox"
+    style="margin-bottom: 0px;"
   >
-    <small>
+    <input
-      Some help text
+      class="custom-control-input"
-    </small>
+      id="1"
+      type="checkbox"
+    />
+    <label
+      class="custom-control-label"
+      for="1"
+      style="margin-bottom: 0px;"
+    >
+      Test label
+    </label>
   </div>
+  <small
+    class="form-text text-muted"
+  >
+    Some help text
+  </small>
 </div>
 `;

src/bootstrap/__tests__/__snapshots__/NumberInput.test.js.snap

@@ -2,48 +2,29 @@
 
 exports[`<NumberInput/> Render number input 1`] = `
 <div
-  class="mb-3"
+  class="col-sm-12 offset-lg-1 col-lg-10"
 >
-  <label
-    class="form-label"
-    for="1"
-  >
-    Test label
-  </label>
   <div
-    class="input-group"
+    class="form-group"
   >
-    <input
+    <label
-      class="form-control"
+      for="1"
-      id="1"
-      type="number"
-      value="1"
-    />
-    <button
-      aria-label="Increase value. Hint: Hold to increase faster."
-      class="btn btn-outline-secondary"
-      title="Increase value. Hint: Hold to increase faster."
-      type="button"
     >
-      <i
+      Test label
-        class="fa"
+    </label>
-      />
+    <div
-    </button>
+      class="input-group"
-    <button
-      aria-label="Decrease value. Hint: Hold to decrease faster."
-      class="btn btn-outline-secondary"
-      title="Decrease value. Hint: Hold to decrease faster."
-      type="button"
     >
-      <i
+      <input
-        class="fa"
+        class="form-control"
+        id="1"
+        type="number"
+        value="1123"
       />
-    </button>
+    </div>
-  </div>
+    <small
-  <div
+      class="form-text text-muted"
-    class="form-text"
+    >
-  >
-    <small>
       Some help text
     </small>
   </div>

src/bootstrap/__tests__/__snapshots__/PasswordInput.test.js.snap

@@ -2,29 +2,30 @@
 
 exports[`<PasswordInput/> Render password input 1`] = `
 <div
-  class="mb-3"
+  class="col-sm-12 offset-lg-1 col-lg-10"
 >
-  <label
-    class="form-label"
-    for="1"
-  >
-    Test label
-  </label>
   <div
-    class="input-group"
+    class="form-group"
   >
-    <input
+    <label
-      autocomplete="current-password"
+      for="1"
-      class="form-control"
+    >
-      id="1"
+      Test label
-      type="password"
+    </label>
-      value="Some password"
+    <div
-    />
+      class="input-group"
-  </div>
+    >
-  <div
+      <input
-    class="form-text"
+        autocomplete="new-password"
-  >
+        class="form-control"
-    <small>
+        id="1"
+        type="password"
+        value="Some password"
+      />
+    </div>
+    <small
+      class="form-text text-muted"
+    >
       Some help text
     </small>
   </div>

src/bootstrap/__tests__/__snapshots__/RadioSet.test.js.snap

@@ -2,72 +2,72 @@
 
 exports[`<RadioSet/> Render radio set 1`] = `
 <div
-  class="mb-3"
+  class="form-group col-sm-12 offset-lg-1 col-lg-10"
+  style="margin-bottom: 1rem;"
 >
   <label
-    class="d-block"
+    class="col-12"
     for="1"
+    style="padding-left: 0px;"
   >
     Radios set label
   </label>
   <div
-    class="mb-3"
+    class="custom-control custom-radio custom-control-inline"
   >
     <input
       checked=""
-      class="form-check-input me-2"
+      class="custom-control-input"
       id="test_name-0"
       name="test_name"
       type="radio"
       value="value"
     />
     <label
-      class="form-check-label"
+      class="custom-control-label"
       for="test_name-0"
     >
       label
     </label>
   </div>
   <div
-    class="mb-3"
+    class="custom-control custom-radio custom-control-inline"
   >
     <input
-      class="form-check-input me-2"
+      class="custom-control-input"
       id="test_name-1"
       name="test_name"
       type="radio"
       value="another value"
     />
     <label
-      class="form-check-label"
+      class="custom-control-label"
       for="test_name-1"
     >
       another label
     </label>
   </div>
   <div
-    class="mb-3"
+    class="custom-control custom-radio custom-control-inline"
   >
     <input
-      class="form-check-input me-2"
+      class="custom-control-input"
       id="test_name-2"
       name="test_name"
       type="radio"
       value="another on value"
     />
     <label
-      class="form-check-label"
+      class="custom-control-label"
       for="test_name-2"
     >
       another one  label
     </label>
   </div>
-  <div
+  <small
-    class="form-text"
+    class="form-text text-muted"
   >
-    <small>
+    Some help text
-      Some help text
+  </small>
-    </small>
-  </div>
 </div>
 `;

src/bootstrap/__tests__/__snapshots__/Select.test.js.snap

@@ -3,16 +3,15 @@
 exports[`<Select/> Test with snapshot. 1`] = `
 <div>
   <div
-    class="mb-3"
+    class="form-group col-sm-12 offset-lg-1 col-lg-10"
   >
     <label
-      class="form-label"
       for="1"
     >
       Test label
     </label>
     <select
-      class="form-select"
+      class="custom-select"
       id="1"
     >
       <option
@@ -31,13 +30,11 @@ exports[`<Select/> Test with snapshot. 1`] = `
         three
       </option>
     </select>
-    <div
+    <small
-      class="form-text"
+      class="form-text text-muted"
     >
-      <small>
+      Help text
-        Help text
+    </small>
-      </small>
-    </div>
   </div>
 </div>
 `;

src/bootstrap/__tests__/__snapshots__/Switch.test.js.snap

@@ -1,54 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Switch/> Render switch 1`] = `
-<div
-  class="form-check form-switch mb-3"
->
-  <input
-    checked=""
-    class="form-check-input"
-    id="1"
-    role="switch"
-    type="checkbox"
-  />
-  <label
-    class="form-check-label"
-    for="1"
-  >
-    Test label
-  </label>
-  <div
-    class="form-text"
-  >
-    <small>
-      Some help text
-    </small>
-  </div>
-</div>
-`;
-
-exports[`<Switch/> Render uncheked switch 1`] = `
-<div
-  class="form-check form-switch mb-3"
->
-  <input
-    class="form-check-input"
-    id="1"
-    role="switch"
-    type="checkbox"
-  />
-  <label
-    class="form-check-label"
-    for="1"
-  >
-    Test label
-  </label>
-  <div
-    class="form-text"
-  >
-    <small>
-      Some help text
-    </small>
-  </div>
-</div>
-`;

src/bootstrap/__tests__/__snapshots__/TextInput.test.js.snap

@@ -2,28 +2,29 @@
 
 exports[`<TextInput/> Render text input 1`] = `
 <div
-  class="mb-3"
+  class="col-sm-12 offset-lg-1 col-lg-10"
 >
-  <label
-    class="form-label"
-    for="1"
-  >
-    Test label
-  </label>
   <div
-    class="input-group"
+    class="form-group"
   >
-    <input
+    <label
-      class="form-control"
+      for="1"
-      id="1"
+    >
-      type="text"
+      Test label
-      value="Some text"
+    </label>
-    />
+    <div
-  </div>
+      class="input-group"
-  <div
+    >
-    class="form-text"
+      <input
-  >
+        class="form-control"
-    <small>
+        id="1"
+        type="text"
+        value="Some text"
+      />
+    </div>
+    <small
+      class="form-text text-muted"
+    >
       Some help text
     </small>
   </div>

src/bootstrap/constants.js

@@ -1,12 +1,10 @@
 /*
- * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ * 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.
  */
 
 /** Bootstrap column size for form fields */
-const formFieldsSize = "card p-4 col-sm-12 col-lg-12 p-0 mb-4";
+// eslint-disable-next-line import/prefer-default-export
-const buttonFormFieldsSize = "col-sm-12 col-lg-12 p-0 mb-3";
+export const formFieldsSize = "col-sm-12 offset-lg-1 col-lg-10";
-
-export { formFieldsSize, buttonFormFieldsSize };

src/common/ActionButtonWithModal/ActionButtonWithModal.js

@@ -1,157 +0,0 @@
-/*
- * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
- *
- * This is free software, licensed under the GNU General Public License v3.
- * See /LICENSE for more information.
- */
-
-import React, { useState, useEffect } from "react";
-
-import PropTypes from "prop-types";
-
-import { useAPIPost, useAPIPut } from "../../api/hooks";
-import { API_STATE } from "../../api/utils";
-import Button from "../../bootstrap/Button";
-import {
-    Modal,
-    ModalHeader,
-    ModalBody,
-    ModalFooter,
-} from "../../bootstrap/Modal";
-import { useAlert } from "../../context/alertContext/AlertContext";
-
-ActionButtonWithModal.propTypes = {
-    /** Component that triggers the action. */
-    actionTrigger: PropTypes.elementType.isRequired,
-    /** Method to use for the action. */
-    actionMethod: PropTypes.string,
-    /** URL to send the action to. */
-    actionUrl: PropTypes.string.isRequired,
-    /** Title of the modal. */
-    modalTitle: PropTypes.string.isRequired,
-    /** Message of the modal. */
-    modalMessage: PropTypes.string.isRequired,
-    /** Text of the action button in the modal. */
-    modalActionText: PropTypes.string,
-    /** Props for the action button in the modal. */
-    modalActionProps: PropTypes.object,
-    /** Message to display on successful action. */
-    successMessage: PropTypes.string,
-    /** Message to display on failed action. */
-    errorMessage: PropTypes.string,
-};
-
-function ActionButtonWithModal({
-    actionTrigger: ActionTriggerComponent,
-    actionMethod = "POST",
-    actionUrl,
-    modalTitle,
-    modalMessage,
-    modalActionText,
-    modalActionProps,
-    successMessage,
-    errorMessage,
-}) {
-    const [triggered, setTriggered] = useState(false);
-    const [modalShown, setModalShown] = useState(false);
-    const [triggerPostActionStatus, triggerPostAction] = useAPIPost(actionUrl);
-    const [triggerPutActionStatus, triggerPutAction] = useAPIPut(actionUrl);
-
-    const [setAlert] = useAlert();
-    useEffect(() => {
-        if (
-            triggerPostActionStatus.state === API_STATE.SUCCESS ||
-            triggerPutActionStatus.state === API_STATE.SUCCESS
-        ) {
-            setAlert(
-                successMessage || _("Action successful."),
-                API_STATE.SUCCESS
-            );
-            setTriggered(false);
-        }
-        if (
-            triggerPostActionStatus.state === API_STATE.ERROR ||
-            triggerPutActionStatus.state === API_STATE.ERROR
-        ) {
-            setAlert(errorMessage || _("Action failed."));
-            setTriggered(false);
-        }
-    }, [
-        triggerPostActionStatus,
-        triggerPutActionStatus,
-        setAlert,
-        successMessage,
-        errorMessage,
-    ]);
-
-    const actionHandler = () => {
-        setTriggered(true);
-        if (actionMethod === "POST") {
-            triggerPostAction();
-        } else {
-            triggerPutAction();
-        }
-        setModalShown(false);
-    };
-
-    return (
-        <>
-            <ActionModal
-                shown={modalShown}
-                setShown={setModalShown}
-                onAction={actionHandler}
-                title={modalTitle}
-                message={modalMessage}
-                actionText={modalActionText}
-                actionProps={modalActionProps}
-            />
-            <ActionTriggerComponent
-                loading={triggered}
-                disabled={triggered}
-                onClick={() => setModalShown(true)}
-            />
-        </>
-    );
-}
-
-ActionModal.propTypes = {
-    shown: PropTypes.bool.isRequired,
-    setShown: PropTypes.func.isRequired,
-    onAction: PropTypes.func.isRequired,
-    title: PropTypes.string.isRequired,
-    message: PropTypes.string.isRequired,
-    actionText: PropTypes.string,
-    actionProps: PropTypes.object,
-};
-
-function ActionModal({
-    shown,
-    setShown,
-    onAction,
-    title,
-    message,
-    actionText,
-    actionProps,
-}) {
-    return (
-        <Modal shown={shown} setShown={setShown}>
-            <ModalHeader setShown={setShown} title={title} />
-            <ModalBody>
-                <p className="mb-0">{message}</p>
-            </ModalBody>
-            <ModalFooter>
-                <Button
-                    className="btn-secondary"
-                    onClick={() => setShown(false)}
-                >
-                    {_("Cancel")}
-                </Button>
-                <Button onClick={onAction} {...actionProps}>
-                    {actionText || _("Confirm")}
-                </Button>
-            </ModalFooter>
-        </Modal>
-    );
-}
-
-export default ActionButtonWithModal;

src/common/ActionButtonWithModal/ActionButtonWithModal.md

@@ -1,39 +0,0 @@
-RebootButton component is a button that opens a modal dialog to confirm the
-reboot of the device.
-
-## Usage
-
-```jsx
-import React, { useEffect, createContext } from "react";
-
-import Button from "../../bootstrap/Button";
-import { AlertContextProvider } from "../../context/alertContext/AlertContext";
-import ActionButtonWithModal from "./ActionButtonWithModal";
-
-window.AlertContext = React.createContext();
-
-const RebootButtonExample = () => {
-    const ActionButton = (props) => {
-        return <Button {...props}>Action</Button>;
-    };
-
-    return (
-        <AlertContextProvider>
-            <div id="modal-container" />
-            <div id="alert-container" />
-            <ActionButtonWithModal
-                actionTrigger={ActionButton}
-                actionUrl="/reforis/api/action"
-                modalTitle="Warning!"
-                modalMessage="Are you sure you want to perform this action?"
-                modalActionText="Confirm action"
-                modalActionProps={{ className: "btn-danger" }}
-                successMessage="Action request succeeded."
-                errorMessage="Action request failed."
-            />
-        </AlertContextProvider>
-    );
-};
-
-<RebootButtonExample />;
-```

src/common/RichTable/RichTable.js

@@ -1,118 +0,0 @@
-/*
- * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
- *
- * This is free software, licensed under the GNU General Public License v3.
- * See /LICENSE for more information.
- */
-
-import React, { useMemo, useState } from "react";
-
-import { rankItem } from "@tanstack/match-sorter-utils";
-import {
-    flexRender,
-    getCoreRowModel,
-    getSortedRowModel,
-    getFilteredRowModel,
-    getPaginationRowModel,
-    useReactTable,
-} from "@tanstack/react-table";
-import PropTypes from "prop-types";
-
-import RichTableBody from "./RichTableBody";
-import RichTableColumnsDropdown from "./RichTableColumnsDropdown";
-import RichTableHeader from "./RichTableHeader";
-import RichTablePagination from "./RichTablePagination";
-import Input from "../../bootstrap/Input";
-
-RichTable.propTypes = {
-    /** Columns to be displayed in the table */
-    columns: PropTypes.array.isRequired,
-    /** Data to be displayed in the table, must be passed as a stable reference, for example, useState */
-    data: PropTypes.array.isRequired,
-    /** Whether to display pagination */
-    withPagination: PropTypes.bool,
-    /** Number of rows per page, the default is 5 */
-    pageSize: PropTypes.number,
-    /** Index of the current page */
-    pageIndex: PropTypes.number,
-};
-
-export default function RichTable({
-    columns,
-    data,
-    withPagination,
-    pageSize = 5,
-    pageIndex = 0,
-}) {
-    const tableColumns = useMemo(() => columns, [columns]);
-    const [sorting, setSorting] = useState([]);
-    const [pagination, setPagination] = useState({
-        pageIndex,
-        pageSize,
-    });
-    const [globalFilter, setGlobalFilter] = useState("");
-    const [columnVisibility, setColumnVisibility] = useState({});
-
-    const table = useReactTable({
-        data,
-        columns: tableColumns,
-        filterFns: {
-            fuzzy: fuzzyFilter,
-        },
-        globalFilterFn: "fuzzy",
-        getCoreRowModel: getCoreRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        getFilteredRowModel: getFilteredRowModel(),
-        onSortingChange: setSorting,
-        onPaginationChange: setPagination,
-        onGlobalFilterChange: setGlobalFilter,
-        onColumnVisibilityChange: setColumnVisibility,
-        state: {
-            sorting,
-            pagination,
-            globalFilter,
-            columnVisibility,
-        },
-    });
-
-    const paginationIsNeeded = data.length > pageSize && withPagination;
-
-    return (
-        <div>
-            <div className="d-flex justify-content-between align-items-center">
-                <Input
-                    className="me-3"
-                    type="text"
-                    placeholder={_("Search…")}
-                    value={globalFilter ?? ""}
-                    onChange={(e) => setGlobalFilter(String(e.target.value))}
-                />
-                <RichTableColumnsDropdown columns={table.getAllLeafColumns()} />
-            </div>
-            <div className="table-responsive">
-                <table className="table table-hover text-nowrap">
-                    <RichTableHeader table={table} flexRender={flexRender} />
-                    <RichTableBody
-                        table={table}
-                        columns={tableColumns}
-                        flexRender={flexRender}
-                    />
-                </table>
-                {paginationIsNeeded && (
-                    <RichTablePagination
-                        table={table}
-                        tablePageSize={pageSize}
-                        allRows={data.length}
-                    />
-                )}
-            </div>
-        </div>
-    );
-}
-
-function fuzzyFilter(row, columnId, value, addMeta) {
-    const itemRank = rankItem(row.getValue(columnId), value);
-    addMeta({ itemRank });
-    return itemRank.passed;
-}

src/common/RichTable/RichTable.md

@@ -1,135 +0,0 @@
-### Description
-
-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)
-
-### 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",
-    },
-];
-
-<RichTable columns={columns} data={data} withPagination />;
-```

src/common/RichTable/RichTableBody.js

@@ -1,58 +0,0 @@
-/*
- * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
- *
- * This is free software, licensed under the GNU General Public License v3.
- * See /LICENSE for more information.
- */
-
-import React from "react";
-
-import propTypes from "prop-types";
-
-RichTableBody.propTypes = {
-    table: propTypes.shape({
-        getRowModel: propTypes.func.isRequired,
-    }).isRequired,
-    columns: propTypes.array.isRequired,
-    flexRender: propTypes.func.isRequired,
-};
-
-function RichTableBody({ table, columns, flexRender }) {
-    return (
-        <tbody>
-            {table.getRowModel().rows?.length ? (
-                table.getRowModel().rows.map((row) => {
-                    return (
-                        <tr key={row.id} className="align-middle">
-                            {row.getVisibleCells().map((cell) => {
-                                return (
-                                    <td
-                                        key={cell.id}
-                                        {...(cell.column.columnDef
-                                            .className && {
-                                            className:
-                                                cell.column.columnDef.className,
-                                        })}
-                                    >
-                                        {flexRender(
-                                            cell.column.columnDef.cell,
-                                            cell.getContext()
-                                        )}
-                                    </td>
-                                );
-                            })}
-                        </tr>
-                    );
-                })
-            ) : (
-                <tr>
-                    <td colSpan={columns.length} className="text-center py-4">
-                        <span>{_("No results.")}</span>
-                    </td>
-                </tr>
-            )}
-        </tbody>
-    );
-}
-
-export default RichTableBody;

src/common/RichTable/RichTableColumnsDropdown.js

@@ -1,90 +0,0 @@
-/*
- * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
- *
- * This is free software, licensed under the GNU General Public License v3.
- * See /LICENSE for more information.
- */
-
-import React from "react";
-
-import { faCheck, faRotateLeft } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import PropTypes from "prop-types";
-
-import Button from "../../bootstrap/Button";
-
-RichTableColumnsDropdown.propTypes = {
-    columns: PropTypes.array.isRequired,
-};
-
-function RichTableColumnsDropdown({ columns }) {
-    return (
-        <div className="dropdown mb-3">
-            <Button
-                className="btn btn-outline-secondary dropdown-toggle"
-                data-bs-toggle="dropdown"
-            >
-                {_("Columns")}
-            </Button>
-            <ul className="dropdown-menu dropdown-menu-end">
-                {columns.map((column) => {
-                    return (
-                        <li key={column.id}>
-                            <button
-                                type="button"
-                                className="dropdown-item d-flex align-items-center"
-                                onClick={column.getToggleVisibilityHandler()}
-                                style={{ paddingLeft: "2rem" }}
-                                disabled={
-                                    column.columnDef?.enableHiding === false
-                                }
-                            >
-                                {column.getIsVisible() && (
-                                    <FontAwesomeIcon
-                                        icon={faCheck}
-                                        className="position-absolute text-secondary me-2"
-                                        style={{ left: "0.6rem" }}
-                                        width="1rem"
-                                    />
-                                )}
-                                <span>{column.columnDef.header}</span>
-                            </button>
-                        </li>
-                    );
-                })}
-                {columns.some((column) => !column.getIsVisible()) && (
-                    <>
-                        <li>
-                            <hr className="dropdown-divider" />
-                        </li>
-                        <li>
-                            <button
-                                type="button"
-                                className="dropdown-item d-flex align-items-center"
-                                style={{ paddingLeft: "2rem" }}
-                                onClick={() => {
-                                    // toggleVisibility for columns that are hidden
-                                    columns.forEach((column) => {
-                                        if (!column.getIsVisible()) {
-                                            column.toggleVisibility();
-                                        }
-                                    });
-                                }}
-                            >
-                                <FontAwesomeIcon
-                                    icon={faRotateLeft}
-                                    className="position-absolute text-secondary me-2"
-                                    width="1rem"
-                                    style={{ left: "0.6rem" }}
-                                />
-                                {_("Reset")}
-                            </button>
-                        </li>
-                    </>
-                )}
-            </ul>
-        </div>
-    );
-}
-
-export default RichTableColumnsDropdown;

src/common/RichTable/RichTableHeader.js

@@ -1,102 +0,0 @@
-/*
- * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
- *
- * This is free software, licensed under the GNU General Public License v3.
- * See /LICENSE for more information.
- */
-
-import React from "react";
-
-import {
-    faSquareCaretUp,
-    faSquareCaretDown,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import propTypes from "prop-types";
-
-RichTableHeader.propTypes = {
-    table: propTypes.shape({
-        getHeaderGroups: propTypes.func.isRequired,
-    }).isRequired,
-    flexRender: propTypes.func.isRequired,
-};
-
-function RichTableHeader({ table, flexRender }) {
-    const getThTitle = (header) => {
-        if (!header.column.getCanSort()) return undefined;
-
-        const nextSortingOrder = header.column.getNextSortingOrder();
-        if (nextSortingOrder === "asc") return _("Sort ascending");
-        if (nextSortingOrder === "desc") return _("Sort descending");
-        return _("Clear sort");
-    };
-
-    return (
-        <thead className="table-light">
-            {table.getHeaderGroups().map((headerGroup) => (
-                <tr key={headerGroup.id} role="row">
-                    {headerGroup.headers.map((header) => (
-                        <th
-                            key={header.id}
-                            colSpan={header.colSpan}
-                            {...(header.column.columnDef.headerClassName && {
-                                className:
-                                    header.column.columnDef.headerClassName,
-                            })}
-                        >
-                            {header.isPlaceholder ||
-                            header.column.columnDef.headerIsHidden ? (
-                                <div className="d-none" aria-hidden="true">
-                                    {flexRender(
-                                        header.column.columnDef.header,
-                                        header.getContext()
-                                    )}
-                                </div>
-                            ) : (
-                                <button
-                                    type="button"
-                                    style={
-                                        header.column.columnDef
-                                            .headerClassName === "text-center"
-                                            ? { justifySelf: "center" }
-                                            : {}
-                                    }
-                                    className={`btn btn-link text-decoration-none text-reset fw-bold p-0 d-flex align-items-center
-                                                    ${
-                                                        header.column.getCanSort()
-                                                            ? "d-flex align-items-center"
-                                                            : ""
-                                                    }
-                                                `}
-                                    onClick={header.column.getToggleSortingHandler()}
-                                    title={getThTitle(header)}
-                                >
-                                    {flexRender(
-                                        header.column.columnDef.header,
-                                        header.getContext()
-                                    )}
-                                    {{
-                                        asc: (
-                                            <FontAwesomeIcon
-                                                icon={faSquareCaretUp}
-                                                className="ms-1 text-primary"
-                                            />
-                                        ),
-                                        desc: (
-                                            <FontAwesomeIcon
-                                                icon={faSquareCaretDown}
-                                                className="ms-1 text-primary"
-                                            />
-                                        ),
-                                    }[header.column.getIsSorted()] ?? null}
-                                </button>
-                            )}
-                        </th>
-                    ))}
-                </tr>
-            ))}
-        </thead>
-    );
-}
-
-export default RichTableHeader;

src/common/RichTable/RichTablePagination.js

@@ -1,128 +0,0 @@
-/*
- * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
- *
- * This is free software, licensed under the GNU General Public License v3.
- * See /LICENSE for more information.
- */
-
-import React, { useMemo } from "react";
-
-import {
-    faAngleLeft,
-    faAnglesLeft,
-    faAngleRight,
-    faAnglesRight,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import propTypes from "prop-types";
-
-RichTablePagination.propTypes = {
-    table: propTypes.shape({
-        getState: propTypes.func.isRequired,
-        getCanPreviousPage: propTypes.func.isRequired,
-        getCanNextPage: propTypes.func.isRequired,
-        firstPage: propTypes.func.isRequired,
-        previousPage: propTypes.func.isRequired,
-        nextPage: propTypes.func.isRequired,
-        lastPage: propTypes.func.isRequired,
-        setPageSize: propTypes.func.isRequired,
-        getPageCount: propTypes.func.isRequired,
-    }).isRequired,
-    tablePageSize: propTypes.number,
-    allRows: propTypes.number,
-};
-
-function RichTablePagination({ table, tablePageSize, allRows }) {
-    const { pagination } = table.getState();
-    const prevPagBtnDisabled = !table.getCanPreviousPage();
-    const nextPagBtnDisabled = !table.getCanNextPage();
-
-    const pageSizes = useMemo(() => {
-        return [tablePageSize ?? 5, 10, 25].filter(
-            (value, index, self) => self.indexOf(value) === index
-        );
-    }, [tablePageSize]);
-
-    const renderPaginationButton = (icon, ariaLabel, onClick, disabled) => (
-        <li
-            className={`page-item ${disabled ? "disabled" : ""}`}
-            style={{ cursor: disabled ? "not-allowed" : "pointer" }}
-        >
-            <button
-                type="button"
-                className="page-link"
-                aria-label={ariaLabel}
-                onClick={onClick}
-                disabled={disabled}
-            >
-                <FontAwesomeIcon icon={icon} />
-            </button>
-        </li>
-    );
-
-    return (
-        <nav
-            aria-label={_("Pagination navigation bar")}
-            className="d-flex gap-2 justify-content-start align-items-center mx-2 mb-1 text-nowrap"
-        >
-            <ul className="pagination pagination-sm mb-0">
-                {renderPaginationButton(
-                    faAnglesLeft,
-                    _("First page"),
-                    () => table.firstPage(),
-                    prevPagBtnDisabled
-                )}
-                {renderPaginationButton(
-                    faAngleLeft,
-                    _("Previous page"),
-                    () => table.previousPage(),
-                    prevPagBtnDisabled
-                )}
-                {renderPaginationButton(
-                    faAngleRight,
-                    _("Next page"),
-                    () => table.nextPage(),
-                    nextPagBtnDisabled
-                )}
-                {renderPaginationButton(
-                    faAnglesRight,
-                    _("Last page"),
-                    () => table.lastPage(),
-                    nextPagBtnDisabled
-                )}
-            </ul>
-            <span>
-                {_("Page")}&nbsp;
-                <span className="fw-bold">
-                    {pagination.pageIndex + 1}
-                    &nbsp;{_("of")}&nbsp;
-                    {table.getPageCount().toLocaleString()}
-                </span>
-            </span>
-            <div
-                className="vr mx-1 align-self-center"
-                style={{ height: "1.5rem" }}
-            />
-            <span>{_("Rows per page:")}</span>
-            <select
-                className="form-select form-select-sm w-auto"
-                aria-label={_("Select rows per page")}
-                value={pagination.pageSize}
-                onChange={(e) => {
-                    table.setPageSize(Number(e.target.value));
-                }}
-            >
-                {pageSizes.map((pageSize) => (
-                    <option key={pageSize} value={pageSize}>
-                        {pageSize}
-                    </option>
-                ))}
-                <option key={allRows} value={allRows}>
-                    {_("All")}
-                </option>
-            </select>
-        </nav>
-    );
-}
-
-export default RichTablePagination;

src/common/WiFiSettings/ResetWiFiSettings.js

@@ -1,77 +0,0 @@
-/*
- * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
- *
- * This is free software, licensed under the GNU General Public License v3.
- * See /LICENSE for more information.
- */
-
-import React, { useEffect, useState } from "react";
-
-import PropTypes from "prop-types";
-
-import { useAPIPost } from "../../api/hooks";
-import { API_STATE } from "../../api/utils";
-import { ALERT_TYPES } from "../../bootstrap/Alert";
-import Button from "../../bootstrap/Button";
-import { formFieldsSize } from "../../bootstrap/constants";
-import { useAlert } from "../../context/alertContext/AlertContext";
-
-ResetWiFiSettings.propTypes = {
-    ws: PropTypes.object.isRequired,
-    endpoint: PropTypes.string.isRequired,
-};
-
-function ResetWiFiSettings({ ws, endpoint }) {
-    const [isLoading, setIsLoading] = useState(false);
-
-    useEffect(() => {
-        const module = "wifi";
-        ws.subscribe(module).bind(module, "reset", () => {
-            // eslint-disable-next-line no-restricted-globals
-            setTimeout(() => location.reload(), 1000);
-        });
-    }, [ws]);
-
-    const [postResetResponse, postReset] = useAPIPost(endpoint);
-    const [setAlert, dismissAlert] = useAlert();
-    useEffect(() => {
-        if (postResetResponse.state === API_STATE.ERROR) {
-            setAlert(_("An error occurred during resetting Wi-Fi settings."));
-        } else if (postResetResponse.state === API_STATE.SUCCESS) {
-            setAlert(
-                _("Wi-Fi settings are set to defaults."),
-                ALERT_TYPES.SUCCESS
-            );
-        }
-    }, [postResetResponse, setAlert]);
-
-    const onReset = () => {
-        dismissAlert();
-        setIsLoading(true);
-        postReset();
-    };
-
-    return (
-        <div className={formFieldsSize}>
-            <h2>{_("Reset Wi-Fi Settings")}</h2>
-            <p>
-                {_(
-                    "If a number of wireless cards doesn't match, you may try to reset the Wi-Fi settings. Note that this will remove the current Wi-Fi configuration and restore the default values."
-                )}
-            </p>
-            <div className="text-end">
-                <Button
-                    className="btn-primary"
-                    forisFormSize
-                    loading={isLoading}
-                    disabled={isLoading}
-                    onClick={onReset}
-                >
-                    {_("Reset Wi-Fi Settings")}
-                </Button>
-            </div>
-        </div>
-    );
-}
-
-export default ResetWiFiSettings;

src/common/WiFiSettings/WiFiForm.js

@@ -1,306 +0,0 @@
-/*
- * Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://www.nic.cz/)
- *
- * This is free software, licensed under the GNU General Public License v3.
- * See /LICENSE for more information.
- */
-
-import React from "react";
-
-import PropTypes from "prop-types";
-
-import { HELP_TEXTS, HTMODES, BANDS, ENCRYPTIONMODES } from "./constants";
-import WifiGuestForm from "./WiFiGuestForm";
-import WiFiQRCode from "./WiFiQRCode";
-import PasswordInput from "../../bootstrap/PasswordInput";
-import RadioSet from "../../bootstrap/RadioSet";
-import Select from "../../bootstrap/Select";
-import Switch from "../../bootstrap/Switch";
-import TextInput from "../../bootstrap/TextInput";
-
-WiFiForm.propTypes = {
-    formData: PropTypes.shape({ devices: PropTypes.arrayOf(PropTypes.object) })
-        .isRequired,
-    formErrors: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-    setFormValue: PropTypes.func.isRequired,
-    hasGuestNetwork: PropTypes.bool,
-};
-
-WiFiForm.defaultProps = {
-    formData: { devices: [] },
-    setFormValue: () => {},
-    hasGuestNetwork: true,
-};
-
-export default function WiFiForm({
-    formData,
-    formErrors,
-    setFormValue,
-    hasGuestNetwork,
-    disabled,
-}) {
-    return formData.devices.map((device, index) => (
-        <DeviceForm
-            key={device.id}
-            formData={device}
-            deviceIndex={index}
-            formErrors={(formErrors || [])[index]}
-            setFormValue={setFormValue}
-            hasGuestNetwork={hasGuestNetwork}
-            disabled={disabled}
-            divider={index + 1 !== formData.devices.length}
-        />
-    ));
-}
-
-DeviceForm.propTypes = {
-    formData: PropTypes.shape({
-        id: PropTypes.number.isRequired,
-        enabled: PropTypes.bool.isRequired,
-        SSID: PropTypes.string.isRequired,
-        password: PropTypes.string.isRequired,
-        hidden: PropTypes.bool.isRequired,
-        band: PropTypes.string.isRequired,
-        htmode: PropTypes.string.isRequired,
-        channel: PropTypes.string.isRequired,
-        guest_wifi: PropTypes.object.isRequired,
-        encryption: PropTypes.string.isRequired,
-        available_bands: PropTypes.array.isRequired,
-        ieee80211w_disabled: PropTypes.bool,
-    }),
-    formErrors: PropTypes.object.isRequired,
-    setFormValue: PropTypes.func.isRequired,
-    hasGuestNetwork: PropTypes.bool,
-    deviceIndex: PropTypes.number,
-    divider: PropTypes.bool,
-};
-
-DeviceForm.defaultProps = {
-    formErrors: {},
-    hasGuestNetwork: true,
-};
-
-function DeviceForm({
-    formData,
-    formErrors,
-    setFormValue,
-    hasGuestNetwork,
-    deviceIndex,
-    divider,
-    ...props
-}) {
-    const deviceID = formData.id;
-    const bnds = formData.available_bands;
-    return (
-        <>
-            <Switch
-                label={<h2 className="mb-0">{_(`Wi-Fi ${deviceID + 1}`)}</h2>}
-                checked={formData.enabled}
-                onChange={setFormValue((value) => ({
-                    devices: {
-                        [deviceIndex]: { enabled: { $set: value } },
-                    },
-                }))}
-                switchHeading
-                {...props}
-            />
-            {formData.enabled && (
-                <>
-                    <TextInput
-                        label="SSID"
-                        value={formData.SSID}
-                        error={formErrors.SSID || null}
-                        helpText={HELP_TEXTS.ssid}
-                        required
-                        onChange={setFormValue((value) => ({
-                            devices: {
-                                [deviceIndex]: {
-                                    SSID: { $set: value },
-                                },
-                            },
-                        }))}
-                        {...props}
-                    >
-                        <WiFiQRCode
-                            SSID={formData.SSID}
-                            password={formData.password}
-                        />
-                    </TextInput>
-
-                    <PasswordInput
-                        withEye
-                        label={_("Password")}
-                        value={formData.password}
-                        error={formErrors.password}
-                        helpText={HELP_TEXTS.password}
-                        required
-                        onChange={setFormValue((value) => ({
-                            devices: {
-                                [deviceIndex]: { password: { $set: value } },
-                            },
-                        }))}
-                        {...props}
-                    />
-
-                    <Switch
-                        label={_("Hide SSID")}
-                        helpText={HELP_TEXTS.hidden}
-                        checked={formData.hidden}
-                        onChange={setFormValue((value) => ({
-                            devices: {
-                                [deviceIndex]: { hidden: { $set: value } },
-                            },
-                        }))}
-                        {...props}
-                    />
-
-                    <RadioSet
-                        name={`band-${deviceID}`}
-                        label={_("Band")}
-                        choices={getBandChoices(formData)}
-                        value={formData.band}
-                        helpText={HELP_TEXTS.band}
-                        inline
-                        onChange={setFormValue((value) => {
-                            // Find the selected band
-                            const selectedBand = bnds.find(
-                                (band) => band.band === value
-                            );
-                            // Get the last item in the available HT modes for the selected band
-                            const bestHtmode =
-                                selectedBand.available_htmodes.slice(-1)[0];
-                            return {
-                                devices: {
-                                    [deviceIndex]: {
-                                        band: { $set: value },
-                                        channel: { $set: "0" },
-                                        htmode: { $set: bestHtmode },
-                                    },
-                                },
-                            };
-                        })}
-                        {...props}
-                    />
-
-                    <Select
-                        label={_("802.11n/ac/ax mode")}
-                        choices={getHtmodeChoices(formData)}
-                        value={formData.htmode}
-                        helpText={HELP_TEXTS.htmode}
-                        onChange={setFormValue((value) => ({
-                            devices: {
-                                [deviceIndex]: { htmode: { $set: value } },
-                            },
-                        }))}
-                        {...props}
-                    />
-
-                    <Select
-                        label={_("Channel")}
-                        choices={getChannelChoices(formData)}
-                        value={formData.channel}
-                        onChange={setFormValue((value) => ({
-                            devices: {
-                                [deviceIndex]: { channel: { $set: value } },
-                            },
-                        }))}
-                        {...props}
-                    />
-
-                    <Select
-                        label={_("Encryption")}
-                        choices={getEncryptionChoices(formData)}
-                        helpText={HELP_TEXTS.wpa3}
-                        value={formData.encryption}
-                        onChange={setFormValue((value) => ({
-                            devices: {
-                                [deviceIndex]: { encryption: { $set: value } },
-                            },
-                        }))}
-                        {...props}
-                    />
-
-                    {(formData.encryption === "WPA3" ||
-                        formData.encryption === "WPA2/3") && (
-                        <Switch
-                            label={_("Disable Management Frame Protection")}
-                            helpText={_(
-                                "In case you have trouble connecting to WiFi Access Point, try disabling Management Frame Protection."
-                            )}
-                            checked={formData.ieee80211w_disabled}
-                            onChange={setFormValue((value) => ({
-                                devices: {
-                                    [deviceIndex]: {
-                                        ieee80211w_disabled: { $set: value },
-                                    },
-                                },
-                            }))}
-                            {...props}
-                        />
-                    )}
-
-                    {hasGuestNetwork && (
-                        <WifiGuestForm
-                            formData={{
-                                id: deviceIndex,
-                                ...formData.guest_wifi,
-                            }}
-                            formErrors={formErrors.guest_wifi || {}}
-                            setFormValue={setFormValue}
-                            {...props}
-                        />
-                    )}
-                </>
-            )}
-            {divider && <hr />}
-        </>
-    );
-}
-
-function getChannelChoices(device) {
-    const channelChoices = {
-        0: _("auto"),
-    };
-
-    device.available_bands.forEach((availableBand) => {
-        if (availableBand.band !== device.band) return;
-
-        availableBand.available_channels.forEach((availableChannel) => {
-            channelChoices[availableChannel.number.toString()] = `
-                        ${availableChannel.number}
-                        (${availableChannel.frequency} MHz ${
-                            availableChannel.radar ? " ,DFS" : ""
-                        })
-                    `;
-        });
-    });
-
-    return channelChoices;
-}
-
-function getHtmodeChoices(device) {
-    const htmodeChoices = {};
-
-    device.available_bands.forEach((availableBand) => {
-        if (availableBand.band !== device.band) return;
-
-        availableBand.available_htmodes.forEach((availableHtmod) => {
-            htmodeChoices[availableHtmod] = HTMODES[availableHtmod];
-        });
-    });
-    return htmodeChoices;
-}
-
-function getBandChoices(device) {
-    return device.available_bands.map((availableBand) => ({
-        label: `${BANDS[availableBand.band]} GHz`,
-        value: availableBand.band,
-    }));
-}
-
-function getEncryptionChoices(device) {
-    if (device.encryption === "custom") {
-        ENCRYPTIONMODES.custom = _("Custom");
-    }
-    return ENCRYPTIONMODES;
-}

src/common/WiFiSettings/WiFiGuestForm.js

@@ -1,112 +0,0 @@
-/*
- * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
- *
- * This is free software, licensed under the GNU General Public License v3.
- * See /LICENSE for more information.
- */
-
-import React from "react";
-
-import PropTypes from "prop-types";
-
-import { HELP_TEXTS, ENCRYPTIONMODES } from "./constants";
-import WiFiQRCode from "./WiFiQRCode";
-import PasswordInput from "../../bootstrap/PasswordInput";
-import Select from "../../bootstrap/Select";
-import Switch from "../../bootstrap/Switch";
-import TextInput from "../../bootstrap/TextInput";
-
-WifiGuestForm.propTypes = {
-    formData: PropTypes.shape({
-        id: PropTypes.number.isRequired,
-        SSID: PropTypes.string.isRequired,
-        password: PropTypes.string.isRequired,
-        enabled: PropTypes.bool.isRequired,
-        encryption: PropTypes.string.isRequired,
-    }),
-    formErrors: PropTypes.shape({
-        SSID: PropTypes.string,
-        password: PropTypes.string,
-    }),
-    setFormValue: PropTypes.func.isRequired,
-    deviceIndex: PropTypes.string,
-};
-
-export default function WifiGuestForm({
-    formData,
-    formErrors,
-    setFormValue,
-    deviceIndex,
-    ...props
-}) {
-    return (
-        <>
-            <Switch
-                label={_("Enable Guest Wi-Fi")}
-                checked={formData.enabled}
-                helpText={HELP_TEXTS.guest_wifi_enabled}
-                onChange={setFormValue((value) => ({
-                    devices: {
-                        [formData.id]: {
-                            guest_wifi: { enabled: { $set: value } },
-                        },
-                    },
-                }))}
-                {...props}
-            />
-            {formData.enabled ? (
-                <>
-                    <TextInput
-                        label="SSID"
-                        value={formData.SSID}
-                        error={formErrors.SSID}
-                        helpText={HELP_TEXTS.ssid}
-                        onChange={setFormValue((value) => ({
-                            devices: {
-                                [formData.id]: {
-                                    guest_wifi: { SSID: { $set: value } },
-                                },
-                            },
-                        }))}
-                        {...props}
-                    >
-                        <WiFiQRCode
-                            SSID={formData.SSID}
-                            password={formData.password}
-                        />
-                    </TextInput>
-                    <PasswordInput
-                        withEye
-                        label={_("Password")}
-                        value={formData.password}
-                        helpText={HELP_TEXTS.password}
-                        error={formErrors.password}
-                        required
-                        onChange={setFormValue((value) => ({
-                            devices: {
-                                [formData.id]: {
-                                    guest_wifi: { password: { $set: value } },
-                                },
-                            },
-                        }))}
-                        {...props}
-                    />
-                    <Select
-                        label={_("Encryption")}
-                        choices={ENCRYPTIONMODES}
-                        helpText={HELP_TEXTS.wpa3}
-                        value={formData.encryption}
-                        onChange={setFormValue((value) => ({
-                            devices: {
-                                [formData.id]: {
-                                    guest_wifi: { encryption: { $set: value } },
-                                },
-                            },
-                        }))}
-                        {...props}
-                    />
-                </>
-            ) : null}
-        </>
-    );
-}

src/common/WiFiSettings/WiFiQRCode.js

@@ -1,103 +0,0 @@
-/*
- * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
- *
- * This is free software, licensed under the GNU General Public License v3.
- * See /LICENSE for more information.
- */
-
-import React, { useState } from "react";
-
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import PropTypes from "prop-types";
-import { QRCodeSVG } from "qrcode.react";
-
-import { createAndDownloadPdf, toQRCodeContent } from "./qrCodeHelpers";
-import Button from "../../bootstrap/Button";
-import {
-    Modal,
-    ModalBody,
-    ModalFooter,
-    ModalHeader,
-} from "../../bootstrap/Modal";
-
-WiFiQRCode.propTypes = {
-    SSID: PropTypes.string.isRequired,
-    password: PropTypes.string.isRequired,
-};
-
-export default function WiFiQRCode({ SSID, password }) {
-    const [modal, setModal] = useState(false);
-
-    return (
-        <>
-            <button
-                type="button"
-                className="input-group-text"
-                onClick={() => setModal(true)}
-            >
-                <FontAwesomeIcon
-                    icon="fa-solid fa-qrcode"
-                    title={_("Show QR code")}
-                    aria-label={_("Show QR code")}
-                    className="text-secondary"
-                />
-            </button>
-            {modal && (
-                <QRCodeModal
-                    setShown={setModal}
-                    shown={modal}
-                    SSID={SSID}
-                    password={password}
-                />
-            )}
-        </>
-    );
-}
-
-QRCodeModal.propTypes = {
-    SSID: PropTypes.string.isRequired,
-    password: PropTypes.string.isRequired,
-    shown: PropTypes.bool.isRequired,
-    setShown: PropTypes.func.isRequired,
-};
-
-function QRCodeModal({ shown, setShown, SSID, password }) {
-    return (
-        <Modal setShown={setShown} shown={shown}>
-            <ModalHeader setShown={setShown} title={_("Wi-Fi QR Code")} />
-            <ModalBody>
-                <QRCodeSVG
-                    className="d-block mx-auto img-logo-black"
-                    value={toQRCodeContent(SSID, password)}
-                    level="M"
-                    size={350}
-                    marginSize={0}
-                    imageSettings={{
-                        src: "/reforis/static/reforis/imgs/turris.svg",
-                        height: 40,
-                        width: 40,
-                        excavate: true,
-                    }}
-                />
-            </ModalBody>
-            <ModalFooter>
-                <Button
-                    className="btn-secondary"
-                    onClick={() => setShown(false)}
-                >
-                    {_("Close")}
-                </Button>
-                <Button
-                    className="btn-primary"
-                    onClick={() => createAndDownloadPdf(SSID, password)}
-                >
-                    <FontAwesomeIcon
-                        icon="fa-solid fa-file-download"
-                        className="me-2"
-                    />
-                    {_("Download PDF")}
-                </Button>
-            </ModalFooter>
-        </Modal>
-    );
-}

src/common/WiFiSettings/WiFiSettings.js

@@ -1,122 +0,0 @@
-/*
- * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
- *
- * This is free software, licensed under the GNU General Public License v3.
- * See /LICENSE for more information.
- */
-
-import React from "react";
-
-import PropTypes from "prop-types";
-
-import ResetWiFiSettings from "./ResetWiFiSettings";
-import WiFiForm from "./WiFiForm";
-import ForisForm from "../../form/components/ForisForm";
-
-WiFiSettings.propTypes = {
-    ws: PropTypes.object.isRequired,
-    endpoint: PropTypes.string.isRequired,
-    resetEndpoint: PropTypes.string.isRequired,
-    hasGuestNetwork: PropTypes.bool,
-};
-
-function WiFiSettings({ ws, endpoint, resetEndpoint, hasGuestNetwork }) {
-    return (
-        <>
-            <ForisForm
-                ws={ws}
-                forisConfig={{
-                    endpoint,
-                    wsModule: "wifi",
-                }}
-                prepData={prepData}
-                prepDataToSubmit={prepDataToSubmit}
-                validator={validator}
-            >
-                <WiFiForm hasGuestNetwork={hasGuestNetwork} />
-            </ForisForm>
-            <ResetWiFiSettings ws={ws} endpoint={resetEndpoint} />
-        </>
-    );
-}
-
-function prepData(formData) {
-    formData.devices.forEach((device, idx) => {
-        formData.devices[idx].channel = device.channel.toString();
-    });
-    return formData;
-}
-
-function prepDataToSubmit(formData) {
-    formData.devices.forEach((device, idx) => {
-        delete device.available_bands;
-
-        formData.devices[idx].channel = parseInt(device.channel);
-
-        if (!device.enabled) {
-            formData.devices[idx] = { id: device.id, enabled: false };
-            return;
-        }
-
-        if (!device.guest_wifi.enabled)
-            formData.devices[idx].guest_wifi = { enabled: false };
-
-        if (device.encryption === "WPA2") {
-            delete formData.devices[idx].ieee80211w_disabled;
-        }
-    });
-    return formData;
-}
-
-export function byteCount(string) {
-    const buffer = Buffer.from(string, "utf-8");
-    const count = buffer.byteLength;
-    return count;
-}
-
-export function validator(formData) {
-    const formErrors = formData.devices.map((device) => {
-        if (!device.enabled) return {};
-
-        const errors = {};
-        if (device.SSID.length > 32)
-            errors.SSID = _("SSID can't be longer than 32 symbols");
-        if (device.SSID.length === 0) errors.SSID = _("SSID can't be empty");
-        if (byteCount(device.SSID) > 32)
-            errors.SSID = _("SSID can't be longer than 32 bytes");
-
-        if (device.password.length < 8)
-            errors.password = _("Password must contain at least 8 symbols");
-        if (device.password.length >= 64)
-            errors.password = _(
-                "Password must not contain more than 63 symbols"
-            );
-
-        if (!device.guest_wifi.enabled) return errors;
-
-        const guest_wifi_errors = {};
-        if (device.guest_wifi.SSID.length > 32)
-            guest_wifi_errors.SSID = _("SSID can't be longer than 32 symbols");
-        if (device.guest_wifi.SSID.length === 0)
-            guest_wifi_errors.SSID = _("SSID can't be empty");
-        if (byteCount(device.guest_wifi.SSID) > 32)
-            guest_wifi_errors.SSID = _("SSID can't be longer than 32 bytes");
-
-        if (device.guest_wifi.password.length < 8)
-            guest_wifi_errors.password = _(
-                "Password must contain at least 8 symbols"
-            );
-        if (device.guest_wifi.password.length >= 64)
-            guest_wifi_errors.password = _(
-                "Password must not contain more than 63 symbols"
-            );
-
-        if (guest_wifi_errors.SSID || guest_wifi_errors.password) {
-            errors.guest_wifi = guest_wifi_errors;
-        }
-        return errors;
-    });
-    return JSON.stringify(formErrors).match(/\[[{},?]+\]/) ? null : formErrors;
-}
-
-export default WiFiSettings;

src/common/WiFiSettings/__tests__/ResetWiFiSettings.test.js

@@ -1,55 +0,0 @@
-/*
- * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
- *
- * This is free software, licensed under the GNU General Public License v3.
- * See /LICENSE for more information.
- */
-
-import React from "react";
-import { render, fireEvent, waitFor } from "customTestRender";
-
-import mockAxios from "jest-mock-axios";
-import WebSockets from "webSockets/WebSockets";
-import { mockJSONError } from "testUtils/network";
-import { mockSetAlert } from "testUtils/alertContextMock";
-import { ALERT_TYPES } from "../../../bootstrap/Alert";
-
-import ResetWiFiSettings from "../ResetWiFiSettings";
-
-describe("<ResetWiFiSettings/>", () => {
-    const webSockets = new WebSockets();
-    const endpoint = "/reforis/api/wifi-reset";
-    let getAllByText;
-
-    beforeEach(() => {
-        ({ getAllByText } = render(
-            <ResetWiFiSettings ws={webSockets} endpoint={endpoint} />
-        ));
-    });
-
-    it("should display alert on open ports - success", async () => {
-        fireEvent.click(getAllByText("Reset Wi-Fi Settings")[1]);
-        expect(mockAxios.post).toBeCalledWith(
-            endpoint,
-            undefined,
-            expect.anything()
-        );
-        mockAxios.mockResponse({ data: { foo: "bar" } });
-        await waitFor(() =>
-            expect(mockSetAlert).toBeCalledWith(
-                "Wi-Fi settings are set to defaults.",
-                ALERT_TYPES.SUCCESS
-            )
-        );
-    });
-
-    it("should display alert on open ports - failure", async () => {
-        fireEvent.click(getAllByText("Reset Wi-Fi Settings")[1]);
-        mockJSONError();
-        await waitFor(() =>
-            expect(mockSetAlert).toBeCalledWith(
-                "An error occurred during resetting Wi-Fi settings."
-            )
-        );
-    });
-});

src/common/WiFiSettings/__tests__/WiFiSettings.test.js

@@ -1,246 +0,0 @@
-/*
- * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
- *
- * This is free software, licensed under the GNU General Public License v3.
- * See /LICENSE for more information.
- */
-
-import React from "react";
-
-import diffSnapshot from "snapshot-diff";
-import mockAxios from "jest-mock-axios";
-
-import { fireEvent, render, waitFor } from "customTestRender";
-import WebSockets from "webSockets/WebSockets";
-import { mockJSONError } from "testUtils/network";
-
-import {
-    wifiSettingsFixture,
-    oneDevice,
-    twoDevices,
-    threeDevices,
-} from "./__fixtures__/wifiSettings";
-import WiFiSettings, { validator, byteCount } from "../WiFiSettings";
-
-describe("<WiFiSettings/>", () => {
-    let firstRender;
-    let getAllByText;
-    let getAllByLabelText;
-    let getByText;
-    let getByLabelText;
-    let asFragment;
-    const endpoint = "/reforis/api/wifi";
-
-    beforeEach(async () => {
-        const webSockets = new WebSockets();
-        const renderRes = render(
-            <WiFiSettings
-                ws={webSockets}
-                endpoint={endpoint}
-                resetEndpoint="foo"
-            />
-        );
-        asFragment = renderRes.asFragment;
-        getAllByText = renderRes.getAllByText;
-        getAllByLabelText = renderRes.getAllByLabelText;
-        getByLabelText = renderRes.getByLabelText;
-        getByText = renderRes.getByText;
-        mockAxios.mockResponse({ data: wifiSettingsFixture() });
-        await waitFor(() => renderRes.getByText("Wi-Fi 1"));
-        firstRender = renderRes.asFragment();
-    });
-
-    it("should handle error", async () => {
-        const webSockets = new WebSockets();
-        const { getByText } = render(
-            <WiFiSettings
-                ws={webSockets}
-                endpoint={endpoint}
-                resetEndpoint="foo"
-            />
-        );
-        const errorMessage = "An API error occurred.";
-        mockJSONError(errorMessage);
-        await waitFor(() => {
-            expect(getByText(errorMessage)).toBeTruthy();
-        });
-    });
-
-    it("Snapshot both modules disabled.", () => {
-        expect(firstRender).toMatchSnapshot();
-    });
-
-    it("Snapshot one module enabled.", () => {
-        fireEvent.click(getByText("Wi-Fi 1"));
-        expect(diffSnapshot(firstRender, asFragment())).toMatchSnapshot();
-    });
-
-    it("Snapshot 2.4 GHz", () => {
-        fireEvent.click(getByText("Wi-Fi 1"));
-        const enabledRender = asFragment();
-        fireEvent.click(getAllByText(/2.4/)[0]);
-        expect(diffSnapshot(enabledRender, asFragment())).toMatchSnapshot();
-    });
-
-    it("Snapshot guest network.", () => {
-        fireEvent.click(getByText("Wi-Fi 1"));
-        const enabledRender = asFragment();
-        fireEvent.click(getAllByText("Enable Guest Wi-Fi")[0]);
-        expect(diffSnapshot(enabledRender, asFragment())).toMatchSnapshot();
-    });
-
-    it("Post form: both modules disabled.", () => {
-        fireEvent.click(getByText("Save"));
-        expect(mockAxios.post).toBeCalled();
-        const data = {
-            devices: [
-                { enabled: false, id: 0 },
-                { enabled: false, id: 1 },
-            ],
-        };
-        expect(mockAxios.post).toHaveBeenCalledWith(
-            endpoint,
-            data,
-            expect.anything()
-        );
-    });
-
-    it("Post form: one module enabled.", () => {
-        fireEvent.click(getByText("Wi-Fi 1"));
-
-        fireEvent.click(getByText("Save"));
-        expect(mockAxios.post).toBeCalled();
-        const data = {
-            devices: [
-                {
-                    SSID: "TestSSID1",
-                    channel: 60,
-                    enabled: true,
-                    guest_wifi: { enabled: false },
-                    hidden: false,
-                    htmode: "HT80",
-                    band: "5g",
-                    id: 0,
-                    password: "TestPass",
-                    encryption: "WPA3",
-                },
-                { enabled: false, id: 1 },
-            ],
-        };
-        expect(mockAxios.post).toHaveBeenCalledWith(
-            endpoint,
-            data,
-            expect.anything()
-        );
-    });
-
-    it("Post form: 2.4 GHz", () => {
-        fireEvent.click(getByText("Wi-Fi 1"));
-        fireEvent.click(getAllByText(/2.4/)[0]);
-
-        fireEvent.click(getByText("Save"));
-        expect(mockAxios.post).toBeCalled();
-        const data = {
-            devices: [
-                {
-                    SSID: "TestSSID1",
-                    channel: 0,
-                    enabled: true,
-                    guest_wifi: { enabled: false },
-                    hidden: false,
-                    htmode: "VHT80",
-                    band: "2g",
-                    id: 0,
-                    password: "TestPass",
-                    encryption: "WPA3",
-                },
-                { enabled: false, id: 1 },
-            ],
-        };
-        expect(mockAxios.post).toHaveBeenCalledWith(
-            endpoint,
-            data,
-            expect.anything()
-        );
-    });
-
-    it("Post form: guest network.", () => {
-        fireEvent.click(getByText("Wi-Fi 1"));
-        fireEvent.click(getAllByText("Enable Guest Wi-Fi")[0]);
-        fireEvent.change(getAllByLabelText("Password")[1], {
-            target: { value: "test_password" },
-        });
-
-        fireEvent.click(getByText("Save"));
-        expect(mockAxios.post).toBeCalled();
-        const data = {
-            devices: [
-                {
-                    SSID: "TestSSID1",
-                    channel: 60,
-                    enabled: true,
-                    guest_wifi: {
-                        SSID: "TestGuestSSID",
-                        enabled: true,
-                        encryption: "WPA2",
-                        password: "test_password",
-                    },
-                    hidden: false,
-                    htmode: "HT80",
-                    band: "5g",
-                    id: 0,
-                    password: "TestPass",
-                    encryption: "WPA3",
-                },
-                { enabled: false, id: 1 },
-            ],
-        };
-        expect(mockAxios.post).toHaveBeenCalledWith(
-            endpoint,
-            data,
-            expect.anything()
-        );
-    });
-
-    it("Validator function using regex for one device", () => {
-        expect(validator(oneDevice)).toEqual(null);
-    });
-
-    it("Validator function using regex for two devices", () => {
-        const twoDevicesFormErrors = [{ SSID: "SSID can't be empty" }, {}];
-        expect(validator(twoDevices)).toEqual(twoDevicesFormErrors);
-    });
-
-    it("Validator function using regex for three devices", () => {
-        const threeDevicesFormErrors = [
-            {},
-            {},
-            { password: "Password must contain at least 8 symbols" },
-        ];
-        expect(validator(threeDevices)).toEqual(threeDevicesFormErrors);
-    });
-
-    it("ByteCount function", () => {
-        expect(byteCount("abc")).toEqual(3);
-    });
-
-    it("Should validate password length", () => {
-        const shortErrorFeedback = /Password must contain/i;
-        const longErrorFeedback = /Password must not contain/i;
-
-        fireEvent.click(getByText("Wi-Fi 1"));
-
-        const passwordInput = getByLabelText("Password");
-
-        const changePassword = (value) =>
-            fireEvent.change(passwordInput, { target: { value } });
-
-        changePassword("12");
-        expect(getByText(shortErrorFeedback)).toBeDefined();
-
-        changePassword(
-            "longpasswordlongpasswordlongpasswordlongpasswordlongpasswordlong"
-        );
-        expect(getByText(longErrorFeedback)).toBeDefined();
-    });
-});

src/common/WiFiSettings/__tests__/__fixtures__/wifiSettings.js

@@ -1,405 +0,0 @@
-/*
- * Copyright (C) 2019-2021 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.
- */
-
-export function wifiSettingsFixture() {
-    return {
-        devices: [
-            {
-                SSID: "TestSSID1",
-                available_bands: [
-                    {
-                        available_channels: [
-                            {
-                                frequency: 2412,
-                                number: 1,
-                                radar: false,
-                            },
-                            {
-                                frequency: 2417,
-                                number: 2,
-                                radar: false,
-                            },
-                            {
-                                frequency: 2422,
-                                number: 3,
-                                radar: false,
-                            },
-                            {
-                                frequency: 2427,
-                                number: 4,
-                                radar: false,
-                            },
-                            {
-                                frequency: 2432,
-                                number: 5,
-                                radar: false,
-                            },
-                            {
-                                frequency: 2437,
-                                number: 6,
-                                radar: false,
-                            },
-                            {
-                                frequency: 2442,
-                                number: 7,
-                                radar: false,
-                            },
-                            {
-                                frequency: 2447,
-                                number: 8,
-                                radar: false,
-                            },
-                            {
-                                frequency: 2452,
-                                number: 9,
-                                radar: false,
-                            },
-                            {
-                                frequency: 2457,
-                                number: 10,
-                                radar: false,
-                            },
-                            {
-                                frequency: 2462,
-                                number: 11,
-                                radar: false,
-                            },
-                        ],
-                        available_htmodes: [
-                            "NOHT",
-                            "HT20",
-                            "HT40",
-                            "VHT20",
-                            "VHT40",
-                            "VHT80",
-                        ],
-                        band: "2g",
-                    },
-                    {
-                        available_channels: [
-                            {
-                                frequency: 5180,
-                                number: 36,
-                                radar: false,
-                            },
-                            {
-                                frequency: 5200,
-                                number: 40,
-                                radar: false,
-                            },
-                            {
-                                frequency: 5220,
-                                number: 44,
-                                radar: false,
-                            },
-                            {
-                                frequency: 5240,
-                                number: 48,
-                                radar: false,
-                            },
-                            {
-                                frequency: 5260,
-                                number: 52,
-                                radar: true,
-                            },
-                            {
-                                frequency: 5280,
-                                number: 56,
-                                radar: true,
-                            },
-                            {
-                                frequency: 5300,
-                                number: 60,
-                                radar: true,
-                            },
-                            {
-                                frequency: 5320,
-                                number: 64,
-                                radar: true,
-                            },
-                            {
-                                frequency: 5500,
-                                number: 100,
-                                radar: true,
-                            },
-                            {
-                                frequency: 5520,
-                                number: 104,
-                                radar: true,
-                            },
-                            {
-                                frequency: 5540,
-                                number: 108,
-                                radar: true,
-                            },
-                            {
-                                frequency: 5560,
-                                number: 112,
-                                radar: true,
-                            },
-                            {
-                                frequency: 5580,
-                                number: 116,
-                                radar: true,
-                            },
-                            {
-                                frequency: 5600,
-                                number: 120,
-                                radar: true,
-                            },
-                            {
-                                frequency: 5620,
-                                number: 124,
-                                radar: true,
-                            },
-                            {
-                                frequency: 5640,
-                                number: 128,
-                                radar: true,
-                            },
-                            {
-                                frequency: 5660,
-                                number: 132,
-                                radar: true,
-                            },
-                            {
-                                frequency: 5680,
-                                number: 136,
-                                radar: true,
-                            },
-                            {
-                                frequency: 5700,
-                                number: 140,
-                                radar: true,
-                            },
-                            {
-                                frequency: 5720,
-                                number: 144,
-                                radar: true,
-                            },
-                            {
-                                frequency: 5745,
-                                number: 149,
-                                radar: false,
-                            },
-                            {
-                                frequency: 5765,
-                                number: 153,
-                                radar: false,
-                            },
-                            {
-                                frequency: 5785,
-                                number: 157,
-                                radar: false,
-                            },
-                            {
-                                frequency: 5805,
-                                number: 161,
-                                radar: false,
-                            },
-                            {
-                                frequency: 5825,
-                                number: 165,
-                                radar: false,
-                            },
-                        ],
-                        available_htmodes: [
-                            "NOHT",
-                            "HT20",
-                            "HT40",
-                            "VHT20",
-                            "VHT40",
-                            "VHT80",
-                        ],
-                        band: "5g",
-                    },
-                ],
-                channel: 60,
-                enabled: false,
-                guest_wifi: {
-                    SSID: "TestGuestSSID",
-                    enabled: false,
-                    encryption: "WPA2",
-                    password: "",
-                },
-                hidden: false,
-                htmode: "HT80",
-                band: "5g",
-                id: 0,
-                password: "TestPass",
-                encryption: "WPA3",
-            },
-            {
-                SSID: "Turris",
-                available_bands: [
-                    {
-                        available_channels: [
-                            {
-                                frequency: 2412,
-                                number: 1,
-                                radar: false,
-                            },
-                            {
-                                frequency: 2417,
-                                number: 2,
-                                radar: false,
-                            },
-                            {
-                                frequency: 2422,
-                                number: 3,
-                                radar: false,
-                            },
-                            {
-                                frequency: 2427,
-                                number: 4,
-                                radar: false,
-                            },
-                            {
-                                frequency: 2432,
-                                number: 5,
-                                radar: false,
-                            },
-                            {
-                                frequency: 2437,
-                                number: 6,
-                                radar: false,
-                            },
-                            {
-                                frequency: 2442,
-                                number: 7,
-                                radar: false,
-                            },
-                            {
-                                frequency: 2447,
-                                number: 8,
-                                radar: false,
-                            },
-                            {
-                                frequency: 2452,
-                                number: 9,
-                                radar: false,
-                            },
-                            {
-                                frequency: 2457,
-                                number: 10,
-                                radar: false,
-                            },
-                            {
-                                frequency: 2462,
-                                number: 11,
-                                radar: false,
-                            },
-                        ],
-                        available_htmodes: ["NOHT", "HT20", "HT40"],
-                        band: "2g",
-                    },
-                ],
-                channel: 11,
-                enabled: false,
-                guest_wifi: {
-                    SSID: "TestSSID",
-                    enabled: false,
-                    password: "",
-                },
-                hidden: false,
-                htmode: "HT40",
-                band: "2g",
-                id: 1,
-                password: "TestPass",
-                encryption: "WPA3",
-            },
-        ],
-    };
-}
-const oneDevice = {
-    devices: [
-        {
-            SSID: "Turris1",
-            channel: 60,
-            enabled: true,
-            guest_wifi: { enabled: false },
-            hidden: false,
-            htmode: "HT40",
-            band: "5g",
-            id: 0,
-            password: "TestPass",
-            encryption: "WPA3",
-        },
-    ],
-};
-
-const twoDevices = {
-    devices: [
-        {
-            SSID: "",
-            channel: 60,
-            enabled: true,
-            guest_wifi: { enabled: false },
-            hidden: false,
-            htmode: "HT40",
-            band: "5g",
-            id: 0,
-            password: "TestPass",
-            encryption: "WPA3",
-        },
-        {
-            SSID: "Turris2",
-            channel: 60,
-            enabled: true,
-            guest_wifi: { enabled: false },
-            hidden: false,
-            htmode: "HT40",
-            band: "5g",
-            id: 1,
-            password: "TestPass",
-            encryption: "WPA3",
-        },
-    ],
-};
-
-const threeDevices = {
-    devices: [
-        {
-            SSID: "Turris1",
-            channel: 60,
-            enabled: true,
-            guest_wifi: { enabled: false },
-            hidden: false,
-            htmode: "HT40",
-            band: "5g",
-            id: 0,
-            password: "TestPass",
-            encryption: "WPA3",
-        },
-        {
-            SSID: "Turris2",
-            channel: 60,
-            enabled: false,
-            guest_wifi: { enabled: false },
-            hidden: false,
-            htmode: "HT40",
-            band: "5g",
-            id: 1,
-            password: "TestPass",
-            encryption: "WPA3",
-        },
-        {
-            SSID: "Turris3",
-            channel: 60,
-            enabled: true,
-            guest_wifi: { enabled: false },
-            hidden: false,
-            htmode: "HT40",
-            band: "5g",
-            id: 2,
-            password: "",
-            encryption: "WPA3",
-        },
-    ],
-};
-
-export { oneDevice, twoDevices, threeDevices };

src/common/WiFiSettings/constants.js

@@ -1,55 +0,0 @@
-/*
- * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
- *
- * This is free software, licensed under the GNU General Public License v3.
- * See /LICENSE for more information.
- */
-
-export const HTMODES = {
-    NOHT: _("Disabled"),
-    HT20: _("802.11n - 20 MHz wide channel"),
-    HT40: _("802.11n - 40 MHz wide channel"),
-    VHT20: _("802.11ac - 20 MHz wide channel"),
-    VHT40: _("802.11ac - 40 MHz wide channel"),
-    VHT80: _("802.11ac - 80 MHz wide channel"),
-    VHT80_80: _("802.11ac - 80+80 MHz wide channel"),
-    VHT160: _("802.11ac - 160 MHz wide channel"),
-    HE20: _("802.11ax - 20 MHz wide channel"),
-    HE40: _("802.11ax - 40 MHz wide channel"),
-    HE80: _("802.11ax - 80 MHz wide channel"),
-    HE80_80: _("802.11ax - 80+80 MHz wide channel"),
-    HE160: _("802.11ax - 160 MHz wide channel"),
-};
-export const BANDS = {
-    "2g": "2.4",
-    "5g": "5",
-    "6g": "6",
-};
-export const ENCRYPTIONMODES = {
-    WPA3: _("WPA3 only"),
-    "WPA2/3": _("WPA3 with WPA2 as fallback (default)"),
-    WPA2: _("WPA2 only"),
-};
-export const HELP_TEXTS = {
-    ssid: _(
-        "SSID which contains non-standard characters could cause problems on some devices."
-    ),
-    password: _(
-        "WPA2/3 pre-shared key, that is required to connect to the network."
-    ),
-    hidden: _(
-        "If set, network is not visible when scanning for available networks."
-    ),
-    band: _(
-        "The 2.4 GHz band is more widely supported by clients, but tends to have more interference. The 5 GHz band is a newer standard and may not be supported by all your devices. It usually has less interference, but the signal does not carry so well indoors."
-    ),
-    htmode: _(
-        "Change this to adjust 802.11n/ac/ax mode of operation. 802.11n with 40 MHz wide channels can yield higher throughput but can cause more interference in the network. If you don't know what to choose, use the default option with 20 MHz wide channel."
-    ),
-    guest_wifi_enabled: _(
-        "Enables Wi-Fi for guests, which is separated from LAN network. Devices connected to this network are allowed to access the internet, but aren't allowed to access other devices and the configuration interface of the router. Parameters of the guest network can be set in the Guest network tab."
-    ),
-    wpa3: _(
-        "The WPA3 standard is the new most secure encryption method that is suggested to be used with any device that supports it. The older devices without WPA3 support require older WPA2. If you experience issues with connecting older devices, try to enable WPA2."
-    ),
-};

src/common/WiFiSettings/qrCodeHelpers.js

@@ -1,42 +0,0 @@
-/*
- * 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.
- */
-
-export function createAndDownloadPdf(SSID, password) {
-    const docDefinition = {
-        content: [
-            {
-                text: "Wi-Fi",
-                style: "header",
-                fontSize: 55,
-                alignment: "center",
-            },
-            {
-                qr: toQRCodeContent(SSID, password),
-                fit: "350",
-                margin: [0, 80],
-                alignment: "center",
-            },
-            {
-                text: `SSID: ${SSID}`,
-                fontSize: 25,
-                alignment: "center",
-            },
-            {
-                text: `Password: ${password}`,
-                fontSize: 25,
-                alignment: "center",
-            },
-        ],
-    };
-
-    // pdfmake is exposed by reForis main application. Thus we can use it from globals.
-    window.pdfMake.createPdf(docDefinition).download("wifi.pdf");
-}
-
-export function toQRCodeContent(SSID, password) {
-    return `WIFI:S:${SSID};T:WPA2;P:${password};;`;
-}

src/common/__tests__/ActionButtonWithModal.test.js

@@ -1,86 +0,0 @@
-/*
- * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
- *
- * This is free software, licensed under the GNU General Public License v3.
- * See /LICENSE for more information.
- */
-
-import React from "react";
-
-import Button from "bootstrap/Button";
-
-import { fireEvent, getByText, render, waitFor } from "customTestRender";
-import mockAxios from "jest-mock-axios";
-import { mockJSONError } from "testUtils/network";
-import { mockSetAlert } from "testUtils/alertContextMock";
-
-import ActionButtonWithModal from "../ActionButtonWithModal/ActionButtonWithModal";
-
-describe("<ActionButtonWithModal/>", () => {
-    let componentContainer;
-    const ActionButton = (props) => (
-        <Button type="button" {...props}>
-            Action
-        </Button>
-    );
-
-    beforeEach(() => {
-        const { container } = render(
-            <>
-                <div id="modal-container" />
-                <div id="alert-container" />
-                <ActionButtonWithModal
-                    actionTrigger={ActionButton}
-                    actionUrl="/reforis/api/action"
-                    modalTitle="Warning!"
-                    modalMessage="Are you sure you want to perform this action?"
-                    modalActionText="Confirm action"
-                    modalActionProps={{ className: "btn-danger" }}
-                    successMessage="Action request succeeded."
-                    errorMessage="Action request failed."
-                />
-            </>
-        );
-        componentContainer = container;
-    });
-
-    it("Render button.", () => {
-        expect(componentContainer).toMatchSnapshot();
-    });
-
-    it("Render modal.", () => {
-        fireEvent.click(getByText(componentContainer, "Action"));
-        expect(componentContainer).toMatchSnapshot();
-    });
-
-    it("Confirm action.", () => {
-        fireEvent.click(getByText(componentContainer, "Action"));
-        fireEvent.click(getByText(componentContainer, "Confirm action"));
-        expect(mockAxios.post).toHaveBeenCalledWith(
-            "/reforis/api/action",
-            undefined,
-            expect.anything()
-        );
-    });
-
-    it("Hold error.", async () => {
-        fireEvent.click(getByText(componentContainer, "Action"));
-        fireEvent.click(getByText(componentContainer, "Confirm action"));
-        mockJSONError();
-        await waitFor(() =>
-            expect(mockSetAlert).toBeCalledWith("Action request failed.")
-        );
-    });
-
-    it("Show success alert on successful action.", async () => {
-        fireEvent.click(getByText(componentContainer, "Action"));
-        fireEvent.click(getByText(componentContainer, "Confirm action"));
-        mockAxios.mockResponse({ status: 200 });
-        await waitFor(() =>
-            expect(mockSetAlert).toBeCalledWith(
-                "Action request succeeded.",
-                "success"
-            )
-        );
-    });
-});