Docz: Props component doesn`t render props table with typescript

[Viktor19931]

Bug Report

docz config

export default {
title: 'Documentation',
typescript: true,
codeSandbox: false,
description: 'Documentation from the Components',
};

my component

import React, { SFC } from 'react'
import styled from 'styled-components'

const scales = {
  small: `
    padding: 5px 10px;
    font-size: 14px;
  `,
  normal: `
    padding: 10px 20px;
    font-size: 16px;
  `,
  big: `
    padding: 20px 30px;
    font-size: 18px;
  `,
}

const kind = (outline: boolean) => (bg: string, color: string) => {
  const boxShadowColor = outline ? bg : 'transparent'
  const backgroundColor = outline ? 'transparent' : bg

  return `
    background: ${backgroundColor};
    box-shadow: inset 0 0 0 1px ${boxShadowColor};
    color: ${outline ? bg : color};
    transition: all .3s;

    &:hover {
      box-shadow: inset 0 0 0 1000px ${boxShadowColor};
      color: ${color};
    }
  `
}

type Kind = 'primary' | 'secondary' | 'cancel' | 'dark' | 'gray'
type Kinds = Record<Kind, string>

const kinds = (outline: boolean): Kinds => {
  const get = kind(outline)

  return {
    primary: get('#1FB6FF', 'white'),
    secondary: get('#5352ED', 'white'),
    cancel: get('#FF4949', 'white'),
    dark: get('#273444', 'white'),
    gray: get('#8492A6', 'white'),
  }
}

export interface ButtonProps {
  scale: 'small' | 'normal' | 'big'
  kind: 'primary' | 'secondary' | 'cancel' | 'dark' | 'gray'
  outline: boolean
}

const getScale = ({ scale = 'normal' }: ButtonProps) => scales[scale]
const getKind = ({ kind = 'primary', outline = false }: ButtonProps) =>
  kinds(outline)[kind]

const ButtonStyled = styled('button')`
  ${getKind};
  ${getScale};
  cursor: pointer;
  margin: 3px 5px;
  border: none;
  border-radius: 3px;
`

export const Button: SFC<ButtonProps> = ({ children, ...props }) => (
  <ButtonStyled {...props}>{children}</ButtonStyled>
)

use in mdx file

import { Playground, Props } from 'docz';
<Props of={Button} />

but unfortunately it is not render table

Current behavior
Props Component doesn't render table with props

import { Playground, Props } from 'docz';
import { Button } from './index.tsx';
<Props of={Button} />

Expected behavior
Props component should render table with props

Also try to run official docz typescript example, but still not render table

Environment

• docz 1.2.0
• docz-theme-default 1.2.0
• OS: OSX 10.14.5
• Node/npm version: 10.16.0/6.9.0

[jleck]

+1 Also have this issue

[canyavall]

+1 We also have this issue
In our case we are working with React-Native, I'm not sure if it is related.

Another thing I've seen is that there's a warning saying:
'React-Hot-Loader: react-🔥-dom patch is not detected. React 16.6+ features may not work.'

I don't know if it is related or not.

If we check the component in the devtools, it is kust empty...

[Heluwe]

+1 But sometimes it's works

[MatanMaimon]

+1 here, same issue

[xiangfengsu]

+1 here, same issue

[alexluong]

+1

[JoseLAmador]

+1 🤔

[ghost]

+1

[RedYaafte]

+1

[alanllamas]

+1

[coderdiaz]

How can I contribute to this project? Any documentation about?

[ncordin]

+1

[axe312ger]

Same for non-typescript environment

[axe312ger]

Wow, this took some time, but after digging deeper into the source, I found two reasons, why it won't render any props for me. Now I got it rendering, even when just hacked into node_modules 😏

Thats broken (for me):

Everything in node_modules get excluded

https://github.com/pedronauck/docz/blob/cfe07b0c00fa5ff73bd194fbc48240a5315bc10e/core/docz-core/src/states/props.ts#L30

This breaks parsing the props since I try to render docs for some dependencies.

For now I can work around since my lerna repo has the files outside of node_modules as well. Later on, I need to render props from selected dependencies.

Anybody doing similar? We could have a flag to exclude that filter or only ignore files that not include the source string.

As soon I set a src to my components, it fails to generate entries.

Don't see yet why this is related to the entries. But I found a workaround ⬇️

First step to fix this within docz

The props parser can actually accept another config to set the components path. It's called docgenConfig. Unfortunately, the default config overwrites the given config. I thing this is a bug.

https://github.com/pedronauck/docz/blob/cfe07b0c00fa5ff73bd194fbc48240a5315bc10e/core/docz-core/src/config/docz.ts#L36

So we could just replace

 const base = { ...initial, ...doczRcBaseConfig, paths }

with

const base = { ...doczRcBaseConfig, ...initial, paths }

Since initial contains the users config, which should extend the base config and not the other way around.

This way I can simply add the following to my gatsby-config.js to get the props parsed and rendered:

{
  resolve: `gatsby-theme-docz`,
  options: {
    docgenConfig: {
      searchPath: path.resolve(
        __dirname,
        '../packages/components'
      ),
    },
  },
},

PR: https://github.com/pedronauck/docz/pull/1017

Still not working... but there is filterComponents

As far I can see, does the default filterComponents function filter all components within a (sub)directory.

Just set filterComponents to false to disable this.

Currently working on @axe312/gatsby-theme-docz which will contain all the fixes as soon I got everything solved ⬇️

Still more problems, wow 😱

So my props get parsed, I can see this when logging within the Props component. But now, the files won't be matched since the keys and the filename differ:

output from https://github.com/pedronauck/docz/blob/master/core/docz/src/components/Props.tsx#L142

filename: "node_modules/@my-project/components/social-media/instagram-post.js"`
stateProps: Array(8)
6: {key: "../packages/components/social-media/instagram-post.js", value: Array(1)}

This is probably related to my hacky approach of changing the sourcePath.

Will have a look with a fresh mind on this the next days, any help is very welcome :)

[gogoyqj]

well...just add code below to docz.js and it works for me https://github.com/doczjs/docz/issues/941#issuecomment-518118071

filterComponents: files => files.filter(p => p.match(/ts[x]?$/))

[beeeku]

well...just add code below to docz.js and it works for me #941 (comment)

filterComponents: files => files.filter(p => p.match(/ts[x]?$/))

@gogoyqj can you share your doczrc.js, It will be helpful to others!

[JoseLAmador]

@beeeku Works!, change your doczrc.js config:

export default {
  filterComponents: (files) =>
    files.filter(filepath => /[w-]*.(js|jsx|ts|tsx)$/.test(filepath)),
}

Note: First remove your .docz and try it! 🍻

[beeeku]

Can't Confirm Why But This WORKS !!!

[stale[bot]]

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.

[PaulieScanlon]

I had a similar issue, and with.tsconfig.json and doczrc.js all setup as it should be i found that after some time it was always working!...

I just had to delete .docz and run the build again... You might see in terminal that it says cache is missing and prop types will need to be generated, after the build completes the PropTables were populated as expected.

[jugglingcats]

@PaulieScanlon do your props update when you change the component definition? I can get the props to refresh if I stop dev server, delete .docz and start again, but this is a pain on every prop change!

[PeteJodo]

I had a similar issue and it was because the props table it was trying to render was for the component exported from the file MyComponent.test.tsx rather than MyComponent.tsx which had correctly generated documentation for, the check just happened to test the test file before my actual file and matched. The check where this was happening and matching test files occurs here. However the better solution is to have docz ignore test files instead