Addon-docs: Define children for DocsContainer

[mihkeleidast]

Issue: N/A

What I did

Explicitly defined children prop for DocsContainer props. In React 18 types, children is not automatically available in FunctionComponent, instead it needs to be explictly added. When trying to override DocsContainer with a component written in TypeScript, with React 18 types installed, it currently throws an error because the internal DocsContainer does not allow children.

Example code that should work without those @ts-expect-error comments:

import { DocsContainer as BaseContainer, DocsContainerProps } from '@storybook/addon-docs';
import { themes } from '@storybook/theming';
import React from 'react';

import { ThemeProvider } from './theme_provider';
import { useStoredTheme } from './use_stored_theme';

/* @ts-expect-error BaseContainer does not allow children */
export const DocsContainer: React.FunctionComponent<DocsContainerProps> = ({ children, context }) => {
  const { storyById } = context;
  const [currentTheme] = useStoredTheme();

  return (
    <ThemeProvider>
      {/* @ts-expect-error BaseContainer does not allow children */}
      <BaseContainer
        context={{
          ...context,
          storyById: (id) => {
            const storyContext = storyById(id);
            return {
              ...storyContext,
              parameters: {
                ...storyContext?.parameters,
                docs: {
                  ...storyContext?.parameters?.docs,
                  theme: currentTheme.includes('dark') ? themes.dark : themes.light,
                },
              },
            };
          },
        }}>
        {children}
      </BaseContainer>
    </ThemeProvider>
  );
};

Would be nice if this got backported to SB 6.5 as well.

How to test

• Is this testable with Jest or Chromatic screenshots?
• Does this need a new example in the kitchen sink apps?
• Does this need an update to the documentation?

If your answer is yes to any of these, please make sure to include it in your PR.

[shilman]

LGTM!! Thanks so much @mihkeleidast 🙏