ts-morph 0.1.1

data/examples/basic_transformation.rb

@@ -0,0 +1,63 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+require 'bundler/setup'
+require 'ts/morph'
+
+# Ensure Node dependencies are installed
+unless Ts::Morph.service_available?
+  puts "Installing Node.js dependencies..."
+  Ts::Morph.install_dependencies
+end
+
+# Sample React component code
+code = <<~TSX
+  import React from 'react';
+  
+  const LoginForm = () => {
+    return (
+      <form>
+        <input type="email" placeholder="Email" />
+        <input type="password" placeholder="Password" />
+        <Button>Login</Button>
+        <Button>Cancel</Button>
+      </form>
+    );
+  };
+  
+  export default LoginForm;
+TSX
+
+puts "Original code:"
+puts code
+puts "\n" + "="*50 + "\n"
+
+# Define transformations
+transformations = [
+  # Add variant props to buttons
+  {
+    type: 'addDefaultProps',
+    component: 'Button',
+    props: { variant: 'primary', size: 'medium' }
+  },
+  # Wrap form in FormProvider
+  {
+    type: 'wrapComponents',
+    target: 'form',
+    wrapper: 'FormProvider'
+  },
+  # Add necessary imports
+  {
+    type: 'addImports',
+    imports: [
+      { from: '@/components/ui', named: ['Button', 'FormProvider'] },
+      { from: '@/hooks', named: ['useForm'] }
+    ]
+  }
+]
+
+# Transform the code
+transformed = Ts::Morph.transform(code, transformations)
+
+puts "Transformed code:"
+puts transformed

data/examples/rails_integration.rb

@@ -0,0 +1,174 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+# Example of integrating ts-morph with a Rails application
+# This would typically go in app/services/react_transformer_service.rb
+
+require 'bundler/setup'
+require 'ts/morph'
+require 'ts/morph/transformations'
+
+class ReactTransformerService
+  include Ts::Morph::Transformations
+
+  class << self
+    # Transform React code for a specific site configuration
+    def transform_for_site(react_code, site)
+      transformations = build_transformations_for_site(site)
+      Ts::Morph.transform(react_code, transformations)
+    end
+
+    # Standardize all components in the code
+    def standardize_components(react_code)
+      transformations = [
+        # Ensure all buttons have consistent styling
+        add_default_props('Button', {
+          variant: 'primary',
+          size: 'medium',
+          className: 'transition-all duration-200'
+        }),
+        
+        # Wrap forms with validation provider
+        wrap_components('form', 'FormProvider'),
+        
+        # Add standard imports
+        add_imports([
+          import_spec(from: '@/components/ui', named: ['Button', 'Card', 'Input']),
+          import_spec(from: '@/lib/utils', named: ['cn']),
+          import_spec(from: 'react', named: ['useState', 'useEffect'])
+        ])
+      ]
+      
+      Ts::Morph.transform(react_code, transformations)
+    end
+
+    # Apply a theme to components
+    def apply_theme(react_code, theme_name)
+      theme = load_theme(theme_name)
+      
+      transformations = [
+        inject_styles(theme[:component_styles]),
+        add_imports([import_spec(from: '@/themes', default: 'theme')])
+      ]
+      
+      Ts::Morph.transform(react_code, transformations)
+    end
+
+    private
+
+    def build_transformations_for_site(site)
+      transformations = []
+
+      # Add site-specific button styling
+      if site.button_style
+        transformations << add_default_props('Button', 
+          site.button_style.symbolize_keys
+        )
+      end
+
+      # Apply site theme
+      if site.theme_name
+        theme = load_theme(site.theme_name)
+        transformations << inject_styles(theme[:component_styles])
+      end
+
+      # Add site-specific imports
+      if site.uses_analytics?
+        transformations << add_imports([
+          import_spec(from: '@/analytics', named: ['trackEvent'])
+        ])
+      end
+
+      transformations
+    end
+
+    def load_theme(theme_name)
+      themes = {
+        'modern' => {
+          component_styles: {
+            'Container' => {
+              padding: '2rem',
+              maxWidth: '1200px',
+              margin: '0 auto'
+            },
+            'Card' => {
+              borderRadius: '12px',
+              boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+              padding: '1.5rem'
+            },
+            'Button' => {
+              borderRadius: '8px',
+              fontWeight: '600'
+            }
+          }
+        },
+        'minimal' => {
+          component_styles: {
+            'Container' => {
+              padding: '1rem',
+              maxWidth: '960px',
+              margin: '0 auto'
+            },
+            'Card' => {
+              border: '1px solid #e5e5e5',
+              padding: '1rem'
+            },
+            'Button' => {
+              border: '1px solid currentColor',
+              background: 'transparent'
+            }
+          }
+        }
+      }
+      
+      themes[theme_name] || themes['modern']
+    end
+  end
+end
+
+# Example usage
+if __FILE__ == $0
+  # Sample component
+  component_code = <<~TSX
+    import React from 'react';
+    
+    const Dashboard = () => {
+      return (
+        <Container>
+          <h1>Welcome to Dashboard</h1>
+          <Card>
+            <h2>Your Stats</h2>
+            <Button onClick={() => console.log('Refresh')}>
+              Refresh Data
+            </Button>
+          </Card>
+        </Container>
+      );
+    };
+    
+    export default Dashboard;
+  TSX
+
+  puts "Original component:"
+  puts component_code
+  puts "\n" + "="*50 + "\n"
+
+  # Mock site object
+  Site = Struct.new(:button_style, :theme_name, :uses_analytics?) do
+    def uses_analytics?
+      self[:uses_analytics?] || false
+    end
+  end
+
+  site = Site.new(
+    { variant: 'primary', size: 'large' },
+    'modern',
+    true
+  )
+
+  # Transform for site
+  transformed = ReactTransformerService.transform_for_site(component_code, site)
+  
+  puts "Transformed for site:"
+  puts transformed
+end