@raclettejs/core 0.0.1

package/services/frontend/src/core/lib/logger.ts

@@ -0,0 +1,260 @@
+import getEnvVariable from "@racletteCore/lib/getEnvVariable"
+
+/**
+ * Custom logger function
+ *
+ * We use this mainly to format the output in the dev console, e.g.
+ * in order to color code log messages and events coming from
+ * different components, such as:
+ *   - redux store
+ *   - websocket client
+ *   - http API client
+ *
+ * Examples:
+ *
+ * 1. Use generic log function
+ *    log.log('my message', 'store', 'my title')
+ *
+ * 2. Use shortcuts for types with message/data and title as parameters
+ *    log.api('GET ticket', data)
+ *    log.store('My custom log event', data)
+ *    log.socket('subject line', { msg: 'some message', data: {} })
+ *    log.info('Simple message')
+ *
+ * NOTE: When using the error method, the console will point to this file.
+ * For better stack traces, use console.error directly in your code.
+ */
+
+/**
+ * Log levels enum
+ */
+export enum LogLevel {
+  NoLogging = 0,
+  Development = 1,
+  Verbose = 2,
+}
+
+/**
+ * Available log types
+ */
+export type LogType =
+  | "orchestrator"
+  | "plugin"
+  | "pluginRegistrar"
+  | "api"
+  | "queryApi"
+  | "default"
+  | "error"
+  | "event"
+  | "info"
+  | "socket"
+  | "store"
+  | "warning"
+  | "widgets"
+
+/**
+ * Color codes for each log type
+ */
+const LOG_TYPE_COLORS: Record<LogType, string> = {
+  orchestrator: "#359369",
+  plugin: "#00f050",
+  pluginRegistrar: "#00f000",
+  api: "#c666ff",
+  queryApi: "#f464af",
+  default: "#148dbc",
+  error: "#fc4b4b",
+  event: "#008000",
+  info: "#148dbc",
+  socket: "#eee600",
+  store: "#0DBC79",
+  warning: "#CC8800",
+  widgets: "#ad449d",
+} as const
+
+/**
+ * Message can be any serializable value
+ */
+export type LogMessage = unknown
+
+/**
+ * Formatted log entry with timestamp
+ */
+interface LogEntry {
+  message: LogMessage
+  dateTime: string
+}
+
+/**
+ * Plugin logger function type
+ */
+export type PluginLogger = (
+  title: string,
+  message?: LogMessage,
+  level?: LogLevel,
+) => void
+
+/**
+ * Creates a formatted log entry with timestamp
+ */
+function createLogEntry(message: LogMessage): LogEntry {
+  const date = new Date()
+  const day = date.getDate().toString().padStart(2, "0")
+  const month = (date.getMonth() + 1).toString().padStart(2, "0") // Month is 0-indexed
+  const year = date.getFullYear()
+  const hour = date.getHours().toString().padStart(2, "0")
+  const minutes = date.getMinutes().toString().padStart(2, "0")
+  const seconds = date.getSeconds().toString().padStart(2, "0")
+  const milliseconds = date.getMilliseconds().toString().padStart(3, "0")
+
+  const dateTime = `${day}.${month}.${year} - ${hour}:${minutes}:${seconds}:${milliseconds}`
+
+  return {
+    message,
+    dateTime,
+  }
+}
+
+/**
+ * Logger Class
+ */
+class Logger {
+  private level: LogLevel
+
+  constructor(level: LogLevel = LogLevel.Development) {
+    this.level = level
+  }
+
+  /**
+   * Set the log level
+   */
+  setLevel(level: LogLevel): void {
+    this.level = level
+  }
+
+  /**
+   * Get the current log level
+   */
+  getLevel(): LogLevel {
+    return this.level
+  }
+
+  /**
+   * Check if debug mode is enabled
+   */
+  private isDebugEnabled(): boolean {
+    const debugMode = getEnvVariable("RACLETTE_DEBUG_MODE")
+    return debugMode === "true" || !debugMode
+  }
+
+  /**
+   * Core log method
+   */
+  log(
+    message: LogMessage,
+    type: LogType = "default",
+    title: string = "",
+    level: LogLevel = LogLevel.Development,
+  ): boolean {
+    // Return early if the message level is higher than the current log level
+    if (level > this.level) {
+      return false
+    }
+
+    const logEntry = createLogEntry(message)
+    const color = LOG_TYPE_COLORS[type]
+    const label = title ? `${type}/${title}` : type
+
+    // Handle simple log with just message
+    if (arguments.length === 1) {
+      console.debug(logEntry)
+      return true
+    }
+
+    // Handle error logs
+    if (type === "error") {
+      console.error(`%c${label}`, `color: ${color}`, "\n", logEntry)
+      return true
+    }
+
+    // Handle regular logs (only if debug is enabled)
+    if (this.isDebugEnabled()) {
+      console.debug(`%c${label}`, `color: ${color}`, "\n", logEntry)
+    }
+
+    return true
+  }
+
+  /**
+   * Convenience methods for different log types
+   */
+
+  socket(title: string, message?: LogMessage, level?: LogLevel): void {
+    this.log(message, "socket", title, level)
+  }
+
+  store(title: string, message?: LogMessage, level?: LogLevel): void {
+    this.log(message, "store", title, level)
+  }
+
+  queryApi(title: string, message?: LogMessage, level?: LogLevel): void {
+    const actionId =
+      message &&
+      typeof message === "object" &&
+      message !== null &&
+      "actionId" in message
+        ? message.actionId
+        : ""
+    this.log(message, "queryApi", `${title} ${actionId}`.trim(), level)
+  }
+
+  api(title: string, message?: LogMessage, level?: LogLevel): void {
+    this.log(message, "api", title, level)
+  }
+
+  event(title: string, message?: LogMessage, level?: LogLevel): void {
+    this.log(message, "event", title, level)
+  }
+
+  error(
+    title: string,
+    message?: LogMessage,
+    level: LogLevel = LogLevel.NoLogging,
+  ): void {
+    this.log(message, "error", title, level)
+  }
+
+  warning(title: string, message?: LogMessage, level?: LogLevel): void {
+    this.log(message, "warning", title, level)
+  }
+
+  info(title: string, message?: LogMessage, level?: LogLevel): void {
+    this.log(message, "info", title, level)
+  }
+
+  orchestrator(title: string, message?: LogMessage, level?: LogLevel): void {
+    this.log(message, "orchestrator", title, level)
+  }
+
+  pluginRegistrar(title: string, message?: LogMessage, level?: LogLevel): void {
+    this.log(message, "pluginRegistrar", title, level)
+  }
+
+  widgets(title: string, message?: LogMessage, level?: LogLevel) {
+    this.log(message, "widgets", title, level)
+  }
+
+  /**
+   * Create a plugin-specific logger
+   */
+  plugin(pluginKey: string): PluginLogger {
+    return (title: string, message?: LogMessage, level?: LogLevel): void => {
+      this.log(message, "plugin", `${pluginKey} - ${title}`, level)
+    }
+  }
+}
+
+// Export both the class and singleton instance
+export { Logger }
+export default new Logger()
+
+export type LoggerInstance = typeof Logger

package/services/frontend/src/core/lib/observableHelpers/getStateObservable.ts

@@ -0,0 +1,255 @@
+import { $store } from "@racletteCore"
+/**
+ * Advanced selector for Redux store that supports complex path querying with namespacing
+ * and mixed selection patterns
+ *
+ * // Select specific nested property
+ * select(['data', 'testID', 'someProperty'])
+ *
+ * // Select multiple specific keys from data
+ * select(['data', ['testID', 'testID3']])
+ *
+ * // Select nested properties from multiple selected keys
+ * select(['data', ['testID', 'testID3'], '_source'])
+ * select(['data', ['testID', 'testID3'], '_source'])
+ *
+ * // Multiple independent selections with custom names
+ * select([
+ *   { path: 'data.testID', as: 'currentTest', namespace:'testname' },
+ *   { path: 'ui.theme', as: 'appearance' },
+ *   { path: 'backend.state', as: 'connection' }
+ * ])
+ *
+ * // Multiple nested selections
+ * select([
+ *   { path: 'data.testID.nestedProp1', as: 'customKey', namespace: 'testname' },
+ *   { path: 'data.testID2.nestedProp2' },
+ *   { path: 'ui.theme' }
+ * ])
+ */
+export default (queryPath) =>
+  $store.select((state) => {
+    // Handle empty query
+    if (!queryPath) {
+      return state
+    }
+
+    // If queryPath is a string or an array that's not an array of objects
+    if (
+      typeof queryPath === "string" ||
+      (Array.isArray(queryPath) &&
+        (queryPath.length === 0 ||
+          !(
+            typeof queryPath[0] === "object" &&
+            !Array.isArray(queryPath[0]) &&
+            "path" in queryPath[0]
+          )))
+    ) {
+      // If it's a simple selection (string or array path)
+      if (typeof queryPath === "string") {
+        return state[queryPath]
+      } else if (
+        Array.isArray(queryPath) &&
+        !queryPath.some(
+          (item) => typeof item === "object" && !Array.isArray(item),
+        )
+      ) {
+        // It's a simple array path like ['data', 'testID']
+        return processPathArray(state, queryPath)
+      } else {
+        // It's a mixed array with different selection styles
+        return processMixedQuery(state, queryPath)
+      }
+    }
+
+    // Handle single path object
+    if (
+      typeof queryPath === "object" &&
+      !Array.isArray(queryPath) &&
+      queryPath.path
+    ) {
+      return processSinglePathObject(state, queryPath)
+    }
+
+    // Handle array of selection objects
+    if (Array.isArray(queryPath)) {
+      return processMixedQuery(state, queryPath)
+    }
+
+    console.warn("Invalid query path format")
+
+    return state
+  })
+
+/**
+ * Process an array of path segments ['data', 'testID', etc.]
+ */
+const processPathArray = (state, pathArray) => {
+  let current = state
+  let multipleKeysIndex = -1
+  let multipleKeysResult = null
+
+  for (let i = 0; i < pathArray.length; i++) {
+    const segment = pathArray[i]
+
+    // Handle null/undefined current state
+    if (current === null || current === undefined) {
+      console.warn(
+        `Path ${pathArray.slice(0, i).join(".")} resulted in null/undefined`,
+      )
+
+      return null
+    }
+
+    // Handle different segment types
+    if (typeof segment === "string") {
+      // Wildcard: select all immediate children
+      if (segment === "*") {
+        return current
+      }
+
+      // Deep wildcard: select all nested children
+      if (segment === "**") {
+        return current
+      }
+
+      // If we previously selected multiple keys, we need to traverse each one
+      if (multipleKeysResult !== null) {
+        // Apply the property access to each selected key result
+        Object.keys(multipleKeysResult).forEach((key) => {
+          if (
+            multipleKeysResult[key] !== null &&
+            multipleKeysResult[key] !== undefined
+          ) {
+            multipleKeysResult[key] = multipleKeysResult[key][segment]
+          }
+        })
+        current = multipleKeysResult
+      } else {
+        // Regular string key - normal traversal
+        current = current[segment]
+      }
+    }
+    // Array of keys to select at this level
+    else if (Array.isArray(segment)) {
+      const result = {}
+
+      // Store the index where we found multiple keys for later use
+      multipleKeysIndex = i
+      multipleKeysResult = result
+
+      segment.forEach((key) => {
+        if (current[key] !== undefined) {
+          result[key] = current[key]
+        }
+      })
+      current = result
+    }
+    // Invalid segment type
+    else {
+      console.warn(`Invalid path segment at index ${i}`)
+
+      return null
+    }
+  }
+
+  return current
+}
+
+/**
+ * Process a single path object with optional namespace
+ */
+const processSinglePathObject = (state, pathObj) => {
+  const value = getByStringPath(state, pathObj.path)
+
+  // If namespace is provided, nest the result under that namespace
+  if (pathObj.namespace) {
+    const result = {}
+    const key = pathObj.as || pathObj.path.split(".").pop()
+
+    result[pathObj.namespace] = {
+      [key]: value,
+    }
+
+    return result
+  } else {
+    // No namespace, return as a simple key-value
+    const result = {}
+    const key = pathObj.as || pathObj.path.split(".").pop()
+
+    result[key] = value
+
+    return result
+  }
+}
+
+/**
+ * Process a mixed array of different selection styles
+ */
+const processMixedQuery = (state, queryItems) => {
+  const result = {}
+  const namespaces = {}
+
+  queryItems.forEach((item) => {
+    // Handle path object style selection
+    if (typeof item === "object" && !Array.isArray(item) && item.path) {
+      const value = getByStringPath(state, item.path)
+      const key = item.as || item.path.split(".").pop()
+
+      // Handle namespaced result
+      if (item.namespace) {
+        // Initialize namespace if it doesn't exist
+        if (!namespaces[item.namespace]) {
+          namespaces[item.namespace] = {}
+          result[item.namespace] = namespaces[item.namespace]
+        }
+
+        // Add value to the appropriate namespace
+        namespaces[item.namespace][key] = value
+      } else {
+        // Non-namespaced result goes directly at the root level
+        result[key] = value
+      }
+    }
+    // Handle string style selection (top-level key)
+    else if (typeof item === "string") {
+      result[item] = state[item]
+    }
+    // Handle array path style selection
+    else if (Array.isArray(item)) {
+      // Get the last segment as the key name, or use the full path if empty
+      const key =
+        item.length > 0
+          ? Array.isArray(item[item.length - 1])
+            ? `${item.slice(0, -1).join(".")}`
+            : typeof item[item.length - 1] === "string"
+              ? item[item.length - 1]
+              : item.join(".")
+          : "result"
+
+      const value = processPathArray(state, item)
+
+      result[key] = value
+    }
+    // Invalid item type
+    else {
+      console.warn("Invalid query item", item)
+    }
+  })
+
+  return result
+}
+
+/**
+ * Get a value from state using a dot-notation string path
+ * e.g., 'data.testID.subField'
+ */
+const getByStringPath = (state, path) =>
+  path.split(".").reduce((obj, key) => {
+    // Handle wildcards in path
+    if (key === "*" || key === "**") {
+      return obj
+    }
+
+    return obj && obj[key] !== undefined ? obj[key] : null
+  }, state)

package/services/frontend/src/core/lib/projectDataHelper.ts

@@ -0,0 +1,92 @@
+import { $store } from "@racletteCore"
+import type { Composition } from "@shared/types/core/Composition.types"
+import type { InteractionLink } from "@shared/types/core/InteractionLink.types"
+import type { ProjectConfiguration } from "../store/types"
+import { useLocalStorage } from "@vueuse/core"
+
+const setupSpace = async (
+  compositions: Composition[],
+  interactionLinks: InteractionLink[],
+  projectConfig: ProjectConfiguration,
+) => {
+  const userLanguage = useLocalStorage<string>("user-language", null)
+  const userTheme = useLocalStorage<string>("user-theme", null)
+  let sessionTheme = userTheme.value
+  let sessionLocale = userLanguage.value
+  // set compositions
+  if (Array.isArray(compositions) && compositions.length > 0) {
+    await $store.dispatch({
+      type: "compositions/add",
+      payload: compositions,
+    })
+  }
+  // set interactionLinks
+  if (Array.isArray(interactionLinks) && interactionLinks.length > 0) {
+    await $store.dispatch({
+      type: "interactionLinks/set",
+      payload: interactionLinks,
+    })
+  }
+
+  // set projectConfig
+  if (projectConfig?.browser?.ui) {
+    await $store.dispatch({
+      type: "ui/update",
+      payload: projectConfig.browser.ui,
+    })
+  }
+
+  if (!userLanguage.value) {
+    sessionLocale = navigator.language || navigator.userLanguage
+  }
+  if (!userTheme.value) {
+    let theme = "light"
+    if (
+      window.matchMedia &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches
+    ) {
+      theme = "dark"
+    }
+
+    sessionTheme = theme
+  }
+  await $store.dispatch({
+    type: "ui/update",
+    payload: { theme: sessionTheme, locale: sessionLocale },
+  })
+}
+
+/**
+ * setUserBrowserConfig
+ *
+ * @param { string } project, the project id
+ * @param { object } config, the config object
+ * @param { object } $store, our rx Store instance
+ * @return { void }
+ *
+ * will apply a given config object to the application state.
+ */
+const setUserBrowserConfig = (userConfig, $store) => {
+  // early return if we didn't receive project and its configuration
+  if (!userConfig._source?.config) {
+    return
+  }
+  const config = userConfig._source?.config
+
+  if (!config) {
+    return
+  }
+  $store.dispatch({
+    type: "project/addConfig",
+    payload: userConfig,
+  })
+  // add browser ui configuration to store
+  if (config?.browser?.ui) {
+    $store.dispatch({
+      type: "ui/update",
+      payload: config.browser.ui,
+    })
+  }
+}
+
+export { setUserBrowserConfig, setupSpace }

package/services/frontend/src/core/lib/reducerFromMap.ts

@@ -0,0 +1,13 @@
+// TODO remove this file and all references
+const reducerFromMap = (reducerMap) => (state, action) => {
+  if (!state) {
+    return
+  }
+
+  return reducerMap[action.type]
+    ? reducerMap[action.type](state, action)
+    : state
+}
+
+export default reducerFromMap
+export { reducerFromMap }

package/services/frontend/src/core/lib/uriParser.ts

@@ -0,0 +1,35 @@
+/**
+ * Gets a nested property value from an object using dot notation
+ * @param obj - The object to get the value from
+ * @param path - The dot-separated path (e.g., "_source.meta.test")
+ * @returns The value at the path or undefined if not found
+ */
+const getNestedValue = (obj: Record<string, any>, path: string): any => {
+  return path.split(".").reduce((current, key) => {
+    return current && typeof current === "object" ? current[key] : undefined
+  }, obj)
+}
+
+/**
+ * Replaces placeholders in a URL template with values from an object
+ * Supports both simple properties (:_id) and nested properties (:_source.meta.test)
+ * @param template - URL template with placeholders like "/cluster/:_id" or "/test/:_source.meta.test"
+ * @param params - Object containing replacement values
+ * @returns URL string with placeholders replaced, unmatched placeholders remain unchanged
+ */
+export const replaceUrlParams = (
+  template: string,
+  params: Record<string, any>,
+): string => {
+  return template.replace(/:([a-zA-Z_][\w.]*)/g, (match, paramPath) => {
+    const value = getNestedValue(params, paramPath)
+    return value !== undefined ? String(value) : match
+  })
+}
+
+// Curried version if you prefer functional style
+export const replaceUrlParamsCurried =
+  (template: string) =>
+  (params: Record<string, any>): string => {
+    return replaceUrlParams(template, params)
+  }