Skip to content
This repository has been archived by the owner on Jan 5, 2023. It is now read-only.

feat: support for react-docgen-typescript-loader #61

Merged
merged 2 commits into from
Oct 24, 2019

Conversation

nekitk
Copy link
Contributor

@nekitk nekitk commented Aug 13, 2019

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 nekitk force-pushed the typescript-docgen-support branch 2 times, most recently from ba51493 to d39b19c Compare August 27, 2019 11:24
@nekitk
Copy link
Contributor Author

nekitk commented Sep 6, 2019

@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
Copy link
Contributor

@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 vercel bot requested a deployment to staging October 19, 2019 10:38 Abandoned
@vercel
Copy link

vercel bot commented Oct 19, 2019

Deployment failed with the following error:

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

@nekitk
Copy link
Contributor Author

nekitk commented Oct 21, 2019

@ndelangen sure, thanks!

@vercel vercel bot requested a deployment to staging October 24, 2019 13:47 Abandoned
@vercel
Copy link

vercel bot commented Oct 24, 2019

Deployment failed with the following error:

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

@nekitk nekitk merged commit ff91b9b into storybook-eol:master Oct 24, 2019
@nekitk
Copy link
Contributor Author

nekitk commented Oct 24, 2019

@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
Copy link
Contributor

@nekitk what's you npm account url?

@ndelangen
Copy link
Contributor

So release a new major version?

@nekitk
Copy link
Contributor Author

nekitk commented Oct 25, 2019

@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
Copy link
Contributor

@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
Copy link
Contributor Author

nekitk commented Oct 25, 2019

@ndelangen released a new version 6.0.0, thanks!

@nekitk nekitk deleted the typescript-docgen-support branch October 28, 2019 09:07
@stephenkoo
Copy link

stephenkoo commented Apr 26, 2020

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
Copy link
Contributor Author

nekitk commented Apr 27, 2020

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
Copy link

Thank you! I appreciate your work on this.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Development

Successfully merging this pull request may close these issues.

TypeScript support?
4 participants