React-sketchapp: Integration with Storybook and custom styles

[kirill-konshin]

This is a feature request.

It seems that now react-sketchapp could only be used only when all styles are inlined in JSX. This significantly limits its applicability for existing projects that often have separate CSS/SASS/LESS/PostCSS stylesheets and/or use something like Bootstrap.

What if there will be some tool that can parse existing demo site (including ones built with Storybook), grab all actual computed styles from DOM (which means app has to be truly rendered by a headless browser or similar) and then produce a temporary react-sketchapp app which in turn can be converted to Sketch file.

Sounds monstrous but should be quite viable.

[brianorwhatever]

Being able to use custom CSS in any sort of way would make this tool 100x more useful

[jongold]

We're building for a future of React-as-a-platform, and looks increasingly like React Native-style abstractions are the right model for that.

That leaves some difficult design decisions, such as standardizing around flexbox (for compatibility & reuse, and because we're just a couple of people and implementing every single browser layout model).

I have a feeling this might be the same category of issues — if there's a good solution in the React Native / React VR / React Native Web / React Primitives ecosystem then we can learn from it / use it.

[kirill-konshin]

Even if it's true I really hope there will be a way to onboard existing old-style projects with separate custom CSS stylesheets. A converter tool would be a good start anyway.

[jbovenschen]

Like @jongold mentioned above, I also think the style abstraction designed by react-native are a good way to express UI for other platforms then web, this because you don't need to think about css specific inheritance and other things useful for creating documents (This is totally a personal opinion). It enables you to write specific styling for your specific components.

About the react-storybook integration, you would to create a storybook-sketchapp binding or something, same as how the react-native one works, this is something totally doable, did already some experimentation with it, only got stuck with adding Socket communication within cacaoscript, will try further if I have any time left.

[lucasfeliciano]

Indeed, but doing that we are excluding web environments.

react-native ecosystem using View, Text and inline css is good but I really feel that if we forget about web ( JSX + CSS ) we will lose a lot of value for this tool

[jongold]

I'm going to say this a #wontfix — for the foreseeable future we're focusing on React-as-a-Platform (for more, see this talk by @intelligibabble at React Europe). React Native and React VR equally don't support DOM components or CSS, and I'd rather side with the API that a vast majority of new renderers are using. The DOM has _so many_ edge cases!

That's not to say it's unachievable, I just think there's a smarter solution than including it in core — maybe a codemod, babel plugin, abstraction over the DOM, abstraction over styled-components etc etc.

Happy to leave this PR open for visibility and to spitball ideas / projects that could enable this, if y'all wanna keep discussing :)

[mathieudutour]

let's close this in favor of https://github.com/brainly/html-sketchapp