kalutheo / elm-ui-explorer Goto Github PK

Hi

We are trying this and seems really nice. However we pass some information to the app via flags (e.g. paths for assets).
It doesn't appear there is a way to pass flags, at least not with explore.
Is it possible, any examples?

Thanks

Hi. Very nice project.

I've run into a problem with a component I have that uses the css display: fixed to take over the whole screen. The problem is that once it takes over the whole screen, there no way to click on the Elm UI Explorer "chrome". If the story was displayed in an iframe (like Storybook does), then it would only take over the iframe, and UI Explore menu and buttons would remain usable. I'd also like to make a plugin that displays the story inside various mobile device dimensions (instead of the entire page). I think that's only possible if the story is displayed in a frame (the iframe changes size depending on which device dimensions you choose).

Example:

As of https://github.com/kalutheo/elm-ui-explorer/blob/master/src/UIExplorer.elm#L658, the title of the document is hardcoded has "Storybook Elm".

Would you consider the possibility to make it configurable? If so, I will be happy to send a PR.

When navigating to https://kalutheo.github.io/elm-ui-explorer/examples/dsm/index.html#Styles/Typography/Typography

I noticed that a lot of the content is not visible as it goes beyond the viewport.

The config (UIViewConfig) should be the last parameter of renderStories so that a user can call the app like this (without the need of intermediary function):

app
        [ ( "Default"
          , [ { id = "dropdown"
              , description = "A dropdown Menu"
              , viewStories = renderStories viewStoriesWrapper stories
              }
            ]
          )
        ]

Instead of (at the moment):

app
        [ ( "Default"
          , [ { id = "dropdown"
              , description = "A dropdown Menu"
              , viewStories = viewStories
              }
            ]
          )
        ]

viewStories config =
    renderStories config viewStoriesWrapper stories

Hey, we are using elm-ui-explorer in our company and I was wondering about the possibility of removing the story menu bar only has 1 story. Some of our components only have 1 story, so I think it's makes sense to hide it when only have 1 story. What do you think about it?

I can do the PR if you agree to the idea.

Before

After

Was just trying to upgrade a project from 5.0.0 to 7.0.1, ran into an issue where I was using the Notes plugin as the viewEnhancer ― Elm is unhappy with this declaration:

viewEnhancer : ViewEnhancer {} Msg Model
viewEnhancer =
    UIExplorer.Plugins.Note.viewEnhancer

-- TYPE MISMATCH --------------------------------------------- src/Storybook.elm

Something is off with the body of the `viewEnhancer` definition:

49|     UIExplorer.Plugins.Note.viewEnhancer
        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
This `viewEnhancer` value is a:

    UIExplorer.Model {} Msg Model -> Html (UIExplorer.Msg Msg)

But the type annotation on `viewEnhancer` says it should be:

    ViewEnhancer {} Msg Model

Looks like the Note plugin had that signature at some point, but it was undone in this commit?

We use this package for our project and I was wondering if there's any time estimation when it will be ready to be used with Elm 0.19?

In order to avoid major version bumps when changing the model (even for not breaking changes), you should turn your exposed types to opaque types.

Here is the way to do it (for UI):

type UI
    = UIType InternalUI

type alias InternalUI =
    { id : String
    , description : String
    , viewStories : UIViewConfig -> Html Msg
    }

When a function needs a UI as parameter just do like this:

funcWithUI : UI -> String
funcWithUI (UIType ui) =
    ui.description

You don't have to change your current exposes (you have to expose UI and not UI(..), otherwise the type is not opaque anymore as anyone using the module can create a UI object like this: UIType {.....}

But you will have to create helper functions to create these opaque objects. Try to keep these functions small and atomic so that any change in the model won't force you to rewrite these helper functions. This way you won't have breaking changes, only new features ;)

Example for UI type, assuming a description is optional and defaults to empty string (you should turn it to a Maybe then, but let's assume it is a simple String for the example):

newUI : String -> (UIViewConfig> Html Msg) -> UI
newUI id viewStories =
    UIType {id = id, description = "", viewStories = viewStories}

withDescription : String -> UI -> UI
withDescription description (UIType ui) =
    UIType { ui | description = description }

Don't forget to expose these functions and to write a documentation for them ;)
And don't forget to separate your documentation in categories:

module UIExplorer exposing (app, renderStories, UI, UICategory, newUI, withDescription)

{-|
Component Explorers and Style Guides have been around for a while now.
We don't build pages anymore but components that are assembled together to build Systems.
In the ELM world, components are just called views, and are defined as pure functions.
ELM UI Explorer takes advantage of the composability and the purity of ELM and offers a way to showcase
your views and their states in a single tool.
Inspired by [React Storybook](https://storybook.js.org/)

# UIExplorer
@docs app, renderStories

# Models
@docs UI, UICategory

# UI Helpers
@docs newUI, withDescription
-}

I did the following steps to start the music storybook:

elm-package install
cd examples/music-player
elm-package install
cd storybook
elm-package install
elm-app start

but got the following error:

Compilation failed.

Error in ./src/App.elm
Module build failed: Error: Compiler process exited with error Compilation failed
I cannot find module 'Storybook.Msg'.

Module 'StoryBook.Index' is trying to import it.

Potential problems could be:
  * Misspelled the module name
  * Need to add a source directory or new dependency to elm-package.json
 @ ./src/index.js 1:10-30

I'm setting the UI Explorer to use it internally and I was trying to customize the logo, but the type only accepts string, what do you be able to pass an Html msg also? This way I could customize the way I want.

If you agree with the idea I could create a PR :)

Knobs plugin not available in elm packages although it has an example in the README.

Is this a bug?

I've been using elm-ui-explorer to implement an app using atomic design principle. It was perfect until I wanted to test basic interactivity. By default all Html messages are mapped to NoOp. It is surprising because simply by wrapping them with ExternalMsg interaction works honoring the update function defined in the config.

Do you think it is ok to have Html.map ExternalMsg instead of (\_ -> NoOp)?

The example given for the knob plugin only shows wiring up a single story. I'm trying to figure out how to wire it up for many categories, UIs, and stories so they all have their own knobs and knob state. It's unclear to me how this is intended to be achieved within config.viewEnhancer. Am I supposed to use model.selectedCategory, model.selectedUIId, and model.selectedStoryId to determine which story is currently selected and therefore which arguments to pass to viewKnobsForUI?

The current design I'm working on doesn't have any dark mode support. Do you think it makes sense be able do remove the button from the header?

I'm glad to do the PR if you agree.

Bluma is cool however I find that it pollutes the namespace if you are using something else. Meaning it effects the buttons and other primative HTML tags so that they'll look different than they would outside of the UI-explorer.

I think some alternative would be:

• Tachyons, it doesn't effect the HTML primitives much and it would be quick for me to switch it over if you want.
• Inline CSS. This is good because it doesn't bleed out probably.
• Styled elements, Elm CSS, raw CSS: just write a custom theme which is more effort but as long as you namespace your CSS classes well it shouldn't affect the internals

I'm trying to use UIExplorer.Plugins.Tabs.view similarly to how it's used in this example. However, I can't supply the first argument because the ColorMode module is not exposed, and so I can't access the ColorMode constructors like you do in the example.

If I add a space into storiesOf the navigation will be broken e.g.

storiesOf "Checkout Widget"

Same for the labels in the tuple

[  ( "Not loaded", \_ -> GreatUI.viewLoading, {} )

Would be great if this could handle labels with spaces and not just ids.
Thanks

We are considering this project to replace our storybook usage simply because the maintenance of the JS dependencies in storybook is larger than expected. Furthermore, it would remove the need to write some JS interop code to let the elm work inside storybook.

While a translation to elm-ui-explorer would be quite simple, for the internal testing of the UI components we would like to use visual testing of the stories. We can specify the list of URLs manually but I was curious if we couldn't just query them from elm-ui-explorer directly because all categories and stories are already defined?

I'm finding that some content that overflows the viewport on the Y axis is not visible. I can scroll most of the way, but not all the way. You can see an example of this happening on the design systems demo linked in the README: https://elm-ui-explorer.netlify.app/examples/dsm/#Styles/Typography/Typography. Scroll down to the bottom and you'll see some content cut off.

For examples in exaplorer's index.html
https://rawgit.com/kalutheo/elm-ui-explorer/tailwindcss/assets/styles.css
returns 404.
The right one is
https://cdn.rawgit.com/kalutheo/elm-ui-explorer/master/assets/styles.css

It would be great that when there are a lot of items in the sidebar you got a scroll instead of the page growing. I think that switching to display: grid; for the general layout would be helpful.

When I try to write the following code

viewStories : UIExplorer.UIViewConfig -> Html.Html UIExplorer.Msg
viewStories =
    renderStories render stories

The compiler throws an error saying UIExplorer does not expose Msg. Is there a way to write type annotation for this case?

It looks like the elm package manager is trying to find a specific package that is missing.