ruby_ui 1.0.0.beta1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 518fa1b05606796f9ae57a444aa55f5a5f0fcad5280c1e0ed75fa4778dbe978f
+  data.tar.gz: 58c2a5717af15d0326258044a7ffc862d06cb3f3c3cc47f54a269b465bca2bcf
+SHA512:
+  metadata.gz: c17770afaf73e476ba5d2a52bd60d4f4ab00c80e84f7390e9870099cd85a827f81992a6a8d1dd2fd246b34785b6fb2640a95d5f7ad5b08b697a710eb29c89db5
+  data.tar.gz: d70e491efc576db70d0fa7ea559ce16472a7fdd4f2a7a3a770ec15bc62b25da2ec12d12932baed3a966b9d44f2f0cb8704235f3bb016397b5e483cfe30cb1645

data/lib/generators/ruby_ui/component_generator.rb

@@ -0,0 +1,130 @@
+require_relative "javascript_utils"
+module RubyUI
+  module Generators
+    class ComponentGenerator < Rails::Generators::Base
+      include RubyUI::Generators::JavascriptUtils
+
+      namespace "ruby_ui:component"
+
+      source_root File.expand_path("../../ruby_ui", __dir__)
+      argument :component_name, type: :string, required: true
+
+      def generate_component
+        if component_not_found?
+          say "Component not found: #{component_name}", :red
+          exit
+        end
+
+        say "Generating component files"
+      end
+
+      def copy_main_component_file
+        main_component_file_path = File.join(component_folder_path, "#{component_folder_name}.rb")
+
+        # some components dont't have a main component, eg. Typography
+        return unless File.exist? main_component_file_path
+
+        say "Generating main component"
+
+        copy_file main_component_file_path, Rails.root.join("app/components/ruby_ui", "#{component_folder_name}.rb")
+      end
+
+      def copy_related_component_files
+        return if related_components_file_paths.empty?
+
+        say "Generating related components"
+
+        related_components_file_paths.each do |file_path|
+          component_file_name = file_path.split("/").last
+          copy_file file_path, Rails.root.join("app/components/ruby_ui", component_folder_name, component_file_name)
+        end
+      end
+
+      def copy_js_files
+        return if js_controller_file_paths.empty?
+
+        say "Generating Stimulus controllers"
+
+        js_controller_file_paths.each do |file_path|
+          controller_file_name = file_path.split("/").last
+          copy_file file_path, Rails.root.join("app/javascript/controllers/ruby_ui", controller_file_name)
+        end
+
+        # Importmap doesn't have controller manifest, instead it uses `eagerLoadControllersFrom("controllers", application)`
+        if !using_importmap?
+          say "Updating Stimulus controllers manifest"
+          run "rake stimulus:manifest:update"
+        end
+      end
+
+      def install_dependencies
+        return if dependencies.blank?
+
+        say "Installing dependencies"
+
+        install_components_dependencies(dependencies["components"])
+        install_gems_dependencies(dependencies["gems"])
+        install_js_packages(dependencies["js_packages"])
+      end
+
+      private
+
+      def component_not_found? = !Dir.exist?(component_folder_path)
+
+      def component_folder_name = component_name.underscore
+
+      def component_folder_path = File.join(self.class.source_root, component_folder_name)
+
+      def main_component_file_path = File.join(component_folder_path, "#{component_folder_name}.rb")
+
+      def related_components_file_paths = Dir.glob(File.join(component_folder_path, "*.rb")) - [main_component_file_path]
+
+      def js_controller_file_paths = Dir.glob(File.join(component_folder_path, "*.js"))
+
+      def install_components_dependencies(components)
+        components&.each do |component|
+          run "bin/rails generate ruby_ui:component #{component}"
+        end
+      end
+
+      def install_gems_dependencies(gems)
+        gems&.each do |ruby_gem|
+          run "bundle show #{ruby_gem} > /dev/null 2>&1 || bundle add #{ruby_gem}"
+        end
+      end
+
+      def install_js_packages(js_packages)
+        js_packages&.each do |js_package|
+          install_js_package(js_package)
+        end
+      end
+
+      def pin_motion
+        say <<~TEXT
+          WARNING: Installing motion from CDN because `bin/importmap pin motion` doesn't download the correct file.
+        TEXT
+
+        inject_into_file Rails.root.join("config/importmap.rb"), <<~RUBY
+          pin "motion", to: "https://cdn.jsdelivr.net/npm/motion@11.11.17/+esm"\n
+        RUBY
+      end
+
+      def pin_tippy_js
+        say <<~TEXT
+          WARNING: Installing tippy.js from CDN because `bin/importmap pin tippy.js` doesn't download the correct file.
+        TEXT
+
+        inject_into_file Rails.root.join("config/importmap.rb"), <<~RUBY
+          pin "tippy.js", to: "https://cdn.jsdelivr.net/npm/tippy.js@6.3.7/+esm"
+          pin "@popperjs/core", to: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/+esm"\n
+        RUBY
+      end
+
+      def dependencies
+        @dependencies ||= YAML.load_file(File.join(__dir__, "dependencies.yml")).freeze
+
+        @dependencies[component_folder_name]
+      end
+    end
+  end
+end

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

@@ -0,0 +1,90 @@
+require "rails/generators"
+require_relative "../javascript_utils"
+
+module RubyUI
+  module Generators
+    class InstallGenerator < Rails::Generators::Base
+      include RubyUI::Generators::JavascriptUtils
+
+      namespace "ruby_ui:install"
+
+      source_root File.expand_path("templates", __dir__)
+
+      def install_phlex_rails
+        say "Checking for phlex-rails"
+
+        if gem_installed?("phlex-rails")
+          if Gem::Specification.find_by_name("phlex-rails").version < "2.0.0.beta2"
+            say "You need to upgrade to phlex-rails 2 to use RubyUI", :red
+            exit
+          else
+            say "phlex-rails is already installed", :green
+          end
+        else
+          say "Adding phlex-rails to Gemfile"
+          run %(bundle add phlex-rails --github="phlex-ruby/phlex-rails")
+
+          say "Running phlex-rails structure"
+          run "bin/rails generate phlex:install"
+        end
+      end
+
+      def install_tailwind_merge
+        say "Checking for tailwind_merge"
+
+        if gem_installed?("tailwind_merge")
+          say "tailwind_merge is already installed", :green
+        else
+          say "Adding phlex-rails to Gemfile"
+          run %(bundle add tailwind_merge)
+        end
+      end
+
+      def install_ruby_ui_initializer
+        say "Creating RubyUI initializer"
+        template "ruby_ui.rb.erb", Rails.root.join("config/initializers/ruby_ui.rb")
+      end
+
+      def add_ruby_ui_module_to_components_base
+        say "Adding RubyUI Kit to Components::Base"
+        insert_into_file Rails.root.join("app/components/base.rb"), after: "include Components" do
+          "\n  include RubyUI"
+        end
+      end
+
+      def add_tailwind_css
+        say "Adding RubyUI styles to application css"
+        template "application.tailwind.css.erb", Rails.root.join("app/assets/stylesheets/application.tailwind.css")
+      end
+
+      def add_tailwind_config
+        say "Adding RubyUI config to tailwind config"
+
+        if File.exist?(Rails.root.join("tailwind.config.js")) # tailwindcss js package
+          template "tailwind.config.js.js-package.erb", Rails.root.join("tailwind.config.js")
+        elsif File.exist?(Rails.root.join("config/tailwind.config.js")) # tailwindcss-rails gem
+          template "tailwind.config.js.tailwindcss-rails.erb", Rails.root.join("config/tailwind.config.js")
+        else
+          say "Cannot find tailwind.config.js. You will need to install tailwind config manually", :red
+        end
+      end
+
+      def install_tailwind_animate
+        say "Installing tailwindcss-animate plugin"
+
+        install_js_package("tailwindcss-animate")
+      end
+
+      def add_ruby_ui_base
+        say "Adding RubyUI::Base component"
+        template "../../../../ruby_ui/base.rb", Rails.root.join("app/components/ruby_ui/base.rb")
+      end
+
+      private
+
+      def gem_installed?(name)
+        Gem::Specification.find_all_by_name(name).any?
+      end
+    end
+  end
+end

data/lib/generators/ruby_ui/javascript_utils.rb

@@ -0,0 +1,36 @@
+module RubyUI
+  module Generators
+    module JavascriptUtils
+      def install_js_package(package)
+        if using_importmap?
+          pin_with_importmap(package)
+        elsif using_yarn?
+          run "yarn add #{package}"
+        elsif using_npm?
+          run "npm install #{package}"
+        else
+          say "Could not detect the package manager, you need to install '#{package}' manually", :red
+        end
+      end
+
+      def pin_with_importmap(package)
+        case package
+        when "motion"
+          pin_motion
+        when "tippy.js"
+          pin_tippy_js
+        else
+          run "bin/importmap pin #{package}"
+        end
+      end
+
+      def using_importmap?
+        File.exist?(Rails.root.join("config/importmap.rb")) && File.exist?(Rails.root.join("bin/importmap"))
+      end
+
+      def using_npm? = File.exist?(Rails.root.join("package-lock.json"))
+
+      def using_yarn? = File.exist?(Rails.root.join("yarn.lock"))
+    end
+  end
+end

data/lib/ruby_ui/accordion/accordion.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Accordion < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "w-full"
+      }
+    end
+  end
+end

data/lib/ruby_ui/accordion/accordion_content.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class AccordionContent < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          ruby_ui__accordion_target: "content"
+        },
+        class: "overflow-y-hidden",
+        style: "height: 0px;"
+      }
+    end
+  end
+end

data/lib/ruby_ui/accordion/accordion_default_content.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class AccordionDefaultContent < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "pb-4 pt-0 text-sm"
+      }
+    end
+  end
+end

data/lib/ruby_ui/accordion/accordion_default_trigger.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class AccordionDefaultTrigger < Base
+    def view_template(&block)
+      div(class: "flex items-center justify-between w-full") do
+        p(&block)
+        RubyUI.AccordionIcon
+      end
+    end
+
+    def default_attrs
+      {
+        data: {action: "click->ruby-ui--accordion#toggle"},
+        class: "w-full flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline"
+      }
+    end
+  end
+end

data/lib/ruby_ui/accordion/accordion_icon.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class AccordionIcon < Base
+    def view_template(&block)
+      span(**attrs) do
+        if block
+          block.call
+        else
+          icon
+        end
+      end
+    end
+
+    def icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        viewbox: "0 0 20 20",
+        fill: "currentColor",
+        class: "w-4 h-4"
+      ) do |s|
+        s.path(
+          fill_rule: "evenodd",
+          d:
+            "M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z",
+          clip_rule: "evenodd"
+        )
+      end
+    end
+
+    def default_attrs
+      {
+        class: "opacity-50",
+        data: {ruby_ui__accordion_target: "icon"}
+      }
+    end
+  end
+end

data/lib/ruby_ui/accordion/accordion_item.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class AccordionItem < Base
+    def initialize(open: false, rotate_icon: 180, **attrs)
+      @open = open
+      @rotate_icon = rotate_icon
+      super(**attrs)
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          controller: "ruby-ui--accordion",
+          ruby_ui__accordion_open_value: @open,
+          ruby_ui__accordion_rotate_icon_value: @rotate_icon
+        },
+        class: "border-b"
+      }
+    end
+  end
+end

data/lib/ruby_ui/accordion/accordion_trigger.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class AccordionTrigger < Base
+    def view_template(&)
+      button(**attrs, &)
+    end
+
+    def default_attrs
+      {
+        type: "button",
+        data: {action: "click->ruby-ui--accordion#toggle"},
+        class: "w-full flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline"
+      }
+    end
+  end
+end

data/lib/ruby_ui/alert/alert.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Alert < Base
+    def initialize(variant: nil, **attrs)
+      @variant = variant
+      super(**attrs) # must be called after variant is set
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def colors
+      case @variant
+      when nil
+        "ring-border bg-muted/20 text-foreground [&>svg]:opacity-80"
+      when :warning
+        "ring-warning/20 bg-warning/5 text-warning [&>svg]:text-warning/80"
+      when :success
+        "ring-success/20 bg-success/5 text-success [&>svg]:text-success/80"
+      when :destructive
+        "ring-destructive/20 bg-destructive/5 text-destructive [&>svg]:text-destructive/80"
+      end
+    end
+
+    def default_attrs
+      base_classes = "backdrop-blur relative w-full ring-1 ring-inset rounded-lg px-4 py-4 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-8"
+      {
+        class: [base_classes, colors]
+      }
+    end
+  end
+end

data/lib/ruby_ui/alert/alert_description.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class AlertDescription < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "text-sm [&_p]:leading-relaxed"
+      }
+    end
+  end
+end

data/lib/ruby_ui/alert/alert_title.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class AlertTitle < Base
+    def view_template(&)
+      h5(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "mb-1 font-medium leading-none tracking-tight"
+      }
+    end
+  end
+end

data/lib/ruby_ui/alert_dialog/alert_dialog.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class AlertDialog < Base
+    def initialize(open: false, **attrs)
+      @open = open
+      super(**attrs)
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          controller: "ruby-ui--alert-dialog",
+          ruby_ui__alert_dialog_open_value: @open.to_s
+        },
+        class: "inline-block"
+      }
+    end
+  end
+end

data/lib/ruby_ui/alert_dialog/alert_dialog_action.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class AlertDialogAction < Base
+    def view_template(&)
+      render RubyUI::Button.new(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        variant: :primary
+      }
+    end
+  end
+end

data/lib/ruby_ui/alert_dialog/alert_dialog_cancel.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class AlertDialogCancel < Base
+    def view_template(&)
+      render RubyUI::Button.new(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        variant: :outline,
+        data: {
+          action: "click->ruby-ui--alert-dialog#dismiss"
+        },
+        class: "mt-2 sm:mt-0"
+      }
+    end
+  end
+end

data/lib/ruby_ui/alert_dialog/alert_dialog_content.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class AlertDialogContent < Base
+    def view_template(&block)
+      template(**attrs) do
+        div(data: {controller: "ruby-ui--alert-dialog"}) do
+          background
+          container(&block)
+        end
+      end
+    end
+
+    def background
+      div(
+        data_state: "open",
+        class:
+              "fixed inset-0 z-50 bg-black/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        style: "pointer-events:auto",
+        data_aria_hidden: "true",
+        aria_hidden: "true"
+      )
+    end
+
+    def container(&)
+      div(
+        role: "alertdialog",
+        data_state: "open",
+        class: "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
+        style: "pointer-events:auto",
+        &
+      )
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          ruby_ui__alert_dialog_target: "content"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/alert_dialog/alert_dialog_description.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class AlertDialogDescription < Base
+    def view_template(&)
+      p(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "text-sm text-muted-foreground"
+      }
+    end
+  end
+end

data/lib/ruby_ui/alert_dialog/alert_dialog_footer.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class AlertDialogFooter < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2"
+      }
+    end
+  end
+end

data/lib/ruby_ui/alert_dialog/alert_dialog_header.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class AlertDialogHeader < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "flex flex-col space-y-2 text-center sm:text-left"
+      }
+    end
+  end
+end