@dialpad/dialtone-css 1.0.0

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

@@ -0,0 +1,212 @@
+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;
+      });
+
+    return filtered.reduce((prev, current) => {
+      const fn = path.relative(config.globbyConfig.cwd, current.file);
+      return [...prev, fn];
+    }, []);
+  });
+};
+
+// 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,135 @@
+#!/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 --cwd "../root/directory" --include "file1.ext" "**/*.ext2" --ignore "**/ignored/**", "**/another_ignored/**"',
+    )
+    .options({
+      cwd: {
+        type: 'string',
+        description: 'Root directory for scan. Defaults to CWD.',
+        default: process.cwd(),
+      },
+      include: {
+        type: 'array',
+        description: 'Glob patters to include during search, if omitted, will include all the files on the 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] = await inquireForFile(CONFIG_FOLDER, configList)
+      .catch((err) =>
+        error('inquireForFile: ' + 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 include list to configuration array
+  if (argv.include) {
+    configData.patterns = argv.include;
+  }
+  // push ignore list to configuration array
+  if (argv.ignore) {
+    configData.globbyConfig.ignore = 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 ' +
+        `patterns: [${configData.patterns}] | cwd: [${configData.globbyConfig.cwd}] `,
+    );
+    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/avatar.less

@@ -0,0 +1,169 @@
+//
+//  DIALTONE
+//  COMPONENTS: Avatars
+//
+//  These are avatars classes for Dialpad's design system Dialtone.
+//  For further documentation of these and other classes,
+//  visit https://dialpad.design/components/avatars
+//
+//  TABLE OF CONTENTS
+//  • BASE STYLE
+//    • COLOR VARIANTS
+//    • CHILDREN
+//    • SIZES
+//    • VARIANTS
+//
+//  ============================================================================
+//  $   BASE STYLE
+//  ----------------------------------------------------------------------------
+.d-avatar {
+  //  Component CSS Vars
+  //  ------------------------------------------------------------------------
+  --avatar-color-background: var(--dt-avatar-color-background-000);
+  --avatar-color-text: var(--dt-avatar-color-foreground);
+  --avatar-size-shape: var(--dt-size-600);
+  --avatar-size-image: 100%;
+  --avatar-size-text: var(--dt-font-size-200);
+  --avatar-presence-position-right: var(--dt-space-200-negative);
+  --avatar-presence-position-bottom: var(--dt-space-200-negative);
+  --avatar-count-color-shadow: var(--dt-theme-sidebar-color-background);
+
+  position: relative;
+  display: flex;
+  color: var(--avatar-color-text);
+
+  //  --  COLOR VARIANTS
+  //  ------------------------------------------------------------------------
+   &--color-100 { --avatar-color-background: var(--dt-avatar-color-background-100); }
+   &--color-200 { --avatar-color-background: var(--dt-avatar-color-background-200); }
+   &--color-300 { --avatar-color-background: var(--dt-avatar-color-background-300); }
+   &--color-400 { --avatar-color-background: var(--dt-avatar-color-background-400); }
+   &--color-500 { --avatar-color-background: var(--dt-avatar-color-background-500); }
+   &--color-600 { --avatar-color-background: var(--dt-avatar-color-background-600); }
+   &--color-700 { --avatar-color-background: var(--dt-avatar-color-background-700); }
+   &--color-800 { --avatar-color-background: var(--dt-avatar-color-background-800); }
+   &--color-900 { --avatar-color-background: var(--dt-avatar-color-background-900); }
+   &--color-1000 { --avatar-color-background: var(--dt-avatar-color-background-1000); }
+   &--color-1100 { --avatar-color-background: var(--dt-avatar-color-background-1100); }
+   &--color-1200 { --avatar-color-background: var(--dt-avatar-color-background-1200); }
+   &--color-1300 { --avatar-color-background: var(--dt-avatar-color-background-1300); }
+   &--color-1400 { --avatar-color-background: var(--dt-avatar-color-background-1400); }
+   &--color-1500 { --avatar-color-background: var(--dt-avatar-color-background-1500); }
+   &--color-1600 { --avatar-color-background: var(--dt-avatar-color-background-1600); }
+   &--color-1700 { --avatar-color-background: var(--dt-avatar-color-background-1700); }
+   &--color-1800 { --avatar-color-background: var(--dt-avatar-color-background-1800); }
+
+  //  --  CHILDREN
+  //  ------------------------------------------------------------------------
+
+  &__canvas {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--avatar-size-shape);
+    height: var(--avatar-size-shape);
+    overflow: hidden;
+    background-color: var(--avatar-color-background);
+    border-radius: var(--dt-size-radius-pill);
+  }
+
+  &__image {
+    width: var(--avatar-size-image);
+    height: var(--avatar-size-image);
+    object-fit: cover;
+    border-radius: var(--dt-size-radius-pill);
+  }
+
+  &__initials {
+    position: absolute;
+    z-index: var(--zi-base);
+    font-weight: var(--dt-font-weight-bold);
+    font-size: var(--avatar-size-text);
+    line-height: var(--dt-font-line-height-100);
+    text-transform: uppercase;
+    user-select: none;
+  }
+
+  &__icon {
+    display: flex;
+  }
+
+  &__presence {
+    position: absolute;
+    right: var(--avatar-presence-position-right);
+    bottom: var(--avatar-presence-position-bottom);
+    display: flex;
+  }
+
+  &__count {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    min-width: calc(var(--dt-size-300) * 3.5);
+    padding: var(--dt-space-200) calc(var(--dt-space-200) + var(--dt-space-100));
+    color: var(--dt-color-foreground-primary-inverted);
+    font-weight: var(--dt-font-weight-bold);
+    font-size: calc(var(--dt-font-size-100) - var(--dt-size-200));
+    line-height: var(--dt-font-line-height-100);
+    text-align: center;
+    background-color: var(--dt-color-surface-strong);
+    border-radius: var(--dt-size-radius-pill);
+    box-shadow: 0 0 0 var(--dt-size-200) var(--avatar-count-color-shadow);
+
+    .dt-leftbar-row--selected &,
+    .dt-leftbar-row__primary:hover & {
+      --avatar-count-color-shadow: var(--dt-theme-sidebar-row-color-background-hover);
+    }
+  }
+
+  //  --  SIZES
+  //  ------------------------------------------------------------------------
+
+  &--xs {
+    --avatar-size-shape: calc(var(--dt-size-500) + var(--dt-size-200));
+    --avatar-presence-position-right: var(--dt-space-300-negative);
+    --avatar-presence-position-bottom: var(--dt-space-300-negative);
+  }
+
+  &--sm {
+    --avatar-size-shape: var(--dt-size-550);
+    --avatar-size-text: var(--dt-font-size-100);
+    --avatar-presence-position-right: var(--dt-space-200-negative);
+    --avatar-presence-position-bottom: var(--dt-space-200-negative);
+  }
+
+  &--md {
+    --avatar-size-shape: var(--dt-size-600);
+    --avatar-size-text: var(--dt-font-size-200);
+    --avatar-presence-position-right: var(--dt-space-100-negative);
+    --avatar-presence-position-bottom: var(--dt-space-100-negative);
+  }
+
+  &--lg {
+    --avatar-size-shape: var(--dt-size-650);
+    --avatar-size-text: var(--dt-font-size-300);
+    --avatar-presence-position-right: var(--dt-space-100);
+    --avatar-presence-position-bottom: var(--dt-space-100);
+  }
+
+  &--xl {
+    --avatar-size-shape: var(--dt-size-700);
+    --avatar-size-text: var(--dt-font-size-400);
+    --avatar-presence-position-right: var(--dt-space-300);
+    --avatar-presence-position-bottom: var(--dt-space-300);
+  }
+
+  //  --  GROUP
+  //  ------------------------------------------------------------------------
+
+  &--group {
+    --avatar-size-shape: calc(var(--dt-size-300) * 4.5);
+
+    width: var(--dt-size-550);
+    height: var(--dt-size-550);
+  }
+}

package/lib/build/less/components/badge.less

@@ -0,0 +1,139 @@
+//
+//  DIALTONE
+//  COMPONENTS: BADGES
+//
+//  These are badge classes for Dialpad's design system Dialtone.
+//  For further documentation of these and other classes,
+//  visit https://dialpad.design/components/badges
+//
+//  TABLE OF CONTENTS
+//  • COMPONENT CSS VARIABLES
+//  • BASE STYLE
+//  • KIND
+//  • TYPE
+//  • SLOTS
+//
+//  ============================================================================
+//  $   BASE STYLE
+//  ----------------------------------------------------------------------------
+
+.d-badge {
+  //  COMPONENT CSS VARIABLES
+  //  --------------------------------------------------------------------------
+  --badge-color-text: var(--dt-badge-color-foreground-default);
+  --badge-color-background: var(--dt-badge-color-background-default);
+  --badge-radius: var(--dt-size-300);
+  --badge-line-height: calc(var(--dt-size-500) + var(--dt-size-200));
+  --badge-font-size: var(--dt-font-size-100);
+  --badge-font-weight: var(--dt-font-weight-semi-bold);
+  --badge-gap: var(--dt-space-300);
+  --badge-letter-spacing: var(--dt-size-50);
+  --badge-padding-y: var(--dt-space-100);
+  --badge-padding-x: var(--dt-space-400);
+  --badge-text-case: none;
+  --badge-decorative-color: var(--dt-color-black-900);
+
+  //  BASE STYLE
+  //  --------------------------------------------------------------------------
+  display: inline-flex;
+  gap: var(--badge-gap);
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: var(--dt-size-550);
+  padding: var(--badge-padding-y) var(--badge-padding-x);
+  color: var(--badge-color-text);
+  font-weight: var(--badge-font-weight);
+  font-size: var(--badge-font-size);
+  line-height: var(--badge-line-height);
+  letter-spacing: var(--badge-letter-spacing);
+  text-align: center;
+  text-transform: var(--badge-text-case);
+  background-color: var(--badge-color-background);
+  border-radius: var(--badge-radius);
+
+  //  Kind
+  //  --------------------------------------------------------------------------
+
+  &--count {
+    --badge-radius: var(--dt-size-radius-pill);
+    --badge-padding-x: calc(var(--dt-space-400) - var(--dt-space-100));
+    --badge-padding-y: var(--dt-space-300);
+    --badge-line-height: var(--dt-size-500);
+  }
+
+  //  TYPE
+  //  --------------------------------------------------------------------------
+
+  &--info {
+    --badge-color-background: var(--dt-badge-color-background-info);
+  }
+
+  &--success {
+    --badge-color-background: var(--dt-badge-color-background-success);
+  }
+
+  &--warning {
+    --badge-color-background: var(--dt-badge-color-background-warning);
+  }
+
+  &--critical {
+    --badge-color-background: var(--dt-badge-color-background-critical);
+  }
+
+  &--bulletin {
+    --badge-color-text: var(--dt-badge-color-foreground-bulletin);
+    --badge-color-background: var(--dt-badge-color-background-bulletin);
+  }
+
+  &--ai {
+    --badge-color-text: var(--dt-badge-color-foreground-bulletin); // missing token or is ok to use this one?
+    --badge-color-background: var(--dt-color-magenta-300);
+
+    background-image: var(--dt-badge-color-background-ai);
+  }
+
+  &--decorate-black-400 { --badge-decorative-color: var(--dt-color-black-400); }
+  &--decorate-black-500 { --badge-decorative-color: var(--dt-color-black-500); }
+  &--decorate-black-900 { --badge-decorative-color: var(--dt-color-black-900); }
+  &--decorate-red-200 { --badge-decorative-color: var(--dt-color-red-200); }
+  &--decorate-red-300 { --badge-decorative-color: var(--dt-color-red-300); }
+  &--decorate-red-400 { --badge-decorative-color: var(--dt-color-red-400); }
+  &--decorate-purple-200 { --badge-decorative-color: var(--dt-color-purple-200); }
+  &--decorate-purple-300 { --badge-decorative-color: var(--dt-color-purple-300); }
+  &--decorate-purple-400 { --badge-decorative-color: var(--dt-color-purple-400); }
+  &--decorate-purple-500 { --badge-decorative-color: var(--dt-color-purple-500); }
+  &--decorate-blue-200 { --badge-decorative-color: var(--dt-color-blue-200); }
+  &--decorate-blue-300 { --badge-decorative-color: var(--dt-color-blue-300); }
+  &--decorate-blue-400 { --badge-decorative-color: var(--dt-color-blue-400); }
+  &--decorate-green-300 { --badge-decorative-color: var(--dt-color-green-300); }
+  &--decorate-green-400 { --badge-decorative-color: var(--dt-color-green-400); }
+  &--decorate-green-500 { --badge-decorative-color: var(--dt-color-green-500); }
+  &--decorate-gold-300 { --badge-decorative-color: var(--dt-color-gold-300); }
+  &--decorate-gold-400 { --badge-decorative-color: var(--dt-color-gold-400); }
+  &--decorate-gold-500 { --badge-decorative-color: var(--dt-color-gold-500); }
+  &--decorate-magenta-200 { --badge-decorative-color: var(--dt-color-magenta-200); }
+  &--decorate-magenta-300 { --badge-decorative-color: var(--dt-color-magenta-300); }
+  &--decorate-magenta-400 { --badge-decorative-color: var(--dt-color-magenta-400); }
+
+  //  SLOTS
+  //  --------------------------------------------------------------------------
+
+  &__decorative {
+    display: inline-flex;
+    width: var(--dt-size-400);
+    height: var(--dt-size-400);
+    background-color: var(--badge-decorative-color);
+    border-radius: var(--dt-size-200);
+  }
+
+  &__label {
+    display: flex;
+    align-items: center;
+  }
+
+  &__icon-left,
+  &__icon-right {
+    display: flex;
+  }
+}