Track HiveGrid Cloud planning reference

hivegrid-cloud/apps/web/app/utils/shared/BooleanUtils.test.ts

@@ -0,0 +1,28 @@
+import {describe, it, expect} from 'vitest'
+import { BooleanFormats, BooleanFormatType } from './BooleanUtils';
+
+describe('BooleanFormats', () => {
+  describe('constants', () => {
+    it('should contain 5 formats', () => {
+      expect(BooleanFormats).toHaveLength(5);
+    });
+  });
+
+  describe('values', () => {
+    const validFormatValues: BooleanFormatType[] = [
+      'yesNo',
+      'trueFalse',
+      'enabledDisabled',
+      'onOff',
+      'activeInactive'
+    ];
+
+    it.each(BooleanFormats.map((format) => [format.value, format.name]))(
+      'should have valid values for %s (%s)',
+      (value, name) => {
+        expect(validFormatValues).toContain(value);
+        expect(typeof name).toBe('string');
+      },
+    );
+  });
+});

hivegrid-cloud/apps/web/app/utils/shared/BooleanUtils.ts

@@ -0,0 +1,8 @@
+export type BooleanFormatType = "yesNo" | "trueFalse" | "enabledDisabled" | "onOff" | "activeInactive";
+export const BooleanFormats: { name: string; value: BooleanFormatType; labelKey: string }[] = [
+  { name: "Yes/No", value: "yesNo", labelKey: "formats.boolean.yesNo" },
+  { name: "True/False", value: "trueFalse", labelKey: "formats.boolean.trueFalse" },
+  { name: "Enabled/Disabled", value: "enabledDisabled", labelKey: "formats.boolean.enabledDisabled" },
+  { name: "On/Off", value: "onOff", labelKey: "formats.boolean.onOff" },
+  { name: "Active/Inactive", value: "activeInactive", labelKey: "formats.boolean.activeInactive" },
+];

hivegrid-cloud/apps/web/app/utils/shared/ClassesUtils.test.ts

@@ -0,0 +1,22 @@
+import { describe, it, expect } from "vitest";
+import clsx from "./ClassesUtils";
+
+describe("clsx", () => {
+  it("should concatenate all truthy classes with a space", () => {
+    const classes = ["class-1", "class-2", "", null, undefined, false, "class-3"];
+    const result = clsx(...classes);
+    expect(result).toEqual("class-1 class-2 class-3");
+  });
+
+  it("should return an empty string if all classes are falsy", () => {
+    const classes = ["", null, undefined, false];
+    const result = clsx(...classes);
+    expect(result).toEqual("");
+  });
+
+  it("should return an empty string if no classes are provided", () => {
+    const classes: any[] = [];
+    const result = clsx(...classes);
+    expect(result).toEqual("");
+  });
+});

hivegrid-cloud/apps/web/app/utils/shared/ClassesUtils.ts

@@ -0,0 +1,3 @@
+export default function clsx(...classes: any[]) {
+  return classes.filter(Boolean).join(" ");
+}

hivegrid-cloud/apps/web/app/utils/shared/ColorUtils.test.ts

@@ -0,0 +1,109 @@
+import { describe, it, expect } from "vitest";
+import { getColors, getTailwindColor, colorMap, colorToBg, getBackgroundColor, getBadgeColor, badgeBgColorStrong, badgeBgColor } from "./ColorUtils";
+import { Colors } from "~/application/enums/shared/Colors";
+
+describe("getColors", () => {
+  it("should return all main colors when main is true", () => {
+    const result = getColors(true);
+    expect(result).toEqual([
+      Colors.GRAY,
+      Colors.RED,
+      Colors.ORANGE,
+      Colors.YELLOW,
+      Colors.GREEN,
+      Colors.TEAL,
+      Colors.CYAN,
+      Colors.SKY,
+      Colors.BLUE,
+      Colors.INDIGO,
+      Colors.VIOLET,
+      Colors.PURPLE,
+      Colors.FUCHSIA,
+      Colors.PINK,
+      Colors.ROSE,
+    ]);
+  });
+
+  it("should return all colors when main is not true", () => {
+    const result = getColors();
+    expect(result).toEqual([
+      Colors.SLATE,
+      Colors.GRAY,
+      Colors.NEUTRAL,
+      Colors.STONE,
+      Colors.RED,
+      Colors.ORANGE,
+      Colors.AMBER,
+      Colors.YELLOW,
+      Colors.LIME,
+      Colors.GREEN,
+      Colors.EMERALD,
+      Colors.TEAL,
+      Colors.CYAN,
+      Colors.SKY,
+      Colors.BLUE,
+      Colors.INDIGO,
+      Colors.VIOLET,
+      Colors.PURPLE,
+      Colors.FUCHSIA,
+      Colors.PINK,
+      Colors.ROSE,
+    ]);
+  });
+});
+
+describe("getTailwindColor", () => {
+  it("getTailwindColor returns correct color", () => {
+    for (const color in colorMap) {
+      const expected = colorMap[color as unknown as Colors];
+      const result = getTailwindColor(color as unknown as Colors);
+      expect(result).toEqual(expected);
+    }
+  });
+
+  it("getTailwindColor returns empty string for invalid color", () => {
+    const invalidColor: unknown = "invalid-color";
+    const result = getTailwindColor(invalidColor as Colors);
+    expect(result).toEqual("");
+  });
+});
+
+describe("getBackgroundColor", () => {
+  it("getBackgroundColor returns correct color", () => {
+    for (const color in colorToBg) {
+      const expected = colorToBg[color as unknown as Colors];
+      const result = getBackgroundColor(color as unknown as Colors);
+      expect(result).toEqual(expected);
+    }
+  });
+
+  it("getBackgroundColor returns empty string for invalid color", () => {
+    const invalidColor: unknown = "invalid-color";
+    const result = getBackgroundColor(invalidColor as Colors);
+    expect(result).toEqual("");
+  });
+});
+
+describe("getBadgeColor", () => {
+  it("getBadgeColor returns correct color when strong is false", () => {
+    for (const color in badgeBgColor) {
+      const expected = badgeBgColor[color as unknown as Colors];
+      const result = getBadgeColor(color as unknown as Colors, false);
+      expect(result).toEqual(expected);
+    }
+  });
+
+  it("getBadgeColor returns correct color when strong is true", () => {
+    for (const color in badgeBgColorStrong) {
+      const expected = badgeBgColor[color as unknown as Colors] + " " + badgeBgColorStrong[color as unknown as Colors];
+      const result = getBadgeColor(color as unknown as Colors, true);
+      expect(result).toEqual(expected);
+    }
+  });
+
+  it("getBadgeColor returns empty string for invalid color", () => {
+    const invalidColor: unknown = "invalid-color";
+    const result = getBadgeColor(invalidColor as Colors);
+    expect(result).toEqual("");
+  });
+});

hivegrid-cloud/apps/web/app/utils/shared/ColorUtils.ts

@@ -0,0 +1,302 @@
+import clsx from "clsx";
+import { Colors } from "~/application/enums/shared/Colors";
+
+export function getColors(main?: boolean) {
+  if (main) {
+    return [
+      Colors.GRAY,
+      Colors.RED,
+      Colors.ORANGE,
+      Colors.YELLOW,
+      Colors.GREEN,
+      Colors.TEAL,
+      Colors.CYAN,
+      Colors.SKY,
+      Colors.BLUE,
+      Colors.INDIGO,
+      Colors.VIOLET,
+      Colors.PURPLE,
+      Colors.FUCHSIA,
+      Colors.PINK,
+      Colors.ROSE,
+    ];
+  }
+  return [
+    Colors.SLATE,
+    Colors.GRAY,
+    Colors.NEUTRAL,
+    Colors.STONE,
+    Colors.RED,
+    Colors.ORANGE,
+    Colors.AMBER,
+    Colors.YELLOW,
+    Colors.LIME,
+    Colors.GREEN,
+    Colors.EMERALD,
+    Colors.TEAL,
+    Colors.CYAN,
+    Colors.SKY,
+    Colors.BLUE,
+    Colors.INDIGO,
+    Colors.VIOLET,
+    Colors.PURPLE,
+    Colors.FUCHSIA,
+    Colors.PINK,
+    Colors.ROSE,
+  ];
+}
+
+type TailwindColor = `${"text"}-${string}-500`;
+export const colorMap: Record<Colors, TailwindColor> = {
+  [Colors.UNDEFINED]: "text-gray-500",
+  [Colors.SLATE]: "text-slate-500",
+  [Colors.GRAY]: "text-gray-500",
+  [Colors.NEUTRAL]: "text-neutral-500",
+  [Colors.STONE]: "text-stone-500",
+  [Colors.RED]: "text-red-500",
+  [Colors.ORANGE]: "text-orange-500",
+  [Colors.AMBER]: "text-amber-500",
+  [Colors.YELLOW]: "text-yellow-500",
+  [Colors.LIME]: "text-lime-500",
+  [Colors.GREEN]: "text-green-500",
+  [Colors.EMERALD]: "text-emerald-500",
+  [Colors.TEAL]: "text-teal-500",
+  [Colors.CYAN]: "text-cyan-500",
+  [Colors.SKY]: "text-sky-500",
+  [Colors.BLUE]: "text-blue-500",
+  [Colors.INDIGO]: "text-indigo-500",
+  [Colors.VIOLET]: "text-violet-500",
+  [Colors.PURPLE]: "text-purple-500",
+  [Colors.FUCHSIA]: "text-fuchsia-500",
+  [Colors.PINK]: "text-pink-500",
+  [Colors.ROSE]: "text-rose-500",
+};
+
+export function getTailwindColor(itemColor: Colors): string {
+  return colorMap[itemColor] ?? "";
+}
+
+// export const colors = [
+//   {
+//     name: "GRAY",
+//     id: 3,
+//   },
+//   {
+//     name: "SLATE",
+//     id: 1,
+//   },
+//   {
+//     name: "RED",
+//     id: 6,
+//   },
+//   {
+//     name: "ORANGE",
+//     id: 7,
+//   },
+//   {
+//     name: "AMBER",
+//     id: 8,
+//   },
+//   {
+//     name: "YELLOW",
+//     id: 9,
+//   },
+//   {
+//     name: "LIME",
+//     id: 10,
+//   },
+//   {
+//     name: "GREEN",
+//     id: 11,
+//   },
+//   {
+//     name: "EMERALD",
+//     id: 12,
+//   },
+//   {
+//     name: "TEAL",
+//     id: 13,
+//   },
+//   {
+//     name: "CYAN",
+//     id: 14,
+//   },
+//   {
+//     name: "SKY",
+//     id: 15,
+//   },
+//   {
+//     name: "BLUE",
+//     id: 16,
+//   },
+//   {
+//     name: "INDIGO",
+//     id: 17,
+//   },
+//   {
+//     name: "VIOLET",
+//     id: 18,
+//   },
+//   {
+//     name: "PURPLE",
+//     id: 19,
+//   },
+//   {
+//     name: "PINK",
+//     id: 20,
+//   },
+//   {
+//     name: "ROSE",
+//     id: 21,
+//   },
+// ];
+
+export const badgeBgColor = {
+  [Colors.UNDEFINED]: "bg-secondary border border-border text-muted-foreground",
+  [Colors.SLATE]: "bg-slate-50 border border-slate-200 text-slate-800",
+  [Colors.GRAY]: "bg-gray-50 border border-gray-200 text-gray-800",
+  [Colors.NEUTRAL]: "bg-neutral-50 border border-neutral-200 text-neutral-800",
+  [Colors.STONE]: "bg-stone-50 border border-stone-200 text-stone-800",
+  [Colors.RED]: "bg-red-50 border border-red-200 text-red-800",
+  [Colors.ORANGE]: "bg-orange-50 border border-orange-200 text-orange-800",
+  [Colors.AMBER]: "bg-amber-50 border border-amber-200 text-amber-800",
+  [Colors.YELLOW]: "bg-yellow-50 border border-yellow-200 text-yellow-800",
+  [Colors.LIME]: "bg-lime-50 border border-lime-200 text-lime-800",
+  [Colors.GREEN]: "bg-green-50 border border-green-200 text-green-800",
+  [Colors.EMERALD]: "bg-emerald-50 border border-emerald-200 text-emerald-800",
+  [Colors.TEAL]: "bg-teal-50 border border-teal-200 text-teal-800",
+  [Colors.CYAN]: "bg-cyan-50 border border-cyan-200 text-cyan-800",
+  [Colors.SKY]: "bg-sky-50 border border-sky-200 text-sky-800",
+  [Colors.BLUE]: "bg-blue-50 border border-blue-200 text-blue-800",
+  [Colors.INDIGO]: "bg-indigo-50 border border-indigo-200 text-indigo-800",
+  [Colors.VIOLET]: "bg-violet-50 border border-violet-200 text-violet-800",
+  [Colors.PURPLE]: "bg-purple-50 border border-purple-200 text-purple-800",
+  [Colors.FUCHSIA]: "bg-fuchsia-50 border border-fuchsia-200 text-fuchsia-800",
+  [Colors.PINK]: "bg-pink-50 border border-pink-200 text-pink-800",
+  [Colors.ROSE]: "bg-rose-50 border border-rose-200 text-rose-800",
+};
+
+export const badgeBgColorDarkMode = {
+  [Colors.UNDEFINED]: "dark:bg-gray-900 dark:border dark:border-gray-800 dark:text-gray-400",
+  [Colors.SLATE]: "dark:bg-slate-900 dark:border dark:border-slate-800 dark:text-slate-400",
+  [Colors.GRAY]: "dark:bg-gray-900 dark:border dark:border-gray-800 dark:text-gray-400",
+  [Colors.NEUTRAL]: "dark:bg-neutral-900 dark:border dark:border-neutral-800 dark:text-neutral-400",
+  [Colors.STONE]: "dark:bg-stone-900 dark:border dark:border-stone-800 dark:text-stone-400",
+  [Colors.RED]: "dark:bg-red-900 dark:border dark:border-red-800 dark:text-red-400",
+  [Colors.ORANGE]: "dark:bg-orange-900 dark:border dark:border-orange-800 dark:text-orange-400",
+  [Colors.AMBER]: "dark:bg-amber-900 dark:border dark:border-amber-800 dark:text-amber-400",
+  [Colors.YELLOW]: "dark:bg-yellow-900 dark:border dark:border-yellow-800 dark:text-yellow-400",
+  [Colors.LIME]: "dark:bg-lime-900 dark:border dark:border-lime-800 dark:text-lime-400",
+  [Colors.GREEN]: "dark:bg-green-900 dark:border dark:border-green-800 dark:text-green-400",
+  [Colors.EMERALD]: "dark:bg-emerald-900 dark:border dark:border-emerald-800 dark:text-emerald-400",
+  [Colors.TEAL]: "dark:bg-teal-900 dark:border dark:border-teal-800 dark:text-teal-400",
+  [Colors.CYAN]: "dark:bg-cyan-900 dark:border dark:border-cyan-800 dark:text-cyan-400",
+  [Colors.SKY]: "dark:bg-sky-900 dark:border dark:border-sky-800 dark:text-sky-400",
+  [Colors.BLUE]: "dark:bg-blue-900 dark:border dark:border-blue-800 dark:text-blue-400",
+  [Colors.INDIGO]: "dark:bg-indigo-900 dark:border dark:border-indigo-800 dark:text-indigo-400",
+  [Colors.VIOLET]: "dark:bg-violet-900 dark:border dark:border-violet-800 dark:text-violet-400",
+  [Colors.PURPLE]: "dark:bg-purple-900 dark:border dark:border-purple-800 dark:text-purple-400",
+  [Colors.FUCHSIA]: "dark:bg-fuchsia-900 dark:border dark:border-fuchsia-800 dark:text-fuchsia-400",
+  [Colors.PINK]: "dark:bg-pink-900 dark:border dark:border-pink-800 dark:text-pink-400",
+  [Colors.ROSE]: "dark:bg-rose-900 dark:border dark:border-rose-800 dark:text-rose-400",
+};
+
+export const textColor = {
+  [Colors.UNDEFINED]: "text-gray-600",
+  [Colors.SLATE]: "text-slate-600",
+  [Colors.GRAY]: "text-gray-600",
+  [Colors.NEUTRAL]: "text-neutral-600",
+  [Colors.STONE]: "text-stone-600",
+  [Colors.RED]: "text-red-600",
+  [Colors.ORANGE]: "text-orange-600",
+  [Colors.AMBER]: "text-amber-600",
+  [Colors.YELLOW]: "text-yellow-600",
+  [Colors.LIME]: "text-lime-600",
+  [Colors.GREEN]: "text-green-600",
+  [Colors.EMERALD]: "text-emerald-600",
+  [Colors.TEAL]: "text-teal-600",
+  [Colors.CYAN]: "text-cyan-600",
+  [Colors.SKY]: "text-sky-600",
+  [Colors.BLUE]: "text-blue-600",
+  [Colors.INDIGO]: "text-indigo-600",
+  [Colors.VIOLET]: "text-violet-600",
+  [Colors.PURPLE]: "text-purple-600",
+  [Colors.FUCHSIA]: "text-fuchsia-600",
+  [Colors.PINK]: "text-pink-600",
+  [Colors.ROSE]: "text-rose-600",
+};
+
+export const badgeBgColorStrong = {
+  [Colors.UNDEFINED]: "bg-gray-400 border-gray-900 text-gray-900",
+  [Colors.SLATE]: "bg-slate-400 border-slate-900 text-slate-900",
+  [Colors.GRAY]: "bg-gray-400 border-gray-900 text-gray-900",
+  [Colors.NEUTRAL]: "bg-neutral-400 border-neutral-900 text-neutral-900",
+  [Colors.STONE]: "bg-stone-400 border-stone-900 text-stone-900",
+  [Colors.RED]: "bg-red-400 border-red-900 text-red-900",
+  [Colors.ORANGE]: "bg-orange-400 border-orange-900 text-orange-900",
+  [Colors.AMBER]: "bg-amber-400 border-amber-900 text-amber-900",
+  [Colors.YELLOW]: "bg-yellow-400 border-yellow-900 text-yellow-900",
+  [Colors.LIME]: "bg-lime-400 border-lime-900 text-lime-900",
+  [Colors.GREEN]: "bg-green-400 border-green-900 text-green-900",
+  [Colors.EMERALD]: "bg-emerald-400 border-emerald-900 text-emerald-900",
+  [Colors.TEAL]: "bg-teal-400 border-teal-900 text-teal-900",
+  [Colors.CYAN]: "bg-cyan-400 border-cyan-900 text-cyan-900",
+  [Colors.SKY]: "bg-sky-400 border-sky-900 text-sky-900",
+  [Colors.BLUE]: "bg-blue-400 border-blue-900 text-blue-900",
+  [Colors.INDIGO]: "bg-indigo-400 border-indigo-900 text-indigo-900",
+  [Colors.VIOLET]: "bg-violet-400 border-violet-900 text-violet-900",
+  [Colors.PURPLE]: "bg-purple-400 border-purple-900 text-purple-900",
+  [Colors.FUCHSIA]: "bg-fuchsia-400 border-fuchsia-900 text-fuchsia-900",
+  [Colors.PINK]: "bg-pink-400 border-pink-900 text-pink-900",
+  [Colors.ROSE]: "bg-rose-400 border-rose-900 text-rose-900",
+};
+
+export function getBadgeColor(itemColor: Colors | null | undefined, strong?: boolean): string {
+  if (!itemColor) {
+    itemColor = Colors.UNDEFINED;
+  }
+  return clsx(badgeBgColor[itemColor] ?? "", strong && (badgeBgColorStrong[itemColor] ?? ""));
+}
+
+export function getBadgeColorDark(itemColor: Colors | null | undefined, strong?: boolean): string {
+  if (!itemColor) {
+    itemColor = Colors.UNDEFINED;
+  }
+  return clsx(badgeBgColorDarkMode[itemColor]);
+}
+
+export function getTextColor(itemColor: Colors | null | undefined): string {
+  if (!itemColor) {
+    itemColor = Colors.UNDEFINED;
+  }
+  return clsx(textColor[itemColor] ?? "");
+}
+
+export const colorToBg = {
+  [Colors.UNDEFINED]: "bg-gray-500",
+  [Colors.SLATE]: "bg-slate-500",
+  [Colors.GRAY]: "bg-gray-500",
+  [Colors.NEUTRAL]: "bg-neutral-500",
+  [Colors.STONE]: "bg-stone-500",
+  [Colors.RED]: "bg-red-500",
+  [Colors.ORANGE]: "bg-orange-500",
+  [Colors.AMBER]: "bg-amber-500",
+  [Colors.YELLOW]: "bg-yellow-500",
+  [Colors.LIME]: "bg-lime-500",
+  [Colors.GREEN]: "bg-green-500",
+  [Colors.EMERALD]: "bg-emerald-500",
+  [Colors.TEAL]: "bg-teal-500",
+  [Colors.CYAN]: "bg-cyan-500",
+  [Colors.SKY]: "bg-sky-500",
+  [Colors.BLUE]: "bg-blue-500",
+  [Colors.INDIGO]: "bg-indigo-500",
+  [Colors.VIOLET]: "bg-violet-500",
+  [Colors.PURPLE]: "bg-purple-500",
+  [Colors.FUCHSIA]: "bg-fuchsia-500",
+  [Colors.PINK]: "bg-pink-500",
+  [Colors.ROSE]: "bg-rose-500",
+};
+
+export function getBackgroundColor(itemColor: Colors): string {
+  return colorToBg[itemColor] ?? "";
+}

hivegrid-cloud/apps/web/app/utils/shared/DateUtils.ts

@@ -0,0 +1,189 @@
+import { differenceInDays, format, formatDistanceToNow, startOfDay, startOfMinute, startOfMonth, startOfWeek, startOfYear } from "date-fns";
+
+export type DateFormatType = "YYYY-MM-DD" | "DD-MM-YYYY" | "MM-DD-YYYY" | "diff";
+export const DateFormats: { name: string; value: DateFormatType; labelKey: string }[] = [
+  { name: "YYYY-MM-DD", value: "YYYY-MM-DD", labelKey: "formats.date.ymd" },
+  { name: "DD-MM-YYYY", value: "DD-MM-YYYY", labelKey: "formats.date.dmy" },
+  { name: "MM-DD-YYYY", value: "MM-DD-YYYY", labelKey: "formats.date.mdy" },
+  { name: "Difference", value: "diff", labelKey: "formats.date.diff" },
+];
+export type DateDisplay = "ymd" | "ago" | "dm" | "mdy" | "hms" | "ymdhms" | "ymdhmsms";
+
+const coerce = (value: Date | string | null | undefined): Date => {
+  if (value === null || value === undefined) return new Date();
+  return value instanceof Date ? value : new Date(value);
+};
+
+const fmt = (value: Date | string | null | undefined, pattern: string): string => {
+  return format(coerce(value), pattern);
+};
+
+const dateAgo = (value: Date | string | null | undefined): string => {
+  const at = coerce(value);
+  const days = Math.abs(differenceInDays(new Date(), at));
+  if (days <= 1) {
+    return formatDistanceToNow(startOfMinute(at), { addSuffix: true });
+  } else if (days <= 7) {
+    return formatDistanceToNow(startOfDay(at), { addSuffix: true });
+  } else if (days <= 30) {
+    return formatDistanceToNow(startOfWeek(at), { addSuffix: true });
+  } else if (days <= 30 * 12) {
+    return formatDistanceToNow(startOfMonth(at), { addSuffix: true });
+  } else if (days <= 30 * 12 * 2) {
+    return formatDistanceToNow(startOfYear(at), { addSuffix: true });
+  } else {
+    return fmt(at, "yyyy-MM-dd");
+  }
+};
+const dateYMD = (value: Date | string | null | undefined): string => fmt(value, "yyyy-MM-dd");
+const dateDMY = (value: Date | string | null | undefined): string => fmt(value, "dd-MM-yyyy");
+const dateMDY = (value: Date | string | null | undefined): string => fmt(value, "MM-dd-yyyy");
+const dateLL = (value: Date | string | null | undefined): string => fmt(value, "yyyy-MM-dd");
+const dateYMDHM = (value: Date | string | null | undefined): string => fmt(value, "yyyy-MM-dd HH:mm");
+const dateYMDHMS = (value: Date | string | null | undefined): string => fmt(value, "yyyy-MM-dd HH:mm:ss");
+const dateYMDHMSMS = (value: Date | string | null | undefined): string => fmt(value, "yyyy-MM-dd HH:mm:ss.SSS");
+const dateMonthName = (value: Date | string | null | undefined): string => fmt(value, "MMMM yyyy");
+const dateDM = (value: Date | string | null | undefined): string => fmt(value, "d MMM");
+const dateMonthDayYear = (value: Date | string | null | undefined): string => fmt(value, "MMMM d, yyyy");
+const dateMonthDay = (value: Date | string | null | undefined): string => fmt(value, "MMM d");
+const dateHMS = (value: Date | string | null | undefined): string => fmt(value, "HH:mm:ss");
+
+const daysFromDate = (value: Date, days: number) => {
+  return new Date(new Date().setDate(value.getDate() + days));
+};
+
+const diffDays = (a: Date, b: Date) => {
+  const utc1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
+  const utc2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());
+
+  const _MS_PER_DAY = 1000 * 60 * 60 * 24;
+  return (utc2 - utc1) / _MS_PER_DAY;
+};
+
+const add = (value: Date, days: number) => {
+  return new Date(new Date().setDate(value.getDate() + days));
+};
+
+const getMonths = () => {
+  return ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+};
+
+const getMonthName = (month: number): string => {
+  const months: string[] = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+  if (month >= 1 && month <= 12) {
+    return months[month - 1].substring(0, 3);
+  }
+  return "";
+};
+
+const isCurrentMonth = (year: number, month: number): boolean => {
+  const today = new Date();
+  return today.getFullYear() === year && today.getMonth() + 1 === month;
+};
+
+const gteFromFilter = (filter: string, from?: Date) => {
+  let gte: Date | undefined = undefined;
+  if (!from) {
+    from = new Date();
+  }
+
+  if (filter === "all-time") {
+    gte = undefined;
+  } else if (filter === "last-24-hours") {
+    gte = daysFromDate(from, 1 * -1);
+  } else if (filter === "last-7-days") {
+    gte = daysFromDate(from, 7 * -1);
+  } else if (filter === "last-30-days") {
+    gte = daysFromDate(from, 30 * -1);
+  } else if (filter === "last-3-months") {
+    gte = daysFromDate(from, 30 * 3 * -1);
+  } else if (filter === "last-6-months") {
+    gte = daysFromDate(from, 30 * 6 * -1);
+  } else if (filter === "last-year") {
+    gte = daysFromDate(from, 30 * 12 * -1);
+  } else if (filter === "year-to-date") {
+    gte = new Date(from.getFullYear(), 0, 1);
+  } else if (filter === "month-to-date") {
+    gte = new Date(from.getFullYear(), from.getMonth(), 1);
+  } else if (filter === "week-to-date") {
+    gte = new Date(from.getFullYear(), from.getMonth(), from.getDate() - from.getDay());
+  } else if (filter === "last-hour") {
+    gte = new Date(from.getTime() - 60 * 60 * 1000);
+  } else if (filter === "last-10-minutes") {
+    gte = new Date(from.getTime() - 10 * 60 * 1000);
+  }
+  return gte;
+};
+
+const getDuration = ({ start, end, format = "s" }: { start: Date; end: Date; format: "ms" | "s" | "m" | "h" | "d" | "w" | "M" | "y" }) => {
+  const diff = +new Date(end) - +new Date(start);
+  const seconds = Math.floor(diff / 1000);
+  switch (format) {
+    case "ms":
+      return diff;
+    case "s":
+      return seconds;
+    case "m":
+      return Math.floor(seconds / 60);
+    case "h":
+      return Math.floor(seconds / 3600);
+    case "d":
+      return Math.floor(seconds / 86400);
+    case "w":
+      return Math.floor(seconds / 604800);
+    case "M":
+      return Math.floor(seconds / 2592000);
+    case "y":
+      return Math.floor(seconds / 31536000);
+    default:
+      return diff;
+  }
+};
+
+function getDurationInSeconds({ start, end }: { start: Date | null; end: Date | null }) {
+  if (start && end) {
+    const diff = +new Date(end) - +new Date(start);
+    const seconds = Math.floor(diff / 1000);
+
+    if (seconds < 60) {
+      return `${seconds}s`;
+    } else {
+      return `${Math.floor(seconds / 60)}m ${seconds % 60}s`;
+    }
+  }
+  return "-";
+}
+
+function getDateStartOfDay(date: Date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
+}
+function getDateEndOfDay(date: Date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999);
+}
+
+export default {
+  dateAgo,
+  dateYMD,
+  dateDMY,
+  dateMDY,
+  dateLL,
+  dateYMDHM,
+  dateYMDHMS,
+  dateYMDHMSMS,
+  dateMonthName,
+  dateDM,
+  dateHMS,
+  dateMonthDayYear,
+  dateMonthDay,
+  daysFromDate,
+  diffDays,
+  add,
+  getMonths,
+  getMonthName,
+  isCurrentMonth,
+  gteFromFilter,
+  getDuration,
+  getDurationInSeconds,
+  getDateStartOfDay,
+  getDateEndOfDay,
+};

hivegrid-cloud/apps/web/app/utils/shared/KeypressUtils.ts

@@ -0,0 +1,47 @@
+import { useCallback, useEffect, useRef } from "react";
+
+function useKeypress(callback: () => void, keyCode: number) {
+  const escFunction = useCallback((event: any) => {
+    if (event.keyCode === keyCode) {
+      callback();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    document.addEventListener("keydown", escFunction, false);
+
+    return () => {
+      document.removeEventListener("keydown", escFunction, false);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+}
+
+export function useEscapeKeypress(callback: () => void) {
+  useKeypress(callback, 27);
+}
+
+export function useEnterKeypress(callback: () => void) {
+  useKeypress(callback, 13);
+}
+
+export function useOuterClick(callback: () => void) {
+  const callbackRef = useRef<any>(null); // initialize mutable ref, which stores callback
+  const innerRef = useRef<any>(null); // returned to client, who marks "border" element
+
+  // update cb on each render, so second useEffect has access to current value
+  useEffect(() => {
+    callbackRef.current = callback;
+  });
+
+  useEffect(() => {
+    document.addEventListener("click", handleClick);
+    return () => document.removeEventListener("click", handleClick);
+    function handleClick(e: any) {
+      if (innerRef.current && callbackRef.current && !innerRef.current.contains(e.target)) callbackRef.current(e);
+    }
+  }, []); // no dependencies -> stable click listener
+
+  return innerRef; // convenience for client (doesn't need to init ref himself)
+}

hivegrid-cloud/apps/web/app/utils/shared/NumberUtils.test.tsx

@@ -0,0 +1,48 @@
+import { describe, it, expect } from "vitest";
+import NumberUtils, { NumberFormats } from "./NumberUtils";
+
+describe("Number Formatting", () => {
+  it("should format integer values correctly", () => {
+    const input = 1234567890;
+    const expectedOutput = "1,234,567,890";
+    const output = NumberUtils.intFormat(input);
+    expect(output).toStrictEqual(expectedOutput);
+  });
+
+  it("should format decimal values correctly", () => {
+    const input = 1234567.89;
+    const expectedOutput = "1,234,567.89";
+    const output = NumberUtils.decimalFormat(input);
+    expect(output).toStrictEqual(expectedOutput);
+  });
+
+  it("should format numbers as currency correctly", () => {
+    const input = 1234567.89;
+    const expectedOutput = "1,234,568";
+    const output = NumberUtils.numberFormat(input);
+    expect(output).toStrictEqual(expectedOutput);
+  });
+
+  it("should pad numbers correctly", () => {
+    const input = 42;
+    const expectedOutput = "00042";
+    const output = NumberUtils.pad(input, 5);
+    expect(output).toStrictEqual(expectedOutput);
+  });
+
+  it("should have the correct default currency symbol", () => {
+    const expectedOutput = "$";
+    expect(NumberUtils.defaultCurrencySymbol).toStrictEqual(expectedOutput);
+  });
+
+  it("should have the correct number formats", () => {
+    const expectedOutput = [
+      { name: "Integer", value: "integer", labelKey: "formats.number.integer" },
+      { name: "Decimal", value: "decimal", labelKey: "formats.number.decimal" },
+      { name: "Currency", value: "currency", labelKey: "formats.number.currency" },
+      { name: "Percent", value: "percentage", labelKey: "formats.number.percent" },
+      { name: "Rating", value: "rating", labelKey: "formats.number.rating" },
+    ];
+    expect(NumberFormats).toStrictEqual(expectedOutput);
+  });
+});

hivegrid-cloud/apps/web/app/utils/shared/NumberUtils.ts

@@ -0,0 +1,86 @@
+import numeral from "numeral";
+import { formatCurrency, formatNumber, formatPercent } from "~/locale/format";
+
+export const defaultCurrencySymbol = "$";
+export const defaultCurrency = "USD";
+const legacyNumberLocale = "en-US";
+export type NumberFormatType = "integer" | "decimal" | "currency" | "percentage" | "rating";
+export const NumberFormats: { name: string; value: NumberFormatType; labelKey: string }[] = [
+  { name: "Integer", value: "integer", labelKey: "formats.number.integer" },
+  { name: "Decimal", value: "decimal", labelKey: "formats.number.decimal" },
+  { name: "Currency", value: "currency", labelKey: "formats.number.currency" },
+  { name: "Percent", value: "percentage", labelKey: "formats.number.percent" },
+  { name: "Rating", value: "rating", labelKey: "formats.number.rating" },
+];
+
+const numberFormat = (value: number): string => {
+  try {
+    return formatNumber(value, legacyNumberLocale, { maximumFractionDigits: 0 });
+  } catch (e) {
+    return value?.toString();
+  }
+};
+const decimalFormat = (value: number, decimalPlaces: number = 2): string => {
+  try {
+    return formatNumber(value, legacyNumberLocale, {
+      minimumFractionDigits: decimalPlaces,
+      maximumFractionDigits: decimalPlaces,
+    });
+  } catch (e) {
+    return value?.toString();
+  }
+};
+const intFormat = (value: number | string): string => {
+  try {
+    return formatNumber(Number(value), legacyNumberLocale, { maximumFractionDigits: 0 });
+  } catch (e) {
+    return value?.toString();
+  }
+};
+const currencyFormat = (value: number, currency: string = defaultCurrency, decimalPlaces: number = 2, locale: string = legacyNumberLocale): string => {
+  try {
+    return formatCurrency(value, currency.toUpperCase(), locale, {
+      minimumFractionDigits: decimalPlaces,
+      maximumFractionDigits: decimalPlaces,
+    });
+  } catch (e) {
+    return `${defaultCurrencySymbol}${decimalFormat(value, decimalPlaces)}`;
+  }
+};
+const currencyFromCents = (cents: number, currency: string = defaultCurrency, decimalPlaces: number = 2, locale: string = legacyNumberLocale): string => {
+  return currencyFormat(cents / 100, currency, decimalPlaces, locale);
+};
+const percentFormat = (value: number, decimalPlaces: number = 2, locale: string = legacyNumberLocale): string => {
+  try {
+    return formatPercent(value / 100, locale, {
+      minimumFractionDigits: decimalPlaces,
+      maximumFractionDigits: decimalPlaces,
+    });
+  } catch (e) {
+    return `${decimalFormat(value, decimalPlaces)}%`;
+  }
+};
+const pad = (num: number, size: number) => {
+  const s = "000000000" + num;
+  return s.substring(s.length - size);
+};
+const custom = (value: number, format: string): string => {
+  try {
+    return numeral(value).format(format);
+  } catch (e) {
+    return value?.toString();
+  }
+};
+
+export default {
+  numberFormat,
+  decimalFormat,
+  intFormat,
+  currencyFormat,
+  currencyFromCents,
+  percentFormat,
+  pad,
+  defaultCurrencySymbol,
+  defaultCurrency,
+  custom,
+};

hivegrid-cloud/apps/web/app/utils/shared/ObjectUtils.ts

@@ -0,0 +1,16 @@
+export function updateItem(items: any[], setItems: any, id: string, itemAttributes: any, idProp = "id") {
+  const index = items.findIndex((x) => x[idProp] === id);
+  if (index !== -1) {
+    setItems([...items.slice(0, index), Object.assign({}, items[index], itemAttributes), ...items.slice(index + 1)]);
+  }
+}
+
+export function updateItemByIdx(items: any[], setItems: any, index: number, itemAttributes: any) {
+  if (index !== -1) {
+    setItems([...items.slice(0, index), Object.assign({}, items[index], itemAttributes), ...items.slice(index + 1)]);
+  }
+}
+
+export function isEqual(a: any, b: any) {
+  return JSON.stringify(a) === JSON.stringify(b);
+}

hivegrid-cloud/apps/web/app/utils/shared/SelectOptionsUtils.ts

@@ -0,0 +1,23 @@
+export type SelectOptionsDisplay =
+  | "Name"
+  | "Value"
+  | "Color"
+  | "NameAndValue"
+  | "ValueAndName"
+  | "ValueNameAndColor"
+  | "NameValueAndColor"
+  | "NameAndColor"
+  | "ValueAndColor"
+  | "ColorWithTitle";
+export const SelectOptionsFormats: { name: string; value: SelectOptionsDisplay; labelKey: string }[] = [
+  { name: "Name", value: "Name", labelKey: "formats.selectOptions.name" },
+  { name: "Value", value: "Value", labelKey: "formats.selectOptions.value" },
+  { name: "Color", value: "Color", labelKey: "formats.selectOptions.color" },
+  { name: "Name and value", value: "NameAndValue", labelKey: "formats.selectOptions.nameAndValue" },
+  { name: "Value and name", value: "ValueAndName", labelKey: "formats.selectOptions.valueAndName" },
+  { name: "Value, name and color", value: "ValueNameAndColor", labelKey: "formats.selectOptions.valueNameAndColor" },
+  { name: "Name, value and color", value: "NameValueAndColor", labelKey: "formats.selectOptions.nameValueAndColor" },
+  { name: "Name and color", value: "NameAndColor", labelKey: "formats.selectOptions.nameAndColor" },
+  { name: "Value and color", value: "ValueAndColor", labelKey: "formats.selectOptions.valueAndColor" },
+  { name: "Color with title", value: "ColorWithTitle", labelKey: "formats.selectOptions.colorWithTitle" },
+];

hivegrid-cloud/apps/web/app/utils/shared/SeparatorUtils.ts

@@ -0,0 +1,27 @@
+export type SeparatorFormatType = "Enter" | "Tab" | "," | ";" | " " | ".";
+export const SeparatorFormats: { name: string; value: SeparatorFormatType; labelKey: string }[] = [
+  { name: "Enter", value: "Enter", labelKey: "formats.separator.enter" },
+  { name: "Tab", value: "Tab", labelKey: "formats.separator.tab" },
+  { name: "Comma", value: ",", labelKey: "formats.separator.comma" },
+  { name: "Semicolon", value: ";", labelKey: "formats.separator.semicolon" },
+  { name: "Space", value: " ", labelKey: "formats.separator.space" },
+  { name: "Dot", value: ".", labelKey: "formats.separator.dot" },
+];
+export function getSeparator(separator: string | undefined): SeparatorFormatType {
+  switch (separator) {
+    case "Enter":
+      return "Enter";
+    case "Tab":
+      return "Tab";
+    case ",":
+      return ",";
+    case ";":
+      return ";";
+    case " ":
+      return " ";
+    case ".":
+      return ".";
+    default:
+      return "Enter";
+  }
+}

hivegrid-cloud/apps/web/app/utils/shared/StringUtils.ts

@@ -0,0 +1,16 @@
+const toCamelCase = (value: string) => {
+  return value
+    .replace(/(?:^\w|[A-Z]|\b\w)/g, function (word, index) {
+      return index === 0 ? word.toLowerCase() : word.toUpperCase();
+    })
+    .replace(/\s+/g, "")
+    .replace(/[^a-z0-9]/gi, "");
+};
+const capitalize = (str: string) => {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};
+
+export default {
+  toCamelCase,
+  capitalize,
+};

hivegrid-cloud/apps/web/app/utils/shared/WysiwygUtils.ts

@@ -0,0 +1,22 @@
+const toolbarOptions = [
+  ["bold", "italic", "underline", "strike"], // toggled buttons
+  ["blockquote", "code-block", "link"],
+
+  [{ header: 1 }, { header: 2 }], // custom button values
+  [{ list: "ordered" }, { list: "bullet" }],
+  // [{ script: "sub" }, { script: "super" }], // superscript/subscript
+  [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
+  // [{ direction: "rtl" }], // text direction
+
+  // [{ size: ["small", false, "large", "huge"] }], // custom dropdown
+  [{ header: [1, 2, 3, 4, 5, 6, false] }],
+
+  [{ color: [] }, { background: [] }], // dropdown with defaults from theme
+  // [{ font: [] }],
+  [{ align: [] }],
+
+  ["clean"], // remove formatting button
+];
+export default {
+  toolbarOptions,
+};

hivegrid-cloud/apps/web/app/utils/shared/colors/ColorBackgroundUtils.ts

@@ -0,0 +1,254 @@
+import { Colors } from "~/application/enums/shared/Colors";
+
+function getBg50(itemColor: Colors): string {
+  switch (itemColor) {
+    case Colors.UNDEFINED:
+      return "bg-gray-50";
+    case Colors.SLATE:
+      return "bg-slate-50";
+    case Colors.GRAY:
+      return "bg-gray-50";
+    case Colors.NEUTRAL:
+      return "bg-neutral-50";
+    case Colors.STONE:
+      return "bg-stone-50";
+    case Colors.RED:
+      return "bg-red-50";
+    case Colors.ORANGE:
+      return "bg-orange-50";
+    case Colors.AMBER:
+      return "bg-amber-50";
+    case Colors.YELLOW:
+      return "bg-yellow-50";
+    case Colors.LIME:
+      return "bg-lime-50";
+    case Colors.GREEN:
+      return "bg-green-50";
+    case Colors.EMERALD:
+      return "bg-emerald-50";
+    case Colors.TEAL:
+      return "bg-teal-50";
+    case Colors.CYAN:
+      return "bg-cyan-50";
+    case Colors.SKY:
+      return "bg-sky-50";
+    case Colors.BLUE:
+      return "bg-blue-50";
+    case Colors.INDIGO:
+      return "bg-indigo-50";
+    case Colors.VIOLET:
+      return "bg-violet-50";
+    case Colors.PURPLE:
+      return "bg-purple-50";
+    case Colors.FUCHSIA:
+      return "bg-fuchsia-50";
+    case Colors.PINK:
+      return "bg-pink-50";
+    case Colors.ROSE:
+      return "bg-rose-50";
+  }
+}
+
+function getBg400(itemColor: Colors): string {
+  switch (itemColor) {
+    case Colors.UNDEFINED:
+      return "bg-gray-400";
+    case Colors.SLATE:
+      return "bg-slate-400";
+    case Colors.GRAY:
+      return "bg-gray-400";
+    case Colors.NEUTRAL:
+      return "bg-neutral-400";
+    case Colors.STONE:
+      return "bg-stone-400";
+    case Colors.RED:
+      return "bg-red-400";
+    case Colors.ORANGE:
+      return "bg-orange-400";
+    case Colors.AMBER:
+      return "bg-amber-400";
+    case Colors.YELLOW:
+      return "bg-yellow-400";
+    case Colors.LIME:
+      return "bg-lime-400";
+    case Colors.GREEN:
+      return "bg-green-400";
+    case Colors.EMERALD:
+      return "bg-emerald-400";
+    case Colors.TEAL:
+      return "bg-teal-400";
+    case Colors.CYAN:
+      return "bg-cyan-400";
+    case Colors.SKY:
+      return "bg-sky-400";
+    case Colors.BLUE:
+      return "bg-blue-400";
+    case Colors.INDIGO:
+      return "bg-indigo-400";
+    case Colors.VIOLET:
+      return "bg-violet-400";
+    case Colors.PURPLE:
+      return "bg-purple-400";
+    case Colors.FUCHSIA:
+      return "bg-fuchsia-400";
+    case Colors.PINK:
+      return "bg-pink-400";
+    case Colors.ROSE:
+      return "bg-rose-400";
+  }
+}
+
+function getBg700(itemColor: Colors): string {
+  switch (itemColor) {
+    case Colors.UNDEFINED:
+      return "bg-gray-700";
+    case Colors.SLATE:
+      return "bg-slate-700";
+    case Colors.GRAY:
+      return "bg-gray-700";
+    case Colors.NEUTRAL:
+      return "bg-neutral-700";
+    case Colors.STONE:
+      return "bg-stone-700";
+    case Colors.RED:
+      return "bg-red-700";
+    case Colors.ORANGE:
+      return "bg-orange-700";
+    case Colors.AMBER:
+      return "bg-amber-700";
+    case Colors.YELLOW:
+      return "bg-yellow-700";
+    case Colors.LIME:
+      return "bg-lime-700";
+    case Colors.GREEN:
+      return "bg-green-700";
+    case Colors.EMERALD:
+      return "bg-emerald-700";
+    case Colors.TEAL:
+      return "bg-teal-700";
+    case Colors.CYAN:
+      return "bg-cyan-700";
+    case Colors.SKY:
+      return "bg-sky-700";
+    case Colors.BLUE:
+      return "bg-blue-700";
+    case Colors.INDIGO:
+      return "bg-indigo-700";
+    case Colors.VIOLET:
+      return "bg-violet-700";
+    case Colors.PURPLE:
+      return "bg-purple-700";
+    case Colors.FUCHSIA:
+      return "bg-fuchsia-700";
+    case Colors.PINK:
+      return "bg-pink-700";
+    case Colors.ROSE:
+      return "bg-rose-700";
+  }
+}
+
+function getBg800(itemColor: Colors): string {
+  switch (itemColor) {
+    case Colors.UNDEFINED:
+      return "bg-gray-800";
+    case Colors.SLATE:
+      return "bg-slate-800";
+    case Colors.GRAY:
+      return "bg-gray-800";
+    case Colors.NEUTRAL:
+      return "bg-neutral-800";
+    case Colors.STONE:
+      return "bg-stone-800";
+    case Colors.RED:
+      return "bg-red-800";
+    case Colors.ORANGE:
+      return "bg-orange-800";
+    case Colors.AMBER:
+      return "bg-amber-800";
+    case Colors.YELLOW:
+      return "bg-yellow-800";
+    case Colors.LIME:
+      return "bg-lime-800";
+    case Colors.GREEN:
+      return "bg-green-800";
+    case Colors.EMERALD:
+      return "bg-emerald-800";
+    case Colors.TEAL:
+      return "bg-teal-800";
+    case Colors.CYAN:
+      return "bg-cyan-800";
+    case Colors.SKY:
+      return "bg-sky-800";
+    case Colors.BLUE:
+      return "bg-blue-800";
+    case Colors.INDIGO:
+      return "bg-indigo-800";
+    case Colors.VIOLET:
+      return "bg-violet-800";
+    case Colors.PURPLE:
+      return "bg-purple-800";
+    case Colors.FUCHSIA:
+      return "bg-fuchsia-800";
+    case Colors.PINK:
+      return "bg-pink-800";
+    case Colors.ROSE:
+      return "bg-rose-800";
+  }
+}
+
+function getBg900(itemColor: Colors): string {
+  switch (itemColor) {
+    case Colors.UNDEFINED:
+      return "bg-gray-900";
+    case Colors.SLATE:
+      return "bg-slate-900";
+    case Colors.GRAY:
+      return "bg-gray-900";
+    case Colors.NEUTRAL:
+      return "bg-neutral-900";
+    case Colors.STONE:
+      return "bg-stone-900";
+    case Colors.RED:
+      return "bg-red-900";
+    case Colors.ORANGE:
+      return "bg-orange-900";
+    case Colors.AMBER:
+      return "bg-amber-900";
+    case Colors.YELLOW:
+      return "bg-yellow-900";
+    case Colors.LIME:
+      return "bg-lime-900";
+    case Colors.GREEN:
+      return "bg-green-900";
+    case Colors.EMERALD:
+      return "bg-emerald-900";
+    case Colors.TEAL:
+      return "bg-teal-900";
+    case Colors.CYAN:
+      return "bg-cyan-900";
+    case Colors.SKY:
+      return "bg-sky-900";
+    case Colors.BLUE:
+      return "bg-blue-900";
+    case Colors.INDIGO:
+      return "bg-indigo-900";
+    case Colors.VIOLET:
+      return "bg-violet-900";
+    case Colors.PURPLE:
+      return "bg-purple-900";
+    case Colors.FUCHSIA:
+      return "bg-fuchsia-900";
+    case Colors.PINK:
+      return "bg-pink-900";
+    case Colors.ROSE:
+      return "bg-rose-900";
+  }
+}
+
+export default {
+  getBg50,
+  getBg400,
+  getBg700,
+  getBg800,
+  getBg900,
+};

hivegrid-cloud/apps/web/app/utils/shared/colors/ColorBorderUtils.ts

@@ -0,0 +1,254 @@
+import { Colors } from "~/application/enums/shared/Colors";
+
+function get100(itemColor: Colors): string {
+  switch (itemColor) {
+    case Colors.UNDEFINED:
+      return "border-gray-100";
+    case Colors.SLATE:
+      return "border-slate-100";
+    case Colors.GRAY:
+      return "border-gray-100";
+    case Colors.NEUTRAL:
+      return "border-neutral-100";
+    case Colors.STONE:
+      return "border-stone-100";
+    case Colors.RED:
+      return "border-red-100";
+    case Colors.ORANGE:
+      return "border-orange-100";
+    case Colors.AMBER:
+      return "border-amber-100";
+    case Colors.YELLOW:
+      return "border-yellow-100";
+    case Colors.LIME:
+      return "border-lime-100";
+    case Colors.GREEN:
+      return "border-green-100";
+    case Colors.EMERALD:
+      return "border-emerald-100";
+    case Colors.TEAL:
+      return "border-teal-100";
+    case Colors.CYAN:
+      return "border-cyan-100";
+    case Colors.SKY:
+      return "border-sky-100";
+    case Colors.BLUE:
+      return "border-blue-100";
+    case Colors.INDIGO:
+      return "border-indigo-100";
+    case Colors.VIOLET:
+      return "border-violet-100";
+    case Colors.PURPLE:
+      return "border-purple-100";
+    case Colors.FUCHSIA:
+      return "border-fuchsia-100";
+    case Colors.PINK:
+      return "border-pink-100";
+    case Colors.ROSE:
+      return "border-rose-100";
+  }
+}
+
+function get200(itemColor: Colors): string {
+  switch (itemColor) {
+    case Colors.UNDEFINED:
+      return "border-border";
+    case Colors.SLATE:
+      return "border-slate-200";
+    case Colors.GRAY:
+      return "border-gray-200";
+    case Colors.NEUTRAL:
+      return "border-neutral-200";
+    case Colors.STONE:
+      return "border-stone-200";
+    case Colors.RED:
+      return "border-red-200";
+    case Colors.ORANGE:
+      return "border-orange-200";
+    case Colors.AMBER:
+      return "border-amber-200";
+    case Colors.YELLOW:
+      return "border-yellow-200";
+    case Colors.LIME:
+      return "border-lime-200";
+    case Colors.GREEN:
+      return "border-green-200";
+    case Colors.EMERALD:
+      return "border-emerald-200";
+    case Colors.TEAL:
+      return "border-teal-200";
+    case Colors.CYAN:
+      return "border-cyan-200";
+    case Colors.SKY:
+      return "border-sky-200";
+    case Colors.BLUE:
+      return "border-blue-200";
+    case Colors.INDIGO:
+      return "border-indigo-200";
+    case Colors.VIOLET:
+      return "border-violet-200";
+    case Colors.PURPLE:
+      return "border-purple-200";
+    case Colors.FUCHSIA:
+      return "border-fuchsia-200";
+    case Colors.PINK:
+      return "border-pink-200";
+    case Colors.ROSE:
+      return "border-rose-200";
+  }
+}
+
+function get300(itemColor: Colors): string {
+  switch (itemColor) {
+    case Colors.UNDEFINED:
+      return "border-border";
+    case Colors.SLATE:
+      return "border-slate-300";
+    case Colors.GRAY:
+      return "border-gray-300";
+    case Colors.NEUTRAL:
+      return "border-neutral-300";
+    case Colors.STONE:
+      return "border-stone-300";
+    case Colors.RED:
+      return "border-red-300";
+    case Colors.ORANGE:
+      return "border-orange-300";
+    case Colors.AMBER:
+      return "border-amber-300";
+    case Colors.YELLOW:
+      return "border-yellow-300";
+    case Colors.LIME:
+      return "border-lime-300";
+    case Colors.GREEN:
+      return "border-green-300";
+    case Colors.EMERALD:
+      return "border-emerald-300";
+    case Colors.TEAL:
+      return "border-teal-300";
+    case Colors.CYAN:
+      return "border-cyan-300";
+    case Colors.SKY:
+      return "border-sky-300";
+    case Colors.BLUE:
+      return "border-blue-300";
+    case Colors.INDIGO:
+      return "border-indigo-300";
+    case Colors.VIOLET:
+      return "border-violet-300";
+    case Colors.PURPLE:
+      return "border-purple-300";
+    case Colors.FUCHSIA:
+      return "border-fuchsia-300";
+    case Colors.PINK:
+      return "border-pink-300";
+    case Colors.ROSE:
+      return "border-rose-300";
+  }
+}
+
+function get900(itemColor: Colors): string {
+  switch (itemColor) {
+    case Colors.UNDEFINED:
+      return "border-gray-900";
+    case Colors.SLATE:
+      return "border-slate-900";
+    case Colors.GRAY:
+      return "border-gray-900";
+    case Colors.NEUTRAL:
+      return "border-neutral-900";
+    case Colors.STONE:
+      return "border-stone-900";
+    case Colors.RED:
+      return "border-red-900";
+    case Colors.ORANGE:
+      return "border-orange-900";
+    case Colors.AMBER:
+      return "border-amber-900";
+    case Colors.YELLOW:
+      return "border-yellow-900";
+    case Colors.LIME:
+      return "border-lime-900";
+    case Colors.GREEN:
+      return "border-green-900";
+    case Colors.EMERALD:
+      return "border-emerald-900";
+    case Colors.TEAL:
+      return "border-teal-900";
+    case Colors.CYAN:
+      return "border-cyan-900";
+    case Colors.SKY:
+      return "border-sky-900";
+    case Colors.BLUE:
+      return "border-blue-900";
+    case Colors.INDIGO:
+      return "border-indigo-900";
+    case Colors.VIOLET:
+      return "border-violet-900";
+    case Colors.PURPLE:
+      return "border-purple-900";
+    case Colors.FUCHSIA:
+      return "border-fuchsia-900";
+    case Colors.PINK:
+      return "border-pink-900";
+    case Colors.ROSE:
+      return "border-rose-900";
+  }
+}
+
+function getLeft400(itemColor: Colors): string {
+  switch (itemColor) {
+    case Colors.UNDEFINED:
+      return "border-l-gray-400";
+    case Colors.SLATE:
+      return "border-l-slate-400";
+    case Colors.GRAY:
+      return "border-l-gray-400";
+    case Colors.NEUTRAL:
+      return "border-l-neutral-400";
+    case Colors.STONE:
+      return "border-l-stone-400";
+    case Colors.RED:
+      return "border-l-red-400";
+    case Colors.ORANGE:
+      return "border-l-orange-400";
+    case Colors.AMBER:
+      return "border-l-amber-400";
+    case Colors.YELLOW:
+      return "border-l-yellow-400";
+    case Colors.LIME:
+      return "border-l-lime-400";
+    case Colors.GREEN:
+      return "border-l-green-400";
+    case Colors.EMERALD:
+      return "border-l-emerald-400";
+    case Colors.TEAL:
+      return "border-l-teal-400";
+    case Colors.CYAN:
+      return "border-l-cyan-400";
+    case Colors.SKY:
+      return "border-l-sky-400";
+    case Colors.BLUE:
+      return "border-l-blue-400";
+    case Colors.INDIGO:
+      return "border-l-indigo-400";
+    case Colors.VIOLET:
+      return "border-l-violet-400";
+    case Colors.PURPLE:
+      return "border-l-purple-400";
+    case Colors.FUCHSIA:
+      return "border-l-fuchsia-400";
+    case Colors.PINK:
+      return "border-l-pink-400";
+    case Colors.ROSE:
+      return "border-l-rose-400";
+  }
+}
+
+export default {
+  get100,
+  get200,
+  get300,
+  get900,
+  getLeft400,
+};

hivegrid-cloud/apps/web/app/utils/shared/colors/ColorDarkUtils.ts

@@ -0,0 +1,104 @@
+import { Colors } from "~/application/enums/shared/Colors";
+
+function getBg600(itemColor: Colors): string {
+  switch (itemColor) {
+    case Colors.UNDEFINED:
+      return "dark:bg-gray-600";
+    case Colors.SLATE:
+      return "dark:bg-slate-600";
+    case Colors.GRAY:
+      return "dark:bg-gray-600";
+    case Colors.NEUTRAL:
+      return "dark:bg-neutral-600";
+    case Colors.STONE:
+      return "dark:bg-stone-600";
+    case Colors.RED:
+      return "dark:bg-red-600";
+    case Colors.ORANGE:
+      return "dark:bg-orange-600";
+    case Colors.AMBER:
+      return "dark:bg-amber-600";
+    case Colors.YELLOW:
+      return "dark:bg-yellow-600";
+    case Colors.LIME:
+      return "dark:bg-lime-600";
+    case Colors.GREEN:
+      return "dark:bg-green-600";
+    case Colors.EMERALD:
+      return "dark:bg-emerald-600";
+    case Colors.TEAL:
+      return "dark:bg-teal-600";
+    case Colors.CYAN:
+      return "dark:bg-cyan-600";
+    case Colors.SKY:
+      return "dark:bg-sky-600";
+    case Colors.BLUE:
+      return "dark:bg-blue-600";
+    case Colors.INDIGO:
+      return "dark:bg-indigo-600";
+    case Colors.VIOLET:
+      return "dark:bg-violet-600";
+    case Colors.PURPLE:
+      return "dark:bg-purple-600";
+    case Colors.FUCHSIA:
+      return "dark:bg-fuchsia-600";
+    case Colors.PINK:
+      return "dark:bg-pink-600";
+    case Colors.ROSE:
+      return "dark:bg-rose-600";
+  }
+}
+
+function getBg900(itemColor: Colors): string {
+  switch (itemColor) {
+    case Colors.UNDEFINED:
+      return "dark:bg-gray-900";
+    case Colors.SLATE:
+      return "dark:bg-slate-900";
+    case Colors.GRAY:
+      return "dark:bg-gray-900";
+    case Colors.NEUTRAL:
+      return "dark:bg-neutral-900";
+    case Colors.STONE:
+      return "dark:bg-stone-900";
+    case Colors.RED:
+      return "dark:bg-red-900";
+    case Colors.ORANGE:
+      return "dark:bg-orange-900";
+    case Colors.AMBER:
+      return "dark:bg-amber-900";
+    case Colors.YELLOW:
+      return "dark:bg-yellow-900";
+    case Colors.LIME:
+      return "dark:bg-lime-900";
+    case Colors.GREEN:
+      return "dark:bg-green-900";
+    case Colors.EMERALD:
+      return "dark:bg-emerald-900";
+    case Colors.TEAL:
+      return "dark:bg-teal-900";
+    case Colors.CYAN:
+      return "dark:bg-cyan-900";
+    case Colors.SKY:
+      return "dark:bg-sky-900";
+    case Colors.BLUE:
+      return "dark:bg-blue-900";
+    case Colors.INDIGO:
+      return "dark:bg-indigo-900";
+    case Colors.VIOLET:
+      return "dark:bg-violet-900";
+    case Colors.PURPLE:
+      return "dark:bg-purple-900";
+    case Colors.FUCHSIA:
+      return "dark:bg-fuchsia-900";
+    case Colors.PINK:
+      return "dark:bg-pink-900";
+    case Colors.ROSE:
+      return "dark:bg-rose-900";
+  }
+}
+
+export default {
+  getBg600,
+  getBg900,
+};

hivegrid-cloud/apps/web/app/utils/shared/colors/ColorFocusUtils.ts

@@ -0,0 +1,154 @@
+import { Colors } from "~/application/enums/shared/Colors";
+
+function getRing600(itemColor: Colors): string {
+  switch (itemColor) {
+    case Colors.UNDEFINED:
+      return "focus:ring-gray-600";
+    case Colors.SLATE:
+      return "focus:ring-slate-600";
+    case Colors.GRAY:
+      return "focus:ring-gray-600";
+    case Colors.NEUTRAL:
+      return "focus:ring-neutral-600";
+    case Colors.STONE:
+      return "focus:ring-stone-600";
+    case Colors.RED:
+      return "focus:ring-red-600";
+    case Colors.ORANGE:
+      return "focus:ring-orange-600";
+    case Colors.AMBER:
+      return "focus:ring-amber-600";
+    case Colors.YELLOW:
+      return "focus:ring-yellow-600";
+    case Colors.LIME:
+      return "focus:ring-lime-600";
+    case Colors.GREEN:
+      return "focus:ring-green-600";
+    case Colors.EMERALD:
+      return "focus:ring-emerald-600";
+    case Colors.TEAL:
+      return "focus:ring-teal-600";
+    case Colors.CYAN:
+      return "focus:ring-cyan-600";
+    case Colors.SKY:
+      return "focus:ring-sky-600";
+    case Colors.BLUE:
+      return "focus:ring-blue-600";
+    case Colors.INDIGO:
+      return "focus:ring-indigo-600";
+    case Colors.VIOLET:
+      return "focus:ring-violet-600";
+    case Colors.PURPLE:
+      return "focus:ring-purple-600";
+    case Colors.FUCHSIA:
+      return "focus:ring-fuchsia-600";
+    case Colors.PINK:
+      return "focus:ring-pink-600";
+    case Colors.ROSE:
+      return "focus:ring-rose-600";
+  }
+}
+
+function getText600(itemColor: Colors): string {
+  switch (itemColor) {
+    case Colors.UNDEFINED:
+      return "focus:text-gray-600";
+    case Colors.SLATE:
+      return "focus:text-slate-600";
+    case Colors.GRAY:
+      return "focus:text-gray-600";
+    case Colors.NEUTRAL:
+      return "focus:text-neutral-600";
+    case Colors.STONE:
+      return "focus:text-stone-600";
+    case Colors.RED:
+      return "focus:text-red-600";
+    case Colors.ORANGE:
+      return "focus:text-orange-600";
+    case Colors.AMBER:
+      return "focus:text-amber-600";
+    case Colors.YELLOW:
+      return "focus:text-yellow-600";
+    case Colors.LIME:
+      return "focus:text-lime-600";
+    case Colors.GREEN:
+      return "focus:text-green-600";
+    case Colors.EMERALD:
+      return "focus:text-emerald-600";
+    case Colors.TEAL:
+      return "focus:text-teal-600";
+    case Colors.CYAN:
+      return "focus:text-cyan-600";
+    case Colors.SKY:
+      return "focus:text-sky-600";
+    case Colors.BLUE:
+      return "focus:text-blue-600";
+    case Colors.INDIGO:
+      return "focus:text-indigo-600";
+    case Colors.VIOLET:
+      return "focus:text-violet-600";
+    case Colors.PURPLE:
+      return "focus:text-purple-600";
+    case Colors.FUCHSIA:
+      return "focus:text-fuchsia-600";
+    case Colors.PINK:
+      return "focus:text-pink-600";
+    case Colors.ROSE:
+      return "focus:text-rose-600";
+  }
+}
+
+function getPlaceholder600(itemColor: Colors): string {
+  switch (itemColor) {
+    case Colors.UNDEFINED:
+      return "focus:placeholder-gray-600";
+    case Colors.SLATE:
+      return "focus:placeholder-slate-600";
+    case Colors.GRAY:
+      return "focus:placeholder-gray-600";
+    case Colors.NEUTRAL:
+      return "focus:placeholder-neutral-600";
+    case Colors.STONE:
+      return "focus:placeholder-stone-600";
+    case Colors.RED:
+      return "focus:placeholder-red-600";
+    case Colors.ORANGE:
+      return "focus:placeholder-orange-600";
+    case Colors.AMBER:
+      return "focus:placeholder-amber-600";
+    case Colors.YELLOW:
+      return "focus:placeholder-yellow-600";
+    case Colors.LIME:
+      return "focus:placeholder-lime-600";
+    case Colors.GREEN:
+      return "focus:placeholder-green-600";
+    case Colors.EMERALD:
+      return "focus:placeholder-emerald-600";
+    case Colors.TEAL:
+      return "focus:placeholder-teal-600";
+    case Colors.CYAN:
+      return "focus:placeholder-cyan-600";
+    case Colors.SKY:
+      return "focus:placeholder-sky-600";
+    case Colors.BLUE:
+      return "focus:placeholder-blue-600";
+    case Colors.INDIGO:
+      return "focus:placeholder-indigo-600";
+    case Colors.VIOLET:
+      return "focus:placeholder-violet-600";
+    case Colors.PURPLE:
+      return "focus:placeholder-purple-600";
+    case Colors.FUCHSIA:
+      return "focus:placeholder-fuchsia-600";
+    case Colors.PINK:
+      return "focus:placeholder-pink-600";
+    case Colors.ROSE:
+      return "focus:placeholder-rose-600";
+  }
+}
+
+export default {
+  getRing600,
+  getText600,
+  getPlaceholder600,
+};

hivegrid-cloud/apps/web/app/utils/shared/colors/ColorFocusWithinUtils.ts

@@ -0,0 +1,54 @@
+import { Colors } from "~/application/enums/shared/Colors";
+
+function getText600(itemColor: Colors): string {
+  switch (itemColor) {
+    case Colors.UNDEFINED:
+      return "focus-within:text-gray-600";
+    case Colors.SLATE:
+      return "focus-within:text-slate-600";
+    case Colors.GRAY:
+      return "focus-within:text-gray-600";
+    case Colors.NEUTRAL:
+      return "focus-within:text-neutral-600";
+    case Colors.STONE:
+      return "focus-within:text-stone-600";
+    case Colors.RED:
+      return "focus-within:text-red-600";
+    case Colors.ORANGE:
+      return "focus-within:text-orange-600";
+    case Colors.AMBER:
+      return "focus-within:text-amber-600";
+    case Colors.YELLOW:
+      return "focus-within:text-yellow-600";
+    case Colors.LIME:
+      return "focus-within:text-lime-600";
+    case Colors.GREEN:
+      return "focus-within:text-green-600";
+    case Colors.EMERALD:
+      return "focus-within:text-emerald-600";
+    case Colors.TEAL:
+      return "focus-within:text-teal-600";
+    case Colors.CYAN:
+      return "focus-within:text-cyan-600";
+    case Colors.SKY:
+      return "focus-within:text-sky-600";
+    case Colors.BLUE:
+      return "focus-within:text-blue-600";
+    case Colors.INDIGO:
+      return "focus-within:text-indigo-600";
+    case Colors.VIOLET:
+      return "focus-within:text-violet-600";
+    case Colors.PURPLE:
+      return "focus-within:text-purple-600";
+    case Colors.FUCHSIA:
+      return "focus-within:text-fuchsia-600";
+    case Colors.PINK:
+      return "focus-within:text-pink-600";
+    case Colors.ROSE:
+      return "focus-within:text-rose-600";
+  }
+}
+
+export default {
+  getText600,
+};

hivegrid-cloud/apps/web/app/utils/shared/colors/ColorGradientUtils.ts

@@ -0,0 +1,104 @@
+import { Colors } from "~/application/enums/shared/Colors";
+
+function getFrom700To800(itemColor: Colors): string {
+  switch (itemColor) {
+    case Colors.UNDEFINED:
+      return "from-gray-700 to-gray-800";
+    case Colors.SLATE:
+      return "from-slate-700 to-slate-800";
+    case Colors.GRAY:
+      return "from-gray-700 to-gray-800";
+    case Colors.NEUTRAL:
+      return "from-neutral-700 to-neutral-800";
+    case Colors.STONE:
+      return "from-stone-700 to-stone-800";
+    case Colors.RED:
+      return "from-red-700 to-red-800";
+    case Colors.ORANGE:
+      return "from-orange-700 to-orange-800";
+    case Colors.AMBER:
+      return "from-amber-700 to-amber-800";
+    case Colors.YELLOW:
+      return "from-yellow-700 to-yellow-800";
+    case Colors.LIME:
+      return "from-lime-700 to-lime-800";
+    case Colors.GREEN:
+      return "from-green-700 to-green-800";
+    case Colors.EMERALD:
+      return "from-emerald-700 to-emerald-800";
+    case Colors.TEAL:
+      return "from-teal-700 to-teal-800";
+    case Colors.CYAN:
+      return "from-cyan-700 to-cyan-800";
+    case Colors.SKY:
+      return "from-sky-700 to-sky-800";
+    case Colors.BLUE:
+      return "from-blue-700 to-blue-800";
+    case Colors.INDIGO:
+      return "from-indigo-700 to-indigo-800";
+    case Colors.VIOLET:
+      return "from-violet-700 to-violet-800";
+    case Colors.PURPLE:
+      return "from-purple-700 to-purple-800";
+    case Colors.FUCHSIA:
+      return "from-fuchsia-700 to-fuchsia-800";
+    case Colors.PINK:
+      return "from-pink-700 to-pink-800";
+    case Colors.ROSE:
+      return "from-rose-700 to-rose-800";
+  }
+}
+
+function getFrom800To900(itemColor: Colors): string {
+  switch (itemColor) {
+    case Colors.UNDEFINED:
+      return "from-gray-800 to-gray-900";
+    case Colors.SLATE:
+      return "from-slate-800 to-slate-900";
+    case Colors.GRAY:
+      return "from-gray-900 to-black";
+    case Colors.NEUTRAL:
+      return "from-neutral-800 to-neutral-900";
+    case Colors.STONE:
+      return "from-stone-800 to-stone-900";
+    case Colors.RED:
+      return "from-red-800 to-red-900";
+    case Colors.ORANGE:
+      return "from-orange-800 to-orange-900";
+    case Colors.AMBER:
+      return "from-amber-800 to-amber-900";
+    case Colors.YELLOW:
+      return "from-yellow-800 to-yellow-900";
+    case Colors.LIME:
+      return "from-lime-800 to-lime-900";
+    case Colors.GREEN:
+      return "from-green-800 to-green-900";
+    case Colors.EMERALD:
+      return "from-emerald-800 to-emerald-900";
+    case Colors.TEAL:
+      return "from-teal-800 to-teal-900";
+    case Colors.CYAN:
+      return "from-cyan-800 to-cyan-900";
+    case Colors.SKY:
+      return "from-sky-800 to-sky-900";
+    case Colors.BLUE:
+      return "from-blue-800 to-blue-900";
+    case Colors.INDIGO:
+      return "from-indigo-800 to-indigo-900";
+    case Colors.VIOLET:
+      return "from-violet-800 to-violet-900";
+    case Colors.PURPLE:
+      return "from-purple-800 to-purple-900";
+    case Colors.FUCHSIA:
+      return "from-fuchsia-800 to-fuchsia-900";
+    case Colors.PINK:
+      return "from-pink-800 to-pink-900";
+    case Colors.ROSE:
+      return "from-rose-800 to-rose-900";
+  }
+}
+
+export default {
+  getFrom700To800,
+  getFrom800To900,
+};

hivegrid-cloud/apps/web/app/utils/shared/colors/ColorGroupHoverUtils.ts

@@ -0,0 +1,54 @@
+import { Colors } from "~/application/enums/shared/Colors";
+
+function getText700(itemColor: Colors): string {
+  switch (itemColor) {
+    case Colors.UNDEFINED:
+      return "group-hover:text-gray-700";
+    case Colors.SLATE:
+      return "group-hover:text-slate-700";
+    case Colors.GRAY:
+      return "group-hover:text-gray-700";
+    case Colors.NEUTRAL:
+      return "group-hover:text-neutral-700";
+    case Colors.STONE:
+      return "group-hover:text-stone-700";
+    case Colors.RED:
+      return "group-hover:text-red-700";
+    case Colors.ORANGE:
+      return "group-hover:text-orange-700";
+    case Colors.AMBER:
+      return "group-hover:text-amber-700";
+    case Colors.YELLOW:
+      return "group-hover:text-yellow-700";
+    case Colors.LIME:
+      return "group-hover:text-lime-700";
+    case Colors.GREEN:
+      return "group-hover:text-green-700";
+    case Colors.EMERALD:
+      return "group-hover:text-emerald-700";
+    case Colors.TEAL:
+      return "group-hover:text-teal-700";
+    case Colors.CYAN:
+      return "group-hover:text-cyan-700";
+    case Colors.SKY:
+      return "group-hover:text-sky-700";
+    case Colors.BLUE:
+      return "group-hover:text-blue-700";
+    case Colors.INDIGO:
+      return "group-hover:text-indigo-700";
+    case Colors.VIOLET:
+      return "group-hover:text-violet-700";
+    case Colors.PURPLE:
+      return "group-hover:text-purple-700";
+    case Colors.FUCHSIA:
+      return "group-hover:text-fuchsia-700";
+    case Colors.PINK:
+      return "group-hover:text-pink-700";
+    case Colors.ROSE:
+      return "group-hover:text-rose-700";
+  }
+}
+
+export default {
+  getText700,
+};

hivegrid-cloud/apps/web/app/utils/shared/colors/ColorHoverUtils.ts

@@ -0,0 +1,104 @@
+import { Colors } from "~/application/enums/shared/Colors";
+
+function getBorder500(itemColor: Colors): string {
+  switch (itemColor) {
+    case Colors.UNDEFINED:
+      return "hover:border-gray-500";
+    case Colors.SLATE:
+      return "hover:border-slate-500";
+    case Colors.GRAY:
+      return "hover:border-gray-500";
+    case Colors.NEUTRAL:
+      return "hover:border-neutral-500";
+    case Colors.STONE:
+      return "hover:border-stone-500";
+    case Colors.RED:
+      return "hover:border-red-500";
+    case Colors.ORANGE:
+      return "hover:border-orange-500";
+    case Colors.AMBER:
+      return "hover:border-amber-500";
+    case Colors.YELLOW:
+      return "hover:border-yellow-500";
+    case Colors.LIME:
+      return "hover:border-lime-500";
+    case Colors.GREEN:
+      return "hover:border-green-500";
+    case Colors.EMERALD:
+      return "hover:border-emerald-500";
+    case Colors.TEAL:
+      return "hover:border-teal-500";
+    case Colors.CYAN:
+      return "hover:border-cyan-500";
+    case Colors.SKY:
+      return "hover:border-sky-500";
+    case Colors.BLUE:
+      return "hover:border-blue-500";
+    case Colors.INDIGO:
+      return "hover:border-indigo-500";
+    case Colors.VIOLET:
+      return "hover:border-violet-500";
+    case Colors.PURPLE:
+      return "hover:border-purple-500";
+    case Colors.FUCHSIA:
+      return "hover:border-fuchsia-500";
+    case Colors.PINK:
+      return "hover:border-pink-500";
+    case Colors.ROSE:
+      return "hover:border-rose-500";
+  }
+}
+
+function getBg900(itemColor: Colors): string {
+  switch (itemColor) {
+    case Colors.UNDEFINED:
+      return "hover:bg-gray-900";
+    case Colors.SLATE:
+      return "hover:bg-slate-900";
+    case Colors.GRAY:
+      return "hover:bg-gray-900";
+    case Colors.NEUTRAL:
+      return "hover:bg-neutral-900";
+    case Colors.STONE:
+      return "hover:bg-stone-900";
+    case Colors.RED:
+      return "hover:bg-red-900";
+    case Colors.ORANGE:
+      return "hover:bg-orange-900";
+    case Colors.AMBER:
+      return "hover:bg-amber-900";
+    case Colors.YELLOW:
+      return "hover:bg-yellow-900";
+    case Colors.LIME:
+      return "hover:bg-lime-900";
+    case Colors.GREEN:
+      return "hover:bg-green-900";
+    case Colors.EMERALD:
+      return "hover:bg-emerald-900";
+    case Colors.TEAL:
+      return "hover:bg-teal-900";
+    case Colors.CYAN:
+      return "hover:bg-cyan-900";
+    case Colors.SKY:
+      return "hover:bg-sky-900";
+    case Colors.BLUE:
+      return "hover:bg-blue-900";
+    case Colors.INDIGO:
+      return "hover:bg-indigo-900";
+    case Colors.VIOLET:
+      return "hover:bg-violet-900";
+    case Colors.PURPLE:
+      return "hover:bg-purple-900";
+    case Colors.FUCHSIA:
+      return "hover:bg-fuchsia-900";
+    case Colors.PINK:
+      return "hover:bg-pink-900";
+    case Colors.ROSE:
+      return "hover:bg-rose-900";
+  }
+}
+
+export default {
+  getBorder500,
+  getBg900,
+};

hivegrid-cloud/apps/web/app/utils/shared/colors/ColorPlaceholderUtils.ts

@@ -0,0 +1,54 @@
+import { Colors } from "~/application/enums/shared/Colors";
+
+function getText400(itemColor: Colors): string {
+  switch (itemColor) {
+    case Colors.UNDEFINED:
+      return "placeholder:text-gray-400";
+    case Colors.SLATE:
+      return "placeholder:text-slate-400";
+    case Colors.GRAY:
+      return "placeholder:text-gray-400";
+    case Colors.NEUTRAL:
+      return "placeholder:text-neutral-400";
+    case Colors.STONE:
+      return "placeholder:text-stone-400";
+    case Colors.RED:
+      return "placeholder:text-red-400";
+    case Colors.ORANGE:
+      return "placeholder:text-orange-400";
+    case Colors.AMBER:
+      return "placeholder:text-amber-400";
+    case Colors.YELLOW:
+      return "placeholder:text-yellow-400";
+    case Colors.LIME:
+      return "placeholder:text-lime-400";
+    case Colors.GREEN:
+      return "placeholder:text-green-400";
+    case Colors.EMERALD:
+      return "placeholder:text-emerald-400";
+    case Colors.TEAL:
+      return "placeholder:text-teal-400";
+    case Colors.CYAN:
+      return "placeholder:text-cyan-400";
+    case Colors.SKY:
+      return "placeholder:text-sky-400";
+    case Colors.BLUE:
+      return "placeholder:text-blue-400";
+    case Colors.INDIGO:
+      return "placeholder:text-indigo-400";
+    case Colors.VIOLET:
+      return "placeholder:text-violet-400";
+    case Colors.PURPLE:
+      return "placeholder:text-purple-400";
+    case Colors.FUCHSIA:
+      return "placeholder:text-fuchsia-400";
+    case Colors.PINK:
+      return "placeholder:text-pink-400";
+    case Colors.ROSE:
+      return "placeholder:text-rose-400";
+  }
+}
+
+export default {
+  getText400,
+};

hivegrid-cloud/apps/web/app/utils/shared/colors/ColorRingUtils.ts

@@ -0,0 +1,54 @@
+import { Colors } from "~/application/enums/shared/Colors";
+
+function getRing800(itemColor: Colors): string {
+  switch (itemColor) {
+    case Colors.UNDEFINED:
+      return "ring-gray-800";
+    case Colors.SLATE:
+      return "ring-slate-800";
+    case Colors.GRAY:
+      return "ring-gray-800";
+    case Colors.NEUTRAL:
+      return "ring-neutral-800";
+    case Colors.STONE:
+      return "ring-stone-800";
+    case Colors.RED:
+      return "ring-red-800";
+    case Colors.ORANGE:
+      return "ring-orange-800";
+    case Colors.AMBER:
+      return "ring-amber-800";
+    case Colors.YELLOW:
+      return "ring-yellow-800";
+    case Colors.LIME:
+      return "ring-lime-800";
+    case Colors.GREEN:
+      return "ring-green-800";
+    case Colors.EMERALD:
+      return "ring-emerald-800";
+    case Colors.TEAL:
+      return "ring-teal-800";
+    case Colors.CYAN:
+      return "ring-cyan-800";
+    case Colors.SKY:
+      return "ring-sky-800";
+    case Colors.BLUE:
+      return "ring-blue-800";
+    case Colors.INDIGO:
+      return "ring-indigo-800";
+    case Colors.VIOLET:
+      return "ring-violet-800";
+    case Colors.PURPLE:
+      return "ring-purple-800";
+    case Colors.FUCHSIA:
+      return "ring-fuchsia-800";
+    case Colors.PINK:
+      return "ring-pink-800";
+    case Colors.ROSE:
+      return "ring-rose-800";
+  }
+}
+
+export default {
+  getRing800,
+};

hivegrid-cloud/apps/web/app/utils/shared/colors/ColorTextUtils.ts

@@ -0,0 +1,254 @@
+import { Colors } from "~/application/enums/shared/Colors";
+
+function getText100(itemColor: Colors): string {
+  switch (itemColor) {
+    case Colors.UNDEFINED:
+      return "text-gray-100";
+    case Colors.SLATE:
+      return "text-slate-100";
+    case Colors.GRAY:
+      return "text-gray-100";
+    case Colors.NEUTRAL:
+      return "text-neutral-100";
+    case Colors.STONE:
+      return "text-stone-100";
+    case Colors.RED:
+      return "text-red-100";
+    case Colors.ORANGE:
+      return "text-orange-100";
+    case Colors.AMBER:
+      return "text-amber-100";
+    case Colors.YELLOW:
+      return "text-yellow-100";
+    case Colors.LIME:
+      return "text-lime-100";
+    case Colors.GREEN:
+      return "text-green-100";
+    case Colors.EMERALD:
+      return "text-emerald-100";
+    case Colors.TEAL:
+      return "text-teal-100";
+    case Colors.CYAN:
+      return "text-cyan-100";
+    case Colors.SKY:
+      return "text-sky-100";
+    case Colors.BLUE:
+      return "text-blue-100";
+    case Colors.INDIGO:
+      return "text-indigo-100";
+    case Colors.VIOLET:
+      return "text-violet-100";
+    case Colors.PURPLE:
+      return "text-purple-100";
+    case Colors.FUCHSIA:
+      return "text-fuchsia-100";
+    case Colors.PINK:
+      return "text-pink-100";
+    case Colors.ROSE:
+      return "text-rose-100";
+  }
+}
+
+function getText300(itemColor: Colors): string {
+  switch (itemColor) {
+    case Colors.UNDEFINED:
+      return "text-gray-300";
+    case Colors.SLATE:
+      return "text-slate-300";
+    case Colors.GRAY:
+      return "text-gray-300";
+    case Colors.NEUTRAL:
+      return "text-neutral-300";
+    case Colors.STONE:
+      return "text-stone-300";
+    case Colors.RED:
+      return "text-red-300";
+    case Colors.ORANGE:
+      return "text-orange-300";
+    case Colors.AMBER:
+      return "text-amber-300";
+    case Colors.YELLOW:
+      return "text-yellow-300";
+    case Colors.LIME:
+      return "text-lime-300";
+    case Colors.GREEN:
+      return "text-green-300";
+    case Colors.EMERALD:
+      return "text-emerald-300";
+    case Colors.TEAL:
+      return "text-teal-300";
+    case Colors.CYAN:
+      return "text-cyan-300";
+    case Colors.SKY:
+      return "text-sky-300";
+    case Colors.BLUE:
+      return "text-blue-300";
+    case Colors.INDIGO:
+      return "text-indigo-300";
+    case Colors.VIOLET:
+      return "text-violet-300";
+    case Colors.PURPLE:
+      return "text-purple-300";
+    case Colors.FUCHSIA:
+      return "text-fuchsia-300";
+    case Colors.PINK:
+      return "text-pink-300";
+    case Colors.ROSE:
+      return "text-rose-300";
+  }
+}
+
+function getText400(itemColor: Colors): string {
+  switch (itemColor) {
+    case Colors.UNDEFINED:
+      return "text-gray-400";
+    case Colors.SLATE:
+      return "text-slate-400";
+    case Colors.GRAY:
+      return "text-gray-400";
+    case Colors.NEUTRAL:
+      return "text-neutral-400";
+    case Colors.STONE:
+      return "text-stone-400";
+    case Colors.RED:
+      return "text-red-400";
+    case Colors.ORANGE:
+      return "text-orange-400";
+    case Colors.AMBER:
+      return "text-amber-400";
+    case Colors.YELLOW:
+      return "text-yellow-400";
+    case Colors.LIME:
+      return "text-lime-400";
+    case Colors.GREEN:
+      return "text-green-400";
+    case Colors.EMERALD:
+      return "text-emerald-400";
+    case Colors.TEAL:
+      return "text-teal-400";
+    case Colors.CYAN:
+      return "text-cyan-400";
+    case Colors.SKY:
+      return "text-sky-400";
+    case Colors.BLUE:
+      return "text-blue-400";
+    case Colors.INDIGO:
+      return "text-indigo-400";
+    case Colors.VIOLET:
+      return "text-violet-400";
+    case Colors.PURPLE:
+      return "text-purple-400";
+    case Colors.FUCHSIA:
+      return "text-fuchsia-400";
+    case Colors.PINK:
+      return "text-pink-400";
+    case Colors.ROSE:
+      return "text-rose-400";
+  }
+}
+
+function getText500(itemColor: Colors): string {
+  switch (itemColor) {
+    case Colors.UNDEFINED:
+      return "text-gray-500";
+    case Colors.SLATE:
+      return "text-slate-500";
+    case Colors.GRAY:
+      return "text-gray-500";
+    case Colors.NEUTRAL:
+      return "text-neutral-500";
+    case Colors.STONE:
+      return "text-stone-500";
+    case Colors.RED:
+      return "text-red-500";
+    case Colors.ORANGE:
+      return "text-orange-500";
+    case Colors.AMBER:
+      return "text-amber-500";
+    case Colors.YELLOW:
+      return "text-yellow-500";
+    case Colors.LIME:
+      return "text-lime-500";
+    case Colors.GREEN:
+      return "text-green-500";
+    case Colors.EMERALD:
+      return "text-emerald-500";
+    case Colors.TEAL:
+      return "text-teal-500";
+    case Colors.CYAN:
+      return "text-cyan-500";
+    case Colors.SKY:
+      return "text-sky-500";
+    case Colors.BLUE:
+      return "text-blue-500";
+    case Colors.INDIGO:
+      return "text-indigo-500";
+    case Colors.VIOLET:
+      return "text-violet-500";
+    case Colors.PURPLE:
+      return "text-purple-500";
+    case Colors.FUCHSIA:
+      return "text-fuchsia-500";
+    case Colors.PINK:
+      return "text-pink-500";
+    case Colors.ROSE:
+      return "text-rose-500";
+  }
+}
+
+function getText800(itemColor: Colors): string {
+  switch (itemColor) {
+    case Colors.UNDEFINED:
+      return "text-gray-800";
+    case Colors.SLATE:
+      return "text-slate-800";
+    case Colors.GRAY:
+      return "text-gray-800";
+    case Colors.NEUTRAL:
+      return "text-neutral-800";
+    case Colors.STONE:
+      return "text-stone-800";
+    case Colors.RED:
+      return "text-red-800";
+    case Colors.ORANGE:
+      return "text-orange-800";
+    case Colors.AMBER:
+      return "text-amber-800";
+    case Colors.YELLOW:
+      return "text-yellow-800";
+    case Colors.LIME:
+      return "text-lime-800";
+    case Colors.GREEN:
+      return "text-green-800";
+    case Colors.EMERALD:
+      return "text-emerald-800";
+    case Colors.TEAL:
+      return "text-teal-800";
+    case Colors.CYAN:
+      return "text-cyan-800";
+    case Colors.SKY:
+      return "text-sky-800";
+    case Colors.BLUE:
+      return "text-blue-800";
+    case Colors.INDIGO:
+      return "text-indigo-800";
+    case Colors.VIOLET:
+      return "text-violet-800";
+    case Colors.PURPLE:
+      return "text-purple-800";
+    case Colors.FUCHSIA:
+      return "text-fuchsia-800";
+    case Colors.PINK:
+      return "text-pink-800";
+    case Colors.ROSE:
+      return "text-rose-800";
+  }
+}
+
+export default {
+  getText100,
+  getText300,
+  getText400,
+  getText500,
+  getText800,
+};