@capillarytech/blaze-ui 2.8.0 → 2.9.0

package/dist/CapImportMFEComponent/CapImportMFEComponent.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { CapImportMFEComponentProps } from './CapImportMFEComponent.interfaces';
+declare const CapImportMFEComponent: React.FC<CapImportMFEComponentProps>;
+export default CapImportMFEComponent;
+//# sourceMappingURL=CapImportMFEComponent.d.ts.map

package/dist/CapImportMFEComponent/CapImportMFEComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CapImportMFEComponent.d.ts","sourceRoot":"","sources":["../../components/CapImportMFEComponent/CapImportMFEComponent.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAMvC,OAAO,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAC;AAIhF,QAAA,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CA2C/D,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/CapImportMFEComponent/CapImportMFEComponent.interfaces.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface CapImportMFESystem {
+    url: string | (() => Promise<string>);
+    scope: string;
+    module: string;
+}
+export interface CapImportMFEComponentProps {
+    system?: CapImportMFESystem;
+    loadingFallback?: React.ReactElement | string;
+    [key: string]: unknown;
+}
+//# sourceMappingURL=CapImportMFEComponent.interfaces.d.ts.map

package/dist/CapImportMFEComponent/CapImportMFEComponent.interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CapImportMFEComponent.interfaces.d.ts","sourceRoot":"","sources":["../../components/CapImportMFEComponent/CapImportMFEComponent.interfaces.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,MAAM,GAAG,CAAC,MAAM,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,0BAA0B;IACzC,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,eAAe,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,MAAM,CAAC;IAC9C,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB"}

package/dist/CapImportMFEComponent/README.md

@@ -0,0 +1,121 @@
+# CapImportMFEComponent
+
+A React component for dynamically importing and rendering remote components using Module Federation (MFE). This component requires Webpack 5 and Module Federation support.
+
+## Migration from cap-ui-library to blaze-ui
+
+### Summary of Changes
+
+- **Styled-components → SCSS Modules**: Converted from styled-components to SCSS modules for better performance and maintainability
+- **TypeScript**: Added full TypeScript support with proper type definitions
+- **Functional Component**: Already a functional component, maintained with React hooks
+- **Prop Types**: Replaced PropTypes with TypeScript interfaces
+- **Error Display**: Uses original `CapSomethingWentWrong` component from cap-ui-library
+- **Translation**: Updated translation scope from `components.CapImportMFECOmponent` to `blaze.components.CapImportMFEComponent`
+
+### Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `system` | `CapImportMFESystem` | Yes | Configuration object for the remote module |
+| `system.url` | `string \| (() => Promise<string>)` | Yes | URL of the remote module (can be a string or async function) |
+| `system.scope` | `string` | Yes | Module Federation scope name |
+| `system.module` | `string` | Yes | Module name to import from the remote |
+| `loadingFallback` | `React.ReactElement \| string` | No | Custom loading fallback component or string |
+| `...rest` | `unknown` | No | Additional props passed to the imported component |
+
+### Breaking Changes
+
+**No breaking changes from cap-ui-library v8.x**
+
+All existing props and behaviors are maintained. The API remains identical.
+
+### Behavioral Changes
+
+- Error display uses original `CapSomethingWentWrong` component from cap-ui-library
+- Styles are now defined using SCSS modules with variables for consistency
+- Translation scope updated to follow blaze-ui naming conventions
+
+### Usage
+
+#### Basic Usage
+
+```tsx
+import { CapImportMFEComponent } from '@capillarytech/blaze-ui';
+
+<CapImportMFEComponent
+  system={{
+    url: 'https://remote-app.example.com/remoteEntry.js',
+    scope: 'remoteApp',
+    module: './Component',
+  }}
+/>
+```
+
+#### With Custom Loading Fallback
+
+```tsx
+<CapImportMFEComponent
+  system={{
+    url: 'https://remote-app.example.com/remoteEntry.js',
+    scope: 'remoteApp',
+    module: './Component',
+  }}
+  loadingFallback={<div>Custom loading...</div>}
+/>
+```
+
+#### With Dynamic URL Function
+
+```tsx
+<CapImportMFEComponent
+  system={{
+    url: async () => {
+      const config = await fetch('/api/config').then(r => r.json());
+      return config.remoteUrl;
+    },
+    scope: 'remoteApp',
+    module: './Component',
+  }}
+/>
+```
+
+#### Passing Props to Remote Component
+
+```tsx
+<CapImportMFEComponent
+  system={{
+    url: 'https://remote-app.example.com/remoteEntry.js',
+    scope: 'remoteApp',
+    module: './Component',
+  }}
+  customProp="value"
+  onClick={handleClick}
+/>
+```
+
+### Import Examples
+
+```tsx
+// Named import (recommended)
+import { CapImportMFEComponent } from '@capillarytech/blaze-ui';
+
+// With types
+import type { CapImportMFEComponentProps, CapImportMFESystem } from '@capillarytech/blaze-ui';
+```
+
+### Requirements
+
+- **Webpack 5**: This component requires Webpack 5 with Module Federation plugin
+- **Module Federation**: The remote application must be configured with Module Federation
+- **@module-federation/utilities**: The `importRemote` utility from `@module-federation/utilities` is required
+
+### Error Handling
+
+If the `system` prop is missing required fields (`url`, `scope`, or `module`), the component will display an error message using `CapError` and `CapHeading` components.
+
+### Notes
+
+- This component uses `React.lazy` and `React.Suspense` for code splitting
+- The remote component is memoized based on `url`, `scope`, and `module` values
+- All additional props passed to `CapImportMFEComponent` are forwarded to the imported remote component

package/dist/CapImportMFEComponent/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './CapImportMFEComponent';
+export type { CapImportMFEComponentProps, CapImportMFESystem, } from './CapImportMFEComponent.interfaces';
+//# sourceMappingURL=index.d.ts.map

package/dist/CapImportMFEComponent/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapImportMFEComponent/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,YAAY,EACV,0BAA0B,EAC1B,kBAAkB,GACnB,MAAM,oCAAoC,CAAC"}