react-proto/react-proto

:art: React application prototyping tool for developers and designers :building_construction:

React-Proto

React-Proto is a React application prototyping tool for developers and designers.

React-Proto allows the user to visualize/setup their application architecture upfront and eject this architecture as application files either into a previous project or a new create-react-app project or a starter template from any repository.

Download for MacOS, Windows, Linux.

• Mac users only: for now you might need to go to your security settings to allow the app run on your system as we do not have an Apple license yet.

If you find any issues, file issue

How To Use

• Application can be run from cli using react-proto command or by clicking on the application icon.

• To start a new project, either import a mockup or start with a blank stage.

• Add components you would like to create using the input, then drag the component frame into place and resize accordingly.

• While building, you can use the icons in the toolbar to zoom, toggle draggability of the stage, update or remove an image, collapse the left container, and export your files.

• For each component you have the ability to define whether your component will have state, the color of the frame component, and the ability to apply a parent component.

• If you place a container around other components and can no longer access them, you can use the layer buttons in the corresponding dropdown menu to change layer order down or up.

• In the right container, the props tab allows you to define props in key value pairs, as well as the necessary prop type.

• Once you are finished, you can use the export button in the toolbar to choose from three options of how to export your files:

  1. Import your files into an existing project. Just choose the path where you would like to create your components folder.
  2. Use create-react-app to start a new project (the project will be under the "proto_app").
  3. Clone your favorite Github repo to start a project with your favorite starter files.

• Lastly, start building!

Authors

Blessing E Ebowe @refinedblessing

Brian Taylor @brianwtaylor

Erik Guntner @erikguntner

Running Your Own Version

• Fork and Clone Repository.

• Open project directory

cd react-proto

• Install dependencies

yarn install

• Run application

yarn start

• For development experience...

yarn dev

• and on another terminal

yarn electron

Linting

yarn linter

Testing

yarn test

Built With

• React - Framework for building user interaces.
• Redux - Predictable state container for JavaScript apps.
• Electron - Cross-platform desktop apps with HTML, CSS and JS.
• KonvaJS - HTML5 2d canvas library for desktop and mobile applications.
• React-Sortable-Tree - Drag-and-drop sortable component for nested data and hierarchies.

Acknowledgments

Logo Design

Clariz Mariano @havengoer

Joe Thel @fakemonster

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

react-proto's Issues

Binaries for other Linux distros?

I currently use ArchLinux and converting a .deb to the system's package manager is not a good practice, I would be very happy if it were made available on other platforms via AUR (community repository in Arch based distros) or in a precompiled.

Python Dash (plotly) support

Description

Hi, would it be possible to implement a support for python Dash library? That is generating boilerplate code not directly for react, but for react wrapper - dash.

Why

It would allow all python only developers, scientists and other folks to utilize this software. There is a similar designer for dash by plotly company, but it is behind a huge pay-wall. And since there are a lot of python users and the same lot of dash users, it would greatly enlarge the audience of this application.

Is this something you're interested in working on?

Yes, I would like to help, but since I am just a beginner and more of data-science python user, I'd need someone else to lead the effort.

RPM package (Red hat & Fedora users)

Hello guys,

First of all, thank you and congratulations for this project.

I've tried to install using the deb package and converting with alien to rpm but I received an error.

It will be nice to have a native rpm package. Is it possible?

Download not available for Red Hat based distros

Right now, linux download has only .deb file.
It would be good to have .rpm file as well.

(core dumped) react-proto

React-Prot Version: 1.0.0

Details

It does not load after installing, I tried from terminal and this is what I got

[1] 16806 segmentation fault (core dumped) react-proto

Your Environment

OS: Ubuntu Jammy Jellyfish
Kernel: 5.13.0-21-generic
Shell: zsh 5.8
CPU: Intel i5-9400F (6) @ 4.100GHz
GPU: NVIDIA GeForce GTX 1050 Ti
Memory: 3341MiB / 15951MiB

issue in Ubuntu 14.04

perl: warning: Setting locale failed.
perl: warning: Please check that your locale settings:
	LANGUAGE = (unset),
	LC_ALL = (unset),
	LANG = "en_IN.ISO8859-1"
    are supported and installed on your system.
perl: warning: Falling back to the standard locale ("C").
E: react-proto: maintainer-name-missing [email protected]
Use of uninitialized value $name in pattern match (m//) at /usr/share/perl5/Lintian/Check.pm line 203.

Error in Windows 7

I try install in windows 7 but no has success.

I receive this error

Github Template Files

This repository doesn't have some useful GitHub template files at the barest :

• ISSUE TEMPLATE
• PULL REQUEST TEMPLATE

which are templates that can assist contributors in communicating their intentions better,
I would love to work on this 😄

Web version?

Is it feasible this could be run within a browser? Or perhaps the core components that make up the editor could exist in a separate package -- split from the electron specific API's relating to saving etc.

AppImage run crashes: React-Proto quit unexpectedly

React-Prot Version: 1.0.0

Details

Attempting to use released appimage on Fedora 29. Not using sudo or elevated permissions (root) of any kind.

Expected Behavior

The appimage should open the react-proto interface.

Actual Behavior

First run creates the desktop file after being asked if I wish to integrate the app in menus, etc. and responding 'yes' then it crashes with generic message "the application encountered a problem and could not continue."

Possible Fix

Make app image run on Fedora 29

Your Environment

Fedora 29-x86_64

Steps to Reproduce

1. Download appimage from releases page
2. set exec permissions on appimage
3. set "Disk Image Mounter" as default application to open file
   4.right click and select "Run"

Stack Trace

Stack trace of thread 8239:
#0 0x0000000000dbf060 n/a (/tmp/.mount_react-XgS644/react-proto)

Konva.Transformer is currently experimental and may have bugs.

bundle.js:45 Konva warning: Konva.Transformer is currently experimental and may have bugs. Please report any issues to GitHub repo.
warn @ bundle.js:45

Can't be installed on macOS

React-Prot Version: x.x.x

Details

• OS -> Montery 12.1

• “React-Proto” cannot be opened because the developer cannot be verified.

Expected Behavior

Actual Behavior

Possible Fix

Additional Info

Your Environment

• Environment name and version (e.g. Windows 10, node.js 5.4):
• Operating System and version (Mac or Linux):
• Useful link to screenshot or any other information:

Steps to Reproduce

1. first...

Stack Trace

Yarn start runs for long time (600+ seconds) then nothing

React-Prot Version: latest master

Details

Latest master won't run using yarn start, dev or yarn electron

Expected Behavior

latest pull from master should always work.

Actual Behavior

Nothing. Issue any command to start the app and it churns for a good long time (see below), emits some messages to console then says "Done in 616.86s" and returns to command prompt. No UI window ever appears. The aren't any hints of the process running is ps.

Your Environment

Fedora Linux v29, node.js 10.14.1

Steps to Reproduce

1. clone from master
2. yarn install
3. yarn start

Stack Trace

$> yarn start

yarn run v1.12.3
$ cross-env NODE_ENV=production webpack --config webpack.config.production.js
Hash: 22c0ea93ed6bde3cca2e
Version: webpack 4.16.5
Time: 600043ms
Built at: 12/07/2018 7:59:12 PM
Asset Size Chunks Chunk Names
icons/48x48.png 2.54 KiB [emitted]
js/bundle.js 5.64 MiB 0 [emitted] app
styles/style.css 20.8 KiB 0 [emitted] app
index.html 761 bytes [emitted]
icons/16x16.png 546 bytes [emitted]
icons/24x24.png 1010 bytes [emitted]
icons/32x32.png 1.38 KiB [emitted]
js/1.bundle.js 484 KiB 1 [emitted] vendor
icons/64x64.png 3.72 KiB [emitted]
icons/256x256.png 21.4 KiB [emitted]
icons/128x128.png 9.48 KiB [emitted]
icons/512x512.png 63 KiB [emitted]
icons/1024x1024.png 180 KiB [emitted]
icons/icon.icns 280 KiB [emitted]
icons/icon.ico 353 KiB [emitted]
[138] ../node_modules/react-redux/es/index.js + 24 modules 43.2 KiB {0} [built]
| 25 modules
[175] ./actions/components.js 7.92 KiB {0} [built]
[364] ./localStorage.js 566 bytes {0} [built]
[471] multi babel-polyfill ./index.js 40 bytes {0} [built]
[673] ./index.js 722 bytes {0} [built]
[684] ./public/styles/style.css 41 bytes {0} [built]
[729] ./containers/AppContainer.jsx 6.07 KiB {0} [built]
[731] ./containers/LeftContainer.jsx 11.7 KiB {0} [built]
[823] ./containers/MainContainer.jsx 12.9 KiB {0} [built]
[844] ./containers/RightContainer.jsx 5.34 KiB {0} [built]
[1050] ./utils/convertIdsToObjs.util.js 1.27 KiB {0} [built]
[1051] ./store.js 1.23 KiB {0} [built]
[1055] ./reducers/index.js 452 bytes {0} [built]
[1056] ./reducers/componentReducer.js 3.34 KiB {0} [built]
[1140] multi @material-ui/core 28 bytes {1} [built]
+ 1126 hidden modules

WARNING in ../node_modules/prettier/index.js 7103:15-64
Critical dependency: the request of a dependency is an expression
@ ./utils/createFiles.util.js
@ ./actions/components.js
@ ./containers/AppContainer.jsx
@ ./components/App.jsx
@ ./index.js
@ multi babel-polyfill ./index.js

WARNING in ../node_modules/prettier/index.js 28458:7-46
Critical dependency: the request of a dependency is an expression
@ ./utils/createFiles.util.js
@ ./actions/components.js
@ ./containers/AppContainer.jsx
@ ./components/App.jsx
@ ./index.js
@ multi babel-polyfill ./index.js

WARNING in ../node_modules/prettier/third-party.js 4143:15-32
Critical dependency: the request of a dependency is an expression
@ ../node_modules/prettier/index.js
@ ./utils/createFiles.util.js
@ ./actions/components.js
@ ./containers/AppContainer.jsx
@ ./components/App.jsx
@ ./index.js
@ multi babel-polyfill ./index.js

WARNING in ../node_modules/prettier/parser-glimmer.js 1:128755-128773
require.extensions is not supported by webpack. Use a loader instead.
@ ../node_modules/prettier/index.js 28347:13-40
@ ./utils/createFiles.util.js
@ ./actions/components.js
@ ./containers/AppContainer.jsx
@ ./components/App.jsx
@ ./index.js
@ multi babel-polyfill ./index.js

WARNING in ../node_modules/prettier/parser-glimmer.js 1:128776-128794
require.extensions is not supported by webpack. Use a loader instead.
@ ../node_modules/prettier/index.js 28347:13-40
@ ./utils/createFiles.util.js
@ ./actions/components.js
@ ./containers/AppContainer.jsx
@ ./components/App.jsx
@ ./index.js
@ multi babel-polyfill ./index.js

WARNING in ../node_modules/prettier/parser-glimmer.js 1:128813-128831
require.extensions is not supported by webpack. Use a loader instead.
@ ../node_modules/prettier/index.js 28347:13-40
@ ./utils/createFiles.util.js
@ ./actions/components.js
@ ./containers/AppContainer.jsx
@ ./components/App.jsx
@ ./index.js
@ multi babel-polyfill ./index.js
Child extract-text-webpack-plugin ../node_modules/extract-text-webpack-plugin/dist ../node_modules/css-loader/index.js??ref--5-2!../node_modules/postcss-loader/lib/index.js??ref--5-3!../node_modules/sass-loader/lib/loader.js!../node_modules/react-sortable-tree/style.css:
2 modules
Child extract-text-webpack-plugin ../node_modules/extract-text-webpack-plugin/dist ../node_modules/css-loader/index.js??ref--5-2!../node_modules/postcss-loader/lib/index.js??ref--5-3!../node_modules/sass-loader/lib/loader.js!public/styles/style.css:
[0] ../node_modules/css-loader??ref--5-2!../node_modules/postcss-loader/lib??ref--5-3!../node_modules/sass-loader/lib/loader.js!./public/styles/style.css 9.65 KiB {0} [built]
+ 1 hidden module
Child html-webpack-plugin for "index.html":
1 asset
[0] ../node_modules/html-webpack-plugin/lib/loader.js!./public/index.html 814 bytes {0} [built]
+ 2 hidden modules
$ cross-env NODE_ENV=production electron .
Done in 616.86s.

Got a seg-fault error from the CLI

React-Proto Version: last release

Details

I tried launching it from the icon and I got no response. So, I launched it from the command line instead, using the react-proto command. Here it responded but with a seg fault error. Any fix suggestions please?

repository size

The repository is 190MB big, a bit too much.

$ java -jar bfg-1.13.0.jar --strip-blobs-bigger-than 10M react-proto.git

Using repo : C:\Users\Daniel\GITHUB\react-proto.git

Scanning packfile for large blobs: 1798
Scanning packfile for large blobs completed in 201 ms.
Found 6 blob ids for large blobs - biggest=75874617 smallest=14455790
Total size (unpacked)=233273637
Found 80 objects to protect
Found 9 commit-pointing refs : HEAD, refs/heads/chore/icon-update, refs/heads/chore/npm_setup, ...

Protected commits
-----------------

These are your protected commits, and so their contents will NOT be altered:

 * commit e49cebbd (protected by 'HEAD') - contains 6 dirty files :
        - assets/dragging.gif (19,6 MB)
        - assets/export.gif (13,8 MB)
        - ...

WARNING: The dirty content above may be removed from other commits, but as
the *protected* commits still use it, it will STILL exist in your repository.

Details of protected dirty content have been recorded here :

C:\Users\Daniel\GITHUB\react-proto.git.bfg-report\2018-09-04\23-23-05\protected-dirt\

If you *really* want this content gone, make a manual commit that removes it,
and then run the BFG on a fresh copy of your repo.


Cleaning
--------

Found 208 commits
Cleaning commits:       100% (208/208)
Cleaning commits completed in 673 ms.

Updating 8 Refs
---------------

        Ref                               Before     After
        -----------------------------------------------------
        refs/heads/chore/icon-update    | b562ff36 | 40857396
        refs/heads/chore/npm_setup      | 97430a55 | 530293a1
        refs/heads/master               | e49cebbd | 8957078e
        refs/heads/staging              | efc53ba9 | 92c5606d
        refs/heads/tests/test-node-8-10 | 6ef63359 | 61cc0e24
        refs/tags/v0.1                  | b9c7c315 | 77f5e3db
        refs/tags/v0.1.0                | c672622d | e136ce60
        refs/tags/v1.0.0                | 7dfad85e | fd8b4127

Updating references:    100% (8/8)
...Ref update completed in 60 ms.

Commit Tree-Dirt History
------------------------

        Earliest                                              Latest
        |                                                          |
        ................................DmmmmmmmmDDDDDDDDDDDDDDDDDDD

        D = dirty commits (file tree fixed)
        m = modified commits (commit message or parents changed)
        . = clean commits (no changes to file tree)

                                Before     After
        -------------------------------------------
        First modified commit | db6e4330 | f0469df1
        Last dirty commit     | 6ef63359 | 61cc0e24

Deleted files
-------------

        Filename             Git id
        ---------------------------------------
        Electron Framework | a75a08b3 (72,0 MB)
        React-Proto.dmg    | e7add635 (72,4 MB)
        dragging.gif       | 42b7d492 (19,6 MB)
        export.gif         | d840cc18 (13,8 MB)
        hierarchy.gif      | a7b8f071 (27,6 MB)
        libnode.dylib      | a040de87 (17,1 MB)


In total, 168 object ids were changed. Full details are logged here:

        C:\Users\Daniel\GITHUB\react-proto.git.bfg-report\2018-09-04\23-23-05

BFG run is complete! When ready, run: git reflog expire --expire=now --all && git gc --prune=now --aggressive


--
You can rewrite history in Git - don't let Trump do it for real!
Trump's administration has lied consistently, to make people give up on ever
being told the truth. Don't give up: https://www.aclu.org/
--

No Export with create-react-app option in prod release

Options available:

• Export into existing project
• Export with starter repo

The latter one doesnt give the possibility to create a new project

China can not download

React-Prot Version: x.x.x

Details

Expected Behavior

Actual Behavior

Possible Fix

Additional Info

Your Environment

• Environment name and version (e.g. Windows 10, node.js 5.4):
• Operating System and version (Mac or Linux):
• Useful link to screenshot or any other information:

Steps to Reproduce

1. first...

Stack Trace

Won't run on Pop OS

React-Prot Version: Latest

Details

I downloaded the Debian installer package for Linux but on clicking on the icon nothing happens. Running the application from the terminal I got the following output

[1]    1742 segmentation fault (core dumped)  react-proto

Expected Behavior

App should run

Actual Behavior

App does not start, terminal outputs a segmentation fault

Possible Fix

Additional Info

Your Environment

• Node v10.15.1
• NPM 6.10.2
• Ubuntu (Pop OS is based on it) 19.04

Steps to Reproduce

1. Download Debian package installer from link
2. Click on app icon

Stack Trace

Terminal output when running react-proto

[1]    1742 segmentation fault (core dumped)  react-proto

Error toast when I choose Export into existing project

Toast :

There was an error while creating your files. SyntaxError: Unexpected token (12:29) 10 | <HeaderComponent /> 11 | <Menu /> > 12 | <DataContainer category={new}/> | ^ 13 | </div> 14 | ); 15 |

However the files are created and the code inside seems good

Just installed. Where are the components ?

React-Prot Version: 1.0.0

Details

Just installed on Mac OSX Monterrey, but I can's any components on the left-side bar to be used on the design. There's nothing on documentation on how do I add them.

Expected Behavior

Expeted to have Components list on left side column or a way to add them.

Actual Behavior

No Components at all.

Possible Fix

Docs with info no how to add Components?

Unable to Alien Linux DEB package to RPM

React-Prot Version: 1.0.0

Details

Running Alien on deb package downloaded from releases page fails with error.

Expected Behavior

An RPM package suitable for installation in an rpm based system is generated from deb package.

Actual Behavior

Process fails with error.

Possible Fix

Fix errors shown below and test alien conversion of newly generated deb package on current rpm based system (e.g., latest Fedora). Ensure scripts are compatible (see error in stack trace section).

Your Environment

Fedora 29-x86_64

Steps to Reproduce

1. Download deb package
2. sudo alien -r -v react-proto_1.0.0_amd64.deb

Stack Trace

dpkg-deb --info 'react-proto_1.0.0_amd64.deb' control 2>/dev/null
dpkg-deb --info 'react-proto_1.0.0_amd64.deb' control 2>/dev/null
dpkg-deb --info 'react-proto_1.0.0_amd64.deb' conffiles 2>/dev/null
dpkg-deb --fsys-tarfile 'react-proto_1.0.0_amd64.deb' | tar tf -
dpkg-deb --info 'react-proto_1.0.0_amd64.deb' postinst 2>/dev/null
dpkg-deb --info 'react-proto_1.0.0_amd64.deb' postrm 2>/dev/null
dpkg-deb --info 'react-proto_1.0.0_amd64.deb' preinst 2>/dev/null
dpkg-deb --info 'react-proto_1.0.0_amd64.deb' prerm 2>/dev/null

Warning: Skipping conversion of scripts in package react-proto: postinst postrm
Warning: Use the --scripts parameter to include the scripts.
mkdir react-proto-1.0.0
chmod 755 react-proto-1.0.0
dpkg-deb -x react-proto_1.0.0_amd64.deb react-proto-1.0.0
rpm --showrc
cd react-proto-1.0.0; rpmbuild --buildroot='/home/myuser/Downloads/react-proto-1.0.0' -bb --target x86_64 'react-proto-1.0.0-2.spec' 2>&1
Package build failed. Here's the log of the command (cd react-proto-1.0.0; rpmbuild --buildroot='/home/myuser/Downloads/react-proto-1.0.0' -bb --target x86_64 'react-proto-1.0.0-2.spec'):
error: line 5: Empty tag: Summary:
Building target platforms: x86_64
Building for target x86_64
find react-proto-1.0.0 -type d -exec chmod 755 {} ;
rm -rf react-proto-1.0.0

Install error on Windows 10

React-Prot Version: x.x.x

v1.0.0

Details

I am getting a JavaScript error on install (cannot resolve module)

Expected Behavior

I expected it to install and I did not see any dependencies in the readme.

Actual Behavior

Your Environment

Windows 10

Steps to Reproduce

• Downloaded windows installer exe from: https://github.com/React-Proto/react-proto
• double clicked.
• Watched progress bar for 5 seconds
• Went to completion
• Created Desktop icon
• Then it created the attached pop-up

Is this project dead?

Description

Why

Possible Implementation & Open Questions

Is this something you're interested in working on?

FYI Virustotal results - 3/72

React-Prot Version: x.x.x

V1

Details

Scanned via virustotal

Expected Behavior

No positive results

Actual Behavior

3 scanners identified software as malware - https://www.virustotal.com/gui/file/ea9ffddba200cc6235aa857ca5368d7f5c5f4ae8fdc8086c7f7977cc58985994/detection

Possible Fix

Additional Info

Your Environment

Windows 10 x64 PRO

• Environment name and version (e.g. Windows 10, node.js 5.4):
• Operating System and version (Mac or Linux):
• Useful link to screenshot or any other information:

Steps to Reproduce

1. Navigate to virsustotal
2. Scan software

Stack Trace

Misspelling of "Hierarchy"

Small issue on a wonderful project:
react-proto/src/components/RightTabs.jsx, line 93

"Heirarchy" should be "Hierarchy"

Not sure where else it appears, but that was the immediately noticeable typo prevalent in all screenshots.