feat: add theme and angular material 😍 (#41)

<!--
Hey there! 👋 Thank you for contributing to our awesome project! 🎉
Before you submit your pull request, please make sure to read our
guidelines below. 😄
-->

## Description 📝

Created shared-styles lib to contain theme for any applications in the
mono-repo.

.editorconfig

@@ -8,6 +8,9 @@ indent_size = 2
 insert_final_newline = true
 trim_trailing_whitespace = true
 
+[*.{ts,tsx}]
+ij_typescript_spaces_within_imports = true
+
 [*.md]
 max_line_length = off
 trim_trailing_whitespace = false

.lintstagedrc.json

@@ -1,4 +1,6 @@
 {
-  "{apps,libs}/**/*.{ts,js,html,json,scss,css,md}": ["nx affected:lint --uncommitted --fix true"],
-  "*": ["nx format:write --base=main --head=HEAD"]
+  "{apps,libs}/**/*.{ts,js,html,json,scss,css,md}": [
+    "nx affected:lint --uncommitted --fix true",
+    "nx format:write --uncommitted"
+  ]
 }

apps/hpb-client/project.json

@@ -20,7 +20,7 @@
           "apps/hpb-client/src/assets",
           "apps/hpb-client/src/manifest.webmanifest"
         ],
-        "styles": ["apps/hpb-client/src/styles.scss"],
+        "styles": ["libs/shared/styles/src/lib/theme.scss", "apps/hpb-client/src/styles.scss"],
         "scripts": [],
         "serviceWorker": true,
         "ngswConfigPath": "apps/hpb-client/ngsw-config.json"
@@ -48,6 +48,15 @@
           "extractLicenses": false,
           "sourceMap": true,
           "namedChunks": true
+        },
+        "stats": {
+          "statsJson": true,
+          "buildOptimizer": false,
+          "optimization": false,
+          "vendorChunk": true,
+          "extractLicenses": false,
+          "sourceMap": true,
+          "namedChunks": true
         }
       },
       "defaultConfiguration": "production"

apps/hpb-client/src/app/app.component.html

@@ -1,4 +1,22 @@
-<h1>Welcome to Helderberg Pirates</h1>
+<mat-toolbar color="primary">
+  <mat-toolbar-row>
+    <span>Helderberg Pirates</span>
+    <mat-icon>home</mat-icon>
+  </mat-toolbar-row>
+</mat-toolbar>
+
 <div class="container">
-  <img src="/assets/images/baseball-sticker.svg" alt="baseball sticker" class="img-fluid" />
+  <mat-card class="example-card">
+    <mat-card-header>
+      <div mat-card-avatar class="example-header-image"></div>
+      <mat-card-title>Making a website!</mat-card-title>
+      <mat-card-subtitle>We're making a website</mat-card-subtitle>
+    </mat-card-header>
+    <img mat-card-image src="/assets/images/baseball-sticker.svg" alt="Fun baseball sticker" />
+    <mat-card-content>
+      <p>
+        We're making a website for the Helderberg Pirates baseball team. We will hopefully have it up and running soon.
+      </p>
+    </mat-card-content>
+  </mat-card>
 </div>

apps/hpb-client/src/app/app.component.scss

@@ -1,8 +1,9 @@
 .container {
   display: flex;
   justify-content: center;
+  padding: 15px;
 
   img {
-    max-height: 100vh;
+    max-height: 80vh;
   }
 }

apps/hpb-client/src/app/app.component.ts

@@ -1,9 +1,13 @@
 import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { MatToolbarModule } from '@angular/material/toolbar';
 import { RouterModule } from '@angular/router';
 
 @Component({
   standalone: true,
-  imports: [RouterModule],
+  imports: [RouterModule, MatToolbarModule, MatButtonModule, MatCardModule, MatIconModule],
   selector: 'helderberg-pirates-baseball-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],

apps/hpb-client/src/index.html

@@ -7,9 +7,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
     <link rel="manifest" href="manifest.webmanifest" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
     <meta name="theme-color" content="#1976d2" />
   </head>
-  <body>
+  <body class="mat-typography mat-app-background">
     <helderberg-pirates-baseball-root></helderberg-pirates-baseball-root>
     <noscript>Please enable JavaScript to continue using this application.</noscript>
   </body>

apps/hpb-client/src/styles.scss

@@ -1 +0,0 @@
-/* You can add global styles to this file, and also import other style files */

libs/shared/styles/.eslintrc.json

@@ -0,0 +1,33 @@
+{
+  "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": "helderbergPiratesBaseball",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "helderberg-pirates-baseball",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}

libs/shared/styles/README.md

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

libs/shared/styles/jest.config.ts

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

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

libs/shared/styles/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/shared-styles.module';

libs/shared/styles/src/lib/shared-styles.module.ts

@@ -0,0 +1,7 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+@NgModule({
+  imports: [CommonModule],
+})
+export class SharedStylesModule {}

libs/shared/styles/src/lib/theme.scss

@@ -0,0 +1,52 @@
+/* You can add global styles to this file, and also import other style files */
+@use '@angular/material' as mat;
+
+@include mat.core();
+
+$primary-palette: mat.define-palette(mat.$indigo-palette);
+$accent-palette: mat.define-palette(mat.$grey-palette);
+
+// Define a dark theme
+$dark-theme: mat.define-dark-theme(
+  (
+    color: (
+      primary: $primary-palette,
+      accent: $accent-palette,
+    ),
+    // Only include `typography` and `density` in the default dark theme.
+    typography: mat.define-typography-config(),
+    density: 0,
+  )
+);
+
+// Define a light theme
+$light-theme: mat.define-light-theme(
+  (
+    color: (
+      primary: $primary-palette,
+      accent: $accent-palette,
+    ),
+  )
+);
+
+// Apply the dark theme by default
+@include mat.core-theme($dark-theme);
+@include mat.all-component-themes($dark-theme);
+
+// Apply the light theme only when the user prefers light themes.
+@media (prefers-color-scheme: light) {
+  // Use the `-color` mixins to only apply color styles without reapplying the same
+  // typography and density styles.
+  @include mat.core-color($light-theme);
+  @include mat.button-color($light-theme);
+  @include mat.toolbar-color($light-theme);
+}
+
+html,
+body {
+  height: 100%;
+}
+body {
+  margin: 0;
+  font-family: Roboto, 'Helvetica Neue', sans-serif;
+}

libs/shared/styles/src/test-setup.ts

@@ -0,0 +1,8 @@
+// @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment
+globalThis.ngJest = {
+  testEnvironmentOptions: {
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true,
+  },
+};
+import 'jest-preset-angular/setup-jest';

libs/shared/styles/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/shared/styles/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/shared/styles/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"]
+}

nx.json

@@ -13,7 +13,9 @@
     }
   },
   "workspaceLayout": {
-    "projectNameAndRootFormat": "as-provided"
+    "projectNameAndRootFormat": "derived",
+    "appsDir": "apps",
+    "libsDir": "libs"
   },
   "targetDefaults": {
     "build": {