React version of demo

[joelvh]

This is a port to React.

• Render HTML layout in React
• Port all blocks to React components
• Port event listeners to React lifecycle
• Create adapter from React to Flowy engine
• Implement minimizing left card
• Improve highlighting blocks and toggle right card

This builds on the work in #37 and #38

[joelvh]

@alyssaxuu the React implementation of the demo is done. This focused on getting the current demo working as a React version, with some bug fixes and the ability to minimize the left card.

I will continue refactoring flowy and the React implementation in another branch to implement new features and fix some buggy flowy behavior when clicking blocks.

Any feedback to get this merged?

[alyssaxuu]

Nice! Just wondering how that would merge though - I do want to have a non-React version, so would it be in a different branch/folder? Also there's been some bug fixes/enhancements since you made these commits.

[joelvh]

@alyssaxuu the goal here was to keep the non-React version in-tact, separating it from the React-based version. In terms of merging things, we'd look at the new commits and port those updates to this branch. As mentioned in #37, we can also keep the build artifacts in the git repository as working demo code for simplicity of showcasing the output (for React- and non-React-based versions). If you get a chance to checkout this branch, you'll see locally, it's organized as separate sets of code -- again, focusing on keeping the non-React as-is and the React version builds on top of that as an example of how to use it with React.

[vinayakkulkarni]

damn! I have vue version lying around in my repo..

but yeah, keeping flowy framework free would be the best thing

[AllanOricil]

damn! I have vue version lying around in my repo..

but yeah, keeping flowy framework free would be the best thing
Could you share your vue implementation?

[joshbedo]

I'd love to use this if it's still a thing :)

[joshbedo]

Any way i can pull this react version in as a module or something for my project? @joelvh

Also is this functional? I was trying to get it working in my project but im getting weird errors a few minutes after pages loads with snapping/grabme function and some other things.

[joelvh]

@joshbedo the demo worked when I created the PR - however, I had started refactoring flowy to use ES6 and @alyssaxuu has decided not to go that direction, nor with NPM. I'm afraid this is a bit outdated now (in terms of having the latest from master). I may come back to this in the future, but unsure as to how flowy will be managed going forward.

[vinayakkulkarni]

It's MIT Licensed! You can always fork and create your own ES6, Vue, Svelte, Angular, Alpine or even React version of it.

Super glad that @alyssaxuu has kept the philosophy as per her understanding and not being forced of making this into a framework specific plugin/pkg.

Kudos to @joelvh for the feature requests too!

♥ OSS

[joelvh]

@vinayakkulkarni yep - that's absolutely right. Will revisit when I have time.

[joshbedo]

@joelvh did you happen to see this error at all when running the React version? Can't seem to get the snapping function to execute properly it keeps erroring out with drag.querySelector is undefined. Not too sure what could be causing this. I've been digging through the source code all day.

[joshbedo]

Another screenshot, seems really odd.

[joelvh]

@joshbedo are you getting those errors when you run npm run react in the root of my branch? That should launch the React demo.

[joshbedo]

I was using the react branch you created and ran npm start i believe. I ended up just recreating the vanilla version in React and got it working. Looking through all your code helped a lot though!

[PurplePineapple123]

I was using the react branch you created and ran npm start i believe. I ended up just recreating the vanilla version in React and got it working. Looking through all your code helped a lot though!

Hey Josh! I'm looking to add this to my project as well :) Would you be willing to share the working react version you created?

[VINCIDAO]

Hello

Also trying to import this to react. Any way I can get it?