hotwirebits 0.1.0

data/app/views/hotwirebits/_version_diff.html.erb

@@ -0,0 +1,20 @@
+<%# VersionDiff component — ERB partial %>
+<%# Usage: render 'hotwirebits/version_diff', ... %>
+
+<div class="<%= container_classes %>" <%= tag.attributes(local_assigns) %>>
+  <% if view == :side_by_side %>
+    <div class="grid grid-cols-2 divide-x divide-hw-border">
+      <div>
+        <div class="bg-hw-destructive/5 px-3 py-1.5 text-xs font-medium text-hw-destructive border-b border-hw-border">Old</div>
+        <pre class="p-3 overflow-x-auto text-xs leading-5"><% old_text.to_s.lines.each_with_index do |line, i| %><span class="flex"><span class="w-8 shrink-0 text-hw-muted-foreground select-none"><%= i + 1 %></span><span class="text-hw-destructive bg-hw-destructive/5/50 flex-1"><%= ERB::Util.html_escape(line.chomp) %></span></span><% end %></pre>
+      </div>
+      <div>
+        <div class="bg-hw-success/5 px-3 py-1.5 text-xs font-medium text-hw-success border-b border-hw-border">New</div>
+        <pre class="p-3 overflow-x-auto text-xs leading-5"><% new_text.to_s.lines.each_with_index do |line, i| %><span class="flex"><span class="w-8 shrink-0 text-hw-muted-foreground select-none"><%= i + 1 %></span><span class="text-hw-success bg-hw-success/5/50 flex-1"><%= ERB::Util.html_escape(line.chomp) %></span></span><% end %></pre>
+      </div>
+    </div>
+  <% else %>
+    <div class="bg-hw-muted/30 px-3 py-1.5 text-xs font-medium text-hw-muted-foreground border-b border-hw-border">Unified Diff</div>
+    <pre class="p-3 overflow-x-auto text-xs leading-5"><% diff_lines.each do |entry| %><% case entry[:type] %><% when :context %><span class="flex"><span class="w-8 shrink-0 text-hw-muted-foreground select-none"><%= entry[:old_line] %></span><span class="flex-1"><%= ERB::Util.html_escape(entry[:content]) %></span></span><% when :removed %><span class="flex bg-hw-destructive/5"><span class="w-8 shrink-0 text-hw-destructive select-none">-</span><span class="flex-1 text-hw-destructive"><%= ERB::Util.html_escape(entry[:content]) %></span></span><% when :added %><span class="flex bg-hw-success/5"><span class="w-8 shrink-0 text-hw-success select-none">+</span><span class="flex-1 text-hw-success"><%= ERB::Util.html_escape(entry[:content]) %></span></span><% end %><% end %></pre>
+  <% end %>
+</div>

data/app/views/hotwirebits/_video_player.html.erb

@@ -0,0 +1,14 @@
+<%# VideoPlayer component — ERB partial %>
+<%# Usage: render 'hotwirebits/video_player', ... %>
+
+<div class="<%= container_classes %>" <%= tag.attributes(local_assigns) %>>
+  <video class="absolute inset-0 h-full w-full object-cover"
+         src="<%= src %>"
+         <% if poster %>poster="<%= poster %>"<% end %>
+         <% if autoplay %>autoplay<% end %>
+         <% if controls %>controls<% end %>
+         preload="metadata"
+         playsinline>
+    Your browser does not support the video tag.
+  </video>
+</div>

data/app/views/hotwirebits/_voice_recorder.html.erb

@@ -0,0 +1,32 @@
+<%# VoiceRecorder component — ERB partial %>
+<%# Usage: render 'hotwirebits/voice_recorder', ... %>
+
+<div data-controller="hw-voice-recorder"
+     data-hw-voice-recorder-max-duration-value="<%= max_duration %>"
+     data-hw-voice-recorder-format-value="<%= format %>"
+     <%= tag.attributes(local_assigns) %>>
+  <div class="flex items-center gap-3">
+    <button type="button"
+            class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-hw-input bg-hw-background text-hw-muted-foreground hover:bg-hw-accent hover:text-hw-accent-foreground transition-colors cursor-pointer"
+            data-hw-voice-recorder-target="recordBtn"
+            data-action="click->hw-voice-recorder#toggle"
+      aria-label="Record">
+      <svg class="h-5 w-5" data-hw-voice-recorder-target="micIcon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"/>
+      </svg>
+      <svg class="h-5 w-5 hidden" data-hw-voice-recorder-target="stopIcon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
+        <rect x="6" y="6" width="12" height="12" rx="2"/>
+      </svg>
+    </button>
+    <div class="flex-1">
+      <div class="flex items-center gap-2">
+        <span class="text-sm text-hw-muted-foreground" data-hw-voice-recorder-target="status">Click to record</span>
+        <span class="text-sm font-mono text-hw-foreground hidden" data-hw-voice-recorder-target="timer">0:00</span>
+      </div>
+      <div class="mt-1 w-full h-1 rounded-full bg-hw-muted overflow-hidden">
+        <div class="h-full bg-hw-primary rounded-full transition-all" data-hw-voice-recorder-target="progress" style="width: 0%;"></div>
+      </div>
+    </div>
+  </div>
+  <input type="hidden" name="<%= name %>" data-hw-voice-recorder-target="input">
+</div>

data/app/views/hotwirebits/_window_mockup.html.erb

@@ -0,0 +1,23 @@
+<%# WindowMockup component — ERB partial %>
+<%# Usage: render 'hotwirebits/window_mockup', ... %>
+
+<div class="rounded-lg border border-hw-border overflow-hidden bg-white shadow-lg" <%= tag.attributes(local_assigns) %>>
+  <div class="flex items-center justify-between px-4 py-2.5 bg-hw-muted border-b border-neutral-200">
+    <div class="flex gap-1.5">
+      <div class="h-3 w-3 rounded-full bg-red-400"></div>
+      <div class="h-3 w-3 rounded-full bg-yellow-400"></div>
+      <div class="h-3 w-3 rounded-full bg-green-400"></div>
+    </div>
+    <% if title %>
+      <span class="text-xs text-hw-muted-foreground font-medium"><%= title %></span>
+    <% end %>
+    <div class="flex gap-1.5">
+      <div class="h-3 w-3"></div>
+      <div class="h-3 w-3"></div>
+      <div class="h-3 w-3"></div>
+    </div>
+  </div>
+  <div class="min-h-[200px] <%= 'resize overflow-auto' if resizable %>">
+    <%= content %>
+  </div>
+</div>

data/config/routes.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+HotwireBits::Engine.routes.draw do
+end

data/lib/generators/hotwirebits/component_generator.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+require "rails/generators"
+
+module HotwireBits
+  module Generators
+    class ComponentGenerator < Rails::Generators::NamedBase
+      source_root File.expand_path("templates", __dir__)
+      desc "Generate a HotwireBits component (ERB partial + ViewComponent)"
+
+      class_option :format, type: :string, default: "both", desc: "Format: erb, view_component, or both"
+      class_option :skip_stimulus, type: :boolean, default: false, desc: "Skip Stimulus controller generation"
+
+      def create_erb_partial
+        return unless erb? || both?
+
+        template "component.html.erb.tt", "app/views/hotwirebits/_#{file_name}.html.erb"
+      end
+
+      def create_view_component
+        return unless view_component? || both?
+
+        template "component.rb.tt", "app/components/hotwirebits/#{file_name}_component.rb"
+        template "component.html.erb.tt", "app/components/hotwirebits/#{file_name}_component.html.erb"
+      end
+
+      def create_stimulus_controller
+        return if options[:skip_stimulus]
+
+        template "controller.js.tt", "app/javascript/controllers/hotwirebits/#{file_name}_controller.js"
+      end
+
+      private
+
+      def erb?
+        options[:format] == "erb"
+      end
+
+      def view_component?
+        options[:format] == "view_component"
+      end
+
+      def both?
+        options[:format] == "both"
+      end
+    end
+  end
+end

data/lib/generators/hotwirebits/install_generator.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+require "rails/generators"
+
+module HotwireBits
+  module Generators
+    class InstallGenerator < Rails::Generators::Base
+      source_root File.expand_path("templates", __dir__)
+      desc "Install HotwireBits into your Rails application"
+
+      def copy_theme_stylesheet
+        copy_file "theme.css", "app/assets/stylesheets/hotwirebits/theme.css"
+      end
+
+      def create_stimulus_controllers_directory
+        empty_directory "app/javascript/controllers/hotwirebits"
+        create_file "app/javascript/controllers/hotwirebits/.keep"
+      end
+
+      def add_stimulus_import
+        stimulus_manifest = "app/javascript/controllers/index.js"
+        manifest_path = File.join(destination_root, stimulus_manifest)
+        return unless File.exist?(manifest_path)
+
+        append_to_file stimulus_manifest do
+          <<~JS
+
+            // HotwireBits Stimulus controllers
+            import HotwireBits from "hotwirebits"
+          JS
+        end
+      end
+
+      def show_readme
+        say ""
+        say "HotwireBits installed successfully!", :green
+        say ""
+        say "Add to your layout's <head>:"
+        say '  <%= stylesheet_link_tag "hotwirebits/theme" %>', :cyan
+        say ""
+        say "Generate your first component:"
+        say "  rails generate hotwirebits:component Button", :cyan
+        say ""
+      end
+    end
+  end
+end

data/lib/generators/hotwirebits/templates/component.html.erb.tt

@@ -0,0 +1,4 @@
+<!-- HotwireBits::<%= class_name %>Component -->
+<div class="hw-<%= file_name %>" data-controller="hw-<%= file_name %>">
+  <!-- Content here -->
+</div>

data/lib/generators/hotwirebits/templates/component.rb.tt

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class <%= class_name %>Component < Base
+    def initialize(**attrs)
+      @extra_attrs = attrs
+    end
+  end
+end

data/lib/generators/hotwirebits/templates/controller.js.tt

@@ -0,0 +1,6 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {}
+  disconnect() {}
+}

data/lib/generators/hotwirebits/templates/theme.css

@@ -0,0 +1,2 @@
+/* HotwireBits Theme — Copy this to customize your theme */
+@import "hotwirebits/theme";

data/lib/hotwirebits/engine.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class Engine < ::Rails::Engine
+    isolate_namespace HotwireBits
+
+    initializer "hotwirebits.inflections", before: :set_autoload_paths do
+      Rails.autoloaders.each do |autoloader|
+        autoloader.inflector.inflect("hotwirebits" => "HotwireBits")
+      end
+    end
+
+    initializer "hotwirebits.helpers" do
+      ActiveSupport.on_load(:action_controller_base) do
+        helper HotwirebitsHelper
+      end
+    end
+
+    initializer "hotwirebits.assets" do |app|
+      if app.config.respond_to?(:assets) && app.config.assets
+        app.config.assets.precompile += %w[hotwirebits/theme.css]
+      end
+    end
+  end
+end

data/lib/hotwirebits/version.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  VERSION = "0.1.0"
+end

data/lib/hotwirebits.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+require "rails"
+require "view_component"
+require "turbo-rails"
+require "stimulus-rails"
+
+require_relative "hotwirebits/version"
+require_relative "hotwirebits/engine"
+
+module HotwireBits
+  # HotwireBits - The most comprehensive free UI component library for Ruby on Rails
+  #
+  # Each component ships in two formats:
+  #   - ERB partials (copy-paste friendly)
+  #   - ViewComponent classes (Ruby-first)
+  #
+  # All styled with Tailwind CSS v4, interactive via Stimulus, Turbo-compatible.
+end