@grasp-labs/ds-microfrontends-integration 1.0.3 → 1.1.0

package/README.md

@@ -14,45 +14,54 @@ npm install @grasp-labs/ds-microfrontends-integration
 
 Components for managing secrets with JSON Schema-based forms.
 
-### React Components
+### Vault Usage
 
 ```tsx
 import {
+  LanguageProvider,
   VaultInput,
   VaultProvider,
   VaultSecretDialog,
 } from "@grasp-labs/ds-microfrontends-integration";
 import "@grasp-labs/ds-microfrontends-integration/styles.css";
 
-<VaultProvider
-  secretsList={secrets}
-  schema={jsonSchema}
-  generateSecret={async (data) => newSecret}
-  updateSecret={async (secret) => updatedSecret}
-  deleteSecret={async (id) => {}}
->
-  <VaultInput name="apiKey" label="API Key" />
-  <VaultSecretDialog isOpen={isOpen} onClose={handleClose} />
-</VaultProvider>;
+const vaultValue = {
+  secretsList: secrets,
+  schema: jsonSchema,
+  generateSecret: async (data) => newSecret,
+  updateSecret: async (secret) => updatedSecret,
+  deleteSecret: async (id) => {},
+};
+
+<LanguageProvider>
+  <VaultProvider value={vaultValue}>
+    <VaultInput name="apiKey" label="API Key" />
+    <VaultSecretDialog isOpen={isOpen} onClose={handleClose} />
+  </VaultProvider>
+</LanguageProvider>;
 ```
 
-### Translation
+`VaultInput` and `VaultSecretDialog` use built-in translations, so they must be rendered inside `LanguageProvider`.
 
-i18next-based translation system with dynamic resource loading.
+### Language
 
 ```tsx
 import {
-  TranslationProvider,
-  useTranslation,
+  LanguageProvider,
+  useLanguage,
 } from "@grasp-labs/ds-microfrontends-integration";
 
-<TranslationProvider language="en">
+<LanguageProvider>
   <App />
-</TranslationProvider>;
+</LanguageProvider>;
 
 function MyComponent() {
-  const t = useTranslation();
-  return <h1>{t("common.title")}</h1>;
+  const { language, setLanguage } = useLanguage();
+  return (
+    <button onClick={() => setLanguage(language === "en" ? "no" : "en")}>
+      Switch language ({language})
+    </button>
+  );
 }
 ```
 
@@ -75,8 +84,7 @@ function MyComponent() {
 
   const showSuccess = () => {
     addToast({
-      title: "Success",
-      description: "Operation completed successfully",
+      message: "Operation completed successfully",
       variant: "success",
       duration: 5000, // optional, defaults to 5000ms
     });
@@ -96,15 +104,25 @@ import { SchemaFields } from "@grasp-labs/ds-microfrontends-integration";
 <SchemaFields schema={jsonSchema} control={control} errors={errors} />;
 ```
 
+### Groups and User Context
+
+Helpers for auth-aware rendering:
+
+- `UserProvider` / `useUser`
+- `GroupsProvider` / `useGroups`
+- `GroupGuard` for conditional rendering by required groups
+
 ## Styling
 
-The library requires styles from `@grasp-labs/ds-react-components`:
+Import the package stylesheet once:
 
 ```tsx
 import "@grasp-labs/ds-microfrontends-integration/styles.css";
 ```
 
-### Microfrontend Configuration (`/mf-common`)
+It includes the required styles from `@grasp-labs/ds-react-components`.
+
+## Microfrontend Configuration (`/mf-common`)
 
 The platform uses a **host / remote** architecture powered by [Module Federation](https://module-federation.io/). A central host application dynamically discovers and mounts independent microfrontend remotes at runtime. For this to work, every remote must follow a shared contract — exposing the same entry points, using compatible shared dependencies, and providing a navigation config so the host can build its sidebar and routing.
 
@@ -129,7 +147,7 @@ Each entry in the navigation config is a `NavigationItem` — either a **route**
 | `hidden`   | A route that is routable but does not appear in the sidebar                |
 | `category` | A non-routable group with `children` — used to create nested sidebar menus |
 
-Every item has a `label` (display fallback), an optional `labelKey` (i18n key in the `navigation` namespace), and an `icon`.
+Every item has a `label` (display fallback), an optional `labelKey` (i18n key in the `navigation` namespace, kept for backward compatibility), an optional `translations` dictionary, and an `icon`.
 
 #### Available Utilities
 
@@ -215,6 +233,7 @@ const { navigationConfig, pageRoutes: PageRoutes } = defineNavigation({
   INTERNAL: {
     label: "Internal Page",
     path: "/internal",
+    icon: "cogWheel",
     type: "hidden",
   },
 });
@@ -289,13 +308,16 @@ After a successful login, the middleware redirects to `process.env.VITE_BASE_PAT
 - `npm test` - Run tests
 - `npm run test:watch` - Run tests in watch mode
 - `npm run test:coverage` - Generate test coverage report
+- `npm run tsc` - Run TypeScript type-checking
+- `npm run check` - Run `tsc`, lint, format check, and tests
 
 ### Project Structure
 
 ```
 src/
-├── components/        # React components (vault, translation, schema fields, etc.)
-├── hooks/             # Custom React hooks
+├── components/        # React components (vault, language, schema fields, toast, groups, user)
+├── hooks/             # Shared hook exports
+├── dev/               # Dev auth middleware entrypoint
 ├── lib/               # JSON schema utilities and shared logic
 ├── types/             # TypeScript type definitions
 ├── utils/             # Shared helper functions
@@ -306,5 +328,5 @@ src/
 ## Contributing
 
 1. Create a feature branch
-2. Ensure `npm test`, `npm run lint`, and `npm run format:check` pass
+2. Ensure `npm run check` passes
 3. Create a pull request