How to Get access to the title of the Primary Story in preview.tsx

[ysyayla11]

Summary

I am changing how the autodocs will look like from the Preview file. Write know my autodocs are made this way :

• Title
• Description
• Custom component
• Primary story
• Controls
• Stories (without the primary)

Now I am very happy with this but the primary story doesnt have its title. How can I add it?

Is there a way I can access the title and make an h3 myself, or just make the title appear just like in the other stories?

Additional information

import * as DocBlock from "@storybook/blocks"

docs: {
page: () => (
<>
<DocBlock.Title />
<DocBlock.Description />

<DocBlock.Primary />
<DocBlock.Controls />
<DocBlock.Stories includePrimary={false} />
</>
),
},

Create a reproduction

No response

[smlimasu]

You can access different contexts in the docs pages context.

To show a h3 as StoryName and a Description as p, you could add something like this example to your docs page (derived from primary block + docsStory block's source code):
(example for autodocs as an react component, but you can also set it in preview like you do atm i think).

export const AutoDocsTemplate: React.FC<Props> = ({
myprop,
}) => {
  const { csfFile } = useOf('meta', ['meta']);
  const context = useContext(DocsContext);
  const primaryStory = context.componentStoriesFromCSFFile(csfFile)[0];
  const primaryName = primaryStory?.name || '';
  const primaryDescription =
    primaryStory?.parameters['docs']?.description?.story || '';
    
    return (
    <>
      <Meta />
          <Title />
          <Subtitle />
        <Description />
        <Heading>Variants</Heading>
        <br />
        <Subheading>{primaryName}-Story</Subheading>
        <p>{primaryDescription}</p>
        <Primary />
    </>
  );
};

i also had shown another example of some customized autodocs in this discussion