Merge pull request #80 from substancelab/docs/input

koppen · web-flow · commit 0c0e451ef587 · 2026-02-04T09:54:13.000+01:00
Expose documentation
diff --git a/app/components/flowbite/card.rb b/app/components/flowbite/card.rb
@@ -7,10 +7,7 @@ module Flowbite
   #
   # To render a title in the card, use the title argument or the title slot.
   #
-  # If you want to customize the title element completely, use the title slot.
-  # You can even use +Flowbite::Card::Title+ to still preseve the default
-  # rendering:
-  #
+  # @example Using the title slot
   #     <%= render(Flowbite::Card.new) do |card| %>
   #       <% card.with_title do %>
   #         <div><%= parent_category.name %></div>
@@ -20,6 +17,8 @@ module Flowbite
   #
   # @viewcomponent_slot [Flowbite::Card::Title] title The title of the card,
   #   rendered at the top. Use +with_title+ to set custom content.
+  #
+  # @lookbook_embed CardPreview
   class Card < ViewComponent::Base
     renders_one :title
 
diff --git a/app/components/flowbite/input_field.rb b/app/components/flowbite/input_field.rb
@@ -62,6 +62,8 @@ module Flowbite
   #   Usually auto-generated based on the input type subclass.
   # @viewcomponent_slot [Flowbite::Input::Label] label The label for the input
   #   field, rendered above the input element.
+  #
+  # @lookbook_embed InputFieldPreview
   class InputField < ViewComponent::Base
     renders_one :hint
     renders_one :input
diff --git a/app/components/flowbite/link.rb b/app/components/flowbite/link.rb
@@ -5,6 +5,8 @@ module Flowbite
   # to an external website when clicking on an inline text item, button, or card
   #
   # Use this component to add default styles to an inline link element.
+  #
+  # @lookbook_embed LinkPreview
   class Link < ViewComponent::Base
     attr_reader :href, :options
 
diff --git a/app/components/flowbite/toast.rb b/app/components/flowbite/toast.rb
@@ -10,6 +10,8 @@ module Flowbite
   # @param message [String] The message to display in the toast.
   # @param options [Hash] Additional HTML options for the toast container.
   # @param style [Symbol] The color style of the toast (:default, :success, :danger, :warning).
+  #
+  # @lookbook_embed ToastPreview
   class Toast < ViewComponent::Base
     class << self
       def classes
diff --git a/demo/.yardoc/checksums b/demo/.yardoc/checksums
@@ -1,8 +1,8 @@
-app/components/flowbite/card.rb fb108e57eb6e0ce250db89c409f3f79ed4e7fe70
-app/components/flowbite/link.rb 7c83a929ccbe4035def17fe928aff4e042dc2999
+app/components/flowbite/card.rb 6f248428402ae1a72982cd0cde3acd77a6f43308
+app/components/flowbite/link.rb 1516522405f7cf2021913a4ebbb792f4ae386c16
 app/components/flowbite/input.rb 6fbe49459aa61f71e7fb72688372223189167ac7
 app/components/flowbite/style.rb ef063360cc99cd7a6b8e67a7693326bb5dfb0e42
-app/components/flowbite/toast.rb 20c14599e8a9f33cf36450edbad59b3dbeaf6bbd
+app/components/flowbite/toast.rb 5847b4e1b7387f27f7bc65c8098f132b9fdf0c86
 app/components/flowbite/button.rb 6ae7681d3b842d73aa99cddfa5a9b107ede7fea4
 app/components/flowbite/styles.rb 929c42e428ba5a8e16efacaae0f35380e2f5f95c
 app/components/flowbite/input/url.rb f1046824f9b06c8df8e0f567979321b82baac6fa
@@ -16,7 +16,7 @@ app/components/flowbite/button/pill.rb 5200da68b3fdd353db3780550b932f4037a7c999
 app/components/flowbite/input/email.rb c89f74f38cdefce5c05bac458b39d56a9ba4aa35
 app/components/flowbite/input/label.rb d71e843b267f35f10c3627e950408493a9afa97c
 app/components/flowbite/input/phone.rb 0dfe3e9a83c4fb9f558405a20601649c7b08922a
-app/components/flowbite/input_field.rb 4e6b2c2c744d54a8c645b31098a3aee60d402f43
+app/components/flowbite/input_field.rb 529d2ff113db8644c345e32994e62366479c8cb0
 app/components/flowbite/input/number.rb a33580788ad91308b85955fdb44d37883329dd4e
 app/components/flowbite/input/select.rb 9f1a6406efdda2e29d479117a35c2a924bd888c2
 app/components/flowbite/button/outline.rb 2829cf352a03c00dd99a56a05181c4e1a6794d18
diff --git a/demo/.yardoc/objects/root.dat b/demo/.yardoc/objects/root.dat
diff --git a/demo/Gemfile.lock b/demo/Gemfile.lock
@@ -1,7 +1,7 @@
 PATH
   remote: ../..
   specs:
-    flowbite-components (0.1.4)
+    flowbite-components (0.2.0)
       view_component (>= 4.0.0)
 
 GEM
diff --git a/demo/app/controllers/docs/components_controller.rb b/demo/app/controllers/docs/components_controller.rb
@@ -35,11 +35,14 @@ def show
     private
 
     helper_method def all_components
+      return @all_components if @all_components
+
       flowbite = Yard.new.code_object("Flowbite")
       child_classes = flowbite.children.select { |child|
         child.type == :class && child.inheritance_tree.map(&:path).include?("ViewComponent::Base")
       }
-      child_classes.sort_by(&:name)
+
+      @all_components = child_classes.sort_by(&:name)
     end
 
     helper_method def rubydoc_url(code_object)
diff --git a/demo/app/views/docs/components/show.html.erb b/demo/app/views/docs/components/show.html.erb
@@ -54,6 +54,16 @@
       <%= simple_format(@code_object.docstring) %>
     </section>
 
+    <% if @lookbook_embeds.any? %>
+      <section>
+        <h2 class="mt-8 text-2xl font-bold">Examples</h2>
+
+        <% @lookbook_embeds.each do |lookbook_tag| %>
+          <lookbook-embed panels="source" preview="<%= lookbook_tag.text.strip %>" scenario="*"></lookbook-embed>
+        <% end %>
+      </section>
+    <% end %>
+
     <% if @viewcomponent_slots.any? %>
       <section>
         <h2 class="mt-8 text-2xl font-bold">Slots</h2>
@@ -79,16 +89,6 @@
       </section>
     <% end %>
 
-    <% if @lookbook_embeds.any? %>
-      <section>
-        <h2 class="mt-8 text-2xl font-bold">Examples</h2>
-
-        <% @lookbook_embeds.each do |lookbook_tag| %>
-          <lookbook-embed panels="source" preview="<%= lookbook_tag.text.strip %>" scenario="*"></lookbook-embed>
-        <% end %>
-      </section>
-    <% end %>
-
     <% if @constructor %>
       <section>
         <h2 class="mt-8 text-2xl font-bold">Constructor</h2>
diff --git a/demo/app/views/homepage/show.html.erb b/demo/app/views/homepage/show.html.erb
@@ -21,7 +21,7 @@
           sm:space-y-0
         "
       >
-        <%= link_to("https://github.com/substancelab/flowbite-components?tab=readme-ov-file#installation", class: Flowbite::Button.classes(size: :lg) + ["inline-flex", "justify-center", "items-center"]) do %>
+        <%= link_to(docs_page_path(:getting_started), class: Flowbite::Button.classes(size: :lg) + ["inline-flex", "justify-center", "items-center"]) do %>
           Get started
           <svg
             class="w-3.5 h-3.5 ms-2 rtl:rotate-180"
@@ -40,7 +40,7 @@
           </svg>
         <% end %>
 
-        <%= link_to(lookbook_path, class: Flowbite::Button.classes(size: :lg, style: :secondary)) do %>
+        <%= link_to(docs_component_path("Flowbite"), class: Flowbite::Button.classes(size: :lg, style: :secondary)) do %>
           View components
         <% end %>
       </div>
diff --git a/demo/app/views/layouts/application.html.erb b/demo/app/views/layouts/application.html.erb
@@ -88,7 +88,12 @@
               <li>
                 <%= link_to("Home", root_url, class: "block py-2 px-3 text-heading rounded-sm hover:bg-neutral-tertiary md:hover:bg-transparent md:border-0 md:hover:text-brand md:p-0 md:dark:hover:text-fg-brand dark:hover:text-white md:dark:hover:bg-transparent") %>
               </li>
-
+              <li>
+                <%= link_to("Docs", docs_index_path, class: "block py-2 px-3 text-heading rounded-sm hover:bg-neutral-tertiary md:hover:bg-transparent md:border-0 md:hover:text-brand md:p-0 md:dark:hover:text-fg-brand dark:hover:text-white md:dark:hover:bg-transparent") %>
+              </li>
+              <li>
+                <%= link_to("Components", docs_component_path("Flowbite"), class: "block py-2 px-3 text-heading rounded-sm hover:bg-neutral-tertiary md:hover:bg-transparent md:border-0 md:hover:text-brand md:p-0 md:dark:hover:text-fg-brand dark:hover:text-white md:dark:hover:bg-transparent") %>
+              </li>
               <li>
                 <%= link_to("GitHub", "https://github.com/substancelab/flowbite-components", class: "block py-2 px-3 text-heading rounded-sm hover:bg-neutral-tertiary md:hover:bg-transparent md:border-0 md:hover:text-brand md:p-0 md:dark:hover:text-fg-brand dark:hover:text-white md:dark:hover:bg-transparent") %>
               </li>
diff --git a/flowbite-components.gemspec b/flowbite-components.gemspec
@@ -15,6 +15,7 @@ Gem::Specification.new do |spec|
 
   spec.metadata["allowed_push_host"] = "https://rubygems.org/"
 
+  spec.metadata["documentation_uri"] = "https://flowbite-components.substancelab.com/docs"
   spec.metadata["homepage_uri"] = spec.homepage
   spec.metadata["source_code_uri"] = spec.homepage
   spec.metadata["changelog_uri"] = "https://github.com/substancelab/flowbite-components/blob/main/CHANGELOG.md"

Original file line number	Diff line number	Diff line change
`@@ -7,10 +7,7 @@ module Flowbite`
`7`	`7`	`#`
`8`	`8`	`# To render a title in the card, use the title argument or the title slot.`
`9`	`9`	`#`
`10`		`- # If you want to customize the title element completely, use the title slot.`
`11`		`- # You can even use +Flowbite::Card::Title+ to still preseve the default`
`12`		`- # rendering:`
`13`		`- #`
	`10`	`+ # @example Using the title slot`
`14`	`11`	`# <%= render(Flowbite::Card.new) do \|card\| %>`
`15`	`12`	`# <% card.with_title do %>`
`16`	`13`	`# <div><%= parent_category.name %></div>`
`@@ -20,6 +17,8 @@ module Flowbite`
`20`	`17`	`#`
`21`	`18`	`# @viewcomponent_slot [Flowbite::Card::Title] title The title of the card,`
`22`	`19`	`# rendered at the top. Use +with_title+ to set custom content.`
	`20`	`+ #`
	`21`	`+ # @lookbook_embed CardPreview`
`23`	`22`	`class Card < ViewComponent::Base`
`24`	`23`	`renders_one :title`
`25`	`24`
Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,8 @@ module Flowbite`
`5`	`5`	`# to an external website when clicking on an inline text item, button, or card`
`6`	`6`	`#`
`7`	`7`	`# Use this component to add default styles to an inline link element.`
	`8`	`+ #`
	`9`	`+ # @lookbook_embed LinkPreview`
`8`	`10`	`class Link < ViewComponent::Base`
`9`	`11`	`attr_reader :href, :options`
`10`	`12`