Use Stories outside storybook | Create external documentation

[QuentinFrc]

Hi all,

For some reason I want to create custom documentations pages in a nextjs project to document my component library.

I'm using storybook in order to test and develop all components and I want to create the documentation outside storybook in order to put it in production environnement (to see component set directly on live project).

For this I'm using contentlayer to write mdx files to generate static page and I'm also mapping custom mdx block to components.
What I try to do is mapping a Story custom component acting as the Story block in @storybook/blocks.

/* mdx-component.tsx */

const components = {
  //...
  Story
};

export function Mdx({ code, ...props }: MdxProps) {
	const Component = useMDXComponent(code);

	return (
		<div {...props}>
			<Component components={components} />
		</div>
	);
}

/* story.tsx */

export const Story: FC<StoryProps> = ({ component, story }) => {
	const logger = getLogger('Story');
       // Stories is an object containing all my stories
	const Comp = stories[component];
	if (!Comp) {
		logger.error(`Component: ${component} has no stories`);
		return null;
	}
	const StoryComp = Comp[story];
	if (!StoryComp) {
		logger.error(`Story: ${story} is not defined for component: ${component}`);
		return null;
	}

        // import { Story as StoryBlock } from '@storybook/blocks';
	return <StoryBlock of={StoryComp} />;
};

I don't know exactly why but using Story block outside storybook create this error.

- error node_modules/@storybook/blocks/dist/index.js (45:0) @ getStoryId2
- error TypeError: Cannot read properties of null (reading 'resolveOf')

Does someone have any idea how I can run out this error and with less boilerplate as possible reproduce the Story block from storybook ?

Thanks for reading

[shilman]

Try wrapping your page in an ExternalDocs wrapper like this:

https://github.com/storybookjs/storybook/blob/next/test-storybooks/external-docs/pages/_app.js

We started developing this feature for Storybook 7.0, but did not ever formally release it, so it's experimental and I'm not sure whether it's currently working. However, it's worth a try!

[QuentinFrc]

Will try that thank you !

[QuentinFrc]

Hi @shilman,

I tried your solution but it bring me an other problem :/
here is the my code and the error resulting.

page.tsx

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24 text-foreground">
        <InputStoryTest /> //import { InputStoryTest } from '@/components/story';
    </main>
  );
}

InputStoryTest

'use client';

import { ExternalDocs, Story as StoryBlock } from '@storybook/addon-docs';
import * as reactAnnotations from '@storybook/react/preview';

import * as InputStories from '@/stories/input.stories';

import * as previewAnnotations from '../../.storybook/preview';

export const Story = {
	Input: () => (
		<StoryBlock of={InputStories.Disabled} />;
	),
};

export const InputStoryTest = () => (
	<ExternalDocs projectAnnotationsList={[reactAnnotations, previewAnnotations]}>
		<Story.Input />
	</ExternalDocs>
);

input.stories.tsx

const meta: Meta<typeof Input> = {
	title: 'Components/Form/Input',
	component: Input,
};

type Story = StoryObj<InputProps>;

const Template: Story = {
	render: (args) => (
		<Input {...args} />
	),
};

export const Disabled: Story = {
	...Template,
	args: {
		//args
	},
};

Error

// typeof InputStories.Disabled
object
//  InputStories.Disabled
{
  render: [Function: render],
  args: {
    //args
  }
}
 ⨯ node_modules/@storybook/preview-api/dist/index.js (48:4472) @ ExternalDocsContext.resolveOf
 ⨯ Error: Invalid value passed to the 'of' prop. The value was resolved to a 'component or unknown' type but the only types for this block are: story.
- Did you pass a component to the 'of' prop when the block only supports a story or a meta?
- ... or vice versa?
- Did you pass a story, CSF file or meta to the 'of' prop that is not indexed, ie. is not targeted by the 'stories' globs in the main configuration?
null```