maquina-components 0.1.2 → 0.3.0

data/app/views/components/table/_caption.html.erb

@@ -0,0 +1,5 @@
+<%# locals: (css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(table_part: :caption) %>
+<%= content_tag :caption, class: css_classes.presence, data: merged_data, **html_options do %>
+  <%= yield if block_given? %>
+<% end %>

data/app/views/components/table/_cell.html.erb

@@ -0,0 +1,5 @@
+<%# locals: (css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(table_part: :cell) %>
+<%= content_tag :td, class: css_classes.presence, data: merged_data, **html_options do %>
+  <%= yield if block_given? %>
+<% end %>

data/app/views/components/table/_footer.html.erb

@@ -0,0 +1,5 @@
+<%# locals: (css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(table_part: :footer) %>
+<%= content_tag :tfoot, class: css_classes.presence, data: merged_data, **html_options do %>
+  <%= yield %>
+<% end %>

data/app/views/components/table/_head.html.erb

@@ -0,0 +1,8 @@
+<%# locals: (css_classes: "", scope: "col", **html_options) %>
+<%
+  merged_data = (html_options.delete(:data) || {}).merge(table_part: :head)
+  html_options[:scope] = scope if scope
+%>
+<%= content_tag :th, class: css_classes.presence, data: merged_data, **html_options do %>
+  <%= yield if block_given? %>
+<% end %>

data/app/views/components/table/_header.html.erb

@@ -0,0 +1,8 @@
+<%# locals: (css_classes: "", sticky: false, **html_options) %>
+<%
+  merged_data = (html_options.delete(:data) || {}).merge(table_part: :header)
+  merged_data[:sticky] = "true" if sticky
+%>
+<%= content_tag :thead, class: css_classes.presence, data: merged_data, **html_options do %>
+  <%= yield %>
+<% end %>

data/app/views/components/table/_row.html.erb

@@ -0,0 +1,8 @@
+<%# locals: (css_classes: "", selected: false, **html_options) %>
+<%
+  merged_data = (html_options.delete(:data) || {}).merge(table_part: :row)
+  merged_data[:state] = :selected if selected
+%>
+<%= content_tag :tr, class: css_classes.presence, data: merged_data, **html_options do %>
+  <%= yield %>
+<% end %>

data/app/views/components/toast/_action.html.erb

@@ -0,0 +1,14 @@
+<%# locals: (label:, href: nil, method: nil, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    toast_part: "action"
+  ) %>
+
+<% merged_data["turbo-method"] = method if method.present? %>
+
+<% if href.present? %>
+  <%= link_to label, href, class: css_classes.presence, data: merged_data, **html_options %>
+<% else %>
+  <%= content_tag :button, type: "button", class: css_classes.presence, data: merged_data, **html_options do %>
+    <%= label %>
+  <% end %>
+<% end %>

data/app/views/components/toast/_description.html.erb

@@ -0,0 +1,8 @@
+<%# locals: (text: nil, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    toast_part: "description"
+  ) %>
+
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
+  <%= text || yield %>
+<% end %>

data/app/views/components/toast/_title.html.erb

@@ -0,0 +1,8 @@
+<%# locals: (text: nil, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    toast_part: "title"
+  ) %>
+
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
+  <%= text || yield %>
+<% end %>

data/app/views/components/toggle_group/_item.html.erb

@@ -0,0 +1,19 @@
+<%# locals: (value:, pressed: false, disabled: false, aria_label: nil, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    "toggle-group-part": "item",
+    "toggle-group-target": "item",
+    value: value,
+    state: pressed ? "on" : "off",
+    action: "click->toggle-group#toggle keydown->toggle-group#handleKeydown"
+  ) %>
+
+<%= content_tag :button,
+      type: "button",
+      class: css_classes.presence,
+      data: merged_data,
+      disabled: disabled,
+      "aria-pressed": pressed,
+      "aria-label": aria_label,
+      **html_options do %>
+  <%= yield %>
+<% end %>

data/config/importmap.rb

@@ -0,0 +1 @@
+pin_all_from MaquinaComponents::Engine.root.join("app/javascript/controllers"), under: "controllers"

data/lib/generators/maquina_components/install/USAGE

@@ -0,0 +1,39 @@
+Description:
+    Install maquina_components into your Rails application.
+
+    This generator will:
+    - Add the engine CSS import to your Tailwind application.css
+    - Add theme variables (shadcn/ui convention) for customization
+    - Create a helper file for icon overrides and customizations
+
+Example:
+    bin/rails generate maquina_components:install
+
+    This will:
+      insert  @import "../builds/tailwind/maquina_components_engine.css";
+      append  Theme variables to app/assets/tailwind/application.css
+      create  app/helpers/maquina_components_helper.rb
+
+Options:
+    --skip-theme    Skip adding theme variables (if you already have them)
+    --skip-helper   Skip creating the helper file
+
+Prerequisites:
+    - tailwindcss-rails gem installed
+    - app/assets/tailwind/application.css exists
+
+After Installation:
+    1. Customize theme variables in app/assets/tailwind/application.css
+    2. Override icon helper in app/helpers/maquina_components_helper.rb
+    3. Start using components:
+
+       <%%= render "components/card" do %>
+         <%%= render "components/card/header" do %>
+           <%%= render "components/card/title", text: "Hello World" %>
+         <%% end %>
+       <%% end %>
+
+    4. Use data attributes with form helpers:
+
+       <%%= f.text_field :email, data: { component: "input" } %>
+       <%%= f.submit "Save", data: { component: "button", variant: "primary" } %>

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

@@ -0,0 +1,123 @@
+# frozen_string_literal: true
+
+require "rails/generators/base"
+
+module MaquinaComponents
+  module Generators
+    class InstallGenerator < Rails::Generators::Base
+      source_root File.expand_path("templates", __dir__)
+
+      desc "Install maquina_components into your Rails application"
+
+      class_option :skip_theme, type: :boolean, default: false,
+        desc: "Skip adding theme variables to application.css"
+      class_option :skip_helper, type: :boolean, default: false,
+        desc: "Skip creating the maquina_components helper"
+
+      def check_tailwindcss_rails
+        css_path = "app/assets/tailwind/application.css"
+
+        unless File.exist?(File.join(destination_root, css_path))
+          say_status :warning, "tailwindcss-rails doesn't appear to be installed", :yellow
+          say "Please install tailwindcss-rails first:"
+          say "  bundle add tailwindcss-rails"
+          say "  rails tailwindcss:install"
+          say ""
+        end
+      end
+
+      def add_engine_css_import
+        css_path = "app/assets/tailwind/application.css"
+        full_path = File.join(destination_root, css_path)
+
+        unless File.exist?(full_path)
+          say_status :skip, "#{css_path} not found", :yellow
+          return
+        end
+
+        import_line = '@import "../builds/tailwind/maquina_components_engine.css";'
+
+        if File.read(full_path).include?(import_line)
+          say_status :skip, "Engine CSS import already present", :blue
+          return
+        end
+
+        # Insert after @import "tailwindcss"; or @import 'tailwindcss'; line
+        inject_into_file css_path, after: /@import\s+["']tailwindcss["'];?\n/ do
+          "\n#{import_line}\n"
+        end
+
+        say_status :insert, "Added maquina_components engine CSS import", :green
+      end
+
+      def add_theme_variables
+        return if options[:skip_theme]
+
+        css_path = "app/assets/tailwind/application.css"
+        full_path = File.join(destination_root, css_path)
+
+        unless File.exist?(full_path)
+          say_status :skip, "#{css_path} not found", :yellow
+          return
+        end
+
+        if File.read(full_path).include?("--color-primary:")
+          say_status :skip, "Theme variables already present", :blue
+          return
+        end
+
+        theme_content = File.read(File.expand_path("templates/theme.css.tt", __dir__))
+
+        append_to_file css_path, "\n#{theme_content}"
+
+        say_status :append, "Added theme variables to application.css", :green
+      end
+
+      def create_helper
+        return if options[:skip_helper]
+
+        helper_path = "app/helpers/maquina_components_helper.rb"
+        full_path = File.join(destination_root, helper_path)
+
+        if File.exist?(full_path)
+          say_status :skip, "#{helper_path} already exists", :blue
+          return
+        end
+
+        template "maquina_components_helper.rb.tt", helper_path
+        say_status :create, helper_path, :green
+      end
+
+      def show_post_install_message
+        say ""
+        say "=" * 60
+        say "  maquina_components installed successfully!", :green
+        say "=" * 60
+        say ""
+        say "Next steps:"
+        say ""
+        say "1. Customize theme variables in app/assets/tailwind/application.css"
+        say "   to match your design system."
+        say ""
+        say "2. Override the icon helper in app/helpers/maquina_components_helper.rb"
+        say "   to use your own icon system (Heroicons, Lucide, etc.)."
+        say ""
+        say "3. Start using components in your views:"
+        say ""
+        say '   <%= render "components/card" do %>'
+        say '     <%= render "components/card/header" do %>'
+        say '       <%= render "components/card/title", text: "Hello" %>'
+        say "     <% end %>"
+        say "   <% end %>"
+        say ""
+        say "4. For form elements, use data attributes:"
+        say ""
+        say '   <%= f.text_field :email, data: { component: "input" } %>'
+        say '   <%= f.submit "Save", data: { component: "button", variant: "primary" } %>'
+        say ""
+        say "Documentation: https://github.com/maquina-app/maquina_components"
+        say ""
+      end
+    end
+  end
+end

data/lib/generators/maquina_components/install/templates/maquina_components_helper.rb.tt

@@ -0,0 +1,68 @@
+# frozen_string_literal: true
+
+# MaquinaComponents Helper
+#
+# This helper provides customization hooks for maquina_components.
+# Override methods here to integrate with your application's icon system,
+# sidebar state management, and other customizations.
+#
+# Documentation: https://github.com/maquina-app/maquina_components
+#
+module MaquinaComponentsHelper
+  # Icon Override
+  #
+  # Override this method to use your own icon system (Heroicons, Lucide, etc.)
+  # The engine's icon_for helper will call this method first.
+  #
+  # @param name [Symbol] Icon name (e.g., :check, :chevron_right, :home)
+  # @param options [Hash] Options hash with :class, :stroke_width, etc.
+  # @return [String, nil] SVG string or nil to fall back to engine's icons
+  #
+  # @example Using Heroicons
+  #   def main_icon_svg_for(name)
+  #     heroicon_tag(name, variant: :outline)
+  #   end
+  #
+  # @example Using Lucide
+  #   def main_icon_svg_for(name)
+  #     lucide_icon(name)
+  #   end
+  #
+  # @example Using inline SVG files
+  #   def main_icon_svg_for(name)
+  #     file_path = Rails.root.join("app/assets/images/icons/#{name}.svg")
+  #     File.read(file_path) if File.exist?(file_path)
+  #   end
+  #
+  def main_icon_svg_for(name)
+    # Return nil to use the engine's built-in icons
+    # Override this method to use your own icon system
+    nil
+  end
+
+  # Sidebar State Helpers
+  #
+  # These helpers are re-exported from the engine for convenience.
+  # You can override them if you need custom cookie names or behavior.
+
+  # Returns the current sidebar state from cookies
+  # @param cookie_name [String] Cookie name (default: "sidebar_state")
+  # @return [Symbol] :expanded or :collapsed
+  def app_sidebar_state(cookie_name = "sidebar_state")
+    sidebar_state(cookie_name)
+  end
+
+  # Check if sidebar is expanded
+  # @param cookie_name [String] Cookie name (default: "sidebar_state")
+  # @return [Boolean]
+  def app_sidebar_open?(cookie_name = "sidebar_state")
+    sidebar_open?(cookie_name)
+  end
+
+  # Check if sidebar is collapsed
+  # @param cookie_name [String] Cookie name (default: "sidebar_state")
+  # @return [Boolean]
+  def app_sidebar_closed?(cookie_name = "sidebar_state")
+    sidebar_closed?(cookie_name)
+  end
+end

data/lib/generators/maquina_components/install/templates/theme.css.tt

@@ -0,0 +1,179 @@
+/* ==========================================================================
+   maquina_components Theme Variables
+   
+   These CSS variables follow the shadcn/ui theming convention.
+   Customize these values to match your design system.
+   
+   Documentation: https://github.com/maquina-app/maquina_components
+   ========================================================================== */
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  /* Layout */
+  --header-height: calc(var(--spacing) * 12 + 1px);
+  --sidebar-width: calc(var(--spacing) * 72);
+  --sidebar-width-icon: 3rem;
+
+  /* Core Colors */
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+
+  /* Card */
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+
+  /* Popover */
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+
+  /* Primary - Main brand color */
+  --primary: oklch(0.645 0.246 16);
+  --primary-foreground: oklch(0.969 0.015 12);
+
+  /* Secondary */
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+
+  /* Muted - Subtle backgrounds */
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+
+  /* Accent - Hover states */
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+
+  /* Success - Success states */
+  --success: oklch(0.92 0.04 168);
+  --success-foreground: oklch(0.35 0.08 168);
+
+  /* Warning - Warning states */
+  --warning: oklch(0.93 0.04 55);
+  --warning-foreground: oklch(0.4 0.08 50);
+
+  /* Destructive - Error/danger states */
+  --destructive: oklch(0.92 0.05 8);
+  --destructive-foreground: oklch(0.4 0.12 8);
+
+  /* Borders & Inputs */
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.645 0.246 16);
+
+  /* Charts (optional) */
+  --chart-1: oklch(0.645 0.246 16);
+  --chart-2: oklch(0.65 0.09 168);
+  --chart-3: oklch(0.72 0.09 55);
+  --chart-4: oklch(0.58 0.18 17);
+  --chart-5: oklch(0.5 0.13 8);
+
+  /* Sidebar */
+  --sidebar: oklch(0.96 0 0);
+  --sidebar-foreground: oklch(0.2 0 0);
+  --sidebar-primary: oklch(0.645 0.246 16);
+  --sidebar-primary-foreground: oklch(0.969 0.015 12);
+  --sidebar-accent: oklch(0.9 0 0);
+  --sidebar-accent-foreground: oklch(0.145 0 0);
+  --sidebar-border: oklch(0.88 0 0);
+  --sidebar-ring: oklch(0.645 0.246 16);
+
+  /* Dark Mode */
+  .dark {
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+
+    --card: oklch(0.205 0 0);
+    --card-foreground: oklch(0.985 0 0);
+
+    --popover: oklch(0.269 0 0);
+    --popover-foreground: oklch(0.985 0 0);
+
+    --primary: oklch(0.712 0.194 13);
+    --primary-foreground: oklch(0.15 0.052 13);
+
+    --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.371 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+
+    --success: oklch(0.32 0.06 168);
+    --success-foreground: oklch(0.82 0.06 168);
+
+    --warning: oklch(0.36 0.06 55);
+    --warning-foreground: oklch(0.86 0.06 55);
+
+    --destructive: oklch(0.34 0.07 8);
+    --destructive-foreground: oklch(0.88 0.06 8);
+
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.455 0.188 13);
+
+    --chart-1: oklch(0.712 0.194 13);
+    --chart-2: oklch(0.72 0.09 168);
+    --chart-3: oklch(0.78 0.09 55);
+    --chart-4: oklch(0.645 0.246 16);
+    --chart-5: oklch(0.58 0.13 8);
+
+    --sidebar: oklch(0.14 0 0);
+    --sidebar-foreground: oklch(0.9 0 0);
+    --sidebar-primary: oklch(0.712 0.194 13);
+    --sidebar-primary-foreground: oklch(0.15 0.052 13);
+    --sidebar-accent: oklch(0.22 0 0);
+    --sidebar-accent-foreground: oklch(0.95 0 0);
+    --sidebar-border: oklch(1 0 0 / 12%);
+    --sidebar-ring: oklch(0.455 0.188 13);
+  }
+}
+
+/* Tailwind Theme Bindings
+   These make the CSS variables available as Tailwind utilities:
+   bg-primary, text-muted-foreground, border-sidebar, etc. */
+@theme {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-ring: var(--ring);
+  --color-ring-destructive: var(--destructive);
+
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  --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);
+}
+
+/* Global border color */
+* {
+  border-color: var(--color-border);
+}

data/lib/maquina_components/engine.rb

@@ -1,4 +1,14 @@
 module MaquinaComponents
   class Engine < ::Rails::Engine
+    initializer "maquina-components.importmap", before: "importmap" do |app|
+      app.config.importmap.paths << root.join("config/importmap.rb")
+      app.config.importmap.cache_sweepers << root.join("app/javascript")
+    end
+
+    initializer "maquin-components.assets" do |app|
+      if app.config.respond_to?(:assets)
+        app.config.assets.paths << Engine.root.join("app/javascript")
+      end
+    end
   end
 end

data/lib/maquina_components/version.rb

@@ -1,3 +1,3 @@
 module MaquinaComponents
-  VERSION = "0.1.2"
+  VERSION = "0.3.0"
 end