Props not being generated for Type

[stramel]

Bug Report

Describe the bug

The props table (Props component) isn't displaying anything when using typescript

To Reproduce

Please try to build a small repo with a repro of your problem and provide a link to it.

Doing that allows more people to quickly help you.

If you can't provide a repo then provide clear steps describing how to reproduce the issue.

1. npx create-docz-app my-docz-app && cd my-docz-app
2. Rename Alert.jsx to Alert.tsx
3. Replace code with the below

import React from 'react'

const kinds = {
  info: '#5352ED',
  positive: '#2ED573',
  negative: '#FF4757',
  warning: '#FFA502',
}

export interface AlertProps {
  children: React.ReactNode,
  kind: 'info' | 'positive' | 'negative' | 'warning'
}

export const Alert = ({ children, kind, ...rest }: AlertProps) => (
  <div
    style={{
      padding: 20,
      borderRadius: 3,
      color: 'white',
      background: kinds[kind] || kinds.info,
    }}
    {...rest}
  >
    {children}
  </div>
)

Alert.defaultProps = {
  kind: 'info',
}

export default Alert

4. Add a doczrc.js file to the root with the following content

export default {
  typescript: true
}

5. Run npm run docz dev
6. See error in browser

Expected behavior

I expect the props table to be filled with the props defined.

Environment

• docz version: 2.1.1
• OS: OS Catalina 10.15.1
• Node/npm version: Node 12.13.0 / npm 6.12.0

Screenshot

[rakannimer]

Hello @stramel

This is probably because you didn't add a tsconfig.json to your project.

Try running yarn add -D typescript && yarn tsc --init and it should work as expected.

You can also check the typescript example :

npx create-docz-app my-app --example typescript

Going to close this, please feel free to re-open if the suggestions above don't work.

[stramel]

@rakannimer Sorry, I attempted to make a reproduction for this but my actual use-case is in a NX monorepo. I have a base tsconfig.json at the root of my mono repo and a tsconfig.json that extends it in the library package level. I also do already have typescript installed as a devDependency.

I'm unable to re-open the issue since you closed it.

[deammer]

Hi @rakannimer I think I'm encountering a similar issue. My setup is a monorepo (without any supporting tools like Lerna or Yarn Workspaces) with Typescript support.

It contains a tsconfig file, the typescript dependency, and typescript: true in doczrc.js.

Here's a sample repo with instructions. Your help would be appreciated as always!

[lagoasoft-lucasschmidt]

We are having the same issue in a mono repo as well ... tried most things ... next step I guess is to take a look at the source code and debug 🗡

Funny, but the flow package works ... the typing is correct.

[lagoasoft-lucasschmidt]

I fixed, after my comment, changing the typescript code (before I didnt add the type to the component as React.SFC) and adding a tsconfig in the root of the repo.

import * as React from 'react';
import Button from '@material-ui/core/Button';

interface Props {
  /** word to interpolate */
  text: string;
  /** word to interpolate */
  color: number;
}

const TsButton: React.SFC<Props> = ({ text }: Props) => (
  <Button>{text}</Button>
);

export default TsButton;

  "compilerOptions": {
    "target": "es2015",
    "moduleResolution": "node",
    "strict": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "skipLibCheck": false,
    "noEmit": true,
    "jsx": "react"
  }
}

[kerkness]

I seem to have a problem getting props from when I'm extending other interfaces.. For example I have this scenario.

import { Button as MuiButton } from '@material-ui/core';
import { ButtonProps as MuiButtonProps } from "@material-ui/core/Button";

interface ComponentProps {
    status?: ButtonStatus | null;
    label?: string;
    loadingLabel?: string;
    loading?: boolean;
}

export type ButtonProps = MuiButtonProps & ComponentProps;

export const Button: React.SFC<ButtonProps> = (props: ButtonProps) => {
  ...
}

The component works fine in <Playground> but <Props from={Button} /> does not find anything.

I have tested other components that use a straight interface for props and those work with <Props from{...} />

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stramel]

Still very much an issue

[lettertwo]

I am encountering the same thing in a monorepo, the basic structure of which is:

├── packages
│   ├── components
│   │   ├── src
│   │   │   └── components
│   │   │       ├── Alert.mdx
│   │   │       ├── Alert.tsx
│   │   │       ├── Button.mdx
│   │   │       └── Button.tsx
│   │   ├── package.json
│   │   └── tsconfig.json
│   └── docz
│       ├── doczrc.js
│       ├── index.mdx
│       ├── package.json
│       └── tsconfig.json
├── package.json
└── tsconfig.json

The tsconfig files in each of the packages extends the root tsconfig. doczrc.js looks like:

/* packages/docz/doczrc.js */
export default {
  typescript: true,
  files: ["./**/*.mdx", "../components/**/*.mdx"],
};

---

A Clue

I've found that if i move the the tsx files to be in packages/docz, the props are being generated, even though the mdx files remain in packages/components. It seems like there may be some dependence on the ts source files 'belonging' to the same typescript project that docz does.

A solution?

Some poking around in docz-core lead me to try this config change:

/* packages/docz/doczrc.js */
export default {
  typescript: true,
  files: ["./**/*.mdx", "../components/**/*.mdx"],
  docgenConfig: {
    searchPatterns: [
      "../**/*.{ts,tsx,js,jsx,mjs}",
      "!**/node_modules",
      "!**/doczrc.js",
    ],
  },
};

And, after clearing docz cache, it worked!

It seems that the docgenConfig option is currently undocumented, see doczjs/docz-website#90

[dawitux]

Important in Monorepo structures like above:

docz and docgen will look for a tsconfig file in the docz root, not in the components package!
if you don't have one, the load process will stop and never use your searchPattern.

to initialize an default tsconfig you can execute this from your docz package:

./../../node_modules/.bin/tsc --init

[StefSchenkelaars]

What about allowing setting the tsconfig path from the config file? The typescript options is now a boolean, but it could also be possible to make that a path to the custom tsconfig file.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.