search

facebook / stylex

StyleX is the styling system for ambitious user interfaces.
https://stylexjs.com
MIT License
8.43k stars 309 forks source link

feat: source editor that supports multiple files #759

Open aminaopio opened 3 weeks ago

aminaopio commented 3 weeks ago

What changed / motivation ?

The StyleX website has an empty-ish page for the playground. This tackles one of the issues: A source editor pane that support tabs for multiple files.

Linked PR/Issues

This helps address issue #732

Additional Context

Implemented Change (w/o server running):

https://github.com/user-attachments/assets/f82723d6-e520-4586-9081-e0ab05c22da9

Screenshots:

Screenshot 2024-11-13 at 12 39 05 AM Screenshot 2024-11-13 at 12 39 22 AM

Pre-flight checklist

aminaopio commented 3 weeks ago

@nmn Hey Naman! I'm still working through the functionality for this feature, but I'm having some trouble getting the styling correct. I've added 'overflow: auto,' to the container component, but the result is above. Without that, the header causes the remainder of the text to overflow slightly and the preview pane is not entirely visible. Any suggestions?

Also, it's currently setting default tabs to those provided within playground-utils/files. Is it preferable to only have the src as a tab and then allow the user to create additional tabs? Sorry if these are silly questions, but let me know your thoughts. Thanks in advance!

nmn commented 3 weeks ago

@aminaopio I suggest building a sidebar instead. Within the sidebar, you can use <details><summary> elements to create a tree view for the entire file-tree.

You can add a single icon button to show the sidebar that can be absolutely positioned appear over the code editor. This way you can avoid dealing with layout issues.

If you continue to deal with issues, lmk, and I'll help with the UI.

aminaopio commented 2 weeks ago

Hi @nmn, I ended up having to tuck the icon button into a header anyway, but let me know your thoughts. Maybe the UI could use some work....

nmn commented 2 weeks ago

I have a project with Rollup working properly here: https://stackblitz.com/edit/sb1-tu4v6l?file=src%2FApp.tsx

Using this project, you should be able to have a four tab design with the following tabs:

  1. The editor
  2. The transformed JS code of the currently active file
  3. The styles collected from the currently active file
    • OR the final CSS
  4. The preview
    • The preview should "just work".
    • It should not refresh twice on every change

You can probably skip the eslint and typescript parts of the project for now. That should make the setup fairly small.

aminaopio commented 2 weeks ago

I have a project with Rollup working properly here: https://stackblitz.com/edit/sb1-tu4v6l?file=src%2FApp.tsx

  • It's a basic React app with Rollup and livereload

  • It uses a forked version of @stylexjs/rollup-plugin

    • It adds a few lines of code to write the individual transformed JS files and the collected styles from them to a previews folder.

Using this project, you should be able to have a four tab design with the following tabs:

  1. The editor
  2. The transformed JS code of the currently active file

  3. The styles collected from the currently active file

    • OR the final CSS

  4. The preview

    • The preview should "just work".
    • It should not refresh twice on every change

You can probably skip the eslint and typescript parts of the project for now. That should make the setup fairly small.

Ok I just looked over this again now that I'm fully awake, and I see what you're saying

aminaopio commented 2 weeks ago

However, I'm having some trouble visualizing what you mean by 4 tab design @nmn

I was under the impression that what I'm implementing currently is just the multi-file support for the code editor alone

A source editor pane that support tabs for multiple files

nmn commented 2 weeks ago

We have design options, but what I'm imagining is that the left half of the screen is the code editor (plus a sidebar), and the right half of the screen has tabs to let you see either the JS output, collected styles, generated CSS or preview.

A grid of four corners like in your hand-drawn picture could also work.

nmn commented 2 weeks ago

I was under the impression that what I'm implementing currently is just the multi-file support for the code editor alone

You can start with that. Do you want me to integrate the Rollup project into my playground PR so you can just rebase on top and do the work on adding tabs for the source editor?

nmn commented 2 weeks ago

Hey @aminaopio Sorry, I confused the two Playground related PRs. Please carry on with your work on adding tabs.

aminaopio commented 2 weeks ago

Hey @aminaopio Sorry, I confused the two Playground related PRs. Please carry on with your work on adding tabs.

Oh okay all good! I'll start implementing what you suggested once this one gets finished up and merged

You can start with that. Do you want me to integrate the Rollup project into my playground PR so you can just rebase on top and do the work on adding tabs for the source editor?

We can try this out on our own, but may need assistance. I'll get back to you on this one. Thanks!

aminaopio commented 2 weeks ago

@nmn Is this okay to merge? And can you go ahead an integrate the rollup project as well? Thanks!

nmn commented 2 weeks ago

@aminaopio I think you will need to rebase your branch before we can merge.

The basic functionality seems to work, but the design could use a bit more love too.

None of these changes are blockers, but we will need to get the other parts of the playground working before we are able to merge it anyway.

aminaopio commented 1 week ago

@aminaopio I think you will need to rebase your branch before we can merge.

The basic functionality seems to work, but the design could use a bit more love too.

  • The arrow icons can be replaced with real SVG icons. Docusaurus might also have an icon for this available.
  • The trash icon should probably be red, and likely the outline variant.
  • The filenames should not be editable all the time. Double-clicking (or hitting Enter) should enable edit mode and the border around the text input should be more prominent.

None of these changes are blockers, but we will need to get the other parts of the playground working before we are able to merge it anyway.

@nmn Ok thanks for the feedback, it should be good to go now. I imported icons from FontAwesome and double-clicking will enable edit mode for the filename (let me know if the white bg is too harsh/if the red trash icon should be a diff color).

We're hoping to implement the rest of the playground in parallel with working on other issues. Do you have any beginner-friendly ideas for contributing to the docs?

nmn commented 1 week ago

Do you have any beginner-friendly ideas for contributing to the docs?

We need help identifying issues in the docs. We've received feedback that the docs are not good enough, but we also don't have any feedback on what should be improved.

One of my ideas is to add a section called "Recipes" or "Patterns". It can contain a bunch of examples of how to do various patterns from other CSS libraries like variants, or applying styles on descendent when a parent is hovered by using variables.

I have written long answers in Github Discussions answering many such questions, so digging through all the discussion topics, it should be possible find a bunch of patterns that can be documented on the website itself.

nmn commented 1 week ago

Looking further at this PR, there are a few nits still:

  1. The red icon doesn't look great on the pink background. Let's stick to the "primary" color (white or black)
  2. There is no way to create a file within a folder.
  3. Can't drag and drop files between folders (stretch goal)
aminaopio commented 1 week ago

One of my ideas is to add a section called "Recipes" or "Patterns". It can contain a bunch of examples of how to do various patterns from other CSS libraries like variants, or applying styles on descendent when a parent is hovered by using variables.

I'll try to cook something up, thanks for the suggestion!

The red icon doesn't look great on the pink background. Let's stick to the "primary" color (white or black) There is no way to create a file within a folder. Can't drag and drop files between folders (stretch goal)

Gotcha, I'll continue working on this as well