irelia 0.1.0 → 0.2.0

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

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+class Irelia::PageHeader::Component < Irelia::Component
+  option :title
+  option :subline, optional: true
+  option :variant, default: proc { :default }, in: %i[default split_screen]
+
+  renders_many :buttons, Irelia::Button::Component
+
+  def variants
+    class_names(
+      "irelia-page-header",
+      "irelia-page-header--default": variant == :default,
+      "irelia-page-header--split-screen": variant == :split_screen
+    )
+  end
+end

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

@@ -0,0 +1,36 @@
+@layer components {
+  .irelia-page-header {
+    .irelia-page-header__action-buttons {
+    }
+  }
+
+  .irelia-page-header--default {
+    @apply flex space-y-1 mb-10 items-center;
+
+    .irelia-page-header__inner {
+      @apply flex-1;
+
+      h1 {
+        @apply text-2xl font-bold text-irelia-primary;
+      }
+
+      p {
+        @apply text-neutral-400;
+      }
+    }
+  }
+
+  .irelia-page-header--split-screen {
+    @apply mb-5;
+
+    .irelia-page-header__inner {
+      h1 {
+        @apply text-2xl font-bold mb-2 text-irelia-primary;
+      }
+
+      p {
+        @apply text-neutral-400;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+class Irelia::PageHeader::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_page_header(title: "Projects", subline: "List of all your projects.") do |header|
+      header.with_button { "Create a project" }
+      header.with_button(color: :secondary) { "Documentation" }
+    end
+  end
+end

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

@@ -0,0 +1,6 @@
+<%= content_tag(:section, html_options) do %>
+  <a href="<%= url %>" class="irelia-sidebar__brand--logo"><%= content %></a>
+  <span class="irelia-sidebar__brand--actions">
+    <%= render(Irelia::Icon::Component.new) { "fa fa-bell" } %>
+  </span>
+<% end %>

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

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+class Irelia::Sidebar::Brand::Component < Irelia::Component
+  option :url, default: -> { nil }, optional: true
+
+  def variants
+    class_names(
+      "irelia-sidebar__brand",
+      "irelia-sidebar__brand--default": variant == :default
+    )
+  end
+
+  def initialize(**options)
+    super
+
+    @tag = @url.present? ? :a : :div
+    @html_options[:href] = @url if @url.present?
+  end
+end

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

@@ -0,0 +1,13 @@
+@layer components {
+  .irelia-sidebar__brand {
+    @apply text-xl font-bold;
+  }
+
+  .irelia-sidebar__brand--default {
+    @apply -mt-10 flex justify-between items-center h-28 px-10 text-irelia-primary hover:text-irelia-primary-hover transition;
+
+    .irelia-sidebar__brand--actions {
+      @apply text-sm;
+    }
+  }
+}

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

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

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

@@ -0,0 +1,8 @@
+<%= content_tag :aside, html_options do %>
+  <div class="irelia-sidebar__inner">
+    <% components.each do |component| %>
+      <%= component %>
+    <% end %>
+    <%= content %>
+  </div>
+<% end %>

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

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+class Irelia::Sidebar::Component < Irelia::Component
+  renders_many :components, types: {
+    brand: { renders: Irelia::Sidebar::Brand::Component, as: :brand },
+    navigation: { renders: Irelia::Sidebar::Navigation::Component, as: :navigation },
+    section: { renders: Irelia::Sidebar::Section::Component, as: :section }
+  }
+
+  def variants
+    class_names(
+      "irelia-sidebar",
+      "irelia-sidebar--default": variant == :default
+    )
+  end
+end

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

@@ -0,0 +1,12 @@
+@layer components {
+  .irelia-sidebar {
+    @apply flex-shrink w-96 bg-stone-100 border-r-2 border-stone-100 py-10;
+  }
+
+  .irelia-sidebar--default {
+  }
+
+  .irelia-sidebar__inner {
+    @apply flex flex-col h-full gap-y-10;
+  }
+}

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

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

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

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class Irelia::Sidebar::Navigation::Component < Irelia::Sidebar::Section::Component
+  renders_many :links, Irelia::Sidebar::Navigation::Link::Component
+
+  def variants
+    class_names(
+      "irelia-sidebar__navigation",
+      "irelia-sidebar__navigation--default": variant == :default
+    )
+  end
+end

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

@@ -0,0 +1,8 @@
+@layer components {
+  .irelia-sidebar__navigation {
+    @apply flex flex-col;
+  }
+
+  .irelia-sidebar__navigation--default {
+  }
+}

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

@@ -0,0 +1,10 @@
+<%= tag_helper url, html_options do %>
+  <% if icon %>
+    <span class="irelia-sidebar__navigation__link__icon">
+      <%= helpers.irelia_icon icon_class: icon %>
+    </span>
+  <% end %>
+  <span class="irelia-sidebar__navigation__link__content">
+    <%= content %>
+  </span>
+<% end %>

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

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+class Irelia::Sidebar::Navigation::Link::Component < Irelia::Component
+  option :url
+  option :active, default: -> { false }
+  option :icon, optional: true
+  option :method, optional: true, default: -> { :get }
+
+  def tag_helper(*args, &block)
+    method == :get ? link_to(*args, &block) : button_to(*args, &block)
+  end
+
+  def variants
+    class_names(
+      "irelia-sidebar__navigation__link",
+      "irelia-sidebar__navigation__link--default": variant == :default,
+      "irelia-sidebar__navigation__link--active": active
+    )
+  end
+
+  def initialize(**options)
+    super
+
+    @html_options[:method] = @method if @method != :get
+  end
+end

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

@@ -0,0 +1,20 @@
+@layer components {
+  .irelia-sidebar__navigation__link {
+  }
+
+  .irelia-sidebar__navigation__link--default {
+    @apply px-8 flex py-2 font-semibold gap-x-3 border-l-4 border-l-transparent;
+
+    &.irelia-sidebar__navigation__link--active {
+      @apply font-bold text-irelia-primary border-l-irelia-primary;
+    }
+
+    &:hover {
+      @apply text-irelia-primary;
+    }
+
+    .irelia-sidebar__navigation__link__icon {
+      @apply w-6 flex items-center justify-center;
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+class Irelia::Sidebar::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::Sidebar::Navigation::Link::Component.new(icon: "fa fa-dashboard", url: "#")) { "Dashboard" }
+  end
+
+  def post_request
+    render(Irelia::Sidebar::Navigation::Link::Component.new(icon: "fa fa-right-from-bracket", url: "#", method: :delete)) { "Sign out" }
+  end
+end

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

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+class Irelia::Sidebar::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::Sidebar::Navigation::Component.new) do |navbar|
+      navbar.with_link(url: "#", icon: "fa fa-home", active: true) { "Home" }
+      navbar.with_link(url: "#", icon: "fa fa-globe") { "Websites" }
+      navbar.with_link(url: "#", icon: "fab fa-github") { "Repositories" }
+      navbar.with_link(url: "#", icon: "fa fa-book") { "Guide & documenation" }
+      navbar.with_link(url: "#", icon: "fa fa-gear") { "Settings" }
+    end
+  end
+end

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

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class Irelia::Sidebar::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/sidebar/previews/default.html.erb

@@ -0,0 +1,12 @@
+<%= irelia_sidebar do |sidebar| %>
+  <% sidebar.with_brand(url: root_path) { "Irelia" } %>
+  <% sidebar.with_navigation do |navbar| %>
+    <% navbar.with_link(url: "#", icon: "fa fa-home", active: true) { "Home" } %>
+    <% navbar.with_link(url: "#", icon: "fa fa-globe") { "Websites" } %>
+    <% navbar.with_link(url: "#", icon: "fab fa-github") { "Repositories" } %>
+    <% navbar.with_link(url: "#", icon: "fa fa-book") { "Guide & documenation" } %>
+    <% navbar.with_link(url: "#", icon: "fa fa-gear") { "Settings" } %>
+  <% end %>
+  <% sidebar.with_section(grow: true) %>
+  <% sidebar.with_section { "footer" } %>
+<% end %>

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

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

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

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+class Irelia::Sidebar::Section::Component < Irelia::Component
+  include Irelia::Options::Flex::Grow
+  include Irelia::Options::Flex::Justify
+
+  option :padding, default: -> { true }
+
+  def variants
+    class_names(
+      "irelia-sidebar__section",
+      "irelia-sidebar__section--default": variant == :default,
+      "irelia-sidebar__section--padding": padding
+    )
+  end
+end

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

@@ -0,0 +1,11 @@
+@layer components {
+  .irelia-sidebar__section {
+  }
+
+  .irelia-sidebar__section--default {
+  }
+
+  .irelia-sidebar__section--padding {
+    @apply px-10;
+  }
+}

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

@@ -0,0 +1,8 @@
+<%= content_tag :div, html_options do %>
+  <main class="irelia-split-screen__main">
+    <div class="irelia-split-screen__main__inner">
+      <%= content %>
+    </div>
+  </main>
+  <aside class="irelia-split-screen__aside"></aside>
+<% end %>

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

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+class Irelia::SplitScreen::Component < Irelia::Component
+  renders_one :left
+  renders_one :right
+
+  option :variant, default: -> { :default }, values: %i[default reverse]
+  option :center, default: -> { false }, values: %i[true false]
+
+  def variants
+    class_names(
+      "irelia-split-screen",
+      "irelia-split-screen--default": variant == :default,
+      "irelia-split-screen--reverse": variant == :reverse,
+      "irelia-split-screen--center": center == true,
+    )
+  end
+end

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

@@ -0,0 +1,35 @@
+@layer components {
+  .irelia-split-screen {
+    @apply fixed left-0 right-0 top-[var(--irelia-navbar-height)] bottom-0 flex;
+
+    .irelia-split-screen__aside {
+      @apply flex flex-1 bg-irelia-primary;
+    }
+
+    .irelia-split-screen__main {
+      @apply flex flex-1;
+
+      .irelia-split-screen__main__inner {
+        @apply w-full max-w-xl;
+      }
+    }
+  }
+
+  .irelia-split-screen--center {
+    .irelia-split-screen__main {
+      @apply items-center justify-center;
+
+      .irelia-split-screen__main__inner {
+        @apply text-center;
+      }
+    }
+  }
+
+  .irelia-split-screen--default {
+    @apply flex-row;
+  }
+
+  .irelia-split-screen--reverse {
+    @apply flex-row-reverse;
+  }
+}

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

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class Irelia::SplitScreen::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
+    component = Irelia::SplitScreen::Component.new
+    component.with_content("Main content!")
+    render component
+  end
+end

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

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

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

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+class Irelia::Stack::Component < Irelia::Component
+  include Irelia::Options::Flex::Items
+  include Irelia::Options::Flex::Justify
+
+  option :direction, default: -> { :horizontal }, in: %i[horizontal horizontal_reverse vertical vertical_reverse]
+  option :grow, default: -> { false }, in: [ true, false ]
+
+  def variants
+    class_names(
+      "irelia-stack",
+      "irelia-stack--default": variant == :default,
+      "irelia-stack--horizontal": direction == :horizontal,
+      "irelia-stack--horizontal-reverse": direction == :horizontal_reverse,
+      "irelia-stack--vertical": direction == :vertical,
+      "irelia-stack--vertical-reverse": direction == :vertical_reverse,
+      "irelia-stack--grow": grow
+    )
+  end
+end

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

@@ -0,0 +1,25 @@
+@layer components {
+  .irelia-stack {
+    @apply flex gap-4;
+  }
+
+  .irelia-stack--grow > * {
+    @apply grow;
+  }
+
+  .irelia-stack--horizontal {
+    @apply flex-row;
+  }
+
+  .irelia-stack--horizontal-reverse {
+    @apply flex-row-reverse;
+  }
+
+  .irelia-stack--vertical {
+    @apply flex-col;
+  }
+
+  .irelia-stack--vertical-reverse {
+    @apply flex-col-reverse;
+  }
+}

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

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+class Irelia::Stack::Preview < Irelia::ComponentPreview
+  # You can specify the container class for the default template
+  # self.container_class = "w-1/2 border border-gray-300"
+
+  # @label Default
+  # @param direction select { choices: [horizontal, horizontal_reverse, vertical, vertical_reverse] } "Direction of the stack"
+  # @param justify select { choices: [start, center, between, end, around, evenly, stretch] } "Position along main axis"
+  # @param items select { choices: [flex_start, center, flex_end, baseline, stretch] } "Position along cross axis"
+  # @param grow toggle "Grow items to fill space"
+
+  def default(direction: :horizontal, justify: :flex_start, items: :baseline, grow: false)
+    render_with_template(locals: {
+      direction: direction,
+      justify: justify,
+      items: items,
+      grow: grow
+    })
+  end
+
+  # @label Horizontal
+  # @param justify select { choices: [start, center, between, end, around, evenly, stretch] } "Position along main axis"
+  # @param items select { choices: [flex_start, center, flex_end, baseline, stretch] } "Position along cross axis"
+  # @param grow toggle "Grow items to fill space"
+
+  def horizontal(justify: :flex_start, items: :baseline, grow: false)
+    render_with_template(locals: {
+      justify: justify,
+      items: items,
+      grow: grow
+    })
+  end
+
+  # @label Vertical
+  # @param justify select { choices: [start, center, between, end, around, evenly, stretch] } "Position along main axis"
+  # @param items select { choices: [flex_start, center, flex_end, baseline, stretch] } "Position along cross axis"
+  # @param grow toggle "Grow items to fill space"
+
+  def vertical(justify: :flex_start, items: :baseline, grow: false)
+    render_with_template(locals: {
+      justify: justify,
+      items: items,
+      grow: grow
+    })
+  end
+end

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

@@ -0,0 +1,5 @@
+<%= irelia_stack(direction:, justify:, items:, grow:) do |stack| %>
+  <%= irelia_button { "Button" } %>
+  <%= irelia_button(size: :lg) { "Button two" } %>
+  <%= irelia_button(color: :danger) { "Button three" } %>
+<% end %>

data/app/components/irelia/stack/previews/horizontal.html.erb

@@ -0,0 +1,5 @@
+<%= irelia_stack(direction: :horizontal, justify:, items:, grow:) do |stack| %>
+  <%= irelia_button { "Button" } %>
+  <%= irelia_button { "Button two" } %>
+  <%= irelia_button(color: :danger, size: :xs) { "Button three" } %>
+<% end %>

data/app/components/irelia/stack/previews/vertical.html.erb

@@ -0,0 +1,5 @@
+<%= irelia_stack(direction: :vertical, justify:, items:, grow:) do |stack| %>
+  <%= irelia_button { "Button" } %>
+  <%= irelia_button { "Button two" } %>
+  <%= irelia_button(color: :danger, size: :xs) { "Button three" } %>
+<% end %>

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

@@ -0,0 +1,23 @@
+<%= render(Irelia::Card::Component.new(padding: false)) do %>
+  <%= content_tag :table, html_options do %>
+    <% if columns.size > 0 %>
+      <thead>
+        <tr>
+          <% columns.each do |column| %>
+            <%= column %>
+          <% end %>
+        </tr>
+      </thead>
+    <% end %>
+
+    <% if rows.size > 0 %>
+      <tbody>
+        <% rows.each do |row| %>
+          <%= row %>
+        <% end %>
+      </tbody>
+    <% end %>
+
+    <%= content %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+class Irelia::Table::Component < Irelia::Component
+  renders_many :columns, "ColumnComponent"
+  renders_many :rows, Irelia::Table::Row::Component
+
+  def variants
+    class_names(
+      "irelia-table",
+      "irelia-table--default": variant == :default
+    )
+  end
+
+  class ColumnComponent < Irelia::Component
+    def initialize(**options)
+      super(**options)
+    end
+
+    def variants
+      class_names(
+        "irelia-table irelia-table__head-column",
+      )
+    end
+
+    def call
+      content_tag :th, html_options do
+        content
+      end
+    end
+  end
+end

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

@@ -0,0 +1,32 @@
+@layer components {
+  .irelia-table {
+    @apply min-w-full divide-y divide-irelia-gray text-left;
+
+    thead {
+      tr {
+        th {
+          @apply px-5 py-3 text-sm font-bold uppercase text-irelia-primary;
+        }
+      }
+    }
+
+    tbody {
+      @apply divide-y divide-irelia-gray;
+
+      tr {
+        @apply bg-white text-sm text-zinc-600 hover:text-black;
+
+        td {
+          @apply px-5 py-3;
+        }
+
+        &:nth-child(odd) {
+          @apply bg-zinc-50;
+        }
+      }
+    }
+  }
+
+  .irelia-table--default {
+  }
+}

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

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