feat: support for react-docgen-typescript-loader

[nekitk]

Fixes #25

• create knobs from docgen info generated by react-docgen-typescript-loader
• use defaultValue from docgen to set starting value in knob
• moves table with prop types to separate component for reuse

[nekitk]

@ndelangen hi! could you please take a look at these PRs? (#61 & #60)
We are currently forced to use our own fork with these PRs merged.

[ndelangen]

@nekitk This package has gone a bit neglected, I'm sorry. Would you be interested in helping maintain this?

I've invited you to the github org, this should give you the ability to merge these.

[vercel]

Deployment failed with the following error:

Your `package.json` file is missing a `build` property inside the `script` property.

[nekitk]

@ndelangen sure, thanks!

[vercel]

Deployment failed with the following error:

Your `package.json` file is missing a `build` property inside the `script` property.

[nekitk]

@ndelangen Hi! I've merged some of the opened pull requests. Could you please publish a new version? Note that there were a breaking change in #65 — decorator usage changed from withSmartKnobs to withSmartKnobs(options).

[ndelangen]

@nekitk what's you npm account url?

[ndelangen]

So release a new major version?

[nekitk]

@ndelangen

@nekitk what's you npm account url?

https://www.npmjs.com/~nekitk

So release a new major version?

yes, as it has broken backward compatibility

[ndelangen]

@nekitk enable 2FA for your npm account and you should be able to publish to https://www.npmjs.com/package/storybook-addon-smart-knobs 👍

[nekitk]

@ndelangen released a new version 6.0.0, thanks!

[stephenkoo]

Hi @nekitk, for clarification if I've react-docgen-typescript-loader in .storybook/main.js like instructed in the docs, do I still need to do the configuration steps for babel-plugin-react-docgen in the smart knob README?

My main.js:

module.exports = {
  stories: ["../src/**/*.stories.(tsx|mdx)"],
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      use: [
        {
          loader: require.resolve("babel-loader"),
          options: {
            presets: [["react-app", { flow: false, typescript: true }]],
          },
        },
        {
          loader: require.resolve("react-docgen-typescript-loader"),
          options: {
            tsconfigPath: path.resolve(__dirname, "../tsconfig.json"),
          },
        },
      ],
    });
    config.resolve.extensions.push(".ts", ".tsx");
    return config;
  },
  addons: [
    "@storybook/addon-a11y",
    "@storybook/addon-essentials",
    "@storybook/addon-actions",
    "@storybook/addon-knobs",
    "@storybook/addon-docs",
    "@storybook/addon-links",
  ],
};

And would preloading globally in preview.js work like so:

import { addDecorator } from '@storybook/react';
import { withKnobs } from "@storybook/addon-knobs";
import { withSmartKnobs } from 'storybook-addon-smart-knobs'

/**
 * May need additional config
 * https://github.com/storybookjs/addon-smart-knobs#configuration
 */
addDecorator(withSmartKnobs())
addDecorator(withKnobs);

[nekitk]

Hi @nekitk, for clarification if I've react-docgen-typescript-loader in .storybook/main.js like instructured in the docs, do I still need to do the configuration steps for babel-plugin-react-docgen in the smart knob README?

Hi! No, you don't need to configure babel-plugin-react-docgen with typescript. You should add shouldExtractLiteralValuesFromEnum: true to the options of react-docgen-typescript-loader for richer enum support.

Preloading globally should work.

[stephenkoo]

Thank you! I appreciate your work on this.