Merge pull request #90 from PhlexUI/cirdes/add-lookbook

Add LookBook Integration
ruby-ui · Jul 31, 2024 · 223e5c0 · 223e5c0
2 parents a32861c + 2a58c58
commit 223e5c0
Show file tree

Hide file tree

Showing 39 changed files with 1,142 additions and 1 deletion.
diff --git a/Gemfile b/Gemfile
@@ -20,7 +20,10 @@ gem "stimulus-rails", "1.3.3"
 # Bundle and process CSS [https://github.com/rails/cssbundling-rails]
 gem "cssbundling-rails", "1.4.0"
 
-# Build JSON APIs with ease [https://github.com/rails/jbuilder]
+gem "lookbook", "2.3.2"
+
+gem "lucide-rails", "0.4.0"
+
 # gem "jbuilder"
 
 # Use Redis adapter to run Action Cable in production

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -102,6 +102,8 @@ GEM
     concurrent-ruby (1.3.3)
     connection_pool (2.4.1)
     crass (1.0.6)
+    css_parser (1.17.1)
+      addressable
     cssbundling-rails (1.4.0)
       railties (>= 6.0.0)
     date (3.3.4)
@@ -114,6 +116,8 @@ GEM
     erubi (1.13.0)
     globalid (1.2.1)
       activesupport (>= 6.1)
+    htmlbeautifier (1.4.3)
+    htmlentities (4.3.4)
     i18n (1.14.5)
       concurrent-ruby (~> 1.0)
     io-console (0.7.2)
@@ -129,13 +133,28 @@ GEM
     loofah (2.22.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
+    lookbook (2.3.2)
+      activemodel
+      css_parser
+      htmlbeautifier (~> 1.3)
+      htmlentities (~> 4.3.4)
+      marcel (~> 1.0)
+      railties (>= 5.0)
+      redcarpet (~> 3.5)
+      rouge (>= 3.26, < 5.0)
+      view_component (>= 2.0)
+      yard (~> 0.9)
+      zeitwerk (~> 2.5)
+    lucide-rails (0.4.0)
+      railties (>= 4.1.0)
     mail (2.8.1)
       mini_mime (>= 0.1.1)
       net-imap
       net-pop
       net-smtp
     marcel (1.0.4)
     matrix (0.4.2)
+    method_source (1.1.0)
     mini_mime (1.1.5)
     minitest (5.24.1)
     msgpack (1.7.2)
@@ -222,6 +241,7 @@ GEM
     rake (13.2.1)
     rdoc (6.7.0)
       psych (>= 4.0.0)
+    redcarpet (3.6.0)
     regexp_parser (2.9.2)
     reline (0.5.9)
       io-console (~> 0.5)
@@ -284,6 +304,10 @@ GEM
       concurrent-ruby (~> 1.0)
     unicode-display_width (2.5.0)
     useragent (0.16.10)
+    view_component (3.13.0)
+      activesupport (>= 5.2.0, < 8.0)
+      concurrent-ruby (~> 1.0)
+      method_source (~> 1.0)
     web-console (4.2.1)
       actionview (>= 6.0.0)
       activemodel (>= 6.0.0)
@@ -296,6 +320,7 @@ GEM
     websocket-extensions (0.1.5)
     xpath (3.2.0)
       nokogiri (~> 1.8)
+    yard (0.9.36)
     zeitwerk (2.6.16)
 
 PLATFORMS
@@ -313,6 +338,8 @@ DEPENDENCIES
   debug
   dockerfile-rails (>= 1.6)
   jsbundling-rails (= 1.3.0)
+  lookbook (= 2.3.2)
+  lucide-rails (= 0.4.0)
   phlex-rails
   phlex_ui!
   propshaft (= 0.9.0)

diff --git a/app/views/components/shared/navbar.rb b/app/views/components/shared/navbar.rb
@@ -11,6 +11,7 @@ def view_template
           Link(href: helpers.docs_introduction_path, variant: :ghost, class: "hidden md:inline-block") { "Docs" }
           Link(href: helpers.docs_accordion_path, variant: :ghost, class: "hidden md:inline-block") { "Components" }
           Link(href: helpers.theme_path("default"), variant: :ghost, class: "hidden md:inline-block") { "Themes" }
+          Link(href: helpers.lookbook_path("default"), target: "_blank", variant: :ghost, class: "hidden md:inline-block") { "Lookbook" }
         end
         div(class: "flex items-center gap-x-2 md:divide-x") do
           div(class: "flex items-center") do

diff --git a/app/views/components/test_view.rb b/app/views/components/test_view.rb
@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class TestView < Phlex::HTML
+  include PhlexUI
+
+  def view_template(&)
+    div(&)
+  end
+end
diff --git a/app/views/layouts/component_preview.html.erb b/app/views/layouts/component_preview.html.erb
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html style="background-color: <%= params[:lookbook][:display][:bg_color] || "white" %>">
+<head>
+  <title>Component Preview</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <%= stylesheet_link_tag 'application' %>
+  <%= javascript_include_tag 'application', defer: true %>
+</head>
+<body>
+  <div style="
+    max-width: <%= params[:lookbook][:display][:max_width] || "100%" %>
+  ">
+    <div class="h-screen flex items-center justify-center">
+      <%= yield %> <!-- rendered preview will be injected here -->
+    </div>
+  </div>
+</body>
+</html>
diff --git a/config/application.rb b/config/application.rb
@@ -29,6 +29,10 @@ class Application < Rails::Application
     # config.time_zone = "Central Time (US & Canada)"
     # config.eager_load_paths << Rails.root.join("extras")
 
+    # lookbook configuration
+    config.lookbook.project_name = "Phlex Components"
+    config.lookbook.preview_layout = "component_preview"
+
     config.exceptions_app = routes # redirects all exceptions to custom error pages (See routes)
   end
 end
diff --git a/config/initializers/lookbook.rb b/config/initializers/lookbook.rb
@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+# lookbook workaround for phlex components
+if defined?(Lookbook)
+  module Lookbook::PreviewOverrides
+    # see https://github.com/ViewComponent/lookbook/issues/584
+    def render(component = nil, **args, &block)
+      if block
+        super { component.instance_exec component, &block }
+      else
+        super
+      end
+    end
+  end
+
+  Rails.application.configure { Lookbook::Preview.prepend Lookbook::PreviewOverrides }
+end
diff --git a/config/routes.rb b/config/routes.rb
@@ -1,6 +1,8 @@
 Rails.application.routes.draw do
   get "themes/:theme", to: "themes#show", as: :theme
 
+  mount Lookbook::Engine, at: "/lookbook"
+
   scope "docs" do
     # GETTING STARTED
     get "introduction", to: "docs#introduction", as: :docs_introduction

diff --git a/test/components/previews/phlex_ui/accordion_preview.rb b/test/components/previews/phlex_ui/accordion_preview.rb
@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module PhlexUi
+  class AccordionPreview < Lookbook::Preview
+    ITEMS = [
+      {title: "Item 1", content: "Content 1"},
+      {title: "Item 2", content: "Content 2"},
+      {title: "Item 3", content: "Content 3"}
+    ]
+
+    # Default Accordion
+    # ---------------
+    def default
+      render(TestView.new) do
+        Accordion do
+          ITEMS.each do |it|
+            AccordionItem do
+              AccordionTrigger { AccordionDefaultTrigger { AccordionIcon { it[:title] } } }
+              AccordionContent { AccordionDefaultContent { it[:content] } }
+            end
+          end
+        end
+      end
+    end
+  end
+end
diff --git a/test/components/previews/phlex_ui/alert_dialog_preview.rb b/test/components/previews/phlex_ui/alert_dialog_preview.rb
@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module PhlexUi
+  class AlertDialogPreview < Lookbook::Preview
+    # Default AlertDialog
+    # ---------------
+    def default
+      render(TestView.new) do
+        AlertDialog do
+          AlertDialogTrigger { Button { "Show dialog" } }
+
+          AlertDialogContent do
+            AlertDialogHeader do
+              AlertDialogTitle { "Are you absolutely sure?" }
+              AlertDialogDescription do
+                "This action cannot be undone. This will permanently delete your account and remove your data from our servers."
+              end
+            end
+
+            AlertDialogFooter do
+              AlertDialogCancel { "Cancel" }
+              AlertDialogAction { "Continue" }
+            end
+          end
+        end
+      end
+    end
+  end
+end
diff --git a/test/components/previews/phlex_ui/alert_preview.rb b/test/components/previews/phlex_ui/alert_preview.rb
@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PhlexUi
+  class AlertPreview < Lookbook::Preview
+    # Default Alert
+    # ---------------
+    # @param variant [Symbol] select { choices: [nil, warning, success, destructive] }
+    def variants(variant: nil)
+      render(TestView.new) do
+        Alert(variant:) do
+          AlertTitle { "Pro tip" }
+          AlertDescription { "With PhlexUI you'll ship faster." }
+        end
+      end
+    end
+  end
+end
diff --git a/test/components/previews/phlex_ui/aspect_ratio_preview.rb b/test/components/previews/phlex_ui/aspect_ratio_preview.rb
@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module PhlexUi
+  class AspectRatioPreview < Lookbook::Preview
+    # AspectRatio 16/9
+    # ---------------
+    def aspect_16x9
+      render(TestView.new) do
+        div(class: "w-96") do
+          AspectRatio(aspect_ratio: "16/9") do |aspect_ratio|
+            aspect_ratio.img(alt: "Placeholder", loading: "lazy", src: helpers.image_path("pattern.jpg"))
+          end
+        end
+      end
+    end
+
+    # AspectRatio 4/3
+    def aspect_4x3
+      render(TestView.new) do
+        div(class: "w-96") do
+          AspectRatio(aspect_ratio: "4/3") do |aspect_ratio|
+            aspect_ratio.img(alt: "Placeholder", loading: "lazy", src: helpers.image_path("pattern.jpg"))
+          end
+        end
+      end
+    end
+
+    # AspectRatio 1/1
+    def aspect_1x1
+      render(TestView.new) do
+        div(class: "w-96") do
+          AspectRatio(aspect_ratio: "1/1") do |aspect_ratio|
+            aspect_ratio.img(alt: "Placeholder", loading: "lazy", src: helpers.image_path("pattern.jpg"))
+          end
+        end
+      end
+    end
+  end
+end
diff --git a/test/components/previews/phlex_ui/avatar_preview.rb b/test/components/previews/phlex_ui/avatar_preview.rb
@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module PhlexUi
+  class AvatarPreview < Lookbook::Preview
+    # Avatar sizes
+    # ---------------
+    # @param size [Symbol] select { choices: [sm, md, lg, xl] }
+    def sizes(size: :md)
+      render(TestView.new) do
+        Avatar(size:) do
+          AvatarImage(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper")
+        end
+      end
+    end
+
+    # Avatar Images
+    def image
+      render(TestView.new) do
+        Avatar do
+          AvatarImage(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper")
+        end
+      end
+    end
+
+    # Avatar fallback
+    def fallback
+      render(TestView.new) do
+        Avatar { AvatarFallback { "JD" } }
+      end
+    end
+  end
+end
diff --git a/test/components/previews/phlex_ui/badge_preview.rb b/test/components/previews/phlex_ui/badge_preview.rb
@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+# rubocop:disable Layout/LineLength
+
+module PhlexUi
+  class BadgePreview < Lookbook::Preview
+    # Default Badge
+    # ---------------
+    # @param variant [Symbol] select { choices: [primary, secondary, outline, destructive, success, warning, slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose] }
+    def default(variant: :primary)
+      render(TestView.new) do
+        Badge(variant:) { "My Badge" }
+      end
+    end
+  end
+end
+# rubocop:enable Layout/LineLength
diff --git a/test/components/previews/phlex_ui/button_preview.rb b/test/components/previews/phlex_ui/button_preview.rb
@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module PhlexUi
+  class ButtonPreview < Lookbook::Preview
+    # Primary Button
+    # ---------------
+    # @param variant [Symbol] select { choices: [primary, destructive, outline, secondary, ghost, link] }
+    # @param size [Symbol] select { choices: [sm, md, lg, xl] }
+    def primary(variant: :primary, size: :md)
+      render(TestView.new) do
+        Button(variant:, size:) { variant.capitalize }
+      end
+    end
+
+    # Destructive Button
+    def destructive(variant: :destructive, size: :md)
+      render(TestView.new) do
+        Button(variant:, size:) { variant.capitalize }
+      end
+    end
+
+    # Outline Button
+    def outline(variant: :outline, size: :md)
+      render(TestView.new) do
+        Button(variant:, size:) { variant.capitalize }
+      end
+    end
+
+    # Secondary Button
+    def secondary(variant: :secondary, size: :md)
+      render(TestView.new) do
+        Button(variant:, size:) { variant.capitalize }
+      end
+    end
+
+    # Ghost Button
+    def ghost(variant: :ghost, size: :md)
+      render(TestView.new) do
+        Button(variant:, size:) { variant.capitalize }
+      end
+    end
+
+    # Link Button
+    def link(variant: :link, size: :md)
+      render(TestView.new) do
+        Button(variant:, size:) { variant.capitalize }
+      end
+    end
+  end
+end