From 81ecdd01378976d97f5da070c0b3aeea9c57951e Mon Sep 17 00:00:00 2001
From: Luke Burgess <luke@whitepixel.co.uk>
Date: Mon, 12 Aug 2024 12:20:57 +0100
Subject: [PATCH] fix: story ComponentAnnotations['subcomponents'] to correctly
 use its own type for subcomponents rather than attempt to inherit from the
 component

---
 src/story.test.ts | 20 +++++++++++++++++++-
 src/story.ts      |  2 +-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/story.test.ts b/src/story.test.ts
index f49c18f..d0770ad 100644
--- a/src/story.test.ts
+++ b/src/story.test.ts
@@ -3,7 +3,6 @@
 /* global HTMLElement */
 import { expectTypeOf } from 'expect-type';
 import {
-  Renderer,
   Args,
   ArgsFromMeta,
   ArgsStoryFn,
@@ -11,6 +10,7 @@ import {
   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'];
diff --git a/src/story.ts b/src/story.ts
index 4bcf3c7..f2c2943 100644
--- a/src/story.ts
+++ b/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.