Merge branch 'add-challenge-simple-animations' of https://github.com/svenson95/angular-challenges into add-challenge-simple-animations

Author: svenson95

.all-contributorsrc

@@ -79,6 +79,15 @@
  "translation-ru"
  ]
  },
+ {
+ "login": "wandri",
+ "name": "Wandrille",
+ "avatar_url": "https://avatars.githubusercontent.com/u/15016833?v=4",
+ "profile": "https://wandrille-guesdon.com/",
+ "contributions": [
+ "challenge"
+ ]
+ },
  {
  "login": "alan-bio",
  "name": "Alan Dragicevich",
@@ -201,6 +210,15 @@
  "contributions": [
  "doc"
  ]
+ },
+ {
+ "login": "svenson95",
+ "name": "Sven Brodny",
+ "avatar_url": "https://avatars.githubusercontent.com/u/46655156?v=4",
+ "profile": "https://svenson95.github.io/sb-portfolio/",
+ "contributions": [
+ "doc"
+ ]
  }
  ],
  "contributorsPerLine": 7,

README.md

@@ -38,23 +38,25 @@ Check [all 45 challenges](https://angular-challenges.vercel.app/)
   <td align="center" valign="top" width="14.28%"><a href="https://github.com/jdegand"><img src="https://avatars.githubusercontent.com/u/70610011?v=4?s=100" width="100px;" alt="J. Degand"/><br /><sub><b>J. Degand</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=jdegand" title="Documentation">📖</a> <a href="#content-jdegand" title="Content">🖋</a> <a href="https://github.com/tomalaforge/angular-challenges/commits?author=jdegand" title="Code">💻</a></td>
   <td align="center" valign="top" width="14.28%"><a href="https://github.com/DeveshChau"><img src="https://avatars.githubusercontent.com/u/9509673?v=4?s=100" width="100px;" alt="Devesh Chaudhari"/><br /><sub><b>Devesh Chaudhari</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=DeveshChau" title="Code">💻</a> <a href="https://github.com/tomalaforge/angular-challenges/issues?q=author%3ADeveshChau" title="Bug reports">🐛</a> <a href="#challenge-DeveshChau" title="Create a challenge">🧩</a></td>
   <td align="center" valign="top" width="14.28%"><a href="https://github.com/stillst"><img src="https://avatars.githubusercontent.com/u/1463098?v=4?s=100" width="100px;" alt="stillst"/><br /><sub><b>stillst</b></sub></a><br /><a href="#challenge-stillst" title="Create a challenge">🧩</a> <a href="#translation-ru-stillst" title="Translate in Russian">🇷🇺</a></td>
+  <td align="center" valign="top" width="14.28%"><a href="https://wandrille-guesdon.com/"><img src="https://avatars.githubusercontent.com/u/15016833?v=4?s=100" width="100px;" alt="Wandrille"/><br /><sub><b>Wandrille</b></sub></a><br /><a href="#challenge-wandri" title="Create a challenge">🧩</a></td>
   <td align="center" valign="top" width="14.28%"><a href="https://github.com/alan-bio"><img src="https://avatars.githubusercontent.com/u/31838230?v=4?s=100" width="100px;" alt="Alan Dragicevich"/><br /><sub><b>Alan Dragicevich</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=alan-bio" title="Documentation">📖</a></td>
   <td align="center" valign="top" width="14.28%"><a href="https://github.com/edimitchel"><img src="https://avatars.githubusercontent.com/u/2922851?v=4?s=100" width="100px;" alt="Michel EDIGHOFFER"/><br /><sub><b>Michel EDIGHOFFER</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=edimitchel" title="Documentation">📖</a></td>
-  <td align="center" valign="top" width="14.28%"><a href="https://github.com/gsgonzalez88"><img src="https://avatars.githubusercontent.com/u/39884678?v=4?s=100" width="100px;" alt="Gerardo Sebastian Gonzalez"/><br /><sub><b>Gerardo Sebastian Gonzalez</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=gsgonzalez88" title="Documentation">📖</a></td>
  </tr>
  <tr>
+  <td align="center" valign="top" width="14.28%"><a href="https://github.com/gsgonzalez88"><img src="https://avatars.githubusercontent.com/u/39884678?v=4?s=100" width="100px;" alt="Gerardo Sebastian Gonzalez"/><br /><sub><b>Gerardo Sebastian Gonzalez</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=gsgonzalez88" title="Documentation">📖</a></td>
   <td align="center" valign="top" width="14.28%"><a href="https://github.com/marryday"><img src="https://avatars.githubusercontent.com/u/57489315?v=4?s=100" width="100px;" alt="Evseev Yuriy"/><br /><sub><b>Evseev Yuriy</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/issues?q=author%3Amarryday" title="Bug reports">🐛</a></td>
   <td align="center" valign="top" width="14.28%"><a href="https://github.com/tomer953"><img src="https://avatars.githubusercontent.com/u/1807493?v=4?s=100" width="100px;" alt="Tomer953"/><br /><sub><b>Tomer953</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/issues?q=author%3Atomer953" title="Bug reports">🐛</a> <a href="https://github.com/tomalaforge/angular-challenges/commits?author=tomer953" title="Documentation">📖</a> <a href="https://github.com/tomalaforge/angular-challenges/commits?author=tomer953" title="Code">💻</a></td>
   <td align="center" valign="top" width="14.28%"><a href="https://github.com/dmmishchenko"><img src="https://avatars.githubusercontent.com/u/51910160?v=4?s=100" width="100px;" alt="Dmitriy Mishchenko"/><br /><sub><b>Dmitriy Mishchenko</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=dmmishchenko" title="Documentation">📖</a></td>
   <td align="center" valign="top" width="14.28%"><a href="http://www.sagardev.com.np"><img src="https://avatars.githubusercontent.com/u/30800393?v=4?s=100" width="100px;" alt="Sagar Devkota"/><br /><sub><b>Sagar Devkota</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=Sagardevkota" title="Documentation">📖</a> <a href="https://github.com/tomalaforge/angular-challenges/commits?author=Sagardevkota" title="Code">💻</a></td>
   <td align="center" valign="top" width="14.28%"><a href="https://nelsonguti.dev/"><img src="https://avatars.githubusercontent.com/u/62297014?v=4?s=100" width="100px;" alt="Nelson Gutierrez"/><br /><sub><b>Nelson Gutierrez</b></sub></a><br /><a href="#translation-es-nelsongutidev" title="Translate in Spanish">🇪🇸</a></td>
   <td align="center" valign="top" width="14.28%"><a href="https://github.com/ho-ssain"><img src="https://avatars.githubusercontent.com/u/61125174?v=4?s=100" width="100px;" alt="Hossain K. M."/><br /><sub><b>Hossain K. M.</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=ho-ssain" title="Documentation">📖</a></td>
-  <td align="center" valign="top" width="14.28%"><a href="https://github.com/kabrunko-dev/"><img src="https://avatars.githubusercontent.com/u/142346548?v=4?s=100" width="100px;" alt="Diogo Nishikawa"/><br /><sub><b>Diogo Nishikawa</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=kabrunko-dev" title="Code">💻</a> <a href="#translation-pt-kabrunko-dev" title="Translate in Portuguese">🇵🇹</a> <a href="https://github.com/tomalaforge/angular-challenges/commits?author=kabrunko-dev" title="Documentation">📖</a></td>
  </tr>
  <tr>
+  <td align="center" valign="top" width="14.28%"><a href="https://github.com/kabrunko-dev/"><img src="https://avatars.githubusercontent.com/u/142346548?v=4?s=100" width="100px;" alt="Diogo Nishikawa"/><br /><sub><b>Diogo Nishikawa</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=kabrunko-dev" title="Code">💻</a> <a href="#translation-pt-kabrunko-dev" title="Translate in Portuguese">🇵🇹</a> <a href="https://github.com/tomalaforge/angular-challenges/commits?author=kabrunko-dev" title="Documentation">📖</a></td>
   <td align="center" valign="top" width="14.28%"><a href="http://www.streamoverlaypro.com"><img src="https://avatars.githubusercontent.com/u/1978642?v=4?s=100" width="100px;" alt="Erick Rodriguez"/><br /><sub><b>Erick Rodriguez</b></sub></a><br /><a href="#translation-es-ErickRodrCodes" title="Translate in Spanish">🇪🇸</a></td>
   <td align="center" valign="top" width="14.28%"><a href="https://eduardoroth.dev"><img src="https://avatars.githubusercontent.com/u/5419161?v=4?s=100" width="100px;" alt="Eduardo Roth"/><br /><sub><b>Eduardo Roth</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=eduardoRoth" title="Documentation">📖</a> <a href="#translation-es-eduardoRoth" title="Translate in Spanish">🇪🇸</a></td>
   <td align="center" valign="top" width="14.28%"><a href="https://github.com/1fbr"><img src="https://avatars.githubusercontent.com/u/63980689?v=4?s=100" width="100px;" alt="Fernando Bello"/><br /><sub><b>Fernando Bello</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=1fbr" title="Documentation">📖</a></td>
+  <td align="center" valign="top" width="14.28%"><a href="https://svenson95.github.io/sb-portfolio/"><img src="https://avatars.githubusercontent.com/u/46655156?v=4?s=100" width="100px;" alt="Sven Brodny"/><br /><sub><b>Sven Brodny</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=svenson95" title="Documentation">📖</a></td>
  </tr>
  </tbody>
  <tfoot>

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

@@ -0,0 +1,36 @@
+{
+ "extends": ["../../../.eslintrc.json"],
+ "ignorePatterns": ["!**/*"],
+ "overrides": [
+ {
+ "files": ["*.ts"],
+ "extends": [
+ "plugin:@nx/angular",
+ "plugin:@angular-eslint/template/process-inline-templates"
+ ],
+ "rules": {
+ "@angular-eslint/directive-selector": [
+ "error",
+ {
+ "type": "attribute",
+ "prefix": "app",
+ "style": "camelCase"
+ }
+ ],
+ "@angular-eslint/component-selector": [
+ "error",
+ {
+ "type": "element",
+ "prefix": "app",
+ "style": "kebab-case"
+ }
+ ]
+ }
+ },
+ {
+ "files": ["*.html"],
+ "extends": ["plugin:@nx/angular-template"],
+ "rules": {}
+ }
+ ]
+}

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

@@ -0,0 +1,13 @@
+# React in angular
+
+> author: wandrille-guesdon
+
+### Run Application
+
+```bash
+npx nx serve angular-react-in-angular
+```
+
+### Documentation and Instruction
+
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular/45-react-in-angular/).

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

@@ -0,0 +1,22 @@
+/* eslint-disable */
+export default {
+ displayName: 'angular-react-in-angular',
+ preset: '../../../jest.preset.js',
+ setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+ coverageDirectory: '../../../coverage/apps/angular/react-in-angular',
+ transform: {
+ '^.+\\.(ts|mjs|js|html)$': [
+ 'jest-preset-angular',
+ {
+ tsconfig: '<rootDir>/tsconfig.spec.json',
+ stringifyContentPathRegex: '\\.(html|svg)$',
+ },
+ ],
+ },
+ transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+ snapshotSerializers: [
+ 'jest-preset-angular/build/serializers/no-ng-attributes',
+ 'jest-preset-angular/build/serializers/ng-snapshot',
+ 'jest-preset-angular/build/serializers/html-comment',
+ ],
+};

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

@@ -0,0 +1,80 @@
+{
+ "name": "angular-react-in-angular",
+ "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+ "projectType": "application",
+ "prefix": "app",
+ "sourceRoot": "apps/angular/react-in-angular/src",
+ "tags": [],
+ "targets": {
+ "build": {
+ "executor": "@angular-devkit/build-angular:application",
+ "outputs": ["{options.outputPath}"],
+ "options": {
+ "outputPath": "dist/apps/angular/react-in-angular",
+ "index": "apps/angular/react-in-angular/src/index.html",
+ "browser": "apps/angular/react-in-angular/src/main.ts",
+ "polyfills": ["zone.js"],
+ "tsConfig": "apps/angular/react-in-angular/tsconfig.app.json",
+ "inlineStyleLanguage": "scss",
+ "assets": [
+ "apps/angular/react-in-angular/src/favicon.ico",
+ "apps/angular/react-in-angular/src/assets"
+ ],
+ "styles": ["apps/angular/react-in-angular/src/styles.scss"],
+ "scripts": []
+ },
+ "configurations": {
+ "production": {
+ "budgets": [
+ {
+ "type": "initial",
+ "maximumWarning": "500kb",
+ "maximumError": "1mb"
+ },
+ {
+ "type": "anyComponentStyle",
+ "maximumWarning": "2kb",
+ "maximumError": "4kb"
+ }
+ ],
+ "outputHashing": "all"
+ },
+ "development": {
+ "optimization": false,
+ "extractLicenses": false,
+ "sourceMap": true
+ }
+ },
+ "defaultConfiguration": "production"
+ },
+ "serve": {
+ "executor": "@angular-devkit/build-angular:dev-server",
+ "configurations": {
+ "production": {
+ "buildTarget": "angular-react-in-angular:build:production"
+ },
+ "development": {
+ "buildTarget": "angular-react-in-angular:build:development"
+ }
+ },
+ "defaultConfiguration": "development"
+ },
+ "extract-i18n": {
+ "executor": "@angular-devkit/build-angular:extract-i18n",
+ "options": {
+ "buildTarget": "angular-react-in-angular:build"
+ }
+ },
+ "lint": {
+ "executor": "@nx/eslint:lint",
+ "outputs": ["{options.outputFile}"]
+ },
+ "test": {
+ "executor": "@nx/jest:jest",
+ "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+ "options": {
+ "jestConfig": "apps/angular/react-in-angular/jest.config.ts"
+ }
+ }
+ }
+}

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

@@ -0,0 +1,62 @@
+import { Component, signal } from '@angular/core';
+import { PostComponent } from './react/post.component';
+
+type Post = { title: string; description: string };
+
+@Component({
+ standalone: true,
+ imports: [PostComponent],
+ selector: 'app-root',
+ template: `
+ <div class="flex flex-col gap-2 p-12">
+ <div class="flex gap-2">
+ @for (post of posts; track post.title) {
+ <div class="rounded-lg bg-gray-100 p-4">
+ <app-post
+ (selectPost)="selectPost(post)"
+ [post]="post"
+ [isSelected]="post.title === selectedPost()?.title"></app-post>
+ </div>
+ }
+ </div>
+ <div class="flex flex-col gap-2 border p-4">
+ <span class="text-xs font-medium">Selected Post:</span>
+ <span class="text-lg text-blue-700">
+ {{ selectedPost()?.title ?? '-' }}
+ </span>
+ </div>
+ </div>
+ `,
+ styles: [''],
+})
+export class AppComponent {
+ readonly posts = [
+ {
+ title: 'A Deep Dive into Angular',
+ description:
+ "Explore Angular's core features, its evolution, and best practices in development for creating dynamic, efficient web applications in our comprehensive guide.",
+ pictureLink:
+ 'https://images.unsplash.com/photo-1471958680802-1345a694ba6d',
+ },
+ {
+ title: 'The Perfect Combination',
+ description:
+ 'Unveil the power of combining Angular & React in web development, maximizing efficiency and flexibility for building scalable, sophisticated applications.',
+ pictureLink:
+ 'https://images.unsplash.com/photo-1518717202715-9fa9d099f58a',
+ },
+ {
+ title: 'Taking Angular to the Next Level',
+ description:
+ "Discover how integrating React with Angular elevates web development, blending Angular's structure with React's UI prowess for advanced applications.",
+ pictureLink:
+ 'https://images.unsplash.com/photo-1532103050105-860af53bc6aa',
+ },
+ ];
+
+ readonly selectedPost = signal<Post | null>(null);
+
+ selectPost(post: Post) {
+ this.selectedPost.set(post);
+ }
+}

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

@@ -0,0 +1,5 @@
+import { ApplicationConfig } from '@angular/core';
+
+export const appConfig: ApplicationConfig = {
+ providers: [],
+};

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

@@ -0,0 +1,27 @@
+// import React from 'react';
+
+export default function ReactPost(props: {
+ title?: string,
+ description?: string,
+ pictureLink?: string,
+ selected?: boolean,
+ handleClick: () => void
+}) {
+ return (
+ <div className={props.selected ? 'bg-blue-100' : 'bg-white'}>
+ <div className="max-w-sm rounded overflow-hidden shadow-lg">
+ <img className="w-full h-32 object-cover" src={props.pictureLink} alt={props.title}></img>
+ <div className="px-6 py-4 flex flex-col gap-2">
+ <div className="font-bold text-xl mb-2">{props.title}</div>
+ <p className="text-gray-700 text-base">
+ {props.description}
+ </p>
+ <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+ onClick={props.handleClick}>
+ Select
+ </button>
+ </div>
+ </div>
+ </div>
+ );
+}

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

@@ -0,0 +1,17 @@
+import { Component, EventEmitter, input, Output } from '@angular/core';
+
+type Post = { title: string; description: string; pictureLink: string };
+
+@Component({
+ standalone: true,
+ selector: 'app-post',
+ template: `
+ <div></div>
+ `,
+ styles: [''],
+})
+export class PostComponent {
+ post = input<Post | undefined>(undefined);
+ isSelected = input<boolean>(false);
+ @Output() selectPost = new EventEmitter<void>();
+}