aquasis-fe-components 3.2.7 → 3.2.9

package/README.md

@@ -1,30 +1,101 @@
-# React + TypeScript + Vite
+# aquasis-fe-components
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+Shared React UI library for **AQUASIS** portals (GlobalAuth, WiseApps Portal, and related apps). Ships header controls, profile management, helpdesk, release notes, themes, and i18n.
 
-Currently, two official plugins are available:
+**Current version:** `3.2.9`
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## Requirements
 
-## Expanding the ESLint configuration
+- React 19+
+- `@tanstack/react-query` ^5
+- `i18next` ^25.8 || ^26
+- `react-i18next` ^16.5 || ^17
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+## Install
 
-- Configure the top-level `parserOptions` property like this:
+```bash
+pnpm add aquasis-fe-components
+```
+
+Peer dependencies must be installed in the host application.
+
+## Usage
+
+Import components and global styles once at the app root:
+
+```tsx
+import {
+  Helpdesk,
+  LanguageSwitcher,
+  ProfileChipComponent,
+  ThemeModeToggle,
+  UserModal,
+  WhatsNews,
+  i18n,
+} from "aquasis-fe-components";
+import "aquasis-fe-components/dist/index.css";
+```
+
+Wrap the app with your Redux store, React Query, and i18n setup. Components that use **`ThemeProvider`** (via connectors) receive Ant Design themes aligned with the WiseApps Portal palette.
+
+Configure API base URLs through component props (e.g. **`gauApiUrl`**) or **`setAquasisApiContext`**.
+
+## Exported components
+
+| Export | Description |
+|--------|-------------|
+| `ProfileChipComponent` | Header profile chip (avatar, edit profile, logout, optional overflow menu) |
+| `LanguageSwitcher` | Pill language selector with flag and dropdown |
+| `ThemeModeToggle` | Light/dark theme switch |
+| `Helpdesk` | Support trigger and ticket modal |
+| `UserModal` | Profile edit modal |
+| `WhatsNews` | Release notes carousel modal |
+| `i18n` | Shared i18next instance and locale files |
+
+## Fluid scaling (3.2.9+)
+
+Components scale proportionally on small viewports and when browser zoom is high. Importing the library CSS sets:
+
+- **`--aquasis-fluid-scale`** — `clamp(0.5, 100vw / 1440, 1)`
+- **`--aquasis-fluid-font-size`** — base root size for **`rem`**-based layout
+
+`ThemeProvider` applies the same scale to Ant Design tokens automatically.
 
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
-}
+For custom portal layout (e.g. welcome cards), reuse the scale in the host app:
+
+```tsx
+import { useFluidScale, computeFluidScale, FLUID_REFERENCE_WIDTH } from "aquasis-fe-components";
+```
+
+Optional scope class for embedded surfaces (Storybook, iframes):
+
+```html
+<div class="aquasis-fe-fluid-scope">...</div>
+```
+
+## Development
+
+```bash
+pnpm install
+pnpm dev          # Vite dev server
+pnpm storybook    # Component docs on :6006
+pnpm build        # Library build → dist/
+pnpm lint
 ```
 
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+## Publish
+
+```bash
+pnpm run publish:npm    # latest tag
+pnpm run publish-beta   # beta tag
+```
+
+Requires `.env` with `NPM_PUBLISH_TOKEN`.
+
+## Changelog
+
+See [changelog.md](./changelog.md).
+
+## License
+
+ISC · [AQUASISPT/FrontendComponents](https://github.com/AQUASISPT/FrontendComponents)