Fix CSS module configuration issues in generator examples

Fixes:
- Replace CSS modules with regular CSS imports in HelloWorld templates
- Rename HelloWorld.module.css files to HelloWorld.css
- Update import statements from CSS modules syntax to regular CSS imports
- Update generator copy operations to reference renamed CSS files

This resolves webpack compilation errors in generated examples:
- ERROR: Module parse failed: Unexpected token (1:0)
- You may need an appropriate loader to handle this file type

Changes:
- HelloWorld components now use className="bright" instead of className={style.bright}
- CSS files use standard class names instead of CSS module exports
- All HelloWorld templates (base, redux, client, server) updated consistently

Technical rationale:
CSS modules require additional webpack configuration and loader setup that's
not available by default in Shakapacker 8.x. Using regular CSS imports
provides the same styling functionality with simpler configuration.

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

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

Author: justin808

lib/generators/react_on_rails/base_generator.rb

@@ -49,9 +49,9 @@ def copy_js_bundle_files
         base_path = "base/base/"
         base_files = %w[app/javascript/packs/server-bundle.js]
 
-        # Only copy HelloWorld.module.css for non-Redux components
+        # Only copy HelloWorld.css for non-Redux components
         # Redux components handle their own CSS files
-        base_files << "app/javascript/src/HelloWorld/HelloWorld.module.css" unless options.redux?
+        base_files << "app/javascript/src/HelloWorld/HelloWorld.css" unless options.redux?
 
         base_files.each { |file| copy_file("#{base_path}#{file}", file) }
       end

lib/generators/react_on_rails/react_with_redux_generator.rb

@@ -25,8 +25,8 @@ def copy_base_files
                   "app/javascript/src/HelloWorldApp/ror_components/HelloWorldApp.client.jsx")
         copy_file("#{base_js_path}/app/javascript/bundles/HelloWorld/startup/HelloWorldApp.server.jsx",
                   "app/javascript/src/HelloWorldApp/ror_components/HelloWorldApp.server.jsx")
-        copy_file("#{base_js_path}/app/javascript/bundles/HelloWorld/components/HelloWorld.module.css",
-                  "app/javascript/src/HelloWorldApp/components/HelloWorld.module.css")
+        copy_file("#{base_js_path}/app/javascript/bundles/HelloWorld/components/HelloWorld.css",
+                  "app/javascript/src/HelloWorldApp/components/HelloWorld.css")
 
         # Update import paths in client component
         ror_client_file = "app/javascript/src/HelloWorldApp/ror_components/HelloWorldApp.client.jsx"

lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorld.module.css renamed to lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorld.css

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
-import * as style from './HelloWorld.module.css';
+import './HelloWorld.css';
 
 const HelloWorld = (props) => {
   const [name, setName] = useState(props.name);
@@ -10,7 +10,7 @@ const HelloWorld = (props) => {
       <h3>Hello, {name}!</h3>
       <hr />
       <form>
-        <label className={style.bright} htmlFor="name">
+        <label className="bright" htmlFor="name">
           Say hello to:
           <input id="name" type="text" value={name} onChange={(e) => setName(e.target.value)} />
         </label>

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

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
-import * as style from '../HelloWorld.module.css';
+import '../HelloWorld.css';
 
 const HelloWorld = (props) => {
   const [name, setName] = useState(props.name);
@@ -10,7 +10,7 @@ const HelloWorld = (props) => {
       <h3>Hello, {name}!</h3>
       <hr />
       <form>
-        <label className={style.bright} htmlFor="name">
+        <label className="bright" htmlFor="name">
           Say hello to:
           <input id="name" type="text" value={name} onChange={(e) => setName(e.target.value)} />
         </label>

lib/generators/react_on_rails/templates/base/base/app/javascript/src/HelloWorld/HelloWorld.module.css renamed to lib/generators/react_on_rails/templates/base/base/app/javascript/src/HelloWorld/HelloWorld.css

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import * as style from './HelloWorld.module.css';
+import './HelloWorld.css';
 
 const HelloWorld = ({ name, updateName }) => (
   <div>
@@ -10,7 +10,7 @@ const HelloWorld = ({ name, updateName }) => (
     </h3>
     <hr />
     <form>
-      <label className={style.bright} htmlFor="name">
+      <label className="bright" htmlFor="name">
         Say hello to:
         <input id="name" type="text" value={name} onChange={(e) => updateName(e.target.value)} />
       </label>