Skip to content

Commit 0f4f14c

Browse files
wandriwandri
committed
feat: challenge 45 React in Angular
Add new challenge: React in Angular.
1 parent 77ead59 commit 0f4f14c

27 files changed

+485
-37
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ If you would like to propose a challenge, this project is open source, so feel f
2424
2525
## Challenges
2626

27-
Check [all 44 challenges](https://angular-challenges.vercel.app/)
27+
Check [all 45 challenges](https://angular-challenges.vercel.app/)
2828

2929
## Contributors ✨
3030

‎apps/angular/react-in-angular/.eslintrc.json‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"extends": ["../../../.eslintrc.json"],
3+
"ignorePatterns": ["!**/*"],
4+
"overrides": [
5+
{
6+
"files": ["*.ts"],
7+
"extends": [
8+
"plugin:@nx/angular",
9+
"plugin:@angular-eslint/template/process-inline-templates"
10+
],
11+
"rules": {
12+
"@angular-eslint/directive-selector": [
13+
"error",
14+
{
15+
"type": "attribute",
16+
"prefix": "app",
17+
"style": "camelCase"
18+
}
19+
],
20+
"@angular-eslint/component-selector": [
21+
"error",
22+
{
23+
"type": "element",
24+
"prefix": "app",
25+
"style": "kebab-case"
26+
}
27+
]
28+
}
29+
},
30+
{
31+
"files": ["*.html"],
32+
"extends": ["plugin:@nx/angular-template"],
33+
"rules": {}
34+
}
35+
]
36+
}

‎apps/angular/react-in-angular/README.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# React in angular
2+
3+
> author: wandrille-guesdon
4+
5+
### Run Application
6+
7+
```bash
8+
npx nx serve angular-react-in-angular
9+
```
10+
11+
### Documentation and Instruction
12+
13+
Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular/45-react-in-angular/).

‎apps/angular/react-in-angular/jest.config.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/* eslint-disable */
2+
export default {
3+
displayName: 'angular-react-in-angular',
4+
preset: '../../../jest.preset.js',
5+
setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
6+
coverageDirectory: '../../../coverage/apps/angular/react-in-angular',
7+
transform: {
8+
'^.+\\.(ts|mjs|js|html)$': [
9+
'jest-preset-angular',
10+
{
11+
tsconfig: '<rootDir>/tsconfig.spec.json',
12+
stringifyContentPathRegex: '\\.(html|svg)$',
13+
},
14+
],
15+
},
16+
transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
17+
snapshotSerializers: [
18+
'jest-preset-angular/build/serializers/no-ng-attributes',
19+
'jest-preset-angular/build/serializers/ng-snapshot',
20+
'jest-preset-angular/build/serializers/html-comment',
21+
],
22+
};

‎apps/angular/react-in-angular/project.json‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
{
2+
"name": "angular-react-in-angular",
3+
"$schema": "../../../node_modules/nx/schemas/project-schema.json",
4+
"projectType": "application",
5+
"prefix": "app",
6+
"sourceRoot": "apps/angular/react-in-angular/src",
7+
"tags": [],
8+
"targets": {
9+
"build": {
10+
"executor": "@angular-devkit/build-angular:application",
11+
"outputs": ["{options.outputPath}"],
12+
"options": {
13+
"outputPath": "dist/apps/angular/react-in-angular",
14+
"index": "apps/angular/react-in-angular/src/index.html",
15+
"browser": "apps/angular/react-in-angular/src/main.ts",
16+
"polyfills": ["zone.js"],
17+
"tsConfig": "apps/angular/react-in-angular/tsconfig.app.json",
18+
"inlineStyleLanguage": "scss",
19+
"assets": [
20+
"apps/angular/react-in-angular/src/favicon.ico",
21+
"apps/angular/react-in-angular/src/assets"
22+
],
23+
"styles": ["apps/angular/react-in-angular/src/styles.scss"],
24+
"scripts": []
25+
},
26+
"configurations": {
27+
"production": {
28+
"budgets": [
29+
{
30+
"type": "initial",
31+
"maximumWarning": "500kb",
32+
"maximumError": "1mb"
33+
},
34+
{
35+
"type": "anyComponentStyle",
36+
"maximumWarning": "2kb",
37+
"maximumError": "4kb"
38+
}
39+
],
40+
"outputHashing": "all"
41+
},
42+
"development": {
43+
"optimization": false,
44+
"extractLicenses": false,
45+
"sourceMap": true
46+
}
47+
},
48+
"defaultConfiguration": "production"
49+
},
50+
"serve": {
51+
"executor": "@angular-devkit/build-angular:dev-server",
52+
"configurations": {
53+
"production": {
54+
"buildTarget": "angular-react-in-angular:build:production"
55+
},
56+
"development": {
57+
"buildTarget": "angular-react-in-angular:build:development"
58+
}
59+
},
60+
"defaultConfiguration": "development"
61+
},
62+
"extract-i18n": {
63+
"executor": "@angular-devkit/build-angular:extract-i18n",
64+
"options": {
65+
"buildTarget": "angular-react-in-angular:build"
66+
}
67+
},
68+
"lint": {
69+
"executor": "@nx/eslint:lint",
70+
"outputs": ["{options.outputFile}"]
71+
},
72+
"test": {
73+
"executor": "@nx/jest:jest",
74+
"outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
75+
"options": {
76+
"jestConfig": "apps/angular/react-in-angular/jest.config.ts"
77+
}
78+
}
79+
}
80+
}

‎apps/angular/react-in-angular/src/app/app.component.ts‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { Component, signal } from '@angular/core';
2+
import { PostComponent } from './react/post.component';
3+
4+
type Post = { title: string; description: string };
5+
6+
@Component({
7+
standalone: true,
8+
imports: [PostComponent],
9+
selector: 'app-root',
10+
template: `
11+
<div class="flex flex-col gap-2 p-12">
12+
<div class="flex gap-2">
13+
@for (post of posts; track post.title) {
14+
<div class="rounded-lg bg-gray-100 p-4">
15+
<app-post
16+
(selectPost)="selectPost(post)"
17+
[post]="post"
18+
[isSelected]="post.title === selectedPost()?.title"></app-post>
19+
</div>
20+
}
21+
</div>
22+
<div class="flex flex-col gap-2 border p-4">
23+
<span class="text-xs font-medium">Selected Post:</span>
24+
<span class="text-lg text-blue-700">
25+
{{ selectedPost()?.title ?? '-' }}
26+
</span>
27+
</div>
28+
</div>
29+
`,
30+
styles: [''],
31+
})
32+
export class AppComponent {
33+
readonly posts = [
34+
{
35+
title: 'A Deep Dive into Angular',
36+
description:
37+
"Explore Angular's core features, its evolution, and best practices in development for creating dynamic, efficient web applications in our comprehensive guide.",
38+
pictureLink:
39+
'https://images.unsplash.com/photo-1471958680802-1345a694ba6d',
40+
},
41+
{
42+
title: 'The Perfect Combination',
43+
description:
44+
'Unveil the power of combining Angular & React in web development, maximizing efficiency and flexibility for building scalable, sophisticated applications.',
45+
pictureLink:
46+
'https://images.unsplash.com/photo-1518717202715-9fa9d099f58a',
47+
},
48+
{
49+
title: 'Taking Angular to the Next Level',
50+
description:
51+
"Discover how integrating React with Angular elevates web development, blending Angular's structure with React's UI prowess for advanced applications.",
52+
pictureLink:
53+
'https://images.unsplash.com/photo-1532103050105-860af53bc6aa',
54+
},
55+
];
56+
57+
readonly selectedPost = signal<Post | null>(null);
58+
59+
selectPost(post: Post) {
60+
this.selectedPost.set(post);
61+
}
62+
}

‎apps/angular/react-in-angular/src/app/app.config.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { ApplicationConfig } from '@angular/core';
2+
3+
export const appConfig: ApplicationConfig = {
4+
providers: [],
5+
};

‎apps/angular/react-in-angular/src/app/react/ReactPost.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
// import React from 'react';
2+
3+
export default function ReactPost(props: {
4+
title?: string,
5+
description?: string,
6+
pictureLink?: string,
7+
selected?: boolean,
8+
handleClick: () => void
9+
}) {
10+
return (
11+
<div className={props.selected ? 'bg-blue-100' : 'bg-white'}>
12+
<div className="max-w-sm rounded overflow-hidden shadow-lg">
13+
<img className="w-full h-32 object-cover" src={props.pictureLink} alt={props.title}></img>
14+
<div className="px-6 py-4 flex flex-col gap-2">
15+
<div className="font-bold text-xl mb-2">{props.title}</div>
16+
<p className="text-gray-700 text-base">
17+
{props.description}
18+
</p>
19+
<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
20+
onClick={props.handleClick}>
21+
Select
22+
</button>
23+
</div>
24+
</div>
25+
</div>
26+
);
27+
}

‎apps/angular/react-in-angular/src/app/react/post.component.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Component, EventEmitter, input, Output } from '@angular/core';
2+
3+
type Post = { title: string; description: string; pictureLink: string };
4+
5+
@Component({
6+
standalone: true,
7+
selector: 'app-post',
8+
template: `
9+
<div></div>
10+
`,
11+
styles: [''],
12+
})
13+
export class PostComponent {
14+
post = input<Post | undefined>(undefined);
15+
isSelected = input<boolean>(false);
16+
@Output() selectPost = new EventEmitter<void>();
17+
}

‎apps/angular/react-in-angular/src/assets/.gitkeep‎

Whitespace-only changes.

0 commit comments

Comments
 (0)