ruby_ui 1.0.1 → 1.1.0

data/lib/ruby_ui/breadcrumb/breadcrumb_docs.rb

@@ -0,0 +1,116 @@
+# frozen_string_literal: true
+
+class Views::Docs::Breadcrumb < Views::Base
+  def view_template
+    component = "Breadcrumb"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Breadcrumb", description: "Indicates the user's current location within a navigational hierarchy.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          Breadcrumb do
+            BreadcrumbList do
+              BreadcrumbItem do
+                BreadcrumbLink(href: "/") { "Home" }
+              end
+              BreadcrumbSeparator()
+              BreadcrumbItem do
+                BreadcrumbLink(href: "/docs/accordion") { "Components" }
+              end
+              BreadcrumbSeparator()
+              BreadcrumbItem do
+                BreadcrumbPage { "Breadcrumb" }
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "With custom separator", context: self) do
+        <<~RUBY
+          Breadcrumb do
+            BreadcrumbList do
+              BreadcrumbItem do
+                BreadcrumbLink(href: "/") { "Home" }
+              end
+              BreadcrumbSeparator { slash_icon }
+              BreadcrumbItem do
+                BreadcrumbLink(href: "/docs/accordion") { "Components" }
+              end
+              BreadcrumbSeparator { slash_icon }
+              BreadcrumbItem do
+                BreadcrumbPage { "Breadcrumb" }
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Collapsed", context: self) do
+        <<~RUBY
+          Breadcrumb do
+            BreadcrumbList do
+              BreadcrumbItem do
+                BreadcrumbLink(href: "/") { "Home" }
+              end
+              BreadcrumbSeparator()
+              BreadcrumbItem do
+                BreadcrumbEllipsis()
+              end
+              BreadcrumbSeparator()
+              BreadcrumbItem do
+                BreadcrumbLink(href: "/docs/accordion") { "Components" }
+              end
+              BreadcrumbSeparator()
+              BreadcrumbItem do
+                BreadcrumbPage { "Breadcrumb" }
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "With Link component", context: self) do
+        <<~RUBY
+          Breadcrumb do
+            BreadcrumbList do
+              BreadcrumbItem do
+                BreadcrumbLink(href: "/") { "Home" }
+              end
+              BreadcrumbSeparator()
+              BreadcrumbItem do
+                Link(href: "/docs/accordion", class: "px-0") { "Components" }
+              end
+              BreadcrumbSeparator()
+              BreadcrumbItem do
+                BreadcrumbPage { "Breadcrumb" }
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+
+  private
+
+  def slash_icon
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      class: "w-4 h-4",
+      viewbox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      stroke_width: "2",
+      stroke_linecap: "round",
+      stroke_linejoin: "round"
+    ) { |s| s.path(d: "M22 2 2 22") }
+  end
+end

data/lib/ruby_ui/button/button.rb

@@ -2,6 +2,13 @@
 
 module RubyUI
   class Button < Base
+    BASE_CLASSES = [
+      "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors",
+      "disabled:pointer-events-none disabled:opacity-50",
+      "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+      "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed"
+    ].freeze
+
     def initialize(type: :button, variant: :primary, size: :md, icon: false, **attrs)
       @type = type
       @variant = variant.to_sym
@@ -36,43 +43,55 @@ module RubyUI
 
     def primary_classes
       [
-        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        size_classes
+        BASE_CLASSES,
+        size_classes,
+        "bg-primary text-primary-foreground shadow",
+        "hover:bg-primary/90"
       ]
     end
 
     def link_classes
       [
-        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-primary underline-offset-4 hover:underline",
-        size_classes
+        BASE_CLASSES,
+        size_classes,
+        "text-primary underline-offset-4",
+        "hover:underline"
       ]
     end
 
     def secondary_classes
       [
-        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-secondary text-secondary-foreground hover:bg-opacity-80",
-        size_classes
+        BASE_CLASSES,
+        size_classes,
+        "bg-secondary text-secondary-foreground",
+        "hover:bg-opacity-80"
       ]
     end
 
     def destructive_classes
       [
-        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        size_classes
+        BASE_CLASSES,
+        size_classes,
+        "bg-destructive text-white shadow-sm",
+        "[a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20",
+        "dark:focus-visible:ring-destructive/40 dark:bg-destructive/60"
       ]
     end
 
     def outline_classes
       [
-        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        size_classes
+        BASE_CLASSES,
+        size_classes,
+        "border border-input bg-background shadow-sm",
+        "hover:bg-accent hover:text-accent-foreground"
       ]
     end
 
     def ghost_classes
       [
-        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground",
-        size_classes
+        BASE_CLASSES,
+        size_classes,
+        "hover:bg-accent hover:text-accent-foreground"
       ]
     end
 
@@ -88,10 +107,7 @@ module RubyUI
     end
 
     def default_attrs
-      {
-        type: @type,
-        class: default_classes
-      }
+      {type: @type, class: default_classes}
     end
   end
 end

data/lib/ruby_ui/button/button_docs.rb

@@ -0,0 +1,143 @@
+# frozen_string_literal: true
+
+class Views::Docs::Button < Views::Base
+  def view_template
+    component = "Button"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Button", description: "Displays a button or a component that looks like a button.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          Button { "Button" }
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Primary", context: self) do
+        <<~RUBY
+          Button(variant: :primary) { "Primary" }
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Secondary", context: self) do
+        <<~RUBY
+          Button(variant: :secondary) { "Secondary" }
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Destructive", context: self) do
+        <<~RUBY
+          Button(variant: :destructive) { "Destructive" }
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Outline", context: self) do
+        <<~RUBY
+          Button(variant: :outline) { "Outline" }
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Ghost", context: self) do
+        <<~RUBY
+          Button(variant: :ghost) { "Ghost" }
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Link", context: self) do
+        <<~RUBY
+          Button(variant: :link) { "Link" }
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Disabled", context: self) do
+        <<~RUBY
+          Button(disabled: true) { "Disabled" }
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Aria Disabled", context: self) do
+        <<~RUBY
+          Button(aria: {disabled: "true"}) { "Aria Disabled" }
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Icon", context: self) do
+        <<~RUBY
+          Button(variant: :outline, icon: true) do
+            svg(
+              xmlns: "http://www.w3.org/2000/svg",
+              viewbox: "0 0 20 20",
+              fill: "currentColor",
+              class: "w-5 h-5"
+            ) do |s|
+              s.path(
+                fill_rule: "evenodd",
+                d:
+                  "M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z",
+                clip_rule: "evenodd"
+              )
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "With Icon", context: self) do
+        <<~RUBY
+          Button(variant: :primary) do
+            svg(
+              xmlns: "http://www.w3.org/2000/svg",
+              fill: "none",
+              viewbox: "0 0 24 24",
+              stroke_width: "1.5",
+              stroke: "currentColor",
+              class: "w-4 h-4 mr-2"
+            ) do |s|
+              s.path(
+                stroke_linecap: "round",
+                stroke_linejoin: "round",
+                d:
+                  "M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
+              )
+            end
+            span { "Login with Email" }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "With Icon", context: self) do
+        <<~RUBY
+          Button(variant: :primary, disabled: true) do
+            svg(
+              xmlns: "http://www.w3.org/2000/svg",
+              viewbox: "0 0 20 20",
+              fill: "currentColor",
+              class: "w-4 h-4 mr-2 animate-spin"
+            ) do |s|
+              s.path(
+                fill_rule: "evenodd",
+                d:
+                  "M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z",
+                clip_rule: "evenodd"
+              )
+            end
+            span { "Please wait" }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Submit", context: self) do
+        <<~RUBY
+          Button(variant: :primary, type: :submit) do
+            span { "Submit application" }
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end

data/lib/ruby_ui/calendar/calendar_docs.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+class Views::Docs::Calendar < Views::Base
+  def view_template
+    component = "Calendar"
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Calendar", description: "A date field component that allows users to enter and edit date.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Connect to input", context: self) do
+        <<~RUBY
+          div(class: 'space-y-4') do
+            Input(type: 'string', placeholder: "Select a date", class: 'rounded-md border shadow', id: 'date', data_controller: 'ruby-ui--calendar-input')
+            Calendar(input_id: '#date', class: 'rounded-md border shadow')
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Format date", description: "Format dates with date-fns", context: self) do
+        <<~RUBY
+          div(class: 'space-y-4') do
+            Input(type: 'string', placeholder: "Select a date", class: 'rounded-md border shadow', id: 'formatted-date', data_controller: 'ruby-ui--calendar-input')
+            Calendar(input_id: '#formatted-date', date_format: 'PPPP', class: 'rounded-md border shadow')
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end

data/lib/ruby_ui/card/card_docs.rb

@@ -0,0 +1,114 @@
+# frozen_string_literal: true
+
+class Views::Docs::Card < Views::Base
+  def view_template
+    component = "Card"
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Card", description: "Displays a card with header, content, and footer.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Card with image", context: self) do
+        <<~RUBY
+          Card(class: 'w-96') do
+            CardHeader do
+              CardTitle { 'You might like "RubyUI"' }
+              CardDescription { "@joeldrapper" }
+            end
+            CardContent do
+              AspectRatio(aspect_ratio: "16/9", class: "rounded-md overflow-hidden border") do
+                img(
+                  alt: "Placeholder",
+                  loading: "lazy",
+                  src: image_url('pattern.jpg')
+                )
+              end
+            end
+            CardFooter(class: 'flex justify-end gap-x-2') do
+              Button(variant: :outline) { "See more" }
+              Button(variant: :primary) { "Buy now" }
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Card with full-width image", context: self) do
+        <<~RUBY
+          Card(class: 'w-96 overflow-hidden') do
+            AspectRatio(aspect_ratio: "16/9", class: "border-b") do
+              img(
+                alt: "Placeholder",
+                loading: "lazy",
+                src: image_url('pattern.jpg')
+              )
+            end
+            CardHeader do
+              CardTitle { 'Introducing RubyUI' }
+              CardDescription { "Kickstart your project today!" }
+            end
+            CardFooter(class: 'flex justify-end') do
+              Button(variant: :outline) { "Get started" }
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Account balance", context: self) do
+        <<~RUBY
+          Card(class: 'w-96 overflow-hidden') do
+            CardHeader do
+              div(class: 'w-10 h-10 rounded-xl flex items-center justify-center bg-violet-100 text-violet-700 -rotate-6') do
+                cash_icon
+              end
+            end
+            CardContent(class: 'space-y-1') do
+              CardDescription(class: 'font-medium') { "Current Balance" }
+              h5(class: 'font-semibold text-4xl') { '$2,602' }
+            end
+            CardFooter do
+              Text(size: "2", class: "text-muted-foreground") { "**** 4620" }
+            end
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+
+  def arrow_icon(classes: nil)
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      viewbox: "0 0 20 20",
+      fill: "currentColor",
+      class: ["w-4 h-4", classes]
+    ) do |s|
+      s.path(
+        fill_rule: "evenodd",
+        d:
+          "M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z",
+        clip_rule: "evenodd"
+      )
+    end
+  end
+
+  def cash_icon(classes: nil)
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewbox: "0 0 24 24",
+      stroke_width: "1.5",
+      stroke: "currentColor",
+      class: ["w-6 h-6", classes]
+    ) do |s|
+      s.path(
+        stroke_linecap: "round",
+        stroke_linejoin: "round",
+        d:
+          "M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z"
+      )
+    end
+  end
+end

data/lib/ruby_ui/carousel/carousel_docs.rb

@@ -0,0 +1,104 @@
+# frozen_string_literal: true
+
+class Views::Docs::Carousel < Views::Base
+  def view_template
+    component = "Carousel"
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Carousel", description: "A carousel with motion and swipe built using Embla.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          Carousel(options: {loop:false}, class: "w-full max-w-xs") do
+            CarouselContent do
+              5.times do |index|
+                CarouselItem do
+                  div(class: "p-1") do
+                    Card do
+                      CardContent(class: "flex aspect-square items-center justify-center p-6") do
+                        span(class: "text-4xl font-semibold") { index + 1 }
+                      end
+                    end
+                  end
+                end
+              end
+            end
+            CarouselPrevious()
+            CarouselNext()
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Sizes", context: self) do
+        <<~RUBY
+          Carousel(class: "w-full max-w-sm") do
+            CarouselContent do
+              5.times do |index|
+                CarouselItem(class: "md:basis-1/2 lg:basis-1/3") do
+                  div(class: "p-1") do
+                    Card do
+                      CardContent(class: "flex aspect-square items-center justify-center p-6") do
+                        span(class: "text-3xl font-semibold") { index + 1 }
+                      end
+                    end
+                  end
+                end
+              end
+            end
+            CarouselPrevious()
+            CarouselNext()
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Spacing", context: self) do
+        <<~RUBY
+          Carousel(class: "w-full max-w-sm") do
+            CarouselContent(class: "-ml-1") do
+              5.times do |index|
+                CarouselItem(class: "pl-1 md:basis-1/2 lg:basis-1/3") do
+                  div(class: "p-1") do
+                    Card do
+                      CardContent(class: "flex aspect-square items-center justify-center p-6") do
+                        span(class: "text-2xl font-semibold") { index + 1 }
+                      end
+                    end
+                  end
+                end
+              end
+            end
+            CarouselPrevious()
+            CarouselNext()
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Orientation", context: self) do
+        <<~RUBY
+          Carousel(orientation: :vertical, options: {align: "start"}, class: "w-full max-w-xs") do
+            CarouselContent(class: "-mt-1 h-[200px]") do
+              5.times do |index|
+                CarouselItem(class: "pt-1 md:basis-1/2") do
+                  div(class: "p-1") do
+                    Card do
+                      CardContent(class: "flex items-center justify-center p-6") do
+                        span(class: "text-3xl font-semibold") { index + 1 }
+                      end
+                    end
+                  end
+                end
+              end
+            end
+            CarouselPrevious()
+            CarouselNext()
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end