Here's my ponent:

Alert.tsx

import { Alert } from "react-bootstrap";

export enum AlertVariants {
  success = "success",
  danger = "danger",
}

export interface IAlertComponent {
  handleClose(): void;
  header: string;
  children: string;
  variant: AlertVariants;
}
export const AlertComponent = ({
  handleClose,
  header,
  children,
  variant,
}: IAlertComponent) => {
  return (
    <Alert variant={variant} onClose={handleClose} dismissible>
      <Alert.Heading>{header}</Alert.Heading>
      <p>{children}</p>
    </Alert>
  );
};

Here's the story:

Alert.stories.tsx

import { Meta, Story } from "@storybook/react";
import {
  AlertComponent,
  IAlertComponent,
  AlertVariants,
} from "../ponents/Alert";

const Template: Story<IAlertComponent> = (args) => <AlertComponent {...args} />;

export default {
  title: "Alert",
  ponent: AlertComponent,
} as Meta;

export const Alert = () => Template.bind({});
Alert.args = {
  handleClose: () => console.log("close"),
  header: "header",
  children: "content",
  variant: AlertVariants.danger,
};

export const tmp = () => <div>test</div>; // this gets rendered

And after I run yarn storybook, I see this:

What did I do wrong?

Edit:

If I do this in Alert.stories.tsx, it renders. So it must be smth with the args

export const tmp = () => (
  <AlertComponent
    handleClose={() => {}}
    header={"hedaer"}
    variant={AlertVariants.danger}
  >
    test
  </AlertComponent>
);

Here's my ponent:

Alert.tsx

import { Alert } from "react-bootstrap";

export enum AlertVariants {
  success = "success",
  danger = "danger",
}

export interface IAlertComponent {
  handleClose(): void;
  header: string;
  children: string;
  variant: AlertVariants;
}
export const AlertComponent = ({
  handleClose,
  header,
  children,
  variant,
}: IAlertComponent) => {
  return (
    <Alert variant={variant} onClose={handleClose} dismissible>
      <Alert.Heading>{header}</Alert.Heading>
      <p>{children}</p>
    </Alert>
  );
};

Here's the story:

Alert.stories.tsx

import { Meta, Story } from "@storybook/react";
import {
  AlertComponent,
  IAlertComponent,
  AlertVariants,
} from "../ponents/Alert";

const Template: Story<IAlertComponent> = (args) => <AlertComponent {...args} />;

export default {
  title: "Alert",
  ponent: AlertComponent,
} as Meta;

export const Alert = () => Template.bind({});
Alert.args = {
  handleClose: () => console.log("close"),
  header: "header",
  children: "content",
  variant: AlertVariants.danger,
};

export const tmp = () => <div>test</div>; // this gets rendered

And after I run yarn storybook, I see this:

What did I do wrong?

Edit:

If I do this in Alert.stories.tsx, it renders. So it must be smth with the args

export const tmp = () => (
  <AlertComponent
    handleClose={() => {}}
    header={"hedaer"}
    variant={AlertVariants.danger}
  >
    test
  </AlertComponent>
);

• javascript
• reactjs
• typescript
• storybook

1 Answer 1

I must be tired. I was doing

export const Alert = () => Template.bind({});

instead of

export const Alert = Template.bind({});