Skip to content

Commit f23d6c9

Browse files
DamianBrzezinskiHoAdokolyski
DamianBrzezinskiHoA
authored and
dokolyski
committed
feat(client): implement cookie consent theming using cc--darkmode class
use AppThemeStore for managing theme and altering styling
1 parent 41cec1a commit f23d6c9

18 files changed

+285
-2
lines changed

‎apps/blog/project.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,8 @@
3030
"styles": [
3131
"apps/blog/src/styles.scss",
3232
"libs/shared/assets/src/lib/styles/main.scss",
33-
"node_modules/vanilla-cookieconsent/dist/cookieconsent.css"
33+
"node_modules/vanilla-cookieconsent/dist/cookieconsent.css",
34+
"libs/shared/assets/src/lib/styles/cookies-consent.scss"
3435
],
3536
"stylePreprocessorOptions": {
3637
"includePaths": ["libs/shared/assets/src/lib/styles"]

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

+6-1
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

+43
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

+7
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

+23
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

+7
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

+9
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

+36
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

+49
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

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './app-theme.store';

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

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import 'jest-preset-angular/setup-jest';
2+
3+
// @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment
4+
globalThis.ngJest = {
5+
testEnvironmentOptions: {
6+
errorOnUnknownElements: true,
7+
errorOnUnknownProperties: true,
8+
},
9+
};

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

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es2022",
4+
"forceConsistentCasingInFileNames": true,
5+
"strict": true,
6+
"noImplicitOverride": true,
7+
"noPropertyAccessFromIndexSignature": true,
8+
"noImplicitReturns": true,
9+
"noFallthroughCasesInSwitch": true
10+
},
11+
"files": [],
12+
"include": [],
13+
"references": [
14+
{
15+
"path": "./tsconfig.lib.json"
16+
},
17+
{
18+
"path": "./tsconfig.spec.json"
19+
}
20+
],
21+
"extends": "../../../../tsconfig.base.json",
22+
"angularCompilerOptions": {
23+
"enableI18nLegacyMessageIdFormat": false,
24+
"strictInjectionParameters": true,
25+
"strictInputAccessModifiers": true,
26+
"strictTemplates": true
27+
}
28+
}

‎libs/blog/app-theme/data-access-app-theme/tsconfig.lib.json

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"extends": "./tsconfig.json",
3+
"compilerOptions": {
4+
"outDir": "../../../../dist/out-tsc",
5+
"declaration": true,
6+
"declarationMap": true,
7+
"inlineSources": true,
8+
"types": []
9+
},
10+
"exclude": [
11+
"src/**/*.spec.ts",
12+
"src/test-setup.ts",
13+
"jest.config.ts",
14+
"src/**/*.test.ts"
15+
],
16+
"include": ["src/**/*.ts"]
17+
}

‎libs/blog/app-theme/data-access-app-theme/tsconfig.lib.prod.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"extends": "./tsconfig.lib.json",
3+
"compilerOptions": {
4+
"declarationMap": false
5+
},
6+
"angularCompilerOptions": {}
7+
}

‎libs/blog/app-theme/data-access-app-theme/tsconfig.spec.json

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"extends": "./tsconfig.json",
3+
"compilerOptions": {
4+
"outDir": "../../../../dist/out-tsc",
5+
"module": "commonjs",
6+
"target": "es2016",
7+
"types": ["jest", "node"]
8+
},
9+
"files": ["src/test-setup.ts"],
10+
"include": [
11+
"jest.config.ts",
12+
"src/**/*.test.ts",
13+
"src/**/*.spec.ts",
14+
"src/**/*.d.ts"
15+
]
16+
}

‎libs/shared/assets/src/lib/styles/cookies-consent.scss

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
#cc-main {
2+
/** Change font **/
3+
--cc-font-family: 'Inter';
4+
5+
--cc-btn-primary-bg: rgba(255, 0, 106, 1);
6+
--cc-btn-primary-border-color: transparent;
7+
--cc-btn-primary-hover-bg: rgba(255, 0, 106, 0.7);
8+
--cc-btn-primary-hover-border-color: transparent;
9+
10+
--cc-btn-secondary-bg: rgba(255, 0, 106, 0.3);
11+
--cc-btn-secondary-border-color: transparent;
12+
--cc-btn-secondary-hover-bg: rgba(255, 0, 106, 0.15);
13+
--cc-btn-secondary-hover-border-color: transparent;
14+
15+
/** Also make toggles the same color as the button **/
16+
--cc-toggle-on-bg: var(--cc-btn-primary-bg);
17+
}

‎nx.json

+5
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,11 @@
4545
"e2e": {
4646
"cache": true,
4747
"inputs": ["default", "^production"]
48+
},
49+
"@nx/angular:ng-packagr-lite": {
50+
"cache": true,
51+
"dependsOn": ["^build"],
52+
"inputs": ["production", "^production"]
4853
}
4954
},
5055
"namedInputs": {

‎tsconfig.base.json

+3
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,9 @@
170170
"@angular-love/data-access": [
171171
"libs/blog/newsletter/data-access/src/index.ts"
172172
],
173+
"@angular-love/data-access-app-theme": [
174+
"libs/blog/app-theme/data-access-app-theme/src/index.ts"
175+
],
173176
"@angular-love/feature-about-us": [
174177
"libs/blog/about-us/feature-about-us/src/index.ts"
175178
],

0 commit comments

Comments
 (0)