yattho_view_components 0.0.1

data/app/components/yattho/alpha/dropdown.rb

@@ -0,0 +1,154 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Alpha
+    # `Dropdown` is a lightweight context menu for housing navigation and actions.
+    # They're great for instances where you don't need the full power (and code) of the SelectMenu.
+    class Dropdown < Yattho::Component
+      status :alpha
+
+      # Required trigger for the dropdown. Has the same arguments as <%= link_to_component(Yattho::ButtonComponent) %>,
+      # but it is locked as a `summary` tag.
+      renders_one :button, lambda { |**system_arguments|
+        @button_arguments = system_arguments
+        @button_arguments[:button] = true
+        @button_arguments[:dropdown] = @with_caret
+
+        Yattho::Content.new
+      }
+
+      # Required context menu for the dropdown.
+      #
+      # @param as [Symbol] When `as` is `:list`, wraps the menu in a `<ul>` with a `<li>` for each item.
+      # @param direction [Symbol] <%= one_of(Yattho::Alpha::Dropdown::Menu::DIRECTION_OPTIONS) %>
+      # @param scheme [Symbol] Pass `:dark` for dark mode theming
+      # @param header [String] Optional string to display as the header
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :menu, "Yattho::Alpha::Dropdown::Menu"
+
+      # @example Default
+      #   <%= render(Yattho::Alpha::Dropdown.new) do |component| %>
+      #     <% component.with_button do %>
+      #       Dropdown
+      #     <% end %>
+      #
+      #     <% component.with_menu(header: "Options") do |menu|
+      #       menu.with_item { "Item 1" }
+      #       menu.with_item { "Item 2" }
+      #       menu.with_item { "Item 3" }
+      #     end %>
+      #   <% end %>
+      #
+      # @example With dividers
+      #
+      #   @description
+      #     Dividers can be used to separate a group of items. They don't have any content.
+      #   @code
+      #     <%= render(Yattho::Alpha::Dropdown.new) do |component| %>
+      #       <% component.with_button do %>
+      #         Dropdown
+      #       <% end %>
+      #
+      #       <% component.with_menu(header: "Options") do |menu|
+      #         menu.with_item { "Item 1" }
+      #         menu.with_item { "Item 2" }
+      #         menu.with_item(divider: true)
+      #         menu.with_item { "Item 3" }
+      #         menu.with_item { "Item 4" }
+      #         menu.with_item(divider: true)
+      #         menu.with_item { "Item 5" }
+      #         menu.with_item { "Item 6" }
+      #       end %>
+      #     <% end %>
+      #
+      # @example With direction
+      #   <%= render(Yattho::Alpha::Dropdown.new(display: :inline_block)) do |component| %>
+      #     <% component.with_button do %>
+      #       Dropdown
+      #     <% end %>
+      #
+      #     <% component.with_menu(header: "Options", direction: :s) do |menu|
+      #       menu.with_item { "Item 1" }
+      #       menu.with_item { "Item 2" }
+      #       menu.with_item { "Item 3" }
+      #       menu.with_item { "Item 4" }
+      #     end %>
+      #   <% end %>
+      #
+      # @example With caret
+      #   <%= render(Yattho::Alpha::Dropdown.new(with_caret: true)) do |component| %>
+      #     <% component.with_button do %>
+      #       Dropdown
+      #     <% end %>
+      #
+      #     <% component.with_menu(header: "Options") do |menu|
+      #       menu.with_item { "Item 1" }
+      #       menu.with_item { "Item 2" }
+      #       menu.with_item { "Item 3" }
+      #       menu.with_item { "Item 4" }
+      #     end %>
+      #   <% end %>
+      #
+      # @example Customizing the button
+      #   <%= render(Yattho::Alpha::Dropdown.new) do |component| %>
+      #     <% component.with_button(scheme: :primary, size: :small) do %>
+      #       Dropdown
+      #     <% end %>
+      #
+      #     <% component.with_menu(header: "Options") do |menu|
+      #       menu.with_item { "Item 1" }
+      #       menu.with_item { "Item 2" }
+      #       menu.with_item { "Item 3" }
+      #       menu.with_item { "Item 4" }
+      #     end %>
+      #   <% end %>
+      #
+      # @example Menu as list
+      #   <%= render(Yattho::Alpha::Dropdown.new) do |component| %>
+      #     <% component.with_button do %>
+      #       Dropdown
+      #     <% end %>
+      #
+      #     <% component.with_menu(as: :list, header: "Options") do |menu|
+      #       menu.with_item { "Item 1" }
+      #       menu.with_item { "Item 2" }
+      #       menu.with_item(divider: true)
+      #       menu.with_item { "Item 3" }
+      #       menu.with_item { "Item 4" }
+      #     end %>
+      #   <% end %>
+      #
+      # @example Customizing menu items
+      #   <%= render(Yattho::Alpha::Dropdown.new) do |component| %>
+      #     <% component.with_button do %>
+      #       Dropdown
+      #     <% end %>
+      #
+      #     <% component.with_menu(header: "Options") do |menu|
+      #       menu.with_item(tag: :button) { "Item 1" }
+      #       menu.with_item(classes: "custom-class") { "Item 2" }
+      #       menu.with_item { "Item 3" }
+      #     end %>
+      #   <% end %>
+      #
+      # @param overlay [Symbol] <%= one_of(Yattho::Beta::Details::OVERLAY_MAPPINGS.keys) %>
+      # @param with_caret [Boolean] Whether or not a caret should be rendered in the button.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(overlay: :default, with_caret: false, **system_arguments)
+        @with_caret = with_caret
+
+        @system_arguments = system_arguments
+        @system_arguments[:overlay] = overlay
+        @system_arguments[:reset] = true
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "dropdown"
+        )
+      end
+
+      def render?
+        button? && menu?
+      end
+    end
+  end
+end

data/app/components/yattho/alpha/dropdown.ts

@@ -0,0 +1 @@
+import './dropdown/menu'

data/app/components/yattho/alpha/hellip_button.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Alpha
+    # Use `HellipButton` to render a button with a hellip. Often used for hidden text expanders.
+    # @accessibility
+    #   Always set an accessible label to help the user interact with the component.
+    #
+    #   * This button is displaying a hellip as its content (The three dots character). Therefore a label is needed for screen readers.
+    #   * Set the attribute `aria-label` on the system arguments. E.g. `Yattho::Alpha::HellipButton.new("aria-label": "Expand next part")`
+    class HellipButton < Yattho::Component
+      # @example Default
+      #   <%= render(Yattho::Alpha::HellipButton.new("aria-label": "No effect")) %>
+      #
+      # @example Inline
+      #   <%= render(Yattho::Alpha::HellipButton.new(inline: true, "aria-label": "No effect")) %>
+      #
+      # @example Styling the button
+      #   <%= render(Yattho::Alpha::HellipButton.new(p: 1, classes: "custom-class", "aria-label": "No effect")) %>
+      #
+      # @param inline [Boolean] Whether or not the button is inline.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(inline: false, **system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+
+        validate_aria_label
+
+        @system_arguments[:tag] = :button
+        @system_arguments[:'aria-expanded'] = false
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "inline" => inline
+        )
+      end
+
+      def call
+        render(Yattho::Beta::BaseButton.new(**@system_arguments)) { "&hellip;".html_safe }
+      end
+    end
+  end
+end

data/app/components/yattho/alpha/hidden_text_expander.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Alpha
+    # Use `HiddenTextExpander` to indicate and toggle hidden text.
+    #
+    # @accessibility
+    #   `HiddenTextExpander` requires an `aria-label`, which will provide assistive technologies with an accessible label.
+    #   The `aria-label` should describe the action to be invoked by the `HiddenTextExpander`. For instance,
+    #   if your `HiddenTextExpander` expands a list of 5 comments, the `aria-label` should be
+    #   `"Expand 5 more comments"` instead of `"More"`.
+    class HiddenTextExpander < Yattho::Component
+      status :alpha
+
+      # @example Default
+      #   <%= render(Yattho::Alpha::HiddenTextExpander.new("aria-label": "No effect")) %>
+      #
+      # @example Inline
+      #   <%= render(Yattho::Alpha::HiddenTextExpander.new(inline: true, "aria-label": "No effect")) %>
+      #
+      # @example Styling the button
+      #   <%= render(Yattho::Alpha::HiddenTextExpander.new("aria-label": "No effect", button_arguments: { p: 1, classes: "custom-class" })) %>
+      #
+      # @param inline [Boolean] Whether or not the expander is inline.
+      # @param button_arguments [Hash] <%= link_to_system_arguments_docs %> for the button element.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(inline: false, button_arguments: {}, **system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @button_arguments = button_arguments
+
+        @system_arguments[:tag] = :span
+        @system_arguments[:classes] = class_names(
+          "hidden-text-expander",
+          @system_arguments[:classes],
+          "inline" => inline
+        )
+
+        aria_label = system_arguments[:'aria-label'] || system_arguments.dig(:aria, :label) || @aria_label
+        if aria_label.present?
+          @button_arguments[:'aria-label'] = aria_label
+          @system_arguments[:aria]&.delete(:label)
+        end
+
+        @button_arguments[:classes] = class_names(
+          "ellipsis-expander",
+          button_arguments[:classes]
+        )
+      end
+
+      def call
+        render(Yattho::BaseComponent.new(**@system_arguments)) do
+          render(Yattho::Alpha::HellipButton.new(**@button_arguments))
+        end
+      end
+    end
+  end
+end

data/app/components/yattho/alpha/image.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Alpha
+    # Use `Image` to render images.
+    #
+    # @accessibility
+    #   Always provide a meaningful `alt`.
+    class Image < Yattho::Component
+      status :alpha
+
+      # @example Default
+      #
+      #   <%= render(Yattho::Alpha::Image.new(src: Yattho::ExampleImage::BASE64_SRC, alt: "GitHub")) %>
+      #
+      # @example Helper
+      #
+      #   <%= yattho_image(src: Yattho::ExampleImage::BASE64_SRC, alt: "GitHub") %>
+      #
+      # @example Lazy loading
+      #
+      #   <%= render(Yattho::Alpha::Image.new(src: Yattho::ExampleImage::BASE64_SRC, alt: "GitHub", lazy: true)) %>
+      #
+      # @example Custom size
+      #
+      #   <%= render(Yattho::Alpha::Image.new(src: Yattho::ExampleImage::BASE64_SRC, alt: "GitHub", height: 100, width: 100)) %>
+      #
+      # @param src [String] The source url of the image.
+      # @param alt [String] Specifies an alternate text for the image.
+      # @param lazy [Boolean] Whether or not to lazily load the image.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(src:, alt:, lazy: false, **system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+
+        @src = src
+        @system_arguments[:tag] = :img
+        @system_arguments[:alt] = alt
+
+        return unless lazy
+
+        @system_arguments[:loading] = :lazy
+        @system_arguments[:decoding] = :async
+      end
+
+      def call
+        render(Yattho::BaseComponent.new(src: image_path(@src), **@system_arguments))
+      end
+    end
+  end
+end

data/app/components/yattho/alpha/image_crop.d.ts

@@ -0,0 +1 @@
+import '@github/image-crop-element';

data/app/components/yattho/alpha/image_crop.html.erb

@@ -0,0 +1,12 @@
+<%= render Yattho::BaseComponent.new(**@system_arguments) do %>
+  <% if loading.present? %>
+    <%= loading %>
+  <% else %>
+    <%= render(Yattho::Beta::Spinner.new(size: :large, flex: 1, "data-loading-slot": true)) %>
+  <% end %>
+
+  <input autocomplete="off" type="hidden" data-image-crop-input="x" name="cropped_x">
+  <input autocomplete="off" type="hidden" data-image-crop-input="y" name="cropped_y">
+  <input autocomplete="off" type="hidden" data-image-crop-input="width" name="cropped_width">
+  <input autocomplete="off" type="hidden" data-image-crop-input="height" name="cropped_height">
+<% end %>

data/app/components/yattho/alpha/image_crop.js

@@ -0,0 +1 @@
+import '@github/image-crop-element';

data/app/components/yattho/alpha/image_crop.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Alpha
+    # A client-side mechanism to crop images.
+    class ImageCrop < Yattho::Component
+      # A loading indicator that is shown while the image is loading.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :loading, lambda { |**system_arguments|
+        deny_tag_argument(**system_arguments)
+        system_arguments[:tag] = :div
+        system_arguments[:'data-loading-slot'] = true
+
+        Yattho::BaseComponent.new(**system_arguments)
+      }
+
+      # @example Simple cropper
+      #   <%= render(Yattho::Alpha::ImageCrop.new(src: Yattho::ExampleImage::BASE64_SRC)) %>
+      #
+      # @example Square cropper
+      #   <%= render(Yattho::Alpha::ImageCrop.new(src: Yattho::ExampleImage::BASE64_SRC, rounded: false)) %>
+      #
+      # @example Cropper with a custom loader
+      #   <%= render(Yattho::Alpha::ImageCrop.new(src: Yattho::ExampleImage::BASE64_SRC, rounded: false)) do |cropper| %>
+      #     <% cropper.with_loading(style: "width: 120px").with_content("Loading...") %>
+      #   <% end %>
+      #
+      # @param src [String] The path of the image to crop.
+      # @param rounded [Boolean] If the crop mask should be a circle. Defaults to true.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(src:, rounded: true, **system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = "image-crop"
+        @system_arguments[:src] = src
+        @system_arguments[:rounded] = true if rounded
+      end
+    end
+  end
+end

data/app/components/yattho/alpha/image_crop.ts

@@ -0,0 +1 @@
+import '@github/image-crop-element'