From fed219902b2124f42c8188b8a81cafab64313439 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 12 Apr 2023 14:48:37 +0200
Subject: [PATCH] make typings on Docs component better

---
 code/addons/docs/src/DocsRenderer.tsx         |  4 ++-
 code/ui/blocks/src/blocks/Docs.tsx            | 15 ++++++----
 .../src/blocks/external/ExternalDocs.tsx      | 28 ++++++++++---------
 3 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/code/addons/docs/src/DocsRenderer.tsx b/code/addons/docs/src/DocsRenderer.tsx
index 40c78d803c64..4eeb74427f0c 100644
--- a/code/addons/docs/src/DocsRenderer.tsx
+++ b/code/addons/docs/src/DocsRenderer.tsx
@@ -48,6 +48,8 @@ export class DocsRenderer<TRenderer extends Renderer> {
         ...docsParameter?.components,
       };
 
+      const TDocs = Docs as typeof Docs<TRenderer>;
+
       return new Promise((resolve, reject) => {
         import('@mdx-js/react')
           .then(({ MDXProvider }) =>
@@ -55,7 +57,7 @@ export class DocsRenderer<TRenderer extends Renderer> {
             renderElement(
               <ErrorBoundary showException={reject} key={Math.random()}>
                 <MDXProvider components={components}>
-                  <Docs context={context} docsParameter={docsParameter} />
+                  <TDocs context={context} docsParameter={docsParameter} />
                 </MDXProvider>
               </ErrorBoundary>,
               element
diff --git a/code/ui/blocks/src/blocks/Docs.tsx b/code/ui/blocks/src/blocks/Docs.tsx
index d5525176e3d9..25f20f31dcc5 100644
--- a/code/ui/blocks/src/blocks/Docs.tsx
+++ b/code/ui/blocks/src/blocks/Docs.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import type { FunctionComponent, ComponentType } from 'react';
+import type { ComponentType } from 'react';
 import type { Renderer, Parameters } from '@storybook/types';
 import type { Theme } from '@storybook/theming';
 
@@ -7,13 +7,16 @@ import type { DocsContextProps } from './DocsContext';
 import { DocsContainer } from './DocsContainer';
 import { DocsPage } from './DocsPage';
 
-export type DocsProps<TFramework extends Renderer = Renderer> = {
+export type DocsProps<TRenderer extends Renderer = Renderer> = {
   docsParameter: Parameters;
-  context: DocsContextProps<TFramework>;
+  context: DocsContextProps<TRenderer>;
 };
 
-export const Docs: FunctionComponent<DocsProps> = ({ docsParameter, context }) => {
-  const Container: ComponentType<{ context: DocsContextProps; theme: Theme }> =
+export function Docs<TRenderer extends Renderer = Renderer>({
+  context,
+  docsParameter,
+}: DocsProps<TRenderer>) {
+  const Container: ComponentType<{ context: DocsContextProps<TRenderer>; theme: Theme }> =
     docsParameter.container || DocsContainer;
 
   const Page = docsParameter.page || DocsPage;
@@ -23,4 +26,4 @@ export const Docs: FunctionComponent<DocsProps> = ({ docsParameter, context }) =
       <Page />
     </Container>
   );
-};
+}
diff --git a/code/ui/blocks/src/blocks/external/ExternalDocs.tsx b/code/ui/blocks/src/blocks/external/ExternalDocs.tsx
index 1a05a0d8fd18..869dcf66a5ab 100644
--- a/code/ui/blocks/src/blocks/external/ExternalDocs.tsx
+++ b/code/ui/blocks/src/blocks/external/ExternalDocs.tsx
@@ -1,4 +1,4 @@
-import type { FunctionComponent } from 'react';
+import type { PropsWithChildren } from 'react';
 import React, { useRef } from 'react';
 import type { Renderer, ProjectAnnotations } from '@storybook/types';
 import { composeConfigs } from '@storybook/preview-api';
@@ -6,28 +6,30 @@ import { composeConfigs } from '@storybook/preview-api';
 import { Docs } from '../Docs';
 import { ExternalPreview } from './ExternalPreview';
 
-export type ExternalDocsProps<TFramework extends Renderer = Renderer> = {
-  projectAnnotationsList: ProjectAnnotations<TFramework>[];
+export type ExternalDocsProps<TRenderer extends Renderer = Renderer> = {
+  projectAnnotationsList: ProjectAnnotations<TRenderer>[];
 };
 
-function usePreview<TFramework extends Renderer = Renderer>(
-  projectAnnotations: ProjectAnnotations<TFramework>
+function usePreview<TRenderer extends Renderer = Renderer>(
+  projectAnnotations: ProjectAnnotations<TRenderer>
 ) {
-  const previewRef = useRef<ExternalPreview>();
-  if (!previewRef.current) previewRef.current = new ExternalPreview(projectAnnotations);
+  const previewRef = useRef<ExternalPreview<TRenderer>>();
+  if (!previewRef.current) previewRef.current = new ExternalPreview<TRenderer>(projectAnnotations);
   return previewRef.current;
 }
 
-export const ExternalDocs: FunctionComponent<ExternalDocsProps> = ({
+export function ExternalDocs<TRenderer extends Renderer = Renderer>({
   projectAnnotationsList,
   children,
-}) => {
-  const projectAnnotations = composeConfigs(projectAnnotationsList);
-  const preview = usePreview(projectAnnotations);
+}: PropsWithChildren<ExternalDocsProps<TRenderer>>) {
+  const projectAnnotations = composeConfigs<TRenderer>(projectAnnotationsList);
+  const preview = usePreview<TRenderer>(projectAnnotations);
   const docsParameter = {
     ...projectAnnotations.parameters?.docs,
     page: () => children,
   };
 
-  return <Docs docsParameter={docsParameter} context={preview.docsContext()} />;
-};
+  const TDocs = Docs as typeof Docs<TRenderer>;
+
+  return <TDocs docsParameter={docsParameter} context={preview.docsContext()} />;
+}