fix: story ComponentAnnotations['subcomponents'] to correctly use its own type for subcomponents rather than attempt to inherit from the component

Author: lburgess

src/story.test.ts

@@ -3,14 +3,14 @@
 /* global HTMLElement */
 import { expectTypeOf } from 'expect-type';
 import {
-  Renderer,
   Args,
   ArgsFromMeta,
   ArgsStoryFn,
   ComponentAnnotations,
   DecoratorFunction,
   LoaderFunction,
   ProjectAnnotations,
+  Renderer,
   StoryAnnotationsOrFn,
   StrictArgs,
 } from './story.js';
@@ -34,6 +34,8 @@ type ButtonArgs = {
 
 const Button = (props: ButtonArgs) => 'Button';
 
+const ButtonIcon = ({ icon }: { icon: string }) => `ButtonIcon ${icon}`;
+
 let a = 1;
 async function doSomething() {
   a = 2;
@@ -110,6 +112,22 @@ CSF1Story.story = {
   args: { a: 1 },
 };
 
+const simpleWithSubComponents: XMeta = {
+  title: 'simple',
+  component: Button,
+  tags: ['foo', 'bar'],
+  decorators: [(storyFn, context) => `withDecorator(${storyFn(context)})`],
+  parameters: { a: () => null, b: NaN, c: Symbol('symbol') },
+  loaders: [() => Promise.resolve({ d: '3' })],
+  async beforeEach() {
+    await doSomething();
+    return cleanup;
+  },
+  args: { x: '1' },
+  argTypes: { x: { type: { name: 'string' } } },
+  subcomponents: { ButtonIcon }, // the fact that this line does not cause a Typescript compilation error itself means that the type is correct
+};
+
 const CSF2Story: XStory = () => 'Named Story';
 CSF2Story.storyName = 'Another name for story';
 CSF2Story.tags = ['foo', 'bar'];

src/story.ts

@@ -510,7 +510,7 @@ export interface ComponentAnnotations<TRenderer extends Renderer = Renderer, TAr
    *
    * By defining them each component will have its tab in the args table.
    */
-  subcomponents?: Record<string, TRenderer['component']>;
+  subcomponents?: Record<string, (TRenderer & { T: any })['component']>;
 
   /**
    * Function that is executed after the story is rendered.