lycan_ui 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: fa1792973d0fd046ee21833d5608a50aede8f258be1673ab775b8c19f76212d6
+  data.tar.gz: 6fb5d6c3b5427198226653455564c74ef2f3f292680d1f85943d13ab34b93d2c
+SHA512:
+  metadata.gz: 2afc70394bd910943a561bde1f909080748c57d7fca4fe9b83a9851aedebcab1dd319ef16469109e83b6f5c5185d72148761b0818cd7b38b31c482faeca8bb62
+  data.tar.gz: cede02b1b57b0f5055b878dd0e66c660a87b969f5810ada54db4ea283313bbbd1ac3a7c31e33d2f4020509b30665da1b5e65d9bca62e91005b012b071d6e0741

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright Ethan Kircher
+
+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,33 @@
+# LycanUi
+
+Accessible, open source, and customizable ui components for your Rails app.
+
+## Installation
+
+Add the gem to the `development` group in your `Gemfile`,
+
+```ruby
+group :development do
+  gem 'lycan_ui', github: 'MSILycanthropy/lycan_ui', require: false
+end
+```
+
+Run `bundle install` and then run the setup script with,
+
+```
+rails generate lycan_ui:setup
+```
+
+Follow the prompts in your terminal and then.. you're done!
+
+## Documentation
+
+Visit http://ui.lycanthropy.dev to view documentation.
+
+## Contributing
+
+Please read the [contributing guide](/CONTRIBUTING.md).
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+require "bundler/setup"
+
+require "bundler/gem_tasks"

data/lib/generators/lycan_ui/add_generator.rb

@@ -0,0 +1,109 @@
+# frozen_string_literal: true
+
+require "lycan_ui/configuration"
+
+module LycanUi
+  module Generators
+    class AddGenerator < Rails::Generators::NamedBase
+      source_root File.expand_path("templates", __dir__)
+
+      REQUIRES_FLOATING = [ "dropdown", "popover" ].freeze
+      REQUIRES_FOCUS_TRAP = [ "popover" ].freeze
+
+      alias_method :component, :file_name
+
+      def load_configuration
+        Configuration.setup
+      end
+
+      def install_form
+        return unless component == "form"
+
+        copy_file("extras/form_builder.rb", "app/helpers/lycan_ui/form_helper.rb")
+
+        [ "label", "input", "textarea", "checkbox", "button", "radio", "switch" ].each do |comp|
+          puts "Installing #{comp.titleize}..."
+          %x(rails g lycan_ui:add #{comp} --force)
+        end
+
+        exit
+      end
+
+      def copy_views
+        copy_file("components/#{component}.rb", "app/components/lycan_ui/#{component}.rb")
+      end
+
+      def copy_js
+        if file_exists?("javascript/#{component}_controller.js")
+          copy_file(
+            "javascript/#{component}_controller.js",
+            "#{Configuration.javascript_dir}/#{component}_controller.js",
+          )
+        end
+
+        if dir_exists?("javascript/#{component}")
+          directory("javascript/#{component}", "#{Configuration.javascript_dir}/#{component}")
+        end
+
+        unless importmaps?
+          content = <<~JS
+
+            import #{component.titleize}Controller from "./#{component}_controller"
+            application.register("#{component}", #{component.titleize}Controller)
+          JS
+          append_to_file("#{Configuration.javascript_dir}/index.js", content)
+        end
+      end
+
+      def install_focus_trap
+        return unless focus_trapping?
+
+        js_command = if importmaps?
+          "bin/importmap pin focus-trap"
+        else
+          "yarn add focus-trap"
+        end
+
+        run(js_command)
+      end
+
+      def install_floating
+        return unless floating?
+
+        js_command = if importmaps?
+          "bin/importmap pin @floating-ui/dom"
+        else
+          "yarn add @floating-ui/dom"
+        end
+
+        run(js_command)
+      end
+
+      private
+
+      def focus_trapping?
+        REQUIRES_FOCUS_TRAP.include?(component)
+      end
+
+      def floating?
+        REQUIRES_FLOATING.include?(component)
+      end
+
+      def dir_exists?(name)
+        root = source_paths.first
+
+        Dir.exist?("#{root}/#{name}")
+      end
+
+      def file_exists?(name)
+        root = source_paths.first
+
+        File.exist?("#{root}/#{name}")
+      end
+
+      def importmaps?
+        File.exist?("#{Rails.root}/config/importmap.rb")
+      end
+    end
+  end
+end

data/lib/generators/lycan_ui/setup_generator.rb

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+require "tty-prompt"
+require "lycan_ui/configuration"
+
+
+module LycanUi
+  module Generators
+    class SetupGenerator < Rails::Generators::Base
+      source_root File.expand_path("templates", __dir__)
+
+      def load_configuration
+        Configuration.setup
+      end
+
+      def install_lucide_rails
+        return if lucide_rails_installed?
+
+        run("bundle add lucide-rails")
+      end
+
+      def install_tailwind_merge
+        return unless tailwind?
+        return if tailwind_merge_installed?
+
+        run("bundle add tailwind_merge")
+      end
+
+      def install_tailwind_config
+        return unless tailwind?
+
+        template("setup/application.tailwind.css", Configuration.stylesheet, force: true)
+      end
+
+      def copy_helpers
+        copy_file("setup/lycan_ui_helper.rb", "app/helpers/lycan_ui_helper.rb")
+      end
+
+      # TODO: add `all`
+      def install_components
+        copy_file("components/component.rb", "app/components/lycan_ui/component.rb")
+
+        prompt = TTY::Prompt.new
+        path = source_paths.first + "/components"
+        choices = Dir.glob("#{path}/*.rb").map do |c|
+          c.sub(path, "").sub(".rb", "").gsub("_", " ").slice(1..).strip
+        end.reject { |c| c == "component" }.push("form").sort.index_by { |comp| comp.titleize }
+
+        selected = prompt.multi_select("Select your options:", choices, filter: true)
+
+        selected.each do |component|
+          puts "Installing #{component.titleize}..."
+          %x(rails g lycan_ui:add #{component} --force)
+        end
+      end
+
+      private
+
+      def lucide_rails_installed?
+        Gem.loaded_specs.key?("lucide-rails")
+      end
+
+      def tailwind_merge_installed?
+        Gem.loaded_specs.key?("tailwind_merge")
+      end
+
+      def tailwind?
+        true
+      end
+
+      def importmaps?
+        File.exist?("#{Rails.root}/config/importmap.rb")
+      end
+    end
+  end
+end

data/lib/generators/lycan_ui/templates/components/accordion.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module LycanUi
+  class Accordion < Component
+    attr_reader :name, :multiple
+
+    def initialize(multiple: false, **attributes)
+      @multiple = multiple
+
+      action = <<~ACTION.squish
+        keydown.up->accordion#focusPrevious:prevent keydown.down->accordion#focusNext:prevent
+        keydown.home->accordion#focusFirst:prevent keydown.end->accordion#focusLast:prevent
+      ACTION
+
+      super(attributes, data: { controller: "accordion", action: })
+    end
+
+    def template(&)
+      @name = lycan_ui_id unless multiple
+
+      tag.div(**attributes) { yield self }
+    end
+
+    ITEM_CLASSES = <<~CLASSES.squish
+      border-b border-surface interpolate-keywords details:h-0 details-open:h-auto
+      details:overflow-hidden details:text-sm details:motion-safe:transition-all
+      details:duration-200 details:ease-out details:transition-discrete
+      disabled:opacity-50 disabled:pointer-events-none
+      open:[&>summary>svg]:rotate-180
+    CLASSES
+
+    def item(open: false, **item_attributes, &)
+      final_attributes = merge_attributes(item_attributes, open:, class: ITEM_CLASSES, name:)
+
+      tag.details(**final_attributes, &)
+    end
+
+    TRIGGER_CLASSES = <<~CLASSES.squish
+      cursor-pointer flex flex-1 items-center justify-between py-4 font-medium
+      transition-all underline-offset-4 hover:underline decoration-accent
+    CLASSES
+    def trigger(content = nil, icon: "chevron-down", **trigger_attributes, &block)
+      final_attributes = merge_attributes(
+        trigger_attributes,
+        class: TRIGGER_CLASSES,
+        data: { accordion_target: "item" },
+      )
+
+      tag.summary(**final_attributes) do
+        safe_join([
+          determine_content(content, &block),
+          icon.present? ? lucide_icon(icon, class: "size-4 shrink-0 transition-transform duration-200") : nil,
+        ].compact)
+      end
+    end
+
+    def content(**content_attributes, &)
+      final_attributes = merge_attributes(content_attributes, class: "pb-4")
+
+      tag.div(**final_attributes, &)
+    end
+  end
+end

data/lib/generators/lycan_ui/templates/components/alert.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module LycanUi
+  class Alert < Component
+    DEFAULT_CLASSES = <<~CLASSES.squish
+      relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px]
+      [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-3.5
+    CLASSES
+
+    VARIANT_CLASSES = {
+      primary: "border-on-surface",
+      danger: "border-danger bg-danger-500 text-on-danger [&>svg]:text-on-danger",
+    }.freeze
+
+    def initialize(variant: :primary, **attributes)
+      super(attributes, role: "alert", class: [ DEFAULT_CLASSES, VARIANT_CLASSES[variant] ])
+    end
+
+    def template(&)
+      tag.div(**attributes) { yield self }
+    end
+
+    def title(content = nil, **title_attributes, &block)
+      final_attributes = merge_attributes(title_attributes, class: "mb-1 font-medium leading-none tracking-tight")
+
+      tag.div(**final_attributes) { determine_content(content, &block) }
+    end
+
+    def description(content = nil, **description_attributes, &block)
+      final_attributes = merge_attributes(description_attributes, class: "text-sm [&_p]:leading-relaxed")
+
+      tag.div(**final_attributes) { determine_content(content, &block) }
+    end
+  end
+end

data/lib/generators/lycan_ui/templates/components/avatar.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module LycanUi
+  class Avatar < Component
+    attr_reader :args, :fallback
+
+    FALLBACK_CLASSES = <<~CLASSES.squish
+      relative flex items-center justify-center h-10 w-10 shrink-0 overflow-hidden
+      rounded-full bg-secondary-400 shadow-lg
+    CLASSES
+
+    def initialize(*args, fallback: nil, **attributes)
+      @args = args
+      @fallback = fallback
+
+      if fallback.present?
+        super(attributes, class: FALLBACK_CLASSES, data: { controller: "avatar" })
+      else
+        super(attributes, class: "rounded-full h-10 w-10 object-cover")
+      end
+    end
+
+    def template
+      if fallback.present?
+        tag.div(**attributes) do
+          concat(tag.div(fallback, class: "text-on-secondary font-medium", data: { avatar_target: "fallback" }))
+          concat(image_tag(
+            *args,
+            class: "absolute w-full h-full object-cover shadow-lg",
+            data: { action: "error->avatar#showFallback load->avatar#hideFallback", avatar_target: "image" },
+          ))
+        end
+      else
+        image_tag(*args, **attributes)
+      end
+    end
+  end
+end

data/lib/generators/lycan_ui/templates/components/badge.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module LycanUi
+  class Badge < Component
+    attr_reader :content
+
+    DEFAULT_CLASSES = <<~CLASSES.squish
+      inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors
+      focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
+    CLASSES
+
+    VARIANT_CLASSES = {
+      primary: "border-transparent bg-primary text-on-primary hover:bg-primary/80",
+      secondary: "border-transparent bg-secondary text-on-secondary hover:bg-secondary/80",
+      outline: "border-primary",
+      danger: "border-transparent bg-danger text-on-danger hover:bg-danger/80",
+    }.freeze
+
+    def initialize(content = nil, variant: :primary, **attributes)
+      @content = content
+
+      super(attributes, class: [ DEFAULT_CLASSES, VARIANT_CLASSES[variant] ])
+    end
+
+    def template(&block)
+      tag.div(**attributes) { determine_content(content, &block) }
+    end
+  end
+end

data/lib/generators/lycan_ui/templates/components/button.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module LycanUi
+  class Button < Component
+    attr_accessor :content, :as_child
+
+    DEFAULT_CLASSES = <<~CLASSES.squish
+      cursor-pointer inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium
+      transition-colors disabled:pointer-events-none disabled:opacity-50 ring-offset-background
+      focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2
+    CLASSES
+
+    SIZE_CLASSES = {
+      extra_small: "h-6 px-1 text-xs",
+      small: "h-7 px-2 text-sm",
+      medium: "h-10 px-4 text-base",
+      large: "h-11 px-5 text-lg",
+    }.freeze
+
+    VARIANT_CLASSES = {
+      primary:
+        "bg-primary text-on-primary hover:bg-primary/80 focus-visible:ring-primary",
+      secondary:
+        "bg-secondary text-on-secondary hover:bg-secondary/80 focus-visible:ring-secondary",
+      danger:
+        "bg-danger text-on-danger hover:bg-danger/80 focus-visible:ring-danger",
+      outline:
+        "border border-primary hover:bg-primary hover:text-on-primary focus-visible:ring-primary",
+      ghost:
+        "hover:bg-secondary/30 hover:text-on-secondary focus-visible:ring-secondary/30",
+      link:
+        "underline-offset-4 decoration-accent hover:underline focus-visible:ring-accent",
+      none: nil,
+    }.freeze
+
+    def initialize(content = nil, size: :medium, variant: :primary, as_child: false, **attributes)
+      @content = content
+      @as_child = as_child
+
+      super(attributes, type: :button, class: [ DEFAULT_CLASSES, VARIANT_CLASSES[variant], SIZE_CLASSES[size] ])
+    end
+
+    def template(&block)
+      return yield attributes.except(:type) if as_child
+
+      tag.button(**attributes) { determine_content(content, &block) }
+    end
+  end
+end

data/lib/generators/lycan_ui/templates/components/checkbox.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module LycanUi
+  class Checkbox < Component
+    attr_reader :object_name, :method, :checked_value, :unchecked_value
+
+    DEFAULT_CLASSES = <<~CLASSES.squish
+      appearance-none size-4 border border-accent rounded  motion-safe:transition-all
+      ease-[ease] relative cursor-pointer
+      after:top-[45%] after:left-1/2 after:w-1.5 after:h-2.5 after:opacity-0
+      checked:bg-accent checked:border-transparent checked:scale-110 after:absolute
+      after:border-r-2 after:border-b-2 after:border-surface-50 dark:after:border-surface-950
+      after:-translate-x-1/2 after:-translate-y-1/2 after:rotate-45 after:scale-0
+      after:transition-transform checked:after:scale-100 checked:after:opacity-100
+      disabled:opacity-65 disabled:cursor-not-allowed
+    CLASSES
+
+    def initialize(object_name, method, options = {}, checked_value = "1", unchecked_value = "0")
+      @object_name = object_name
+      @method = method
+      @checked_value = checked_value
+      @unchecked_value = unchecked_value
+
+      super(options, class: DEFAULT_CLASSES)
+    end
+
+    def template
+      checkbox(object_name, method, attributes, checked_value, unchecked_value)
+    end
+  end
+end

data/lib/generators/lycan_ui/templates/components/collapsible.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module LycanUi
+  class Collapsible < Component
+    def initialize(**attributes)
+      super(attributes, data: { controller: "collapsible" })
+    end
+
+    def template(&)
+      @id = lycan_ui_id
+
+      tag.div(**attributes) { yield self }
+    end
+
+    def trigger(content = nil, **trigger_attributes, &)
+      final_attributes = merge_attributes(
+        trigger_attributes,
+        aria: { controls: @id, expanded: false },
+        data: { collapsible_target: "trigger", action: "collapsible#toggle" },
+      )
+
+      ui.button(content, **final_attributes, &)
+    end
+
+    CONTENT_CLASSES = <<~CLASSES
+      overflow-hidden interpolate-keywords transition-discrete starting:h-0 hidden:h-0 h-auto motion-safe:transition-all duration-300
+    CLASSES
+    def content(**content_attributes, &)
+      final_attributes = merge_attributes(
+        content_attributes,
+        id: @id,
+        class: CONTENT_CLASSES,
+        hidden: true,
+        data: { collapsible_target: "content" },
+      )
+
+      tag.div(**final_attributes, &)
+    end
+  end
+end

data/lib/generators/lycan_ui/templates/components/component.rb

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+module LycanUi
+  class Component
+    attr_accessor :attributes
+    delegate_missing_to :@view_context
+
+    def initialize(attributes = {}, **default_attributes)
+      @attributes = merge_attributes(attributes, **default_attributes)
+    end
+
+    def render_in(view_context, &)
+      @view_context = view_context
+
+      template(&)
+    ensure
+      @view_context = nil
+    end
+
+    def template
+      raise NotImplementedError
+    end
+
+    private
+
+    def merge_attributes(*incoming, **default)
+      default.merge(*incoming) do |key, default_value, incoming_value|
+        case key
+        when :class
+          merge_classes(default_value, incoming_value)
+        when :data
+          merge_data(default_value, incoming_value)
+        when :aria
+          merge_aria(default_value, incoming_value)
+        else
+          incoming_value
+        end
+      end
+    end
+
+    def merge_classes(*classes)
+      @@merger ||= TailwindMerge::Merger.new
+      @@merger.merge(classes)
+    end
+
+    def merge_data(*hashes)
+      hashes.compact.each_with_object({}) do |hash, result|
+        result.deep_merge(hash) do |key, old_value, new_value|
+          case key
+          when :action, :controller
+            [ old_value, new_value ].compact.join(" ")
+          else
+            new_value
+          end
+        end
+      end
+    end
+
+    def merge_aria(*hashes)
+      hashes.compact.each_with_object({}) do |hash, result|
+        result.deep_merge(hash)
+      end
+    end
+
+    def determine_content(text = nil, &)
+      return text if text.present?
+      return unless block_given?
+
+      @view_context.capture(&)
+    end
+  end
+end