ruby_ui 1.0.0.pre.alpha.4 → 1.0.0.rc1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e8fe198601269bb419936470eb4544e7a18d649b11dca407cfccf6abab19c6d1
-  data.tar.gz: 78c7c0804dad0d83f8e6fd4d71846946b9d11f81b474e888b70aef5c8023eaea
+  metadata.gz: bef04b912f756edd217e2294608bc08eef650d0e944145ef052b5a1760860682
+  data.tar.gz: '0792ce039b5817ce7fd9b6965c20672497ba6615ab555b2965110ce6a6817ed2'
 SHA512:
-  metadata.gz: 5e129efa1ca42b66ed176a70d4b0548c512aaf2a617802aa5559f1215a33c820822b2ed4784c04670b67220f02bbd7c56962c770293a156ee7e7606b59cc30ef
-  data.tar.gz: 01a600e4229632bc54cabd1abd4caf3acceb9fb689d973f74b18973b31e23247852a28d3db11b4b66532c094049d004b8987469c6240cfaccbbdeb36cb6b6e94
+  metadata.gz: 7c515453889a668ab223f6099407cd32c70046bd91e8e1e814ee3759e865857b83d0de87fda35b67a157da6a045794f067b1871574eff82b3d313180a62c5aff
+  data.tar.gz: 2cb5b4988c27072c593bf6fa88b3f40785cb8ba19c6c9627082b56260e4793978757ddac1683216e74e1a91c0052ac2474cead61ecef67c8b4249f67988b7f9b

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2024 RubyUI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,85 @@
+# RubyUI (former PhlexUI) 🚀
+
+Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
+
+This is NOT a component library. It's a collection of re-usable components that you can generate or copy and paste into your apps.
+
+Pick the components you need. Copy and paste the code into your project and customize to your needs. The code is yours.
+
+Use this as a reference to build your own component libraries.
+
+### Key Features:
+
+- **Built for Speed** ⚡: RubyUI leverages Phlex, which is up to 12x faster than traditional Rails ERB templates.
+- **Stunning UI** 🎨: Design beautiful, streamlined, and customizable UIs that sell your app effortlessly.
+- **Stay Organized** 📁: Keep your UI components well-organized and easy to manage.
+- **Customer-Centric UX** 🧑‍💼: Create memorable app experiences for your users.
+- **Completely Customizable** 🔧: Full control over the design of all components.
+- **Minimal Dependencies** 🍃: Uses custom-built Stimulus.js controllers to keep your app lean.
+- **Reuse with Ease** ♻️: Build components once and use them seamlessly across your project.
+
+### How to Use:
+
+1. **Find the perfect component** 🔍: Browse live-embedded components on our documentation page.
+2. **Copy the snippet** 📋: Easily copy code snippets for quick implementation.
+3. **Make it yours** 🎨: Customize components using Tailwind utility classes to fit your specific needs.
+
+## Installation 🚀
+
+### 1. Install the gem
+
+```bash
+bundle add ruby_ui --group development --require false
+```
+
+or add it to your Gemfile:
+
+```ruby
+gem "ruby_ui", group: :development, require: false
+```
+
+### 2. Run the installer:
+
+```bash
+bin/rails g ruby_ui:install
+```
+
+### 3. Done! 🎉
+
+You can generate your components using `ruby_ui:component` generator.
+
+```bash
+bin/rails g ruby_ui:component Accordion
+```
+
+## Documentation 📖
+
+Visit https://rubyui.com/docs/introduction to view the full documentation, including:
+
+- Detailed component guides
+- Themes
+- Lookbook
+- Getting started guide
+
+## Speed Comparison 🏎️
+
+RubyUI, powered by Phlex, outperforms alternative methods:
+
+- Phlex: Baseline 🏁
+- ViewComponent: ~1.5x slower 🚙
+- ERB Templates: ~5x slower 🐢
+
+See the original [view layers benchmark](https://github.com/KonnorRogers/view-layer-benchmarks) by @KonnorRogers and its [variations](https://github.com/KonnorRogers/view-layer-benchmarks/forks).
+
+## Importmap notes:
+
+If you run into importmap issues this stackoverflow question might help:
+https://stackoverflow.com/questions/70548841/how-to-add-custom-js-file-to-new-rails-7-project/72855705
+
+## License 📜
+
+Licensed under the [MIT license](https://github.com/shadcn/ui/blob/main/LICENSE.md).
+
+---
+
+© 2024 RubyUI. All rights reserved. 🔒

data/lib/generators/ruby_ui/component_generator.rb

@@ -0,0 +1,94 @@
+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_name} files..."
+      end
+
+      def copy_related_component_files
+        say "Generating components"
+
+        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 components_file_paths = Dir.glob(File.join(component_folder_path, "*.rb"))
+
+      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 dependencies
+        @dependencies ||= YAML.load_file(File.join(__dir__, "dependencies.yml")).freeze
+
+        @dependencies[component_folder_name]
+      end
+    end
+  end
+end

data/lib/generators/ruby_ui/dependencies.yml

@@ -0,0 +1,74 @@
+accordion:
+  js_packages:
+    - "motion"
+
+alert_dialog:
+  components:
+    - "Button"
+
+calendar:
+  js_packages:
+    - "mustache"
+
+carousel:
+  js_packages:
+    - "embla-carousel"
+
+chart:
+  js_packages:
+    - "chart.js"
+
+clipboard:
+  js_packages:
+    - "@floating-ui/dom"
+
+codeblock:
+  components:
+    - "Button"
+    - "Clipboard"
+
+  gems:
+    - "rouge"
+
+combobox:
+  js_packages:
+    - "@floating-ui/dom"
+
+command:
+  js_packages:
+    - "fuse.js"
+
+context_menu:
+  js_packages:
+    - "tippy.js"
+
+dropdown_menu:
+  js_packages:
+    - "@floating-ui/dom"
+
+hover_card:
+  js_packages:
+    - "tippy.js"
+
+masked_input:
+  components:
+    - "Input"
+
+  js_packages:
+    - "maska"
+
+pagination:
+  components:
+    - "Button"
+
+popover:
+  js_packages:
+    - "@floating-ui/dom"
+
+select:
+  js_packages:
+    - "@floating-ui/dom"
+
+tooltip:
+  js_packages:
+    - "@floating-ui/dom"

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

@@ -0,0 +1,89 @@
+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")
+          say "phlex-rails is already installed", :green
+        else
+          say "Adding phlex-rails to Gemfile"
+          run %(bundle add phlex-rails)
+
+          say "Generating 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 Tailwind css"
+
+        css_path = if using_importmap?
+          Rails.root.join("app/assets/tailwind/application.css")
+        else
+          Rails.root.join("app/assets/stylesheets/application.tailwind.css")
+        end
+
+        template "tailwind.css.erb", css_path
+      end
+
+      def install_tailwind_plugins
+        say "Installing tw-animate-css plugin"
+        install_js_package("tw-animate-css")
+
+        say "Installing @tailwindcss/forms plugin"
+        install_js_package("@tailwindcss/forms")
+
+        say "Installing @tailwindcss/typography plugin"
+        install_js_package("@tailwindcss/typography")
+      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
+
+      def using_tailwindcss_rails_gem?
+        File.exist?(Rails.root.join("app/assets/tailwind/application.css"))
+      end
+    end
+  end
+end

data/lib/generators/ruby_ui/install/templates/ruby_ui.rb.erb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module RubyUI
+  extend Phlex::Kit
+end
+
+# Allow using RubyUI instead RubyUi
+Rails.autoloaders.main.inflector.inflect(
+  "ruby_ui" => "RubyUI"
+)
+
+# Allow using RubyUI::ComponentName instead Components::RubyUI::ComponentName
+Rails.autoloaders.main.push_dir(
+  "#{Rails.root}/app/components/ruby_ui", namespace: RubyUI
+)
+
+# Allow using RubyUI::ComponentName instead RubyUI::ComponentName::ComponentName
+Rails.autoloaders.main.collapse(Rails.root.join("app/components/ruby_ui/*"))

data/lib/generators/ruby_ui/install/templates/tailwind.css.erb

@@ -0,0 +1,156 @@
+@import "tailwindcss";
+
+@plugin "@tailwindcss/forms";
+@plugin "@tailwindcss/typography";
+
+<% if using_importmap? %>
+@import "../../../vendor/javascript/tw-animate-css.js";
+<% else %>
+@import "tw-animate-css";
+<% end %>
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+
+  /* ruby_ui specific */
+  --warning: hsl(38 92% 50%);
+  --warning-foreground: hsl(0 0% 100%);
+  --success: hsl(87 100% 37%);
+  --success-foreground: hsl(0 0% 100%);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+
+  /* ruby_ui specific */
+  --warning: hsl(38 92% 50%);
+  --warning-foreground: hsl(0 0% 100%);
+  --success: hsl(84 81% 44%);
+  --success-foreground: hsl(0 0% 100%);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* ruby_ui specific */
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+}
+
+/* Container settings */
+@utility container {
+  margin-inline: auto;
+  padding-inline: 2rem;
+  max-width: 1400px;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

data/lib/generators/ruby_ui/javascript_utils.rb

@@ -0,0 +1,57 @@
+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"))
+
+      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
+    end
+  end
+end

data/lib/{rbui → ruby_ui}/accordion/accordion.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class Accordion < Base
     def view_template(&)
       div(**attrs, &)

data/lib/{rbui → ruby_ui}/accordion/accordion_content.rb

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