yattho_view_components 0.0.1

data/previews/yattho/beta/spinner_preview.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Beta
+    # @label Spinner
+    class SpinnerPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param size [Symbol] select [small, medium, large]
+      def playground(size: :medium)
+        render(Yattho::Beta::Spinner.new(size: size))
+      end
+
+      # @label Default Options
+      #
+      # @param size [Symbol] select [small, medium, large]
+      def default(size: :medium)
+        render(Yattho::Beta::Spinner.new(size: size))
+      end
+    end
+  end
+end

data/previews/yattho/beta/state_preview.rb

@@ -0,0 +1,66 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Beta
+    # @label State
+    class StatePreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param title [String]
+      # @param tag [Symbol] select [span, div]
+      # @param size [Symbol] select [default, small]
+      # @param scheme [Symbol] select [default, open, closed, merged]
+      def playground(title: "State", scheme: :default, size: :default, tag: :span)
+        render(Yattho::Beta::State.new(title: title, scheme: scheme, size: size, tag: tag)) { "State" }
+      end
+
+      # @label Default
+      #
+      # @param title [String]
+      # @param tag [Symbol] select [span, div]
+      # @param size [Symbol] select [default, small]
+      # @param scheme [Symbol] select [default, open, closed, merged]
+      def default(title: "State", scheme: :default, size: :default, tag: :span)
+        render(Yattho::Beta::State.new(title: title, scheme: scheme, size: size, tag: tag)) { "State" }
+      end
+
+      # @!group States
+      #
+      # @label Default
+      def states_default
+        render(Yattho::Beta::State.new(title: "Default")) { "Default state" }
+      end
+
+      # @label Open
+      def states_open
+        render(Yattho::Beta::State.new(title: "Open", scheme: :open)) { "Open state" }
+      end
+
+      # @label Closed
+      def states_closed
+        render(Yattho::Beta::State.new(title: "Closed", scheme: :closed)) { "Closed state" }
+      end
+
+      # @label Merged
+      def states_merged
+        render(Yattho::Beta::State.new(title: "Merged", scheme: :merged)) { "Merged state" }
+      end
+      #
+      # @!endgroup
+
+      # @!group Sizes
+      #
+      # @label Default
+      def sizes_default
+        render(Yattho::Beta::State.new(title: "Default")) { "Default size" }
+      end
+
+      # @label Small
+      def sizes_small
+        render(Yattho::Beta::State.new(title: "Default", size: :small)) { "Small size" }
+      end
+      #
+      # @!endgroup
+    end
+  end
+end

data/previews/yattho/beta/subhead_preview/actions.html.erb

@@ -0,0 +1,13 @@
+<%= render(Yattho::Beta::Subhead.new) do |component| %>
+  <% component.with_heading do %>
+    A Heading
+  <% end %>
+  <% component.with_description do %>
+    A description with actions
+  <% end %>
+  <% component.with_actions do %>
+    <% render(Yattho::Beta::Button.new(scheme: :primary)) do %>
+      An action
+    <% end %>
+  <% end %>
+<% end %>

data/previews/yattho/beta/subhead_preview.rb

@@ -0,0 +1,99 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Beta
+    # @label Subhead
+    class SubheadPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param spacious [Boolean]
+      # @param hide_border [Boolean]
+      # @param heading_danger [Boolean]
+      # @param heading_tag [Symbol] select [div, h1, h2, h3, h4, h5, h6]
+      def playground(spacious: false, hide_border: false, heading_tag: :div, heading_danger: false)
+        render(Yattho::Beta::Subhead.new(spacious: spacious, hide_border: hide_border)) do |component|
+          component.with_heading(tag: heading_tag, danger: heading_danger) do
+            "My Heading"
+          end
+          component.with_description do
+            "My Description"
+          end
+        end
+      end
+
+      # @label Default Options
+      #
+      # @param spacious [Boolean]
+      # @param hide_border [Boolean]
+      # @param heading_danger [Boolean]
+      # @param heading_tag [Symbol] select [div, h1, h2, h3, h4, h5, h6]
+      def default(spacious: false, hide_border: false, heading_tag: :div, heading_danger: false)
+        render(Yattho::Beta::Subhead.new(spacious: spacious, hide_border: hide_border)) do |component|
+          component.with_heading(tag: heading_tag, danger: heading_danger) do
+            "My Heading"
+          end
+          component.with_description do
+            "My Description"
+          end
+        end
+      end
+
+      # @label Danger
+      def danger
+        render(Yattho::Beta::Subhead.new) do |component|
+          component.with_heading(danger: true) do
+            "Danger Heading"
+          end
+          component.with_description do
+            "A description of the 'danger'"
+          end
+        end
+      end
+
+      # @label Actions
+      def actions
+        render_with_template(locals: {})
+      end
+
+      # @!group Spacing
+      #
+      # @label Default
+      def spacing_default
+        render(Yattho::Beta::Subhead.new(spacious: false)) do |component|
+          component.with_heading do
+            "Default Spacing"
+          end
+          component.with_description do
+            "Default spacing above the component"
+          end
+        end
+      end
+
+      # @label Spacious
+      def spacing_spacious
+        render(Yattho::Beta::Subhead.new(spacious: true)) do |component|
+          component.with_heading do
+            "Spacious"
+          end
+          component.with_description do
+            "With extra space above the component"
+          end
+        end
+      end
+
+      # @label Spacious w/ Danger Heading
+      def spacing_dangerous
+        render(Yattho::Beta::Subhead.new(spacious: true)) do |component|
+          component.with_heading(danger: true) do
+            "Danger Heading"
+          end
+          component.with_description do
+            "With extra space above the component, and a 'danger' heading"
+          end
+        end
+      end
+      #
+      # @!endgroup
+    end
+  end
+end

data/previews/yattho/beta/text_preview.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Beta
+    # @label Text
+    class TextPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param tag [Symbol] select [div, p, span]
+      # @param content [String] text
+      def playground(tag: :span, content: "Text")
+        render(Yattho::Beta::Text.new(tag: tag)) { content }
+      end
+
+      # @label Default options
+      #
+      # @param tag [Symbol] select [div, p, span]
+      # @param content [String] text
+      def default(tag: :span, content: "Text")
+        render(Yattho::Beta::Text.new(tag: tag)) { content }
+      end
+    end
+  end
+end

data/previews/yattho/beta/timeline_item_preview.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Beta
+    # @label TimelineItem
+    class TimelineItemPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param condensed [Boolean]
+      def playground(condensed: false)
+        render(Yattho::Beta::TimelineItem.new(condensed: condensed)) do |component|
+          component.with_avatar(src: Yattho::ExampleImage::BASE64_SRC, alt: "octocat")
+          component.with_badge(bg: :success_emphasis, color: :on_emphasis, icon: :check)
+          component.with_body { "Success!" }
+        end
+      end
+
+      # @label Default
+      #
+      # @param condensed [Boolean]
+      def default(condensed: false)
+        render(Yattho::Beta::TimelineItem.new(condensed: condensed)) do |component|
+          component.with_avatar(src: Yattho::ExampleImage::BASE64_SRC, alt: "octocat")
+          component.with_badge(bg: :success_emphasis, color: :on_emphasis, icon: :check)
+          component.with_body { "Success!" }
+        end
+      end
+    end
+  end
+end

data/previews/yattho/beta/truncate_preview.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Beta
+    # @label Truncate
+    class TruncatePreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param text [String] text
+      def playground(text: "branch-name-that-is-really-long")
+        render(Yattho::Beta::Truncate.new) { text }
+      end
+
+      # @label Default options
+      #
+      # @param text [String] text
+      def default(text: "branch-name-that-is-really-long")
+        render(Yattho::Beta::Truncate.new) { text }
+      end
+
+      # @label Multiple items
+      def multiple_items
+        render(Yattho::Beta::Truncate.new) do |component|
+          component.with_item do
+            "really-long-repository-owner-name"
+          end
+          component.with_item(font_weight: :bold) do
+            "really-long-repository-name"
+          end
+        end
+      end
+
+      # @label Advanced multiple items
+      def advanced_multiple_items
+        render(Yattho::Beta::Truncate.new(tag: :ol)) do |component|
+          component.with_item(tag: :li) { "yattho" }
+          component.with_item(tag: :li, priority: true) { "/ css" }
+          component.with_item(tag: :li) { "/ Issues" }
+          component.with_item(tag: :li) { "/ #123" }
+          component.with_item(tag: :li, priority: true) { "Visual bug on yattho.com found in lists" }
+        end
+      end
+
+      # @label Max widths
+      def max_widths
+        render(Yattho::Beta::Truncate.new) do |component|
+          component.with_item(max_width: 300) { "branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long" }
+          component.with_item(max_width: 200) { "branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long" }
+          component.with_item(max_width: 100) { "branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long" }
+        end
+      end
+    end
+  end
+end

data/previews/yattho/forms/forms_preview/after_content_form.html.erb

@@ -0,0 +1,3 @@
+<%= yattho_form_with(url: "/foo") do |f| %>
+  <%= render(AfterContentForm.new(f)) %>
+<% end %>

data/previews/yattho/forms/forms_preview/array_check_box_group_form.html.erb

@@ -0,0 +1,3 @@
+<%= yattho_form_with(url: "/foo") do |f| %>
+  <%= render(ArrayCheckBoxGroupForm.new(f)) %>
+<% end %>

data/previews/yattho/forms/forms_preview/caption_template_form.html.erb

@@ -0,0 +1,3 @@
+<%= yattho_form_with(url: "/foo") do |f| %>
+  <%= render(CaptionTemplateForm.new(f)) %>
+<% end %>

data/previews/yattho/forms/forms_preview/check_box_group_form.html.erb

@@ -0,0 +1,3 @@
+<%= yattho_form_with(url: "/foo") do |f| %>
+  <%= render(CheckBoxGroupForm.new(f)) %>
+<% end %>

data/previews/yattho/forms/forms_preview/check_box_with_nested_form.html.erb

@@ -0,0 +1,3 @@
+<%= yattho_form_with(url: "/foo") do |f| %>
+  <%= render(CheckBoxWithNestedForm.new(f)) %>
+<% end %>

data/previews/yattho/forms/forms_preview/composed_form.html.erb

@@ -0,0 +1,4 @@
+<p>Each of these fields comes from its own form definition.</p>
+<%= yattho_form_with(url: "/foo") do |f| %>
+  <%= render(ComposedForm.new(f)) %>
+<% end %>

data/previews/yattho/forms/forms_preview/example_toggle_switch_form.html.erb

@@ -0,0 +1,3 @@
+<%= render(ExampleToggleSwitchForm.new(csrf: "let_me_in", src: toggle_switch_index_path, id: "success-toggle")) %>
+<hr>
+<%= render(ExampleToggleSwitchForm.new(csrf: "a_bad_value", src: toggle_switch_index_path, id: "error-toggle")) %>

data/previews/yattho/forms/forms_preview/horizontal_form.html.erb

@@ -0,0 +1,3 @@
+<%= yattho_form_with(url: "/foo") do |f| %>
+  <%= render(HorizontalForm.new(f)) %>
+<% end %>

data/previews/yattho/forms/forms_preview/immediate_validation_form.html.erb

@@ -0,0 +1,3 @@
+<%= yattho_form_with(url: "/foo") do |f| %>
+  <%= render(ImmediateValidationForm.new(f)) %>
+<% end %>

data/previews/yattho/forms/forms_preview/invalid_form.html.erb

@@ -0,0 +1,3 @@
+<%= yattho_form_with(url: "/foo") do |f| %>
+  <%= render(InvalidForm.new(f)) %>
+<% end %>

data/previews/yattho/forms/forms_preview/multi_input_form.html.erb

@@ -0,0 +1,14 @@
+<script type="text/javascript">
+  window.addEventListener('load', function () {
+    document.querySelector('input#country_us').onclick = function() {
+      document.querySelector('yattho-multi-input').activateField('states');
+    };
+
+    document.querySelector('input#country_ca').onclick = function() {
+      document.querySelector('yattho-multi-input').activateField('provinces');
+    };
+  }, false);
+</script>
+<%= yattho_form_with(url: multi_index_path(format: :json)) do |f| %>
+  <%= render(MultiInputForm.new(f)) %>
+<% end %>

data/previews/yattho/forms/forms_preview/multi_text_field_form.html.erb

@@ -0,0 +1,3 @@
+<%= yattho_form_with(url: "/foo") do |f| %>
+  <%= render(MultiTextFieldForm.new(f)) %>
+<% end %>

data/previews/yattho/forms/forms_preview/name_with_question_mark_form.html.erb

@@ -0,0 +1,3 @@
+<%= yattho_form_with(url: "/foo") do |f| %>
+  <%= render(NameWithQuestionMarkForm.new(f)) %>
+<% end %>

data/previews/yattho/forms/forms_preview/radio_button_group_form.html.erb

@@ -0,0 +1,3 @@
+<%= yattho_form_with(url: "/foo") do |f| %>
+  <%= render(RadioButtonGroupForm.new(f)) %>
+<% end %>

data/previews/yattho/forms/forms_preview/radio_button_with_nested_form.html.erb

@@ -0,0 +1,3 @@
+<%= yattho_form_with(url: "/foo") do |f| %>
+  <%= render(RadioButtonWithNestedForm.new(f)) %>
+<% end %>

data/previews/yattho/forms/forms_preview/select_list_form.html.erb

@@ -0,0 +1,3 @@
+<%= yattho_form_with(url: "/foo") do |f| %>
+  <%= render(SelectListForm.new(f)) %>
+<% end %>

data/previews/yattho/forms/forms_preview/single_text_field_form.html.erb

@@ -0,0 +1,3 @@
+<%= yattho_form_with(url: "/foo") do |f| %>
+  <%= render(SingleTextFieldForm.new(f)) %>
+<% end %>

data/previews/yattho/forms/forms_preview/submit_button_form.html.erb

@@ -0,0 +1,3 @@
+<%= yattho_form_with(url: "/foo") do |f| %>
+  <%= render(SubmitButtonForm.new(f)) %>
+<% end %>

data/previews/yattho/forms/forms_preview/text_field_and_checkbox_form.html.erb

@@ -0,0 +1,3 @@
+<%= yattho_form_with(url: "/foo") do |f| %>
+  <%= render(TextFieldAndCheckboxForm.new(f)) %>
+<% end %>

data/previews/yattho/forms/forms_preview.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Forms
+    # :nodoc:
+    class FormsPreview < ViewComponent::Preview
+      def single_text_field_form; end
+
+      def multi_text_field_form; end
+
+      def text_field_and_checkbox_form; end
+
+      def horizontal_form; end
+
+      def composed_form; end
+
+      def submit_button_form; end
+
+      def radio_button_group_form; end
+
+      def check_box_group_form; end
+
+      def array_check_box_group_form; end
+
+      def select_list_form; end
+
+      def radio_button_with_nested_form; end
+
+      def check_box_with_nested_form; end
+
+      def caption_template_form; end
+
+      def after_content_form; end
+
+      def invalid_form; end
+
+      def multi_input_form; end
+
+      def name_with_question_mark_form; end
+
+      def immediate_validation_form; end
+
+      def example_toggle_switch_form; end
+    end
+  end
+end

data/previews/yattho/layout_component_preview.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Yattho
+  # @label LayoutComponent
+  class LayoutComponentPreview < ViewComponent::Preview
+    # @label Playground
+    #
+    # @param responsive [Boolean]
+    # @param side [Symbol] select [left, right]
+    # @param sidebar_col [Integer] select [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
+    def playground(responsive: false, side: :right, sidebar_col: 3)
+      render(Yattho::LayoutComponent.new(responsive: responsive, side: side, sidebar_col: sidebar_col)) do |component|
+        component.with_main { "Main" }
+        component.with_sidebar { "Sidebar" }
+      end
+    end
+
+    # @label Default
+    #
+    # @param responsive [Boolean]
+    # @param side [Symbol] select [left, right]
+    # @param sidebar_col [Integer] select [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
+    def default(responsive: false, side: :right, sidebar_col: 3)
+      render(Yattho::LayoutComponent.new(responsive: responsive, side: side, sidebar_col: sidebar_col)) do |component|
+        component.with_main { "Main" }
+        component.with_sidebar { "Sidebar" }
+      end
+    end
+  end
+end

data/previews/yattho/local_time_component_preview.rb

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+# rubocop:disable Yattho/ComponentNameMigration
+
+module Yattho
+  # @label LocalTime
+  class LocalTimeComponentPreview < ViewComponent::Preview
+    # @param datetime datetime-local
+    # @param weekday [Symbol] select [long, short]
+    # @param month [Symbol] select [long, short]
+    # @param year [Symbol] select [numeric, "2-digit"]
+    # @param day [Symbol] select [numeric, "2-digit"]
+    # @param hour [Symbol] select [numeric, "2-digit"]
+    # @param minute [Symbol] select [numeric, "2-digit"]
+    # @param second [Symbol] select [numeric, "2-digit"]
+    # @param time_zone_name [Symbol] select [long, short]
+    def playground(datetime: "2014-04-01T16:30:00-08:00", weekday: :short, month: :short, year: :numeric,
+                   day: :numeric, hour: :numeric, minute: :numeric, second: :numeric, time_zone_name: :short)
+      render(Yattho::LocalTime.new(datetime: DateTime.parse(datetime), weekday: weekday, month: month, year: year,
+                                   day: day, hour: hour, minute: minute, second: second, time_zone_name: time_zone_name))
+    end
+
+    # @param datetime datetime-local
+    # @param weekday [Symbol] select [long, short]
+    # @param month [Symbol] select [long, short]
+    # @param year [Symbol] select [numeric, "2-digit"]
+    # @param day [Symbol] select [numeric, "2-digit"]
+    # @param hour [Symbol] select [numeric, "2-digit"]
+    # @param minute [Symbol] select [numeric, "2-digit"]
+    # @param second [Symbol] select [numeric, "2-digit"]
+    # @param time_zone_name [Symbol] select [long, short]
+    def default(datetime: "2014-04-01T16:30:00-08:00", weekday: :short, month: :short, year: :numeric, day: :numeric,
+                hour: :numeric, minute: :numeric, second: :numeric, time_zone_name: :short)
+      render(Yattho::LocalTime.new(datetime: DateTime.parse(datetime), weekday: weekday, month: month, year: year,
+                                   day: day, hour: hour, minute: minute, second: second, time_zone_name: time_zone_name))
+    end
+
+    # @hidden
+    def with_all_the_options
+      render(Yattho::LocalTime.new(
+               datetime: DateTime.parse("2016-06-01T13:05:07Z"),
+               weekday: :long,
+               year: :'2-digit',
+               month: :long,
+               day: :'2-digit',
+               hour: :'2-digit',
+               minute: :'2-digit',
+               second: :'2-digit',
+               time_zone_name: :long
+             ))
+    end
+
+    # @label With replaceable content
+    #
+    # @param initial_text [String] textarea
+    def with_contents(initial_text: "This will be replaced")
+      render Yattho::LocalTime.new(datetime: DateTime.parse("2014-04-01T16:30:00-08:00"), initial_text: initial_text)
+    end
+  end
+end
+# rubocop:enable Yattho/ComponentNameMigration

data/previews/yattho/time_ago_component_preview.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+# rubocop:disable Yattho/ComponentNameMigration
+
+module Yattho
+  # @label TimeAgoComponent
+  class TimeAgoComponentPreview < ViewComponent::Preview
+    # @label Playground
+    #
+    # @param time datetime-local
+    # @param micro [Boolean] toggle
+    def playground(time: Time.zone.now.to_s, micro: false)
+      render(Yattho::TimeAgoComponent.new(time: DateTime.parse(time), micro: micro))
+    end
+
+    # @param time datetime-local
+    # @param micro [Boolean] toggle
+    def default(time: Time.zone.now.to_s, micro: false)
+      render(Yattho::TimeAgoComponent.new(time: DateTime.parse(time), micro: micro))
+    end
+
+    def micro
+      render(Yattho::TimeAgoComponent.new(time: Time.zone.now, micro: true))
+    end
+  end
+end
+# rubocop:enable Yattho/ComponentNameMigration

data/previews/yattho/url_helpers.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Yattho
+  # :nodoc:
+  module URLHelpers
+    class << self
+      # use send to avoid yard warning
+      send :include, Rails.application.routes.url_helpers
+
+      private
+
+      def controller; end
+    end
+  end
+end