codengage_view_components 0.1.7 → 0.1.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 06a62f0948ab276ba1cf10218e6c8f18be676f2f24c21c70db98a4e4002be21f
-  data.tar.gz: 9a677bac627df7c41aad021d70f4fef6ba1974a6d9b32c2374a2b4e755bb1969
+  metadata.gz: fd28f76bd68a94bd05d84dca6be35e5acae3974cbb4fcadae89d9a5d1460999d
+  data.tar.gz: 4f6de8757125a6c496dc40620671c15ed922ac47fcd41d1879cb6a51cba1f112
 SHA512:
-  metadata.gz: 041ec368163945b9a169caceb40745c4eadb425e5c02ce2dec00b618ba2ebcba7c2438fbaf12525ed30d95564bf35583b7196ff9875c4ed1a0a7d541490713b9
-  data.tar.gz: b398e038f04e01f029b86a180b8581362043160dce56f277b7048f576da0be28b45b74685c004d84e46790fe77bf177018c5373eaa36409fce4f4aa7e2e1b9b9
+  metadata.gz: b995a430a14fa6838130a73115e70129819d3e0f6e70d8ff5478001e84ca1d149ec624881923e96458751fd60ba702e2cbffe9469c489a21eff0e2d3f65f3362
+  data.tar.gz: 5ded5f4f31659036aefdb0e72ce0d02765966dba5018a83dfcb400df75a4dea61ac4ec82cac5cec63e3e7bea630e25331e138cfa1e31f8949c9b5685ffb1765a

data/app/components/codengage_view_components/body_component.html.haml

@@ -0,0 +1,5 @@
+%tbody{ id: @id, class: @classes }
+  - if items.present?
+    - items.each do |item|
+      = item
+  = content

data/app/components/codengage_view_components/body_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module CodengageViewComponents
+  class BodyComponent < ApplicationComponent
+    renders_many :items, "CodengageViewComponents::ItemTableComponent"
+
+    def initialize(id: "items", classes: "")
+      @id = id
+      @classes = classes
+    end
+  end
+end

data/app/components/codengage_view_components/card_component.css

@@ -0,0 +1,16 @@
+.card {
+    @apply w-full overflow-hidden rounded-lg bg-white shadow;
+}
+
+.card__header,
+.card__footer {
+    @apply p-8;
+}
+
+.card__body {
+    @apply px-8;
+}
+
+.card__table {
+    @apply py-2;
+}

data/app/components/codengage_view_components/card_component.html.haml

@@ -0,0 +1,13 @@
+.card{ class: @options.fetch(:class, ''), data: @options.fetch(:data, {}) }
+  - if header?
+    %div{ class: @options.fetch(:header_class, 'card__header') }
+      = header
+  - if body?
+    .card__body
+      = body
+  - if table?
+    .card__table
+      = table
+  = if footer?
+    .card__footer
+      = footer

data/app/components/codengage_view_components/card_component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module CodengageViewComponents
+  class CardComponent < ApplicationComponent
+    renders_one :header
+    renders_one :body
+    renders_one :table
+    renders_one :footer
+
+    def initialize(options: {})
+      @options = options
+    end
+  end
+end

data/app/components/codengage_view_components/column_component.html.haml

@@ -0,0 +1,6 @@
+%td{ class: "#{@options.fetch(:class, nil)}" , data: @options.fetch(:data, {}), colspan: @options.fetch(:colspan, nil) }
+  - if @title.present?
+    .block.font-medium= @title
+  - if @description.present?
+    .block.text-sm.sm:text-xs.text-gray-400= @description
+  = content

data/app/components/codengage_view_components/column_component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module CodengageViewComponents
+  class ColumnComponent < ApplicationComponent
+    def initialize(title: nil, description: nil, options: {})
+      @title = title
+      @description = description
+      @options = options
+    end
+  end
+end

data/app/components/codengage_view_components/dropdown_component.rb

@@ -3,7 +3,7 @@
 module CodengageViewComponents
   class DropdownComponent < ApplicationComponent
     renders_one :trigger
-    renders_many :items, "Dropdown::ItemComponent"
+    renders_many :items, "CodengageViewComponents::ItemComponent"
 
     def initialize(id:, options: {})
       @id = id

data/app/components/codengage_view_components/empty_state_action_component.html.haml

@@ -0,0 +1,4 @@
+- if @href
+  = link_to @href, { class: "btn btn--primary flex items-center gap-2 #{@options.fetch(:class, '')}".strip, data: @options.fetch(:data, {}) } do
+    = lucide_icon @options.fetch(:icon, 'plus')
+    %span.font-medium= @value

data/app/components/codengage_view_components/empty_state_action_component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module CodengageViewComponents
+  class EmptyStateActionComponent < ApplicationComponent
+    def initialize(value:, href:, options: {})
+      @value = value
+      @href = href
+      @options = options
+    end
+  end
+end

data/app/components/codengage_view_components/empty_state_component.html.haml

@@ -0,0 +1,15 @@
+.my-10{ id: :empty_state, class: @options.fetch(:hidden, false) && 'hidden' }
+  .min-h-full.px-3.py-3.sm:px-6.sm:py-3.md:grid.md:place-items-center.lg:px-8{ class: @options.fetch(:class, '') }
+    .mx-auto.max-w-max
+      .sm:flex.sm:flex-col.sm:items-center.sm:justify-center.gap-y-2
+        %p.sm:flex-1.flex.justify-center.sm:justify-end.font-bold.tracking-tight.text-primary
+          .text-gray-300
+            = lucide_icon @icon, size: 40
+        .sm:flex-1.mt-6.sm:mt-0
+          %h5.text-gray-500.font-semibold.text-center.sm:text-lg= @title
+          %p.text-sm.text-gray-500.text-center.mt-1= @message
+          .mt-6.flex.sm:space-x-6
+            - actions.each do |action|
+              = action
+
+

data/app/components/codengage_view_components/empty_state_component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module CodengageViewComponents
+  class EmptyStateComponent < ApplicationComponent
+    renders_many :actions, CodengageViewComponents::EmptyStateActionComponent
+
+    def initialize(title:, message:, icon:, options: {})
+      @title = title
+      @message = message
+      @icon = icon
+      @options = options
+    end
+  end
+end

data/app/components/codengage_view_components/flash_component.html.haml

@@ -1,5 +1,5 @@
 - @messages.each do |message|
-  .flash{ class: message.bg, data: { controller: "flash-component" } }
+  .flash{ class: "#{message.bg} #{@classes}", data: { controller: "flash-component" } }
     .flash__icon
       = lucide_icon(message.icon, stroke: message.stroke)
     .flash__text

data/app/components/codengage_view_components/flash_component.rb

@@ -9,7 +9,8 @@ module CodengageViewComponents
       "alert"  => { bg: "bg-red-700",   stroke: "#DC3545", icon: "circle-alert" }
     }.freeze
 
-    def initialize(flash:)
+    def initialize(flash:, classes:)
+      @classes = classes
       @messages = flash.map do |type, text|
         style = STYLES[type]
         Message.new(type:, text: text.to_s, **style)

data/app/components/codengage_view_components/header_component.html.haml

@@ -0,0 +1,4 @@
+%thead{ class: @classes }
+  %tr
+    - cols.each do |col|
+      = col

data/app/components/codengage_view_components/header_component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module CodengageViewComponents
+  class HeaderComponent < ApplicationComponent
+    renders_many :cols, "CodengageViewComponents::ColumnComponent"
+
+    def initialize(classes: "")
+      @classes = classes
+    end
+  end
+end

data/app/components/codengage_view_components/item_table_component.html.haml

@@ -0,0 +1,15 @@
+- if @options.fetch(:href, false)
+  %tr.hoverable.group.print:break-inside-avoid{ id: @options.fetch(:id, object_id),
+                                                data: { controller: 'clickable',
+                                                        clickable_url_value: @options.fetch(:href, ''),
+                                                        clickable_turbo_value: @options.fetch(:turbo, true),
+                                                        clickable_frame_value: @options.fetch(:frame, '_top')
+                                                       }.merge(@options.fetch(:data, {})) }
+    - cols.each do |col|
+      = col
+    = content
+- else
+  %tr.print:break-inside-avoid{ id: @options.fetch(:id, object_id), class: "#{@options.fetch(:class, '')}", data: @options.fetch(:data, {}) }
+    - cols.each do |col|
+      = col
+    = content

data/app/components/codengage_view_components/item_table_component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module CodengageViewComponents
+  class ItemTableComponent < ApplicationComponent
+    renders_many :cols, "CodengageViewComponents::ColumnComponent"
+
+    def initialize(options: {})
+      @options = options
+    end
+  end
+end

data/app/components/codengage_view_components/paginator_component.html.haml

@@ -0,0 +1,42 @@
+- return unless @paginator && @paginator.pages > 1
+
+%nav#series-nav.pagy.series-nav.flex.items-center.justify-end.gap-4.mt-5{"aria-label" => "Pages series_nav"}
+  - if @paginator.page == 1
+    %span.text-gray-300.cursor-not-allowed.text-base= lucide_icon('chevrons-left', class: 'w-4 h-4')
+    %span.text-gray-300.cursor-not-allowed.text-base= lucide_icon('chevron-left', class: 'w-4 h-4')
+  - else
+    = link_to lucide_icon('chevrons-left', class: 'w-4 h-4'), @paginator.page_url(:first), aria: { label: "First" }
+    = link_to lucide_icon('chevron-left', class: 'w-4 h-4'),  @paginator.page_url(:previous), aria: { label: "Previous" }
+
+  - current = @paginator.page
+  - last    = @paginator.last
+
+  - if last <= 3
+    - pages_to_show = (1..last).to_a
+  - else
+    - case current
+      - when 1
+        - pages_to_show = [1, 2, 3]
+      - when last
+        - pages_to_show = [last - 2, last - 1, last]
+      - else
+        - pages_to_show = [current - 1, current, current + 1]
+
+  - pages_to_show = pages_to_show.map { _1.clamp(1, last) }.uniq
+
+
+  - pages_to_show.each do |num|
+    - if num == current
+      .bg-primary.text-white.px-2.py-1.font-semibold.text-sm{class: 'rounded-[10px]'}= num
+    - else
+      = link_to num, @paginator.page_url(num),
+        class: "rounded-[10px] px-2 py-1 hover:bg-gray-100 text-sm text-gray-500 font-semibold"
+
+
+
+  - if @paginator.last == @paginator.page
+    %span.page.text-gray-300.cursor-not-allowed= lucide_icon('chevron-right', class: 'w-4 h-4')
+    %span.page.text-gray-300.cursor-not-allowed= lucide_icon('chevrons-right', class: 'w-4 h-4')
+  - else
+    = link_to lucide_icon('chevron-right', class: 'w-4 h-4'),  @paginator.page_url(:next), aria: { label: "Next" }
+    = link_to lucide_icon('chevrons-right', class: 'w-4 h-4'), @paginator.page_url(:last), aria: { label: "Last" }

data/app/components/codengage_view_components/paginator_component.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+module CodengageViewComponents
+  class PaginatorComponent < ApplicationComponent
+    def initialize(paginator:, options: {})
+      @paginator = paginator
+      @options = options
+    end
+  end
+end

data/app/components/codengage_view_components/search_form_component.css

@@ -0,0 +1,81 @@
+.search-form {
+    @apply relative w-full text-gray-400 focus-within:text-gray-600;
+}
+
+.search-form__container {
+    @apply flex items-center w-full p-1;
+}
+
+.search-form__icon {
+    @apply pointer-events-none absolute inset-y-0 flex items-center pl-3;
+}
+
+.search-form__input {
+    @apply block outline-none w-full h-12 rounded-base border-0 border-[#E5E7EB] bg-[#F3F3F5] pl-12 pr-3 text-gray-700 ring-1 ring-gray-200 focus:ring-4 focus:ring-gray-300;
+}
+
+/* dropdown dentro de .search-form */
+.search-form .dropdown > button > div:not(.active) > svg {
+    animation: filter-arrow-reverse 0.2s cubic-bezier(1, 0, 0, 1) 0s 1 forwards;
+}
+
+.search-form .dropdown > button > div.active > svg {
+    animation: filter-arrow 0.2s cubic-bezier(1, 0, 0, 1) 0s 1 forwards;
+}
+
+.clear-filter__container {
+    @apply w-fit ml-1 text-primary gap-x-2 items-center mt-3 cursor-pointer hover:text-brand-blue
+}
+
+@keyframes filter-arrow {
+    0% {
+        transform: rotateX(0deg);
+    }
+    49% {
+        transform: rotateX(45deg);
+    }
+    50% {
+        transform: rotateX(135deg);
+    }
+    100% {
+        transform: rotateX(180deg);
+    }
+}
+
+@keyframes filter-arrow-reverse {
+    0% {
+        transform: rotateX(180deg);
+    }
+    49% {
+        transform: rotateX(135deg);
+    }
+    50% {
+        transform: rotateX(45deg);
+    }
+    100% {
+        transform: rotateX(0deg);
+    }
+}
+
+/*!* ss-main.always_dropdown *!*/
+/*.ss-main.always_dropdown,*/
+/*.ss-main.always_dropdown:focus,*/
+/*.ss-main.always_dropdown:hover {*/
+/*    @apply gap-1.5 text-base font-bold drop-shadow-none ring-0 shadow-none cursor-pointer flex relative mt-0;*/
+/*}*/
+
+/*.ss-main.always_dropdown::before {*/
+/*    content: "";*/
+/*    margin-right: calc(0.375rem + 1px);*/
+/*    @apply max-w-5 max-h-5 w-5 h-5 absolute bg-gray-300 rounded-full right-0 -z-10;*/
+/*}*/
+
+/*.ss-main.always_dropdown .ss-arrow path {*/
+/*    @apply brightness-[0.30] stroke-[14px];*/
+/*}*/
+
+/*!* ss-content.always_dropdown *!*/
+/*.ss-content.always_dropdown {*/
+/*    --tw-ring-shadow: none;*/
+/*    @apply border-gray-200 shadow-md rounded-md bg-white;*/
+/*}*/

data/app/components/codengage_view_components/search_form_component.html.haml

@@ -0,0 +1,12 @@
+= turbo_frame_tag :search_form, class: @options.fetch(:class, '') do
+  .flex.justify-between
+    .search-form__container
+      .search-form__icon
+        = lucide_icon 'search'
+      = @form.search_field :q, value: params[:q], class: "search-form__input", placeholder: @options.fetch(:placeholder, ''), data: { action: 'input->search#onType' }
+      - if defined?(form_params) && form_params.any?
+        - form_params.each do |k, v|
+          - next if v.blank?
+          = @form.hidden_field k, value: v
+    .flex.items-center.gap-4
+      = content

data/app/components/codengage_view_components/search_form_component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module CodengageViewComponents
+  class SearchFormComponent < ApplicationComponent
+    def initialize(url:, form:, options: {})
+      @url = url
+      @form = form
+      @options = options
+    end
+  end
+end

data/app/components/codengage_view_components/tab_item_component.css

@@ -0,0 +1,11 @@
+.tab__selected{
+    @apply bg-linear-to-r from-[#0046CE] to-[#7A5AF8] rounded-base py-1 px-4 text-white font-semibold flex items-center gap-2;
+}
+
+.tab__not-selected{
+    @apply hover:bg-gray-300 rounded-base py-1 px-4 text-gray-500 font-semibold flex items-center gap-2;
+}
+
+.tab__box{
+    @apply bg-gray-100 border border-gray-200 shadow-sm w-fit p-2 rounded-base flex items-center gap-5;
+}

data/app/components/codengage_view_components/tab_item_component.html.haml

@@ -0,0 +1,3 @@
+= link_to @url, class: tab_item_class do
+  = lucide_icon("#{@icon}", class: 'w-4 h-4')
+  = @text

data/app/components/codengage_view_components/tab_item_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module CodengageViewComponents
+  class TabItemComponent < ApplicationComponent
+    def initialize(url:, tab:, icon:, text:, classes:)
+      @url = url
+      @tab = tab
+      @icon = icon
+      @text = text
+      @classes = classes
+    end
+
+    def active?
+      params[:tab] == @tab
+    end
+
+    def tab_item_class
+      active? ? "tab__selected #{@classes}" : "tab__not-selected #{@classes}"
+    end
+  end
+end

data/app/components/codengage_view_components/table_component.css

@@ -0,0 +1,182 @@
+.c-table {
+    @apply block divide-y divide-gray-200 rounded-lg w-auto print:text-black print:w-full;
+}
+
+.c-table__head,
+.c-table__body {
+    @apply flex flex-col divide-y;
+}
+
+.c-table__head {
+    @apply font-semibold overflow-hidden bg-gray-500 rounded-t-lg print:font-bold;
+}
+
+.c-table__item {
+    @apply flex flex-row items-center box-border flex-nowrap px-1.5;
+}
+
+.c-table__body .c-table__item {
+    @apply hover:bg-gray-50;
+}
+
+.c-table__body .c-table__item.disable-hover {
+    @apply hover:bg-white;
+}
+
+.c-table__head .c-table__item:first-child {
+    @apply rounded-t-lg;
+}
+
+.c-table__body > turbo-frame:last-of-type > li > .c-table__item,
+.c-table__body > turbo-frame:last-of-type > .c-table__item {
+    @apply rounded-b-lg;
+}
+
+.c-table__column {
+    @apply flex items-center px-1.5 py-1.5 print:py-1.5 leading-4 whitespace-normal box-border flex-shrink-0;
+    min-height: 3rem;
+}
+
+.c-table__column--check {
+    @apply justify-center flex-shrink-0;
+    width: 3.5rem;
+}
+
+.c-table__column--flag {
+    @apply justify-center text-center flex-shrink-0;
+    width: 8rem;
+}
+
+.c-table__column--avatar {
+    @apply justify-start flex-shrink-0 w-14;
+}
+
+.c-table__column--name {
+    @apply items-center font-bold text-left;
+}
+
+.c-table__column--description {
+    @apply flex flex-col justify-center items-start flex-1 space-y-1;
+}
+
+.c-table__column--amount,
+.c-table__column--type{
+    @apply w-32 xl:w-36 font-bold text-left;
+}
+
+.c-table__column--status {
+    @apply xl:w-52 font-bold text-left;
+}
+
+.c-table__column--date {
+    @apply w-24 xl:w-28;
+}
+
+.c-table__column--contact {
+    @apply w-24 xl:w-40;
+}
+
+.c-table__column--others {
+    @apply truncate flex-shrink-0;
+    width: 10rem;
+}
+
+.c-table__column--phone-number {
+    @apply truncate flex-shrink-0;
+    width: 10rem;
+}
+
+.c-table__column--person-type,
+.c-table__column--seller {
+    @apply items-center font-bold text-center justify-center;
+}
+
+.c-table__column--cell_phone-number {
+    @apply truncate flex-shrink-0;
+    width: 10rem;
+}
+
+.c-table__column--email {
+    @apply truncate flex-shrink-0 w-[30%];
+}
+
+.c-table__column--datetime {
+    @apply whitespace-nowrap font-bold;
+    width: 11rem;
+}
+
+.c-table__column--document-1,
+.c-table__column--document-2,
+.c-table__column--id {
+    @apply text-left font-bold justify-center;
+}
+
+.c-table__column--actions {
+    @apply text-right font-bold justify-center;
+}
+
+.table-component {
+    @apply rounded-xl table-auto sm:table-fixed w-full print:text-black print:w-full divide-y divide-gray-200 border border-gray-200 overflow-hidden shadow-md;
+}
+
+.table-component > thead {
+    @apply font-semibold;
+}
+
+.table-component > thead > tr > td a:hover {
+    @apply text-primary underline;
+}
+
+.table-component > tbody {
+    @apply divide-y divide-gray-200;
+}
+
+.table-component > tbody > tr.disabled {
+    @apply opacity-50 cursor-not-allowed pointer-events-none line-through;
+}
+
+.table-component > tbody > tr.hoverable:hover > td {
+    @apply bg-gray-100;
+}
+
+.table-component > tbody > tr > td:first-child,
+.table-component > thead > tr > td:first-child {
+    @apply pl-3;
+}
+
+.table-component > tbody > tr > td:last-child,
+.table-component > thead > tr > td:last-child {
+    @apply pr-3;
+}
+
+.table-component td {
+    @apply px-1.5 py-1.5 h-12 leading-4;
+}
+
+.table-component__actions {
+    @apply flex items-center justify-center space-x-1.5;
+}
+
+.table-component__content {
+    @apply w-auto relative;
+}
+
+.table-component__content .tooltip {
+    @apply truncate cursor-default;
+}
+
+.table-component__content .tooltip-text {
+    @apply invisible bg-gray-900 text-white cursor-default text-center absolute -bottom-4 z-10 rounded-md px-3 py-1.5 w-max left-1/3;
+}
+
+.table-component__content:hover .tooltip-text {
+    @apply visible;
+}
+
+.table-component__form-buttons {
+    @apply flex items-center justify-end space-x-1.5;
+}
+
+.table-component__role-value {
+    @apply bg-white rounded-md h-6 w-fit border border-gray-300 text-xs font-semibold text-gray-900 flex items-center p-2;
+}

data/app/components/codengage_view_components/table_component.html.haml

@@ -0,0 +1,7 @@
+%table.table-component{ class: @options.fetch(:class, ''), data: @options.fetch(:data, {}) }
+  - if header
+    = header
+  - if bodies.any?
+    - bodies.each do |body|
+      = body
+  = content

data/app/components/codengage_view_components/table_component.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module CodengageViewComponents
+  class TableComponent < ApplicationComponent
+    renders_one :header, "CodengageViewComponents::HeaderComponent"
+    renders_many :bodies, "CodengageViewComponents::BodyComponent"
+
+    def initialize(variant: :normal, options: {})
+      @variant = variant
+      @options = options
+    end
+  end
+end

data/app/components/codengage_view_components/toggle_component.css

@@ -0,0 +1,31 @@
+.toggle {
+    @apply relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2;
+}
+
+.toggle:disabled {
+    @apply opacity-50 cursor-not-allowed;
+}
+
+.toggle__bg {
+    @apply pointer-events-none absolute h-full w-full rounded-md bg-transparent;
+}
+
+.toggle__bar {
+    @apply bg-gray-200 pointer-events-none absolute mx-2 h-4 w-9 rounded-full transition-colors duration-200 ease-in-out;
+}
+
+.toggle__pin {
+    @apply translate-x-0 pointer-events-none absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow ring-0 transition-transform duration-200 ease-in-out;
+}
+
+.toggle__pin--active {
+    @apply translate-x-5;
+}
+
+.toggle--active > .toggle__bar {
+    @apply bg-primary;
+}
+
+.toggle--active > .toggle__pin {
+    @apply translate-x-5;
+}

data/app/components/codengage_view_components/toggle_component.html.haml

@@ -0,0 +1,43 @@
+- if form_mode?
+  .nav.flex.items-center{ data: { controller: "toggle" } }
+    = @form.hidden_field @attribute,
+                        value: @value,
+                        data: { toggle_target: "input" }
+
+    - button_data   = @options.fetch(:data, {}).merge(toggle_target: "button").compact
+    - extra_action  = @options.fetch(:data, {})[:action]
+    - action_value  = ["click->toggle#switch", extra_action].reject(&:blank?).join(" ")
+
+    - button_data[:action] = action_value if action_value.present?
+
+    = button_tag type: "button",
+                 class: "toggle",
+                 disabled: @disabled,
+                 role: "switch",
+                 id: @id,
+                 data: button_data do
+      %span.toggle__bg{ "aria-hidden": true }
+      %span.toggle__bar{ "aria-hidden": true, data: { toggle_target: :bar } }
+      %span.toggle__pin{ "aria-hidden": true, data: { toggle_target: :pin } }
+
+- elsif remote_mode?
+  - button_data  = @options.fetch(:data, {}).merge(toggle_target: "button")
+  - action_value = @options.fetch(:action, "click->toggle#switch")
+
+  - button_data[:action] = action_value if action_value.present?
+
+  %div{ data: { controller: "toggle" } }
+    = button_to url,
+                method: @method,
+                value: @enabled,
+                params: @params,
+                class: "toggle",
+                role: "switch",
+                disabled: @disabled,
+                onclick: "event.stopPropagation()",
+                id: @id,
+                "aria-checked": @enabled,
+                data: button_data do
+      %span.toggle__bg{ "aria-hidden": true }
+      %span.toggle__bar{ "aria-hidden": true, data: { toggle_target: :bar } }
+      %span.toggle__pin{ "aria-hidden": true, data: { toggle_target: :pin } }

data/app/components/codengage_view_components/toggle_component.rb

@@ -0,0 +1,66 @@
+# frozen_string_literal: true
+
+module CodengageViewComponents
+  class ToggleComponent < ViewComponent::Base
+    # Uso:
+    # - Form mode:
+    #   = render Form::ToggleComponent.new(form: f, attribute: :status, options: { id: "user-active-toggle" })
+    #
+    # - Remote mode:
+    #   = render Form::ToggleComponent.new(url: user_path(user), options: { method: :patch, enabled: user.active? })
+
+    def initialize(form: nil, attribute: nil, url: nil, value: nil, options: {})
+      @form = form
+      @attribute = attribute
+      @url = url
+      @value = value
+
+      # Defaults centralizados aqui
+      @id = options.fetch(:id, nil)
+      @disabled = options.fetch(:disabled, false)
+
+      @method = options.fetch(:method, :patch)
+      @enabled = options.fetch(:enabled, false)
+      @params = options.fetch(:params, {})
+
+      @options = options.except(:id, :value, :disabled, :method, :enabled, :params)
+
+      validate_configuration!
+    end
+
+    private
+
+    def validate_configuration!
+      if form_mode?
+        validate_form_mode!
+      elsif remote_mode?
+        validate_remote_mode!
+      else
+        raise ArgumentError,
+              "Você precisa fornecer `form` e `attribute`, ou `url` (modo remoto)."
+      end
+    end
+
+    def form_mode?
+      @form.present? && @attribute.present?
+    end
+
+    def remote_mode?
+      @url.present?
+    end
+
+    def validate_form_mode!
+      if @url.present?
+        raise ArgumentError,
+              "No modo form, não use `url`. Use apenas `form:` e `attribute:`."
+      end
+    end
+
+    def validate_remote_mode!
+      unless @method.respond_to?(:to_sym)
+        raise ArgumentError,
+              "O método HTTP deve ser algo como :get, :post, :patch, :put ou :delete."
+      end
+    end
+  end
+end

data/app/components/codengage_view_components/turbo_drawer_component.html.erb

@@ -0,0 +1,46 @@
+<%= turbo_frame_tag :drawer do %>
+  <%= tag.div data: { controller: "turbo-drawer", action: token_list(
+    @close_on_submit ? "turbo:submit-end->turbo-drawer#submitEnd" : nil,
+    "keyup@window->turbo-drawer#closeWithKeyboard",
+    "mousedown@window->turbo-drawer#closeBackground"
+  ) }, class: "relative z-auto" do %>
+    <%= tag.div class: "fixed inset-0 bg-black/50 z-40 hidden", data: { turbo_drawer_target: :backdrop, action: "click->turbo-drawer#hideDrawer" } %>
+    <%= tag.div class: "z-50 pointer-events-none fixed inset-y-0 right-0 flex #{@options.fetch(:max_w, 'max-w-md')} sm:max-w-full sm:pl-10" do %>
+      <%= tag.div id: 'drawer_body', class: "pointer-events-auto w-screen #{@options.fetch(:max_w, 'max-w-md')} hidden",
+                  data: { turbo_drawer_target: :drawer,
+                          transition_enter: "transition ease-in-out duration-200 transform",
+                          transition_enter_start: "translate-x-full",
+                          transition_enter_end: "translate-x-0",
+                          transition_leave: "transition ease-in-out duration-100 transform",
+                          transition_leave_start: "translate-x-0",
+                          transition_leave_end: "translate-x-full" } do %>
+        <%= tag.div class: 'flex h-full flex-col bg-white shadow-xl overflow-auto' do %>
+          <%= tag.div class: 'py-6 px-3 sm:px-6 sticky top-0 bg-white z-50 border-b border-gray-200' do %>
+            <%= tag.div class: 'flex items-start justify-between' do %>
+              <%= tag.div class: 'block space-y-2' do %>
+                <%= tag.div class: 'text-2xl font-semibold text-gray-40 items-center flex gap-x-2' do %>
+                  <%= @title %>
+                <% end %>
+                <% if @subtitle.present? %>
+                  <%= tag.div class: 'text-sm text-gray-30' do %>
+                    <%= @subtitle %>
+                  <% end %>
+                <% end %>
+              <% end %>
+              <%= tag.div class: 'ml-3 flex h-8 items-center' do %>
+                <%= button_tag data: { action: "turbo-drawer#hideDrawer" }, type: "button", class: 'cursor-pointer', id: 'close_drawer' do %>
+                  <%= lucide_icon "x" %>
+                <% end %>
+              <% end %>
+            <% end %>
+          <% end %>
+          <%= tag.div class: 'flex-1 mb-6 flex flex-col' do %>
+            <%= tag.div class: 'px-10 pt-10 sm:px-6 flex-1 flex flex-col' do %>
+              <%= content %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/codengage_view_components/turbo_drawer_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module CodengageViewComponents
+  class TurboDrawerComponent < ApplicationComponent
+    def initialize(title:, subtitle: nil, close_on_submit: true, options: {})
+      @title = title
+      @subtitle = subtitle
+      @close_on_submit = close_on_submit
+      @options = options
+    end
+  end
+end

data/app/components/codengage_view_components/turbo_modal_component.html.erb

@@ -0,0 +1,103 @@
+<%= turbo_frame_tag :modal, class: "overflow-hidden print:hidden" do %>
+  <%= tag.div class: "relative z-30", role: "dialog",
+              aria: { labelledby: "modal-title", modal: true },
+              data: { controller: "turbo-modal  #{@options.fetch(:controller, '')}",
+                      action: token_list("turbo:submit-end->turbo-modal#submitEnd") } do %>
+    <!--
+      Background backdrop, show/hide based on modal state.
+      Entering: "ease-out duration-300"
+      From: "opacity-0"
+      To: "opacity-100"
+      Leaving: "ease-in duration-200"
+      From: "opacity-100"
+      To: "opacity-0"
+    -->
+    <%= tag.div(
+          class: "fixed inset-0 bg-black/60 hidden",
+          data: {
+            turbo_modal_target: "backdrop",
+            action: "click->turbo-modal#hideModal",
+            transition_enter: "transition-opacity ease-out duration-300",
+            transition_enter_start: "opacity-0",
+            transition_enter_end: "opacity-100",
+            transition_leave: "transition-opacity ease-in duration-200",
+            transition_leave_start: "opacity-100",
+            transition_leave_end: "opacity-0"
+          }
+        ) %>
+    <%= tag.div class: "fixed inset-0 z-40 overflow-y-auto" do %>
+      <%= tag.div class: "flex min-h-full items-stretch justify-center text-center sm:items-center" do %>
+        <!--
+          Modal panel, show/hide based on modal state.
+          Entering: "ease-out duration-300"
+          From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          To: "opacity-100 translate-y-0 sm:scale-100"
+          Leaving: "ease-in duration-200"
+          From: "opacity-100 translate-y-0 sm:scale-100"
+          To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+        -->
+        <!-- HEADER -->
+        <%= tag.div class: "relative transform sm:rounded-lg bg-white text-left shadow-xl transition-all sm:m-6 w-full #{modal_size_class} hidden",
+                    data: { turbo_modal_target: 'modal',
+                            transition_enter: "ease-out duration-300",
+                            transition_enter_start: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
+                            transition_enter_end: "opacity-100 translate-y-0 sm:scale-100",
+                            transition_leave: "ease-in duration-200",
+                            transition_leave_start: "opacity-100 translate-y-0 sm:scale-100",
+                            transition_leave_end: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" } do %>
+
+          <% if @title.present? %>
+            <!-- HEADER normal (com título) -->
+            <%= tag.div class: "flex items-center space-x-3 pl-7 pr-3 pt-1 print:hidden" do %>
+              <%= tag.div class: "block flex-1 truncate" do %>
+                <div class="flex items-center gap-x-2">
+                  <% if @icon.present? %>
+                    <%= lucide_icon @icon %>
+                  <% end %>
+                  <h5 class="text-primary w-fit text-nowrap font-semibold leading-6 pt-6 mt-0 <%= @options.fetch(:title_class, '') %>">
+                    <%= @title %>
+                  </h5>
+                </div>
+              <% end %>
+
+              <% unless @without_close.present? %>
+                <%= tag.div class: "block flex-shrink-0" do %>
+                  <%= button_tag id: 'close_modal',
+                                 data: { action: "turbo-modal#hideModal" },
+                                 type: "button" do %>
+                    <%= lucide_icon 'x' %>
+                  <% end %>
+                <% end %>
+              <% end %>
+            <% end %>
+          <% else %>
+            <!-- Sem header: só o X absoluto no canto superior direito -->
+            <% unless @without_close.present? %>
+              <%= button_tag id: 'close_modal',
+                             class: "absolute top-4 right-4 inline-flex items-center cursor-pointer justify-center print:hidden",
+                             data: { action: "turbo-modal#hideModal" },
+                             type: "button" do %>
+                <%= lucide_icon 'x' %>
+              <% end %>
+            <% end %>
+          <% end %>
+
+          <!-- BODY -->
+          <% if bodies.present? %>
+            <% bodies.each do |body| %>
+              <%= tag.div id: 'modal_body', class: "block sm:p-3 " do %>
+                <%= body %>
+              <% end %>
+            <% end %>
+          <% end %>
+
+          <% if content.present? %>
+            <%= tag.div class: "block p-7" do %>
+              <%= content %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/codengage_view_components/turbo_modal_component.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module CodengageViewComponents
+  class TurboModalComponent < ApplicationComponent
+    renders_many :bodies, "CodengageViewComponents::BodyComponent"
+
+    def initialize(title: nil, icon: nil, size: :lg, without_close: false, options: {})
+      @title = title
+      @icon = icon
+      @size = size
+      @without_close = without_close
+      @options = options
+    end
+
+    def modal_size_class
+      case @size
+      when :sm
+        "sm:max-w-sm"
+      when :md
+        "sm:max-w-md"
+      when :lg
+        "sm:max-w-lg"
+      when :xl
+        "sm:max-w-xl"
+      when :xl2
+        "sm:max-w-2xl"
+      when :xl3
+        "sm:max-w-3xl"
+      when :xl4
+        "sm:max-w-4xl"
+      when :xl5
+        "sm:max-w-5xl"
+      when :xl6
+        "sm:max-w-6xl"
+      when :xl7
+        "sm:max-w-7xl"
+      when :xl8
+        "sm:max-w-[1500px]"
+      when :full
+        "sm:max-w-full"
+      else
+        "sm:max-w-lg"
+      end
+    end
+  end
+end

data/app/javascript/controllers/search_controller.js

@@ -0,0 +1,79 @@
+import { Controller } from "@hotwired/stimulus"
+import debounce from "lodash/debounce"
+
+export default class extends Controller {
+    static targets = ["clear"]
+
+    connect() {
+        this.debouncedSubmit = debounce(() => {
+            this.element.querySelector("form")?.requestSubmit()
+        }, 300)
+
+        this.updateClearButtonVisibility()
+    }
+
+    onType(event) {
+        this.updateClearButtonVisibility()
+        this.debouncedSubmit()
+    }
+
+    onFilterChange(event) {
+        this.updateClearButtonVisibility()
+        this.element.querySelector("form")?.requestSubmit()
+    }
+
+    resetFilters(event) {
+        event.preventDefault()
+        const form = this.element.querySelector("form")
+        if (!form) return
+
+        form.reset()
+
+        const qInput = form.querySelector("input[name='q']")
+        if (qInput) qInput.value = ""
+
+        const selects = Array.from(form.querySelectorAll("select"))
+
+        selects.forEach(select => {
+            select.value = ""
+            select.dispatchEvent(new Event("change"))
+        })
+
+
+        if (this.hasClearTarget) {
+            this.clearTarget.classList.add("hidden")
+            this.clearTarget.classList.remove("flex")
+        }
+
+        form.requestSubmit()
+    }
+
+    updateClearButtonVisibility() {
+        if (!this.hasClearTarget) return
+
+        const form = this.element.querySelector("form")
+        const qInput = form.querySelector("input[name='q']")
+        const selects = Array.from(form.querySelectorAll("select"))
+
+        const hasSearch = qInput && qInput.value.trim().length > 0
+        const hasSelect = selects.some(select => select.value !== "")
+
+        const shouldShow = hasSearch || hasSelect
+
+        this.clearTarget.classList.toggle("hidden", !shouldShow)
+
+        if (shouldShow) {
+            this.clearTarget.classList.remove("hidden")
+            this.clearTarget.classList.add("flex")
+        } else {
+            this.clearTarget.classList.add("hidden")
+            this.clearTarget.classList.remove("flex")
+        }
+    }
+
+    disconnect() {
+        if (this.debouncedSubmit?.cancel) {
+            this.debouncedSubmit.cancel()
+        }
+    }
+}

data/app/javascript/controllers/toggle_controller.js

@@ -0,0 +1,26 @@
+import {Controller} from "@hotwired/stimulus"
+
+export default class extends Controller {
+    static targets = ["bar", "pin", "button", "input"]
+
+    connect() {
+        if (this.hasInputTarget) {
+            if (this.inputTarget.value === 'true') {
+                this.buttonTarget.classList.add('toggle--active')
+                this.buttonTarget.dispatchEvent(new Event('change', { bubbles: true }))
+            }
+        } else {
+            if (this.buttonTarget.value === 'true') {
+                this.buttonTarget.classList.add('toggle--active')
+                this.buttonTarget.dispatchEvent(new Event('change', { bubbles: true }))
+            }
+        }
+    }
+
+
+    switch(event) {
+        this.buttonTarget.classList.toggle('toggle--active')
+        this.buttonTarget.dispatchEvent(new Event('change', { bubbles: true }))
+        this.inputTarget.value = this.buttonTarget.classList.contains('toggle--active')
+    }
+}

data/config/importmap.rb

@@ -1,4 +1,6 @@
 pin_all_from File.expand_path("../app/javascript/controllers", __dir__), under: "controllers"
 
 pin "flowbite-datepicker", to: "https://cdn.jsdelivr.net/npm/flowbite-datepicker@1.3.0/dist/js/datepicker-full.js"
-pin "flowbite-datepicker-pt-BR", to: "https://cdn.jsdelivr.net/npm/flowbite-datepicker@1.3.0/dist/js/locales/pt-BR.js"
+pin "flowbite-datepicker-pt-BR", to: "https://cdn.jsdelivr.net/npm/flowbite-datepicker@1.3.0/dist/js/locales/pt-BR.js"
+pin "lodash", to: "https://ga.jspm.io/npm:lodash@4.17.21/lodash.js" # @4.17.21
+pin "lodash/debounce", to: "https://ga.jspm.io/npm:lodash@4.17.21/debounce.js" # @4.17.21

data/lib/codengage_view_components/version.rb

@@ -1,3 +1,3 @@
 module CodengageViewComponents
-  VERSION = "0.1.7"
+  VERSION = "0.1.8"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: codengage_view_components
 version: !ruby/object:Gem::Version
-  version: 0.1.7
+  version: 0.1.8
 platform: ruby
 authors:
 - Gabriel Karlinski Baldo
@@ -92,16 +92,49 @@ files:
 - Rakefile
 - app/assets/stylesheets/codengage_view_components/application.css
 - app/components/codengage_view_components/application_component.rb
+- app/components/codengage_view_components/body_component.html.haml
+- app/components/codengage_view_components/body_component.rb
+- app/components/codengage_view_components/card_component.css
+- app/components/codengage_view_components/card_component.html.haml
+- app/components/codengage_view_components/card_component.rb
+- app/components/codengage_view_components/column_component.html.haml
+- app/components/codengage_view_components/column_component.rb
 - app/components/codengage_view_components/date_field_component.css
 - app/components/codengage_view_components/date_field_component.html.haml
 - app/components/codengage_view_components/date_field_component.rb
 - app/components/codengage_view_components/dropdown_component.html.haml
 - app/components/codengage_view_components/dropdown_component.rb
+- app/components/codengage_view_components/empty_state_action_component.html.haml
+- app/components/codengage_view_components/empty_state_action_component.rb
+- app/components/codengage_view_components/empty_state_component.html.haml
+- app/components/codengage_view_components/empty_state_component.rb
 - app/components/codengage_view_components/flash_component.css
 - app/components/codengage_view_components/flash_component.html.haml
 - app/components/codengage_view_components/flash_component.rb
+- app/components/codengage_view_components/header_component.html.haml
+- app/components/codengage_view_components/header_component.rb
 - app/components/codengage_view_components/item_component.html.haml
 - app/components/codengage_view_components/item_component.rb
+- app/components/codengage_view_components/item_table_component.html.haml
+- app/components/codengage_view_components/item_table_component.rb
+- app/components/codengage_view_components/paginator_component.html.haml
+- app/components/codengage_view_components/paginator_component.rb
+- app/components/codengage_view_components/search_form_component.css
+- app/components/codengage_view_components/search_form_component.html.haml
+- app/components/codengage_view_components/search_form_component.rb
+- app/components/codengage_view_components/tab_item_component.css
+- app/components/codengage_view_components/tab_item_component.html.haml
+- app/components/codengage_view_components/tab_item_component.rb
+- app/components/codengage_view_components/table_component.css
+- app/components/codengage_view_components/table_component.html.haml
+- app/components/codengage_view_components/table_component.rb
+- app/components/codengage_view_components/toggle_component.css
+- app/components/codengage_view_components/toggle_component.html.haml
+- app/components/codengage_view_components/toggle_component.rb
+- app/components/codengage_view_components/turbo_drawer_component.html.erb
+- app/components/codengage_view_components/turbo_drawer_component.rb
+- app/components/codengage_view_components/turbo_modal_component.html.erb
+- app/components/codengage_view_components/turbo_modal_component.rb
 - app/controllers/codengage_view_components/application_controller.rb
 - app/controllers/codengage_view_components/pages_controller.rb
 - app/helpers/codengage_view_components/application_helper.rb
@@ -109,6 +142,8 @@ files:
 - app/javascript/controllers/datepicker_controller.js
 - app/javascript/controllers/flash_component_controller.js
 - app/javascript/controllers/index.js
+- app/javascript/controllers/search_controller.js
+- app/javascript/controllers/toggle_controller.js
 - app/jobs/codengage_view_components/application_job.rb
 - app/mailers/codengage_view_components/application_mailer.rb
 - app/models/codengage_view_components/application_record.rb