irelia 0.1.0 → 0.2.0

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

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+class Irelia::Dropdown::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_dropdown(open: true) do |dropdown|
+      dropdown.with_trigger(size: :sm, icon: "fas fa-gear")
+      dropdown.with_item { "Profile" }
+      dropdown.with_item { "Settings" }
+      dropdown.with_item { "Switch account" }
+      dropdown.with_item { "Sign out" }
+    end
+  end
+
+  # @label Icons on left
+  def icons_left
+    irelia_dropdown(open: true) do |dropdown|
+      dropdown.with_trigger(size: :sm, icon: "fas fa-gear")
+      dropdown.with_item(icon: "fas fa-user") { "Profile" }
+      dropdown.with_item(icon: "fas fa-gear") { "Settings" }
+      dropdown.with_item(icon: "fas fa-users") { "Switch account" }
+      dropdown.with_item(icon: "fas fa-right-from-bracket") { "Sign out" }
+    end
+  end
+
+  # @label Icons on right
+  def icons_right
+    irelia_dropdown(open: true) do |dropdown|
+      dropdown.with_trigger(size: :sm, icon: "fas fa-gear")
+      dropdown.with_item(right_icon: "fas fa-user") { "Profile" }
+      dropdown.with_item(right_icon: "fas fa-gear") { "Settings" }
+      dropdown.with_item(right_icon: "fas fa-users") { "Switch account" }
+      dropdown.with_item(right_icon: "fas fa-right-from-bracket") { "Sign out" }
+    end
+  end
+
+  # @label Direction up
+  def direction_up
+  end
+end

data/app/components/irelia/dropdown/previews/direction_up.html.erb

@@ -0,0 +1,10 @@
+<div style="margin-top: 120px">
+  <%= irelia_dropdown(open: true, direction: :up) do |dropdown|
+    dropdown.with_trigger(size: :sm, icon: "fas fa-gear")
+    dropdown.with_item(right_icon: "fas fa-user") { "Profile" }
+    dropdown.with_item(right_icon: "fas fa-gear") { "Settings" }
+    dropdown.with_item(right_icon: "fas fa-users") { "Switch account" }
+    dropdown.with_item(right_icon: "fas fa-right-from-bracket") { "Sign out" }
+  end
+  %>
+</div>

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

@@ -0,0 +1,19 @@
+<%= render(Irelia::Card::Component.new(padding: false)) do |card| %>
+  <%= content_tag :div, html_options do %>
+    <div class="irelia-empty-collection--content">
+      <h1><%= title %></h1>
+      <p><%= description %></p>
+      <% if buttons %>
+        <%= render(Irelia::Flex::Component.new(direction: :row, gap: :small, padding_top: :md)) do |flex| %>
+          <% buttons.each do |button| %>
+            <%= button %>
+          <% end %>
+        <% end %>
+      <% end %>
+    </div>
+    <div class="irelia-empty-collection--image-container">
+      <img width="200" height="200" src="https://rankzon.com/assets/undraw/rocket_launch-87eb4798f5e680120a6fe78d908e9df35bf6cc2e0282f35b258ec03a48f159b2.svg">
+    </div>
+  <% end %>
+<% end %>
+

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

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class Irelia::EmptyCollection::Component < Irelia::Component
+  option :title, default: -> { nil }
+  option :description, default: -> { nil }
+
+  renders_many :buttons, Irelia::Button::Component
+
+  def variants
+    class_names(
+      "irelia-empty-collection",
+      "irelia-empty-collection--default": variant == :default
+    )
+  end
+end

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

@@ -0,0 +1,23 @@
+@layer components {
+  .irelia-empty-collection {
+    @apply flex py-10 px-12 gap-32;
+  }
+
+  .irelia-empty-collection--content {
+    @apply flex flex-col w-2/3 justify-center gap-y-5;
+    h1 {
+      @apply text-2xl font-bold text-irelia-primary;
+    }
+    p {
+      @apply text-base;
+    }
+  }
+
+  .irelia-empty-collection--image-container {
+    @apply flex flex-shrink text-center items-center justify-center w-1/3;
+  }
+
+  .irelia-empty-collection--actions {
+    @apply flex gap-x-2;
+  }
+}

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

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class Irelia::EmptyCollection::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
+end

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

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

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

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+class Irelia::Flex::Component < Irelia::Component
+  include Irelia::Options::Padding
+  include Irelia::Options::TextFormatting
+  include Irelia::Options::Width
+  include Irelia::Options::Fixed
+
+  include Irelia::Options::Flex::Justify
+  include Irelia::Options::Flex::Direction
+  include Irelia::Options::Flex::Gap
+  include Irelia::Options::Flex::Grow
+  include Irelia::Options::Flex::Items
+
+  def variants
+    class_names(
+      "irelia-flex",
+      "irelia-flex--default": variant == :default,
+    )
+  end
+end

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

@@ -0,0 +1,37 @@
+@layer components {
+  .irelia-flex {
+    @apply flex;
+  }
+
+  .irelia-flex--row {
+    @apply flex-row;
+  }
+
+  .irelia-flex--column {
+    @apply flex-col;
+  }
+
+  .irelia-flex--default {
+    @apply gap-5;
+  }
+
+  .irelia-flex--gap-none {
+    @apply gap-0;
+  }
+
+  .irelia-flex--gap-xs {
+    @apply gap-1.5;
+  }
+
+  .irelia-flex--gap-sm {
+    @apply gap-2.5;
+  }
+
+  .irelia-flex--gap-md {
+    @apply gap-5;
+  }
+
+  .irelia-flex--gap-lg {
+    @apply gap-10;
+  }
+}

data/app/components/irelia/form/base/component.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+class Irelia::Form::Base::Component < Irelia::Component
+  option :object, required: true
+  option :object_name, required: true
+  option :method, required: true
+  option :options, default: -> { {} }, required: false
+
+  def label_text
+    options[:label] || object&.class&.human_attribute_name(method)
+  end
+
+  def hint_text
+    options[:hint]
+  end
+
+  def input_options
+    html_options.merge(
+      value: value,
+    )
+  end
+
+  def value
+    object&.send(method)
+  end
+
+  def group_component
+    Irelia::Form::Group::Component.new(
+      object: object,
+      object_name: object_name,
+      method: method,
+      options: options
+    )
+  end
+
+  def errors
+    object ? object.errors[method] : []
+  end
+
+  def error_messages
+    errors&.join(", ")
+  end
+
+  def has_errors?
+    errors&.any?
+  end
+
+  def has_hint?
+    hint_text.present?
+  end
+end

data/app/components/irelia/form/base/index.pcss

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

data/app/components/irelia/form/email_field/component.html.erb

@@ -0,0 +1,3 @@
+<%= render(group_component) do %>
+  <%= email_field(object_name, method, **input_options) %>
+<% end %>

data/app/components/irelia/form/email_field/component.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+class Irelia::Form::EmailField::Component < Irelia::Form::TextField::Component
+  def variants
+    class_names(
+      "irelia-form__email-field",
+      "irelia-form__email-field--default": variant == :default
+    )
+  end
+end

data/app/components/irelia/form/email_field/index.pcss

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

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

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class Page::Breadcrumbs::Preview < ApplicationViewComponentPreview
+class Irelia::Form::EmailField::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/form/email_field/previews/default.html.erb

@@ -0,0 +1,3 @@
+<%= irelia_form url: false do |form| %>
+  <%= form.email_field :email, label: "Email", placeholder: "Enter a valid email address" %>
+<% end %>

data/app/components/irelia/form/group/component.html.erb

@@ -0,0 +1,19 @@
+<%= content_tag :div, group_options do %>
+  <% if label_text %>
+    <label for="<%= field_id(object_name, method) %>"><%= label_text %></label>
+  <% end %>
+
+  <%= content %>
+
+  <% if has_hint? %>
+    <div class="irelia-group__hint">
+      <%= hint_text %>
+    </div>
+  <% end %>
+
+  <% if has_errors? %>
+    <div class="irelia-group__errors">
+      <%= error_messages  %>
+    </div>
+  <% end %>
+<% end %>

data/app/components/irelia/form/group/component.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+class Irelia::Form::Group::Component < Irelia::Form::Base::Component
+  def initialize(**options)
+    super
+
+    add_css_classes "irelia-form__group--invalid" if errors.present?
+  end
+
+  def group_options
+    html_options.merge(
+      id: group_id
+    )
+  end
+
+  def group_id
+    "#{object_name}_#{method}_group"
+  end
+
+  def variants
+    class_names(
+      "irelia-form__group",
+      "irelia-form__group--default": variant == :default
+    )
+  end
+end

data/app/components/irelia/form/group/index.pcss

@@ -0,0 +1,32 @@
+@layer components {
+  .irelia-form__group {
+    @apply flex flex-col shadow-sm bg-white rounded p-5 relative w-full gap-y-1.5 text-left;
+
+    label {
+      @apply font-bold uppercase text-sm text-irelia-primary whitespace-nowrap;
+    }
+
+    &.irelia-form__group--invalid {
+      label {
+        @apply text-irelia-danger;
+      }
+    }
+
+    input:not([type="checkbox"]),
+    textarea,
+    select {
+      @apply appearance-none p-0 m-0 w-full border-0 focus:ring-0 focus:outline-none bg-white hover:text-irelia-primary focus:text-irelia-primary placeholder-neutral-400;
+    }
+  }
+
+  .irelia-group__errors {
+    @apply text-irelia-danger text-sm -mb-1.5;
+  }
+
+  .irelia-group__hint {
+    @apply text-neutral-500 text-xs mt-1.5;
+  }
+
+  .irelia-form__group--default {
+  }
+}

data/app/components/irelia/form/password_field/component.html.erb

@@ -0,0 +1,3 @@
+<%= render(group_component) do %>
+  <%= password_field(object_name, method, **input_options) %>
+<% end %>

data/app/components/irelia/form/password_field/component.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+class Irelia::Form::PasswordField::Component < Irelia::Form::TextField::Component
+  def variants
+    class_names(
+      "irelia-form__password-field",
+      "irelia-form__password-field--default": variant == :default
+    )
+  end
+end

data/app/components/irelia/form/password_field/index.pcss

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

data/app/components/irelia/form/password_field/preview.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class Irelia::Form::PasswordField::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
+end

data/app/components/irelia/form/password_field/previews/default.html.erb

@@ -0,0 +1,3 @@
+<%= irelia_form url: false do |form| %>
+  <%= form.password_field :password, label: "Current password", placeholder: "Enter your current password" %>
+<% end %>

data/app/components/irelia/form/select/component.html.erb

@@ -0,0 +1,3 @@
+<%= render(group_component) do %>
+  <%= select(object_name, method, choices, options, html_options) %>
+<% end %>

data/app/components/irelia/form/select/component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+class Irelia::Form::Select::Component < Irelia::Form::Base::Component
+  option :choices, required: false, default: -> { nil }
+
+  def options
+    @options.merge({
+      selected: value
+    })
+  end
+
+  def variants
+    class_names(
+      "irelia-form__select",
+      "irelia-form__select--default": variant == :default
+    )
+  end
+end

data/app/components/irelia/form/select/index.pcss

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

data/app/components/irelia/form/select/preview.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class Irelia::Form::Select::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
+end

data/app/components/irelia/form/select/previews/default.html.erb

@@ -0,0 +1,3 @@
+<%= irelia_form url: false do |form| %>
+  <%= form.select :locale, [["English", "en"], ["Svenska", "sv"]], { prompt: "Select language" }, { label: "Select language", required: true, autofocus: true } %>
+<% end %>

data/app/components/irelia/form/text_field/component.html.erb

@@ -0,0 +1,3 @@
+<%= render(group_component) do %>
+  <%= text_field(object_name, method, **input_options) %>
+<% end %>

data/app/components/irelia/form/text_field/component.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+class Irelia::Form::TextField::Component < Irelia::Form::Base::Component
+  def variants
+    class_names(
+      "irelia-form__text-field",
+      "irelia-form__text-field--default": variant == :default
+    )
+  end
+end

data/app/components/irelia/form/text_field/index.pcss

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

data/app/components/irelia/form/text_field/preview.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class Irelia::Form::TextField::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
+end

data/app/components/irelia/form/text_field/previews/default.html.erb

@@ -0,0 +1,3 @@
+<%= irelia_form url: false do |form| %>
+  <%= form.text_field :name, label: "Full name", placeholder: "Enter you full name", hint: "Firstname + surname" %>
+<% end %>

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

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

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

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

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

@@ -0,0 +1,16 @@
+@layer components {
+  .irelia-html {
+    @apply prose prose-stone;
+
+    > *:first-child {
+      @apply mt-0;
+    }
+
+    > *:last-child {
+      @apply mb-0;
+    }
+  }
+
+  .irelia-html--default {
+  }
+}

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

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class Irelia::Html::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
+end

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

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+class Irelia::Icon::Component < Irelia::Component
+  option :icon_class, optional: true
+
+  def variants
+    class_names(
+      "irelia-icon",
+      "irelia-icon--default": variant == :default
+    )
+  end
+
+  def call
+    content_tag(:span, html_options) do
+      content_tag(:i, nil, class: (icon_class || content))
+    end
+  end
+end

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

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

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

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+class Irelia::Icon::Preview < Irelia::ComponentPreview
+  def default
+    irelia_icon { "fas fa-user" }
+  end
+
+  def font_awesome
+  end
+end

data/app/components/irelia/icon/previews/font_awesome.html.erb

@@ -0,0 +1,23 @@
+<%= irelia_stack do %>
+  <%= irelia_stack direction: :vertical, items: :center do %>
+    <%= irelia_icon { "fas fa-home" } %>
+    <span>fas fa-home</span>
+  <% end %>
+  <%= irelia_stack direction: :vertical, items: :center do %>
+    <%= irelia_icon { "fas fa-user" } %>
+    <span>fas fa-user</span>
+  <% end %>
+  <%= irelia_stack direction: :vertical, items: :center do %>
+    <%= irelia_icon { "fab fa-github" } %>
+    <span>fab fa-github</span>
+  <% end %>
+  <%= irelia_stack direction: :vertical, items: :center do %>
+    <%= irelia_icon { "fab fa-facebook" } %>
+    <span>fab fa-facebook</span>
+  <% end %>
+  <!-- Add more icons as needed -->
+<% end %>
+
+<br>
+<strong>For full icon list, check:</strong><br>
+<a href="https://fontawesome.com/search?o=r&m=free" target="_blank">https://fontawesome.com/search</a>

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

@@ -0,0 +1,28 @@
+<div data-controller="irelia-modal">
+  <div class="irelia-modal__container hidden"
+    data-irelia-modal-target="container"
+    data-action="keyup@window->irelia-modal#closeWithKeyboard"
+    >
+    <div class="irelia-modal__background" data-action="click->irelia-modal#close" data-irelia-modal-target="background"></div>
+    <%= content_tag :div, html_options do %>
+      <div class="irelia-modal__header">
+        <% if title %>
+          <h3><%= title %></h3>
+        <% end %>
+        <button class="irelia-modal__close-button" data-action="click->irelia-modal#close">
+          <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
+        </button>
+      </div>
+
+      <div class="irelia-modal__content">
+        <% if content %>
+          <%= content %>
+        <% else %>
+          <div data-irelia-modal-target="loader">Loading</div>
+          <turbo-frame id="<%= @name %>" data-irelia-modal-target="frame" src="" target="_top"></turbo-frame>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+  <%= button %>
+</div>