@gears-frontx/react 0.1.0

package/llms.txt

@@ -0,0 +1,122 @@
+# @gears-frontx/react
+
+> React bindings, hooks, and components for HAI3 SDK. Provides type-safe integration with React applications including MFE (Microfrontend) support.
+
+Part of the HAI3 React Layer (L3) - depends on @gears-frontx/framework. Peer dependency on react and react-dom.
+
+## Core API
+
+- [HAI3Provider](https://hai3.dev/docs/react/provider): Root context provider
+- [MFE Components](https://hai3.dev/docs/react/mfe): ExtensionDomainSlot, MfeProvider, RefContainerProvider
+
+## Hooks
+
+| Hook | Purpose |
+|------|---------|
+| `useHAI3()` | Access app instance |
+| `useAppDispatch()` | Type-safe dispatch |
+| `useAppSelector()` | Type-safe selector |
+| `useTranslation()` | Translation utilities (t, language, setLanguage, isRTL) |
+| `useScreenTranslations()` | Lazy load screen translations |
+| `useTheme()` | Theme utilities (currentTheme, themes, setTheme) |
+
+## MFE Hooks
+
+| Hook | Purpose |
+|------|---------|
+| `useMfeBridge()` | Access MFE bridge (child MFEs) |
+| `useSharedProperty()` | Subscribe to shared property changes |
+| `useHostAction()` | Invoke actions on host application |
+| `useDomainExtensions()` | Subscribe to extensions in a domain |
+
+## Quick Start
+
+```tsx
+import { HAI3Provider, ExtensionDomainSlot, useTranslation, useHAI3 } from '@gears-frontx/react';
+
+// Wrap app with provider
+function App() {
+  return (
+    <HAI3Provider>
+      <Layout>
+        <ExtensionDomainSlot domainId="screen" fallback={<Loading />} />
+      </Layout>
+    </HAI3Provider>
+  );
+}
+
+// Use hooks in components
+function MyComponent() {
+  const { t, isRTL } = useTranslation();
+  const app = useHAI3();
+
+  return (
+    <div dir={isRTL ? 'rtl' : 'ltr'}>
+      <h1>{t('common:title')}</h1>
+    </div>
+  );
+}
+```
+
+## MFE Patterns
+
+### Using ExtensionDomainSlot
+
+```tsx
+import { ExtensionDomainSlot } from '@gears-frontx/react';
+
+function LayoutScreen() {
+  const screenContainerRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <ExtensionDomainSlot
+      domainId="screen"
+      containerRef={screenContainerRef}
+      fallback={<Loading />}
+    />
+  );
+}
+```
+
+### Using MFE Bridge
+
+```tsx
+import { useMfeBridge, useSharedProperty, HAI3_ACTION_LOAD_EXT, HAI3_SHARED_PROPERTY_THEME } from '@gears-frontx/react';
+
+function MyExtension() {
+  const bridge = useMfeBridge();
+  const theme = useSharedProperty(HAI3_SHARED_PROPERTY_THEME);
+
+  const handleAction = async () => {
+    await bridge.executeActionsChain({
+      action: { type: HAI3_ACTION_LOAD_EXT, target: 'screen', payload: { extensionId: 'other' } }
+    });
+  };
+
+  return <div style={{ backgroundColor: theme?.primaryColor }}>...</div>;
+}
+```
+
+### Subscribing to Domain Extensions
+
+```tsx
+import { useDomainExtensions } from '@gears-frontx/react';
+
+function ScreenList() {
+  const screenExtensions = useDomainExtensions('screen');
+
+  return (
+    <ul>
+      {screenExtensions.map((ext) => (
+        <li key={ext.id}>{ext.title}</li>
+      ))}
+    </ul>
+  );
+}
+```
+
+## Optional
+
+- [Screen Translations](https://hai3.dev/docs/react/translations): Per-screen lazy loading
+- [Custom Hooks](https://hai3.dev/docs/react/hooks): Building on HAI3 hooks
+- [MFE Bridge Communication](https://hai3.dev/docs/react/mfe-bridge): Parent-child patterns

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@gears-frontx/react",
+  "version": "0.1.0",
+  "description": "React bindings and hooks for HAI3 framework",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./types": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/types.js",
+      "require": "./dist/types.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "CLAUDE.md",
+    "llms.txt",
+    "commands"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "type-check": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "tsup": "^8.0.0",
+    "typescript": "^5.4.2",
+    "react": "^19.2.4",
+    "@types/react": "^19.0.8",
+    "react-redux": "^9.1.0",
+    "@types/react-redux": "^7.1.33",
+    "vitest": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
+    "@testing-library/react": "^16.1.0",
+    "@reduxjs/toolkit": "^2.5.0",
+    "jsdom": "^25.0.1"
+  },
+  "peerDependencies": {
+    "@gears-frontx/framework": "*",
+    "react": "^19.2.4",
+    "react-redux": ">=8.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@gears-frontx/framework": {
+      "optional": false
+    },
+    "react": {
+      "optional": false
+    },
+    "react-redux": {
+      "optional": false
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "hai3",
+    "react",
+    "hooks",
+    "provider",
+    "typescript"
+  ],
+  "author": "HAI3",
+  "license": "Apache-2.0"
+}