@simple-reporting/base 0.0.1

package/livingdocs/Titles/title-h4/print.scss

@@ -0,0 +1,34 @@
+@use 'nswow';
+@use 'sass:map';
+
+$numberSize: 50;
+
+$gap: map.get(nswow.$grid-gutter, print, gap);
+$column-gap: map.get(nswow.$grid-gutter, print, column-gap);
+@if not $column-gap {
+  $column-gap: $gap;
+}
+@if not $column-gap {
+  $column-gap: 0;
+}
+
+.srl-title-h4 {
+  > span {
+    position: relative;
+  }
+
+  &__number {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: nswow.system-size-unit($numberSize, in);
+  }
+
+  &__text {
+    display: block;
+    &:not(:first-child) {
+      margin-left: nswow.system-size-unit($numberSize + $column-gap, in);
+    }
+  }
+}

package/livingdocs/Titles/title-h4/title-h4.html

@@ -0,0 +1,26 @@
+<script type="ld-conf">
+  {
+  	"name": "title-h4",
+  	"label": "Title (h4)",
+  	"iconUrl": "https://mms-xbrl.s3.eu-central-1.amazonaws.com/design/svg/editor/icon-h4.min.svg",
+    "properties": [
+      "web-width",
+      "pdf-width"
+    ],
+  	"directives": {
+  		"number": {
+  			"recommendedMaxLength": 6
+  		}
+  	}
+  }
+</script>
+<h4 class="srl-title-h4 srl-article__grid srl-article__grid--indent">
+  <span class="srl-article__grid--inner">
+    <span class="srl-title-h4__number" doc-optional doc-editable="number">
+      1.1.1
+    </span>
+    <span class="srl-title-h4__text" doc-editable="text">
+      Title h4 Lorem ipsum dolor sit amet
+    </span>
+  </span>
+</h4>

package/livingdocs/Titles/title-h4/web.scss

@@ -0,0 +1,27 @@
+@use 'nswow';
+@use 'sass:map';
+
+$numberSize: 50;
+
+.srl-title-h4 {
+  > span {
+    display: flex;
+    flex-wrap: nowrap;
+    @each $breakpoint, $gutter in nswow.$grid-gutter {
+      $gap: map.get($gutter, gap);
+      $column-gap: map.get($gutter, column-gap);
+      @if not $column-gap {
+        $column-gap: $gap;
+      }
+      @if $column-gap {
+        @include nswow.grid-media($breakpoint) {
+          column-gap: nswow.system-size-unit($column-gap);
+        }
+      }
+    }
+  }
+
+  &__number {
+    flex: 0 0 nswow.system-size-unit($numberSize);
+  }
+}

package/livingdocs/Titles/title-h4/word.scss

@@ -0,0 +1 @@
+@use 'print';

package/livingdocs/Titles/title-h5/general.scss

@@ -0,0 +1,10 @@
+@use 'nswow';
+
+.srl-title-h5 {
+  color: nswow.colors-shade-800();
+
+  break-before: auto;
+  break-inside: avoid;
+  break-after: auto;
+  @include nswow.typography-headline5(true);
+}

package/livingdocs/Titles/title-h5/title-h5.html

@@ -0,0 +1,16 @@
+<script type="ld-conf">
+  {
+  	"name": "title-h5",
+  	"label": "Title (h5)",
+  	"iconUrl": "https://mms-xbrl.s3.eu-central-1.amazonaws.com/design/svg/editor/icon-h5.min.svg",
+    "properties": [
+      "web-width",
+      "pdf-width"
+    ]
+  }
+</script>
+<h5 class="srl-title-h5 srl-article__grid srl-article__grid--indent">
+  <span class="srl-article__grid--inner" doc-editable="text">
+    Title h5 Lorem ipsum dolor sit amet
+  </span>
+</h5>

package/livingdocs/Titles/title-h6/general.scss

@@ -0,0 +1,10 @@
+@use 'nswow';
+
+.srl-title-h6 {
+  color: nswow.colors-shade-800();
+
+  break-before: auto;
+  break-inside: avoid;
+  break-after: auto;
+  @include nswow.typography-headline6(true);
+}

package/livingdocs/Titles/title-h6/title-h6.html

@@ -0,0 +1,16 @@
+<script type="ld-conf">
+  {
+  	"name": "title-h6",
+  	"label": "Title (h6)",
+  	"iconUrl": "https://mms-xbrl.s3.eu-central-1.amazonaws.com/design/svg/editor/icon-h6.min.svg",
+    "properties": [
+      "web-width",
+      "pdf-width"
+    ]
+  }
+</script>
+<h6 class="lc-title-h6 srl-article__grid srl-article__grid--indent">
+  <span class="srl-article__grid--inner" doc-editable="text">
+    Title h6 Lorem ipsum dolor sit amet
+  </span>
+</h6>

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@simple-reporting/base",
+  "version": "0.0.1",
+  "description": "Manage nswow templates, build and publish",
+  "bin": {
+    "nswow": "cli.js"
+  },
+  "engines": {
+    "node": ">=22.12.0",
+    "npm": ">=10.9.0"
+  },
+  "type": "module",
+  "scripts": {
+    "preparePublish": "node preparePublish.cjs && prettier --write --list-different .",
+    "lint": "prettier --check .",
+    "lint:fix": "prettier --write ."
+  },
+  "main": "cli.js",
+  "dependencies": {
+    "@kne/color-palette": "^0.1.0",
+    "archiver": "^7.0.1",
+    "cheerio": "^1.0.0",
+    "colors": "^1.4.0",
+    "commander": "^11.1.0",
+    "enquirer": "^2.4.1",
+    "fs": "^0.0.1-security",
+    "fs-extra": "^11.2.0",
+    "glob": "^10.4.5",
+    "globby": "^13.2.2",
+    "html-minifier": "^4.0.0",
+    "lodash": "^4.17.21",
+    "modern-css-reset": "^1.4.0",
+    "vite": "^5.4.11",
+    "winston": "^3.17.0",
+    "write-json": "^3.0.1"
+  },
+  "keywords": [
+    "scss",
+    "grid",
+    "fonts",
+    "typography",
+    "colors"
+  ],
+  "author": "Michael Dörer",
+  "license": "ISC",
+  "devDependencies": {
+    "prettier": "^3.4.2",
+    "typescript": "^5.7.2"
+  }
+}

package/preparePublish.cjs

@@ -0,0 +1,95 @@
+const { resolve } = require('node:path');
+const { readFileSync, writeFileSync, rmSync } = require('node:fs');
+const { globSync } = require('glob');
+const writeJson = require('write-json');
+const ts = require('typescript');
+const enquirer = require('enquirer');
+const { Input } = enquirer;
+const { exec } = require('child_process');
+
+function getPackageVersion(packageName) {
+  return new Promise((resolve, reject) => {
+    exec(`npm list ${packageName} --json`, (error, stdout, stderr) => {
+      const jsonOutput = JSON.parse(stdout);
+      resolve(jsonOutput.version);
+    });
+  });
+}
+
+async function compile(fileNames, options) {
+  // Create a Program with an in-memory emit
+  const createdFiles = {};
+  const host = ts.createCompilerHost(options);
+  host.writeFile = (fileName, contents) => (createdFiles[fileName] = contents);
+
+  // Prepare and emit the d.ts files
+  const program = ts.createProgram(fileNames, options, host);
+  program.emit();
+
+  for (file in createdFiles) {
+    const content = createdFiles[file];
+    await writeFileSync(file, content);
+  }
+}
+
+async function action() {
+  const nswowVersion = await getPackageVersion('@simple-reporting/base');
+
+  const writeJson = require('write-json');
+  const { globSync } = require('glob');
+
+  const currentVersion = nswowVersion.split('.');
+  let major = parseInt(currentVersion[0]);
+  let minor = parseInt(currentVersion[1]);
+  let patch = parseInt(currentVersion[2]);
+
+  if (process.argv.includes('major')) {
+    major++;
+    minor = 0;
+    patch = 0;
+  } else if (process.argv.includes('minor')) {
+    minor++;
+    patch = 0;
+  } else {
+    patch++;
+  }
+
+  let version = `${major}.${minor}.${patch}`;
+
+  const prompt = new Input({
+    message: 'Package version',
+    initial: version,
+  });
+  version = await prompt.run();
+
+  if (version) {
+    const packageJson = JSON.parse(
+      await readFileSync(resolve(process.cwd(), './package.json')),
+    );
+    packageJson.version = version;
+    await writeJson(resolve(process.cwd(), './package.json'), packageJson);
+
+    const devJson = JSON.parse(
+      await readFileSync(resolve(process.cwd(), './dev/package.json')),
+    );
+    devJson.devDependencies['@simple-reporting/base'] = `^${version}`;
+    await writeJson(resolve(process.cwd(), './dev/package.json'), devJson);
+  }
+
+  const typescriptFiles = await globSync(
+    resolve(process.cwd(), './scripts/**/*.d.ts'),
+  );
+  for (let i = 0; i < typescriptFiles.length; i++) {
+    await rmSync(typescriptFiles[i]);
+  }
+
+  const jsFiles = await globSync(resolve(process.cwd(), './scripts/**/*.js'));
+
+  await compile(jsFiles, {
+    allowJs: true,
+    declaration: true,
+    emitDeclarationOnly: true,
+  });
+}
+
+action();

package/scripts/beaver.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Generates configuration files for nswow.
+ * @param {number} [verbose=0] - The verbosity level. Default is 0.
+ * @returns {Promise<void>} - A promise that resolves once the files have been generated.
+ */
+export function beaver(verbose?: number): Promise<void>;

package/scripts/beaver.js

@@ -0,0 +1,316 @@
+import { writeFileSync, readFileSync } from 'node:fs';
+import { resolve, relative } from 'node:path';
+import { colors } from './colors.js';
+import { readNsWowJson } from './utils.js';
+import colorPalette from '@kne/color-palette';
+/**
+ * Maps the values of an object or array recursively.
+ *
+ * @param {Object|Array} values - The object or array of values to map.
+ * @returns {Object|Array} - The mapped object or array.
+ */
+function mapValues(values) {
+  let r = {};
+  if (Array.isArray(values)) {
+    for (let x = 0; x < values.length; x++) {
+      if (typeof values[x].name === 'undefined') {
+        if (!Array.isArray(r)) {
+          r = [];
+        }
+        r.push(mapValues(values[x]));
+      } else {
+        r[values[x].name] = mapValues(values[x]);
+      }
+    }
+  } else if (typeof values === 'object') {
+    for (const label in values) {
+      if (label !== 'name') {
+        r[label] = mapValues(values[label]);
+      }
+    }
+  } else {
+    if (values === '') {
+      return `""`;
+    }
+    return values;
+  }
+  return r;
+}
+
+/**
+ * Generates SCSS code to import and write typography mixins.
+ *
+ * @param {Object} typography - The typography configuration object.
+ * @param {Object} typography.typography - The typography mixin definitions.
+ * @returns {string} - The generated SCSS code.
+ */
+function writeTypographyScss(typography) {
+  let r = [`@use "config";`, `@forward "@simple-reporting/base/scss/typography";`];
+  if (typography) {
+    if (typography.typography) {
+      let o = [];
+
+      for (const typo in typography.typography) {
+        o.push(`@mixin ${typo}($margins: false) {`);
+        o.push(`  @include typography.get("${typo}", $margins);`);
+        o.push(`}\n`);
+      }
+      if (o.length) {
+        r.push(`@use "@simple-reporting/base/scss/typography";\n`);
+        r.push(o.join(`\n`));
+      }
+    }
+  }
+  return r.join(`\n`);
+}
+
+/**
+ * Writes SCSS code for importing and forwarding colors from a config file.
+ *
+ * @param {Object} colors - The colors object containing color keys and their values.
+ * @returns {string} - The SCSS code for importing and forwarding colors.
+ */
+function writeColorsScss(colors) {
+  let r = [`@use "config";`, `@forward "@simple-reporting/base/scss/colors";`];
+  if (colors) {
+    if (colors.colors) {
+      let o = [];
+
+      for (const color in colors.colors) {
+        o.push(`@function ${color}() {`);
+        o.push(`  @return colors.get("${color}");`);
+        o.push(`}\n`);
+      }
+
+      if (o.length) {
+        r.push(`@use "@simple-reporting/base/scss/colors";\n`);
+        r.push(o.join(`\n`));
+      }
+    }
+  }
+  return r.join(`\n`);
+}
+
+/**
+ * Checks if there are any commas outside of parentheses in the given text.
+ *
+ * @param {string} text - The text to be checked.
+ * @return {boolean} - True if there is at least one comma outside of parentheses, false otherwise.
+ */
+function hasCommasOutsideOfParentheses(text) {
+  let depth = 0;
+  for (let char of text) {
+    if (char === '(') depth++;
+    else if (char === ')') depth--;
+    else if (char === ',' && depth === 0) return true;
+  }
+  return false;
+}
+
+/**
+ * Determines if there are points outside of parentheses in the given text.
+ *
+ * @param {string} text - The text to check.
+ * @return {boolean} - True if there are points outside of parentheses, false otherwise.
+ */
+function hasPointsOutsideOfParentheses(text) {
+  let depth = 0;
+  for (let char of text) {
+    if (char === '(') depth++;
+    else if (char === ')') depth--;
+    else if (char === '.' && depth === 0) return true;
+  }
+  return false;
+}
+
+/**
+ * Converts a JavaScript object into SCSS variables.
+ *
+ * @param {object} values - The JavaScript object containing the variable names and values.
+ * @param {number} indent - The number of spaces to indent each line of the generated SCSS. Default is 2.
+ * @returns {string} - The SCSS variables as a string.
+ */
+function makeScssVariables(values, indent = 2) {
+  let r = [];
+  if (typeof values === 'object') {
+    r.push(`(`);
+    let v = [];
+    for (const variables in values) {
+      if (Array.isArray(values)) {
+        v.push(
+          `${' '.repeat(indent + 2)}var${variables}: ${makeScssVariables(values[variables], indent + 2)}`,
+        );
+      } else {
+        v.push(
+          `${' '.repeat(indent + 2)}${variables}: ${makeScssVariables(values[variables], indent + 2)}`,
+        );
+      }
+    }
+    r.push(v.join(`,\n`));
+    r.push(`${' '.repeat(indent)})`);
+  } else {
+    if (
+      typeof values === 'string' &&
+      values !== `""` &&
+      (hasPointsOutsideOfParentheses(values) ||
+        hasCommasOutsideOfParentheses(values))
+    ) {
+      values = `\"${values.replaceAll('"', '\\"')}\"`;
+    }
+    return values;
+  }
+  return r.join(`\n`);
+}
+
+/**
+ * Generates configuration files for nswow.
+ * @param {number} [verbose=0] - The verbosity level. Default is 0.
+ * @returns {Promise<void>} - A promise that resolves once the files have been generated.
+ */
+async function beaver(verbose = 0) {
+  const configJson = await readNsWowJson();
+  const nswowPath = resolve(process.cwd(), './nswow');
+
+  if (typeof verbose === 'boolean') {
+    verbose = verbose ? 1 : 0;
+  }
+
+  if (typeof configJson.system === 'undefined') {
+    configJson.system = {};
+  }
+
+  if (typeof configJson.system.environment === 'undefined') {
+    configJson.system.environment = process.env.NODE_ENV;
+  }
+
+  if (typeof configJson.fonts !== 'undefined') {
+    const fontBasePath = configJson.fonts['font-base-path'] ?? '';
+    if (fontBasePath.length) {
+      configJson.fonts['font-base-path'] = '.' + 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 font === 'string') {
+          configJson.fonts.fonts[x] = JSON.parse(
+            readFileSync(
+              resolve(process.cwd(), `${fontBasePath}/${font}/styles.json`),
+            ),
+          );
+        }
+      }
+    }
+  }
+
+  const map = {};
+
+  for (const file in configJson) {
+    map[file] = {};
+    for (const variable in configJson[file]) {
+      map[file][variable] = mapValues(configJson[file][variable]);
+    }
+  }
+
+  if (map?.colors?.colors?.shade) {
+    const shade = map.colors.colors.shade.color;
+    if (!map.colors.colors['shade-50']) {
+      map.colors.colors['shade-50'] = { color: colorPalette(shade, 0.5) };
+    }
+    if (!map.colors.colors['shade-100']) {
+      map.colors.colors['shade-100'] = { color: colorPalette(shade, 1) };
+    }
+    if (!map.colors.colors['shade-200']) {
+      map.colors.colors['shade-200'] = { color: colorPalette(shade, 2) };
+    }
+    if (!map.colors.colors['shade-300']) {
+      map.colors.colors['shade-300'] = { color: colorPalette(shade, 3) };
+    }
+    if (!map.colors.colors['shade-400']) {
+      map.colors.colors['shade-400'] = { color: colorPalette(shade, 4) };
+    }
+    if (!map.colors.colors['shade-500']) {
+      map.colors.colors['shade-500'] = { color: colorPalette(shade, 5) };
+    }
+    if (!map.colors.colors['shade-600']) {
+      map.colors.colors['shade-600'] = { color: colorPalette(shade, 6) };
+    }
+    if (!map.colors.colors['shade-700']) {
+      map.colors.colors['shade-700'] = { color: colorPalette(shade, 7) };
+    }
+    if (!map.colors.colors['shade-800']) {
+      map.colors.colors['shade-800'] = { color: colorPalette(shade, 8) };
+    }
+    if (!map.colors.colors['shade-900']) {
+      map.colors.colors['shade-900'] = { color: colorPalette(shade, 9) };
+    }
+    if (!map.colors.colors['shade-950']) {
+      map.colors.colors['shade-950'] = { color: colorPalette(shade, 9.5) };
+    }
+  }
+
+  let configOutput = [];
+  [
+    'system',
+    'fonts',
+    'meta',
+    'grid',
+    'colors',
+    'typography',
+    'spacer',
+    'helpers',
+  ].forEach((file) => {
+    if (typeof map[file] !== 'undefined') {
+      const o = [];
+      o.push(
+        `@use "@simple-reporting/base/scss/${file}/variables.scss" as ${file}Variables with (`,
+      );
+      let v = [];
+      for (const variable in map[file]) {
+        v.push(`  $${variable}: ${makeScssVariables(map[file][variable])}`);
+      }
+      o.push(v.join(`,\n`));
+      o.push(');\n');
+      configOutput.push(o.join(`\n`));
+    }
+  });
+
+  configOutput = configOutput.join(`\n`);
+  const configFile = `${nswowPath}/config.scss`;
+  writeFileSync(configFile, configOutput);
+
+  const typographyFile = `${nswowPath}/typography.scss`;
+  const typographyOutput = writeTypographyScss(map.typography);
+  writeFileSync(typographyFile, typographyOutput);
+
+  const colorsFile = `${nswowPath}/colors.scss`;
+  const colorsOutput = writeColorsScss(map.colors);
+  writeFileSync(colorsFile, colorsOutput);
+
+  if (verbose > 0) {
+    console.log(colors.info(`\nThe following files has been written.\n`));
+
+    console.log(
+      colors.bgWhite(colors.file(relative(process.cwd(), configFile))),
+    );
+    if (verbose > 1) {
+      console.log(colors.prompt(`\n` + configOutput + `\n`));
+    }
+
+    console.log(
+      colors.bgWhite(colors.file(relative(process.cwd(), typographyFile))),
+    );
+    if (verbose > 1) {
+      console.log(colors.prompt(`\n` + typographyOutput + `\n`));
+    }
+
+    console.log(
+      colors.bgWhite(colors.file(relative(process.cwd(), colorsFile))),
+    );
+    if (verbose > 1) {
+      console.log(colors.prompt(`\n` + colorsOutput + `\n`));
+    }
+    console.log('');
+  }
+}
+
+export { beaver };

package/scripts/build.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Builds the project sequentially by executing a series of asynchronous tasks in a specific order.
+ * This method is used to build the project in a predetermined sequence.
+ *
+ * @return {Promise<void>} A Promise that resolves when the build process is completed or rejects if an error occurs.
+ */
+export function build(): Promise<void>;
+/**
+ * Builds the project sequentially by executing a series of asynchronous tasks in a specific order.
+ * This method is used to build the project in a predetermined sequence.
+ *
+ * @return {Promise<void>} A Promise that resolves when the build process is completed or rejects if an error occurs.
+ */
+export function ddev(): Promise<void>;
+/**
+ * Maps the SCSS files and the LDD files in the project.
+ *
+ * @async
+ * @function map
+ * @returns {Promise<boolean>} A promise that resolves after successfully mapping the files.
+ * @throws {Error} If there is an error during the mapping process.
+ */
+export function map(): Promise<boolean>;
+/**
+ * Maps SCSS files and generates import statements for different output files.
+ *
+ * @returns {Promise<boolean>} Returns a promise that resolves to true if the SCSS mapping is successful, and false if there's an error.
+ */
+export function mapScss(): Promise<boolean>;
+/**
+ * Maps the livingdocs properties to components and groups.
+ *
+ * @returns {Promise<boolean>} Returns a promise that resolves to a boolean indicating the success or failure of the mapping.
+ */
+export function mapLdd(): Promise<boolean>;
+/**
+ * This function asynchronously maps JavaScript files and imports them into specific files.
+ * @returns {Promise<boolean>} - A promise that resolves to true if the mapping and importing is successful.
+ */
+export function mapJs(): Promise<boolean>;