Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Not able to create documentation in MDX for Angular Component(Storybook)

I am trying to document a simple button component which is created using Angular 8. I am following the tutorial for creating MDX for Angular but I am getting several errors and the application is failing to compile. I am starting to think that the documentation they have for Angular is either not accurate or I am missing something, please help.

Here's how my MDX document looks like, I'm only trying to create a doc for an existing demo component that comes with the default Storybook installation.

button.stories.mdx

    import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
    import Button from './button.component';
    
    <Meta title="Example/Button" component={Button}/>
    
    # Welcome to Storybook
    
    Storybook helps you build UI components in isolation from your app's business logic, data, and context.
    That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
    
    export const Template = (args) => <Button {...args} />
    
    <Canvas>
        <Story name="Button"
        args={{ 
          label: 'test button'
        }}>
        {Template.bind({})}
       </Story>
    </Canvas>

The button story looks like this:

Button.stories.ts

import { Story, Meta } from '@storybook/angular/types-6-0';
        import Button from './button.component';
        
        export default {
          title: 'Example/Button',
          component: Button,
          argTypes: {
            backgroundColor: { control: 'color' },
          },
        } as Meta;
        
        const Template: Story<Button> = (args: Button) => ({
          component: Button,
          props: args,
        });
        
        export const Primary = Template.bind({});
        Primary.args = {
          primary: true,
          label: 'Button',
        };

FYI: The button story works perfectly out of the box

like image 219
shahnshah Avatar asked Oct 29 '25 21:10

shahnshah


1 Answers

So after a bit of searching I found something that works, at least my MDX doc is set up and I can see my component:

For anyone looking for the same please go through their docs specifically for Angular here:

https://github.com/storybookjs/storybook/tree/master/addons/docs/angular

like image 112
shahnshah Avatar answered Nov 01 '25 11:11

shahnshah



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!