Add Devcontainers Config and Rewrite PhlexUI Documentation

.devcontainer/Dockerfile

@@ -0,0 +1,3 @@
+# Make sure RUBY_VERSION matches the Ruby version in .ruby-version
+ARG RUBY_VERSION=3.3.0
+FROM ghcr.io/rails/devcontainer/images/ruby:$RUBY_VERSION

.devcontainer/compose.yaml

@@ -0,0 +1,57 @@
+name: "phlexui-web"
+
+services:
+  rails-app:
+    build:
+      context: ..
+      dockerfile: .devcontainer/Dockerfile
+
+    volumes:
+    - ../..:/workspaces:cached
+
+    # Overrides default command so things don't shut down after the process ends.
+    command: sleep infinity
+
+    networks:
+    - default
+
+    # Uncomment the next line to use a non-root user for all processes.
+    # user: vscode
+
+    # Use "forwardPorts" in **devcontainer.json** to forward an app port locally.
+    # (Adding the "ports" property to this file will not forward from a Codespace.)
+    ports:
+    - 45678:45678
+    depends_on:
+    - selenium
+    - redis
+    - postgres
+
+  selenium:
+    image: seleniarm/standalone-chromium
+    restart: unless-stopped
+    networks:
+    - default
+
+  redis:
+    image: redis:7.2
+    restart: unless-stopped
+    networks:
+    - default
+    volumes:
+    - redis-data:/data
+
+  postgres:
+    image: postgres:16.1
+    restart: unless-stopped
+    networks:
+    - default
+    volumes:
+    - postgres-data:/var/lib/postgresql/data
+    environment:
+        POSTGRES_USER: postgres
+        POSTGRES_PASSWORD: postgres
+
+volumes:
+  redis-data:
+  postgres-data:

.devcontainer/devcontainer.json

@@ -0,0 +1,49 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/ruby
+{
+  "name": "phlexui-web",
+  "dockerComposeFile": "compose.yaml",
+  "service": "rails-app",
+  "workspaceFolder": "/workspaces/${localWorkspaceFolderBasename}",
+
+  // Features to add to the dev container. More info: https://containers.dev/features.
+  "features": {
+    "ghcr.io/devcontainers/features/github-cli:1": {},
+    "ghcr.io/rails/devcontainer/features/activestorage": {},
+    "ghcr.io/rails/devcontainer/features/postgres-client": {},
+    "ghcr.io/devcontainers/features/node:1": { "version": 20 }
+  },
+
+  "containerEnv": {
+    "CAPYBARA_SERVER_PORT": "45678",
+    "SELENIUM_HOST": "selenium",
+    "REDIS_URL": "redis://redis:6379/1",
+    "DB_HOST": "postgres"
+  },
+
+  // Use 'forwardPorts' to make a list of ports inside the container available locally.
+  "forwardPorts": [3000, 5432, 6379],
+
+  // Configure tool-specific properties.
+  // "customizations": {},
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        "Shopify.ruby-lsp",
+        "testdouble.vscode-standard-ruby"
+      ]
+    },
+    "settings": {
+      "rubyLsp.rubyVersionManager": {
+        "identifier": "rbenv"
+      }
+    }
+  },
+
+  // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+  // "remoteUser": "root",
+
+
+  // Use 'postCreateCommand' to run commands after the container is created.
+  "onCreateCommand": "bin/setup"
+}

.vscode/settings.json

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

Gemfile

@@ -86,5 +86,6 @@ gem "rack-www" # used to redirect www to non-www subdomain
 gem "rollbar"
 
 gem "phlex-rails"
-gem "phlex_ui"
+# gem "phlex_ui"
 # gem "phlex_ui", path: "../phlex_ui"
+gem "phlex_ui", git: "https://github.com/PhlexUI/phlex_ui.git", branch: "main"

Gemfile.lock

@@ -1,3 +1,14 @@
+GIT
+  remote: https://github.com/PhlexUI/phlex_ui.git
+  revision: 73ea7175cdd53a9f5005baf3d1d410240518f151
+  branch: main
+  specs:
+    phlex_ui (0.1.10)
+      activesupport (>= 6.0)
+      phlex (~> 1.10)
+      rouge (~> 4.2.0)
+      zeitwerk (~> 2.6)
+
 GEM
   remote: https://rubygems.org/
   specs:
@@ -92,7 +103,6 @@ GEM
     debug (1.9.1)
       irb (~> 1.10)
       reline (>= 0.3.8)
-    diff-lcs (1.5.1)
     dotenv (2.8.1)
     dotenv-rails (2.8.1)
       dotenv (= 2.8.1)
@@ -164,7 +174,6 @@ GEM
     octokit (5.6.1)
       faraday (>= 1, < 3)
       sawyer (~> 0.9)
-    paco (0.2.3)
     parallel (1.24.0)
     parser (3.3.0.5)
       ast (~> 2.4.1)
@@ -174,11 +183,6 @@ GEM
     phlex-rails (1.2.1)
       phlex (~> 1.10.0)
       railties (>= 6.1, < 8)
-    phlex_ui (0.1.8)
-      phlex (~> 1.10)
-      rouge (~> 4.2.0)
-      ruby-next (~> 1.0)
-      zeitwerk (~> 2.6)
     postmark (1.25.0)
       json
     postmark-rails (0.22.1)
@@ -234,7 +238,6 @@ GEM
     regexp_parser (2.8.3)
     reline (0.4.1)
       io-console (~> 0.5)
-    require-hooks (0.2.2)
     rexml (3.2.6)
     rollbar (3.4.2)
     rouge (4.2.1)
@@ -254,15 +257,6 @@ GEM
     rubocop-performance (1.20.2)
       rubocop (>= 1.48.1, < 2.0)
       rubocop-ast (>= 1.30.0, < 2.0)
-    ruby-next (1.0.2)
-      paco (~> 0.2)
-      require-hooks (~> 0.2)
-      ruby-next-core (= 1.0.2)
-      ruby-next-parser (>= 3.2.2.0)
-      unparser (~> 0.6.0)
-    ruby-next-core (1.0.2)
-    ruby-next-parser (3.2.2.0)
-      parser (>= 3.0.3.1)
     ruby-progressbar (1.13.0)
     ruby2_keywords (0.0.5)
     rubyzip (2.3.2)
@@ -305,9 +299,6 @@ GEM
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
     unicode-display_width (2.5.0)
-    unparser (0.6.13)
-      diff-lcs (~> 1.3)
-      parser (>= 3.3.0)
     web-console (4.2.1)
       actionview (>= 6.0.0)
       activemodel (>= 6.0.0)
@@ -342,7 +333,7 @@ DEPENDENCIES
   octokit (~> 5.0)
   pg (~> 1.1)
   phlex-rails
-  phlex_ui
+  phlex_ui!
   postmark-rails
   pry
   puma (~> 5.0)

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,31 +6,42 @@ 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|
-        t.column("Component") do |component|
-          div(class: "flex items-center space-x-2") do
-            render PhlexUI::Typography::InlineCode.new { component.name }
-            if component.builder
-              render PhlexUI::Badge.new(size: :sm, variant: :sky) { "Builder" }
+      Table do
+        TableHeader do
+          TableRow do
+            div(class: "flex items-center space-x-2") do
+              TableHead { "Component" }
             end
+            TableHead(class: "w-full grow-1") { "Built using" }
+            TableHead(class: "text-right") { "Source" }
           end
         end
-        t.column("Built using", header_attrs: {class: "w-full grow-1"}) do |component|
-          component.built_using
-          case component.built_using&.to_sym
-          when :phlex
-            render PhlexUI::Badge.new(size: :sm, variant: :rose) { "Phlex" }
-          when :stimulus
-            render PhlexUI::Badge.new(size: :sm, variant: :amber) { "Stimulus JS" }
-          end
-        end
-        t.column("Source", header_attrs: {class: "text-right"}) do |component|
-          div(class: "flex justify-end") do
-            render PhlexUI::Link.new(href: component.source, variant: :outline, size: :sm) do
-              github_icon
-              span(class: "ml-2") { "See source" }
+
+        TableBody do
+          @components.each do |component|
+            TableRow do
+              TableCell do
+                TypographyInlineCode { component.name }
+              end
+              TableCell do
+                component.built_using
+                case component.built_using&.to_sym
+                when :phlex
+                  Badge(size: :sm, variant: :rose) { "Phlex" }
+                when :stimulus
+                  Badge(size: :sm, variant: :amber) { "Stimulus JS" }
+                end
+              end
+              TableCell do
+                div(class: "flex justify-end") do
+                  Link(href: component.source, variant: :outline, size: :sm) do
+                    github_icon
+                    span(class: "ml-2") { "See source" }
+                  end
+                end
+              end
             end
           end
         end

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,12 +13,12 @@ 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
-          render PhlexUI::Typography::P.new(class: "text-muted-foreground text-center flex flex-col sm:flex-row items-center gap-y-2 gap-x-2") do
+          TypographyP(class: "text-muted-foreground text-center flex flex-col sm:flex-row items-center gap-y-2 gap-x-2") do
             svg(
               xmlns: "http://www.w3.org/2000/svg",
               fill: "none",

app/views/components/docs/premium_badge.rb

@@ -2,7 +2,7 @@
 
 class Docs::PremiumBadge < ApplicationComponent
   def view_template
-    render PhlexUI::Badge.new(variant: :violet) do
+    Badge(variant: :violet) do
       svg(
         xmlns: "http://www.w3.org/2000/svg",
         viewbox: "0 0 24 24",