V14: frontend ui docs (#14374)

* update script to compile frontend api docs

* update backoffice submodule

* set the base path for the ui docs

* update env syntax

* remove Umbraco.Web.UI.Docs

* replace BASE_PATH in assets

* Make Upload API step able to run without releasing on nuget

* add dependOn Build to get major version number

.gitignore

@@ -50,10 +50,6 @@ tools/docfx/
 # Ignore rule for clearing out Belle (avoid rebuilding all the time)
 preserve.belle
 
-# Ignore rule for output of generated documentation files from grunt docserve
-/src/Umbraco.Web.UI.Docs/api/
-/src/Umbraco.Web.UI.Docs/package-lock.json
-
 # csharp-docs
 /build/csharp-docs/api/
 /build/csharp-docs/_site/

build/azure-pipelines.yml

@@ -58,7 +58,7 @@ stages:
           - task: Cache@2
             displayName: Cache node_modules
             inputs:
-              key: '"npm_client" | "$(Agent.OS)" | $(Build.SourcesDirectory)/src/Umbraco.Web.UI.Client/package-lock.json'
+              key: '"npm_client" | "$(Agent.OS)"| $(Build.SourcesDirectory)/src/Umbraco.Web.UI.Client/package-lock.json | $(Build.SourcesDirectory)/src/Umbraco.Web.UI.New.Client/package-lock.json'
               restoreKeys: |
                 "npm_client" | "$(Agent.OS)"
                 "npm_client"
@@ -183,28 +183,40 @@ stages:
         displayName: Build js API Reference
         pool:
           vmImage: 'ubuntu-latest'
+        variables:
+          npm_config_cache: $(Pipeline.Workspace)/.npm_client
+          NODE_OPTIONS: --max_old_space_size=16384
+          BASE_PATH: /v$(umbracoMajorVersion)/ui
         steps:
+          - checkout: self
+            submodules: true
           - task: NodeTool@0
-            displayName: Use Node.js 10.15.0
+            displayName: Use Node.js $(nodeVersion)
             inputs:
-              versionSpec: 10.15.0 # Won't work with higher versions
-          - script: |
-              npm ci --no-fund --no-audit --prefer-offline
-              npx gulp docs
-
-              major="$(umbracoMajorVersion)"
-              echo "major version: $major"
-
-              baseUrl="https://apidocs.umbraco.com/v$major/ui/"
-              echo "baseUrl: $baseUrl"
-
-              sed -i "s|baseUrl = .*|baseUrl = '$baseUrl',|" api/index.html
-            displayName: Generate js Docs
-            workingDirectory:  $(Build.SourcesDirectory)/src/Umbraco.Web.UI.Docs
+              versionSpec: $(nodeVersion)
+          - task: Cache@2
+            displayName: Cache node_modules
+            inputs:
+              key: '"npm_client" | "$(Agent.OS)"| $(Build.SourcesDirectory)/src/Umbraco.Web.UI.Client/package-lock.json | $(Build.SourcesDirectory)/src/Umbraco.Web.UI.New.Client/package-lock.json'
+              restoreKeys: |
+                "npm_client" | "$(Agent.OS)"
+                "npm_client"
+              path: $(npm_config_cache)
+          - script: npm ci --no-fund --no-audit --prefer-offline
+            workingDirectory:  src/Umbraco.Web.UI.New.Client
+            displayName: Run npm ci
+          - script: npm run storybook:build
+            displayName: Build Storybook
+            env:
+              VITE_BASE_PATH: $(BASE_PATH)/
+            workingDirectory: $(Build.SourcesDirectory)/src/Umbraco.Web.UI.New.Client
+          - script: sed -i "s|/umbraco/backoffice|$(BASE_PATH)/umbraco/backoffice|" assets/*.js
+            displayName: Replace BASE_PATH on assets
+            workingDirectory: $(Build.SourcesDirectory)/src/Umbraco.Web.UI.New.Client/storybook-static
           - task: ArchiveFiles@2
             displayName: Archive js Docs
             inputs:
-              rootFolderOrFile: $(Build.SourcesDirectory)/src/Umbraco.Web.UI.Docs/api
+              rootFolderOrFile: $(Build.SourcesDirectory)/src/Umbraco.Web.UI.New.Client/storybook-static
               includeRootFolder: false
               archiveFile: $(Build.ArtifactStagingDirectory)/ui-docs.zip
           - task: PublishPipelineArtifact@1
@@ -540,7 +552,7 @@ stages:
     displayName: Upload API Documention
     dependsOn:
       - Build
-      - Deploy_NuGet
+      - Build_Docs
     condition: and(succeeded(), or(startsWith(variables['Build.SourceBranch'], 'refs/heads/release/'), ${{parameters.uploadApiDocs}}))
     jobs:
       - job:

src/Umbraco.Web.UI.Docs/README.md

@@ -1,14 +0,0 @@
-# Umbraco Backoffice UI API Documentation
-
-This project builds the documentation for the UI of the Umbraco backoffice, it is published on Our Umbraco in the "Reference" section of the documentation.
-
-In order to build the documentation, please follow the following two steps:
-
-```
-npm ci
-npx gulp docs
-```
-
-After this, you should have an `api` directory which contains index.html. 
-
-In order to check if the documentation works properly, you would need to run the `api` directory in a webserver. On Windows, this can be accomplished by opening the `api` directory in [Visual Studio Code](https://code.visualstudio.com/) and running it with the [IIS Express plugin](https://marketplace.visualstudio.com/items?itemName=warren-buckley.iis-express).

src/Umbraco.Web.UI.Docs/gulpfile.js

@@ -1,66 +0,0 @@
-'use strict';
-
-
-var config = require('../Umbraco.Web.UI.Client/gulp/config');
-var gulp = require('gulp');
-
-var connect = require('gulp-connect');
-var open = require('gulp-open');
-var gulpDocs = require('gulp-ngdocs');
-
-var documentationFiles = ['../Umbraco.Web.UI.Client/src/common/**/*.js', './src/api/**/*.ngdoc'];
-
-/**************************
- * Build Backoffice UI API documentation
- **************************/
-gulp.task('docs', [], function (cb) {
-
-    var options = {
-        html5Mode: false,
-        startPage: '/api',
-        title: "Umbraco 11 Backoffice UI API Documentation",
-        dest: './api',
-        styles: ['./umb-docs.css'],
-        image: "https://our.umbraco.com/assets/images/logo.svg"
-    }
-
-    return gulpDocs.sections({
-        api: {
-            glob: documentationFiles,
-            api: true,
-            title: 'UI API Documentation'
-        }
-    })
-    .pipe(gulpDocs.process(options))
-    .pipe(gulp.dest('./api'))
-    .pipe(connect.reload());
-
-});
-
-gulp.task('connect:docs', function (cb) {
-    connect.server({
-        root: './api',
-        livereload: true,
-        fallback: './api/index.html',
-        port: 8880
-    });
-    cb();
-});
-
-gulp.task('watch:docs', function (cb) {
-    return gulp.watch(documentationFiles, ['docs']);
-});
-
-gulp.task('open:docs', function (cb) {
-
-    var options = {
-        uri: 'http://localhost:8880/index.html'
-    };
-
-    gulp.src(__filename)
-    .pipe(open(options));
-    cb();
-});
-
-gulp.task('watch', ['docs', 'connect:docs', 'open:docs', 'watch:docs']);
-

src/Umbraco.Web.UI.Docs/package.json

@@ -1,18 +0,0 @@
-{
-  "name": "docs",
-  "private": true,
-  "scripts": {
-    "docs": "gulp docs",
-    "start": "gulp docs",
-    "default": "gulp docs",
-    "dev": "gulp watch",
-    "serve": "gulp watch",
-    "watch": "gulp watch"
-  },
-  "devDependencies": {
-    "gulp": "^3.9.1",
-    "gulp-connect": "5.6.1",
-    "gulp-ngdocs": "0.3.0",
-    "gulp-open": "3.0.1"
-  }
-}

src/Umbraco.Web.UI.Docs/umb-docs.css

@@ -1,130 +0,0 @@
-
-html {
-    font-family: 'Segoe UI', Tahoma, Helvetica, sans-serif;
-}
-
-body {
-    font-family: 'Segoe UI', Tahoma, Helvetica, sans-serif;
-}
-
-.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
-    max-width: 1500px;
-    width: 95%;
-}
-
-.span3 {
-    width: 220px;
-    width: calc(90% / 12 * 3);
-}
-
-.span9 {
-    width: 700px;
-    width: calc(90% / 12 * 9);
-}
-
-.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
-    font-family: inherit;
-    font-weight: 400;
-    line-height: 1.1;
-    color: inherit;
-}
-
-a:hover {
-    text-decoration: none;
-    color: rgba(0, 0, 0, .8);
-}
-
-.content p code,
-.content li code {
-    font-size: 85%;
-    font-family: inherit;
-    background-color: #f7f7f9;
-    padding: 0px 3px;
-    border: 1px solid #e1e1e8;
-    color: #d14;
-    white-space: nowrap;
-}
-
-.header img {
-    width: 50px;
-}
-
-.breadcrumb {
-    background-color: #f7f7f7;
-}
-
-.navbar .container{
-    min-height: inherit;
-    display: flex;
-    align-items: center;
-}
-
-.navbar .brand {
-    display: block;
-    color: white;
-    text-shadow: none;
-}
-
-.navbar-fixed-top .navbar-inner {
-    min-height: 50px;
-    background: #3544b1;
-}
-
-.form-search .well {
-    background-color: #f7f7f7;
-}
-
-.form-search > ul.nav > li.module {
-    background-color: #3544b1;
-}
-
-.form-search > ul.nav > li.module a {
-    color: white;
-}
-
-.form-search > ul.nav > li.section {
-    background-color: #ccc;
-}
-
-.nav-list > .active > a, .nav-list > .active > a:hover, .nav-list > .active > a:focus,
-.form-search > .nav-list > .active > a, .form-search > .nav-list > .active > a:hover, .form-search > .nav-list > .active > a:focus {
-    color: #f36f21;
-    text-shadow: none;
-    background-color: inherit;
-}
-
-.form-search > ul.nav > li > a {
-    color: rgba(0,0,0,.8);
-    text-shadow: none;
-}
-
-.form-search > ul.nav > li > a:hover {
-    text-decoration: none;
-    background-color: inherit;
-    text-shadow: none;
-    color: #000;
-}
-
-.form-search > ul.nav > li.module > a:hover{
-    color: #fff;
-}
-
-.close {
-    float: initial;
-    font-size: 14px;
-    font-weight: initial;
-    line-height: 20px;
-    color: #333333;
-    text-shadow: initial;
-    opacity: initial;
-    filter: initial;
-}
-
-.close:hover,
-.close:focus {
-    color: #333333;
-    text-decoration: initial;
-    cursor: initial;
-    opacity: initial;
-    filter: initial;
-}