@docyrus/ui-pro-ai-assistant 0.0.1

package/src/hooks/use-ui-state.ts

@@ -0,0 +1,185 @@
+import { useCallback, useMemo, useReducer } from 'react';
+
+// State type
+export interface UIState {
+  activeTab: number;
+  isDocked: boolean;
+  isExpanded: boolean;
+  currentRenderMode: 'modal' | 'inline' | 'sidebar';
+  isSidebarOpen: boolean;
+  isRightSidebarOpen: boolean;
+  rightSidebarView: 'list' | 'detail';
+  isRecording: boolean;
+}
+
+// Action types
+type UIAction
+  = | { type: 'SET_ACTIVE_TAB'; payload: number }
+    | { type: 'SET_DOCKED'; payload: boolean }
+    | { type: 'SET_EXPANDED'; payload: boolean }
+    | { type: 'SET_RENDER_MODE'; payload: 'modal' | 'inline' | 'sidebar' }
+    | { type: 'SET_SIDEBAR_OPEN'; payload: boolean }
+    | { type: 'SET_RIGHT_SIDEBAR_OPEN'; payload: boolean }
+    | { type: 'SET_RIGHT_SIDEBAR_VIEW'; payload: 'list' | 'detail' }
+    | { type: 'SET_RECORDING'; payload: boolean }
+    | { type: 'TOGGLE_SIDEBAR' }
+    | { type: 'TOGGLE_RIGHT_SIDEBAR' }
+    | { type: 'TOGGLE_DOCKED' }
+    | { type: 'TOGGLE_EXPANDED' }
+    | { type: 'RESET'; payload?: { variant?: string; renderMode?: 'modal' | 'inline' | 'sidebar' } };
+
+// Create initial state factory
+export function createInitialUIState(
+  variant: string = 'default',
+  renderMode: 'modal' | 'inline' | 'sidebar' = 'modal'
+): UIState {
+  return {
+    activeTab: 0,
+    isDocked: variant === 'docked',
+    isExpanded: variant === 'expanded',
+    currentRenderMode: renderMode,
+    isSidebarOpen: false,
+    isRightSidebarOpen: false,
+    rightSidebarView: 'list',
+    isRecording: false
+  };
+}
+
+// Reducer
+function uiReducer(state: UIState, action: UIAction): UIState {
+  switch (action.type) {
+    case 'SET_ACTIVE_TAB':
+      return { ...state, activeTab: action.payload };
+
+    case 'SET_DOCKED':
+      return { ...state, isDocked: action.payload };
+
+    case 'SET_EXPANDED':
+      return { ...state, isExpanded: action.payload };
+
+    case 'SET_RENDER_MODE':
+      return { ...state, currentRenderMode: action.payload };
+
+    case 'SET_SIDEBAR_OPEN':
+      return { ...state, isSidebarOpen: action.payload };
+
+    case 'SET_RIGHT_SIDEBAR_OPEN':
+      return { ...state, isRightSidebarOpen: action.payload };
+
+    case 'SET_RIGHT_SIDEBAR_VIEW':
+      return { ...state, rightSidebarView: action.payload };
+
+    case 'SET_RECORDING':
+      return { ...state, isRecording: action.payload };
+
+    case 'TOGGLE_SIDEBAR':
+      return { ...state, isSidebarOpen: !state.isSidebarOpen };
+
+    case 'TOGGLE_RIGHT_SIDEBAR':
+      return { ...state, isRightSidebarOpen: !state.isRightSidebarOpen };
+
+    case 'TOGGLE_DOCKED':
+      return { ...state, isDocked: !state.isDocked };
+
+    case 'TOGGLE_EXPANDED':
+      return { ...state, isExpanded: !state.isExpanded };
+
+    case 'RESET':
+      return createInitialUIState(action.payload?.variant, action.payload?.renderMode);
+
+    default:
+      return state;
+  }
+}
+
+// Hook
+export function useUIState(variant: string = 'default', renderMode: 'modal' | 'inline' | 'sidebar' = 'modal') {
+  const [state, dispatch] = useReducer(uiReducer, createInitialUIState(variant, renderMode));
+
+  const setActiveTab = useCallback((tab: number) => {
+    dispatch({ type: 'SET_ACTIVE_TAB', payload: tab });
+  }, []);
+
+  const setDocked = useCallback((docked: boolean) => {
+    dispatch({ type: 'SET_DOCKED', payload: docked });
+  }, []);
+
+  const setExpanded = useCallback((expanded: boolean) => {
+    dispatch({ type: 'SET_EXPANDED', payload: expanded });
+  }, []);
+
+  const setRenderMode = useCallback((mode: 'modal' | 'inline' | 'sidebar') => {
+    dispatch({ type: 'SET_RENDER_MODE', payload: mode });
+  }, []);
+
+  const setSidebarOpen = useCallback((open: boolean) => {
+    dispatch({ type: 'SET_SIDEBAR_OPEN', payload: open });
+  }, []);
+
+  const setRightSidebarOpen = useCallback((open: boolean) => {
+    dispatch({ type: 'SET_RIGHT_SIDEBAR_OPEN', payload: open });
+  }, []);
+
+  const setRightSidebarView = useCallback((view: 'list' | 'detail') => {
+    dispatch({ type: 'SET_RIGHT_SIDEBAR_VIEW', payload: view });
+  }, []);
+
+  const setRecording = useCallback((recording: boolean) => {
+    dispatch({ type: 'SET_RECORDING', payload: recording });
+  }, []);
+
+  const toggleSidebar = useCallback(() => {
+    dispatch({ type: 'TOGGLE_SIDEBAR' });
+  }, []);
+
+  const toggleRightSidebar = useCallback(() => {
+    dispatch({ type: 'TOGGLE_RIGHT_SIDEBAR' });
+  }, []);
+
+  const toggleDocked = useCallback(() => {
+    dispatch({ type: 'TOGGLE_DOCKED' });
+  }, []);
+
+  const toggleExpanded = useCallback(() => {
+    dispatch({ type: 'TOGGLE_EXPANDED' });
+  }, []);
+
+  const reset = useCallback((resetVariant?: string, resetRenderMode?: 'modal' | 'inline' | 'sidebar') => {
+    dispatch({ type: 'RESET', payload: { variant: resetVariant, renderMode: resetRenderMode } });
+  }, []);
+
+  const actions = useMemo(
+    () => ({
+      setActiveTab,
+      setDocked,
+      setExpanded,
+      setRenderMode,
+      setSidebarOpen,
+      setRightSidebarOpen,
+      setRightSidebarView,
+      setRecording,
+      toggleSidebar,
+      toggleRightSidebar,
+      toggleDocked,
+      toggleExpanded,
+      reset
+    }),
+    [
+      setActiveTab,
+      setDocked,
+      setExpanded,
+      setRenderMode,
+      setSidebarOpen,
+      setRightSidebarOpen,
+      setRightSidebarView,
+      setRecording,
+      toggleSidebar,
+      toggleRightSidebar,
+      toggleDocked,
+      toggleExpanded,
+      reset
+    ]
+  );
+
+  return { state, actions };
+}

package/src/hooks/use-works-state.ts

@@ -0,0 +1,146 @@
+import { useCallback, useMemo, useReducer } from 'react';
+
+import { type Work } from '../types';
+
+// State type
+export interface WorksState {
+  works: Work[];
+  searchQuery: string;
+  tabValue: string;
+  selectedWork: Work | null;
+  detailViewWork: Work | null;
+}
+
+// Action types
+type WorksAction
+  = | { type: 'SET_WORKS'; payload: Work[] }
+    | { type: 'SET_SEARCH_QUERY'; payload: string }
+    | { type: 'SET_TAB_VALUE'; payload: string }
+    | { type: 'SELECT_WORK'; payload: Work | null }
+    | { type: 'SET_DETAIL_VIEW_WORK'; payload: Work | null }
+    | { type: 'ADD_WORK'; payload: Work }
+    | { type: 'UPDATE_WORK'; payload: Work }
+    | { type: 'REMOVE_WORK'; payload: string }
+    | { type: 'RESET' };
+
+// Initial state
+const initialState: WorksState = {
+  works: [],
+  searchQuery: '',
+  tabValue: '1',
+  selectedWork: null,
+  detailViewWork: null
+};
+
+// Reducer
+function worksReducer(state: WorksState, action: WorksAction): WorksState {
+  switch (action.type) {
+    case 'SET_WORKS':
+      return { ...state, works: action.payload };
+
+    case 'SET_SEARCH_QUERY':
+      return { ...state, searchQuery: action.payload };
+
+    case 'SET_TAB_VALUE':
+      return { ...state, tabValue: action.payload };
+
+    case 'SELECT_WORK':
+      return { ...state, selectedWork: action.payload };
+
+    case 'SET_DETAIL_VIEW_WORK':
+      return { ...state, detailViewWork: action.payload };
+
+    case 'ADD_WORK':
+      return { ...state, works: [action.payload, ...state.works] };
+
+    case 'UPDATE_WORK':
+      return {
+        ...state,
+        works: state.works.map(w => (w.id === action.payload.id ? action.payload : w)),
+        selectedWork: state.selectedWork?.id === action.payload.id ? action.payload : state.selectedWork,
+        detailViewWork: state.detailViewWork?.id === action.payload.id ? action.payload : state.detailViewWork
+      };
+
+    case 'REMOVE_WORK':
+      return {
+        ...state,
+        works: state.works.filter(w => w.id !== action.payload),
+        selectedWork: state.selectedWork?.id === action.payload ? null : state.selectedWork,
+        detailViewWork: state.detailViewWork?.id === action.payload ? null : state.detailViewWork
+      };
+
+    case 'RESET':
+      return initialState;
+
+    default:
+      return state;
+  }
+}
+
+// Hook
+export function useWorksState() {
+  const [state, dispatch] = useReducer(worksReducer, initialState);
+
+  const setWorks = useCallback((works: Work[]) => {
+    dispatch({ type: 'SET_WORKS', payload: works });
+  }, []);
+
+  const setSearchQuery = useCallback((query: string) => {
+    dispatch({ type: 'SET_SEARCH_QUERY', payload: query });
+  }, []);
+
+  const setTabValue = useCallback((value: string) => {
+    dispatch({ type: 'SET_TAB_VALUE', payload: value });
+  }, []);
+
+  const selectWork = useCallback((work: Work | null) => {
+    dispatch({ type: 'SELECT_WORK', payload: work });
+  }, []);
+
+  const setDetailViewWork = useCallback((work: Work | null) => {
+    dispatch({ type: 'SET_DETAIL_VIEW_WORK', payload: work });
+  }, []);
+
+  const addWork = useCallback((work: Work) => {
+    dispatch({ type: 'ADD_WORK', payload: work });
+  }, []);
+
+  const updateWork = useCallback((work: Work) => {
+    dispatch({ type: 'UPDATE_WORK', payload: work });
+  }, []);
+
+  const removeWork = useCallback((id: string) => {
+    dispatch({ type: 'REMOVE_WORK', payload: id });
+  }, []);
+
+  const reset = useCallback(() => {
+    dispatch({ type: 'RESET' });
+  }, []);
+
+  const actions = useMemo(
+    () => ({
+      setWorks,
+      setSearchQuery,
+      setTabValue,
+      selectWork,
+      setDetailViewWork,
+      addWork,
+      updateWork,
+      removeWork,
+      reset
+    }),
+    [
+      setWorks,
+      setSearchQuery,
+      setTabValue,
+      selectWork,
+      setDetailViewWork,
+      addWork,
+      updateWork,
+      removeWork,
+      reset
+    ]
+  );
+
+  return { state, actions };
+}

package/src/i18n/context.tsx

@@ -0,0 +1,253 @@
+'use client';
+
+import {
+  createContext, type ReactNode, useCallback, useEffect, useMemo, useState
+} from 'react';
+
+import {
+  type AssistantTranslations, type DeepPartial, type I18nContextValue, type Locale
+} from './types';
+
+import de from './locales/de.json';
+import el from './locales/el.json';
+import en from './locales/en.json';
+import es from './locales/es.json';
+import fr from './locales/fr.json';
+import it from './locales/it.json';
+import pt from './locales/pt.json';
+import sl from './locales/sl.json';
+import tr from './locales/tr.json';
+
+const SUPPORTED_LOCALES: Locale[] = [
+  'de',
+  'el',
+  'en',
+  'es',
+  'fr',
+  'it',
+  'pt',
+  'sl',
+  'tr'
+];
+
+const bundledTranslations: Record<Locale, DeepPartial<AssistantTranslations>> = {
+  de,
+  el,
+  en,
+  es,
+  fr,
+  it,
+  pt,
+  sl,
+  tr
+};
+
+export const AssistantI18nContext = createContext<I18nContextValue | null>(null);
+
+function deepMerge<T extends object>(target: T, source: DeepPartial<T>): T {
+  const result = { ...target };
+
+  for (const key of Object.keys(source) as Array<keyof T>) {
+    const sourceValue = source[key];
+    const targetValue = target[key];
+
+    if (
+      sourceValue
+      && typeof sourceValue === 'object'
+      && !Array.isArray(sourceValue)
+      && targetValue
+      && typeof targetValue === 'object'
+    ) {
+      (result as Record<string, unknown>)[key as string] = deepMerge(
+        targetValue as object,
+        sourceValue as DeepPartial<typeof targetValue>
+      );
+    } else if (sourceValue !== undefined) {
+      (result as Record<string, unknown>)[key as string] = sourceValue;
+    }
+  }
+
+  return result;
+}
+
+function getNestedValue(obj: object, path: string): string | undefined {
+  const keys = path.split('.');
+  let current: unknown = obj;
+
+  for (const key of keys) {
+    if (current && typeof current === 'object' && key in current) {
+      current = (current as Record<string, unknown>)[key];
+    } else {
+      return undefined;
+    }
+  }
+
+  return typeof current === 'string' ? current : undefined;
+}
+
+function interpolate(template: string, params?: Record<string, string | number>): string {
+  if (!params) return template;
+
+  return template.replace(/\{\{(\w+)\}\}/g, (_, key) => {
+    return params[key]?.toString() ?? `{{${key}}}`;
+  });
+}
+
+const translationCache = new Map<string, AssistantTranslations>();
+
+/** Storage key for persisting locale */
+const LOCALE_STORAGE_KEY = 'docyrus-locale';
+
+/** Get initial locale from storage or default */
+function getInitialLocale(propLocale?: Locale): Locale {
+  if (propLocale) return propLocale;
+  if (typeof window !== 'undefined') {
+    const stored = localStorage.getItem(LOCALE_STORAGE_KEY) as Locale;
+
+    if (stored && SUPPORTED_LOCALES.includes(stored)) return stored;
+  }
+
+  return 'en';
+}
+
+export interface AssistantI18nProviderProps {
+  locale?: Locale;
+  apiUrl?: string;
+  translations?: DeepPartial<AssistantTranslations>;
+  disableApi?: boolean;
+  children: ReactNode;
+}
+
+export function AssistantI18nProvider({
+  locale: initialLocale,
+  apiUrl,
+  translations: customTranslations,
+  disableApi = false,
+  children
+}: AssistantI18nProviderProps) {
+  const [locale, setLocaleState] = useState<Locale>(() => getInitialLocale(initialLocale));
+  const [apiTranslations, setApiTranslations] = useState<AssistantTranslations | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Persist locale to localStorage
+  const setLocale = useCallback((newLocale: Locale) => {
+    setLocaleState(newLocale);
+    if (typeof window !== 'undefined') {
+      localStorage.setItem(LOCALE_STORAGE_KEY, newLocale);
+    }
+  }, []);
+
+  // Listen for locale changes from other contexts
+  useEffect(() => {
+    const handleLocaleChange = (e: CustomEvent<Locale>) => {
+      if (SUPPORTED_LOCALES.includes(e.detail)) {
+        setLocaleState(e.detail);
+      }
+    };
+
+    const handleStorageChange = (e: StorageEvent) => {
+      if (e.key === LOCALE_STORAGE_KEY && e.newValue) {
+        const newLocale = e.newValue as Locale;
+
+        if (SUPPORTED_LOCALES.includes(newLocale)) {
+          setLocaleState(newLocale);
+        }
+      }
+    };
+
+    window.addEventListener('docyrus-locale-change', handleLocaleChange as EventListener);
+    window.addEventListener('storage', handleStorageChange);
+
+    return () => {
+      window.removeEventListener('docyrus-locale-change', handleLocaleChange as EventListener);
+      window.removeEventListener('storage', handleStorageChange);
+    };
+  }, []);
+
+  // Sync with prop changes
+  useEffect(() => {
+    if (initialLocale) {
+      setLocaleState(initialLocale);
+    }
+  }, [initialLocale]);
+
+  useEffect(() => {
+    if (disableApi || !apiUrl) {
+      setApiTranslations(null);
+
+      return;
+    }
+
+    const cacheKey = `${apiUrl}/${locale}`;
+    const cached = translationCache.get(cacheKey);
+
+    if (cached) {
+      setApiTranslations(cached);
+
+      return;
+    }
+
+    setIsLoading(true);
+    fetch(`${apiUrl}/${locale}`)
+      .then((res) => {
+        if (!res.ok) throw new Error('Failed to fetch translations');
+
+        return res.json();
+      })
+      .then((data: AssistantTranslations) => {
+        translationCache.set(cacheKey, data);
+        setApiTranslations(data);
+      })
+      .catch(() => {
+        setApiTranslations(null);
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  }, [apiUrl, locale, disableApi]);
+
+  const mergedTranslations = useMemo(() => {
+    let result = bundledTranslations[locale];
+
+    if (apiTranslations) {
+      result = deepMerge(result, apiTranslations as DeepPartial<AssistantTranslations>);
+    }
+    if (customTranslations) {
+      result = deepMerge(result, customTranslations);
+    }
+
+    return result;
+  }, [locale, apiTranslations, customTranslations]);
+
+  const t = useCallback(
+    (key: string, params?: Record<string, string | number>): string => {
+      const value = getNestedValue(mergedTranslations, key);
+
+      if (value === undefined) {
+        console.warn(`[AssistantI18n] Missing translation for key: ${key}`);
+
+        return key;
+      }
+
+      return interpolate(value, params);
+    },
+    [mergedTranslations]
+  );
+
+  const contextValue = useMemo<I18nContextValue>(
+    () => ({
+      locale,
+      t,
+      setLocale,
+      isLoading
+    }),
+    [
+      locale,
+      t,
+      setLocale,
+      isLoading
+    ]
+  );
+
+  return <AssistantI18nContext value={contextValue}>{children}</AssistantI18nContext>;
+}

package/src/i18n/index.ts

@@ -0,0 +1,19 @@
+export type { AssistantI18nProviderProps } from './context';
+export { AssistantI18nContext, AssistantI18nProvider } from './context';
+export { default as assistantDe } from './locales/de.json';
+export { default as assistantEl } from './locales/el.json';
+export { default as assistantEn } from './locales/en.json';
+export { default as assistantEs } from './locales/es.json';
+export { default as assistantFr } from './locales/fr.json';
+export { default as assistantIt } from './locales/it.json';
+export { default as assistantPt } from './locales/pt.json';
+export { default as assistantSl } from './locales/sl.json';
+export { default as assistantTr } from './locales/tr.json';
+export type {
+  AssistantTranslations,
+  DeepPartial,
+  I18nConfig,
+  I18nContextValue,
+  Locale
+} from './types';
+export { useAssistantTranslation } from './use-translation';