Merge pull request #123 from ruby-ui/update-typography

Update to new typography

Author: sethhorsley

.gitignore

@@ -37,4 +37,6 @@
 
 .env* 
 
-.tool-versions
+.tool-versions
+
+config/credentials/production.key

Gemfile

@@ -75,7 +75,7 @@ end
 
 gem "phlex-rails"
 
-gem "rbui", github: "rbui-labs/rbui", branch: "main"
-# gem "rbui", path: "../rbui"
+gem "ruby_ui", github: "ruby-ui/ruby_ui", branch: "main"
+# gem "ruby_ui", path: "../rbui"
 
 gem "pry"

Gemfile.lock

@@ -1,12 +1,12 @@
 GIT
-  remote: https://github.com/rbui-labs/rbui.git
-  revision: 9428238764f51f5039dffcfa76ba4e90ab77f74b
+  remote: https://github.com/ruby-ui/ruby_ui.git
+  revision: 0ae3ed06e7ce56f17c67e2aa530f7fc2c806dc74
   branch: main
   specs:
-    rbui (1.0.0.pre.alpha.3)
+    ruby_ui (1.0.0.pre.alpha.4)
       phlex (~> 1.10)
       rouge (~> 4.2.0)
-      tailwind_merge (>= 0.12)
+      tailwind_merge (~> 0.12)
 
 GEM
   remote: https://rubygems.org/
@@ -300,7 +300,7 @@ GEM
       railties (>= 6.0.0)
     stringio (3.1.1)
     strscan (3.1.0)
-    tailwind_merge (0.13.0)
+    tailwind_merge (0.13.2)
       lru_redux (~> 1.1)
     thor (1.3.1)
     timeout (0.4.1)
@@ -353,7 +353,7 @@ DEPENDENCIES
   pry
   puma (= 6.4.2)
   rails (= 7.2.0)
-  rbui!
+  ruby_ui!
   selenium-webdriver
   sqlite3 (>= 1.4)
   standard

app/components/base.rb

@@ -0,0 +1,23 @@
+class Components::Base < Phlex::HTML
+  TAILWIND_MERGER = ::TailwindMerge::Merger.new.freeze unless defined?(TAILWIND_MERGER)
+
+  attr_reader :attrs
+
+  def initialize(**user_attrs)
+    @attrs = mix(default_attrs, user_attrs)
+    @attrs[:class] = TAILWIND_MERGER.merge(@attrs[:class]) if @attrs[:class]
+  end
+
+  if defined?(Rails) && Rails.env.development?
+    def before_template
+      comment { "Before #{self.class.name}" }
+      super
+    end
+  end
+
+  private
+
+  def default_attrs
+    {}
+  end
+end

app/components/heading.rb

@@ -0,0 +1,73 @@
+# frozen_string_literal: true
+
+module Components
+  class Heading < Base
+    def initialize(level: nil, as: nil, size: nil, **attrs)
+      @level = level
+      @as = as
+      @size = size
+      super(**attrs)
+    end
+
+    def view_template(&)
+      tag = determine_tag
+      public_send(tag, **attrs, &)
+    end
+
+    private
+
+    def determine_tag
+      return @as if @as
+      return "h#{@level}" if @level
+      "h1"
+    end
+
+    def default_attrs
+      {
+        class: class_names
+      }
+    end
+
+    def class_names
+      base_classes = "scroll-m-20 font-bold tracking-tight"
+      size_class = size_to_class[@size || level_to_size[@level] || "6"]
+      tag = determine_tag
+      "#{base_classes} #{size_class} #{component_specific_classes(tag)}"
+    end
+
+    def component_specific_classes(tag)
+      component_classes[tag] || ""
+    end
+
+    def component_classes
+      {
+        "h1" => "scroll-m-20 text-3xl font-bold leading-normal lg:leading-normal tracking-tight lg:text-4xl",
+        "h2" => "scroll-m-20 text-2xl font-semibold tracking-tight transition-colors first:mt-0 pb-4 border-b",
+        "h4" => "scroll-m-20 text-lg font-medium tracking-tight"
+      }
+    end
+
+    def size_to_class
+      {
+        "1" => "text-xs",
+        "2" => "text-sm",
+        "3" => "text-base",
+        "4" => "text-lg",
+        "5" => "text-xl",
+        "6" => "text-2xl",
+        "7" => "text-3xl",
+        "8" => "text-4xl",
+        "9" => "text-5xl"
+      }
+    end
+
+    def level_to_size
+      {
+        "1" => "6",
+        "2" => "5",
+        "3" => "4",
+        "4" => "3"
+      }
+    end
+  end
+end

app/components/rbui/index.js

@@ -4,5 +4,5 @@ import { application } from "../../../app/javascript/controllers/application";
 
 // Register all controllers
 
-import RBUI from "rbui-js";
+import RBUI from "ruby_ui_js";
 RBUI.initialize(application);

app/components/text.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module Components
+  class Text < Base
+    def initialize(as: "p", size: "3", weight: "regular", **attrs)
+      @as = as
+      @size = size
+      @weight = weight
+      super(**attrs)
+    end
+
+    def view_template(&)
+      public_send(@as, **attrs, &)
+    end
+
+    # private
+
+    def default_attrs
+      {
+        class: class_names
+      }
+    end
+
+    def class_names
+      "#{size_to_class[@size]} #{weight_to_class[@weight]} #{component_specific_classes(@as)}"
+    end
+
+    def component_specific_classes(tag)
+      component_classes[tag] || ""
+    end
+
+    def component_classes
+      {
+        "p" => "leading-7 [&:not(:first-child)]:mt-6"
+      }
+    end
+
+    def size_to_class
+      {
+        "1" => "text-xs", "xs" => "text-xs",
+        "2" => "text-sm", "sm" => "text-sm",
+        "3" => "text-base", "base" => "text-base",
+        "4" => "text-lg", "lg" => "text-lg",
+        "5" => "text-xl", "xl" => "text-xl",
+        "6" => "text-2xl", "2xl" => "text-2xl",
+        "7" => "text-3xl", "3xl" => "text-3xl",
+        "8" => "text-4xl", "4xl" => "text-4xl",
+        "9" => "text-5xl", "5xl" => "text-5xl"
+      }
+    end
+
+    def weight_to_class
+      {
+        "muted" => "text-muted-foreground",
+        "light" => "font-light",
+        "regular" => "font-normal",
+        "medium" => "font-medium",
+        "semibold" => "font-semibold",
+        "bold" => "font-bold"
+      }
+    end
+  end
+end

app/components/typography_list.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+class Components::TypographyList < Components::Base
+  def initialize(items: [], numbered: false, **attrs)
+    @items = items
+    @numbered = numbered
+    super(**attrs)
+  end
+
+  def view_template(&)
+    if @items.empty?
+      list(**attrs, &)
+    else
+      list(**attrs) do
+        @items.each do |item|
+          TypographyListItem { item }
+        end
+      end
+    end
+  end
+
+  private
+
+  def list(**attrs, &)
+    if numbered?
+      ol(**attrs, &)
+    else
+      ul(**attrs, &)
+    end
+  end
+
+  def numbered? = @numbered
+
+  def not_numbered? = !numbered?
+
+  def default_attrs
+    {
+      class: tokens(
+        "my-6 ml-6 [&>li]:mt-2 [&>li]:pl-2",
+        numbered?: "list-decimal marker:font-medium",
+        not_numbered?: "list-disc"
+      )
+    }
+  end
+end

app/components/typography_list_item.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class Components::TypographyListItem < Components::Base
+  def view_template(&)
+    li(**attrs, &)
+  end
+
+  private
+
+  def default_attrs
+    {
+      class: "leading-7"
+    }
+  end
+end

app/helpers/application_helper.rb

@@ -1,2 +1,79 @@
 module ApplicationHelper
+  def component_references(component, code_example = nil, use_component_files = false)
+    return [] unless code_example
+
+    calls = []
+    Prism.parse(code_example).value.accept(MethodCallFinder.new(calls))
+    calls_set = Set.new(calls.map(&:to_s))
+    descendants = Phlex::HTML.descendants.map { |d| d.to_s.gsub(/^RBUI::/, "") }
+    component_names = descendants.select { |d| calls_set.include?(d) }
+
+    # component_names = code_example.scan(/(?<=^|\s)#{component}\w*/).uniq
+
+    component_names.map do |name|
+      Docs::ComponentStruct.new(
+        name: name,
+        source: "lib/rbui/#{camel_to_snake(component)}/#{camel_to_snake(name)}.rb",
+        built_using: :phlex
+      )
+    end
+
+    # component_names.push(
+    #   Docs::ComponentStruct.new(
+    #     name: "ComboboxController",
+    #     source: "https://github.com/PhlexUI/phlex_ui_stimulus/blob/main/controllers/command_controller.js",
+    #     built_using: :stimulus
+    #   )
+    # )
+  end
+
+  require "rubygems"
+
+  def component_files(component, gem_name = "ruby_ui")
+    # Find the gem specification
+    gem_spec = Gem::Specification.find_by_name(gem_name)
+    return [] unless gem_spec
+
+    # Construct the path to the component files within the gem
+    component_dir = File.join(gem_spec.gem_dir, "lib", "rbui", camel_to_snake(component))
+
+    return [] unless Dir.exist?(component_dir)
+
+    # Get all Ruby and JavaScript files
+    rb_files = Dir.glob(File.join(component_dir, "*.rb"))
+    js_files = Dir.glob(File.join(component_dir, "*_controller.js"))
+
+    # Combine and process all files
+    (rb_files + js_files).map do |file|
+      ext = File.extname(file)
+      basename = File.basename(file, ext)
+
+      name = basename.camelize
+      # source = "https://github.com/PhlexUI/phlex_ui/blob/v1/lib/rbui/#{component.to_s.downcase}/#{File.basename(file)}"
+      source = "lib/rbui/#{camel_to_snake(component)}/#{File.basename(file)}"
+      built_using = if ext == ".rb"
+        :phlex
+      else # ".js"
+        :stimulus
+      end
+
+      Docs::ComponentStruct.new(
+        name: name,
+        source: source,
+        built_using: built_using
+      )
+    end
+  end
+
+  def camel_to_snake(string)
+    string.gsub("::", "/")
+      .gsub(/([A-Z]+)([A-Z][a-z])/, '\1_\2')
+      .gsub(/([a-z\d])([A-Z])/, '\1_\2')
+      .tr("-", "_")
+      .downcase
+  end
+
+  def snake_to_camel(string)
+    string.split("_").map(&:capitalize).join
+  end
 end