SaladUI - Phoenix liveview components inspired by shadui

Your Libraries & OS Mentoring Libraries
, , , , ,
81

I built a component like that based off LiveSelect, you can see the code here:

hooks: garage/assets/js/tag_selector.js at ffa81e06cfda53a2cc4d8c171bf1fa014337390d · andyleclair/garage · GitHub
wrapper: garage/lib/garage_web/components/core_components.ex at ffa81e06cfda53a2cc4d8c171bf1fa014337390d · andyleclair/garage · GitHub
usage: garage/lib/garage_web/live/carburetor_live/form_component.ex at ffa81e06cfda53a2cc4d8c171bf1fa014337390d · andyleclair/garage · GitHub

6 Likes
82

@andyleclair Thank you!!!

@bluzky Had a thought, have you considered changing the name of the project to Shadcn Phoenix or Elixir or something like that? It’s a great project and in my opinion addresses one of the primary weaknesses of Phoenix and Liveview. It might help make the project more discoverable. I also say that because it seems to be the standard pattern for groups making ports of Shadcn, such as shadcn-svelte or shadcn-vue. Looks like shadcn-phoenix.com is already taken (registered in august), was that one of you guys?

2 Likes
83

Thanks @andyleclair, I’ll play with it

84

Thank you, I have not registered any domain yet. Regarding the name, I think salad :green_salad: is fun, you can pick any veg you want and add your sauce to make your own salad. :smile:

1 Like
85

Upgrade generated CoreComponents with SaladUI

For those who want to try SaladUI quickly, here are some simple steps:

  1. Install Salad UI as a library
mix salad.init --as-lib
  1. Backup your CoreComponents and replace with following code (remember to replace SaladStorybookWeb with your app prefix)
    salad_storybook/lib/salad_storybook_web/components/core_components.ex at main · bluzky/salad_storybook · GitHub
  2. Tada, start your app and check the result

You can check the storybook here Core Component

6 Likes
86

Update 23 Nov

Hi friends,
I’m so excited to share some demo of sidebar component. It’s a big component so there must be many bugs. There are also some limitations that I still not be able to solve. Dropdown menu not work in the sidebar content is an know issue.

Please take a look and share your feedback.
Thank you

Sidebar demo

SGhdu.gif

8 Likes
87

Awesome! I can’t wait to test it.

2 Likes
88

Release 0.14.0

After a few week fighting with sidebar component, today SaladUI 0.14.0 is released with a few interesting updates

Changes

  • Implement Sidebar component
  • Introduce as_child tag to merge multiple SaladUI tag
  • Introduce dynamic tag which allow dynamic rendering a tag.

Breaking changes

  • Replace tails by tw_merge which extracted from turboprop. You have to add TwMerge.Cache to children list in your application.ex
  • Collapsible component doesn’t use builder anymore.
8 Likes
89

@bluzky I really like your library. But I just stumbled upon a requirement I am not 100% sure how to solve. I have a tab UI which contains some heavy content pages. I would prefer to load them dynamically, but right now I am not sure how to do that. Or am I missing something?

90

You’re right, I should add option to manually handle tab click from backend. Pls open an issue on Github

91

The library is fantastic.
I think I found a bug, where the source code of the Sidebar is not available.
https://salad-storybook.fly.dev/examples/sidebar

Anyway, could contribute?

92

Thanks @arcyfelix, I have fix the storybook. Any contribution is more than welcome.

1 Like
93

I have update tab to support override click even on tab trigger.
By default, JS handle click action to active appropriate tab.
When override with phx-click it’s your job to handle which tab content is render

@impl true
  def mount(_params, _session, socket) do
    {:ok, assign(socket, active_tab: "account")}
  end

def render(assigns) do
    ~H"""
     <.tabs default="account" id="settings" :let={builder} class="w-[400px]">
        <.tabs_list class="grid w-full grid-cols-2">
          <.tabs_trigger builder={builder} phx-value-tab="account" phx-click="active-tab">account</.tabs_trigger>
          <.tabs_trigger builder={builder} phx-value-tab="password" phx-click="active-tab">password</.tabs_trigger>
        </.tabs_list>
        <.tabs_content :if={@active_tab == "account"}>
          <.card>
            <.card_content class="p-6">
              Account
            </.card_content>
          </.card>
        </.tabs_content>
        <.tabs_content :if={@active_tab == "password"}>
          <.card>
            <.card_content class="p-6">
              Password
            </.card_content>
          </.card>
        </.tabs_content>
      </.tabs>
    """
end

  def handle_event("active-tab", %{"tab" =>tab}, socket) do
     {:noreply, assign(socket, :active_tab, tab)}
  end
1 Like
94

Sure thing! Fantastic!

2 Likes
95

Nice work! :star_struck: It seems the Tooltip story is a bit broken. I don’t get any tooltip on hover. Tried Chrome and Firefox.

96

thanks @westmark, let me fix this

97

Hi there. @bluzky your dashboards caught me. Good work!
I tried to kick start a project by installing salad_ui and got confused, because I wasn’t able to reproduce the examples shown in the storybook. It seems like the examples rely to the storybook itself to function properly.

Is there a way to take an example (sidebar/dashboard) copy it into an existing project and start modifying building it? I’m a bit new to storybooks and not sure what to expect really.

image
image1200×741 57.7 KB

98

Could you give me your repo, I will take a look to see how can fix your issue.
The reason why the classes have to be wrapped with .salad-storybook-web comes from tailwind config

image
image798×281 25.7 KB

this make sure tailwind css classes won’t mix with storybook css

1 Like
99

This issue is fixed, please check the storybook again

2 Likes
100

Perfect, thank you :smiley:

1 Like