@firedesktop/react-base

Shared React component library and utility package for Firedesktop applications. Provides UI components, HTTP client, i18n, configuration loading, and CSS design tokens.

Installation

npm i @firedesktop/react-base

Peer Dependencies

Your project must provide:

• react >= 16.8
• react-dom >= 16.8
• react-redux >= 7
• bootstrap >= 4.5.3

Quick Start

import {
  Components,
  ConfigurationLoader,
  LanguageLoader,
  Logger,
  Utils
} from '@firedesktop/react-base';

Components

| Component | Description | Docs | |-----------|-------------|------| | AppIcon | SVG icon with 40+ variants | docs/APP_ICON.md | | AppInput | Input wrapper with icon support | docs/APP_INPUT.md | | AppPagination | Bootstrap pagination with smart page range | docs/APP_PAGINATION.md | | Spin | Loading spinner overlay (Syncfusion) | docs/SPIN.md | | Toaster | Toast notifications (Syncfusion) | docs/TOASTER.md |

const { AppIcon, AppInput, AppPagination, Spin, Toaster } = Components;

Configuration

Load a JSON configuration file at runtime and store it in Redux state.

import { ConfigurationLoader } from '@firedesktop/react-base';

<Provider store={store}>
  <ConfigurationLoader updateAppState={updateAppState} />
  <App />
</Provider>

Default path: /configuration/config.json. See docs/CONFIGURATION.md for full API.

Labels (i18n)

Load locale-specific label files at runtime with dot-notation access.

import { LanguageLoader, Utils } from '@firedesktop/react-base';

// Load labels
<Provider store={store}>
  <LanguageLoader updateAppState={updateAppState} language="it-IT" />
  <App />
</Provider>

// Read labels
const { getLabel } = Utils.Labels();
const { labels } = useSelector(state => state);
getLabel(labels, 'common.save', 'Save');

Default path: ./labels/{language}.json. See docs/LABELS.md for full API.

HTTP Client (FetchWrapper)

Class-based HTTP client with session token auth, error callbacks, timeouts, and file upload.

import { Utils } from '@firedesktop/react-base';
const FetchWrapper = Utils.Fetch;

const api = new FetchWrapper('v1', labels, handle401, handle403);
const data = await api.get('/api/users', 'MyApp', token);

See docs/FETCH_WRAPPER.md for full API.

Utilities

| Utility | Description | |---------|-------------| | Utils.DateUtils() | Date formatting and manipulation (Intl API) | | Utils.CurrencyUtiles() | Currency formatting (Intl.NumberFormat) | | Utils.FileUtils() | Base64 to Blob, async file reading | | Utils.UrlUtils() | URL validation | | Utils.RegExValidation() | Email and C# name validation |

const { dateToString } = Utils.DateUtils();
const { numberToCurrencyString } = Utils.CurrencyUtiles();

See docs/UTILITIES.md for full API.

Debug Logging

The library is silent by default -- zero console output in production. To enable debug logs, opt in from your app entry point:

import { Logger } from '@firedesktop/react-base';

Logger.enableDebug(process.env.NODE_ENV === 'development');

When enabled, all internal logs are prefixed with [react-base] for easy filtering in browser DevTools.

See docs/LOGGER.md for full API.

CSS Design Tokens

Import the base stylesheet for design tokens and utility classes:

import '@firedesktop/react-base/dist/styles/base.css';

Colors

| Token | Value | |-------|-------| | --primary-color | #0057ff | | --warning-color | #ffc14e | | --danger-color | #e80026 | | --success-color | #00854d | | --tertiary-color | #b1aeae | | --dark-pink-color | #de31d2 |

Utility Classes

• Text: primary-text, tertiary-text, danger-text, success-text, warning-text
• SVG fill: primary-svg, danger-svg, success-svg, warning-svg
• SVG stroke: primary-svg-stroke, danger-svg-stroke
• Borders: primary-border, danger-border, success-border
• Backgrounds: primary-background, danger-background
• Font sizes: fz10, fz12, fz14, fz16, fz18, fz20, fz24, fz30, fz36, fz42, fz48, fz54, fz60, fz70

Documentation Index

| Document | Description | |----------|-------------| | docs/APP_ICON.md | AppIcon component reference | | docs/APP_INPUT.md | AppInput component reference | | docs/APP_PAGINATION.md | AppPagination component reference | | docs/SPIN.md | Spin component reference | | docs/TOASTER.md | Toaster component reference | | docs/FETCH_WRAPPER.md | FetchWrapper HTTP client reference | | docs/CONFIGURATION.md | Configuration loading reference | | docs/LABELS.md | Labels / i18n reference | | docs/UTILITIES.md | DateUtils, CurrencyUtiles, FileUtils, UrlUtils, RegExValidation | | docs/LOGGER.md | Logger utility reference |

Available Scripts

Run from the @firedesktop/react-base/ directory:

npm start

Launches the interactive component showcase at http://localhost:3000. The showcase provides live demos, editable controls, and code snippets for every component, utility, and design token in the library. Source files live in src/demo/ and are not included in the published package.

npm run distribute

Builds the library to dist/. Compiles TypeScript from src/lib/ and copies CSS from src/lib/styles/. Demo files under src/demo/ are excluded from compilation (only src/lib/ is in tsconfig.json include).

npm test

Runs the test suite (smoke test verifying the showcase renders without errors).

npm publish

Publishes the package to npmjs.

License

Proprietary software. See LICENSE for the full EULA.

Copyright (c) 2026 Firedesktop S.r.l. All rights reserved.