componeer 0.0.4a → 0.0.7a

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bf9667e67bbd5867ff0b220fc8e726dd7d38edfeb458b14d4cd9bc14a5884c64
-  data.tar.gz: 37ede31c7884a7f15aad097f039e63895a459a2c7b1efb1cb080db14eb4aafcb
+  metadata.gz: 9fbc69925280e333c8d89044bd85e4e15c4d371eb6acad1d581e832df75cbb9d
+  data.tar.gz: 5e6d85cb8b73c1050f8fd277d802e3be1c269908ffd43c8ac5bf99f073863a75
 SHA512:
-  metadata.gz: 3342c79bf9a9026842767ad8c735e680c8a2c903cfcc555d7394bc051c153056653364950e08681ba8527d18ef0d14217794cf107ea72ea5e4c7a2d793e8bcd4
-  data.tar.gz: 4bc158371b0eb9a7e58a349ba41ceab20effa1570167cbeb83ec8aeb7b62899094b892c06906b7515b5333e4a5df50c7b7d23be1d66ef22f013c8feca21869f2
+  metadata.gz: 1f5610e4a528847aae3ab4952a2720cf55a8af20e2a07854b0760e47577252392c25d3e83cd2ae77e61bb439fb67c86f69cbb137daeef450735ae9c9a74b862f
+  data.tar.gz: 3c48fb148673ca0be5f176f49d8d616354ee004fdbb89c1c5aadcac1469214d5fa0fe9eb72beb6aca1401874c9a1470b6564a24a11f74a039425945117389603

data/app/components/componeer/base_component.rb

@@ -30,5 +30,15 @@ module Componeer
         File.exist?(styles_yaml_file) ? YAML.load(ERB.new(File.read(styles_yaml_file)).result) : {}
       end
     end
+
+    def i18n(value, **options)
+      I18n.t(value,
+             scope: "componeer.#{self.class.to_s.demodulize.underscore.gsub('_component', '')}",
+             **options)
+    end
+
+    def to_classes_string(array)
+      array.flatten.compact_blank.uniq.join(' ')
+    end
   end
 end

data/app/components/componeer/empty_states/empty_state_component.html.erb

@@ -1,28 +1,25 @@
 <div class="flex flex-col py-12 justify-center items-center bg-gray-50 rounded-md">
   <% if @icon %>
-    <div><%= inline_svg_tag("#{@icon}.svg", class: 'mx-auto h-12 w-12 text-gray-400') %></div>
+    <div>
+      <%= inline_svg_tag("#{@icon}.svg", class: 'mx-auto h-12 w-12 text-gray-400') %>
+    </div>
   <% end %>
 
-  <h3 class="text-sm font-medium text-gray-900">No <%= @resource_name.pluralize %></h3>
+  <h3 class="mt-2 text-sm font-medium text-gray-900">
+    <%= i18n('no_resouces', resource_name: @resource_name,
+                            resource_name_pluralized: @resource_name.pluralize,
+                            default: 'No %{resource_name_pluralized}') %>
+  </h3>
+
   <% if @description %>
-    <p class="text-sm text-gray-500"><%= @description %></p>
+    <p class="text-sm text-gray-500">
+      <%= @description %>
+    </p>
   <% end %>
-  <% if @new_resource_path %>
-    <div class="flex flex-col items-center space-y-2">
-      <p class="text-sm text-gray-500">
-        Get started by creating a new <%= @resource_name %>.
-      </p>
-      <div>
-        <%= componeer.button(size: :small) do %>
-          <%= link_to @new_resource_path do %>
-            <div class="flex items-center space-x-2">
-              <%= inline_svg_tag('plus.svg', class: 'h-5 w-5') %>
 
-              <span>New <%= @resource_name %></span>
-            </div>
-          <% end %>
-        <% end %>
-      </div>
+  <% if new_resource_action %>
+    <div class="mt-3">
+      <%= new_resource_action %>
     </div>
   <% end %>
 </div>

data/app/components/componeer/empty_states/empty_state_component.rb

@@ -3,6 +3,8 @@ module Componeer
     class EmptyStateComponent < BaseComponent
       register_as :empty_state
 
+      renders_one :new_resource_action
+
       def initialize(resource_name:, icon: :exclamation, new_resource_path: nil, description: nil)
         @resource_name = resource_name
         @icon = icon

data/app/components/componeer/tables/column_component.rb

@@ -0,0 +1,45 @@
+module Componeer
+  module Tables
+    class ColumnComponent < BaseComponent
+      attr_reader :table, :title, :custom_classes, :alignment, :options
+      delegate :density, to: :table
+
+      def initialize(table, title, **options, &block)
+        @table = table
+        @title = title
+        @custom_classes = resolve_classes(options.delete(:class)) || {}
+        @alignment = options.delete(:align) || :left
+        @options = options
+        @block = block
+      end
+
+      def call(record)
+        @block.call(record)
+      end
+
+      def th_classes
+        attribute_classes(:th, key: :header)
+      end
+
+      def td_classes
+        attribute_classes(:td, key: :body)
+      end
+
+      private
+
+      def attribute_classes(attr, key:)
+        to_classes_string([styles.dig(key, :column, :density, density),
+                           styles.dig(key, :column, :alignment, alignment),
+                           custom_classes[attr].to_s.split])
+      end
+
+      def resolve_classes(hash_or_string)
+        if hash_or_string.is_a?(String)
+          { th: hash_or_string, td: hash_or_string }
+        else
+          hash_or_string
+        end
+      end
+    end
+  end
+end

data/app/components/componeer/tables/styles.yml

@@ -0,0 +1,24 @@
+---
+:header:
+  :column:
+    :density:
+      :default: 'p-3 text-sm font-semibold'
+      :compact: 'p-1.5 text-xs font-semibold'
+    :alignment:
+      :left: 'text-left'
+      :right: 'text-right'
+      :center: 'text-center'
+  :row: 'bg-white border-b border-gray-200'
+
+:body:
+  :column:
+    :density:
+      :default: 'p-3 text-sm font-normal'
+      :compact: 'p-1.5 text-xs font-normal'
+    :alignment:
+      :left: 'text-left'
+      :right: 'text-right'
+      :center: 'text-center'
+  :row:
+    :default: 'bg-white'
+    :striped: 'bg-gray-50'

data/app/components/componeer/tables/table_component.html.erb

@@ -0,0 +1,33 @@
+<% if @records.present? %>
+  <table class="w-full">
+    <thead>
+      <tr class="<%= tr_classes(:header) %>">
+        <% columns.each do |column| %>
+          <th scope="col" class="<%= column.th_classes %>">
+            <%= column.title %>
+          </th>
+        <% end %>
+      </tr>
+    </thead>
+
+    <tbody>
+      <% @records.each do |record| %>
+        <tr
+          <% if record.respond_to?(:id) %>
+            id="<%= dom_id(record) %>"
+          <% end %>
+          class="<%= tr_classes %>"
+        >
+          <% columns.each do |column| %>
+            <td class="<%= column.td_classes %>">
+              <%= column.call(record) %>
+            </td>
+          <% end %>
+        </tr>
+      <% end %>
+    </tbody>
+    <tfoot><%= footer %></tfoot>
+  </table>
+<% else %>
+  <%= empty_state %>
+<% end %>

data/app/components/componeer/tables/table_component.rb

@@ -0,0 +1,38 @@
+module Componeer
+  module Tables
+    class TableComponent < BaseComponent
+      register_as :table
+
+      renders_many :columns,
+                   lambda { |title: '', **options, &block|
+                     ColumnComponent.new(self, title, **options, &block)
+                   }
+
+      renders_one :empty_state,
+                  lambda { |resource_name: nil, icon: :exclamation|
+                    EmptyStates::EmptyStateComponent.new(resource_name: resource_name ||
+                                                                        records_resource_name,
+                                                         icon:)
+                  }
+
+      renders_one :footer
+
+      attr_reader :records, :density, :striped, :options
+
+      def initialize(records: nil, **options)
+        @records = records
+        @striped = options.delete(:striped) || true
+        @density = options.delete(:density) || :default
+        @options = options
+      end
+
+      def tr_classes(level = :body)
+        if level == :body
+          styles.dig(level, :row, striped ? cycle(:striped, :default).to_sym : :default)
+        else
+          styles.dig(level, :row)
+        end
+      end
+    end
+  end
+end

data/app/components/componeer/tags/styles.yml

@@ -0,0 +1,16 @@
+---
+:size:
+  :small: text-xs px-1 p-0.5
+  :default: text-sm px-2 py-1
+  :large: text-base px-3 py-1.5
+:shape:
+  :rounded: rounded rounded-lg
+  :flat: rounded-none
+:color:
+  :gray: bg-gray-100 text-gray-700
+  :brand: bg-brand-100 text-brand-700
+  :blue: bg-blue-100 text-blue-700
+  :green: bg-green-100 text-green-700
+  :red: bg-red-100 text-red-700
+  :yellow: bg-yellow-100 text-yellow-700
+  :purple: bg-purple-100 text-purple-700

data/app/components/componeer/tags/tag_component.html.erb

@@ -0,0 +1,3 @@
+<span class="<%= base_classes %>">
+  <%= content.presence || text %>
+</span>

data/app/components/componeer/tags/tag_component.rb

@@ -0,0 +1,24 @@
+module Componeer
+  module Tags
+    class TagComponent < BaseComponent
+      register_as :tag
+
+      attr_reader :text, :type, :size, :color, :shape, :options
+
+      def initialize(text = nil, **options)
+        @text = text
+        @type = options.delete(:type) || :default
+        @size = options.delete(:size) || :default
+        @color = options.delete(:color) || :gray
+        @shape = options.delete(:shape) || :rounded
+        @options = options
+      end
+
+      def base_classes
+        to_classes_string([styles.dig(:size, size),
+                           styles.dig(:color, color),
+                           styles.dig(:shape, shape)])
+      end
+    end
+  end
+end

data/lib/componeer/version.rb

@@ -1,3 +1,3 @@
 module Componeer
-  VERSION = '0.0.4a'.freeze
+  VERSION = '0.0.7a'.freeze
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: componeer
 version: !ruby/object:Gem::Version
-  version: 0.0.4a
+  version: 0.0.7a
 platform: ruby
 authors:
 - Andre Rodrigues
@@ -10,7 +10,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-05-27 00:00:00.000000000 Z
+date: 2024-06-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: inline_svg
@@ -78,6 +78,13 @@ files:
 - app/components/componeer/buttons/styles.yml
 - app/components/componeer/empty_states/empty_state_component.html.erb
 - app/components/componeer/empty_states/empty_state_component.rb
+- app/components/componeer/tables/column_component.rb
+- app/components/componeer/tables/styles.yml
+- app/components/componeer/tables/table_component.html.erb
+- app/components/componeer/tables/table_component.rb
+- app/components/componeer/tags/styles.yml
+- app/components/componeer/tags/tag_component.html.erb
+- app/components/componeer/tags/tag_component.rb
 - app/controllers/application_controller.rb
 - app/controllers/componeer/application_controller.rb
 - app/helpers/componeer/application_helper.rb
@@ -91,7 +98,6 @@ files:
 - lib/componeer/registry.rb
 - lib/componeer/version.rb
 - lib/install/componeer.rb
-- lib/tasks/componeer_tasks.rake
 - lib/tasks/install.rake
 homepage: https://docs.componeer.me
 licenses:

data/lib/tasks/componeer_tasks.rake

@@ -1,4 +0,0 @@
-# desc "Explaining what the task does"
-# task :componeer do
-#   # Task goes here
-# end