Update components to the new LiveView 0.18

[Alex Castaño]

Hello!

I contributed to the project a long time ago creating components like tables, etc. I can see that the current components are still using the old fashion way.

Do you want to update the components to use new features like slots and attributes? If you do, I think I can help in the little free time I have. If you give me some guidance on what the first steps should be I will try to help.

If you do not want to change components, feel free to close the issue.

Thank you!

[Michael Crumm]

@alexcastano I would love the help to update components if you have the time!

I will leave this issue open for now in case there are questions, but once you get started we can close it in favor of PRs :)

Thank you!! ☺️

[Alex Castaño]

Hello again!

I was taking a look at the code and I remembered that we built a component system that allowed us to create pages. Since at that time LiveView was not so composable, we did a little weird trick to allow it:

    row(
      components: [
        columns(
          components: [
            card(
              title: "System information",
              value: "#{system_info.banner} [#{system_info.system_architecture}]",
              class: ["no-title"]
            )
          ]
        )
      ]
    )

I guess we want to abandon this system and use just slots. I can imagine something like this:

<.row>
  <:elem>
    <.column>
      <:elem>
        <.card title=System information" class="no-title">
          <%=  "#{system_info.banner} [#{system_info.system_architecture}]" %>
        </.card>
      </:elem>
    </.column>
  </:elem>
</.row>

So my questions are:

• Do we want something like the previous example or do you have another thing in mind?
• Can we drop the support for the old system? Or should we make a retro-compatible version? I think it is not worth the effort but maybe you have a different opinion.
• Because now Phoenix will have Tailwind, we will want to change the CSS system in the dashboard. Do we want to do this before or after migrating the components to v0.18? I think it is better to migrate the components to v0.18 first, but I'm not 100% sure.

Thanks for your time

[Michael Crumm]

For the row/column components, I think we can simplify a bit:

<.row>
  <:column>
    <.card title=System information" class="no-title">
      <%=  "#{system_info.banner} [#{system_info.system_architecture}]" %>
    </.card>
  </:column>
</.row>

...but in any case yes I think this is the way to go :)

Can we drop the support for the old system?

Absolutely :)

change the CSS system

We should definitely wait on this, so let's focus on the component refactor for now, thanks!