neo_components 0.1.0

data/app/helpers/view_component/input_textarea_component.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module InputTextareaComponent
+    def input_textarea_component(
+      form:,
+      field_name:,
+      label:,
+      placeholder:,
+      value: nil,
+      rows: 5,
+      html_options: {}
+    )
+      html_options = html_options.merge(
+        placeholder: placeholder,
+        rows: rows
+      )
+
+      render partial: 'view_components/inputs/textarea', locals: {
+        form:,
+        field_name:,
+        label:,
+        value:,
+        html_options:
+      }
+    end
+  end
+end

data/app/helpers/view_component/long_course_card_component.rb

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

data/app/helpers/view_component/member_list_component.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module MemberListComponent
+    def member_list_component(team:, members:, all_members: false, term: '')
+      render partial: 'view_components/member_list/member_list', locals: { team:, members:, all_members:, term: }
+    end
+
+    def _member_list_member_search_component(team:, all_members:)
+      render partial: 'view_components/member_list/member_search', locals: { team:, all_members: }
+    end
+
+    def member_list_members_component(team:, members:, all_members: false, term: '')
+      render partial: 'view_components/member_list/members', locals: { team:, members:, all_members:, term: }
+    end
+  end
+end

data/app/helpers/view_component/menu_component.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module MenuComponent
+    MenuItem = ViewComponent::MenuItem
+
+    MENU_POSITIONS = {
+      left: 'menu-component-left',
+      right: 'menu-component-right',
+      center: 'menu-component-center'
+    }.freeze
+
+    def menu_component(menu_items:, position: 'right', html_options: {})
+      position_key = position.to_s.downcase.to_sym
+      position_class = MENU_POSITIONS[position_key] || MENU_POSITIONS[:right]
+
+      menu_items_with_options = menu_items.map do |item|
+        item.options ||= {}
+        item.url = item.url.presence || 'javascript:void(0)'
+        item
+      end
+
+      render(
+        'view_components/menu_component/menu_component',
+        menu_items: menu_items_with_options,
+        position_class: position_class,
+        html_options:
+      )
+    end
+  end
+end

data/app/helpers/view_component/menu_component_helper.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module MenuComponentHelper
+    MenuItem = ViewComponent::MenuItem
+
+    def menu_component_old(menu_items:, icon_class: '', html_options: {})
+      menu_items_with_options = menu_items.map do |item|
+        item.options ||= {}
+        item.url = item.url.presence || '#'
+        item
+      end
+
+      render(
+        'view_components/menu_component_old/menu_component',
+        menu_items: menu_items_with_options,
+        icon_class:,
+        html_options:
+      )
+    end
+  end
+end

data/app/helpers/view_component/menu_item.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  MenuItem = Struct.new(
+    :label,
+    :url,
+    :type,
+    :options,
+    :extra_classes,
+    keyword_init: true
+  )
+end

data/app/helpers/view_component/modal_box_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module ModalBoxComponent
+    class ModalBoxComponent
+      attr_accessor :title, :variant
+
+      def initialize(title: nil, variant: nil)
+        self.title = title
+        self.variant = variant
+      end
+    end
+
+    def modal_box_component(title: nil, variant: nil, modal_footer: nil, html_options: {}, &)
+      modal = ModalBoxComponent.new(title:, variant:)
+      block_content = capture(&) if block_given?
+
+      container_class =
+        if variant == :success
+          'modal-success'
+        else
+          'modal-container'
+        end
+
+      render partial: 'view_components/modal_component/modal_box_component',
+             locals: { modal:, body: block_content, modal_footer:, container_class:, html_options: }
+    end
+  end
+end

data/app/helpers/view_component/modal_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module ModalComponent
+    # modal box component
+    # @param title - modal title
+    def modal_component(title:, &)
+      block_content = capture(&) if block_given?
+      render partial: 'view_components/modals/modal_component', locals: { title:, body: block_content }
+    end
+  end
+end

data/app/helpers/view_component/notification_bar_component.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module NotificationBarComponent
+    def notification_bar(
+      text: nil,
+      text_color: 'text-letter-color',
+      bg_color: 'bg-white',
+      icon_color: 'bg-letter-color'
+    )
+      render(
+        partial: 'view_components/notification_bar/notification_bar',
+        locals: {
+          text:,
+          text_color:,
+          icon_color:,
+          bg_color:
+        }
+      )
+    end
+  end
+end

data/app/helpers/view_component/paginator_component.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module PaginatorComponent
+    def paginator_component(collection:, path:)
+      render partial: 'view_components/paginator/paginator_component', locals: { collection:, path: }
+    end
+  end
+end

data/app/helpers/view_component/profile_icon_component.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module ProfileIconComponent
+    class ProfileIconComponent
+      include ViewComponent::ComponentHelper
+
+      PROFILE_ICON_SIZES = %w[sm md lg].freeze
+
+      PROFILE_ICON_SIZE_STYLES = {
+        sm: 'profile-icon-sm',
+        md: 'profile-icon-md',
+        lg: 'profile-icon-lg'
+      }.freeze
+
+      attr_accessor :letter, :size
+
+      def initialize(letter:, size: 'md')
+        raise "Incorrect profile icon size: #{size}" unless PROFILE_ICON_SIZES.include?(size)
+
+        self.letter = (letter.presence || 'U').to_s[0].upcase
+        self.size = size
+      end
+
+      def profile_icon_style
+        base = ['profile-icon-base']
+        size_style = PROFILE_ICON_SIZE_STYLES[size.to_sym]
+
+        class_list(base, size_style)
+      end
+    end
+
+    def profile_icon_component(letter:, size: 'md')
+      normalized_letter = (letter.presence || 'U').to_s[0]
+
+      profile_icon =
+        ProfileIconComponent.new(
+          letter: normalized_letter,
+          size:
+        )
+
+      render partial: 'view_components/profile_icon_component/profile_icon',
+             locals: { profile_icon: }
+    end
+  end
+end

data/app/helpers/view_component/progress_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module ProgressComponent
+    def progressbar_component(numerator:, denominator:)
+      numerator = 0 if numerator.blank?
+      denominator = 0 if denominator.blank?
+      fill = denominator.zero? ? 0 : (numerator / denominator.to_f * 100).to_i
+      render partial: 'view_components/progress_component/progressbar', locals: { numerator:, denominator:, fill: }
+    end
+  end
+end

data/app/helpers/view_component/table_component.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module TableComponent
+    def table_cell_name(row_data, avatar: false)
+      { partial: 'shared/components/table_cell_name', locals: { row_data:, avatar: } }
+    end
+
+    def table_cell_role(row_data)
+      { partial: 'shared/components/table_cell_role', locals: { row_data: } }
+    end
+
+    def table_actions(row_data, actions = [])
+      actions.each do |action|
+        action[:data] ||= {}
+        action[:data][:turbo_frame] = action[:turbo_frame] if action[:turbo_frame].present?
+      end
+
+      { partial: 'shared/components/table_actions', locals: { row_data:, actions: } }
+    end
+  end
+end

data/app/helpers/view_component/typography_component.rb

@@ -0,0 +1,83 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module TypographyComponent
+    HEADING_SIZE = {
+      'xs' => 'text-base font-semibold',
+      'sm' => 'text-lg font-semibold',
+      'md' => 'text-xl font-semibold',
+      'lg' => 'text-2xl font-semibold',
+      'xl' => 'text-3xl font-semibold'
+    }.freeze
+
+    def merge_class(options, class_names)
+      options.merge(class: [*class_names, options[:class]].compact.join(' '))
+    end
+
+    def link_text_component(text, link, html_options = {})
+      render partial: 'view_components/typography/linked_text_component', locals: {
+        text:,
+        link:,
+        html_options:
+      }
+    end
+
+    # @param size - xs, sm, md, lg, xl
+    def heading_component(text:, size: 'md')
+      raise 'BlankValue - heading cannot be blank' if text.blank?
+      raise 'IncorrectValue - incorrect size value' unless %w[xs sm md lg xl].include?(size)
+
+      render partial: 'view_components/typography/heading_component', locals: {
+        text:,
+        css: HEADING_SIZE[size]
+      }
+    end
+
+    def h1_component(text: '', html_options: {})
+      render partial: 'view_components/typography/h1_component', locals: {
+        text:,
+        html_options: merge_class(html_options, ['heading-3xl'])
+      }
+    end
+
+    def h2_component(text: '', html_options: {})
+      render partial: 'view_components/typography/h2_component', locals: {
+        text:,
+        html_options: merge_class(html_options, ['heading-2xl'])
+      }
+    end
+
+    def h3_component(text: '', html_options: {})
+      render partial: 'view_components/typography/h3_component', locals: {
+        text:,
+        html_options: merge_class(html_options, ['heading-xl'])
+      }
+    end
+
+    # @param text - text to be displayed
+    # @param tag - span, p, div
+    # @param html_options - additional html options including css classes
+    def text_component(text: '', tag: 'span', html_options: {})
+      render partial: 'view_components/typography/text_component', locals: {
+        text:,
+        tag:,
+        html_options: merge_class(html_options, ['general-text-md-normal'])
+      }
+    end
+
+    # @param text - text to be displayed
+    # @param url - url to be linked
+    # @param target - _blank, _self, _parent, _top, framename
+    # @param html_options - additional html options
+    def link_component(text:, url: '#', target: '_self', html_options: {})
+      raise 'BlankValue - text cannot be blank' if text.blank?
+
+      link_css = ['main-text-sm-normal', 'underline', 'text-primary', 'hover:text-primary-light']
+      render partial: 'view_components/typography/link_component', locals: {
+        text:,
+        url:,
+        html_options: merge_class(html_options, link_css).merge(target: target)
+      }
+    end
+  end
+end

data/app/javascript/neo_components/controllers/collapsible_controller.js

@@ -0,0 +1,37 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["content", "icon"]
+  static values = { open: Boolean }
+
+  connect() {
+    if (this.openValue) {
+      this.open()
+    } else {
+      this.close()
+    }
+  }
+
+  toggle(event) {
+    if (event.target.closest("a, button")) return
+    this.openValue = !this.openValue
+  }
+
+  openValueChanged() {
+    if (this.openValue) {
+      this.open()
+    } else {
+      this.close()
+    }
+  }
+
+  open() {
+    this.contentTarget.classList.remove("hidden")
+    this.iconTarget.classList.add("rotate-180")
+  }
+
+  close() {
+    this.contentTarget.classList.add("hidden")
+    this.iconTarget.classList.remove("rotate-180")
+  }
+}

data/app/javascript/neo_components/controllers/date_picker_controller.js

@@ -0,0 +1,17 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["datePicker", "dateSelector"];
+
+  datePicked(event) {
+    const selectedDate = event.target.value;
+
+    if (selectedDate) {
+      this.dateSelectorTarget.value = selectedDate;
+    }
+  }
+
+  openDatePicker() {
+    this.datePickerTarget.showPicker();
+  }
+}

data/app/javascript/neo_components/controllers/file_selector_controller.js

@@ -0,0 +1,145 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = [
+    "wrapper",
+    "chooseFile",
+    "fileInput",
+    "selectedFileName",
+    "preview",
+    "previewContainer",
+    "iconPreview",
+    "fileName",
+    "fileSize"
+  ];
+
+  connect() {
+    this.fileInputTarget.addEventListener("change", (e) => {
+      const file = e.target.files[0];
+      this.updateFileName(file);
+      this.showPreview(file);
+      if (file) this.activate(); 
+    });
+  }
+
+  activate() {
+    if (!this.isErrorState()) {
+      this.wrapperTarget.classList.add("file-selector-is-active");
+    }
+  }
+
+  deactivate() {
+    this.wrapperTarget.classList.remove("file-selector-is-active");
+  }
+  
+  isErrorState() {
+    return this.wrapperTarget.classList.contains("border-danger");
+  }
+
+  updateFileName(file) {
+    this.clearError();
+    this.chooseFileTarget.classList.add("hidden");
+    this.selectedFileNameTarget.classList.remove("hidden");
+
+    if (file) {
+      const truncated = this.truncateFileName(file.name, 20); 
+      this.fileNameTarget.textContent = truncated;
+      this.fileSizeTarget.textContent = this.formatFileSize(file.size);
+    } else {
+      this.fileNameTarget.textContent = "No file chosen";
+      this.fileSizeTarget.textContent = "";
+    }
+  }
+
+  truncateFileName(fileName, maxLength = 10) {
+    const dotIndex = fileName.lastIndexOf(".");
+
+    if (dotIndex === -1) {
+      return fileName.length > maxLength
+        ? fileName.slice(0, maxLength) + "..."
+        : fileName;
+    }
+
+    const namePart = fileName.slice(0, dotIndex);
+    const extension = fileName.slice(dotIndex);
+
+    if (namePart.length <= maxLength) return fileName;
+
+    return namePart.slice(0, maxLength) + "..." + extension;
+  }
+
+  formatFileSize(bytes) {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  }
+
+  showPreview(file) {
+    if (!file) return;
+
+    const fileType = file.type || "";
+    const fileName = file.name.toLowerCase();
+    this.previewContainerTarget.classList.remove("hidden");
+    this.activate(); 
+
+    if (this.previewTarget.src.startsWith("blob:")) {
+      URL.revokeObjectURL(this.previewTarget.src);
+    }
+
+    if (fileType.startsWith("image/")) {
+      const reader = new FileReader();
+      reader.onload = () => {
+        this.previewTarget.src = reader.result;
+      };
+      reader.onerror = () => this.showError("Failed to load file preview");
+      reader.readAsDataURL(file);
+
+    } else if (fileType.startsWith("video/") || /\.(mp4|mov|avi|mkv|webm)$/i.test(fileName)) {
+      const blobURL = URL.createObjectURL(file);
+      this.previewTarget.src = blobURL;
+      this.previewTarget.load();
+      this.previewTarget.controls = false;
+      this.previewTarget.muted = true;
+      this.previewTarget.autoplay = false;
+
+    } else {
+      this.previewTarget.src = "";
+    }
+  }
+
+  showError(message) {
+    this.resetInput();
+    this.fileNameTarget.innerText = message;
+    this.fileNameTarget.style.color = "red";
+  }
+
+  clearError() {
+    this.fileNameTarget.textContent = "No file chosen";
+    this.fileNameTarget.style.color = "";
+  }
+
+  resetInput() {
+    if (this.hasPreviewTarget && this.previewTarget.src.startsWith("blob:")) {
+      URL.revokeObjectURL(this.previewTarget.src);
+    }
+
+    this.fileInputTarget.value = "";
+    this.fileNameTarget.textContent = "";
+    this.fileSizeTarget.textContent = "";
+    this.selectedFileNameTarget.classList.add("hidden");
+    this.previewContainerTarget.classList.add("hidden");
+    if (this.hasPreviewTarget && this.previewTarget.src) {
+      this.previewTarget.src = "";
+    } 
+
+    this.chooseFileTarget.classList.remove("hidden");
+    this.wrapperTarget.classList.remove("file-selector-is-active"); 
+  }
+
+  chooseFile() {
+    if (!this.chooseFileTarget.classList.contains("hidden")) {
+      this.activate(); 
+      this.fileInputTarget.click();
+    }
+  }
+}

data/app/javascript/neo_components/controllers/input_mobile_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  validateInput(event) {
+    event.target.value = event.target.value.slice(0, 10);
+  }
+}

data/app/javascript/neo_components/controllers/menu_component_controller.js

@@ -0,0 +1,26 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["moreMenu","menuButton"];
+
+  connect() {
+    window.addEventListener("click",(e) => {
+      if (!this.moreMenuTarget.contains(e.target)) {
+        if (!this.isMenuHidden()) {
+          this.toggleDropdown(e);
+        }
+      }
+    })
+  }
+
+  toggleDropdown(event) {
+    event.stopPropagation();
+    this.moreMenuTarget.classList.toggle("hidden");
+    this.menuButtonTarget.classList.toggle("menu-component-button-active")
+
+  }
+
+  isMenuHidden() {
+    return this.moreMenuTarget.classList.contains("hidden");
+  }
+}

data/app/javascript/neo_components/controllers/modal_loader_controller.js

@@ -0,0 +1,13 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["loader"]
+
+  connect() {
+    this.element.addEventListener("submit", this.showLoader.bind(this))
+  }
+
+  showLoader(event) {
+    this.loaderTarget.classList.remove("hidden")
+  }
+}

data/app/javascript/neo_components/controllers/modals_controller.js

@@ -0,0 +1,26 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["modalBox"];
+
+  closeModal(event) {
+    event.preventDefault();
+    this.modalBoxTarget.classList.add("hidden");
+    this.modalBoxTarget.parentElement.removeAttribute("src");
+    this.modalBoxTarget.parentElement.removeAttribute("complete");
+    this.modalBoxTarget.parentElement.innerText = "";
+  }
+
+  afterSubmit(event) {
+    if (event.detail.success) {
+      const fetchResponse = event.detail.fetchResponse;
+      history.pushState(
+        { turbo_frame_history: true },
+        "",
+        fetchResponse.response.url
+      );
+
+      Turbo.visit(fetchResponse.response.url);
+    }
+  }
+}

data/app/javascript/neo_components/controllers/notification_bar_controller.js

@@ -0,0 +1,9 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["banner"]
+
+  close() {
+    this.bannerTarget.classList.add("hidden")
+  }
+}

data/app/javascript/neo_components/controllers/pagination_controller.js

@@ -0,0 +1,11 @@
+import {Controller} from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["button"];
+
+  setPageParam() {
+    const nextUrl = this.buttonTarget.getAttribute("href");
+    if (!nextUrl) return;
+      window.history.replaceState({}, "", nextUrl);
+  }
+}