react_to_rails 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 26bd74fbf51bf21c1df28eafd788693daea911a55489b1bf348b8fcdf1a3c8da
-  data.tar.gz: 408f21559f0fa31e3519a65b8851cac8d689ab161bc2c0ad13e95e06f28069db
+  metadata.gz: 2fbb427b028dbd40b73febc052ca5305da89181f686e7d247f297bf27dae42d7
+  data.tar.gz: 83c00c172263ac594204cab088dd0ffc61d0700bbc157cd7667e07d859fcb2f5
 SHA512:
-  metadata.gz: ab2435b3ee8b82b7f0ad4904efffeef7fed9f3b9bfc3b9a8f121ad83c5d493e321532fe122befeb2a5d9ef7e9a613104912a1cccefd5460664cf35b771d30763
-  data.tar.gz: 25afc03e34d5ad5f438106b7b589c88a90c5511809a9b2217108a6e7779f60bdc821c7d1ec452d792f6fcc52433c5bdcbc38200fb8e9be378b30ec9aa7ec6bd4
+  metadata.gz: c48d2b54304140d1b711f57f4690b80e5e53c3a1c5d1c5456d6546a2e2f719832b8f4768061e561aa59131dd73536590459e95ca9052937e051216d90ba9a994
+  data.tar.gz: 9851cae0047b631dd49e78146f777d7df5b5fa8b1c8912a934b7f222b4c3d7358f285a28d821430c7cfaec0dfb1ee71621faec8e6b66ddf639809abe9aed6231

data/README.md

@@ -4,17 +4,19 @@ This gem converts React components to Rails [View Components](https://viewcompon
 
 ## Background
 
-I created this tool use  with [Tailwind Plus](https://tailwindcss.com/plus/) (formerly Tailwind UI).
+I created this tool for use with [Tailwind Plus](https://tailwindcss.com/plus/) (formerly Tailwind UI).
 
 Tailwind Plus is a commercial product which provides high quality components for React and Vue.
 
-There are also plain HTML versions but they are awkward to work with, e.g.:
+There are also plain HTML versions but they are awkward to work with for Rails, e.g.:
 
 - You need to add ERB `<%= %>` placeholders for any content you're passing in.
 - The HTML is static so is missing any loops, conditionals, etc
 - Icons are converted to verbose SVG markup
 
-This tool generates a View Component based on the supplied React component which should be much more convenient for Rails.
+This tool generates a View Component based on the supplied React component which should be much more convenient for Rails. It also generates a corresponding test.
+
+It's likely that you'll need to still do _some_ work, but it should save a lot of time.
 
 For more details of the conversion process, you can look at the [prompt](./lib/react_to_rails/convert.rb).
 
@@ -88,8 +90,8 @@ The tool will output a report, and generate the view component files:
 
 And here is the generated code:
 
-* [app/component/pricing_component.html.erb](./examples/pricing_component.html.erb).
-* [app/components/pricing_component.rb](./examples/pricing_component.rb)
+* [app/component/pricing_component.html.erb](./test/approvals/pricing_component.html.erb).
+* [app/components/pricing_component.rb](./test/approvals/pricing_component.rb)
 
 ## Limitations
 

data/approvals/pricing_component_test.rb

@@ -0,0 +1,42 @@
+require "test_helper"
+
+class PricingComponentTest < ActiveSupport::TestCase
+  include ViewComponent::TestHelpers
+
+  test "it renders pricing tiers correctly" do
+    tiers = [
+      {
+        name: 'Hobby',
+        id: 'tier-hobby',
+        href: '#',
+        price_monthly: '$29',
+        description: "The perfect plan if you're just getting started with our product.",
+        features: ['25 products', 'Up to 10,000 subscribers', 'Advanced analytics', '24-hour support response time'],
+        featured: false
+      },
+      {
+        name: 'Enterprise',
+        id: 'tier-enterprise',
+        href: '#',
+        price_monthly: '$99',
+        description: 'Dedicated support and infrastructure for your company.',
+        features: [
+          'Unlimited products',
+          'Unlimited subscribers',
+          'Advanced analytics',
+          'Dedicated support representative',
+          'Marketing automations',
+          'Custom integrations'
+        ],
+        featured: true
+      }
+    ]
+    render_inline(PricingComponent.new(tiers: tiers))
+    assert_selector "h2", text: "Pricing"
+    assert_selector "h3", text: "Hobby"
+    assert_selector "h3", text: "Enterprise"
+    assert_selector "span", text: "$29"
+    assert_selector "span", text: "$99"
+    assert_selector "a", text: "Get started today"
+  end
+end

data/lib/react_to_rails/cli.rb

@@ -22,8 +22,12 @@ module ReactToRails
         exit 1
       end
 
-      client = OpenAI::Client.new
-      ReactToRails::Convert.for_path(path, client: client, name: name)
+      convert = ReactToRails::Convert.for_path(path, name: name)
+      convert.call
+
+      File.write("app/components/#{convert.component_file_name}.rb", convert.view_component_ruby_code)
+      File.write("app/components/#{convert.component_file_name}.html.erb", convert.erb_template)
+      File.write("test/components/#{convert.component_file_name}_test.rb", convert.view_component_test_ruby_code)
     rescue OptionParser::InvalidOption => e
       puts "Error: #{e.message}"
       puts

data/lib/react_to_rails/convert.rb

@@ -8,19 +8,52 @@ module ReactToRails
     required :summary, String, doc: "A summary of what was done"
     required :erb_template, String
     required :view_component_ruby_code, String
+    required :view_component_test_ruby_code, String
     required :demo_erb_code, String
   end
 
+  class Client
+    def initialize(openai_client: nil)
+      @openai_client = openai_client || OpenAI::Client.new
+    end
+
+    def call(prompt)
+      response = openai_client.responses.create(
+        model: :"gpt-4.1",
+        temperature: 0,
+        input: [
+          {role: "user", content: prompt}
+        ],
+        text: StructuredResponse
+      )
+
+      JSON.parse(response.output.first.content.first.to_json).fetch("parsed")
+    end
+
+    private
+
+    attr_reader :openai_client
+  end
+
   class Convert
-    def initialize(react_content, client:, name:)
+    attr_reader :react_content,
+      :client,
+      :name,
+      :summary,
+      :view_component_ruby_code,
+      :view_component_test_ruby_code,
+      :demo_erb_code,
+      :erb_template
+
+    def initialize(react_content, name:, client: nil)
       @react_content = react_content
-      @client = client
       @name = name
+      @client = client || Client.new
     end
 
-    def self.for_path(path, client:, name:)
+    def self.for_path(path, name:)
       react_content = File.read(path)
-      new(react_content, client: client, name: name).call
+      new(react_content, name: name)
     end
 
     def call
@@ -30,34 +63,28 @@ module ReactToRails
       puts
       puts "Waiting for OpenAI to respond..."
 
-      response = client.responses.create(
-        model: :"gpt-4.1",
-        temperature: 0,
-        input: [
-          {role: "user", content: prompt}
-        ],
-        text: StructuredResponse
-      )
-
-      puts "### RESPONSE ###"
-
-      response = JSON.parse(response.output.first.content.first.to_json).fetch("parsed")
+      response = Client.new.call(prompt)
 
       @summary = response.fetch("summary")
       @view_component_ruby_code = response.fetch("view_component_ruby_code")
       @erb_template = response.fetch("erb_template")
       @demo_erb_code = response.fetch("demo_erb_code")
+      @view_component_test_ruby_code = response.fetch("view_component_test_ruby_code")
 
-      component_file_name = @name.gsub(/([a-z\d])([A-Z])/, '\1_\2').downcase
-      File.write("app/components/#{component_file_name}.rb", @view_component_ruby_code)
-      File.write("app/components/#{component_file_name}.html.erb", @erb_template)
       puts @summary
+
+      return if @erb_template == "" || @view_component_ruby_code == ""
+
       puts
       puts "### EXAMPLE USAGE ###"
       puts
       puts @demo_erb_code
     end
 
+    def component_file_name
+      @name.gsub(/([a-z\d])([A-Z])/, '\1_\2').downcase
+    end
+
     private
 
     def prompt
@@ -98,6 +125,32 @@ module ReactToRails
         <%= render(MessageComponent.new(name: name)) %>
         ```
 
+        Also generate a basic component test, for example:
+
+        ```
+        require "test_helper"
+
+        class ExampleComponent < ActiveSupport::TestCase
+          include ViewComponent::TestHelpers
+
+          test "it renders correctly" do
+            title = "Component title"
+            description = "Component description"
+            people = [
+              { name: 'Andy', title: 'Developer' }
+            ]
+            example_component = ExampleComponent.new(title: title, description: description, people: people)
+
+            render_inline(example_component)
+
+            assert_selector "h1", text: title
+            assert_selector "p", text: description
+            assert_selector "td", text: people[0][:name]
+            assert_selector "td", text: people[0][:title]
+          end
+        end
+        ```
+
         Notes:
 
         * If the code contains components from `@headlessui/react' then explain that is not supported and don't attempt to convert.
@@ -110,17 +163,17 @@ module ReactToRails
         * Replace `<button>` tags with Rails `buton_tag` helper calls.
         * Replace `onClick` events with theoretical Stimulus calls.
         * Assume a heroicons helper is available, e.g.: <%= heroicon "magnifying-glass", options: { class: "text-primary-500" } %>
-        * Asssume a `class_names` helper is available which works just like React's `classNames` helper.
-        * If the component relies on JavaScript, suggest to use Stimulus or Turbo instead. Also provide https://github.com/excid3/tailwindcss-stimulus-components as a reference.
+        * Assume a `class_names` helper is available which works just like React's `classNames` helper.
+        * If the component relies on client-side behaviour, suggest to use Stimulus or Turbo instead. Also provide https://github.com/excid3/tailwindcss-stimulus-components as a reference.
         * If the code constains instructions such as "This example requires updating your template" then report those details.
-        * Let me know if any parts were not possible to accurately convert.
+        * Don't add HTML comment that weren't in the original.
+        * Let the user know if any parts were not possible to accurately convert.
+        * If `html_safe` is used then warn the user to check for potential security issues.
 
         ```
         #{react_content}
         ```
       EOS
     end
-
-    attr_reader :react_content, :client, :name, :summary, :view_component_ruby_code, :demo_erb_code, :erb_template
   end
 end

data/lib/react_to_rails/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ReactToRails
-  VERSION = "0.1.0"
+  VERSION = "0.2.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: react_to_rails
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - Andy Waite
@@ -48,9 +48,10 @@ files:
 - LICENSE.txt
 - README.md
 - Rakefile
+- approvals/pricing_component.html.erb
+- approvals/pricing_component.rb
+- approvals/pricing_component_test.rb
 - examples/pricing.jsx
-- examples/pricing_component.html.erb
-- examples/pricing_component.rb
 - exe/react_to_rails
 - lib/react_to_rails.rb
 - lib/react_to_rails/cli.rb