Using Surface Built-In components

I have a live view component into which I would like to integrate a DateInput. At the same time, I would like to get myself more familiar with Surface library. However, I am finding it somewhat confusing on how to us its built-in components.

So far I have realized it is not possible to use surface components within .leex templates, rather they have to be within ~H in render().

Now, I am not sure how to acutally make <DateTime /> render.

I have tried creating my own component which could then be called by another component just to see if it works.

defmodule MyApp.DateTimeInput do
  use Surface.Component

  ...

  def render(assigns) do
    ~H"""
    <DateInput value="2020-06-04" />
    """
  end
end


defmodule MyApp.SomeComponent do
  use Phoenix.LiveComponent
  use Surface.LiveView

  def render(assigns) do
    ~H"""
    <DateTimeInput />
    """
  end
end

This doesn’t work, I am getting the following error cannot render <DateInput> (module DateInput could not be loaded). However, I am not sure what is then the proper way to load it?

Can you point out where am I going wrong about this? Thank you!

All surface components are Elixir modules. You’d need to have

alias Surface.Components.DateInput

in your ex file, or you can use the full name but that would suck.

1 Like