neo_components 0.1.0

data/app/helpers/view_component/button_component.rb

@@ -0,0 +1,180 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module ButtonComponent
+    class ButtonComponent
+      BUTTON_TYPES = %w[solid outline].freeze
+      BUTTON_SIZES = %w[sm md lg].freeze
+      COLOR_SCHEMES = %w[primary secondary danger].freeze
+      ICON_POSITIONS = %w[left right].freeze
+      TOOLTIP_POSITIONS = %w[top left bottom right].freeze
+      DISABLED_CLASS = %w[opacity-50 cursor-not-allowed].freeze
+
+      BUTTON_SIZE_MAPPING = {
+        sm: 'btn-sm',
+        md: 'btn-md',
+        lg: 'btn-lg'
+      }.freeze
+
+      BUTTON_COLOUR_SCHEME_MAPPING = {
+        solid: {
+          primary: 'btn-solid-primary',
+          secondary: 'btn-solid-secondary',
+          danger: 'btn-solid-danger'
+        },
+        outline: {
+          primary: 'btn-outline-primary',
+          secondary: 'btn-outline-secondary',
+          danger: 'btn-outline-danger'
+        }
+      }.freeze
+
+      BUTTON_DISABLED_MAPPING = {
+        solid: {
+          primary: 'btn-solid-primary-disabled',
+          secondary: 'btn-solid-secondary-disabled',
+          danger: 'btn-solid-danger-disabled'
+        },
+        outline: {
+          primary: 'btn-outline-primary-disabled',
+          secondary: 'btn-outline-secondary-disabled',
+          danger: 'btn-outline-danger-disabled'
+        }
+      }.freeze
+
+      ICON_STYLES_MAPPING = {
+        sm: 'btn-icon-sm',
+        md: 'btn-icon-md',
+        lg: 'btn-icon-lg'
+      }.freeze
+
+      BUTTON_TEXT_STYLE_MAPPING = {
+        sm: 'btn-text-sm',
+        md: 'btn-text-md',
+        lg: 'btn-text-lg'
+      }.freeze
+
+      attr_accessor :text, :type, :colorscheme, :size, :icon_name, :icon_position, :tooltip_text, :tooltip_position,
+                    :disabled, :hide_label_in_mobile, :html_options, :color_mapping
+
+      def initialize(text:, type:, colorscheme:, size:, icon_name:, icon_position:, tooltip_text:, tooltip_position:,
+                     disabled:, hide_label_in_mobile:, html_options:)
+        self.text = text
+        self.type = type
+        self.size = size
+        self.colorscheme = colorscheme
+        self.icon_name = icon_name
+        self.icon_position = icon_position
+        self.tooltip_text = tooltip_text
+        self.tooltip_position = tooltip_position
+        self.disabled = disabled
+        self.hide_label_in_mobile = hide_label_in_mobile
+        self.html_options = html_options
+        # validation
+        raise "Incorrect button type: #{type}" unless BUTTON_TYPES.include? type
+        raise "Incorrect button size: #{size}" unless BUTTON_SIZES.include? size
+        raise "Incorrect color scheme: #{colorscheme}" unless COLOR_SCHEMES.include? colorscheme
+        raise "Incorrect icon_position: #{icon_position}" unless ICON_POSITIONS.include? icon_position
+        raise "Incorrect tooltip_position: #{tooltip_position}" unless TOOLTIP_POSITIONS.include? tooltip_position
+
+        self.color_mapping = color_scheme_mapping
+      end
+
+      def base_styles
+        styles = ['btn-base']
+        styles.append('btn-disabled') if disabled
+        styles.join(' ')
+      end
+
+      def color_styles
+        color_mapping
+      end
+
+      def sizing_styles
+        BUTTON_SIZE_MAPPING[size.to_sym]
+      end
+
+      def text_styles
+        size_styles = BUTTON_TEXT_STYLE_MAPPING[size.to_sym]
+        styles = ['btn-text-base']
+        styles.append('hidden md:flex') if hide_label_in_mobile
+        styles.append(size_styles)
+        styles.join(' ')
+      end
+
+      def icon_styles
+        ICON_STYLES_MAPPING[size.to_sym]
+      end
+
+      private
+
+      def color_scheme_mapping
+        if disabled
+          ['btn-disabled', BUTTON_DISABLED_MAPPING[type.to_sym][colorscheme.to_sym]]
+        else
+          BUTTON_COLOUR_SCHEME_MAPPING[type.to_sym][colorscheme.to_sym]
+        end
+      end
+    end
+
+    def button(
+      label: nil,
+      type: 'primary',
+      size: 'md',
+      icon_name: nil,
+      icon_position: 'left',
+      tooltip_text: '',
+      tooltip_position: 'bottom',
+      disabled: false,
+      html_options: {}
+    )
+      render(
+        partial: "view_components/buttons/#{type}",
+        locals: {
+          label:,
+          type:,
+          size:,
+          icon_name:,
+          icon_position:,
+          tooltip_text:,
+          tooltip_position:,
+          disabled:,
+          html_options:
+        }
+      )
+    end
+
+    def button_component(
+      text: '',
+      type: 'solid',
+      size: 'md',
+      colorscheme: 'primary',
+      icon_name: '',
+      icon_position: 'left',
+      tooltip_text: '',
+      tooltip_position: 'bottom',
+      disabled: false,
+      hide_label_in_mobile: false,
+      html_options: {}
+    )
+      button = ButtonComponent.new(
+        text:,
+        type:,
+        size:,
+        colorscheme:,
+        icon_name:,
+        icon_position:,
+        tooltip_text:,
+        tooltip_position:,
+        disabled:,
+        hide_label_in_mobile:,
+        html_options:
+      )
+
+      render(
+        partial: 'view_components/button_component/button',
+        locals: { button: }
+      )
+    end
+  end
+end

data/app/helpers/view_component/chip_component.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module ChipComponent
+    COLOR_SCHEMES = {
+      'primary' => %w[
+        bg-primary-light-100
+        text-primary-dark
+        text-primary
+        text-primary
+        border-0
+      ],
+      'primary_lite' => %w[
+        bg-primary-light-50
+        text-primary-dark
+        text-primary
+        text-primary
+        border-0
+      ],
+      'danger' => %w[
+        bg-danger-light
+        text-primary-dark
+        text-danger-dark
+        text-danger-dark
+        border-0
+      ],
+      'input' => %w[
+        bg-primary-light-50
+        text-primary-dark
+        text-primary
+        text-primary
+        border-slate-grey-light
+      ]
+    }.freeze
+
+    def chip_component(text: '', icon_name: nil, close: false, colorscheme: 'primary')
+      styles = COLOR_SCHEMES[colorscheme]
+      raise "Incorrect color scheme #{colorscheme}" unless styles
+
+      bg_style, text_style, icon_style, close_style, border_style = styles
+
+      render partial: 'view_components/chip_component/chip_component', locals: {
+        text:,
+        icon_name:,
+        close:,
+        bg_style:,
+        text_style:,
+        icon_style:,
+        close_style:,
+        border_style:
+      }
+    end
+  end
+end

data/app/helpers/view_component/component_helper.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  # To be used only within a component class such as ButtonComponent
+  module ComponentHelper
+    def class_list(base, *styles)
+      base.concat(styles.compact)
+      base.join(' ')
+    end
+
+    def resolve_error(form, name, explicit_error)
+      return explicit_error if explicit_error.present?
+      return if form.blank? || form.object.blank? || name.blank?
+
+      attribute = name.to_s.split('[').last.delete(']').humanize
+      message = form.object.errors[name].first
+
+      message.present? ? "#{attribute} #{message}" : nil
+    end
+  end
+end

data/app/helpers/view_component/course_card_component.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module CourseCardComponent
+    def course_card_component(course:, enrollment: nil)
+      render partial: 'view_components/course_carousal/course_card_component', locals: { course:, enrollment: }
+    end
+  end
+end

data/app/helpers/view_component/course_carousal_component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module CourseCarousalComponent
+    def course_carousal_component(courses:, title:, count:, load_path:)
+      render partial: 'view_components/course_carousal/course_carousal_component',
+             locals: { courses:, title:, count:, load_path: }
+    end
+
+    def course_carousal_body_component(courses:)
+      render partial: 'view_components/course_carousal/course_carousal_body_component', locals: { courses: }
+    end
+  end
+end

data/app/helpers/view_component/course_select_component.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module CourseSelectComponent
+    def course_select_component(search_context:, submit_path:, courses: [], tags: [], cancel_link: nil,
+                                show_duration: false)
+      render partial: 'view_components/course_select/course_select_component',
+             locals: { search_context:, courses:, tags:, cancel_link:, show_duration:, submit_path: }
+    end
+
+    def _course_select_search_component(search_context:, tags:)
+      render partial: 'view_components/course_select/search_component', locals: { search_context:, tags: }
+    end
+
+    def _course_select_sidebar_component(form:, tags:)
+      render partial: 'view_components/course_select/sidebar_component', locals: { form:, tags: }
+    end
+
+    def _course_select_list_component(search_context:, courses:)
+      render partial: 'view_components/course_select/list_component',
+             locals: { search_context:, courses: }
+    end
+
+    def _course_select_list_item_component(course:)
+      render partial: 'view_components/course_select/list_item_component', locals: { course: }
+    end
+
+    def _course_select_load_more(search_context:, courses:)
+      render partial: 'view_components/course_select/load_more', locals: { search_context:, courses: }
+    end
+  end
+end

data/app/helpers/view_component/doc_section_component.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module DocSectionComponent
+    def doc_section_component(title: '', &)
+      block_content = capture(&) if block_given?
+      render partial: 'view_components/doc_section/doc_section_component', locals: { title:, block: block_content }
+    end
+  end
+end

data/app/helpers/view_component/icon_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module IconComponent
+    ICONS_PATH = NeoComponents::Engine.gem_root.join("app", "assets", "icons")
+
+    def icon(icon_name, css: nil, span_css: nil, stroke_width: nil)
+      file = Rails.cache.fetch("neo_components:icon:#{icon_name}") do
+        ICONS_PATH.join("#{icon_name}.svg").read
+      end
+
+      svg = Nokogiri::HTML::DocumentFragment.parse(file).at_css('svg')
+      svg['class'] = css
+      if stroke_width.present?
+        # Use the stroke_width passed from helper
+        svg['stroke-width'] = stroke_width
+      elsif svg['stroke-width'].blank?
+        # Use default only if SVG does not have stroke-width
+        svg['stroke-width'] = '1.5'
+      end
+      content_tag(:span, svg.to_html.html_safe, class: "flex justify-center items-center #{span_css}".strip) # rubocop:disable Rails/OutputSafety
+    end
+  end
+end

data/app/helpers/view_component/input_component/date_picker_component.rb

@@ -0,0 +1,127 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module InputComponent
+    class DatePickerComponent
+      include ViewComponent::ComponentHelper
+
+      DATE_PICKER_SIZES = %w[md lg].freeze
+
+      DATE_PICKER_SIZE_STYLE = {
+        md: 'input-text-div-base-md main-text-md-normal',
+        lg: 'input-text-div-base-lg main-text-lg-medium'
+      }.freeze
+
+      LABEL_STYLES = {
+        md: 'input-text-label-md general-text-sm-normal',
+        lg: 'input-text-label-lg general-text-md-normal'
+      }.freeze
+
+      SUPPORT_TEXT_STYLES = {
+        md: 'input-text-subtext-md general-text-sm-normal',
+        lg: 'input-text-subtext-lg general-text-md-normal'
+      }.freeze
+
+      ICON_SIZE = {
+        md: 'input-text-icon-md',
+        lg: 'input-text-icon-lg'
+      }.freeze
+
+      attr_accessor :form, :name, :label, :value, :placeholder, :size,
+                    :support_text, :error, :disabled, :html_options
+
+      def initialize(form:, name:, label:, value:, placeholder:, size:, support_text:, error:, disabled:, html_options:)
+        raise "Incorrect date picker size: #{size}" unless DATE_PICKER_SIZES.include?(size)
+
+        error_message = resolve_error(form, name, error)
+
+        self.form = form
+        self.name = name
+        self.label = label
+        self.value = value
+        self.placeholder = placeholder
+        self.size = size
+        self.support_text = (error_message.presence || support_text)
+        self.error = error_message
+        self.disabled = disabled
+        self.html_options = html_options
+
+        self.html_options[:disabled] = true if disabled
+        self.html_options[:class] = date_picker_style
+      end
+
+      def date_picker_style
+        base = ['w-full border']
+        size_style = DATE_PICKER_SIZE_STYLE[size.to_sym]
+
+        color_style =
+          if disabled
+            'border-disabled-color text-disabled-color placeholder-disabled-color'
+          elsif error.present?
+            'text-danger focus:text-danger-dark border-danger focus:border-danger focus:ring-danger'
+          else
+            'text-letter-color-light border-slate-grey-50 focus:ring-primary'
+          end
+
+        class_list(base, size_style, color_style)
+      end
+
+      def label_style
+        size_style = LABEL_STYLES[size.to_sym]
+
+        color_style =
+          if disabled
+            'text-disabled-color'
+          elsif error.present?
+            'text-danger-dark'
+          else
+            'text-letter-color-light group-focus-within:text-primary'
+          end
+
+        class_list([], size_style, color_style)
+      end
+
+      def support_text_style
+        size_style = SUPPORT_TEXT_STYLES[size.to_sym]
+
+        color_style =
+          if disabled
+            'text-disabled-color'
+          elsif error.present?
+            'text-danger-dark'
+          else
+            'text-letter-color-light'
+          end
+
+        class_list([], size_style, color_style)
+      end
+
+      def icon_wrapper_style
+        base = ['date-picker-icon-wrapper']
+
+        disabled_style =
+          if disabled
+            'date-picker-icon-wrapper-disabled'
+          else
+            ''
+          end
+
+        class_list(base, disabled_style)
+      end
+
+      def icon_style
+        size_style = ICON_SIZE[size.to_sym]
+
+        color_style =
+          if disabled
+            'text-disabled-color'
+          elsif error.present?
+            'text-danger'
+          else
+            'text-letter-color-light hover:text-primary'
+          end
+        class_list([], size_style, color_style)
+      end
+    end
+  end
+end

data/app/helpers/view_component/input_component/dropdown_component.rb

@@ -0,0 +1,99 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module InputComponent
+    class DropdownComponent
+      include ViewComponent::ComponentHelper
+
+      DROPDOWN_SIZES = %w[md lg].freeze
+
+      DROPDOWN_SIZE_STYLE = {
+        md: 'dropdown-component-md main-text-md-normal',
+        lg: 'dropdown-component-lg main-text-lg-medium'
+      }.freeze
+
+      LABEL_STYLES = {
+        md: 'input-text-label-md general-text-sm-normal',
+        lg: 'input-text-label-lg general-text-md-normal'
+      }.freeze
+
+      SUPPORT_TEXT_STYLES = {
+        md: 'input-text-subtext-md general-text-sm-normal',
+        lg: 'input-text-subtext-lg general-text-md-normal'
+      }.freeze
+
+      attr_accessor :form, :name, :label, :options, :value, :size,
+                    :support_text, :error, :disabled, :html_options, :prompt
+
+      def initialize(form:, name:, label:, options:, value:, size:, support_text:, error:, disabled:, html_options:,
+                     prompt:)
+        raise "Incorrect dropdown size: #{size}" unless DROPDOWN_SIZES.include?(size)
+
+        error_message = resolve_error(form, name, error)
+
+        self.form = form
+        self.name = name
+        self.label = label
+        self.options = options
+        self.value = value
+        self.size = size
+        self.support_text = (error_message.presence || support_text)
+        self.error = error_message
+        self.disabled = disabled
+        self.html_options = html_options
+        self.prompt = prompt
+
+        self.html_options[:disabled] = true if disabled
+        self.html_options[:class] = dropdown_style
+      end
+
+      def dropdown_style
+        base = ['dropdown-component-base']
+        size_style = DROPDOWN_SIZE_STYLE[size.to_sym]
+
+        color_style =
+          if disabled
+            'text-disabled-color border-disabled-color'
+          elsif error.present?
+            'text-danger focus:text-danger-dark border-danger focus:border-danger focus:ring-danger'
+          else
+            'text-letter-color-light border-slate-grey-50 focus:ring-primary'
+          end
+
+        class_list(base, size_style, color_style)
+      end
+
+      def label_style
+        base = []
+        size_style = LABEL_STYLES[size.to_sym]
+
+        color_style =
+          if disabled
+            'text-disabled-color'
+          elsif error.present?
+            'text-danger-dark'
+          else
+            'text-letter-color-light group-focus-within:text-primary'
+          end
+
+        class_list(base, size_style, color_style)
+      end
+
+      def support_text_style
+        base = []
+        size_style = SUPPORT_TEXT_STYLES[size.to_sym]
+
+        color_style =
+          if disabled
+            'text-disabled-color'
+          elsif error.present?
+            'text-danger-dark'
+          else
+            'text-letter-color-light'
+          end
+
+        class_list(base, size_style, color_style)
+      end
+    end
+  end
+end

data/app/helpers/view_component/input_component/file_selector_component.rb

@@ -0,0 +1,123 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module InputComponent
+    class FileSelectorComponent
+      include ViewComponent::ComponentHelper
+
+      FILE_SELECTOR_TYPES = %w[image document video].freeze
+
+      attr_accessor :form, :name, :label, :support_text,
+                    :support_text_two, :error, :disabled, :html_options, :type
+
+      def initialize(type:, form: nil, name: nil, label: nil,
+                     support_text: nil, support_text_two: nil, error: nil, disabled: false, html_options: {})
+        raise "Invalid or missing file type: #{type}" unless FILE_SELECTOR_TYPES.include?(type)
+
+        error_message = resolve_error(form, name, error)
+
+        self.form = form
+        self.name = name
+        self.label = label
+        self.support_text = (error_message.presence || support_text)
+        self.support_text_two = support_text_two
+        self.error = error_message
+        self.disabled = disabled
+        self.html_options = html_options
+        self.type = type
+      end
+
+      def accepted_types
+        case type
+        when 'image'
+          'image/*'
+        when 'document'
+          '.csv,.pdf,.doc,.docx'
+        when 'video'
+          'video/*,.mp4,.mov,.avi,.mkv'
+        else
+          '*/*'
+        end
+      end
+
+      def wrapper_style
+        base = ['file-selector-component-base radius-lg md:radius-xl']
+
+        color_style =
+          if disabled
+            'textarea-disabled-state pointer-events-none cursor-not-allowed'
+          elsif error.present?
+            'border-danger'
+          else
+            'border-slate-grey-50 hover:border-primary-light focus:border-primary-light'
+          end
+
+        class_list(base, color_style)
+      end
+
+      def label_style
+        base = ['general-text-sm-normal px-1']
+
+        color_style =
+          if disabled
+            'text-disabled-color'
+          elsif error.present?
+            'text-danger-dark'
+          else
+            'text-letter-color-light'
+          end
+
+        class_list(base, color_style)
+      end
+
+      def preview_style
+        base = ['file-selector-preview']
+
+        class_list(base)
+      end
+
+      def upload_icon_style
+        base = ['file-selector-upload-icon']
+
+        color_style =
+          if disabled
+            'fill-disabled-color'
+          elsif error.present?
+            'fill-danger'
+          else
+            'fill-primary'
+          end
+
+        class_list(base, color_style)
+      end
+
+      def choose_file_style
+        base = ['general-text-md-normal ']
+
+        color_style =
+          if disabled
+            'text-disabled-color'
+          else
+            'text-primary'
+          end
+
+        class_list(base, color_style)
+      end
+
+      def support_text_style
+        base = ['file-selector-support-text general-text-sm-normal']
+
+        color_style =
+          if disabled
+            'text-disabled-color'
+          elsif error.present?
+            'text-danger-dark'
+          else
+            'text-slate-grey-50'
+          end
+
+        class_list(base, color_style)
+      end
+    end
+  end
+end