Try to fix other operators

Author: AlexandrHoroshih

public-types/reflect.d.ts

@@ -104,8 +104,12 @@ export function reflect<
  * });
  * ```
  */
-export function createReflect<Props, Bind extends BindFromProps<Props>>(
-  component: ComponentType<Props>,
+export function createReflect<
+  View extends ComponentType<any>,
+  Props extends ComponentProps<View>,
+  Bind extends BindFromProps<Props>,
+>(
+  component: View,
 ): (
   bind: Bind,
   features?: {
@@ -143,7 +147,8 @@ type ReflectedProps<Item, Bind> = Item & PropsifyBind<Bind>;
  * ```
  */
 export function list<
-  Props,
+  View extends ComponentType<any>,
+  Props extends ComponentProps<View>,
   Item,
   MapItem extends {
     [M in keyof Omit<Props, keyof Bind>]: (item: Item, index: number) => Props[M];
@@ -153,7 +158,7 @@ export function list<
   config: ReflectedProps<Item, Bind> extends Props
     ? {
         source: Store<Item[]>;
-        view: ComponentType<Props>;
+        view: View;
         bind?: Bind;
         mapItem?: MapItem;
         getKey?: (item: Item) => React.Key;
@@ -165,7 +170,7 @@ export function list<
       }
     : {
         source: Store<Item[]>;
-        view: ComponentType<Props>;
+        view: View;
         bind?: Bind;
         mapItem: MapItem;
         getKey?: (item: Item) => React.Key;

type-tests/types-create-reflect.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import { createReflect } from '@effector/reflect';
+import { Button } from '@mantine/core';
 import { createEvent, createStore } from 'effector';
 import React from 'react';
 import { expectType } from 'tsd';
@@ -24,3 +25,18 @@ import { expectType } from 'tsd';
 
   expectType<React.FC>(ReflectedInput);
 }
+
+// Edge-case: Mantine Button with weird polymorphic factory
+{
+  const clicked = createEvent<number>();
+
+  const reflectButton = createReflect(Button<'button'>);
+
+  const ReflectedButton = reflectButton({
+    children: 'Click me',
+    color: 'red',
+    onClick: (e) => clicked(e.clientX),
+  });
+
+  <ReflectedButton component="button" />;
+}

type-tests/types-list.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import { list } from '@effector/reflect';
+import { Button } from '@mantine/core';
 import { createEvent, createStore } from 'effector';
 import React from 'react';
 import { expectType } from 'tsd';
@@ -179,3 +180,19 @@ import { expectType } from 'tsd';
 
   expectType<React.FC>(List);
 }
+
+// Edge-case: Mantine Button with weird polymorphic factory
+{
+  const clicked = createEvent<number>();
+
+  const List = list({
+    source: createStore<string[]>([]),
+    view: Button<'button'>,
+    mapItem: {
+      children: (item) => item,
+      onClick: (_item) => (e) => clicked(e.clientX),
+    },
+  });
+
+  expectType<React.FC>(List);
+}

type-tests/types-variant.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import { reflect, variant } from '@effector/reflect';
+import { Button } from '@mantine/core';
 import { createEvent, createStore } from 'effector';
 import React, { FC, PropsWithChildren, ReactNode } from 'react';
 import { expectType } from 'tsd';
@@ -249,3 +250,28 @@ import { expectType } from 'tsd';
     );
   };
 }
+
+// Edge-case: Mantine Button with weird polymorphic factory (failing)
+//
+// This case is failing because Button has a weird polymorphic factory
+// that is not compatible with `variant` as of now
+// Test is left here for the future reference, in case if it will be possible to fix
+{
+  const ReflectedVariant = variant({
+    source: createStore<'button' | 'a'>('button'),
+    cases: {
+      // @ts-expect-error
+      button: Button<'button'>,
+      // @ts-expect-error
+      a: Button<'a'>,
+    },
+  });
+
+  const IfElseVariant = variant({
+    if: createStore(true),
+    // @ts-expect-error
+    then: Button<'button'>,
+    // @ts-expect-error
+    else: Button<'a'>,
+  });
+}