Feedback for /api/doc-block-useof docs page

[storybook-bot]

👍	👎
1	3

[storybook-bot]

/docs/angular/api/doc-block-useof

👎	v7.0	angular	ts

The jsx syntax does not work on angular.

I get an error

.storybook\blocks\StoryName.jsx: Support for the experimental syntax 'jsx' isn't currently enabled (13:14):

[kylegach]

You will have to use React to author custom doc blocks and that may require some configuration for a non-React project.

[bastiW]

So I need to install React for the JSX syntax into storybook which uses Angular?

[bastiW]

So I did currently the following:

• added import statement.
• There was no need to install react because react is already a dependency of storybook

import React from "react";

and transpiled the code with an online converter from jsx to js

import React from "react";
import { useOf } from '@storybook/blocks';

/**
 * A block that displays the story name or title from the of prop
 * - if a story reference is passed, it renders the story name
 * - if a meta reference is passed, it renders the stories' title
 * - if nothing is passed, it defaults to the primary story
 */
export const StoryName = ({ of }) => {
  const resolvedOf = useOf(of || 'story', ['story', 'meta']);
  switch (resolvedOf.type) {
    case 'story':
    {
      return React.createElement(
        'h1',
        null,
        resolvedOf.story.name
      );
    }
    case 'meta':
    {
      return React.createElement(
        'h1',
        null,
        resolvedOf.preparedMeta.title
      );
    }
  }
  return null;
};

Next step

Now I need to find a solution on how to configure storybook webpack with react to transpile automatically from jsx to js

[winkerVSbecks]

@bastiW I've got an example here: chromaui/ng-storybook-workshop@0da294c

You need to add "jsx": "react-jsx" to tsconfig to enable JSX

[bastiW]

thanks a lot. That helped. We really need to document that better, or even enable jsx by default for angular projects.

[winkerVSbecks]

You'll might need to install @storybook/blocks and some of its deps to use the hook

[storybook-bot]

/docs/7.3/angular/api/doc-block-useof

👎	v7.3	angular	ts

No example for Angular

[storybook-bot]

/docs/7.3/angular/api/doc-block-useof

👎	v7.3	angular	ts

No example for Angular

[storybook-bot]

/docs/7.6/api/doc-block-useof

👍	v7.6	react	ts

good docs for internal feature