@ibdop/platform-kit 1.0.0

package/src/components/ErrorBoundary.tsx

@@ -0,0 +1,292 @@
+/**
+ * ErrorBoundary - Компонент для обработки ошибок React
+ * 
+ * Перехватывает ошибки и dispatch'ит событие в shell для централизованной обработки
+ */
+
+import React, { Component, ReactNode, ErrorInfo } from 'react'
+
+// MF Name for logging
+const MF_NAME = 'platform-kit'
+
+// Development mode flag
+const isDev = import.meta.env?.DEV === true || import.meta.env?.MODE === 'development'
+
+/**
+ * Logger for ErrorBoundary
+ */
+const logger = {
+  log: (...args: unknown[]) => {
+    if (isDev) console.log(`[${MF_NAME}]`, ...args)
+  },
+  warn: (...args: unknown[]) => {
+    if (isDev) console.warn(`[${MF_NAME}]`, ...args)
+  },
+  error: (...args: unknown[]) => {
+    console.error(`[${MF_NAME}]`, ...args)
+  },
+}
+
+/**
+ * Props для ErrorBoundary
+ */
+interface ErrorBoundaryProps {
+  children: ReactNode
+  mfeName?: string
+  showDetails?: boolean
+}
+
+/**
+ * State для ErrorBoundary
+ */
+interface ErrorBoundaryState {
+  hasError: boolean
+  error?: Error
+}
+
+/**
+ * ErrorBoundary - компонент для перехвата и обработки ошибок
+ * 
+ * @example
+ * ```tsx
+ * <ErrorBoundary mfeName="@ib-dop/mf-example">
+ *   <MyComponent />
+ * </ErrorBoundary>
+ * ```
+ */
+export default class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  private hasDispatched = false
+
+  constructor(props: ErrorBoundaryProps) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  /**
+   * Получить имя MF из props или window
+   */
+  private getMfeName(): string {
+    if (this.props.mfeName) return this.props.mfeName
+    
+    if (typeof window !== 'undefined') {
+      const win = window as unknown as { __MF_NAME__?: string }
+      if (win.__MF_NAME__) return win.__MF_NAME__
+    }
+    
+    return MF_NAME
+  }
+
+  /**
+   * Определить нужно ли показывать детали ошибки
+   */
+  private shouldShowDetails(): boolean {
+    // Priority: props > sessionStorage > NODE_ENV
+    if (this.props.showDetails !== undefined) {
+      return this.props.showDetails
+    }
+    
+    // Check sessionStorage config
+    if (typeof sessionStorage !== 'undefined') {
+      try {
+        const storedConfig = sessionStorage.getItem('config')
+        if (storedConfig) {
+          const parsed = JSON.parse(storedConfig)
+          if (parsed.showErrorDetails !== undefined) {
+            return parsed.showErrorDetails
+          }
+        }
+      } catch {
+        // Ignore parse errors
+      }
+    }
+    
+    // Fallback to NODE_ENV
+    return isDev
+  }
+
+  /**
+   * Dispatch ошибки в shell
+   */
+  private dispatchError(error: Error, errorInfo?: ErrorInfo): void {
+    if (this.hasDispatched || typeof window === 'undefined') return
+    
+    this.hasDispatched = true
+    const mfeName = this.getMfeName()
+
+    logger.error('ErrorBoundary caught:', error)
+
+    try {
+      window.dispatchEvent(new CustomEvent('mfe-error', {
+        detail: {
+          mfeName,
+          error: error.message || String(error),
+          stack: error.stack,
+          componentStack: errorInfo?.componentStack,
+          timestamp: Date.now(),
+        },
+        bubbles: true,
+      }))
+    } catch (dispatchError) {
+      logger.error('Failed to dispatch mfe-error event:', dispatchError)
+    }
+  }
+
+  /**
+   * Получить derived state из ошибки
+   */
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error }
+  }
+
+  /**
+   * Обработать ошибку
+   */
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    this.dispatchError(error, errorInfo)
+    logger.error('Error info:', errorInfo.componentStack)
+  }
+
+  /**
+   * Копировать ошибку в буфер обмена
+   */
+  private handleCopy = (): void => {
+    const errorText = `Error in ${this.getMfeName()}:\n${this.state.error?.message}\n${this.state.error?.stack}`
+    
+    if (typeof navigator !== 'undefined' && navigator.clipboard) {
+      navigator.clipboard.writeText(errorText).then(() => {
+        alert('Ошибка скопирована в буфер обмена')
+      }).catch(() => {
+        prompt('Скопируйте ошибку:', errorText)
+      })
+    }
+  }
+
+  /**
+   * Повторить рендер
+   */
+  private handleRetry = (): void => {
+    this.setState({ hasError: false, error: undefined })
+    this.hasDispatched = false
+    
+    if (typeof window !== 'undefined') {
+      window.location.reload()
+    }
+  }
+
+  /**
+   * Перейти на главную
+   */
+  private handleGoHome = (): void => {
+    if (typeof window !== 'undefined') {
+      window.location.href = '/'
+    }
+  }
+
+  /**
+   * Рендер
+   */
+  render(): ReactNode {
+    if (this.state.hasError) {
+      const errorMessage = this.state.error?.message || 'Unknown error'
+      const errorStack = this.state.error?.stack || ''
+      const showDetails = this.shouldShowDetails()
+      const mfeName = this.getMfeName()
+      
+      return (
+        <div style={{
+          padding: '20px',
+          textAlign: 'center',
+          color: '#d32f2f',
+          fontFamily: 'monospace',
+          background: '#ffebee',
+          border: '1px solid #ef5350',
+          borderRadius: '4px',
+          margin: '10px',
+        }}>
+          <h2 style={{ fontSize: '16px', margin: '0 0 8px 0' }}>
+            ⚠️ Ошибка в {mfeName}
+          </h2>
+          <p style={{ fontSize: '12px', margin: 0 }}>
+            Произошла ошибка в микрофронтенде. Сообщение отправлено в shell.
+          </p>
+          
+          {/* Error Details */}
+          {showDetails && (
+            <details style={{ 
+              whiteSpace: 'pre-wrap', 
+              textAlign: 'left', 
+              marginTop: '10px',
+              background: '#fff',
+              padding: '8px',
+              borderRadius: '4px',
+            }}>
+              <summary style={{ cursor: 'pointer', fontWeight: 'bold' }}>Детали ошибки</summary>
+              <pre style={{ 
+                fontSize: '11px', 
+                overflow: 'auto',
+                maxHeight: '150px',
+                margin: '8px 0 0 0',
+                padding: '8px',
+                background: '#f5f5f5',
+                borderRadius: '4px',
+              }}>
+                {errorMessage}
+                {errorStack && `\n\n${errorStack}`}
+              </pre>
+            </details>
+          )}
+
+          {/* Actions */}
+          <div style={{ marginTop: '12px', display: 'flex', gap: '8px', justifyContent: 'center' }}>
+            <button
+              onClick={this.handleCopy}
+              style={{
+                padding: '8px 12px',
+                background: '#666',
+                color: 'white',
+                border: 'none',
+                borderRadius: '4px',
+                cursor: 'pointer',
+              }}
+            >
+              📋 Копировать
+            </button>
+            <button
+              onClick={this.handleRetry}
+              style={{
+                padding: '8px 12px',
+                background: '#d32f2f',
+                color: 'white',
+                border: 'none',
+                borderRadius: '4px',
+                cursor: 'pointer',
+              }}
+            >
+              🔄 Обновить
+            </button>
+            <button
+              onClick={this.handleGoHome}
+              style={{
+                padding: '8px 12px',
+                background: '#1976d2',
+                color: 'white',
+                border: 'none',
+                borderRadius: '4px',
+                cursor: 'pointer',
+              }}
+            >
+              🏠 На главную
+            </button>
+          </div>
+        </div>
+      )
+    }
+
+    // Null-check для children
+    if (this.props.children == null) {
+      return null
+    }
+
+    return this.props.children
+  }
+}

package/src/components/Notification.tsx

@@ -0,0 +1,297 @@
+/**
+ * Notification - Компонент и хук для отображения уведомлений
+ * 
+ * Dispatch уведомления в shell через CustomEvent
+ */
+
+import React, { createContext, useContext, useCallback, useState, useEffect, ReactNode } from 'react'
+import type { NotificationPayload, NotificationType } from '../types'
+
+// MF Name for logging
+const MF_NAME = 'platform-kit'
+
+// Development mode flag
+const isDev = import.meta.env?.DEV === true || import.meta.env?.MODE === 'development'
+
+/**
+ * Logger for Notification
+ */
+const logger = {
+  log: (...args: unknown[]) => {
+    if (isDev) console.log(`[${MF_NAME}]`, ...args)
+  },
+  warn: (...args: unknown[]) => {
+    if (isDev) console.warn(`[${MF_NAME}]`, ...args)
+  },
+  error: (...args: unknown[]) => {
+    console.error(`[${MF_NAME}]`, ...args)
+  },
+}
+
+/**
+ * Notification item
+ */
+interface NotificationItem extends NotificationPayload {
+  id: string
+}
+
+/**
+ * Context for notifications
+ */
+interface NotificationContextValue {
+  notify: (payload: Omit<NotificationPayload, 'timestamp' | 'mfeName'>) => void
+  notifySuccess: (message: string, title?: string) => void
+  notifyError: (message: string, title?: string) => void
+  notifyWarning: (message: string, title?: string) => void
+  notifyInfo: (message: string, title?: string) => void
+  removeNotification: (id: string) => void
+}
+
+/**
+ * Context for notifications
+ */
+const NotificationContext = createContext<NotificationContextValue | null>(null)
+
+/**
+ * Provider for notifications
+ */
+interface NotificationProviderProps {
+  children: ReactNode
+}
+
+export function NotificationProvider({ children }: NotificationProviderProps): React.ReactElement {
+  const [notifications, setNotifications] = useState<NotificationItem[]>([])
+
+  // Get mfeName
+  const mfeName = typeof window !== 'undefined' 
+    ? ((window as unknown as { __MF_NAME__?: string }).__MF_NAME__ || MF_NAME)
+    : MF_NAME
+
+  // Create notification
+  const createNotification = useCallback((
+    type: NotificationType,
+    title: string,
+    message: string,
+    duration?: number
+  ): NotificationItem => ({
+    id: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+    type,
+    title,
+    message,
+    mfeName,
+    timestamp: Date.now(),
+    duration,
+  }), [mfeName])
+
+  // Add notification
+  const addNotification = useCallback((notification: NotificationItem) => {
+    setNotifications(prev => [...prev, notification].slice(0, 5))
+    
+    // Auto remove after duration or 5 seconds
+    const duration = notification.duration || 5000
+    if (duration > 0) {
+      setTimeout(() => {
+        setNotifications(prev => prev.filter(n => n.id !== notification.id))
+      }, duration)
+    }
+  }, [])
+
+  // Notify
+  const notify = useCallback((payload: Omit<NotificationPayload, 'timestamp' | 'mfeName'>) => {
+    const notification = createNotification(payload.type, payload.title, payload.message, payload.duration)
+    addNotification(notification)
+    
+    // Dispatch to shell
+    if (typeof window !== 'undefined') {
+      window.dispatchEvent(new CustomEvent('mfe-notification', {
+        detail: notification,
+        bubbles: true,
+      }))
+    }
+    
+    logger.log('Notification:', notification)
+  }, [createNotification, addNotification])
+
+  // Convenience methods
+  const notifySuccess = useCallback((message: string, title = 'Успешно') => {
+    notify({ type: 'success', title, message })
+  }, [notify])
+
+  const notifyError = useCallback((message: string, title = 'Ошибка') => {
+    notify({ type: 'error', title, message })
+  }, [notify])
+
+  const notifyWarning = useCallback((message: string, title = 'Предупреждение') => {
+    notify({ type: 'warning', title, message })
+  }, [notify])
+
+  const notifyInfo = useCallback((message: string, title = 'Информация') => {
+    notify({ type: 'info', title, message })
+  }, [notify])
+
+  // Remove notification
+  const removeNotification = useCallback((id: string) => {
+    setNotifications(prev => prev.filter(n => n.id !== id))
+  }, [])
+
+  // Handle incoming notifications from other MFE
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+
+    const handleNotification = (event: Event) => {
+      const detail = (event as CustomEvent).detail as NotificationPayload | undefined
+      if (detail && detail.type && detail.title && detail.message) {
+        const notification: NotificationItem = {
+          ...detail,
+          id: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+        }
+        addNotification(notification)
+      }
+    }
+
+    window.addEventListener('mfe-notification', handleNotification)
+
+    return () => {
+      window.removeEventListener('mfe-notification', handleNotification)
+    }
+  }, [addNotification])
+
+  return (
+    <NotificationContext.Provider value={{
+      notify,
+      notifySuccess,
+      notifyError,
+      notifyWarning,
+      notifyInfo,
+      removeNotification,
+    }}>
+      {children}
+      
+      {/* Render notifications */}
+      {notifications.length > 0 && (
+        <div
+          style={{
+            position: 'fixed',
+            top: '80px',
+            right: '20px',
+            zIndex: 9998,
+            maxWidth: '400px',
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '8px',
+            pointerEvents: 'none',
+          }}
+        >
+          {notifications.map(notification => (
+            <div
+              key={notification.id}
+              className={`notification notification-${notification.type}`}
+              style={{
+                pointerEvents: 'auto',
+                padding: '12px 16px',
+                borderRadius: '8px',
+                background: notification.type === 'success' ? '#d4edda' :
+                           notification.type === 'error' ? '#f8d7da' :
+                           notification.type === 'warning' ? '#fff3cd' : '#d1ecf1',
+                color: notification.type === 'success' ? '#155724' :
+                       notification.type === 'error' ? '#721c24' :
+                       notification.type === 'warning' ? '#856404' : '#0c5460',
+                boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+                display: 'flex',
+                alignItems: 'flex-start',
+                gap: '12px',
+              }}
+            >
+              <div style={{ flex: 1 }}>
+                <strong style={{ display: 'block', marginBottom: '4px' }}>
+                  {notification.title}
+                </strong>
+                <p style={{ margin: 0, fontSize: '14px' }}>
+                  {notification.message}
+                </p>
+                <small style={{ opacity: 0.7, fontSize: '12px' }}>
+                  {notification.mfeName}
+                </small>
+              </div>
+              <button
+                onClick={() => removeNotification(notification.id)}
+                style={{
+                  background: 'transparent',
+                  border: 'none',
+                  cursor: 'pointer',
+                  fontSize: '18px',
+                  lineHeight: 1,
+                  opacity: 0.5,
+                }}
+              >
+                ×
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </NotificationContext.Provider>
+  )
+}
+
+/**
+ * Хук для использования уведомлений
+ * 
+ * @returns NotificationContextValue
+ * 
+ * @example
+ * ```tsx
+ * const { notifySuccess, notifyError } = useNotification()
+ * 
+ * const handleSave = async () => {
+ *   try {
+ *     await saveData()
+ *     notifySuccess('Данные сохранены')
+ *   } catch (error) {
+ *     notifyError('Ошибка сохранения')
+ *   }
+ * }
+ * ```
+ */
+export function useNotification(): NotificationContextValue {
+  const context = useContext(NotificationContext)
+  
+  if (!context) {
+    logger.warn('useNotification called outside NotificationProvider')
+    
+    // Return no-op functions
+    return {
+      notify: () => {},
+      notifySuccess: () => {},
+      notifyError: () => {},
+      notifyWarning: () => {},
+      notifyInfo: () => {},
+      removeNotification: () => {},
+    }
+  }
+  
+  return context
+}
+
+/**
+ * Dispatch notification to shell (standalone function)
+ */
+export function dispatchNotification(payload: Omit<NotificationPayload, 'timestamp' | 'mfeName'>): void {
+  if (typeof window === 'undefined') return
+
+  const mfeName = ((window as unknown) as { __MF_NAME__?: string }).__MF_NAME__ || MF_NAME
+
+  const fullPayload: NotificationPayload = {
+    ...payload,
+    mfeName,
+    timestamp: Date.now(),
+  }
+
+  window.dispatchEvent(new CustomEvent('mfe-notification', {
+    detail: fullPayload,
+    bubbles: true,
+  }))
+
+  logger.log('Dispatched notification:', fullPayload)
+}