docz: Attempting to use the Props builtin component. It simply just never works.

Bug Report

Describe the bug

Attempting to use the Props builtin component. It simple just never works. There are no errors.

To Reproduce import Props from docz ( import { Playground, Props } from "docz";

Expected behavior

Should render a <Props of={MyComponent}/> table.

Right now it just never renders; and there are no errors.

Environment

  • OS: OSX 10.14.6 (18G87)
  • Node: 12.4.0

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 10
  • Comments: 43 (14 by maintainers)

Most upvoted comments

Idk if this helps. But I was experiencing this problem when using it with typescript. Turned out the issue was that I didn’t have a tsconfig file. Once I added that it solved the issue. Is it possible that might work for you as well @robjac? If so then maybe adding that to the documentation would eliminate some of these pain points for others. If not @rakannimer is right. The docz community can provide much more help if you share the smallest reproducible example possible.

Props not showing in my monorepo project. Playground is fine.

i have the same problem,,and I tried the above solutions,but it sames didn’t work

@rakannimer Props not showing in monorepo example. Now v2 can auto get props from d.ts? Because import from package.

Idk if this helps. But I was experiencing this problem when using it with typescript. Turned out the issue was that I didn’t have a tsconfig file. Once I added that it solved the issue. Is it possible that might work for you as well @robjac? If so then maybe adding that to the documentation would eliminate some of these pain points for others. If not @rakannimer is right. The docz community can provide much more help if you share the smallest reproducible example possible.

  1. For typescript It did help just ran tsc --init, thanks!
  2. You also need to use non default exports for it to work.
  3. upon import make sure to include .tsx at the end. eg :
import {DummyFormRef} from "./DummyForm.tsx"; 

Sorry you’ve had this frustrating experience ! We did more changes on the Props components that might solve your problem.

Coud you please provide a small repo with a repro of the problem so we can be more helpful in debugging this ?

updgraded to 2.0.0-rc.55

and Props are still not showing for my Button component.

please let me know if you need another copy of my files. ( they are detailed above ).

Funny enough, Props is no longer working for any of my components anymore. (it used to work for one of my Components, built in the same way as my Button example above.)

Have you tried:

import Button from "./index";

or exporting as named export without default and:

import { Button } from "./index";

@robjac I wasn’t able to reproduce the problem with the code you provided.

Please try reproducing the problem in a repo and provide it here so we can help debug.

^ still not working for me ; however what is interesting is that it works for another one of my components that is set up the same way

import PropTypes from "prop-types";
import React from "react";

import "./styles.css";

const Button = ({ children, className, onClick }) => (
  <button className={className} onClick={onClick ? onClick : () => {}}>
    {children}
  </button>
);

Button.propTypes = {
  className: PropTypes.string,
  onClick: PropTypes.func.isRequired
};

Button.defaultProps = {
  className: null
};

export default Button;
---
name: Button
route: /button
menu: Components
---

import { Playground, Props } from "docz";

import Button from "./index.js";

# Button

## Examples

### Default Button

<Playground>
  <Button
    className="button"
    onClick={() => alert("You clicked the default button")}
  >
    Click Me
  </Button>
</Playground>

## Props

<Props of={Button} />

docz version : "docz": "^2.0.0-rc.10",

I think it’s better to add a special section to describe how to integrate with typescript in the documentation.

I agree with you, it should also not need the extension to be added to work.

Adding both to the project todos 👍

One last thing,

Can you try adding the extensions when importing Button in your mdx file ?


import { Button } from "./Button.tsx"