surface-ui / surface_catalogue Goto Github PK

Currently, when setting props on the playground, there's no feedback when the user enters an invalid value.

Hello all, am trying to make SurfaceUI and SurfaceCatalogue work on a Phoenix 1.7.0-rc.0 installation. I've had it work properly on a Phoenix 1.6 installation before.

Describe the bug

On calling localhost:4000/catalogue I get:

UndefinedFunctionError: function nil.live_path/2 is undefined

Digging into the error report I see a "nofile" error:

`nofile`

    No code available.

  Called with 2 arguments

  * `#Phoenix.LiveView.Socket<id: "phx-FzyLTCcAw6fKCgAJ", endpoint: CarolistWeb.Endpoint, view: Surface.Catalogue.PageLive, parent_pid: nil, root_pid: nil, router: CarolistWeb.Router, assigns: #Phoenix.LiveView.Socket.AssignsNotInSocket<>, transport_pid: nil, ...>`
  * `Surface.Catalogue.PageLive`
  
`lib/surface/catalogue/components/component_tree.ex`

    23     def render_node(assigns, node, selected_component, single_catalogue?, parent_keys \\ []) do
    24       ~F"""
    25       <ul class={"menu-list", "is-hidden": !show_nodes?(parent_keys, selected_component, single_catalogue?)}>
    26         <li :if={parent_keys == []}>
    27           <LivePatch
    28>            to={@socket.router.__helpers__().live_path(@socket, Surface.Catalogue.PageLive)}
    29             class={"has-text-weight-bold": !selected_component}
    30           >
    31             <span class="icon">
    32               <i class="fa fa-home" />
    33             </span>

How to reproduce it

1. Set up a new Phoenix 1.7RC0 instance
2. Add dependencies: {:surface, "> 0.9.0"}, {:surface_catalogue, "> 0.5.2"}, {:phoenix_view, "~> 2.0"} (phoenix_view because otherwise surface_catalogue errors on missing view functions)
3. Run mix surface.init --demo --catalogue
4. Run mix phx.server and see the error occur
5. Or in the browser, go to http://localhost:4000/catalogue and see the error occur

The behavior you expected

Would have expected http://localhost:4000/catalogue to show me a demo catalogue

Your Environment

Surface: v0.9.0
SurfaceCatalogue: v0.5.2
LiveView: v0.18.3
Elixir: v1.14.1

Full error log attached below

UndefinedFunctionError_at_GET_|catalogue.md

Allow setting text values to components' slots, similar to the way to we do with props.

1. Add a "Slots" tab right after the existing "Properties" tab.
2. Show a textinput (or textarea) for each available slot
3. Allow the user to define the content of the slot as the given text.

I want to redesign the UI using TailwindCSS and turn the Catalogue into a official supported tool (not only a prototype). In the process I want to extract the components we need to create here and move them to surface_tailwind so they can be reused in other projects.

When looking at an example for one component, if I switch to another component example, the actual code shown doesn't change to the new component I'm viewing. It shows the last component that I was viewing. If I reload, the correct code is shown.

Update types introduced in surface-ui/surface#297 if necessary.

Visual Snapshot Tests are a great feature to use when working with storybooks.

I feel surface catalogue could work really well with that.

One great way to accomplish that is using the awesome jest-image-snapshot

I created a sample MR of what it would take to have something like that working with Catalogue: surface-ui/surface_bootstrap#9

If the approach of using jest-image-snapshot + puppeteer was taken, surface_catalogue should expose a JSON endpoint with all available examples, and their metadata, I think, and the jest script could handle all else.

If catalogue were to recommend some form of CI tests using the snapshots, I believe it should recommend using a docker image with puppetter and chrome (like the ones provided by browserless), to control system fonts and browser version.

I'd like to start with thanking you for this amazing library.

We get the following error when we try to deploy to prod, after following all the installation steps.

** (CompileError) lib/<project-name>/router.ex:6: module Surface.Catalogue.Router is not loaded and could not be found

Since we are loading the project only for dev and test env in the mix.exs file, this error is expected. But, since the project also depends on phoenix_live_reload, if we update the mix.exs file to remove the constraint of only dev and test environments from surface_catalogue, we get the following expected error.

Dependencies have diverged:
* phoenix_live_reload (Hex package)
  the :only option for dependency phoenix_live_reload

  > In mix.exs:
    {:phoenix_live_reload, "~> 1.2", [env: :prod, repo: "hexpm", hex: "phoenix_live_reload", only: [:dev, :test]]}

  does not match the :only option calculated for

  > In deps/surface_catalogue/mix.exs:
    {:phoenix_live_reload, "~> 1.2", [env: :prod, hex: "phoenix_live_reload", repo: "hexpm", optional: false]}

  Remove the :only restriction from your dep
** (Mix) Can't continue due to errors on dependencies

Thus, the only way for us to work is to enable both surface_catalogue and phoenix_live_reload in prod, which is not optimal.

I have tried to conditionally import the module but that is not working and we get the same error about module Surface.Catalogue.Router not being loaded(I think that's because elixir is a compiled language and thus all the modules that are used, even if conditionally need to be loaded).

I then looked at the code of phoenix_live_reload to see how they conditionally load only when code_reloading variable is true and it makes sense and we could look into it.

Am I am being totally ignorant and there's a simple and elegant way to handle this, which I missed? 😅(I am very inexperienced in elixir)
If I have not missed anything, is there a simpler fix than implementing the phoenix_live_reload way?
If not, could you look into it and provide updated set of instructions for installation, which work in prod?

Any help is appreciated.

Hello,

I have created a new app with phoenix 1.6 and did as mentioned in "Installation", but I run into following error:

mix phx.server
==> surface_catalogue
Compiling 19 files (.ex)

== Compilation error in file lib/surface/catalogue/server.ex ==
** (ArgumentError) unknown live option :layout.

Supported options include: :container, :as, :metadata, :private.

Got: [layout: {Surface.Catalogue.LayoutView, :root}]

    (phoenix_live_view 0.16.4) lib/phoenix_live_view/router.ex:386: anonymous fn/1 in Phoenix.LiveView.Router.validate_live_opts!/1
    (elixir 1.12.3) lib/enum.ex:930: Enum."-each/2-lists^foreach/1-0-"/2
    (phoenix_live_view 0.16.4) lib/phoenix_live_view/router.ex:360: Phoenix.LiveView.Router.validate_live_opts!/1
    (phoenix_live_view 0.16.4) lib/phoenix_live_view/router.ex:340: Phoenix.LiveView.Router.__live__/4
    lib/surface/catalogue/server.ex:23: (module)
    lib/surface/catalogue/server.ex:13: (module)
    (stdlib 3.16) erl_eval.erl:685: :erl_eval.do_apply/6
could not compile dependency :surface_catalogue, "mix compile" failed. You can recompile this dependency with "mix deps.compile surface_catalogue", update it with "mix deps.update surface_catalogue" or clean it with "mix deps.clean surface_catalogue"

Today the playground let's we change component properties, it would be helpful to have playground properties/data that could be changed by the user.
It could be side by side in the Properties tab.

It could be a way to solve #3

Hi! I was inspired by @davydog187 to try surface catalog.
First time so please let me know if I can improve the issue or am not following the desired process 🙏

I'm running into an issue on a mostly fresh phoenix umbrella app when I try to add the dependency.

{:surface_catalogue, "~> 0.1.0", only: :dev}

Then when I try to run the project it will not compile due to an ArgumentError

I still have to try running this on a fresh non-umbrella app to see if it's my project that's the problem.

Help appreciated! But I'm raising this issue so that if I find the solution I'll either submit a PR or document what change I needed to make on my project to fix it so that other folks experiencing the issue can benefit.

==> surface_catalogue
Compiling 19 files (.ex)

== Compilation error in file lib/surface/catalogue/server.ex ==
** (ArgumentError) unknown live option :layout.

Supported options include: :container, :as, :metadata, :private.

Got: [layout: {Surface.Catalogue.LayoutView, :root}]

    (phoenix_live_view 0.16.4) lib/phoenix_live_view/router.ex:386: anonymous fn/1 in Phoenix.LiveView.Router.validate_live_opts!/1
    (elixir 1.12.1) lib/enum.ex:930: Enum."-each/2-lists^foreach/1-0-"/2
    (phoenix_live_view 0.16.4) lib/phoenix_live_view/router.ex:360: Phoenix.LiveView.Router.validate_live_opts!/1
    (phoenix_live_view 0.16.4) lib/phoenix_live_view/router.ex:340: Phoenix.LiveView.Router.__live__/4
    lib/surface/catalogue/server.ex:23: (module)
    lib/surface/catalogue/server.ex:13: (module)
    (stdlib 3.15.2) erl_eval.erl:685: :erl_eval.do_apply/6
could not compile dependency :surface_catalogue, "mix compile" failed. You can recompile this dependency with "mix deps.compile surface_catalogue", update it with "mix deps.update surface_catalogue" or clean it with "mix deps.clean surface_catalogue"

I've just started a new phoenix project, added surface, and it all works if I use:

      {:phoenix_live_view, "~> 0.16.0"},
      {:surface, "~> 0.6.0"},
      {:surface_catalogue, "~> 0.2.0"}

I see this when I open up the catalogue:

But the catalog won't show any components if I use:

      {:phoenix_live_view, "~> 0.17.6"},
      {:surface, "~> 0.7.0"},
      {:surface_catalogue, "~> 0.3.0"}

I think there is an error connecting the socket, maybe?

I'm trying to use the catalog on my project, which happens to be on live view 0.17.6, so it's not letting me use this awesome tool.

When having an example file that uses @moduledoc false, e.g.:

defmodule MyProject.Components.Foo.Example do
  @moduledoc false

  use Surface.Catalogue.Example,
    subject: MyProject.Components.Foo

  def render(assigns) do
    ~F"hello world"
  end
end

The Surface Catalogue stops working for all components and shows the following error on the console:

[error] GenServer #PID<0.7860.0> terminating
** (BadMapError) expected a map, got: :hidden
    (elixir 1.12.3) lib/map.ex:464: Map.get(:hidden, "en", nil)
    (surface 0.6.1) lib/surface/catalogue.ex:72: Surface.Catalogue.get_metadata/1
    (surface_catalogue 0.2.0) lib/surface/catalogue/util.ex:82: Surface.Catalogue.Util.components_reducer/3

I see catalogue creates the example's iframe with the app's CSS and JS.

Would it be possible to have examples with the HTML layout of the app, too?

It would help when developing entire screens using catalogue.

Describe the bug

application.ex depends on Mix.env and another mix call at runtime

How to reproduce it

1. Run a release that depends on surface_catalogue

The behavior you expected

Builds/runs fine, without problems

Your Environment

Surface: v0.8.1
SurfaceCatalogue: v0.5.0
LiveView: v0.17.11
Elixir: v1.14.0

Hi, @msaraiva

With LiveView planning to adopt PhxLiveStorybook, what's the future for Surface Catalogue?

Will it operate independently of it? Or will it be shut down since its goal is achieved? Or will it transfer some ideas to PhxLiveStorybook and continue extending them in new directions as Surface did with LiveView?

If it's the last case, do you have examples of what Surface Catalogue will do differently from PhxLiveStorybook?

Kudos to the team for the effort on Surface and its ecosystem. It has made "front-end" work in Elixir approachable.

Below are the changes we needed to do in our fork of this repo and in our app to make it work with phoenix_html v4+

To be able to use phoenix_html v4+ we need to use the current main branch of the main surface library(commit eb32f370f75d332d2b3fdec6a0c16882676f788f as of writing). That version has extracted all form helpers out into a new library surface_form. Since this repo doesn't have surface_form as a dependency, at least in the latest commit, we've had to fork it and add that dependency. We also needed to update the catalogues function as some of the catalogues were moved into the new library.

Here are the changes:

# fork's mix.exs

# in def deps do, replace `{:surface, "~> 0.10", github: "surface-ui/surface"}` with

{:surface,
       github: "surface-ui/surface",
       ref: "eb32f370f75d332d2b3fdec6a0c16882676f788f",
       override: true},
      {:surface_form,
       github: "surface-ui/surface_form", ref: "3da6cf734bae2ef63e2f864633f109663f56b5ad"},

# app's mix.exs

# def catalogues do
# Add this, as some catalogue moved over to surface_form lib
"deps/surface_form/priv/catalogue"

# def deps do
{:surface,
 github: "surface-ui/surface",
 ref: "eb32f370f75d332d2b3fdec6a0c16882676f788f",
 override: true},
{:surface_catalogue,
 github: "<your-username>/surface_catalogue", ref: "<the-commit-hash>"},
{:surface_form,
 github: "surface-ui/surface_form", ref: "3da6cf734bae2ef63e2f864633f109663f56b5ad"},

Add a color selector or a select with some predefined colors to change the background color of the playground at runtime.

Raise a compile-time error if there's any required prop missing when defining data props, :map, default: [...].

Describe the bug

Trying to deploy the catalogue in production, but when clicking the component tree (Home) it errs because internally it calls Surface.components/1, which contains a call to Mix.Project.config/0. Since Mix is not available in production, the catalogue does not work at all.

How to reproduce it

1. Deploy surface catalogue to production
2. Access the /catalogue page and click the Home link.

When using catalogue to develop an entire screen, it would be nice to be able to open an example of it full screen, in another tab, like storybook supports.

Currently I can open the iframe in another tab, but that iframe doesn't reload itself on page changes.

Hello,
I was looking for alternatives to storybook for liveview components and stumbled upon you great work!
I was wondering if it could be possible to use the catalogue as a playground for custom liveview stateless components, or is it currently only bound to surface modules?
Thanks in advance

surface-ui/surface_site#27 we should really expose the possible prop settings for #Code in the playground macro usage, so you can expose more lines.. some of my playground and examples (like table) should also show the stuff above render(..) to be even better docs