@knime/utils 1.0.0 → 1.0.2

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# @knime/utils
+
+## 1.0.2
+
+### Patch Changes
+
+- 45d2d81: Update navigator utils export name, because it conflicts with the native
+  global property of the same name.
+
+## 1.0.1
+
+### Patch Changes
+
+- 05c9114: refactor utils to TS
+- 0c594bd: improve exports of utils package (related to hotkeys)

package/README.md

@@ -15,7 +15,7 @@ npm install @knime/utils
 To use it in your project, you can import it as follows:
 
 ```javascript
-import { copyText } from "@knime/utils";
+import { capitalize } from "@knime/utils";
 ```
 
 # Join the Community!

package/package.json

@@ -1,19 +1,16 @@
 {
   "name": "@knime/utils",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Internal utility functions and constants shared across @knime packages.",
   "homepage": "https://knime.github.io/webapps-common/",
   "license": "GPL 3 and Additional Permissions according to Sec. 7 (SEE the file LICENSE)",
   "author": "KNIME AG, Zurich, Switzerland",
   "type": "module",
-  "scripts": {
-    "test:unit": "TZ='Europe/Berlin' vitest"
-  },
   "dependencies": {
-    "@knime/styles": "1.0.0",
     "consola": "2.15.3",
     "date-fns": "2.30.0",
-    "date-fns-tz": "2.0.0"
+    "date-fns-tz": "2.0.0",
+    "@knime/styles": "1.0.0"
   },
   "main": "src/index.ts",
   "module": "src/index.ts",
@@ -36,5 +33,8 @@
   },
   "devDependencies": {
     "flush-promises": "^1.0.2"
+  },
+  "scripts": {
+    "test:unit": "TZ='Europe/Berlin' vitest"
   }
-}
+}

package/src/capitalize.ts

@@ -0,0 +1,45 @@
+/**
+ * Uppercases first letter of string
+ * @param string to be capitalized first string, e.g. "workflow"
+ * @return Capitalized String, e.g. "Workflow"
+ */
+export const capitalize = (input: string) =>
+  input.charAt(0).toUpperCase() + input.substring(1);
+
+const formats = {
+  customFormat: (input: string, delimiter: string) =>
+    capitalize(input.replace(delimiter, " ").toLowerCase()),
+
+  kebabFormat: (input: string) => formats.customFormat(input, "-"),
+  snakeFormat: (input: string) => formats.customFormat(input, "_"),
+
+  camelPascalCase: (input: string) =>
+    capitalize(
+      (input.match(/([A-Z]?[^A-Z]*)/g) ?? [])
+        .slice(0, -1)
+        .join(" ")
+        .toLowerCase(),
+    ),
+} as const;
+
+type CaseFormatterOptions = {
+  string: string;
+  delimiter?: string;
+  format?: keyof typeof formats;
+};
+
+export const caseFormatter = ({
+  string,
+  delimiter,
+  format,
+}: CaseFormatterOptions) => {
+  if (delimiter) {
+    return formats.customFormat(string, delimiter);
+  }
+
+  if (format) {
+    return formats[format](string, delimiter ?? "");
+  }
+
+  return capitalize(string);
+};

package/src/{dateMinMaxCheck.js → dateMinMaxCheck.ts}

@@ -4,13 +4,18 @@ import updateDate from "./updateDate";
 
 /**
  * Check if date is before min.
- * @param {Date} date
- * @param {Date | null} min
- * @param {Boolean} checkDate - check date part (year, day, month).
- * @param {Boolean} checkTime - check time part (hour, minutes etc.).
- * @returns {Boolean} whether limit is kept or not.
+ * @param date
+ * @param min
+ * @param checkDate - check date part (year, day, month).
+ * @param checkTime - check time part (hour, minutes etc.).
+ * @returns whether limit is kept or not.
  */
-export const isBeforeMinDate = (date, min, checkDate, checkTime) => {
+export const isBeforeMinDate = (
+  date: Date,
+  min: Date | null,
+  checkDate: boolean,
+  checkTime: boolean,
+) => {
   if (min) {
     if (checkTime && checkDate) {
       return isBefore(date, min);
@@ -31,13 +36,18 @@ export const isBeforeMinDate = (date, min, checkDate, checkTime) => {
 
 /**
  * Check
- * @param {Date} date - date to check.
- * @param {Date | null} max - maximum date.
- * @param {Boolean} checkDate - check date part (year, day, month).
- * @param {Boolean} checkTime - check time part (hour, minutes etc.).
- * @returns {Boolean} whether limit is kept or not.
+ * @param date - date to check.
+ * @param max - maximum date.
+ * @param checkDate - check date part (year, day, month).
+ * @param checkTime - check time part (hour, minutes etc.).
+ * @returns whether limit is kept or not.
  */
-export const isAfterMaxDate = (date, max, checkDate, checkTime) => {
+export const isAfterMaxDate = (
+  date: Date,
+  max: Date | null,
+  checkDate: boolean,
+  checkTime: boolean,
+) => {
   if (max) {
     if (checkTime && checkDate) {
       return isAfter(date, max);

package/src/format.ts

@@ -0,0 +1,98 @@
+import getLocalTimeZone from "./localTimezone";
+/**
+ * Converts the specified date String to human readable text containing the day, month, and year.
+ * Example: '2018-07-31T09:44:31+00:00' => 'Jul 31, 2018'
+ *
+ * @param dateString String representation of the Date to format
+ * @param useTimeZone to set the timeZone where the user is located, and display local date and time
+ * @returns human readable date String
+ */
+export const formatDateString = (
+  dateString: string | number,
+  useTimeZone = false,
+) => {
+  const date = new Date(dateString);
+
+  // @ts-ignore
+  if (isNaN(date)) {
+    throw Error("Invalid Date format");
+  }
+
+  const baseDateOptions: Intl.DateTimeFormatOptions = {
+    day: "numeric",
+    month: "short",
+    year: "numeric",
+  };
+
+  // This only works for the default locale of en-US, as support of other locals in node js might not be available
+  // See for example this issue https://github.com/nodejs/node/issues/8500
+  const dateOptions: Intl.DateTimeFormatOptions = useTimeZone
+    ? { ...baseDateOptions, timeZone: getLocalTimeZone() }
+    : baseDateOptions;
+
+  return date.toLocaleDateString("en-US", dateOptions);
+};
+
+/**
+ * Converts the specified time String to human readable text containing the hour (12-hour) and minute.
+ * Example: '2018-07-31T09:44:31+00:00' => '9:44 AM'
+ *
+ * @param timeString String representation of the Date (including time) to format
+ * @param useTimeZone to set the timeZone where the user is located, and display local date and time
+ * @returns human readable time String
+ */
+export const formatTimeString = (
+  timeString: string | number,
+  useTimeZone = false,
+) => {
+  const time = new Date(timeString);
+
+  // @ts-ignore
+  if (isNaN(time)) {
+    throw Error("Invalid Date format");
+  }
+
+  // This only works for the default locale of en-US, as support of other locals in node js might not be available
+  // See for example this issue https://github.com/nodejs/node/issues/8500
+  const baseTimeOptions: Intl.DateTimeFormatOptions = {
+    hour: "numeric",
+    minute: "2-digit",
+  };
+
+  const timeOptions: Intl.DateTimeFormatOptions = useTimeZone
+    ? { ...baseTimeOptions, timeZone: getLocalTimeZone() }
+    : baseTimeOptions;
+
+  return time.toLocaleTimeString("en-US", timeOptions);
+};
+
+/**
+ * Converts the specified time String to human readable text containing the date (day, month, year) and time (hour,
+ * minute; 12-hour).
+ * Example: '2018-07-31T09:44:31+00:00' => 'Jul 31, 2018 9:44 AM'
+ *
+ * @param dateTimeString String representation of the Date (including time and date) to format
+ * @param useTimeZone to set the timeZone where the user is located, and display local date and time
+ * @returns human readable date/time String
+ */
+export const formatDateTimeString = (
+  dateTimeString: string | number,
+  useTimeZone = false,
+) => {
+  // eslint-disable-line arrow-body-style
+  return `${formatDateString(dateTimeString, useTimeZone)} ${formatTimeString(
+    dateTimeString,
+    useTimeZone,
+  )}`;
+};
+
+/**
+ * Converts the specified date and time to the user time zone with option to display (day, month, year) only or with time (hour,
+ * minute; 12-hour).
+ *
+ * @param showTime String representation of the Date to convert and format
+ * @param String | number} date String representation of the Date to convert and format
+ * @returns human readable date/time String converted to user time zone
+ */
+export const formatLocalDateTimeString = (date: string, showTime: boolean) =>
+  showTime ? formatDateTimeString(date, true) : formatDateString(date, true);

package/src/index.ts

@@ -1,12 +1,14 @@
 import { capitalize, caseFormatter } from "./capitalize";
-import { copyText } from "./copyText";
 import debounce from "./debounce";
 import { filters } from "./filters";
 import truncateString from "./truncateString";
 import getWrappedAroundIndex from "./getWrappedAroundIndex";
 import sleep from "./sleep";
 import { icons, isIconExisting } from "./fileTypeIcons";
-import svgWithTitle from "./svgWithTitle";
+
+// eslint-disable-next-line import/extensions
+import svgWithTitle from "./svgWithTitle.js";
+
 import updateDate from "./updateDate";
 import { isAfterMaxDate, isBeforeMinDate } from "./dateMinMaxCheck";
 import {
@@ -18,16 +20,30 @@ import {
 
 import getLocalTimeZone from "./localTimezone";
 import numIntegerDigits from "./numIntegerDigits";
-import { formatHotkeys } from "./formatHotkeys";
-import type { Hotkey, KnownHotkey } from "./formatHotkeys";
-import * as navigator from "./navigator";
 
-export type { Hotkey, KnownHotkey };
+import {
+  formatHotkeys,
+  formatHotkey,
+  getDefaultSeparator,
+} from "./formatHotkeys";
+
+import type {
+  Hotkey as _Hotkey,
+  KnownHotkey as _KnownHotkey,
+} from "./formatHotkeys";
+
+import * as navigatorUtils from "./navigator";
+
+const hotkeys = { formatHotkeys, formatHotkey, getDefaultSeparator };
+
+export namespace HotkeysNS {
+  export type Hotkey = _Hotkey;
+  export type KnownHotkey = _KnownHotkey;
+}
 
 export {
   capitalize,
   caseFormatter,
-  copyText,
   debounce,
   filters,
   truncateString,
@@ -45,6 +61,6 @@ export {
   getLocalTimeZone,
   isBeforeMinDate,
   numIntegerDigits,
-  formatHotkeys,
-  navigator,
+  hotkeys,
+  navigatorUtils,
 };

package/src/{localTimezone.js → localTimezone.ts}

@@ -1,7 +1,7 @@
 /**
  * Get the users local timezone.
  *
- * @returns {String} current users timezone (browser based) tz db string (e. g. Europe/Berlin).
+ * @returns current users timezone (browser based) tz db string (e. g. Europe/Berlin).
  */
 // eslint-disable-next-line new-cap
 export default () => Intl.DateTimeFormat().resolvedOptions().timeZone;

package/src/numIntegerDigits.ts

@@ -0,0 +1,8 @@
+/**
+ * Count the number of integer digits for a given number.
+ *
+ * @param input number.
+ * @returns number of integer digits x has. 1234 = 4 but 1234.44 is also 4.
+ */
+export default (input: number) =>
+  Math.max(Math.floor(Math.log10(Math.abs(input))), 0) + 1;

package/src/{updateDate.js → updateDate.ts}

@@ -3,11 +3,11 @@ import { isValid, getYear, getMonth, getDate, set } from "date-fns";
  * Updates the date part (year, day and month) of a date object (base)
  * time, offset (timezone) and so on will be left untouched.
  *
- * @param {Date} base - Date which will be used (copied) to set day, month and year.
- * @param {Date | null} date - Extract day, month and year from this date object.
- * @returns {Date} Copy of base with day, month and year of date.
+ * @param  base - Date which will be used (copied) to set day, month and year.
+ * @param  date - Extract day, month and year from this date object.
+ * @returns Copy of base with day, month and year of date.
  */
-export default (base, date) => {
+export default (base: Date, date: Date | null) => {
   // ignore falsy dates
   if (date) {
     // allow invalid base and set time to 0
@@ -18,5 +18,6 @@ export default (base, date) => {
       date: getDate(date),
     });
   }
+
   return base;
 };

package/src/{updateTime.js → updateTime.ts}

@@ -2,12 +2,12 @@
  * Updates the time part (hour, minute, second and millisecond) of a date object (base)
  * date, offset (timezone) and so on will be left untouched.
  *
- * @param {Date} base - Date which will be used (copied) to set day, month and year.
- * @param {Date | null} date - Extract hour, minute, second and millisecond from this date object.
- * @returns {Date} Copy of base with hour, minute, second and millisecond changed.
+ * @param base - Date which will be used (copied) to set day, month and year.
+ * @param date - Extract hour, minute, second and millisecond from this date object.
+ * @returns Copy of base with hour, minute, second and millisecond changed.
  */
-export default (base, date) => {
-  let d = new Date(base);
+export default (base: Date, date: Date | null) => {
+  const d = new Date(base);
   // ignore falsy dates
   if (date) {
     d.setHours(date.getHours());

package/src/capitalize.js

@@ -1,33 +0,0 @@
-/**
- * Uppercases first letter of string
- * @param {String} str to be capitalized first string, e.g. 'workflow'
- * @return {String} Capitalized String, e.g. Workflow
- */
-export const capitalize = (str) =>
-  str.charAt(0).toUpperCase() + str.substring(1);
-
-const formats = {
-  customFormat: (str, delimiter) =>
-    capitalize(str.replace(delimiter, " ").toLowerCase()),
-  kebabFormat: (str) => formats.customFormat(str, "-"),
-  snakeFormat: (str) => formats.customFormat(str, "_"),
-  camelPascalCase: (str) =>
-    capitalize(
-      str
-        .match(/([A-Z]?[^A-Z]*)/g)
-        .slice(0, -1)
-        .join(" ")
-        .toLowerCase(),
-    ),
-  [undefined]: (str) => capitalize(str), // eslint-disable-line no-undefined
-};
-
-export const caseFormatter = ({ string, delimiter, format }) => {
-  if (delimiter) {
-    return formats.customFormat(string, delimiter);
-  }
-  if (formats) {
-    return formats[format](string);
-  }
-  return capitalize(string);
-};

package/src/copyText.js

@@ -1,10 +0,0 @@
-export const copyText = (text) => {
-  let tmpElement = document.createElement("textarea");
-  tmpElement.style = "position:fixed;pointer-events:none;opacity:0;";
-  tmpElement.setAttribute("readonly", "");
-  tmpElement.value = text;
-  document.body.appendChild(tmpElement);
-  tmpElement.select();
-  document.execCommand("copy");
-  document.body.removeChild(tmpElement);
-};

package/src/format.js

@@ -1,70 +0,0 @@
-import getLocalTimeZone from "./localTimezone";
-/**
- * Converts the specified date String to human readable text containing the day, month, and year.
- * Example: '2018-07-31T09:44:31+00:00' => 'Jul 31, 2018'
- *
- * @param {Boolean} useTimeZone to set the timeZone where the user is located, and display local date and time
- * @param {String | number} dateString String representation of the Date to format
- * @returns {String} human readable date String
- */
-export const formatDateString = (dateString, useTimeZone = false) => {
-  let date = new Date(dateString);
-  if (isNaN(date)) {
-    throw Error("Invalid Date format");
-  }
-  // This only works for the default locale of en-US, as support of other locals in node js might not be available
-  // See for example this issue https://github.com/nodejs/node/issues/8500
-  let dateOptions = { day: "numeric", month: "short", year: "numeric" };
-  if (useTimeZone) {
-    dateOptions.timeZone = getLocalTimeZone();
-  }
-  return date.toLocaleDateString("en-US", dateOptions);
-};
-/**
- * Converts the specified time String to human readable text containing the hour (12-hour) and minute.
- * Example: '2018-07-31T09:44:31+00:00' => '9:44 AM'
- *
- * @param {Boolean} useTimeZone to set the timeZone where the user is located, and display local date and time
- * @param {String | number} timeString String representation of the Date (including time) to format
- * @returns {String} human readable time String
- */
-export const formatTimeString = (timeString, useTimeZone = false) => {
-  let time = new Date(timeString);
-  if (isNaN(time)) {
-    throw Error("Invalid Date format");
-  }
-  // This only works for the default locale of en-US, as support of other locals in node js might not be available
-  // See for example this issue https://github.com/nodejs/node/issues/8500
-
-  let timeOptions = { hour: "numeric", minute: "2-digit" };
-  if (useTimeZone) {
-    timeOptions.timeZone = getLocalTimeZone();
-  }
-
-  return time.toLocaleTimeString("en-US", timeOptions);
-};
-/**
- * Converts the specified time String to human readable text containing the date (day, month, year) and time (hour,
- * minute; 12-hour).
- * Example: '2018-07-31T09:44:31+00:00' => 'Jul 31, 2018 9:44 AM'
- *
- * @param {Boolean} useTimeZone to set the timeZone where the user is located, and display local date and time
- * @param {String | number} dateTimeString String representation of the Date (including time and date) to format
- * @returns {String} human readable date/time String
- */
-export const formatDateTimeString = (dateTimeString, useTimeZone = false) => {
-  // eslint-disable-line arrow-body-style
-  return `${formatDateString(dateTimeString, useTimeZone)} ${formatTimeString(
-    dateTimeString,
-    useTimeZone,
-  )}`;
-};
-/**
- * Converts the specified date and time to the user time zone with option to display (day, month, year) only or with time (hour,
- * minute; 12-hour).
- * @param {Boolean} showTime String representation of the Date to convert and format
- * @param {String | number} date String representation of the Date to convert and format
- * @returns {String} human readable date/time String converted to user time zone
- */
-export const formatLocalDateTimeString = (date, showTime) =>
-  showTime ? formatDateTimeString(date, true) : formatDateString(date, true);

package/src/numIntegerDigits.js

@@ -1,7 +0,0 @@
-/**
- * Count the number of integer digits for a given number.
- *
- * @param {Number} x - input number.
- * @returns {Number} - number of integer digits x has. 1234 = 4 but 1234.44 is also 4.
- */
-export default (x) => Math.max(Math.floor(Math.log10(Math.abs(x))), 0) + 1;