irelia 0.1.0 → 0.2.0

data/app/components/irelia/breadcrumbs/component.html.erb

@@ -0,0 +1,12 @@
+<%= content_tag :div, html_options do %>
+  <nav class="flex justify-between">
+    <ol class="inline-flex items-center mb-3 space-x-1 [&_.active-breadcrumb]:text-neutral-600 [&_.active-breadcrumb]:font-medium sm:mb-0">
+      <% breadcrumbs.each_with_index do |crumb, index| %>
+        <li>
+          <%= link_to crumb.name, crumb.path %>
+        </li>
+        <%= helpers.irelia_icon { "fa fa-chevron-right" } unless index == last_index %>
+      <% end %>
+     </ol>
+  </nav>
+<% end %>

data/app/components/irelia/breadcrumbs/component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+class Irelia::Breadcrumbs::Component < Irelia::Component
+  option :breadcrumbs, default: -> { [] }
+
+  def variants
+    class_names(
+      "irelia-breadcrumbs",
+      "irelia-breadcrumbs--default": variant == :default
+    )
+  end
+
+  private
+
+  def last_index
+    breadcrumbs.count - 1
+  end
+end

data/app/components/irelia/breadcrumbs/index.pcss

@@ -0,0 +1,16 @@
+@layer components {
+  .irelia-breadcrumbs {
+    @apply flex gap-y-1.5 flex-col justify-center text-sm;
+
+    li {
+      @apply flex items-center h-full;
+    }
+
+    .irelia-icon svg.fa-chevron-right {
+      @apply text-xs px-2 text-gray-400;
+    }
+  }
+
+  .irelia-breadcrumbs--default {
+  }
+}

data/app/{frontend/components/page/container → components/irelia/breadcrumbs}/preview.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class Page::Container::Preview < ApplicationViewComponentPreview
+class Irelia::Breadcrumbs::Preview < Irelia::ComponentPreview
   # You can specify the container class for the default template
   # self.container_class = "w-1/2 border border-gray-300"
 

data/app/components/irelia/button/component.html.erb

@@ -0,0 +1,27 @@
+<% content_html = capture do %>
+  <% if icon %>
+    <span class="irelia-button__icon">
+      <%= helpers.irelia_icon icon_class: icon %>
+    </span>
+  <% end %>
+
+  <% if content %>
+  <span class="irelia-button__content">
+    <span class="irelia-button__text"><%= content %></span>
+  </span>
+  <% end %>
+
+  <% if right_icon %>
+    <span class="irelia-button__icon">
+      <%= helpers.irelia_icon icon_class: right_icon %>
+    </span>
+  <% end %>
+<% end %>
+
+<% if skip_tag %>
+  <%= content_html %>
+<% else %>
+  <%= content_tag @tag, html_options do %>
+    <%= content_html %>
+  <% end %>
+<% end %>

data/app/components/irelia/button/component.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+class Irelia::Button::Component < Irelia::Component
+  include Irelia::Options::Width
+
+  option :url, default: -> { nil }
+  option :type, default: -> { :button }, in: [ :button, :submit, :reset ]
+  option :size, default: -> { :md }, in: [ :xs, :sm, :md, :lg, :xl ]
+  option :color, default: proc { :primary }, in: %i[primary secondary danger]
+  option :skip_tag, default: false, optional: true
+  option :modal, optional: true
+
+  option :icon, optional: true
+  option :right_icon, optional: true
+
+  def variants
+    class_names(
+      "irelia-button",
+      "irelia-button--default": variant == :default,
+      "irelia-button--dropdown-item": variant == :dropdown_item,
+      "irelia-button--color-primary": color == :primary,
+      "irelia-button--color-secondary": color == :secondary,
+      "irelia-button--color-danger": color == :danger,
+      "irelia-button--xs": size == :xs,
+      "irelia-button--sm": size == :sm,
+      "irelia-button--md": size == :md,
+      "irelia-button--lg": size == :lg,
+      "irelia-button--xl": size == :xl
+    )
+  end
+
+  def initialize(**options)
+    super
+
+    @tag = @url.present? ? :a : :button
+    @html_options[:href] = @url if @url.present?
+    @html_options[:type] = @type
+    @html_options["data-turbo-frame"] = @modal if @modal.present?
+  end
+end

data/app/components/irelia/button/index.pcss

@@ -0,0 +1,57 @@
+@layer components {
+  .irelia-button {
+    @apply inline-flex justify-center items-center cursor-pointer rounded no-underline transition text-nowrap;
+  }
+
+  .irelia-button--default {
+    @apply font-bold w-min;
+
+    &.irelia-button--color-primary {
+      @apply bg-irelia-primary hover:bg-irelia-primary-hover text-white;
+    }
+
+    &.irelia-button--color-secondary {
+      @apply bg-irelia-gray hover:bg-irelia-gray-hover text-irelia-primary;
+    }
+
+    &.irelia-button--color-danger {
+      @apply bg-irelia-danger hover:bg-irelia-danger-hover text-white;
+    }
+  }
+
+  .irelia-button--xs {
+    @apply px-3 py-1 gap-x-1.5 text-xs; /* Reduced padding for XS */
+  }
+
+  .irelia-button--sm {
+    @apply px-4 py-1.5 gap-x-2 text-sm; /* Adjusted padding for SM */
+  }
+
+  .irelia-button--md {
+    @apply px-5 py-2 gap-x-2.5 text-base; /* Slightly reduced padding for MD */
+  }
+
+  .irelia-button--lg {
+    @apply px-7 py-2.5 gap-x-3.5 text-lg; /* Reduced padding for LG */
+  }
+
+  .irelia-button--xl {
+    @apply px-10 py-4 gap-x-4 text-xl; /* Adjusted padding for XL */
+  }
+
+  .irelia-button--dropdown-item {
+    @apply relative flex justify-start w-full select-none items-center rounded px-2 py-1.5 hover:bg-neutral-100 hover:text-neutral-900 outline-none;
+
+    .irelia-button__content {
+      @apply pr-4;
+    }
+
+    .irelia-button__icon {
+      @apply w-[15px] text-center opacity-35;
+    }
+
+    .irelia-button__content + .irelia-button__icon {
+      @apply ml-auto;
+    }
+  }
+}

data/app/components/irelia/button/preview.rb

@@ -0,0 +1,79 @@
+# frozen_string_literal: true
+
+class Irelia::Button::Preview < Irelia::ComponentPreview
+  # @label Default
+  # @param color select { choices: [primary, secondary, danger] } "Button theme color"
+  # @param size select { choices: [xs, sm, md, lg, xl] } "Size of the button"
+  def default(color: :primary, size: :md)
+    irelia_button(color:, size:) { "Default button" }
+  end
+
+  # @!group Colors
+
+  # @label Primary button (default)
+  def primary_color
+    irelia_button { "Button" }
+  end
+
+  # @label Secondary button
+  def secondary_color
+    irelia_button(color: :secondary) { "Button" }
+  end
+
+  # @label Danger button
+  def danger_color
+    irelia_button(color: :danger) { "Button" }
+  end
+
+  # @!endgroup
+
+  # @!group Sizes
+
+  # @label Extra small
+  def sizes_xs
+    irelia_button(size: :xs) { "Button" }
+  end
+
+  # @label Small
+  def sm_size
+    irelia_button(size: :sm) { "Button" }
+  end
+
+  # @label Medium (default)
+  def default_size
+    irelia_button(size: :md) { "Button" }
+  end
+
+  # @label Large
+  def lg_size
+    irelia_button(size: :lg) { "Large button" }
+  end
+
+  # @label Extra large
+  def xl_size
+    irelia_button(size: :xl) { "Extra large button" }
+  end
+
+  # @!endgroup
+
+  # @label Icon + text
+  def with_icon
+    irelia_button(icon: "fas fa-home", size: :md) { "Button with icon" }
+  end
+
+  # @label Text + icon
+  def with_right_icon
+    irelia_button(right_icon: "fas fa-arrow-right", size: :md) { "Button with icon" }
+  end
+
+  # @label Only icon
+  def only_icon
+    irelia_button(icon: "fas fa-save", size: :md)
+  end
+
+  # @label Link
+  # Pass a URL to the button to render an anchor tag instead of a button.
+  def link(color: :default, size: :md)
+    irelia_button(url: "#") { "Link button" }
+  end
+end

data/app/components/irelia/card/component.html.erb

@@ -0,0 +1,5 @@
+<%= content_tag :div, html_options do %>
+  <div class="irelia-card__inner">
+    <%= content %>
+  </div>
+<% end %>

data/app/components/irelia/card/component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class Irelia::Card::Component < Irelia::Component
+  include Irelia::Options::Width
+
+  option :padding, default: -> { true }, optional: true
+
+  def variants
+    class_names(
+      "irelia-card",
+      "irelia-card--default": variant == :default,
+      "irelia-card--no-padding": padding == false
+    )
+  end
+end

data/app/components/irelia/card/index.pcss

@@ -0,0 +1,9 @@
+@layer components {
+  .irelia-card {
+    @apply bg-irelia-surface rounded shadow-sm;
+
+    &:not(.irelia-card--no-padding) .irelia-card__inner {
+      @apply p-5;
+    }
+  }
+}

data/app/components/irelia/card/preview.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+class Irelia::Card::Preview < Irelia::ComponentPreview
+  # You can specify the container class for the default template
+  # self.container_class = "w-1/2 border border-gray-300"
+
+  def default
+    irelia_card do
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sodales fermentum tristique."
+    end
+  end
+
+  def no_padding
+    irelia_card(padding: false) do
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sodales fermentum tristique."
+    end
+  end
+end

data/app/components/irelia/component.rb

@@ -0,0 +1,55 @@
+module Irelia
+  class Component < ViewComponentContrib::Base
+    extend Dry::Initializer
+
+    option :html_options, default: proc { {} }
+    option :variant, default: proc { :default }
+
+    def initialize(**options)
+      super
+
+      @component_classes = +""
+      add_css_classes(variants)
+      self.class.run_after_initialize_hooks(self)
+    end
+
+    def html_options
+      # Merge the component classes with the classes from the html_options.
+      @html_options.merge({ class: "#{@component_classes} #{@html_options[:class]}".strip })
+    end
+
+    def add_css_classes(css_class)
+      @component_classes += " #{css_class}"
+    end
+
+    def variants
+    end
+
+    class << self
+      def after_initialize(method_name = nil, &block)
+        @after_initialize_hooks ||= []
+        if method_name
+          @after_initialize_hooks << method_name
+        elsif block_given?
+          @after_initialize_hooks << block
+        end
+      end
+
+      def run_after_initialize_hooks(instance)
+        return unless @after_initialize_hooks
+        @after_initialize_hooks.each do |hook|
+          if hook.is_a?(Symbol)
+            instance.send(hook)
+          elsif hook.is_a?(Proc)
+            instance.instance_eval(&hook)
+          end
+        end
+      end
+
+      def inherited(subclass)
+        super
+        subclass.instance_variable_set(:@after_initialize_hooks, @after_initialize_hooks.dup)
+      end
+    end
+  end
+end

data/app/components/irelia/component_preview.rb

@@ -0,0 +1,7 @@
+module Irelia
+  class ComponentPreview < ViewComponentContrib::Preview::Base
+    include Irelia::ComponentsHelper
+
+    self.abstract_class = true
+  end
+end

data/app/components/irelia/container/component.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+class Irelia::Container::Component < Irelia::Component
+  include Irelia::Options::Padding
+
+  option :center, default: -> { false }, in: %i[true false]
+  option :size, default: -> { :full_width }, in: %i[full_width xxs xs sm md lg xl]
+
+  def variants
+    class_names(
+      "irelia-container",
+      "irelia-container--default": variant == :default,
+      "irelia-container--size-full-width": size == :full_width,
+      "irelia-container--size-xxl": size == :xxl,
+      "irelia-container--size-xl": size == :xl,
+      "irelia-container--size-lg": size == :lg,
+      "irelia-container--size-md": size == :md,
+      "irelia-container--size-sm": size == :sm,
+      "irelia-container--size-xs": size == :xs,
+      "irelia-container--size-xxs": size == :xxs,
+      "irelia-container--center": center == true
+    )
+  end
+
+  def call
+    content_tag :div, html_options do
+      content
+    end
+  end
+end

data/app/components/irelia/container/index.pcss

@@ -0,0 +1,45 @@
+@layer components {
+  .irelia-container {
+    @apply px-10 m-0;
+
+    &.irelia-container--center {
+      @apply mx-auto;
+    }
+  }
+
+  .irelia-app-shell .irelia-container {
+    @apply px-0;
+  }
+
+  .irelia-container--size-full-width {
+    @apply w-[100%];
+  }
+
+  .irelia-container--size-xxl {
+    @apply max-w-[1536px];
+  }
+
+  .irelia-container--size-xl {
+    @apply max-w-[1280px];
+  }
+
+  .irelia-container--size-lg {
+    @apply max-w-[1024px];
+  }
+
+  .irelia-container--size-md {
+    @apply max-w-[768px];
+  }
+
+  .irelia-container--size-sm {
+    @apply max-w-[640px];
+  }
+
+  .irelia-container--size-xs {
+    @apply max-w-[448px];
+  }
+
+  .irelia-container--size-xxs {
+    @apply max-w-[320px];
+  }
+}

data/app/components/irelia/container/preview.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+class Irelia::Container::Preview < Irelia::ComponentPreview
+  # You can specify the container class for the default template
+  # self.container_class = "w-1/2 border border-gray-300"
+
+  def default
+    irelia_container size: :lg do
+      "The container class sets the max-width of an element to match the min-width of the current breakpoint. This is useful if you’d prefer to design for a fixed set of screen sizes instead of trying to accommodate a fully fluid viewport."
+    end
+  end
+
+  def centered
+    irelia_container size: :lg, center: true do
+      "The container class sets the max-width of an element to match the min-width of the current breakpoint. This is useful if you’d prefer to design for a fixed set of screen sizes instead of trying to accommodate a fully fluid viewport."
+    end
+  end
+end

data/app/components/irelia/div/component.html.erb

@@ -0,0 +1,3 @@
+<%= content_tag :div, html_options do %>
+  <%= content %>
+<% end %>

data/app/components/irelia/div/component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class Irelia::Div::Component < Irelia::Component
+  include Irelia::Options::Padding
+  include Irelia::Options::TextFormatting
+  include Irelia::Options::Width
+  include Irelia::Options::Fixed
+
+  def variants
+    class_names(
+      "irelia-div",
+      "irelia-div--default": variant == :default
+    )
+  end
+end

data/app/components/irelia/div/index.pcss

@@ -0,0 +1,7 @@
+@layer components {
+  .irelia-div {
+  }
+
+  .irelia-div--default {
+  }
+}

data/app/components/irelia/divider/component.html.erb

@@ -0,0 +1,7 @@
+<%= content_tag :div, html_options do %>
+  <hr>
+  <% if content %>
+    <span class="irelia-divider__inner_text"><%= content %></span>
+    <hr >
+  <% end %>
+<% end %>

data/app/components/irelia/divider/component.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+class Irelia::Divider::Component < Irelia::Component
+  def variants
+    class_names(
+      "irelia-divider",
+      "irelia-divider--default": variant == :default
+    )
+  end
+end

data/app/components/irelia/divider/index.pcss

@@ -0,0 +1,15 @@
+@layer components {
+  .irelia-divider {
+    .irelia-divider__inner_text {
+      @apply px-5 text-sm font-bold;
+    }
+  }
+
+  .irelia-divider--default {
+    @apply flex items-center;
+
+    hr {
+      @apply flex-grow border-t border-neutral-200;
+    }
+  }
+}

data/app/components/irelia/dropdown/component.html.erb

@@ -0,0 +1,17 @@
+<%= content_tag :span, html_options.merge({"data-controller": "irelia-dropdown", "data-irelia-dropdown-open-value": open}) do %>
+  <span class="irelia-dropdown__trigger">
+    <%= custom_trigger || trigger %>
+  </span>
+  <div
+    data-irelia-dropdown-target="menu"
+    class="irelia-dropdown__content hidden"
+    data-transition-enter-from="transition-closed"
+    data-transition-enter-to="transition-open"
+    data-transition-leave-from="transition-open"
+    data-transition-leave-to="transition-closed"
+  >
+    <% items.each do |item| %>
+      <%= item %>
+    <% end %>
+  </div>
+<% end %>

data/app/components/irelia/dropdown/component.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+class Irelia::Dropdown::Component < Irelia::Component
+  option :open, default: -> { false }
+  option :direction, default: -> { :down }, in: %i[down up]
+
+  renders_one :trigger, "DropdownTrigger"
+  renders_one :custom_trigger, "CustomDropdownTrigger"
+  renders_many :items, "DropdownItem"
+
+  def variants
+    class_names(
+      "irelia-dropdown",
+      "irelia-dropdown--default": variant == :default,
+      "irelia-dropdown--direction-down": direction == :down,
+      "irelia-dropdown--direction-up": direction == :up
+    )
+  end
+
+  def initialize(**options)
+    super
+  end
+
+  class DropdownTrigger < Irelia::Button::Component
+    def initialize(**options)
+      options[:html_options] ||= {}
+      options[:html_options]["data"] = { "action": "irelia-dropdown#toggle click@window->irelia-dropdown#hide" }
+      super(**options)
+    end
+  end
+
+  class CustomDropdownTrigger < Irelia::Component
+    def initialize(**options)
+      options[:html_options] ||= {}
+      options[:html_options]["data"] = { "action": "irelia-dropdown#toggle click@window->irelia-dropdown#hide" }
+      options[:html_options]["style"] = "display:block;width:100%"
+      super(**options)
+    end
+
+    def call
+      content_tag(:button, content, html_options)
+    end
+  end
+
+  class DropdownItem < Irelia::Button::Component
+    def initialize(**options)
+      options[:size] = :sm
+      options[:variant] = :dropdown_item
+      super(**options)
+    end
+  end
+end

data/app/components/irelia/dropdown/controller.js

@@ -0,0 +1,14 @@
+import Dropdown from "@stimulus-components/dropdown";
+
+export default class extends Dropdown {
+  static values = {
+    open: Boolean,
+  };
+
+  connect() {
+    super.connect();
+    if (this.openValue) {
+      this.enter();
+    }
+  }
+}

data/app/components/irelia/dropdown/index.pcss

@@ -0,0 +1,37 @@
+@layer components {
+  .irelia-dropdown {
+    @apply relative;
+
+    &.irelia-dropdown--direction-down {
+      .irelia-dropdown__content {
+        @apply top-0 mt-10;
+
+        &.transition-closed {
+          @apply -translate-y-2 opacity-0;
+        }
+
+        &.transition-open {
+          @apply -translate-y-0 opacity-100;
+        }
+      }
+    }
+
+    &.irelia-dropdown--direction-up {
+      .irelia-dropdown__content {
+        @apply bottom-0 mb-10 mt-0;
+
+        &.transition-closed {
+          @apply translate-y-2 opacity-0;
+        }
+
+        &.transition-open {
+          @apply translate-y-0 opacity-100;
+        }
+      }
+    }
+  }
+
+  .irelia-dropdown__content {
+    @apply absolute duration-200 z-50 min-w-48 text-neutral-800 rounded-md border border-neutral-200/70 bg-white text-sm p-1 shadow-md -translate-x-0.5;
+  }
+}