nitro_kit 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 738be78aa004f1a57e3b2f1b4f4c72b7e11b055e0e8a543db2205c414e785b60
+  data.tar.gz: 60d0b5bf5afa57cf8710838f13f5f586c18dc48ad04f7e503ec362c3ea372cc0
+SHA512:
+  metadata.gz: 6a9e5e794e437dc0e27765affc79414ca3caf90c4aa5747929d93db3b4e7a2ef2fda41f01758af31ca5ea6c0431f9615de3c241faca1fc90be0b243499884bdc
+  data.tar.gz: ed4904af0e0499b2c947baf1e0c7016e2a134a8045288311b05eefe8aaac30985ebc0da85cbf5e47b97548dd650eec0155ba1ee6b3ef84c23e51a45203bbbc23

data/README.md

@@ -0,0 +1 @@
+_Nothing to see here yet, move along_

data/Rakefile

@@ -0,0 +1,6 @@
+# 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_relative "config/application"
+
+Rails.application.load_tasks

data/app/components/nitro_kit/accordion.rb

@@ -0,0 +1,60 @@
+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 view_template
+      div(
+        **attrs,
+        class: merge([ITEM, class_list]),
+        data: { controller: "nk--accordion" }
+      ) do
+        yield
+      end
+    end
+
+    def item(**attrs)
+      div(**attrs) do
+        yield
+      end
+    end
+
+    def trigger(text = nil, **attrs)
+      button(
+        type: "button",
+        class: TRIGGER,
+        data: {
+          action: "nk--accordion#toggle",
+          "nk--accordion-target": "trigger"
+        },
+        aria: { expanded: "false", controls: "content" }
+      ) do
+        div(**attrs) { text || yield }
+        render NitroKit::Icon.new(name: "chevron-down", class: ARROW)
+      end
+    end
+
+    def content(**attrs)
+      div(
+        class: merge(CONTENT),
+        data: { "nk--accordion-target": "content" },
+        aria: { hidden: "true" }
+      ) do
+        div(class: "pb-4") { yield }
+      end
+    end
+  end
+end 

data/app/components/nitro_kit/badge.rb

@@ -0,0 +1,34 @@
+module NitroKit
+  class Badge < Component
+    BASE = "inline-flex items-center gap-x-1.5 rounded-md font-medium"
+
+    VARIANTS = {
+      default: "border border-transparent bg-zinc-200 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300",
+      outline: "border"
+    }
+
+    SIZES = {
+      sm: "text-xs px-1.5 py-0.5",
+      md: "text-sm px-2 py-0.5"
+    }
+
+    def initialize(variant: :default, size: :md, **attrs)
+      @attrs = attrs
+
+      @class_list = merge(
+        [
+          BASE,
+          VARIANTS[variant],
+          SIZES[size],
+          attrs[:class]
+        ]
+      )
+    end
+
+    attr_reader :color, :attrs, :class_list
+
+    def view_template(&block)
+      span(**attrs, class: class_list, &block)
+    end
+  end
+end

data/app/components/nitro_kit/button.rb

@@ -0,0 +1,109 @@
+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-50 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"
+    }
+
+    def initialize(
+      href: nil,
+      icon: nil,
+      icon_right: nil,
+      size: :base,
+      type: :button,
+      variant: :default,
+      **attrs
+    )
+      @href = href
+      @icon = icon
+      @icon_right = icon_right
+      @size = size
+      @type = type
+      @variant = variant
+      @attrs = attrs
+
+      @class_list = merge(
+        [
+          BASE,
+          VARIANTS[variant],
+          SIZES[size],
+          attrs[:class]
+        ]
+      )
+    end
+
+    attr_reader(
+      :class_list,
+      :href,
+      :icon,
+      :icon_right,
+      :size,
+      :type,
+      :variant,
+      :attrs
+    )
+
+    def view_template(&block)
+      if href
+        a(href:, **attrs, class: class_list) do
+          contents(&block)
+        end
+      else
+        button(type:, **attrs, class: class_list) do
+          contents(&block)
+        end
+      end
+    end
+
+    private
+
+    def contents
+      text = safe(capture { yield })
+      has_text = text.to_s.present?
+
+      if !icon && has_text && !icon_right
+        return text
+      elsif icon && !has_text && !icon_right
+        return render(Icon.new(name: icon))
+      end
+
+      render(Icon.new(name: icon)) if icon
+      span { text }
+      render(Icon.new(name: icon_right)) if icon_right
+    end
+  end
+end

data/app/components/nitro_kit/button_group.rb

@@ -0,0 +1,19 @@
+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
+      )
+    end
+  end
+end

data/app/components/nitro_kit/card.rb

@@ -0,0 +1,23 @@
+module NitroKit
+  class Card < Component
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      div(class: "rounded-lg border p-6 space-y-6 shadow-sm", &block)
+    end
+
+    def title(**attrs)
+      h2(**attrs, class: merge(["text-lg font-bold", attrs[:class]])) { yield }
+    end
+
+    def body(**attrs)
+      div(**attrs) { yield }
+    end
+
+    def footer(**attrs)
+      div(**attrs, class: merge(["flex gap-2", attrs[:class]])) { yield }
+    end
+  end
+end

data/app/components/nitro_kit/checkbox.rb

@@ -0,0 +1,62 @@
+module NitroKit
+  class Checkbox < Component
+    include ActionView::Helpers::FormTagHelper
+
+    def initialize(name, value: "1", label: nil, **attrs)
+      super(**attrs)
+
+      @name = name
+      @label_text = label
+    end
+
+    attr_reader(
+      :name,
+      :value,
+      :label_text
+    )
+
+    def view_template
+      div(class: merge(["isolate inline-flex items-center gap-2", class_list])) do
+        label(class: "relative flex shrink-0") do
+          input(
+            **attrs,
+            type: "checkbox",
+            class: class_names(
+              "peer appearance-none shadow size-4 rounded border text-foreground",
+              "checked:bg-primary checked:border-primary",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            )
+          )
+          checkmark
+        end
+
+        if label_text.present?
+          render(Label.new(for: attrs[:id])) { label_text }
+        end
+      end
+    end
+
+    private
+
+    def checkmark
+      span(
+        class: class_names(
+          "absolute w-full h-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+          "text-zinc-50 dark:text-zinc-950 opacity-0 peer-checked:opacity-100 pointer-events-none"
+        )
+      ) do
+        svg(
+          class: "size-full",
+          viewbox: "0 0 20 20",
+          fill: "currentColor",
+          stroke: "currentColor",
+          stroke_width: 1
+        ) do |svg|
+          svg.path(
+            "d" => "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+          )
+        end
+      end
+    end
+  end
+end

data/app/components/nitro_kit/component.rb

@@ -0,0 +1,31 @@
+module NitroKit
+  class Component < Phlex::HTML
+    attr_reader :attrs, :class_list
+
+    def initialize(**attrs)
+      @class_list = attrs.delete(:class)
+      @attrs = attrs.symbolize_keys
+    end
+
+    attr_reader :class_list, :attrs
+
+    def merge(*args)
+      self.class.merge(*args)
+    end
+
+    def self.merge(*args)
+      @merger ||= TailwindMerge::Merger.new
+      @merger.merge(*args)
+    end
+
+    def data_merge(data = {}, new_data = {})
+      return data if new_data.blank?
+      return new_data if data.blank?
+
+      data.deep_merge(new_data) do |_key, old_val, new_val|
+        # Put new value first so overrides can stopPropagation to old value
+        [new_val, old_val].compact.join(" ")
+      end
+    end
+  end
+end

data/app/components/nitro_kit/dropdown.rb

@@ -0,0 +1,110 @@
+module NitroKit
+  class Dropdown < Component
+    include Phlex::Rails::Helpers::LinkTo
+
+    CONTENT = [
+      "w-max-content absolute top-0 left-0",
+      "p-1 bg-background rounded-md border shadow-sm",
+      "w-fit max-w-sm flex-col text-left",
+      "[&[aria-hidden=true]]:hidden flex"
+    ].freeze
+
+    ITEM = [
+      "px-3 py-1.5 rounded",
+      "font-medium truncate",
+      "cursor-default"
+    ].freeze
+
+    ITEM_VARIANTS = {
+      default: ["hover:bg-muted"],
+      destructive: ["text-destructive-foreground hover:bg-destructive hover:text-white"]
+    }.freeze
+
+    SEPARATOR = "border-t my-1 -mx-1"
+
+    def initialize(placement: nil, **attrs)
+      @placement = placement
+      @attrs = attrs
+    end
+
+    attr_reader :placement
+
+    def view_template(&block)
+      div(data: {:controller => "nk--dropdown", :"nk--dropdown-placement-value" => placement}, &block)
+    end
+
+    def trigger(**attrs, &block)
+      class_list = "inline-block"
+      data = {
+        :"nk--dropdown-target" => "trigger",
+        :action => "click->nk--dropdown#toggle",
+        **attrs.fetch(:data, {})
+      }
+      div(
+        **attrs,
+        class: class_list,
+        data:,
+        aria: {haspopup: "true", expanded: "false"},
+        &block
+      )
+    end
+
+    def content(**attrs, &block)
+      class_list = merge([CONTENT, attrs[:class]])
+
+      data = {
+        :"nk--dropdown-target" => "content",
+        **attrs.fetch(:data, {})
+      }
+      div(
+        **attrs,
+        class: class_list,
+        data:,
+        role: "menu",
+        aria: {hidden: "true"},
+        &block
+      )
+    end
+
+    def title(text = nil, **attrs, &block)
+      class_list = merge(["px-3 pt-2 pb-1.5 text-muted-foreground text-sm", attrs[:class]])
+      div(**attrs, class: class_list) { text || block.call }
+    end
+
+    def item(
+      text = nil,
+      href = nil,
+      variant: :default,
+      **attrs,
+      &block
+    )
+      class_list = merge([ITEM, ITEM_VARIANTS[variant], attrs[:class]])
+
+      common_attrs = {
+        **attrs,
+        class: class_list,
+        role: "menuitem",
+        tabindex: "-1"
+      }
+
+      if href
+        link_to(
+          href,
+          **common_attrs
+        ) {
+          text || block.call
+        }
+      else
+        div(**common_attrs) { text || block.call }
+      end
+    end
+
+    def destructive_item(*args, **attrs, &block)
+      item(*args, **attrs, variant: :destructive, &block)
+    end
+
+    def separator
+      div(class: SEPARATOR)
+    end
+  end
+end

data/app/components/nitro_kit/field.rb

@@ -0,0 +1,37 @@
+module NitroKit
+  class Field < Component
+    FIELD_BASE = [
+      "flex flex-col gap-2 align-start",
+      "[&:has([data-slot='error'])_[data-slot='control']]:border-destructive"
+    ].freeze
+    LABEL_BASE = "text-sm font-medium"
+    DESCRIPTION_BASE = "text-sm text-muted-foreground"
+    ERROR_BASE = "text-sm text-destructive"
+    INPUT_BASE = [
+      "rounded-md border bg-background border-border text-base px-3 py-2",
+      "focus:outline-none focus:ring-2 focus:ring-primary",
+      ""
+    ].freeze
+
+    def initialize(attribute, as: :string, label: nil, description: nil, errors: nil, **attrs)
+      @attribute = attribute
+      @as = as
+      @label_text = label
+      @description_text = description
+      @errors = errors || []
+      @attrs = attrs
+    end
+
+    attr_reader :attribute, :as, :label_text, :description_text, :errors, :attrs
+
+    def view_template(&block)
+      div(**attrs, class: FIELD_BASE) do
+        label(**attrs, data: {slot: "label"}, class: LABEL_BASE) { label_text }
+        input(**attrs, data: {slot: "control"}, class: INPUT_BASE)
+        errors.each do |msg|
+          div(**attrs, data: {slot: "error"}, class: ERROR_BASE) { msg }
+        end
+      end
+    end
+  end
+end

data/app/components/nitro_kit/field_group.rb

@@ -0,0 +1,14 @@
+module NitroKit
+  class FieldGroup < Component
+    FIELD_GROUP_BASE = "space-y-6"
+
+    def initialize(**attrs)
+      @attrs = attrs
+      @class_list = merge([FIELD_GROUP_BASE, attrs[:class]])
+    end
+
+    def view_template(&block)
+      div(**attrs, class: class_list, &block)
+    end
+  end
+end

data/app/components/nitro_kit/fieldset.rb

@@ -0,0 +1,16 @@
+module NitroKit
+  class Fieldset < Component
+    FIELDSET_BASE = "space-y-6"
+
+    def initialize(legend, **attrs)
+      @legend = legend
+      @attrs = attrs
+    end
+
+    attr_reader :legend, :attrs
+
+    def view_template(&block)
+      fieldset(**attrs, class: FIELDSET_BASE, &block)
+    end
+  end
+end

data/app/components/nitro_kit/form_builder.rb

@@ -0,0 +1,43 @@
+module NitroKit
+  class FormBuilder < ActionView::Helpers::FormBuilder
+    # Fields
+
+    def fieldset(options = {}, &block)
+      content = @template.capture(&block)
+      @template.render(NitroKit::Fieldset.new(options)) { content }
+    end
+
+    def field_group(options = {}, &block)
+      content = @template.capture(&block)
+      @template.render(NitroKit::FieldGroup.new(**options)) { content }
+    end
+
+    def field(object_name, **options)
+      label = options.fetch(:label, object_name.to_s.humanize)
+      errors = object.errors.include?(object_name) ? object.errors.full_messages_for(object_name) : nil
+
+      @template.render(NitroKit::Field.new(object_name, label:, errors:, **options))
+    end
+
+    # Inputs
+
+    def label(object_name, method, content_or_options = nil, options = nil, &block)
+    end
+
+    def checkbox(method, options = {})
+      @template.checkbox(@object_name, method, objectify_options(options), label: options[:label])
+    end
+
+    alias_method :check_box, :checkbox
+
+    def submit(value = "Save changes", **options)
+      content = value || @template.capture(&block)
+      @template.render(NitroKit::Button.new(variant: :primary, type: :submit, **options)) { content }
+    end
+
+    def button(value = "Save changes", **options)
+      content = value || @template.capture(&block)
+      @template.render(NitroKit::Button.new(**options)) { content }
+    end
+  end
+end

data/app/components/nitro_kit/icon.rb

@@ -0,0 +1,23 @@
+module NitroKit
+  class Icon < Component
+    include Phlex::Rails::Helpers::ContentTag
+    include LucideRails::RailsHelper
+
+    SIZE = {
+      sm: "size-4",
+      base: "size-5",
+    }
+
+    def initialize(name:, size: :base, **attrs)
+      @name = name
+      @size = size
+      @attrs = attrs
+    end
+
+    attr_reader :name, :size
+
+    def view_template
+      lucide_icon(name, **attrs, class: merge([SIZE[size], attrs[:class]]))
+    end
+  end
+end

data/app/components/nitro_kit/label.rb

@@ -0,0 +1,10 @@
+module NitroKit
+  class Label < Component
+    def view_template
+      label(
+        **attrs,
+        class: merge(["text-sm font-medium select-none", class_list])
+      ) { yield }
+    end
+  end
+end

data/app/components/nitro_kit/radio_button.rb

@@ -0,0 +1,63 @@
+module NitroKit
+  class RadioButton < Component
+    include ActionView::Helpers::FormTagHelper
+
+    def initialize(name, value:, label: nil, **attrs)
+      super(**attrs)
+
+      @name = name
+      @value = value
+      @label_text = label
+      @id = "#{sanitize_to_id(name)}_#{sanitize_to_id(value)}"
+    end
+
+    attr_reader(
+      :name,
+      :value,
+      :id,
+      :label_text
+    )
+
+    def view_template
+      div(class: merge(["inline-flex items-center gap-2", class_list])) do
+        label(class: "grid grid-cols-1 place-items-center shrink-0") do
+          input(
+            **attrs,
+            type: "radio",
+            name:,
+            value:,
+            id:,
+            class: class_names(
+              "peer row-start-1 col-start-1",
+              "appearance-none size-5 shadow rounded-full border text-foreground bg-background",
+              "[&[aria-checked='true']]:bg-primary",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            )
+          )
+          dot
+        end
+
+        if label_text.present?
+          render(Label.new(for: id)) { label_text }
+        end
+      end
+    end
+
+    private
+
+    def dot
+      svg(
+        class: class_names(
+          "row-start-1 col-start-1",
+          "size-2.5 text-primay opacity-0 pointer-events-none",
+          "peer-checked:opacity-100"
+        ),
+        viewbox: "0 0 20 20",
+        fill: "currentColor",
+        stroke: "none"
+      ) do |svg|
+        svg.circle(cx: 10, cy: 10, r: 10)
+      end
+    end
+  end
+end