@firedesktop/react-base 2.1.25 → 3.0.0

package/docs/TOASTER.md

@@ -0,0 +1,75 @@
+# Toaster
+
+Toast notification component using Syncfusion's ToastComponent. Displays styled notifications for errors, info, success, and warnings.
+
+## Import
+
+```javascript
+import { Components } from '@firedesktop/react-base';
+const { Toaster, Toaster_Types } = Components;
+```
+
+## Types
+
+```typescript
+type Toaster_Type = 'Error' | 'Information' | 'Success' | 'Warning';
+
+type Toaster_Prop_Type = {
+    content?: string;
+    title: string;
+    type: Toaster_Type;
+};
+```
+
+## Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `propertiesObject` | `Toaster_Prop_Type` | Yes | Toast configuration object |
+
+### `propertiesObject` fields
+
+| Field | Type | Required | Description |
+|-------|------|----------|-------------|
+| `title` | `string` | Yes | Toast title |
+| `content` | `string` | No | Toast body message |
+| `type` | `Toaster_Type` | Yes | Notification type |
+
+## Usage
+
+```jsx
+const [toast, setToast] = useState(null);
+
+{toast && <Toaster propertiesObject={toast} />}
+```
+
+### Showing different notification types
+
+```jsx
+// Success
+setToast({ title: 'Saved', content: 'Record saved.', type: 'Success' });
+
+// Error
+setToast({ title: 'Error', content: 'Failed to save.', type: 'Error' });
+
+// Warning
+setToast({ title: 'Warning', content: 'Unsaved changes.', type: 'Warning' });
+
+// Information
+setToast({ title: 'Info', content: 'New version available.', type: 'Information' });
+```
+
+## Behavior
+
+- Displays a toast notification positioned to the right
+- Each type has a distinct CSS class and icon:
+  - `Error` -- `e-toast-danger`, error icon, 4s timeout
+  - `Information` -- `e-toast-info`, info icon
+  - `Success` -- `e-toast-success`, success icon
+  - `Warning` -- `e-toast-warning`, warning icon
+- Shows a progress bar and close button
+- Title and content are HTML-escaped before rendering (XSS protection)
+
+## Dependencies
+
+Uses `ToastComponent` from `@syncfusion/ej2-react-notifications` (bundled dependency). Requires the Syncfusion Bootstrap4 theme CSS for styling.

package/docs/UTILITIES.md

@@ -0,0 +1,177 @@
+# Utilities
+
+Standalone utility functions for dates, currency, files, URLs, and input validation.
+
+All utilities use the factory pattern: import the function, call it to get an object of methods.
+
+## Import
+
+```javascript
+import { Utils } from '@firedesktop/react-base';
+
+const { dateToString, dateToString_Italian, isoStringToDate, removeTime, zuluTimeUTC_to_yourTimeZone } = Utils.DateUtils();
+const { numberToCurrencyString, numberToCurrencyStringNoSymbol } = Utils.CurrencyUtiles();
+const { b64toBlob, fileReadAsync } = Utils.FileUtils();
+const { validate: validateUrl } = Utils.UrlUtils();
+const { isAValid_CSharpName, isAValid_EmailAddress } = Utils.RegExValidation();
+```
+
+---
+
+## DateUtils
+
+### `dateToString(date, locale?)`
+
+Format a date using `Intl.DateTimeFormat`.
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `date` | `string \| Date` | -- | Date to format |
+| `locale` | `string` | `'IT'` | Locale code for formatting |
+
+```javascript
+dateToString(new Date());           // "05/02/2026"
+dateToString('2026-02-05', 'en-US'); // "2/5/2026"
+```
+
+### `dateToString_Italian(date, separator, time?)`
+
+Format as Italian-style string with configurable separator and optional time.
+
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `date` | `string \| Date \| undefined` | Date to format |
+| `separator` | `string` | Date separator (e.g., `'/'`, `'-'`, `'.'`) |
+| `time` | `'HH:mm' \| 'HH:mm:ss' \| undefined` | Optional time format |
+
+```javascript
+dateToString_Italian(new Date(), '/', 'HH:mm');     // "05/02/2026 14:30"
+dateToString_Italian(new Date(), '-', 'HH:mm:ss');  // "05-02-2026 14:30:45"
+dateToString_Italian(new Date(), '/');               // "05/02/2026"
+```
+
+### `isoStringToDate(value)`
+
+Parse an ISO date string to a `Date` object. Returns `undefined` if invalid.
+
+```javascript
+isoStringToDate('2026-02-05T14:00:00.000Z'); // Date object
+isoStringToDate(undefined);                    // undefined
+```
+
+### `removeTime(date)`
+
+Return a new `Date` at midnight (00:00:00) on the same day.
+
+```javascript
+removeTime(new Date('2026-02-05T14:30:00')); // Date at 2026-02-05T00:00:00
+```
+
+### `zuluTimeUTC_to_yourTimeZone(isoString)`
+
+Convert a Z-formatted UTC string to local timezone in `YYYY-MM-DDTHH:mm:ss` format (no `Z` suffix). Returns the input unchanged if it doesn't end with `Z`.
+
+```javascript
+zuluTimeUTC_to_yourTimeZone('2026-02-05T14:00:00.000Z'); // "2026-02-05T15:00:00" (CET)
+```
+
+---
+
+## CurrencyUtiles
+
+### `numberToCurrencyString(value, locale?, currency?)`
+
+Format a number as a currency string using `Intl.NumberFormat`.
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `value` | `string \| number \| undefined` | -- | Value to format |
+| `locale` | `string` | `'IT'` | Locale for formatting |
+| `currency` | `string` | `'EUR'` | ISO 4217 currency code |
+
+```javascript
+numberToCurrencyString(1234.5);               // "1.234,50 €"
+numberToCurrencyString(1234.5, 'en-US', 'USD'); // "$1,234.50"
+```
+
+### `numberToCurrencyStringNoSymbol(value, locale?, minimumFractionDigits?)`
+
+Format a number without a currency symbol.
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `value` | `string \| number \| undefined` | -- | Value to format |
+| `locale` | `string` | `'IT'` | Locale for formatting |
+| `minimumFractionDigits` | `number` | `2` | Minimum decimal places |
+
+```javascript
+numberToCurrencyStringNoSymbol(1234.5);     // "1.234,50"
+numberToCurrencyStringNoSymbol(1234.5, 'en-US'); // "1,234.50"
+```
+
+---
+
+## FileUtils
+
+### `b64toBlob(b64Data, contentType?, sliceSize?)`
+
+Convert a base64 string to a `Blob`.
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `b64Data` | `string` | -- | Base64-encoded data |
+| `contentType` | `string` | `''` | MIME type |
+| `sliceSize` | `number` | `512` | Byte processing chunk size |
+
+```javascript
+const blob = b64toBlob(pdfBase64, 'application/pdf');
+const url = URL.createObjectURL(blob);
+```
+
+### `fileReadAsync(file)`
+
+Read a `File` object as text asynchronously.
+
+```javascript
+const text = await fileReadAsync(inputElement.files[0]);
+```
+
+---
+
+## UrlUtils
+
+### `validate(url?)`
+
+Validate a URL string (supports HTTP/HTTPS, domain names, IPs, ports, paths, query strings, fragments).
+
+```javascript
+validateUrl('https://example.com');        // true
+validateUrl('http://192.168.1.1:8080');    // true
+validateUrl('not a url');                   // false
+validateUrl(undefined);                     // false
+```
+
+---
+
+## RegExValidation
+
+### `isAValid_CSharpName(value?)`
+
+Validate that a string is a valid C# identifier: starts with a letter, contains only letters, digits, and underscores.
+
+```javascript
+isAValid_CSharpName('MyClass');    // true
+isAValid_CSharpName('my_var_1');   // true
+isAValid_CSharpName('1invalid');   // false
+isAValid_CSharpName('has space');  // false
+```
+
+### `isAValid_EmailAddress(value?)`
+
+Validate email format.
+
+```javascript
+isAValid_EmailAddress('user@example.com');   // true
+isAValid_EmailAddress('invalid');             // false
+isAValid_EmailAddress(undefined);             // false
+```

package/package.json

@@ -1,8 +1,15 @@
 {
   "name": "@firedesktop/react-base",
-  "version": "2.1.25",
-  "license": "ISC",
+  "version": "3.0.0",
+  "license": "SEE LICENSE IN LICENSE",
   "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/",
+    "docs/",
+    "LICENSE",
+    "README.md"
+  ],
   "description": "This is the FireDesktop base package used to support every React Project in this Company.",
   "author": "Firedesktop",
   "repository": "https://firedesktopDevOps@dev.azure.com/firedesktopDevOps/baseFEComponents/_git/baseFEComponents",
@@ -11,30 +18,30 @@
     "@syncfusion/ej2-react-notifications": "32.1.24"
   },
   "devDependencies": {
-    "@babel/cli": "7.28.6",
-    "@babel/core": "7.28.6",
-    "@babel/plugin-proposal-class-properties": "7.18.6",
-    "@babel/plugin-transform-arrow-functions": "7.27.1",
-    "@babel/preset-typescript": "7.28.5",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.6.1",
-    "@types/jest": "30.0.0",
     "@types/node": "25.0.9",
     "@types/react": "19.2.9",
     "@types/react-dom": "19.2.3",
     "@types/react-redux": "7.1.34",
-    "babel-plugin-minify-builtins": "0.5.0",
-    "babel-preset-minify": "0.5.2",
+    "@typescript-eslint/eslint-plugin": "^8.54.0",
+    "@typescript-eslint/parser": "^8.54.0",
+    "@vitejs/plugin-react": "^5.1.3",
     "bootstrap": "5.3.8",
     "copyfiles": "2.4.1",
-    "lodash": "4.17.21",
+    "eslint": "^9.39.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "jsdom": "^28.0.0",
+    "lodash": "4.17.23",
     "react": "18.3.1",
-    "react-dom": "18.3.1",    
+    "react-dom": "18.3.1",
     "react-redux": "9.2.0",
-    "react-scripts": "^0.0.0",
+    "redux": "^5.0.1",
     "typescript": "4.9.5",
-    "web-vitals": "5.1.0"
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18"
   },
   "peerDependencies": {
     "bootstrap": ">=4.5.3",
@@ -44,25 +51,8 @@
   },
   "scripts": {
     "distribute": "rmdir /s /q dist & mkdir dist\\styles && tsc && copyfiles -f src/lib/styles/* dist/styles",
-    "start": "react-scripts start",
-    "test": "react-scripts test"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+    "start": "vite",
+    "test": "vitest run",
+    "test:watch": "vitest"
   }
 }

package/src/App.css

@@ -1,12 +0,0 @@
-.login_form_svg {
-    left: 7px;
-    top: 5px;
-}
-
-.item_clickable {
-    cursor: pointer;
-}
-
-.appInput_form_for_icon {
-    padding: 8px 0 8px 40px !important;
-}