@firedesktop/react-base 2.1.24 → 3.0.0

package/dist/utils/labels/LanguageReturner.js

@@ -1,70 +1,71 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useEffect } from 'react';
-import LanguageManager from './LanguageManager';
-export default function LanguageReturner(_a) {
-    var labels = _a.labels, language = _a.language, onLanguageLoad = _a.onLanguageLoad, path = _a.path;
-    var loadLabels = LanguageManager().loadLabels;
-    var fullPath = "".concat(path, "/").concat(language, ".json");
-    useEffect(function () {
-        function justAsync() {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            if (!(!labels || !labels.language || labels.language !== language)) return [3, 2];
-                            console.log("Loading Language Labels for this Path: ".concat(path, " in this fullpath: ").concat(fullPath));
-                            return [4, loadLabels(fullPath).then(function (response) {
-                                    console.log("Loaded Language Labels for this Path: ".concat(path, " in this fullpath: ").concat(fullPath), response);
-                                    onLanguageLoad(response);
-                                }).catch(function (err) {
-                                    console.error("Problem loading the Path: ".concat(path, " Language Labels in this fullpath: ").concat(fullPath));
-                                })];
-                        case 1:
-                            _a.sent();
-                            _a.label = 2;
-                        case 2: return [2];
-                    }
-                });
-            });
-        }
-        justAsync();
-    }, [language]);
-    return (_jsx(React.Fragment, {}));
-}
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect } from 'react';
+import Logger from '../Logger';
+import LanguageManager from './LanguageManager';
+export default function LanguageReturner(_a) {
+    var labels = _a.labels, language = _a.language, onLanguageLoad = _a.onLanguageLoad, path = _a.path;
+    var loadLabels = LanguageManager().loadLabels;
+    var fullPath = "".concat(path, "/").concat(language, ".json");
+    useEffect(function () {
+        function justAsync() {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!(!labels || !labels.language || labels.language !== language)) return [3, 2];
+                            Logger.debug("Loading Language Labels for this Path: ".concat(path, " in this fullpath: ").concat(fullPath));
+                            return [4, loadLabels(fullPath).then(function (response) {
+                                    Logger.debug("Loaded Language Labels for this Path: ".concat(path, " in this fullpath: ").concat(fullPath), response);
+                                    onLanguageLoad(response);
+                                }).catch(function (err) {
+                                    Logger.error("Problem loading the Path: ".concat(path, " Language Labels in this fullpath: ").concat(fullPath));
+                                })];
+                        case 1:
+                            _a.sent();
+                            _a.label = 2;
+                        case 2: return [2];
+                    }
+                });
+            });
+        }
+        justAsync();
+    }, [language]);
+    return (_jsx(React.Fragment, {}));
+}
 //# sourceMappingURL=LanguageReturner.js.map

package/dist/utils/labels/LanguageReturner.js.map

@@ -1 +1 @@
-{"version":3,"file":"LanguageReturner.js","sourceRoot":"","sources":["../../../src/lib/utils/labels/LanguageReturner.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAYhD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAAoE;QAAlE,MAAM,YAAA,EAAE,QAAQ,cAAA,EAAE,cAAc,oBAAA,EAAE,IAAI,UAAA;IACrE,IAAA,UAAU,GAAK,eAAe,EAAE,WAAtB,CAAuB;IAEzC,IAAM,QAAQ,GAAG,UAAG,IAAI,cAAI,QAAQ,UAAO,CAAC;IAG5C,SAAS,CAAC;QACN,SAAe,SAAS;;;;;iCAChB,CAAA,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,QAAQ,IAAI,MAAM,CAAC,QAAQ,KAAK,QAAQ,CAAA,EAA3D,cAA2D;4BAC3D,OAAO,CAAC,GAAG,CAAC,iDAA0C,IAAI,gCAAsB,QAAQ,CAAE,CAAC,CAAC;4BAC5F,WAAM,UAAU,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,UAAC,QAAa;oCAC1C,OAAO,CAAC,GAAG,CAAC,gDAAyC,IAAI,gCAAsB,QAAQ,CAAE,EAAE,QAAQ,CAAC,CAAC;oCACrG,cAAc,CAAC,QAAQ,CAAC,CAAC;gCAC7B,CAAC,CAAC,CAAC,KAAK,CAAC,UAAC,GAAQ;oCACd,OAAO,CAAC,KAAK,CAAC,oCAA6B,IAAI,gDAAsC,QAAQ,CAAE,CAAC,CAAC;gCACrG,CAAC,CAAC,EAAA;;4BALF,SAKE,CAAC;;;;;;SAEV;QACD,SAAS,EAAE,CAAC;IAEhB,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,CACH,KAAC,KAAK,CAAC,QAAQ,KACE,CACpB,CAAC;AACN,CAAC"}
+{"version":3,"file":"LanguageReturner.js","sourceRoot":"","sources":["../../../src/lib/utils/labels/LanguageReturner.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAYhD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAAoE;QAAlE,MAAM,YAAA,EAAE,QAAQ,cAAA,EAAE,cAAc,oBAAA,EAAE,IAAI,UAAA;IACrE,IAAA,UAAU,GAAK,eAAe,EAAE,WAAtB,CAAuB;IAEzC,IAAM,QAAQ,GAAG,UAAG,IAAI,cAAI,QAAQ,UAAO,CAAC;IAG5C,SAAS,CAAC;QACN,SAAe,SAAS;;;;;iCAChB,CAAA,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,QAAQ,IAAI,MAAM,CAAC,QAAQ,KAAK,QAAQ,CAAA,EAA3D,cAA2D;4BAC3D,MAAM,CAAC,KAAK,CAAC,iDAA0C,IAAI,gCAAsB,QAAQ,CAAE,CAAC,CAAC;4BAC7F,WAAM,UAAU,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,UAAC,QAAa;oCAC1C,MAAM,CAAC,KAAK,CAAC,gDAAyC,IAAI,gCAAsB,QAAQ,CAAE,EAAE,QAAQ,CAAC,CAAC;oCACtG,cAAc,CAAC,QAAQ,CAAC,CAAC;gCAC7B,CAAC,CAAC,CAAC,KAAK,CAAC,UAAC,GAAQ;oCACd,MAAM,CAAC,KAAK,CAAC,oCAA6B,IAAI,gDAAsC,QAAQ,CAAE,CAAC,CAAC;gCACpG,CAAC,CAAC,EAAA;;4BALF,SAKE,CAAC;;;;;;SAEV;QACD,SAAS,EAAE,CAAC;IAEhB,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,CACH,KAAC,KAAK,CAAC,QAAQ,KACE,CACpB,CAAC;AACN,CAAC"}

package/dist/utils/labels/index.d.ts

@@ -1,4 +1,4 @@
-import LanguageLoader from './LanguageLoader';
-import LanguageManager from './LanguageManager';
-import LanguageReturner from './LanguageReturner';
-export { LanguageLoader, LanguageManager, LanguageReturner };
+import LanguageLoader from './LanguageLoader';
+import LanguageManager from './LanguageManager';
+import LanguageReturner from './LanguageReturner';
+export { LanguageLoader, LanguageManager, LanguageReturner };

package/dist/utils/labels/index.js

@@ -1,5 +1,5 @@
-import LanguageLoader from './LanguageLoader';
-import LanguageManager from './LanguageManager';
-import LanguageReturner from './LanguageReturner';
-export { LanguageLoader, LanguageManager, LanguageReturner };
+import LanguageLoader from './LanguageLoader';
+import LanguageManager from './LanguageManager';
+import LanguageReturner from './LanguageReturner';
+export { LanguageLoader, LanguageManager, LanguageReturner };
 //# sourceMappingURL=index.js.map

package/docs/APP_ICON.md

@@ -0,0 +1,82 @@
+# AppIcon
+
+SVG icon component with 40+ built-in icon variants.
+
+## Import
+
+```javascript
+import { Components } from '@firedesktop/react-base';
+const { AppIcon } = Components;
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `name` | `string` (union) | Yes | -- | Icon identifier (see list below) |
+| `className` | `string` | Yes | -- | CSS class applied to the SVG `<path>` elements |
+| `iconClassName` | `string` | Yes | -- | CSS class applied to the `<svg>` element |
+| `iconHeight` | `number` | No | varies | SVG height in pixels |
+| `iconWidth` | `number` | No | varies | SVG width in pixels |
+| `fill` | `string` | No | `'none'` | SVG fill color |
+| `stroke` | `string` | No | -- | SVG stroke color |
+| `onClick` | `(event: React.MouseEvent<SVGSVGElement>) => void` | No | -- | Click handler |
+| `ref` | `React.LegacyRef<SVGSVGElement>` | No | -- | Ref to the SVG element |
+
+## Available Icons
+
+### Actions
+`add`, `edit`, `delete`, `list`, `link`, `unlink`, `shrink`, `upload`, `download`, `share`
+
+### Navigation
+`arrow-first`, `arrow-prev`, `arrow-next`, `arrow-last`, `expand`, `backicon`, `home`
+
+### Form / Auth
+`user`, `password`
+
+### Status
+`tickTrue`, `tickFalse`, `tickStep`, `circle`
+
+### Domain
+`document`, `company`, `plantMonitor`, `plantMissing`, `contact`, `userManagement`, `configurations`, `documentTemplate`, `registry`, `material`, `supply`, `delivery`, `table`
+
+### UI
+`eye`, `search`, `logo-main`, `unPin`, `Pin`, `pin-tilted`
+
+## Usage
+
+```jsx
+<AppIcon
+  name="edit"
+  className="primary-svg"
+  iconClassName="my-icon"
+  iconWidth={24}
+  iconHeight={24}
+  fill="none"
+  stroke="#0057ff"
+/>
+```
+
+### With click handler
+
+```jsx
+<AppIcon
+  name="delete"
+  className="danger-svg"
+  iconClassName="action-icon"
+  onClick={() => handleDelete(item.id)}
+/>
+```
+
+### Styling with CSS utility classes
+
+The library provides utility classes in `base.css` for coloring icons:
+
+```jsx
+{/* Fill-based coloring */}
+<AppIcon name="tickTrue" className="success-svg" iconClassName="" />
+<AppIcon name="tickFalse" className="danger-svg" iconClassName="" />
+
+{/* Stroke-based coloring */}
+<AppIcon name="edit" className="primary-svg-stroke" iconClassName="" />
+```

package/docs/APP_INPUT.md

@@ -0,0 +1,81 @@
+# AppInput
+
+Input wrapper component with icon support, built on Bootstrap form classes.
+
+## Import
+
+```javascript
+import { Components } from '@firedesktop/react-base';
+const { AppIcon, AppInput } = Components;
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `appIcon` | `React.ReactNode` | Yes | -- | Icon element rendered alongside the input |
+| `type` | `AppInputType_Type` | No | `'text'` | HTML input type |
+| `value` | `string \| number` | No | -- | Controlled input value |
+| `placeholder` | `string` | No | -- | Placeholder text |
+| `onChange` | `(event: React.ChangeEvent<HTMLInputElement>) => void` | No | -- | Change handler |
+| `onKeyUp` | `(event: React.KeyboardEvent<HTMLInputElement>) => void` | No | -- | Key up handler |
+| `className` | `string` | No | -- | CSS class for the `<input>` element |
+| `classNameWrapper` | `string` | No | -- | CSS class appended to the wrapper `<div>` |
+| `id` | `string` | No | -- | Input ID attribute |
+| `name` | `string` | No | -- | Input name attribute |
+| `autoFocus` | `boolean` | No | `false` | Auto focus on mount |
+| `autoComplete` | `boolean` | No | `true` | Browser autocomplete (`on`/`off`) |
+| `ariadescribedby` | `string` | No | -- | ARIA described-by attribute |
+| `ref` | `React.LegacyRef<HTMLInputElement>` | No | -- | Ref to the input element |
+
+### Supported input types
+
+`button`, `checkbox`, `color`, `date`, `datetime-local`, `email`, `file`, `hidden`, `image`, `month`, `number`, `password`, `radio`, `range`, `reset`, `search`, `submit`, `tel`, `text`, `url`, `week`
+
+## Usage
+
+```jsx
+<AppInput
+  appIcon={<AppIcon name="search" className="primary-svg" iconClassName="" />}
+  placeholder="Search..."
+  value={query}
+  onChange={(e) => setQuery(e.target.value)}
+/>
+```
+
+### Password input
+
+```jsx
+<AppInput
+  appIcon={<AppIcon name="password" className="primary-svg" iconClassName="" />}
+  type="password"
+  placeholder="Enter password"
+  autoComplete={false}
+/>
+```
+
+### With key handler
+
+```jsx
+<AppInput
+  appIcon={<AppIcon name="search" className="primary-svg" iconClassName="" />}
+  type="text"
+  placeholder="Search and press Enter"
+  value={query}
+  onChange={(e) => setQuery(e.target.value)}
+  onKeyUp={(e) => {
+    if (e.key === 'Enter') handleSearch();
+  }}
+/>
+```
+
+## HTML Output
+
+```html
+<div class="form-group AppInput_form {classNameWrapper}">
+  <input class="form-control {className}" type="text" ... />
+  <!-- appIcon rendered here -->
+</div>
+```
+
+Requires Bootstrap `form-group` and `form-control` classes (peer dependency).

package/docs/APP_PAGINATION.md

@@ -0,0 +1,61 @@
+# AppPagination
+
+Bootstrap-based pagination component with smart page range calculation.
+
+## Import
+
+```javascript
+import { Components } from '@firedesktop/react-base';
+const { AppPagination } = Components;
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `activePage` | `number` | Yes | -- | Current active page (1-based) |
+| `totalItems` | `number` | Yes | -- | Total number of items across all pages |
+| `itemsPerPage` | `number` | Yes | -- | Number of items displayed per page |
+| `onPageChange` | `(page: number) => void` | Yes | -- | Callback when page changes |
+| `maxSize` | `number` | No | `5` | Maximum number of page buttons visible |
+| `pageFontSize` | `number` | No | `14` | Font size for page numbers in pixels |
+| `className` | `string` | No | -- | CSS class for the `<nav>` element |
+
+## Usage
+
+```jsx
+const [page, setPage] = useState(1);
+const itemsPerPage = 10;
+const totalItems = 87;
+
+<AppPagination
+  activePage={page}
+  totalItems={totalItems}
+  itemsPerPage={itemsPerPage}
+  onPageChange={(newPage) => setPage(newPage)}
+/>
+```
+
+### Custom page window size
+
+```jsx
+<AppPagination
+  activePage={page}
+  totalItems={200}
+  itemsPerPage={25}
+  maxSize={3}
+  onPageChange={setPage}
+/>
+```
+
+## Behavior
+
+- Shows first, previous, next, and last navigation arrows (using `AppIcon`)
+- Displays a centered window of page numbers around the active page
+- Automatically adjusts the window when near the first or last page
+- Active page is highlighted with Bootstrap's `.active` class
+- Navigation arrows are disabled when at boundaries (first/last page)
+
+## Dependencies
+
+Requires Bootstrap `pagination` CSS classes (peer dependency).

package/docs/CONFIGURATION.md

@@ -0,0 +1,105 @@
+# Configuration
+
+Runtime configuration loader that fetches a JSON file and stores it in Redux state or returns it via callback.
+
+## Components
+
+### ConfigurationLoader (Redux)
+
+Headless component that loads configuration on mount and dispatches to Redux.
+
+```javascript
+import { ConfigurationLoader } from '@firedesktop/react-base';
+```
+
+#### Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `updateAppState` | `(name: string, value: object) => any` | Yes | -- | Redux action creator |
+| `path` | `string` | No | `'/configuration/config.json'` | Path to the JSON config file |
+
+#### Usage
+
+```jsx
+import { ConfigurationLoader } from '@firedesktop/react-base';
+import { Provider } from 'react-redux';
+
+<Provider store={store}>
+  <ConfigurationLoader updateAppState={updateAppState} />
+  <App />
+</Provider>
+```
+
+With a custom path:
+
+```jsx
+<ConfigurationLoader updateAppState={updateAppState} path="/settings/app.json" />
+```
+
+### ConfigurationReturner (Callback)
+
+For applications not using Redux. Loads configuration and calls a callback.
+
+```javascript
+import { ConfigurationReturner } from '@firedesktop/react-base';
+```
+
+#### Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `configuration` | `{ loaded: boolean }` | No | Current config state (prevents re-loading) |
+| `onConfigurationLoad` | `(config?) => void` | Yes | Callback receiving the loaded config |
+| `path` | `string` | Yes | Path to the JSON config file |
+
+#### Usage
+
+```jsx
+<ConfigurationReturner
+  configuration={config}
+  onConfigurationLoad={(cfg) => setConfig({ ...cfg, loaded: true })}
+  path="/configuration/config.json"
+/>
+```
+
+## Configuration File Format
+
+Place a JSON file in `public/configuration/config.json`:
+
+```json
+{
+  "apiBaseUrl": "https://api.example.com",
+  "appTitle": "My Application",
+  "features": {
+    "darkMode": true,
+    "notifications": false
+  }
+}
+```
+
+The response must be a plain JSON object (not an array or primitive).
+
+## Behavior
+
+- Fetches with cache-busting timestamp query parameter
+- Sets `Cache-Control`, `pragma`, `Expires`, and `X-Content-Type-Options` headers
+- Validates HTTP status (`res.ok`) before parsing
+- Validates the response is a plain object
+- Dispatches as `updateAppState('configuration', response)` (Redux variant)
+- Loads only once -- skips if `configuration.loaded` is already truthy
+- Errors are logged via [Logger](LOGGER.md) (silent by default)
+
+## Accessing Configuration
+
+```javascript
+import { useSelector } from 'react-redux';
+
+function MyComponent() {
+  const { configuration } = useSelector(state => state);
+
+  if (!configuration) return <Spin spinning={true} />;
+
+  return <div>{configuration.appTitle}</div>;
+}
+```

package/docs/FETCH_WRAPPER.md

@@ -0,0 +1,163 @@
+# FetchWrapper
+
+HTTP client class with session-token authentication, configurable error handling, timeout support, and file upload capability.
+
+## Import
+
+```javascript
+import { Utils } from '@firedesktop/react-base';
+const FetchWrapper = Utils.Fetch;
+
+const api = new FetchWrapper('v1', customLabels, handle401, handle403);
+```
+
+## Constructor
+
+```typescript
+new FetchWrapper(
+  apiVersion?: string,
+  labels?: ILabels,
+  status_401?: () => Promise<void>,
+  status_403?: () => Promise<void>
+)
+```
+
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `apiVersion` | `string` | Sent as the `api-version` header on every request |
+| `labels` | `ILabels` | Custom error messages (falls back to defaults if incomplete) |
+| `status_401` | `() => Promise<void>` | Callback for 401 Unauthorized responses |
+| `status_403` | `() => Promise<void>` | Callback for 403 Forbidden responses |
+
+### ILabels
+
+```typescript
+interface ILabels {
+  errorBadRequest: string;
+  errorGeneric: string;
+  errorServerNotAvailable: string;
+  errorSessionExpired: string;
+}
+```
+
+Default labels are used if not provided:
+
+```
+errorBadRequest:         "Request is not in a valid format"
+errorGeneric:            "Sorry we have errors on the remote server"
+errorServerNotAvailable: "Server not available"
+errorSessionExpired:     "Your session has expired, please login."
+```
+
+## Methods
+
+All methods share the same signature and return `Promise<any>`.
+
+### `get`, `post`, `put`, `delete`
+
+```typescript
+api.get(url, applicationName?, token?, onGenericServerError?, params?,
+        isFile?, isBlobInReturn?, additionalParams?, timeoutInMilli?)
+```
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `url` | `string` | -- | Request URL |
+| `applicationName` | `string` | -- | Sent as `ApplicationName` header |
+| `token` | `string` | -- | Sent as `SessionToken` header |
+| `onGenericServerError` | `(status: number, error?: any) => void` | -- | Error callback for non-401/403 errors |
+| `params` | `Blob \| any` | -- | Request body (JSON-serialized, or Blob for files) |
+| `isFile` | `boolean` | `false` | Send as `FormData` with `file` field |
+| `isBlobInReturn` | `boolean` | `false` | Parse response as `Blob` instead of JSON |
+| `additionalParams` | `AdditionalParamsType[]` | `[]` | Extra form fields when uploading files |
+| `timeoutInMilli` | `number` | `60000` | Request timeout in milliseconds |
+
+### AdditionalParamsType
+
+```typescript
+type AdditionalParamsType = {
+  name: string;
+  value: string | number;
+};
+```
+
+## Usage
+
+### Basic GET
+
+```javascript
+const api = new FetchWrapper('v1');
+const data = await api.get('/api/users', 'MyApp', sessionToken);
+```
+
+### POST with JSON body
+
+```javascript
+const newUser = { name: 'Alice', email: 'alice@example.com' };
+const result = await api.post('/api/users', 'MyApp', sessionToken, null, newUser);
+```
+
+### File upload
+
+```javascript
+const file = inputElement.files[0];
+const result = await api.post(
+  '/api/upload', 'MyApp', sessionToken, null,
+  file, true, false,
+  [{ name: 'category', value: 'documents' }]
+);
+```
+
+### Download as Blob
+
+```javascript
+const blob = await api.get(
+  '/api/reports/export', 'MyApp', sessionToken,
+  null, null, false, true
+);
+const url = URL.createObjectURL(blob);
+```
+
+### With error handling
+
+```javascript
+const api = new FetchWrapper(
+  'v1',
+  { errorBadRequest: 'Bad request', errorGeneric: 'Error', errorServerNotAvailable: 'Offline', errorSessionExpired: 'Session expired' },
+  async () => { window.location.href = '/login'; },  // 401
+  async () => { alert('Access denied'); }              // 403
+);
+
+try {
+  const data = await api.get('/api/data', 'MyApp', token, (status, error) => {
+    console.error(`Server error ${status}`, error);
+  });
+} catch (err) {
+  // err is the error message string from labels
+}
+```
+
+## Request Headers
+
+Every request includes:
+
+| Header | Value |
+|--------|-------|
+| `Cache-Control` | `no-cache, no-store, must-revalidate` |
+| `pragma` | `no-cache` |
+| `Expires` | `0` |
+| `X-Content-Type-Options` | `nosniff` |
+| `Content-Type` | `application/json` (for non-file requests with body) |
+| `api-version` | Constructor `apiVersion` (if provided) |
+| `ApplicationName` | Method `applicationName` (if provided) |
+| `SessionToken` | Method `token` (if provided) |
+
+## Behavior
+
+- CORS mode with `credentials: 'include'` (cookies sent on every request)
+- Request timeout via `AbortController` (default 60s)
+- Validates `Content-Type: application/json` before parsing JSON responses
+- Validates HTTP status 2xx before processing the response
+- 401/403 responses routed to constructor callbacks if provided
+- Other errors routed to `onGenericServerError` callback if provided
+- Falls back to throwing error label strings if no callback handles the error