vitrail 0.1.1 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1edf1a792a8e1917393b0327b97132b923cfb4684ab805f14ffe6f3d505ec8b5
-  data.tar.gz: 396c5856abb8f0295520fc0b796003f52584d4b9e5e07e793b967000e8921008
+  metadata.gz: f651fb5fbab1ebe0ce61ecf4750b8fc7ed68dd428ca9cc7b5d750d8c9a0855e9
+  data.tar.gz: 3d748cea3dd9a264f698ecd44b9cc12ef1b75976a74d7ed76575d4dcc76aefa0
 SHA512:
-  metadata.gz: 5075c244406e1238ada0877f04dacb94d87ae521ded42c9d9f5664145c625d85eafe37bb6c6e53fa625f1356f45e05671b5443408233601514b3100f353e22d6
-  data.tar.gz: f2242dd704b84c01c43473df75566018bebec3133a4a1bfdd4e083c1e3fa552ee849b630c94df7275b22b563e1d0dbed47cad9710e8906a0a5d91924e8557354
+  metadata.gz: 46db3d0d523cda1da9ccb83c8608dd32cca0d3966997fcfabaf0639095860196630dd5e4142c1166b82765ad20ae972aedcbedd73132c72edef7668e7eabcba2
+  data.tar.gz: 734477fc361a7d59057314cf129db1b923550a86b10c09273fb41723cd8a56692ad0347822b20efacb5604e510ae99c8fe60223bb6d1e584f3c56222debfb3a0

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,8 +700,127 @@ select {
   --tw-backdrop-sepia:  ;
 }
 
-.p-20 {
-  padding: 5rem;
+.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;
+}
+
+.border-red-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(248 113 113 / var(--tw-border-opacity));
+}
+
+.border-red-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(254 202 202 / var(--tw-border-opacity));
+}
+
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+}
+
+.bg-red-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+}
+
+.bg-red-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+}
+
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
 }
 
 .px-8 {
@@ -714,9 +833,40 @@ 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(71 85 105 / var(--tw-text-opacity));
+}
+
+.text-red-800 {
   --tw-text-opacity: 1;
-  color: rgb(29 78 216 / var(--tw-text-opacity));
+  color: rgb(153 27 27 / 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/app/views/layouts/vitrail/component_preview.html.erb

@@ -8,6 +8,7 @@
 
     <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
     <%= stylesheet_link_tag "vitrail/application" %>
+    <script src="https://kit.fontawesome.com/910f22a437.js" crossorigin="anonymous"></script>
   </head>
   <body class="px-8 py-4 margin-x-auto">
     <%= yield %>

data/lib/vitrail/engine.rb

@@ -5,16 +5,5 @@ module Vitrail
     initializer "vitrail.precompile" do |app|
       app.config.assets.precompile += %w[vitrail_manifest]
     end
-
-    initializer "vitrail.lookbook" do |app|
-      app.config.lookbook.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]
-    end
   end
 end

data/lib/vitrail/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: vitrail
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.2.1
 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
@@ -52,20 +52,6 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '2'
-- !ruby/object:Gem::Dependency
-  name: lookbook
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '2'
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '2'
 description: Kuartz design system view components
 email:
 - guillaume@kuartz.fr
@@ -81,15 +67,17 @@ 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
-- app/jobs/vitrail/application_job.rb
-- app/mailers/vitrail/application_mailer.rb
-- app/models/vitrail/application_record.rb
-- app/views/layouts/vitrail/application.html.erb
 - app/views/layouts/vitrail/component_preview.html.erb
-- config/routes.rb
 - config/tailwind.config.js
 - lib/tasks/vitrail_tasks.rake
 - lib/vitrail.rb

data/app/controllers/vitrail/application_controller.rb

@@ -1,4 +0,0 @@
-module Vitrail
-  class ApplicationController < ActionController::Base
-  end
-end

data/app/jobs/vitrail/application_job.rb

@@ -1,4 +0,0 @@
-module Vitrail
-  class ApplicationJob < ActiveJob::Base
-  end
-end

data/app/mailers/vitrail/application_mailer.rb

@@ -1,6 +0,0 @@
-module Vitrail
-  class ApplicationMailer < ActionMailer::Base
-    default from: "from@example.com"
-    layout "mailer"
-  end
-end

data/app/models/vitrail/application_record.rb

@@ -1,5 +0,0 @@
-module Vitrail
-  class ApplicationRecord < ActiveRecord::Base
-    self.abstract_class = true
-  end
-end

data/app/views/layouts/vitrail/application.html.erb

@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Vitrail</title>
-    <%= csrf_meta_tags %>
-    <%= csp_meta_tag %>
-
-    <%= stylesheet_link_tag "vitrail", "data-turbo-track": "reload" %>
-  </head>
-  <body>
-    <main class="p-20">
-      <%= yield %>
-    </main>
-  </body>
-</html>

data/config/routes.rb

@@ -1,3 +0,0 @@
-Vitrail::Engine.routes.draw do
-  mount Lookbook::Engine, at: "/"
-end