Feat: Component Metadata

[dotcs]

Metadata

This PR allows to add metadata to components.

Each component, e.g. Button, can have an additional file named componentName + '.json', e.g. Button.json, which defines an object that includes metadata for the component.

Metadata can be fully controlled by the users with two constrains:

1. JSON root must be a object
2. Metadata key tags is reserved for the tag-system described below

Metadata of the component is read by processComponent and passed to all renderer components, such that users can re-use their own metadata definitions in custom implementations of the renderer components. This gives the users a large flexibility in order to categorise or further describe components.

Tag system (won't be implemented)

This PR also implements a tag system. The tags-keyword in the metadata of a component must be an array of strings. Each tag describes the component and can be used when filtering components.

Say we have the following metadata information for Button:

Button.json

{
  "tags": ["atom", "interactive"]
}

The list of tags is rendered for each component by the ReactComponentRenderer.

Also the implementation for filtering components has been adjusted to take care of the tag information provided in the metadata. Filtering for atom yields Button as a result because it has been tagged as such.

TODO

• Implement metadata parsing
• Provide list and list-item renderer for tag list and use them in ReactComponentRenderer
• Provide styling for list and list-item renderer
• Add tests for tag support
• Add tests for some custom metadata properties
• Add documentation for metadata

[sapegin]

Thanks for the pull request @dotcs! I like the idea of metadata but I think tag rendering and filtering should be a plugin, so I invite you to discuss possible plugin API for Styleguidist: #354.

Another idea that could use similar API: #421.

[dotcs]

@sapegin So should I throw away render + filter and keep the metadata parser step or would you say everything including metadata should plugins?
Since a plugin system is planned I would be fine with both ways, so it's up to you.

[sapegin]

I’d keep the metadata reader without special treatment for tags.

And any input on plugins API is very much appreciated ;-) It’s still planned because nobody really knows what to do ;-)

[sapegin]

Should I merge it or you’re planning to do something else in this PR?

[dotcs]

I'd like to add some tests for some filled metadata object if possible. I haven't had enough time to do this yet. I'll let you know when I'm done.

[sapegin]

Sounds good ;-)

[dotcs]

@sapegin Done. Should we add further documentation of this feature? Currently it's only documented via the customised sample application (and by the unit tests). Should we add further documentation for users? Maybe you can add documentation because you know best where to put it. Besides that the PR is ready to merge. :)

[sapegin]

Thanks, I’ll add some docs later ;-)