@genesislcap/foundation-react-utils 14.354.2-FUI-2341-3.1

package/README.md

@@ -0,0 +1,42 @@
+# Genesis Foundation React Utils
+
+The `@genesislcap/foundation-react-utils` package provides a collection of utility functions and helpers designed to facilitate React development within Genesis applications. It aims to enhance productivity by offering reusable React-specific solutions for patterns and problems encountered across different projects.
+
+## API Documentation
+
+For more detailed information on API and configurations, please refer to the API documentation in the `docs/api` directory (to be generated).
+
+## Features
+
+This is a new module. Features and utilities will be added as they are developed. This module will include:
+
+- React-specific utilities for Genesis applications
+- Helper functions for common React patterns
+- Utilities for improving layout functionality in React applications
+
+## Installation
+
+To include `@genesislcap/foundation-react-utils` in your project, add it as a dependency in your `package.json` file and follow your project's routine for dependency installation.
+
+```json
+{
+  "dependencies": {
+    "@genesislcap/foundation-react-utils": "latest"
+  }
+}
+```
+
+## Usage
+
+```typescript
+import { /* utilities will be exported here */ } from '@genesislcap/foundation-react-utils';
+```
+
+## License
+
+Note: this project provides front-end dependencies and uses licensed components listed in the next section; thus, licenses for those components are required during development. Contact [Genesis Global](https://genesis.global/contact-us/) for more details.
+
+### Licensed components
+
+Genesis low-code platform
+

package/api-extractor.json

@@ -0,0 +1,5 @@
+{
+	"$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+	"extends": "../../../api-extractor.json"
+}
+

package/custom-elements-manifest.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  /** Globs to analyze */
+  globs: ['src/**/*.ts'],
+  /** Directory to output CEM to */
+  outdir: './dist',
+  /** Run in dev mode, provides extra logging */
+  dev: false,
+  /** Enable special handling for FastElement */
+  fast: true,
+  /** Include third party custom elements manifests */
+  dependencies: true,
+  /** Output CEM path to `package.json`, defaults to true */
+  packagejson: true,
+};

package/dist/custom-elements.json

@@ -0,0 +1,48 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "VERSION",
+          "type": {
+            "text": "string"
+          },
+          "default": "'14.354.2'",
+          "description": "Package version",
+          "privacy": "public"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "VERSION",
+          "declaration": {
+            "name": "VERSION",
+            "module": "src/index.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "reactFactory",
+          "declaration": {
+            "name": "reactFactory",
+            "module": "./react-layout-factory"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "reactFactoryWithProvider",
+          "declaration": {
+            "name": "reactFactoryWithProvider",
+            "module": "./react-layout-factory"
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/dts/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @genesislcap/foundation-react-utils
+ *
+ * Utility functions and helpers for building React applications with Genesis Foundation.
+ *
+ * This module serves as a central location for React-specific utilities.
+ * Exports will be added here as utilities are developed.
+ */
+/**
+ * Package version
+ * @public
+ */
+export declare const VERSION = "14.354.2";
+export { reactFactory, reactFactoryWithProvider } from './react-layout-factory';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;;GAGG;AACH,eAAO,MAAM,OAAO,aAAa,CAAC;AAElC,OAAO,EAAE,YAAY,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/dts/react-layout-factory.d.ts

@@ -0,0 +1,49 @@
+import { ComponentFactory } from '@genesislcap/foundation-layout';
+import * as React from 'react';
+/**
+ * Creates a factory function for rendering React components in layout items.
+ *
+ * @param Component - React component to render
+ * @param props - Optional props to pass to the component
+ * @returns ComponentFactory compatible with foundation-layout
+ *
+ * @example
+ * ```tsx
+ * <foundation-layout-item
+ *   registration="my-component"
+ *   title="My Component"
+ *   factory={reactFactory(MyComponent, { someProp: 'value' })}
+ * />
+ * ```
+ */
+export declare function reactFactory<P = {}>(Component: React.ComponentType<P>, props?: P): ComponentFactory;
+/**
+ * Creates a factory function that wraps a React component with a provider (e.g., Redux Provider, Context Provider).
+ *
+ * @param Component - React component to render
+ * @param Wrapper - Wrapper component (e.g., Redux Provider, Context Provider)
+ * @param wrapperProps - Props for the wrapper component
+ * @param componentProps - Optional props for the component
+ * @returns ComponentFactory compatible with foundation-layout
+ *
+ * @example
+ * ```tsx
+ * import { Provider } from 'react-redux';
+ * import { store } from './store';
+ *
+ * <foundation-layout-item
+ *   registration="my-component"
+ *   title="My Component"
+ *   factory={reactFactoryWithProvider(
+ *     MyComponent,
+ *     Provider,
+ *     { store },
+ *     { someProp: 'value' }
+ *   )}
+ * />
+ * ```
+ */
+export declare function reactFactoryWithProvider<CP = {}, WP = {}>(Component: React.ComponentType<CP>, Wrapper: React.ComponentType<WP & {
+    children: React.ReactNode;
+}>, wrapperProps: WP, componentProps?: CP): ComponentFactory;
+//# sourceMappingURL=react-layout-factory.d.ts.map

package/dist/dts/react-layout-factory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-layout-factory.d.ts","sourceRoot":"","sources":["../../src/react-layout-factory.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAElE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,YAAY,CAAC,CAAC,GAAG,EAAE,EACjC,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,EACjC,KAAK,CAAC,EAAE,CAAC,GACR,gBAAgB,CAUlB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,wBAAwB,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,EACvD,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,EAAE,CAAC,EAClC,OAAO,EAAE,KAAK,CAAC,aAAa,CAAC,EAAE,GAAG;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC,EAChE,YAAY,EAAE,EAAE,EAChB,cAAc,CAAC,EAAE,EAAE,GAClB,gBAAgB,CAclB"}

package/dist/dts/tsdoc-metadata.json

@@ -0,0 +1,11 @@
+// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
+// It should be published with your NPM package.  It should not be tracked by Git.
+{
+  "tsdocVersion": "0.12",
+  "toolPackages": [
+    {
+      "packageName": "@microsoft/api-extractor",
+      "packageVersion": "7.52.10"
+    }
+  ]
+}

package/dist/esm/index.js

@@ -0,0 +1,14 @@
+/**
+ * @genesislcap/foundation-react-utils
+ *
+ * Utility functions and helpers for building React applications with Genesis Foundation.
+ *
+ * This module serves as a central location for React-specific utilities.
+ * Exports will be added here as utilities are developed.
+ */
+/**
+ * Package version
+ * @public
+ */
+export const VERSION = '14.354.2';
+export { reactFactory, reactFactoryWithProvider } from './react-layout-factory';

package/dist/esm/react-layout-factory.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createRoot } from 'react-dom/client';
+/**
+ * Creates a factory function for rendering React components in layout items.
+ *
+ * @param Component - React component to render
+ * @param props - Optional props to pass to the component
+ * @returns ComponentFactory compatible with foundation-layout
+ *
+ * @example
+ * ```tsx
+ * <foundation-layout-item
+ *   registration="my-component"
+ *   title="My Component"
+ *   factory={reactFactory(MyComponent, { someProp: 'value' })}
+ * />
+ * ```
+ */
+export function reactFactory(Component, props) {
+    return (container) => {
+        const root = createRoot(container);
+        root.render(_jsx(Component, Object.assign({}, (props || {}))));
+        // Return cleanup function
+        return () => {
+            root.unmount();
+        };
+    };
+}
+/**
+ * Creates a factory function that wraps a React component with a provider (e.g., Redux Provider, Context Provider).
+ *
+ * @param Component - React component to render
+ * @param Wrapper - Wrapper component (e.g., Redux Provider, Context Provider)
+ * @param wrapperProps - Props for the wrapper component
+ * @param componentProps - Optional props for the component
+ * @returns ComponentFactory compatible with foundation-layout
+ *
+ * @example
+ * ```tsx
+ * import { Provider } from 'react-redux';
+ * import { store } from './store';
+ *
+ * <foundation-layout-item
+ *   registration="my-component"
+ *   title="My Component"
+ *   factory={reactFactoryWithProvider(
+ *     MyComponent,
+ *     Provider,
+ *     { store },
+ *     { someProp: 'value' }
+ *   )}
+ * />
+ * ```
+ */
+export function reactFactoryWithProvider(Component, Wrapper, wrapperProps, componentProps) {
+    return (container) => {
+        const root = createRoot(container);
+        root.render(_jsx(Wrapper, Object.assign({}, wrapperProps, { children: _jsx(Component, Object.assign({}, (componentProps || {}))) })));
+        // Return cleanup function
+        return () => {
+            root.unmount();
+        };
+    };
+}