Replies: 2 comments
-
For example, in .storybook/tsconfig.json, provide the jsx flag. Example: "extends": "../tsconfig.json",
"compilerOptions": {
"jsx": "react"
}, then, in preview.ts (or tsx), you can override the docs page like: parameters: {
docs: {
page: () => (
<>
<Title />
<Subtitle />
<Description />
<Primary />
<Controls />
<Stories />
</>
),
},
},
}; The next sections are examples that i personally use like: import {myCustomSBReactComponent} from './myCustomSBReactComponent';
import React from 'react';
type Props = {
specialMDX?: React.ReactElement;
};
export const CustomAutodocsTemplateOne: React.FC<Props> = ({ specialMDX}) => (
<>
<Meta />
<Unstyled>
<Title />
<Subtitle />
<Description />
<Subheading>Default-Story</Subheading>
<Primary />
{specialMDX} //f.ex insert. custom guidelines (standalone mdx-file) like how to use the stories component
<Stories title="" /> //these are Canvas Blocks for all stories
<Heading>Code of Default Story</Heading>
<Source language="html" />
<MyCustomSBReactComponent /> //create additional components in react like dos/donts table component
</Unstyled>
</>
); in this case, you can override the preview.docs.page like: parameters: {
docs: {
page: CustomAutodocsTemplateOne,
},
},
}; at the meta or story level, you can also override or set the autodocs docs.page template or insert the customContent or set other props to true/false etc. import React from 'react';
import { CustomAutodocsTemplateOne } from '../../../../.storybook/CustomAutodocsTemplateOne';
import Guidelines from './guidelines.mdx';
const meta: Meta<ButtonComponent> = {
parameters: {
docs: {
page: () => (
<CustomAutodocsTemplateOne specialMDX={<Guidelines />} />
),
},
}, if you have more than one autodocstemplate.tsx file, you could also set:
at the meta or story level to whatever template you like - the template can be stored in /.storybook or at the same level like your stories, i structure my folders like button contains: button.stories.tsx, buttonguidelines.mdx, buttonDocsTemplate.mdx/tsx (if i had a special template, but for one story its a bit unneccessary, then you could just import buttonstories into a "normal" button.mdx file, set tags: ['!autodocs'] at the stories meta, in button.mdx attach meta like .... and just use the Storybook Docs Blocks or your own React "Blocks". ah, well, if you dont want the guidelines.mdx docs to not be shown in the sidebar, when you import it into the .stories file, set example guidelines.mdx for the button: <Meta isTemplate />
<Unstyled>
<Heading>Custom Guide Content</Heading>
Lorem Ipsum just write your stuff in markdown here ...
<GridContainer>
<DosComponent>
- use buttons instead of icons
- ...
</DosComponent>
<DontsComponent>
- .... dont use too many buttons
- ...
</DontsComponent>
</GridContainer>
</Unstyled>
|
Beta Was this translation helpful? Give feedback.
-
Thanks for answering, i will explore the examples you listed and come back to you. I am mostly okay with auto docs and I don't want to augment the default docs in .preview.ts. The reason i want to modify existing auto docs of particular story is because some of the stories required more coding example for advanced usage of components or directive. |
Beta Was this translation helpful? Give feedback.
-
Summary
I will refer to this documentation page
https://storybook.js.org/docs/writing-docs/doc-blocks#customizing-the-automatic-docs-page
There is also linked video that shows how to customize the auto docs from with in the story. However I didn't find and relevant complete example for angular. Upon my research I found out that the file extension should be tsx as button.stories.tsx rather than button.stories.ts.
Even Still I get an error that cannot use jsx unless jsx flag is provided. Now I am lost. I have removed the react as dependency.
How should I configure angular to use the above feature?
Additional information
No response
Create a reproduction
No response
Beta Was this translation helpful? Give feedback.
All reactions