Proposal : Solution for react components

[sachaarbonel]

Hi @bernaferrari thank's for your great work on this library. I think adding support for React would be "relatively easy":
the idea would be to leverage the use of a naming convention on the Figma Nodes we want to "transpile" into components. For example : public:type="text" data-component="Input" element="input" will generate Html that looks something like this <input class="shadow appearance-none border border-red-500 rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" public:type="text" id="input" data-component="Input" />. Note the custom attributes here and the default div element that has been overridden by the input element. We could then use this html to react components library on a second pass to generate the component from the generated Html, which will be a react component called Input with a type prop. Note that the idea can later be refined for other usages like Flutter too (the behavior would slightly differ: instead of overriding the generated code it will wrap the Column or Row with the specific element for example element="listview" with a ListView builder). What do you think ?

[bernaferrari]

Hmmmm that's certainly interesting. How do you see this? Do you want me to add the "first step" and then the user would call the "second step" (possibly in vscode)? Or should it do both steps?

[sachaarbonel]

Hmm, I honestly don't know but if the plan is to later do it with Flutter or other frameworks you might need the "interfaces" (I don't know TS yet but I guess this is how it called) to do both at some point. On another hand, adding the dependency, I linked could be a pain to maintain. I think to battle test the idea you could just add the dependency as a test dependency unit test this on some test cases