@mapples/components

Placeholder package for app-specific component registration in the Mapples Open Kit. Use this package to register custom components and schematics that will be available to the render system and visual editor.

Features

• Component registry – Export a Components object compatible with @mapples/render and RegisteredComponents from @mapples/types
• Schematics – Attach component schematics (type, groupId, label, Icon, initialProps, styleKeys, props, actionProps) for visual editor integration
• TypeScript – Aligns with @mapples/types and @mapples/ui patterns

Installation

npm install @mapples/components
# or
yarn add @mapples/components

Usage

The package currently exports an empty Components registry and re-exports from schematics. Applications can:

1. Extend in-app – Import @mapples/ui (or other) components and merge with custom components, then pass the combined registry to RenderProvider (or use MapplesApp / MapplesAppProvider from @mapples/app, which use @mapples/ui’s Components by default).

2. Use this package as the app shell – Add local component definitions and schematics in src/schematics.ts (and related files), then build and consume Components from @mapples/components in your app’s provider setup.

Example: custom component registration

// In your app or in this package’s schematics
import { RegisteredComponent } from '@mapples/types';
import { MyWidget } from './MyWidget';
import { MyWidgetIcon } from './MyWidgetIcon';

const myWidgetSchematic: RegisteredComponent<MyWidgetProps> = {
  type: 'MyWidget',
  groupId: 'custom',
  label: 'My Widget',
  Component: MyWidget,
  Icon: MyWidgetIcon,
  initialProps: { title: '' },
  styleKeys: [],
  props: [],
  actionProps: [],
};

// Merge with existing Components when providing to RenderProvider
import { Components } from '@mapples/ui';
const allComponents = { ...Components, MyWidget: myWidgetSchematic };

API

• Components – Record<string, RegisteredComponent> (currently {}). Populate via this package’s schematics or by merging in your app.
• Schematics – Re-exported from ./schematics; add your component definitions here for a single place to maintain the registry.

Dependencies

• @mapples/types – For RegisteredComponent, StyleKey, PropsFormField, etc.
• react / react-native – For component implementations
• react-native-svg – For palette/icons when using SVG icons in schematics

Integration

• @mapples/app – MapplesApp and MapplesAppProvider use @mapples/ui’s Components by default; replace or merge with @mapples/components if your app defines its components in this package.
• @mapples/render – RenderProvider accepts a components prop; pass the registry you build from this package and/or @mapples/ui.

Development

npm run build
npm run type-check
npm run lint

License

MIT

Author

Oleksandr Soloviov – mapples.org