ui_components 0.1.1 → 0.1.2

data/app/views/ui_components/daisy_ui/data_display_components/carousel.html.erb

@@ -0,0 +1,303 @@
+<% component = UiComponents::DaisyUi::DataDisplay::CarouselComponent %>
+
+<div class="grid grid-cols gap-16 p-2 mt-6 mb-36">
+  <div class="mb-2">
+    <h1 class="font-bold mb-2"># Data display > Carousel</h1>
+    <ul class="bg-base-100 rounded-box shadow-md p-2">
+      <%= link_to "< Card", daisy_ui_card_path, class: "link link-primary m-2" %>
+      <%= link_to "Home", daisy_ui_path, class: "link link-primary m-2" %>
+      <%= link_to "Chat >", daisy_ui_chat_path, class: "link link-primary m-2" %>
+    </ul>
+  </div>
+
+  <div class="divider"></div>
+
+  <% aligns = %w[start center end] %>
+
+  <% aligns.each do |key| %>
+    <%= render DocumentationComponent.new do |doc| %>
+      <%= doc.with_header { "# Snap to #{key} #{"(default)" if key == "start"}" } %>
+      <%= doc.with_body(preview_options: { css_class: "min-h-[6rem] min-w-2xs max-w-4xl" }) do |body| %>
+        <% component_params = data_display_carousel_handle_component_params(key:) %>
+
+        <%= body.with_preview_example(
+          source: <<~ERB
+                    <$= render #{component}.new#{"(#{component_params})" if component_params.present?} do |carousel| $>
+                      <$= carousel.with_item do $>
+                        <img src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp" />
+                      <$ end $>
+
+                      <$= carousel.with_item do $>
+                        <img src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp" />
+                      <$ end $>
+
+                      <$= carousel.with_item do $>
+                        <img src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp" />
+                      <$ end $>
+
+                      <$= carousel.with_item do $>
+                        <img src="https://img.daisyui.com/images/stock/photo-1494253109108-2e30c049369b.webp" />
+                      <$ end $>
+
+                      <$= carousel.with_item do $>
+                        <img src="https://img.daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.webp" />
+                      <$ end $>
+
+                      <$= carousel.with_item do $>
+                        <img src="https://img.daisyui.com/images/stock/photo-1559181567-c3190ca9959b.webp" />
+                      <$ end $>
+
+                      <$= carousel.with_item do $>
+                        <img src="https://img.daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.webp" />
+                      <$ end $>
+                    <$ end $>
+                  ERB
+        ) %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Carousel with full width items" } %>
+    <%= doc.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new(css_class: "rounded-box w-64") do |carousel| $>
+                    <$= carousel.with_item(css_class: "w-full") do $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp" />
+                    <$ end $>
+
+                    <$= carousel.with_item(css_class: "w-full") do $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp" />
+                    <$ end $>
+
+                    <$= carousel.with_item(css_class: "w-full") do $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp" />
+                    <$ end $>
+
+                    <$= carousel.with_item(css_class: "w-full") do $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1494253109108-2e30c049369b.webp" />
+                    <$ end $>
+
+                    <$= carousel.with_item(css_class: "w-full") do $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.webp" />
+                    <$ end $>
+
+                    <$= carousel.with_item(css_class: "w-full") do $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1559181567-c3190ca9959b.webp" />
+                    <$ end $>
+
+                    <$= carousel.with_item(css_class: "w-full") do $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.webp" />
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Vertical carousel" } %>
+    <%= doc.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new(vertical: true, css_class: "rounded-box w-64 h-96") do |carousel| $>
+                    <$= carousel.with_item(css_class: "w-full h-full") do $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp" />
+                    <$ end $>
+
+                    <$= carousel.with_item(css_class: "w-full h-full") do $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp" />
+                    <$ end $>
+
+                    <$= carousel.with_item(css_class: "w-full h-full") do $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp" />
+                    <$ end $>
+
+                    <$= carousel.with_item(css_class: "w-full h-full") do $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1494253109108-2e30c049369b.webp" />
+                    <$ end $>
+
+                    <$= carousel.with_item(css_class: "w-full h-full") do $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.webp" />
+                    <$ end $>
+
+                    <$= carousel.with_item(css_class: "w-full h-full") do $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1559181567-c3190ca9959b.webp" />
+                    <$ end $>
+
+                    <$= carousel.with_item(css_class: "w-full h-full") do $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.webp" />
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Carousel with half width items" } %>
+    <%= doc.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new(css_class: "rounded-box w-96") do |carousel| $>
+                    <$= carousel.with_item(css_class: "w-1/2") do $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp" />
+                    <$ end $>
+
+                    <$= carousel.with_item(css_class: "w-1/2") do $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp" />
+                    <$ end $>
+
+                    <$= carousel.with_item(css_class: "w-1/2") do $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp" />
+                    <$ end $>
+
+                    <$= carousel.with_item(css_class: "w-1/2") do $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1494253109108-2e30c049369b.webp" />
+                    <$ end $>
+
+                    <$= carousel.with_item(css_class: "w-1/2") do $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.webp" />
+                    <$ end $>
+
+                    <$= carousel.with_item(css_class: "w-1/2") do $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1559181567-c3190ca9959b.webp" />
+                    <$ end $>
+
+                    <$= carousel.with_item(css_class: "w-1/2") do $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.webp" />
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Full-bleed carousel" } %>
+    <%= doc.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new(align: "center", css_class: "rounded-box bg-neutral max-w-md space-x-4 p-4") do |carousel| $>
+                    <$= carousel.with_item do $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp" />
+                    <$ end $>
+
+                    <$= carousel.with_item do $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp" />
+                    <$ end $>
+
+                    <$= carousel.with_item do $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp" />
+                    <$ end $>
+
+                    <$= carousel.with_item do $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1494253109108-2e30c049369b.webp" />
+                    <$ end $>
+
+                    <$= carousel.with_item do $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.webp" />
+                    <$ end $>
+
+                    <$= carousel.with_item do $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1559181567-c3190ca9959b.webp" />
+                    <$ end $>
+
+                    <$= carousel.with_item do $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.webp" />
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Carousel with indicator buttons" } %>
+    <%= doc.with_body(preview_options: { css_class: "min-h-[6rem] min-w-2xs max-w-4xl" }) do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new(css_class: "w-full") do |carousel| $>
+                    <$= carousel.with_item(css_class: "w-full", options: { id: "item1" }) do $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1625726411847-8cbb60cc71e6.webp" class="w-full" />
+                    <$ end $>
+
+                    <$= carousel.with_item(css_class: "w-full", options: { id: "item2" }) do $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1609621838510-5ad474b7d25d.webp" class="w-full" />
+                    <$ end $>
+
+                    <$= carousel.with_item(css_class: "w-full", options: { id: "item3" }) do $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1414694762283-acccc27bca85.webp" class="w-full" />
+                    <$ end $>
+
+                    <$= carousel.with_item(css_class: "w-full", options: { id: "item4" }) do $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1665553365602-b2fb8e5d1707.webp" class="w-full" />
+                    <$ end $>
+
+                    <$= carousel.with_indicator do $>
+                      <a href="#item1" class="btn btn-xs">1</a>
+                      <a href="#item2" class="btn btn-xs">2</a>
+                      <a href="#item3" class="btn btn-xs">3</a>
+                      <a href="#item4" class="btn btn-xs">4</a>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Carousel with next/prev buttons" } %>
+    <%= doc.with_body(preview_options: { css_class: "min-h-[6rem] min-w-2xs max-w-4xl" }) do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new(css_class: "w-full") do |carousel| $>
+                    <$= carousel.with_item(css_class: "relative w-full", options: { id: "slide1" }) do |item| $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1625726411847-8cbb60cc71e6.webp" class="w-full" />
+                      <$= item.with_passer do $>
+                        <a href="#slide4" class="btn btn-circle">❮</a>
+                        <a href="#slide2" class="btn btn-circle">❯</a>
+                      <$ end $>
+                    <$ end $>
+
+                    <$= carousel.with_item(css_class: "relative w-full", options: { id: "slide2" }) do |item| $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1609621838510-5ad474b7d25d.webp" class="w-full" />
+                      <$= item.with_passer do $>
+                        <a href="#slide1" class="btn btn-circle">❮</a>
+                        <a href="#slide3" class="btn btn-circle">❯</a>
+                      <$ end $>
+                    <$ end $>
+
+                    <$= carousel.with_item(css_class: "relative w-full", options: { id: "slide3" }) do |item| $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1414694762283-acccc27bca85.webp" class="w-full" />
+                      <$= item.with_passer do $>
+                        <a href="#slide2" class="btn btn-circle">❮</a>
+                        <a href="#slide4" class="btn btn-circle">❯</a>
+                      <$ end $>
+                    <$ end $>
+
+                    <$= carousel.with_item(css_class: "relative w-full", options: { id: "slide4" }) do |item| $>
+                      <img src="https://img.daisyui.com/images/stock/photo-1665553365602-b2fb8e5d1707.webp" class="w-full" />
+                      <$= item.with_passer do $>
+                        <a href="#slide3" class="btn btn-circle">❮</a>
+                        <a href="#slide1" class="btn btn-circle">❯</a>
+                      <$ end $>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <div class="divider"></div>
+
+  <div class="mb-2">
+    <h1 class="font-bold mb-2"># Data display > Carousel</h1>
+    <ul class="bg-base-100 rounded-box shadow-md p-2">
+      <%= link_to "< Card", daisy_ui_card_path, class: "link link-primary m-2" %>
+      <%= link_to "Home", daisy_ui_path, class: "link link-primary m-2" %>
+      <%= link_to "Chat >", daisy_ui_chat_path, class: "link link-primary m-2" %>
+    </ul>
+  </div>
+</div>

data/app/views/ui_components/daisy_ui/data_display_components/chat.html.erb

@@ -0,0 +1,190 @@
+<% component = UiComponents::DaisyUi::DataDisplay::ChatComponent %>
+
+<div class="grid grid-cols gap-16 p-2 mt-6 mb-36">
+  <div class="mb-2">
+    <h1 class="font-bold mb-2"># Data display > Chat Bubble</h1>
+    <ul class="bg-base-100 rounded-box shadow-md p-2">
+      <%= link_to "< Carousel", daisy_ui_carousel_path, class: "link link-primary m-2" %>
+      <%= link_to "Home", daisy_ui_path, class: "link link-primary m-2" %>
+      <%= link_to "Countdown >", daisy_ui_countdown_path, class: "link link-primary m-2" %>
+    </ul>
+  </div>
+
+  <div class="divider"></div>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# chat-start and chat-end" } %>
+    <%= doc.with_body(preview_options: { css_class: "p-2 bg-base-200 min-w-2xs max-w-4xl" }) do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new(align: "start") do |chat| $>
+                    <$= chat.with_bubble do $>
+                      It's over Anakin,
+                      <br />
+                      I have the high ground.
+                    <$ end $>
+                  <$ end $>
+
+                  <$= render #{component}.new(align: "end") do |chat| $>
+                    <$= chat.with_bubble_content("You underestimate my power!") $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Chat with image" } %>
+    <%= doc.with_body(preview_options: { css_class: "p-2 bg-base-200 min-w-2xs max-w-4xl" }) do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new(align: "start") do |chat| $>
+                    <$= chat.with_avatar do |item| $>
+                      <$= item.with_box(css_class: "w-10 rounded-full") do $>
+                        <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+                      <$ end $>
+                    <$ end $>
+
+                    <$= chat.with_bubble_content("It was said that you would, destroy the Sith, not join them.") $>
+                  <$ end $>
+
+                  <$= render #{component}.new(align: "start") do |chat| $>
+                    <$= chat.with_avatar do |item| $>
+                      <$= item.with_box(css_class: "w-10 rounded-full") do $>
+                        <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+                      <$ end $>
+                    <$ end $>
+
+                    <$= chat.with_bubble_content("It was you who would bring balance to the Force") $>
+                  <$ end $>
+
+                  <$= render #{component}.new(align: "start") do |chat| $>
+                    <$= chat.with_avatar do |item| $>
+                      <$= item.with_box(css_class: "w-10 rounded-full") do $>
+                        <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+                      <$ end $>
+                    <$ end $>
+
+                    <$= chat.with_bubble_content("Not leave it in Darkness") $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Chat with image, header and footer" } %>
+    <%= doc.with_body(preview_options: { css_class: "p-2 bg-base-200 min-w-2xs max-w-4xl" }) do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new(align: "start") do |chat| $>
+                    <$= chat.with_avatar do |item| $>
+                      <$= item.with_box(css_class: "w-10 rounded-full") do $>
+                        <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+                      <$ end $>
+                    <$ end $>
+
+                    <$= chat.with_header do |header| $>
+                      Obi-Wan Kenobi
+                      <time class="text-xs opacity-50">12:45</time>
+                    <$ end $>
+
+                    <$= chat.with_bubble_content("You were the Chosen One!") $>
+                    <$= chat.with_footer_content("Delivered") $>
+                  <$ end $>
+
+                  <$= render #{component}.new(align: "end") do |chat| $>
+                    <$= chat.with_avatar do |item| $>
+                      <$= item.with_box(css_class: "w-10 rounded-full") do $>
+                        <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+                      <$ end $>
+                    <$ end $>
+
+                    <$= chat.with_header do |header| $>
+                      Anakin
+                      <time class="text-xs opacity-50">12:46</time>
+                    <$ end $>
+
+                    <$= chat.with_bubble_content("I hate you!") $>
+                    <$= chat.with_footer_content("Delivered") $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Chat with header and footer" } %>
+    <%= doc.with_body(preview_options: { css_class: "p-2 bg-base-200 min-w-2xs max-w-4xl" }) do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new(align: "start") do |chat| $>
+                    <$= chat.with_header do |header| $>
+                      Obi-Wan Kenobi
+                      <time class="text-xs opacity-50">2 hours ago</time>
+                    <$ end $>
+
+                    <$= chat.with_bubble_content("You were my brother, Anakin.") $>
+                    <$= chat.with_footer_content("Seen") $>
+                  <$ end $>
+
+                  <$= render #{component}.new(align: "start") do |chat| $>
+                    <$= chat.with_header do |header| $>
+                      Obi-Wan Kenobi
+                      <time class="text-xs opacity-50">2 hours ago</time>
+                    <$ end $>
+
+                    <$= chat.with_bubble_content("I loved you.") $>
+                    <$= chat.with_footer_content("Delivered") $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Chat Bubble with colors" } %>
+    <%= doc.with_body(preview_options: { css_class: "p-2 bg-base-200 min-w-2xs max-w-4xl" }) do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new(align: "start") do |chat| $>
+                    <$= chat.with_bubble(color: "primary").with_content("What kind of nonsense is this") $>
+                  <$ end $>
+                  <$= render #{component}.new(align: "start") do |chat| $>
+                    <$= chat.with_bubble(color: "secondary").with_content("Put me on the Council and not make me a Master!??") $>
+                  <$ end $>
+                  <$= render #{component}.new(align: "start") do |chat| $>
+                    <$= chat.with_bubble(color: "accent").with_content("That's never been done in the history of the Jedi.") $>
+                  <$ end $>
+                  <$= render #{component}.new(align: "start") do |chat| $>
+                    <$= chat.with_bubble(color: "neutral").with_content("It's insulting!") $>
+                  <$ end $>
+
+                  <$= render #{component}.new(align: "end") do |chat| $>
+                    <$= chat.with_bubble(color: "info").with_content("Calm down, Anakin.") $>
+                  <$ end $>
+                  <$= render #{component}.new(align: "end") do |chat| $>
+                    <$= chat.with_bubble(color: "success").with_content("You have been given a great honor.") $>
+                  <$ end $>
+                  <$= render #{component}.new(align: "end") do |chat| $>
+                    <$= chat.with_bubble(color: "warning").with_content("To be on the Council at your age.") $>
+                  <$ end $>
+                  <$= render #{component}.new(align: "end") do |chat| $>
+                    <$= chat.with_bubble(color: "error").with_content("It's never happened before.") $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <div class="divider"></div>
+
+  <div class="mb-2">
+    <h1 class="font-bold mb-2"># Data display > Chat Bubble</h1>
+    <ul class="bg-base-100 rounded-box shadow-md p-2">
+      <%= link_to "< Carousel", daisy_ui_carousel_path, class: "link link-primary m-2" %>
+      <%= link_to "Home", daisy_ui_path, class: "link link-primary m-2" %>
+      <%= link_to "Countdown >", daisy_ui_countdown_path, class: "link link-primary m-2" %>
+    </ul>
+  </div>
+</div>