Restructurate the Example app

[cdevienne]

I would like to propose a new design for the Example app. Currently adding an example requires adding bits in many files, including ones that contains states and views for all the widgets, which I found to be uncomfortable. Also, in the "states" lists, the widgets are too small and having everything on a single page is too much information at once (imo).

Ideally, adding a widget example/doc should only require to add a single file with the view(s) and state(s), and reference them in an index file. I suggest to use Bibliopola, maybe modify it to use the elm-ui-widgets for the navigation. I used it for elm-material-ui, I find it very comfortable to use.

[Orasund]

Thanks for your input. You are right. The example app in its current state is not very scaleable. I did not yet have the time to fix this. I originally had the idea that the example should be such that they can be integrated into a website but also serve as their own ellie-examples.

Maybe you're right and an out-of-the-box solution is better suited.

[cdevienne]

I can make an initial bibliopola based app quickly, without customizing it. Would you be interested in a PR ?

[Orasund]

No thanks, I'm not sure if I want to use bibliopola.

I'd rather go with kalutheo/elm-ui-explorer or insurello/elm-ui-explorer. Not sure which.

Personally I'd like to have the examples be interactable, not only through ellie. But i believe that this would not reduce the complexity of the example app.

Am Di., 18. Mai 2021 um 10:21 Uhr schrieb Christophe de Vienne < @.***>:

I can make an initial bibliopola based app quickly, without customizing it. Would you be interested in a PR ?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/Orasund/elm-ui-widgets/issues/57#issuecomment-842963393, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABYRMLHT2SC4EIHJXDHGPWTTOIPQTANCNFSM45B7OWVA .

[cdevienne]

I agree interactive examples are important. An inspiration could be : https://ui.mint-lang.com/components. As long as the examples are contained in a singe file and not dispatched among several files, I think the implied complexity would be acceptable.

[Orasund]

Yes I'm with you on that. But I believe that as long as we use an SPA, we will need to do some wiring (split over multiple pages). It might be that the current version of elm-spa might help here (I've not yet checked it out, but from the post about it, it sounds like it has an CLI that will do the wiring for you.

The actual design of the page does not matter (as long as it uses elm-ui-widgets for styling)

[cdevienne]

elm-spa works great indeed (I use it for our current project), but because we don't need auth, a shared model or complex routes, I feel it's a little too advanced for the need of a documentation. A simpler router would do the trick, with only a single index file to reference all the pages we want. The important part would be to provide constructors to build the pages easily, with static parts, usable examples and detailed stories (as in bibliopola). I guess the ideal result would be something between the 2 tools you mentionned and bibliopola.

[cdevienne]

I will give insurello/elm-ui-explorer a try, with a custom view function based on elm-ui-widgets, and add tooling to easily build pages.

[Orasund]

that would be great. thanks

Am Mi., 19. Mai 2021 um 08:44 Uhr schrieb Christophe de Vienne < @.***>:

I will give insurello/elm-ui-explorer a try, with a custom view function based on elm-ui-widgets, and add tooling to easily build pages.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/Orasund/elm-ui-widgets/issues/57#issuecomment-843793760, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABYRMLGYSDBGK6MDC6IRACDTONM4ZANCNFSM45B7OWVA .

[Orasund]

We decided to split up the issue into multiple PR(see #59).

It needs, among other things:

• [x] elm-ui-widget based views with theming support (which may require to embed and modify elm-ui-explorer)
  • [x] dark/light theme
  • [x] use widgets in pages
  • [x] use widgets in the main view
• [ ] tooling for showing code samples
• [x] integration of all the example views
  • [x] Button
  • [x] App Bar
  • [x] Dialog
  • [x] Icon
  • [x] Layout
  • [x] List
  • [x] Modal
  • [x] Multi Select
  • [x] Select
  • [x] Progress Indicator
  • [x] Sheet
  • [x] Snackbar
  • [x] SortTable
  • [x] Switch
  • [x] Tab
  • [x] TextInput
  • [x] passwortInput

I will be tackling "use widgets in the main view" for now and then depending on the time left (I've got about 2 weeks of free time) I will tackle the "integration of all the example views" bottom-up.

You can do whatever you feel like doing, just give me a quick notice if you started with a page so that we don't get a conflict.

[Orasund]

You can find the material-style sidebar in the master branch. I will now start working on passwordInput, ~textInput, Tab and Switch~

Edit: After finithing the first page, I feel like a LOT need to be done to streamline these pages. So instead of implementing the pages now and streamlining later, I will take some time and come up with something that is more scaleable (a "base" page). I opend a new about it:

[Orasund]

I've finished with the refactoring. I think we are now ready to add new pages.

[Orasund]

I've updated the website. Thanks for your work.

[cdevienne]

I enjoy what you did with it very much! May I suggest to make the interactive demo full width? It would look less compressed, especially the dialogs and appbar. Thanks for adopting my proposition so fast and so well.