ui_components 0.1.1 → 0.1.3

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

@@ -0,0 +1,211 @@
+<% component = UiComponents::DaisyUi::DataDisplay::CountdownComponent %>
+
+<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 > Countdown</h1>
+    <ul class="bg-base-100 rounded-box shadow-md p-2">
+      <%= link_to "< Chat bobble", daisy_ui_chat_path, class: "link link-primary m-2" %>
+      <%= link_to "Home", daisy_ui_path, class: "link link-primary m-2" %>
+      <%= link_to "Diff >", daisy_ui_diff_path, class: "link link-primary m-2" %>
+    </ul>
+  </div>
+
+  <div class="divider"></div>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Countdown" } %>
+    <%= doc.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new do |countdown| $>
+                    <$= countdown.with_item(value: "59") $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# No automatic countdown" } %>
+    <%= doc.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new(automatic: false) do |countdown| $>
+                    <$= countdown.with_item(value: "59") $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Large text" } %>
+    <%= doc.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new(css_class: "font-mono text-6xl") do |countdown| $>
+                    <$= countdown.with_item(value: "59") $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Clock countdown" } %>
+    <%= doc.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new(css_class: "font-mono text-2xl") do |countdown| $>
+                    <$= countdown.with_item(value: "10", type: "hour", label: "h") $>
+                    <$= countdown.with_item(value: "24", type: "minute", label: "m") $>
+                    <$= countdown.with_item(value: "59", type: "second", label: "s") $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Clock countdown with colons" } %>
+    <%= doc.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new(css_class: "font-mono text-2xl") do |countdown| $>
+                    <$= countdown.with_item(value: "10", type: "hour", label: ":") $>
+                    <$= countdown.with_item(value: "24", type: "minute", label: ":") $>
+                    <$= countdown.with_item(value: "59", type: "second") $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Large text with labels" } %>
+    <%= doc.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <div class="flex gap-5">
+                    <div>
+                      <$= render #{component}.new(css_class: "font-mono text-2xl") do |countdown| $>
+                        <$= countdown.with_item(value: "15", type: "day") $>
+                      <$ end $>
+                      days
+                    </div>
+
+                    <div>
+                      <$= render #{component}.new(css_class: "font-mono text-2xl") do |countdown| $>
+                        <$= countdown.with_item(value: "10", type: "hour") $>
+                      <$ end $>
+                      hours
+                    </div>
+
+                    <div>
+                      <$= render #{component}.new(css_class: "font-mono text-2xl") do |countdown| $>
+                        <$= countdown.with_item(value: "24", type: "minute") $>
+                      <$ end $>
+                      minutes
+                    </div>
+
+                    <div>
+                      <$= render #{component}.new(css_class: "font-mono text-2xl") do |countdown| $>
+                        <$= countdown.with_item(value: "59", type: "second") $>
+                      <$ end $>
+                      sec
+                    </div>
+                  </div>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Large text with labels under" } %>
+    <%= doc.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <div class="grid auto-cols-max grid-flow-col gap-5 text-center">
+                    <div class="flex flex-col">
+                      <$= render #{component}.new(css_class: "font-mono text-5xl") do |countdown| $>
+                        <$= countdown.with_item(value: "15", type: "day") $>
+                      <$ end $>
+                      days
+                    </div>
+
+                    <div class="flex flex-col">
+                      <$= render #{component}.new(css_class: "font-mono text-5xl") do |countdown| $>
+                        <$= countdown.with_item(value: "10", type: "hour") $>
+                      <$ end $>
+                      hours
+                    </div>
+
+                    <div class="flex flex-col">
+                      <$= render #{component}.new(css_class: "font-mono text-5xl") do |countdown| $>
+                        <$= countdown.with_item(value: "24", type: "minute") $>
+                      <$ end $>
+                      minutes
+                    </div>
+
+                    <div class="flex flex-col">
+                      <$= render #{component}.new(css_class: "font-mono text-5xl") do |countdown| $>
+                        <$= countdown.with_item(value: "59", type: "second") $>
+                      <$ end $>
+                      sec
+                    </div>
+                  </div>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# In boxes" } %>
+    <%= doc.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <div class="grid auto-cols-max grid-flow-col gap-5 text-center">
+                    <div class="bg-neutral rounded-box flex flex-col p-2">
+                      <$= render #{component}.new(css_class: "font-mono text-5xl") do |countdown| $>
+                        <$= countdown.with_item(value: "15", type: "day") $>
+                      <$ end $>
+                      days
+                    </div>
+
+                    <div class="bg-neutral rounded-box flex flex-col p-2">
+                      <$= render #{component}.new(css_class: "font-mono text-5xl") do |countdown| $>
+                        <$= countdown.with_item(value: "10", type: "hour") $>
+                      <$ end $>
+                      hours
+                    </div>
+
+                    <div class="bg-neutral rounded-box flex flex-col p-2">
+                      <$= render #{component}.new(css_class: "font-mono text-5xl") do |countdown| $>
+                        <$= countdown.with_item(value: "24", type: "minute") $>
+                      <$ end $>
+                      minutes
+                    </div>
+
+                    <div class="bg-neutral rounded-box flex flex-col p-2">
+                      <$= render #{component}.new(css_class: "font-mono text-5xl") do |countdown| $>
+                        <$= countdown.with_item(value: "59", type: "second") $>
+                      <$ end $>
+                      sec
+                    </div>
+                  </div>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <div class="divider"></div>
+
+  <div class="mb-2">
+    <h1 class="font-bold mb-2"># Data display > Countdown</h1>
+    <ul class="bg-base-100 rounded-box shadow-md p-2">
+      <%= link_to "< Chat bobble", daisy_ui_chat_path, class: "link link-primary m-2" %>
+      <%= link_to "Home", daisy_ui_path, class: "link link-primary m-2" %>
+      <%= link_to "Diff >", daisy_ui_diff_path, class: "link link-primary m-2" %>
+    </ul>
+  </div>
+</div>

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

@@ -0,0 +1,69 @@
+<% component = UiComponents::DaisyUi::DataDisplay::DiffComponent %>
+
+<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 > Diff</h1>
+    <ul class="bg-base-100 rounded-box shadow-md p-2">
+      <%= link_to "< Countdown", daisy_ui_countdown_path, class: "link link-primary m-2" %>
+      <%= link_to "Home", daisy_ui_path, class: "link link-primary m-2" %>
+      <%= link_to "Kbd >", daisy_ui_kbd_path, class: "link link-primary m-2" %>
+    </ul>
+  </div>
+
+  <div class="divider"></div>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Diff" } %>
+    <%= doc.with_body(preview_options: { css_class: "p-2 min-w-2xs max-w-4xl" }) do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new(css_class: "aspect-16/9") do |diff| $>
+                    <$= diff.with_item1 do $>
+                      <img alt="daisy" src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a.webp" />
+                    <$ end $>
+
+                    <$= diff.with_item2 do $>
+                      <img alt="daisy" src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a-blur.webp" />
+                    <$ end $>
+
+                    <$= diff.with_resizer $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Diff text" } %>
+    <%= doc.with_body(preview_options: { css_class: "p-2 min-w-2xs max-w-4xl" }) do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new(css_class: "aspect-16/9") do |diff| $>
+                    <$= diff.with_item1 do $>
+                      <div class="bg-primary grid place-content-center text-9xl font-black">
+                        DAISY
+                      </div>
+                    <$ end $>
+
+                    <$= diff.with_item2 do $>
+                      <div class="bg-base-200 grid place-content-center text-9xl font-black">DAISY</div>
+                    <$ end $>
+
+                    <$= diff.with_resizer $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <div class="divider"></div>
+
+  <div class="mb-2">
+    <h1 class="font-bold mb-2"># Data display > Diff</h1>
+    <ul class="bg-base-100 rounded-box shadow-md p-2">
+      <%= link_to "< Countdown", daisy_ui_countdown_path, class: "link link-primary m-2" %>
+      <%= link_to "Home", daisy_ui_path, class: "link link-primary m-2" %>
+      <%= link_to "Kbd >", daisy_ui_kbd_path, class: "link link-primary m-2" %>
+    </ul>
+  </div>
+</div>

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

@@ -0,0 +1,157 @@
+<% component = UiComponents::DaisyUi::DataDisplay::KbdComponent %>
+
+<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 > Kbd</h1>
+    <ul class="bg-base-100 rounded-box shadow-md p-2">
+      <%= link_to "< Diff", daisy_ui_diff_path, class: "link link-primary m-2" %>
+      <%= link_to "Home", daisy_ui_path, class: "link link-primary m-2" %>
+      <%= link_to "List >", daisy_ui_list_path, class: "link link-primary m-2" %>
+    </ul>
+  </div>
+
+  <div class="divider"></div>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Kbd" } %>
+    <%= doc.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new.with_content("K") $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <% sizes = { 'xs' => 'Xsmall', 'sm' => 'Small', 'md' => 'Medium', 'lg' => 'Large', 'xl' => 'Xlarge' } %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Kbd sizes" } %>
+    <%= doc.with_body do |body| %>
+      <% sizes.each do |key, value| %>
+        <%= body.with_preview_example(
+          source: <<~ERB
+                    <$= render #{component}.new(size: "#{key}").with_content("#{value}") $>
+                  ERB
+        ) %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# In text" } %>
+    <%= doc.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  Press
+                  <$= render #{component}.new(size: "sm").with_content("F") $>
+                  to pay respects.
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Key combination" } %>
+    <%= doc.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new.with_content("ctrl") $>
+                  +
+                  <$= render #{component}.new.with_content("shift") $>
+                  +
+                  <$= render #{component}.new.with_content("del") $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <% function_keys = %w[⌘ ⌥ ⇧ ⌃] %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Function Keys" } %>
+    <%= doc.with_body do |body| %>
+      <% function_keys.each do |value| %>
+        <%= body.with_preview_example(
+          source: <<~ERB
+                    <$= render #{component}.new.with_content("#{value}") $>
+                  ERB
+        ) %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# A full keyboard" } %>
+    <%= doc.with_body(preview_options: { css_class: "w-72" }) do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <div class="my-1 flex w-full justify-center gap-1">
+                    <$= render #{component}.new.with_content("q") $>
+                    <$= render #{component}.new.with_content("w") $>
+                    <$= render #{component}.new.with_content("e") $>
+                    <$= render #{component}.new.with_content("r") $>
+                    <$= render #{component}.new.with_content("t") $>
+                    <$= render #{component}.new.with_content("y") $>
+                    <$= render #{component}.new.with_content("u") $>
+                    <$= render #{component}.new.with_content("i") $>
+                    <$= render #{component}.new.with_content("o") $>
+                    <$= render #{component}.new.with_content("p") $>
+                  </div>
+                  <div class="my-1 flex w-full justify-center gap-1">
+                    <$= render #{component}.new.with_content("a") $>
+                    <$= render #{component}.new.with_content("s") $>
+                    <$= render #{component}.new.with_content("d") $>
+                    <$= render #{component}.new.with_content("f") $>
+                    <$= render #{component}.new.with_content("g") $>
+                    <$= render #{component}.new.with_content("h") $>
+                    <$= render #{component}.new.with_content("j") $>
+                    <$= render #{component}.new.with_content("k") $>
+                    <$= render #{component}.new.with_content("l") $>
+                  </div>
+                  <div class="my-1 flex w-full justify-center gap-1">
+                    <$= render #{component}.new.with_content("z") $>
+                    <$= render #{component}.new.with_content("x") $>
+                    <$= render #{component}.new.with_content("c") $>
+                    <$= render #{component}.new.with_content("v") $>
+                    <$= render #{component}.new.with_content("b") $>
+                    <$= render #{component}.new.with_content("n") $>
+                    <$= render #{component}.new.with_content("m") $>
+                    <$= render #{component}.new.with_content("/") $>
+                  </div>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Arrow Keys" } %>
+    <%= doc.with_body(preview_options: { css_class: "w-30" }) do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <div class="flex w-full justify-center">
+                    <$= render #{component}.new.with_content("▲") $>
+                  </div>
+                  <div class="flex w-full justify-center gap-12">
+                    <$= render #{component}.new.with_content("◀︎") $>
+                    <$= render #{component}.new.with_content("▶︎") $>
+                  </div>
+                  <div class="flex w-full justify-center">
+                    <$= render #{component}.new.with_content("▼") $>
+                  </div>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <div class="divider"></div>
+
+  <div class="mb-2">
+    <h1 class="font-bold mb-2"># Data display > Kbd</h1>
+    <ul class="bg-base-100 rounded-box shadow-md p-2">
+      <%= link_to "< Diff", daisy_ui_diff_path, class: "link link-primary m-2" %>
+      <%= link_to "Home", daisy_ui_path, class: "link link-primary m-2" %>
+      <%= link_to "List >", daisy_ui_list_path, class: "link link-primary m-2" %>
+    </ul>
+  </div>
+</div>