yattho_view_components 0.0.1

data/lib/rubocop/cop/yattho/test_selector.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+require "rubocop"
+
+# :nocov:
+module RuboCop
+  module Cop
+    module Yattho
+      # Prefer the `test_selector` argument over manually generating
+      # a `data-test-selector` attribute.
+      #
+      # Bad:
+      #
+      # Yattho::BaseComponent.new(data: { "test-selector": "the-component" })
+      #
+      # Good:
+      #
+      # Yattho::BaseComponent.new(test_selector: "the-component")
+      class TestSelector < BaseCop
+        INVALID_MESSAGE = <<~STR
+          Prefer the `test_selector` argument over manually generating a `data-test-selector` attribute: https://yattho.com/view-components/system-arguments.
+        STR
+
+        def on_send(node)
+          return unless valid_node?(node)
+          return unless node.arguments?
+
+          kwargs = node.arguments.last
+          return unless kwargs.type == :hash
+
+          data_arg = kwargs.pairs.find { |kwarg| kwarg.key.value == :data }
+          return if data_arg.nil?
+          return unless data_arg.value.type == :hash
+
+          hash = data_arg.child_nodes.find { |arg| arg.type == :hash }
+          return unless hash
+
+          test_selector = hash.pairs.find do |pair|
+            pair.key.value == :"test-selector" || pair.key.value == "test-selector"
+          end
+          return unless test_selector
+
+          add_offense(data_arg, message: INVALID_MESSAGE)
+        end
+      end
+    end
+  end
+end

data/lib/rubocop/cop/yattho/yattho_octicon.rb

@@ -0,0 +1,219 @@
+# frozen_string_literal: true
+
+require "rubocop"
+require "yattho/classify/utilities"
+require "yattho/classify/validation"
+
+# :nocov:
+module RuboCop
+  module Cop
+    module Yattho
+      # This cop ensures that components use System Arguments instead of CSS classes.
+      #
+      # bad
+      # octicon(:icon)
+      # octicon("icon")
+      # octicon("icon-with-daashes")
+      # octicon(@ivar)
+      # octicon(condition > "icon" : "other-icon")
+      #
+      # good
+      # yattho_octicon(:icon)
+      # yattho_octicon(:"icon-with-daashes")
+      # yattho_octicon(@ivar)
+      # yattho_octicon(condition > "icon" : "other-icon")
+      class YatthoOcticon < RuboCop::Cop::Cop
+        INVALID_MESSAGE = <<~STR
+          Replace the octicon helper with yattho_octicon. See https://yattho.com/view-components/components/octicon for details.
+        STR
+
+        SIZE_ATTRIBUTES = %w[height width size].freeze
+        STRING_ATTRIBUTES = %w[aria- data-].freeze
+        REST_ATTRIBUTES = %w[title].freeze
+        VALID_ATTRIBUTES = [*SIZE_ATTRIBUTES, *STRING_ATTRIBUTES, *REST_ATTRIBUTES, "class"].freeze
+
+        STRING_ATTRIBUTE_REGEX = Regexp.union(STRING_ATTRIBUTES).freeze
+        ATTRIBUTE_REGEX = Regexp.union(VALID_ATTRIBUTES).freeze
+        INVALID_ATTRIBUTE = -1
+
+        def on_send(node)
+          return unless node.method_name == :octicon
+          return unless node.arguments?
+
+          kwargs = kwargs(node)
+
+          return unless kwargs.type == :hash
+
+          attributes = kwargs.keys.map(&:value)
+
+          # Don't convert unknown attributes
+          return unless attributes.all? { |attribute| attribute.match?(ATTRIBUTE_REGEX) }
+          # Can't convert size
+          return if octicon_size_attributes(kwargs) == INVALID_ATTRIBUTE
+
+          # find class pair
+          classes = classes(kwargs)
+
+          return if classes == INVALID_ATTRIBUTE
+
+          # check if classes are convertible
+          if classes.present?
+            system_arguments = ::Yattho::Classify::Utilities.classes_to_hash(classes)
+            invalid_classes = (system_arguments[:classes]&.split(" ") || []).select do |class_name|
+              ::Yattho::Classify::Validation.invalid?(class_name)
+            end
+
+            # Uses system argument that can't be converted
+            return if invalid_classes.present?
+          end
+
+          add_offense(node, message: INVALID_MESSAGE)
+        end
+
+        def autocorrect(node)
+          lambda do |corrector|
+            kwargs = kwargs(node)
+
+            # Converting arguments for the component
+            classes = classes(kwargs)
+            size_attributes = transform_sizes(kwargs)
+            rest_attributes = rest_args(kwargs)
+
+            args = arguments_as_string(node, size_attributes, rest_attributes, classes)
+            if node.dot?
+              corrector.replace(node.loc.expression, "#{node.receiver.source}.yattho_octicon(#{args})")
+            else
+              corrector.replace(node.loc.expression, "yattho_octicon(#{args})")
+            end
+          end
+        end
+
+        private
+
+        def transform_sizes(kwargs)
+          attributes = octicon_size_attributes(kwargs)
+
+          attributes.transform_values do |size|
+            if size.between?(10, 16)
+              ""
+            elsif size.between?(22, 26)
+              ":medium"
+            else
+              size
+            end
+          end
+        end
+
+        def rest_args(kwargs)
+          kwargs.pairs.each_with_object({}) do |pair, h|
+            next unless REST_ATTRIBUTES.include?(pair.key.value.to_s)
+
+            h[pair.key.value] = pair.value.source
+          end
+        end
+
+        def octicon_size_attributes(kwargs)
+          kwargs.pairs.each_with_object({}) do |pair, h|
+            next unless SIZE_ATTRIBUTES.include?(pair.key.value.to_s)
+
+            # We only support string or int values.
+            case pair.value.type
+            when :int
+              h[pair.key.value] = pair.value.source.to_i
+            when :str
+              h[pair.key.value] = pair.value.value.to_i
+            else
+              return INVALID_ATTRIBUTE
+            end
+          end
+        end
+
+        def classes(kwargs)
+          # find class pair
+          class_arg = kwargs.pairs.find { |kwarg| kwarg.key.value == :class }
+
+          return if class_arg.blank?
+          return INVALID_ATTRIBUTE unless class_arg.value.type == :str
+
+          class_arg.value.value
+        end
+
+        def arguments_as_string(node, size_attributes, rest_attributes, classes)
+          args = icon(node.arguments.first)
+          size_args = size_attributes_to_string(size_attributes)
+          string_args = string_args_to_string(node)
+          rest_args = rest_args_to_string(rest_attributes)
+
+          args = "#{args}, #{size_args}" if size_args.present?
+          args = "#{args}, #{rest_args}" if rest_args.present?
+          args = "#{args}, #{utilities_args(classes)}" if classes.present?
+          args = "#{args}, #{string_args}" if string_args.present?
+
+          args
+        end
+
+        def rest_args_to_string(attrs)
+          return if attrs.blank?
+
+          attrs.map do |key, value|
+            "#{key}: #{value}"
+          end.join(", ")
+        end
+
+        def utilities_args(classes)
+          args = ::Yattho::Classify::Utilities.classes_to_hash(classes)
+
+          color = case args[:color]
+                  when :text_white
+                    :on_emphasis
+                  when Symbol
+                    args[:color].to_s.gsub("text_", "icon_").to_sym
+                  end
+
+          args[:color] = color if color
+
+          ::Yattho::Classify::Utilities.hash_to_args(args)
+        end
+
+        def size_attributes_to_string(size_attributes)
+          # No arguments if they map to the default size
+          return if size_attributes.blank? || size_attributes.values.all?(&:blank?)
+          # Return mapped argument to `size`
+          return "size: :medium" if size_attributes.values.any?(":medium")
+
+          size_attributes.map do |key, value|
+            "#{key}: #{value}"
+          end.join(", ")
+        end
+
+        def string_args_to_string(node)
+          kwargs = kwargs(node)
+
+          args = kwargs.pairs.each_with_object([]) do |pair, acc|
+            next unless pair.key.value.to_s.match?(STRING_ATTRIBUTE_REGEX)
+
+            key =  pair.key.value.to_s == "data-test-selector" ? "test_selector" : "\"#{pair.key.value}\""
+            acc << "#{key}: #{pair.value.source}"
+          end
+
+          args.join(",")
+        end
+
+        def kwargs(node)
+          return node.arguments.last if node.arguments.size > 1
+
+          OpenStruct.new(keys: [], pairs: [], type: :hash)
+        end
+
+        def icon(node)
+          return node.source unless node.type == :str
+          return ":#{node.value}" unless node.value.include?("-")
+
+          # If the icon contains `-` we need to cast the string as a symbol
+          # E.g: `arrow-down` becomes `:"arrow-down"`
+          ":#{node.source}"
+        end
+      end
+    end
+  end
+end

data/lib/rubocop/cop/yattho.rb

@@ -0,0 +1,3 @@
+# frozen_string_literal: true
+
+Dir[File.join(__dir__, "yattho", "*.rb")].sort.each { |file| require file }

data/lib/tasks/custom_utilities.yml

@@ -0,0 +1,310 @@
+:font_size:
+  "00":
+  - f00
+  1:
+  - f1
+  2:
+  - f2
+  3:
+  - f3
+  4:
+  - f4
+  5:
+  - f5
+  6:
+  - f6
+  :small:
+  - text-small
+  :normal:
+  - text-normal
+:top:
+  0:
+  - top-0
+  false:
+  - top-0
+:bottom:
+  0:
+  - bottom-0
+  false:
+  - bottom-0
+:left:
+  0:
+  - left-0
+  false:
+  - left-0
+:right:
+  0:
+  - right-0
+  false:
+  - right-0
+:underline:
+  true:
+  - text-underline
+  false:
+  - no-underline
+:font_family:
+  :mono:
+  - text-mono
+:font_style:
+  :italic:
+  - text-italic
+:text_transform:
+  :uppercase:
+  - text-uppercase
+:text_align:
+  :right:
+  - text-right
+  - text-sm-right
+  - text-md-right
+  - text-lg-right
+  - text-xl-right
+  :left:
+  - text-left
+  - text-sm-left
+  - text-md-left
+  - text-lg-left
+  - text-xl-left
+  :center:
+  - text-center
+  - text-sm-center
+  - text-md-center
+  - text-lg-center
+  - text-xl-center
+:font_weight:
+  :light:
+  - text-light
+  :normal:
+  - text-normal
+  :bold:
+  - text-bold
+  :semibold:
+  - text-semibold
+  :emphasized:
+  - text-emphasized
+:box_shadow:
+  true:
+  - color-shadow-small
+  :small:
+  - color-shadow-small
+  :medium:
+  - color-shadow-medium
+  :large:
+  - color-shadow-large
+  :extra_large:
+  - color-shadow-extra-large
+  :none:
+  - box-shadow-none
+  false:
+  - box-shadow-none
+:border:
+  :left:
+  - border-left
+  :top:
+  - border-top
+  :bottom:
+  - border-bottom
+  :right:
+  - border-right
+  :y:
+  - border-y
+  :x:
+  - border-x
+  true:
+  - border
+  0:
+  - border-0
+  false:
+  - border-0
+  :dashed:
+  - border-dashed
+:border_top:
+  0:
+  - border-top-0
+:border_bottom:
+  0:
+  - border-bottom-0
+:border_left:
+  0:
+  - border-left-0
+:border_right:
+  0:
+  - border-right-0
+:border_radius:
+  0:
+  - rounded-0
+  1:
+  - rounded-1
+  2:
+  - rounded-2
+  3:
+  - rounded-3
+:justify_content:
+  :flex_start:
+  - flex-justify-start
+  - flex-sm-justify-start
+  - flex-md-justify-start
+  - flex-lg-justify-start
+  - flex-xl-justify-start
+  :flex_end:
+  - flex-justify-end
+  - flex-sm-justify-end
+  - flex-md-justify-end
+  - flex-lg-justify-end
+  - flex-xl-justify-end
+  :center:
+  - flex-justify-center
+  - flex-sm-justify-center
+  - flex-md-justify-center
+  - flex-lg-justify-center
+  - flex-xl-justify-center
+  :space_between:
+  - flex-justify-between
+  - flex-sm-justify-between
+  - flex-md-justify-between
+  - flex-lg-justify-between
+  - flex-xl-justify-between
+  :space_around:
+  - flex-justify-around
+  - flex-sm-justify-around
+  - flex-md-justify-around
+  - flex-lg-justify-around
+  - flex-xl-justify-around
+:align_items:
+  :flex_start:
+  - flex-items-start
+  - flex-sm-items-start
+  - flex-md-items-start
+  - flex-lg-items-start
+  - flex-xl-items-start
+  :flex_end:
+  - flex-items-end
+  - flex-sm-items-end
+  - flex-md-items-end
+  - flex-lg-items-end
+  - flex-xl-items-end
+  :center:
+  - flex-items-center
+  - flex-sm-items-center
+  - flex-md-items-center
+  - flex-lg-items-center
+  - flex-xl-items-center
+  :baseline:
+  - flex-items-baseline
+  - flex-sm-items-baseline
+  - flex-md-items-baseline
+  - flex-lg-items-baseline
+  - flex-xl-items-baseline
+  :stretch:
+  - flex-items-stretch
+  - flex-sm-items-stretch
+  - flex-md-items-stretch
+  - flex-lg-items-stretch
+  - flex-xl-items-stretch
+:flex_wrap:
+  :wrap:
+  - flex-wrap
+  - flex-sm-wrap
+  - flex-md-wrap
+  - flex-lg-wrap
+  - flex-xl-wrap
+  :nowrap:
+  - flex-nowrap
+  - flex-sm-nowrap
+  - flex-md-nowrap
+  - flex-lg-nowrap
+  - flex-xl-nowrap
+  :reverse:
+  - flex-wrap-reverse
+  - flex-sm-wrap-reverse
+  - flex-md-wrap-reverse
+  - flex-lg-wrap-reverse
+  - flex-xl-wrap-reverse
+:direction:
+  :column:
+  - flex-column
+  - flex-sm-column
+  - flex-md-column
+  - flex-lg-column
+  - flex-xl-column
+  :column_reverse:
+  - flex-column-reverse
+  - flex-sm-column-reverse
+  - flex-md-column-reverse
+  - flex-lg-column-reverse
+  - flex-xl-column-reverse
+  :row:
+  - flex-row
+  - flex-sm-row
+  - flex-md-row
+  - flex-lg-row
+  - flex-xl-row
+  :row_reverse:
+  - flex-row-reverse
+  - flex-sm-row-reverse
+  - flex-md-row-reverse
+  - flex-lg-row-reverse
+  - flex-xl-row-reverse
+:flex:
+  1:
+  - flex-1
+  - flex-sm-1
+  - flex-md-1
+  - flex-lg-1
+  - flex-xl-1
+  :auto:
+  - flex-auto
+  - flex-sm-auto
+  - flex-md-auto
+  - flex-lg-auto
+  - flex-xl-auto
+:align_self:
+  :auto:
+  - flex-self-auto
+  - flex-sm-self-auto
+  - flex-md-self-auto
+  - flex-lg-self-auto
+  - flex-xl-self-auto
+  :start:
+  - flex-self-start
+  - flex-sm-self-start
+  - flex-md-self-start
+  - flex-lg-self-start
+  - flex-xl-self-start
+  :end:
+  - flex-self-end
+  - flex-sm-self-end
+  - flex-md-self-end
+  - flex-lg-self-end
+  - flex-xl-self-end
+  :center:
+  - flex-self-center
+  - flex-sm-self-center
+  - flex-md-self-center
+  - flex-lg-self-center
+  - flex-xl-self-center
+  :baseline:
+  - flex-self-baseline
+  - flex-sm-self-baseline
+  - flex-md-self-baseline
+  - flex-lg-self-baseline
+  - flex-xl-self-baseline
+  :stretch:
+  - flex-self-stretch
+  - flex-sm-self-stretch
+  - flex-md-self-stretch
+  - flex-lg-self-stretch
+  - flex-xl-self-stretch
+:flex_grow:
+  0:
+  - flex-grow-0
+  - flex-sm-grow-0
+  - flex-md-grow-0
+  - flex-lg-grow-0
+  - flex-xl-grow-0
+:flex_shrink:
+  0:
+  - flex-shrink-0
+  - flex-sm-shrink-0
+  - flex-md-shrink-0
+  - flex-lg-shrink-0
+  - flex-xl-shrink-0