Show Code is not visible in adddon-docspage

[kvedantmahajan]

Problem - No code available after setup in React Typescript setup
Screenshot below

Context - migrating from addon-info to addon-docs

I will quickly share my setup files

main.js

module.exports = {
  // other settings
  stories: ['../src/**/*.stories.(js|tsx|mdx)'],
  addons: [{
      name: '@storybook/addon-docs',
      options: {
        configureJSX: true,
        babelOptions: {},
        sourceLoaderOptions: null
      },
    }]
}

config.js

import { addDecorator } from '@storybook/react';
// import { withInfo } from '@storybook/addon-info';
import { addParameters, configure } from '@storybook/react';
// Can't use knobs in Typescript due to issue - https://github.com/storybookjs/storybook/issues/2964
// import { withKnobs } from "@storybook/addon-knobs";
import { withA11y } from '@storybook/addon-a11y';
import '@storybook/addon-console';
import { withConsole } from '@storybook/addon-console';
import requireContext from 'require-context.macro';
import StoryBookWrapper from "../src/storybook.setup";


// addDecorator(withInfo({
//   	inline: true,
//     styles: {
//       infoStory: {
//         padding: 40
//       }
//     }
// }));

addParameters({
  options: {
    name: "Mint UI",
    url: "https://mint-ui.netlify.com",
    showAddonPanel:false,
    panelPosition: "bottom",
  }
})

// addDecorator(withKnobs);
addDecorator(withA11y);
addDecorator((storyFn, context) => withConsole()(storyFn)(context));

// automatically import all files ending in *.stories.tsx
const req = requireContext('../src/', true, /\.stories\.tsx$/);

function loadStories() {
    req.keys().forEach(req);
}

configure(loadStories, module);

Now, I did try and remove sourceLoaderOptions: null but it didn't make any difference.

Looking into Typescript specific section at https://www.npmjs.com/package/@storybook/addon-docs, didn't offer any help to me either.

Almost missed adding story code

import * as React from "react";
import { storiesOf } from "@storybook/react";
import Avatar from "./index";
import Warning from "../icons/Warning";
import COLORS from "../__utils/colors";

const stories = storiesOf("Avatar", module);

stories.add(
	"size",
	() => (
		<>
			<Avatar size={128} icon="sort" />
			<Avatar size={64} icon="sort" />
			<Avatar size={40} icon="sort" />
			<Avatar size={24} icon="sort" />
		</>
	),
	{
		info: {
			propTables: [Avatar]
		}
	}
);

Please if the docs could be elaborated a bit further for typescript setups for all permutations. Let's say I use awesome-typescript-loader and the setup being in accordance with - https://storybook.js.org/docs/configurations/typescript-config/, will greatly help in reducing time to accomplish the setup. Meanwhile, if you could please suggest a solution.

[shilman]

Try chaining your stories:

storiesOf("Avatar", module)
  .add('size', () => (...))
  .add(...)

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[kvedantmahajan]

@shilman This works.