ruby_ui 1.0.2 → 1.1.0

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

data/lib/ruby_ui/chart/chart_docs.rb

@@ -0,0 +1,115 @@
+# frozen_string_literal: true
+
+class Views::Docs::Chart < Views::Base
+  def view_template
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Chart", description: "Displays information in a visual way.")
+
+      Heading(level: 2) { "Introduction" }
+
+      Text do
+        plain "RubyUI uses "
+        InlineLink(href: "https://www.chartjs.org/") { "Chart.js" }
+        plain " to render charts. Chart.js is a free open-source JavaScript library for data visualization, which supports 8 chart types: bar, line, area, pie, bubble, radar, polar, and scatter. If you're unfamiliar with Chart.js. We recommend the "
+        InlineLink(href: "https://www.chartjs.org/docs/latest/getting-started/") { "Getting Started guide" }
+        plain ". "
+      end
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Bar Chart", context: self) do
+        <<~RUBY
+          options = {
+            type: 'bar',
+            data: {
+              labels: ['Phlex', 'VC', 'ERB'],
+              datasets: [{
+                label: 'render time (ms)',
+                data: [100, 520, 1200],
+              }]
+            },
+            options: {
+              indexAxis: 'y',
+              scales: {
+                y: {
+                  beginAtZero: true
+                }
+              },
+            },
+          }
+
+          Chart(options: options)
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Line Graph", context: self) do
+        <<~RUBY
+          options = {
+            type: 'line',
+            data: {
+              labels: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+              datasets: [{
+                label: 'Github Stars',
+                data: [40, 30, 79, 140, 290, 550],
+              }]
+            },
+            options: {
+              scales: {
+                y: {
+                  beginAtZero: true
+                }
+              },
+              plugins: {
+                legend: {
+                  display: false
+                }
+              }
+            },
+          }
+
+          Chart(options: options)
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Pie Chart", description: "Setting custom background color", context: self) do
+        <<~RUBY
+          options = {
+            type: 'pie',
+            data: {
+              labels: [
+                'Red',
+                'Blue',
+                'Yellow'
+              ],
+              datasets: [{
+                label: 'My First Dataset',
+                data: [300, 50, 100],
+                backgroundColor: [
+                  'rgb(255, 99, 132)',
+                  'rgb(54, 162, 235)',
+                  'rgb(255, 205, 86)'
+                ],
+                hoverOffset: 4
+              }]
+            },
+          }
+
+          Chart(options: options)
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: "Chart")
+
+      render Docs::ComponentsTable.new(components)
+    end
+  end
+
+  private
+
+  def components
+    [
+      ::Docs::ComponentStruct.new(name: "ChartController", source: "https://github.com/PhlexUI/phlex_ui_stimulus/blob/main/controllers/chart_controller.js", built_using: :stimulus),
+      ::Docs::ComponentStruct.new(name: "Chart", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/chart.rb", built_using: :phlex)
+    ]
+  end
+end

data/lib/ruby_ui/checkbox/checkbox.rb

@@ -17,9 +17,9 @@ module RubyUI
           action: "change->ruby-ui--checkbox-group#onChange change->ruby-ui--form-field#onInput invalid->ruby-ui--form-field#onInvalid"
         },
         class: [
-          "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background accent-primary",
+          "peer h-4 w-4 shrink-0 rounded-sm border-input ring-offset-background accent-primary",
           "disabled:cursor-not-allowed disabled:opacity-50",
-          "checked:bg-primary checked:text-primary-foreground",
+          "checked:bg-primary checked:text-primary-foreground dark:checked:bg-secondary checked:text-primary checked:border-primary",
           "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
         ]

data/lib/ruby_ui/checkbox/checkbox_docs.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+class Views::Docs::Checkbox < Views::Base
+  def view_template
+    component = "Checkbox"
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Checkbox", description: "A control that allows the user to toggle between checked and not checked.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          div(class: 'flex items-center space-x-3') do
+            Checkbox(id: 'terms')
+            label(for: 'terms', class: 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70') { "Accept terms and conditions" }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Checked", context: self) do
+        <<~RUBY
+          div(class: "items-top flex space-x-3") do
+            Checkbox(id: 'terms1', checked: true)
+            div(class: "grid gap-1.5 leading-none") do
+              label(
+                for: "terms1",
+                class:
+                  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+              ) { " Accept terms and conditions " }
+              p(class: "text-sm text-muted-foreground") { " You agree to our Terms of Service and Privacy Policy." }
+            end
+          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/clipboard/clipboard_docs.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+class Views::Docs::Clipboard < Views::Base
+  def view_template
+    component = "Clipboard"
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Clipboard", description: "A control to allow you to copy content to the clipboard.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          Clipboard(success: "Copied!", error: "Copy failed!", class: "relative", options: {placement: "top"}) do
+            ClipboardSource(class: "hidden") { span { "Born rich!!!" } }
+
+            ClipboardTrigger do
+              Link(href: "#", class: "gap-1") do
+                Text(size: :small, class: "text-primary") { "Copy the secret of success!!!" }
+              end
+            end
+          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/codeblock/codeblock_docs.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+class Views::Docs::Codeblock < Views::Base
+  def view_template
+    component = "Codeblock"
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Codeblock", description: "A component for displaying highlighted code.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "With clipboard", context: self) do
+        <<~RUBY
+          code = <<~CODE
+              def hello_world
+                puts "Hello, world!"
+              end
+            CODE
+          div(class: 'w-full') do
+            Codeblock(code, syntax: :ruby)
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Without clipboard", context: self) do
+        <<~RUBY
+          code = <<~CODE
+              def hello_world
+                puts "Hello, world!"
+              end
+            CODE
+          div(class: 'w-full') do
+            Codeblock(code, syntax: :ruby, clipboard: false)
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Custom message", description: "Copy the code to see the message", context: self) do
+        <<~RUBY
+          code = <<~CODE
+              def hello_world
+                puts "Hello, world!"
+              end
+            CODE
+          div(class: 'w-full') do
+            Codeblock(code, syntax: :ruby, clipboard_success: "Nice one!")
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end