Skip to content

Commit

Permalink
Merge pull request #14 from Jurfest/feature/utils
Browse files Browse the repository at this point in the history
feature/utils
  • Loading branch information
Jurfest authored Jun 21, 2024
2 parents 81fef16 + 8ee99d5 commit 852a72f
Show file tree
Hide file tree
Showing 22 changed files with 348 additions and 30 deletions.
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Toon Galaxy

https://https://www.chromatic.com/.chromatic.com/
https://66739ea5b581c33ced2d5fbc-ntxtwallou.chromatic.com/

## 🔬 Toon Galaxy Atomic Design System

Expand Down Expand Up @@ -39,7 +39,7 @@ To access Toon Galaxy Atomic Design System in production please visit [Productio

## Production Links

The Storybook for this project can be found at [design-insights.toongalaxy.toon](https://https://www.chromatic.com/.chromatic.com/).
The Storybook for this project can be found at [design-insights.toongalaxy.toon](https://66739ea5b581c33ced2d5fbc-ntxtwallou.chromatic.com/).

## License

Expand Down
7 changes: 7 additions & 0 deletions apps/toon-galaxy/project.json
Original file line number Diff line number Diff line change
Expand Up @@ -171,5 +171,12 @@
},
"defaultConfiguration": "production"
}
},
"generators": {
"@schematics/angular:component": {
"style": "scss",
"changeDetection": "OnPush",
"displayBlock": true
}
}
}
25 changes: 18 additions & 7 deletions apps/toon-galaxy/src/app/app.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,11 @@ import {
} from '@angular/core';
import { provideClientHydration } from '@angular/platform-browser';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { provideRouter } from '@angular/router';
import {
provideRouter,
withEnabledBlockingInitialNavigation,
withInMemoryScrolling,
} from '@angular/router';
import { provideEffects } from '@ngrx/effects';
import { provideStore } from '@ngrx/store';
import { provideStoreDevtools } from '@ngrx/store-devtools';
Expand Down Expand Up @@ -41,15 +45,22 @@ export const appConfig: ApplicationConfig = {
provideClientHydration(),
provideRouter(
appRoutes,
// Uncomment for smother view transitions
// withViewTransitions(),

//
// withPreloading(PreloadAllModules),
// withRouterConfig({
// onSameUrlNavigation: 'reload',
// }),
// withComponentInputBinding(),
// withEnabledBlockingInitialNavigation(),
// withInMemoryScrolling({
// anchorScrolling: 'enabled',
// scrollPositionRestoration: 'enabled',
// }),
withEnabledBlockingInitialNavigation(),
withInMemoryScrolling({
anchorScrolling: 'enabled',
scrollPositionRestoration: 'enabled',
}),
// withDebugTracing(), // should be disabled in production
// quicklinkProviders,
),
provideAnimationsAsync(),

Expand All @@ -61,7 +72,7 @@ export const appConfig: ApplicationConfig = {
provideStore(),
provideEffects([]),
...(isDevMode() ? [provideStoreDevtools()] : []),
// Character State Feature and Effect
// Feature States and Effects
provideToonGalaxyDomain(),
provideSharedUtilCommon(),

Expand Down
39 changes: 38 additions & 1 deletion apps/toon-galaxy/src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,46 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<title>toon-galaxy</title>
<title>
Toon Galaxy - Discover and Save Your Favorite Cartoon Characters
</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"
content="Explore, search, and save your favorite cartoon characters with Toon Galaxy, including characters from Rick & Morty and more."
/>
<meta
name="keywords"
content="cartoon, characters, search, favorite, Toon Galaxy, Rick & Morty, animation"
/>
<meta name="author" content="Toon Galaxy Team" />
<meta
property="og:title"
content="Toon Galaxy - Discover and Save Your Favorite Cartoon Characters"
/>
<meta
property="og:description"
content="Explore, search, and save your favorite characters from your favorite cartoons with Toon Galaxy, starting with Rick & Morty and expanding to many more."
/>
<meta
property="og:image"
content="https://www.toon-galaxy.com/assets/images/rick-morty-logo.svg"
/>
<meta property="og:url" content="https://www.toon-galaxy.com" />
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:image"
content="https://www.toon-galaxy.com/assets/images/rick-morty-logo.svg"
/>
<meta
name="twitter:title"
content="Toon Galaxy - Discover and Save Your Favorite Cartoon Characters"
/>
<meta
name="twitter:description"
content="Explore, search, and save your favorite characters from Rick & Morty and many other cartoons with Toon Galaxy."
/>
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
Expand Down
7 changes: 7 additions & 0 deletions libs/shared/ui-design-system/project.json
Original file line number Diff line number Diff line change
Expand Up @@ -104,5 +104,12 @@
}
}
}
},
"generators": {
"@schematics/angular:component": {
"style": "scss",
"changeDetection": "OnPush",
"displayBlock": true
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,17 @@
>
{{ card().name }}
</p>
<p class="text-base leading-[22.4px] !mb-0 text-ellipsis text-neutral-400">
<p
class="text-base leading-[22.4px] !mb-0 tracking-normal !pb-0 text-ellipsis text-neutral-400"
>
{{ card().species }}
</p>
<p class="text-base leading-[22.4px] text-ellipsis text-neutral-400 !mb-0">
{{ card().type }}
</p>
@if (card().type) {
<p
class="text-base leading-[22.4px] tracking-normal text-ellipsis text-neutral-400 !mb-0"
>
{{ card().type }}
</p>
}
</div>
</div>
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@if (!isHandset()) {
<div
class="flex gap-0 my-auto rounded-xl border border-solid border-color-core-border"
class="flex items-start m-auto w-[255px] h-[41px] border border-color-core-border rounded-xl"
>
<button
(click)="onToggle(TabName.Home)"
Expand All @@ -12,11 +12,17 @@
'text-color-neutral-content hover:bg-color-neutral-surface-lower':
activeTab() !== TabName.Home,
}"
class="flex gap-2 justify-between px-4 py-1 text-sm font-semibold hover:rounded-l-xl"
class="flex justify-center items-center px-4 py-1 gap-2 w-[99px] min-w-[80px] h-[39px] isolate text-sm font-semibold hover:rounded-l-xl"
>
<design-system-icon iconName="home" class="z-10"></design-system-icon>
<span class="self-stretch my-auto leading-[100%] z-10">Início</span>
<design-system-icon
iconName="home"
class="w-5 h-6 z-10 mr-[3px]"
></design-system-icon>
<span class="my-auto leading-[100%] z-10 w-[39px] tracking-normal"
>Início</span
>
</button>
<div class="border border-color-core-border h-[39px] self-stretch"></div>
<button
(click)="onToggle(TabName.Favorites)"
matRipple
Expand All @@ -27,20 +33,28 @@
'text-color-neutral-content hover:bg-color-neutral-surface-lower':
activeTab() !== TabName.Favorites,
}"
class="group flex gap-2 justify-between items-center px-4 py-1 text-sm font-semibold hover:rounded-r-xl"
class="group flex justify-center items-center p-1 gap-2 w-[154px] min-w-[80px] h-[39px] text-sm font-semibold hover:rounded-r-xl isolate"
>
<design-system-icon iconName="heart" class="z-10"></design-system-icon>
<span class="self-stretch my-auto leading-[100%] z-10">Favoritos</span>
<design-system-icon
iconName="heart"
class="w-[20px] h-[24px] flex justify-end items-center z-10"
></design-system-icon>
<span class="my-auto leading-[100%] z-10 ml-1 tracking-normal"
>Favoritos</span
>
<span
class="flex justify-center items-center w-5 h-5 font-bold border border-solid border-color-core-border rounded-full p-0.5 my-0 mx-auto z-10"
class="flex justify-center items-center w-[22px] h-[22px] border border-color-core-border rounded-full p-0.5 z-10 mr-1"
[ngClass]="{
'bg-color-neutral-surface-lower text-color-neutral-content-high group-hover:bg-[#2D2D2D] group-hover:text-[#c2c2c2]':
activeTab() === TabName.Favorites,
'bg-color-neutral-foreground text-color-core-foreground group-hover:bg-gray-200 group-hover:text-gray-800':
activeTab() !== TabName.Favorites,
}"
>
<span [@numberChange]="totalFavoriteCharacters()">
<span
[@numberChange]="totalFavoriteCharacters()"
class="flex justify-center items-center w-full h-full text-sm font-bold leading-[140%]"
>
{{ totalFavoriteCharacters() }}
</span>
</span>
Expand Down
2 changes: 1 addition & 1 deletion libs/shared/ui-design-system/src/lib/tokens/space.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export const space = {
'--measure-sizing-xxl': '40px',
'--measure-sizing-xxxl': '48px',
12: '3rem',
16: '4rem',
'measure-sizing-huge': '4rem',
20: '5rem',
40: '10rem',
64: '16rem',
Expand Down
7 changes: 7 additions & 0 deletions libs/shared/util-common/project.json
Original file line number Diff line number Diff line change
Expand Up @@ -39,5 +39,12 @@
"lint": {
"executor": "@nx/eslint:lint"
}
},
"generators": {
"@schematics/angular:component": {
"style": "scss",
"changeDetection": "OnPush",
"displayBlock": true
}
}
}
5 changes: 5 additions & 0 deletions libs/shared/util-common/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,8 @@ export * from './lib/http/interceptors/loading.interceptor';
export * from './lib/http/+state/loading/loading.selectors';

export * from './lib/http/interceptors/header.interceptor';

export * from './lib/seo/meta-tag.service';

export * from './lib/directives/app-shell-render.directive';
export * from './lib/directives/app-shell-no-render.directive';
Empty file.
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import { PLATFORM_ID, TemplateRef, ViewContainerRef } from '@angular/core';
import { TestBed } from '@angular/core/testing';

import { AppShellNoRenderDirective } from './app-shell-no-render.directive';

describe('AppShellNoRenderDirective', () => {
let templateRef: TemplateRef<any>;
let viewContainerRef: ViewContainerRef;
let platformId: string;

beforeEach(() => {
templateRef = {
createEmbeddedView: jest.fn(),
} as unknown as TemplateRef<any>;

viewContainerRef = {
createEmbeddedView: jest.fn(),
clear: jest.fn(),
} as unknown as ViewContainerRef;

platformId = 'server';

TestBed.configureTestingModule({
providers: [
{ provide: TemplateRef, useValue: templateRef },
{ provide: ViewContainerRef, useValue: viewContainerRef },
{ provide: PLATFORM_ID, useFactory: () => platformId },
AppShellNoRenderDirective,
],
});
});

it('should create an instance', () => {
const directive = TestBed.inject(AppShellNoRenderDirective);
expect(directive).toBeTruthy();
});

describe('ngOnInit', () => {
it('should clear view container if platform is server', () => {
platformId = 'server';
const directive = TestBed.inject(AppShellNoRenderDirective);
directive.ngOnInit();
expect(viewContainerRef.clear).toHaveBeenCalled();
});

it('should create embedded view if platform is not server', () => {
platformId = 'browser';
const directive = TestBed.inject(AppShellNoRenderDirective);
directive.ngOnInit();
expect(viewContainerRef.createEmbeddedView).toHaveBeenCalledWith(
templateRef,
);
});
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { isPlatformServer } from '@angular/common';
import {
Directive,
inject,
OnInit,
PLATFORM_ID,
TemplateRef,
ViewContainerRef,
} from '@angular/core';

/* Template directive to hide content when is on Server Platform */
@Directive({
selector: '[commonAppShellNoRender]',
standalone: true,
})
export class AppShellNoRenderDirective implements OnInit {
private templateRef = inject(TemplateRef<any>);
private viewContainer = inject(ViewContainerRef);
private platformId = inject(PLATFORM_ID);

ngOnInit(): void {
if (isPlatformServer(this.platformId)) {
this.viewContainer.clear();
} else {
this.viewContainer.createEmbeddedView(this.templateRef);
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import { PLATFORM_ID, TemplateRef, ViewContainerRef } from '@angular/core';
import { TestBed } from '@angular/core/testing';

import { AppShellRenderDirective } from './app-shell-render.directive';

describe('AppShellRenderDirective', () => {
let templateRef: TemplateRef<any>;
let viewContainerRef: ViewContainerRef;
let platformId: string;

beforeEach(() => {
templateRef = {
createEmbeddedView: jest.fn(),
} as unknown as TemplateRef<any>;

viewContainerRef = {
createEmbeddedView: jest.fn(),
clear: jest.fn(),
} as unknown as ViewContainerRef;

platformId = 'server'; // Default to server for initial setup

TestBed.configureTestingModule({
providers: [
{ provide: TemplateRef, useValue: templateRef },
{ provide: ViewContainerRef, useValue: viewContainerRef },
{ provide: PLATFORM_ID, useFactory: () => platformId },
AppShellRenderDirective, // Provide the directive
],
});
});

it('should create an instance', () => {
const directive = TestBed.inject(AppShellRenderDirective);
expect(directive).toBeTruthy();
});

describe('ngOnInit', () => {
it('should create embedded view if platform is server', () => {
platformId = 'server';
const directive = TestBed.inject(AppShellRenderDirective);
directive.ngOnInit();
expect(viewContainerRef.createEmbeddedView).toHaveBeenCalledWith(
templateRef,
);
});

it('should clear view container if platform is not server', () => {
platformId = 'browser';
const directive = TestBed.inject(AppShellRenderDirective);
directive.ngOnInit();
expect(viewContainerRef.clear).toHaveBeenCalled();
});
});
});
Loading

0 comments on commit 852a72f

Please sign in to comment.