Skip to content

UI directives converted to components #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
immohammadjaved merged 4 commits into from
Oct 10, 2025
Merged

UI directives converted to components #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
47deb99
UI(badge): Convert alert-dialog directive to component
immohammadjaved Oct 4, 2025
204e5ea
UI(breadcrumb): Convert breadcrumb directive to component
immohammadjaved Oct 4, 2025
be8c942
UI(card): Convert card directives to components
immohammadjaved Oct 4, 2025
1e55678
UI(checkbox): Convert checkbox directive to components
immohammadjaved Oct 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
148 changes: 83 additions & 65 deletions projects/docs/src/app/pages/docs/components/alert-dialog/alert-dialog.variants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,21 +10,25 @@ import { lucideTriangleAlert } from '@ng-icons/lucide';
template: `
<button uiButton variant="outline" [uiAlertDialogTrigger]="alertDialog">Open Alert Dialog</button>
<ng-template #alertDialog let-close="close">
<div uiAlertDialogOverlay>
<div uiAlertDialog>
<div uiAlertDialogHeader>
<h1 uiAlertDialogTitle>Are you absolutely sure?</h1>
<p uiAlertDialogDescription>
<ui-alert-dialog-overlay>
<ui-alert-dialog>
<ui-alert-dialog-header>
<ui-alert-dialog-title>Are you absolutely sure?</ui-alert-dialog-title>
<ui-alert-dialog-description>
This action cannot be undone. This will permanently delete your account
and remove your data from our servers.
</p>
</div>
<div uiAlertDialogFooter>
<button uiAlertDialogCancel (click)="close()" uiButton variant="outline">Cancel</button>
<button uiAlertDialogAction (click)="close()" uiButton>Delete Account</button>
</div>
</div>
</div>
</ui-alert-dialog-description>
</ui-alert-dialog-header>
<ui-alert-dialog-footer>
<ui-alert-dialog-cancel>
<button (click)="close()" uiButton variant="outline">Cancel</button>
</ui-alert-dialog-cancel>
<ui-alert-dialog-action>
<button (click)="close()" uiButton>Delete Account</button>
</ui-alert-dialog-action>
</ui-alert-dialog-footer>
</ui-alert-dialog>
</ui-alert-dialog-overlay>
</ng-template>
`,
imports: [UiAlertDialog, UiAlertDialogHeader, UiAlertDialogTitle, UiAlertDialogDescription, UiAlertDialogFooter, UiAlertDialogTrigger, UiAlertDialogOverlay, UiAlertDialogCancel, UiAlertDialogAction, UiButton]
Expand All @@ -36,26 +40,30 @@ export class AlertDialogDefaultExample {}
template: `
<button uiButton variant="destructive" [uiAlertDialogTrigger]="alertDialog">Delete Account</button>
<ng-template #alertDialog let-close="close">
<div uiAlertDialogOverlay>
<div uiAlertDialog>
<div uiAlertDialogHeader>
<div class="flex items-center gap-2">
<span class="text-destructive">
<ng-icon name="lucideTriangleAlert" size="20" />
</span>
<h1 uiAlertDialogTitle>Delete Account</h1>
</div>
<p uiAlertDialogDescription>
This action cannot be undone. This will permanently delete your account
and remove your data from our servers.
</p>
</div>
<div uiAlertDialogFooter>
<button uiAlertDialogCancel (click)="close()" uiButton variant="outline">Cancel</button>
<button uiAlertDialogAction (click)="close()" uiButton variant="destructive">Delete Account</button>
</div>
</div>
</div>
<ui-alert-dialog-overlay>
<ui-alert-dialog>
<ui-alert-dialog-header>
<div class="flex items-center gap-2">
<span class="text-destructive">
<ng-icon name="lucideTriangleAlert" size="20" />
</span>
<ui-alert-dialog-title>Delete Account</ui-alert-dialog-title>
</div>
<ui-alert-dialog-description>
This action cannot be undone. This will permanently delete your account
and remove your data from our servers.
</ui-alert-dialog-description>
</ui-alert-dialog-header>
<ui-alert-dialog-footer>
<ui-alert-dialog-cancel>
<button (click)="close()" uiButton variant="outline">Cancel</button>
</ui-alert-dialog-cancel>
<ui-alert-dialog-action>
<button (click)="close()" uiButton variant="destructive">Delete Account</button>
</ui-alert-dialog-action>
</ui-alert-dialog-footer>
</ui-alert-dialog>
</ui-alert-dialog-overlay>
</ng-template>
`,
providers: [provideIcons({ lucideTriangleAlert })],
Expand All @@ -68,7 +76,7 @@ export const alertDialogMeta: IComponentMeta = {
description: 'A modal dialog that interrupts the user with important content and expects a response.',
installation: {
package: 'alert-dialog',
import: `import { UiAlertDialog, UiAlertDialogTrigger, UiAlertDialogHeader, UiAlertDialogTitle, UiAlertDialogDescription, UiAlertDialogFooter, UiAlertDialogOverlay, UiAlertDialogCancel, UiAlertDialogAction } from '@workspace/ui/directives/alert-dialog';`,
import: `import { UiAlertDialog, UiAlertDialogTrigger, UiAlertDialogHeader, UiAlertDialogTitle, UiAlertDialogDescription, UiAlertDialogFooter, UiAlertDialogOverlay, UiAlertDialogCancel, UiAlertDialogAction } from '@workspace/ui/alert-dialog';`,
usage: `<button [uiAlertDialogTrigger]="alertDialog">Open</button><ng-template #alertDialog let-close="close"><div uiAlertDialogOverlay><div uiAlertDialog>...</div></div></ng-template>`
},
api: {
Expand All @@ -86,29 +94,33 @@ export const alertDialogVariants: IVariant[] = [
{
title: 'Default',
description: 'Basic alert dialog with header, description, and action buttons.',
code: `import { UiAlertDialog, UiAlertDialogTrigger, UiAlertDialogHeader, UiAlertDialogTitle, UiAlertDialogDescription, UiAlertDialogFooter, UiAlertDialogOverlay, UiAlertDialogCancel, UiAlertDialogAction } from '@workspace/ui/directives/alert-dialog';
import { UiButton } from '@workspace/ui/directives/button';
code: `import { UiAlertDialog, UiAlertDialogTrigger, UiAlertDialogHeader, UiAlertDialogTitle, UiAlertDialogDescription, UiAlertDialogFooter, UiAlertDialogOverlay, UiAlertDialogCancel, UiAlertDialogAction } from '@workspace/ui/alert-dialog';
import { UiButton } from '@workspace/ui/button';

@Component({
selector: 'alert-dialog-default-example',
template: \`
<button uiButton variant="outline" [uiAlertDialogTrigger]="alertDialog">Open Alert Dialog</button>
<ng-template #alertDialog let-close="close">
<div uiAlertDialogOverlay>
<div uiAlertDialog>
<div uiAlertDialogHeader>
<h1 uiAlertDialogTitle>Are you absolutely sure?</h1>
<p uiAlertDialogDescription>
<ui-alert-dialog-overlay>
<ui-alert-dialog>
<ui-alert-dialog-header>
<ui-alert-dialog-title>Are you absolutely sure?</ui-alert-dialog-title>
<ui-alert-dialog-description>
This action cannot be undone. This will permanently delete your account
and remove your data from our servers.
</p>
</div>
<div uiAlertDialogFooter>
<button uiAlertDialogCancel (click)="close()" uiButton variant="outline">Cancel</button>
<button uiAlertDialogAction (click)="close()" uiButton>Delete Account</button>
</div>
</div>
</div>
</ui-alert-dialog-description>
</ui-alert-dialog-header>
<ui-alert-dialog-footer>
<ui-alert-dialog-cancel>
<button (click)="close()" uiButton variant="outline">Cancel</button>
</ui-alert-dialog-cancel>
<ui-alert-dialog-action>
<button (click)="close()" uiButton>Delete Account</button>
</ui-alert-dialog-action>
</ui-alert-dialog-footer>
</ui-alert-dialog>
</ui-alert-dialog-overlay>
</ng-template>
\`,
imports: [UiAlertDialog, UiAlertDialogHeader, UiAlertDialogTitle, UiAlertDialogDescription, UiAlertDialogFooter, UiAlertDialogTrigger, UiAlertDialogOverlay, UiAlertDialogCancel, UiAlertDialogAction, UiButton]
Expand All @@ -119,8 +131,8 @@ export class AlertDialogDefaultExample {}`,
{
title: 'Destructive',
description: 'Alert dialog with destructive action styling and warning icon.',
code: `import { UiAlertDialog, UiAlertDialogTrigger, UiAlertDialogHeader, UiAlertDialogTitle, UiAlertDialogDescription, UiAlertDialogFooter, UiAlertDialogOverlay, UiAlertDialogCancel, UiAlertDialogAction } from '@workspace/ui/directives/alert-dialog';
import { UiButton } from '@workspace/ui/directives/button';
code: `import { UiAlertDialog, UiAlertDialogTrigger, UiAlertDialogHeader, UiAlertDialogTitle, UiAlertDialogDescription, UiAlertDialogFooter, UiAlertDialogOverlay, UiAlertDialogCancel, UiAlertDialogAction } from '@workspace/ui/alert-dialog';
import { UiButton } from '@workspace/ui/button';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideTriangle } from '@ng-icons/lucide';

Expand All @@ -129,24 +141,30 @@ import { lucideTriangle } from '@ng-icons/lucide';
template: \`
<button uiButton variant="destructive" [uiAlertDialogTrigger]="alertDialog">Delete Account</button>
<ng-template #alertDialog let-close="close">
<div uiAlertDialogOverlay>
<div uiAlertDialog>
<div uiAlertDialogHeader>
<ui-alert-dialog-overlay>
<ui-alert-dialog>
<ui-alert-dialog-header>
<div class="flex items-center gap-2">
<ng-icon name="lucideTriangleAlert" class="h-5 w-5 text-destructive"></ng-icon>
<h1 uiAlertDialogTitle>Delete Account</h1>
<span class="text-destructive">
<ng-icon name="lucideTriangleAlert" size="20" />
</span>
<ui-alert-dialog-title>Delete Account</ui-alert-dialog-title>
</div>
<p uiAlertDialogDescription>
<ui-alert-dialog-description>
This action cannot be undone. This will permanently delete your account
and remove your data from our servers.
</p>
</div>
<div uiAlertDialogFooter>
<button uiAlertDialogCancel (click)="close()" uiButton variant="outline">Cancel</button>
<button uiAlertDialogAction (click)="close()" uiButton variant="destructive">Delete Account</button>
</div>
</div>
</div>
</ui-alert-dialog-description>
</ui-alert-dialog-header>
<ui-alert-dialog-footer>
<ui-alert-dialog-cancel>
<button (click)="close()" uiButton variant="outline">Cancel</button>
</ui-alert-dialog-cancel>
<ui-alert-dialog-action>
<button (click)="close()" uiButton variant="destructive">Delete Account</button>
</ui-alert-dialog-action>
</ui-alert-dialog-footer>
</ui-alert-dialog>
</ui-alert-dialog-overlay>
</ng-template>
\`,
providers: [provideIcons({ lucideTriangle })],
Expand Down
Loading