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

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

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 21
  • Comments: 22 (3 by maintainers)

Most upvoted comments

@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! 🍻

+1 But sometimes it’s works

Can’t Confirm Why But This WORKS !!!

Same for non-typescript environment