.eslintrc.js

@@ -1,3 +1,6 @@
 module.exports = {
     extends: "eslint-config-reforis",
+    rules: {
+        "import/prefer-default-export": "off",
+    },
 };

.gitlab-ci.yml

@@ -1,44 +1,44 @@
-image: registry.nic.cz/turris/reforis/reforis/reforis-image
+image: node:8-alpine
 
 stages:
-    - test
+  - test
-    - build
+  - build
-    - publish
+  - publish
 
 before_script:
-    - apt-get update && apt-get install -y make
+  - apk add make
-    - npm install
+  - npm install
 
 test:
-    stage: test
+  stage: test
-    script:
+  script:
-        - make test
+    - make test
 
 lint:
-    stage: test
+  stage: test
-    script:
+  script:
-        - make lint
+    - make lint
 
 build:
-    stage: build
+  stage: build
-    script:
+  script:
-        - make pack
+    - make pack
-    artifacts:
+  artifacts:
-        paths:
+    paths:
-            - dist/foris-*.tgz
+      - dist/foris-*.tgz
 
 publish_beta:
-    stage: publish
+  stage: publish
-    only:
+  only:
-        refs:
+    refs:
-            - dev
+      - dev
-    script:
+  script:
-        - make publish-beta
+    - make publish-beta
 
 publish_latest:
-    stage: publish
+  stage: publish
-    only:
+  only:
-        refs:
+    refs:
-            - master
+      - master
-    script:
+  script:
-        - make publish-latest
+    - 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,31 +1,20 @@
-# Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+.PHONY: all install-js watch-js build-js collect-files pack publish-beta publish-latest lint test test-js-update-snapshots create-messages update-messages docs docs-watch clean
-#
-# This is free software, licensed under the GNU General Public License v3.
-# See /LICENSE for more information.
 
-PROJECT="Foris JS"
+DEV_PYTHON=python3.7
-# 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 "    Install dependencies"
-	@echo "make lint"
+	@echo "make watch-js"
-	@echo "    Run linter on the project."
+	@echo "    Compile JS in watch mode."
-	@echo "make test"
+	@echo "make build-js"
-	@echo "    Run tests on the project."
+	@echo "    Compile JS."
-	@echo "make test-js-watch"
+	@echo "make lint-js"
-	@echo "    Run tests on the project in watch mode."
+	@echo "    Run linter"
-	@echo "make test-js-update-snapshots"
+	@echo "make test-js"
-	@echo "    Update snapshots."
+	@echo "    Run tests"
 	@echo "make create-messages"
 	@echo "    Create locale messages (.pot)."
 	@echo "make update-messages"
@@ -37,93 +26,46 @@ all:
 	@echo "make clean"
 	@echo "    Remove python artifacts and virtualenv."
 
-
-# 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
 
+watch-js:
+	npm run build:watch
+build-js:
+	npm run build
 
-# 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)
+	$(VENV_BIN)/pybabel extract -F babel.cfg -o ./translations/forisjs.pot .
-
-.PHONY: update-messages
 update-messages: venv
-	$(VENV_BIN)/pybabel update -i ./translations/forisjs.pot -d ./translations -D forisjs --update-header-comment
+	$(VENV_BIN)/pybabel update -i ./translations/forisjs.pot -d ./translations -D forisjs
 
-
-# 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,5 +1,4 @@
 # foris-js
-
 Set of utils and common React elements for reForis.
 
 ## Publishing package
@@ -7,46 +6,13 @@ Set of utils and common React elements for reForis.
 ### 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.
+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
+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,25 @@
 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",
+            },
+        }],
+    ],
+    env: {
+        development: {
+            ignore: ["**/__tests__/**", "**/__mocks__/**"],
+        },
+        test: {
+            ignore: [],
+        },
+    },
 };

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/intro.md

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

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,20 @@ 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)/)"],
+    transform: {
+        "^.+\\.js$": "babel-jest",
+        "^.+\\.css$": "jest-transform-css",
+    },
 };

package.json

@@ -1,74 +1,74 @@
 {
-    "name": "foris",
+  "name": "foris",
-    "version": "6.7.1",
+  "version": "2.1.0",
-    "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/foris-js.git"
-    },
+  },
-    "keywords": [
+  "keywords": [
-        "foris",
+    "foris",
-        "reforis"
+    "reforis"
-    ],
+  ],
-    "license": "GPL-3.0",
+  "license": "GPL-3.0",
-    "main": "./src/index.js",
+  "main": "index.js",
-    "dependencies": {
+  "dependencies": {
-        "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "axios": "^0.19.0",
-        "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "jest-transform-css": "^2.0.0",
-        "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "moment": "^2.24.0",
-        "@fortawesome/react-fontawesome": "^0.2.2",
+    "moment-timezone": "^0.5.25",
-        "@tanstack/match-sorter-utils": "^8.19.4",
+    "prop-types": "^15.7.2",
-        "@tanstack/react-table": "^8.21.2",
+    "react-datetime": "^2.16.3",
-        "axios": "^1.7.9",
+    "react-router": "^5.0.1",
-        "immutability-helper": "^3.1.1",
+    "react-uid": "^2.2.0"
-        "moment": "^2.30.1",
+  },
-        "qrcode.react": "^4.2.0",
+  "peerDependencies": {
-        "react-datetime": "^3.3.1",
+    "immutability-helper": "3.0.1",
-        "react-uid": "^2.4.0"
+    "react": "16.9.0",
-    },
+    "react-dom": "16.9.0"
-    "peerDependencies": {
+  },
-        "bootstrap": "^5.3.3",
+  "devDependencies": {
-        "prop-types": "15.8.1",
+    "@babel/cli": "^7.4.4",
-        "react": "16.9.0",
+    "@babel/core": "^7.4.5",
-        "react-dom": "16.9.0",
+    "@babel/plugin-proposal-class-properties": "^7.4.4",
-        "react-router-dom": "^5.1.2"
+    "@babel/plugin-syntax-export-default-from": "^7.2.0",
-    },
+    "@babel/plugin-transform-runtime": "^7.4.4",
-    "devDependencies": {
+    "@babel/preset-env": "^7.4.5",
-        "@babel/cli": "^7.26.4",
+    "@babel/preset-react": "^7.0.0",
-        "@babel/core": "^7.26.9",
+    "@fortawesome/fontawesome-free": "^5.11.2",
-        "@babel/plugin-transform-runtime": "^7.26.9",
+    "@testing-library/react": "^8.0.9",
-        "@babel/preset-env": "^7.26.9",
+    "babel-jest": "^24.8.0",
-        "@babel/preset-react": "^7.26.3",
+    "babel-loader": "^8.0.6",
-        "@testing-library/react": "^12.1.5",
+    "babel-plugin-module-resolver": "^3.2.0",
-        "babel-loader": "^9.2.1",
+    "babel-plugin-react-transform": "^3.0.0",
-        "babel-polyfill": "^6.26.0",
+    "babel-polyfill": "^6.26.0",
-        "bootstrap": "^5.3.3",
+    "bootstrap": "^4.3.1",
-        "css-loader": "^7.1.2",
+    "copy-webpack-plugin": "^5.0.4",
-        "eslint": "^8.57.0",
+    "css-loader": "^3.2.0",
-        "eslint-config-reforis": "^2.2.1",
+    "eslint": "^6.1.0",
-        "file-loader": "^6.0.0",
+    "eslint-config-reforis": "^1.0.0",
-        "jest": "^29.7.0",
+    "file-loader": "^4.2.0",
-        "jest-environment-jsdom": "^29.7.0",
+    "immutability-helper": "3.0.1",
-        "jest-mock-axios": "^4.8.0",
+    "jest": "^24.8.0",
-        "moment-timezone": "^0.5.47",
+    "jest-mock-axios": "^3.0.0",
-        "prettier": "^3.5.3",
+    "moment": "^2.24.0",
-        "prop-types": "15.8.1",
+    "moment-timezone": "^0.5.25",
-        "react": "16.9.0",
+    "react": "16.9.0",
-        "react-dom": "16.9.0",
+    "react-dom": "16.9.0",
-        "react-router-dom": "^5.1.2",
+    "react-styleguidist": "^9.1.16",
-        "react-styleguidist": "^12.0.1",
+    "snapshot-diff": "^0.5.1",
-        "snapshot-diff": "^0.10.0",
+    "style-loader": "^1.0.0",
-        "style-loader": "^4.0.0",
+    "webpack": "^4.41.0"
-        "webpack": "^5.98.0"
+  },
-    },
+  "scripts": {
-    "scripts": {
+    "build": "rm -rf dist; babel src --out-dir dist --source-maps inline --copy-files",
-        "lint": "eslint src",
+    "build:watch": "babel src --verbose --watch --out-dir dist --source-maps inline --copy-files",
-        "lint:fix": "eslint --fix src",
+    "lint": "eslint src",
-        "test": "jest",
+    "test": "jest",
-        "test:watch": "jest --watch",
+    "test:watch": "jest --watch",
-        "test:coverage": "jest --coverage --colors",
+    "test:coverage": "jest --coverage --colors",
-        "docs": "npx styleguidist build ",
+    "docs": "npx styleguidist build ",
-        "docs:watch": "styleguidist server"
+    "docs:watch": "styleguidist server"
-    }
+  }
-}
+}

prettier.config.js

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

scripts/collect_files.sh

@@ -1,13 +1,9 @@
 #!/bin/sh
 
 # Collect files
-mkdir -p dist
+npm run build
-cp -rf ./src/* dist
+cp package.json README.md 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/**/__tests__
 rm -rf dist/__mocks__

scripts/publish.sh

@@ -6,7 +6,8 @@ then
     exit 1
 else
     cd dist
-    echo "//registry.npmjs.org/:_authToken=$(echo "$NPM_TOKEN")" > .npmrc
+    # Need to replace "_" with "-" as GitLab CI won't accept secret vars with "-"
+    echo "//registry.npmjs.org/:_authToken=$(echo "$NPM_TOKEN" | tr _ -)" > .npmrc
     echo "unsafe-perm = true" >> ~/.npmrc
     if test "$1" = "beta"
     then

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/alertContext/AlertContext.js

@@ -1,16 +1,15 @@
 /*
- * 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, useContext, useCallback, useMemo } from "react";
+import React, { useState, useContext, useCallback } from "react";
-
 import PropTypes from "prop-types";
 
-import Alert, { ALERT_TYPES } from "../../bootstrap/Alert";
+import { Alert, ALERT_TYPES } from "bootstrap/Alert";
-import Portal from "../../utils/Portal";
+import { Portal } from "utils/Portal";
 
 AlertContextProvider.propTypes = {
     children: PropTypes.oneOfType([
@@ -23,18 +22,11 @@ function AlertContextProvider({ children }) {
     const { AlertContext } = window;
     const [alert, setAlert] = useState(null);
 
-    const setAlertWrapper = useCallback(
+    const setAlertWrapper = useCallback((message, type = ALERT_TYPES.DANGER) => {
-        (message, type = ALERT_TYPES.DANGER) => {
+        setAlert({ message, type });
-            setAlert({ message, type });
+    }, [setAlert]);
-        },
-        [setAlert]
-    );
 
     const dismissAlert = useCallback(() => setAlert(null), [setAlert]);
-    const contextValue = useMemo(
-        () => [setAlertWrapper, dismissAlert],
-        [setAlertWrapper, dismissAlert]
-    );
 
     return (
         <>
@@ -45,8 +37,8 @@ function AlertContextProvider({ children }) {
                     </Alert>
                 </Portal>
             )}
-            <AlertContext.Provider value={contextValue}>
+            <AlertContext.Provider value={[setAlertWrapper, dismissAlert]}>
-                {children}
+                { children }
             </AlertContext.Provider>
         </>
     );

src/alertContext/__tests__/AlertContext.test.js

@@ -20,7 +20,7 @@ function AlertTest() {
             <button onClick={dismissAlert}>Dismiss alert</button>
         </>
     );
-}
+};
 
 describe("AlertContext", () => {
     let componentContainer;
@@ -43,17 +43,14 @@ describe("AlertContext", () => {
         expect(componentContainer).toMatchSnapshot();
     });
 
-    it("should dismiss alert with alert button", async () => {
+    it("should dismiss alert with alert button", () => {
         fireEvent.click(getByText(componentContainer, "Set alert"));
         // Alert is present
         expect(getByText(componentContainer, "Alert content")).toBeDefined();
 
-        fireEvent.click(componentContainer.querySelector(".btn-close"));
+        fireEvent.click(componentContainer.querySelector(".close"));
         // Alert is gone
-        await (() =>
+        expect(queryByText(componentContainer, "Alert content")).toBeNull();
-            expect(
-                queryByText(componentContainer, "Alert content")
-            ).toBeNull());
     });
 
     it("should dismiss alert with external button", () => {

src/alertContext/__tests__/__snapshots__/AlertContext.test.js.snap

@@ -6,14 +6,14 @@ exports[`AlertContext should render alert 1`] = `
     id="alert-container"
   >
     <div
-      class="alert alert-danger alert-fade-in alert-dismissible"
+      class="alert alert-dismissible alert-danger"
-      role="alert"
     >
       <button
-        aria-label="Close"
+        class="close"
-        class="btn-close"
         type="button"
-      />
+      >
+        ×
+      </button>
       Alert content
     </div>
   </div>

src/api/hooks.js

@@ -1,19 +1,17 @@
 /*
- * 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 {
-    API_ACTIONS,
+    useCallback, useEffect, useReducer, useState,
-    API_METHODS,
+} from "react";
-    API_STATE,
+
-    getErrorPayload,
+import { ForisURLs } from "forisUrls";
-    HEADERS,
+import {
-    TIMEOUT,
+    API_ACTIONS, API_METHODS, API_STATE, getErrorPayload, HEADERS, TIMEOUT,
 } from "./utils";
 
 const DATA_METHODS = ["POST", "PATCH", "PUT"];
@@ -25,83 +23,69 @@ function createAPIHook(method) {
             data: null,
         });
 
-        const sendRequest = useCallback(
+        const sendRequest = useCallback(async ({ data, suffix } = {}) => {
-            async ({ data, suffix } = {}) => {
+            const headers = { ...HEADERS };
-                const headers = { ...HEADERS };
+            if (contentType) {
-                if (contentType) {
+                headers["Content-Type"] = 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);
                 }
 
-                dispatch({ type: API_ACTIONS.INIT });
+                // Process request result
-                try {
+                dispatch({
-                    // Prepare request
+                    type: API_ACTIONS.SUCCESS,
-                    const request = API_METHODS[method];
+                    payload: result.data,
-                    const config = {
+                });
-                        timeout: TIMEOUT,
+            } catch (error) {
-                        headers,
+                dispatch({
-                    };
+                    type: API_ACTIONS.FAILURE,
-                    const url = suffix ? `${urlRoot}/${suffix}` : urlRoot;
+                    status: error.response && error.response.status,
-
+                    payload: getErrorPayload(error),
-                    // Make request
+                });
-                    let result;
+            }
-                    if (DATA_METHODS.includes(method)) {
+        }, [urlRoot, contentType]);
-                        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:
+    case API_ACTIONS.INIT:
-            return {
+        return {
-                ...state,
+            ...state,
-                state: API_STATE.SENDING,
+            state: API_STATE.SENDING,
-            };
+        };
-        case API_ACTIONS.SUCCESS:
+    case API_ACTIONS.SUCCESS:
-            return {
+        return {
-                state: API_STATE.SUCCESS,
+            state: API_STATE.SUCCESS,
-                data: action.payload,
+            data: action.payload,
-            };
+        };
-        case API_ACTIONS.FAILURE:
+    case API_ACTIONS.FAILURE:
-            if (action.status === 401) {
+        if (action.status === 403) {
-                window.location.reload();
+            window.location.assign(ForisURLs.login);
-            }
+        }
-
+        return {
-            // Not an API error - should be rethrown.
+            state: API_STATE.ERROR,
-            if (
+            data: action.payload,
-                action.payload &&
+        };
-                action.payload.stack &&
+    default:
-                action.payload.message
+        throw new Error();
-            ) {
-                throw action.payload;
-            }
-
-            return {
-                state: API_STATE.ERROR,
-                data: action.payload,
-            };
-        default:
-            throw new Error();
     }
 }
 
@@ -111,9 +95,11 @@ const useAPIPatch = createAPIHook("PATCH");
 const useAPIPut = createAPIHook("PUT");
 const useAPIDelete = createAPIHook("DELETE");
 
-/* eslint-disable default-param-last */
+export {
-function useAPIPolling(endpoint, delay = 1000, until) {
+    useAPIGet, useAPIPost, useAPIPatch, useAPIPut, useAPIDelete,
-    // delay ms
+};
+
+export function useAPIPolling(endpoint, delay = 1000, until) { // delay ms
     const [state, setState] = useState({ state: API_STATE.INIT });
     const [getResponse, get] = useAPIGet(endpoint);
 
@@ -132,12 +118,3 @@ function useAPIPolling(endpoint, delay = 1000, until) {
 
     return [state];
 }
-
-export {
-    useAPIGet,
-    useAPIPost,
-    useAPIPatch,
-    useAPIPut,
-    useAPIDelete,
-    useAPIPolling,
-};

src/api/utils.js

@@ -1,5 +1,5 @@
 /*
- * 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.
@@ -11,10 +11,9 @@ 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 TIMEOUT = 5000;
 
 export const API_ACTIONS = {
     INIT: 1,
@@ -44,10 +43,8 @@ function getCookie(name) {
         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}=`) {
+            if (cookie.substring(0, name.length + 1) === (`${name}=`)) {
-                cookieValue = decodeURIComponent(
+                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-                    cookie.substring(name.length + 1)
-                );
                 break;
             }
         }
@@ -57,7 +54,7 @@ function getCookie(name) {
 
 export function getErrorPayload(error) {
     if (error.response) {
-        if (error.response.status === 401) {
+        if (error.response.status === 403) {
             return _("The session is expired. Please log in again.");
         }
         return getJSONErrorMessage(error);
@@ -68,8 +65,9 @@ export function getErrorPayload(error) {
     if (error.request) {
         return _("No response received.");
     }
-    // Return original error because it's not directly related to API request/response.
+    /* eslint no-console: "off" */
-    return error;
+    console.error(error);
+    return _("An unknown error occurred. Check the console for more info.");
 }
 
 export function getJSONErrorMessage(error) {

src/bootstrap/Alert.js

@@ -1,16 +1,13 @@
 /*
- * 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",
@@ -38,44 +35,13 @@ Alert.defaultProps = {
     type: ALERT_TYPES.DANGER,
 };
 
-function Alert({ type, onDismiss, children }) {
+export function Alert({
-    const alertRef = useRef();
+    type, onDismiss, children,
-    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"} ${
-                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,52 @@
 /*
- * 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 { 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={`form-group ${useDefaultSize ? formFieldsSize : ""}`.trim()}>
-            <input
+            <div className="custom-control custom-checkbox ">
-                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}>
-            {helpText && (
+                    {label}
-                <div className="form-text">
+                    {helpText && <small className="form-text text-muted">{helpText}</small>}
-                    <small>{helpText}</small>
+                </label>
-                </div>
+            </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={event =>setValue(event.target.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,17 @@
 /*
- * 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 moment from "moment/moment";
 import "react-datetime/css/react-datetime.css";
-import "./DataTimeInput.css";
 
-import Input from "./Input";
+import { Input } from "./Input";
 
 DataTimeInput.propTypes = {
     /** Field label. */
@@ -38,32 +36,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 +62,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,12 +1,11 @@
 /*
- * 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";
 
 DownloadButton.propTypes = {
@@ -22,17 +21,14 @@ DownloadButton.defaultProps = {
     className: "btn-primary",
 };
 
-function DownloadButton({ href, className, children, ...props }) {
+export function DownloadButton({ href, className, children }) {
     return (
         <a
             href={href}
             className={`btn ${className}`.trim()}
-            {...props}
             download
         >
             {children}
         </a>
     );
 }
-
-export default DownloadButton;

src/bootstrap/DownloadButton.md

@@ -1,9 +1,6 @@
 Hyperlink with apperance of a button.
 
-It has `download` attribute, which prevents closing WebSocket connection on
+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.
-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,9 @@
 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 +22,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={event =>setEmail(event.target.value)}
     />
-    <Button type="submit">Try to submit</Button>
+    <button type="submit">Try to submit</button>
-</form>;
+</form>
 ```

src/bootstrap/FileInput.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.
@@ -8,8 +8,7 @@
 import React from "react";
 
 import PropTypes from "prop-types";
-
+import { Input } from "./Input";
-import Input from "./Input";
 
 FileInput.propTypes = {
     /** Field label. */
@@ -20,11 +19,9 @@ FileInput.propTypes = {
     helpText: PropTypes.string,
     /** Email value. */
     value: PropTypes.string,
-    /** Allow selecting multiple files. */
-    multiple: PropTypes.bool,
 };
 
-function FileInput({ ...props }) {
+export function FileInput({ ...props }) {
     return (
         <Input
             type="file"
@@ -35,5 +32,3 @@ function FileInput({ ...props }) {
         />
     );
 }
-
-export default FileInput;

src/bootstrap/FileInput.md

@@ -1,48 +1,15 @@
-Bootstrap component for file input. Includes label and has predefined sizes and
+Bootstrap component for file input. Includes label and has predefined sizes and structure for using in foris forms. 
-structure for using in foris forms.
 
 All additional `props` are passed to the `<input type="file">` HTML component.
 
 ```js
-import { useState } from "react";
+import {useState} from 'react';
-
 const [files, setFiles] = useState([]);
 
-// Note that files is not an array but FileList.
+<FileInput
-const label = files.length === 1 ? files[0].name : "Choose file";
+    files={files}
-
+    label="Some file"
-<form className="col">
+    helpText="Will be uploaded"
-    <FileInput
+    onChange={event =>setFiles(event.target.files)}
-        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 PropTypes from "prop-types";
 import { useUID } from "react-uid";
+import PropTypes from "prop-types";
 
-/** 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,
@@ -79,4 +25,27 @@ Input.propTypes = {
     groupClassName: PropTypes.string,
 };
 
-export default Input;
+/** Base bootstrap input component. */
+export function Input({
+    type, label, helpText, error, className, children, labelClassName, groupClassName, ...props
+}) {
+    const uid = useUID();
+    const inputClassName = `form-control ${className || ""} ${(error ? "is-invalid" : "")}`.trim();
+    return (
+        <div className={`form-group ${formFieldsSize}`}>
+            <label className={labelClassName} htmlFor={uid}>{label}</label>
+            <div className={`input-group ${groupClassName || ""}`.trim()}>
+                <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>
+    );
+}

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,21 @@
 /*
- * 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, { 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 { useClickOutside } from "utils/hooks";
-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 +24,18 @@ 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));
+    useClickOutside(dialogRef, () => setShown(false));
-    useFocusTrap(modalRef, shown);
-
-    useEffect(() => {
-        const handleEsc = (event) => {
-            if (event.keyCode === 27) {
-                setShown(false);
-            }
-        };
-        window.addEventListener("keydown", handleEsc);
-
-        return () => {
-            window.removeEventListener("keydown", handleEsc);
-        };
-    }, [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 modal-dialog-centered" 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 +45,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 +77,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,33 @@
 Bootstrap modal component.
 
-It's required to have an element `<div id={"modal-container"}/>` somewhere on
+it's required to have an element `<div id={"modal-container"}/>` somewhere on the page since modals are rendered in portals.
-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" />
+    <div id="modal-container"/>
 ```
 
-```js
+I have no idea why example doesn't work here but you can investigate HTML code and Foris project.
-import { ModalHeader, ModalBody, ModalFooter } from "./Modal";
 
-import { useState } from "react";
+```js
+import {ModalHeader, ModalBody, ModalFooter} from './Modal';
+
+import {useState} from 'react';
 const [shown, setShown] = useState(false);
 
 <>
-    <Modal setShown={setShown} shown={shown} size="sm">
+    <Modal setShown={setShown} 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 className='btn btn-secondary' onClick={()=>setShown(true)}>
         Show modal
     </button>
-</>;
+</>
 ```

src/bootstrap/NumberInput.css

@@ -4,7 +4,7 @@ input[type="number"] {
     appearance: textfield;
 }
 
-input[type="number"]::-webkit-inner-spin-button,
+input[type=number]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
+input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;
 }

src/bootstrap/NumberInput.js

@@ -1,18 +1,15 @@
 /*
- * 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 { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import PropTypes from "prop-types";
 
-import Input from "./Input";
+import { useConditionalTimeout } from "utils/hooks";
-import { useConditionalTimeout } from "../utils/hooks";
+import { Input } from "./Input";
 import "./NumberInput.css";
 
 NumberInput.propTypes = {
@@ -23,10 +20,13 @@ NumberInput.propTypes = {
     /** Help text message. */
     helpText: PropTypes.string,
     /** Number value. */
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    value: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number,
+    ]),
     /** Function called when value changes. */
     onChange: PropTypes.func.isRequired,
-    /** Additional description displayed to the right of input value. */
+    /** Additional description dispaled to the right of input value. */
     inlineText: PropTypes.string,
 };
 
@@ -34,77 +34,39 @@ NumberInput.defaultProps = {
     value: 0,
 };
 
-function NumberInput({ onChange, inlineText, value, ...props }) {
+export function NumberInput({
+    onChange, inlineText, value, ...props
+}) {
     function updateValue(initialValue, difference) {
         onChange({ target: { value: initialValue + difference } });
     }
 
-    const enableIncrease = useConditionalTimeout(
+    const enableIncrease = useConditionalTimeout({ callback: updateValue }, value, 1);
-        { callback: updateValue },
+    const enableDecrease = useConditionalTimeout({ callback: updateValue }, value, -1);
-        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 && (
+            <div className="input-group-append">
-                <span className="input-group-text">{inlineText}</span>
+                {inlineText && <p className="input-group-text">{inlineText}</p>}
-            )}
+                <button
-            <button
+                    type="button"
-                type="button"
+                    className="btn btn-outline-secondary"
-                className="btn btn-outline-secondary"
+                    onMouseDown={() => enableIncrease(true)}
-                onMouseDown={() => enableIncrease(true)}
+                    onMouseUp={() => enableIncrease(false)}
-                onMouseUp={() => enableIncrease(false)}
+                    aria-label="Increase"
-                onMouseLeave={() => enableIncrease(false)}
+                >
-                onTouchStart={() => enableIncrease(true)}
+                    <i className="fas fa-plus" />
-                onTouchEnd={() => enableIncrease(false)}
+                </button>
-                onTouchCancel={() => enableIncrease(false)}
+                <button
-                onKeyDown={(event) => handleKeyDown(event, enableIncrease)}
+                    type="button"
-                onKeyUp={(event) => handleKeyUp(event, enableIncrease)}
+                    className="btn btn-outline-secondary"
-                onBlur={() => enableIncrease(false)}
+                    onMouseDown={() => enableDecrease(true)}
-                title={_("Increase value. Hint: Hold to increase faster.")}
+                    onMouseUp={() => enableDecrease(false)}
-                aria-label={_("Increase value. Hint: Hold to increase faster.")}
+                    aria-label="Decrease"
-            >
+                >
-                <FontAwesomeIcon icon={faPlus} />
+                    <i className="fas fa-minus" />
-            </button>
+                </button>
-            <button
+            </div>
-                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={event =>setValue(event.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={event =>setValue(event.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,15 @@
 /*
- * 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 Radio from "./Radio";
+import { formFieldsSize } from "./constants";
 
 RadioSet.propTypes = {
     /** Name attribute of the input HTML tag. */
@@ -18,28 +17,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 +44,43 @@ 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}`}>
-            {label && (
+            {label && <label htmlFor={uid} className="d-block">{label}</label>}
-                <label htmlFor={uid} className="d-block">
-                    {label}
-                </label>
-            )}
             {radios}
-            {helpText && (
+            {helpText && <small className="form-text text-muted">{helpText}</small>}
-                <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,
+};
+
+export function Radio({
+    label, id, helpText, ...props
+}) {
+    return (
+        <>
+            <div className={`custom-control custom-radio ${!helpText ? "custom-control-inline" : ""}`.trim()}>
+                <input
+                    id={id}
+                    className="custom-control-input"
+                    type="radio"
+
+                    {...props}
+                />
+                <label className="custom-control-label" htmlFor={id}>{label}</label>
+                {helpText && <small className="form-text text-muted mt-0 mb-3">{helpText}</small>}
+            </div>
+        </>
+    );
+}

src/bootstrap/RadioSet.md

@@ -1,16 +1,15 @@
-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 +17,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,12 +1,11 @@
 /*
- * 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";
 
@@ -16,35 +15,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,12 +23,12 @@ Spinner.defaultProps = {
     fullScreen: false,
 };
 
-export function Spinner({ fullScreen, children, className }) {
+export function Spinner({
+    fullScreen, children, className,
+}) {
     if (!fullScreen) {
         return (
-            <div
+            <div className={`spinner-wrapper ${className || "my-3 text-center"}`}>
-                className={`spinner-wrapper ${className || "my-3 text-center"}`}
-            >
                 <SpinnerElement>{children}</SpinnerElement>
             </div>
         );
@@ -62,9 +59,7 @@ export function SpinnerElement({ small, className, children }) {
     return (
         <>
             <div
-                className={`spinner-border ${
+                className={`spinner-border ${small ? "spinner-border-sm" : ""} ${className || ""}`.trim()}
-                    small ? "spinner-border-sm" : ""
-                } ${className || ""}`.trim()}
                 role="status"
             >
                 <span className="sr-only" />

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,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 PropTypes from "prop-types";
 
-import Input from "./Input";
+import { Input } from "./Input";
 
-function TextInput({ ...props }) {
+export const TextInput = ({ ...props }) => <Input type="text" {...props} />;
-    return <Input type="text" {...props} />;
-}
 
 TextInput.propTypes = {
     /** Field label. */
@@ -23,5 +20,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

@@ -9,15 +9,11 @@ import React from "react";
 
 import { render } from "customTestRender";
 
-import DownloadButton from "../DownloadButton";
+import { DownloadButton } from "../DownloadButton";
 
 describe("<DownloadButton />", () => {
     it("should have download attribute", () => {
-        const { container } = render(
+        const { container } = render(<DownloadButton href="http://example.com">Test Button</DownloadButton>);
-            <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,9 +7,9 @@
 
 import React from "react";
 
-import { render, fireEvent, getByLabelText, waitFor } from "customTestRender";
+import { render, fireEvent, getByLabelText, wait } from "customTestRender";
 
-import NumberInput from "../NumberInput";
+import { NumberInput } from "../NumberInput";
 
 describe("<NumberInput/>", () => {
     const onChangeMock = jest.fn();
@@ -32,18 +32,14 @@ describe("<NumberInput/>", () => {
     });
 
     it("Increase number with button", async () => {
-        const increaseButton = getByLabelText(componentContainer, /Increase/);
+        const increaseButton = getByLabelText(componentContainer, "Increase");
         fireEvent.mouseDown(increaseButton);
-        await waitFor(() =>
+        await wait(() => expect(onChangeMock).toHaveBeenCalledWith({"target": {"value": 2}}));
-            expect(onChangeMock).toHaveBeenCalledWith({ target: { value: 2 } })
-        );
     });
 
     it("Decrease number with button", async () => {
-        const decreaseButton = getByLabelText(componentContainer, /Decrease/);
+        const decreaseButton = getByLabelText(componentContainer, "Decrease");
         fireEvent.mouseDown(decreaseButton);
-        await waitFor(() =>
+        await wait(() => expect(onChangeMock).toHaveBeenCalledWith({"target": {"value": 0}}));
-            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,55 @@
 
 exports[`<Checkbox/> Render checkbox 1`] = `
 <div
-  class="mb-3 form-check"
+  class="form-group col-sm-12 offset-lg-1 col-lg-10"
 >
-  <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 "
   >
-    <small>
+    <input
-      Some help text
+      checked=""
-    </small>
+      class="custom-control-input"
+      id="1"
+      type="checkbox"
+    />
+    <label
+      class="custom-control-label"
+      for="1"
+    >
+      Test label
+      <small
+        class="form-text text-muted"
+      >
+        Some help text
+      </small>
+    </label>
   </div>
 </div>
 `;
 
 exports[`<Checkbox/> Render uncheked checkbox 1`] = `
 <div
-  class="mb-3 form-check"
+  class="form-group col-sm-12 offset-lg-1 col-lg-10"
 >
-  <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 "
   >
-    <small>
+    <input
-      Some help text
+      class="custom-control-input"
-    </small>
+      id="1"
+      type="checkbox"
+    />
+    <label
+      class="custom-control-label"
+      for="1"
+    >
+      Test label
+      <small
+        class="form-text text-muted"
+      >
+        Some help text
+      </small>
+    </label>
   </div>
 </div>
 `;

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

@@ -2,10 +2,9 @@
 
 exports[`<NumberInput/> Render number input 1`] = `
 <div
-  class="mb-3"
+  class="form-group col-sm-12 offset-lg-1 col-lg-10"
 >
   <label
-    class="form-label"
     for="1"
   >
     Test label
@@ -19,33 +18,33 @@ exports[`<NumberInput/> Render number input 1`] = `
       type="number"
       value="1"
     />
-    <button
+    <div
-      aria-label="Increase value. Hint: Hold to increase faster."
+      class="input-group-append"
-      class="btn btn-outline-secondary"
-      title="Increase value. Hint: Hold to increase faster."
-      type="button"
     >
-      <i
+      <button
-        class="fa"
+        aria-label="Increase"
-      />
+        class="btn btn-outline-secondary"
-    </button>
+        type="button"
-    <button
+      >
-      aria-label="Decrease value. Hint: Hold to decrease faster."
+        <i
-      class="btn btn-outline-secondary"
+          class="fas fa-plus"
-      title="Decrease value. Hint: Hold to decrease faster."
+        />
-      type="button"
+      </button>
-    >
+      <button
-      <i
+        aria-label="Decrease"
-        class="fa"
+        class="btn btn-outline-secondary"
-      />
+        type="button"
-    </button>
+      >
+        <i
+          class="fas fa-minus"
+        />
+      </button>
+    </div>
   </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__/PasswordInput.test.js.snap

@@ -2,10 +2,9 @@
 
 exports[`<PasswordInput/> Render password input 1`] = `
 <div
-  class="mb-3"
+  class="form-group col-sm-12 offset-lg-1 col-lg-10"
 >
   <label
-    class="form-label"
     for="1"
   >
     Test label
@@ -14,19 +13,17 @@ exports[`<PasswordInput/> Render password input 1`] = `
     class="input-group"
   >
     <input
-      autocomplete="current-password"
+      autocomplete="new-password"
       class="form-control"
       id="1"
       type="password"
       value="Some password"
     />
   </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__/RadioSet.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`<RadioSet/> Render radio set 1`] = `
 <div
-  class="mb-3"
+  class="form-group col-sm-12 offset-lg-1 col-lg-10"
 >
   <label
     class="d-block"
@@ -11,63 +11,61 @@ exports[`<RadioSet/> Render radio set 1`] = `
     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,10 +2,9 @@
 
 exports[`<TextInput/> Render text input 1`] = `
 <div
-  class="mb-3"
+  class="form-group col-sm-12 offset-lg-1 col-lg-10"
 >
   <label
-    class="form-label"
     for="1"
   >
     Test label
@@ -20,12 +19,10 @@ exports[`<TextInput/> Render text input 1`] = `
       value="Some text"
     />
   </div>
-  <div
+  <small
-    class="form-text"
+    class="form-text text-muted"
   >
-    <small>
+    Some help text
-      Some help text
+  </small>
-    </small>
-  </div>
 </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/RebootButton.js

@@ -0,0 +1,77 @@
+/*
+ * 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, useEffect } from "react";
+import PropTypes from "prop-types";
+
+import { useAPIPost } from "api/hooks";
+import { API_STATE } from "api/utils";
+import { ForisURLs } from "forisUrls";
+
+import { Button } from "bootstrap/Button";
+import {
+    Modal, ModalHeader, ModalBody, ModalFooter,
+} from "bootstrap/Modal";
+import { useAlert } from "alertContext/AlertContext";
+
+RebootButton.propTypes = {
+    forisFormSize: PropTypes.bool,
+};
+
+export function RebootButton(props) {
+    const [triggered, setTriggered] = useState(false);
+    const [modalShown, setModalShown] = useState(false);
+    const [triggerRebootStatus, triggerReboot] = useAPIPost(ForisURLs.reboot);
+
+    const [setAlert] = useAlert();
+    useEffect(() => {
+        if (triggerRebootStatus.state === API_STATE.ERROR) {
+            setAlert(_("Reboot request failed."));
+        }
+    });
+
+    function rebootHandler() {
+        setTriggered(true);
+        triggerReboot();
+        setModalShown(false);
+    }
+
+    return (
+        <>
+            <RebootModal shown={modalShown} setShown={setModalShown} onReboot={rebootHandler} />
+            <Button
+                className="btn-danger"
+                loading={triggered}
+                disabled={triggered}
+                onClick={() => setModalShown(true)}
+
+                {...props}
+            >
+                {_("Reboot")}
+            </Button>
+        </>
+    );
+}
+
+RebootModal.propTypes = {
+    shown: PropTypes.bool.isRequired,
+    setShown: PropTypes.func.isRequired,
+    onReboot: PropTypes.func.isRequired,
+};
+
+function RebootModal({ shown, setShown, onReboot }) {
+    return (
+        <Modal shown={shown} setShown={setShown}>
+            <ModalHeader setShown={setShown} title={_("Reboot confirmation")} />
+            <ModalBody><p>{_("Are you sure you want to restart the router?")}</p></ModalBody>
+            <ModalFooter>
+                <Button onClick={() => setShown(false)}>{_("Cancel")}</Button>
+                <Button className="btn-danger" onClick={onReboot}>{_("Confirm reboot")}</Button>
+            </ModalFooter>
+        </Modal>
+    );
+}

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 };