@simple-reporting/base 1.0.23 → 1.0.24

package/dev/index.html

@@ -12,7 +12,7 @@
       >this page requires javascript to work properly. please enable javascript in your
       browser</noscript
     >
-    <div id="app" class="slr-page"></div>
+    <div id="app" class="srl-page"></div>
     <script type="module" src="src/entries/main.ts"></script>
   </body>
 </html>

package/dev/livingdocs.config.json

@@ -110,24 +110,24 @@
       "identifier": "wp_cf_prettyTitle",
       "type": "text",
       "matches": [
-        "title-h1.title-h1-text",
+        "title-h1.title-h1",
         "title-h2.title-h2-text",
         "title-h3.title-h3-text",
         "title-h4.title-h4-text",
-        "title-h5.title-h5-text",
-        "title-h6.title-h6-text"
+        "title-h5.title-h5",
+        "title-h6.title-h6"
       ]
     },
     {
       "identifier": "menuTitle",
       "type": "text",
       "matches": [
-        "title-h1.title-h1-text",
+        "title-h1.title-h1",
         "title-h2.title-h2-text",
         "title-h3.title-h3-text",
         "title-h4.title-h4-text",
-        "title-h5.title-h5-text",
-        "title-h6.title-h6-text"
+        "title-h5.title-h5",
+        "title-h6.title-h6"
       ]
     },
     {

package/dev/package.json

@@ -19,7 +19,7 @@
     "postinstall": "srl prepare"
   },
   "dependencies": {
-    "@simple-reporting/base": "^1.0.23",
+    "@simple-reporting/base": "^1.0.24",
     "axios": "^1.12.2",
     "chalk": "^5.6.2",
     "exceljs": "^4.4.0",

package/dev/src/Dialog.vue

@@ -57,6 +57,9 @@ body:has(.srl-page__dialog[open]) {
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.3s;
+  position: fixed;
+  inset: 0;
+  margin: 10vh auto 0;
 
   &::backdrop {
     background-color: rgba(0, 0, 0, 0.3);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simple-reporting/base",
-  "version": "1.0.23",
+  "version": "1.0.24",
   "description": "Manage srl templates, build and publish",
   "bin": {
     "srl": "cli.js"
@@ -22,6 +22,7 @@
     "chalk": "^5.6.2",
     "colors": "^1.4.0",
     "commander": "^11.1.0",
+    "dotenv": "^17.2.3",
     "enquirer": "^2.4.1",
     "fs": "^0.0.1-security",
     "fs-extra": "^11.3.2",

package/scripts/beaver.js

@@ -1,9 +1,11 @@
 import { writeFileSync, readFileSync } from 'node:fs';
 import path from 'node:path/posix';
 import { colors } from './colors.js';
-import { readNsWowJson } from './utils.js';
+import { readNsWowJson, deepAssign } from './utils.js';
 import colorPalette from '@kne/color-palette';
 import folders from './folders.js';
+import { buildVariables } from "./build/variables.js";
+
 /**
  * Maps the values of an object or array recursively.
  *
@@ -176,24 +178,18 @@ async function beaver(verbose = 0) {
     verbose = verbose ? 1 : 0;
   }
 
-  if (typeof configJson.system === 'undefined') {
-    configJson.system = {};
-  }
-
-  if (typeof configJson.system.environment === 'undefined') {
-    configJson.system.environment = process.env.NODE_ENV;
-  }
+  const configAssigned = deepAssign(configJson, buildVariables);
 
-  if (typeof configJson.fonts !== 'undefined') {
-    const fontBasePath = configJson.fonts['font-base-path'] ?? '';
+  if (typeof configAssigned.fonts !== 'undefined') {
+    const fontBasePath = configAssigned.fonts['font-base-path'] ?? '';
     if (fontBasePath.length) {
-      configJson.fonts['font-base-path'] = '.' + path.normalize(fontBasePath);
+      configAssigned.fonts['font-base-path'] = '.' + path.normalize(fontBasePath);
     }
-    if (typeof configJson.fonts.fonts !== 'undefined') {
-      for (let x = 0; x < configJson.fonts.fonts.length; x++) {
-        let font = configJson.fonts.fonts[x];
+    if (typeof configAssigned.fonts.fonts !== 'undefined') {
+      for (let x = 0; x < configAssigned.fonts.fonts.length; x++) {
+        let font = configAssigned.fonts.fonts[x];
         if (typeof font === 'string') {
-          configJson.fonts.fonts[x] = JSON.parse(
+          configAssigned.fonts.fonts[x] = JSON.parse(
             readFileSync(
               path.join(process.cwd(), fontBasePath, font, 'styles.json'),
             ),
@@ -205,10 +201,10 @@ async function beaver(verbose = 0) {
 
   const map = {};
 
-  for (const file in configJson) {
+  for (const file in configAssigned) {
     map[file] = {};
-    for (const variable in configJson[file]) {
-      map[file][variable] = mapValues(configJson[file][variable]);
+    for (const variable in configAssigned[file]) {
+      map[file][variable] = mapValues(configAssigned[file][variable]);
     }
   }
 

package/scripts/build/variables.d.ts

@@ -0,0 +1,6 @@
+export namespace buildVariables {
+    namespace system {
+        let environment: string;
+        let build: string;
+    }
+}

package/scripts/build/variables.js

@@ -0,0 +1,6 @@
+export const buildVariables = {
+    system: {
+        environment: 'development',
+        build: 'app',
+    }
+}

package/scripts/build.js

@@ -24,6 +24,8 @@ import folders from './folders.js';
 import { mapLdd } from './ldd/mapLdd.js';
 import { LivingdocsDesignValidator } from './ldd/LivingdocsDesignValidator.js';
 import { camelCase } from './utils.js';
+import { buildVariables } from "./build/variables.js";
+import './dotenv.js';
 
 const placeholderId = '6297EAFB-33A0-48B8-8D64-E61CDC3E9035';
 const nswowPath = folders.srlImports;
@@ -84,6 +86,10 @@ async function cleanOutput() {
  */
 async function buildApp() {
   console.log("\n\nBuild application");
+  buildVariables.system.environment = 'production';
+  buildVariables.system.build = 'app';
+  buildVariables.system['size-unit'] = 'rem';
+  
   await checkFolders();
   const build = await viteBuild({
     build: {
@@ -101,7 +107,7 @@ async function buildApp() {
 
   // Copy public folder exclude nswow folders
   console.log(
-    '\n\nCopy public folder exclude nswow folders and exclude folder',
+    '\n\nCopy public folder exclude nswow folders and assets, template, exclude folder and index.html',
   );
   await cpSync(join(folders.srlPublic, '/'), join(outputPath, 'app'), {
     filter: (src) => {
@@ -110,7 +116,10 @@ async function buildApp() {
         src.startsWith(join(folders.srlPublic, 'html')) ||
         src.startsWith(join(folders.srlPublic, 'images')) ||
         src.startsWith(join(folders.srlPublic, 'json')) ||
-        src.startsWith(join(folders.srlPublic, 'exclude'))
+        src.startsWith(join(folders.srlPublic, 'exclude')) ||
+        src.startsWith(join(folders.srlPublic, 'assets')) ||
+        src.startsWith(join(folders.srlPublic, 'template')) ||
+        src.startsWith(join(folders.srlPublic, 'index.html'))
       ) {
         return false;
       } else {
@@ -144,9 +153,7 @@ async function buildApp() {
   index = index.replace(
     /(<div\s+[^>]*id\s*=\s*["']app["'][^>]*>)([\s\S]*?)(<\/div>)/i,
     `$1
-      <template>
-        [[content-${placeholderId}]]
-      </template>
+      [[content-${placeholderId}]]
     $3`,
   );
 
@@ -192,6 +199,10 @@ async function buildApp() {
  */
 async function buildDDev() {
   console.log("\n\nBuild application for DDEV");
+  buildVariables.system.environment = 'production';
+  buildVariables.system.build = 'app';
+  buildVariables.system['size-unit'] = 'rem';
+
   await checkFolders();
   const build = await viteBuild({
     build: {
@@ -280,6 +291,10 @@ async function zipLdd() {
  */
 async function buildPdf() {
   console.log("\n\nBuild PDF");
+  buildVariables.system.environment = 'production';
+  buildVariables.system.build = 'pdf';
+  buildVariables.system['size-unit'] = 'rem';
+
   await checkFolders();
 
   const config = {
@@ -312,6 +327,10 @@ async function buildPdf() {
 
 async function buildXbrl() {
   console.log("\n\nBuild XBRL");
+  buildVariables.system.environment = 'production';
+  buildVariables.system.build = 'xbrl';
+  buildVariables.system['size-unit'] = 'rem';
+
   await checkFolders();
 
   const config = {
@@ -351,6 +370,10 @@ async function buildXbrl() {
  */
 async function buildLdd(version) {
   console.log("\n\nBuild Livingdocs");
+  buildVariables.system.environment = 'production';
+  buildVariables.system.build = 'ldd';
+  buildVariables.system['size-unit'] = 'rem';
+
   await checkFolders();
   await mapLdd();
 
@@ -478,7 +501,7 @@ async function buildLdd(version) {
 }
 
 async function buildPdfCustomer(customer) {
-
+  const internalLddUrl = process.env.INTERNAL_LDD_URL ?? nsWowInternalLddUrl;
   const customersDir = join(folders.root, 'pdf', 'customers');
 
   if (customer === 'all') {
@@ -594,7 +617,7 @@ async function buildPdfCustomer(customer) {
 
     const pdfXmlStart = `<configuration xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">\n`;
     const pdfXmlEnd = `\n</configuration>`;
-    const nsWowUrl = `${nsWowInternalLddUrl}/${lddJson.name}/${lddJson.version}/pdf`;
+    const nsWowUrl = `${internalLddUrl}/${lddJson.name}/${lddJson.version}/pdf`;
 
     const pdfConfig = [];
     cssReferences.forEach( p => {
@@ -640,6 +663,9 @@ async function buildPdfCustomer(customer) {
  */
 async function buildWord() {
   console.log("\n\nBuild Word");
+  buildVariables.system.environment = 'production';
+  buildVariables.system.build = 'word';
+  buildVariables.system['size-unit'] = 'pt';
   await checkFolders();
 
   const config = {
@@ -740,16 +766,32 @@ function cleanupScssAlias(string) {
 async function mapScss() {
   await checkFolders();
   try {
+    const internalLddUrl = process.env.INTERNAL_LDD_URL ?? nsWowInternalLddUrl;
     const packageJson = await readPackageJson();
 
     const relativePathToRoot = join('..', '..', '/');
 
     const output = {
-      app: [],
-      ldd: [],
-      pdf: [],
-      word: [],
-      xbrl: [],
+      app: [
+          `"../../srl/config" as *`,
+          `"@simple-reporting/base/scss/init-root.scss" as *`
+      ],
+      ldd: [
+            `"../../srl/config" as *`,
+          `"@simple-reporting/base/scss/init-root.scss" as *`
+      ],
+      pdf: [
+          `"../../srl/config" as *`,
+          `"@simple-reporting/base/scss/init-root.scss" as *`
+      ],
+      word: [
+          `"../../srl/config" as *`,
+          `"@simple-reporting/base/scss/init-root.scss" as *`
+      ],
+      xbrl: [
+          `"../../srl/config" as *`,
+          `"@simple-reporting/base/scss/init-root.scss" as *`
+      ],
     };
 
     const fontFiles = await glob(join(folders.srlAssets, 'fonts', '**', '*.scss'), {
@@ -759,7 +801,7 @@ async function mapScss() {
     const fontsOutput = []
 
     if (fontFiles.length) {
-      fontsOutput.push(`@import "${nsWowInternalLddUrl}/${packageJson.name}/${packageJson.version}/fonts/style.css";`);
+      fontsOutput.push(`@import "${internalLddUrl}/${packageJson.name}/${packageJson.version}/fonts/style.css";`);
       fontFiles.forEach(f => {
         output.app.push(`"${relativePathToRoot}${f.relativePosix()}" as *`);
         output.xbrl.push(`"${relativePathToRoot}${f.relativePosix()}" as *`);
@@ -908,9 +950,7 @@ async function mapScss() {
 
     await writeFileSync(
       join(folders.srlImports, 'xbrl.scss'),
-      output.xbrl.length
-        ? `@use ` + output.xbrl.join(`;\n@use `)
-        : `;\n` + `;\n@use "@simple-reporting/base/scss/xbrl-core-styles.scss" as *;\n`,
+      `@use ` + output.xbrl.join(`;\n@use `) + `;\n@use "@simple-reporting/base/scss/xbrl-core-styles.scss" as *;\n`,
     );
 
     return true;

package/scripts/dotenv.d.ts

@@ -0,0 +1 @@
+export {};

package/scripts/dotenv.js

@@ -0,0 +1,8 @@
+import dotenv from 'dotenv'
+import folders from './folders.js';
+import { join } from 'node:path/posix';
+
+dotenv.config({quiet: true, path: join(folders.root, '.env.nswow')});
+dotenv.config({quiet: true, path: join(folders.root, '.env.production.local')});
+dotenv.config({quiet: true, path: join(folders.root, '.env.production')});
+dotenv.config({quiet: true});

package/scripts/init.js

@@ -58,7 +58,7 @@ async function init(folder, options) {
 
       await writeFileSync(
         `${projectPath}/.gitignore`,
-        `/.output/\n/.srl/\n/node_modules/\n/public/downloads/\n/public/html/\n/public/images/\n/public/json/\n/public/exclude/\n/dev-dist/\n/.DS_Store\n/.idea`,
+        `/.output/\n/.srl/\n/node_modules/\n/public/downloads/\n/public/html/\n/public/images/\n/public/json/\n/public/exclude/\n/dev-dist/\n/.DS_Store\n/.idea\n/**/*.lcoal\n`,
       );
       console.log(`Project has created`);
       console.log(`cd ${folder}`);

package/scripts/ldd/mapLdd.js

@@ -141,7 +141,7 @@ async function mapComponents(lddJson) {
     components.forEach((component) => {
       // ldd static component
       try {
-        const htmlFile =  globSync(join(groupPath, component, '*.html'));
+        const htmlFile =  globSync(join(groupPath, component, '*.html'), { posix: true });
         if (htmlFile.length) {
           const htmlPath = htmlFile[0];
           const ldConfPath = join(groupPath, component, `ld-conf.json`);
@@ -164,7 +164,7 @@ async function mapComponents(lddJson) {
 
       //   vue async component
       try {
-        const vueFiles = globSync(join(groupPath, component, '*.vue'));
+        const vueFiles = globSync(join(groupPath, component, '*.vue'), { posix: true });
         if (vueFiles.length) {
           vueFiles.forEach( c => {
             const vueFile = c.split('/').pop();

package/scripts/utils.d.ts

@@ -61,4 +61,5 @@ export function camelCase(str: string): string;
  * @returns {Promise<string>} The package version.
  */
 export function getPackageVersion(packageName: string): Promise<string>;
+export function deepAssign(target: any, ...sources: any[]): any;
 export { writeJson };

package/scripts/utils.js

@@ -146,6 +146,27 @@ function getPackageVersion(packageName) {
   });
 }
 
+function deepAssign(target, ...sources) {
+    for (const source of sources) {
+        if (typeof source !== 'object' || source === null) continue;
+        for (const key of Object.keys(source)) {
+            if (
+                typeof source[key] === 'object' &&
+                source[key] !== null &&
+                !Array.isArray(source[key])
+            ) {
+                if (!target[key] || typeof target[key] !== 'object') {
+                    target[key] = {};
+                }
+                deepAssign(target[key], source[key]);
+            } else {
+                target[key] = source[key];
+            }
+        }
+    }
+    return target;
+}
+
 export {
   writeJson,
   lddGroupNames,
@@ -160,4 +181,5 @@ export {
   writeNsWowJson,
   camelCase,
   getPackageVersion,
+  deepAssign,
 };

package/scss/colors/functions.scss

@@ -2,17 +2,9 @@
 @use 'variables';
 @use '../system';
 
-@function get($colorName, $media: false) {
+@function get($colorName) {
   @if not map.has-key(variables.$colors, $colorName) {
     @error "Invalid color \"#{$colorName}\" specified! Choose one of #{map.keys(variables.$colors)}";
   }
-
-  @if $media {
-    @return var(
-      --#{variables.$variable-prefix}color-#{$colorName}-#{$media},
-      var(--#{variables.$variable-prefix}color-#{$colorName})
-    );
-  }
-
-  @return var(--#{variables.$variable-prefix}color-#{$colorName});
+  @return system.root-style(#{variables.$variable-prefix}color-#{$colorName});
 }

package/scss/colors/mixins.scss

@@ -4,24 +4,6 @@
 @use 'functions';
 @use '../system';
 
-@mixin set($colorName, $value, $media: false) {
-  @if not map.has-key(variables.$colors, $colorName) {
-    @error "Invalid color \"#{$colorName}\" specified! Choose one of #{map.keys(variables.$colors)}";
-  }
-  @if $media {
-    --#{variables.$variable-prefix}color-#{"" + $colorName}-#{$media}: #{$value};
-  } @else {
-    --#{variables.$variable-prefix}color-#{"" + $colorName}: #{$value};
-  }
-}
-
-@each $colorName, $colors in variables.$colors {
-  @include system.add-root-style(
-    #{variables.$variable-prefix}color-#{'' + $colorName},
-    map.get($colors, color)
-  );
-}
-
 @mixin core-styles {
   @at-root {
     @each $colorName, $colors in variables.$colors {

package/scss/colors/root.scss

@@ -0,0 +1,10 @@
+@use "variables";
+@use "../system";
+@use "sass:map";
+
+@each $colorName, $colors in variables.$colors {
+  @include system.add-root-style(
+    #{variables.$variable-prefix}color-#{'' + $colorName},
+    map.get($colors, color)
+  );
+}

package/scss/core-styles.scss

@@ -1,6 +1,7 @@
 @use 'config';
 @use 'index';
 @use 'system/root';
+@use "system/variables";
 
 @use 'modern-css-reset';
 
@@ -12,7 +13,9 @@ li {
   margin: 0;
 }
 
-@include root.core-styles;
+@if variables.$build != word {
+  @include root.core-styles;
+}
 @include index.core-styles;
 @include index.system-core-styles;
 @include index.fonts-core-styles;

package/scss/fonts/root.scss

@@ -0,0 +1,4 @@
+@use "variables";
+@use "../system";
+@use "sass:map";
+

package/scss/grid/functions.scss

@@ -1,31 +1,33 @@
 @use 'sass:map';
 @use 'variables';
+@use '../system';
+
 
 @function get-container-max-width() {
-  @return var(--#{variables.$variable-prefix}container-max-width, 0);
+  @return system.root-style(#{variables.$variable-prefix}container-max-width, 0);
 }
 
 @function get-container-padding() {
-  @return var(--#{variables.$variable-prefix}container-padding, 0);
+  @return system.root-style(#{variables.$variable-prefix}container-padding, 0);
 }
 
 @function get-breakpoint($breakpoint) {
   @if not map.has-key(variables.$breakpoints, $breakpoint) {
     @error "Invalid breakpoint for container specified! Choose one of #{map.keys(variables.$breakpoints)}";
   }
-  @return var(--#{variables.$variable-prefix}-breakpoint-#{$breakpoint});
+  @return system.root-style(#{variables.$variable-prefix}-breakpoint-#{$breakpoint});
 }
 
 @function get-gutter-columns() {
-  @return var(--#{variables.$variable-prefix}gutter-columns);
+  @return system.root-style(#{variables.$variable-prefix}gutter-columns);
 }
 
 @function get-gutter-row-gap() {
-  @return var(--#{variables.$variable-prefix}gutter-row-gap);
+  @return system.root-style(#{variables.$variable-prefix}gutter-row-gap);
 }
 
 @function get-gutter-column-gap() {
-  @return var(--#{variables.$variable-prefix}gutter-column-gap);
+  @return system.root-style(#{variables.$variable-prefix}gutter-column-gap);
 }
 
 @function calculate-pdf-col-span-minus-one-gutter($span) {

package/scss/grid/mixins.scss

@@ -160,83 +160,6 @@
   }
 }
 
-@each $breakpoint, $min-width in variables.$breakpoints {
-  $size-unit: false;
-  @if $breakpoint == print {
-    $size-unit: in;
-  }
-
-  @include system.add-root-style(
-    #{variables.$variable-prefix}breakpoint-#{$breakpoint},
-    system.size-unit($min-width, $size-unit)
-  );
-
-  $container: map.get(variables.$containers, $breakpoint);
-
-  $container-max-width: map.get($container, max-width);
-  @if not $container-max-width {
-    $container-max-width: unset;
-  }
-
-  @include system.add-root-style(
-    #{variables.$variable-prefix}container-max-width,
-    system.size-unit($container-max-width, $size-unit),
-    $breakpoint
-  );
-
-  $container-padding: map.get($container, padding);
-  @if not $container-padding {
-    $container-padding: unset;
-  }
-
-  @include system.add-root-style(
-    #{variables.$variable-prefix}container-padding,
-    system.size-unit($container-padding, $size-unit),
-    $breakpoint
-  );
-
-  $gutter: map.get(variables.$gutter, $breakpoint);
-  @if not $gutter {
-    $gutter: (
-      columns: 1,
-    );
-  }
-
-  $columns: map.get(variables.$columns, $breakpoint);
-
-  $gap: map.get($gutter, gap);
-  $row-gap: unset;
-  $column-gap: unset;
-  @if $gap {
-    $row-gap: $gap;
-    $column-gap: $gap;
-  } @else {
-    @if map.has-key($gutter, row-gap) {
-      $row-gap: map.get($gutter, row-gap);
-    }
-    @if map.has-key($gutter, column-gap) {
-      $column-gap: map.get($gutter, column-gap);
-    }
-  }
-
-  @include system.add-root-style(
-    #{variables.$variable-prefix}gutter-columns,
-    $columns,
-    $breakpoint
-  );
-  @include system.add-root-style(
-    #{variables.$variable-prefix}gutter-row-gap,
-    system.size-unit($row-gap, $size-unit),
-    $breakpoint
-  );
-
-  @include system.add-root-style(
-    #{variables.$variable-prefix}gutter-column-gap,
-    system.size-unit($column-gap, $size-unit),
-    $breakpoint
-  );
-}
-
 @mixin pdf-flex-col($span) {
   width: functions.calculate-pdf-col-span-minus-one-gutter($span);
 }