shadcn_phlexcomponents 0.1.9 → 0.1.14

data/lib/shadcn_phlexcomponents/components/toast.rb

@@ -0,0 +1,153 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Toast < Base
+    class_variants(
+      base: <<~HEREDOC,
+        p-4 border shadow-lg text-[0.8rem] flex gap-1.5 items-center w-full sm:w-90 rounded-lg duration-200
+        data-[state=open]:animate-in data-[state=closed]:animate-out [&_svg]:size-4 [&_svg]:mr-1 [&_svg]:self-start [&_svg]:translate-y-0.5
+      HEREDOC
+      variants: {
+        variant: {
+          default: "bg-popover text-popover-foreground",
+          destructive: "bg-card text-destructive [&>svg]:text-current *:data-[shadcn-phlexcomponents=toast-description]:text-destructive/90",
+        },
+        side: {
+          top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+          bottom: "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        },
+      },
+      defaults: {
+        variant: :default,
+      },
+    )
+
+    def initialize(variant: :default, side: :top, duration: 5000, **attributes)
+      @class_variants = { variant: variant, side: side }
+      @duration = duration
+      super(**attributes)
+    end
+
+    def content(**attributes, &)
+      ToastContent(**attributes, &)
+    end
+
+    def title(**attributes, &)
+      ToastTitle(**attributes, &)
+    end
+
+    def description(**attributes, &)
+      ToastDescription(**attributes, &)
+    end
+
+    def action(**attributes, &)
+      ToastAction(**attributes, &)
+    end
+
+    def action_to(name = nil, options = nil, html_options = nil, &)
+      ToastActionTo(name, options, html_options, &)
+    end
+
+    def default_attributes
+      {
+        role: "status",
+        tabindex: 0,
+        aria: {
+          live: "off",
+          atomic: "true",
+        },
+        data: {
+          duration: @duration,
+          state: "open",
+          controller: "toast",
+          action: <<~HEREDOC,
+            focus->toast#cancelClose
+            blur->toast#close
+            mouseover->toast#cancelClose
+            mouseout->toast#close
+          HEREDOC
+        },
+      }
+    end
+
+    def view_template(&)
+      li(**@attributes, &)
+    end
+  end
+
+  class ToastContent < Base
+    class_variants(base: "flex flex-col gap-0.5")
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+
+  class ToastTitle < Base
+    class_variants(base: "font-medium leading-[1.5]")
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+
+  class ToastDescription < Base
+    class_variants(base: "leading-[1.4] opacity-90")
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+
+  class ToastAction < Base
+    def initialize(as_child: false, **attributes)
+      @as_child = as_child
+      super(**attributes)
+    end
+
+    def class_variants(**args)
+      Button.new.class_variants(variant: :default, size: :sm, class: "text-xs h-6 py-0 px-2 rounded-sm ml-auto #{args[:class]}")
+    end
+
+    def view_template(&)
+      if @as_child
+        content = capture(&)
+        element = find_as_child(content.to_s)
+        vanish(&)
+        merged_attributes = merged_as_child_attributes(element, @attributes)
+
+        send(element.name, **merged_attributes) do
+          sanitize_as_child(element.children.to_s)
+        end
+      else
+        button(**@attributes, &)
+      end
+    end
+  end
+
+  class ToastActionTo < ToastAction
+    def initialize(name = nil, options = nil, html_options = nil)
+      @name = name
+      @options = options
+      @html_options = html_options
+    end
+
+    def view_template(&)
+      if block_given?
+        @html_options = @options
+        @options = @name
+      end
+
+      merge_default_attributes({})
+      @html_options ||= {}
+      @html_options = mix(@attributes, @html_options)
+      @html_options[:form_class] = TAILWIND_MERGER.merge("inline-flex ml-auto #{@html_options[:form_class]}")
+
+      if block_given?
+        button_to(@options, @html_options, &)
+      else
+        button_to(@name, @options, @html_options)
+      end
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/{toast/toast_container.rb → toast_container.rb}

@@ -2,10 +2,27 @@
 
 module ShadcnPhlexcomponents
   class ToastContainer < Base
-    STYLES = <<~HEREDOC
-      fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4
-      sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]
-    HEREDOC
+    class_variants(
+      base: "fixed z-50 hidden has-[li]:flex flex-col gap-2",
+      variants: {
+        side: {
+          top_center: "top-6 left-1/2 -translate-x-1/2",
+          top_left: "top-6 left-6",
+          top_right: "top-6 right-6",
+          bottom_center: "bottom-6 left-1/2 -translate-x-1/2",
+          bottom_left: "bottom-6 left-6",
+          bottom_right: "right-6 bottom-6",
+        },
+      },
+      defaults: {
+        side: :top_center,
+      },
+    )
+
+    def initialize(side: :top_center, **attributes)
+      @class_variants = { side: side }
+      super(**attributes)
+    end
 
     def default_attributes
       {
@@ -38,6 +55,8 @@ module ShadcnPhlexcomponents
           t.title { "" }
           t.description { "" }
         end
+
+        t.action { "" }
       end
     end
   end

data/lib/shadcn_phlexcomponents/components/toggle.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Toggle < Base
+    class_variants(
+      base: <<~HEREDOC,
+        inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted
+        hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent
+        data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4
+        [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none
+        transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40
+        aria-invalid:border-destructive whitespace-nowrap
+      HEREDOC
+      variants: {
+        variant: {
+          default: "bg-transparent",
+          outline: "border border-input bg-transparent shadow-xs hover:bg-muted hover:text-muted-foreground",
+        },
+        size: {
+          default: "h-9 px-2 min-w-9",
+          sm: "h-8 px-1.5 min-w-8",
+          lg: "h-10 px-2.5 min-w-10",
+        },
+      },
+      defaults: {
+        variant: :default,
+        size: :default,
+      },
+    )
+
+    def initialize(variant: :default, size: :default, on: false, **attributes)
+      @class_variants = { variant: variant, size: size }
+      @on = on
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        aria: {
+          pressed: @on.to_s,
+        },
+        data: {
+          controller: "toggle",
+          toggle_is_on_value: @on.to_s,
+          action: "click->toggle#toggle"
+        },
+      }
+    end
+
+    def view_template(&)
+      button(**@attributes, &)
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/tooltip.rb

@@ -0,0 +1,132 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Tooltip < Base
+    class_variants(base: "inline-flex max-w-fit")
+
+    def initialize(open: false, **attributes)
+      @open = open
+      @aria_id = "tooltip-#{SecureRandom.hex(5)}"
+      super(**attributes)
+    end
+
+    def trigger(**attributes, &)
+      TooltipTrigger(aria_id: @aria_id, **attributes, &)
+    end
+
+    def content(**attributes, &)
+      TooltipContent(aria_id: @aria_id, **attributes, &)
+    end
+
+    def default_attributes
+      {
+        data: {
+          controller: "tooltip",
+          tooltip_is_open_value: @open.to_s,
+        },
+      }
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+
+  class TooltipTrigger < Base
+    def initialize(as_child: false, aria_id: nil, **attributes)
+      @as_child = as_child
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def view_template(&)
+      if @as_child
+        content = capture(&)
+        element = find_as_child(content.to_s)
+        vanish(&)
+        merged_attributes = merged_as_child_attributes(element, @attributes)
+
+        send(element.name, **merged_attributes) do
+          sanitize_as_child(element.children.to_s)
+        end
+      else
+        div(**@attributes, &)
+      end
+    end
+
+    def default_attributes
+      {
+        id: @id,
+        role: "button",
+        aria: {
+          describedby: "#{@aria_id}-content",
+        },
+        data: {
+          as_child: @as_child.to_s,
+          tooltip_target: "trigger",
+          action: <<~HEREDOC,
+            focus->tooltip#open
+            blur->tooltip#closeImmediately
+            click->tooltip#open
+          HEREDOC
+        },
+      }
+    end
+  end
+
+  class TooltipContent < Base
+    class_variants(
+      base: <<~HEREDOC,
+        bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out
+        data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2
+        data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2
+        z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance
+      HEREDOC
+    )
+
+    def initialize(side: :top, align: :center, aria_id: nil, **attributes)
+      @side = side
+      @align = align
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def view_template(&)
+      div(
+        style: { display: "none" },
+        class: "fixed top-0 left-0 w-max z-50",
+        data: { tooltip_target: "contentContainer" },
+      ) do
+        div(**@attributes) do
+          yield
+
+          span(data: { tooltip_target: "arrow" }) do
+            raw(safe(
+              '<svg class="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" width="10" height="5" viewBox="0 0 30 10" preserveAspectRatio="none">
+                <polygon points="0,0 30,0 15,10"></polygon>
+              </svg>',
+            ))
+          end
+
+          span(
+            id: "#{@aria_id}-content",
+            role: "tooltip",
+            class: "sr-only",
+            &
+          )
+        end
+      end
+    end
+
+    def default_attributes
+      {
+        data: {
+          side: @side,
+          align: @align,
+          tooltip_target: "content",
+          action: "mouseover->tooltip#open mouseout->tooltip#close",
+        },
+      }
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/engine.rb

@@ -3,9 +3,5 @@
 require "rails"
 
 module ShadcnPhlexcomponents
-  class Engine < ::Rails::Engine
-    config.app_generators do |g|
-      g.template_engine(:shadcn_phlexcomponents)
-    end
-  end
+  class Engine < ::Rails::Engine; end
 end

data/lib/shadcn_phlexcomponents/initializers/shadcn_phlexcomponents.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  extend Phlex::Kit
+end
+
+# Require base.rb first
+require Rails.root.join("vendor/shadcn_phlexcomponents/components/base.rb")
+
+Dir[Rails.root.join("vendor/shadcn_phlexcomponents/components/*.rb")].each do |file|
+  unless file.ends_with?("base.rb")
+    require file
+  end
+end
+
+ClassVariants.configure do |config|
+  merger = TailwindMerge::Merger.new
+  config.process_classes_with do |classes|
+    merger.merge(classes)
+  end
+end
+
+Rails.application.config.after_initialize do
+  require "shadcn_phlexcomponents/alias"
+end

data/lib/shadcn_phlexcomponents/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ShadcnPhlexcomponents
-  VERSION = "0.1.9"
+  VERSION = "0.1.14"
 end

data/lib/tasks/install.rake

@@ -3,7 +3,7 @@
 namespace :shadcn_phlexcomponents do
   desc "Install shadcn_phlexcomponents"
   task :install do
-    system "#{RbConfig.ruby} ./bin/rails app:template LOCATION=#{File.expand_path(
+    system "ENVIRONMENT=#{ENV["ENVIRONMENT"]} #{RbConfig.ruby} ./bin/rails app:template LOCATION=#{File.expand_path(
       "../install/install_shadcn_phlexcomponents.rb", __dir__
     )}"
   end