ui_components 0.1.1 → 0.1.2

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

@@ -0,0 +1,431 @@
+<% component = UiComponents::DaisyUi::DataDisplay::TimelineComponent %>
+
+<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 > Timeline</h1>
+    <ul class="bg-base-100 rounded-box shadow-md p-2">
+      <%= link_to "< Table", daisy_ui_table_path, class: "link link-primary m-2" %>
+      <%= link_to "Home", daisy_ui_path, class: "link link-primary m-2" %>
+    </ul>
+  </div>
+
+  <div class="divider"></div>
+
+  <% aligns = { "horizontal" => "Horizontal", "vertical" => "Vertical" } %>
+
+  <% aligns.each do |key, value| %>
+    <%= render DocumentationComponent.new do |doc| %>
+      <%= doc.with_header { "# #{key == "vertical" ? value : "#{value} (default)"} timeline with text on both sides and icon" } %>
+      <%= doc.with_body do |body| %>
+        <%= body.with_preview_example(
+          source: <<~ERB
+                    <$= render #{component}.new#{"(vertical: true)" if key == "vertical"} do |timeline| $>
+                      <$= timeline.with_item do |item| $>
+                        <$= item.with_item_start_content("1984") $>
+                        <$= item.with_item_middle do $>
+                          <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="currentColor"><path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>
+                        <$ end $>
+                        <$= item.with_item_end(box: true).with_content("First Macintosh computer") $>
+                        <$= item.with_line_end $>
+                      <$ end $>
+
+                      <$= timeline.with_item do |item| $>
+                        <$= item.with_line_start $>
+                        <$= item.with_item_start_content("1998") $>
+                        <$= item.with_item_middle do $>
+                          <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="currentColor"><path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>
+                        <$ end $>
+                        <$= item.with_item_end(box: true).with_content("iMac") $>
+                        <$= item.with_line_end $>
+                      <$ end $>
+
+                      <$= timeline.with_item do |item| $>
+                        <$= item.with_line_start $>
+                        <$= item.with_item_start_content("2001") $>
+                        <$= item.with_item_middle do $>
+                          <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="currentColor"><path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>
+                        <$ end $>
+                        <$= item.with_item_end(box: true).with_content("iPod") $>
+                        <$= item.with_line_end $>
+                      <$ end $>
+
+                      <$= timeline.with_item do |item| $>
+                        <$= item.with_line_start $>
+                        <$= item.with_item_start_content("2007") $>
+                        <$= item.with_item_middle do $>
+                          <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="currentColor"><path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>
+                        <$ end $>
+                        <$= item.with_item_end(box: true).with_content("iPhone") $>
+                        <$= item.with_line_end $>
+                      <$ end $>
+
+                      <$= timeline.with_item do |item| $>
+                        <$= item.with_line_start $>
+                        <$= item.with_item_start_content("2015") $>
+                        <$= item.with_item_middle do $>
+                          <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="currentColor"><path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>
+                        <$ end $>
+                        <$= item.with_item_end(box: true).with_content("Apple Watch") $>
+                      <$ end $>
+                    <$ end $>
+                  ERB
+        ) %>
+      <% end %>
+    <% end %>
+
+    <%= render DocumentationComponent.new do |doc| %>
+      <%= doc.with_header { "# #{key == "vertical" ? value : "#{value} (default)"} timeline with bottom side only" } %>
+      <%= doc.with_body do |body| %>
+        <%= body.with_preview_example(
+          source: <<~ERB
+                    <$= render #{component}.new#{"(vertical: true)" if key == "vertical"} do |timeline| $>
+                      <$= timeline.with_item do |item| $>
+                        <$= item.with_item_middle do $>
+                          <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="currentColor"><path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>
+                        <$ end $>
+                        <$= item.with_item_end(box: true).with_content("First Macintosh computer") $>
+                        <$= item.with_line_end $>
+                      <$ end $>
+
+                      <$= timeline.with_item do |item| $>
+                        <$= item.with_line_start $>
+                        <$= item.with_item_middle do $>
+                          <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="currentColor"><path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>
+                        <$ end $>
+                        <$= item.with_item_end(box: true).with_content("iMac") $>
+                        <$= item.with_line_end $>
+                      <$ end $>
+
+                      <$= timeline.with_item do |item| $>
+                        <$= item.with_line_start $>
+                        <$= item.with_item_middle do $>
+                          <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="currentColor"><path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>
+                        <$ end $>
+                        <$= item.with_item_end(box: true).with_content("iPod") $>
+                        <$= item.with_line_end $>
+                      <$ end $>
+
+                      <$= timeline.with_item do |item| $>
+                        <$= item.with_line_start $>
+                        <$= item.with_item_middle do $>
+                          <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="currentColor"><path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>
+                        <$ end $>
+                        <$= item.with_item_end(box: true).with_content("iPhone") $>
+                        <$= item.with_line_end $>
+                      <$ end $>
+
+                      <$= timeline.with_item do |item| $>
+                        <$= item.with_line_start $>
+                        <$= item.with_item_middle do $>
+                          <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="currentColor"><path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>
+                        <$ end $>
+                        <$= item.with_item_end(box: true).with_content("Apple Watch") $>
+                      <$ end $>
+                    <$ end $>
+                  ERB
+        ) %>
+      <% end %>
+    <% end %>
+
+    <%= render DocumentationComponent.new do |doc| %>
+      <%= doc.with_header { "# #{key == "vertical" ? value : "#{value} (default)"} timeline with top side only" } %>
+      <%= doc.with_body do |body| %>
+        <%= body.with_preview_example(
+          source: <<~ERB
+                    <$= render #{component}.new#{"(vertical: true)" if key == "vertical"} do |timeline| $>
+                      <$= timeline.with_item do |item| $>
+                        <$= item.with_item_start(box: true).with_content("First Macintosh computer") $>
+                        <$= item.with_item_middle do $>
+                          <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="currentColor"><path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>
+                        <$ end $>
+                        <$= item.with_line_end $>
+                      <$ end $>
+
+                      <$= timeline.with_item do |item| $>
+                        <$= item.with_line_start $>
+                        <$= item.with_item_start(box: true).with_content("iMac") $>
+                        <$= item.with_item_middle do $>
+                          <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="currentColor"><path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>
+                        <$ end $>
+                        <$= item.with_line_end $>
+                      <$ end $>
+
+                      <$= timeline.with_item do |item| $>
+                        <$= item.with_line_start $>
+                        <$= item.with_item_start(box: true).with_content("iPod") $>
+                        <$= item.with_item_middle do $>
+                          <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="currentColor"><path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>
+                        <$ end $>
+                        <$= item.with_line_end $>
+                      <$ end $>
+
+                      <$= timeline.with_item do |item| $>
+                        <$= item.with_line_start $>
+                        <<$= item.with_item_start(box: true).with_content("iPhone") $>
+                        <$= item.with_item_middle do $>
+                          <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="currentColor"><path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>
+                        <$ end $>
+                        <$= item.with_line_end $>
+                      <$ end $>
+
+                      <$= timeline.with_item do |item| $>
+                        <$= item.with_line_start $>
+                        <$= item.with_item_start(box: true).with_content("Apple Watch") $>
+                        <$= item.with_item_middle do $>
+                          <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="currentColor"><path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>
+                        <$ end $>
+                      <$ end $>
+                    <$ end $>
+                  ERB
+        ) %>
+      <% end %>
+    <% end %>
+
+    <%= render DocumentationComponent.new do |doc| %>
+      <%= doc.with_header { "# #{key == "vertical" ? value : "#{value} (default)"} timeline with different sides" } %>
+      <%= doc.with_body do |body| %>
+        <%= body.with_preview_example(
+          source: <<~ERB
+                    <$= render #{component}.new#{"(vertical: true)" if key == "vertical"} do |timeline| $>
+                      <$= timeline.with_item do |item| $>
+                        <$= item.with_item_start(box: true).with_content("First Macintosh computer") $>
+                        <$= item.with_item_middle do $>
+                          <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="currentColor"><path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>
+                        <$ end $>
+                        <$= item.with_line_end $>
+                      <$ end $>
+
+                      <$= timeline.with_item do |item| $>
+                        <$= item.with_line_start $>
+                        <$= item.with_item_middle do $>
+                          <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="currentColor"><path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>
+                        <$ end $>
+                        <$= item.with_item_end(box: true).with_content("iMac") $>
+                        <$= item.with_line_end $>
+                      <$ end $>
+
+                      <$= timeline.with_item do |item| $>
+                        <$= item.with_line_start $>
+                        <$= item.with_item_start(box: true).with_content("iPod") $>
+                        <$= item.with_item_middle do $>
+                          <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="currentColor"><path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>
+                        <$ end $>
+                        <$= item.with_line_end $>
+                      <$ end $>
+
+                      <$= timeline.with_item do |item| $>
+                        <$= item.with_line_start $>
+                        <$= item.with_item_middle do $>
+                          <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="currentColor"><path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>
+                        <$ end $>
+                        <$= item.with_item_end(box: true).with_content("iPhone") $>
+                        <$= item.with_line_end $>
+                      <$ end $>
+
+                      <$= timeline.with_item do |item| $>
+                        <$= item.with_line_start $>
+                        <$= item.with_item_start(box: true).with_content("Apple Watch") $>
+                        <$= item.with_item_middle do $>
+                          <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="currentColor"><path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>
+                        <$ end $>
+                      <$ end $>
+                    <$ end $>
+                  ERB
+        ) %>
+      <% end %>
+    <% end %>
+
+    <%= render DocumentationComponent.new do |doc| %>
+      <%= doc.with_header { "# #{key == "vertical" ? value : "#{value} (default)"} timeline with colorful lines" } %>
+      <%= doc.with_body do |body| %>
+        <%= body.with_preview_example(
+          source: <<~ERB
+                    <$= render #{component}.new#{"(vertical: true)" if key == "vertical"} do |timeline| $>
+                      <$= timeline.with_item do |item| $>
+                        <$= item.with_item_start(box: true).with_content("First Macintosh computer") $>
+                        <$= item.with_item_middle do $>
+                          <svg class="text-primary" xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="currentColor"><path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>
+                        <$ end $>
+                        <$= item.with_line_end(css_class: "bg-primary") $>
+                      <$ end $>
+
+                      <$= timeline.with_item do |item| $>
+                        <$= item.with_line_start(css_class: "bg-primary") $>
+                        <$= item.with_item_middle do $>
+                          <svg class="text-primary" xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="currentColor"><path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>
+                        <$ end $>
+                        <$= item.with_item_end(box: true).with_content("iMac") $>
+                        <$= item.with_line_end(css_class: "bg-primary") $>
+                      <$ end $>
+
+                      <$= timeline.with_item do |item| $>
+                        <$= item.with_line_start(css_class: "bg-primary") $>
+                        <$= item.with_item_start(box: true).with_content("iPod") $>
+                        <$= item.with_item_middle do $>
+                          <svg class="text-primary" xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="currentColor"><path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>
+                        <$ end $>
+                        <$= item.with_line_end $>
+                      <$ end $>
+
+                      <$= timeline.with_item do |item| $>
+                        <$= item.with_line_start $>
+                        <$= item.with_item_middle do $>
+                          <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="currentColor"><path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>
+                        <$ end $>
+                        <$= item.with_item_end(box: true).with_content("iPhone") $>
+                        <$= item.with_line_end $>
+                      <$ end $>
+
+                      <$= timeline.with_item do |item| $>
+                        <$= item.with_line_start $>
+                        <$= item.with_item_start(box: true).with_content("Apple Watch") $>
+                        <$= item.with_item_middle do $>
+                          <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="currentColor"><path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>
+                        <$ end $>
+                      <$ end $>
+                    <$ end $>
+                  ERB
+        ) %>
+      <% end %>
+    <% end %>
+
+    <%= render DocumentationComponent.new do |doc| %>
+      <%= doc.with_header { "# #{key == "vertical" ? value : "#{value} (default)"} timeline with different sides" } %>
+      <%= doc.with_body do |body| %>
+        <%= body.with_preview_example(
+          source: <<~ERB
+                    <$= render #{component}.new#{"(vertical: true)" if key == "vertical"} do |timeline| $>
+                      <$= timeline.with_item do |item| $>
+                        <$= item.with_item_start(box: true).with_content("First Macintosh computer") $>
+                        <$= item.with_line_end $>
+                      <$ end $>
+
+                      <$= timeline.with_item do |item| $>
+                        <$= item.with_line_start $>
+                        <$= item.with_item_end(box: true).with_content("iMac") $>
+                        <$= item.with_line_end $>
+                      <$ end $>
+
+                      <$= timeline.with_item do |item| $>
+                        <$= item.with_line_start $>
+                        <$= item.with_item_start(box: true).with_content("iPod") $>
+                        <$= item.with_line_end $>
+                      <$ end $>
+
+                      <$= timeline.with_item do |item| $>
+                        <$= item.with_line_start $>
+                        <$= item.with_item_end(box: true).with_content("iPhone") $>
+                        <$= item.with_line_end $>
+                      <$ end $>
+
+                      <$= timeline.with_item do |item| $>
+                        <$= item.with_line_start $>
+                        <$= item.with_item_start(box: true).with_content("Apple Watch") $>
+                      <$ end $>
+                    <$ end $>
+                  ERB
+        ) %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Timeline with icon snapped to the start" } %>
+    <%= doc.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new(vertical: true, css_class: "timeline-snap-icon max-md:timeline-compact") do |timeline| $>
+                    <$= timeline.with_item do |item| $>
+                      <$= item.with_item_start(css_class: "mb-10 md:text-end") do $>
+                        <time class="font-mono italic">1984</time>
+                        <div class="text-lg font-black">First Macintosh computer</div>
+                        The Apple Macintosh—later rebranded as the Macintosh 128K—is the original Apple Macintosh
+                        personal computer. It played a pivotal role in establishing desktop publishing as a general
+                        office function. The motherboard, a 9 in (23 cm) CRT monitor, and a floppy drive were housed
+                        in a beige case with integrated carrying handle; it came with a keyboard and single-button
+                        mouse.
+                      <$ end $>
+                      <$= item.with_item_middle do $>
+                        <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="currentColor"><path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>
+                      <$ end $>
+                      <$= item.with_line_end $>
+                    <$ end $>
+
+                    <$= timeline.with_item do |item| $>
+                      <$= item.with_line_start $>
+                      <$= item.with_item_middle do $>
+                        <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="currentColor"><path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>
+                      <$ end $>
+                      <$= item.with_item_end(css_class: "md:mb-10") do $>
+                        <time class="font-mono italic">1998</time>
+                        <div class="text-lg font-black">iMac</div>
+                        iMac is a family of all-in-one Mac desktop computers designed and built by Apple Inc. It has
+                        been the primary part of Apple's consumer desktop offerings since its debut in August 1998,
+                        and has evolved through seven distinct forms
+                      <$ end $>
+                      <$= item.with_line_end $>
+                    <$ end $>
+
+                    <$= timeline.with_item do |item| $>
+                      <$= item.with_line_start $>
+                      <$= item.with_item_start(css_class: "mb-10 md:text-end") do $>
+                        <time class="font-mono italic">2001</time>
+                        <div class="text-lg font-black">iPod</div>
+                        The iPod is a discontinued series of portable media players and multi-purpose mobile devices
+                        designed and marketed by Apple Inc. The first version was released on October 23, 2001, about
+                        8+1⁄2 months after the Macintosh version of iTunes was released. Apple sold an estimated 450
+                        million iPod products as of 2022. Apple discontinued the iPod product line on May 10, 2022. At
+                        over 20 years, the iPod brand is the oldest to be discontinued by Apple
+                      <$ end $>
+                      <$= item.with_item_middle do $>
+                        <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="currentColor"><path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>
+                      <$ end $>
+                      <$= item.with_line_end $>
+                    <$ end $>
+
+                    <$= timeline.with_item do |item| $>
+                      <$= item.with_line_start $>
+                      <$= item.with_item_middle do $>
+                        <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="currentColor"><path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>
+                      <$ end $>
+                      <$= item.with_item_end(css_class: "md:mb-10") do $>
+                        <time class="font-mono italic">2007</time>
+                        <div class="text-lg font-black">iPhone</div>
+                        iPhone is a line of smartphones produced by Apple Inc. that use Apple's own iOS mobile
+                        operating system. The first-generation iPhone was announced by then-Apple CEO Steve Jobs on
+                        January 9, 2007. Since then, Apple has annually released new iPhone models and iOS updates. As
+                        of November 1, 2018, more than 2.2 billion iPhones had been sold. As of 2022, the iPhone
+                        accounts for 15.6% of global smartphone market share
+                      <$ end $>
+                      <$= item.with_line_end $>
+                    <$ end $>
+
+                    <$= timeline.with_item do |item| $>
+                      <$= item.with_line_start $>
+                      <$= item.with_item_start(css_class: "mb-10 md:text-end") do $>
+                        <time class="font-mono italic">2015</time>
+                        <div class="text-lg font-black">Apple Watch</div>
+                        The Apple Watch is a line of smartwatches produced by Apple Inc. It incorporates fitness
+                        tracking, health-oriented capabilities, and wireless telecommunication, and integrates with
+                        iOS and other Apple products and services
+                      <$ end $>
+                      <$= item.with_item_middle do $>
+                        <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="currentColor"><path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>
+                      <$ end $>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <div class="divider"></div>
+
+  <div class="mb-2">
+    <h1 class="font-bold mb-2"># Data display > Timeline</h1>
+    <ul class="bg-base-100 rounded-box shadow-md p-2">
+      <%= link_to "< Table", daisy_ui_table_path, class: "link link-primary m-2" %>
+      <%= link_to "Home", daisy_ui_path, class: "link link-primary m-2" %>
+    </ul>
+  </div>
+</div>

data/app/views/ui_components/daisy_ui/home/index.html.erb

@@ -15,6 +15,17 @@
       <%= link_to "Accordion", daisy_ui_accordion_path, class: "link link-primary m-2" %>
       <%= link_to "Avatar", daisy_ui_avatar_path, class: "link link-primary m-2" %>
       <%= link_to "Badge", daisy_ui_badge_path, class: "link link-primary m-2" %>
+      <%= link_to "Card", daisy_ui_card_path, class: "link link-primary m-2" %>
+      <%= link_to "Carousel", daisy_ui_carousel_path, class: "link link-primary m-2" %>
+      <%= link_to "Chat Bubble", daisy_ui_chat_path, class: "link link-primary m-2" %>
+      <%= link_to "Countdown", daisy_ui_countdown_path, class: "link link-primary m-2" %>
+      <%= link_to "Diff", daisy_ui_diff_path, class: "link link-primary m-2" %>
+      <%= link_to "Kbd", daisy_ui_kbd_path, class: "link link-primary m-2" %>
+      <%= link_to "List", daisy_ui_list_path, class: "link link-primary m-2" %>
+      <%= link_to "Stat", daisy_ui_stat_path, class: "link link-primary m-2" %>
+      <%= link_to "Status", daisy_ui_status_path, class: "link link-primary m-2" %>
+      <%= link_to "Table", daisy_ui_table_path, class: "link link-primary m-2" %>
+      <%= link_to "Timeline", daisy_ui_timeline_path, class: "link link-primary m-2" %>
     </ul>
   </div>
 </div>

data/config/routes.rb

@@ -3,7 +3,7 @@ UiComponents::Engine.routes.draw do
     namespace :daisy_ui do
       get '/', to: "home#index"
 
-      # Actions
+      # 4 - Actions
       scope controller: :action_components do
         get "button"
         get "dropdown"
@@ -11,11 +11,22 @@ UiComponents::Engine.routes.draw do
         get "swap"
       end
 
-      # Dara Display
+      # 14 - Dara Display
       scope controller: :data_display_components do
         get "accordion"
         get "avatar"
         get "badge"
+        get "card"
+        get "carousel"
+        get "chat"
+        get "countdown"
+        get "diff"
+        get "kbd"
+        get "list"
+        get "stat"
+        get "status"
+        get "table"
+        get "timeline"
       end
     end
   end

data/lib/tasks/ui_components_tasks.rake

@@ -22,9 +22,6 @@ namespace :ui_components do
     UiComponents::Config.inject_into_file(file_path: Rails.root.join(".gitignore"),
                                           file_data: "safelist.txt")
 
-    # Building tailwindcss assets
-    # Rake::Task["tailwindcss:build"].invoke
-
     # Add engine for routes.rb
     UiComponents::Config.inject_into_routes(file_path: Rails.root.join("config/routes.rb"),
                                             route_line: 'mount UiComponents::Engine, at: "/"')

data/lib/ui_components/config/daisy_ui_class_names.rb

@@ -5,7 +5,7 @@ module UiComponents
     module DaisyUiClassNames
       DAISY_UI_COMPONENTS = {
         action: %w[button dropdown modal swap],
-        data_display: %w[accordion avatar badge]
+        data_display: %w[accordion avatar badge card carousel chat countdown diff kbd list stat status table timeline]
       }.freeze
 
       class << self
@@ -19,7 +19,8 @@ module UiComponents
         private
 
         def other_class_names
-          %w[link link-primary join join-vertical avatar-group -space-x-6 text-info]
+          %w[link link-primary join join-vertical avatar-group -space-x-6 text-info divider chat-image list-col-grow list-col-wrap
+             max-md:timeline-compact]
         end
 
         def get_component_classes(scope:, components:)

data/lib/ui_components/config/tailwind_class_names.rb

@@ -5,36 +5,59 @@ module UiComponents
     module TailwindClassNames
       class << self
         def all
+          layout +
           flexbox_and_grid +
           spacing +
           sizing +
           typography +
+          backgrounds +
           borders +
+          effects +
+          transitions_and_animation +
           svg
         end
 
         private
 
+        def layout
+          %w[relative aspect-16/9 overflow-x-auto]
+        end
+
         def flexbox_and_grid
-          %w[grid grid-cols gap-16]
+          %w[grid grid-cols grid-flow-col gap-y-4 gap-1 gap-2 gap-5 gap-12 gap-16 flex flex-col auto-cols-max items-center justify-center
+             place-content-center place-items-center inline-grid *:[grid-area:1/1]]
         end
 
         def spacing
-          %w[p-2 m-2 mt-6 mb-36]
+          %w[p-2 py-2 p-4 px-10 pt-10 pb-2 my-1 m-2 mt-6 mb-36 mb-10 md:mb-10 space-x-4]
         end
 
         def sizing
-          %w[w-8 w-10 w-12 w-16 w-20 w-32 h-10]
+          %w[w-8 w-10 w-12 w-16 w-20 w-30 w-32 w-64 w-72 w-96 w-lg w-full w-1/2 max-w-md min-w-2xs max-w-4xl h-10 h-96 h-full size-5 size-6
+             size-10 h-46 max-h-98]
         end
 
         def typography
-          %w[text-xl font-semibold text-center]
+          %w[text-xs text-xl text-2xl text-3xl text-5xl text-6xl text-9xl font-semibold font-mono text-center font-black tracking-wide
+             uppercase text-4xl font-thin tabular-nums text-primary italic md:text-end]
+        end
+
+        def backgrounds
+          %w[bg-primary]
         end
 
         def borders
           %w[rounded rounded-xl rounded-full]
         end
 
+        def effects
+          %w[opacity-30 opacity-60]
+        end
+
+        def transitions_and_animation
+          %w[animate-ping animate-bounce]
+        end
+
         def svg
           %w[fill-current]
         end

data/lib/ui_components/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module UiComponents
-  VERSION = "0.1.1"
+  VERSION = "0.1.2"
 end