Wip

.devcontainer/devcontainer.json

@@ -10,7 +10,8 @@
   "features": {
     "ghcr.io/devcontainers/features/github-cli:1": {},
     "ghcr.io/rails/devcontainer/features/activestorage": {},
-    "ghcr.io/rails/devcontainer/features/postgres-client": {}
+    "ghcr.io/rails/devcontainer/features/postgres-client": {},
+    "ghcr.io/devcontainers/features/node:1": { "version": 20 }
   },
 
   "containerEnv": {
@@ -44,5 +45,5 @@
 
 
   // Use 'postCreateCommand' to run commands after the container is created.
-  "postCreateCommand": "bin/setup"
+  "onCreateCommand": "bin/setup"
 }

.vscode/settings.json

@@ -1,4 +1,7 @@
 {
   "editor.detectIndentation": false,
-  "editor.tabSize": 2
+  "editor.tabSize": 2,
+  "[ruby]": {
+    "editor.formatOnSave": true,
+  },
 }

Gemfile

@@ -88,4 +88,4 @@ gem "rollbar"
 gem "phlex-rails"
 # gem "phlex_ui"
 # gem "phlex_ui", path: "../phlex_ui"
-gem "phlex_ui", git: "https://github.com/PhlexUI/phlex_ui.git"
+gem "phlex_ui", git: "https://github.com/cirdes/phlex_ui.git", branch: "cirdes:fix-clipboard"

app/controllers/docs_controller.rb

@@ -24,10 +24,6 @@ def customizing_components
     render Docs::GettingStarted::CustomizingComponentsView.new
   end
 
-  def core_concepts
-    render Docs::GettingStarted::CoreConceptsView.new
-  end
-
   # INSTALLATION
   def installation_rails_bundler
     render Docs::Installation::RailsBundlerView.new

app/views/components/application_component.rb

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 class ApplicationComponent < Phlex::HTML
+  include PhlexUI
   include Phlex::Rails::Helpers::Routes
 
   if Rails.env.development?

app/views/components/docs/components_table.rb

@@ -6,9 +6,9 @@ def initialize(components)
   end
 
   def view_template
-    render PhlexUI::Typography::H2.new { "Components" }
+    TypographyH2 { "Components" }
     div(class: "border rounded-lg overflow-hidden") do
-      render PhlexUI::Table::Builder.new(@components) do |t|
+      Table::Builder.new(@components) do |t|
         t.column("Component") do |component|
           div(class: "flex items-center space-x-2") do
             render PhlexUI::Typography::InlineCode.new { component.name }

app/views/components/docs/header.rb

@@ -9,8 +9,8 @@ def initialize(title: nil, description: nil, premium: false)
 
   def view_template
     div(class: "space-y-2") do
-      render PhlexUI::Typography::H1.new { @title }
-      render PhlexUI::Typography::Lead.new { @description }
+      TypographyH1 { @title }
+      TypographyLead { @description }
     end
   end
 

app/views/components/docs/installation_instructions_coming_soon.rb

@@ -13,8 +13,8 @@ def view_template(&block)
   def render_header
     div do
       div(class: "space-y-1 mb-4") do
-        render PhlexUI::Typography::H4.new { @title } if @title
-        render PhlexUI::Typography::P.new { @description } if @description
+        TypographyH4 { @title } if @title
+        TypographyP { @description } if @description
       end
       div(class: "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 relative rounded-md border") do
         div(class: "preview flex min-h-[350px] w-full justify-center p-10 items-center") do

app/views/components/docs/visual_code_example.rb

@@ -14,7 +14,7 @@ def view_template(&block)
 
     div(id: @title) do
       div(class: "relative") do
-        render PhlexUI::Tabs.new(default_value: "preview") do
+        Tabs(default_value: "preview") do
           div(class: "flex justify-between items-end mb-4 gap-x-2") do
             render_header
             div(class: "flex-grow") # Spacer
@@ -33,30 +33,30 @@ def render_header
     div do
       if @title
         div(class: "flex items-center gap-x-2 mb-1") do
-          render PhlexUI::Typography::H4.new { @title.capitalize }
+          TypographyH4 { @title.capitalize }
         end
       end
       p { @description } if @description
     end
   end
 
   def render_tab_triggers
-    render PhlexUI::Tabs::List.new do
+    TabsList do
       render_tab_trigger("preview", "Preview", method(:eye_icon))
       render_tab_trigger("code", "Code", method(:code_icon))
     end
   end
 
   def render_tab_trigger(value, label, icon_method)
-    render PhlexUI::Tabs::Trigger.new(value: value) do
+    TabsTrigger(value: value) do
       icon_method.call
       span { label }
     end
   end
 
   def render_tab_contents(&block)
-    render PhlexUI::Tabs::Content.new(value: "preview") { render_preview_tab(&block) }
-    render PhlexUI::Tabs::Content.new(value: "code") { render_code_tab }
+    TabsContent(value: "preview") { render_preview_tab(&block) }
+    TabsContent(value: "code") { render_code_tab }
   end
 
   def render_preview_tab(&block)
@@ -70,7 +70,7 @@ def render_preview_tab(&block)
 
   def render_code_tab
     div(class: "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 relative rounded-md border") do
-      render PhlexUI::Codeblock.new(@display_code, syntax: :ruby, class: "-m-px")
+      Codeblock(@display_code, syntax: :ruby, class: "-m-px")
     end
   end
 
@@ -114,112 +114,3 @@ def code_icon
     end
   end
 end
-
-# # frozen_string_literal: true
-
-# class Docs::VisualCodeExample < ApplicationComponent
-#     def initialize(title: nil, description: nil, context: nil)
-#         @title = title
-#         @description = description
-#         @context = context
-#     end
-
-#     def view_template(&block)
-#         @display_code = capture(&block)
-
-#         div(id: @title) do
-#             render_header if @title || @description
-#             render_tabs(&block)
-#         end
-#     end
-
-#     private
-
-#     def render_header
-#         div(class: 'space-y-1 mb-4') do
-#             render PhlexUI::Typography::H4.new { @title } if @title
-#             render PhlexUI::Typography::P.new { @description } if @description
-#         end
-#     end
-
-#     def render_tabs(&block)
-#         render PhlexUI::Tabs.new(default_value: "preview") do
-#             render_tab_triggers
-#             render_tab_contents(&block)
-#         end
-#     end
-
-#     def render_tab_triggers
-#         render PhlexUI::Tabs::List.new do
-#             render_tab_trigger("preview", "Preview", method(:eye_icon))
-#             render_tab_trigger("code", "Code", method(:code_icon))
-#         end
-#     end
-
-#     def render_tab_trigger(value, label, icon_method)
-#         render PhlexUI::Tabs::Trigger.new(value: value) do
-#             icon_method.call
-#             span { label }
-#         end
-#     end
-
-#     def render_tab_contents(&block)
-#         render PhlexUI::Tabs::Content.new(value: "preview") { render_preview_tab(&block) }
-#         render PhlexUI::Tabs::Content.new(value: "code") { render_code_tab }
-#     end
-
-#     def render_preview_tab(&block)
-#         div(class: 'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 relative rounded-md border') do
-#             div(class: 'preview flex min-h-[350px] w-full justify-center p-10 items-center') do
-#                 decoded_code = CGI.unescapeHTML(@display_code)
-#                 @context.instance_eval(decoded_code)
-#             end
-#         end
-#     end
-
-#     def render_code_tab
-#         div(class: 'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 relative rounded-md border') do
-#             render Codeblock.new { @display_code }
-#         end
-#     end
-
-#     def eye_icon
-#         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:
-#                 "M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
-#             )
-#             s.path(
-#                 stroke_linecap: "round",
-#                 stroke_linejoin: "round",
-#                 d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-#             )
-#         end
-#     end
-
-#     def code_icon
-#         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: "M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"
-#             )
-#         end
-#     end
-# end

app/views/components/shared/logo.rb

@@ -3,11 +3,11 @@
 class Shared::Logo < ApplicationComponent
   def view_template
     a(href: helpers.root_url, class: "mr-6 flex items-center space-x-2") do
-      render PhlexUI::Typography::H4.new(class: "flex items-center") {
+      TypographyH4(class: "flex items-center") {
         img(src: helpers.image_url("logo.svg"), class: "h-4 block dark:hidden")
         img(src: helpers.image_url("logo_dark.svg"), class: "h-4 hidden dark:block")
         span(class: "sr-only") { "PhlexUI" }
-        render PhlexUI::Badge.new(variant: :amber, size: :sm, class: "ml-2 whitespace-nowrap") { "Pre Release" }
+        Badge(variant: :amber, size: :sm, class: "ml-2 whitespace-nowrap") { "Pre Release" }
       }
     end
   end

app/views/components/shared/menu.rb

@@ -8,7 +8,7 @@ def view_template
         main_link("Docs", helpers.docs_introduction_path)
         main_link("Components", helpers.docs_accordion_path)
         main_link("Themes", helpers.theme_path("default"))
-        main_link("Github", ENV["PHLEXUI_GITHUB_LINK"])
+        main_link("Github", "https://github.com/PhlexUI/phlex_ui")
         main_link("Discord", ENV["DISCORD_INVITE_LINK"])
         main_link("Twitter", ENV["PHLEXUI_TWITTER_LINK"])
       end
@@ -32,7 +32,7 @@ def view_template
       # COMPONENTS
       h4(class: "mb-1 mt-4 rounded-md px-2 py-1 text-sm font-semibold flex items-center gap-x-2") do
         plain "Components"
-        render PhlexUI::Badge.new(variant: :primary, size: :sm) { components.count.to_s }
+        Badge(variant: :primary, size: :sm) { components.count.to_s }
       end
       div(class: "grid grid-flow-row auto-rows-max text-sm") do
         components.each do |component|
@@ -43,7 +43,7 @@ def view_template
       # COMPONENTS COMING SOON
       h4(class: "mb-1 mt-4 rounded-md px-2 py-1 text-sm font-semibold flex items-center gap-x-2") do
         plain "Coming Soon"
-        render PhlexUI::Badge.new(variant: :primary, size: :sm) { components_coming_soon.count.to_s }
+        Badge(variant: :primary, size: :sm) { components_coming_soon.count.to_s }
         svg(
           xmlns: "http://www.w3.org/2000/svg",
           viewbox: "0 0 24 24",
@@ -71,7 +71,6 @@ def getting_started_links
     [
       {name: "Introduction", path: helpers.docs_introduction_path},
       {name: "Installation", path: helpers.docs_installation_path},
-      {name: "Core concepts", path: helpers.docs_core_concepts_path},
       {name: "Dark mode", path: helpers.docs_dark_mode_path},
       {name: "Theming", path: helpers.docs_theming_path},
       {name: "Customizing components", path: helpers.docs_customizing_components_path}
@@ -158,7 +157,7 @@ def menu_link(component)
     a(href: component[:path], class: tokens("group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline", -> { current_path } => "text-foreground font-medium", -> { !current_path } => "text-muted-foreground")) do
       span(class: "flex items-center gap-x-1") do
         span { component[:name] }
-        render PhlexUI::Badge.new(variant: :success, size: :sm, class: "ml-1") { component[:badge] } if component[:badge]
+        Badge(variant: :success, size: :sm, class: "ml-1") { component[:badge] } if component[:badge]
       end
     end
   end

app/views/components/shared/mobile_menu.rb

@@ -6,21 +6,21 @@ def initialize(**attributes)
   end
 
   def view_template
-    render PhlexUI::Sheet.new(class: @attributes[:class]) do
-      render PhlexUI::Sheet::Trigger.new do
-        render PhlexUI::Button.new(variant: :ghost, icon: true) do
+    Sheet(class: @attributes[:class]) do
+      SheetTrigger do
+        Button(variant: :ghost, icon: true) do
           menu_icon
         end
       end
-      render PhlexUI::Sheet::Content.new(class: "w-[300px]", side: :left) do
+      SheetContent(class: "w-[300px]", side: :left) do
         div(class: "flex flex-col h-full") do
-          render PhlexUI::Sheet::Header.new do
+          SheetHeader do
             div(class: "pl-2") do
               render Shared::Logo.new
             end
           end
           div(class: "flex-grow overflow-y-scroll") do
-            render PhlexUI::Sheet::Middle.new do
+            SheetMiddle do
               render Shared::Menu.new
             end
           end

app/views/components/shared/navbar.rb

@@ -8,9 +8,9 @@ def view_template
           render Shared::MobileMenu.new(class: "md:hidden")
           render Shared::Logo.new
 
-          render PhlexUI::Link.new(href: helpers.docs_introduction_path, variant: :ghost, class: "hidden md:inline-block") { "Docs" }
-          render PhlexUI::Link.new(href: helpers.docs_accordion_path, variant: :ghost, class: "hidden md:inline-block") { "Components" }
-          render PhlexUI::Link.new(href: helpers.theme_path("default"), variant: :ghost, class: "hidden md:inline-block") { "Themes" }
+          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" }
         end
         div(class: "flex items-center gap-x-2 md:divide-x") do
           div(class: "flex items-center") do
@@ -24,9 +24,9 @@ def view_template
   end
 
   def dark_mode_toggle
-    render PhlexUI::ThemeToggle.new do |toggle|
+    ThemeToggle do |toggle|
       toggle.light_mode do
-        render PhlexUI::Button.new(variant: :ghost, icon: true) do
+        Button(variant: :ghost, icon: true) do
           svg(
             xmlns: "http://www.w3.org/2000/svg",
             viewbox: "0 0 24 24",
@@ -42,7 +42,7 @@ def dark_mode_toggle
       end
 
       toggle.dark_mode do
-        render PhlexUI::Button.new(variant: :ghost, icon: true) do
+        Button(variant: :ghost, icon: true) do
           svg(
             xmlns: "http://www.w3.org/2000/svg",
             viewbox: "0 0 24 24",
@@ -62,7 +62,7 @@ def dark_mode_toggle
   end
 
   def twitter_link
-    render PhlexUI::Link.new(href: "https://twitter.com/phlexui", variant: :ghost, icon: true) do
+    Link(href: "https://twitter.com/phlexui", variant: :ghost, icon: true) do
       svg(
         viewbox: "0 0 20 20",
         aria_hidden: "true",
@@ -78,7 +78,7 @@ def twitter_link
   end
 
   def github_link
-    render PhlexUI::Link.new(href: ENV["PHLEXUI_GITHUB_LINK"], variant: :ghost, icon: true) do
+    Link(href: "https://github.com/PhlexUI/phlex_ui", variant: :ghost, icon: true) do
       github_icon
     end
   end