Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Storybook zero-config typescript support #10790

Closed
11 of 12 tasks
shilman opened this issue May 15, 2020 · 9 comments
Closed
11 of 12 tasks

Storybook zero-config typescript support #10790

shilman opened this issue May 15, 2020 · 9 comments
Assignees
@shilman @mrmckeb
Labels
angular configuration babel / webpack core feature request react typescript vue
Milestone
6.0 typescript

Comments

@shilman
Copy link
Member

shilman commented May 15, 2020 •
edited
Loading

  • Base Webpack config gets support for TypeScript via @babel/preset-typescript
  • For Angular and Vue, base support is disabled.
  • Support is added into Vue framework.
  • Checking via ts-fork-checker-webpack-plugin should be opt-in
  • Add support for ts-fork-checker-webpack-plugin options
  • For 6.0, TS preset is no more - we'll ignore and warn if detected
  • For React, react-docgen-typescript-loader needs to be added - with optional flag to use babel-plugin-react-docgen instead.
  • Allow passing options for react-docgen-typescript-loader (React)
  • Allow passing options for ts-loader (Vue)
  • Add example for Vue with TypeScript.
  • Document new TS support.
  • Add react-docgen-typescript-loader to CRA preset.

For flags, we will use a typescript object in main.js:

interface TypescriptOptions {
  check?: boolean;
  docgen?: 'none' | 'react-docgen' | 'react-docgen-typescript';
}

// default values
export const typescript: TypescriptOptions = {
  check: false,
  docgen: 'react-docgen-typescript'
}

👉 Original spec
@shilman shilman added this to the 6.0 typescript milestone May 15, 2020
@mrmckeb mrmckeb mentioned this issue May 17, 2020
Merged
@shilman shilman mentioned this issue May 18, 2020
Merged
4 tasks
@graup graup mentioned this issue May 18, 2020
Merged
@shilman
Copy link
Member Author

shilman commented May 21, 2020

Yowza!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-beta.12 containing PR #10813 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

@shilman shilman closed this as completed May 21, 2020
@shilman shilman mentioned this issue May 22, 2020
Closed
2 tasks
@EdenTurgeman
Copy link

EdenTurgeman commented May 24, 2020 •
edited
Loading

@shilman
First of all I have to say, I've been following this for a while now and it's amazing to see how much this has progressed!

Secondly, I'm still a bit confused as to how this change works? after exporting the typescript object from main.ts it seems to have no effect on the compile-time and the docs tab doesn't show up.
image

Lastly, It would be great if you could allow passing the propfilter function directly from there so people can filter unwanted props as this gets better.

@shilman
Copy link
Member Author

shilman commented May 24, 2020 •
edited
Loading

@EdenTurgeman the purpose of this issue is to:

  1. load typescript stories/components without any configuration needed on the user's part
  2. allow you to configure which docgen you use since neither option is perfect and there are pros and cons to each choice

To configure addon-docs you need to add the following to your .storybook/main.js:

module.exports = {
  addons: ['@storybook/addon-docs']
}

You can configure react-docgen-typescript's propFilter directly in main.js:

module.exports = {
  typescript: {
    reactDocgenTypescriptOptions: {
      propFilter: (prop) => ['label', 'disabled'].includes(prop.name),
    }
  }
};

@EdenTurgeman
Copy link

@shilman I see now!
Looks good!
after adding re-adding @storybook/addon-docs to my main.ts I'm getting this error unfortunately

WARN   Failed to load preset: "@storybook/addon-docs" on level 1
ERR! Error: Cannot find module '@storybook/addon-docs'
ERR! Require stack:
ERR! - /Users/**/**/**/node_modules/@storybook/core/dist/server/presets.js
ERR! - /Users/**/**/**/node_modules/@storybook/core/dist/server/config.js
ERR! - /Users/**/**/**/node_modules/@storybook/core/dist/server/build-static.js
ERR! - /Users/**/**/**/node_modules/@storybook/core/server.js
ERR! - /Users/**/**/**/node_modules/@storybook/react/dist/server/index.js
ERR! - /Users/**/**/**/node_modules/@storybook/react/bin/index.js
ERR!     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:797:15)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:690:27)
ERR!     at Module.require (internal/modules/cjs/loader.js:852:19)
ERR!     at require (internal/modules/cjs/helpers.js:74:18)
ERR!     at interopRequireDefault (/Users/**/**/**/node_modules/@storybook/core/dist/server/presets.js:172:16)
ERR!     at loadPreset (/Users/**/**/**/node_modules/@storybook/core/dist/server/presets.js:182:20)
ERR!     at /Users/**/**/**/node_modules/@storybook/core/dist/server/presets.js:244:18
ERR!     at Array.reduce (<anonymous>)
ERR!     at loadPresets (/Users/**/**/**/node_modules/@storybook/core/dist/server/presets.js:243:18)
ERR!     at loadPreset (/Users/**/**/**/node_modules/@storybook/core/dist/server/presets.js:208:18)
ERR!     at /Users/**/**/**/node_modules/@storybook/core/dist/server/presets.js:244:18
ERR!     at Array.reduce (<anonymous>)
ERR!     at loadPresets (/Users/**/**/**/node_modules/@storybook/core/dist/server/presets.js:243:18)
ERR!     at getPresets (/Users/**/**/**/node_modules/@storybook/core/dist/server/presets.js:297:23)
ERR!     at _default (/Users/**/**/**/node_modules/@storybook/core/dist/server/config.js:72:38)
ERR!     at _default (/Users/**/**/**/node_modules/@storybook/core/dist/server/dev-server.js:104:28)
ERR!  Error: Cannot find module '@storybook/addon-docs'
ERR! Require stack:
ERR! - /Users/**/**/**/node_modules/@storybook/core/dist/server/presets.js
ERR! - /Users/**/**/**/node_modules/@storybook/core/dist/server/config.js
ERR! - /Users/**/**/**/node_modules/@storybook/core/dist/server/build-static.js
ERR! - /Users/**/**/**/node_modules/@storybook/core/server.js
ERR! - /Users/**/**/**/node_modules/@storybook/react/dist/server/index.js
ERR! - /Users/**/**/**/node_modules/@storybook/react/bin/index.js
ERR!     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:797:15)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:690:27)
ERR!     at Module.require (internal/modules/cjs/loader.js:852:19)
ERR!     at require (internal/modules/cjs/helpers.js:74:18)
ERR!     at interopRequireDefault (/Users/**/**/**/node_modules/@storybook/core/dist/server/presets.js:172:16)
ERR!     at loadPreset (/Users/**/**/**/node_modules/@storybook/core/dist/server/presets.js:182:20)
ERR!     at /Users/**/**/**/node_modules/@storybook/core/dist/server/presets.js:244:18
ERR!     at Array.reduce (<anonymous>)
ERR!     at loadPresets (/Users/**/**/**/node_modules/@storybook/core/dist/server/presets.js:243:18)
ERR!     at loadPreset (/Users/**/**/**/node_modules/@storybook/core/dist/server/presets.js:208:18)
ERR!     at /Users/**/**/**/node_modules/@storybook/core/dist/server/presets.js:244:18
ERR!     at Array.reduce (<anonymous>)
ERR!     at loadPresets (/Users/**/**/**/node_modules/@storybook/core/dist/server/presets.js:243:18)
ERR!     at getPresets (/Users/**/**/**/node_modules/@storybook/core/dist/server/presets.js:297:23)
ERR!     at _default (/Users/**/**/**/node_modules/@storybook/core/dist/server/config.js:72:38)
ERR!     at _default (/Users/**/**/**/node_modules/@storybook/core/dist/server/dev-server.js:104:28) {
ERR!   stack: "Error: Cannot find module '@storybook/addon-docs'\n" +
ERR!     'Require stack:\n' +
ERR!     '- /Users/**/**/**/node_modules/@storybook/core/dist/server/presets.js\n' +
ERR!     '- /Users/**/**/**/node_modules/@storybook/core/dist/server/config.js\n' +
ERR!     '- /Users/**/**/**/node_modules/@storybook/core/dist/server/build-static.js\n' +
ERR!     '- /Users/**/**/**/node_modules/@storybook/core/server.js\n' +
ERR!     '- /Users/**/**/**/node_modules/@storybook/react/dist/server/index.js\n' +
ERR!     '- /Users/**/**/**/node_modules/@storybook/react/bin/index.js\n' +
ERR!     '    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:797:15)\n' +
ERR!     '    at Function.Module._load (internal/modules/cjs/loader.js:690:27)\n' +
ERR!     '    at Module.require (internal/modules/cjs/loader.js:852:19)\n' +
ERR!     '    at require (internal/modules/cjs/helpers.js:74:18)\n' +
ERR!     '    at interopRequireDefault (/Users/**/**/**/node_modules/@storybook/core/dist/server/presets.js:172:16)\n' +
ERR!     '    at loadPreset (/Users/**/**/**/node_modules/@storybook/core/dist/server/presets.js:182:20)\n' +
ERR!     '    at /Users/**/**/**/node_modules/@storybook/core/dist/server/presets.js:244:18\n' +
ERR!     '    at Array.reduce (<anonymous>)\n' +
ERR!     '    at loadPresets (/Users/**/**/**/node_modules/@storybook/core/dist/server/presets.js:243:18)\n' +
ERR!     '    at loadPreset (/Users/**/**/**/node_modules/@storybook/core/dist/server/presets.js:208:18)\n' +
ERR!     '    at /Users/**/**/**/node_modules/@storybook/core/dist/server/presets.js:244:18\n' +
ERR!     '    at Array.reduce (<anonymous>)\n' +
ERR!     '    at loadPresets (/Users/**/**/**/node_modules/@storybook/core/dist/server/presets.js:243:18)\n' +
ERR!     '    at getPresets (/Users/**/**/**/node_modules/@storybook/core/dist/server/presets.js:297:23)\n' +
ERR!     '    at _default (/Users/**/**/**/node_modules/@storybook/core/dist/server/config.js:72:38)\n' +
ERR!     '    at _default (/Users/**/**/**/node_modules/@storybook/core/dist/server/dev-server.js:104:28)',
ERR!   code: 'MODULE_NOT_FOUND',

@shilman
Copy link
Member Author

shilman commented May 24, 2020

@EdenTurgeman did you npm install / yarn add it? The setup instructions for sb docs haven’t changed. The major difference Is that now you shouldn’t have to worry about any typescript-related configuration now, and reconfiguring is simpler if needed

@EdenTurgeman
Copy link

EdenTurgeman commented May 25, 2020 •
edited
Loading

@shilman Actually I did, not a new dep in my repo could it be a problem with yarn? (working in a monorepo so maybe package hoisting)

@codemaster138
Copy link

@shilman The latest release of react-docgen-typescript is having issues (see styleguidist/react-docgen-typescript#356), which was causing storybook to crash on startup.

To get around it, I wanted to disable react-docgen-typescript. My .storybook/main.js looks like this:

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app"
  ],
  typescript: {
    docgen: 'none'
  }
}

However, storybook is still loading react-docgen-typescript. Am I doing something wrong?

@codemaster138
Copy link

I was able to temporarily get around the issue by changing the typescript options to the following:

...
  typescript: {
    docgen: 'none',
    reactDocgenTypescriptOptions: {
      include: ['src/**/*.tsx']
    }
  }
...

(As described here). However, the docgen: none option is still broken.

@Philzen
Copy link

Philzen commented Mar 24, 2022

However, the docgen: none option is still broken.

That's because the option should be reactDocgen: false as per https://storybook.js.org/docs/react/configure/typescript

Found via styleguidist/react-docgen-typescript#356.

Just posting it here in case anyone else comes by wondering about the same as i did.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@shilman shilman

@mrmckeb mrmckeb

Labels
angular configuration babel / webpack core feature request react typescript vue
Projects
None yet
Milestone
6.0 typescript
Development

No branches or pull requests
5 participants
@shilman @Philzen @mrmckeb @EdenTurgeman @codemaster138