add mapProps for reflect() to derive view props from store state and props

[Olovyannikov]

Closes #13

Adds an optional mapProps field to reflect (and createReflect, variant, list) that computes a prop for the view from a store value combined with the component's own props:

reflect({
  view: A,
  bind: { foo: $data },
  mapProps: {
    bar: { source: $data, fn: (data, props) => data[props.key] },
  },
})

• source is read reactively via useUnit, so the component re-renders only when that store changes
• fn receives the store value and the props (bound + incoming)
• derived props are made optional in the resulting component type and can still be overridden explicitly at the usage site (external props win)

Covered by runtime tests (no-ssr + ssr/scope), type tests and docs.

Example:

import { reflect } from '@effector/reflect';
import { Badge, Group, Text } from '@mantine/core';
import { IconShoppingCart } from '@tabler/icons-react';
import { combine } from 'effector';

import { CartModel } from '@/entities/Cart';

interface CartSummaryViewProps {
    /** Incoming prop — a static label set at the usage site. */
    label: string;
    /** Incoming prop — currency suffix set at the usage site. */
    currency: string;
    /** Bound from the store via `bind`. */
    count: number;
    /** Derived from store state + props via `mapProps` (optional at the usage site). */
    summary: string;
}

const CartSummaryView = ({ count, summary }: CartSummaryViewProps) => (
    <Group gap='xs' align='center'>
        <IconShoppingCart size={18} />
        <Text fw={600}>{summary}</Text>
        <Badge color={count > 0 ? 'yellow' : 'gray'} c='black'>
            {count}
        </Badge>
    </Group>
);

/**
 * `source` for `mapProps` is a single store (or object-shaped if needed), so we `combine` the two cart stores
 * we need into one shape store first.
 */
const $cartSummarySource = combine(CartModel.$cartProductsCount, CartModel.$cartTotalFinalPrice, (count, total) => ({
    count,
    total,
}));

/**
 * Example of `@effector/reflect`'s `mapProps`:
 * a prop (`summary`) is derived from store state (`source`) combined with the
 * component's own props (`label`, `currency`).
 *
 * The component re-renders only when `$cartSummarySource` changes.
 */
export const CartSummary = reflect({
    view: CartSummaryView,
    bind: {
        // plain reactive binding — `count` follows the store
        count: CartModel.$cartProductsCount,
    },
    mapProps: {
        summary: {
            source: $cartSummarySource,
            // `cart` is the `source` value (typed not loosely as `any`, so we not necessary to annotate it),
            // `props` are the component's props — contextually typed as the view's props.
            fn: (cart, props) =>
                `${props.label}: ${cart.count} шт. на ${cart.total.toLocaleString('ru-RU')} ${props.currency}`,
        },
    },
});

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[AlexandrHoroshih]

Awesome work, thank you!