maquina 0.1.0

data/app/views/maquina/application/components/file_component.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module Maquina
+  module Application
+    module Components
+      class FileComponent < ComponentBase
+        include Phlex::Rails::Helpers::NumberToHumanSize
+
+        def template
+          div(**extend_control_options(attribute_name, control_html)) do
+            @form.label attribute_name, class: "label #{label_css_class}"
+            div(class: "mt-1") do
+              div(data_file_target: "container") do
+                @form.file_field attribute_name, **extend_input_options(input_html(no_helpers: true))
+                img(class: "hidden", data_file_target: "preview")
+                svg(viewbox: "0 0 24 24", fill: "currentColor", aria_hidden: "true", data_action: "click->file#select", data_file_target: "placeholder") do |s|
+                  s.path(fill_rule: "evenodd", d: "M1.5 6a2.25 2.25 0 012.25-2.25h16.5A2.25 2.25 0 0122.5 6v12a2.25 2.25 0 01-2.25 2.25H3.75A2.25 2.25 0 011.5 18V6zM3 16.06V18c0 .414.336.75.75.75h16.5A.75.75 0 0021 18v-1.94l-2.69-2.689a1.5 1.5 0 00-2.12 0l-.88.879.97.97a.75.75 0 11-1.06 1.06l-5.16-5.159a1.5 1.5 0 00-2.12 0L3 16.061zm10.125-7.81a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0z", clip_rule: "evenodd")
+                end
+                help_template
+                error_template
+              end
+            end
+          end
+        end
+
+        private
+
+        def help_template
+          help = t("helpers.help.#{@resource.model_name.i18n_key}.#{attribute_name}", default: nil)
+          return if help.blank?
+
+          p(class: "help", data_action: "click->file#select") { unsafe_raw help }
+        end
+
+        def extend_input_options(input_html)
+          {
+            multiple: false,
+            data: {
+              "file-target": "fileInput"
+            }
+          }.deep_merge(input_html)
+        end
+
+        def extend_control_options(attribute_name, control_html)
+          max_size = control_html.dig(:data, :file_max_size_value) || 4_194_304
+          human_max_size = number_to_human_size(max_size)
+
+          {
+            data: {
+              controller: "file",
+              file_max_size_value: max_size,
+              file_validation_message_value: t("activerecord.errors.attributes.#{@form.object.model_name.i18n_key}.#{attribute_name}.oversize", size: human_max_size, default: t("activerecord.errors.attributes.file.oversize", size: human_max_size))
+            }
+          }.deep_merge(control_html)
+        end
+      end
+    end
+  end
+end

data/app/views/maquina/application/components/input_component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module Maquina
+  module Application
+    module Components
+      class InputComponent < ComponentBase
+        def template
+          div(**control_html) do
+            @form.label attribute_name, class: "label #{label_css_class}"
+            div(class: "mt-1") do
+              @form.text_field attribute_name, **input_html
+              help_template
+              error_template
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/views/maquina/application/components/select_component.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module Maquina
+  module Application
+    module Components
+      class SelectComponent < ComponentBase
+        delegate :controller, :options_for_select, to: :helpers
+
+        def template
+          options = input_html(no_helpers: true).deep_dup
+
+          div(**control_html) do
+            @form.label attribute_name, class: "label #{label_css_class}"
+            div(class: "mt-1") do
+              @form.select attribute_name, to_values!(options), extract_options!(options), options
+              help_template
+              error_template
+            end
+          end
+        end
+
+        private
+
+        def extract_options!(options)
+          options.extract!(:include_blank)
+        end
+
+        def to_values!(options)
+          values = options.delete(:values)
+          selected = options.delete(:selected)
+
+          if values.is_a?(Symbol)
+            values = controller.send(values) if controller.respond_to?(values, true)
+          else
+            # TODO: Add support for other value options
+            []
+          end
+
+          options_for_select(values, selected.present? ? selected : nil)
+        end
+      end
+    end
+  end
+end

data/app/views/maquina/application/create.turbo_stream.erb

@@ -0,0 +1,11 @@
+<%= turbo_stream.replace class_to_form_frame(resource_class) do %>
+  <%= turbo_frame_tag class_to_form_frame(resource_class) do %>
+    <%= render Maquina::Application::New.new(resource: resource) %>
+  <% end %>
+<% end %>
+
+<%= turbo_stream.replace :alert do %>
+  <%= turbo_frame_tag :alert do %>
+    <%= render Maquina::Application::Alert.new(flash) %>
+  <% end %>
+<% end %>

data/app/views/maquina/application/edit.html.erb

@@ -0,0 +1,9 @@
+<div class="bg-white">
+  <div class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:px-8">
+    <div class="mx-auto max-w-3xl">
+      <%= turbo_frame_tag class_to_form_frame(resource_class) do %>
+        <%= render Maquina::Application::Edit.new(resource: resource) %>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/views/maquina/application/edit.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Maquina
+  module Application
+    class Edit < Phlex::HTML
+      include ApplicationView
+
+      def initialize(resource:)
+        @resource = resource
+      end
+
+      def template
+        render Maquina::Application::Form.new(resource: @resource)
+      end
+    end
+  end
+end

data/app/views/maquina/application/form.rb

@@ -0,0 +1,77 @@
+# frozen_string_literal: true
+
+module Maquina
+  module Application
+    class Form < Phlex::HTML
+      include ApplicationView
+      include Phlex::Rails::Helpers::FormWith
+
+      delegate :resource_path, :collection_path, :submit_path, :form_attributes, to: :helpers
+
+      def initialize(resource:, modal: false)
+        @resource = resource
+        @modal = modal
+      end
+
+      def template
+        form_with(model: @resource, url: if @resource.persisted?
+                                           resource_path(@resource)
+                                         else
+                                           (submit_path.present? ? submit_path : collection_path)
+                                         end, data: {turbo_frame: :_top}) do |form|
+          div(class: "space-y-8 divide-y divide-gray-200") do
+            div do
+              form_header_template
+
+              div(class: "mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6") do
+                attributes_template(form)
+              end
+            end
+
+            div(class: "pt-5") do
+              div(class: "flex justify-end") do
+                link_to t("helpers.cancel"), collection_path, class: "button", data: @modal ? {action: "modal#toggleModal"} : {turbo_frame: :_top}
+                form.submit class: "ml-3 button button-accented"
+              end
+            end
+          end
+        end
+      end
+
+      private
+
+      def attributes_template(form)
+        attributes = form_attributes.deep_dup
+        attributes.each do |attribute|
+          component_resolver(form, attribute)
+        end
+      end
+
+      def form_header_template
+        div do
+          h3(class: "text-lg font-medium leading-6 text-skin-base") { t("new.#{resource_class.model_name.i18n_key}.title", model: model_human_name.downcase, default: t("new.title", default: model_human_name.downcase)) }
+          p(class: "mt-1 text-sm text-skin-dimmed") { t("new.#{resource_class.model_name.i18n_key}.description", model: model_human_name.downcase, default: t("new.description", model: model_human_name.downcase)) }
+        end
+      end
+
+      def component_resolver(form, attribute)
+        attribute_values = attribute.values.first
+        input_type = attribute_values.fetch(:type)
+        attribute_values[:name] = attribute.keys.first
+
+        case input_type
+        when :checkbox
+          render Maquina::Application::Components::CheckboxComponent.new(resource: @resource, form: form, options: attribute_values)
+        when :file
+          render Maquina::Application::Components::FileComponent.new(resource: @resource, form: form, options: attribute_values)
+        when :action_text
+          render Maquina::Application::Components::ActionTextComponent.new(resource: @resource, form: form, options: attribute_values)
+        when :select
+          render Maquina::Application::Components::SelectComponent.new(resource: @resource, form: form, options: attribute_values)
+        else
+          render Maquina::Application::Components::InputComponent.new(resource: @resource, form: form, options: attribute_values)
+        end
+      end
+    end
+  end
+end

data/app/views/maquina/application/index.html.erb

@@ -0,0 +1,10 @@
+<div class="px-4 sm:px-6 lg:px-8">
+  <%= render Maquina::Application::IndexHeader.new(params[:q]) %>
+
+  <%= render Maquina::Application::IndexTable.new(
+            collection: collection,
+            pagination: @pagination,
+            list_attributes: list_attributes) %>
+</div>
+
+<%= render Maquina::Application::IndexModal.new %>

data/app/views/maquina/application/index_header.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module Maquina
+  module Application
+    class IndexHeader < Phlex::HTML
+      include ApplicationView
+      delegate :new_resource_path, to: :helpers
+
+      def initialize(filter = nil)
+        @filter = filter
+      end
+
+      def template
+        div(class: "sm:flex sm:items-center") do
+          div(class: "sm:flex-auto") do
+            h1(class: "text-xl font-semibold text-skin-base") { model_human_name(plural: true) }
+            p(class: "mt-2 text-sm text-skin-muted") { description }
+            p(class: "mt-4 text-skin-base") { unsafe_raw t("index.search", search: @filter) } if @filter.present?
+          end
+          add_new_template
+        end
+      end
+
+      private
+
+      def add_new_template
+        return if policy_class.blank? || !allowed_to?(:new?, with: policy_class)
+
+        options = {}
+        options[:data] = {controller: "modal-open", action: "modal-open#open"} if policy_class.present? && allowed_to?(:new_modal?, with: policy_class)
+
+        div(class: "mt-4 sm:mt-0 sm:ml-16 sm:flex-none") do
+          a(href: new_resource_path, class: "inline-flex items-center justify-center button button-accented", **options) { add_new }
+        end
+      end
+
+      def description
+        t("index.#{resource_class.model_name.i18n_key}.description", default: "")
+      end
+
+      def add_new
+        t("index.#{resource_class.model_name.i18n_key}.add_new", model: model_human_name.downcase, default: t("index.add_new", model: model_human_name.downcase))
+      end
+    end
+  end
+end

data/app/views/maquina/application/index_modal.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module Maquina
+  module Application
+    class IndexModal < Phlex::HTML
+      include ApplicationView
+      register_element :turbo_frame
+
+      def template
+        div(data_controller: "modal",
+          data_action: " modal-open:toggle@window->modal#toggleModal close-frame-modal:toggle@window->modal#toggleModal",
+          data_frame_src: "") do
+          div(class: "fixed inset-0 z-30 hidden overflow-y-auto", aria_labelledby: "modal-title", role: "dialog",
+            aria_modal: "true", data_modal_target: "container") do
+            div(class: "flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0") do
+              div(class: "fixed inset-0 transition-opacity",
+                data_transition_enter: "ease-out duration-300",
+                data_transition_enter_active: "opacity-0",
+                data_transition_enter_to: "opacity-100",
+                data_transition_leave: "ease-in duration-200",
+                data_transition_leave_active: "opacity-100",
+                data_transition_leave_to: "opacity-0",
+                aria_hidden: "true") do
+                div(class: "fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity", aria_hidden: "true")
+              end
+              span(class: "hidden sm:inline-block sm:align-middle sm:h-screen", aria_hidden: "true") { "​" }
+              div(class: "inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6",
+                data_modal_target: "content",
+                data_transition_enter: "ease-out duration-300",
+                data_transition_enter_active: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
+                data_transition_enter_to: "opacity-100 translate-y-0 sm:scale-100",
+                data_transition_leave: "ease-in duration-200",
+                data_transition_leave_active: "opacity-100 translate-y-0 sm:scale-100",
+                data_transition_leave_to: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95") do
+                turbo_frame(id: :modal_content, src: "", data: {"modal-target": "frame"}) {}
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/views/maquina/application/index_table.rb

@@ -0,0 +1,121 @@
+# frozen_string_literal: true
+
+module Maquina
+  module Application
+    class IndexTable < Phlex::HTML
+      include ApplicationView
+
+      delegate :humanized_money_with_symbol, :edit_resource_path, to: :helpers
+
+      def initialize(collection: nil, pagination: nil, list_attributes: nil)
+        @collection = collection
+        @list_attributes = list_attributes
+        @pagination = pagination
+      end
+
+      def template
+        div(class: "mt-8 flex flex-col") do
+          div(class: "-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8") do
+            div(class: "inline-block min-w-full py-2 align-middle md:px-6 lg:px-8") do
+              div(class: "overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg") do
+                table(class: "min-w-full divide-y divide-gray-300") do
+                  thead(class: "bg-gray-50") do
+                    tr do
+                      table_headers_template
+                      th(scope: "col", class: "relative py-3.5 pl-3 pr-4 sm:pr-6") do
+                        span(class: "sr-only") { "Edit" }
+                      end
+                    end
+                  end
+                  tbody class: "divide-y divide-gray-200 bg-white" do
+                    @collection.empty? ? no_items_template : @collection.each { |item| item_template(item) }
+                  end
+                end
+                pagination_template
+              end
+            end
+          end
+        end
+      end
+
+      def table_headers_template
+        base_css = "px-3 py-3.5 text-left text-sm font-semibold text-skin-base"
+        first_css = "py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-skin-base sm:pl-6"
+
+        @list_attributes.each_with_index do |attribute, index|
+          current_css = if index == 0
+            first_css
+          else
+            base_css
+          end
+
+          th(scope: :col, class: current_css) { attribute_human_name(attribute) }
+        end
+      end
+
+      def no_items_template
+        col_span = @list_attributes.size + 1
+
+        tr do
+          th(scope: "col", colspan: col_span, class: "whitespace-nowrap px-3 py-4 text-sm text-skin-dimmed") do
+            t("index.no_items", model: model_human_name(plural: true))
+          end
+        end
+      end
+
+      def item_template(item)
+        base_css = "whitespace-nowrap px-3 py-4 text-sm text-skin-muted"
+        first_css = "whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-skin-base sm:pl-6"
+
+        tr do
+          @list_attributes.each_with_index do |attribute, index|
+            td(class: (index == 0) ? first_css : base_css, scope: "col") { attribute_value(item, attribute) }
+          end
+          td(class: "relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6", scope: "col") do
+            a(href: edit_resource_path(item), class: "text-skin-accented hover:text-skin-accented-hover") { t("index.edit") } if policy_class.blank? || allowed_to?(:edit?, item, with: policy_class)
+          end
+        end
+      end
+
+      def pagination_template
+        nav(class: "flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6", aria_label: "Pagination") do
+          div(class: "hidden sm:block") do
+            p(class: "text-sm text-skin-muted") do
+              t("index.pagination.information", from: @pagination.from, to: @pagination.to, count: @pagination.count) if @collection.any? && @pagination.present?
+            end
+          end
+          div(class: "flex flex-1 justify-between sm:justify-end") do
+            if @pagination.present? && @pagination.prev.present?
+              a(href: "#", class: "relative button") { t("index.pagination.previous") }
+            else
+              span(class: "relative button", disabled: true) { t("index.pagination.previous") }
+            end
+
+            if @pagination.present? && @pagination.next.present?
+              a(href: "#", class: "relative ml-3 button") { t("index.pagination.next") }
+            else
+              span(class: "relative ml-3 button", disabled: true) { t("index.pagination.next") }
+            end
+          end
+        end
+      end
+
+      def attribute_value(item, attribute)
+        value = item[attribute] || item.send(attribute)
+
+        case value
+        when TrueClass
+          t("yes_value")
+        when FalseClass
+          t("no_value")
+        when ActiveSupport::TimeWithZone, Date
+          I18n.l value, format: :short
+        when Money
+          humanized_money_with_symbol(value)
+        else
+          value
+        end
+      end
+    end
+  end
+end

data/app/views/maquina/application/new.html.erb

@@ -0,0 +1,9 @@
+<div class="bg-white">
+  <div class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:px-8">
+    <div class="mx-auto max-w-3xl">
+      <%= turbo_frame_tag class_to_form_frame(resource_class) do %>
+        <%= render Maquina::Application::New.new(resource: resource) %>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/views/maquina/application/new.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Maquina
+  module Application
+    class New < Phlex::HTML
+      include ApplicationView
+
+      def initialize(resource:, modal: false)
+        @resource = resource
+        @modal = modal
+      end
+
+      def template
+        render Maquina::Application::Form.new(resource: @resource, modal: @modal)
+      end
+    end
+  end
+end

data/app/views/maquina/application/sessions_header.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Maquina
+  module Application
+    class SessionsHeader < Phlex::HTML
+      include Maquina::ApplicationView
+      include Phlex::DeferredRender
+
+      def initialize(brand_icon:)
+        @brand_icon = brand_icon
+      end
+
+      def template
+        div(class: "sm:mx-auto sm:w-full sm:max-w-md") do
+          image_tag(@brand_icon, class: "mx-auto h-12 w-auto", alt: t("application_name"))
+          h2(class: "mt-6 text-center text-3xl font-bold tracking-tight text-skin-base") { t(".title") }
+
+          if @description.present?
+            p(class: "mt-2 text-center text-sm text-skin-dimmed") do
+              yield_content(&@description)
+            end
+          end
+        end
+      end
+
+      def description(&block)
+        @description = block
+      end
+    end
+  end
+end

data/app/views/maquina/application/show.html.erb

@@ -0,0 +1 @@
+<%= resource %>

data/app/views/maquina/application/update.turbo_stream.erb

@@ -0,0 +1,11 @@
+<%= turbo_stream.replace class_to_form_frame(resource_class) do %>
+  <%= turbo_frame_tag class_to_form_frame(resource_class) do %>
+    <%= render Maquina::Application::Edit.new(resource: resource) %>
+  <% end %>
+<% end %>
+
+<%= turbo_stream.replace :alert do %>
+  <%= turbo_frame_tag :alert do %>
+    <%= render Maquina::Application::Alert.new(flash) %>
+  <% end %>
+<% end %>

data/app/views/maquina/application_view.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module Maquina
+  module ApplicationView
+    include Maquina::Engine.routes.url_helpers
+    include Phlex::Rails::Helpers::T
+
+    delegate :resource_class, :l, :default_url_options, :policy_class, :allowed_to?, to: :helpers
+
+    # TODO: Revisit this later
+    def image_tag(source, options = {})
+      unsafe_raw helpers.image_tag(source, **options)
+    end
+
+    def link_to(body, url, html_options = {})
+      unsafe_raw helpers.link_to(body, url, html_options)
+    end
+
+    def button_to(name, options = nil, html_options = nil)
+      unsafe_raw helpers.button_to(name, options, html_options)
+    end
+
+    # type: :fill or :outline
+    def svg_icon(type, icon:, view_box: "0 0 24 24", stroke_width: 2, css_class: "block h-6 w-6", data: {})
+      svg_attributes = if type == :fill
+        {xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: view_box, "aria-hidden": "true"}
+      else
+        {xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: view_box, "stroke-width": stroke_width, stroke: "currentColor", "aria-hidden": "true"}
+      end
+
+      path_attributes = (type == :fill) ? {} : {"stroke-linecap": "round", "stroke-linejoin": "round"}
+
+      svg(class: css_class, data: data, **svg_attributes) do |markup|
+        markup.path(d: icon, **path_attributes)
+      end
+    end
+
+    def model_human_name(plural: false)
+      resource_class.model_name.human(count: plural ? 2 : 1)
+    end
+
+    def attribute_human_name(attribute)
+      resource_class.human_attribute_name(attribute)
+    end
+  end
+end

data/app/views/maquina/invitations/create.turbo_stream.erb

@@ -0,0 +1,13 @@
+<%= turbo_stream.replace :modal_content do %>
+  <%= turbo_frame_tag :modal_content, data: {modal_target: :frame} do %>
+    <%= render Maquina::Application::New.new(resource: resource, modal: true) %>
+  <% end %>
+<% end %>
+
+<% if resource.errors.empty? %>
+  <%= turbo_stream.replace :alert do %>
+    <%= turbo_frame_tag :alert do %>
+      <%= render Maquina::Application::Alert.new(flash) %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/maquina/invitations/new.html.erb

@@ -0,0 +1,3 @@
+<%= turbo_frame_tag :modal_content, data: {modal_target: :frame} do %>
+  <%= render Maquina::Application::New.new(resource: resource, modal: true) %>
+<% end %>

data/app/views/maquina/navbar/menu.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+module Maquina
+  module Navbar
+    # == Navbar main Menu
+    #
+    # Renders main navbar Menu. It can render menu for desktop o mobile versions.
+    #
+    # Requires a Rails Helper method to get access to menu options. `menu_options` example:
+    #
+    #   def menu_options
+    #     {
+    #       home: root_path,
+    #       users: users_path
+    #       accounts: accounts_path
+    #     }
+    #   end
+    #
+    # `Menu` uses I18n to translate menu options. Translation example:
+    #
+    #   menu:
+    #     main:
+    #       home: Inicio
+    #       users: Usuarios
+    #       accounts: Cuentas
+    #
+    # `Menu` is initialized by default to render links for desktop. To render mobile links
+    # initialize `Menu` as follow:
+    #
+    #   Views::Navbar::Menu.new(desktop: false)
+    #
+    class Menu < Phlex::HTML
+      include Maquina::ApplicationView
+      delegate :menu_options, to: :helpers
+
+      def initialize(desktop: true)
+        @desktop = desktop
+      end
+
+      def template
+        div class: "#{link_type}-menu" do
+          secure_menu_options.each_pair do |option, path|
+            render(Maquina::Navbar::MenuItemLink.new(option, path, desktop: @desktop))
+          end
+        end
+      end
+
+      private
+
+      def secure_menu_options
+        menu_options
+      rescue NoMethodError => ex
+        Rails.logger.error "[#{self.class}] Please implement helper method :menu_options :: #{ex.message}"
+        {}
+      end
+
+      def link_type
+        @desktop ? "desktop" : "mobile"
+      end
+    end
+  end
+end