Update documentation and references from Wish Theme to KomTheme across various files, including README, installation guides, and component documentation. Add NuGet.Config to solution structure.
Release NuGet Packages / pack-and-push (release) Successful in 8m35s

This commit is contained in:
2026-05-25 19:27:29 +03:30
parent e1474c232b
commit 6a0e724eb0
25 changed files with 57 additions and 56 deletions
+2 -2
View File
@@ -5,7 +5,7 @@
[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
[![Repository](https://img.shields.io/badge/git-git.sabp.ir-2b6df6.svg)](https://git.sabp.ir/sufi-chain/sufi-blazor)
SufiBlazor is an independent Blazor UI component library and design system for ASP.NET Core 10+ applications. It can be used inside Sufi Platform, but it is not tied to Sufi Platform, ABP, Wish Theme, or any other third-party application framework. Any Blazor project that targets modern ASP.NET Core can use it as its primary UI layer.
SufiBlazor is an independent Blazor UI component library and design system for ASP.NET Core 10+ applications. It can be used inside Sufi Platform, but it is not tied to Sufi Platform, ABP, KomTheme, or any other third-party application framework. Any Blazor project that targets modern ASP.NET Core can use it as its primary UI layer.
For Sufi Platform, SufiBlazor is the default component system used by generated hosts and first-party modules. Outside Sufi Platform, it can still be adopted on its own as a self-contained component library for forms, data display, overlays, navigation, theming, RTL support, and application-level UI composition.
@@ -50,7 +50,7 @@ In other words, SufiBlazor is a standalone product that Sufi Platform consumes,
Inside Sufi Platform:
- `SufiBlazor` provides the base UI component system
- `Wish Theme` provides the host shell, layout, and branded navigation frame
- `KomTheme` provides the host shell, layout, and branded navigation frame
- `SufiAbp` provides the broader platform abstractions and host integration patterns
That relationship is important, but it should not hide the fact that SufiBlazor can also be used on its own in any Blazor project targeting ASP.NET Core 10+.
+2 -1
View File
@@ -1,11 +1,12 @@
<Solution>
<Folder Name="/Solution Items/">
<File Path="NuGet.Config" />
<File Path="versions.props" />
</Folder>
<Folder Name="/src/">
<Project Path="src/SufiChain.SufiBlazor/SufiChain.SufiBlazor.csproj" />
<Project Path="src/SufiChain.SufiBlazor.Demo.Localization/SufiChain.SufiBlazor.Demo.Localization.csproj" />
<Project Path="src/SufiChain.SufiBlazor.Demo/SufiChain.SufiBlazor.Demo.csproj" />
<Project Path="src/SufiChain.SufiBlazor/SufiChain.SufiBlazor.csproj" />
</Folder>
<Folder Name="/tests/">
<Project Path="tests/SufiChain.SufiBlazor.Tests.csproj" />
+2 -2
View File
@@ -1,6 +1,6 @@
# SufiBlazor
SufiBlazor is an independent Blazor UI component library and design system for ASP.NET Core 10+ applications. It can be used inside Sufi Platform, but it is not tied to Sufi Platform, ABP, Wish Theme, or any other third-party application framework. Any Blazor project that targets modern ASP.NET Core can use it as its primary UI layer.
SufiBlazor is an independent Blazor UI component library and design system for ASP.NET Core 10+ applications. It can be used inside Sufi Platform, but it is not tied to Sufi Platform, ABP, KomTheme, or any other third-party application framework. Any Blazor project that targets modern ASP.NET Core can use it as its primary UI layer.
For Sufi Platform, SufiBlazor is the default component system used by generated hosts and first-party modules. Outside Sufi Platform, it can still be adopted on its own as a self-contained component library for forms, data display, overlays, navigation, theming, RTL support, and application-level UI composition.
@@ -30,7 +30,7 @@ In other words, SufiBlazor is a standalone product that Sufi Platform consumes,
Inside Sufi Platform:
- `SufiBlazor` provides the base UI component system
- `Wish Theme` provides the host shell, layout, and branded navigation frame
- `KomTheme` provides the host shell, layout, and branded navigation frame
- `SufiAbp` provides the broader platform abstractions and host integration patterns
That relationship is important, but it should not hide the fact that SufiBlazor can also be used on its own in any Blazor project targeting ASP.NET Core 10+.
Binary file not shown.

Before

Width:  |  Height:  |  Size: 143 KiB

After

Width:  |  Height:  |  Size: 45 KiB

+2 -2
View File
@@ -27,13 +27,13 @@ Feature-oriented catalog. See **SufiChain.SufiBlazorDemo** and component XML doc
- **SbStack** — Flex row/column, gap, justify, align.
- **SbGrid** — CSS grid; column counts, gap.
- **SbAppShell**, **SbSidebar** — App chrome; Wish Theme uses these.
- **SbAppShell**, **SbSidebar** — App chrome; KomTheme uses these.
## Navigation
- **SbTabs** / **SbTab** — Tabbed content.
- **SbBreadcrumb** / **SbBreadcrumbItem** — Breadcrumbs.
- **SbNavMenu** / **SbNavItem** — Hierarchical nav; used in Wish layouts.
- **SbNavMenu** / **SbNavItem** — Hierarchical nav; used in Kom layouts.
## Overlays
+14 -14
View File
@@ -1,34 +1,34 @@
# SufiBlazor Layout Components Review vs Wish Theme
# SufiBlazor Layout Components Review vs KomTheme
## Summary
The **Wish theme uses its own layout components** (`WishAppShell`, `WishDualSidebar`, `WishTopBar`, `WishSidebar`, `WishIconRail`, `WishExpandPanel`) in `SufiChain.SufiAbp.WishTheme.Blazor/Components/Layout/`. The SufiBlazor design system shell components (`SbAppShell`, `SbDualSidebar`, `SbTopBar`, `SbSidebar`, `SbIconRail`, `SbExpandPanel`) are **not used** in any application or in the Wish theme.
The **KomTheme uses its own layout components** (`KomAppShell`, `KomDualSidebar`, `KomTopBar`, `KomSidebar`, `KomIconRail`, `KomExpandPanel`) in `SufiChain.KomTheme.Blazor/Components/Layout/`. The SufiBlazor design system shell components (`SbAppShell`, `SbDualSidebar`, `SbTopBar`, `SbSidebar`, `SbIconRail`, `SbExpandPanel`) are **not used** in any application or in the KomTheme.
## Usage by Component
| Component | Used in Wish theme? | Used elsewhere? | Verdict |
| Component | Used in KomTheme? | Used elsewhere? | Verdict |
|-----------|---------------------|-----------------|---------|
| **SbContainer** | Yes `TopMenuLayout.razor` | SufiBlazorDemo | **KEEP** |
| **SbContainerMaxWidth** | Yes with SbContainer | SufiBlazorDemo | **KEEP** |
| **SbAppShell** | No | No (docs only) | **REMOVED** redundant; Wish uses WishAppShell |
| **SbAppShell** | No | No (docs only) | **REMOVED** redundant; Kom uses KomAppShell |
| **SbAppShellVariant** | No | No (not even used by SbAppShell) | **REMOVED** dead code |
| **SbDualSidebar** | No | No (docs only) | **REMOVED** redundant; Wish uses WishDualSidebar |
| **SbTopBar** | No | No (docs only) | **REMOVED** redundant; Wish uses WishTopBar |
| **SbSidebar** | No | No (docs only) | **REMOVED** redundant; Wish uses WishSidebar |
| **SbIconRail** | No | No (docs only) | **REMOVED** redundant; Wish uses WishIconRail |
| **SbExpandPanel** | No | No (docs only) | **REMOVED** redundant; Wish uses WishExpandPanel |
| **SbDualSidebar** | No | No (docs only) | **REMOVED** redundant; Kom uses KomDualSidebar |
| **SbTopBar** | No | No (docs only) | **REMOVED** redundant; Kom uses KomTopBar |
| **SbSidebar** | No | No (docs only) | **REMOVED** redundant; Kom uses KomSidebar |
| **SbIconRail** | No | No (docs only) | **REMOVED** redundant; Kom uses KomIconRail |
| **SbExpandPanel** | No | No (docs only) | **REMOVED** redundant; Kom uses KomExpandPanel |
| **SbStack** | Yes (class names in layouts) | Identity, FileManager, Audit, Feature, Setting modules | **KEEP** |
| **SbAlign, SbJustify, SbStackDirection** | Yes | Many modules | **KEEP** |
| **SbGrid, SbGridItem** | No | SufiBlazorDemo only | **KEEP** design system primitives |
| **SbSpacer** | No | SufiBlazorDemo only | **KEEP** design system primitive |
## Wish Theme Layouts
## KomTheme Layouts
- **DualSidebarLayout.razor** Uses `WishAppShell`, `WishDualSidebar`, `WishIconRail`, `WishExpandPanel`, `WishTopBar`.
- **SideMenuLayout.razor** Uses `WishAppShell`, `WishSidebar`, `WishTopBar`.
- **TopMenuLayout.razor** Uses `WishTopBar`, **SbContainer** (only Sb layout component used), `SbDrawer`, `SbNavMenu`, etc.
- **DualSidebarLayout.razor** Uses `KomAppShell`, `KomDualSidebar`, `KomIconRail`, `KomExpandPanel`, `KomTopBar`.
- **SideMenuLayout.razor** Uses `KomAppShell`, `KomSidebar`, `KomTopBar`.
- **TopMenuLayout.razor** Uses `KomTopBar`, **SbContainer** (only Sb layout component used), `SbDrawer`, `SbNavMenu`, etc.
## Conclusion
- **Keep:** SbContainer, SbContainerMaxWidth, SbStack, SbAlign, SbJustify, SbStackDirection, SbGrid, SbGridItem, SbSpacer (used by apps or by design-system demo).
- **Removed:** SbAppShell, SbAppShellVariant, SbDualSidebar, SbTopBar, SbSidebar, SbIconRail, SbExpandPanel unused and redundant with Wish theme components; removing them avoids confusion and mistaken use during feature development.
- **Removed:** SbAppShell, SbAppShellVariant, SbDualSidebar, SbTopBar, SbSidebar, SbIconRail, SbExpandPanel unused and redundant with KomTheme components; removing them avoids confusion and mistaken use during feature development.
+1 -1
View File
@@ -84,7 +84,7 @@ public enum SbContainerMaxWidth
### Page Layout
Use `SbContainer` inside your layout (e.g. Wish theme layouts use it for main content):
Use `SbContainer` inside your layout (e.g. KomTheme layouts use it for main content):
```razor
<SbContainer MaxWidth="SbContainerMaxWidth.Xl">
+1 -1
View File
@@ -93,7 +93,7 @@ public enum SbSpacerSize
### In Navigation Menu
Use `SbSpacer Grow="true"` inside a vertical stack to push items to the bottom (e.g. in Wish theme's `WishSidebar` or `WishIconRail`):
Use `SbSpacer Grow="true"` inside a vertical stack to push items to the bottom (e.g. in KomTheme's `KomSidebar` or `KomIconRail`):
```razor
<SbStack Direction="SbStackDirection.Column" Gap="0">
+1 -1
View File
@@ -123,7 +123,7 @@ public class SbBreadcrumbItem
### In Page Layout
Breadcrumbs are typically rendered in the layout's top bar (e.g. Wish theme's `WishTopBar`). Content area example:
Breadcrumbs are typically rendered in the layout's top bar (e.g. KomTheme's `KomTopBar`). Content area example:
```razor
<SbContainer>
+1 -1
View File
@@ -55,7 +55,7 @@ A navigation menu container component for organizing navigation items.
### Inside a layout sidebar
Use `SbNavMenu` inside the Wish theme's sidebar (e.g. `WishSidebar` or `WishExpandPanel`):
Use `SbNavMenu` inside the KomTheme's sidebar (e.g. `KomSidebar` or `KomExpandPanel`):
```razor
<SbNavMenu>
+1 -1
View File
@@ -122,7 +122,7 @@ A lightweight tooltip component that appears on hover or focus to provide additi
### Icon rail tooltips
In an icon rail (e.g. Wish theme's `WishIconRail`), wrap nav items with `SbTooltip` and `Placement="SbPlacement.End"` so the tooltip appears to the right:
In an icon rail (e.g. KomTheme's `KomIconRail`), wrap nav items with `SbTooltip` and `Placement="SbPlacement.End"` so the tooltip appears to the right:
```razor
<SbStack Direction="SbStackDirection.Column" Gap="1">
+1 -1
View File
@@ -115,7 +115,7 @@ Place `SbThemeProvider` at the root of your application:
### Full Application Setup
App shell and top bar are provided by the **Wish theme** (e.g. `WishAppShell`, `WishTopBar`). For a minimal layout using only SufiBlazor primitives:
App shell and top bar are provided by the **KomTheme** (e.g. `KomAppShell`, `KomTopBar`). For a minimal layout using only SufiBlazor primitives:
```razor
@* Minimal layout using design system only *@
+2 -2
View File
@@ -59,10 +59,10 @@ Create a simple page with a few components such as `SbCard`, `SbButton`, and `Sb
If the host already uses Sufi Platform conventions:
- SufiBlazor is usually part of the expected UI stack already
- Wish Theme builds on top of SufiBlazor rather than replacing it
- KomTheme builds on top of SufiBlazor rather than replacing it
- the same package, static asset, and theme-provider concepts still apply
## Optional notes
- If your app uses dialog, toast, or similar UI services, follow the host-specific registration guidance used by your application.
- If Wish Theme is part of the host, it still depends on SufiBlazor as the base component system.
- If KomTheme is part of the host, it still depends on SufiBlazor as the base component system.
+1 -1
View File
@@ -44,7 +44,7 @@ You can use SufiBlazor in:
When SufiBlazor is used inside Sufi Platform:
- it provides the base interactive component layer
- Wish Theme builds the host shell and layout on top of it
- KomTheme builds the host shell and layout on top of it
- SufiAbp provides the platform abstractions, host wiring, and module composition rules around it
That relationship matters for platform developers, but the library remains usable outside that stack.
@@ -1,34 +1,34 @@
# SufiBlazor Layout Components Review vs Wish Theme
# SufiBlazor Layout Components Review vs KomTheme
## Summary
The **Wish theme uses its own layout components** (`WishAppShell`, `WishDualSidebar`, `WishTopBar`, `WishSidebar`, `WishIconRail`, `WishExpandPanel`) in `SufiChain.SufiAbp.WishTheme.Blazor/Components/Layout/`. The SufiBlazor design system shell components (`SbAppShell`, `SbDualSidebar`, `SbTopBar`, `SbSidebar`, `SbIconRail`, `SbExpandPanel`) are **not used** in any application or in the Wish theme.
The **KomTheme uses its own layout components** (`KomAppShell`, `KomDualSidebar`, `KomTopBar`, `KomSidebar`, `KomIconRail`, `KomExpandPanel`) in `SufiChain.KomTheme.Blazor/Components/Layout/`. The SufiBlazor design system shell components (`SbAppShell`, `SbDualSidebar`, `SbTopBar`, `SbSidebar`, `SbIconRail`, `SbExpandPanel`) are **not used** in any application or in the KomTheme.
## Usage by Component
| Component | Used in Wish theme? | Used elsewhere? | Verdict |
| Component | Used in KomTheme? | Used elsewhere? | Verdict |
|-----------|---------------------|-----------------|---------|
| **SbContainer** | Yes `TopMenuLayout.razor` | SufiBlazorDemo | **KEEP** |
| **SbContainerMaxWidth** | Yes with SbContainer | SufiBlazorDemo | **KEEP** |
| **SbAppShell** | No | No (docs only) | **REMOVED** redundant; Wish uses WishAppShell |
| **SbAppShell** | No | No (docs only) | **REMOVED** redundant; Kom uses KomAppShell |
| **SbAppShellVariant** | No | No (not even used by SbAppShell) | **REMOVED** dead code |
| **SbDualSidebar** | No | No (docs only) | **REMOVED** redundant; Wish uses WishDualSidebar |
| **SbTopBar** | No | No (docs only) | **REMOVED** redundant; Wish uses WishTopBar |
| **SbSidebar** | No | No (docs only) | **REMOVED** redundant; Wish uses WishSidebar |
| **SbIconRail** | No | No (docs only) | **REMOVED** redundant; Wish uses WishIconRail |
| **SbExpandPanel** | No | No (docs only) | **REMOVED** redundant; Wish uses WishExpandPanel |
| **SbDualSidebar** | No | No (docs only) | **REMOVED** redundant; Kom uses KomDualSidebar |
| **SbTopBar** | No | No (docs only) | **REMOVED** redundant; Kom uses KomTopBar |
| **SbSidebar** | No | No (docs only) | **REMOVED** redundant; Kom uses KomSidebar |
| **SbIconRail** | No | No (docs only) | **REMOVED** redundant; Kom uses KomIconRail |
| **SbExpandPanel** | No | No (docs only) | **REMOVED** redundant; Kom uses KomExpandPanel |
| **SbStack** | Yes (class names in layouts) | Identity, FileManager, Audit, Feature, Setting modules | **KEEP** |
| **SbAlign, SbJustify, SbStackDirection** | Yes | Many modules | **KEEP** |
| **SbGrid, SbGridItem** | No | SufiBlazorDemo only | **KEEP** design system primitives |
| **SbSpacer** | No | SufiBlazorDemo only | **KEEP** design system primitive |
## Wish Theme Layouts
## KomTheme Layouts
- **DualSidebarLayout.razor** Uses `WishAppShell`, `WishDualSidebar`, `WishIconRail`, `WishExpandPanel`, `WishTopBar`.
- **SideMenuLayout.razor** Uses `WishAppShell`, `WishSidebar`, `WishTopBar`.
- **TopMenuLayout.razor** Uses `WishTopBar`, **SbContainer** (only Sb layout component used), `SbDrawer`, `SbNavMenu`, etc.
- **DualSidebarLayout.razor** Uses `KomAppShell`, `KomDualSidebar`, `KomIconRail`, `KomExpandPanel`, `KomTopBar`.
- **SideMenuLayout.razor** Uses `KomAppShell`, `KomSidebar`, `KomTopBar`.
- **TopMenuLayout.razor** Uses `KomTopBar`, **SbContainer** (only Sb layout component used), `SbDrawer`, `SbNavMenu`, etc.
## Conclusion
- **Keep:** SbContainer, SbContainerMaxWidth, SbStack, SbAlign, SbJustify, SbStackDirection, SbGrid, SbGridItem, SbSpacer (used by apps or by design-system demo).
- **Removed:** SbAppShell, SbAppShellVariant, SbDualSidebar, SbTopBar, SbSidebar, SbIconRail, SbExpandPanel unused and redundant with Wish theme components; removing them avoids confusion and mistaken use during feature development.
- **Removed:** SbAppShell, SbAppShellVariant, SbDualSidebar, SbTopBar, SbSidebar, SbIconRail, SbExpandPanel unused and redundant with KomTheme components; removing them avoids confusion and mistaken use during feature development.
@@ -123,7 +123,7 @@ public class SbBreadcrumbItem
### In Page Layout
Breadcrumbs are typically rendered in the layout's top bar (e.g. Wish theme's `WishTopBar`). Content area example:
Breadcrumbs are typically rendered in the layout's top bar (e.g. KomTheme's `KomTopBar`). Content area example:
```razor
<SbContainer>
@@ -84,7 +84,7 @@ public enum SbContainerMaxWidth
### Page Layout
Use `SbContainer` inside your layout (e.g. Wish theme layouts use it for main content):
Use `SbContainer` inside your layout (e.g. KomTheme layouts use it for main content):
```razor
<SbContainer MaxWidth="SbContainerMaxWidth.Xl">
@@ -55,7 +55,7 @@ A navigation menu container component for organizing navigation items.
### Inside a layout sidebar
Use `SbNavMenu` inside the Wish theme's sidebar (e.g. `WishSidebar` or `WishExpandPanel`):
Use `SbNavMenu` inside the KomTheme's sidebar (e.g. `KomSidebar` or `KomExpandPanel`):
```razor
<SbNavMenu>
@@ -93,7 +93,7 @@ public enum SbSpacerSize
### In Navigation Menu
Use `SbSpacer Grow="true"` inside a vertical stack to push items to the bottom (e.g. in Wish theme's `WishSidebar` or `WishIconRail`):
Use `SbSpacer Grow="true"` inside a vertical stack to push items to the bottom (e.g. in KomTheme's `KomSidebar` or `KomIconRail`):
```razor
<SbStack Direction="SbStackDirection.Column" Gap="0">
@@ -115,7 +115,7 @@ Place `SbThemeProvider` at the root of your application:
### Full Application Setup
App shell and top bar are provided by the **Wish theme** (e.g. `WishAppShell`, `WishTopBar`). For a minimal layout using only SufiBlazor primitives:
App shell and top bar are provided by the **KomTheme** (e.g. `KomAppShell`, `KomTopBar`). For a minimal layout using only SufiBlazor primitives:
```razor
@* Minimal layout using design system only *@
@@ -122,7 +122,7 @@ A lightweight tooltip component that appears on hover or focus to provide additi
### Icon rail tooltips
In an icon rail (e.g. Wish theme's `WishIconRail`), wrap nav items with `SbTooltip` and `Placement="SbPlacement.End"` so the tooltip appears to the right:
In an icon rail (e.g. KomTheme's `KomIconRail`), wrap nav items with `SbTooltip` and `Placement="SbPlacement.End"` so the tooltip appears to the right:
```razor
<SbStack Direction="SbStackDirection.Column" Gap="1">
@@ -27,13 +27,13 @@ Feature-oriented catalog. See **SufiChain.SufiBlazorDemo** and component XML doc
- **SbStack** — Flex row/column, gap, justify, align.
- **SbGrid** — CSS grid; column counts, gap.
- **SbAppShell**, **SbSidebar** — App chrome; Wish Theme uses these.
- **SbAppShell**, **SbSidebar** — App chrome; KomTheme uses these.
## Navigation
- **SbTabs** / **SbTab** — Tabbed content.
- **SbBreadcrumb** / **SbBreadcrumbItem** — Breadcrumbs.
- **SbNavMenu** / **SbNavItem** — Hierarchical nav; used in Wish layouts.
- **SbNavMenu** / **SbNavItem** — Hierarchical nav; used in Kom layouts.
## Overlays
@@ -59,10 +59,10 @@ Create a simple page with a few components such as `SbCard`, `SbButton`, and `Sb
If the host already uses Sufi Platform conventions:
- SufiBlazor is usually part of the expected UI stack already
- Wish Theme builds on top of SufiBlazor rather than replacing it
- KomTheme builds on top of SufiBlazor rather than replacing it
- the same package, static asset, and theme-provider concepts still apply
## Optional notes
- If your app uses dialog, toast, or similar UI services, follow the host-specific registration guidance used by your application.
- If Wish Theme is part of the host, it still depends on SufiBlazor as the base component system.
- If KomTheme is part of the host, it still depends on SufiBlazor as the base component system.
@@ -44,7 +44,7 @@ You can use SufiBlazor in:
When SufiBlazor is used inside Sufi Platform:
- it provides the base interactive component layer
- Wish Theme builds the host shell and layout on top of it
- KomTheme builds the host shell and layout on top of it
- SufiAbp provides the platform abstractions, host wiring, and module composition rules around it
That relationship matters for platform developers, but the library remains usable outside that stack.
+1 -1
View File
@@ -118,7 +118,7 @@ html {
/* Focus styles - exclude native inputs that have their own focus ring (radio/checkbox) to avoid double outline or stray focus box.
Exclude text/number/textarea inputs their wrapper uses :focus-within for the focus ring.
Exclude headings (h1-h6) wish-theme removes their focus ring; these would override due to higher specificity. */
Exclude headings (h1-h6) kom-theme removes their focus ring; these would override due to higher specificity. */
.demo-layout :focus-visible:not(.sb-radio__input):not(.sb-checkbox__input):not(.sb-number-field__input):not(.sb-text-field__input):not(.sb-textarea__input):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.docs-home :focus-visible:not(.sb-radio__input):not(.sb-checkbox__input):not(.sb-number-field__input):not(.sb-text-field__input):not(.sb-textarea__input):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.demo-section :focus-visible:not(.sb-radio__input):not(.sb-checkbox__input):not(.sb-number-field__input):not(.sb-text-field__input):not(.sb-textarea__input):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {