Skip to content

Commit 51f0b34

Browse files
marcjulianmarcjulian
authored
Merge pull request #1804 from spartan-ng/feat/code-block
feat(code-block): add code block
1 parent 7738c82 commit 51f0b34

58 files changed

Lines changed: 2173 additions & 2 deletions

File tree

Some content is hidden

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

‎.github/ISSUE_TEMPLATE/01-bug-report.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ body:
3939
- chart
4040
- checkbox
4141
- cli
42+
- code-block
4243
- collapsible
4344
- combobox
4445
- command

‎.github/ISSUE_TEMPLATE/02-feature-request.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ body:
3030
- chart
3131
- checkbox
3232
- cli
33+
- code-block
3334
- collapsible
3435
- combobox
3536
- command

‎.github/PULL_REQUEST_TEMPLATE.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ What kind of change does this PR introduce?
4343
- [ ] carousel
4444
- [ ] chart
4545
- [ ] checkbox
46+
- [ ] code-block
4647
- [ ] collapsible
4748
- [ ] combobox
4849
- [ ] command

‎apps/app/src/app/core/models/primitives-snippets.model.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export type PrimitiveSnippet =
1616
| 'carousel'
1717
| 'chart'
1818
| 'checkbox'
19+
| 'code-block'
1920
| 'collapsible'
2021
| 'combobox'
2122
| 'command'

‎apps/app/src/app/pages/(components)/components/(checkbox)/checkbox.page.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export const routeMeta: RouteMeta = {
8282
<spartan-ui-api-docs docType="helm" />
8383
8484
<spartan-page-bottom-nav>
85-
<spartan-page-bottom-nav-link href="collapsible" label="Collapsible" />
85+
<spartan-page-bottom-nav-link href="code-block" label="Code Block" />
8686
<spartan-page-bottom-nav-link direction="previous" href="chart" label="Chart" />
8787
</spartan-page-bottom-nav>
8888
</section>

‎apps/app/src/app/pages/(components)/components/(code-block)/code-block--actions.preview.ts‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
2+
import { NgIcon, provideIcons } from '@ng-icons/core';
3+
import { lucideDownload, lucideTerminal, lucideWrapText } from '@ng-icons/lucide';
4+
import { HlmButton } from '@spartan-ng/helm/button';
5+
import { HlmCodeBlockImports } from '@spartan-ng/helm/code-block';
6+
7+
@Component({
8+
selector: 'spartan-code-block-actions',
9+
imports: [HlmCodeBlockImports, HlmButton, NgIcon],
10+
providers: [provideIcons({ lucideTerminal, lucideWrapText, lucideDownload })],
11+
changeDetection: ChangeDetectionStrategy.OnPush,
12+
template: `
13+
<div class="w-full max-w-md">
14+
<hlm-code-block>
15+
<hlm-code-block-header>
16+
<hlm-code-block-title>
17+
<ng-icon name="lucideTerminal" />
18+
Terminal
19+
</hlm-code-block-title>
20+
<hlm-code-block-actions>
21+
<button
22+
hlmBtn
23+
variant="ghost"
24+
size="icon-xs"
25+
aria-label="Wrap lines"
26+
[attr.aria-pressed]="_wrap()"
27+
(click)="_wrap.set(!_wrap())"
28+
>
29+
<ng-icon name="lucideWrapText" />
30+
</button>
31+
<button
32+
hlmBtn
33+
variant="ghost"
34+
size="icon-xs"
35+
aria-label="Download"
36+
(click)="_download(_output, 'lint.log')"
37+
>
38+
<ng-icon name="lucideDownload" />
39+
</button>
40+
<button hlmCodeBlockCopyButton [value]="_output"></button>
41+
</hlm-code-block-actions>
42+
</hlm-code-block-header>
43+
<pre hlmCodeBlockContent [code]="_output" [wrap]="_wrap()"></pre>
44+
</hlm-code-block>
45+
</div>
46+
`,
47+
})
48+
export class CodeBlockActions {
49+
protected readonly _wrap = signal(false);
50+
51+
protected readonly _output = `$ pnpm lint
52+
apps/web/src/app/message-list.component.ts
53+
18:22 error Unsafe call of an \`any\` typed value @typescript-eslint/no-unsafe-call
54+
42:7 warning 'scrollToBottom' is assigned a value but never used @typescript-eslint/no-unused-vars
55+
56+
✖ 2 problems (1 error, 1 warning)`;
57+
58+
protected _download(value: string, filename: string): void {
59+
const url = URL.createObjectURL(new Blob([value], { type: 'text/plain' }));
60+
const link = document.createElement('a');
61+
link.href = url;
62+
link.download = filename;
63+
link.click();
64+
URL.revokeObjectURL(url);
65+
}
66+
}

‎apps/app/src/app/pages/(components)/components/(code-block)/code-block--basic.preview.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { ChangeDetectionStrategy, Component } from '@angular/core';
2+
import { HlmCodeBlockImports } from '@spartan-ng/helm/code-block';
3+
4+
@Component({
5+
selector: 'spartan-code-block-basic',
6+
imports: [HlmCodeBlockImports],
7+
changeDetection: ChangeDetectionStrategy.OnPush,
8+
template: `
9+
<div class="w-full max-w-md">
10+
<hlm-code-block>
11+
<pre hlmCodeBlockContent>{{ _output }}</pre>
12+
</hlm-code-block>
13+
</div>
14+
`,
15+
})
16+
export class CodeBlockBasic {
17+
protected readonly _output = `$ pnpm build
18+
> ng build
19+
20+
✔ Browser application bundle generation complete.
21+
22+
Initial chunk files | Names | Raw size
23+
polyfills.js | polyfills | 34.52 kB
24+
main.js | main | 210.45 kB
25+
26+
Output location: dist/app`;
27+
}

‎apps/app/src/app/pages/(components)/components/(code-block)/code-block--destructive.preview.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { ChangeDetectionStrategy, Component } from '@angular/core';
2+
import { HlmCodeBlockImports } from '@spartan-ng/helm/code-block';
3+
4+
@Component({
5+
selector: 'spartan-code-block-destructive',
6+
imports: [HlmCodeBlockImports],
7+
changeDetection: ChangeDetectionStrategy.OnPush,
8+
template: `
9+
<div class="w-full max-w-md">
10+
<hlm-code-block variant="destructive">
11+
<hlm-code-block-header>
12+
<hlm-code-block-title>Error</hlm-code-block-title>
13+
<hlm-code-block-actions>
14+
<button hlmCodeBlockCopyButton [value]="_error"></button>
15+
</hlm-code-block-actions>
16+
</hlm-code-block-header>
17+
<pre hlmCodeBlockContent [code]="_error" wrap></pre>
18+
</hlm-code-block>
19+
</div>
20+
`,
21+
})
22+
export class CodeBlockDestructive {
23+
protected readonly _error = `TypeError: Cannot read properties of undefined (reading 'pipe')
24+
at MessageListComponent.ngOnInit (app/message-list.component.ts:18:22)
25+
at callHook (core.mjs:16305:18)`;
26+
}

‎apps/app/src/app/pages/(components)/components/(code-block)/code-block--diff.preview.ts‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { ChangeDetectionStrategy, Component } from '@angular/core';
2+
import { HlmCodeBlockImports } from '@spartan-ng/helm/code-block';
3+
4+
type Line = { text: string; variant: 'default' | 'added' | 'removed' };
5+
6+
@Component({
7+
selector: 'spartan-code-block-diff',
8+
imports: [HlmCodeBlockImports],
9+
changeDetection: ChangeDetectionStrategy.OnPush,
10+
template: `
11+
<div class="w-full max-w-md">
12+
<hlm-code-block>
13+
<hlm-code-block-header>
14+
<hlm-code-block-title>app/greeting.component.ts</hlm-code-block-title>
15+
<hlm-code-block-actions>
16+
<button hlmCodeBlockCopyButton [value]="_code"></button>
17+
</hlm-code-block-actions>
18+
</hlm-code-block-header>
19+
<pre hlmCodeBlockContent>
20+
@for (line of _lines; track $index) {
21+
<span hlmCodeBlockLine [variant]="line.variant">{{ line.text }}</span>
22+
}
23+
</pre>
24+
</hlm-code-block>
25+
</div>
26+
`,
27+
})
28+
export class CodeBlockDiff {
29+
protected readonly _lines: Line[] = [
30+
{ text: 'export class GreetingComponent {', variant: 'default' },
31+
{ text: ' protected readonly greeting = "Hello, " + this.name;', variant: 'removed' },
32+
{
33+
text: ' protected readonly greeting = computed(() => `Hello, ${this.name()}! Welcome back.`);',
34+
variant: 'added',
35+
},
36+
{ text: " readonly name = input('Angular');", variant: 'default' },
37+
{ text: '}', variant: 'default' },
38+
];
39+
40+
protected readonly _code = this._lines.map((line) => line.text).join('\n');
41+
}

‎apps/app/src/app/pages/(components)/components/(code-block)/code-block--floating-actions.preview.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { ChangeDetectionStrategy, Component } from '@angular/core';
2+
import { HlmCodeBlockImports } from '@spartan-ng/helm/code-block';
3+
4+
@Component({
5+
selector: 'spartan-code-block-floating-actions',
6+
imports: [HlmCodeBlockImports],
7+
changeDetection: ChangeDetectionStrategy.OnPush,
8+
template: `
9+
<div class="w-full max-w-md">
10+
<hlm-code-block>
11+
<hlm-code-block-actions>
12+
<button hlmCodeBlockCopyButton [value]="_output"></button>
13+
</hlm-code-block-actions>
14+
<pre hlmCodeBlockContent [code]="_output"></pre>
15+
</hlm-code-block>
16+
</div>
17+
`,
18+
})
19+
export class CodeBlockFloatingActions {
20+
protected readonly _output = `$ pnpm add @spartan-ng/brain
21+
Progress: resolved 412, reused 398, downloaded 14, added 14, done
22+
dependencies:
23+
+ @angular/cdk 20.2.0
24+
+ @spartan-ng/brain 1.0.0
25+
+ @spartan-ng/helm 1.0.0
26+
Done in 2.8s using pnpm v10.18.0`;
27+
}

0 commit comments

Comments
 (0)