Usage component support live preview for compatible components

[adids1221]

Description

Docs - Usage section, should show live playground or code block.
If the component is part of the ReactLiveScope we should show live playground else code block.
Old PR - closed because of the api files.

Changelog

Docs - Usage section, should show live playground or code block.

Additional info

None

[adids1221]

Note:

const code = component.snippet?.map(item => _.replace(item, new RegExp(/\$[1-9]/, 'g'), '')).join('\n');

This line takes the $x and remove it from each line of the snipper.

[ethanshar]

Is there a way to prettify the code, Nitzan did it in another use case, check with him

[ethanshar]

Move this line of code to after the check if a snippet exists

[ethanshar]

I think that the code doesn't update in runtime, it stuck on the snippet
if the user plays with the code it doesn't reflected in the preview

[adids1221]

UILivePreview has his own code state management, the LiveProvider handels it.

[ethanshar]

So it works?
If the user changes the code it applies?

[ethanshar]

I see it works for me
So maybe I had another issue, I'll approve
Let's merge this and fix the formatting in another PR

[adids1221]

Now LivePreview will be shown only for supported components otherwise it will show CodeBlock.

TODO: add useFormattedCode usage for LivePreview

I have some issue with useFormattedCode in some cases when the snippet is functional component with state management.
@nitzanyiz let's sync about it.

[ethanshar]

Approving.
I see it works for me now, we can fix the formatting in another PR