neo_components 0.1.0

data/app/views/view_components/inputs/input_text/_text_box.html.erb

@@ -0,0 +1,33 @@
+<% if input.icon_name.present? %>
+  <% icon_tag = content_tag(:div, class: input.icon_style) do %>
+    <%= icon(input.icon_name, css: input.icon_size) %>
+  <% end %>
+<% end %>
+
+<%= content_tag :div, class: input.input_wrapper_style do %>
+  <% if input.form.present? %>
+    <% input_tag = case input.type %>
+<% when "password" %>
+      <% input.form.password_field input.name, input.html_options %>
+    <% when "email" %>
+      <% input.form.email_field input.name, input.html_options %>
+    <% when "number" %>
+      <% input.form.number_field input.name, input.html_options %>
+    <% else %>
+      <% input.form.text_field input.name, input.html_options %>
+    <% end %>
+  <% else %>
+    <% input_tag = case input.type %>
+<% when "password" %>
+      <% password_field_tag input.name, input.value, input.html_options %>
+    <% when "email" %>
+      <% email_field_tag input.name, input.value, input.html_options %>
+    <% when "number" %>
+      <% number_field_tag input.name, input.value, input.html_options %>
+    <% else %>
+      <% text_field_tag input.name, input.value, input.html_options %>
+    <% end %>
+  <% end %>
+
+  <%= arrange_tags(icon_tag, input_tag, input.icon_position) %>
+<% end %>

data/app/views/view_components/inputs/textarea_component/_text_area_box.html.erb

@@ -0,0 +1,16 @@
+<div class="textarea-component-wrapper">
+  <% if textarea.form.present? %>
+    <%= textarea.form.text_area textarea.name,
+          **textarea.html_options,
+          placeholder: textarea.placeholder,
+          rows: textarea.rows,
+          class: textarea.textarea_style %>
+  <% else %>
+    <%= text_area_tag textarea.name,
+          textarea.value,
+          **textarea.html_options,
+          placeholder: textarea.placeholder,
+          rows: textarea.rows,
+          class: textarea.textarea_style %>
+  <% end %>
+</div>

data/app/views/view_components/inputs/textarea_component/_textarea.html.erb

@@ -0,0 +1,16 @@
+<div class="w-full flex flex-col gap-1">
+  <% if textarea.label.present? %>
+    <label class="group">
+      <span class="<%= textarea.label_style %>"><%= textarea.label %></span>
+      <%= render 'view_components/inputs/textarea_component/text_area_box', { textarea: } %>
+    </label>
+  <% else %>
+    <%= render 'view_components/inputs/textarea_component/text_area_box', { textarea: } %>
+  <% end %>
+
+  <% if textarea.support_text.present? %>
+    <span class="<%= textarea.support_text_style %>">
+      <%= textarea.support_text %>
+    </span>
+  <% end %>
+</div>

data/app/views/view_components/member_list/_member_list.html.erb

@@ -0,0 +1,4 @@
+<div id="member-list-component" class="flex flex-col gap-5 md:gap-6">
+  <%= _member_list_member_search_component(team:, all_members:) %>
+  <%= member_list_members_component(team:, members:, all_members:, term:) %>
+</div>

data/app/views/view_components/member_list/_member_search.html.erb

@@ -0,0 +1,15 @@
+<div>
+  <%= form_with url: user_searches_path, method: :post do |form| %>
+    <%= form.hidden_field :team_id, value: team.id %>
+    <%= form.hidden_field :all_members, value: all_members %>
+    <div class="flex flex-col md:flex-row gap-5 md:gap-3 w-full">
+      <div class="flex gap-2 md:gap-3 w-full">
+        <%= input_text_component form:, name: :term, placeholder: 'Search members'%>
+        <%= button_tag do %>
+          <%= button_component text: 'Search', type: 'outline' %>
+        <% end %>
+      </div>      
+      <%= render "commons/invite_user", team: team %>
+    </div>
+  <% end %>
+</div>

data/app/views/view_components/member_list/_members.html.erb

@@ -0,0 +1,65 @@
+<div id="team-member-list" class="h-full flex flex-col md:border border-line-colour rounded-xl">
+  <div id="teams-list" class="flex-shrink-0 md:py-4 md:px-6 md:border-b border-line-colour-light">
+    <div class="hidden md:grid grid-cols-12 gap-3 text-left main-text-md-semibold w-full">
+      <div class="col-span-6 flex justify-start">Name</div>
+      <div class="col-span-2 flex justify-start">Phone Number</div>
+      <div class="col-span-2 flex justify-start">Role</div>
+      <div class="col-span-2 flex justify-center">Actions</div>
+    </div>
+  </div>
+
+  <% if members.empty? %>
+    <div class="text-center text-sm mt-6">
+      No users available.
+    </div>
+  <% else %>
+    <div class="flex-1 overflow-y-auto md:divide-y md:divide-line-colour rounded-lg border border-line-colour md:border-0">
+      <% members.each do |member| %>
+        <div class="grid grid-cols-1 md:grid-cols-12 gap-3 items-center md:py-4 md:px-5 border-b border-line-colour md:border-0">
+          <div class="col-span-6 flex flex-wrap items-center justify-between gap-2 border-b md:px-0 md:py-0 px-4 py-3 border-line-colour md:border-none bg-primary-light-50 md:bg-white ">
+            <% link = policy(member).show? ? member_path(member) : "javascript:void(0);" %>
+
+            <%= link_to link, class: "cursor-pointer" do %>
+              <div class="flex items-center justify-center gap-2">
+                <%= profile_icon_component(letter: member.name.first, size: 'sm' ) %>
+                <span class="ml-2 text-ellipsis main-text-lg-normal"><%= member.name %></span>
+              </div>
+            <% end %>
+            <% if member.active? %>
+              <div class="mt-1 flex flex-1 justify-end pe-6 md:mt-0">
+                <%= chip_component(text: 'Active', colorscheme: 'primary', icon_name: 'check') %>
+              </div>
+            <% end %>
+          </div>
+          <% if member.phone.present? %>
+            <div class="col-span-6 md:col-span-2 pl-4 main-text-lg-normal md:pl-0"><%= member.country_code %><%= member.phone %></div>
+          <% else %>
+            <div class="col-span-6 md:col-span-2 pl-4 main-text-lg-normal md:pl-0">-</div>
+          <% end %>
+          <div class="col-span-6 md:col-span-2 px-4 main-text-lg-normal md:px-0">
+            <%= role_text(member.role) %>
+          </div>
+          <div class="col-span-6 md:col-span-2 flex flex-col gap-2 main-text-lg-normal items-center md:items-end main-text-lg-normal pb-3 md:pb-0 ">
+            <% if member.active_learner? && policy(:course_assigns).new? %>
+              <%= link_to new_course_assign_path(user_id: member, source_path: team_path(team)) do %>
+                <%= render 'shared/components/label_medium_notice', label: 'Assign course', icon_name: 'icon-assign-user' %>
+              <% end %>
+            <% end %>
+
+            <% if InvitePolicy.new(current_user, member).resend? %>
+              <%= link_to resend_invite_path(member, team_id: team.id), data: { turbo_method: "put" }, class:"w-full px-4 md:px-0" do %>
+                <%= button_component text: 'Re-Invite', type: 'outline', icon_name: 're-invite' %>
+              <% end %>
+            <% end %>
+          </div>
+
+        </div>
+      <% end %>
+      <% if members.prev_page || members.next_page %>
+        <div class="py-4 flex justify-center">
+          <%= paginator_component(collection: members, path: user_searches_path(team_id: team.id, all_members:, term:)) %>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+</div>

data/app/views/view_components/menu_component/_menu_component.html.erb

@@ -0,0 +1,16 @@
+<div class="menu-component-container" data-controller="menu-component">
+  <button type="button" class="menu-component-button"
+          data-action="click->menu-component#toggleDropdown" data-menu-component-target="menuButton">
+    <%= icon("ellipsis-vertical", css: "menu-component-button-icon") %>
+  </button>
+
+  <div class="absolute menu-component-list-box hidden <%= position_class %>"
+       data-menu-component-target="moreMenu"
+       <%= tag.attributes(html_options) %>>
+    <div class="menu-component-list">
+      <% menu_items.each do |item| %>
+        <%= render "view_components/menu_component/menu_item_#{item.type}", item: item %>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/views/view_components/menu_component/_menu_item_button.html.erb

@@ -0,0 +1,17 @@
+<% button_content = capture do %>
+  <%= button_to item.url,
+    item.options.reverse_merge(
+      method: :post,
+      class: "main-text-md-normal menu-component-list-items #{item.extra_classes}"
+    ) do %>
+    <span class="main-text-md-normal"><%= item.label %></span>
+  <% end %>
+<% end %>  
+<%= item.options[:tooltip_text].present? ?
+  render(
+    'shared/components/tooltip',
+    tooltip_position: item.options[:tooltip_position] || 'right',
+    tooltip_text: item.options[:tooltip_text]
+  ) { button_content } :
+  button_content
+%>

data/app/views/view_components/menu_component/_menu_item_link.html.erb

@@ -0,0 +1,5 @@
+<%= link_to item.url,
+  { class: "main-text-md-normal menu-component-list-items #{item.extra_classes} whitespace-nowrap" }
+    .merge(item.options || {}) do %>
+  <%= item.label %>
+<% end %>

data/app/views/view_components/menu_component_old/_menu_component.html.erb

@@ -0,0 +1,17 @@
+<div class="relative mt-1" data-controller="more-action">
+  <button type="button" class="flex items-center cursor-pointer rounded-full bg-line-colour hover:bg-primary-light-100"
+          data-action="click->more-action#toggleDropdown">
+    <%= icon("ellipsis-vertical", css: "#{icon_class.presence || 'h-4 w-4'} rounded-full") %>
+  </button>
+
+  <div class="absolute right-0 bg-white rounded box-shadow-medium hidden mt-3 z-50 text-slate-grey-50 whitespace-nowrap"
+       data-more-action-target="moreMenu"
+       <%= tag.attributes(html_options) %>>
+    <div class="pt-2 pb-2 flex flex-col">
+      <% menu_items.each do |item| %>
+        <%= render "view_components/menu_component_old/menu_item_#{item.type}", item: item %>
+      <% end %>
+    </div>
+  </div>
+</div>
+

data/app/views/view_components/menu_component_old/_menu_item_button.html.erb

@@ -0,0 +1,7 @@
+<%= button_to item.url,
+  item.options.reverse_merge(
+    method: :post,
+    class: "px-4 py-2 hover:bg-primary-light-50 flex w-full #{item.extra_classes}"
+  ) do %>
+  <span class="text-sm font-medium"><%= item.label %></span>
+<% end %>

data/app/views/view_components/menu_component_old/_menu_item_link.html.erb

@@ -0,0 +1,5 @@
+<%= link_to item.url,
+  { class: "px-4 py-2 hover:bg-primary-light-50 text-sm font-medium #{item.extra_classes} whitespace-nowrap" }
+    .merge(item.options || {}) do %>
+  <%= item.label %>
+<% end %>

data/app/views/view_components/modal_component/_modal_box_component.html.erb

@@ -0,0 +1,28 @@
+<%= turbo_frame_tag 'modal' do %>
+<div data-controller="modal-loader" class="relative">
+    <div class="modal-wrapper" data-controller="modals" data-modals-target="modalBox">     
+      <div class="<%= container_class %>">
+        <div data-modal-loader-target="loader"
+             class="hidden absolute flex modal-loader-container">
+          <div class="modal-loader"></div>
+        </div>
+        <div class="modal-content" <%= tag.attributes(html_options) %>>
+          <% if modal.title.present? %>
+            <div class="modal-header">
+              <span class="main-text-lg-semibold"><%= modal.title %></span>
+              <button data-action="click->modals#closeModal">
+                <%= icon("x-circle", css: "h-6 w-6") %>
+              </button>
+            </div>
+          <% end %>
+          <div class="modal-body">
+            <%= body %>
+          </div>
+          <%= content_tag :div, class: "modal-footer" do %>
+            <%= modal_footer %>
+          <% end if modal_footer %>
+        </div>
+      </div>
+    </div>
+  </div>
+<% end %>

data/app/views/view_components/modals/_modal_component.html.erb

@@ -0,0 +1,25 @@
+<%= turbo_frame_tag 'modal' do %>
+  <div data-controller="modal-loader" class="relative">
+    <div class="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-[9999]" data-controller="modals" data-modals-target="modalBox">
+      <div class="relative w-[326px] md:w-[462px]">
+
+        <div data-modal-loader-target="loader"
+             class="hidden absolute inset-0 z-[10000] flex items-center justify-center bg-white bg-opacity-60 rounded-lg">
+          <div class="loader animate-spin border-4 border-primary border-t-transparent rounded-full w-10 h-10"></div>
+        </div>
+
+        <div class="bg-white rounded-lg w-full z-[9999]">
+          <div class="flex items-center justify-between border-b border-line-colour-light p-6">
+            <span class="heading heading-semibold"><%= title %></span>
+            <button data-action="click->modals#closeModal">
+              <span class="icon icon-close icon-base bg-letter-color"></span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <%= body %>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+<% end %>

data/app/views/view_components/notification_bar/_notification_bar.html.erb

@@ -0,0 +1,17 @@
+<div class="h-8 shadow-md border border-line-colour-light flex items-center justify-between px-4 <%= bg_color %>" 
+     data-controller="notification-bar"
+     data-notification-bar-target="banner">  
+  
+  <% if text.present? %>
+    <div class="flex-1 flex justify-center">
+      <span class="text-sm <%= text_color %>">
+        <strong><%= text.html_safe %></strong>
+      </span>
+    </div>
+  <% end %>
+
+  <div class="flex items-center justify-end">
+    <span class="icon icon-close icon-small cursor-pointer <%= icon_color %>" 
+          data-action="click->notification-bar#close"></span>
+  </div>
+</div>

data/app/views/view_components/paginator/_next_page.html.erb

@@ -0,0 +1,7 @@
+<% if collection.next_page %>
+  <%= link_to query_url(path, {page: collection.next_page}), data: { turbo_stream: true }, class: 'inline-block' do %>
+    <%= button_component(text: 'Next', type: 'outline', icon_name: 'chevron-right', icon_position: 'right') %>
+  <% end %>
+<% else %>
+  <%= button_component(text: 'Next', type: 'outline', icon_name: 'chevron-right', icon_position: 'right', disabled: true) %>
+<% end %>

data/app/views/view_components/paginator/_paginator_component.html.erb

@@ -0,0 +1,6 @@
+<% if collection.prev_page || collection.next_page %>
+  <div class="flex gap-3 w-fit">
+    <%= render "view_components/paginator/prev_page", collection: collection, path: path %>
+    <%= render "view_components/paginator/next_page", collection: collection, path: path %>
+  </div>
+<% end %>

data/app/views/view_components/paginator/_prev_page.html.erb

@@ -0,0 +1,7 @@
+<% if collection.prev_page %>
+  <%= link_to query_url(path, {page: collection.prev_page}), data: { turbo_stream: true }, class: 'inline-block' do %>
+    <%= button_component(text: 'Prev', type: 'outline', icon_name: 'chevron-left') %>
+  <% end %>
+<% else %>
+  <%= button_component(text: 'Prev', type: 'outline', icon_name: 'chevron-left', disabled: true) %>
+<% end %>

data/app/views/view_components/profile_icon_component/_profile_icon.html.erb

@@ -0,0 +1,3 @@
+<span class="<%= profile_icon.profile_icon_style %>">
+  <%= profile_icon.letter %>
+</span>

data/app/views/view_components/progress_component/_progressbar.html.erb

@@ -0,0 +1,5 @@
+<div class="flex w-[52px] md:w-[120px] h-[6px] md:h-2 border-none">
+  <div class="h-1 grow bg-primary-light-100 w-full h-full border border-primary-light-100 rounded md:rounded-lg">
+    <div class="h-1 bg-primary h-full border rounded-sm md:rounded" style="width: <%= fill %>%"></div>
+  </div>
+</div>

data/app/views/view_components/typography/_h1_component.html.erb

@@ -0,0 +1 @@
+<%= content_tag :h1, text, html_options %>

data/app/views/view_components/typography/_h2_component.html.erb

@@ -0,0 +1 @@
+<%= content_tag :h2, text, html_options %>

data/app/views/view_components/typography/_h3_component.html.erb

@@ -0,0 +1 @@
+<%= content_tag :h3, text, html_options %>

data/app/views/view_components/typography/_heading_component.html.erb

@@ -0,0 +1,3 @@
+<div class="font-['Poppins']">
+  <%= content_tag :span, text, class: css %>
+</div>

data/app/views/view_components/typography/_link_component.html.erb

@@ -0,0 +1 @@
+<%= link_to text, url, html_options %>

data/app/views/view_components/typography/_linked_text_component.html.erb

@@ -0,0 +1,3 @@
+<%= link_to text, link, html_options.merge(
+  class: 'cursor-pointer text-xs font-normal md:text-sm hover:text-primary hover:font-medium'
+) %>

data/app/views/view_components/typography/_text_component.html.erb

@@ -0,0 +1 @@
+<%= content_tag tag, text, html_options %>

data/config/importmap.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+pin_all_from File.expand_path("../app/javascript/neo_components/controllers", __dir__),
+             under: "controllers",
+             to: "neo_components/controllers"

data/lib/neo_components/engine.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module NeoComponents
+  class Engine < ::Rails::Engine
+    def self.gem_root
+      Pathname.new(File.expand_path("../..", __dir__))
+    end
+
+    # Register Sprockets asset paths (icons + stylesheets)
+    initializer "neo_components.assets" do |app|
+      app.config.assets.paths << Engine.gem_root.join("app/assets/stylesheets")
+      app.config.assets.paths << Engine.gem_root.join("app/assets/icons")
+      app.config.assets.precompile += %w[icons.css]
+    end
+
+    # Register gem view path so partials under app/views/ are found
+    initializer "neo_components.view_paths" do
+      ActiveSupport.on_load(:action_controller) do
+        append_view_path NeoComponents::Engine.gem_root.join("app/views")
+      end
+    end
+
+    # Auto-include UiHelper into all ActionView contexts
+    initializer "neo_components.include_helpers" do
+      ActiveSupport.on_load(:action_view) do
+        include UiHelper
+      end
+    end
+
+    # Register gem's Stimulus controllers with importmap-rails
+    initializer "neo_components.importmap", before: "importmap" do |app|
+      if app.config.respond_to?(:importmap)
+        app.config.importmap.paths << Engine.gem_root.join("config/importmap.rb")
+        app.config.importmap.cache_sweepers << Engine.gem_root.join("app/javascript")
+      end
+    end
+  end
+end

data/lib/neo_components/version.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module NeoComponents
+  VERSION = "0.1.0"
+end

data/lib/neo_components.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+require "neo_components/version"
+require "neo_components/engine"