add default theme lib and have the web more generic to allow easily changing themes

Author: Florin Mateescu

.eslintrc.json

@@ -15,6 +15,14 @@
               {
                 "sourceTag": "*",
                 "onlyDependOnLibsWithTags": ["*"]
+              },
+              {
+                "sourceTag": "type:frontend",
+                "onlyDependOnLibsWithTags": ["type:frontend"]
+              },
+              {
+                "sourceTag": "type:backend",
+                "onlyDependOnLibsWithTags": ["type:backend"]
               }
             ]
           }

apps/express/nodemon.json

@@ -5,7 +5,7 @@
     "src/**/*.spec.ts",
     "node_modules",
     ".git",
-    "../../libs/angular/**/*"
+    "../../libs/default-theme/**/*"
   ],
   "env": { "LOG_LEVEL": "debug" },
   "exec": "npx node --inspect=0.0.0.0:9229 -r tsconfig-paths/register -r ts-node/register src/main.ts"

apps/express/payload.config.ts

@@ -1,11 +1,7 @@
 import { mongooseAdapter } from '@payloadcms/db-mongodb';
 import { slateEditor } from '@payloadcms/richtext-slate';
 import { buildConfig } from 'payload/config';
-import { UsersCollection } from './src/payloadcms/collections/UsersCollection';
-import { CategoriesCollection } from './src/payloadcms/collections/CategoriesCollection';
-import { PagesCollection } from './src/payloadcms/collections/PagesCollection';
-import { PostsCollection } from './src/payloadcms/collections/PostsCollection';
-import { TagsCollection } from './src/payloadcms/collections/TagsCollection';
+import { UsersCollection } from './src/payloadcms/UsersCollection';
 import * as path from 'path';
 import { webpackBundler } from '@payloadcms/bundler-webpack';
 import { ReturnToWebComponent } from './src/payloadcms/components/ReturnToWebComponent';
@@ -28,13 +24,7 @@ export default buildConfig({
     },
   }),
   editor: slateEditor({}),
-  collections: [
-    UsersCollection,
-    CategoriesCollection,
-    PagesCollection,
-    PostsCollection,
-    TagsCollection,
-  ],
+  collections: [UsersCollection],
   routes: {
     admin: '/admin',
     api: '/api',

apps/express/project.json

@@ -115,5 +115,5 @@
       "command": "docker build -f apps/express/Dockerfile . -t express"
     }
   },
-  "tags": []
+  "tags": ["type:backend"]
 }

apps/express/src/payloadcms/collections/UsersCollection.ts renamed to apps/express/src/payloadcms/UsersCollection.ts

@@ -1,17 +1,20 @@
 import { CollectionConfig } from 'payload/types';
-import { UserRoles, UserRolesLabels } from '../UserRoles';
+import {
+  UserRoles,
+  UserRolesLabels,
+} from '../../../../libs/payloadcms-common/src/lib/UserRoles';
 import { Access } from 'payload/config';
 import {
   accessAdminOnly,
   adminPanelOnlyAdmins,
-} from '../utils/access-functions';
+} from '../../../../libs/payloadcms-common/src/lib/access-functions';
 import {
   fieldAccessAdminOnly,
   fieldAccessAdminOrMeOnly,
   fieldAccessMeOnly,
-} from '../utils/field-access-functions';
+} from '../../../../libs/payloadcms-common/src/lib/field-access-functions';
 import { AuthPaths } from '@binarystarter-angular/shared-constants';
-import { useInfrastructure } from '../../utils/use-infrastructure';
+import { useInfrastructure } from '../utils/use-infrastructure';
 
 const { configuration } = useInfrastructure();
 

apps/express/src/payloadcms/collections/CategoriesCollection.ts

@@ -6,5 +6,10 @@
     "types": ["node"]
   },
   "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"],
-  "include": ["src/**/*.ts", "src/**/*.tsx"]
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "../../libs/payloadcms-common/src/lib/access-functions.ts",
+    "../../libs/payloadcms-common/src/lib/UserRoles.ts"
+  ]
 }

apps/express/src/payloadcms/collections/PagesCollection.ts

@@ -4,7 +4,7 @@
   "projectType": "application",
   "prefix": "web",
   "sourceRoot": "apps/web/src",
-  "tags": [],
+  "tags": ["type:frontend"],
   "targets": {
     "build": {
       "executor": "@angular-devkit/build-angular:application",
@@ -18,7 +18,6 @@
         "assets": ["apps/web/src/favicon.ico", "apps/web/src/assets"],
         "styles": [
           "@angular/material/prebuilt-themes/deeppurple-amber.css",
-          "apps/web/src/styles/variables.css",
           "apps/web/src/styles.css"
         ],
         "scripts": [],
@@ -32,8 +31,8 @@
         "production": {
           "fileReplacements": [
             {
-              "replace": "libs/angular/src/lib/environments/environment.ts",
-              "with": "libs/angular/src/lib/environments/environment.production.ts"
+              "replace": "libs/default-theme/src/lib/environments/environment.ts",
+              "with": "libs/default-theme/src/lib/environments/environment.production.ts"
             }
           ],
           "budgets": [
@@ -53,8 +52,8 @@
         "development": {
           "fileReplacements": [
             {
-              "replace": "libs/angular/src/lib/environments/environment.ts",
-              "with": "libs/angular/src/lib/environments/environment.development.ts"
+              "replace": "libs/default-theme/src/lib/environments/environment.ts",
+              "with": "libs/default-theme/src/lib/environments/environment.development.ts"
             }
           ],
           "optimization": false,

apps/express/src/payloadcms/collections/PostsCollection.ts

@@ -4,8 +4,8 @@ import cors from 'cors';
 import { join, resolve } from 'path';
 import compression from 'compression';
 import AngularServerBootstrap from './src/main.server';
-import { environment } from '@binarystarter-angular/angular';
 import { CommonEngine } from '@angular/ssr';
+import { env } from './src/theme';
 
 // The Express app is exported so that it can be used by serverless Functions.
 export function app(): express.Express {
@@ -20,7 +20,7 @@ export function app(): express.Express {
   server.set('views', browserDistFolder);
   server.use(
     cors({
-      origin: environment.web.url,
+      origin: env.web.url,
     })
   );
 

apps/express/src/payloadcms/collections/TagsCollection.ts

@@ -1,10 +1,7 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import {
-  WebRootComponent,
-  serverAppConfig,
-} from '@binarystarter-angular/angular';
+import { WebRootComponent, serverConfig } from './theme';
 
 const AngularServerBootstrap = () =>
-  bootstrapApplication(WebRootComponent, serverAppConfig);
+  bootstrapApplication(WebRootComponent, serverConfig);
 
 export default AngularServerBootstrap;

apps/express/src/payloadcms/utils/index.ts

@@ -1,17 +1,13 @@
 import { enableProdMode } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
-import {
-  WebRootComponent,
-  environment,
-  webConfig,
-} from '@binarystarter-angular/angular';
+import { WebRootComponent, env, webConfig } from './theme';
 
-if (environment.production) {
+if (env.production) {
   enableProdMode();
 }
 
 document.addEventListener('DOMContentLoaded', () => {
   bootstrapApplication(WebRootComponent, webConfig).catch((err) =>
-    console.error(err),
+    console.error(err)
   );
 });

apps/express/tsconfig.app.json

@@ -1,15 +1 @@
-@import './styles/main.css';
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
-
-/* Material theme styling */
-@import './styles/material-theme/material-variables.css';
-@import './styles/material-theme/material-buttons.css';
-@import './styles/material-theme/material-sidenav.css';
-@import './styles/material-theme/material-form.css';
-@import './styles/material-theme/material-typography.css';
-@import './styles/material-theme/material-snackbar.css';
-@import './styles/material-theme/material-spinner.css';
-@import './styles/material-theme/material-animations.css';
-@import './styles/material-theme/material-stepper.css';
+@import '../../../libs/default-theme/src/styles.css';

apps/web/project.json

@@ -0,0 +1,14 @@
+import {
+  DefaultThemeRootComponent,
+  defaultThemeConfig,
+  environment,
+  defaultThemeServerConfig,
+} from '@binarystarter-angular/default-theme';
+
+export const WebRootComponent = DefaultThemeRootComponent;
+
+export const webConfig = defaultThemeConfig;
+
+export const env = environment;
+
+export const serverConfig = defaultThemeServerConfig;

apps/web/server.ts

@@ -0,0 +1,18 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}