nitro_kit 0.2.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cf2f2dc76bda92752d48ee5f90a51987dedc72d5a40e04567016abc906606092
-  data.tar.gz: fa123bb3e2185331ec19cf7c79fb56e977b7a0daf301c6cdc7537be23ddc4d06
+  metadata.gz: 6d58e573f0c99860c6ede6591c772db3d2399c754a1cb2c25b65632c42ca8a00
+  data.tar.gz: 4796fae213b057ed86d3bcc693c504c7323abe020bcfa920713ea7d9a2e4438a
 SHA512:
-  metadata.gz: 80004192401f6199f2dbe0aad196707028248584084615c4f7f85f5bf567e674eaa7ecdf9e487deb3886ba3b2899d1dc9153697b79b91aa6209c66350b0ff900
-  data.tar.gz: fb0b55d92309a50f46a2f8c93641c57eedafc4c817434e812ff46259e2e98d3b66869b4a321e499f02b7e818bd97e88e8c98ba7c65a19c98a1e35254eaa0d8e3
+  metadata.gz: 2865c2a1a86d6cf786eff5a699ce98aabea646c44349ecb387369ee7ba3aaab1b928f28ea1fded788bc95ffeb06926aac017a4fe292e70bbc0e1ecfa7d0dc30f
+  data.tar.gz: 2f8f3fc20b0be34cc8fc07f01fba9ace962dad39926332a50bf65bec062b7d96398bdc790b708fb6c027f2193b542641c5127fd6920f417d359a448a82bff782

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright Mikkel Malmberg
+
+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/Rakefile

@@ -1,6 +1,8 @@
-# Add your own tasks in files placed in lib/tasks ending in .rake,
-# for example lib/tasks/capistrano.rake, and they will automatically be available to Rake.
+require "bundler/setup"
 
-require_relative "config/application"
+APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
+load "rails/tasks/engine.rake"
 
-Rails.application.load_tasks
+load "rails/tasks/statistics.rake"
+
+require "bundler/gem_tasks"

data/app/components/nitro_kit/accordion.rb

@@ -1,27 +1,17 @@
+# frozen_string_literal: true
+
 module NitroKit
   class Accordion < Component
-    ITEM = "divide-y"
-
-    TRIGGER = [
-      "flex w-full items-center justify-between py-4 font-medium cursor-pointer",
-      "group/accordion-trigger hover:underline transition-colors",
-      "[&[aria-expanded='true']>svg]:rotate-180",
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-    ].freeze
-
-    CONTENT = [
-      "overflow-hidden transition-all duration-200",
-      "[&[aria-hidden='true']]:h-0 [&[aria-hidden='false']]:h-auto"
-    ].freeze
-
-    ARROW = "transition-transform duration-200 text-muted-foreground group-hover/accordion-trigger:text-primary"
+    def initialize(**attrs)
+      super(
+        attrs,
+        class: item_class,
+        data: {controller: "nk--accordion"}
+      )
+    end
 
     def view_template
-      div(
-        **attrs,
-        class: merge(ITEM, attrs[:class]),
-        data: {controller: "nk--accordion"}
-      ) do
+      div(**attrs) do
         yield
       end
     end
@@ -34,27 +24,73 @@ module NitroKit
 
     def trigger(text = nil, **attrs)
       button(
-        type: "button",
-        class: TRIGGER,
-        data: {
-          :action => "nk--accordion#toggle",
-          :"nk--accordion-target" => "trigger"
-        },
-        aria: {expanded: "false", controls: "content"}
+        **mattr(
+          attrs,
+          type: "button",
+          class: trigger_class,
+          data: {
+            action: "nk--accordion#toggle",
+            nk__accordion_target: "trigger"
+          },
+          aria: {expanded: "false"}
+        )
       ) do
-        div(**attrs) { text || yield }
-        render(NitroKit::Icon.new(name: "chevron-down", class: ARROW))
+        block_given? ? yield : plain(text)
+        chevron_icon
       end
     end
 
     def content(**attrs)
       div(
-        class: merge(CONTENT),
-        data: {:"nk--accordion-target" => "content"},
-        aria: {hidden: "true"}
+        **mattr(
+          attrs,
+          class: content_class,
+          data: {
+            nk__accordion_target: "content"
+          },
+          aria: {hidden: "true"}
+        )
       ) do
         div(class: "pb-4") { yield }
       end
     end
+
+    private
+
+    def item_class
+      "divide-y"
+    end
+
+    def trigger_class
+      [
+        "flex w-full items-center justify-between py-4 font-medium cursor-pointer",
+        "group/accordion-trigger hover:underline transition-colors",
+        "[&[aria-expanded='true']>svg]:rotate-180",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+      ]
+    end
+
+    def content_class
+      [
+        "overflow-hidden transition-all duration-200",
+        "[&[aria-hidden='true']]:h-0 [&[aria-hidden='false']]:h-auto"
+      ]
+    end
+
+    def arrow_class
+      "transition-transform duration-200 text-muted-foreground group-hover/accordion-trigger:text-primary"
+    end
+
+    def chevron_icon
+      svg(
+        class: "transition-transform duration-200 size-4 self-center place-self-end mr-2 pointer-events-none text-muted-foreground group-hover/accordion-trigger:text-primary",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        stroke_width: 1
+      ) do |svg|
+        svg.path(d: "m6 9 6 6 6-6")
+      end
+    end
   end
 end

data/app/components/nitro_kit/alert.rb

@@ -0,0 +1,69 @@
+# frozen_string_literal: true
+
+module NitroKit
+  class Alert < Component
+    VARIANTS = %i[default warning error success]
+
+    def initialize(variant: :default, **attrs)
+      @variant = variant
+
+      super(
+        attrs,
+        role: "alert",
+        class: [base_class, variant_class]
+      )
+    end
+
+    attr_reader :variant
+
+    def view_template
+      div(**attrs) do
+        yield
+      end
+    end
+
+    def title(text = nil, **attrs, &block)
+      h5(**mattr(attrs, class: title_class)) do
+        text_or_block(text, &block)
+      end
+    end
+
+    def description(text = nil, **attrs, &block)
+      div(**mattr(attrs, class: description_class)) do
+        text_or_block(text, &block)
+      end
+    end
+
+    private
+
+    def base_class
+      [
+        "relative border w-full rounded-md p-5 text-sm space-y-2",
+        "[&>svg~*]:pl-8 [&>svg]:absolute [&>svg]:top-5 [&>svg]:left-5"
+      ]
+    end
+
+    def variant_class
+      case variant
+      when :default
+        "border-border bg-background text-foreground"
+      when :warning
+        "bg-yellow-300/20 dark:bg-yellow-300/20 text-yellow-900 dark:text-yellow-100 border-yellow-500/80 dark:border-yellow-400/50"
+      when :success
+        "bg-green-300/20 dark:bg-green-300/20 text-green-900 dark:text-green-100 border-green-500/80 dark:border-green-400/50"
+      when :error
+        "bg-red-300/20 dark:bg-red-300/20 text-red-900 dark:text-red-100 border-red-400/80 dark:border-red-400/50"
+      else
+        raise ArgumentError, "Invalid variant: #{variant}"
+      end
+    end
+
+    def title_class
+      "font-medium text-lg leading-5"
+    end
+
+    def description_class
+      ""
+    end
+  end
+end

data/app/components/nitro_kit/avatar.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module NitroKit
+  class Avatar < Component
+    include ActionView::Helpers::AssetUrlHelper
+
+    def initialize(src_arg = nil, src: nil, size: :md, **attrs)
+      @src = src_arg || src
+      @size = size
+
+      super(
+        attrs,
+        class: [container_class, size_classes]
+      )
+    end
+
+    attr_reader :src, :size
+
+    def view_template(&block)
+      div(**attrs) do
+        image
+      end
+    end
+
+    def image
+      helpers.image_tag(src, class: image_class)
+    end
+
+    private
+
+    def size_classes
+      case size
+      when :sm
+        "size-8"
+      when :md
+        "size-12"
+      when :lg
+        "size-16"
+      else
+        raise ArgumentError, "Invalid size: #{size}"
+      end
+    end
+
+    def container_class
+      "inline-flex overflow-hidden rounded-full"
+    end
+
+    def image_class
+      "block size-full bg-muted"
+    end
+  end
+end

data/app/components/nitro_kit/badge.rb

@@ -1,31 +1,58 @@
+# frozen_string_literal: true
+
 module NitroKit
   class Badge < Component
-    BADGE = "inline-flex items-center gap-x-1.5 rounded-md font-medium"
+    VARIANTS = %i[default outline]
 
-    VARIANTS = {
-      default: "border border-transparent bg-zinc-200 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300",
-      outline: "border"
-    }
+    def initialize(text = nil, variant: :default, size: :md, **attrs)
+      @text = text
+      @variant = variant
+      @size = size
 
-    SIZES = {
-      sm: "text-xs px-1.5 py-0.5",
-      md: "text-sm px-2 py-0.5"
-    }
+      super(
+        attrs,
+        class: [
+          base_class,
+          variant_class,
+          size_class
+        ]
+      )
+    end
 
-    def initialize(variant: :default, size: :md, **attrs)
-      super(**attrs)
+    attr_reader :text, :variant, :size
 
-      @variant = variant
-      @size = size
+    def view_template(&block)
+      span(**attrs) do
+        text_or_block(text, &block)
+      end
     end
 
-    attr_reader :variant, :size
+    private
+
+    def base_class
+      "inline-flex items-center gap-x-1.5 rounded-md font-medium"
+    end
+
+    def variant_class
+      case variant
+      when :default
+        "bg-zinc-200 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300"
+      when :outline
+        "border"
+      else
+        raise ArgumentError, "Invalid variant: #{variant}"
+      end
+    end
 
-    def view_template
-      span(
-        **attrs,
-        class: merge(BADGE, VARIANTS[variant], SIZES[size], attrs[:class])
-      ) { yield }
+    def size_class
+      case size
+      when :sm
+        "text-xs px-1.5 py-0.5"
+      when :md
+        "text-sm px-2 py-0.5"
+      else
+        raise ArgumentError, "Invalid size: #{size}"
+      end
     end
   end
 end

data/app/components/nitro_kit/button.rb

@@ -1,88 +1,51 @@
+# frozen_string_literal: true
+
 module NitroKit
   class Button < Component
-    BASE = [
-      "inline-flex items-center cursor-pointer shrink-0 justify-center rounded-md border gap-2 font-medium",
-      # Disabled
-      "disabled:opacity-70 disabled:pointer-events-none",
-      # Focus
-      "focus:outline-none focus:ring-[3px] focus:ring-offset-2 focus:ring-ring ring-offset-background",
-      # Icon
-      "[&_svg]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-      # If icon only, make square
-      "[&_svg:first-child:last-child]:-mx-2"
-    ].freeze
-
-    VARIANTS = {
-      default: [
-        "bg-background text-foreground",
-        "hover:bg-zinc-50 dark:hover:bg-zinc-900"
-      ],
-      primary: [
-        "bg-primary text-white dark:text-zinc-950 border-primary",
-        "hover:bg-primary/90 dark:hover:bg-primary/90"
-      ],
-      destructive: [
-        "bg-destructive text-white border-destructive",
-        "hover:bg-destructive/90 dark:hover:bg-destructive/90",
-        "disabled:text-white/80"
-      ],
-      ghost: [
-        "bg-transparent text-foreground border-transparent",
-        "hover:bg-zinc-100 dark:hover:bg-zinc-900",
-        "disabled:text-muted-foreground"
-      ]
-    }.freeze
-
-    SIZES = {
-      base: "px-4 h-9",
-      sm: "px-2.5 h-7 text-sm",
-      xs: "px-1.5 h-6 text-xs"
-    }.freeze
+    VARIANTS = %i[default primary destructive ghost]
 
     def initialize(
+      text = nil,
       href: nil,
+      variant: :default,
+      size: :md,
       icon: nil,
       icon_right: nil,
-      size: :base,
-      type: :button,
-      variant: :default,
       **attrs
     )
-      super(**attrs)
-
+      @text = text
       @href = href
       @icon = icon
       @icon_right = icon_right
       @size = size
-      @type = type
       @variant = variant
+
+      super(
+        attrs,
+        class: [
+          base_class,
+          variant_class,
+          size_class
+        ]
+      )
     end
 
     attr_reader(
+      :text,
       :href,
       :icon,
       :icon_right,
       :size,
-      :type,
       :variant
     )
 
     def view_template(&block)
-      class_list = merge(
-        [
-          BASE,
-          VARIANTS[variant],
-          SIZES[size],
-          attrs[:class]
-        ]
-      )
-
       if href
-        a(href:, **attrs, class: class_list) do
+        a(href:, **attrs) do
           contents(&block)
         end
       else
-        button(type:, **attrs, class: class_list) do
+        button(type: :button, **attrs) do
           contents(&block)
         end
       end
@@ -90,19 +53,89 @@ module NitroKit
 
     private
 
-    def contents
-      text = safe(capture { yield })
-      has_text = text.to_s.present?
+    def contents(&block)
+      has_content = text.present? || block_given?
 
-      if !icon && has_text && !icon_right
-        return text
-      elsif icon && !has_text && !icon_right
-        return render(Icon.new(name: icon))
+      if !has_content
+        return render(Icon.new(icon))
       end
 
-      render(Icon.new(name: icon)) if icon
-      span { text }
-      render(Icon.new(name: icon_right)) if icon_right
+      render(Icon.new(icon)) if icon
+
+      if block_given?
+        yield
+      else
+        span { plain(text) }
+      end
+
+      render(Icon.new(icon_right)) if icon_right
+    end
+
+    def base_class
+      [
+        "inline-flex items-center cursor-pointer shrink-0 justify-center rounded-md border gap-2 font-medium select-none",
+        # Disabled
+        "disabled:opacity-70 disabled:pointer-events-none",
+        # Focus
+        "focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-offset-2 focus-visible:ring-ring ring-offset-background",
+        # Icon
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0"
+      ]
+    end
+
+    def variant_class
+      case variant
+      when :default
+        [
+          "bg-background text-foreground border-border",
+          "hover:bg-zinc-50 dark:hover:bg-zinc-900"
+        ]
+      when :primary
+        [
+          "bg-primary text-white dark:text-zinc-950 border-primary",
+          "hover:bg-primary/90 dark:hover:bg-primary/90"
+        ]
+      when :destructive
+        [
+          "bg-destructive text-white border-destructive",
+          "hover:bg-destructive/90 dark:hover:bg-destructive/90",
+          "disabled:text-white/80"
+        ]
+      when :ghost
+        [
+          "bg-transparent text-foreground border-transparent",
+          "hover:bg-zinc-200/50 dark:hover:bg-zinc-900",
+          "disabled:text-muted-foreground"
+        ]
+      else
+        raise ArgumentError, "Unknown variant `#{variant}'"
+      end
+    end
+
+    def size_class
+      case size
+      when :xs
+        "px-1.5 h-6 text-xs [&_svg]:size-3"
+      when :sm
+        [
+          "px-2.5 h-7 text-sm [&_svg]:size-3",
+          "[&_svg:first-child:last-child]:-mx-1"
+        ]
+      when :md
+        [
+          "px-4 h-10 text-base [&_svg]:size-4",
+          # If icon only, make square
+          "[&_svg:first-child:last-child]:-mx-2"
+        ]
+      when :lg
+        [
+          "px-5 h-11 text-lg [&_svg]:size-5",
+          # If icon only, make square
+          "[&_svg:first-child:last-child]:-mx-2"
+        ]
+      else
+        raise ArgumentError, "Unknown size `#{size}'"
+      end
     end
   end
 end

data/app/components/nitro_kit/button_group.rb

@@ -1,19 +1,24 @@
+# frozen_string_literal: true
+
 module NitroKit
   class ButtonGroup < Component
-    def view_template(&block)
-      div(
-        class: merge(
-          [
-            "flex -space-x-px isolate",
-            # Remove rounded corners from middle buttons
-            "[&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:first-child:not(:last-child)]:rounded-r-none [&>*:last-child:not(:first-child)]:rounded-l-none",
-            # Put focused button on top
-            "[&>*]:focus:z-10",
-            attrs[:class]
-          ]
-        ),
-        &block
+    def initialize(**attrs)
+      super(
+        attrs,
+        class: [
+          "flex -space-x-px isolate",
+          # Remove rounded corners from middle buttons
+          "[&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:first-child:not(:last-child)]:rounded-r-none [&>*:last-child:not(:first-child)]:rounded-l-none",
+          # Put focused button on top
+          "[&>*]:focus:z-10"
+        ]
       )
     end
+
+    def view_template
+      div(**attrs) do
+        yield
+      end
+    end
   end
 end

data/app/components/nitro_kit/card.rb

@@ -1,23 +1,63 @@
+# frozen_string_literal: true
+
 module NitroKit
   class Card < Component
     def initialize(**attrs)
-      @attrs = attrs
+      super(
+        attrs,
+        class: base_class
+      )
+    end
+
+    def view_template
+      div(**attrs) do
+        yield
+      end
+    end
+
+    def title(text = nil, **attrs, &block)
+      h2(**mattr(attrs, class: "text-lg font-bold -mb-2")) do
+        text_or_block(text, &block)
+      end
+    end
+
+    def body(text = nil, **attrs, &block)
+      div(**mattr(attrs, class: "text-muted-foreground text-sm leading-relaxed")) do
+        text_or_block(text, &block)
+      end
     end
 
-    def view_template(&block)
-      div(class: "rounded-lg border p-6 space-y-6 shadow-sm", &block)
+    def footer(text = nil, **attrs, &block)
+      div(**mattr(attrs, class: "flex gap-2 items-center")) do
+        text_or_block(text, &block)
+      end
     end
 
-    def title(**attrs)
-      h2(**attrs, class: merge(["text-lg font-bold", attrs[:class]])) { yield }
+    def divider(**attrs)
+      full_width do
+        hr(**attrs)
+      end
     end
 
-    def body(**attrs)
-      div(**attrs) { yield }
+    def full_width(**attrs)
+      div(**mattr(attrs, data: {slot: "full"}, class: "-mx-(--gap)")) do
+        yield
+      end
     end
 
-    def footer(**attrs)
-      div(**attrs, class: merge(["flex gap-2", attrs[:class]])) { yield }
+    private
+
+    def base_class
+      [
+        # Configure spacing with breakpoints
+        "[--gap:calc(var(--spacing)*4)] sm:[--gap:calc(var(--spacing)*6)]",
+        # Base styles
+        "flex flex-col items-stretch rounded-lg bg-background border p-(--gap) gap-(--gap) overflow-hidden",
+        # If a `data-slot=full` is the first thing, move it to the top
+        "[&>[data-slot=full]:first-child]:-mt-(--gap)",
+        # Group for hover, focus
+        "group/card"
+      ]
     end
   end
 end