atri-labs / atrilabs-engine Goto Github PK

View Code? Open in Web Editor NEW

4.1K 23.0 179.0 32.94 MB

🧘‍♂️ Open-source no-code & code web app builder

Home Page: https://atrilabs.com

License: GNU General Public License v3.0

JavaScript 67.37% TypeScript 30.66% HTML 0.02% CSS 0.11% Dockerfile 0.01% Python 1.82% Shell 0.01%

fastapi javascript python3 reactjs webframeworks

atrilabs-engine's People

Stargazers

Watchers

Forkers

cruxcode adityaxpique darshitac11 akj1608 mumin-khan cryptocoderas supratim30 super1-1star deepak-dex jitulteron7 knightabhi rishabh2012329 shivam8452 mustafaskyer abdul0125 bhavyat-135 thevanshjain harshilsharmaa pansarapriyanshi niteshmodi crimson-03 abhi-146 sanjayk0508 saranshisavailable poonam7507 lucidmach shashtag harishfalco mahe9041 devnazmul girlscriptrohtak ayushsnofi sarinmsari vitikasoni anuragc10 subrat0796 anantankita itsaalexk hacker626 potato-29 naveen-nair ayushi0809 riyajain115 melvinodsa rohinirai010 eltociear sanskarg348 meghsham15 24267sandhya data2kinyungu bhaviksojitra mhered jadhavsankalp7 mayhazali reetmaurya anujsingla rohitkakade anurag-sharma00 pardeep4u pranitpatil03 dibkb sachinsharma95 kartik990 inumaki yukta114 ratankumar01 mayankprajapati08 deveshiitkgp2013 ankitsgithubs atri-apps atri-labs atri-labs prajwal3702 sarthakc0806 agupta88 sumanswaroop devanandfarkade ritwik282 divpatnayak ak2104-b gg-big-org harsh-sangwan2003 nandita27iitp subramanyarao11 iambijoykar shu12388y nishant2209 deepajha14 sourabhbajaj34 ashugee2825 tuppalwad deepak7565 prathamvarshney mitul72001 mu-l jayaprakash-c-m ghost1129 divymani01 pratik-pc ileego

atrilabs-engine's Issues

The container that drops on left side doesn't open in some cases

Explanation

If a container A is already open, and then we open container B followed by A again, then A doesn't appear. This happens because if a container is added again to the list of containers, it is not re-positioned in the array.

Fix:

Re-position a container at the top of the array if a container is opened again.

Improve user experience of color palette

Explanation:

The Usual/Normal user behavior
A user sets the hue and then plays around with the saturation to find a color that fits. A user would like to play around with the saturation more than once before making a final decision.

The problem in current user experience

Whenever the user selects a hue (by dragging the pointer on the horizontal color line), the box closes automatically, hence, the user doesn't get a chance to play around with the saturation level. The user will have to open the color palette again.
User might want to select multiple times in one go. Re-opening the dialog box, again and again, will be irksome.

Fixes:

Wrap <ColorPicker> inside a <div>. Whenever the user clicks outside the color picker, close the color picker. For this, we will have to add an onClick listener to the wrapper div and window. Create a state chart that has states such as idle, color-palette-open, invalid input, valid input etc.

Replace Icons

Custom panel
Tablet/Mobile

Component Navigator

Explanation:

Component Navigator can be used as an escape hatch for many of the shortcomings in the UX of the canvas.

Toggle Component UI Changes

Setting width & height has no effect currenlty. The Toggle size should change on setting width and height.

Input for size takes units such as rem, vw, vh, % etc.

Color palette doesn't update color sometimes

Explanation:

On setting hue, the color doesn't get updated sometime. It gets set to #000000.

Change UI design of custom panel

atri start can only be run from app's root directory

Explanation:
Currently atri cli can only be run from root directory of the app. If it's run from one of child of root directory, then it will assume that a new app has to be created.

Fix:
Create a marker file that indicates that a directory is an app's root directory.

Need component - Div clicked, navigates to external/internal URL

Lint isn't working in @atrilabs/react-component-manifests

Explanation:

Hints like missing dependencies in useCallback, useMemo isn't working in @atrilabs/react-component-manifests. This can lead to undesirable behavior in the app produced.

Background color style in properties tab

The python app server doesn't reloads imported atri.py modules during development

Explanation:

The python app server doesn't reloads <route>.atri modules during development time. Hence, when a user drops a new component in the UI and presses Publish, the callbacks from deployed app to the python server start failing as the newly dropped components are missing.

Fix:

During development, reload the <route>.atri.py module on each request.

No tabs are automatically selected when a component is clicked

Explanation:

When we select a component that has two tabs in the properties tab and then we select a component with one property in the properties tab, it might happen that no tab is automatically selected.

Fix:

Select the first tab if the next component does not have the previously selected tab.

Toggle, Upload component doesn't get deleted on pressing backspace

The localhost:4002 opens before file server is ready to serve

Explanation:

This problem is more profound in Mac OS because it checks the signature when an executable is run for the first time, hence, more delay in starting the file server.

Fix:

Before opening http://localhost:4002 in browser, check if file server has started running.

Breakpoint support for CSS

The id of each component can be of the form <page_name>_<alias>. Implement a CSSGenerator that goes through all the CSSTree. It looks for state.breakpoints field in the CSSTreeNode.

Color palette doesn't show initial value

Explanation:
Imagine a scenario. I have selected red as the border color for a button. Let's say later I decide to just adjust the saturation a bit, but when I click on border color again, I see black as initially set. Now I have to move the color pointer to the initial position and then try from there. This is going to be a painful experience for a very common scenario.

Fix:
When a color palette opens, the initial color should be from props.styles.borderColor and similarly for other color styles.

Merging event with an array merges deleted elements of array

Callback properties UI for send file, send event and navigate to.

Design Select Template

Add Delete button

Categorize components in component picker

Menu order changes in page menu & publish menu when clicked

Explanation:

On clicking Select Template, the visual order of Insert Component and Select Template may swap.

Padding not working on page load

Raise manual hover event like manual select

state set in def init_state does not reflect even on refreshing page

Font support

Add font <link> in the <head> tag.

`atri start` gets stuck on windows

Explanation:

Traceback (most recent call last):
File "C:\Users\adity\anaconda3\envs\AtriTest\lib\pathlib.py", line 1288, in exists
self.stat()
File "C:\Users\adity\anaconda3\envs\AtriTest\lib\pathlib.py", line 1095, in stat
return self._accessor.stat(self, follow_symlinks=follow_symlinks)
FileNotFoundError: [WinError 2] The system cannot find the file specified: 'D:\atri.app.json'
During handling of the above exception, another exception occurred:
Traceback (most recent call last):
File "C:\Users\adity\anaconda3\envs\AtriTest\lib\runpy.py", line 196, in _run_module_as_main
return _run_code(code, main_globals, None,
File "C:\Users\adity\anaconda3\envs\AtriTest\lib\runpy.py", line 86, in run_code
exec(code, run_globals)
File "C:\Users\adity\anaconda3\envs\AtriTest\Scripts\atri.exe_main.py", line 4, in
File "C:\Users\adity\anaconda3\envs\AtriTest\lib\site-packages\atri\cli.py", line 23, in
find_and_set_app_directory()
File "C:\Users\adity\anaconda3\envs\AtriTest\lib\site-packages\atri\find_app_root.py", line 28, in find_and_set_app_directory
dir = find_atri_root_dir()
File "C:\Users\adity\anaconda3\envs\AtriTest\lib\site-packages\atri\find_app_root.py", line 14, in find_atri_root_dir
if attempt.exists():
File "C:\Users\adity\anaconda3\envs\AtriTest\lib\pathlib.py", line 1288, in exists
self.stat()

Cannot directly navigate to any route apart from /

Show status of Publish

Explanation:

When publish button is clicked, show the status of publish in a dropdown maybe.

Page switch doesn't show events from the newly selected page sometimes

Explanation:

If you are on page A and you drag and drop a component, then you immediately navigate to page B, then the events from page B will not show up on the canvas.

Clues:

Check clearCanvas function that's called when the page is switched.

Send image as response

Explanation:

Allow setting custom.src field of <Image/> component.

Solution:

Pass a second parameter to handle_event & init_state function a route's main.py file. This second parameter will have an object Response that can be used to manipulate the response being sent to the client from python server.

The file server doesn't have app-assets set as public directory

Explanation:

The file server running at http://localhost:4002 doesn't have the app-assets/ directory set as public directory, hence, the editor running at 4002 in production doesn't show images.

Fix:

Add app-assets to public directory for file server.

Automatically open http://localhost:4005 when generated app's server is booted

Explanation:
This is a manual step and might confuse some of beginner user.

Fix:
From python atri cli after successful deploy, ping http://localhost:4005(generated app's server) until we get a successful pong. Then we can open http://localhost:5000 in browser. Try to not open duplicate tab for http://localhost:4005. Open it once per atri cli session.

Cannot connect to generated app's python server from inside docker.

Explanation:
The generated app's dev server sends request at http://localhost:4007 to get updated state. This generated app's dev server is running inside the container and the python server is running outside the docker container, hence, they cannot communicate over localhost.

Fix:
Use host.docker.internal. But this only works in Docker desktop and not docker server. Find another solution if possible.

Upload component doesn't update in generated app on selecting a file

Explanation:

The generated code for a page doesn't contain props from useIoStore, hence, when the ioStore is updated, the page doesn't reload.

Client side navigation

Explanation:

Allow for callback handlers to have the Navigate To <route> step. Auto-populate all the possible routes.

Delete user template

atri cli shall not take custom ports

Explanation:

The client bundles such as manifest client that are requested once the editor loads talks to servers at ports like 4003. This causes a problem because now the bundled client contains this port number inside the code like fetch("http://localhost:4003").

Suggested fix:

Instead of sending requests to different ports, send requests to the host server at different URLs, for ex, instead of making requests to the manifest server by doing fetch("http://localhost:4003"), use fetch("/manifest-server"). We need to proxy these requests through webpackDevServer to the respective server (for ex, the manifest server). Similarly, we need to proxy requests from the file server to the respective servers as well.

Copy paste using keyboard shortcut

Recommendation:

Take inspiration from template layer.

Custom properties UI for arrays, color, boolean, large text

The order of styles property in properties tab is not intuitive

Explanation:
Currently, typography comes on top and flex, flex child comes at the bottom.

Fix:
Change the order in @atrilabs/component-style-layer package.

Generate app has deleted component as well

Explanation:

The generated app has definitions of deleted components. These definitions are not used in the JSX part of the generated app hence, the generated app isn't throwing errors.

Fix:

The generateApp function should also use getAppInfo function in a similar way as used in buildReactApp.

Component Selector custom props

Implement a rough version of the component selector that stores the alias of a component as a value to some custom props.

Add new action - Set Style

Choose component using alias (dropdown)
Display CSS property
With scope to add more properties in future

Change UI design of actions bar

Send data
Send file - send own or different component
Internal navigation
External navigation

Overlays don't take margin & border into account

Explanation:

The overlays that show the location of a component don't take border and margin into account, hence, when the user applies some margin to the component, the overlay size mismatches. The location of the overlay is correct, only the size mismatches.

Fix:

Use getCoordsBM function to get width & height of component with border and margin included.

Change icons for align-items & justify-content when flex-direction changes from row to column

Input Component UI fixes

Re-positioning image drags image highlight along with cursor

Explanation:

When we drag an Image component from one flexbox to another, an image appears below the cursor with some reduced opacity. This causes problems in re-position and sometimes the re-position doesn't work. This may be because mouse events are not reaching the parent components over which the image is being dragged.

Fix:

Figure out a way to disable this behavior of image drag.

atri-labs / atrilabs-engine Goto Github PK

atrilabs-engine's People

Stargazers

Watchers

Forkers

atrilabs-engine's Issues

Explanation:

Suggested fix:

Recommend Projects

Recommend Topics

Recommend Org