Skip to content

Commit b8d101b

Browse files
lukoniklukonik
authored
feat: integrate animation library (#281)
* feat: move to @ngverse/motion * docs: update prerequisites * refactor: move all to ngverse/motion
1 parent 22adcfb commit b8d101b

33 files changed

+140
-279
lines changed

Diff for: ‎package-lock.json

+12
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
"@ng-icons/core": "^30.4.0",
4444
"@ng-icons/material-icons": "^30.4.0",
4545
"@ngverse/icons-lu": "^0.0.12",
46+
"@ngverse/motion": "^0.3.1",
4647
"@tailwindcss/postcss": "^4.0.8",
4748
"@types/file-saver": "^2.0.7",
4849
"copyfiles": "^2.4.1",

Diff for: ‎projects/docs/src/app/blog/blog-page/blog-page.component.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
<article class="prose prose-sm px-2.5 pt-10 lg:prose-lg dark:prose-invert">
1+
<article
2+
class="prose prose-sm px-2.5 pt-10 lg:prose-lg dark:prose-invert prose-p:mt-2 prose-p:mb-2"
3+
>
24
<h1>{{ label() }}</h1>
35
<ng-content></ng-content>
46
</article>

Diff for: ‎projects/docs/src/app/blueprint/prerequisites/prerequisites.component.html

+4-17
Original file line numberDiff line numberDiff line change
@@ -13,31 +13,18 @@ <h4 class="m-0 text-xl font-normal">Prerequisites</h4>
1313
.
1414
}
1515
}
16+
1617
Ensure {{ prepsAuto.length === 1 ? 'it is ' : 'they are ' }} added to your
1718
project if
1819
{{ prepsAuto.length === 1 ? 'it is not ' : 'they are not' }} already.
1920
<br />
20-
</p>
21-
22-
<div class="mt-4 flex flex-col gap-4">
23-
@for (dep of preps(); track $index) {
24-
<doc-source-code
25-
[surface]="true"
26-
[code]="getCode(dep)"
27-
language="bash"
28-
></doc-source-code>
29-
}
30-
</div>
31-
<p class="mt-2"></p>
32-
} @else {
33-
<p class="mt-2">
34-
<ng-content></ng-content>
21+
(Component folders must be in the same directory for imports to work
22+
correctly.)
3523
<br />
36-
Element folders must be in the same directory for imports to work correctly.
3724
</p>
3825

3926
<div class="mt-4 flex flex-col gap-4">
40-
@for (dep of preps(); track $index) {
27+
@for (dep of prepsAuto; track $index) {
4128
<doc-source-code
4229
[surface]="true"
4330
[code]="getCode(dep)"

Diff for: ‎projects/docs/src/app/blueprint/prerequisites/prerequisites.component.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export interface Prerequisite {
1313
changeDetection: ChangeDetectionStrategy.OnPush,
1414
})
1515
export class PrerequisitesComponent {
16-
preps = input<Prerequisite[]>();
16+
// preps = input<Prerequisite[]>();
1717
name = input<string>();
1818

1919
preprsAuto = input<Prerequisite[]>();

Diff for: ‎projects/docs/src/app/examples/toast/show-case-toast/show-case-toast.component.ts

-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,6 @@ export class ShowCaseToastComponent {
4949
position: this.position(),
5050
type: this.type(),
5151
message: 'Current time is: ' + new Date().toLocaleTimeString(),
52-
closeDelay: 500000,
5352
});
5453
}
5554
}

Diff for: ‎projects/docs/src/app/features/dark-mode-page/dark-mode-page.component.html

+1-6
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,7 @@
55
<doc-show-case name="dark-mode">
66
<doc-show-case-dark-mode></doc-show-case-dark-mode>
77
</doc-show-case>
8-
<doc-prerequisites [preps]="preps">
9-
Dark mode element uses
10-
<a class="underline" [routerLink]="['../button']">Button</a> and
11-
<a class="underline" [routerLink]="['../local-storage']">Local Storage</a>.
12-
Please ensure they are added to your project.
13-
</doc-prerequisites>
8+
<doc-prerequisites [preprsAuto]="preps"> </doc-prerequisites>
149
<doc-command-installation type="component" name="dark-mode">
1510
</doc-command-installation>
1611
<doc-source-tree [sourceTree]="sourceTree" name="dark-mode"></doc-source-tree>

Diff for: ‎projects/docs/src/app/features/dark-mode-page/dark-mode-page.component.ts

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
2-
import { RouterLink } from '@angular/router';
32
import {
43
ApiInfo,
54
ApiInfoComponent,
@@ -30,7 +29,6 @@ const ROOT = 'dark-mode';
3029
ShowCaseComponent,
3130
CommandInstallationComponent,
3231
PrerequisitesComponent,
33-
RouterLink,
3432
],
3533
templateUrl: './dark-mode-page.component.html',
3634
styleUrl: './dark-mode-page.component.css',
@@ -39,7 +37,10 @@ const ROOT = 'dark-mode';
3937
export class DarkModePageComponent {
4038
sourceTreeBuilder = inject(SourceTreeBuilder);
4139

42-
preps: Prerequisite[] = [{ name: 'button' }, { name: 'local-storage' }];
40+
preps: Prerequisite[] = [
41+
{ name: 'button', label: 'Button' },
42+
{ name: 'local-storage', label: 'LocalStorage' },
43+
];
4344

4445
sourceTree: SourceTreeFolder[] = [
4546
{

Diff for: ‎projects/docs/src/app/features/dialog-page/dialog-page.component.html

+1-5
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,7 @@
77
<doc-show-case name="dialog">
88
<doc-show-case-dialog></doc-show-case-dialog>
99
</doc-show-case>
10-
<doc-prerequisites [preps]="prerequisites">
11-
Dialog element uses
12-
<a class="underline" [routerLink]="['../button']">Button</a>. Please ensure
13-
it is added to your project if it is not already.
14-
</doc-prerequisites>
10+
<doc-prerequisites [preprsAuto]="prerequisites"> </doc-prerequisites>
1511
<doc-command-installation type="component" name="dialog">
1612
</doc-command-installation>
1713
<doc-source-tree name="dialog"></doc-source-tree>

Diff for: ‎projects/docs/src/app/features/dialog-page/dialog-page.component.ts

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { Component, inject } from '@angular/core';
2-
import { RouterLink } from '@angular/router';
32
import {
43
ApiInfo,
54
ApiInfoComponent,
@@ -30,7 +29,6 @@ const ROOT = 'dialog';
3029
SourceTreeComponent,
3130
ApiInfoComponent,
3231
PrerequisitesComponent,
33-
RouterLink,
3432
],
3533
templateUrl: './dialog-page.component.html',
3634
styleUrl: './dialog-page.component.css',
@@ -41,9 +39,9 @@ export class DialogPageComponent {
4139
prerequisites: Prerequisite[] = [
4240
{
4341
name: 'button',
42+
label: 'Button',
4443
},
4544
];
46-
4745
sourceTree: SourceTreeFolder[] = [
4846
{
4947
name: '/',

Diff for: ‎projects/docs/src/app/features/installation-page/installation-page.component.html

+55-33
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,11 @@
2121
>ng-icons</a
2222
>
2323
</li>
24+
<li>
25+
<a href="https://motion.ngverse.dev" target="_blank"
26+
>&#64;ngverse/motion</a
27+
>
28+
</li>
2429
</ul>
2530
<h2>Install &#64;angular/cdk</h2>
2631
<p>
@@ -64,9 +69,22 @@ <h2>Install tailwind (v4)</h2>
6469
code='@import "tailwindcss";'
6570
></doc-source-code>
6671
<h2>Add Angular animations</h2>
67-
<p>We use Angular animations for smooth transition between states</p>
72+
<p>
73+
In order to do smooth transitions between states, we use
74+
<a href="http://motion.ngverse.dev/" target="_blank">&#64;ngverse/motion</a>
75+
library.
76+
</p>
77+
<p class="mb-0">Installation:</p>
78+
<doc-source-code
79+
language="bash"
80+
code="npm install @ngverse/motion"
81+
></doc-source-code>
82+
<p>
83+
Then add <code>provideAnimationsAsync</code> provider to your
84+
<code>appConfig</code> file to enable animations
85+
</p>
6886
<doc-source-code language="ts" [code]="animationsCode"></doc-source-code>
69-
<h2>Installing an Icons Library (Optional)</h2>
87+
<h2>Installing an Icons Library</h2>
7088
<p>
7189
Some components, such as the <code>select</code> component, require icons.
7290
We use the
@@ -75,41 +93,11 @@ <h2>Installing an Icons Library (Optional)</h2>
7593
>
7694
library (Material Icons preset) for this purpose.
7795
</p>
78-
<p>
79-
If you prefer not to use this library, you can skip this step and update the
80-
components manually when needed.
81-
</p>
8296
<doc-source-code
8397
language="bash"
8498
code=" npm install @ng-icons/core @ng-icons/material-icons"
8599
></doc-source-code>
86-
<h2>Update typescript import</h2>
87-
<p>
88-
In <doc-project-name [code]="true"></doc-project-name>, Components use
89-
absolute paths for internal imports. It’s recommended that you follow the
90-
same approach to keep your imports clean and maintainable. Instead of using
91-
long and cumbersome relative imports like:
92-
</p>
93-
<doc-source-code
94-
language="ts"
95-
[allowCopy]="false"
96-
code='import { ButtonComponent } from "../../../../button/button.component";'
97-
></doc-source-code>
98-
<p>You should use an absolute path:</p>
99-
<doc-source-code
100-
language="ts"
101-
[allowCopy]="false"
102-
code='import { ButtonComponent } from "@ui/button/button.component";'
103-
></doc-source-code>
104-
<p>
105-
In order to do that, update your root <code>tsconfig.json</code> file with
106-
following path
107-
</p>
108-
<doc-source-code language="json" [code]="tsImportCode"></doc-source-code>
109-
<p>
110-
<code>./src/app/ui</code> should be adjusted based on your project. In
111-
general this is the most used path
112-
</p>
100+
113101
<h2>Install <doc-project-name></doc-project-name> schematics</h2>
114102
<doc-source-code
115103
language="bash"
@@ -148,4 +136,38 @@ <h2>Add <doc-project-name></doc-project-name> styles to styles.css</h2>
148136
You are now ready to start using
149137
<doc-project-name [code]="true"></doc-project-name> in your Angular project!
150138
</p>
139+
<h2>Update typescript import (Optional)</h2>
140+
<p>
141+
In general, you should place all your
142+
<doc-project-name [code]="true"></doc-project-name> components in the same
143+
folder. To import them, you can use either absolute or relative imports. The
144+
recommended approach is to use absolute imports to prevent imports from
145+
becoming too nested.
146+
</p>
147+
<p>
148+
This configuration is not required for
149+
<doc-project-name [code]="true"></doc-project-name> to work, but it is
150+
considered a good practice.
151+
</p>
152+
<p>So Instead of this import:</p>
153+
<doc-source-code
154+
language="ts"
155+
[allowCopy]="false"
156+
code='import { ButtonComponent } from "../../../../button/button.component";'
157+
></doc-source-code>
158+
<p>It will become this:</p>
159+
<doc-source-code
160+
language="ts"
161+
[allowCopy]="false"
162+
code='import { ButtonComponent } from "@ui/button/button.component";'
163+
></doc-source-code>
164+
<p>
165+
In order to do that, update your root <code>tsconfig.json</code> file with
166+
following path
167+
</p>
168+
<doc-source-code language="json" [code]="tsImportCode"></doc-source-code>
169+
<p>
170+
<code>./src/app/ui</code> should be adjusted based on your project. In
171+
general this is the most used path
172+
</p>
151173
</doc-blog-page>

Diff for: ‎projects/docs/src/app/features/otp-input-page/otp-input-page.component.html

-4
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,6 @@
88
<doc-show-case-otp-input></doc-show-case-otp-input>
99
</doc-show-case>
1010
<doc-prerequisites [preprsAuto]="preprs" name="OTP Input">
11-
OTP Input element uses
12-
<a class="underline" [routerLink]="['../input']">Input</a> and
13-
<a class="underline" [routerLink]="['../listbox']">Listbox</a>. Please
14-
ensure they are added to your project if they aren't already.
1511
</doc-prerequisites>
1612

1713
<doc-command-installation name="otp-input"></doc-command-installation>

Diff for: ‎projects/docs/src/app/features/otp-input-page/otp-input-page.component.ts

-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { Component, inject } from '@angular/core';
2-
import { RouterLink } from '@angular/router';
32
import {
43
ApiInfo,
54
ApiInfoComponent,
@@ -29,7 +28,6 @@ const ROOT = 'otp-input';
2928
CommandInstallationComponent,
3029
ApiInfoComponent,
3130
PrerequisitesComponent,
32-
RouterLink,
3331
],
3432
templateUrl: './otp-input-page.component.html',
3533
styleUrl: './otp-input-page.component.css',

Diff for: ‎projects/docs/src/app/features/pagination-page/pagination-page.component.html

+1-5
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,7 @@
55
<doc-show-case name="pagination">
66
<doc-show-case-pagination></doc-show-case-pagination>
77
</doc-show-case>
8-
<doc-prerequisites [preps]="preps">
9-
Pagination element uses
10-
<a class="underline" [routerLink]="['../button']">Button</a>. Please ensure
11-
it is added to your project if it is not already.
12-
</doc-prerequisites>
8+
<doc-prerequisites [preprsAuto]="prerequisites"> </doc-prerequisites>
139
<doc-command-installation type="component" name="pagination">
1410
</doc-command-installation>
1511
<doc-source-tree

Diff for: ‎projects/docs/src/app/features/pagination-page/pagination-page.component.ts

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { Component, inject } from '@angular/core';
2-
import { RouterLink } from '@angular/router';
32
import {
43
ApiInfo,
54
ApiInfoComponent,
@@ -30,15 +29,19 @@ const ROOT = 'pagination';
3029
ApiInfoComponent,
3130
ShowCasePaginationComponent,
3231
PrerequisitesComponent,
33-
RouterLink,
3432
],
3533
templateUrl: './pagination-page.component.html',
3634
styleUrl: './pagination-page.component.css',
3735
})
3836
export class PaginationPageComponent {
3937
sourceTreeBuilder = inject(SourceTreeBuilder);
4038

41-
preps: Prerequisite[] = [{ name: 'button' }];
39+
prerequisites: Prerequisite[] = [
40+
{
41+
name: 'button',
42+
label: 'Button',
43+
},
44+
];
4245

4346
sourceTree: SourceTreeFolder[] = [
4447
{

Diff for: ‎projects/docs/src/app/features/select-page/select-page.component.html

+1-5
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,7 @@
55
<doc-show-case name="select">
66
<doc-show-case-select name="select"></doc-show-case-select>
77
</doc-show-case>
8-
<doc-prerequisites
9-
name="Select"
10-
[preps]="prerequisites"
11-
[preprsAuto]="prerequisites"
12-
>
8+
<doc-prerequisites name="Select" [preprsAuto]="prerequisites">
139
</doc-prerequisites>
1410
<doc-command-installation type="component" name="select">
1511
</doc-command-installation>

Diff for: ‎projects/docs/src/tree-structure.json

-5
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,6 @@
66
"path": "accordion",
77
"name": "accordion",
88
"files": [
9-
{
10-
"path": "accordion/accordion-animations.ts",
11-
"name": "accordion-animations.ts",
12-
"language": "ts"
13-
},
149
{
1510
"path": "accordion/accordion-body.component.ts",
1611
"name": "accordion-body.component.ts",

Diff for: ‎projects/ngverse/eslint.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ module.exports = tseslint.config(
2727
'no-restricted-imports': [
2828
'error',
2929
{
30-
patterns: ['@ngverse/*', '**/dist/**', '../../dist/**', 'ngverse/*'],
30+
patterns: ['**/dist/**', '../../dist/**'],
3131
},
3232
],
3333
},

0 commit comments

Comments
 (0)