Address PR feedback: Fix type imports, security, and add CSS modules

Type-only import fixes:
- Use type-only imports for HelloWorldState in HelloWorldContainer.ts
- Separate value/type imports in helloWorldStore.ts with PreloadedState typing
- Fix PropsFromRedux import to type-only in HelloWorld.tsx

Package management fixes:
- Remove unnecessary @types/react-redux dependency (react-redux now bundles types)
- Add -T alias to ReactWithReduxGenerator for --typescript option
- Fix TypeScript dependency installation to use GeneratorHelper properly

Security improvements:
- Add package manager validation to prevent command injection
- Use allowlist of valid package managers (npm, yarn, pnpm, bun)

Type definition enhancements:
- Add CSS module type definitions for .module.css/.scss/.sass files
- Create app/javascript/types/css-modules.d.ts automatically when TypeScript is enabled

All changes maintain backward compatibility and improve type safety.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: justin808

lib/generators/react_on_rails/install_generator.rb

@@ -66,7 +66,10 @@ def print_generator_messages
 
       def invoke_generators
         ensure_shakapacker_installed
-        install_typescript_dependencies if options.typescript?
+        if options.typescript?
+          install_typescript_dependencies
+          create_css_module_types
+        end
         invoke "react_on_rails:base", [], { typescript: options.typescript? }
         if options.redux?
           invoke "react_on_rails:react_with_redux", [], { typescript: options.typescript? }
@@ -314,10 +317,6 @@ def missing_package_manager?
       def install_typescript_dependencies
         puts Rainbow("📝 Installing TypeScript dependencies...").yellow
 
-        # Determine the package manager to use
-        package_manager = detect_package_manager
-        return unless package_manager
-
         # Install TypeScript and React type definitions
         typescript_packages = %w[
           typescript
@@ -326,10 +325,48 @@ def install_typescript_dependencies
           @babel/preset-typescript
         ]
 
+        # Try using GeneratorHelper first (package manager agnostic)
         return if add_npm_dependencies(typescript_packages, dev: true)
 
+        # Fallback to npm if GeneratorHelper fails
         success = run "npm install --save-dev #{typescript_packages.join(' ')}"
-        handle_npm_failure("TypeScript dependencies", typescript_packages) unless success
+        unless success
+          warning = <<~MSG.strip
+            ⚠️  Failed to install TypeScript dependencies automatically.
+
+            Please run manually:
+                npm install --save-dev #{typescript_packages.join(' ')}
+          MSG
+          GeneratorMessages.add_warning(warning)
+        end
+      end
+
+      def create_css_module_types
+        puts Rainbow("📝 Creating CSS module type definitions...").yellow
+
+        # Ensure the types directory exists
+        FileUtils.mkdir_p("app/javascript/types")
+
+        css_module_types_content = <<~TS.strip
+          // TypeScript definitions for CSS modules
+          declare module "*.module.css" {
+            const classes: { [key: string]: string };
+            export default classes;
+          }
+
+          declare module "*.module.scss" {
+            const classes: { [key: string]: string };
+            export default classes;
+          }
+
+          declare module "*.module.sass" {
+            const classes: { [key: string]: string };
+            export default classes;
+          }
+        TS
+
+        File.write("app/javascript/types/css-modules.d.ts", css_module_types_content)
+        puts Rainbow("✅ Created CSS module type definitions").green
       end
 
       def create_typescript_config

lib/generators/react_on_rails/react_with_redux_generator.rb

@@ -14,7 +14,8 @@ class ReactWithReduxGenerator < Rails::Generators::Base
       class_option :typescript,
                    type: :boolean,
                    default: false,
-                   desc: "Generate TypeScript files"
+                   desc: "Generate TypeScript files",
+                   aliases: "-T"
 
       def create_redux_directories
         # Create auto-registration directory structure for Redux
@@ -82,23 +83,13 @@ def add_redux_npm_dependencies
         # Try using GeneratorHelper first (package manager agnostic)
         success = add_npm_dependencies(regular_packages)
 
-        # Add TypeScript types as dev dependency if TypeScript is enabled
-        if options.typescript?
-          types_success = add_npm_dependencies(%w[@types/react-redux], dev: true)
-          success &&= types_success
-        end
-
         # Fallback to package manager detection if GeneratorHelper fails
         return if success
 
         package_manager = detect_package_manager
         return unless package_manager
 
         install_packages_with_fallback(regular_packages, dev: false, package_manager: package_manager)
-
-        return unless options.typescript?
-
-        install_packages_with_fallback(%w[@types/react-redux], dev: true, package_manager: package_manager)
       end
 
       private
@@ -120,6 +111,12 @@ def install_packages_with_fallback(packages, dev:, package_manager:)
       end
 
       def build_install_command(package_manager, dev, packages_str)
+        # Security: Validate package manager to prevent command injection
+        allowed_package_managers = %w[npm yarn pnpm bun].freeze
+        unless allowed_package_managers.include?(package_manager)
+          raise ArgumentError, "Invalid package manager: #{package_manager}"
+        end
+
         commands = {
           "npm" => { dev: "npm install --save-dev", prod: "npm install" },
           "yarn" => { dev: "yarn add --dev", prod: "yarn add" },

lib/generators/react_on_rails/templates/redux/base/app/javascript/bundles/HelloWorld/components/HelloWorld.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import * as style from './HelloWorld.module.css';
-import { PropsFromRedux } from '../containers/HelloWorldContainer';
+import type { PropsFromRedux } from '../containers/HelloWorldContainer';
 
 // Component props are inferred from Redux container
 type HelloWorldProps = PropsFromRedux;

lib/generators/react_on_rails/templates/redux/base/app/javascript/bundles/HelloWorld/containers/HelloWorldContainer.ts

@@ -3,7 +3,7 @@
 import { connect, ConnectedProps } from 'react-redux';
 import HelloWorld from '../components/HelloWorld';
 import * as actions from '../actions/helloWorldActionCreators';
-import { HelloWorldState } from '../reducers/helloWorldReducer';
+import type { HelloWorldState } from '../reducers/helloWorldReducer';
 
 // Which part of the Redux global state does our component want to receive as props?
 const mapStateToProps = (state: HelloWorldState) => ({ name: state.name });

lib/generators/react_on_rails/templates/redux/base/app/javascript/bundles/HelloWorld/store/helloWorldStore.ts

@@ -1,5 +1,7 @@
-import { createStore, Store } from 'redux';
-import helloWorldReducer, { HelloWorldState } from '../reducers/helloWorldReducer';
+import { createStore } from 'redux';
+import type { Store, PreloadedState } from 'redux';
+import helloWorldReducer from '../reducers/helloWorldReducer';
+import type { HelloWorldState } from '../reducers/helloWorldReducer';
 
 // Rails props interface - customize based on your Rails controller
 export interface RailsProps {
@@ -11,6 +13,6 @@ export interface RailsProps {
 export type HelloWorldStore = Store<HelloWorldState>;
 
 const configureStore = (railsProps: RailsProps): HelloWorldStore =>
-  createStore(helloWorldReducer, railsProps);
+  createStore(helloWorldReducer, railsProps as PreloadedState<HelloWorldState>);
 
 export default configureStore;