refactor(wdc-2023): prepare for container-queries playground

.gitignore

@@ -39,3 +39,5 @@ testem.log
 .DS_Store
 Thumbs.db
 .eslintcache
+
+.angular

.prettierignore

@@ -2,3 +2,5 @@
 
 /dist
 /coverage
+
+.angular

libs/web/container-queries/.eslintrc.json

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

libs/web/container-queries/README.md

@@ -0,0 +1,7 @@
+# web-container-queries
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test web-container-queries` to execute the unit tests.

libs/web/container-queries/jest.config.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+export default {
+  displayName: 'web-container-queries',
+  preset: '../../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../../coverage/libs/web/container-queries',
+  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'
+  ]
+};

libs/web/container-queries/project.json

@@ -0,0 +1,34 @@
+{
+  "name": "web-container-queries",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/web/container-queries/src",
+  "prefix": "angular-spotify",
+  "tags": [],
+  "projectType": "library",
+  "targets": {
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/web/container-queries/jest.config.ts",
+        "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": [
+          "libs/web/container-queries/**/*.ts",
+          "libs/web/container-queries/**/*.html"
+        ]
+      }
+    }
+  }
+}

libs/web/container-queries/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/container-queries.component';

libs/web/container-queries/src/lib/container-queries.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'as-container-queries',
+  standalone: true,
+  template: `
+    <div class="content-spacing">
+      <h2 class="text-3xl text-white">Hello Melbourne 🇦🇺</h2>
+    </div>
+  `
+})
+export class ContainerQueriesComponent {}

libs/web/container-queries/src/test-setup.ts

@@ -0,0 +1 @@
+import 'jest-preset-angular/setup-jest';

libs/web/container-queries/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.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

libs/web/container-queries/tsconfig.lib.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"],
+  "include": ["src/**/*.ts"]
+}

libs/web/container-queries/tsconfig.spec.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "target": "es2016",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"]
+}

package.json

@@ -79,13 +79,14 @@
     "@nrwl/cypress": "15.9.2",
     "@nrwl/eslint-plugin-nx": "15.9.2",
     "@nrwl/jest": "15.9.2",
+    "@nrwl/js": "15.9.2",
     "@nrwl/linter": "15.9.2",
     "@nrwl/nx-cloud": "16.0.1",
     "@nrwl/workspace": "15.9.2",
     "@schematics/angular": "~15.0.0",
     "@types/jest": "29.4.4",
     "@types/lodash-es": "4.17.4",
-    "@types/node": "14.14.33",
+    "@types/node": "16.11.7",
     "@types/spotify-api": "0.0.10",
     "@types/spotify-web-playback-sdk": "0.1.9",
     "@typescript-eslint/eslint-plugin": "5.59.0",

tailwind.config.js

@@ -18,9 +18,9 @@ module.exports = {
         primary: '#1db954',
         sliderRail: '#535353',
         sliderTrack: '#b3b3b3',
-        baseline: 'rgb(var(--background-base) / <alpha-value>)',
-        white: 'rgb(var(--text-base) / <alpha-value>)',
-        highlight: 'hsla(0,0%,100%,.1)',
+        baseline: 'rgb(var(--background-baseline) / <alpha-value>)',
+        white: 'rgb(var(--text-baseline) / <alpha-value>)',
+        highlight: 'rgb(var(--background-highlight) / <alpha-value>)',
       }
     }
   },

tsconfig.base.json

@@ -45,6 +45,7 @@
       "@angular-spotify/web/browse/ui/category-cover": [
         "libs/web/browse/ui/category-cover/src/index.ts"
       ],
+      "@angular-spotify/web/container-queries": ["libs/web/container-queries/src/index.ts"],
       "@angular-spotify/web/home/data-access": ["libs/web/home/data-access/src/index.ts"],
       "@angular-spotify/web/home/feature": ["libs/web/home/feature/src/index.ts"],
       "@angular-spotify/web/home/ui/featured-playlists": [

yarn.lock

@@ -3257,10 +3257,10 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.15.13.tgz#f64277c341150c979e42b00e4ac289290c9df469"
   integrity sha512-N+0kuo9KgrUQ1Sn/ifDXsvg0TTleP7rIy4zOBGECxAljqvqfqpTfzx0Q1NUedOixRMBfe2Whhb056a42cWs26Q==
 
-"@types/node@14.14.33":
-  version "14.14.33"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.33.tgz#9e4f8c64345522e4e8ce77b334a8aaa64e2b6c78"
-  integrity sha512-oJqcTrgPUF29oUP8AsUqbXGJNuPutsetaa9kTQAQce5Lx5dTYWV02ScBiT/k1BX/Z7pKeqedmvp39Wu4zR7N7g==
+"@types/node@16.11.7":
+  version "16.11.7"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.7.tgz#36820945061326978c42a01e56b61cd223dfdc42"
+  integrity sha512-QB5D2sqfSjCmTuWcBWyJ+/44bcjO7VbjSbOE0ucoVbAsSNQc4Lt6QkgkVXkTDwkL4z/beecZNDvVX15D4P8Jbw==
 
 "@types/node@^14.14.31":
   version "14.18.42"