Stegosaurus

Use the 'stegosaurus' template to generate a table with all the component properties.

This table is very similar to the table generated by Storybook, with a few differences:

Feature	Stegosaurus	Storybook	Description
Name	✅	✅	Both in bold in the first column.
Description	✅	✅	Both in the second column as first text.
Type	✅	✅	Both as inline code block in the second column, under the description.
Params	✅	✅	Both as inline code block in the second column, under the type.
Default value	✅	✅	Both as inline code block in the third column.
Control	❌	✅	In the storybook the table is integrated with the story of the component. C2M's proposal is that this table can be used anywhere, so it needs to be platform independent.
Required	✅	✅	Both with a red asterisk next to the property name.
Deprecated	✅	❌	Stegosaurus identifies the @deprecated tag and places an alert icon next to the property name and, if it has description, places the description text as the first paragraph in the second highlighted column.
Since	✅	❌	Stegosaurus identifies the @since tag and places the version description in the second column.

Generated documentation:

• Action
• Button
• Card
• CardBody
• CardMedia
• CardMediaDescription

References

• Template source file
• Source code of the components:
  • Components with TypeScript
  • Components with PropTypes

How to generate this doc?

For learning purposes, below is the step used to generate the component documentation using this template.

At the root of the repository, just run the following command:

npx components-to-markdown@latest \
  --output packages/website/demo/stegosaurus/demonstration \
  --loglevel debug \
  --template stegosaurus \
  packages/example-react-components/src/lib packages/example-prop-types/src/lib

Change the output directory to an empty one if you want to see the file being created from scratch.

The packages/example-* are example projects that have components that will be documented.