@startinblox/boilerplate 3.0.0

package/src/helpers/datas/filterObjectByInterval.ts

@@ -0,0 +1,133 @@
+import type { Resource } from "@src/component";
+
+
+function isValidDateValue(value: unknown): value is string | number | Date {
+ if (
+   typeof value !== "string" &&
+   typeof value !== "number" &&
+   !(value instanceof Date)
+ ) {
+   return false;
+ }
+
+ return !Number.isNaN(new Date(value).getTime());
+}
+const checkValueInIntervalRecursive = (
+  data: any,
+  propName: string,
+  startValue: number | Date,
+  endValue: number | Date
+): boolean => {
+  if (data === null || data === undefined) {
+    return false;
+  }
+
+  const propPath = propName.split(".");
+  let current = data;
+
+  for (const segment of propPath) {
+    if (current && typeof current === "object" && segment in current) {
+      current = current[segment];
+    } else {
+      return false;
+    }
+  }
+
+  if (typeof current === "number") {
+    if (typeof startValue === "number" && typeof endValue === "number") {
+      if (startValue <= current && current <= endValue) {
+        return true;
+      }
+    }
+  } else if (isValidDateValue(current)) {
+    const date = new Date(current);
+    if (startValue instanceof Date && endValue instanceof Date) {
+      if (startValue <= date && date <= endValue) {
+        return true;
+      }
+    }
+  } else {
+    return false;
+  }
+
+  if (Array.isArray(data)) {
+    return data.some((item) =>
+      checkValueInIntervalRecursive(item, propName, startValue, endValue)
+    );
+  }
+
+  if (typeof data === "object") {
+    return Object.entries(data).some(([key, value]) =>
+      checkValueInIntervalRecursive(value, propName, startValue, endValue)
+    );
+  }
+
+  return false;
+};
+
+/**
+ * Filters an array of Resource objects based on whether a specific date/number property
+ * falls within a given interval string (e.g., "2023-01-01/2023-01-31" or "3/6").
+ * Checks the property recursively within nested objects and arrays.
+ */
+const filterObjectByDateInterval = (
+  array: Resource[],
+  propName: string,
+  interval: string
+): Resource[] => {
+  if (!propName || !interval || typeof interval !== "string") {
+    return array;
+  }
+
+  const [startStr, endStr] = interval.split("/");
+  if (!startStr) {
+    return array;
+  }
+
+  const startDate = new Date(startStr);
+
+  const endDate = new Date(endStr ?? startStr);
+
+  if (Number.isNaN(startDate.getTime()) || Number.isNaN(endDate.getTime())) {
+    console.warn(`Invalid date interval provided: ${interval}`);
+    return array;
+  }
+
+  endDate.setHours(23, 59, 59, 999);
+
+  if (startDate > endDate) {
+    console.warn(`Start date is after end date in interval: ${interval}`);
+    return array;
+  }
+
+  return array.filter((obj) =>
+    checkValueInIntervalRecursive(obj, propName, startDate, endDate)
+  );
+};
+
+const filterObjectByInterval = (
+  array: Resource[],
+  propName: string,
+  interval: string
+): Resource[] => {
+  if (!propName || !interval || typeof interval !== "string") {
+    return array;
+  }
+
+  const [startStr, endStr] = interval.split("/").map(Number);
+
+  if (Number.isNaN(startStr) || Number.isNaN(endStr)) {
+    return array;
+  }
+
+  if (startStr > endStr) {
+    console.warn(`Start number is after end number in interval: ${interval}`);
+    return array;
+  }
+
+  return array.filter((obj) =>
+    checkValueInIntervalRecursive(obj, propName, startStr, endStr)
+  );
+};
+
+export default filterObjectByInterval;

package/src/helpers/datas/filterObjectByNamedValue.ts

@@ -0,0 +1,103 @@
+import type { Resource } from "@src/component";
+
+const calculatePertinenceScoreRecursive = (
+  data: any,
+  lowerCaseString: string,
+  isTargetProperty: boolean
+): number => {
+  if (data === null || data === undefined) {
+    return 0;
+  }
+
+  if (typeof data !== "object") {
+    if (!isTargetProperty) {
+      return 0;
+    }
+
+    const valueString = String(data).toLowerCase();
+
+    const escapedString = lowerCaseString.replace(
+      /[.*+?^${}()|[\]\\]/g,
+      "\\$&"
+    );
+
+    const wholeWordRegex = new RegExp(`\\b${escapedString}\\b`);
+
+    let score = 0;
+    if (wholeWordRegex.test(valueString)) {
+      score = 2;
+    } else if (valueString.includes(lowerCaseString)) {
+      score = 1;
+    }
+    return score;
+  }
+
+  if (Array.isArray(data)) {
+    let maxScore = 0;
+    for (const item of data) {
+      maxScore = Math.max(
+        maxScore,
+        calculatePertinenceScoreRecursive(
+          item,
+          lowerCaseString,
+          isTargetProperty
+        )
+      );
+      if (maxScore === 2) break;
+    }
+    return maxScore;
+  }
+
+  let maxScore = 0;
+  for (const value of Object.values(data)) {
+    maxScore = Math.max(
+      maxScore,
+      calculatePertinenceScoreRecursive(
+        value,
+        lowerCaseString,
+        isTargetProperty
+      )
+    );
+    if (maxScore === 2) break;
+  }
+  return maxScore;
+};
+
+const filterObjectByNamedValue = (
+  array: Resource[],
+  propName: string,
+  searchString: string
+): Resource[] => {
+  if (!propName || !searchString || searchString.trim() === "") {
+    return array;
+  }
+
+  const lowerCaseString = searchString.toLowerCase();
+
+  const scoredObjects = array.map((obj) => {
+    let current: any = obj;
+    const propPath = propName.split(".");
+    for (const segment of propPath) {
+      if (current && typeof current === "object" && segment in current) {
+        current = current[segment];
+      } else {
+        current = null;
+        break;
+      }
+    }
+
+    let score = 0;
+    if (current) {
+      score = calculatePertinenceScoreRecursive(current, lowerCaseString, true);
+    }
+    return { obj, score };
+  });
+
+  const filteredObjects = scoredObjects.filter((item) => item.score > 0);
+
+  filteredObjects.sort((a, b) => b.score - a.score);
+
+  return filteredObjects.map((item) => item.obj);
+};
+
+export default filterObjectByNamedValue;

package/src/helpers/datas/filterObjectByType.ts

@@ -0,0 +1,30 @@
+import type { Resource } from "@src/component";
+
+const filterObjectByType = (
+  array: Resource[],
+  targetType: string
+): Resource[] => {
+  if (!targetType) {
+    return array;
+  }
+
+  return array.filter((obj) => {
+    const type = obj["@type"];
+
+    if (!type) {
+      return false;
+    }
+
+    if (typeof type === "string") {
+      return type === targetType;
+    }
+
+    if (Array.isArray(type)) {
+      return type.some((t) => t === targetType);
+    }
+
+    return false;
+  });
+};
+
+export default filterObjectByType;

package/src/helpers/datas/filterObjectByValue.ts

@@ -0,0 +1,81 @@
+import type { Resource } from "@src/component";
+
+const calculatePertinenceScore = (
+  data: any,
+  lowerCaseString: string,
+  key?: string
+): number => {
+  if (data === null || data === undefined) {
+    return 0;
+  }
+
+  if (typeof data !== "object") {
+    const valueString = String(data).toLowerCase();
+
+    const escapedString = lowerCaseString.replace(
+      /[.*+?^${}()|[\]\\]/g,
+      "\\$&"
+    );
+
+    const wholeWordRegex = new RegExp(`\\b${escapedString}\\b`);
+
+    let score = 0;
+    if (wholeWordRegex.test(valueString)) {
+      if (key === "name" || key === "title") {
+        score = 4;
+      } else {
+        score = 3;
+      }
+    } else if (valueString.includes(lowerCaseString)) {
+      if (key === "name" || key === "title") {
+        score = 2;
+      } else {
+        score = 1;
+      }
+    }
+    return score;
+  }
+
+  if (Array.isArray(data)) {
+    let maxScore = 0;
+    for (const item of data) {
+      maxScore = Math.max(
+        maxScore,
+        calculatePertinenceScore(item, lowerCaseString)
+      );
+      if (maxScore === 4) break;
+    }
+    return maxScore;
+  }
+
+  let maxScore = 0;
+  for (const [currentKey, value] of Object.entries(data)) {
+    maxScore = Math.max(
+      maxScore,
+      calculatePertinenceScore(value, lowerCaseString, currentKey)
+    );
+    if (maxScore === 4) break;
+  }
+  return maxScore;
+};
+
+const filterObjectByValue = (array: Resource[], searchString: string): any[] => {
+  if (!searchString || searchString.trim() === "") {
+    return array;
+  }
+
+  const lowerCaseString = searchString.toLowerCase();
+
+  const scoredObjects = array.map((obj) => ({
+    obj,
+    score: calculatePertinenceScore(obj, lowerCaseString),
+  }));
+
+  const filteredObjects = scoredObjects.filter((item) => item.score > 0);
+
+  filteredObjects.sort((a, b) => b.score - a.score);
+
+  return filteredObjects.map((item) => item.obj);
+};
+
+export default filterObjectByValue;

package/src/helpers/datas/sort.ts

@@ -0,0 +1,40 @@
+const getValueFromAnyKey = (obj: any, keys: string[]): any => {
+  let value = obj;
+  for (let i = 0; i < keys.length; i++) {
+    if (value && keys[i] in value) {
+      value = value[keys[i]];
+    } else {
+      break;
+    }
+  }
+  return value;
+};
+
+type Sort = (arr: any[], k: string | string[], order?: "asc" | "desc") => any[];
+
+const sort: Sort = (arr, k, order = "asc") => {
+  return arr.sort((a, b) => {
+    let aN = a;
+    let bN = b;
+    if (Array.isArray(k)) {
+      aN = getValueFromAnyKey(a, k);
+      bN = getValueFromAnyKey(b, k);
+    } else {
+      aN = a[k];
+      bN = b[k];
+    }
+    let c = 0;
+    if (typeof aN === "number" && typeof bN === "number") {
+      c = aN - bN;
+    } else if (typeof aN === "string" && typeof bN === "string") {
+      c = aN.localeCompare(bN);
+    } else if (aN instanceof Date && bN instanceof Date) {
+      c = aN.getTime() - bN.getTime();
+    } else {
+      throw new TypeError(`Unsupported data type for key "${k}"`);
+    }
+    return order === "asc" ? c : -c;
+  });
+};
+
+export default sort;

package/src/helpers/i18n/configureLocalization.ts

@@ -0,0 +1,17 @@
+import { configureLocalization } from "@lit/localize";
+import { sourceLocale, targetLocales } from "@src/generated/locale-codes.js";
+
+const langs = import.meta.glob("../generated/locales/**/*.ts", { eager: true });
+
+const localizedTemplates: Map<string, any> = new Map(
+  targetLocales.map((locale) => [
+    locale,
+    langs[`../generated/locales/${locale}.ts`],
+  ]),
+);
+
+export const { getLocale, setLocale } = configureLocalization({
+  sourceLocale,
+  targetLocales,
+  loadLocale: async (locale) => localizedTemplates.get(locale),
+});

package/src/helpers/index.ts

@@ -0,0 +1,41 @@
+import OrbitComponent from "@helpers/components/orbitComponent";
+import setupCacheInvalidation from "@helpers/components/setupCacheInvalidation";
+import setupCacheOnResourceReady from "@helpers/components/setupCacheOnResourceReady";
+import setupComponentSubscriptions from "@helpers/components/setupComponentSubscriptions";
+import setupOnSaveReset from "@helpers/components/setupOnSaveReset";
+import { ComponentObjectHandler } from "@helpers/components/componentObjectHandler";
+import { ComponentObjectsHandler } from "@helpers/components/componentObjectsHandler";
+import filterGenerator from "@helpers/datas/filterGenerator";
+import filterObjectByDateAfter from "@helpers/datas/filterObjectByDateAfter";
+import filterObjectById from "@helpers/datas/filterObjectById";
+import filterObjectByInterval from "@helpers/datas/filterObjectByInterval";
+import filterObjectByNamedValue from "@helpers/datas/filterObjectByNamedValue";
+import filterObjectByValue from "@helpers/datas/filterObjectByValue";
+import filterObjectByType from "@helpers/datas/filterObjectByType";
+import formatDate from "@helpers/ui/formatDate";
+import sort from "@helpers/datas/sort";
+import requestNavigation from "@helpers/utils/requestNavigation";
+import uniq from "@helpers/utils/uniq";
+import CLIENT_CONTEXT from "@src/context.json";
+
+export {
+  CLIENT_CONTEXT,
+  filterGenerator,
+  filterObjectByDateAfter,
+  filterObjectById,
+  filterObjectByInterval,
+  filterObjectByNamedValue,
+  filterObjectByValue,
+  filterObjectByType,
+  formatDate,
+  ComponentObjectHandler,
+  ComponentObjectsHandler,
+  OrbitComponent,
+  requestNavigation,
+  setupCacheInvalidation,
+  setupCacheOnResourceReady,
+  setupComponentSubscriptions,
+  setupOnSaveReset,
+  sort,
+  uniq,
+};

package/src/helpers/ui/formatDate.ts

@@ -0,0 +1,18 @@
+const formatDate = (
+  originalDate: string | Date | undefined,
+  format: Intl.DateTimeFormatOptions = {
+    day: "2-digit",
+    month: "2-digit",
+    year: "2-digit",
+  }
+): string => {
+  if (!originalDate) return "";
+  const date =
+    typeof originalDate === "string" ? new Date(originalDate) : originalDate;
+  const formattedDate = date.toLocaleString(undefined, format);
+  if (typeof originalDate === "string" && formattedDate === "Invalid Date")
+    return originalDate;
+  return formattedDate;
+};
+
+export default formatDate;

package/src/helpers/ui/lipsum.ts

@@ -0,0 +1,12 @@
+import { LoremIpsum } from "lorem-ipsum";
+
+export const lorem = new LoremIpsum({
+  sentencesPerParagraph: {
+    max: 4,
+    min: 1,
+  },
+  wordsPerSentence: {
+    max: 8,
+    min: 2,
+  },
+});

package/src/helpers/utils/requestNavigation.ts

@@ -0,0 +1,12 @@
+const requestNavigation = (route: string, resource: string | boolean = false) => {
+  window.dispatchEvent(
+    new CustomEvent("requestNavigation", {
+      detail: {
+        route: route,
+        resource: typeof resource === "string" ? { "@id": resource } : resource,
+      },
+    }),
+  );
+};
+
+export default requestNavigation;

package/src/helpers/utils/uniq.ts

@@ -0,0 +1,6 @@
+/**
+ * Generates a unique random string using the Math.random() method.
+ */
+export default function uniq(): string {
+  return Math.random().toString(16).slice(2);
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+import { getLocale, setLocale } from "@helpers/i18n/configureLocalization";
+import "@styles/index.scss";
+import.meta.glob("./components/**/*.ts", { eager: true });
+import.meta.glob("./components/**/*.js", { eager: true });
+
+window.getLocale = window.getLocale ? window.getLocale.push(getLocale) : [getLocale];
+window.setLocale = window.setLocale ? window.setLocale.push(setLocale) : [setLocale];

package/src/initializer.ts

@@ -0,0 +1,11 @@
+if (
+  !window.orbit &&
+  !import.meta.env.STORYBOOK &&
+  !import.meta.env.BASE_URL.includes("cypress")
+) {
+  await new Promise((resolve) => {
+    document.addEventListener("orbit-ready", () => {
+      resolve(true);
+    });
+  });
+}

package/src/mocks/orbit.mock.ts

@@ -0,0 +1,33 @@
+import type { LiveOrbit } from "@src/component";
+
+export const orbit: LiveOrbit = {
+  client: {
+    name: "Orbit",
+    logo: "https://cdn.startinblox.com/logos/ACME.svg",
+  },
+  components: [],
+  getRoute: (route: string) => route,
+  getDefaultRoute: () => "",
+  getComponent: () => undefined,
+  getComponentFromRoute: () => undefined,
+  Swal: () => {},
+  defaultRoute: "",
+  federations: {},
+  componentSet: new Set(["routing", "menu", "menu-top", "autoLogin"]),
+};
+
+window.orbit = orbit;
+
+export const sibStore = {
+  getData: (id: any, _context: any) => {
+    return id;
+  },
+};
+
+window.sibStore = sibStore;
+
+export const sibRouter = {
+  currentResource: "",
+};
+
+window.sibRouter = sibRouter;

package/src/mocks/user.mock.ts

@@ -0,0 +1,67 @@
+import { dataBuilder } from "@helpers/datas/dataBuilder";
+import { lorem } from "@helpers/ui/lipsum";
+import type { User } from "@src/component";
+
+export const user: User = {
+  "@id": "_:b1",
+  first_name: "John",
+  last_name: "Doe",
+  username: "johndoe42",
+  email: "john@doe.com",
+  account: {
+    "@id": "_:b2",
+    picture: "https://placehold.co/30x30",
+    user: {
+      "@id": "_b:1",
+      "@type": "foaf:user",
+      "@context": { get_full_name: "rdfs:label" },
+    },
+  },
+  name: "John Doe",
+  inbox: { "@id": "_:b3" },
+  "@type": "foaf:user",
+  "@context": [
+    "https://cdn.startinblox.com/owl/context.jsonld",
+    { get_full_name: "rdfs:label" },
+  ],
+  permissions: ["view", "add", "control", "delete", "change"],
+};
+
+export const userWithoutPicture = dataBuilder(user, ["account.picture"]);
+
+export const userWithoutEmail = dataBuilder(user, ["email"]);
+
+export const minimalUser = dataBuilder(user, [
+  "first_name",
+  "last_name",
+  "email",
+  "account.picture",
+  "name",
+]);
+
+export const get_random_user = (): User => {
+  const removables: string[] = [];
+  const replacements: User = {
+    "@id": `store://local.sample-object/${Math.floor(Math.random() * 1000)}/`,
+    first_name: lorem.generateWords(1),
+    last_name: lorem.generateWords(1),
+    username: lorem.generateWords(1).toLocaleLowerCase(),
+    email: `${lorem.generateWords(1).toLocaleLowerCase()}@example.com`,
+    name: "",
+  };
+  replacements.name = `${replacements.first_name} ${replacements.last_name}`;
+  const removableGenerator = (key: string) => {
+    // Between 0 and 25% chance
+    if (Math.random() < Math.random() * 0.25) {
+      removables.push(key);
+    }
+  };
+  removableGenerator("account");
+  removableGenerator("first_name");
+  removableGenerator("last_name");
+  removableGenerator("name");
+  removableGenerator("email");
+  removableGenerator("username");
+
+  return dataBuilder(user, removables, replacements, true) as User;
+};

package/src/styles/component-sample.scss

@@ -0,0 +1,4 @@
+:host {
+  user-select: none;
+  background-color: pink;
+}

package/src/styles/index.scss

@@ -0,0 +1,16 @@
+@charset "UTF-8";
+@use "sass:meta";
+
+// This is a sample file, replace me.
+
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+
+:root {
+  --font-family: "Inter", sans-serif;
+  --color-text: #181d27;
+  --color-primary: #001aff;
+  --color-secondary: #001aff;
+  --color-third: #e4f0ff;
+  --color-heading: #181d27;
+  font-family: var(--font-family);
+}

package/stories/sample-objects.stories.ts

@@ -0,0 +1,47 @@
+import { html } from "lit";
+
+import type { Meta, StoryObj } from "@storybook/web-components";
+
+import {
+  SampleObjects,
+  type ComponentProps,
+} from "@components/ui/sample-objects";
+
+import "@components/ui/sample-object";
+
+const meta: Meta<{ objects: ComponentProps[] }> = {
+  title: "components/sample-objects",
+  tags: ["autodocs", "!dev", "Some", "Tags"],
+  render: (args) => {
+    new SampleObjects();
+
+    return html`<sample-objects .objects=${args.objects}></sample-objects>`;
+  },
+  args: {
+    objects: [
+      {
+        "@id": "urn:uuid:1",
+        name: "Foo",
+      },
+      {
+        "@id": "urn:uuid:2",
+        name: "Bar",
+      },
+      {
+        "@id": "urn:uuid:3",
+        name: "Baz",
+      },
+    ],
+  },
+  argTypes: {
+    objects: {
+      control: "object",
+    },
+  },
+};
+
+export default meta;
+
+export type SampleObjectsStory = StoryObj<{ objects: { name: string }[] }>;
+
+export const Default: SampleObjectsStory = {};