sufi-chain/sufi-blazor
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Pooria Shariatzadeh
2026-05-18 15:53:59 +03:30
commit 2c100028a1
534 changed files with 94240 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/layout/LAYOUT_REVIEW.md
+34
View File
@@ -0,0 +1,34 @@
# SufiBlazor Layout Components – Review vs Wish Theme
## Summary
The **Wish theme uses its own layout components** (`WishAppShell`, `WishDualSidebar`, `WishTopBar`, `WishSidebar`, `WishIconRail`, `WishExpandPanel`) in `SufiChain.SABP.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.
## Usage by Component
| Component | Used in Wish theme? | 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 |
| **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 |
| **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
- **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.
## 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.
docs/components/layout/SbContainer.md
+118
View File
@@ -0,0 +1,118 @@
# SbContainer
A centered content container with responsive max-width presets and optional gutters.
## Parameters
| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| MaxWidth | SbContainerMaxWidth | Lg | Maximum width preset for the container |
| DisableGutters | bool | false | When true, removes horizontal padding |
| Class | string? | null | Additional CSS classes |
| Style | string? | null | Inline styles |
| AdditionalAttributes | Dictionary\<string, object\>? | null | Additional HTML attributes |
## Templates / Slots
| Slot | Type | Description |
|------|------|-------------|
| ChildContent | RenderFragment | Content to render inside the container |
## SbContainerMaxWidth Enum
```csharp
public enum SbContainerMaxWidth
{
Sm, // 640px
Md, // 768px
Lg, // 1024px
Xl, // 1280px
Xxl, // 1536px
Fluid // No max-width (full width)
}
```
## CSS Classes
- `sb-container` - Base class
- `sb-container--sm` - Small max-width (640px)
- `sb-container--md` - Medium max-width (768px)
- `sb-container--lg` - Large max-width (1024px)
- `sb-container--xl` - Extra large max-width (1280px)
- `sb-container--xxl` - 2X large max-width (1536px)
- `sb-container--fluid` - Full width container
- `sb-container--no-gutters` - Removes horizontal padding
## Examples
### Basic Usage
```razor
<SbContainer>
<h1>Page Title</h1>
<p>Content is centered with a default max-width of 1024px.</p>
</SbContainer>
```
### Small Container
```razor
<SbContainer MaxWidth="SbContainerMaxWidth.Sm">
<SbCard>
<p>Narrow content area, great for forms.</p>
</SbCard>
</SbContainer>
```
### Full Width
```razor
<SbContainer MaxWidth="SbContainerMaxWidth.Fluid">
<SbDataGrid Items="@items" />
</SbContainer>
```
### Without Gutters
```razor
<SbContainer DisableGutters="true">
<div class="full-bleed-banner">
Edge-to-edge content
</div>
</SbContainer>
```
### Page Layout
Use `SbContainer` inside your layout (e.g. Wish theme layouts use it for main content):
```razor
<SbContainer MaxWidth="SbContainerMaxWidth.Xl">
<SbStack Gap="6">
<SbHeading Level="1">Dashboard</SbHeading>
<SbGrid Columns="3" Gap="4">
<SbStatCard Value="1,234" Label="Users" />
<SbStatCard Value="$56K" Label="Revenue" />
<SbStatCard Value="89%" Label="Uptime" />
</SbGrid>
<SbCard>
<SbDataGrid Items="@recentOrders" />
</SbCard>
</SbStack>
</SbContainer>
```
### Form Container
```razor
<SbContainer MaxWidth="SbContainerMaxWidth.Sm">
<SbCard>
<SbStack Gap="4">
<SbHeading Level="2">Sign In</SbHeading>
<SbTextField Label="Email" @bind-Value="email" />
<SbTextField Label="Password" Type="password" @bind-Value="password" />
<SbButton FullWidth="true">Sign In</SbButton>
</SbStack>
</SbCard>
</SbContainer>
```
docs/components/layout/SbGrid.md
+115
View File
@@ -0,0 +1,115 @@
# SbGrid
A responsive CSS Grid layout component with configurable columns and breakpoints.
## Parameters
| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| Columns | int | 12 | Number of columns (base/mobile-first value) |
| ColumnsSm | int? | null | Number of columns at sm breakpoint (640px+) |
| ColumnsMd | int? | null | Number of columns at md breakpoint (768px+) |
| ColumnsLg | int? | null | Number of columns at lg breakpoint (1024px+) |
| ColumnsXl | int? | null | Number of columns at xl breakpoint (1280px+) |
| Gap | int | 4 | Gap between grid items (uses spacing scale 0-16) |
| RowGap | int? | null | Row gap if different from Gap |
| ColumnGap | int? | null | Column gap if different from Gap |
| Class | string? | null | Additional CSS classes |
| Style | string? | null | Inline styles |
| AdditionalAttributes | Dictionary\<string, object\>? | null | Additional HTML attributes |
## Templates / Slots
| Slot | Type | Description |
|------|------|-------------|
| ChildContent | RenderFragment | Grid items (typically SbGridItem components) |
## CSS Classes
- `sb-grid` - Base class
- `sb-grid--sm-{n}` - Small breakpoint columns
- `sb-grid--md-{n}` - Medium breakpoint columns
- `sb-grid--lg-{n}` - Large breakpoint columns
- `sb-grid--xl-{n}` - Extra large breakpoint columns
## CSS Variables
- `--sb-grid-columns` - Number of grid columns
## Examples
### Basic 3-Column Grid
```razor
<SbGrid Columns="3" Gap="4">
<SbCard>Card 1</SbCard>
<SbCard>Card 2</SbCard>
<SbCard>Card 3</SbCard>
</SbGrid>
```
### Responsive Grid
```razor
<SbGrid Columns="1" ColumnsSm="2" ColumnsMd="3" ColumnsLg="4" Gap="4">
@foreach (var item in items)
{
<SbCard>@item.Name</SbCard>
}
</SbGrid>
```
### Dashboard Layout
```razor
<SbGrid Columns="12" Gap="4">
<SbGridItem Span="12">
<SbCard>Header Section</SbCard>
</SbGridItem>
<SbGridItem Span="8">
<SbCard>Main Content</SbCard>
</SbGridItem>
<SbGridItem Span="4">
<SbCard>Sidebar</SbCard>
</SbGridItem>
</SbGrid>
```
### Stats Grid
```razor
<SbGrid Columns="4" Gap="4">
<SbStatCard Value="1,234" Label="Users" Icon="users" />
<SbStatCard Value="$56K" Label="Revenue" Icon="dollar-sign" />
<SbStatCard Value="89%" Label="Uptime" Icon="activity" />
<SbStatCard Value="42" Label="Orders" Icon="shopping-cart" />
</SbGrid>
```
### Different Row and Column Gaps
```razor
<SbGrid Columns="3" RowGap="6" ColumnGap="4">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div>Item 6</div>
</SbGrid>
```
### Form Grid
```razor
<SbGrid Columns="2" Gap="4">
<SbTextField Label="First Name" @bind-Value="firstName" />
<SbTextField Label="Last Name" @bind-Value="lastName" />
<SbGridItem Span="2">
<SbTextField Label="Email" @bind-Value="email" />
</SbGridItem>
<SbGridItem Span="2">
<SbTextArea Label="Address" @bind-Value="address" />
</SbGridItem>
</SbGrid>
```
docs/components/layout/SbGridItem.md
+123
View File
@@ -0,0 +1,123 @@
# SbGridItem
A child component of SbGrid that spans a specified number of columns with responsive breakpoint support.
## Parameters
| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| Span | int | 1 | Number of columns this item spans (1-12) |
| SpanSm | int? | null | Column span at small breakpoint (640px+) |
| SpanMd | int? | null | Column span at medium breakpoint (768px+) |
| SpanLg | int? | null | Column span at large breakpoint (1024px+) |
| SpanXl | int? | null | Column span at extra large breakpoint (1280px+) |
| Class | string? | null | Additional CSS classes |
| Style | string? | null | Inline styles |
| AdditionalAttributes | Dictionary\<string, object\>? | null | Additional HTML attributes |
## Templates / Slots
| Slot | Type | Description |
|------|------|-------------|
| ChildContent | RenderFragment | Content to render inside the grid item |
## CSS Classes
- `sb-grid-item` - Base class
- `sb-grid-item--sm-{n}` - Small breakpoint span
- `sb-grid-item--md-{n}` - Medium breakpoint span
- `sb-grid-item--lg-{n}` - Large breakpoint span
- `sb-grid-item--xl-{n}` - Extra large breakpoint span
## CSS Variables
- `--sb-grid-span` - Number of columns to span
## Examples
### Basic Usage
```razor
<SbGrid Columns="12">
<SbGridItem Span="6">Half width</SbGridItem>
<SbGridItem Span="6">Half width</SbGridItem>
</SbGrid>
```
### Responsive Span
```razor
<SbGrid Columns="12">
<SbGridItem Span="12" SpanMd="6" SpanLg="4">
<SbCard>Responsive Card</SbCard>
</SbGridItem>
</SbGrid>
```
### Full Width Header
```razor
<SbGrid Columns="12" Gap="4">
<SbGridItem Span="12">
<h1>Page Title</h1>
</SbGridItem>
<SbGridItem Span="8">
<SbCard>Main Content</SbCard>
</SbGridItem>
<SbGridItem Span="4">
<SbCard>Sidebar</SbCard>
</SbGridItem>
</SbGrid>
```
### Mixed Column Widths
```razor
<SbGrid Columns="12" Gap="4">
<SbGridItem Span="4">
<SbCard>1/3 width</SbCard>
</SbGridItem>
<SbGridItem Span="8">
<SbCard>2/3 width</SbCard>
</SbGridItem>
<SbGridItem Span="3">
<SbCard>1/4 width</SbCard>
</SbGridItem>
<SbGridItem Span="3">
<SbCard>1/4 width</SbCard>
</SbGridItem>
<SbGridItem Span="6">
<SbCard>1/2 width</SbCard>
</SbGridItem>
</SbGrid>
```
### Responsive Dashboard
```razor
<SbGrid Columns="12" Gap="4">
@* Stats row - 4 columns on large, 2 on medium, 1 on small *@
<SbGridItem Span="12" SpanMd="6" SpanLg="3">
<SbStatCard Value="1,234" Label="Users" />
</SbGridItem>
<SbGridItem Span="12" SpanMd="6" SpanLg="3">
<SbStatCard Value="$56K" Label="Revenue" />
</SbGridItem>
<SbGridItem Span="12" SpanMd="6" SpanLg="3">
<SbStatCard Value="89%" Label="Uptime" />
</SbGridItem>
<SbGridItem Span="12" SpanMd="6" SpanLg="3">
<SbStatCard Value="42" Label="Orders" />
</SbGridItem>
@* Chart - full width on small, 2/3 on large *@
<SbGridItem Span="12" SpanLg="8">
<SbCard>Chart Area</SbCard>
</SbGridItem>
@* Activity feed - full width on small, 1/3 on large *@
<SbGridItem Span="12" SpanLg="4">
<SbCard>Activity Feed</SbCard>
</SbGridItem>
</SbGrid>
```
docs/components/layout/SbSpacer.md
+140
View File
@@ -0,0 +1,140 @@
# SbSpacer
A utility component for adding vertical or horizontal spacing between elements.
## Parameters
| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| Size | SbSpacerSize | Medium | Size preset for the spacer |
| Height | string? | null | Custom height (overrides Size) |
| Width | string? | null | Custom width (for horizontal spacing) |
| Grow | bool | false | Whether the spacer should grow to fill available space |
| Class | string? | null | Additional CSS classes |
## SbSpacerSize Enum
```csharp
public enum SbSpacerSize
{
ExtraSmall, // 0.25rem (4px)
Small, // 0.5rem (8px)
Medium, // 1rem (16px)
Large, // 1.5rem (24px)
ExtraLarge // 2rem (32px)
}
```
## CSS Classes
- `sb-spacer` - Base class
## Accessibility
- Uses `aria-hidden="true"` since it's a visual-only element
## Examples
### Basic Usage
```razor
<SbHeading Level="1">Title</SbHeading>
<SbSpacer />
<SbText>Some content with default spacing above.</SbText>
```
### Different Sizes
```razor
<div>Content 1</div>
<SbSpacer Size="SbSpacerSize.ExtraSmall" />
<div>Content 2 (4px gap)</div>
<div>Content 3</div>
<SbSpacer Size="SbSpacerSize.Small" />
<div>Content 4 (8px gap)</div>
<div>Content 5</div>
<SbSpacer Size="SbSpacerSize.Large" />
<div>Content 6 (24px gap)</div>
<div>Content 7</div>
<SbSpacer Size="SbSpacerSize.ExtraLarge" />
<div>Content 8 (32px gap)</div>
```
### Custom Height
```razor
<SbCard>First Card</SbCard>
<SbSpacer Height="3rem" />
<SbCard>Second Card with custom 3rem gap</SbCard>
```
### Horizontal Spacing
```razor
<SbStack Direction="SbStackDirection.Row">
<SbButton>Button 1</SbButton>
<SbSpacer Width="2rem" />
<SbButton>Button 2</SbButton>
</SbStack>
```
### Growing Spacer (Push to End)
```razor
<SbStack Direction="SbStackDirection.Row" Style="width: 100%;">
<SbText>Left Content</SbText>
<SbSpacer Grow="true" />
<SbButton>Right Button</SbButton>
</SbStack>
```
### 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`):
```razor
<SbStack Direction="SbStackDirection.Column" Gap="0">
<SbNavMenu>
<SbNavItem Href="/" Icon="home">Dashboard</SbNavItem>
<SbNavItem Href="/analytics" Icon="bar-chart">Analytics</SbNavItem>
</SbNavMenu>
<SbSpacer Grow="true" />
<SbNavMenu>
<SbNavItem Href="/settings" Icon="settings">Settings</SbNavItem>
<SbNavItem Href="/help" Icon="help-circle">Help</SbNavItem>
</SbNavMenu>
</SbStack>
```
### Section Dividers
```razor
<SbStack Gap="2">
<SbHeading Level="2">Section 1</SbHeading>
<SbText>Content for section 1...</SbText>
<SbSpacer Size="SbSpacerSize.Large" />
<SbHeading Level="2">Section 2</SbHeading>
<SbText>Content for section 2...</SbText>
<SbSpacer Size="SbSpacerSize.Large" />
<SbHeading Level="2">Section 3</SbHeading>
<SbText>Content for section 3...</SbText>
</SbStack>
```
### Footer Push Down
```razor
<SbStack Style="min-height: 100vh;">
<header>Header</header>
<main>Main Content</main>
<SbSpacer Grow="true" />
<footer>Footer pushed to bottom</footer>
</SbStack>
```
docs/components/layout/SbStack.md
+136
View File
@@ -0,0 +1,136 @@
# SbStack
A flexible layout component that arranges children in a row or column with configurable spacing and alignment.
## Parameters
| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| Direction | SbStackDirection | Column | Stack direction (Row or Column) |
| Gap | int | 2 | Gap between items (uses spacing scale 0-16) |
| Align | SbAlign | Stretch | Cross-axis alignment |
| Justify | SbJustify | Start | Main-axis justification |
| Wrap | bool | false | Whether items should wrap |
| Class | string? | null | Additional CSS classes |
| Style | string? | null | Inline styles |
| AdditionalAttributes | Dictionary\<string, object\>? | null | Additional HTML attributes |
## Templates / Slots
| Slot | Type | Description |
|------|------|-------------|
| ChildContent | RenderFragment | The content to render inside the stack |
## SbStackDirection Enum
```csharp
public enum SbStackDirection
{
Row, // Horizontal layout (flex-direction: row)
Column // Vertical layout (flex-direction: column)
}
```
## SbAlign Enum
```csharp
public enum SbAlign
{
Start, // Align items to the start
Center, // Align items to the center
End, // Align items to the end
Stretch, // Stretch items to fill the container
Baseline // Align items to the baseline
}
```
## SbJustify Enum
```csharp
public enum SbJustify
{
Start, // Items packed toward the start
Center, // Items are centered
End, // Items packed toward the end
SpaceBetween, // Evenly distributed with first at start, last at end
SpaceAround, // Evenly distributed with equal space around
SpaceEvenly // Evenly distributed with equal space between
}
```
## CSS Classes
- `sb-stack` - Base class
- `sb-stack--row` - Horizontal direction
- `sb-stack--column` - Vertical direction
- `sb-stack--wrap` - Enable wrapping
- `sb-stack--align-{start|center|end|stretch|baseline}` - Alignment classes
- `sb-stack--justify-{start|center|end|between|around|evenly}` - Justification classes
## Examples
### Basic Vertical Stack
```razor
<SbStack Gap="4">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</SbStack>
```
### Horizontal Stack
```razor
<SbStack Direction="SbStackDirection.Row" Gap="2">
<SbButton>Save</SbButton>
<SbButton Variant="SbButtonVariant.Outline">Cancel</SbButton>
</SbStack>
```
### Centered Content
```razor
<SbStack Direction="SbStackDirection.Row"
Justify="SbJustify.Center"
Align="SbAlign.Center"
Gap="4">
<SbIcon Name="check" />
<span>Success!</span>
</SbStack>
```
### Space Between
```razor
<SbStack Direction="SbStackDirection.Row"
Justify="SbJustify.SpaceBetween"
Align="SbAlign.Center">
<h1>Title</h1>
<SbButton>Action</SbButton>
</SbStack>
```
### Wrapped Items
```razor
<SbStack Direction="SbStackDirection.Row" Wrap="true" Gap="2">
@foreach (var tag in tags)
{
<SbChip>@tag</SbChip>
}
</SbStack>
```
### Form Layout
```razor
<SbStack Gap="4">
<SbTextField Label="Name" @bind-Value="name" />
<SbTextField Label="Email" @bind-Value="email" />
<SbStack Direction="SbStackDirection.Row" Gap="2" Justify="SbJustify.End">
<SbButton Variant="SbButtonVariant.Outline">Cancel</SbButton>
<SbButton>Submit</SbButton>
</SbStack>
</SbStack>
```