@liorian/sdk 0.28.0-alpha.56010ca

package/src/infrastructure/hooks/use-elastic-interaction.ts

@@ -0,0 +1,180 @@
+"use client"
+
+import * as React from "react"
+import { useCallback, useRef } from "react"
+import gsap from "gsap"
+
+export interface ElasticInteractionOptions {
+    /**
+     * Scale applied while the element is pressed.
+     * @default 0.97
+     */
+    pressScale?: number
+    /**
+     * Scale applied while the element is focused.
+     * @default 1.02
+     */
+    focusScale?: number
+    /**
+     * Scale applied while the element is hovered. When omitted, no hover
+     * animation is attached.
+     */
+    hoverScale?: number
+    /**
+     * Vertical offset (in px) applied while pressed, for a tactile "press down" feel.
+     * @default 0
+     */
+    pressY?: number
+    /**
+     * Duration of the press-down tween (seconds).
+     * @default 0.08
+     */
+    pressDuration?: number
+    /**
+     * Duration of the elastic settle tween (seconds).
+     * @default 0.6
+     */
+    duration?: number
+}
+
+export function chainHandlers(
+    ...handlers: Array<((...args: any[]) => void) | undefined | null>
+): (...args: any[]) => void {
+    return (...args: any[]) => {
+        for (const handler of handlers) {
+            if (handler) handler(...args)
+        }
+    }
+}
+
+/**
+ * Adds organic, elastic scale transitions to an element in response to
+ * click/press and focus/blur. Handlers target `event.currentTarget`, so they
+ * can be attached directly to the element that should animate (no ref needed).
+ */
+export function useElasticInteraction({
+    pressScale = 0.97,
+    focusScale = 1.02,
+    hoverScale,
+    pressY = 0,
+    pressDuration = 0.08,
+    duration = 0.6,
+}: ElasticInteractionOptions = {}) {
+    const pressedRef = useRef(false)
+    const focusedRef = useRef(false)
+    const hoveredRef = useRef(false)
+
+    const animate = useCallback((el: Element, vars: gsap.TweenVars) => {
+        gsap.to(el, { ...vars, overwrite: "auto" })
+    }, [])
+
+    const settle = useCallback(
+        (el: Element) => {
+            const target = pressedRef.current
+                ? pressScale
+                : hoveredRef.current && hoverScale !== undefined
+                    ? hoverScale
+                    : focusedRef.current
+                        ? focusScale
+                        : 1
+            animate(el, {
+                scale: target,
+                y: 0,
+                duration,
+                ease: "elastic.out(1, 0.4)",
+            })
+        },
+        [animate, duration, pressScale, focusScale, hoverScale]
+    )
+
+    const onPointerDown = useCallback(
+        (event: React.PointerEvent<HTMLElement>) => {
+            pressedRef.current = true
+            animate(event.currentTarget, {
+                scale: pressScale,
+                y: pressY,
+                duration: pressDuration,
+                ease: "power2.out",
+            })
+        },
+        [animate, pressScale, pressY, pressDuration]
+    )
+
+    const onPointerUp = useCallback(
+        (event: React.PointerEvent<HTMLElement>) => {
+            pressedRef.current = false
+            settle(event.currentTarget)
+        },
+        [settle]
+    )
+
+    const onPointerCancel = useCallback(
+        (event: React.PointerEvent<HTMLElement>) => {
+            pressedRef.current = false
+            settle(event.currentTarget)
+        },
+        [settle]
+    )
+
+    const onPointerLeave = useCallback(
+        (event: React.PointerEvent<HTMLElement>) => {
+            if (!pressedRef.current) return
+            pressedRef.current = false
+            settle(event.currentTarget)
+        },
+        [settle]
+    )
+
+    const onFocus = useCallback(
+        (event: React.FocusEvent<HTMLElement>) => {
+            focusedRef.current = true
+            animate(event.currentTarget, {
+                scale: focusScale,
+                duration: 0.4,
+                ease: "elastic.out(1, 0.5)",
+            })
+        },
+        [animate, focusScale]
+    )
+
+    const onBlur = useCallback(
+        (event: React.FocusEvent<HTMLElement>) => {
+            focusedRef.current = false
+            settle(event.currentTarget)
+        },
+        [settle]
+    )
+
+    const onMouseEnter = useCallback(
+        (event: React.MouseEvent<HTMLElement>) => {
+            if (hoverScale === undefined) return
+            hoveredRef.current = true
+            animate(event.currentTarget, {
+                scale: hoverScale,
+                duration: 0.5,
+                ease: "elastic.out(1, 0.6)",
+            })
+        },
+        [animate, hoverScale]
+    )
+
+    const onMouseLeave = useCallback(
+        (event: React.MouseEvent<HTMLElement>) => {
+            if (hoverScale === undefined) return
+            hoveredRef.current = false
+            settle(event.currentTarget)
+        },
+        [settle, hoverScale]
+    )
+
+    return {
+        onPointerDown,
+        onPointerUp,
+        onPointerCancel,
+        onPointerLeave,
+        onFocus,
+        onBlur,
+        onMouseEnter,
+        onMouseLeave,
+    }
+}

package/src/infrastructure/hooks/use-is-desktop.ts

@@ -0,0 +1,25 @@
+"use client";
+
+import * as React from "react";
+
+export const DESKTOP_BREAKPOINT = 768;
+
+/**
+ * Hook to determine if the current viewport corresponds to a desktop screen (width >= breakpoint).
+ * Defaults to 768px (md breakpoint).
+ */
+export function useIsDesktop(breakpoint: number = DESKTOP_BREAKPOINT): boolean {
+  const [isDesktop, setIsDesktop] = React.useState<boolean>(false);
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(min-width: ${breakpoint}px)`);
+    const onChange = () => {
+      setIsDesktop(mql.matches);
+    };
+    mql.addEventListener("change", onChange);
+    setIsDesktop(mql.matches);
+    return () => mql.removeEventListener("change", onChange);
+  }, [breakpoint]);
+
+  return isDesktop;
+}

package/src/infrastructure/hooks/use-is-tauri.ts

@@ -0,0 +1,17 @@
+"use client";
+
+import * as React from "react";
+import { isTauri } from "../utilities/tauri.util";
+
+/**
+ * Hook to determine if the application is running inside Tauri.
+ */
+export function useIsTauri(): boolean {
+  const [inTauri, setInTauri] = React.useState<boolean>(false);
+
+  React.useEffect(() => {
+    setInTauri(isTauri());
+  }, []);
+
+  return inTauri;
+}

package/src/infrastructure/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

package/src/infrastructure/hooks/use-notifications.ts

@@ -0,0 +1,128 @@
+"use client"
+
+import {useState} from "react";
+import {useQuery} from "@tanstack/react-query";
+import {PaginationState} from "@tanstack/react-table";
+import {AppConfig} from "../../domain/config/app.config";
+import {FetchResponseMetaProps} from "../../domain/typing/response";
+import {NotificationsApiService} from "../../application/service/notifications-api-service";
+import {NotificationsSocketService} from "../../application/service/notifications-socket-service";
+import {NotificationInterface} from "../../domain/entities/notification.interface";
+import {useAuth} from "./use-auth";
+
+export type NotificationCategory = "user" | "organization";
+
+export interface NotificationsQuery {
+    data: NotificationInterface[];
+    meta: FetchResponseMetaProps;
+}
+
+export interface UseNotificationsOptions {
+    limit?: number;
+    enabled?: boolean;
+    manualPagination?: boolean;
+    read?: boolean;
+}
+
+export interface UseNotificationsResult extends NotificationsQuery {
+    isLoading: boolean;
+    isFetching: boolean;
+    isError: boolean;
+    pageCount: number;
+    pagination: PaginationState;
+    setPagination: (pagination: PaginationState) => void;
+    refetch: () => void;
+}
+
+function normalizeResponse(payload: any): NotificationsQuery {
+    const empty: NotificationsQuery = {data: [], meta: {}};
+
+    if (!payload) return empty;
+
+    if (Array.isArray(payload)) {
+        return {data: payload, meta: {}};
+    }
+
+    if (Array.isArray(payload.data)) {
+        return {data: payload.data, meta: payload.meta || {}};
+    }
+
+    if (Array.isArray(payload.items)) {
+        return {
+            data: payload.items,
+            meta: {
+                total: payload.total,
+                page: payload.page,
+                limit: payload.limit,
+                totalPages: payload.totalPages,
+            },
+        };
+    }
+
+    if (Array.isArray(payload.notifications)) {
+        return {
+            data: payload.notifications,
+            meta: {
+                total: payload.total,
+                page: payload.page,
+                limit: payload.limit,
+                totalPages: payload.totalPages,
+            },
+        };
+    }
+
+    return empty;
+}
+
+export function useNotifications(
+    category: NotificationCategory,
+    options: UseNotificationsOptions = {}
+): UseNotificationsResult {
+    const {currentOrganization} = useAuth();
+    const {limit = 10, enabled = true, manualPagination = true} = options;
+    const [pagination, setPagination] = useState<PaginationState>({
+        pageIndex: 0,
+        pageSize: limit,
+    });
+
+
+    const query = useQuery<NotificationsQuery>({
+        queryKey: ['notifications', category, pagination.pageIndex, pagination.pageSize, options.read],
+        enabled,
+        queryFn: async () => {
+            const page = manualPagination ? pagination.pageIndex + 1 : 1;
+            const pageSize = manualPagination ? pagination.pageSize : limit;
+            const params = {page, limit: pageSize, read: options.read}
+
+            const payload = category === "user"
+                ? await NotificationsApiService.getAll(params)
+                : (
+                    currentOrganization?.id
+                        ? await NotificationsApiService.getAllByOrganization(currentOrganization.id, params)
+                        : null
+                )
+            ;
+
+            const body = category === "user" ? payload?.data : payload;
+            return normalizeResponse(body);
+        },
+        refetchInterval: AppConfig.APP_REFRESH_UI,
+        refetchOnWindowFocus: false,
+    });
+
+    const pageCount = query.data?.meta?.total && query.data?.meta?.limit
+        ? Math.ceil(query.data.meta.total / query.data.meta.limit)
+        : 0;
+
+    return {
+        data: query.data?.data ?? [],
+        meta: query.data?.meta ?? {},
+        isLoading: query.isLoading,
+        isFetching: query.isFetching,
+        isError: query.isError,
+        pageCount,
+        pagination,
+        setPagination,
+        refetch: query.refetch,
+    };
+}

package/src/infrastructure/hooks/use-recent-colors.ts

@@ -0,0 +1,113 @@
+"use client"
+
+import { useCallback, useEffect, useRef, useState } from "react"
+
+import { UserPreferencesApiService } from "../../application/service/user-preferences-api.service"
+import { useAuth } from "./use-auth"
+
+const STORAGE_KEY = "liorian-workspace:recent-colors"
+const API_LABEL = "recent-colors"
+const MAX_RECENT_COLORS = 10
+const SYNC_DEBOUNCE_MS = 500
+const COLOR_REGEX = /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/
+
+function parseColors(value: unknown): string[] {
+  if (!Array.isArray(value)) return []
+  return value
+    .filter((color): color is string => typeof color === "string" && COLOR_REGEX.test(color))
+    .slice(0, MAX_RECENT_COLORS)
+}
+
+function loadFromStorage(): string[] {
+  if (typeof window === "undefined") return []
+  try {
+    return parseColors(JSON.parse(window.localStorage.getItem(STORAGE_KEY) ?? "[]"))
+  } catch {
+    return []
+  }
+}
+
+function saveToStorage(colors: string[]) {
+  if (typeof window === "undefined") return
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(colors))
+  } catch {
+    // Stockage indisponible (navigation privée, quota...) : on ignore.
+  }
+}
+
+export interface UseRecentColorsOptions {
+  enabled?: boolean
+}
+
+export function useRecentColors(options: UseRecentColorsOptions = {}) {
+  const { enabled = true } = options
+  const { user } = useAuth()
+  const userId = user?.id
+  const [recentColors, setRecentColors] = useState<string[]>(loadFromStorage)
+  const syncTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const latestColors = useRef(recentColors)
+
+  useEffect(() => {
+    latestColors.current = recentColors
+  }, [recentColors])
+
+  useEffect(() => {
+    if (!enabled || !userId) return
+
+    let cancelled = false
+    UserPreferencesApiService.getRecentColors(userId)
+      .then((serverColors) => {
+        if (cancelled || serverColors.length === 0) return
+        setRecentColors((current) => {
+          const merged = [...serverColors, ...current.filter((color) => !serverColors.includes(color))]
+          const next = merged.slice(0, MAX_RECENT_COLORS)
+          saveToStorage(next)
+          return next
+        })
+      })
+      .catch(() => {})
+    return () => {
+      cancelled = true
+    }
+  }, [enabled, userId])
+
+  const addRecentColor = useCallback(
+    (color: string) => {
+      if (!COLOR_REGEX.test(color)) return
+      const normalized = color.toLowerCase()
+
+      setRecentColors((current) => {
+        const next = [normalized, ...current.filter((c) => c !== normalized)].slice(0, MAX_RECENT_COLORS)
+        saveToStorage(next)
+        return next
+      })
+
+      if (syncTimer.current !== null) {
+        clearTimeout(syncTimer.current)
+      }
+      if (!userId) return
+
+      syncTimer.current = setTimeout(() => {
+        UserPreferencesApiService.addRecentColor(userId, normalized)
+          .then((serverColors) => {
+            if (serverColors.length === 0) return
+            setRecentColors(serverColors)
+          })
+          .catch(() => {})
+      }, SYNC_DEBOUNCE_MS)
+    },
+    [userId]
+  )
+
+  useEffect(
+    () => () => {
+      if (syncTimer.current !== null) {
+        clearTimeout(syncTimer.current)
+      }
+    },
+    []
+  )
+
+  return { recentColors, addRecentColor }
+}

package/src/infrastructure/hooks/use-recent-modules.ts

@@ -0,0 +1,76 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { usePathname } from "next/navigation"
+import { ModuleDeclarationInterface, ModuleNavigationInterface } from "../../domain/entities/module.interface"
+import { useModuleStore } from "../stores/module.store"
+
+const STORAGE_KEY = "recent-modules"
+const MAX_RECENT = 5
+
+function loadIds(): string[] {
+    if (typeof window === "undefined") return []
+    try {
+        return JSON.parse(localStorage.getItem(STORAGE_KEY) || "[]")
+    } catch {
+        return []
+    }
+}
+
+function saveIds(ids: string[]) {
+    if (typeof window === "undefined") return
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(ids))
+}
+
+function moduleToNavItem(mod: ModuleDeclarationInterface): ModuleNavigationInterface {
+    return {
+        id: mod.identifier,
+        label: mod.name,
+        icon: mod.icon,
+        url: mod.uri,
+        useOnlyIcon: true,
+    }
+}
+
+export function useRecentModules(): ModuleNavigationInterface[] {
+    const pathname = usePathname()
+    const modules = useModuleStore(s => s.modules)
+    const [recent, setRecent] = useState<ModuleNavigationInterface[]>([])
+
+    useEffect(() => {
+        if (modules.length === 0) return
+
+        const ids = loadIds()
+        if (ids.length === 0) return
+
+        setRecent(
+            [...new Set(ids)]
+                .map(id => modules.find(m => m.identifier === id))
+                .filter((m): m is ModuleDeclarationInterface => !!m)
+                .map(moduleToNavItem)
+        )
+    }, [modules])
+
+    useEffect(() => {
+        if (modules.length === 0) return
+
+        const current = modules.find(m => {
+            if (!m.uri || m.uri === "/") return false
+            return pathname.startsWith(m.uri)
+        })
+        if (!current) return
+
+        const ids = loadIds()
+        const updated = [...new Set([current.identifier, ...ids.filter(id => id !== current.identifier)])].slice(0, MAX_RECENT)
+        saveIds(updated)
+
+        setRecent(
+            updated
+                .map(id => modules.find(m => m.identifier === id))
+                .filter((m): m is ModuleDeclarationInterface => !!m)
+                .map(moduleToNavItem)
+        )
+    }, [pathname, modules])
+
+    return recent
+}

package/src/infrastructure/index.tsx

@@ -0,0 +1,11 @@
+// @liorian/sdk/infrastructure — cross-cutting infrastructure (providers, hooks, stores, utilities…).
+export * from "./common-classname.constant";
+export * from "./capabilities/index";
+export * from "./data/index";
+export * from "./dataset/index";
+export * from "./hooks/index";
+export * from "./library";
+export * from "./providers";
+export * from "./routines";
+export * from "./stores/index";
+export * from "./utilities";

package/src/infrastructure/library/design-system.ts

@@ -0,0 +1,95 @@
+// src/core/presentation/design-system.ts
+// Design system tokens for the Liorian Dashboard
+
+export interface DesignSystemTokens {
+  colors: {
+    primary: string
+    secondary: string
+    success: string
+    warning: string
+    error: string
+    background: string
+    foreground: string
+    // ... other colors
+  }
+  spacing: {
+    xs: number
+    sm: number
+    md: number
+    lg: number
+    xl: number
+    xxl: number
+    // ... other spacing
+  }
+  borderRadius: {
+    none: string
+    sm: string
+    md: string
+    lg: string
+    full: string
+  }
+  shadows: {
+    sm: string
+    md: string
+    lg: string
+  }
+  motion: {
+    springStiffness: number
+    springDamping: number
+    elasticEaseDuration: number
+    // ... other motion-related tokens
+  }
+}
+
+// Default design system tokens
+export const tokens: DesignSystemTokens = {
+  colors: {
+    primary: '#2563EB', // blue-600
+    secondary: '#10B981', // emerald-500
+    success: '#10B981',
+    warning: '#F59E0B', // amber-500
+    error: '#EF4444', // red-500
+    background: '#FFFFFF',
+    foreground: '#111827', // gray-900
+    // ... other colors can be added
+  },
+  spacing: {
+    xs: 4,   // 0.5rem
+    sm: 8,   // 0.75rem
+    md: 12,  // 1rem
+    lg: 16,  // 1.5rem
+    xl: 20,  // 2.5rem
+    xxl: 24, // 3rem
+    // ...
+  },
+  borderRadius: {
+    none: '0px',
+    sm: '4px',   // 0.5rem
+    md: '8px',   // 1rem
+    lg: '12px',  // 1.5rem
+    full: '9999px',
+  },
+  shadows: {
+    sm: '0 1px 2px 0 rgba(0,0,0,0.05)',
+    md: '0 4px 6px -1px rgba(0,0,0,0.1)',
+    lg: '0 10px 15px -5px rgba(0,0,0,0.1)',
+  },
+  motion: {
+    springStiffness: 170, // stiffness for spring physics
+    springDamping: 26,    // damping for spring physics
+    elasticEaseDuration: 300, // duration in ms for elastic easing
+    // ...
+  },
+};
+
+// Helper function to get a token value (if needed for JS usage)
+export const getToken = <T, K extends keyof DesignSystemTokens>(
+  tokensObj: DesignSystemTokens,
+  key: K,
+  subKey?: keyof DesignSystemTokens[K]
+): T => {
+  if (subKey) {
+    return tokensObj[key][subKey] as unknown as T;
+  }
+  return tokensObj[key] as unknown as T;
+};

package/src/infrastructure/library/index.tsx

@@ -0,0 +1,5 @@
+// @liorian/sdk/infrastructure/library — shared libs (design tokens, motion, scroll).
+export * from "./design-system";
+export * from "./motion-utils";
+export * from "./motion";
+export * from "./scroll-progress";