quicksilver_ui 0.1.0

data/app/views/ui/alert.rb

@@ -0,0 +1,84 @@
+# frozen_string_literal: true
+
+class UI::Alert < UI::Base
+  prop :icon, _Union?(String, Symbol), predicate: :private, reader: :private
+  prop :heading, String, reader: :private
+  prop :description, _String?, predicate: :private, reader: :private
+  prop :variant, _Union("neutral", "brand", "success", "warning", "danger", "info"),
+    default: :info, reader: :private do |value|
+    value.to_s.inquiry
+  end
+  prop :size, _Union("sm", "md"),
+    default: :md, reader: :private do |value|
+    value.to_s.inquiry
+  end
+  prop :dismissable, _Boolean, default: false, predicate: :private, reader: :private
+
+  def view_template
+    div(class: classes, data: data_with_defaults, role: alert_role) do
+      render Icon(name: icon, size:, class: "shrink-0 mt-1 #{icon_color_classes}") if icon?
+      div(class: "w-full") do
+        div(class: "flex items-center justify-between gap-2") do
+          h5(class: heading_classes) { heading }
+
+          if dismissable?
+            button aria_label: "Dismiss", data: {action: "dismissable#dismiss"} do
+              render UI::Icon.new(name: :x_mark, size:, class: "cursor-pointer #{icon_color_classes}")
+            end
+          end
+        end
+
+        p(class: description_classes) { description } if description?
+
+        if block_given?
+          div(class: description_classes) do
+            yield
+          end
+        end
+      end
+    end
+  end
+
+  private
+
+  def default_classes
+    "ui-alert ui-alert-#{variant} ui-alert-#{size}"
+  end
+
+  def icon_color_classes
+    class_names(
+      "text-turqoise-900": variant.brand?,
+      "text-emerald-800": variant.success?,
+      "text-amber-800": variant.warning?,
+      "text-red-800": variant.danger?,
+      "text-blue-800": variant.info?
+    )
+  end
+
+  def heading_classes
+    class_names(
+      "text-gray-950",
+      "ui-text-md": size.md?,
+      "ui-text-sm": size.sm?,
+      "font-medium": description?
+    )
+  end
+
+  def description_classes
+    class_names(
+      "text-gray-950",
+      "ui-text-md": size.md?,
+      "ui-text-sm": size.sm?
+    )
+  end
+
+  def data_with_defaults
+    data.with_defaults(
+      dismissable? ? {controller: "dismissable"} : {}
+    )
+  end
+
+  def alert_role
+    (variant.warning? || variant.danger?) ? :alert : :status
+  end
+end

data/app/views/ui/avatar.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+class UI::Avatar < UI::Base
+  include Phlex::Rails::Helpers::ImageTag
+
+  prop :initials, String, reader: :private
+  prop :image_url, _Nilable(String), reader: :private
+  prop :size, _Union("xs", "sm", "md", "lg", "xl", "xxl"), default: :md, reader: :private do |value|
+    value.to_s.inquiry
+  end
+
+  def view_template
+    span(class: classes) do
+      if image_url.present?
+        image_tag(image_url, class: "size-full rounded-full object-cover")
+      else
+        span(class: text_classes) { initials }
+      end
+    end
+  end
+
+  private
+
+  def classes
+    class_names(
+      super,
+      size_classes
+    )
+  end
+
+  def default_classes
+    "inline-flex size-6 items-center justify-center rounded-full bg-primary-100 border border-primary-700"
+  end
+
+  def size_classes
+    class_names(
+      "size-6": size.xs?,
+      "size-8": size.sm?,
+      "size-10": size.md?,
+      "size-12": size.lg?,
+      "size-14": size.xl?,
+      "size-16": size.xxl?
+    )
+  end
+
+  def text_classes
+    class_names(
+      "font-medium text-primary-900 uppercase",
+      "text-xs": size.xs?,
+      "text-sm": size.sm?,
+      "text-base": size.md?,
+      "text-xl": size.lg? || size.xl?,
+      "text-2xl": size.xxl?,
+      hidden: image_url.present?
+    )
+  end
+end

data/app/views/ui/badge.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+class UI::Badge < UI::Base
+  prop :text, String, reader: :private
+  prop :icon, _Nilable(Symbol), reader: :private
+  prop :variant, _Union("neutral", "brand", "danger"),
+    default: :neutral, reader: :private do |value|
+    value.to_s.inquiry
+  end
+  prop :size, _Union("sm", "md", "lg"),
+    default: :md, reader: :private do |value|
+    value.to_s.inquiry
+  end
+
+  def view_template
+    div class: classes, data: do
+      UI::Icon(name: icon, class: icon_classes, size: :sm) if icon.present?
+      span { text }
+    end
+  end
+
+  private
+
+  def default_classes
+    "ui-badge ui-badge-#{variant} ui-badge-#{size}"
+  end
+
+  def icon_classes
+    class_names(
+      "text-gray-700": variant.neutral?,
+      "text-primary-700": variant.brand?,
+      "text-red-400": variant.danger?
+    )
+  end
+end

data/app/views/ui/base.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+class UI::Base < Phlex::HTML
+  TAILWIND_MERGER = ::TailwindMerge::Merger.new.freeze unless defined?(TAILWIND_MERGER)
+
+  extend Literal::Properties
+  include Phlex::Rails::Helpers::Routes
+  include Phlex::Rails::Helpers::ClassNames
+  include Phlex::Rails::Helpers::LinkTo
+
+  if Rails.env.development?
+    def before_template
+      comment { "Before #{self.class.name}" }
+      super
+    end
+  end
+
+  prop :class, _Nilable(String)
+  prop :data, Hash, default: {}.freeze, reader: :private
+
+  private
+
+  def classes
+    TAILWIND_MERGER.merge [default_classes, @class].join(" ")
+  end
+
+  def default_classes
+  end
+end

data/app/views/ui/dropdown/item.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+class UI::Dropdown::Item < UI::Base
+  prop :href, String, reader: :private
+  prop :icon, _Nilable(Symbol), reader: :private
+  prop :trailing_icon, _Nilable(Symbol), reader: :private
+  prop :method, _Union(Symbol, String), default: :get, reader: :private
+
+  def view_template(&)
+    tag do
+      render Icon(name: icon, class: "text-gray-500") if icon?
+
+      div class: text_classes do
+        yield
+      end
+
+      render Icon(name: trailing_icon, class: "text-gray-500") if trailing_icon?
+    end
+  end
+
+  private
+
+  def tag(&)
+    if method == :get
+      a href:, class: classes, &
+    else
+      button_to href, method:, form_class: classes, class: "flex items-center gap-3 w-full", &
+    end
+  end
+
+  def icon?
+    icon.present?
+  end
+
+  def trailing_icon?
+    trailing_icon.present?
+  end
+
+  def text_classes
+    "ui-text-sm flex-1"
+  end
+
+  def default_classes
+    class_names(
+      "self-stretch flex justify-start items-center flex-1 px-4 py-2 gap-3",
+      "hover:bg-gray-100 focus:bg-gray-100 active:bg-gray-200"
+    )
+  end
+end

data/app/views/ui/dropdown.rb

@@ -0,0 +1,111 @@
+# frozen_string_literal: true
+
+class UI::Dropdown < UI::Base
+  prop :heading, _Nilable(String), reader: :private
+  prop :offset, Integer, default: 8, reader: :private
+  prop :placement,
+    _Union("top", "top-start", "top-end", "right", "right-start", "right-end", "bottom", "bottom-start", "bottom-end", "left", "left-start", "left-end"),
+    reader: :private, default: "bottom-end"
+
+  def initialize(**props)
+    super
+    @items = []
+    @trigger_block = nil
+    @action_block = nil
+  end
+
+  def item(href:, icon: nil, trailing_icon: nil, method: :get, &block)
+    @items << {href:, icon:, trailing_icon:, method:, block:}
+    nil
+  end
+
+  def action(&block)
+    @action_block = block if block_given?
+    nil
+  end
+
+  def trigger(class: nil, &block)
+    @trigger_block = block
+    @trigger_classes = grab(class:)
+    nil
+  end
+
+  def view_template(&block)
+    vanish(&block) if block_given?
+
+    div(data: {controller: "dropdown", dropdown_offset_value: offset, dropdown_placement_value: placement}, class: classes) do
+      render_trigger
+
+      div(
+        data: {
+          dropdown_target: "menu",
+          transition_enter_from: "opacity-0 scale-95",
+          transition_enter_to: "opacity-100 scale-100",
+          transition_leave_from: "opacity-100 scale-100",
+          transition_leave_to: "opacity-0 scale-95"
+        },
+        class:
+          "hidden transition transform origin-top-left absolute left-0 top-0 z-50"
+      ) do
+        div(class: "w-64 bg-white shadow-xs border border-gray-300
+        inline-flex flex-col justify-start items-start overflow-hidden") do
+          render_heading
+
+          div(class: "w-full flex flex-col justify-start items-start gap-1") do
+            @items.each do |item_data|
+              render Dropdown::Item.new(
+                **item_data.except(:block),
+                &item_data[:block]
+              )
+            end
+          end
+        end
+      end
+    end
+  end
+
+  private
+
+  def render_trigger
+    button(class: trigger_classes, data: {action: "dropdown#toggle click@window->dropdown#hide"}) do
+      @trigger_block.call
+    end
+  end
+
+  def render_heading
+    return unless heading.present? || action?
+
+    div(class: "w-full px-4 py-2 border-b border-gray-300 flex justify-between
+      items-center gap-4") do
+      if heading.present?
+        div(class: "ui-text-sm-medium") do
+          heading
+        end
+      end
+
+      render_action
+    end
+  end
+
+  def render_action
+    div(class: "ui-text-xs text-gray-700") do
+      @action_block&.call
+    end
+  end
+
+  def default_classes
+    "relative"
+  end
+
+  def trigger_classes
+    TAILWIND_MERGER.merge [default_trigger_classes, @trigger_classes].join(" ")
+  end
+
+  def default_trigger_classes
+    "focus:outline-none active:outline-none"
+  end
+
+  def action?
+    @action_block.present?
+  end
+end

data/app/views/ui/icon.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+class UI::Icon < UI::Base
+  register_output_helper :icon
+
+  prop :size, _Union("xs", "sm", "md", "lg", "xl", "xxl"), default: :md, reader: :private do |value|
+    value.to_s.inquiry
+  end
+  prop :variant, _Union("micro", "mini", "outline", "solid"), default: :outline, reader: :private do |value|
+    value.to_s.inquiry
+  end
+  prop :name, String, reader: :private do |value|
+    value.to_s.dasherize
+  end
+  prop :fixed_width, _Boolean, default: true, reader: :private
+  prop :spin, _Boolean, default: false, reader: :private
+
+  def view_template
+    icon(name, class: classes, variant:)
+  end
+
+  private
+
+  def size_classes
+    class_names(
+      "size-2": size.xs?,
+      "size-3": size.sm?,
+      "size-4": size.md?,
+      "size-6": size.lg?,
+      "size-8": size.xl?,
+      "size-10": size.xxl?
+    )
+  end
+
+  def spin_classes
+    "animate-spin" if spin
+  end
+
+  def default_classes
+    class_names(
+      "text-inherit",
+      size_classes,
+      spin_classes
+    )
+  end
+end

data/app/views/ui/modal.rb

@@ -0,0 +1,96 @@
+# frozen_string_literal: true
+
+class UI::Modal < UI::Base
+  prop :open, _Boolean, default: false, reader: :private
+  prop :heading, String, reader: :private
+  prop :text, _Nilable(String), reader: :private
+  prop :backdrop_closeable, _Boolean, default: true, reader: :private
+
+  def initialize(**props)
+    super
+    @trigger_block = nil
+    @footer_block = nil
+  end
+
+  def view_template(&block)
+    vanish(&block) if block_given?
+
+    div data: {controller: "modal", modal_open_value: open}.merge(backdrop_closeable_attributes) do
+      dialog(data: {modal_target: "dialog"}, class: classes) do
+        div(class: "ui-modal-body") do
+          div(class: "flex justify-between items-start") do
+            render_heading
+            render_close_trigger
+          end
+          render_text
+
+          yield
+        end
+
+        render_footer
+      end
+
+      render_trigger
+    end
+  end
+
+  def trigger(class: nil, &block)
+    @trigger_block = block
+    @trigger_classes = grab(class:)
+    nil
+  end
+
+  def footer(class: nil, &block)
+    @footer_block = block
+    @footer_classes = grab(class:)
+    nil
+  end
+
+  private
+
+  def render_close_trigger
+    button(data: {action: "modal#close"}, class: "cursor-pointer hover:text-gray-700") do
+      render UI::Icon.new(name: :x_mark)
+    end
+  end
+
+  def render_heading
+    h2(class: "ui-display-md") { heading }
+  end
+
+  def render_text
+    p(class: "ui-text-md") { text }
+  end
+
+  def render_footer
+    return if @footer_block.nil?
+
+    div(class: footer_classes) do
+      @footer_block.call
+    end
+  end
+
+  def render_trigger
+    button(class: @trigger_classes, data: {action: "modal#open"}) do
+      @trigger_block.call
+    end
+  end
+
+  def backdrop_closeable_attributes
+    return {action: "click->modal#backdropClose"} if backdrop_closeable?
+
+    {}
+  end
+
+  def backdrop_closeable?
+    backdrop_closeable
+  end
+
+  def default_classes
+    "ui-modal"
+  end
+
+  def footer_classes
+    TAILWIND_MERGER.merge ["ui-modal-footer", @footer_classes].join(" ")
+  end
+end

data/app/views/ui/toast.rb

@@ -0,0 +1,90 @@
+# frozen_string_literal: true
+
+class UI::Toast < UI::Base
+  AUTO_DISMISS_DELAY = 8000
+
+  prop :dismissable, _Boolean, default: true, reader: :private
+  prop :auto_dismiss, _Boolean, default: true, reader: :private
+  prop :variant, _Union("neutral", "danger"),
+    default: :neutral, reader: :private do |value|
+    value.to_s.inquiry
+  end
+
+  def initialize(**props)
+    super
+    @action = nil
+  end
+
+  def view_template
+    output(
+      data: {
+        controller: "dismissable",
+        dismissable_auto_dismiss_time_value: auto_dismiss_delay
+      },
+      class: classes
+    ) do
+      div class: "w-full min-h-8 py-1 px-2 inline-flex items-start justify-between gap-6" do
+        span(class: "mt-0.5") { yield }
+
+        span(class: "flex items-center gap-x-6") do
+          render_action
+
+          if dismissable?
+            button data: {action: "dismissable#dismiss"}, class: button_classes do
+              Icon(name: :x_mark, variant: :outline, class: "mt-px")
+            end
+          end
+        end
+      end
+    end
+  end
+
+  def action(href:, text:)
+    @action = {href:, text:}
+    nil
+  end
+
+  private
+
+  def render_action
+    return if @action.nil?
+
+    link_to @action[:text], @action[:href], class: action_classes
+  end
+
+  def dismissable?
+    dismissable
+  end
+
+  def auto_dismiss?
+    dismissable? && auto_dismiss
+  end
+
+  def auto_dismiss_delay
+    AUTO_DISMISS_DELAY if auto_dismiss?
+  end
+
+  def default_classes
+    class_names(
+      "min-w-96 max-w-lg block text-sm font-medium ring shadow-xl",
+      "bg-gray-50 text-gray-900 ring-gray-300": variant.neutral?,
+      "bg-red-500 text-white ring-red-700": variant.danger?
+    )
+  end
+
+  def button_classes
+    class_names(
+      "p-1 focus:outline-none",
+      "text-gray-900 hover:bg-gray-200 focus:bg-gray-200 active:bg-gray-300": variant.neutral?,
+      "text-white hover:bg-red-500 focus:bg-red-500 active:bg-red-400": variant.danger?
+    )
+  end
+
+  def action_classes
+    class_names(
+      "py-0.5 px-1 focus:outline-none border text-xs",
+      "border-gray-700 hover:border-gray-900 hover:bg-gray-200 focus:border-gray-900 focus:bg-gray-200 active:bg-gray-300": variant.neutral?,
+      "border-red-300 hover:bg-red-600 hover:border-red-100 focus:bg-red-600 focus:border-red-100 active:bg-red-700 active:border-red-100": variant.danger?
+    )
+  end
+end

data/lib/generators/quicksilver_ui/affordance/affordance_generator.rb

@@ -0,0 +1,102 @@
+# frozen_string_literal: true
+
+require "rails/generators"
+
+module QuicksilverUI
+  module Generators
+    class AffordanceGenerator < Rails::Generators::Base
+      namespace "quicksilver_ui:affordance"
+
+      source_root QuicksilverUI.stylesheets_path.to_s
+
+      def self.banner
+        "rails generate quicksilver_ui:affordance NAME [options]"
+      end
+
+      desc <<~DESC
+        Generate a QuicksilverUI affordance stylesheet into your application.
+
+        Available affordances:
+      DESC
+
+      def self.desc(description = nil)
+        return super if description
+
+        affordances = Dir.glob(File.join(QuicksilverUI.stylesheets_path, "*.css"))
+          .map { |f| File.basename(f, ".css") }
+          .sort
+          .map { |c| "  #{c}" }
+          .join("\n")
+
+        "#{super}\n#{affordances}"
+      end
+
+      argument :affordance_name, type: :string, required: true
+      class_option :force, type: :boolean, default: false
+
+      def generate_affordance
+        if affordance_not_found?
+          say "Affordance not found: #{affordance_name}", :red
+          say ""
+          say "Available affordances:", :green
+          available_affordances.each { |a| say "  - #{a}" }
+          exit 1
+        end
+
+        say "Generating #{affordance_name} affordance..."
+      end
+
+      def copy_stylesheet
+        source = File.join(QuicksilverUI.stylesheets_path, "#{file_name}.css")
+        copy_file source, Rails.root.join("app/assets/tailwind", "#{file_name}.css"), force: options["force"]
+        add_css_import(file_name)
+      end
+
+      def done
+        say ""
+        say "#{affordance_name} affordance generated!", :green
+      end
+
+      private
+
+      def file_name
+        affordance_name.underscore
+      end
+
+      def affordance_not_found?
+        !File.exist?(File.join(QuicksilverUI.stylesheets_path, "#{file_name}.css"))
+      end
+
+      def available_affordances
+        Dir.glob(File.join(QuicksilverUI.stylesheets_path, "*.css"))
+          .map { |f| File.basename(f, ".css") }
+          .sort
+      end
+
+      def add_css_import(name)
+        app_css = Rails.root.join("app/assets/tailwind/application.css")
+        import_line = "@import \"./#{name}.css\" layer(affordances);"
+
+        if File.exist?(app_css)
+          content = File.read(app_css)
+          return if content.include?(import_line)
+
+          lines = content.lines
+          last_import_index = lines.rindex { |l| l.start_with?("@import") }
+
+          if last_import_index
+            lines.insert(last_import_index + 1, "#{import_line}\n")
+          else
+            lines.unshift("#{import_line}\n")
+          end
+
+          File.write(app_css, lines.join)
+        else
+          create_file app_css, "#{import_line}\n"
+        end
+
+        say "  Added import for #{name}.css to application.css", :green
+      end
+    end
+  end
+end