neo_components 0.1.0

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

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module InputComponent
+    class InputCheckboxComponent
+      include ViewComponent::ComponentHelper
+
+      attr_accessor :form, :name, :label, :value, :disabled, :error, :label_position, :html_options
+
+      def initialize(form:, name:, label:, value:, disabled:, error:, label_position:, html_options:)
+        self.form = form
+        self.name = name
+        self.label = label
+        self.label_position = label_position
+        self.value = value
+        self.html_options = html_options
+        self.disabled = disabled
+        self.html_options[:disabled] = disabled
+        self.html_options[:class] = 'hidden peer'
+        self.error = resolve_error(form, name, error)
+      end
+
+      def label_style
+        if disabled
+          'text-disabled-color'
+        elsif error
+          'text-danger-dark'
+        else
+          'text-letter-color group-has-[input:checked]:text-primary group-hover:text-primary-light'
+        end
+      end
+
+      def box_style
+        if disabled
+          'border-disabled-color'
+        elsif error
+          'border-danger-dark'
+        else
+          'border-slate-grey-50 group-hover:border-primary-light group-has-[input:checked]:border-primary'
+        end
+      end
+
+      def check_style
+        if disabled
+          'hidden'
+        elsif error
+          'hidden group-has-[input:checked]:flex group-has-[input:checked]:text-danger-dark'
+        else
+          'hidden group-has-[input:checked]:flex group-has-[input:checked]:text-primary'
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,68 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module InputComponent
+    class InputMobileComponent < InputTextComponent
+      CODE_WIDTH = {
+        md: 'w-16',
+        lg: 'w-20'
+      }.freeze
+
+      CODE_SELECT_WIDTH = {
+        md: 'w-20',
+        lg: 'w-24'
+      }.freeze
+
+      CODE_TEXT = {
+        md: 'mobile-code-md',
+        lg: 'mobile-code-lg'
+      }.freeze
+
+      attr_accessor :form, :code_name, :name, :label, :type, :code_value, :value, :subtext, :error,
+                    :icon_name, :icon_position, :disabled, :size, :html_options
+
+      def initialize(form:, name:, label:, type:, placeholder:, code_value:, value:, subtext:, error:,
+                     icon_name:, icon_position:, disabled:, size:, html_options:)
+        super(form:, name:, label:, type:, placeholder:, value:, subtext:, error:, icon_name:, icon_position:,
+              disabled:, size:, html_options:)
+        self.code_value = code_value
+        self.code_name = name.present? ? "#{name}_code" : 'code'
+      end
+
+      def code_selectable?
+        code_value.blank?
+      end
+
+      def error_style
+        base = ['text-danger border-danger-dark',
+                'group-focus-within:ring-danger-dark group-focus-within:border-danger-dark']
+        base << 'group-focus-within:ring-1' unless code_selectable?
+        base.join(' ')
+      end
+
+      def normal_style
+        base = ['border-slate-grey-50 group-focus-within:border-primary']
+        base << 'group-focus-within:ring-primary' if code_selectable?
+        base.join(' ')
+      end
+
+      def code_wrapper_style
+        base = ['mobile-code-base']
+        color_style = if disabled
+                        'border-disabled-color'
+                      elsif error.present?
+                        error_style
+                      elsif code_selectable?
+                        'border-slate-grey-50 group-focus:ring-primary group-focus:border-primary'
+                      else
+                        'border-slate-grey-50 group-focus-within:border-primary'
+                      end
+
+        size_style = INPUT_WRAPPER_STYLES[size.to_sym]
+        code_width = code_selectable? ? CODE_SELECT_WIDTH[size.to_sym] : CODE_WIDTH[size.to_sym]
+        code_text = CODE_TEXT[size.to_sym]
+        [class_list(base, size_style, color_style), code_width, code_text].join(' ')
+      end
+    end
+  end
+end

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

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module InputComponent
+    class InputRadioComponent
+      include ViewComponent::ComponentHelper
+
+      attr_accessor :form, :name, :label, :value, :disabled, :error, :label_position, :html_options
+
+      def initialize(form:, name:, label:, value:, disabled:, error:, label_position:, html_options:)
+        self.form = form
+        self.name = name
+        self.label = label
+        self.label_position = label_position
+        self.value = value
+        self.html_options = html_options
+        self.disabled = disabled
+        self.html_options[:disabled] = disabled
+        self.html_options[:class] = 'hidden'
+        self.error = resolve_error(form, name, error)
+      end
+
+      def label_style
+        if disabled
+          'text-disabled-color'
+        elsif error
+          'text-danger-dark'
+        else
+          'text-letter-color group-has-[input:checked]:text-primary group-hover:text-primary-light'
+        end
+      end
+
+      def radio_circle_style
+        if disabled
+          'border-disabled-color'
+        elsif error
+          'border-danger-dark'
+        else
+          'border-slate-grey-50 group-hover:border-primary-light group-has-[input:checked]:border-primary'
+        end
+      end
+
+      def radio_dot_style
+        if disabled
+          'bg-white'
+        elsif error
+          'group-has-[input:checked]:bg-danger-dark'
+        else
+          'group-has-[input:checked]:bg-primary'
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,137 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module InputComponent
+    class InputTextComponent
+      include ViewComponent::ComponentHelper
+
+      INPUT_SIZE_STYLE = {
+        md: 'input-text-md',
+        lg: 'input-text-lg'
+      }.freeze
+
+      ICON_SIZE = {
+        md: 'input-text-icon-md',
+        lg: 'input-text-icon-lg'
+      }.freeze
+
+      INPUT_WRAPPER_STYLES = {
+        md: 'input-text-div-base-md',
+        lg: 'input-text-div-base-lg'
+      }.freeze
+
+      LABEL_STYLES = {
+        md: 'input-text-label-md',
+        lg: 'input-text-label-lg'
+      }.freeze
+
+      SUBTEXT_SIZE = {
+        md: 'input-text-subtext-md',
+        lg: 'input-text-subtext-lg'
+      }.freeze
+
+      attr_accessor :form, :name, :label, :type, :value, :subtext, :error, :icon_name, :icon_position, :disabled, :size,
+                    :html_options
+
+      def initialize(form:, name:, label:, type:, placeholder:, value:, subtext:, error:,
+                     icon_name:, icon_position:, disabled:, size:, html_options:)
+        error_message = resolve_error(form, name, error)
+
+        self.form = form
+        self.name = name
+        self.label = label
+        self.type = type
+        self.value = value
+        self.subtext = error_message.presence || subtext # Prioritise error over subtext
+        self.error = error_message
+        self.icon_name = icon_name
+        self.icon_position = icon_position
+        self.disabled = disabled
+        self.size = size
+        self.html_options = html_options
+        self.html_options[:placeholder] = placeholder
+        self.html_options[:class] = input_style
+        self.html_options[:disabled] = disabled if disabled
+      end
+
+      def input_style
+        base = ['input-text-base']
+        color_style = if disabled
+                        'text-disabled-color'
+                      elsif error.present?
+                        'text-danger focus:text-danger-dark'
+                      else
+                        'text-disabled-color focus:text-letter-color'
+                      end
+
+        size_style = INPUT_SIZE_STYLE[size.to_sym]
+        class_list(base, size_style, color_style)
+      end
+
+      def placeholder
+        html_options[:placeholder]
+      end
+
+      def placeholder=(value)
+        html_options[:placeholder] = value
+      end
+
+      def input_wrapper_style
+        base = ['input-text-div-base group']
+        color_style = if disabled
+                        'border-disabled-color'
+                      elsif error.present?
+                        'border-danger focus-within:border-danger-dark ring-danger-dark'
+                      else
+                        'border-slate-grey-50 focus-within:border-primary ring-primary'
+                      end
+
+        size_style = INPUT_WRAPPER_STYLES[size.to_sym]
+        class_list(base, size_style, color_style)
+      end
+
+      def label_style
+        base = []
+        color_style = if disabled
+                        'text-disabled-color'
+                      elsif error.present?
+                        'text-danger-dark'
+                      else
+                        'text-letter-color-light group-focus-within:text-primary'
+                      end
+
+        size_style = LABEL_STYLES[size.to_sym]
+        class_list(base, size_style, color_style)
+      end
+
+      def icon_style
+        base = ['input-text-icon-base']
+        color_style = if disabled
+                        'text-disabled-color'
+                      elsif error.present?
+                        'text-danger-dark'
+                      else
+                        'text-disabled-color group-focus-within:text-letter-color'
+                      end
+        class_list(base, '', color_style)
+      end
+
+      def icon_size
+        ICON_SIZE[size.to_sym]
+      end
+
+      def subtext_style
+        base = []
+        color_style = if disabled
+                        'text-disabled-color'
+                      elsif error.present?
+                        'text-danger-dark'
+                      else
+                        'text-letter-color-light'
+                      end
+        size_style = SUBTEXT_SIZE[size.to_sym]
+        class_list(base, size_style, color_style)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,101 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module InputComponent
+    class TextareaComponent
+      include ViewComponent::ComponentHelper
+
+      TEXTAREA_SIZES = %w[md lg].freeze
+
+      TEXTAREA_SIZE_STYLE = {
+        md: 'textarea-component-md main-text-md-normal',
+        lg: 'textarea-component-lg main-text-lg-medium'
+      }.freeze
+
+      LABEL_STYLES = {
+        md: 'general-text-sm-normal',
+        lg: 'general-text-md-normal'
+      }.freeze
+
+      SUPPORT_TEXT_STYLES = {
+        md: 'general-text-sm-normal px-3',
+        lg: 'general-text-md-normal px-3 md:px-4'
+      }.freeze
+
+      attr_accessor :form, :name, :label, :placeholder, :value,
+                    :rows, :size, :support_text, :error, :disabled, :html_options
+
+      def initialize(form:, name:, label:, placeholder:, value:, rows:, size:, support_text:,
+                     error:, disabled:, html_options:)
+        raise "Incorrect textarea size: #{size}" unless TEXTAREA_SIZES.include?(size)
+
+        error_message = resolve_error(form, name, error)
+
+        self.form = form
+        self.name = name
+        self.label = label
+        self.placeholder = placeholder
+        self.value = value
+        self.rows = rows
+        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[:placeholder] = placeholder
+        self.html_options[:rows] ||= rows
+        self.html_options[:disabled] = true if disabled
+        self.html_options[:class] = textarea_style
+      end
+
+      def textarea_style
+        base = ['textarea-component-base field-sizing-content']
+        size_style = TEXTAREA_SIZE_STYLE[size.to_sym]
+
+        color_style =
+          if disabled
+            'textarea-disabled-state'
+          elsif error.present?
+            'textarea-error-state'
+          else
+            'textarea-active-state'
+          end
+
+        class_list(base, size_style, color_style)
+      end
+
+      def label_style
+        base = ['textarea-label']
+        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 = ['textarea-support-text']
+        size_style = SUPPORT_TEXT_STYLES[size.to_sym]
+
+        color_style =
+          if disabled
+            'text-disabled-color'
+          elsif error.present?
+            'text-danger-dark'
+          else
+            'text-slate-grey-50'
+          end
+
+        class_list(base, size_style, color_style)
+      end
+    end
+  end
+end

data/app/helpers/view_component/input_component.rb

@@ -0,0 +1,290 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module InputComponent
+    def input_field(form: nil, field_name: nil, label: nil,
+                    placeholder: nil, width: 'w-56', height: nil, left_icon: nil, right_icon: nil, type: 'text',
+                    options: [], value: nil, rows: '5', option: nil, html_options: {})
+      partial_path = 'view_components/inputs/text_field' unless lookup_context.exists?(partial_path, [], true)
+
+      html_options[:data] ||= {}
+
+      render partial: partial_path, locals: {
+        form:,
+        field_name:,
+        label:,
+        placeholder:,
+        width:,
+        height:,
+        left_icon:,
+        right_icon:,
+        type:,
+        options:,
+        value:,
+        rows:,
+        option:,
+        html_options:
+      }
+    end
+
+    def input_radio(form: nil, field_name: nil, label: nil,
+                    placeholder: 'Enter text', width: 'w-56', height: nil,
+                    value: nil, option: nil, html_options: {})
+      render partial: 'view_components/inputs/radio_field', locals: {
+        form:,
+        field_name:,
+        label:,
+        placeholder:,
+        width:,
+        height:,
+        value:,
+        option:,
+        html_options:
+      }
+    end
+
+    def input_dropdown(form: nil, field_name: nil, label: nil,
+                       width: 'w-56', height: nil, placeholder: nil,
+                       options: [], value: nil, html_options: {})
+      render partial: 'view_components/inputs/dropdown_field', locals: {
+        form:,
+        field_name:,
+        label:,
+        width:,
+        height:,
+        placeholder:,
+        options:,
+        value:,
+        html_options:
+      }
+    end
+
+    def input_checkbox(form: nil, field_name: nil, label: nil, width: 'w-56',
+                       value: nil, allow_multiple: false)
+      render partial: 'view_components/inputs/checkbox_field', locals: {
+        form:,
+        field_name:,
+        label:,
+        width:,
+        value:,
+        allow_multiple:
+      }
+    end
+
+    def input_mobile(form:, field_name:, placeholder: 'Enter 10-digit mobile number',
+                     value: nil, label: nil, flag: nil, html_options: {})
+      value ||= form.object.public_send(field_name) if form.object.respond_to?(field_name)
+
+      render partial: 'view_components/inputs/mobile_field', locals: {
+        form:,
+        field_name:,
+        placeholder:,
+        value:,
+        label:,
+        flag:,
+        html_options:
+      }
+    end
+
+    def input_otp(form:, field_prefix: 'otp', count: 4, input_options: {}, wrapper_options: {})
+      content_tag(:div, class: 'flex justify-between gap-6 w-full', **(wrapper_options || {}).except(:data)) do
+        safe_join(
+          count.times.map do |i|
+            field_name = "#{field_prefix}_#{number_to_human(i + 1)}"
+
+            input_field(
+              form:,
+              field_name:,
+              type: 'text',
+              width: 'min-w-16',
+              html_options: {
+                class: 'input-text-otp',
+                maxlength: 1,
+                inputmode: 'numeric',
+                pattern: '[0-9]*'
+              }.merge(input_options)
+            )
+          end
+        )
+      end
+    end
+
+    # form component date_select_component
+    # @param min minimum date
+    # @param maximum date
+    def date_select_component(form:, field_name:, min: nil, max: nil, placeholder: 'YYYY-MM-DD')
+      render partial: 'view_components/inputs/date_select_component',
+             locals: { form:, field_name:, min:, max:, placeholder: }
+    end
+
+    def input_text_component(
+      form: nil,
+      name: nil,
+      label: nil,
+      type: 'text',
+      placeholder: 'Placeholder',
+      value: '',
+      subtext: nil,
+      error: nil,
+      icon_name: nil,
+      icon_position: 'right',
+      disabled: false,
+      size: 'md',
+      html_options: {}
+    )
+      input = InputTextComponent.new(
+        form:, name:, label:, type:, placeholder:, value:, subtext:, error:, icon_name:, icon_position:, disabled:,
+        size:, html_options:
+      )
+
+      render partial: 'view_components/inputs/input_text_component',
+             locals: { input: }
+    end
+
+    def input_radio_component(form: nil, name: nil, label: nil, value: nil, disabled: false, error: nil,
+                              label_position: 'right',
+                              html_options: {})
+      input = InputRadioComponent.new(
+        form:, name:, label:, value:, disabled:, error:, label_position:, html_options:
+      )
+
+      render partial: 'view_components/inputs/input_radio_component',
+             locals: { input: }
+    end
+
+    def input_checkbox_component(form: nil, name: nil, label: nil, value: nil, disabled: false, error: nil,
+                                 label_position: 'right',
+                                 html_options: {})
+      input = InputCheckboxComponent.new(
+        form:, name:, label:, value:, disabled:, error:, label_position:, html_options:
+      )
+
+      render partial: 'view_components/inputs/input_checkbox_component',
+             locals: { input: }
+    end
+
+    def file_selector_component(type:, form: nil, name: nil, label: nil, support_text: nil,
+                                support_text_two: nil, error: nil,
+                                disabled: false, html_options: {})
+      file_selector = FileSelectorComponent.new(
+        form:, name:, label:, support_text:, support_text_two:, error:, disabled:, html_options:, type:
+      )
+
+      render partial: 'view_components/inputs/file_selector', locals: { file_selector: }
+    end
+
+    def input_mobile_component(
+      form: nil,
+      name: nil,
+      label: nil,
+      placeholder: 'Enter your mobile number',
+      country_code: '',
+      value: '',
+      subtext: nil,
+      error: nil,
+      icon_name: nil,
+      icon_position: 'right',
+      disabled: false,
+      size: 'md',
+      html_options: {}
+    )
+      input = InputMobileComponent.new(
+        form:, name:, label:, type: 'number', placeholder:, code_value: country_code, value:, subtext:, error:,
+        icon_name:, icon_position:, disabled:, size:, html_options:
+      )
+
+      render partial: 'view_components/inputs/input_mobile_component',
+             locals: { input: }
+    end
+
+    def textarea_component(
+      name:,
+      placeholder:,
+      form: nil,
+      label: nil,
+      value: nil,
+      rows: 1,
+      size: 'md',
+      support_text: nil,
+      error: nil,
+      disabled: false,
+      html_options: {}
+    )
+      textarea = TextareaComponent.new(
+        form:,
+        name:,
+        label:,
+        placeholder:,
+        value:,
+        rows:,
+        size:,
+        support_text:,
+        error:,
+        disabled:,
+        html_options:
+      )
+
+      render partial: 'view_components/inputs/textarea_component/textarea', locals: { textarea: }
+    end
+
+    def dropdown_component(
+      form: nil,
+      name: nil,
+      label: nil,
+      options: [],
+      value: nil,
+      size: 'md',
+      support_text: nil,
+      error: nil,
+      disabled: false,
+      html_options: {},
+      prompt: nil
+    )
+      dropdown = DropdownComponent.new(
+        form:,
+        name:,
+        label:,
+        options:,
+        value:,
+        size:,
+        support_text:,
+        error:,
+        disabled:,
+        html_options:,
+        prompt:
+      )
+
+      render partial: 'view_components/inputs/dropdown_component/dropdown',
+             locals: { dropdown: }
+    end
+
+    def date_picker_component(
+      form: nil,
+      name: nil,
+      label: nil,
+      value: nil,
+      placeholder: nil,
+      size: 'md',
+      support_text: nil,
+      error: nil,
+      disabled: false,
+      html_options: {}
+    )
+      date_picker = DatePickerComponent.new(
+        form:,
+        name:,
+        label:,
+        value:,
+        placeholder:,
+        size:,
+        support_text:,
+        error:,
+        disabled:,
+        html_options:
+      )
+
+      render partial: 'view_components/inputs/date_picker_component/date_picker',
+             locals: { date_picker: }
+    end
+  end
+end