@raclettejs/core 0.0.1

package/services/frontend/src/orchestrator/setup/i18n.ts

@@ -0,0 +1,312 @@
+import { createI18n, useI18n } from "vue-i18n"
+import type { I18n } from "vue-i18n"
+import { createVueI18nAdapter } from "vuetify/locale/adapters/vue-i18n"
+import defaultDateTimeFormats from "../i18n/dateTimeFormats"
+import defaultNumberFormats from "../i18n/numberFormats"
+import configService from "@racletteCore/lib/configService"
+import logger from "@racletteCore/lib/logger"
+import { mergeDeepRight } from "ramda"
+
+type LocaleFileImports = Record<string, () => Promise<any>>
+type Messages = Record<string, any>
+type DateLocales = Record<string, any>
+
+interface I18nInstance {
+  i18nInstance: I18n
+  instanceAdapter: { adapter: ReturnType<typeof createVueI18nAdapter> } | null
+  dateLocale: DateLocales
+}
+
+const i18nFiles: LocaleFileImports = import.meta.glob(
+  ["/src/orchestrator/i18n/**/*.json"],
+  { eager: false },
+)
+
+const vuetifyLocaleFiles: LocaleFileImports = import.meta.glob(
+  ["/node_modules/vuetify/lib/locale/*.js"],
+  { eager: false },
+)
+
+const dateFnsLocaleFiles: LocaleFileImports = import.meta.glob(
+  ["/node_modules/date-fns/locale/*.js"],
+  { eager: false },
+)
+
+let i18nInstance: I18n | null = null
+let instanceAdapter: { adapter: any } | null = null
+let dateLocale: DateLocales = {}
+let messages: Messages = {}
+
+const getAvailableLocales = (files: LocaleFileImports): string[] => {
+  return Object.keys(files).map((filePath) => {
+    const fileName = filePath.split("/").pop()!
+    return fileName.replace(".json", "").replace(".js", "")
+  })
+}
+
+const getAvailableDateFnsLocales = (files: LocaleFileImports): string[] => {
+  return Object.keys(files)
+    .map((filePath) => {
+      const fileName = filePath.split("/").pop()!
+      return fileName.replace(".js", "")
+    })
+    .filter((locale) => !locale.includes("cdn") && locale !== "types") // Filter out non-locale files
+}
+
+const createFormats = (locales: string[], defaultFormats: any) => {
+  return locales.reduce(
+    (formats, locale) => {
+      formats[locale] = defaultFormats.EU
+      return formats
+    },
+    {} as Record<string, any>,
+  )
+}
+
+const getShortLocale = (longLocale: string): string => {
+  return longLocale.split("-")[0]
+}
+
+const filterFilesByLocales = (
+  files: LocaleFileImports,
+  locales: string[],
+): LocaleFileImports => {
+  const filtered: LocaleFileImports = {}
+
+  Object.keys(files).forEach((filePath) => {
+    const fileName = filePath.split("/").pop()!
+    const fileLocale = fileName.replace(".json", "").replace(".js", "")
+
+    if (locales.includes(fileLocale)) {
+      filtered[filePath] = files[filePath]
+    }
+  })
+
+  return filtered
+}
+
+const filterDateFnsFilesByLocales = (
+  files: LocaleFileImports,
+  locales: string[],
+): LocaleFileImports => {
+  const filtered: LocaleFileImports = {}
+  const availableDateFnsLocales = getAvailableDateFnsLocales(files)
+
+  locales.forEach((locale) => {
+    let targetLocale = ""
+
+    // Try exact match first (e.g., "de-DE" -> "de-DE")
+    if (availableDateFnsLocales.includes(locale)) {
+      targetLocale = locale
+    }
+    // Try short locale (e.g., "de-DE" -> "de")
+    else if (availableDateFnsLocales.includes(getShortLocale(locale))) {
+      targetLocale = getShortLocale(locale)
+    }
+    // Fallback to "eu"
+    else if (availableDateFnsLocales.includes("eu")) {
+      targetLocale = "eu"
+    }
+
+    if (targetLocale.length) {
+      // Find the actual file path that matches this locale
+      const matchingFilePath = Object.keys(files).find((filePath) => {
+        const fileName = filePath.split("/").pop()!
+        return fileName.replace(".js", "") === targetLocale
+      })
+
+      if (matchingFilePath) {
+        filtered[matchingFilePath] = files[matchingFilePath]
+        console.log(
+          `Matched ${locale} -> ${targetLocale} (${matchingFilePath})`,
+        )
+      }
+    }
+  })
+
+  console.log("Filtered date-fns files:", Object.keys(filtered))
+  return filtered
+}
+
+const loadMessages = async (
+  locales: string[],
+  priorities: Record<string, number>,
+): Promise<Messages> => {
+  const filteredI18nFiles = filterFilesByLocales(i18nFiles, locales)
+  const shortLocales = locales.map(getShortLocale)
+  const filteredVuetifyFiles = filterFilesByLocales(
+    vuetifyLocaleFiles,
+    shortLocales,
+  )
+
+  const messages: Messages = {}
+
+  // Initialize message structure for each locale
+  locales.forEach((locale) => {
+    messages[locale] = {}
+  })
+
+  // First, collect all sections by locale
+  const sectionsByLocale: Record<
+    string,
+    Array<{ section: string; content: any; priority: number }>
+  > = {}
+
+  for (const [filePath, importFn] of Object.entries(filteredI18nFiles)) {
+    const module = await importFn()
+    const content = module.default || module
+
+    const fileName = filePath.split("/").pop()!
+    const fileLocale = fileName.replace(".json", "")
+
+    // Determine the folder/section
+    const pathParts = filePath.split("/")
+    const i18nIndex = pathParts.findIndex((part) => part === "i18n")
+    const folderPath = pathParts.slice(i18nIndex + 1, -1).join("/")
+    const section = folderPath || "."
+
+    // Check if section has priority defined
+    const priority = priorities[section]
+    if (priority === undefined) {
+      logger.warning(
+        `Section "${section}" for locale "${fileLocale}" has no priority defined and will be skipped`,
+      )
+      continue
+    }
+
+    if (!sectionsByLocale[fileLocale]) {
+      sectionsByLocale[fileLocale] = []
+    }
+
+    sectionsByLocale[fileLocale].push({
+      section,
+      content,
+      priority,
+    })
+  }
+
+  // Merge sections by priority for each locale
+  for (const [locale, sections] of Object.entries(sectionsByLocale)) {
+    // Sort by priority descending (highest number first = lowest priority)
+    const sortedSections = sections.sort((a, b) => b.priority - a.priority)
+
+    // Deep merge from lowest to highest priority
+    messages[locale] = sortedSections.reduce((merged, { content }) => {
+      return mergeDeepRight(merged, content || {})
+    }, {})
+  }
+
+  // Load Vuetify locales
+  for (const [filePath, importFn] of Object.entries(filteredVuetifyFiles)) {
+    const module = await importFn()
+    const vuetifyLocale = module.default || module
+
+    const fileName = filePath.split("/").pop()!
+    const shortLocale = fileName.replace(".js", "")
+
+    // Find corresponding long locale(s)
+    const matchingLocales = locales.filter(
+      (locale) => getShortLocale(locale) === shortLocale,
+    )
+
+    matchingLocales.forEach((locale) => {
+      if (messages[locale]) {
+        messages[locale].$vuetify = vuetifyLocale
+      }
+    })
+  }
+
+  return messages
+}
+
+const loadDateFnsLocales = async (locales: string[]): Promise<DateLocales> => {
+  const filteredDateFnsFiles = filterDateFnsFilesByLocales(
+    dateFnsLocaleFiles,
+    locales,
+  )
+  const dateLocales: DateLocales = {}
+
+  // Load date-fns locales
+  for (const [filePath, importFn] of Object.entries(filteredDateFnsFiles)) {
+    const module = await importFn()
+    const dateFnsLocale = module.default || module
+
+    // Extract the actual locale from the file path
+    const fileName = filePath.split("/").pop()!
+    const actualLocale = fileName.replace(".js", "")
+
+    // Map to all requesting locales that should use this date-fns locale
+    locales.forEach((requestedLocale) => {
+      const availableDateFnsLocales =
+        getAvailableDateFnsLocales(dateFnsLocaleFiles)
+
+      let shouldUseThisLocale = false
+
+      // Check if this is the exact match
+      if (requestedLocale === actualLocale) {
+        shouldUseThisLocale = true
+      }
+      // Check if this is the short locale fallback
+      else if (
+        getShortLocale(requestedLocale) === actualLocale &&
+        !availableDateFnsLocales.includes(requestedLocale)
+      ) {
+        shouldUseThisLocale = true
+      }
+      // Check if this is the "eu" fallback
+      else if (
+        actualLocale === "eu" &&
+        !availableDateFnsLocales.includes(requestedLocale) &&
+        !availableDateFnsLocales.includes(getShortLocale(requestedLocale))
+      ) {
+        shouldUseThisLocale = true
+      }
+
+      if (shouldUseThisLocale) {
+        dateLocales[requestedLocale] = dateFnsLocale
+      }
+    })
+  }
+
+  return dateLocales
+}
+
+const initI18n = async (): Promise<I18nInstance> => {
+  if (!i18nInstance) {
+    const fallbackLocale = "en-EU"
+    const { locales, priorities } = configService.getI18nConfig()
+    const availableLocales = getAvailableLocales(i18nFiles)
+    logger.orchestrator("Configured locales:", locales)
+    logger.orchestrator("Available locale files:", availableLocales)
+
+    // Load messages and date locales
+    messages = await loadMessages(locales, priorities)
+    dateLocale = await loadDateFnsLocales(locales)
+    logger.orchestrator("Loaded messages:", Object.keys(messages))
+    logger.orchestrator("Loaded date locales:", Object.keys(dateLocale))
+    const dateTimeFormats = createFormats(locales, defaultDateTimeFormats)
+    const numberFormatsForLocales = createFormats(locales, defaultNumberFormats)
+
+    i18nInstance = createI18n({
+      legacy: false,
+      globalInjection: true,
+      locale: navigator.language,
+      fallbackLocale: fallbackLocale,
+      messages,
+      datetimeFormats: dateTimeFormats,
+      numberFormats: numberFormatsForLocales,
+    })
+
+    instanceAdapter = {
+      adapter: createVueI18nAdapter({
+        i18n: i18nInstance,
+        useI18n,
+      }),
+    }
+  }
+
+  return { i18nInstance, instanceAdapter, dateLocale }
+}
+
+export default initI18n
+export { i18nInstance, instanceAdapter, dateLocale, initI18n }

package/services/frontend/src/orchestrator/setup/loginApp.ts

@@ -0,0 +1,26 @@
+export const createLoginApp = async (
+  el: string,
+  loginMethod: Function,
+  noUsers: boolean,
+) => {
+  const [{ createApp }, { default: LoginApp }, { i18n }, { default: vuetify }] =
+    await Promise.all([
+      import("vue"),
+      import("../LoginApp.vue"),
+      import("./i18n"),
+      import("./vuetify"),
+    ])
+
+  await Promise.all([
+    import("../assets/styles/main.scss"),
+    import("../assets/styles/tailwindStyles.css"),
+    import("../assets/styles/vuetifyStyles.scss"),
+  ])
+
+  const app = createApp(LoginApp, { loginMethod, noUsers })
+  app.use(i18n)
+  app.use(vuetify)
+  app.mount(el)
+
+  return app
+}

package/services/frontend/src/orchestrator/setup/vuetify.ts

@@ -0,0 +1,47 @@
+/**
+ * Set up vuetify instance
+ */
+import { createVuetify } from "vuetify"
+import * as components from "vuetify/components"
+import * as directives from "vuetify/directives"
+import lightTheme from "../assets/styles/themes/light"
+import darkTheme from "../assets/styles/themes/dark"
+import DateFnsAdapter from "@date-io/date-fns"
+
+const dark = {
+  dark: true,
+  colors: darkTheme,
+}
+
+const light = {
+  dark: false,
+  colors: lightTheme,
+}
+let vuetifyInstance
+const initVuetify = (instanceAdapter, dateLocale) => {
+  if (vuetifyInstance) {
+    return vuetifyInstance
+  }
+
+  vuetifyInstance = createVuetify({
+    locale: instanceAdapter,
+    date: {
+      adapter: DateFnsAdapter,
+      locale: dateLocale,
+    },
+    components,
+    directives,
+    theme: {
+      defaultTheme: "dark",
+      themes: {
+        dark,
+        light,
+      },
+    },
+    utilities: false,
+  })
+  return vuetifyInstance
+}
+
+export default initVuetify
+export { vuetifyInstance, initVuetify }

package/services/frontend/src/orchestrator/types/Composables.ts

@@ -0,0 +1,20 @@
+import type { Ref } from "vue"
+export interface NamespacedI18nOptions {
+  fallbackToGlobal?: boolean
+  debugMode?: boolean
+}
+
+export interface NamespacedI18nReturn {
+  t: (key: string, ...args: any[]) => string
+  te: (key: string) => boolean
+  tm: (key: string) => any
+  rt: (key: string, ...args: any[]) => string
+  d: Function
+  n: Function
+  locale: Ref<string>
+  fallbackLocale: Ref<string>
+  createFullKey: (key: string) => string
+  namespace: string
+  setNamespaceMessages: (locale: string, messages: Record<string, any>) => void
+  getNamespaceMessages: (locale: string) => Record<string, any>
+}

package/services/frontend/src/orchestrator/types/PluginApi.ts

@@ -0,0 +1,48 @@
+import type { useI18n } from "vue-i18n"
+import type { ComputedRef } from "vue"
+import type { CorePluginApi } from "@racletteCore/main"
+import type {
+  CustomStoreActionsPayload,
+  PluginStoreApi,
+} from "@racletteCore/types"
+import type { Query } from "@racletteCore/store/reducers/queries/reducers"
+import type { actionId } from "@racletteCore"
+import type { Socket } from "socket.io-client"
+import type { User } from "@shared/types"
+// TODO: finalize types
+// TODO: generate this type from index.ts in the plugin & extend it globally
+
+export type PluginMethod = (payload?: CustomStoreActionsPayload) => {
+  query: Query
+  data: ComputedRef<unknown>
+  execute: (params?: Record<string, any>) => void
+  // TODO: implement this in the useVueQueryObservableHelper remove: () => void
+}
+export type PluginSocketApi = {
+  registeredListeners: Array<{ eventName: string; handlerFn: Function }>
+  on: (eventName: string, handlerFn: Function) => Socket["on"]
+  once: (eventName: string, handlerFn: Function) => Socket["once"]
+  off: (eventName: string, handlerFn: Function) => Socket["off"]
+  emit: (eventName: string, eventPayload: any) => Socket["emit"]
+}
+// TODO: get rid about the two types "PluginCoreApi" / "PluginApi"
+export type PluginApi = {
+  $eventbus?: any
+  $globalEventbus?: any
+  $user: ComputedRef<User>
+  $store: PluginStoreApi
+  $log: ReturnType<CorePluginApi["$log"]["plugin"]>
+  $file: any
+  $data: Record<string, Record<string, PluginMethod>>
+  error: any
+  $socket: PluginSocketApi
+  $i18n: ReturnType<typeof useI18n>
+}
+export type PluginApiParams = {
+  actionId?: actionId
+  $data?: boolean
+  $store?: boolean
+  $eventbus?: boolean
+  $socket?: boolean
+  pluginKey?: string
+}

package/services/frontend/src/orchestrator/types/Widgets.ts

@@ -0,0 +1,54 @@
+// all possible input types for the widget settings
+export type EditorInputTypes =
+  | "text"
+  | "number"
+  | "checkbox"
+  | "switch"
+  | "multiselect"
+  | "select"
+
+export type EditorSettings = {
+  inputType: EditorInputTypes
+  min?: number
+  max?: number
+  step?: number
+  selectionValues?: string[]
+}
+
+export type VuePropType =
+  | StringConstructor
+  | NumberConstructor
+  | BooleanConstructor
+  | ArrayConstructor
+  | ObjectConstructor
+  | Function
+
+export type WidgetConf = {
+  [key: string]: {
+    type: VuePropType
+    default: string | number | boolean | Function
+    editor: EditorSettings
+  }
+}
+
+export type ConfigurableParameters = Record<
+  string,
+  EditorSettings & { defaultValue: any }
+>
+
+export type RegisteredWidgetDeclaration = {
+  pluginKey: string
+  author: string
+  title: string
+  color: string
+  icon: string
+  images: string[]
+  description: string
+  configurableParameters?: ConfigurableParameters
+  name: string
+}
+
+export type WidgetDeclaration = Omit<
+  RegisteredWidgetDeclaration,
+  "pluginKey" | "author" | "name" // name will be extracted via filename, cannot be overwritten
+>

package/services/frontend/src/orchestrator/types/index.ts

@@ -0,0 +1,3 @@
+export type * from "./PluginApi"
+export type * from "./Widgets"
+export type * from "./Composables"

package/services/frontend/tsconfig.app.json

@@ -0,0 +1,19 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "baseUrl": "./",
+    "noImplicitAny": false,
+    "types": ["vite/client"],
+    "paths": {
+      "@shared/*": ["../backend/src/shared/*"],
+      "@core": ["../.."],
+      "@racletteCore/*": ["./src/core/*"],
+      "@racletteCore": ["./src/core"],
+      "@racletteOrchestrator": ["./src/orchestrator"],
+      "@racletteOrchestrator/*": ["./src/orchestrator/*"]
+    }
+  },
+  "include": ["./**/*", "env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["node_modules", ".yarn"]
+}

package/services/frontend/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ],
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "baseUrl": ".",
+    "paths": {
+      "@shared/*": ["../backend/src/shared/*"],
+      "@core": ["../.."]
+    }
+  },
+  "files": []
+}

package/services/frontend/tsconfig.node.json

@@ -0,0 +1,21 @@
+{
+  "extends": "@tsconfig/node20/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*",
+    "vite-plugin-component-path.ts",
+    "./src/core/lib/eggs/chadsay"
+  ],
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "composite": true,
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node", "vite/client"]
+  }
+}

package/services/frontend/types.ts

@@ -0,0 +1,2 @@
+export type * from "./src/core/types"
+export type * from "./src/orchestrator/types"

package/services/frontend/vite-env.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="vite/client" />
+
+declare module "virtual:plugin-key" {
+  export function definePluginKey(name: string): void
+  export function getCurrentPluginKey(instanceUid: number): string | null
+}
+
+declare module "*.vue" {
+  import type { DefineComponent } from "vue"
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}