Readme support

[digicoffey]

Hi there,

I asked this question in the docusaurus discord, but was told I'd be better off asking it here.

I'm very new to docusaurus and I'm struggling to understand how to use this plugin. I've followed the readme and installed the required packages and added the plugin to my config.

I'm not entirely sure how to run this plugin? Would you be able to point me to any examples?

I'm also not sure what to do with the PropTable example you provide in your README.

I have created a folder called components at docs/components and I'd like to have a file for each component displaying it's API in the table.

I've created a file called text.mdx inside docs/components and the contents are:

import { PropTable } from "./PropTable"; (PropTable is a JS file)

<PropTable name="Text" />

I can see the useDynamicImport hook inside PropTable, but I'm not sure how to generate the JSON files?

The actual component in my react project is Text.tsx and I have the standard react-docgen-typescript setup i.e.

/**
 * Text properties.
 */
interface TextProps extends BaseComponent {
  /** bold description */
  bold?: boolean;
  /** children description */
  children: ReactNode;
  /** className description */
  className?: string;
  /** color description */
  color?: TypographyColors;
  /** component description */
  component?: 'p' | 'em' | 'span';
  /** ellipsis description */
  ellipsis?: boolean;
  /** lineHeight description */
  lineHeight?: number;
  /** showBottomMargin description */
  showBottomMargin?: boolean;
  /** showTopMargin description */
  showTopMargin?: boolean;
  /** size description */
  size?: Sizes;
  /** textAlign description */
  textAlign?: 'left' | 'center';
  /** weight description */
  weight?: Weights;
}

/**
 * Text.
 */
export const Text = ({}) => <></>

My react project doesn't actually have the react-docgen-typescript library installed, I wasn't sure if that was required?

My react project is also a separate repo so the src property in my config looks like this: src: ['../project-name/src/**/*.tsx', '!../project-name/src/**/*test.*']

Apologies in advance if this is not the place to request support, but I'm struggling to find any examples online.

Thanks very much.

[digicoffey]

Closing as I will use another framework

[atomicpages]

Hello there 👋 , the PropTable component needs some TLC, but here's a small example you can use https://github.com/atomicpages/pretty-checkbox-react/blob/main/docs/src/components/PropsTable.tsx#L3 The JSON files are generated at build time so we can assume they'll be available. If you need extra help feel free to reopen!