@mapples/render 1.0.1

package/README.md

@@ -0,0 +1,368 @@
+# @mapples/render
+
+A powerful React rendering system that enables dynamic component rendering from JSON-like component definitions. This package provides a flexible way to build dynamic UIs by defining component trees as data structures and rendering them with registered React components.
+
+## Features
+
+- 🎨 **Dynamic Component Rendering**: Render React components from JSON-like definitions
+- 📦 **Component Registration**: Register and manage reusable components
+- 🔗 **Data Binding**: Bind dynamic data to component properties
+- 🌳 **Nested Components**: Support for complex component hierarchies
+- ⚡ **Performance Optimized**: Memoized components for optimal rendering performance
+- 📘 **TypeScript Support**: Full TypeScript support with comprehensive type definitions
+
+## Installation
+
+```bash
+npm install @mapples/render
+# or
+yarn add @mapples/render
+```
+
+## Quick Start
+
+### 1. Register Components
+
+First, create a registry of components that can be rendered:
+
+```tsx
+import { Button, Text, View } from 'react-native';
+
+const registeredComponents = {
+  Button: { Component: Button },
+  Text: { Component: Text },
+  View: { Component: View },
+  // Add more components as needed
+};
+```
+
+### 2. Wrap with RenderProvider
+
+Wrap your application with the `RenderProvider` to make components available:
+
+```tsx
+import { RenderProvider } from '@mapples/render';
+
+const App = () => (
+  <RenderProvider components={registeredComponents}>
+    <YourAppContent />
+  </RenderProvider>
+);
+```
+
+### 3. Define Component Structure
+
+Create a component definition object:
+
+```tsx
+const rootComponent = {
+  id: 'root',
+  type: 'View',
+  props: {
+    style: { flex: 1, padding: 20 },
+  },
+  children: ['header', 'content'],
+  childComponents: {
+    header: {
+      id: 'header',
+      type: 'Text',
+      props: {
+        children: 'Welcome to Mapples Render!',
+        style: { fontSize: 24, fontWeight: 'bold' },
+      },
+      children: [],
+      childComponents: {},
+    },
+    content: {
+      id: 'content',
+      type: 'View',
+      props: { style: { marginTop: 20 } },
+      children: ['button'],
+      childComponents: {
+        button: {
+          id: 'button',
+          type: 'Button',
+          props: {
+            title: 'Click Me',
+            onPress: () => console.log('Button pressed!'),
+          },
+          children: [],
+          childComponents: {},
+        },
+      },
+    },
+  },
+};
+```
+
+### 4. Render the Component
+
+Use the `Render` component to render your component tree:
+
+```tsx
+import { Render } from '@mapples/render';
+
+const YourAppContent = () => <Render root={rootComponent} />;
+```
+
+## API Reference
+
+### Components
+
+#### `Render`
+
+The main component for rendering component trees from definitions.
+
+**Props:**
+
+- `root: RenderComponentType` - The root component definition to render
+- `CustomRenderComponent?: FC<RenderComponentType>` - Optional custom render component
+
+**Example:**
+
+```tsx
+<Render root={componentDefinition} />
+```
+
+#### `RenderProvider`
+
+Provider component that makes registered components available to the render system.
+
+**Props:**
+
+- `components: RegisteredComponents` - Map of registered components
+- `children: ReactNode` - Child components
+
+**Example:**
+
+```tsx
+<RenderProvider components={registeredComponents}>
+  <App />
+</RenderProvider>
+```
+
+#### `RenderComponent`
+
+Default implementation for rendering individual components. This is used internally by the `Render` component.
+
+### Hooks
+
+#### `useRender()`
+
+Hook to access the render context and registered components.
+
+**Returns:**
+
+- `RenderContextType` - The render context containing registered components
+
+**Example:**
+
+```tsx
+const { components } = useRender();
+const ButtonComponent = components['Button']?.Component;
+```
+
+### Types
+
+#### `RenderComponentType`
+
+Core interface representing a renderable component:
+
+```tsx
+interface RenderComponentType {
+  id: string; // Unique identifier
+  type: string; // Component type name
+  props: AnyObject & { zIndex?: number }; // Component props
+  children: string[]; // Child component IDs
+  childComponents: ChildComponents; // Child component definitions
+  dataProps?: DataProps; // Data property bindings
+  actionProps?: ActionPropsMap; // Action property configurations
+}
+```
+
+#### `DataProp`
+
+Configuration for data properties:
+
+```tsx
+interface DataProp {
+  key: string; // Data key identifier
+  active: boolean; // Whether the property is active
+}
+```
+
+#### `ActionProps`
+
+Configuration for action properties:
+
+```tsx
+interface ActionProps {
+  type?: string; // Action type
+  dataProp?: string; // Data property key
+}
+```
+
+## Advanced Usage
+
+### Data Binding
+
+Bind dynamic data to component properties using `dataProps`:
+
+```tsx
+const componentWithData = {
+  id: 'dynamic-text',
+  type: 'Text',
+  props: { children: 'Default Text' },
+  dataProps: {
+    children: {
+      key: 'userName',
+      active: true,
+    },
+  },
+  children: [],
+  childComponents: {},
+};
+```
+
+### Custom Render Component
+
+Override the default rendering behavior with a custom component:
+
+```tsx
+const CustomRenderer = ({ type, props, children }) => (
+  <div className={`custom-${type}`} {...props}>
+    {children}
+  </div>
+);
+
+<Render root={componentDefinition} CustomRenderComponent={CustomRenderer} />;
+```
+
+## Performance Considerations
+
+- Components are automatically memoized to prevent unnecessary re-renders
+- Use stable component IDs to maintain proper memoization
+- Consider component tree depth for optimal performance
+- Register only the components you need to reduce bundle size
+
+## Error Handling
+
+The render system gracefully handles missing components by returning `null` instead of throwing errors. Always ensure your component types are properly registered in the `RenderProvider`.
+
+## Integration with Other Mapples Packages
+
+This package integrates seamlessly with other Mapples packages:
+
+- **@mapples/state**: For data binding and state management
+- **@mapples/types**: For shared type definitions
+- **@mapples/ui**: For pre-built UI components
+
+## Examples
+
+### Simple Form
+
+```tsx
+const formComponent = {
+  id: 'form',
+  type: 'View',
+  props: { style: { padding: 20 } },
+  children: ['title', 'input', 'button'],
+  childComponents: {
+    title: {
+      id: 'title',
+      type: 'Text',
+      props: { children: 'Contact Form', style: { fontSize: 20 } },
+      children: [],
+      childComponents: {},
+    },
+    input: {
+      id: 'input',
+      type: 'TextInput',
+      props: {
+        placeholder: 'Enter your name',
+        style: { borderWidth: 1, padding: 10, marginVertical: 10 },
+      },
+      children: [],
+      childComponents: {},
+    },
+    button: {
+      id: 'button',
+      type: 'Button',
+      props: {
+        title: 'Submit',
+        onPress: () => console.log('Form submitted'),
+      },
+      children: [],
+      childComponents: {},
+    },
+  },
+};
+```
+
+### Nested Layout
+
+```tsx
+const layoutComponent = {
+  id: 'layout',
+  type: 'View',
+  props: { style: { flex: 1 } },
+  children: ['header', 'content', 'footer'],
+  childComponents: {
+    header: {
+      id: 'header',
+      type: 'View',
+      props: { style: { height: 60, backgroundColor: '#f0f0f0' } },
+      children: ['header-text'],
+      childComponents: {
+        'header-text': {
+          id: 'header-text',
+          type: 'Text',
+          props: {
+            children: 'Header',
+            style: { textAlign: 'center', marginTop: 20 },
+          },
+          children: [],
+          childComponents: {},
+        },
+      },
+    },
+    content: {
+      id: 'content',
+      type: 'View',
+      props: { style: { flex: 1, padding: 20 } },
+      children: [],
+      childComponents: {},
+    },
+    footer: {
+      id: 'footer',
+      type: 'View',
+      props: { style: { height: 60, backgroundColor: '#f0f0f0' } },
+      children: ['footer-text'],
+      childComponents: {
+        'footer-text': {
+          id: 'footer-text',
+          type: 'Text',
+          props: {
+            children: 'Footer',
+            style: { textAlign: 'center', marginTop: 20 },
+          },
+          children: [],
+          childComponents: {},
+        },
+      },
+    },
+  },
+};
+```
+
+## Contributing
+
+Contributions are welcome! Please read our contributing guidelines and submit pull requests to our repository.
+
+## License
+
+MIT License - see the LICENSE file for details.
+
+## Support
+
+For support and questions, please visit our [GitHub repository](https://github.com/mapplesorg/mapples-kit) or contact us at [mapples.org](https://mapples.org).

package/dist/components/Render.d.ts

@@ -0,0 +1,49 @@
+import { RenderProps } from '../types';
+/**
+ * Main render component that renders a component tree from a root component definition.
+ *
+ * This is the primary entry point for the render system. It takes a root component
+ * definition and renders it using either a custom render component or the default
+ * RenderComponent implementation.
+ *
+ * @param {RenderProps} props - The render props
+ *
+ * @example
+ * ```tsx
+ * const rootComponent = {
+ *   id: 'root',
+ *   type: 'View',
+ *   props: { style: { flex: 1 } },
+ *   children: ['child1'],
+ *   childComponents: {
+ *     child1: {
+ *       id: 'child1',
+ *       type: 'Text',
+ *       props: { children: 'Hello World' },
+ *       children: [],
+ *       childComponents: {}
+ *     }
+ *   }
+ * };
+ *
+ * const App = () => (
+ *   <RenderProvider components={registeredComponents}>
+ *     <Render root={rootComponent} />
+ *   </RenderProvider>
+ * );
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Using a custom render component
+ * const CustomRenderer = (props) => <div className="custom">{props.children}</div>;
+ *
+ * <Render
+ *   root={rootComponent}
+ *   CustomRenderComponent={CustomRenderer}
+ * />
+ * ```
+ */
+declare const Render: ({ root, CustomRenderComponent }: RenderProps) => import("react").JSX.Element;
+export default Render;
+//# sourceMappingURL=Render.d.ts.map

package/dist/components/Render.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Render.d.ts","sourceRoot":"","sources":["../../src/components/Render.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAIvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,QAAA,MAAM,MAAM,GAAI,iCAAiC,WAAW,gCAM3D,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/Render.js

@@ -0,0 +1,51 @@
+import RenderComponent from './RenderComponent';
+/**
+ * Main render component that renders a component tree from a root component definition.
+ *
+ * This is the primary entry point for the render system. It takes a root component
+ * definition and renders it using either a custom render component or the default
+ * RenderComponent implementation.
+ *
+ * @param {RenderProps} props - The render props
+ *
+ * @example
+ * ```tsx
+ * const rootComponent = {
+ *   id: 'root',
+ *   type: 'View',
+ *   props: { style: { flex: 1 } },
+ *   children: ['child1'],
+ *   childComponents: {
+ *     child1: {
+ *       id: 'child1',
+ *       type: 'Text',
+ *       props: { children: 'Hello World' },
+ *       children: [],
+ *       childComponents: {}
+ *     }
+ *   }
+ * };
+ *
+ * const App = () => (
+ *   <RenderProvider components={registeredComponents}>
+ *     <Render root={rootComponent} />
+ *   </RenderProvider>
+ * );
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Using a custom render component
+ * const CustomRenderer = (props) => <div className="custom">{props.children}</div>;
+ *
+ * <Render
+ *   root={rootComponent}
+ *   CustomRenderComponent={CustomRenderer}
+ * />
+ * ```
+ */
+const Render = ({ root, CustomRenderComponent }) => {
+    return CustomRenderComponent ? (<CustomRenderComponent {...root}/>) : (<RenderComponent {...root}/>);
+};
+export default Render;
+//# sourceMappingURL=Render.js.map

package/dist/components/Render.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Render.js","sourceRoot":"","sources":["../../src/components/Render.tsx"],"names":[],"mappings":"AAEA,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,MAAM,MAAM,GAAG,CAAC,EAAE,IAAI,EAAE,qBAAqB,EAAe,EAAE,EAAE;IAC9D,OAAO,qBAAqB,CAAC,CAAC,CAAC,CAC7B,CAAC,qBAAqB,CAAC,IAAI,IAAI,CAAC,EAAG,CACpC,CAAC,CAAC,CAAC,CACF,CAAC,eAAe,CAAC,IAAI,IAAI,CAAC,EAAG,CAC9B,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/RenderComponent.d.ts

@@ -0,0 +1,40 @@
+import { FC } from 'react';
+import { RenderComponentType } from '../types';
+/**
+ * Default implementation of a renderable component.
+ *
+ * This component handles the rendering of individual components within the render tree.
+ * It resolves the component type from registered components, applies data properties,
+ * and recursively renders child components.
+ *
+ * The component is memoized for performance optimization to prevent unnecessary
+ * re-renders when props haven't changed.
+ *
+ * @param {RenderComponentType} props - The component definition
+ * @param {string} props.type - The component type name (must be registered)
+ * @param {AnyObject & { zIndex?: number }} props.props - Component props
+ * @param {DataProps} [props.dataProps] - Optional data property bindings
+ * @param {string[]} props.children - Array of child component IDs
+ * @param {ChildComponents} props.childComponents - Map of child components
+ *
+ * @returns {JSX.Element | null} The rendered component or null if component type not found
+ *
+ * @example
+ * ```tsx
+ * const componentDef = {
+ *   id: 'button1',
+ *   type: 'Button',
+ *   props: { title: 'Click me', onPress: handlePress },
+ *   dataProps: { title: { key: 'buttonText', active: true } },
+ *   children: [],
+ *   childComponents: {}
+ * };
+ *
+ * <RenderComponent {...componentDef} />
+ * ```
+ *
+ * @throws {Error} If the component type is not registered in the render context
+ */
+declare const RenderComponent: FC<RenderComponentType>;
+export default RenderComponent;
+//# sourceMappingURL=RenderComponent.d.ts.map

package/dist/components/RenderComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RenderComponent.d.ts","sourceRoot":"","sources":["../../src/components/RenderComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAQ,MAAM,OAAO,CAAC;AAMjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAE/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,mBAAmB,CA+B5C,CAAC;AAQF,eAAe,eAAe,CAAC"}

package/dist/components/RenderComponent.js

@@ -0,0 +1,61 @@
+import { memo } from 'react';
+import { useDataProps } from '@mapples/state';
+import { map } from 'lodash';
+import { useRender } from '../hooks';
+/**
+ * Default implementation of a renderable component.
+ *
+ * This component handles the rendering of individual components within the render tree.
+ * It resolves the component type from registered components, applies data properties,
+ * and recursively renders child components.
+ *
+ * The component is memoized for performance optimization to prevent unnecessary
+ * re-renders when props haven't changed.
+ *
+ * @param {RenderComponentType} props - The component definition
+ * @param {string} props.type - The component type name (must be registered)
+ * @param {AnyObject & { zIndex?: number }} props.props - Component props
+ * @param {DataProps} [props.dataProps] - Optional data property bindings
+ * @param {string[]} props.children - Array of child component IDs
+ * @param {ChildComponents} props.childComponents - Map of child components
+ *
+ * @returns {JSX.Element | null} The rendered component or null if component type not found
+ *
+ * @example
+ * ```tsx
+ * const componentDef = {
+ *   id: 'button1',
+ *   type: 'Button',
+ *   props: { title: 'Click me', onPress: handlePress },
+ *   dataProps: { title: { key: 'buttonText', active: true } },
+ *   children: [],
+ *   childComponents: {}
+ * };
+ *
+ * <RenderComponent {...componentDef} />
+ * ```
+ *
+ * @throws {Error} If the component type is not registered in the render context
+ */
+const RenderComponent = ({ type, props, dataProps, children, childComponents, }) => {
+    const { components } = useRender();
+    const propsWithData = useDataProps(dataProps);
+    const Component = components[type].Component;
+    if (!Component) {
+        return null;
+    }
+    const renderChildren = (child) => {
+        const renderComponentProps = childComponents[child];
+        return (<RenderComponentMemorized {...renderComponentProps} key={renderComponentProps.id}/>);
+    };
+    return (<Component {...props} {...propsWithData}>
+      {map(children, renderChildren)}
+    </Component>);
+};
+/**
+ * Memoized version of RenderComponent for performance optimization.
+ * Prevents unnecessary re-renders when component props haven't changed.
+ */
+const RenderComponentMemorized = memo(RenderComponent);
+export default RenderComponent;
+//# sourceMappingURL=RenderComponent.js.map

package/dist/components/RenderComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RenderComponent.js","sourceRoot":"","sources":["../../src/components/RenderComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAM,IAAI,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAE7B,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAGrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,eAAe,GAA4B,CAAC,EAChD,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,eAAe,GAChB,EAAE,EAAE;IACH,MAAM,EAAE,UAAU,EAAE,GAAG,SAAS,EAAE,CAAC;IACnC,MAAM,aAAa,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAE9C,MAAM,SAAS,GAAG,UAAU,CAAC,IAA+B,CAAC,CAAC,SAAS,CAAC;IAExE,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,cAAc,GAAG,CAAC,KAAa,EAAE,EAAE;QACvC,MAAM,oBAAoB,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;QACpD,OAAO,CACL,CAAC,wBAAwB,CACvB,IAAI,oBAAoB,CAAC,CACzB,GAAG,CAAC,CAAC,oBAAoB,CAAC,EAAE,CAAC,EAC7B,CACH,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,SAAS,CAAC,IAAI,KAAK,CAAC,CAAC,IAAI,aAAa,CAAC,CACtC;MAAA,CAAC,GAAG,CAAC,QAAQ,EAAE,cAAc,CAAC,CAChC;IAAA,EAAE,SAAS,CAAC,CACb,CAAC;AACJ,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,wBAAwB,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC;AAEvD,eAAe,eAAe,CAAC"}

package/dist/components/RenderProvider.d.ts

@@ -0,0 +1,31 @@
+import { FC, PropsWithChildren } from 'react';
+import { RenderContextType } from '../types';
+/**
+ * Provider component that makes registered components available to the render system.
+ *
+ * This component wraps your application and provides the registered components
+ * to all child components through React context. It's essential for the render
+ * system to function properly as it makes components available for dynamic rendering.
+ *
+ * @param {PropsWithChildren<RenderContextType>} props - The component props
+ * @param {RegisteredComponents} props.components - Map of registered components
+ * @param {ReactNode} props.children - Child components to render
+ *
+ * @example
+ * ```tsx
+ * const registeredComponents = {
+ *   Button: { Component: MyButton },
+ *   Text: { Component: MyText },
+ *   View: { Component: MyView }
+ * };
+ *
+ * const App = () => (
+ *   <RenderProvider components={registeredComponents}>
+ *     <Render root={rootComponent} />
+ *   </RenderProvider>
+ * );
+ * ```
+ */
+declare const RenderProvider: FC<PropsWithChildren<RenderContextType>>;
+export default RenderProvider;
+//# sourceMappingURL=RenderProvider.d.ts.map

package/dist/components/RenderProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RenderProvider.d.ts","sourceRoot":"","sources":["../../src/components/RenderProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAS5D,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/RenderProvider.js

@@ -0,0 +1,34 @@
+import { RenderContextProvider } from '../context';
+/**
+ * Provider component that makes registered components available to the render system.
+ *
+ * This component wraps your application and provides the registered components
+ * to all child components through React context. It's essential for the render
+ * system to function properly as it makes components available for dynamic rendering.
+ *
+ * @param {PropsWithChildren<RenderContextType>} props - The component props
+ * @param {RegisteredComponents} props.components - Map of registered components
+ * @param {ReactNode} props.children - Child components to render
+ *
+ * @example
+ * ```tsx
+ * const registeredComponents = {
+ *   Button: { Component: MyButton },
+ *   Text: { Component: MyText },
+ *   View: { Component: MyView }
+ * };
+ *
+ * const App = () => (
+ *   <RenderProvider components={registeredComponents}>
+ *     <Render root={rootComponent} />
+ *   </RenderProvider>
+ * );
+ * ```
+ */
+const RenderProvider = ({ components, children, }) => {
+    return (<RenderContextProvider value={{ components }}>
+      {children}
+    </RenderContextProvider>);
+};
+export default RenderProvider;
+//# sourceMappingURL=RenderProvider.js.map

package/dist/components/RenderProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RenderProvider.js","sourceRoot":"","sources":["../../src/components/RenderProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAGnD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,cAAc,GAA6C,CAAC,EAChE,UAAU,EACV,QAAQ,GACT,EAAE,EAAE;IACH,OAAO,CACL,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,CAC3C;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,qBAAqB,CAAC,CACzB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Render } from './Render';
+export { default as RenderComponent } from './RenderComponent';
+export { default as RenderProvider } from './RenderProvider';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/index.js

@@ -0,0 +1,4 @@
+export { default as Render } from './Render';
+export { default as RenderComponent } from './RenderComponent';
+export { default as RenderProvider } from './RenderProvider';
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/context/RenderContext.d.ts

@@ -0,0 +1,30 @@
+import { RenderContextType } from '../types';
+/**
+ * React context for the render system.
+ * Provides access to registered components throughout the component tree.
+ *
+ * This context is used by the RenderProvider to make registered components
+ * available to all child components in the render tree.
+ *
+ * @example
+ * ```tsx
+ * const { components } = useContext(RenderContext);
+ * const Component = components['Button']?.Component;
+ * ```
+ */
+declare const RenderContext: import("react").Context<RenderContextType>;
+/**
+ * Provider component for the RenderContext.
+ * Use this to wrap your application and provide registered components
+ * to the render system.
+ *
+ * @example
+ * ```tsx
+ * <RenderContextProvider value={{ components: registeredComponents }}>
+ *   <App />
+ * </RenderContextProvider>
+ * ```
+ */
+export declare const RenderContextProvider: import("react").Provider<RenderContextType>;
+export default RenderContext;
+//# sourceMappingURL=RenderContext.d.ts.map

package/dist/context/RenderContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RenderContext.d.ts","sourceRoot":"","sources":["../../src/context/RenderContext.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,aAAa,4CAEjB,CAAC;AAEH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,qBAAqB,6CAAyB,CAAC;AAE5D,eAAe,aAAa,CAAC"}

package/dist/context/RenderContext.js

@@ -0,0 +1,32 @@
+import { createContext } from 'react';
+/**
+ * React context for the render system.
+ * Provides access to registered components throughout the component tree.
+ *
+ * This context is used by the RenderProvider to make registered components
+ * available to all child components in the render tree.
+ *
+ * @example
+ * ```tsx
+ * const { components } = useContext(RenderContext);
+ * const Component = components['Button']?.Component;
+ * ```
+ */
+const RenderContext = createContext({
+    components: {},
+});
+/**
+ * Provider component for the RenderContext.
+ * Use this to wrap your application and provide registered components
+ * to the render system.
+ *
+ * @example
+ * ```tsx
+ * <RenderContextProvider value={{ components: registeredComponents }}>
+ *   <App />
+ * </RenderContextProvider>
+ * ```
+ */
+export const RenderContextProvider = RenderContext.Provider;
+export default RenderContext;
+//# sourceMappingURL=RenderContext.js.map

package/dist/context/RenderContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RenderContext.js","sourceRoot":"","sources":["../../src/context/RenderContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC;;;;;;;;;;;;GAYG;AACH,MAAM,aAAa,GAAG,aAAa,CAAoB;IACrD,UAAU,EAAE,EAAE;CACf,CAAC,CAAC;AAEH;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,aAAa,CAAC,QAAQ,CAAC;AAE5D,eAAe,aAAa,CAAC"}

package/dist/context/index.d.ts

@@ -0,0 +1,3 @@
+export { default as RenderContext } from './RenderContext';
+export * from './RenderContext';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/context/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,cAAc,iBAAiB,CAAC"}

package/dist/context/index.js

@@ -0,0 +1,3 @@
+export { default as RenderContext } from './RenderContext';
+export * from './RenderContext';
+//# sourceMappingURL=index.js.map

package/dist/context/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/context/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,cAAc,iBAAiB,CAAC"}

package/dist/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { default as useRender } from './useRender';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/dist/hooks/index.js

@@ -0,0 +1,2 @@
+export { default as useRender } from './useRender';
+//# sourceMappingURL=index.js.map

package/dist/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/dist/hooks/useRender.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Hook to access the render context.
+ *
+ * This hook provides access to the registered components and other render
+ * context data. It should be used within components that are wrapped by
+ * a RenderProvider.
+ *
+ * @returns {RenderContextType} The render context containing registered components
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = () => {
+ *   const { components } = useRender();
+ *   const ButtonComponent = components['Button']?.Component;
+ *
+ *   return ButtonComponent ? <ButtonComponent /> : null;
+ * };
+ * ```
+ *
+ * @throws {Error} If used outside of a RenderProvider context
+ */
+declare const useRender: () => import("..").RenderContextType;
+export default useRender;
+//# sourceMappingURL=useRender.d.ts.map

package/dist/hooks/useRender.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRender.d.ts","sourceRoot":"","sources":["../../src/hooks/useRender.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,SAAS,sCAEd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/hooks/useRender.js

@@ -0,0 +1,28 @@
+import { useContext } from 'react';
+import { RenderContext } from '../context';
+/**
+ * Hook to access the render context.
+ *
+ * This hook provides access to the registered components and other render
+ * context data. It should be used within components that are wrapped by
+ * a RenderProvider.
+ *
+ * @returns {RenderContextType} The render context containing registered components
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = () => {
+ *   const { components } = useRender();
+ *   const ButtonComponent = components['Button']?.Component;
+ *
+ *   return ButtonComponent ? <ButtonComponent /> : null;
+ * };
+ * ```
+ *
+ * @throws {Error} If used outside of a RenderProvider context
+ */
+const useRender = () => {
+    return useContext(RenderContext);
+};
+export default useRender;
+//# sourceMappingURL=useRender.js.map

package/dist/hooks/useRender.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRender.js","sourceRoot":"","sources":["../../src/hooks/useRender.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,UAAU,CAAC,aAAa,CAAC,CAAC;AACnC,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * from './types';
+export * from './context';
+export * from './components';
+export * from './hooks';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,5 @@
+export * from './types';
+export * from './context';
+export * from './components';
+export * from './hooks';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}

package/dist/types/index.d.ts

@@ -0,0 +1,85 @@
+import { FC } from 'react';
+import { DataProps, RegisteredComponents } from '@mapples/types';
+/**
+ * A generic object type that can hold any key-value pairs.
+ * Used for component props and other dynamic data structures.
+ */
+export type AnyObject = Record<string, any>;
+/**
+ * A record of child components indexed by their IDs.
+ * Each child component is represented as a RenderComponentType.
+ */
+export type ChildComponents = Record<string, RenderComponentType>;
+/**
+ * Configuration for action properties that define component interactions.
+ *
+ * @interface ActionProps
+ * @property {string} [type] - The type of action to perform
+ * @property {string} [dataProp] - The data property key to bind to this action
+ */
+export interface ActionProps {
+    type?: string;
+    dataProp?: string;
+}
+/**
+ * A map of action properties indexed by their names.
+ * Each entry contains configuration for component interactions.
+ */
+export type ActionPropsMap = Partial<Record<string, ActionProps>>;
+/**
+ * Represents a renderable component with all its configuration and children.
+ * This is the core type used throughout the render system.
+ *
+ * @interface RenderComponentType
+ * @property {string} id - Unique identifier for this component instance
+ * @property {string} type - The component type name (must be registered in components)
+ * @property {AnyObject & { zIndex?: number }} props - Component props including optional zIndex
+ * @property {AnyObject} [_canvasProps] - Optional drag-and-drop configuration for canvas interactions
+ * @property {string[]} children - Array of child component IDs
+ * @property {ChildComponents} childComponents - Map of child components by their IDs
+ * @property {DataProps} [dataProps] - Optional data property bindings
+ * @property {ActionPropsMap} [actionProps] - Optional action property configurations
+ */
+export interface RenderComponentType {
+    id: string;
+    type: string;
+    props: AnyObject & {
+        zIndex?: number;
+    };
+    _canvasProps?: AnyObject;
+    children: string[];
+    childComponents: ChildComponents;
+    dataProps?: DataProps;
+    actionProps?: ActionPropsMap;
+}
+/**
+ * Represents the complete render DOM structure.
+ * Extends ChildComponents with a special 'root' component.
+ *
+ * @interface RenderDom
+ * @property {RenderComponentType} root - The root component of the render tree
+ */
+export interface RenderDom extends ChildComponents {
+    root: RenderComponentType;
+}
+/**
+ * Props for the main Render component.
+ *
+ * @type RenderProps
+ * @property {RenderComponentType} root - The root component to render
+ * @property {FC<RenderComponentType>} [CustomRenderComponent] - Optional custom render component to override default rendering
+ */
+export type RenderProps = Pick<RenderDom, 'root'> & {
+    CustomRenderComponent?: FC<RenderComponentType>;
+};
+/**
+ * Context type for the render system.
+ * Provides access to registered components throughout the component tree.
+ *
+ * @interface RenderContextType
+ * @property {RegisteredComponents} components - Map of registered components available for rendering
+ */
+export interface RenderContextType {
+    components: RegisteredComponents;
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAE3B,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAEjE;;;GAGG;AAEH,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAE5C;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;AAElE;;;;;;GAMG;AACH,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC;AAElE;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,SAAS,GAAG;QAAE,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,eAAe,EAAE,eAAe,CAAC;IACjC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,cAAc,CAAC;CAC9B;AAED;;;;;;GAMG;AACH,MAAM,WAAW,SAAU,SAAQ,eAAe;IAChD,IAAI,EAAE,mBAAmB,CAAC;CAC3B;AAED;;;;;;GAMG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,GAAG;IAClD,qBAAqB,CAAC,EAAE,EAAE,CAAC,mBAAmB,CAAC,CAAC;CACjD,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,WAAW,iBAAiB;IAChC,UAAU,EAAE,oBAAoB,CAAC;CAClC"}

package/dist/types/index.js

@@ -0,0 +1 @@
+//# sourceMappingURL=index.js.map

package/dist/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@mapples/render",
+  "version": "1.0.1",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc -b tsconfig.build.json",
+    "lint": "eslint .",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "author": {
+    "name": "Oleksandr Soloviov",
+    "url": "https://mapples.org/people/olek_soloviov"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mapplesorg/mapples-open-kit.git",
+    "directory": "packages/@mapples/render"
+  },
+  "dependencies": {
+    "lodash": "^4.17.21"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0 <20.0.0",
+    "react-native": ">=0.71.0"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.17.0",
+    "@types/react": ">=18.0.0 <20.0.0",
+    "typescript": "~5.9.2"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "package.json"
+  ]
+}