WIP: Began implementation of the new module to manage styles

Dnn.AdminExperience/ClientSide/Styles.Web/.editorconfig

@@ -0,0 +1,15 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

Dnn.AdminExperience/ClientSide/Styles.Web/.gitignore

@@ -0,0 +1,25 @@
+dist/
+www/
+loader/
+
+*~
+*.sw[mnpcod]
+*.log
+*.tmp
+*.tmp.*
+log.txt
+*.sublime-project
+*.sublime-workspace
+
+.stencil/
+.idea/
+.vscode/
+.sass-cache/
+.versions/
+node_modules/
+$RECYCLE.BIN/
+
+.DS_Store
+Thumbs.db
+UserInterfaceState.xcuserstate
+.env

Dnn.AdminExperience/ClientSide/Styles.Web/.prettierrc.json

@@ -0,0 +1,13 @@
+{
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": false,
+  "quoteProps": "consistent",
+  "printWidth": 180,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false
+}

Dnn.AdminExperience/ClientSide/Styles.Web/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "styles",
+  "version": "10.0.0",
+  "private": true,
+  "description": "Allows managing DNN css variables for styles",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "es2015": "dist/esm/index.js",
+  "es2017": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "unpkg": "dist/third-party-elements/third-party-elements.esm.js",
+  "files": [
+    "dist/",
+    "loader/"
+  ],
+  "scripts": {
+    "build": "stencil build --docs && cpy ./dist/**/* ../../Dnn.PersonaBar.Extensions/admin/PersonaBar/Dnn.Styles/scripts",
+    "watch": "stencil build --config stencil.dnn.config.ts --watch",
+    "start": "stencil build --dev --watch --serve",
+    "generate": "stencil generate"
+  },
+  "dependencies": {
+    "@stencil/core": "^4.7.0"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@types/node": "^16.18.11",
+    "cpy-cli": "^5.0.0"
+  }
+}

Dnn.AdminExperience/ClientSide/Styles.Web/src/clients/styles-client.ts

@@ -0,0 +1,26 @@
+export default class StylesClient {
+    private serviceRoot: string;
+
+    constructor() {
+        const config = window.dnn.initStyles();
+        const sf = config.utility.sf;
+        sf.moduleRoot = "PersonaBar";
+        this.serviceRoot = sf.getServiceRoot();
+        this.serviceRoot += "Styles/";
+    }
+
+    getStyles(){
+        return new Promise<any>((resolve, reject) => {
+            fetch(`${this.serviceRoot}GetStyles`, {
+                method: "GET",
+            })
+            .then((response) => response.json())
+            .then((response) => {
+                resolve(response);
+            })
+            .catch((error) => {
+                reject(error);
+            });
+        });
+    }
+}

Dnn.AdminExperience/ClientSide/Styles.Web/src/components.d.ts

@@ -0,0 +1,37 @@
+/* eslint-disable */
+/* tslint:disable */
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
+import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
+export namespace Components {
+    interface DnnStylesModule {
+    }
+}
+declare global {
+    interface HTMLDnnStylesModuleElement extends Components.DnnStylesModule, HTMLStencilElement {
+    }
+    var HTMLDnnStylesModuleElement: {
+        prototype: HTMLDnnStylesModuleElement;
+        new (): HTMLDnnStylesModuleElement;
+    };
+    interface HTMLElementTagNameMap {
+        "dnn-styles-module": HTMLDnnStylesModuleElement;
+    }
+}
+declare namespace LocalJSX {
+    interface DnnStylesModule {
+    }
+    interface IntrinsicElements {
+        "dnn-styles-module": DnnStylesModule;
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            "dnn-styles-module": LocalJSX.DnnStylesModule & JSXBase.HTMLAttributes<HTMLDnnStylesModuleElement>;
+        }
+    }
+}

Dnn.AdminExperience/ClientSide/Styles.Web/src/components/dnn-styles-module/dnn-styles-module.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

Dnn.AdminExperience/ClientSide/Styles.Web/src/components/dnn-styles-module/dnn-styles-module.tsx

@@ -0,0 +1,36 @@
+import { Component, Host, h, State } from '@stencil/core';
+import { IStylesResx } from '../../window.dnn';
+import StylesClient from '../../clients/styles-client';
+
+@Component({
+  tag: 'dnn-styles-module',
+  styleUrl: 'dnn-styles-module.css',
+  shadow: true,
+})
+export class DnnStylesModule {
+  @State() resx: IStylesResx;
+
+  private stylesClient: StylesClient;
+
+  constructor() {
+    this.stylesClient = new StylesClient();
+  }
+
+  componentWillLoad() {
+    this.resx = window.dnn.initStyles().utility.resx.Styles;
+    document.querySelector("#dnnStylesHeader h3")
+      .textContent = this.resx.nav_Styles;
+    this.stylesClient.getStyles()
+      .then(response => console.log(response))
+      .catch(error => console.error(error));
+  }
+
+  render() {
+    return (
+      <Host>
+        <p>Styles from stencil...</p>
+      </Host>
+    );
+  }
+
+}

Dnn.AdminExperience/ClientSide/Styles.Web/src/components/dnn-styles-module/readme.md

@@ -0,0 +1,10 @@
+# dnn-styles-module
+
+
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

Dnn.AdminExperience/ClientSide/Styles.Web/src/index.ts

@@ -0,0 +1 @@
+export * from './components';

Dnn.AdminExperience/ClientSide/Styles.Web/src/window.dnn.d.ts

@@ -0,0 +1,53 @@
+declare global {
+    interface Window {
+        dnn: IDnn;
+    }
+}
+
+interface IDnn {
+    initStyles: () => IInitStylesConfig;
+}
+
+export interface IInitStylesConfig {
+    moduleName?: string;
+    params?: IParams;
+    utility?: IUtility;
+}
+
+interface IParams {
+    folderName?: string;
+    identifier?: string;
+    moduleName?: string;
+    path?: string;
+    query?: string;
+    settings?: ISettings;
+}
+
+interface ISettings {
+    isAdmin?: boolean;
+    isHost?: boolean;
+    permissions?: IPermissionsDictionary;
+}
+
+interface IPermissionsDictionary{
+    [key: string]: string;
+}
+
+interface IUtility {
+    resx: IResx;
+    sf: IServicesFramework;
+}
+
+interface IResx {
+    Styles: IStylesResx;
+}
+
+interface IStylesResx {
+    nav_Styles: string;
+}
+
+interface IServicesFramework {
+    getServiceRoot(): string;
+    moduleRoot: string;
+    controller: string;
+}

Dnn.AdminExperience/ClientSide/Styles.Web/stencil.config.ts

@@ -0,0 +1,24 @@
+import { Config } from '@stencil/core';
+
+export const config: Config = {
+  namespace: 'dnn-styles',
+  outputTargets: [
+    {
+      type: 'dist',
+      esmLoaderPath: '../loader',
+    },
+    {
+      type: 'dist-custom-elements',
+    },
+    {
+      type: 'docs-readme',
+    },
+    {
+      type: 'www',
+      serviceWorker: null, // disable service workers
+    },
+  ],
+  testing: {
+    browserHeadless: "new",
+  },
+};

Dnn.AdminExperience/ClientSide/Styles.Web/stencil.dnn.config.ts

@@ -0,0 +1,19 @@
+import { config as originalConfig } from './stencil.config';
+import dnnConfig from '../../../settings.local.json';
+import { Config } from '@stencil/core';
+
+if (!dnnConfig || !dnnConfig.WebsitePath){
+  console.error("WebsitePath is not defined in settings.local.json");
+}
+const outPath = `${dnnConfig.WebsitePath}\\DesktopModules\\Admin\\Dnn.PersonaBar\\Modules\\Dnn.Styles\\scripts\\dist`;
+
+export const config: Config = {
+  ...originalConfig,
+  outputTargets: [
+    {
+      type: 'dist',
+      esmLoaderPath: '../loader',
+      dir: dnnConfig?.WebsitePath ? outPath : '../dist',
+    }
+  ],
+};

Dnn.AdminExperience/ClientSide/Styles.Web/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "allowUnreachableCode": false,
+    "declaration": false,
+    "experimentalDecorators": true,
+    "lib": [
+      "dom",
+      "es2017"
+    ],
+    "moduleResolution": "node",
+    "module": "esnext",
+    "target": "es2017",
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "jsx": "react",
+    "jsxFactory": "h"
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

Dnn.AdminExperience/Dnn.PersonaBar.Extensions/Components/Styles/Constants.cs

@@ -0,0 +1,22 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information
+
+namespace Dnn.PersonaBar.Styles.Components
+{
+    /// <summary>
+    /// Constants used for the Themes module.
+    /// </summary>
+    public class Constants
+    {
+        /// <summary>
+        /// The menu name.
+        /// </summary>
+        public const string MenuName = "Dnn.Styles";
+
+        /// <summary>
+        /// The edit permission key.
+        /// </summary>
+        public const string Edit = "EDIT";
+    }
+}