make typings on Docs component better

code/addons/docs/src/DocsRenderer.tsx

@@ -48,14 +48,16 @@ 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 }) =>
             // We use a `key={}` here to reset the `hasError` state each time we render ErrorBoundary
             renderElement(
               <ErrorBoundary showException={reject} key={Math.random()}>
                 <MDXProvider components={components}>
-                  <Docs context={context} docsParameter={docsParameter} />
+                  <TDocs context={context} docsParameter={docsParameter} />
                 </MDXProvider>
               </ErrorBoundary>,
               element

code/ui/blocks/src/blocks/Docs.tsx

@@ -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 = <T extends Renderer>({ docsParameter, context }: DocsProps<T>) => {
-  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 = <T extends Renderer>({ docsParameter, context }: DocsProps<T
       <Page />
     </Container>
   );
-};
+}

code/ui/blocks/src/blocks/external/ExternalDocs.tsx

@@ -1,33 +1,35 @@
-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';
 
 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()} />;
+}