Skip to content

Commit 0de0b6a

Browse files
ShewartShewart
authored
chore: add new components and upgrade (#9)
This pull request introduces a major update to the demo components, modernizing their usage to a compositional pattern and adding new interactive examples. It also improves CI/CD workflows for better caching and build reliability, and increments the ShellUI version to 0.3.0-alpha.1. The most important changes are grouped below. ### Demo Component Modernization & Expansion * Refactored `ComplexComponentsDemo.razor`, `NavigationDemo.razor`, and `OverlayDemo.razor` to use compositional patterns for components like Tabs, Stepper, Accordion, and Dropdown, enabling more flexible and readable markup. Added new demos for Collapsible, Docs components (CopyButton, Callout, LinkCard, PrevNextNav), Stepper in Dialog, and multiple Accordion modes. [[1]](diffhunk://#diff-86f7bfe749ae197945738fe11bed80bd0e728adcaa4422ef7a7ba178d589385bR108-R163) [[2]](diffhunk://#diff-86f7bfe749ae197945738fe11bed80bd0e728adcaa4422ef7a7ba178d589385bL141-R305) [[3]](diffhunk://#diff-86f7bfe749ae197945738fe11bed80bd0e728adcaa4422ef7a7ba178d589385bR378-R381) [[4]](diffhunk://#diff-86f7bfe749ae197945738fe11bed80bd0e728adcaa4422ef7a7ba178d589385bL247-L250) [[5]](diffhunk://#diff-86f7bfe749ae197945738fe11bed80bd0e728adcaa4422ef7a7ba178d589385bL295-R476) [[6]](diffhunk://#diff-836fb2cad8e50f57fff1fc3551d9d19b8f14279c49958e046762e459d995293bL79-R84) [[7]](diffhunk://#diff-836fb2cad8e50f57fff1fc3551d9d19b8f14279c49958e046762e459d995293bL94-L102) [[8]](diffhunk://#diff-31805b62249f82fca428bb3044676f4fb992b10632419894025ab29c1cc5dc77R3-R9) [[9]](diffhunk://#diff-31805b62249f82fca428bb3044676f4fb992b10632419894025ab29c1cc5dc77R28-R43) [[10]](diffhunk://#diff-31805b62249f82fca428bb3044676f4fb992b10632419894025ab29c1cc5dc77L57-R75) * Removed legacy parameter-based patterns and event handlers for Tabs and Stepper, replacing them with compositional markup and new handler methods. [[1]](diffhunk://#diff-86f7bfe749ae197945738fe11bed80bd0e728adcaa4422ef7a7ba178d589385bL247-L250) [[2]](diffhunk://#diff-86f7bfe749ae197945738fe11bed80bd0e728adcaa4422ef7a7ba178d589385bL295-R476) ### CI/CD Workflow Improvements * Added NuGet package caching to both `ci.yml` and `release.yml` workflows to speed up builds and reduce redundant downloads. [[1]](diffhunk://#diff-b803fcb7f17ed9235f1e5cb1fcd2f5d3b2838429d4368ae4c57ce4436577f03fR16-R40) [[2]](diffhunk://#diff-87db21a973eed4fef5f32b267aa60fcee5cbdf03c67fafdc2a9b553bb0b15f34L22-R46) * Updated build, test, and pack steps to explicitly reference the `ShellUI.sln` solution file for improved reliability and clarity. [[1]](diffhunk://#diff-b803fcb7f17ed9235f1e5cb1fcd2f5d3b2838429d4368ae4c57ce4436577f03fR16-R40) [[2]](diffhunk://#diff-87db21a973eed4fef5f32b267aa60fcee5cbdf03c67fafdc2a9b553bb0b15f34L22-R46) * Added concurrency control to `release.yml` to avoid overlapping releases and simplified tag pattern matching for release triggers. ### Versioning * Updated `Directory.Build.props` to set the ShellUI version to `0.3.0` and suffix to `alpha.1` for pre-release designation. --- These changes modernize the demo experience, improve workflow efficiency, and prepare the project for the next alpha release.
2 parents 5d14481 + bed9030 commit 0de0b6a

File tree

192 files changed

+5949
-2231
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

192 files changed

+5949
-2231
lines changed

‎.github/workflows/ci.yml‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,23 +13,31 @@ jobs:
1313
steps:
1414
- uses: actions/checkout@v4
1515

16+
- name: Cache NuGet packages
17+
uses: actions/cache@v4
18+
with:
19+
path: ~/.nuget/packages
20+
key: ${{ runner.os }}-nuget-${{ hashFiles('**/*.csproj', '**/packages.lock.json') }}
21+
restore-keys: |
22+
${{ runner.os }}-nuget-
23+
1624
- name: Setup .NET
1725
uses: actions/setup-dotnet@v4
1826
with:
1927
dotnet-version: |
2028
9.0.x
2129
2230
- name: Restore dependencies
23-
run: dotnet restore
31+
run: dotnet restore ShellUI.sln
2432

2533
- name: Build
26-
run: dotnet build --no-restore --configuration Release
34+
run: dotnet build ShellUI.sln --no-restore --configuration Release
2735

2836
- name: Run tests
29-
run: dotnet test --no-restore --configuration Release --verbosity normal
37+
run: dotnet test ShellUI.sln --no-restore --no-build --configuration Release --verbosity normal
3038

3139
- name: Pack NuGet packages
32-
run: dotnet pack --no-build --configuration Release -p:ContinuousIntegrationBuild=true
40+
run: dotnet pack ShellUI.sln --no-build --configuration Release -p:ContinuousIntegrationBuild=true
3341

3442
- name: Upload build artifacts
3543
uses: actions/upload-artifact@v4

‎.github/workflows/release.yml‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,15 @@ name: Release
33
on:
44
push:
55
tags:
6-
- 'v*.*.*'
6+
- 'v*'
77

88
permissions:
99
contents: write
1010

11+
concurrency:
12+
group: release-${{ github.ref }}
13+
cancel-in-progress: false
14+
1115
jobs:
1216
publish:
1317
runs-on: ubuntu-latest
@@ -19,20 +23,27 @@ jobs:
1923
- name: Setup .NET
2024
uses: actions/setup-dotnet@v4
2125
with:
22-
dotnet-version: |
23-
9.0.x
26+
dotnet-version: '9.0.x'
27+
28+
- name: Cache NuGet packages
29+
uses: actions/cache@v4
30+
with:
31+
path: ~/.nuget/packages
32+
key: ${{ runner.os }}-nuget-${{ hashFiles('**/*.csproj', '**/packages.lock.json') }}
33+
restore-keys: |
34+
${{ runner.os }}-nuget-
2435
2536
- name: Restore dependencies
26-
run: dotnet restore
37+
run: dotnet restore ShellUI.sln
2738

2839
- name: Build
29-
run: dotnet build --no-restore --configuration Release
40+
run: dotnet build ShellUI.sln --no-restore --configuration Release
3041

3142
- name: Run tests
32-
run: dotnet test --no-restore --configuration Release
43+
run: dotnet test ShellUI.sln --no-restore --no-build --configuration Release --verbosity normal
3344

3445
- name: Pack NuGet packages
35-
run: dotnet pack --no-build --configuration Release -p:ContinuousIntegrationBuild=true
46+
run: dotnet pack ShellUI.sln --no-build --configuration Release -p:ContinuousIntegrationBuild=true
3647

3748
- name: Publish to NuGet
3849
run: |

‎Directory.Build.props‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
<Project>
33
<!-- Centralized ShellUI Version - Update this single file to version all components -->
44
<PropertyGroup>
5-
<ShellUIVersion>0.2.0</ShellUIVersion>
6-
<ShellUIVersionSuffix></ShellUIVersionSuffix>
5+
<ShellUIVersion>0.3.0</ShellUIVersion>
6+
<ShellUIVersionSuffix>alpha.1</ShellUIVersionSuffix>
77
</PropertyGroup>
88

99
<!-- Common properties for all ShellUI projects -->

‎NET9/BlazorInteractiveServer/Components/Demo/ComplexComponentsDemo.razor‎

Lines changed: 184 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,62 @@
105105
</HoverCard>
106106
</div>
107107

108+
<!-- Collapsible Demo -->
109+
<div>
110+
<h3 class="text-xl font-semibold mb-2 text-card-foreground">Collapsible</h3>
111+
<Collapsible IsOpen="@_collapsibleOpen" IsOpenChanged="@(v => _collapsibleOpen = v)">
112+
<CollapsibleTrigger>
113+
<Button Variant="ButtonVariant.Ghost">
114+
@(_collapsibleOpen ? "Hide" : "Show") Details
115+
</Button>
116+
</CollapsibleTrigger>
117+
<CollapsibleContent>
118+
<div class="rounded-md border px-4 py-3 text-sm">
119+
Here is some additional content that can be toggled.
120+
</div>
121+
</CollapsibleContent>
122+
</Collapsible>
123+
</div>
124+
125+
<!-- Docs Components: CopyButton, Callout, LinkCard, PrevNextNav -->
126+
<div>
127+
<h3 class="text-xl font-semibold mb-2 text-card-foreground">Docs Components</h3>
128+
<div class="space-y-4">
129+
<div>
130+
<p class="text-sm text-muted-foreground mb-2">CopyButton — copy code to clipboard:</p>
131+
<div class="flex items-center gap-2 p-3 rounded-md border border-border bg-muted/30">
132+
<code class="flex-1 text-sm">dotnet shellui add button</code>
133+
<CopyButton Text="dotnet shellui add button" />
134+
</div>
135+
</div>
136+
<div>
137+
<p class="text-sm text-muted-foreground mb-2">Callout — info/warning/tip boxes:</p>
138+
<div class="space-y-3">
139+
<Callout Variant="CalloutVariant.Info" Title="Note">
140+
This is an info callout. Use it for helpful hints.
141+
</Callout>
142+
<Callout Variant="CalloutVariant.Tip" Title="Tip">
143+
Pro tip: Run <code>dotnet shellui init</code> first!
144+
</Callout>
145+
<Callout Variant="CalloutVariant.Warning" Title="Warning">
146+
Be careful when using --force; it overwrites existing files.
147+
</Callout>
148+
</div>
149+
</div>
150+
<div>
151+
<p class="text-sm text-muted-foreground mb-2">LinkCard — card-style navigation:</p>
152+
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
153+
<LinkCard Href="/overlay" Title="Overlay Components" />
154+
<LinkCard Href="/forms" Title="Form Controls" />
155+
</div>
156+
</div>
157+
<div>
158+
<p class="text-sm text-muted-foreground mb-2">PrevNextNav — page navigation:</p>
159+
<PrevNextNav PrevHref="/" PrevLabel="Home" NextHref="/overlay" NextLabel="Overlay Demo" />
160+
</div>
161+
</div>
162+
</div>
163+
108164
<!-- Command Demo -->
109165
<div>
110166
<h3 class="text-xl font-semibold mb-2 text-card-foreground">Command Palette</h3>
@@ -138,16 +194,115 @@
138194
</EmptyState>
139195
</div>
140196

141-
<!-- Tabs Demo -->
197+
<!-- Tabs Demo (shadcn-style compositional) -->
142198
<div>
143199
<h3 class="text-xl font-semibold mb-2 text-card-foreground">Tabs</h3>
144-
<Tabs TabItems="TabItems" ActiveTab="@ActiveTab" ActiveTabChanged="HandleTabChange" />
200+
<Tabs DefaultValue="overview" Class="w-full max-w-[400px]">
201+
<TabsList>
202+
<TabsTrigger Value="overview">Overview</TabsTrigger>
203+
<TabsTrigger Value="analytics">Analytics</TabsTrigger>
204+
<TabsTrigger Value="reports">Reports</TabsTrigger>
205+
<TabsTrigger Value="settings">Settings</TabsTrigger>
206+
</TabsList>
207+
<TabsContent Value="overview">
208+
<Card>
209+
<CardHeader>
210+
<CardTitle>Overview</CardTitle>
211+
<CardDescription>
212+
View your key metrics and recent project activity. Track progress across all your active projects.
213+
</CardDescription>
214+
</CardHeader>
215+
<CardContent Class="text-muted-foreground text-sm">
216+
You have 12 active projects and 3 pending tasks.
217+
</CardContent>
218+
</Card>
219+
</TabsContent>
220+
<TabsContent Value="analytics">
221+
<Card>
222+
<CardHeader>
223+
<CardTitle>Analytics</CardTitle>
224+
<CardDescription>
225+
Track performance and user engagement metrics. Monitor trends and identify growth opportunities.
226+
</CardDescription>
227+
</CardHeader>
228+
<CardContent Class="text-muted-foreground text-sm">
229+
Page views are up 25% compared to last month.
230+
</CardContent>
231+
</Card>
232+
</TabsContent>
233+
<TabsContent Value="reports">
234+
<Card>
235+
<CardHeader>
236+
<CardTitle>Reports</CardTitle>
237+
<CardDescription>
238+
Generate and download your detailed reports. Export data in multiple formats for analysis.
239+
</CardDescription>
240+
</CardHeader>
241+
<CardContent Class="text-muted-foreground text-sm">
242+
You have 5 reports ready and available to export.
243+
</CardContent>
244+
</Card>
245+
</TabsContent>
246+
<TabsContent Value="settings">
247+
<Card>
248+
<CardHeader>
249+
<CardTitle>Settings</CardTitle>
250+
<CardDescription>
251+
Manage your account preferences and options. Customize your experience to fit your needs.
252+
</CardDescription>
253+
</CardHeader>
254+
<CardContent Class="text-muted-foreground text-sm">
255+
Configure notifications, security, and themes.
256+
</CardContent>
257+
</Card>
258+
</TabsContent>
259+
</Tabs>
145260
</div>
146261

147-
<!-- Stepper Demo -->
262+
<!-- Stepper Demo (compositional with Confirm on last step) -->
148263
<div>
149264
<h3 class="text-xl font-semibold mb-2 text-card-foreground">Stepper</h3>
150-
<Stepper StepItems="StepperSteps" CurrentStep="@CurrentStep" CurrentStepChanged="HandleStepChange" />
265+
<Stepper TotalSteps="4" CurrentStep="@CurrentStep" CurrentStepChanged="HandleStepChange" OnConfirm="HandleStepperConfirm">
266+
<StepperList>
267+
<StepperStep Value="0" Title="Account Setup" Description="Create your account" />
268+
<StepperStep Value="1" Title="Profile Information" Description="Complete your profile" />
269+
<StepperStep Value="2" Title="Preferences" Description="Set your preferences" />
270+
<StepperStep Value="3" Title="Review" Description="Review and confirm" />
271+
</StepperList>
272+
<StepperContent Value="0"><p>Enter your account details here.</p></StepperContent>
273+
<StepperContent Value="1"><p>Add your profile information.</p></StepperContent>
274+
<StepperContent Value="2"><p>Configure your preferences.</p></StepperContent>
275+
<StepperContent Value="3"><p>Review your information and confirm.</p></StepperContent>
276+
</Stepper>
277+
@if (_stepperSubmitted)
278+
{
279+
<p class="mt-2 text-sm text-muted-foreground">Stepper submitted successfully!</p>
280+
}
281+
</div>
282+
283+
<!-- Stepper in Dialog -->
284+
<div>
285+
<h3 class="text-xl font-semibold mb-2 text-card-foreground">Stepper in Dialog</h3>
286+
<p class="text-sm text-muted-foreground mb-4">Combine Dialog with Stepper for multi-step flows in a modal.</p>
287+
<Button @onclick="() => _showStepperDialog = true">Open Setup Wizard</Button>
288+
<Dialog Open="@_showStepperDialog" OpenChanged="HandleStepperDialogOpenChanged">
289+
<DialogContent Class="max-w-2xl max-h-[90vh] overflow-y-auto">
290+
<DialogHeader>
291+
<DialogTitle>Account Setup Wizard</DialogTitle>
292+
<DialogDescription>Complete these steps to set up your account.</DialogDescription>
293+
</DialogHeader>
294+
<Stepper TotalSteps="3" CurrentStep="@_dialogStepperStep" CurrentStepChanged="HandleDialogStepChange" OnConfirm="HandleDialogStepperConfirm" ShowConfirmOnLast="true">
295+
<StepperList>
296+
<StepperStep Value="0" Title="Details" Description="Basic info" />
297+
<StepperStep Value="1" Title="Preferences" Description="Your choices" />
298+
<StepperStep Value="2" Title="Done" Description="Complete" />
299+
</StepperList>
300+
<StepperContent Value="0"><p class="text-sm text-muted-foreground">Enter your name and email.</p></StepperContent>
301+
<StepperContent Value="1"><p class="text-sm text-muted-foreground">Choose your notification and theme preferences.</p></StepperContent>
302+
<StepperContent Value="2"><p class="text-sm text-muted-foreground">You're all set! Click Confirm to finish.</p></StepperContent>
303+
</Stepper>
304+
</DialogContent>
305+
</Dialog>
151306
</div>
152307

153308
<!-- Carousel Demo -->
@@ -220,6 +375,10 @@
220375

221376
@code {
222377
private bool _showCommand = false;
378+
private bool _collapsibleOpen = false;
379+
private bool _stepperSubmitted = false;
380+
private bool _showStepperDialog = false;
381+
private int _dialogStepperStep = 0;
223382

224383
[Parameter] public List<User> Users { get; set; } = new();
225384
[Parameter] public List<DataTableColumn<User>> UserColumns { get; set; } = new();
@@ -244,10 +403,6 @@
244403
[Parameter] public EventCallback<CommandItem> OnCommandSelected { get; set; }
245404
[Parameter] public List<ContextMenuItem> ContextMenuItems { get; set; } = new();
246405
[Parameter] public EventCallback<ContextMenuItem> OnContextMenuSelect { get; set; }
247-
[Parameter] public List<TabItem> TabItems { get; set; } = new();
248-
[Parameter] public string ActiveTab { get; set; } = "overview";
249-
[Parameter] public EventCallback<string> ActiveTabChanged { get; set; }
250-
[Parameter] public List<StepItem> StepperSteps { get; set; } = new();
251406
[Parameter] public int CurrentStep { get; set; } = 0;
252407
[Parameter] public EventCallback<int> CurrentStepChanged { get; set; }
253408
[Parameter] public int TextCarouselSlide { get; set; } = 0;
@@ -292,18 +447,33 @@
292447
await OnContextMenuSelect.InvokeAsync(item);
293448
}
294449

295-
private async Task HandleTabChange(string tabId)
296-
{
297-
ActiveTab = tabId;
298-
await ActiveTabChanged.InvokeAsync(tabId);
299-
}
300-
301450
private async Task HandleStepChange(int step)
302451
{
303452
CurrentStep = step;
304453
await CurrentStepChanged.InvokeAsync(step);
305454
}
306455

456+
private async Task HandleStepperConfirm()
457+
{
458+
_stepperSubmitted = true;
459+
await Task.CompletedTask;
460+
}
461+
462+
private async Task HandleDialogStepChange(int step)
463+
{
464+
_dialogStepperStep = step;
465+
await Task.CompletedTask;
466+
}
467+
468+
private async Task HandleDialogStepperConfirm()
469+
{
470+
_showStepperDialog = false;
471+
_dialogStepperStep = 0;
472+
await Task.CompletedTask;
473+
}
474+
475+
private void HandleStepperDialogOpenChanged(bool value) => _showStepperDialog = value;
476+
307477
private async Task HandleTextCarouselSlideChange(int slide)
308478
{
309479
TextCarouselSlide = slide;

0 commit comments

Comments
 (0)