organism-ui 0.2.1

data/lib/ui/collapse/panel.rb

@@ -0,0 +1,37 @@
+module Ui
+  class Collapse < Component
+    class Panel < Component
+      def show
+        render
+      end
+
+      private
+
+      def collapse_icon
+        content_tag(
+          :div,
+          icon('fas fa-chevron-down'),
+          data: {
+            "collapsable-target": "icon"
+          }
+        )
+      end
+
+      def header
+        content_tag(:p, display(model[0]))
+      end
+
+      def content
+        content_tag(:p, display(model[1]))
+      end
+
+      def display(item)
+        if item.is_a?(Proc)
+          item.call
+        else
+          item
+        end
+      end
+    end
+  end
+end

data/lib/ui/collapse/panel/show.erb

@@ -0,0 +1,16 @@
+<article 
+  class="ui-collapse-panel" 
+  data-controller="collapsable"
+  data-collapsable-collapsed-value="false"
+  data-collapsable-hidden-class="hidden"
+  data-collapsable-collapsed-class="ui-collapsed">
+
+  <header data-action="click->collapsable#toggle">
+    <%= collapse_icon %>
+    <%= header %>
+  </header>
+
+  <div data-collapsable-target="content" class="ui-collapse-panel__content">
+    <%= content %>
+  </div>
+</article>

data/lib/ui/component.rb

@@ -0,0 +1,23 @@
+module Ui
+  class Component < ::Cell::ViewModel
+    include Layout::External
+    include ActionView::Helpers::FormHelper
+    include ActionView::Helpers::TagHelper
+    include ActionView::Context
+
+    VIEWPATH = Pathname.new(__FILE__).join("../..")
+    self.view_paths = [VIEWPATH]
+
+    def capture(*args)
+      yield(*args).html_safe
+    end
+
+    def render_group(items)
+      items.compact.join(' ').html_safe
+    end
+
+    def icon(style)
+      content_tag(:i, nil, class: style)
+    end
+  end
+end

data/lib/ui/descriptive_list.rb

@@ -0,0 +1,50 @@
+module Ui
+  class DescriptiveList < Component
+    include Actionable
+    include Stylable
+
+    Directions = Types::String.enum(
+      'horizontal',
+      'vertical'
+    )
+
+    def show
+      render
+    end
+
+    private
+
+    def list_items
+      cell(
+        Ui::DescriptiveList::Item,
+        collection: items
+      )
+    end
+
+    def header
+      content_tag(
+        :header,
+        render_group([
+          content_tag(:h2, title),
+          content_tag(:nav, actions)
+        ])
+      ) if title || has_actions?
+    end
+
+    def title
+      options[:title]
+    end
+
+    def items
+      model
+    end
+
+    def direction
+      Directions[options.fetch(:direction, 'horizontal')]
+    end
+
+    def component_style
+      "ui-descriptive-list ui-descriptive-list--#{direction}"
+    end
+  end
+end

data/lib/ui/descriptive_list/item.rb

@@ -0,0 +1,24 @@
+module Ui
+  class DescriptiveList < Component
+    class Item < Component
+      def show
+        content_tag(
+          :div,
+          render_group([
+            content_tag(:dt, title),
+            content_tag(:dd, value.html_safe)
+          ]),
+          class: 'ui-descriptive-list__item'
+        )
+      end
+
+      def title
+        model[0]
+      end
+
+      def value
+        model[1].try(:call) || model[1]
+      end
+    end
+  end
+end

data/lib/ui/descriptive_list/show.erb

@@ -0,0 +1,7 @@
+<article class="<%= style %>">
+  <%= header %>
+
+  <dl class="ui-descriptive-list__items">
+    <%= list_items %>
+  </dl>
+</article>

data/lib/ui/dropdown.rb

@@ -0,0 +1,22 @@
+module Ui
+  class Dropdown < Component
+    Modes = Types::String.enum(
+      'click',
+      'hover'
+    )
+
+    def show(&block)
+      render(&block)
+    end
+
+    private
+
+    def overlay
+      model
+    end
+
+    def mode
+      Modes[options.fetch(:mode, 'click')]
+    end
+  end
+end

data/lib/ui/dropdown/show.erb

@@ -0,0 +1,13 @@
+<div 
+  data-controller="dropdown"
+  data-dropdown-hidden-class="hidden"
+  data-dropdown-expanded-value="false"
+  data-dropdown-mode-value="<%= mode %>"
+  data-action="click->dropdown#toggle"
+  class="ui-dropdown">
+  <%= yield %>
+
+  <div data-dropdown-target="expandable" class="ui-dropdown__expandable">
+    <%= overlay %>
+  </div>
+</div>

data/lib/ui/empty.rb

@@ -0,0 +1,36 @@
+module Ui
+  class Empty < Component
+    include Stylable
+    include Actionable
+
+    def show
+      render
+    end
+
+    private
+
+    def image
+      image_tag options[:image] if options[:image]
+    end
+
+    def display_icon
+      icon(options.fetch(:icon, default_icon)) if options[:image].nil?
+    end
+
+    def default_icon
+      "fas fa-inbox fa-5x"
+    end
+
+    def caption
+      options.fetch(:caption, default_caption)
+    end
+
+    def default_caption
+      content_tag(:p, 'No data')
+    end
+
+    def component_style
+      "ui-empty"
+    end
+  end
+end

data/lib/ui/empty/show.erb

@@ -0,0 +1,11 @@
+<figure class="<%= style %>">
+  <%= image %>
+  <%= display_icon %>
+
+  <figcaption>
+    <%= caption %>
+    <nav>
+      <%= actions %>
+    </nav>
+  </figcaption>
+</figure>

data/lib/ui/engine.rb

@@ -0,0 +1,13 @@
+module Ui
+  class Engine < ::Rails::Engine
+    isolate_namespace Ui
+
+    config.generators do |g|
+      g.test_framework :rspec, fixture: false
+      g.fixture_replacement :factory_bot
+      g.factory_bot dir: 'spec/factories'
+      g.assets false
+      g.helper false
+    end
+  end
+end

data/lib/ui/list.rb

@@ -0,0 +1,77 @@
+module Ui
+  class List < Component
+    include Stylable
+    include Actionable
+
+    Renderable = Types.Interface(:call)
+
+    def show
+      render
+    end
+
+    private
+
+    def list
+      content_tag(:ul, list_items)
+    end
+
+    def list_items
+      if list_data.any?
+        render_group(list_data)
+      else
+        render_empty
+      end
+    end
+
+    def list_data
+      model.map do |item|
+        renderable.call(item)
+      end
+    end
+
+    def header
+      content_tag(
+        :header,
+        render_group([
+          options[:header],
+          actions
+        ])
+      ) if options[:header] || has_actions?
+    end
+
+    def footer
+      content_tag(
+        :footer,
+        options[:footer]
+      ) if options[:footer]
+    end
+
+    def renderable
+      Renderable[options.fetch(:renderable, default_renderable)]
+    end
+
+    def default_renderable
+      ->(item) {
+        cell(
+          Ui::List::Item,
+          item
+        ).()
+      }
+    end
+
+    def component_style
+      'ui-list'
+    end
+
+    def render_empty
+      content_tag(:li, empty)
+    end
+
+    def empty
+      cell(
+        Ui::Empty,
+        nil
+      ).()
+    end
+  end
+end

data/lib/ui/list/item.rb

@@ -0,0 +1,9 @@
+module Ui
+  class List < Component
+    class Item < Component
+      def show
+        content_tag(:li, model)
+      end
+    end
+  end
+end

data/lib/ui/list/show.erb

@@ -0,0 +1,5 @@
+<article class="<%= style %>">
+  <%= header %>
+  <%= list %>
+  <%= footer %>
+</article>

data/lib/ui/menu.rb

@@ -0,0 +1,29 @@
+module Ui
+  class Menu < Component
+    include Stylable
+
+    def show
+      render
+    end
+
+    private
+
+    def header
+      content_tag(:header, options[:header]) if options[:header]
+    end
+
+    def items
+      content_tag(
+        :ul,
+        cell(
+          Ui::Menu::Item,
+          collection: model
+        ).()
+      )
+    end
+
+    def component_style
+      'ui-menu'
+    end
+  end
+end

data/lib/ui/menu/callable.rb

@@ -0,0 +1,11 @@
+module Ui
+  class Menu < Component
+    class Callable < Item
+      private
+
+      def render_item
+        model.call(self)
+      end
+    end
+  end
+end

data/lib/ui/menu/item.rb

@@ -0,0 +1,39 @@
+module Ui
+  class Menu < Component
+    class Item < Component
+      include ::Cell::Builder
+
+      builds do |item, options|
+        if item.is_a? Proc
+          Ui::Menu::Callable
+        elsif item.is_a? Array
+          Ui::Menu::Submenu
+        else
+          self
+        end
+      end
+
+      def show
+        content_tag(
+          :li,
+          render_item,
+          class: style
+        )
+      end
+
+      private
+
+      def render_item
+        model.html_safe
+      end
+
+      def depth
+        options[:depth] || 0
+      end
+
+      def style
+        "ui-menu__item ui-menu__item--depth-#{depth}"
+      end
+    end
+  end
+end