diff --git a/README.md b/README.md index 9a3abf1..7ec8321 100644 --- a/README.md +++ b/README.md @@ -32,6 +32,7 @@ This goal of this project is to help you get better at Angular and NgRx by resol wrapFn pipe utilities pipe change detection with scroll event +styling
RxJs @@ -55,7 +56,7 @@ This goal of this project is to help you get better at Angular and NgRx by resol - +
Thomas Laforge
Thomas Laforge
12 🧩		Thomas Laforge
Thomas Laforge
13 🧩
diff --git a/apps/rxjs-race-condition/src/app/app.component.ts b/apps/rxjs-race-condition/src/app/app.component.ts index 4214104..1aad43b 100644 --- a/apps/rxjs-race-condition/src/app/app.component.ts +++ b/apps/rxjs-race-condition/src/app/app.component.ts @@ -1,5 +1,5 @@ -import { NxWelcomeComponent } from './nx-welcome.component'; import { Component } from '@angular/core'; +import { NxWelcomeComponent } from './nx-welcome.component'; @Component({ standalone: true, @@ -11,3 +11,5 @@ import { Component } from '@angular/core'; export class AppComponent { title = 'rxjs-race-condition'; } + +// faire une app qui fonctionne mais pas dans les tests e2e à cause du délai de la requete http. diff --git a/apps/styling/.eslintrc.json b/apps/styling/.eslintrc.json new file mode 100644 index 0000000..c34c7dd --- /dev/null +++ b/apps/styling/.eslintrc.json @@ -0,0 +1,36 @@ +{ + "extends": ["../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": { + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "app", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "app", + "style": "kebab-case" + } + ] + }, + "extends": [ + "plugin:@nrwl/nx/angular", + "plugin:@angular-eslint/template/process-inline-templates" + ] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nrwl/nx/angular-template"], + "rules": {} + } + ] +} diff --git a/apps/styling/README.md b/apps/styling/README.md new file mode 100644 index 0000000..5c383d2 --- /dev/null +++ b/apps/styling/README.md @@ -0,0 +1,33 @@ +

Customizable style

+ +> Author: Thomas Laforge + +Styling is an important part of a day job of a frontend developer often underestimated. In Angular application, I often see people use `@Input()` to customize the style of their component. But `@Input()` should be used only for the logic and we should use other technique for styling. We can take advantage of css variable and host-context. + +In this challenge, you will need to use both to delete all `@Input()` from your code. + +Styling is an important aspect of a frontend developer's day job, but it is often underestimated. In Angular applications, I frequently see people using `@Input()` to customize the style of their components. However, `@Input()` should only be used for logic; and other techniques, such as CSS variables and host-context, should be used for styling. + +In this challenge, you will need to use both CSS variables and :host-context to remove all `@Input()` from your code. + +### Constraints: + +- In your final submission, your component should not contain any lines of code. All styling should be handled within the decorator _(or external css files if you prefer)_ + +### Submitting your work + +1. Fork the project +2. clone it +3. npm install +4. **nx serve styling** +5. _...work on it_ +6. Commit your work +7. Submit a PR with a title beginning with **Answer:13** that I will review and other dev can review. + +styling + + + + +_You can ask any question on_ twitter diff --git a/apps/styling/project.json b/apps/styling/project.json new file mode 100644 index 0000000..830810c --- /dev/null +++ b/apps/styling/project.json @@ -0,0 +1,76 @@ +{ + "name": "styling", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "projectType": "application", + "sourceRoot": "apps/styling/src", + "prefix": "app", + "targets": { + "build": { + "executor": "@angular-devkit/build-angular:browser", + "outputs": ["{options.outputPath}"], + "options": { + "outputPath": "dist/apps/styling", + "index": "apps/styling/src/index.html", + "main": "apps/styling/src/main.ts", + "polyfills": ["zone.js"], + "tsConfig": "apps/styling/tsconfig.app.json", + "inlineStyleLanguage": "scss", + "assets": ["apps/styling/src/favicon.ico", "apps/styling/src/assets"], + "styles": ["apps/styling/src/styles.scss"], + "scripts": [] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "1mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "executor": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "browserTarget": "styling:build:production" + }, + "development": { + "browserTarget": "styling:build:development" + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "executor": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "styling:build" + } + }, + "lint": { + "executor": "@nrwl/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": ["apps/styling/**/*.ts", "apps/styling/**/*.html"] + } + } + }, + "tags": [] +} diff --git a/apps/styling/src/app/page.component.ts b/apps/styling/src/app/page.component.ts new file mode 100644 index 0000000..a378647 --- /dev/null +++ b/apps/styling/src/app/page.component.ts @@ -0,0 +1,17 @@ +/* eslint-disable @angular-eslint/component-selector */ +import { Component } from '@angular/core'; +import { TextStaticComponent } from './static-text.component'; +import { TextComponent } from './text.component'; + +@Component({ + selector: 'page', + standalone: true, + imports: [TextStaticComponent, TextComponent], + template: ` + + + + This a a blue text + `, +}) +export class PageComponent {} diff --git a/apps/styling/src/app/static-text.component.ts b/apps/styling/src/app/static-text.component.ts new file mode 100644 index 0000000..cdfd1c1 --- /dev/null +++ b/apps/styling/src/app/static-text.component.ts @@ -0,0 +1,33 @@ +/* eslint-disable @angular-eslint/component-selector */ +import { Component, Input } from '@angular/core'; +import { TextComponent } from './text.component'; + +export type StaticTextType = 'normal' | 'warning' | 'error'; + +@Component({ + selector: 'static-text', + standalone: true, + imports: [TextComponent], + template: ` + This is a static text + `, +}) +export class TextStaticComponent { + @Input() set type(type: StaticTextType) { + switch (type) { + case 'error': { + this.font = 30; + this.color = 'red'; + break; + } + case 'warning': { + this.font = 25; + this.color = 'orange'; + break; + } + } + } + + font = 10; + color = 'black'; +} diff --git a/apps/styling/src/app/text.component.ts b/apps/styling/src/app/text.component.ts new file mode 100644 index 0000000..452e76a --- /dev/null +++ b/apps/styling/src/app/text.component.ts @@ -0,0 +1,16 @@ +/* eslint-disable @angular-eslint/component-selector */ +import { Component, Input } from '@angular/core'; + +@Component({ + selector: 'text', + standalone: true, + template: ` +

+ +

+ `, +}) +export class TextComponent { + @Input() font = 10; + @Input() color = 'black'; +} diff --git a/apps/styling/src/assets/.gitkeep b/apps/styling/src/assets/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/apps/styling/src/favicon.ico b/apps/styling/src/favicon.ico new file mode 100644 index 0000000..317ebcb Binary files /dev/null and b/apps/styling/src/favicon.ico differ diff --git a/apps/styling/src/index.html b/apps/styling/src/index.html new file mode 100644 index 0000000..67d4296 --- /dev/null +++ b/apps/styling/src/index.html @@ -0,0 +1,13 @@ + + + + + Styling + + + + + + + + diff --git a/apps/styling/src/main.ts b/apps/styling/src/main.ts new file mode 100644 index 0000000..698b484 --- /dev/null +++ b/apps/styling/src/main.ts @@ -0,0 +1,4 @@ +import { bootstrapApplication } from '@angular/platform-browser'; +import { PageComponent } from './app/page.component'; + +bootstrapApplication(PageComponent).catch((err) => console.error(err)); diff --git a/apps/styling/src/styles.scss b/apps/styling/src/styles.scss new file mode 100644 index 0000000..90d4ee0 --- /dev/null +++ b/apps/styling/src/styles.scss @@ -0,0 +1 @@ +/* You can add global styles to this file, and also import other style files */ diff --git a/apps/styling/tsconfig.app.json b/apps/styling/tsconfig.app.json new file mode 100644 index 0000000..fff4a41 --- /dev/null +++ b/apps/styling/tsconfig.app.json @@ -0,0 +1,10 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../dist/out-tsc", + "types": [] + }, + "files": ["src/main.ts"], + "include": ["src/**/*.d.ts"], + "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"] +} diff --git a/apps/styling/tsconfig.editor.json b/apps/styling/tsconfig.editor.json new file mode 100644 index 0000000..4ee6393 --- /dev/null +++ b/apps/styling/tsconfig.editor.json @@ -0,0 +1,7 @@ +{ + "extends": "./tsconfig.json", + "include": ["src/**/*.ts"], + "compilerOptions": { + "types": [] + } +} diff --git a/apps/styling/tsconfig.json b/apps/styling/tsconfig.json new file mode 100644 index 0000000..0731542 --- /dev/null +++ b/apps/styling/tsconfig.json @@ -0,0 +1,29 @@ +{ + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.editor.json" + } + ], + "extends": "../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } +}