vitrail 0.1.1 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1edf1a792a8e1917393b0327b97132b923cfb4684ab805f14ffe6f3d505ec8b5
-  data.tar.gz: 396c5856abb8f0295520fc0b796003f52584d4b9e5e07e793b967000e8921008
+  metadata.gz: d19a656a36c93b3bda4cb6e96f759715b4a934c7aea3c738aa7022921c97fa4d
+  data.tar.gz: 53201fdf84823b65504497931dbfd086046091b9cfa06f1650c92e3acd44850d
 SHA512:
-  metadata.gz: 5075c244406e1238ada0877f04dacb94d87ae521ded42c9d9f5664145c625d85eafe37bb6c6e53fa625f1356f45e05671b5443408233601514b3100f353e22d6
-  data.tar.gz: f2242dd704b84c01c43473df75566018bebec3133a4a1bfdd4e083c1e3fa552ee849b630c94df7275b22b563e1d0dbed47cad9710e8906a0a5d91924e8557354
+  metadata.gz: 8bb7aca2bd3318dc01936d19a79dd692bed7963544a621a9d0ed1bb0de59f2316362c18bd05172323cdcbe4f95c3e9bcb85e4c0bd877d55ddbccba420c5b681c
+  data.tar.gz: d81b1b723d0a12902b72f0c215177a01f493d6a1f15e5dd69f61c24f782892837449be7f9673076a1143bf4c8aac5dbca33c34aeff7a07522ea6d1be19ec78a5

data/README.md

@@ -34,7 +34,6 @@ In `config/tailwind.config.js`,
       ],
     ```
 
-
 ## Development
 
 watch tailwindcss changes with:

data/app/assets/stylesheets/vitrail/vitrail.css

@@ -700,10 +700,108 @@ select {
   --tw-backdrop-sepia:  ;
 }
 
+.sticky {
+  position: sticky;
+}
+
+.top-0 {
+  top: 0px;
+}
+
+.-mx-3 {
+  margin-left: -0.75rem;
+  margin-right: -0.75rem;
+}
+
+.-my-4 {
+  margin-top: -1rem;
+  margin-bottom: -1rem;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
+.block {
+  display: block;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+.flex {
+  display: flex;
+}
+
+.table {
+  display: table;
+}
+
+.flow-root {
+  display: flow-root;
+}
+
+.min-w-full {
+  min-width: 100%;
+}
+
+.table-auto {
+  table-layout: auto;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.divide-y > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
+}
+
+.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-divide-opacity));
+}
+
+.divide-gray-300 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-divide-opacity));
+}
+
+.overflow-x-auto {
+  overflow-x: auto;
+}
+
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
 .p-20 {
   padding: 5rem;
 }
 
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
 .px-8 {
   padding-left: 2rem;
   padding-right: 2rem;
@@ -714,9 +812,35 @@ select {
   padding-bottom: 1rem;
 }
 
-.text-blue-700 {
+.text-right {
+  text-align: right;
+}
+
+.align-middle {
+  vertical-align: middle;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.text-slate-500 {
+  --tw-text-opacity: 1;
+  color: rgb(100 116 139 / var(--tw-text-opacity));
+}
+
+.text-slate-600 {
   --tw-text-opacity: 1;
-  color: rgb(29 78 216 / var(--tw-text-opacity));
+  color: rgb(71 85 105 / var(--tw-text-opacity));
 }
 
 /*

data/app/components/vitrail/base_component.rb

@@ -13,13 +13,10 @@ module Vitrail
 
     private
 
-    def local_classes
-      ""
-    end
+    def local_classes = ""
 
     def html_attributes
-      ActionView::Helpers::TagHelper::TagBuilder.new(view_context).
-        attributes(html_options)
+      tag.attributes(html_options)
     end
 
     def html_classes

data/app/components/vitrail/card.html.erb

@@ -0,0 +1,12 @@
+<div class="<%= html_classes %>" <%= html_attributes %>>
+  <% if header? %>
+    <header>
+      <div class="flex justify-between items-center mb-2">
+        <h3 class="truncate text-sm font-medium text-slate-500">
+          <%= title %>
+        </h3>
+        <i class="fa-light text-slate-600 ml-2 fa-<%= icon %>" aria-hidden="true"></i>
+    </header>
+  <% end %>
+  <%= content %>
+</div>

data/app/components/vitrail/card.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Vitrail
+  class Card < BaseComponent
+    LOCAL_CLASSES = "border border-slate-200 rounded px-4 py-2 bg-white shadow-sm"
+
+    private attr_reader :title, :icon
+
+    def initialize(title: nil, icon: nil, **html_options)
+      super(**html_options)
+      @title = title
+      @icon = icon
+    end
+
+    def local_classes = LOCAL_CLASSES
+    def header? = title || icon
+  end
+end

data/app/components/vitrail/table/division.html.erb

@@ -0,0 +1,9 @@
+<td class="<%= html_classes %>" <%= html_attributes %>>
+  <% if link_to? %>
+    <%= link_to link_path, class: "block -mx-3 px-3 -my-4 py-4" do %>
+      <%= content || "&nbsp;".html_safe %>
+    <% end %>
+  <% else %>
+    <%= content || "&nbsp;".html_safe %>
+  <% end %>
+</td>

data/app/components/vitrail/table/division.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Vitrail
+  class Table
+    class Division < BaseComponent
+      LOCAL_CLASSES = "whitespace-nowrap px-3 py-4 text-sm text-gray-500"
+
+      private attr_reader :link_path
+
+      def initialize(link_to: nil, **html_options)
+        super(**html_options)
+        @link_path = link_to
+      end
+
+      private
+
+      def link_to? = link_path.present?
+
+      def local_classes
+        LOCAL_CLASSES + (" group-hover:bg-gray-50" if link_to?).to_s
+      end
+    end
+  end
+end

data/app/components/vitrail/table/header.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Vitrail
+  class Table
+    class Header < BaseComponent
+      erb_template <<~ERB.squish
+      <th class="<%= html_classes %> scope="col" <%= html_attributes %>>
+        <%= content %>
+      </th>
+      ERB
+
+      LOCAL_CLASSES = "px-3 py-4 text-left text-sm font-semibold text-gray-900"
+
+      private
+
+      def local_classes = LOCAL_CLASSES
+    end
+  end
+end

data/app/components/vitrail/table/row.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Vitrail
+  class Table
+    class Row < BaseComponent
+      erb_template <<~ERB.squish
+      <tr class="group" <%= html_attributes %>>
+        <% divisions.each do |division| %>
+          <%= division %>
+        <% end %>
+      </tr>
+      ERB
+
+      renders_many :divisions, ->(link_to: nil, **html_options) do
+        Division.new(link_to: link_path, **html_options.merge(td_options))
+      end
+
+      private attr_reader :link_path, :td_options
+
+      def initialize(link_to: nil, td: {}, **html_options)
+        super(**html_options)
+        @link_path = link_to
+        @td_options = td
+      end
+    end
+  end
+end

data/app/components/vitrail/table.html.erb

@@ -0,0 +1,19 @@
+<div class="flow-root" <%= html_attributes %>>
+  <div class="overflow-x-auto">
+    <div class="inline-block min-w-full align-middle">
+      <table class="table-auto min-w-full divide-y divide-gray-300">
+        <thead class="sticky top-0 bg-white">
+          <tr>
+            <% headers.each do |header| %>
+              <%= header %>
+            <% end %>
+          </tr>
+        <tbody class="divide-y divide-gray-200">
+          <% rows.each do |row| %>
+            <%= row %>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>

data/app/components/vitrail/table.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module Vitrail
+  class Table < BaseComponent
+    renders_many :headers, Table::Header
+    renders_many :rows, Table::Row
+  end
+end

data/lib/vitrail/engine.rb

@@ -8,13 +8,14 @@ module Vitrail
 
     initializer "vitrail.lookbook" do |app|
       app.config.lookbook.preview_paths << Vitrail::Engine.root.join("test/components/previews")
+      app.config.view_component.preview_paths << Vitrail::Engine.root.join("test/components/previews")
       app.config.lookbook.preview_layout = "vitrail/component_preview"
       app.config.lookbook.project_name = "Vitrail"
       app.config.lookbook.project_logo = false
       app.config.lookbook.ui_favicon = false
       app.config.lookbook.preview_collection_label = "Components"
       app.config.lookbook.ui_theme = "zinc"
-      app.config.lookbook.preview_inspector.drawer_panels = [:source]
+      app.config.lookbook.preview_inspector.drawer_panels = [:source, :notes]
     end
   end
 end

data/lib/vitrail/version.rb

@@ -1,3 +1,3 @@
 module Vitrail
-  VERSION = "0.1.1"
+  VERSION = "0.2.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: vitrail
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.2.0
 platform: ruby
 authors:
 - Guillaume CABANEL
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-11-15 00:00:00.000000000 Z
+date: 2023-11-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -81,6 +81,14 @@ files:
 - app/assets/stylesheets/vitrail/application.css
 - app/assets/stylesheets/vitrail/vitrail.css
 - app/components/vitrail/base_component.rb
+- app/components/vitrail/card.html.erb
+- app/components/vitrail/card.rb
+- app/components/vitrail/table.html.erb
+- app/components/vitrail/table.rb
+- app/components/vitrail/table/division.html.erb
+- app/components/vitrail/table/division.rb
+- app/components/vitrail/table/header.rb
+- app/components/vitrail/table/row.rb
 - app/components/vitrail/title.rb
 - app/controllers/vitrail/application_controller.rb
 - app/helpers/vitrail/application_helper.rb