Merge branch 'master' into 24362-implement-the-ui-for-create-files-us…

…ing-code

.github/workflows/frontend.yml

@@ -27,7 +27,7 @@ jobs:
     runs-on: ubuntu-20.04
     name: SonarQube
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           fetch-depth: 0
       - uses: sonarsource/sonarqube-scan-action@master

.github/workflows/release-process.yml

@@ -67,9 +67,6 @@ jobs:
     steps:
       - name: Checkout core
         uses: actions/checkout@v3
-        with:
-          token: ${{ secrets.CICD_GITHUB_TOKEN }}
-          submodules: recursively
       - name: Set Common Vars
         run: |
           if [[ "${{ github.event_name }}" == "pull_request" ]]; then
@@ -90,6 +87,7 @@ jobs:
 
           RELEASE_NAME="${{ github.event.release.name }}"
           if [[ -n "${RELEASE_NAME}" && "${RELEASE_NAME^^}" =~ [[:blank:]].?LTS$ ]]; then
+            IS_LTS=true
             RELEASE_LABEL=lts
           fi
           if [[ "${IS_RELEASE}" == 'true' && "${IS_LTS}" != 'true' ]]; then

.prettierignore

@@ -19,5 +19,6 @@ core-web/.storybook
 core-web/karma_html
 core-web/docs
 core-web/.angular
-core-web/*.md
+core-web/**/*.md
+core-web/**/*.d.ts
 core-web/decorate-angular-cli.js

core-web/README.MD

@@ -1,21 +1,22 @@
-[![Publish to NPM](https://github.com/dotCMS/core-web/actions/workflows/publish.yml/badge.svg)](https://github.com/dotCMS/core-web/actions/workflows/publish.yml)
-[![DotCMS/core-web Tests](https://github.com/dotCMS/core-web/actions/workflows/main.yml/badge.svg)](https://github.com/dotCMS/core-web/actions/workflows/main.yml)
-
 # DotCMS Frontend
 
-This repository contains the frontend infrastructure for the DotCMS admin system, includes the main app and all the internal libraries.
+This folder contains the frontend infrastructure for the DotCMS admin system, includes the main app and all the internal libraries.
 
 ## Content
 
-| Name                                                                                               | Type | Location                     | Build with | Description                                  |
-| -------------------------------------------------------------------------------------------------- | ---- | ---------------------------- | ---------- | -------------------------------------------- |
-| [dotcms-ui](https://github.com/dotCMS/core-web/tree/master/apps/dotcms-ui)                         | app  | `apps/dotcms-ui`             | Angular    | Main UI application                          |
-| [dotcms](https://github.com/dotCMS/core-web/tree/master/libs/dotcms)                               | lib  | `libs/dotcms`                | Typescript | JavaScript SDK for DotCMS API's              |
-| [dot-layout-grid](https://github.com/dotCMS/core-web/tree/master/libs/dot-layout-grid)             | lib  | `libs/dot-layout-grid`       | Angular    | Components for layout editor                 |
-| [dot-rules](https://github.com/dotCMS/core-web/tree/master/libs/dot-rules)                         | lib  | `libs/dot-rules`             | Angular    | Components and services for rules            |
-| [dotcms-field-elements](https://github.com/dotCMS/core-web/tree/master/libs/dotcms-field-elements) | lib  | `libs/dotcms-field-elements` | Stenciljs  | Web components for form builder (deprecated) |
-| [dotcms-js](https://github.com/dotCMS/core-web/tree/master/libs/dotcms-js)                         | lib  | `libs/dotcms-js`             | Angular    | Angular @injectables for DotCMS API          |
-| [dotcms-models](https://github.com/dotCMS/core-web/tree/master/libs/dotcms-models)                 | lib  | `libs/dotcms-models`         | Typescript | DotCMS interfaces and types                  |
+| Name                                                                                               | Type | Location                     | Build with | Description                                                 |
+| -------------------------------------------------------------------------------------------------- | ---- | ---------------------------- | ---------- | ----------------------------------------------------------- |
+| [dotcms-ui](https://github.com/dotCMS/core-web/tree/master/apps/dotcms-ui)                         | app  | `apps/dotcms-ui`             | Angular    | Main UI application                                         |
+| [dotcdn](https://github.com/dotCMS/core-web/tree/master/apps/dotcdn)                               | app  | `apps/dotcdn`                | Angular    | App for the dotCDN plugin                                   |
+| [dotcms-block-editor](https://github.com/dotCMS/core-web/tree/master/apps/dotcms-block-editor)     | app  | `apps/dotcms-block-editor`   | Angular    | App to build de block-editor as a Web Component             |
+| [dotcms](https://github.com/dotCMS/core-web/tree/master/libs/dotcms)                               | lib  | `libs/dotcms`                | Typescript | JavaScript SDK for DotCMS API's                             |
+| [dot-layout-grid](https://github.com/dotCMS/core-web/tree/master/libs/dot-layout-grid)             | lib  | `libs/dot-layout-grid`       | Angular    | Components for layout editor                                |
+| [block-editor](https://github.com/dotCMS/core-web/tree/master/libs/block-editor)                   | lib  | `libs/block-editor`          | TitTap     | Block editor components                                     |
+| [dot-rules](https://github.com/dotCMS/core-web/tree/master/libs/dot-rules)                         | lib  | `libs/dot-rules`             | Angular    | Components and services for rules                           |
+| [dotcms-field-elements](https://github.com/dotCMS/core-web/tree/master/libs/dotcms-field-elements) | lib  | `libs/dotcms-field-elements` | Stenciljs  | Web components for form builder (deprecated)                |
+| [dotcms-js](https://github.com/dotCMS/core-web/tree/master/libs/dotcms-js)                         | lib  | `libs/dotcms-js`             | Angular    | Angular @injectables for DotCMS API                         |
+| [dotcms-models](https://github.com/dotCMS/core-web/tree/master/libs/dotcms-models)                 | lib  | `libs/dotcms-models`         | Typescript | DotCMS interfaces and types                                 |
+| [dotcms-scss](https://github.com/dotCMS/core-web/tree/master/libs/dotcms-scss)                     | lib  | `libs/dotcms-scss`           | SCSS       | SCSS shared files for theme Angular PrimeNG and Dijit Theme |
 
 ## NX Monorepo
 

core-web/apps/dotcdn/project.json

@@ -15,14 +15,14 @@
                 "tsConfig": "apps/dotcdn/tsconfig.app.json",
                 "assets": ["apps/dotcdn/src/favicon.ico", "apps/dotcdn/src/assets"],
                 "styles": [
-                    "libs/dot-primeng-theme-styles/src/scss/styles.scss",
+                    "libs/dotcms-scss/angular/styles.scss",
                     "node_modules/primeicons/primeicons.css",
                     "node_modules/primeflex/primeflex.css",
                     "node_modules/primeng/resources/primeng.min.css",
                     "apps/dotcdn/src/styles.scss"
                 ],
                 "stylePreprocessorOptions": {
-                    "includePaths": ["libs/dot-primeng-theme-styles/src/scss"]
+                    "includePaths": ["libs/dotcms-scss/angular"]
                 },
                 "scripts": ["node_modules/chart.js/dist/chart.js"],
                 "vendorChunk": true,
@@ -95,15 +95,15 @@
                 "jestConfig": "apps/dotcdn/jest.config.ts",
                 "passWithNoTests": true,
                 "styles": [
-                    "libs/dot-primeng-theme-styles/src/scss/styles.scss",
+                    "libs/dotcms-scss/angular/styles.scss",
                     "node_modules/primeicons/primeicons.css",
                     "node_modules/primeflex/primeflex.css",
                     "node_modules/primeng/resources/primeng.min.css",
                     "apps/dotcdn/src/styles.scss"
                 ],
                 "assets": ["apps/dotcdn/src/favicon.ico", "apps/dotcdn/src/assets"],
                 "stylePreprocessorOptions": {
-                    "includePaths": ["libs/dot-primeng-theme-styles/src/scss"]
+                    "includePaths": ["libs/dotcms-scss/angular"]
                 },
                 "scripts": ["node_modules/chart.js/dist/Chart.js"]
             }

core-web/apps/dotcdn/src/app/app.component.scss

@@ -46,7 +46,7 @@ h1 {
 }
 
 .dot-cdn__col {
-    color: $brand-primary;
+    color: $color-palette-primary;
     margin-bottom: $spacing-3;
     display: grid;
     column-gap: $spacing-3;
@@ -59,7 +59,7 @@ h1 {
 .dot-cdn__stats-label {
     text-transform: uppercase;
     color: gray;
-    font-size: $font-size-small;
+    font-size: $font-size-sm;
     grid-column: 1/3;
     display: inline-block;
 }
@@ -74,7 +74,7 @@ h1 {
     margin-bottom: $spacing-0;
 }
 .dot-cdn__tab-domain small {
-    color: $gray;
+    color: $color-palette-gray-700;
 }
 
 .dot-cdn__tab-domain p {
@@ -83,7 +83,7 @@ h1 {
 
 .dot-cdn__tab-content-label {
     margin: 0;
-    font-size: $font-size-large;
+    font-size: $font-size-lg;
 }
 
 .dot-cdn__tab-content__row:first-child {

core-web/apps/dotcms-block-editor/project.json

@@ -24,7 +24,7 @@
                     }
                 ],
                 "stylePreprocessorOptions": {
-                    "includePaths": ["libs/dot-primeng-theme-styles/src/scss"]
+                    "includePaths": ["libs/dotcms-scss/angular"]
                 },
                 "allowedCommonJsDependencies": ["lodash.isequal"],
                 "vendorChunk": true,

core-web/apps/dotcms-ui/project.json

@@ -35,14 +35,15 @@
                     }
                 ],
                 "styles": [
-                    "libs/dot-primeng-theme-styles/src/scss/styles.scss",
+                    "libs/dotcms-scss/angular/styles.scss",
+                    "node_modules/primeicons/primeicons.css",
                     "node_modules/primeicons/primeicons.css",
                     "node_modules/primeflex/primeflex.css",
                     "node_modules/primeng/resources/primeng.min.css"
                 ],
                 "scripts": [],
                 "stylePreprocessorOptions": {
-                    "includePaths": ["libs/dot-primeng-theme-styles/src/scss"]
+                    "includePaths": ["libs/dotcms-scss/angular"]
                 },
                 "vendorChunk": true,
                 "extractLicenses": false,
@@ -119,10 +120,10 @@
                 "tsConfig": "apps/dotcms-ui/tsconfig.spec.json",
                 "karmaConfig": "apps/dotcms-ui/karma.conf.js",
                 "polyfills": "apps/dotcms-ui/src/polyfills.ts",
-                "styles": ["libs/dot-primeng-theme-styles/src/scss/styles.scss"],
+                "styles": ["libs/dotcms-scss/angular/styles.scss"],
                 "scripts": [],
                 "stylePreprocessorOptions": {
-                    "includePaths": ["libs/dot-primeng-theme-styles/src/scss"]
+                    "includePaths": ["libs/dotcms-scss/angular"]
                 }
             },
             "configurations": {

core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps-configuration-detail/dot-apps-configuration-detail-form/dot-apps-configuration-detail-form.component.scss

@@ -6,7 +6,7 @@
     }
 
     textarea {
-        font-family: $code-text;
+        font-family: $font-code;
         max-height: 21.5rem;
         overflow: auto !important;
     }
@@ -21,12 +21,12 @@
 
     input,
     textarea {
-        font-size: $font-size-large;
+        font-size: $font-size-lg;
         width: 100%;
     }
 
     dot-icon {
-        color: $brand-primary;
+        color: $color-palette-primary;
         margin-left: $spacing-1;
         vertical-align: middle;
     }
@@ -38,7 +38,7 @@
         }
 
         p-checkbox label {
-            font-size: $font-size-large;
+            font-size: $font-size-lg;
         }
 
         p-checkbox.required label:before,

core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps-configuration-detail/dot-apps-configuration-detail.component.scss

@@ -1,7 +1,7 @@
 @use "variables" as *;
 
 :host {
-    background: $gray-bg;
+    background: $color-palette-gray-200;
     box-shadow: $md-shadow-4;
     display: flex;
     height: 100%;
@@ -24,11 +24,11 @@
 }
 
 .dot-apps-configuration-detail__host-name {
-    border-bottom: 1px solid $gray-lighter;
+    border-bottom: 1px solid $color-palette-gray-300;
     color: $black;
     display: flex;
     justify-content: space-between;
-    font-size: $font-size-large;
+    font-size: $font-size-lg;
     font-weight: $font-weight-semi-bold;
     padding: $spacing-3;
 

core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps-configuration-header/dot-apps-configuration-header.component.scss

@@ -2,7 +2,7 @@
 
 :host {
     background-color: $white;
-    border-bottom: 1px solid $gray-lighter;
+    border-bottom: 1px solid $color-palette-gray-300;
     display: flex;
     padding: $spacing-4 $spacing-4 $spacing-4 0;
     position: sticky;
@@ -31,15 +31,15 @@
     color: $black;
     cursor: pointer;
     display: inline-block;
-    font-size: $font-size-xx-large;
+    font-size: $font-size-xxl;
     font-weight: bold;
     margin: 0;
 }
 
 .dot-apps-configuration__service-key {
-    color: $gray;
+    color: $color-palette-gray-700;
     display: inline-block;
-    font-size: $font-size-large;
+    font-size: $font-size-lg;
     margin-left: $spacing-3;
     display: flex;
     align-items: center;
@@ -50,7 +50,7 @@
 }
 
 .dot-apps-configuration__configurations {
-    color: $gray;
+    color: $color-palette-gray-700;
     display: block;
     margin-bottom: $spacing-3;
     margin-top: $spacing-1;
@@ -71,7 +71,7 @@
     .dot-apps-configuration__description__link_show-more {
         background-color: $white;
         cursor: pointer;
-        font-size: $font-size-large;
+        font-size: $font-size-lg;
         padding-left: $spacing-1;
         position: absolute;
         bottom: 0;

core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps-configuration/dot-apps-configuration-list/dot-apps-configuration-item/dot-apps-configuration-item.component.scss

@@ -1,7 +1,7 @@
 @use "variables" as *;
 
 :host {
-    border: 1px solid $gray-lighter;
+    border: 1px solid $color-palette-gray-300;
     cursor: pointer;
     display: flex;
     margin-right: $spacing-3;
@@ -19,7 +19,7 @@
         margin-right: $spacing-3;
         text-align: end;
         width: 100%;
-        color: $brand-primary;
+        color: $color-palette-primary;
     }
 
     dot-icon {
@@ -37,7 +37,7 @@
 }
 
 .dot-apps-configuration-list__host-key {
-    color: $gray;
+    color: $color-palette-gray-700;
     display: flex;
     flex-grow: 1;
     align-items: center;

core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps-configuration/dot-apps-configuration-list/dot-apps-configuration-list.component.scss

@@ -10,8 +10,8 @@ dot-apps-configuration-item {
     overflow: auto;
 
     &.dot-apps-configuration-item__not-configured {
-        background-color: $gray-bg;
-        color: $gray;
+        background-color: $color-palette-gray-200;
+        color: $color-palette-gray-700;
 
         &:hover {
             background-color: transparent;

core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps-configuration/dot-apps-configuration.component.scss

@@ -1,7 +1,7 @@
 @use "variables" as *;
 
 :host {
-    background: $gray-bg;
+    background: $color-palette-gray-200;
     box-shadow: $md-shadow-4;
     display: flex;
     height: 100%;
@@ -38,12 +38,12 @@
 }
 
 .dot-apps-configuration__add-configurations-title {
-    font-size: $font-size-xx-large;
+    font-size: $font-size-xxl;
     font-weight: bold;
 }
 
 .dot-apps-configuration__add-configurations-description {
-    font-size: $font-size-large;
+    font-size: $font-size-lg;
     margin-bottom: $spacing-9;
     margin-top: $spacing-4;
 }