Created missing react documents

docs/en/Adding-New-Metronic-Theme-React.md

@@ -0,0 +1,229 @@
+# Adding New Metronic Theme
+
+Metronic theme currently has 13 different themes and ASP.NET Zero includes them all. However, you might want to add a new theme option designed by your team to those options. This document explains step by step how to add a new theme option to ASP.NET Zero React UI. Note that the added theme must be a Metronic theme or at least be compatible with Metronic.
+
+The rest of this document will use **ThemeX** as the new theme name.
+
+---
+
+## .NET Part
+
+* Go to `*.Application.Shared` project, open `AppConsts.cs` and add a new field named `ThemeX`.
+
+* Go to `*.Web.Core` project:
+
+  - Create a new UI Customizer named `ThemeXUiCustomizer.cs`. Copy `ThemeDefaultUiCustomizer.cs` into `ThemeXUiCustomizer.cs` and change necessary settings. (It has setting methods; if your new ThemeX also has those settings, keep them; otherwise, delete them.)
+
+  - Open `UiThemeCustomizerFactory.cs` and add the ThemeX code in the `GetUiCustomizerInternal` function:
+
+    ```csharp
+    if (theme.Equals(AppConsts.ThemeX, StringComparison.InvariantCultureIgnoreCase))
+    {
+        return _serviceProvider.GetService<ThemeXUiCustomizer>();
+    }
+    ```
+
+* Go to `*.Core` project. Open `AppSettingProvider.cs`:
+
+  - Add a method named `GetThemeXSettings` which returns ThemeX settings.
+
+  - Call it in the `GetSettingDefinitions` function:
+
+    ```csharp
+    return GetHostSettings().Union(GetTenantSettings()).Union(GetSharedSettings())
+        // theme settings
+        .Union(GetDefaultThemeSettings())
+        .Union(GetTheme2Settings())
+        // ... other themes ...
+        .Union(GetTheme13Settings())
+        .Union(GetThemeXSettings()); // add ThemeXSettings
+    ```
+
+---
+
+## React Part
+
+### 1. Add Theme Assets
+
+Add your theme's CSS bundle files to the `metronic/themes/` folder:
+
+```
+metronic/themes/themeX/
+├── css/
+│   └── style.bundle.css
+└── plugins/
+    └── global/
+        └── plugins.bundle.css
+```
+
+Also add a customization CSS file:
+
+```
+public/assets/common/styles/themes/themeX/
+└── metronic-customize.css
+```
+
+### 2. Create Theme Layout Components
+
+Go to `src/pages/admin/components/layout/themes/` folder:
+
+1. Create a new folder named `themeX/`
+2. Create the following React components inside the folder:
+   - `ThemeXLayout.tsx` - Main layout component
+   - `ThemeXHeader.tsx` - Header component
+   - `ThemeXBrand.tsx` - Brand/logo component
+
+Copy the contents from the default theme components (`default/DefaultLayout.tsx`, `default/DefaultHeader.tsx`, `default/DefaultBrand.tsx`) and modify as needed.
+
+**Example `ThemeXLayout.tsx`:**
+
+```tsx
+import React, { useEffect } from "react";
+import { Outlet } from "react-router-dom";
+import ThemeXHeader from "./ThemeXHeader";
+import { Footer } from "../../Footer";
+import { useTheme } from "@/hooks/useTheme";
+import { SidebarMenu } from "../../sidebar-menu/SidebarMenu";
+import ThemeXBrand from "./ThemeXBrand";
+
+const ThemeXLayout: React.FC = () => {
+  const { containerClass } = useTheme();
+
+  useEffect(() => {
+    document.body.classList.add("app-themeX");
+    return () => {
+      document.body.classList.remove("app-themeX");
+    };
+  }, []);
+
+  return (
+    // ... your layout JSX
+  );
+};
+
+export default ThemeXLayout;
+```
+
+### 3. Register the Theme Layout
+
+Open `src/pages/admin/components/layout/themes/index.tsx` and add your theme:
+
+1. Import the new layout component:
+
+   ```tsx
+   import ThemeXLayout from "./themeX/ThemeXLayout";
+   ```
+
+2. Add the case to the switch statement in `ThemedLayout`:
+
+   ```tsx
+   const ThemedLayout: React.FC = () => {
+     const activeThemeName = useSelector(
+       (s: RootState) => s.ui.activeThemeName || "default",
+     );
+
+     switch (activeThemeName) {
+       // ... existing cases ...
+       case "themeX":
+         return <ThemeXLayout />;
+       case "default":
+       default:
+         return <DefaultLayout />;
+     }
+   };
+   ```
+
+### 4. Add Theme to Selection Panel
+
+Open `src/pages/admin/components/layout/theme-selection/ThemeSelectionPanel.tsx` and add your theme to the `THEMES` array:
+
+```tsx
+const THEMES: string[] = [
+  "default",
+  "theme2",
+  "theme3",
+  // ... other themes ...
+  "theme13",
+  "themeX", // Add your new theme
+];
+```
+
+### 5. Create UI Customization Settings Form
+
+Go to `src/pages/admin/ui-customization/components/` folder:
+
+1. Create `ThemeXSettingsForm.tsx` by copying from `DefaultThemeSettingsForm.tsx`
+2. Modify the form fields based on your theme's available settings
+
+**Example `ThemeXSettingsForm.tsx`:**
+
+```tsx
+import React from "react";
+import { Form, Select, Switch } from "antd";
+import type { ThemeSettingsDto } from "@/api/generated/service-proxies";
+import L from "@/lib/L";
+
+interface Props {
+  settings: ThemeSettingsDto;
+  onSave: (values: ThemeSettingsDto) => void;
+}
+
+const ThemeXSettingsForm: React.FC<Props> = ({ settings, onSave }) => {
+  const [form] = Form.useForm();
+
+  // ... form implementation
+};
+
+export default ThemeXSettingsForm;
+```
+
+### 6. Register the Settings Form
+
+Open `src/pages/admin/ui-customization/index.tsx`:
+
+1. Import your settings form:
+
+   ```tsx
+   import ThemeXSettingsForm from "./components/ThemeXSettingsForm";
+   ```
+
+2. Add the form to the theme panel rendering logic (in the switch or conditional rendering section).
+
+### 7. Add Theme Preview Image
+
+Add a preview image for your theme:
+
+```
+public/assets/common/images/metronic-themes/themeX.png
+```
+
+This image is displayed in the UI Customization page for theme selection.
+
+### 8. Add Localization
+
+Add localization entries for your theme name in the localization files:
+
+```json
+{
+  "Theme_ThemeX": "Theme X"
+}
+```
+
+---
+
+## Summary of Files to Create/Modify
+
+| Action | File Path |
+|--------|-----------|
+| Create | `metronic/themes/themeX/css/style.bundle.css` |
+| Create | `metronic/themes/themeX/plugins/global/plugins.bundle.css` |
+| Create | `public/assets/common/styles/themes/themeX/metronic-customize.css` |
+| Create | `src/pages/admin/components/layout/themes/themeX/ThemeXLayout.tsx` |
+| Create | `src/pages/admin/components/layout/themes/themeX/ThemeXHeader.tsx` |
+| Create | `src/pages/admin/components/layout/themes/themeX/ThemeXBrand.tsx` |
+| Modify | `src/pages/admin/components/layout/themes/index.tsx` |
+| Modify | `src/pages/admin/components/layout/theme-selection/ThemeSelectionPanel.tsx` |
+| Create | `src/pages/admin/ui-customization/components/ThemeXSettingsForm.tsx` |
+| Modify | `src/pages/admin/ui-customization/index.tsx` |
+| Create | `public/assets/common/images/metronic-themes/themeX.png` |
+

docs/en/Customization-React.md

@@ -0,0 +1,22 @@
+## Customization
+
+### Changing Logos
+
+The default template has 5 main logos and they are located in `public/assets/common/images/`:
+
+1. `app-logo-on-dark.svg` - Full logo for dark backgrounds
+2. `app-logo-on-dark-sm.svg` - Small logo for dark backgrounds
+3. `app-logo-on-light.svg` - Full logo for light backgrounds
+4. `app-logo-on-light-sm.svg` - Small logo for light backgrounds
+5. `logo.svg` - General purpose logo
+
+**Naming convention:**
+
+- `*-dark*` versions are used on **dark backgrounds** (light-colored themes use these)
+- `*-light*` versions are used on **light backgrounds** (dark-colored themes use these)
+- `*-sm.svg` versions are smaller variants used in footers or collapsed sidebars
+
+**Additional variants:**
+
+The project also includes alternative logo versions (`app-logo-on-dark-2.svg`, `app-logo-on-dark-sm-2.svg`) that can be used for different branding scenarios.
+

docs/en/Deleting-A-Metronic-Theme-React.md

@@ -0,0 +1,109 @@
+# Deleting a Metronic Theme
+
+Metronic theme currently has 13 different themes and ASP.NET Zero includes them all. However, you might want to use only specific themes and delete some others. This document explains how to delete a theme option from ASP.NET Zero. In this document, deleting **Theme2** will be explained. You can apply the same steps to delete other theme options.
+
+---
+
+## .NET Part
+
+* Go to `*.Application.Shared` project. Open `AppConsts.cs` and delete the `Theme2` field.
+
+* Go to `*.Web.Core` project:
+  * Delete `Theme2UiCustomizer.cs`
+  * Open `UiThemeCustomizerFactory.cs` and delete Theme2 code parts in `GetUiCustomizerInternal` function.
+
+* Go to `*.Core` project. Open `AppSettingProvider.cs` and delete `GetTheme2Settings` function and its call in `GetSettingDefinitions`.
+
+---
+
+## React Part
+
+### 1. Delete Theme Layout Components
+
+Go to `src/pages/admin/components/layout/themes/` folder:
+
+* Delete the `theme2/` folder entirely (contains `Theme2Layout.tsx`, `Theme2Header.tsx`, `Theme2Brand.tsx`)
+
+### 2. Update Theme Layout Registry
+
+Open `src/pages/admin/components/layout/themes/index.tsx`:
+
+* Remove the import statement:
+  ```tsx
+  import Theme2Layout from "./theme2/Theme2Layout";
+  ```
+
+* Remove the case from the switch statement:
+  ```tsx
+  case "theme2":
+    return <Theme2Layout />;
+  ```
+
+### 3. Update Theme Selection Panel
+
+Open `src/pages/admin/components/layout/theme-selection/ThemeSelectionPanel.tsx`:
+
+* Remove `"theme2"` from the `THEMES` array:
+  ```tsx
+  const THEMES: string[] = [
+    "default",
+    // "theme2", // Remove this line
+    "theme3",
+    // ...
+  ];
+  ```
+
+### 4. Delete UI Customization Settings Form
+
+Go to `src/pages/admin/ui-customization/components/` folder:
+
+* Delete `Theme2SettingsForm.tsx`
+
+### 5. Update UI Customization Page
+
+Open `src/pages/admin/ui-customization/index.tsx`:
+
+* Remove the import statement:
+  ```tsx
+  import Theme2SettingsForm from "./components/Theme2SettingsForm";
+  ```
+
+* Remove any Theme2-related rendering logic in the component.
+
+### 6. Delete Theme Assets (Optional)
+
+If you want to reduce bundle size, delete the theme assets:
+
+* Delete `metronic/themes/theme2/` folder
+* Delete `public/assets/common/styles/themes/theme2/` folder
+* Delete `public/assets/common/images/metronic-themes/theme2.png`
+
+---
+
+## Database Cleanup
+
+If you are deleting a theme on an already published application, don't forget to delete records in the `AbpSettings` table:
+
+* Records where `Name` equals `App.UiManagement.Theme` and `Value` equals `theme2`
+* Records where `Name` starts with `Theme2.`
+
+```sql
+DELETE FROM AbpSettings WHERE Name = 'App.UiManagement.Theme' AND Value = 'theme2';
+DELETE FROM AbpSettings WHERE Name LIKE 'Theme2.%';
+```
+
+---
+
+## Summary of Files to Delete/Modify
+
+| Action | File Path |
+|--------|-----------|
+| Delete | `src/pages/admin/components/layout/themes/theme2/` (entire folder) |
+| Modify | `src/pages/admin/components/layout/themes/index.tsx` |
+| Modify | `src/pages/admin/components/layout/theme-selection/ThemeSelectionPanel.tsx` |
+| Delete | `src/pages/admin/ui-customization/components/Theme2SettingsForm.tsx` |
+| Modify | `src/pages/admin/ui-customization/index.tsx` |
+| Delete | `metronic/themes/theme2/` (optional) |
+| Delete | `public/assets/common/styles/themes/theme2/` (optional) |
+| Delete | `public/assets/common/images/metronic-themes/theme2.png` (optional) | 
+