neo_components 0.1.0

data/app/assets/stylesheets/icons.css.erb

@@ -0,0 +1,244 @@
+.icon-academy {
+    -webkit-mask: url("<%= asset_url('academy.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('academy.svg') %>") no-repeat center;
+}
+.icon-adjustments-vertical {
+    -webkit-mask: url("<%= asset_url('adjustments-vertical.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('adjustments-vertical.svg') %>") no-repeat center;
+}
+.icon-arrow-down,.icon-arrow-long-down {
+    -webkit-mask: url("<%= asset_url('arrow-long-down.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('arrow-long-down.svg') %>") no-repeat center;
+}
+.icon-arrow-long-right{
+    -webkit-mask: url("<%= asset_url('arrow-long-right.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('arrow-long-right.svg') %>") no-repeat center;
+}
+.icon-arrow-right{
+    -webkit-mask: url("<%= asset_url('arrow-right.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('arrow-right.svg') %>") no-repeat center;
+}
+.icon-arrow-left {
+    -webkit-mask: url("<%= asset_url('arrow-left.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('arrow-left.svg') %>") no-repeat center;
+}
+.icon-arrow-up,.icon-arrow-long-up {
+    -webkit-mask: url("<%= asset_url('arrow-long-up.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('arrow-long-up.svg') %>") no-repeat center;
+}
+.icon-assign-user {
+    -webkit-mask: url("<%= asset_url('assign-user.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('assign-user.svg') %>") no-repeat center;
+}
+.icon-at-sign,.icon-at-symbol {
+    -webkit-mask: url("<%= asset_url('at-symbol.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('at-symbol.svg') %>") no-repeat center;
+}
+.icon-calendar {
+    -webkit-mask: url("<%= asset_url('calendar.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('calendar.svg') %>") no-repeat center;
+}
+.icon-check,.icon-complete{
+    -webkit-mask: url("<%= asset_url('check.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('check.svg') %>") no-repeat center;
+}
+.icon-check-list {
+    -webkit-mask: url("<%= asset_url('check-list.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('check-list.svg') %>") no-repeat center;
+}
+.icon-celebration {
+    -webkit-mask: url("<%= asset_url('celebration.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('celebration.svg') %>") no-repeat center;
+}
+.icon-clock {
+    -webkit-mask: url("<%= asset_url('clock.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('clock.svg') %>") no-repeat center;
+}
+.icon-close,icon-x-circle {
+    -webkit-mask: url("<%= asset_url('x-circle.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('x-circle.svg') %>") no-repeat center;
+}
+.icon-x-mark {
+    -webkit-mask: url("<%= asset_url('x-mark.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('x-mark.svg') %>") no-repeat center;
+}
+.icon-course {
+    -webkit-mask: url("<%= asset_url('course.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('course.svg') %>") no-repeat center;
+}
+.icon-down,.icon-chevron-down {
+    -webkit-mask: url("<%= asset_url('chevron-down.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('chevron-down.svg') %>") no-repeat center;
+}
+.icon-download,.icon-arrow-down-tray {
+    -webkit-mask: url("<%= asset_url('arrow-down-tray.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('arrow-down-tray.svg') %>") no-repeat center;
+}
+.icon-edit,.icon-pencil {
+    -webkit-mask: url("<%= asset_url('pencil.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('pencil.svg') %>") no-repeat center;
+}
+.icon-eye {
+    -webkit-mask: url("<%= asset_url('eye.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('eye.svg') %>") no-repeat center;
+}
+.icon-filter,.icon-funnel {
+    -webkit-mask: url("<%= asset_url('funnel.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('funnel.svg') %>") no-repeat center;
+}
+.icon-green-circle {
+    -webkit-mask: url("<%= asset_url('green-circle.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('green-circle.svg') %>") no-repeat center;
+}
+.icon-green-tick {
+    -webkit-mask: url("<%= asset_url('green-tick.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('green-tick.svg') %>") no-repeat center;
+}
+.icon-stop {
+    -webkit-mask: url("<%= asset_url('stop.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('stop.svg') %>") no-repeat center;
+}
+.icon-grid {
+    -webkit-mask: url("<%= asset_url('grid.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('grid.svg') %>") no-repeat center;
+}
+.icon-home {
+    -webkit-mask: url("<%= asset_url('home.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('home.svg') %>") no-repeat center;
+}
+.icon-incomplete,.icon-minus {
+    -webkit-mask: url("<%= asset_url('minus.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('minus.svg') %>") no-repeat center;
+}
+.icon-invite-team,.icon-users {
+    -webkit-mask: url("<%= asset_url('users.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('users.svg') %>") no-repeat center;
+}
+.icon-lessons {
+    -webkit-mask: url("<%= asset_url('lessons.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('lessons.svg') %>") no-repeat center;
+}
+.icon-list,.icon-numbered-list {
+    -webkit-mask: url("<%= asset_url('numbered-list.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('numbered-list.svg') %>") no-repeat center;
+}
+.icon-logout,.icon-power {
+    -webkit-mask: url("<%= asset_url('power.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('power.svg') %>") no-repeat center;
+}
+.icon-menu,.icon-bars-4 {
+    -webkit-mask: url("<%= asset_url('bars-4.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('bars-4.svg') %>") no-repeat center;
+}
+.icon-more-vertical,.icon-ellipsis-vertical {
+    -webkit-mask: url("<%= asset_url('ellipsis-verticall.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('ellipsis-vertical.svg') %>") no-repeat center;
+}
+.icon-next,.icon-chevron-double-right {
+    -webkit-mask: url("<%= asset_url('chevron-double-right.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('chevron-double-right.svg') %>") no-repeat center;
+}
+.icon-notification,.icon-bell {
+    -webkit-mask: url("<%= asset_url('bell.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('bell.svg') %>") no-repeat center;
+}
+.icon-organize-info,.icon-building-office-2 {
+    -webkit-mask: url("<%= asset_url('building-office-2.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('building-office-2.svg') %>") no-repeat center;
+}
+.icon-play {
+    -webkit-mask: url("<%= asset_url('play.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('play.svg') %>") no-repeat center;
+}
+.icon-plus {
+    -webkit-mask: url("<%= asset_url('plus.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('plus.svg') %>") no-repeat center;
+}
+.icon-quiz-score {
+    -webkit-mask: url("<%= asset_url('quiz-score.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('quiz-score.svg') %>") no-repeat center;
+}
+.icon-re-invite {
+    -webkit-mask: url("<%= asset_url('re-invite.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('re-invite.svg') %>") no-repeat center;
+}
+.icon-red-circle {
+    -webkit-mask: url("<%= asset_url('red-circle.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('red-circle.svg') %>") no-repeat center;
+}
+.icon-retry,.icon-arrow-uturn-right {
+    -webkit-mask: url("<%= asset_url('arrow-uturn-right.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('arrow-uturn-right.svg') %>") no-repeat center;
+}
+.icon-search,.icon-magnifying-glass {
+    -webkit-mask: url("<%= asset_url('magnifying-glass.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('magnifying-glass.svg') %>") no-repeat center;
+}
+.icon-settings,.icon-adjustments-horizontal {
+    -webkit-mask: url("<%= asset_url('adjustments-horizontal.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('adjustments-horizontal.svg') %>") no-repeat center;
+}
+.icon-simple-arrow-right,.icon-chevron-right {
+    -webkit-mask: url("<%= asset_url('chevron-right.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('chevron-right.svg') %>") no-repeat center;
+}
+.icon-chevron-left {
+    -webkit-mask: url("<%= asset_url('chevron-left.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('chevron-left.svg') %>") no-repeat center;
+}
+.icon-smartphone,.icon-device-phone-mobile,.icon-update-no{
+    -webkit-mask: url("<%= asset_url('device-phone-mobile.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('device-phone-mobile.svg') %>") no-repeat center;
+}
+.icon-support,.icon-question-mark-circle {
+    -webkit-mask: url("<%= asset_url('question-mark-circle.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('question-mark-circle.svg') %>") no-repeat center;
+}
+.icon-support-placeholder {
+    -webkit-mask: url("<%= asset_url('support-placeholder.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('support-placeholder.svg') %>") no-repeat center;
+}
+.icon-tag {
+    -webkit-mask: url("<%= asset_url('tag.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('tag.svg') %>") no-repeat center;
+}
+.icon-team,.icon-user-group {
+    -webkit-mask: url("<%= asset_url('user-group.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('user-group.svg') %>") no-repeat center;
+}
+.icon-timer {
+    -webkit-mask: url("<%= asset_url('timer.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('timer.svg') %>") no-repeat center;
+}
+.icon-trash {
+    -webkit-mask: url("<%= asset_url('trash.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('trash.svg') %>") no-repeat center;
+}
+.icon-up,.icon-chevron-up {
+    -webkit-mask: url("<%= asset_url('chevron-up.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('chevron-up.svg') %>") no-repeat center;
+}
+.icon-upload,.icon-arrow-up-tray {
+    -webkit-mask: url("<%= asset_url('arrow-up-tray.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('arrow-up-tray.svg') %>") no-repeat center;
+}
+.icon-upload-info {
+    -webkit-mask: url("<%= asset_url('upload-info.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('upload-info.svg') %>") no-repeat center;
+}
+.icon-user {
+    -webkit-mask: url("<%= asset_url('user.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('user.svg') %>") no-repeat center;
+}
+.icon-winner {
+    -webkit-mask: url("<%= asset_url('winner.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('winner.svg') %>") no-repeat center;
+}
+.icon-share {
+    -webkit-mask: url("<%= asset_url('share.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('share.svg') %>") no-repeat center;
+}
+.icon-transcript {
+    -webkit-mask: url("<%= asset_url('transcript.svg') %>") no-repeat center;
+    mask: url("<%= asset_url('transcript.svg') %>") no-repeat center;
+}

data/app/assets/stylesheets/inputs.tailwind.css

@@ -0,0 +1,53 @@
+.input-text-base {
+    @apply w-full bg-transparent appearance-none placeholder-disabled-color border-none px-0 py-0 focus:ring-0 outline-none;
+    -webkit-text-fill-color: inherit !important;
+    transition: background-color 9999s ease-in-out 0s;
+}
+
+.input-text-md {
+    @apply main-text-md-normal;
+}
+
+.input-text-lg {
+    @apply main-text-lg-medium;
+}
+
+.input-text-icon-base {
+    @apply flex items-center;
+}
+
+.input-text-icon-md {
+    @apply h-4 md:h-5 w-4 md:w-5;
+}
+
+.input-text-icon-lg {
+    @apply h-5 w-5;
+}
+
+.input-text-div-base {
+    @apply w-full flex gap-1 border focus-within:ring-2;
+}
+
+.input-text-div-base-md {
+    @apply rounded px-3 py-2;
+}
+
+.input-text-div-base-lg {
+    @apply rounded-lg px-4 py-4;
+}
+
+.input-text-label-md {
+    @apply px-1 general-text-sm-normal;
+}
+
+.input-text-label-lg {
+    @apply px-1 general-text-md-normal;
+}
+
+.input-text-subtext-md {
+    @apply px-3 general-text-sm-normal;
+}
+
+.input-text-subtext-lg {
+    @apply px-3 md:px-4 general-text-md-normal;
+}

data/app/assets/stylesheets/menu_component.tailwind.css

@@ -0,0 +1,39 @@
+.menu-component-container {
+  @apply relative inline-block;
+}
+.menu-component-button {
+  @apply flex justify-center cursor-pointer rounded-full bg-primary-light-50 text-primary border border-primary hover:bg-primary-light hover:text-white p-0.5;
+}
+
+.menu-component-button-active {
+  @apply !bg-primary text-white;
+}
+
+.menu-component-button-icon {
+  @apply h-6 w-6 md:h-7 md:w-7 rounded-full;
+}
+
+.menu-component-list-box {
+  @apply w-max min-w-full bg-white rounded-lg md:rounded-xl border border-line-colour mt-1 z-50 text-slate-grey-50 whitespace-nowrap;
+}
+
+.menu-component-left {
+  @apply left-0;
+}
+
+.menu-component-right {
+  @apply right-0;
+}
+
+.menu-component-center {
+  @apply left-1/2 -translate-x-1/2;
+
+}
+
+.menu-component-list {
+  @apply flex flex-col divide-y divide-line-colour text-letter-color;
+}
+
+.menu-component-list-items{
+  @apply px-4 md:px-5 py-3 md:py-4 hover:bg-primary-light-50 flex w-full;
+}

data/app/assets/stylesheets/mobile_inputs.tailwind.css

@@ -0,0 +1,11 @@
+.mobile-code-md {
+    @apply main-text-md-normal;
+}
+
+.mobile-code-lg {
+    @apply main-text-lg-medium;
+}
+
+.mobile-code-base {
+    @apply border focus-within:ring-2;
+}

data/app/assets/stylesheets/modalbox.tailwind.css

@@ -0,0 +1,35 @@
+.modal-wrapper {
+  @apply fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-[9999];
+}
+
+.modal-container {
+  @apply relative w-[300px] md:w-[500px];
+}
+
+.modal-success {
+  @apply relative w-[312px] md:w-[515px] h-[140px] overflow-visible bg-white rounded-xl;
+}
+
+.modal-content {
+  @apply bg-white rounded-lg md:rounded-xl w-full z-[9999];
+}
+
+.modal-header {
+  @apply flex items-center gap-1 justify-between border-b border-line-colour-light pl-7 md:pl-8 pr-4 md:pr-5 py-4 md:py-5;
+}
+
+.modal-body {
+  @apply px-7 md:px-8 pt-4 md:pt-5 pb-7 max-h-[500px] overflow-auto;
+}
+
+.modal-footer {
+  @apply px-7 md:px-8 pb-7 md:pb-8 sticky bottom-0;
+}
+
+.modal-loader-container {
+  @apply inset-0 z-[10000] items-center justify-center bg-white bg-opacity-60 rounded-lg;
+}
+
+.modal-loader {
+  @apply w-10 h-10 rounded-full border-4 border-line-colour border-t-primary animate-spin;
+}

data/app/assets/stylesheets/profile_icon.tailwind.css

@@ -0,0 +1,15 @@
+.profile-icon-base {
+  @apply  border border-line-colour bg-primary-light-50 flex items-center justify-center rounded-full text-primary;
+}
+
+.profile-icon-sm {
+  @apply w-6 h-6 antialiased main-text-sm-medium; 
+}
+
+.profile-icon-md {
+  @apply w-6 h-6 md:h-10 md:w-10 antialiased main-text-lg-medium;
+}
+
+.profile-icon-lg {
+  @apply w-10 h-10 md:h-14 md:w-14 antialiased heading-3xl;
+}

data/app/assets/stylesheets/textarea.tailwind.css

@@ -0,0 +1,43 @@
+.textarea-active-state {
+  @apply text-letter-color-light border-slate-grey-50 placeholder-disabled-color focus:ring-primary;
+}
+
+.textarea-error-state {
+  @apply text-danger-dark border-danger focus:border-danger focus:ring-danger placeholder-danger-dark;
+}
+
+.textarea-disabled-state {
+  @apply border-disabled-color text-disabled-color placeholder-disabled-color
+}
+
+.textarea-component-container {
+  @apply w-full flex flex-col gap-1;
+}
+
+.textarea-component-base {
+  @apply w-full border;
+}
+
+.textarea-component-wrapper {
+  @apply bg-white flex items-center;
+}
+
+.textarea-component-md {
+  @apply px-3 py-2 rounded;
+}
+
+.textarea-component-lg {
+  @apply px-3 py-2 md:p-4 rounded-lg;
+}
+
+.textarea-label {
+  @apply inline-block mb-1 px-1;
+}
+
+.textarea-support-text {
+  @apply flex justify-start items-start;
+}
+
+.field-sizing-content {
+  field-sizing: auto;
+}

data/app/assets/stylesheets/tooltip.css

@@ -0,0 +1,88 @@
+.tooltip {
+  position: absolute;
+  white-space: nowrap;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  color: white;
+  background-color: grey;
+  border-radius: 0.25rem;
+  opacity: 0;
+  transition: opacity 0.2s;
+  z-index: 1;
+  pointer-events: none;
+}
+
+@media (max-width: 640px) {
+  .tooltip {
+    white-space: normal;
+    width: 100%;
+  }
+}
+
+.group:hover .tooltip {
+  opacity: 1;
+}
+
+.tooltip::before {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+
+.tooltip-top {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: 0.5rem;
+}
+.tooltip-top::before {
+  left: 50%;
+  bottom: -4px;
+  transform: translateX(-50%);
+  border-width: 4px 4px 0;
+  border-color: grey transparent transparent;
+}
+
+.tooltip-bottom {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 0.5rem;
+}
+.tooltip-bottom::before {
+  left: 50%;
+  top: -4px;
+  transform: translateX(-50%);
+  border-width: 0 4px 4px;
+  border-color: transparent transparent grey;
+}
+
+.tooltip-left {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-right: 0.5rem;
+}
+.tooltip-left::before {
+  right: -4px;
+  top: 50%;
+  transform: translateY(-50%);
+  border-width: 4px 0 4px 4px;
+  border-color: transparent transparent transparent grey;
+}
+
+.tooltip-right {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: 0.5rem;
+}
+.tooltip-right::before {
+  left: -4px;
+  top: 50%;
+  transform: translateY(-50%);
+  border-width: 4px 4px 4px 0;
+  border-color: transparent grey transparent transparent;
+}

data/app/assets/stylesheets/typography.tailwind.css

@@ -0,0 +1,70 @@
+/* Typography Styles */
+
+@layer components {
+  /* Heading Typography Styles */
+  .heading-3xl {
+    @apply font-poppins antialiased text-2xl md:text-3xl font-semibold;
+  }
+
+  .heading-2xl {
+    @apply font-poppins antialiased text-xl md:text-2xl font-semibold;
+  }
+
+  .heading-xl {
+    @apply font-poppins antialiased text-lg md:text-xl font-semibold;
+  }
+
+  /* Primary Text Typography Styles */
+  .main-text-lg-semibold {
+    @apply font-poppins antialiased text-base md:text-lg font-semibold;
+  }
+
+  .main-text-lg-medium {
+    @apply font-poppins antialiased text-base md:text-lg font-medium;
+  }
+
+  .main-text-lg-normal {
+    @apply font-poppins antialiased text-base md:text-lg font-normal;
+  }
+
+  .main-text-md-semibold {
+    @apply font-poppins antialiased text-sm md:text-base font-semibold;
+  }
+
+  .main-text-md-medium {
+    @apply font-poppins antialiased text-sm md:text-base font-medium;
+  }
+
+  .main-text-md-normal {
+    @apply font-poppins antialiased text-sm md:text-base font-normal;
+  }
+
+  .main-text-sm-medium {
+    @apply font-poppins antialiased text-xs md:text-sm font-medium;
+  }
+
+  .main-text-sm-normal {
+    @apply font-poppins antialiased text-xs md:text-sm font-normal;
+  }
+
+  /* Secondary Text Typography Styles */
+  .general-text-lg-normal {
+    @apply font-roboto antialiased text-sm md:text-base font-normal;
+  }
+
+  .general-text-md-medium {
+    @apply font-roboto antialiased text-xs md:text-sm font-medium;
+  }
+
+  .general-text-md-normal {
+    @apply font-roboto antialiased text-xs md:text-sm font-normal;
+  }
+
+  .general-text-sm-medium {
+    @apply font-roboto antialiased text-xs font-medium;
+  }
+
+  .general-text-sm-normal {
+    @apply font-roboto antialiased text-xs font-normal;
+  }
+}

data/app/helpers/ui_helper.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module UiHelper
+  def arrange_tags(left_tag, right_tag, position)
+    ordered = position == 'left' ? [left_tag, right_tag] : [right_tag, left_tag]
+    safe_join(ordered.compact)
+  end
+
+  include ViewComponent::TypographyComponent
+  include ViewComponent::IconComponent
+  include ViewComponent::ButtonComponent
+  include ViewComponent::InputComponent
+  include ViewComponent::TableComponent
+  include ViewComponent::ModalComponent
+  include ViewComponent::CourseCardComponent
+  include ViewComponent::LongCourseCardComponent
+  include ViewComponent::CourseCarousalComponent
+  include ViewComponent::CourseSelectComponent
+  include ViewComponent::MemberListComponent
+  include ViewComponent::NotificationBarComponent
+  include ViewComponent::PaginatorComponent
+  include ViewComponent::InputTextareaComponent
+  include ViewComponent::DocSectionComponent
+  include ViewComponent::BreadcrumbsComponent
+  include ViewComponent::MenuComponent
+  include ViewComponent::ModalBoxComponent
+  include ViewComponent::ChipComponent
+  include ViewComponent::ProgressComponent
+  include ViewComponent::ProfileIconComponent
+  include ViewComponent::AccordionComponent
+end

data/app/helpers/view_component/accordion_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module AccordionComponent
+    def accordion_component(header:, icon_position: 'right', open: false, wrapper_class: '', &)
+      content = capture(&)
+      icon_position_style = icon_position == 'right' ? 'justify-between' : 'flex-row-reverse justify-end gap-2'
+      render partial: 'view_components/accordion_component/accordion',
+             locals: { header:, content:, icon_position_style:, open:, wrapper_class: }
+    end
+  end
+end

data/app/helpers/view_component/breadcrumbs_component.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module BreadcrumbsComponent
+    class BreadcrumbsComponent
+      attr_accessor :links
+
+      def initialize(links: [])
+        self.links = links
+      end
+
+      def all_links
+        links || []
+      end
+
+      def last_link
+        all_links.last
+      end
+
+      def intermediate_links
+        all_links[0..-2] || []
+      end
+    end
+
+    def breadcrumbs_component(links: [])
+      breadcrumbs = BreadcrumbsComponent.new(links:)
+      render partial: 'view_components/breadcrumbs_component/breadcrumbs', locals: { breadcrumbs: }
+    end
+  end
+end