use @storybook/preset-typescript and support MDX on Storybook template

Current Behavior

• The current additional webpack config used in the react with storybook template I believe is unnecessary
• The template does not support Rich MDX docs out-of-the-box

Desired Behavior

• Rather than providing custom webpack config, utilize Storybook’s own typescript preset
• Users should be able to easily add MDX-based stories/docs

Suggested Solution

First of all, I noticed that the config was recently cleaned up in #435 (thanks @kylemh !) and expanding on that work, I believe that by taking advantage of @storybook/preset-typescript, we should be able to replace the custom webpack config (can be seen in #435) like so:

const path = require('path');

module.exports = {
  stories: ['../stories/**/*.stories.(tsx|mdx)'], // notice mdx support added here
  presets: [
    {
      name: '@storybook/preset-typescript',
      options: {
        include: [
          path.resolve(__dirname, '../src'),
          path.resolve(__dirname, '../stories'),
        ],
      },
    },
  ],
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-docs',
  ],
};

I believe that this will better support the tsdx goal of minimal/zero config. The above config still supports docgen extracting comments out of the component files. From what I can tell, the webpack config was originally introduced in #318 to add support for a '@' import alias, which support for that alias was then removed in #435. What’s left seems to be completely supported in the typescript preset, unless I am completely missing something here please let me know.

Also notice that support for .mdx files is very easily added by adding it to the stories blob config above. With that in place, you can add a basic sample MDX file to the template like:

import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
import { Thing } from '../src';

<Meta title="Thing" component={Thing} />

# Thing

With `MDX` we can define a story for `Thing` right in the middle of our
markdown documentation.

<Preview>
  <Story name="Thing MDX">
    <Thing />
  </Story>
</Preview>

Who does this impact? Who is this for?

All users looking to use this library to create a React component library with storybook and typescript.

Describe alternatives you’ve considered

Alternatively maybe adding to the documentation would help.

Additional context

Open to making a PR (or if someone on the team wants to make the quick change that would be cool too), just wanted to make sure this makes sense to folks and that I’m not completely missing something. Let me know what you guys think, thanks.

[shilman]

Thanks guys. I merged a bad PR in preset-typescript in December and will back out that change. I spent 4h beating my head against the preset yesterday and almost rage-quit programming a few times during that ordeal.

Over the past year we’ve migrated most of Storybook’s packages and public APIs to typescript, but we haven’t done much to fix its DX for Typescript users. preset-typescript is a step in that direction (albeit a flawed one), and I recently created a typescript template for sb init that generates .tsx stories for CRA in typescript mode.

Since this is a community for TypeScript DX, I would be INCREDIBLY, OVERWHELMINGLY grateful if anybody wanted to team up to get Storybook’s TypeScript experience over the line. We’re in striking distance and this would be super high leverage work!

[mariusespejo]

hey folks just wanted to provide an update here before I mark this closed.

The conversation here is no longer relevant with the release of Storybook v6 which looks like has direct support for typescript. Sounds like preset-typescript is no longer recommended.

However the storybook template config does still need to be updated which looks like someone already took the effort to determine the next best minimal config on PR #805 (which I tested myself, works great with docs addon and is able to automatically do the docgen stuff behind the scenes, allowing for prop tables to automatically show, etc.).

Anyways I’m not familiar with the PR process for this project but I would suggest reviewing and merging #805 to resolve the original intent of this ticket (to rely on Storybook’s own recommended way to configure TS and stick to the intention of this project of minimizing the config).