yattho_view_components 0.0.1

data/previews/yattho/alpha/layout_preview.rb

@@ -0,0 +1,211 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Alpha
+    # @label Layout
+    class LayoutPreview < ViewComponent::Preview
+      # @label Playground
+      # @param stacking_breakpoint [Symbol] select [sm, md, lg]
+      # @param first_in_source [Symbol] select [sidebar, main]
+      # @param gutter [Symbol] select [default, none, condensed, spacious]
+      def playground(stacking_breakpoint: :sm, gutter: :default, first_in_source: :sidebar)
+        render(Yattho::Alpha::Layout.new(stacking_breakpoint: stacking_breakpoint, gutter: gutter, first_in_source: first_in_source)) do |component|
+          component.with_main(bg: :attention, p: 6) do
+            "Main content"
+          end
+          component.with_sidebar(bg: :accent, p: 6) do
+            "Sidebar content"
+          end
+        end
+      end
+
+      # @label Default
+      def default
+        render(Yattho::Alpha::Layout.new) do |component|
+          component.with_main(bg: :attention, p: 6) do
+            "Main content"
+          end
+          component.with_sidebar(bg: :accent, p: 6) do
+            "Sidebar content"
+          end
+        end
+      end
+
+      # @!group Gutter
+      #
+      # @label None
+      def gutter_none
+        render(Yattho::Alpha::Layout.new(gutter: :none)) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+
+      # @label Condensed
+      def gutter_condensed
+        render(Yattho::Alpha::Layout.new(gutter: :condensed)) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+
+      # @label Default
+      def gutter_default
+        render(Yattho::Alpha::Layout.new(gutter: :default)) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+
+      # @label Spacious
+      def gutter_spacious
+        render(Yattho::Alpha::Layout.new(gutter: :spacious)) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+      #
+      # @!endgroup
+
+      # @!group Main width
+      #
+      # @label Medium
+      def main_width_md
+        render(Yattho::Alpha::Layout.new) do |component|
+          component.with_main(width: :md, bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+
+      # @label Large
+      def main_width_lg
+        render(Yattho::Alpha::Layout.new) do |component|
+          component.with_main(width: :lg, bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+
+      # @label Extra large
+      def main_width_xl
+        render(Yattho::Alpha::Layout.new) do |component|
+          component.with_main(width: :xl, bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+
+      # @label Full
+      def main_width_full
+        render(Yattho::Alpha::Layout.new) do |component|
+          component.with_main(width: :full, bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+      #
+      # @!endgroup
+
+      # @!group Sidebar width
+      #
+      # @label Narrow
+      def sidebar_width_narrow
+        render(Yattho::Alpha::Layout.new) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(width: :narrow, bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+
+      # @label Default
+      def sidebar_width_default
+        render(Yattho::Alpha::Layout.new) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(width: :default, bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+
+      # @label Wide
+      def sidebar_width_wide
+        render(Yattho::Alpha::Layout.new) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(width: :wide, bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+      #
+      # @!endgroup
+
+      # @!group Sidebar column placement
+      #
+      # @label Start
+      def sidebar_col_placement_start
+        render(Yattho::Alpha::Layout.new) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(col_placement: :start, bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+
+      # @label End
+      def sidebar_col_placement_end
+        render(Yattho::Alpha::Layout.new) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(col_placement: :end, bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+      #
+      # @!endgroup
+
+      # @!group Sidebar row placement
+      #
+      # @label Start
+      def sidebar_row_placement_start
+        render(Yattho::Alpha::Layout.new) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(row_placement: :start, bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+
+      # @label End
+      def sidebar_row_placement_end
+        render(Yattho::Alpha::Layout.new) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(row_placement: :end, bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+
+      # @label None
+      def sidebar_row_placement_none
+        render(Yattho::Alpha::Layout.new) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(row_placement: :none, bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+      #
+      # @!endgroup
+
+      # @!group Stacking breakpoint
+      #
+      # @label Small
+      def stacking_breakpoint_sm
+        render(Yattho::Alpha::Layout.new(stacking_breakpoint: :sm)) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+
+      # @label Medium
+      def stacking_breakpoint_md
+        render(Yattho::Alpha::Layout.new(stacking_breakpoint: :md)) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+
+      # @label Large
+      def stacking_breakpoint_lg
+        render(Yattho::Alpha::Layout.new(stacking_breakpoint: :lg)) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+      #
+      # @!endgroup
+    end
+  end
+end

data/previews/yattho/alpha/menu_preview/default.html.erb

@@ -0,0 +1,17 @@
+<%= render(Yattho::Alpha::Menu.new) do |component| %>
+  <% component.with_heading(tag: :h2) do %>
+    Heading
+  <% end %>
+  <% component.with_item(selected: true, href: "#url") do %>
+    Item 1
+  <% end %>
+  <% component.with_item(href: "#url") do %>
+    <%= render(Yattho::Beta::Octicon.new("check")) %>
+    With Icon
+  <% end %>
+  <% component.with_item(href: "#url") do %>
+    <%= render(Yattho::Beta::Octicon.new("check")) %>
+    With Icon and Counter
+    <%= render(Yattho::Beta::Counter.new(count: 25)) %>
+  <% end %>
+<% end %>

data/previews/yattho/alpha/menu_preview/playground.html.erb

@@ -0,0 +1,17 @@
+<%= render(Yattho::Alpha::Menu.new) do |component| %>
+  <% component.with_heading(tag: :h2) do %>
+    Heading
+  <% end %>
+  <% component.with_item(selected: true, href: "#url") do %>
+    Item 1
+  <% end %>
+  <% component.with_item(href: "#url") do %>
+    <%= render(Yattho::Beta::Octicon.new("check")) %>
+    With Icon
+  <% end %>
+  <% component.with_item(href: "#url") do %>
+    <%= render(Yattho::Beta::Octicon.new("check")) %>
+    With Icon and Counter
+    <%= render(Yattho::Beta::Counter.new(count: 25)) %>
+  <% end %>
+<% end %>

data/previews/yattho/alpha/menu_preview.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Alpha
+    # @label Menu
+    class MenuPreview < ViewComponent::Preview
+      # @label Playground
+      def playground; end
+
+      # @label Default
+      def default; end
+    end
+  end
+end

data/previews/yattho/alpha/nav_list_preview.rb

@@ -0,0 +1,93 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Alpha
+    # @label NavList
+    class NavListPreview < ViewComponent::Preview
+      # @label Playground
+      def playground
+        render(Yattho::Alpha::NavList.new(selected_item_id: :code_review_limits)) do |list|
+          list.with_section(aria: { label: "Repository settings" }) do |section|
+            section.with_heading(title: "Repository settings")
+
+            section.with_item(label: "General", href: "/general") do |item|
+              item.with_leading_visual_icon(icon: :gear)
+            end
+          end
+
+          list.with_section(aria: { label: "Access" }) do |section|
+            section.with_heading(title: "Access")
+
+            section.with_item(label: "Collaborators and teams", href: "/collaborators", selected_by_ids: :collaborators) do |item|
+              item.with_leading_visual_icon(icon: :people)
+            end
+
+            section.with_item(label: "Moderation options", href: "/moderation") do |item|
+              item.with_leading_visual_icon(icon: :"comment-discussion")
+
+              item.with_item(label: "Interaction limits", href: "/interaction-limits", selected_by_ids: :interaction_limits)
+              item.with_item(label: "Code review limits", href: "/review-limits", selected_by_ids: :code_review_limits)
+              item.with_item(label: "Reported content", href: "/reported-content", selected_by_ids: :reported_content)
+            end
+          end
+        end
+      end
+
+      # @label Default
+      def default
+        render(Yattho::Alpha::NavList.new(selected_item_id: :code_review_limits)) do |list|
+          list.with_section(aria: { label: "Repository settings" }) do |section|
+            section.with_heading(title: "Repository settings")
+
+            section.with_item(label: "General", href: "/general") do |item|
+              item.with_leading_visual_icon(icon: :gear)
+            end
+          end
+
+          list.with_section(aria: { label: "Access" }) do |section|
+            section.with_heading(title: "Access")
+
+            section.with_item(label: "Collaborators and teams", href: "/collaborators", selected_by_ids: :collaborators) do |item|
+              item.with_leading_visual_icon(icon: :people)
+            end
+
+            section.with_item(label: "Moderation options", href: "/moderation") do |item|
+              item.with_leading_visual_icon(icon: :"comment-discussion")
+
+              item.with_item(label: "Interaction limits", href: "/interaction-limits", selected_by_ids: :interaction_limits)
+              item.with_item(label: "Code review limits", href: "/review-limits", selected_by_ids: :code_review_limits)
+              item.with_item(label: "Reported content", href: "/reported-content", selected_by_ids: :reported_content)
+            end
+          end
+        end
+      end
+
+      # @label Show more item
+      def show_more_item
+        render(Yattho::Alpha::NavList.new) do |list|
+          list.with_section(aria: { label: "List of foods" }) do |section|
+            section.with_heading(title: "My favorite foods")
+            section.with_item(label: "Popplers", href: "/foods/popplers")
+            section.with_item(label: "Slurm", href: "/foods/slurm")
+            section.with_show_more_item(label: "Show more", src: "/nav_list_items", pages: 2)
+          end
+        end
+      end
+
+      # @label Trailing action
+      def trailing_action
+        render(Yattho::Alpha::NavList.new) do |list|
+          list.with_section(aria: { label: "List of items to buy" }) do |section|
+            section.with_heading(title: "Shopping list")
+            section.with_item(label: "Bread", href: "/list/1") do |item|
+              item.with_trailing_action(show_on_hover: true, icon: :plus, aria: { label: "Button tooltip" })
+            end
+            section.with_item(label: "Cheese", href: "/list/2") do |item|
+              item.with_trailing_action(icon: :plus, aria: { label: "Button tooltip" })
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/previews/yattho/alpha/segmented_control_preview.rb

@@ -0,0 +1,164 @@
+# frozen_string_literal: true
+
+# Setup Playground to use all available component props
+# Setup Features to use individual component props and combinations
+
+module Yattho
+  module Alpha
+    # @label SegmentedControl
+    class SegmentedControlPreview < ViewComponent::Preview
+      # @label Playground
+      # @param full_width [Boolean] toggle
+      # @param hide_labels [Boolean] toggle
+      # @param icon [Symbol] octicon
+      # @param size select [small, medium, large]
+      def playground(full_width: false, hide_labels: false, size: :medium, icon: :none)
+        if icon == :none
+          icon = hide_labels ? :zap : nil
+        end
+        render(Yattho::Alpha::SegmentedControl.new("aria-label": "File view", full_width: full_width, hide_labels: hide_labels, size: size)) do |component|
+          component.with_item(label: "Preview", icon: icon, selected: true)
+          component.with_item(label: "Raw", icon: icon)
+          component.with_item(label: "Blame", icon: icon)
+        end
+      end
+
+      # @label Default
+      def default
+        render(Yattho::Alpha::SegmentedControl.new("aria-label": "File view")) do |component|
+          component.with_item(label: "Preview", selected: true)
+          component.with_item(label: "Raw")
+          component.with_item(label: "Blame")
+        end
+      end
+
+      # @!group Full width
+      # @label Size small
+      # @param hide_labels [Boolean] toggle
+      def full_width_small(hide_labels: false)
+        render(Yattho::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: hide_labels, full_width: true, size: :small)) do |component|
+          component.with_item(label: "Preview", selected: true)
+          component.with_item(label: "Raw")
+          component.with_item(label: "Blame")
+        end
+      end
+
+      # @label Size medium
+      # @param hide_labels [Boolean] toggle
+      def full_width_medium(hide_labels: false)
+        render(Yattho::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: hide_labels, full_width: true, size: :medium)) do |component|
+          component.with_item(label: "Preview", selected: true)
+          component.with_item(label: "Raw")
+          component.with_item(label: "Blame")
+        end
+      end
+
+      # @label Size large
+      # @param hide_labels [Boolean] toggle
+      def full_width_large(hide_labels: false)
+        render(Yattho::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: hide_labels, full_width: true, size: :large)) do |component|
+          component.with_item(label: "Preview", selected: true)
+          component.with_item(label: "Raw")
+          component.with_item(label: "Blame")
+        end
+      end
+      # @!endgroup
+
+      # @!group Icons and text
+      # @label Size small
+      def icons_and_text_small
+        render(Yattho::Alpha::SegmentedControl.new("aria-label": "File view", size: :small)) do |component|
+          component.with_item(label: "Preview", icon: :eye, selected: true)
+          component.with_item(label: "Raw", icon: :"file-code")
+          component.with_item(label: "Blame", icon: :people)
+        end
+      end
+
+      # @label Size medium
+      def icons_and_text_medium
+        render(Yattho::Alpha::SegmentedControl.new("aria-label": "File view", size: :medium)) do |component|
+          component.with_item(label: "Preview", icon: :eye, selected: true)
+          component.with_item(label: "Raw", icon: :"file-code")
+          component.with_item(label: "Blame", icon: :people)
+        end
+      end
+
+      # @label Size large
+      def icons_and_text_large
+        render(Yattho::Alpha::SegmentedControl.new("aria-label": "File view", size: :large)) do |component|
+          component.with_item(label: "Preview", icon: :eye, selected: true)
+          component.with_item(label: "Raw", icon: :"file-code")
+          component.with_item(label: "Blame", icon: :people)
+        end
+      end
+      # @!endgroup
+
+      # @!group Icons only
+      # @label Size small
+      def icon_only_small
+        render(Yattho::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, size: :small)) do |component|
+          component.with_item(label: "Preview", icon: :eye, selected: true)
+          component.with_item(label: "Raw", icon: :"file-code")
+          component.with_item(label: "Blame", icon: :people)
+        end
+      end
+
+      # @label Size medium
+      def icon_only_medium
+        render(Yattho::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, size: :medium)) do |component|
+          component.with_item(label: "Preview", icon: :eye, selected: true)
+          component.with_item(label: "Raw", icon: :"file-code")
+          component.with_item(label: "Blame", icon: :people)
+        end
+      end
+
+      # @label Size large
+      def icon_only_large
+        render(Yattho::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, size: :large)) do |component|
+          component.with_item(label: "Preview", icon: :eye, selected: true)
+          component.with_item(label: "Raw", icon: :"file-code")
+          component.with_item(label: "Blame", icon: :people)
+        end
+      end
+
+      # @label Full width, size small
+      def icon_only_full_width_small
+        render(Yattho::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, full_width: true, size: :small)) do |component|
+          component.with_item(label: "Preview", icon: :eye, selected: true)
+          component.with_item(label: "Raw", icon: :"file-code")
+          component.with_item(label: "Blame", icon: :people)
+        end
+      end
+
+      # @label Full width, size medium
+      def icon_only_full_width_medium
+        render(Yattho::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, full_width: true, size: :medium)) do |component|
+          component.with_item(label: "Preview", icon: :eye, selected: true)
+          component.with_item(label: "Raw", icon: :"file-code")
+          component.with_item(label: "Blame", icon: :people)
+        end
+      end
+
+      # @label Full width, size large
+      def icon_only_full_width_large
+        render(Yattho::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, full_width: true, size: :large)) do |component|
+          component.with_item(label: "Preview", icon: :eye, selected: true)
+          component.with_item(label: "Raw", icon: :"file-code")
+          component.with_item(label: "Blame", icon: :people)
+        end
+      end
+      # @!endgroup
+
+      # NOTE: this preview uses a group to force it's display below the other groups
+      # @!group With link as tag
+      def with_link_as_tag
+        render(Yattho::Alpha::SegmentedControl.new) do |component|
+          component.with_item(tag: :a, href: "#", label: "Preview", icon: :eye, selected: true)
+          component.with_item(tag: :a, href: "#", label: "Raw", icon: :"file-code")
+          component.with_item(tag: :a, href: "#", label: "Blame", icon: :people)
+        end
+      end
+      # @!endgroup
+    end
+  end
+end

data/previews/yattho/alpha/tab_nav_preview.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Alpha
+    # @label TabNav
+    class TabNavPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param number_of_tabs [Integer] number
+      # @param with_icons [Boolean] toggle
+      # @param with_counters [Boolean] toggle
+      def playground(number_of_tabs: 3, with_icons: false, with_counters: false)
+        render(Yattho::Alpha::TabNav.new(label: "label")) do |component|
+          Array.new(number_of_tabs || 3) do |i|
+            component.with_tab(selected: i.zero?, href: "##{i + 1}") do |tab|
+              tab.with_icon(icon: :star) if with_icons
+              tab.with_text { "Tab #{i + 1}" }
+              tab.with_counter(count: 10) if with_counters
+            end
+          end
+        end
+      end
+
+      # @label Default
+      def default
+        render(Yattho::Alpha::TabNav.new(label: "Default")) do |component|
+          component.with_tab(selected: true, href: "#") { "Tab 1" }
+          component.with_tab(href: "#") { "Tab 2" }
+          component.with_tab(href: "#") { "Tab 3" }
+        end
+      end
+
+      # @label With icons and counters
+      def with_icons_and_counters
+        render(Yattho::Alpha::TabNav.new(label: "With icons and counters")) do |component|
+          component.with_tab(href: "#1", selected: true) do |tab|
+            tab.with_icon(icon: :star)
+            tab.with_text { "Stars" }
+            tab.with_counter(count: 10)
+          end
+          component.with_tab(href: "#2") do |tab|
+            tab.with_icon(icon: :heart)
+            tab.with_text { "Sponsors" }
+            tab.with_counter(count: 14)
+          end
+          component.with_tab(href: "#3") do |tab|
+            tab.with_icon(icon: :bookmark)
+            tab.with_text { "Bookmarks" }
+            tab.with_counter(count: 7)
+          end
+        end
+      end
+    end
+  end
+end

data/previews/yattho/alpha/tab_panels_preview.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Alpha
+    # @label TabPanels
+    class TabPanelsPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param number_of_panels [Integer] number
+      # @param align [Symbol] select [left, right]
+      def playground(number_of_panels: 3, align: :left)
+        render(Yattho::Alpha::TabPanels.new(label: "label", align: align)) do |component|
+          Array.new(number_of_panels || 3) do |i|
+            component.with_tab(selected: i.zero?, id: "tab-#{i + 1}") do |tab|
+              tab.with_panel { "Panel #{i + 1}" }
+              tab.with_text { "Tab #{i + 1}" }
+            end
+          end
+        end
+      end
+
+      # @label Default options
+      #
+      # @param number_of_panels [Integer] number
+      # @param align [Symbol] select [left, right]
+      def default(number_of_panels: 3, align: :left)
+        render(Yattho::Alpha::TabPanels.new(label: "label", align: align)) do |component|
+          Array.new(number_of_panels || 3) do |i|
+            component.with_tab(selected: i.zero?, id: "tab-#{i + 1}") do |tab|
+              tab.with_panel { "Panel #{i + 1}" }
+              tab.with_text { "Tab #{i + 1}" }
+            end
+          end
+        end
+      end
+    end
+  end
+end