turbo

turbo copied to clipboard

What version of Turborepo are you using?

1.4.3

What package manager are you using / does the bug impact?

npm, Yarn v1

What operating system are you using?

Mac

Describe the Bug

Storybook props table does not load on the provided examples/design-system.

Expected Behavior

The props table should appear.

To Reproduce

1. Clone and run the examples/design-system folder
2. npm run dev
3. Navigate to the Docs

I've found that running the following works:

turbo run dev --filter=docs

@vimtor did you have an example Button component or was is the default repo version?

@vimtor did you have an example Button component or was is the default repo version?

It was the default repo version

@vimtor Interesting even when I update all storybook deps I get nothing, no error just got this "as-is".

However, if you move this storybook away from docs and load storybook into the UI library it works fine.

I imagine it's a problem with @storybook/builder-vite and react-docgen-typescript. Adding the following to my .storybook/main.js results in the props appearing for now however, I would prefer to use react-docgen-typescript.

  typescript: {
    reactDocgen: "react-docgen",
  },

@erickreutz I use the webpack5 builder and have the same issue.

Digging into this further this morning. I found two issues preventing the args table from working. I suspected that react-docgen-typescript wasn't picking up the .ts outside of the docs repo. Adding "../../packages/**/*.{ts,tsx}" as an include to the reactDocgenTypescriptOptions in main.js fixed this issue. The second issue is that Button defines a single prop of children. Looking at the docs for react-docgen-typescript the option skipChildrenPropWithoutDoc defaults to true. In order for children to show up, I needed to set that to false.

My typescript config is as follows:

  typescript: {
    reactDocgen: "react-docgen-typescript",
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      skipChildrenPropWithoutDoc: false,
      propFilter: (prop) =>
        prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
      include: ["../../packages/**/*.{ts,tsx}"],
    },
  },

  typescript: {
    reactDocgen: "react-docgen-typescript",
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      skipChildrenPropWithoutDoc: false,
      propFilter: (prop) =>
        prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
      include: ["../../packages/**/*.{ts,tsx}"],
    },
  },

@erickreutz Thank you, it kind of works (showing the name and control of the props) but the description of the props and and the description of the component itself is still missing.:/

So for anyone interested, I've figured out a solution that is working as intended. Hope it helps 👍

The important part here is the "include" option within main.ts.

I'm using pnpm v7, my stories are within a directory called "stories", co-located where my component are living.

main.ts

const config = {
  "stories": [
    "../node_modules/@acme/core/src/**/stories/*.stories.@(ts|tsx|mdx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  "framework": {
    "name": "@storybook/react-vite",
    "options": {}
  },
  "core": {
    "disableTelemetry": true,
  },
  "typescript": {
    reactDocgenTypescriptOptions: {
      include: ["../core/**/*.{ts,tsx}"] // this is the important part here
    },
    "skipBabel": true,
    "check": false,
  },
  "docs": {
    "autodocs": true // "tag"
  }
};

export default config;

package.json

{
  "name": "docs",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "storybook": "storybook dev -p 6006",
    "build": "storybook build",
    "clean": "rm -rf .turbo && rm -rf node_modules",
    "build-storybook": "storybook build"
  },
  "dependencies": {
    "@acme/core": "workspace:*",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@storybook/addon-essentials": "^7.0.0-beta.44",
    "@storybook/addon-interactions": "^7.0.0-beta.44",
    "@storybook/addon-links": "^7.0.0-beta.44",
    "@storybook/blocks": "^7.0.0-beta.44",
    "@storybook/react": "^7.0.0-beta.44",
    "@storybook/react-vite": "^7.0.0-beta.44",
    "@storybook/testing-library": "^0.0.14-next.1",
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "storybook": "^7.0.0-beta.44",
    "typescript": "^4.9.3"
  }
}