Skip to content

Commit 90d9a6e

Browse files
DamianBrzezinskiHoADamianBrzezinskiHoA
authored
Feat/cookies consent component styles (#342)
* feat(client): implement cookie consent theming using cc--darkmode class use AppThemeStore for managing theme and altering styling * fix(client): changed styles in cookies consent
1 parent 8b1e7f5 commit 90d9a6e

File tree

18 files changed

+291
-2
lines changed

18 files changed

+291
-2
lines changed

‎apps/blog/project.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,8 @@
3131
"styles": [
3232
"apps/blog/src/styles.scss",
3333
"libs/shared/assets/src/lib/styles/main.scss",
34-
"node_modules/vanilla-cookieconsent/dist/cookieconsent.css"
34+
"node_modules/vanilla-cookieconsent/dist/cookieconsent.css",
35+
"libs/shared/assets/src/lib/styles/cookies-consent.scss"
3536
],
3637
"stylePreprocessorOptions": {
3738
"includePaths": ["libs/shared/assets/src/lib/styles"]

‎apps/blog/src/app/app.component.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { ViewportScroller } from '@angular/common';
2-
import { ChangeDetectionStrategy, Component } from '@angular/core';
2+
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
33
import { RouterOutlet } from '@angular/router';
44

5+
import { AppThemeStore } from '@angular-love/data-access-app-theme';
6+
57
@Component({
68
standalone: true,
79
selector: 'al-root',
@@ -11,8 +13,11 @@ import { RouterOutlet } from '@angular/router';
1113
imports: [RouterOutlet],
1214
})
1315
export class AppComponent {
16+
private readonly _appThemeStore = inject(AppThemeStore);
17+
1418
constructor(viewport: ViewportScroller) {
1519
viewport.setOffset([0, 80]);
20+
this._appThemeStore.syncWithSystemTheme();
1621

1722
// Our fonts are self-hosted.
1823
// https://fonts.google.com/knowledge/using_type/self_hosting_web_fonts

‎libs/blog/app-theme/data-access-app-theme/.eslintrc.json‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
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": "al",
17+
"style": "camelCase"
18+
}
19+
],
20+
"@angular-eslint/component-selector": [
21+
"error",
22+
{
23+
"type": "element",
24+
"prefix": "al",
25+
"style": "kebab-case"
26+
}
27+
]
28+
}
29+
},
30+
{
31+
"files": ["*.html"],
32+
"extends": ["plugin:@nx/angular-template"],
33+
"rules": {}
34+
},
35+
{
36+
"files": ["*.json"],
37+
"parser": "jsonc-eslint-parser",
38+
"rules": {
39+
"@nx/dependency-checks": "error"
40+
}
41+
}
42+
]
43+
}

‎libs/blog/app-theme/data-access-app-theme/README.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# data-access-app-theme
2+
3+
This library was generated with [Nx](https://nx.dev).
4+
5+
## Running unit tests
6+
7+
Run `nx test data-access-app-theme` to execute the unit tests.

‎libs/blog/app-theme/data-access-app-theme/jest.config.ts‎

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

‎libs/blog/app-theme/data-access-app-theme/ng-package.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
3+
"dest": "../../../../dist/libs/blog/app-theme/data-access-app-theme",
4+
"lib": {
5+
"entryFile": "src/index.ts"
6+
}
7+
}

‎libs/blog/app-theme/data-access-app-theme/package.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"name": "@angular-love/data-access-app-theme",
3+
"version": "0.0.1",
4+
"peerDependencies": {
5+
"@angular/common": "^18.1.0",
6+
"@angular/core": "^18.1.0"
7+
},
8+
"sideEffects": false
9+
}

‎libs/blog/app-theme/data-access-app-theme/project.json‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"name": "data-access-app-theme",
3+
"$schema": "../../../../node_modules/nx/schemas/project-schema.json",
4+
"sourceRoot": "libs/blog/app-theme/data-access-app-theme/src",
5+
"prefix": "al",
6+
"projectType": "library",
7+
"tags": ["scope:client", "type:data-access"],
8+
"targets": {
9+
"build": {
10+
"executor": "@nx/angular:ng-packagr-lite",
11+
"outputs": ["{workspaceRoot}/dist/{projectRoot}"],
12+
"options": {
13+
"project": "libs/blog/app-theme/data-access-app-theme/ng-package.json"
14+
},
15+
"configurations": {
16+
"production": {
17+
"tsConfig": "libs/blog/app-theme/data-access-app-theme/tsconfig.lib.prod.json"
18+
},
19+
"development": {
20+
"tsConfig": "libs/blog/app-theme/data-access-app-theme/tsconfig.lib.json"
21+
}
22+
},
23+
"defaultConfiguration": "production"
24+
},
25+
"test": {
26+
"executor": "@nx/jest:jest",
27+
"outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
28+
"options": {
29+
"jestConfig": "libs/blog/app-theme/data-access-app-theme/jest.config.ts"
30+
}
31+
},
32+
"lint": {
33+
"executor": "@nx/eslint:lint"
34+
}
35+
}
36+
}

‎libs/blog/app-theme/data-access-app-theme/src/app-theme.store.ts‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { isPlatformBrowser } from '@angular/common';
2+
import { inject, Injectable, PLATFORM_ID } from '@angular/core';
3+
import { signalStore, withMethods, withState } from '@ngrx/signals';
4+
5+
type Theme = 'dark' | 'light';
6+
7+
interface AppThemeStore {
8+
theme: Theme;
9+
}
10+
11+
export const AppThemeStore = signalStore(
12+
{ providedIn: 'root' },
13+
withState<AppThemeStore>({ theme: 'light' }),
14+
withMethods(
15+
(
16+
store,
17+
platformId = inject(PLATFORM_ID),
18+
ccConsumer = inject(CCAppThemeConsumer),
19+
) => ({
20+
syncWithSystemTheme: () => {
21+
if (isPlatformBrowser(platformId)) {
22+
ccConsumer.setThemeClass(getSystemTheme());
23+
}
24+
},
25+
}),
26+
),
27+
);
28+
29+
function getSystemTheme(): Theme {
30+
return window.matchMedia('(prefers-color-scheme: dark)').matches
31+
? 'dark'
32+
: 'light';
33+
}
34+
35+
/* todo: create consumer interface and decouple AppThemeStore from CCAppThemeConsumer*/
36+
@Injectable({ providedIn: 'root' })
37+
export class CCAppThemeConsumer {
38+
setThemeClass(theme: Theme): void {
39+
const htmlElement = document.documentElement;
40+
switch (theme) {
41+
case 'dark':
42+
htmlElement.classList.add('cc--darkmode');
43+
break;
44+
case 'light':
45+
htmlElement.classList.remove('cc--darkmode');
46+
break;
47+
}
48+
}
49+
}

‎libs/blog/app-theme/data-access-app-theme/src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './app-theme.store';

0 commit comments

Comments
 (0)