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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With