Move MUI dependencies to peerDependencies to resolve integration challenges (#17)

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: lucferbux <[email protected]>

Author: Copilot

README.md

@@ -7,9 +7,39 @@
 ## Installation
 
 ```bash
-npm install mod-arch-shared
+npm install mod-arch-shared @mui/material @mui/icons-material @mui/types sass sass-loader
 ```
 
+The library requires peer dependencies to be installed alongside the main package:
+- **MUI dependencies** (`@mui/material`, `@mui/icons-material`, `@mui/types`) are required for both PatternFly and MUI theme support
+- **SASS dependencies** (`sass`, `sass-loader`) are required to process SCSS files used by the library components
+
+### SASS/SCSS Processing Requirements
+
+This library contains SCSS files that need to be processed by your application's build system. You must:
+
+1. **Install the required dependencies:**
+   ```bash
+   npm install sass sass-loader
+   ```
+
+2. **Configure your webpack to handle SCSS files** by adding this rule to your webpack configuration:
+   ```js
+   {
+     test: /\.s[ac]ss$/i,
+     use: [
+       // Creates `style` nodes from JS strings
+       'style-loader',
+       // Translates CSS into CommonJS
+       'css-loader',
+       // Compiles Sass to CSS
+       'sass-loader',
+     ],
+   }
+   ```
+
+If you're using Create React App, Vite, or similar build tools, SCSS support is typically included by default when you install the `sass` package.
+
 ## Usage
 
 Import components and utilities as needed:
@@ -154,6 +184,8 @@ root.render(
 - **`Theme.Patternfly`**: Red Hat PatternFly design system (default)
 - **`Theme.MUI`**: Material-UI design system with CSS variables
 
+Both themes require the MUI peer dependencies to be installed.
+
 ### Using the Context in Components
 
 Once providers are set up, you can access the configuration and state throughout your application:

package-lock.json

@@ -43,7 +43,12 @@
   "license": "Apache-2.0",
   "peerDependencies": {
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react-dom": ">=16.8.0",
+    "@mui/icons-material": "^6.0.0",
+    "@mui/material": "^6.0.0",
+    "@mui/types": "^7.0.0",
+    "sass": "^1.83.0",
+    "sass-loader": "^16.0.0"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.21.5",
@@ -70,6 +75,8 @@
     "expect": "^29.7.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "sass": "^1.83.0",
+    "sass-loader": "^16.0.0",
     "ts-jest": "^29.2.6",
     "tsc-alias": "^1.8.15",
     "typescript": "^5.0.4"
@@ -91,7 +98,6 @@
     "react-dom": ">=16.8.0",
     "react-router": "^7.1.5",
     "react-router-dom": "^7.1.5",
-    "sass": "^1.83.0",
     "showdown": "^2.1.0"
   },
   "optionalDependencies": {