init

platform/ui/src/utils/getGridWidthClass.js

@@ -0,0 +1,35 @@
+// This is really annoying, but we can't use string concatenation to produce names
+// or the purger will purge stuff we need. This is a lazy workaground.
+// The alternative would be to use the safelist, but then we would have to remember
+// which components which entry in the safelist are used for.
+// https://tailwindcss.com/docs/optimizing-for-production
+export default function getGridWidthClass(gridCol) {
+  const widthClasses = {
+    1: 'w-1/24',
+    2: 'w-2/24',
+    3: 'w-3/24',
+    4: 'w-4/24',
+    5: 'w-5/24',
+    6: 'w-6/24',
+    7: 'w-7/24',
+    8: 'w-8/24',
+    9: 'w-9/24',
+    10: 'w-10/24',
+    11: 'w-11/24',
+    12: 'w-12/24',
+    13: 'w-13/24',
+    14: 'w-14/24',
+    15: 'w-15/24',
+    16: 'w-16/24',
+    17: 'w-17/24',
+    18: 'w-18/24',
+    19: 'w-19/24',
+    20: 'w-20/24',
+    21: 'w-21/24',
+    22: 'w-22/24',
+    23: 'w-23/24',
+    24: 'w-24/24',
+  };
+
+  return widthClasses[gridCol];
+}

platform/ui/src/utils/getMaxDigits.ts

@@ -0,0 +1,19 @@
+/**
+ * Calculates the maximum number of digits required to display a value based on the maximum value and step size.
+ * @param maxValue - The maximum value to display.
+ * @param step - The step size between values.
+ * @returns The maximum number of digits required to display a value.
+ */
+const getMaxDigits = (maxValue: number, step: number) => {
+  if (step <= 0) {
+    throw new Error('Step should be greater than zero');
+  }
+
+  // Get the number of integer digits for maxValue
+  const integerDigits = maxValue.toString().split('.')[0].length;
+  const decimalDigits = step % 1 === 0 ? 0 : step.toString().split('.')[1].length;
+
+  return integerDigits + (decimalDigits ? decimalDigits + 1 : 0);
+};
+
+export default getMaxDigits;

platform/ui/src/utils/useOnClickOutside.js

@@ -0,0 +1,26 @@
+export default (element, onClickOutside) => {
+  const clickOutsideHandler = event => {
+    if (element.current && !element.current.contains(event.target)) {
+      onClickOutside();
+      if (typeof window !== 'undefined') {
+        window.removeEventListener('mousedown', clickOutsideHandler);
+      }
+    }
+  };
+
+  const add = () => {
+    if (typeof window !== 'undefined') {
+      window.addEventListener('mousedown', clickOutsideHandler);
+    }
+  };
+  const remove = () => {
+    if (typeof window !== 'undefined') {
+      window.removeEventListener('mousedown', clickOutsideHandler);
+    }
+  };
+
+  return {
+    add,
+    remove,
+  };
+};

platform/ui/src/utils/viewportLabels.ts

@@ -0,0 +1,30 @@
+const viewportLabels = [
+  'A',
+  'B',
+  'C',
+  'D',
+  'E',
+  'F',
+  'G',
+  'H',
+  'I',
+  'J',
+  'K',
+  'L',
+  'M',
+  'N',
+  'O',
+  'P',
+  'Q',
+  'R',
+  'S',
+  'T',
+  'U',
+  'V',
+  'W',
+  'X',
+  'Y',
+  'Z',
+];
+
+export default viewportLabels;