vitrail 0.4.0 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3847f0778cef05c75a87efdd00cd1393ed57b30914e49afc768dd1593c0866bc
-  data.tar.gz: 4c8ab120e0ad5a156167605dafa1a390b11c3360f9bc1cef6f1fe85dbb4f80ef
+  metadata.gz: 72d49e1b6feb0572fa3fccdf0a7bf11f83c27f615faef3702ac08f605bf94118
+  data.tar.gz: e9fec78decdd9b1d335bb2cc51d495035807d7cebd7c71d27895d13f75abbc36
 SHA512:
-  metadata.gz: 4dbaeed7ff26ae42fc038b7b0c8f4f5709f96014e21f93fa0adbca23bf11de2eef8f43740ff8e538bdaed023bcb21d977a8c0add21708e3159f11d31316ca8e6
-  data.tar.gz: e798ddfb27bcb3fd253ea97ca8ff8e762a9a2f28bd1612f7d78e29ea6863ebe7dab99018e0a3b885cd29b8eb225ca4e870d2a3c69254b3221b35996ee513476b
+  metadata.gz: 2719ce8a1550ee9b23df2e922813de0a204b13f23f915f7be3b13ebfcd4ea3d76689a5f54a39104461e13934182cdaf12de8118bc6a02fbfb96d45edd5c963d5
+  data.tar.gz: 7c452bf6037c3c03f21ea81dc8bd7eb8a8c2da9a67e902fcb07a2faac10514aa5467c02ba2569cb39a1ef65ff1026bff2202621689cf66b9ac2d30e3464a5768

data/README.md

@@ -1,45 +1,31 @@
 # Vitrail
 Kuartz's Design system view components.
 
+## Prerequisites
+- Ruby v3
+- Rails v7
+- ViewComponent v3
+- tailwindcss-rails (the gem) v2
+
 ## Installation
-Add this line to your application's Gemfile:
 
+In your Gemfile, add this line:
 ```ruby
-gem "vitrail"
+gem "vitrail", "~> 1.0"
 ```
 
-And then execute:
-```bash
-$ bundle
-```
+Then, run `bundle install`.
 
-Or install it yourself as:
+Finally, run the following command to install Vitrail's assets and configuration files in your project:
 ```bash
-$ gem install vitrail
+rails vitrail:install
 ```
 
-In `config/tailwind.config.js`,
-
-- add before `module.exports`
-    ```js
-      const execSync = require('child_process').execSync
-      const output = execSync('bundle show vitrail', { encoding: 'utf-8' })
-    ```
-
-- add as last item of `content`:
-    ```js
-      content: [
-        // ...
-        output.trim() + '/app/components/**/*.{erb,haml,html,rb}'
-      ],
-    ```
-
-## Development
-
-watch tailwindcss changes with:
-```bash
-tailwindcss_watch
-```
+This will:
+- Add default styles to the available Vitrail classes in `lib/assets/stylesheets/vitrail`
+- Add the Tailwind preset file in `lib/assets/vitrail_preset.js`
+- Load the Vitrail styles in your `application.tailwind.css` file
+- Add config to your `tailwind.config.js` file
 
 ## License
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/app/components/vitrail/badge.rb

@@ -17,14 +17,14 @@ module Vitrail
 
     attr_reader :level
 
-    LOCAL_CLASSES = "inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ring-1 ring-inset"
+    LOCAL_CLASSES = "vt-badge--container"
     LEVEL_CLASSES = {
-      default: "bg-blue-50 text-blue-700 ring-blue-700/10",
-      info: "bg-blue-50 text-blue-700 ring-blue-700/10",
-      positive: "bg-green-50 text-green-700 ring-green-700/10",
-      negative: "bg-yellow-50 text-yellow-700 ring-yellow-700/10",
-      warning: "bg-red-50 text-red-700 ring-red-700/10",
-      urgent: "bg-red-700 text-white ring-red-700/10"
+      default: "vt-badge--level-default",
+      info: "vt-badge--level-info",
+      positive: "vt-badge--level-positive",
+      negative: "vt-badge--level-negative",
+      warning: "vt-badge--level-warning",
+      urgent: "vt-badge--level-urgent"
     }.freeze
     private_constant :LEVEL_CLASSES
 

data/app/components/vitrail/button_tag/component.rb

@@ -0,0 +1,74 @@
+module Vitrail
+  module ButtonTag
+    class Component < BaseComponent
+      def initialize(content_or_options = {}, options = {})
+        @content_or_options = content_or_options
+        @options = options
+      end
+
+      def call
+        if content.present?
+          @variant = content_or_options.delete(:variant) || :default
+          @size = content_or_options.delete(:size) || :default
+
+          @options = {
+            "name" => "button",
+            "type" => "submit"
+          }.merge!(options.stringify_keys)
+
+          options["class"] = [
+            "button",
+            variant,
+            size,
+            options["class"],
+          ].compact.join(" ")
+
+          content_tag(:button, options) { content }
+        else
+          @variant = options.delete(:variant) || :default
+          @size = options.delete(:size) || :default
+
+          @options = {
+            "name" => "button",
+            "type" => "submit"
+          }.merge!(options.stringify_keys)
+
+          options["class"] = [
+            "button",
+            variant,
+            size,
+            options["class"],
+          ].compact.join(" ")
+
+          content_tag :button, content_or_options || "Button", options
+        end
+      end
+
+      private
+
+      attr_reader :options, :content_or_options
+
+      VARIANTS = %i[
+        default
+        destructive
+        outline
+        secondary
+        ghost
+        link
+      ].freeze
+      def variant
+        @variant.in?(VARIANTS) ? "button--variant-#{@variant}" : "button--variant-default"
+      end
+
+      SIZES = %i[
+        default
+        sm
+        lg
+        icon
+      ].freeze
+      def size
+        @size.in?(SIZES) ? "button--size-#{@size}" : "button--size-default"
+      end
+    end
+  end
+end

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

@@ -0,0 +1,18 @@
+<article class="vt-card">
+  <% if title? || description? %>
+    <header>
+      <% if title? %>
+        <div class="vt-card--title"><%= title %></div>
+      <% end %>
+      <% if description? %>
+        <p class="vt-card--description"><%= description %></p>
+      <% end %>
+    </header>
+  <% end %>
+
+  <%= content %>
+
+  <% if footer? %>
+    <footer><%= footer %></footer>
+  <% end %>
+</article>

data/app/components/vitrail/card/component.rb

@@ -0,0 +1,9 @@
+module Vitrail
+  module Card
+    class Component < BaseComponent
+      renders_one :title
+      renders_one :description
+      renders_one :footer
+    end
+  end
+end

data/app/components/vitrail/link_to/component.rb

@@ -0,0 +1,64 @@
+module Vitrail
+  module LinkTo
+    class Component < BaseComponent
+      def initialize(name_or_options = nil, options = {}, html_options = {})
+        @name_or_options = name_or_options
+        @options = options
+        @html_options = html_options
+      end
+
+      def call
+        if content.present?
+          @variant = options.delete(:variant) || :default
+          @size = options.delete(:size) || :default
+
+          options["class"] = [
+          "vt-link",
+          variant,
+          size,
+          options["class"],
+        ].compact.join(" ")
+
+          link_to(name_or_options, options) { content }
+        else
+          @variant = html_options.delete(:variant) || :default
+          @size = html_options.delete(:size) || :default
+
+          html_options["class"] = [
+            "vt-link",
+            variant,
+            size,
+            html_options["class"],
+          ].compact.join(" ")
+
+          link_to name_or_options, options, html_options
+        end
+      end
+
+      private
+
+      attr_reader :name_or_options, :options, :html_options
+
+      VARIANTS = %i[
+        default
+        primary
+        outline
+        secondary
+        ghost
+      ].freeze
+      def variant
+        @variant.in?(VARIANTS) ? "vt-link--variant-#{@variant}" : "vt-link--variant-default"
+      end
+
+      SIZES = %i[
+        default
+        sm
+        lg
+        icon
+      ].freeze
+      def size
+        @size.in?(SIZES) ? "vt-link--size-#{@size}" : "vt-link--size-default"
+      end
+    end
+  end
+end

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

@@ -1,13 +1,13 @@
 <%= render Vitrail::Card.new(class: level_background) do %>
-  <div class="flex">
-    <div class="flex-shrink-0">
+  <div class="vt-notice--container">
+    <div class="vt-notice--icon-container">
       <i class="<%= level_icon %>"></i>
     </div>
-    <div class="ml-3">
-      <h4 class="font-semibold text-slate-900">
+    <div class="vt-notice--title-container">
+      <h4 class="vt-notice--title">
         <%= title %>
       </h4>
-      <div class="text-slate-600">
+      <div class="vt-notice--content-container">
         <%= content %>
       </div>
     </div>

data/app/components/vitrail/notice.rb

@@ -13,17 +13,17 @@ module Vitrail
     attr_reader :title, :level
 
     LEVEL_BACKGROUNDS = {
-      default: "!bg-gray-50",
-      caution: "!bg-yellow-50",
-      critical: "!bg-red-50"
+      default: "vt-notice--level-bg-default",
+      caution: "vt-notice--level-bg-caution",
+      critical: "vt-notice--level-bg-critical"
     }.freeze
     private_constant :LEVEL_BACKGROUNDS
     def level_background = LEVEL_BACKGROUNDS[level]
 
     LEVEL_ICONS = {
-      default: "fa-solid fa-square-info text-gray-500",
-      caution: "fa-solid fa-square-info text-yellow-600",
-      critical: "fa-solid fa-triangle-exclamation text-red-600"
+      default: "vt-notice--level-icon-default fa-solid fa-square-info",
+      caution: "vt-notice--level-icon-caution fa-solid fa-square-info",
+      critical: "vt-notice--level-icon-critical fa-solid fa-triangle-exclamation"
     }.freeze
     private_constant :LEVEL_ICONS
     def level_icon = LEVEL_ICONS[level]

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

@@ -0,0 +1,15 @@
+<div class="vt-table--container">
+  <table class="vt-table">
+    <thead class="vt-table--head">
+      <tr>
+        <% headers.each do |header| %>
+          <%= header %>
+        <% end %>
+      </tr>
+    <tbody class="vt-table--body">
+      <% rows.each do |row| %>
+        <%= row %>
+      <% end %>
+    </tbody>
+  </table>
+</div>

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

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

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

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

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

@@ -1,9 +1,9 @@
 # frozen_string_literal: true
 
 module Vitrail
-  class Table
+  module Table
     class Division < BaseComponent
-      LOCAL_CLASSES = "whitespace-nowrap px-3 py-4 text-sm text-gray-500"
+      LOCAL_CLASSES = "vt-table--division"
 
       private attr_reader :link_path
 
@@ -17,7 +17,7 @@ module Vitrail
       def link_to? = link_path.present?
 
       def local_classes
-        LOCAL_CLASSES + (" group-hover:bg-gray-50" if link_to?).to_s
+        LOCAL_CLASSES + (" vt-table--division-link-to-container" if link_to?).to_s
       end
     end
   end

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

@@ -1,15 +1,15 @@
 # frozen_string_literal: true
 
 module Vitrail
-  class Table
+  module Table
     class Header < BaseComponent
       erb_template <<~ERB.squish
-      <th class="<%= html_classes %> scope="col" <%= html_attributes %>>
+      <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"
+      LOCAL_CLASSES = "vt-table--header"
 
       private
 

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

@@ -1,10 +1,10 @@
 # frozen_string_literal: true
 
 module Vitrail
-  class Table
+  module Table
     class Row < BaseComponent
       erb_template <<~ERB.squish
-      <tr class="group" <%= html_attributes %>>
+      <tr class="vt-table--row group" <%= html_attributes %>>
         <% divisions.each do |division| %>
           <%= division %>
         <% end %>

data/app/components/vitrail/title/component.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Vitrail
+  module Title
+    class Component < BaseComponent
+      erb_template <<~ERB.squish
+      <h<%= level %> class="<%= html_classes %>" <%= html_attributes %>>
+        <%= content %>
+      </h<%= level %>>
+      ERB
+
+      def initialize(html_options = {})
+        @level = html_options.delete(:level) || 1
+        super(**html_options)
+
+        raise ArgumentError, "Invalid level: #{level}" unless LEVEL_CLASSES[level]
+      end
+
+      private
+
+      attr_reader :level
+
+      LEVEL_CLASSES = {
+        1 => "vt-title--level1",
+        2 => "vt-title--level2",
+        3 => "vt-title--level3",
+        4 => "vt-title--level4",
+      }.freeze
+      private_constant :LEVEL_CLASSES
+
+      def local_classes = "vt-title #{LEVEL_CLASSES[level]}"
+    end
+  end
+end

data/lib/generators/vitrail/install/install_generator.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module Vitrail
+  module Generators
+    class InstallGenerator < Rails::Generators::Base
+      source_root File.expand_path("templates", __dir__)
+
+      def copy_stylesheets
+        directory "stylesheets", "lib/assets/stylesheets"
+      end
+
+      def copy_preset
+        template "vitrail_preset.js", "lib/assets/vitrail_preset.js"
+      end
+
+      # In `app/assets/stylesheets/application.tailwind.css`, makes these changes:
+      # ```diff
+      # - @tailwind base;
+      # - @tailwind components;
+      # - @tailwind utilities;
+      # + @import "tailwindcss/base";
+      # + @import "tailwindcss/components";
+      # + @import "tailwindcss/utilities";
+      # + @import "../../../lib/assets/stylesheets/vitrail/index.css";
+      # ```
+      def load_stylesheets
+        gsub_file "app/assets/stylesheets/application.tailwind.css", /@tailwind base;/, '@import "tailwindcss/base";'
+        gsub_file "app/assets/stylesheets/application.tailwind.css", /@tailwind components;/, '@import "tailwindcss/components";'
+        gsub_file "app/assets/stylesheets/application.tailwind.css", /@tailwind utilities;/, '@import "tailwindcss/utilities";'
+        inject_into_file "app/assets/stylesheets/application.tailwind.css", after: "@import \"tailwindcss/utilities\";\n" do
+          "@import \"../../../lib/assets/stylesheets/vitrail/index.css\";\n"
+        end
+      end
+
+      def config_tailwind
+        inject_into_file "config/tailwind.config.js", after: "module.exports = {\n" do
+          <<-JS
+  presets: [
+    require('../lib/assets/vitrail_preset.js')
+  ],
+          JS
+        end
+
+        inject_into_file "config/tailwind.config.js", after: "content: [\n" do
+          "    './lib/assets/stylesheets/vitrail/*.css',\n"
+        end
+      end
+    end
+  end
+end

data/lib/generators/vitrail/install/templates/stylesheets/vitrail/button_tag.css.tt

@@ -0,0 +1,36 @@
+@layer components {
+  .button {
+    @apply inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
+  }
+  .button--variant-default {
+    @apply bg-primary text-primary-foreground hover:bg-primary/90;
+  }
+  .button--variant-destructive {
+    @apply bg-destructive text-destructive-foreground hover:bg-destructive/90;
+  }
+  .button--variant-outline {
+    @apply border border-input bg-background hover:bg-accent hover:text-accent-foreground;
+  }
+  .button--variant-secondary {
+    @apply bg-secondary text-secondary-foreground hover:bg-secondary/80;
+  }
+  .button--variant-ghost {
+    @apply hover:bg-accent hover:text-accent-foreground;
+  }
+  .button--variant-link {
+    @apply text-primary underline-offset-4 hover:underline;
+  }
+
+  .button--size-default {
+    @apply h-10 px-4 py-2;
+  }
+  .button--size-sm {
+    @apply h-9 rounded-md px-3;
+  }
+  .button--size-lg {
+    @apply h-11 rounded-md px-8;
+  }
+  .button--size-icon {
+    @apply h-10 w-10;
+  }
+}

data/lib/generators/vitrail/install/templates/stylesheets/vitrail/card.css.tt

@@ -0,0 +1,20 @@
+@layer components {
+  .vt-card {
+    @apply rounded-lg border shadow-sm bg-card text-card-foreground p-6 space-y-4 min-w-fit;
+  }
+  .vt-card > header {
+    @apply flex flex-col space-y-1.5;
+  }
+
+  .vt-card > header > .vt-card--title {
+    @apply text-2xl font-semibold leading-none tracking-tight flex justify-between items-center;
+  }
+
+  .vt-card > header > .vt-card--description {
+    @apply text-sm text-muted-foreground;
+  }
+
+  .vt-card > footer {
+    @apply flex justify-between items-center;
+  }
+}

data/lib/generators/vitrail/install/templates/stylesheets/vitrail/config.css.tt

@@ -0,0 +1,23 @@
+@layer base {
+  :root {
+    --border: var(--hsl-zinc-200);
+    --input: var(--hsl-zinc-200);
+    --ring: var(--hsl-zinc-400);
+    --background: var(--hsl-white);
+    --foreground: var(--hsl-zinc-950);
+    --primary: var(--hsl-zinc-900);
+    --primary-foreground: var(--hsl-zinc-50);
+    --secondary: var(--hsl-zinc-100);
+    --secondary-foreground: var(--hsl-zinc-900);
+    --destructive: var(--hsl-red-600);
+    --destructive-foreground: var(--hsl-zinc-50);
+    --muted: var(--hsl-zinc-100);
+    --muted-foreground: var(--hsl-zinc-500);
+    --accent: var(--hsl-zinc-100);
+    --accent-foreground: var(--hsl-zinc-900);
+    --popover: var(--hsl-white);
+    --popover-foreground: var(--hsl-zinc-950);
+    --card: var(--hsl-white);
+    --card-foreground: var(--hsl-zinc-950);
+  }
+}

data/lib/generators/vitrail/install/templates/stylesheets/vitrail/index.css.tt

@@ -0,0 +1,8 @@
+@import "./primitives.css";
+@import "./config.css";
+
+@import "./card.css";
+@import "./button_tag.css";
+@import "./link_to.css";
+@import "./title.css";
+@import "./table.css";

data/lib/generators/vitrail/install/templates/stylesheets/vitrail/link_to.css.tt

@@ -0,0 +1,36 @@
+@layer components {
+  .vt-link {
+    @apply inline-flex items-center justify-center whitespace-nowrap rounded-md;
+    @apply text-sm font-medium ring-offset-background transition-colors;
+    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
+    @apply disabled:pointer-events-none disabled:opacity-50;
+  }
+  .vt-link--variant-primary {
+    @apply bg-primary text-primary-foreground hover:bg-primary/90;
+  }
+  .vt-link--variant-outline {
+    @apply border border-input bg-background hover:bg-accent hover:text-accent-foreground;
+  }
+  .vt-link--variant-secondary {
+    @apply bg-secondary text-secondary-foreground hover:bg-secondary/70;
+  }
+  .vt-link--variant-ghost {
+    @apply hover:bg-accent hover:text-accent-foreground;
+  }
+  .vt-link--variant-default {
+    @apply text-primary underline-offset-4 hover:underline;
+  }
+
+  .vt-link--size-default {
+    @apply h-10 px-4 py-2;
+  }
+  .vt-link--size-sm {
+    @apply h-9 rounded-md px-3;
+  }
+  .vt-link--size-lg {
+    @apply h-11 rounded-md px-8;
+  }
+  .vt-link--size-icon {
+    @apply h-10 w-10;
+  }
+}

data/lib/generators/vitrail/install/templates/stylesheets/vitrail/primitives.css.tt

@@ -0,0 +1,24 @@
+/* HSL Values from https://tailscan.com/colors */
+@layer base {
+  :root {
+    --hsl-white: 0deg 0% 100%;
+
+    --hsl-zinc-50: 0deg 0% 98%;
+    --hsl-zinc-100: 240deg 5% 96%;
+    --hsl-zinc-200: 240deg 6% 90%;
+    --hsl-zinc-400: 240deg 5% 65%;
+    --hsl-zinc-500: 240deg 4% 46%;
+    --hsl-zinc-900: 240deg 6% 10%;
+    --hsl-zinc-950: 240deg 10% 4%;
+
+    --hsl-slate-50: 210deg 40% 98%;
+    --hsl-slate-100: 210deg 40% 96%;
+    --hsl-slate-200: 214deg 32% 91%;
+    --hsl-slate-400: 215deg 20% 65%;
+    --hsl-slate-500: 215deg 16% 47%;
+    --hsl-slate-900: 222deg 47% 11%;
+    --hsl-slate-950: 229deg 84% 5%;
+
+    --hsl-red-600: 0deg 72% 51%;
+  }
+}