irelia 0.1.0 → 0.2.0

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

@@ -0,0 +1,19 @@
+<%=
+irelia_table do |table|
+  table.with_column { "Name" }
+  table.with_column { "Age" }
+  table.with_column { "Address" }
+  table.with_column(html_options: { class: "text-right" }) { "Action" }
+
+  5.times do
+    table.with_row do |row|
+      row.with_cell { Faker::Name.name }
+      row.with_cell { Faker::Number.leading_zero_number(digits: 2) }
+      row.with_cell { Faker::Address.full_address }
+      row.with_cell(html_options: { class: "text-right flex justify-end gap-x-2" }) do
+        irelia_button(size: :xs) { "Edit" }
+      end
+    end
+  end
+end
+%>

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

@@ -0,0 +1,5 @@
+<%= content_tag :tr, html_options do %>
+  <% cells.each do |cell| %>
+    <%= cell %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+class Irelia::Table::Row::Component < Irelia::Component
+  renders_many :cells, "CellComponent"
+
+  def initialize(**options)
+    super(**options)
+  end
+
+  def variants
+    class_names(
+      "irelia-table__row",
+      "irelia-table__row--default": variant == :default
+    )
+  end
+
+  class CellComponent < Irelia::Component
+    def initialize(**options)
+      super(**options)
+    end
+
+    def variants
+      class_names(
+        "irelia-table__cell",
+      )
+    end
+
+    def call
+      content_tag :td, html_options do
+        content
+      end
+    end
+  end
+end

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

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

data/app/helpers/irelia/components_helper.rb

@@ -0,0 +1,62 @@
+module Irelia
+  module ComponentsHelper
+    include ActionView::Helpers::UrlHelper
+
+    IRELIA_COMPONENTS_HELPERS = {
+      account_switcher: "Irelia::AccountSwitcher::Component",
+      avatar: "Irelia::Avatar::Component",
+      app_shell: "Irelia::AppShell::Component",
+      button: "Irelia::Button::Component",
+      breadcrumbs: "Irelia::Breadcrumbs::Component",
+      card: "Irelia::Card::Component",
+      container: "Irelia::Container::Component",
+      div: "Irelia::Div::Component",
+      divider: "Irelia::Divider::Component",
+      dropdown: "Irelia::Dropdown::Component",
+      empty_collection: "Irelia::EmptyCollection::Component",
+      flex: "Irelia::Flex::Component",
+      html: "Irelia::Html::Component",
+      icon: "Irelia::Icon::Component",
+      modal: "Irelia::Modal::Component",
+      notification: "Irelia::Notification::Component",
+      page_header: "Irelia::PageHeader::Component",
+      sidebar: "Irelia::Sidebar::Component",
+      stack: "Irelia::Stack::Component",
+      table: "Irelia::Table::Component",
+      navbar: "Irelia::Navbar::Component",
+      navbar_section: "Irelia::Navbar::Section::Component",
+      navbar_separator: "Irelia::Navbar::Separator::Component",
+      navigation: "Irelia::Navigation::Component",
+      split_screen: "Irelia::SplitScreen::Component"
+    }.freeze
+
+    IRELIA_COMPONENTS_HELPERS.each do |name, component|
+      define_method :"irelia_#{name}" do |*args, **kwargs, &block|
+        render component.constantize.new(*args, **kwargs), &block
+      end
+    end
+
+    def irelia_button_to(name = nil, options = nil, args = nil, &block)
+      args, options = options, name if args.nil?
+      options ||= {}
+      args ||= {}
+      args[:html_options] ||= {}
+      args[:html_options][:class] ||= args[:class]
+
+      component = Irelia::Button::Component.new(skip_tag: true, **args)
+      component_attributes = component.class.dry_initializer.definitions.keys
+
+      if block
+        component.with_content(capture(&block))
+      elsif name != options
+        component.with_content(name)
+      end
+
+      html_options = args.merge(component.html_options)
+
+      button_to(options, html_options.except(*component_attributes)) do
+        render(component)
+      end
+    end
+  end
+end

data/app/helpers/irelia/form_helper.rb

@@ -0,0 +1,9 @@
+module Irelia
+  module FormHelper
+    def irelia_form(model: nil, scope: nil, url: nil, format: nil, **options, &block)
+      options[:builder] ||= Irelia::FormBuilder
+      options[:class] = "irelia-form"
+      form_with(model: model, scope: scope, url: url, format: format, **options, &block)
+    end
+  end
+end

data/app/helpers/irelia/head_helper.rb

@@ -0,0 +1,7 @@
+module Irelia
+  module HeadHelper
+    def irelia_head
+      render partial: "irelia/head"
+    end
+  end
+end

data/app/views/irelia/_head.html.erb

@@ -0,0 +1,25 @@
+<%= stylesheet_link_tag "irelia", "data-turbo-track": "reload" %>
+
+<% if Irelia.config.load_poppins %>
+  <!-- Poppins Google font -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="true">
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&amp;display=swap" rel="stylesheet">
+<% end %>
+
+<% if Irelia.config.icon_packs.include? "font_awesome" %>
+  <!-- Font Awesome icons -->
+  <link rel="preconnect" href="https://cdnjs.cloudflare.com">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" integrity="sha512-fD9DI5bZwQxOi7MhYWnnNPlvXdp/2Pj3XSTRrFs5FQa4mizyGLnJcN6tuvUS6LbmgN1ut+XGSABKvjN0H6Aoow==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <script>FontAwesome.config.mutateApproach = 'sync'</script>
+<% end %>
+
+<% if Irelia.config.multi_appearance %>
+  <!-- Use system apperance mode or selected -->
+  <script>
+    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+      document.documentElement.classList.add('dark')
+    }
+  </script>
+<% end %>

data/lib/irelia/config.rb

@@ -0,0 +1,18 @@
+module Irelia
+  class Config
+    include ActiveSupport::Configurable
+
+    # ==> Icok Packs
+    # Icon pack's to use for the application. This will be autoloaded
+    # in the application layout when using the `irelia_head` helper.
+    config_accessor :icon_packs, default: [ "font_awesome" ]
+
+    # => Load Poppins Google font.
+    # This will be autoloaded in the application layout when using the `irelia_head` helper.
+    config_accessor :load_poppins, default: true
+
+    # => Enable Multi Appearance (Dark & Light Mode)
+    # This will be autoloaded in the application layout when using the `irelia_head` helper.
+    config_accessor :multi_appearance, default: true
+  end
+end

data/lib/irelia/engine.rb

@@ -1,20 +1,22 @@
-# frozen_string_literal: true
-
 module Irelia
   class Engine < ::Rails::Engine
-    config.autoload_paths << Irelia::Engine.root.join("lib")
-    config.autoload_paths << Irelia::Engine.root.join("app", "frontend", "components")
-    config.view_component.preview_paths << Irelia::Engine.root.join("app", "frontend", "components")
+    config.autoload_paths << Irelia::Engine.root.join("app", "components")
+
+    initializer "irelia.configure.view_components" do |app|
+      config.view_component.preview_paths << Irelia::Engine.root.join("app", "components")
+      config.view_component.preview_controller = "PreviewController"
+    end
+
+    initializer "irelia.configure.lookbook" do |app|
+      app.config.lookbook.project_name = "Irelia components"
+      app.config.lookbook.preview_collection_label = "Components"
+    end
 
     # Add the app/javascript directory to the asset pipeline
     initializer "irelia.assets.precompile" do |app|
-      app.config.assets.paths << Irelia::Engine.root.join("app", "javascript")
+      app.config.assets.paths << Irelia::Engine.root.join("app", "assets", "dist", "javascripts")
+      app.config.assets.paths << Irelia::Engine.root.join("app", "assets", "dist", "stylesheets")
       app.config.assets.precompile += %w[irelia_manifest]
     end
-
-    # Add the importmap paths
-    initializer "irelia.importmap", before: "importmap" do |app|
-      app.config.importmap.paths << Irelia::Engine.root.join("config/importmap.rb")
-    end
   end
 end

data/lib/irelia/form_builder.rb

@@ -0,0 +1,48 @@
+module Irelia
+  class FormBuilder < ActionView::Helpers::FormBuilder
+    # [:text_field, :text_area].each do |method_name|
+    #   define_method(method_name) do |method, options = {}|
+    #     render_component(method_name, method, options)
+    #   end
+    # end
+
+    def text_field(method, html_options = {}, &block)
+      render_component(:text_field, method, options: options, html_options: html_options, &block)
+    end
+
+    def password_field(method, html_options = {}, &block)
+      render_component(:password_field, method, options: options, html_options: html_options, &block)
+    end
+
+    def email_field(method, html_options = {}, &block)
+      render_component(:email_field, method, options: options, html_options: html_options, &block)
+    end
+
+    def select(method, choices = nil, options = {}, html_options = {}, &block)
+      render_component(:select, method, choices: choices, options: options, html_options: html_options, &block)
+    end
+
+    def submit(value = nil, options = {})
+      component = Irelia::Button::Component.new(type: :submit, html_options: options)
+      component.with_content(value) if value
+      component.render_in(@template)
+    end
+
+    private
+
+    def render_component(component_name, method, **args, &block)
+      args[:options] = args[:options].merge({
+        label: args[:html_options].delete(:label),
+        hint: args[:html_options].delete(:hint)
+      })
+
+      component = component_klass(component_name).new(method: method, object: @object, object_name: @object_name, **args)
+      component.render_in(@template, &block)
+    end
+
+    def component_klass(component_name)
+      class_name = component_name.to_s.camelize
+      "Irelia::Form::#{class_name}::Component".safe_constantize
+    end
+  end
+end

data/lib/irelia/options/fixed.rb

@@ -0,0 +1,26 @@
+module Irelia
+  module Options
+    module Fixed
+      def self.included(base)
+        base.class_eval do
+          option :fixed, default: -> { false }, in: [ :top, :top_right, :right, :bottom_right, :bottom, :bottom_left, :left, :top_left ]
+
+          after_initialize do
+            add_css_classes(
+              class_names(
+                "irelia-fixed-top": fixed == :top,
+                "irelia-fixed-top-right": fixed == :top_right,
+                "irelia-fixed-right": fixed == :right,
+                "irelia-fixed-bottom-right": fixed == :bottom_right,
+                "irelia-fixed-bottom": fixed == :bottom,
+                "irelia-fixed-bottom-left": fixed == :bottom_left,
+                "irelia-fixed-left": fixed == :left,
+                "irelia-fixed-top-left": fixed == :top_left
+              )
+            )
+          end
+        end
+      end
+    end
+  end
+end

data/lib/irelia/options/flex/direction.rb

@@ -0,0 +1,22 @@
+module Irelia
+  module Options
+    module Flex
+      module Direction
+        def self.included(base)
+          base.class_eval do
+            option :direction, default: -> { :row }, in: [ :row, :column ]
+
+            after_initialize do
+              add_css_classes(
+                class_names(
+                  "irelia-flex--row": direction == :row,
+                  "irelia-flex--column": direction == :column,
+                )
+              )
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/irelia/options/flex/gap.rb

@@ -0,0 +1,25 @@
+module Irelia
+  module Options
+    module Flex
+      module Gap
+        def self.included(base)
+          base.class_eval do
+            option :gap, default: -> { :md }, in: [ :none, :xs, :sm, :md, :lg ]
+
+            after_initialize do
+              add_css_classes(
+                class_names(
+                  "irelia-flex--gap-none": gap == :none,
+                  "irelia-flex--gap-xs": gap == :xs,
+                  "irelia-flex--gap-sm": gap == :sm,
+                  "irelia-flex--gap-md": gap == :md,
+                  "irelia-flex--gap-lg": gap == :lg,
+                )
+              )
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/irelia/options/flex/grow.rb

@@ -0,0 +1,21 @@
+module Irelia
+  module Options
+    module Flex
+      module Grow
+        def self.included(base)
+          base.class_eval do
+            option :grow, default: -> { false }, in: [ true, false ]
+
+            after_initialize do
+              add_css_classes(
+                class_names(
+                  "irelia-grow": grow
+                )
+              )
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/irelia/options/flex/items.rb

@@ -0,0 +1,25 @@
+module Irelia
+  module Options
+    module Flex
+      module Items
+        def self.included(base)
+          base.class_eval do
+            option :items, default: -> { nil }, in: %i[start center end baseline stretch]
+
+            after_initialize do
+              add_css_classes(
+                class_names(
+                  "irelia-items-start": items == :start,
+                  "irelia-items-center": items == :center,
+                  "irelia-items-end": items == :end,
+                  "irelia-items-baseline": items == :baseline,
+                  "irelia-items-stretch": items == :stretch,
+                )
+              )
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/irelia/options/flex/justify.rb

@@ -0,0 +1,27 @@
+module Irelia
+  module Options
+    module Flex
+      module Justify
+        def self.included(base)
+          base.class_eval do
+            option :justify, default: -> { nil }, in: %i[start center between around evenly stretch end]
+
+            after_initialize do
+              add_css_classes(
+                class_names(
+                  "irelia-justify-start": justify == :start,
+                  "irelia-justify-center": justify == :center,
+                  "irelia-justify-between": justify == :between,
+                  "irelia-justify-end": justify == :end,
+                  "irelia-justify-around": justify == :around,
+                  "irelia-justify-evenly": justify == :evenly,
+                  "irelia-justify-stretch": justify == :stretch
+                )
+              )
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/irelia/options/padding.rb

@@ -0,0 +1,46 @@
+module Irelia
+  module Options
+    module Padding
+      def self.included(base)
+        base.class_eval do
+          option :padding, default: -> { nil }, in: [ :none, :sm, :md, :lg ]
+          option :padding_top, default: -> { nil }, in: [ :none, :sm, :md, :lg ]
+          option :padding_right, default: -> { nil }, in: [ :none, :sm, :md, :lg ]
+          option :padding_bottom, default: -> { nil }, in: [ :none, :sm, :md, :lg ]
+          option :padding_left, default: -> { nil }, in: [ :none, :sm, :md, :lg ]
+
+          after_initialize do
+            add_css_classes(
+              class_names(
+                "irelia-padding-none": padding == :none,
+                "irelia-padding-sm": padding == :sm,
+                "irelia-padding-md": padding == :md,
+                "irelia-padding-lg": padding == :lg,
+
+                "irelia-padding-top-none": padding_top == :none,
+                "irelia-padding-top-sm": padding_top == :sm,
+                "irelia-padding-top-md": padding_top == :md,
+                "irelia-padding-top-lg": padding_top == :lg,
+
+                "irelia-padding-right-none": padding_right == :none,
+                "irelia-padding-right-sm": padding_right == :sm,
+                "irelia-padding-right-md": padding_right == :md,
+                "irelia-padding-right-lg": padding_right == :lg,
+
+                "irelia-padding-left-none": padding_left == :none,
+                "irelia-padding-left-sm": padding_left == :sm,
+                "irelia-padding-left-md": padding_left == :md,
+                "irelia-padding-left-lg": padding_left == :lg,
+
+                "irelia-padding-bottom-none": padding_bottom == :none,
+                "irelia-padding-bottom-sm": padding_bottom == :sm,
+                "irelia-padding-bottom-md": padding_bottom == :md,
+                "irelia-padding-bottom-lg": padding_bottom == :lg,
+              )
+            )
+          end
+        end
+      end
+    end
+  end
+end

data/lib/irelia/options/text_formatting.rb

@@ -0,0 +1,30 @@
+module Irelia
+  module Options
+    module TextFormatting
+      def self.included(base)
+        base.class_eval do
+          option :text, default: -> { :base }, in: [ :xs, :sm, :base, :lg, :xl, :xxl, :xxxl ]
+          option :bold, default: -> { false }, in: [ true, false, :bold, :semibold, :extrabold ]
+
+          after_initialize do
+            add_css_classes(
+              class_names(
+                "irelia-text-base": text == :none,
+                "irelia-text-xs": text == :xs,
+                "irelia-text-sm": text == :sm,
+                "irelia-text-lg": text == :lg,
+                "irelia-text-xl": text == :xl,
+                "irelia-text-2xl": text == :xxl,
+                "irelia-text-3xl": text == :xxxl,
+                "irelia-text-no-bold": bold == false,
+                "irelia-text-bold": bold == true || bold == :bold,
+                "irelia-text-semibold": bold == :semibold,
+                "irelia-text-extrabold": bold == :extrabold
+              )
+            )
+          end
+        end
+      end
+    end
+  end
+end

data/lib/irelia/options/width.rb

@@ -0,0 +1,19 @@
+module Irelia
+  module Options
+    module Width
+      def self.included(base)
+        base.class_eval do
+          option :width, default: -> { nil }, in: [ :full ]
+
+          after_initialize do
+            add_css_classes(
+              class_names(
+                "irelia-width-full": width == :full
+              )
+            )
+          end
+        end
+      end
+    end
+  end
+end

data/lib/irelia/version.rb

@@ -1,3 +1,3 @@
 module Irelia
-  VERSION = "0.1.0"
+  VERSION = "0.2.0"
 end

data/lib/irelia.rb

@@ -1,29 +1,25 @@
-# frozen_string_literal: true
+require "irelia/version"
+require "irelia/engine"
 
-require "devise"
-require "dry-configurable"
-require "dry-initializer"
-require "importmap-rails"
-require "loaf"
-require "meta-tags"
-require "simple_form"
-require "teamable"
+require "view_component"
 require "view_component-contrib"
+require "dry-initializer"
+require "lookbook"
 
-module Irelia
-  extend Dry::Configurable
-
-  # ==> Application name
-  # The name of the application. This will be displayed in the meta title
-  # and on various places in the application.
-  setting :application_name, default: "Irelia"
+require "irelia/config"
+require "irelia/form_builder"
+require "irelia/options/text_formatting"
+require "irelia/options/padding"
+require "irelia/options/fixed"
+require "irelia/options/width"
+require "irelia/options/flex/items"
+require "irelia/options/flex/direction"
+require "irelia/options/flex/gap"
+require "irelia/options/flex/grow"
+require "irelia/options/flex/justify"
 
-  # ==> From email
-  # Configure the e-mail address which will be shown in Devise::Mailer,
-  # note that it will be overwritten if you use your own mailer class
-  # with default "from" parameter.
-  setting :default_from_email, default: "please-change-me-at-config-initializers-irelia@example.com"
+module Irelia
+  def self.config
+    @config ||= Irelia::Config
+  end
 end
-
-require "irelia/version"
-require "irelia/engine"