@dialpad/dialtone 7.25.0 → 7.25.1

package/lib/build/js/dialtone_migration_helper/configs/tokens-migration.mjs

@@ -0,0 +1,13 @@
+export default {
+  description:
+    'Updates dialtone 7 variables to dialtone 8 design tokens.\n' +
+    '- Replaces var(--{color}-{stop}) with var(--dt-color-{color}-{stop})\n\t' +
+    'eg. var(--black-200) with var(--dt-color-black-200)',
+  patterns: ['**/*.{css,less,scss,sass,styl,html,vue}'],
+  expressions: [
+    {
+      from: /var\(--(white|black|purple|orange|magenta|gold|green|red|blue|tan)(-[1-9]00)?\)/gi,
+      to: 'var(--dt-color-$1$2)',
+    },
+  ],
+};

package/lib/build/js/dialtone_migration_helper/helpers.mjs

@@ -0,0 +1,214 @@
+import chalk from 'chalk';
+import { globby } from 'globby';
+import inquirer from 'inquirer';
+import path from 'path';
+import fs from 'fs';
+const { readdir, readFile, writeFile } = fs.promises;
+
+// confirm prompt for starting operations, display warning and y/n dialog
+export const confirmStart = () => {
+  return new Promise((resolve, reject) => {
+    inquirer
+      .prompt([
+        {
+          type: 'confirm',
+          name: 'yesno',
+          prefix: `
+${chalk.bgRed(
+  '┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━  !!! CAUTION !!!  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓',
+)}
+${chalk.bgRed(
+  '┃',
+)}  Please be sure you are running this in a code repository where changes can be rolled back.  ${chalk.bgRed(
+            '┃',
+          )}
+${chalk.bgRed(
+  '┃',
+)}          Modifications will occur to files listed above. Proceed at your own risk.           ${chalk.bgRed(
+            '┃',
+          )}
+${chalk.bgRed(
+  '┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛',
+)}\n
+`,
+          message: 'Start modification?',
+          default: true,
+        },
+      ])
+      .then((choice) => {
+        resolve(choice.yesno);
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+};
+
+// return array of all globby pattern matches in one level
+export const doPatternSearch = async (config) => {
+  const res = [];
+  for (const p of config.patterns) {
+    res.push(
+      ...(await getGlob(p, config.globbyConfig).catch((err) => error('doPatternSearch: ' + err))),
+    );
+  }
+  return res;
+};
+
+// error and quit
+export const error = (message) => {
+  console.log(`\n${chalk.red('!!')} Error: ${message}\n`);
+  process.exit(1);
+};
+
+export const findMatchedFiles = async (fileList, config) => {
+  return getAllFileContents(fileList, config.globbyConfig.cwd).then((globbed) => {
+    // filter out minified files
+    const filtered = globbed
+      .filter((f) => {
+        return (f.data.match(/[\n\r]/g) || []).length > 3;
+      })
+      .filter((f) => {
+        config.expressions.forEach((e) => {
+          if (e.from.test(f.data)) f.matches++;
+        });
+        return f.matches > 0;
+      });
+
+    const matchedFiles = filtered.reduce((prev, current) => {
+      const fn = path.relative(config.globbyConfig.cwd, current.file);
+      return [...prev, fn];
+    }, []);
+
+    return matchedFiles;
+  });
+};
+
+// read file contents of all matched files, return filename and data, default matches (0)
+export const getAllFileContents = (fileList, cwd) => {
+  const readPromises = fileList.map(async (file) => {
+    file = cwd + path.sep + file;
+    return readFile(file, 'utf8')
+      .then((data) => {
+        return { file, data, matches: 0 };
+      })
+      .catch((err) => error('getAllFileContents: ' + err));
+  });
+  return Promise.all(readPromises);
+};
+
+// return list of files from path
+export const getConfigFileList = (path) => {
+  return new Promise((resolve, reject) => {
+    readdir(path)
+      .then((files) => {
+        resolve(
+          files.map((file) => ({
+            name: file.replace(/-/g, ' ').split('.')[0],
+            value: file,
+          })),
+        );
+      })
+      .catch((err) => reject(err));
+  });
+};
+
+// returns globby promise based on search pattern and configuration
+// https://github.com/sindresorhus/globby
+export const getGlob = (pattern, config) => {
+  return new Promise((resolve, reject) => {
+    globby(pattern, config)
+      .then((matches) => resolve(matches))
+      .catch((err) => reject(err));
+  });
+};
+
+// display list of configuration files retreived by readConfigFile
+export const inquireForFile = (folder, options) => {
+  return new Promise((resolve, reject) => {
+    inquirer
+      .prompt([
+        {
+          type: 'list',
+          name: 'file',
+          choices: options,
+          pageSize: 4,
+          prefix: `\n${chalk.green('?')} Choose a migration configuration to use:\n`,
+        },
+      ])
+      .then((choice) => {
+        const configPath = `${folder}/${choice.file}`;
+        resolve(readConfigFile(configPath));
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+};
+
+// for each expression (string.replace(from, to)) iterate over each file and make
+// changes where a match was found. Records number of matches per file.
+// @TODO: could probably be sped up but it already seems pretty fast.
+export const modifyFileContents = async (content, expr) => {
+  // filter out files with less than 3 newlines, likely compressed/minified files
+  content
+    .filter((f) => {
+      return (f.data.match(/[\n\r]/g) || []).length > 3;
+    })
+    .map((f) => {
+      expr.forEach((e) => {
+        f.data = f.data.replace(e.from, (match) => {
+          f.matches++;
+          return match.replace(e.from, e.to);
+        });
+      });
+      return f;
+    });
+
+  // promise map for writing file to the FS
+  const writePromises = content.map(async (content) => {
+    if (content.matches > 0) {
+      return writeFile(content.file, content.data, 'utf8')
+        .then(() => {
+          return { file: content.file, matches: content.matches };
+        })
+        .catch((err) => error('writePromises: ' + err));
+    } else {
+      return { file: content.file, matches: 0 };
+    }
+  });
+
+  // write out list of files that changed and how many changes were made
+  return await Promise.all(writePromises).then((results) => {
+    results.forEach((result) => {
+      if (result.matches > 0) {
+        // gives a shorter name
+        const shortname = path.relative(process.cwd(), result.file);
+        console.log(
+          `${chalk.yellow('>>')} ${shortname}${chalk.gray(',')} ${chalk.whiteBright(
+            result.matches,
+          )} changes`,
+        );
+      }
+    });
+  });
+};
+
+// read configuration file and return array with data and config filename
+export const readConfigFile = async (file) => {
+  const config = await import(file);
+  return [config.default, path.basename(file)];
+};
+
+export default {
+  confirmStart,
+  doPatternSearch,
+  error,
+  findMatchedFiles,
+  getAllFileContents,
+  getConfigFileList,
+  getGlob,
+  inquireForFile,
+  modifyFileContents,
+  readConfigFile,
+};

package/lib/build/js/dialtone_migration_helper/index.mjs

@@ -0,0 +1,131 @@
+#!/usr/bin/env node
+
+import chalk from 'chalk';
+import {
+  confirmStart,
+  doPatternSearch,
+  error,
+  findMatchedFiles,
+  getConfigFileList,
+  getAllFileContents,
+  inquireForFile,
+  modifyFileContents,
+  readConfigFile,
+} from './helpers.mjs';
+import ora from 'ora';
+import { dirname, normalize } from 'path';
+import { fileURLToPath } from 'url';
+import { hideBin } from 'yargs/helpers';
+import yargs from 'yargs';
+
+// eslint-disable-next-line complexity
+(async () => {
+  // get command line args
+  const argv = yargs(hideBin(process.argv))
+    .scriptName('dialtone-migration-helper')
+    .usage(
+      '$0 --file migration-config-file.js --cwd "../root/directory --ignore "**/ignored/**", "**/another_ignored/**"',
+    )
+    .options({
+      config: {
+        type: 'string',
+        description: 'Migration configuration module.',
+      },
+      cwd: {
+        type: 'string',
+        description: 'Root directory for scan. Defaults to CWD.',
+        default: process.cwd(),
+      },
+      ignore: {
+        type: 'array',
+        description: 'Other glob patterns to ignore during search. .gitignore included by default.',
+      },
+      force: {
+        boolean: true,
+        description: 'Skip interactive prompts, use caution!',
+        default: false,
+      },
+    })
+    .help().argv;
+
+  // get list of configuration files
+  const __filename = fileURLToPath(import.meta.url);
+  const __dirname = dirname(__filename);
+  const CONFIG_FOLDER = __dirname + '/configs';
+  const configList = await getConfigFileList(CONFIG_FOLDER).catch((err) =>
+    error('getConfigFileList: ' + err),
+  );
+
+  // load configuration from arg or list
+  const [configData, configFile] = !argv.config
+    ? await inquireForFile(CONFIG_FOLDER, configList).catch((err) =>
+      error('inquireForFile: ' + err),
+    )
+    : await readConfigFile(argv.config).catch((err) => error('readConfigFile: ' + err));
+
+  // set up some globby defaults
+  configData.globbyConfig = configData.globbyConfig || {};
+  configData.globbyConfig.gitignore = configData.globbyConfig.gitignore || true;
+
+  console.log(
+    `\n${chalk.green('++')} Configuration Loaded! (${configFile}) ${chalk.green('++')}\n`,
+  );
+
+  // take CWD if specified from command line
+  const cwd = !argv.cwd ? process.cwd() : normalize(argv.cwd);
+  configData.globbyConfig.cwd = configData.globbyConfig.cwd || cwd;
+  // push ignore list to configuration array
+  if (argv.ignore) {
+    configData.globbyConfig.ignore.push(...argv.ignore);
+  }
+
+  // run glob search with configData.patterns
+  const globSpinner = ora('Performing pattern search').start();
+  const files = await doPatternSearch(configData).then((f) => {
+    return findMatchedFiles(f, configData);
+  });
+  if (files.length <= 0) {
+    console.log(
+      '\n' +
+        chalk.cyan('??') +
+        ' No matches found! Check your patterns and cwd settings if you think this is an error.',
+    );
+    process.exit(0);
+  }
+
+  globSpinner.stop();
+  console.log(`[ ${chalk.whiteBright(files.length)} ] files queued for modification:\n`);
+  console.log(files);
+  console.log(
+    `\n${chalk.yellow('Configuration Description')}${chalk.gray(':')}\n${configData.description}\n`,
+  );
+
+  // kick off file search and replace
+  const startModification = () => {
+    console.log(`\n${chalk.blue('__')} Starting ...`);
+
+    getAllFileContents(files, configData.globbyConfig.cwd)
+      .then((content) => {
+        modifyFileContents(content, configData.expressions).then(() => {
+          console.log(`${chalk.magenta('==')} Modification complete!\n`);
+        });
+      })
+      .catch((err) => error('getAllFileContents: ' + err));
+  };
+
+  // begin file modification based on configuration rules
+  // start automatically if --force is specified
+  if (!argv.force) {
+    confirmStart()
+      .then((val) => {
+        if (val) {
+          startModification();
+        } else {
+          console.log(`\n${chalk.red('__')} Cancelling ...\n`);
+        }
+      })
+      .catch((err) => error('confirmStart ' + err));
+  } else {
+    startModification();
+  }
+})();

package/lib/build/less/components/root-layout.less

@@ -13,7 +13,94 @@
 //  $   BASE STYLE
 //  ----------------------------------------------------------------------------
 .d-root-layout {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
+  display: grid;
+  grid-template:
+    'header' auto
+    'body' 1fr
+    'footer' auto / 1fr;
+  min-height: 100vh;
+
+  &--fixed {
+    height: 100vh;
+  }
+
+  &__header {
+    grid-area: header;
+
+    &--sticky {
+      position: sticky;
+      top: 0;
+    }
+  }
+
+  &__body {
+    display: flex;
+    grid-area: body;
+    overflow: auto;
+    box-shadow: none;
+
+    &--invert {
+      flex-direction: row-reverse;
+    }
+  }
+
+  &__sidebar {
+    box-shadow: none;
+
+    &--sticky {
+      position: sticky;
+      top: 0;
+      height: 100%;
+      overflow: auto;
+    }
+  }
+
+  &__content {
+    flex: 1;
+    box-shadow: none;
+
+    &:focus-visible {
+      box-shadow: none;
+    }
+  }
+
+  &__footer {
+    grid-area: footer;
+  }
+}
+
+@media (max-width: 480px) {
+  .d-root-layout__responsive--sm {
+    .d-root-layout__body {
+      flex-direction: column;
+
+      &--invert {
+        flex-direction: column-reverse;
+      }
+    }
+  }
+}
+
+@media (max-width: 640px) {
+  .d-root-layout__responsive--md {
+    .d-root-layout__body {
+      flex-direction: column;
+
+      &--invert {
+        flex-direction: column-reverse;
+      }
+    }
+  }
+}
+
+@media (max-width: 980px) {
+  .d-root-layout__responsive--lg {
+    .d-root-layout__body {
+      flex-direction: column;
+
+      &--invert {
+        flex-direction: column-reverse;
+      }
+    }
+  }
 }

package/lib/build/less/variables/sizes.less

@@ -62,8 +62,6 @@
     }
 }
 
-#d-internals #spacing-classes(0.8rem, 'size');
-
 #d-internals #spacing-classes(0.8rem, 'size');
 #d-internals #spacing-classes(1.6rem, 'size', '-16');
 #d-internals #spacing-classes(3.2rem, 'size', '-32');