irelia 0.0.1 → 0.2.0

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

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+class Irelia::Modal::Component < Irelia::Component
+  option :name
+  option :title, optional: true
+
+  renders_one :button, "ToggleButton"
+
+  def variants
+    class_names(
+      "irelia-modal",
+      "irelia-modal--default": variant == :default,
+      "irelia-modal--with-title": title.present?
+    )
+  end
+
+  def before_render
+    raise "Missing button component" if content && button.nil?
+  end
+
+  class ToggleButton < Irelia::Button::Component
+    def initialize(**options)
+      options[:html_options] ||= {}
+      options[:html_options]["data"] = { "action": "irelia-modal#open" }
+
+      super(**options)
+    end
+  end
+end

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

@@ -0,0 +1,50 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["container", "frame", "loader", "background"];
+
+  connect() {
+    this.observer = new MutationObserver(this.frameMutated.bind(this));
+    this.observer.observe(this.frameTarget, {
+      attributes: true,
+      childList: false,
+      characterData: false,
+    });
+  }
+
+  disconnect() {
+    this.observer.disconnect();
+    delete this.observer;
+    this.close();
+  }
+
+  frameMutated() {
+    if (this.frameTarget.hasAttribute("busy")) {
+      this.loaderTarget.classList.remove("hidden");
+      this.open();
+    } else {
+      this.loaderTarget.classList.add("hidden");
+    }
+  }
+
+  open() {
+    // Unhide the modal
+    this.containerTarget.classList.remove("hidden");
+  }
+
+  close(e) {
+    e.preventDefault();
+
+    // Hide the modal
+    this.containerTarget.classList.add("hidden");
+  }
+
+  closeWithKeyboard(e) {
+    if (
+      e.keyCode === 27 &&
+      !this.containerTarget.classList.contains("hidden")
+    ) {
+      this.close(e);
+    }
+  }
+}

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

@@ -0,0 +1,41 @@
+@layer components {
+  .irelia-modal__container {
+    @apply fixed top-0 left-0 z-[99] flex items-center justify-center w-screen h-screen px-10;
+  }
+
+  .irelia-modal__background {
+    @apply absolute inset-0 w-full h-full bg-black bg-opacity-20;
+  }
+
+  .irelia-modal {
+    @apply relative w-full py-6 bg-white px-7 rounded-lg shadow;
+
+    .irelia-modal__header {
+      @apply flex items-center justify-between;
+
+      h3 {
+        @apply text-lg font-bold text-irelia-primary;
+      }
+    }
+
+    .irelia-modal__close-button {
+      @apply absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 text-gray-600 rounded-full hover:text-gray-800 hover:bg-gray-50;
+    }
+
+    .irelia-modal__content {
+      @apply relative w-auto;
+    }
+  }
+
+  .irelia-modal--with-title {
+    @apply border-b border-irelia-border;
+
+    .irelia-modal__header {
+      @apply border-b border-irelia-border pb-3.5 mb-5;
+    }
+  }
+
+  .irelia-modal--default {
+    @apply sm:max-w-lg;
+  }
+}

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

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class Irelia::Modal::Preview < Irelia::ComponentPreview
+  # You can specify the container class for the default template
+  # self.container_class = "w-1/2 border border-gray-300"
+  #
+  def static_content
+  end
+
+  def remote_content
+  end
+end

data/app/components/irelia/modal/previews/remote_content.html.erb

@@ -0,0 +1,6 @@
+<%= irelia_modal(name: "popup_modal", title: "Remote loaded content") %>
+
+<%= irelia_stack do %>
+  <%= irelia_button(url: modals_preview_path, modal: "popup_modal") { "Open Modal 1" } %>
+  <%= irelia_button(url: modals_preview2_path, modal: "popup_modal") { "Open Modal 2" } %>
+<% end %>

data/app/components/irelia/modal/previews/static_content.html.erb

@@ -0,0 +1,4 @@
+<%= irelia_modal(name: "static_modal", title: "Static modal title") do |modal| %>
+  <% modal.with_button { "Open modal" } %>
+  This is modal with static content.
+<% end %>

data/app/components/irelia/navbar/brand/component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+class Irelia::Navbar::Brand::Component < Irelia::Component
+  option :url, default: -> { nil }, optional: true
+
+  def variants
+    class_names(
+      "irelia-navbar__brand",
+      "irelia-navbar__brand--default": variant == :default
+    )
+  end
+
+  def initialize(**options)
+    super
+
+    @tag = @url.present? ? :a : :span
+    @html_options[:href] = @url if @url.present?
+  end
+
+  def call
+    content_tag(@tag, html_options) do
+      content
+    end
+  end
+end

data/app/components/irelia/navbar/brand/index.pcss

@@ -0,0 +1,9 @@
+@layer components {
+  .irelia-navbar__brand {
+    @apply text-xl font-bold;
+  }
+
+  .irelia-navbar__brand--default {
+    @apply text-irelia-primary hover:text-irelia-primary-hover transition;
+  }
+}

data/app/components/irelia/navbar/brand/preview.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+class Irelia::Navbar::Brand::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
+    render(Irelia::Navbar::Brand::Component.new(url: "#")) { "Irelia" }
+  end
+end

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

@@ -0,0 +1,10 @@
+<%= content_tag :section, html_options do %>
+  <%= render(Irelia::Container::Component.new(
+    size: full_width ? :full_width : :xl,
+    center: true,
+    html_options: { class: "irelia-navbar__inner" })) do %>
+    <% components.each do |component| %>
+      <%= component %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+class Irelia::Navbar::Component < Irelia::Component
+  option :full_width, default: -> { false }
+
+  renders_many :components, types: {
+    brand: { renders: Irelia::Navbar::Brand::Component, as: :brand },
+    navigation: { renders: Irelia::Navbar::Navigation::Component, as: :navigation },
+    separator: { renders: Irelia::Navbar::Separator::Component, as: :separator },
+    section: { renders: Irelia::Navbar::Section::Component, as: :section }
+  }
+
+  def variants
+    class_names(
+      "irelia-navbar",
+      "irelia-navbar--default": variant == :default,
+      "irelia-navbar--full-width": full_width
+    )
+  end
+end

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

@@ -0,0 +1,13 @@
+@layer components {
+  .irelia-navbar {
+    @apply bg-irelia-surface h-[var(--irelia-navbar-height)] sticky left-0 right-0 top-0 z-50 items-center border-irelia-border border-b;
+  }
+
+  .irelia-navbar__inner {
+    @apply flex items-center gap-x-10 h-full text-sm;
+  }
+
+  .irelia-navbar--full-width .irelia-navbar__inner {
+    @apply px-10;
+  }
+}

data/app/components/irelia/navbar/navigation/component.html.erb

@@ -0,0 +1,5 @@
+<%= content_tag :div, html_options do %>
+  <% links.each do |link| %>
+    <%= link %>
+  <% end %>
+<% end %>

data/app/components/irelia/navbar/navigation/component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class Irelia::Navbar::Navigation::Component < Irelia::Navbar::Section::Component
+  # Override to make the default value true
+  option :grow, default: -> { true }, in: [ true, false ]
+
+  renders_many :links, Irelia::Navbar::Navigation::Link::Component
+
+  def variants
+    class_names(
+      "irelia-navbar__navigation",
+      "irelia-navbar__navigation--default": variant == :default
+    )
+  end
+end

data/app/components/irelia/navbar/navigation/index.pcss

@@ -0,0 +1,9 @@
+@layer components {
+  .irelia-navbar__navigation {
+    @apply irelia-navbar__section;
+  }
+
+  .irelia-navbar__navigation--default {
+    @apply h-full gap-x-8;
+  }
+}

data/app/components/irelia/navbar/navigation/link/component.html.erb

@@ -0,0 +1,5 @@
+<%= link_to url, html_options do %>
+  <span class=".irelia-navbar__navigation__link__content">
+    <%= content %>
+  </span>
+<% end %>

data/app/components/irelia/navbar/navigation/link/component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+class Irelia::Navbar::Navigation::Link::Component < Irelia::Component
+  option :url
+  option :active, default: -> { false }
+
+  def variants
+    class_names(
+      "irelia-navbar__navigation__link",
+      "irelia-navbar__navigation__link--default": variant == :default,
+      "irelia-navbar__navigation__link--active": active
+    )
+  end
+
+  # def call
+  #   raise "#{self.class.name}: content block is required" if content.nil?
+  # end
+end

data/app/components/irelia/navbar/navigation/link/index.pcss

@@ -0,0 +1,13 @@
+@layer components {
+  .irelia-navbar__navigation__link {
+    @apply flex;
+  }
+
+  .irelia-navbar__navigation__link--default {
+    @apply h-full items-center text-irelia-text hover:text-irelia-primary;
+  }
+
+  .irelia-navbar__navigation__link--default.irelia-navbar__navigation__link--active {
+    @apply text-irelia-primary font-bold;
+  }
+}

data/app/components/irelia/navbar/navigation/link/preview.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+class Irelia::Navbar::Navigation::Link::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
+    render(Irelia::Navbar::Navigation::Link::Component.new(url: "#")) { "Navbar link" }
+  end
+end

data/app/components/irelia/navbar/navigation/preview.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class Irelia::Navbar::Navigation::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
+    render(Irelia::Navbar::Navigation::Component.new) do |nav|
+      nav.with_link(url: "#", active: true) { "Home" }
+      nav.with_link(url: "#") { "Features" }
+      nav.with_link(url: "#") { "Pricing" }
+      nav.with_link(url: "#") { "Documentation" }
+    end
+  end
+end

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

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+class Irelia::Navbar::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
+  end
+
+  # @label Navigation on right side
+  def navigation_right
+  end
+
+  # @label Full width (no container)
+  def full_width
+  end
+end

data/app/components/irelia/navbar/previews/default.html.erb

@@ -0,0 +1,19 @@
+<%= irelia_navbar do |navbar| %>
+  <% navbar.with_brand(url: "#") { "Irelia" } %>
+
+  <%= navbar.with_separator %>
+
+  <% navbar.with_navigation do |nav| %>
+    <%= nav.with_link(url: "#", active: true) { "Home" } %>
+    <%= nav.with_link(url: "#") { "Features" } %>
+    <%= nav.with_link(url: "#") { "Pricing" } %>
+    <%= nav.with_link(url: "#") { "Documentation" } %>
+  <% end %>
+
+  <%= navbar.with_separator %>
+
+  <%= navbar.with_section do |section| %>
+    <%= irelia_button(size: :sm, color: :secondary) { "Sign in" } %>
+    <%= irelia_button(size: :sm) { "Create account" } %>
+  <% end %>
+<% end %>

data/app/components/irelia/navbar/previews/full_width.html.erb

@@ -0,0 +1,19 @@
+<%= irelia_navbar(full_width: true) do |navbar| %>
+  <% navbar.with_brand(url: "#") { "Irelia" } %>
+
+  <%= navbar.with_separator %>
+
+  <% navbar.with_navigation do |nav| %>
+    <%= nav.with_link(url: "#", active: true) { "Home" } %>
+    <%= nav.with_link(url: "#") { "Features" } %>
+    <%= nav.with_link(url: "#") { "Pricing" } %>
+    <%= nav.with_link(url: "#") { "Documentation" } %>
+  <% end %>
+
+  <%= navbar.with_separator %>
+
+  <%= navbar.with_section do |section| %>
+    <%= irelia_button(size: :sm, color: :secondary) { "Sign in" } %>
+    <%= irelia_button(size: :sm) { "Create account" } %>
+  <% end %>
+<% end %>

data/app/components/irelia/navbar/previews/navigation_right.html.erb

@@ -0,0 +1,19 @@
+<%= irelia_navbar do |navbar| %>
+  <% navbar.with_brand(url: "#") { "Irelia" } %>
+
+  <%= navbar.with_separator %>
+
+  <% navbar.with_navigation(justify: :end) do |nav| %>
+    <%= nav.with_link(url: "#", active: true) { "Home" } %>
+    <%= nav.with_link(url: "#") { "Features" } %>
+    <%= nav.with_link(url: "#") { "Pricing" } %>
+    <%= nav.with_link(url: "#") { "Documentation" } %>
+  <% end %>
+
+  <%= navbar.with_separator %>
+
+  <%= navbar.with_section do |section| %>
+    <%= irelia_button(size: :sm, color: :secondary) { "Sign in" } %>
+    <%= irelia_button(size: :sm) { "Create account" } %>
+  <% end %>
+<% end %>

data/app/components/irelia/navbar/section/component.html.erb

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

data/app/components/irelia/navbar/section/component.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+class Irelia::Navbar::Section::Component < Irelia::Component
+  include Irelia::Options::Flex::Grow
+  include Irelia::Options::Flex::Justify
+
+  def variants
+    class_names(
+      "irelia-navbar__section",
+      "irelia-navbar__section--default": variant == :default
+    )
+  end
+end

data/app/components/irelia/navbar/section/index.pcss

@@ -0,0 +1,8 @@
+@layer components {
+  .irelia-navbar__section {
+    @apply flex items-center gap-x-5;
+  }
+
+  .irelia-navbar__section--default {
+  }
+}

data/app/components/irelia/navbar/separator/component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+class Irelia::Navbar::Separator::Component < Irelia::Component
+  def variants
+    class_names(
+      "irelia-navbar__separator",
+      "irelia-navbar__separator--default": variant == :default
+    )
+  end
+
+  def call
+    content_tag(:div, content, html_options)
+  end
+end

data/app/components/irelia/navbar/separator/index.pcss

@@ -0,0 +1,8 @@
+@layer components {
+  .irelia-navbar__separator {
+    @apply w-[1px] h-[30px] bg-irelia-border;
+  }
+
+  .irelia-navbar__separator--default {
+  }
+}

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

@@ -0,0 +1,7 @@
+<%= content_tag :nav, html_options do %>
+  <%= render(Irelia::Stack::Component.new) do %>
+    <% links.each do |link| %>
+      <%= link %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+class Irelia::Navigation::Component < Irelia::Component
+  renders_many :links, "NavigationLink"
+
+  def variants
+    class_names(
+      "irelia-navigation",
+      "irelia-navigation--default": variant == :default
+    )
+  end
+
+  class NavigationLink < Irelia::Button::Component
+    option :active, default: -> { false }
+
+    def initialize(**options)
+      options[:size] = :sm
+      options[:color] = options[:active] ? :primary : :secondary
+
+      super(**options)
+    end
+  end
+end

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

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

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

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+class Irelia::Navigation::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_navigation do |nav|
+      nav.with_link(active: true) { "Profile" }
+      nav.with_link { "Messages" }
+      nav.with_link { "Gallery" }
+    end
+  end
+end

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

@@ -0,0 +1,9 @@
+<%= content_tag :div, html_options do %>
+  <div class="icon">
+    <%= helpers.irelia_icon { icon_class } %>
+  </div>
+  <div class="text">
+    <% if title %><h5><%= title %></h5><% end %>
+    <span><%= content %></span>
+  </div>
+<% end %>

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

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+class Irelia::Notification::Component < Irelia::Component
+  option :variant, default: proc { :notice }, in: %i[notice success warning error]
+  option :title, default: -> { nil }, required: false
+
+  def icon_class
+    icons = {
+      notice: "fa fa-info-circle",
+      success: "fa fa-check-circle",
+      warning: "fa fa-exclamation-triangle",
+      alert: "fa fa-exclamation-circle"
+    }
+
+    icons[variant]
+  end
+
+  def variants
+    class_names(
+      "irelia-notification",
+      "irelia-notification--notice": variant == :notice,
+      "irelia-notification--success": variant == :success,
+      "irelia-notification--warning": variant == :warning,
+      "irelia-notification--alert": variant == :alert
+    )
+  end
+end

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

@@ -0,0 +1,41 @@
+@layer components {
+  .irelia-notification {
+    @apply relative flex rounded py-4 px-6 w-full shadow-sm;
+
+    .icon {
+      @apply flex items-center justify-center pr-6;
+
+      .fa {
+        @apply w-6 h-6;
+      }
+    }
+
+    .text {
+      @apply flex flex-col gap-y-0.5 w-full;
+
+      h5 {
+        @apply font-semibold  leading-none tracking-tight;
+      }
+
+      span {
+        @apply text-sm opacity-80;
+      }
+    }
+  }
+
+  .irelia-notification--notice {
+    @apply bg-neutral-100 text-neutral-600;
+  }
+
+  .irelia-notification--success {
+    @apply bg-green-50 text-green-600;
+  }
+
+  .irelia-notification--warning {
+    @apply bg-yellow-50 text-yellow-600;
+  }
+
+  .irelia-notification--alert {
+    @apply bg-red-50 text-red-600;
+  }
+}

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

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+class Irelia::Notification::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_notification { "Lorem ipsum dolor sit amet, consectetur adipiscing elit." }
+  end
+
+  def success
+    irelia_notification(variant: :success) { "Lorem ipsum dolor sit amet, consectetur adipiscing elit." }
+  end
+
+  def warning
+    irelia_notification(variant: :warning) { "Lorem ipsum dolor sit amet, consectetur adipiscing elit." }
+  end
+
+  def alert
+    irelia_notification(variant: :alert) { "Lorem ipsum dolor sit amet, consectetur adipiscing elit." }
+  end
+end

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

@@ -0,0 +1,15 @@
+<%= content_tag :header, html_options do %>
+  <div class="irelia-page-header__inner">
+    <h1><%= title %></h1>
+    <% if subline %>
+      <p><%= subline %></p>
+    <% end %>
+  </div>
+  <div class="irelia-page-header__action-buttons">
+    <%= render(Irelia::Stack::Component.new) do %>
+      <% buttons.each do |button| %>
+        <%= button %>
+      <% end %>
+    <% end %>
+  </div>
+<% end %>