@ibdop/platform-kit 1.0.0

package/src/components/VersionInfo.tsx

@@ -0,0 +1,271 @@
+/**
+ * VersionInfo - Компонент для отображения информации о версии MF
+ * 
+ * Показывает popover с детальной информацией о версии, Git, CI/CD
+ */
+
+import React, { useState } from 'react'
+import { useInfoData } from '../hooks/useInfoData'
+import type { InfoData } from '../types'
+
+// Icons (mock - in real implementation use @coreui/icons)
+const icons = {
+  info: 'ℹ️',
+  code: '💻',
+  link: '🔗',
+  user: '👤',
+  clock: '🕐',
+  apps: '📦',
+  storage: '💾',
+  tags: '🏷️',
+  spreadsheet: '📊',
+}
+
+// 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 VersionInfo
+ */
+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 для VersionInfo
+ */
+interface VersionInfoProps {
+  mfeName: string
+}
+
+/**
+ * VersionInfo - компонент для отображения информации о версии
+ * 
+ * @example
+ * ```tsx
+ * <VersionInfo mfeName="@ib-dop/mf-home" />
+ * ```
+ */
+export default function VersionInfo({ mfeName }: VersionInfoProps): React.ReactElement {
+  const { data: infoData, isLoading, error } = useInfoData({ mfeName })
+  const [visible, setVisible] = useState(false)
+
+  logger.log('VersionInfo rendered:', { mfeName, isLoading, error })
+
+  if (isLoading) {
+    return (
+      <span className="text-muted small me-2">
+        <span className="me-1">⏳</span>
+        Загрузка...
+      </span>
+    )
+  }
+
+  if (error || !infoData) {
+    logger.warn('Failed to load version info:', error)
+    return (
+      <span className="text-muted small me-2" title={`Ошибка: ${error || 'нет данных'}`}>
+        <span className="me-1">ℹ️</span>
+        N/A
+      </span>
+    )
+  }
+
+  const info = infoData as Record<string, string>
+  const displayVersion = info.BUILD_VERSION || info.IMAGE_VERSION || info.APP_NAME || 'N/A'
+
+  // Collect available fields
+  const availableFields: { key: string; value: string; label: string; icon: string }[] = []
+  
+  if (info.APP_NAME) {
+    availableFields.push({ key: 'APP_NAME', value: info.APP_NAME, label: 'Приложение', icon: icons.apps })
+  }
+  if (info.BUILD_VERSION) {
+    availableFields.push({ key: 'BUILD_VERSION', value: info.BUILD_VERSION, label: 'Версия', icon: icons.tags })
+  }
+  if (info.IMAGE_VERSION) {
+    availableFields.push({ key: 'IMAGE_VERSION', value: info.IMAGE_VERSION, label: 'Образ', icon: icons.storage })
+  }
+  if (info.GIT_COMMIT) {
+    availableFields.push({ key: 'GIT_COMMIT', value: info.GIT_COMMIT, label: 'Commit', icon: icons.spreadsheet })
+  }
+  if (info.GIT_BRANCH) {
+    availableFields.push({ key: 'GIT_BRANCH', value: info.GIT_BRANCH, label: 'Ветка', icon: icons.spreadsheet })
+  }
+  if (info.CI_COMMIT_AUTHOR) {
+    availableFields.push({ key: 'CI_COMMIT_AUTHOR', value: info.CI_COMMIT_AUTHOR, label: 'Автор', icon: icons.user })
+  }
+  if (info.CI_COMMIT_TIMESTAMP) {
+    availableFields.push({ key: 'CI_COMMIT_TIMESTAMP', value: info.CI_COMMIT_TIMESTAMP, label: 'Дата', icon: icons.clock })
+  }
+  if (info.CI_JOB_URL) {
+    availableFields.push({ key: 'CI_JOB_URL', value: info.CI_JOB_URL, label: 'CI Job', icon: icons.link })
+  }
+  if (info.CI_PIPELINE_URL) {
+    availableFields.push({ key: 'CI_PIPELINE_URL', value: info.CI_PIPELINE_URL, label: 'Pipeline', icon: icons.link })
+  }
+  if (info.CI_COMMIT_MESSAGE) {
+    const msg = info.CI_COMMIT_MESSAGE.length > 60 
+      ? info.CI_COMMIT_MESSAGE.substring(0, 57) + '...' 
+      : info.CI_COMMIT_MESSAGE
+    availableFields.push({ key: 'CI_COMMIT_MESSAGE', value: info.CI_COMMIT_MESSAGE, label: 'Сообщение', icon: icons.code })
+  }
+
+  return (
+    <div style={{ display: 'inline-block', position: 'relative' }}>
+      {/* Button */}
+      <button
+        onClick={() => setVisible(!visible)}
+        style={{
+          background: 'transparent',
+          border: 'none',
+          cursor: 'pointer',
+          padding: '4px 8px',
+          fontSize: '14px',
+          display: 'inline-flex',
+          alignItems: 'center',
+        }}
+        title="Информация о версии"
+      >
+        <span className="me-1">{icons.info}</span>
+        <span className="text-dark">{displayVersion}</span>
+      </button>
+
+      {/* Popover */}
+      {visible && (
+        <div
+          style={{
+            position: 'absolute',
+            top: '100%',
+            right: 0,
+            zIndex: 1000,
+            minWidth: '300px',
+            background: 'white',
+            border: '1px solid #dee2e6',
+            borderRadius: '8px',
+            boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+            padding: '16px',
+            marginTop: '4px',
+          }}
+        >
+          {/* Header */}
+          <div style={{ 
+            marginBottom: '12px', 
+            paddingBottom: '8px', 
+            borderBottom: '1px solid #dee2e6',
+            display: 'flex',
+            alignItems: 'center',
+          }}>
+            <span className="me-2">{icons.apps}</span>
+            <strong>{info.APP_NAME || mfeName}</strong>
+          </div>
+
+          {/* Version */}
+          <div style={{ marginBottom: '12px' }}>
+            <span className="text-muted">Версия: </span>
+            <strong>{displayVersion}</strong>
+          </div>
+
+          {/* Fields */}
+          {availableFields.length > 0 && (
+            <div style={{ fontSize: '13px' }}>
+              {availableFields.map(({ key, value, label, icon }) => {
+                const displayValue = value.length > 40 && (key.includes('URL') || key.includes('MESSAGE'))
+                  ? `${value.substring(0, 37)}...`
+                  : value
+
+                return (
+                  <div key={key} style={{ marginBottom: '8px', display: 'flex', alignItems: 'flex-start' }}>
+                    <span className="me-2" style={{ flexShrink: 0 }}>{icon}</span>
+                    <div style={{ flex: 1, minWidth: 0 }}>
+                      <div className="small text-muted">{label}</div>
+                      <div 
+                        className="font-monospace small text-truncate" 
+                        style={{ maxWidth: '100%' }}
+                        title={value}
+                      >
+                        {key.includes('URL') ? (
+                          <a 
+                            href={value} 
+                            target="_blank" 
+                            rel="noopener noreferrer"
+                            style={{ color: '#007bff' }}
+                          >
+                            {displayValue}
+                          </a>
+                        ) : (
+                          displayValue
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          )}
+
+          {availableFields.length === 0 && (
+            <div className="text-center text-muted py-2 small">
+              Нет информации о версии
+            </div>
+          )}
+
+          {/* Footer */}
+          <div style={{ 
+            marginTop: '12px', 
+            paddingTop: '8px', 
+            borderTop: '1px solid #dee2e6',
+            textAlign: 'center',
+            fontSize: '12px',
+            color: '#6c757d',
+          }}>
+            IngoBank DevOps Platform
+          </div>
+
+          {/* Close button */}
+          <button
+            onClick={() => setVisible(false)}
+            style={{
+              position: 'absolute',
+              top: '8px',
+              right: '8px',
+              background: 'transparent',
+              border: 'none',
+              cursor: 'pointer',
+              fontSize: '16px',
+              color: '#6c757d',
+            }}
+          >
+            ×
+          </button>
+        </div>
+      )}
+
+      {/* Click outside to close */}
+      {visible && (
+        <div
+          onClick={() => setVisible(false)}
+          style={{
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: 999,
+          }}
+        />
+      )}
+    </div>
+  )
+}

package/src/components/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Components barrel export
+ */
+
+export { default as ErrorBoundary } from './ErrorBoundary'
+
+export { default as VersionInfo } from './VersionInfo'
+
+export { NotificationProvider, useNotification, dispatchNotification } from './Notification'
+
+export type {
+  NotificationPayload,
+  NotificationType,
+} from '../types'

package/src/global.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Global type declarations for platform-kit
+ */
+
+interface ImportMetaEnv {
+  readonly DEV: boolean
+  readonly MODE: string
+  readonly BASE_URL: string
+  readonly PROD: boolean
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
+
+// Window extensions for shell integration
+interface Window {
+  __SHELL_AUTH_INSTANCE__?: {
+    isAuthenticated: boolean
+    user?: {
+      profile?: {
+        access_token?: string
+      }
+    }
+    signinRedirect?: () => Promise<void>
+    removeUser?: () => Promise<void>
+    [key: string]: unknown
+  }
+  __SHELL_AUTH__?: {
+    authInstance?: {
+      isAuthenticated: boolean
+      user?: {
+        profile?: {
+          access_token?: string
+        }
+      }
+    }
+  }
+  __MF_NAME__?: string
+}

package/src/hooks/index.ts

@@ -0,0 +1,13 @@
+/**
+ * Hooks barrel export
+ */
+
+export { useShellAuth, getAuth } from './useShellAuth'
+
+export { useInfoData } from './useInfoData'
+
+export { useV1Config } from './useV1Config'
+
+export { useApi } from './useApi'
+
+export { usePermissions } from './usePermissions'

package/src/hooks/useApi.ts

@@ -0,0 +1,314 @@
+/**
+ * useApi - Унифицированный хук для API запросов
+ * 
+ * Предоставляет удобный интерфейс для работы с API с автоматической
+ * обработкой ошибок и уведомлениями.
+ */
+
+import { useState, useCallback } from 'react'
+import type { ApiError, ApiResponse, NotificationPayload } from '../types'
+
+// Development mode flag
+const isDev = import.meta.env?.DEV === true || import.meta.env?.MODE === 'development'
+
+/**
+ * Logger for useApi
+ */
+const logger = {
+  log: (...args: unknown[]) => {
+    if (isDev) console.log('[useApi]', ...args)
+  },
+  warn: (...args: unknown[]) => {
+    if (isDev) console.warn('[useApi]', ...args)
+  },
+  error: (...args: unknown[]) => {
+    console.error('[useApi]', ...args)
+  },
+}
+
+
+
+/**
+ * Dispatch notification to shell
+ */
+export function dispatchNotification(notification: Omit<NotificationPayload, 'timestamp' | 'mfeName'>): void {
+  if (typeof window === 'undefined') return
+
+  const mfeName = (window as unknown as { __MF_NAME__?: string }).__MF_NAME__ || 'unknown'
+
+  const payload: NotificationPayload = {
+    ...notification,
+    mfeName,
+    timestamp: Date.now(),
+  }
+
+  window.dispatchEvent(new CustomEvent('mfe-notification', {
+    detail: payload,
+    bubbles: true,
+  }))
+
+  logger.log('Notification dispatched:', payload)
+}
+
+/**
+ * Dispatch error notification to shell
+ */
+export function dispatchErrorNotification(error: ApiError, context?: string): void {
+  const messages: Record<ApiError['type'], { title: string; message: string }> = {
+    network: {
+      title: 'Нет подключения',
+      message: 'Сервер недоступен. Проверьте подключение к интернету.',
+    },
+    unauthorized: {
+      title: 'Требуется вход',
+      message: 'Ваша сессия истекла. Войдите в систему снова.',
+    },
+    forbidden: {
+      title: 'Доступ запрещён',
+      message: 'У вас нет прав для выполнения этого действия.',
+    },
+    not_found: {
+      title: 'Не найдено',
+      message: 'Запрошенный ресурс не найден.',
+    },
+    server: {
+      title: 'Ошибка сервера',
+      message: 'Произошла ошибка на сервере. Попробуйте позже.',
+    },
+    client: {
+      title: 'Ошибка',
+      message: error.message || 'Произошла ошибка при выполнении запроса.',
+    },
+    unknown: {
+      title: 'Неизвестная ошибка',
+      message: error.message || 'Произошла неизвестная ошибка.',
+    },
+  }
+
+  const msg = messages[error.type] || messages.unknown
+
+  dispatchNotification({
+    type: error.type === 'network' ? 'warning' : 'error',
+    title: msg.title,
+    message: context ? `${msg.message} (${context})` : msg.message,
+  })
+}
+
+/**
+ * Interface для конфигурации useApi
+ */
+export interface UseApiConfig<T = never> {
+  notifyOnError?: boolean
+  notifyOnSuccess?: boolean
+  successMessage?: string
+  errorContext?: string
+  onSuccess?: (data: T) => void
+  onError?: (error: ApiError) => void
+}
+
+/**
+ * Interface для результата useApi
+ */
+export interface UseApiResult<T> {
+  data: T | null
+  error: ApiError | null
+  isLoading: boolean
+  isError: boolean
+  isSuccess: boolean
+  execute: () => Promise<T | null>
+  reset: () => void
+}
+
+/**
+ * Централизованный хук для API запросов
+ * 
+ * @param request - функция, возвращающая Promise<ApiResponse<T>>
+ * @param config - конфигурация
+ * @returns UseApiResult<T>
+ * 
+ * @example
+ * ```tsx
+ * const { data, isLoading, isError, execute } = useApi<User[]>(
+ *   () => fetch('/api/users').then(r => r.json()),
+ *   { notifyOnError: true, errorContext: 'загрузка пользователей' }
+ * )
+ * ```
+ */
+export function useApi<T>(
+  request: () => Promise<ApiResponse<T>>,
+  config: UseApiConfig<T> = {}
+): UseApiResult<T> {
+  const {
+    notifyOnError = true,
+    notifyOnSuccess = false,
+    successMessage,
+    errorContext,
+    onSuccess,
+    onError,
+  } = config
+
+  const [data, setData] = useState<T | null>(null)
+  const [error, setError] = useState<ApiError | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+
+  const isError = error !== null
+  const isSuccess = data !== null && !isLoading && !isError
+
+  const execute = useCallback(async () => {
+    setIsLoading(true)
+    setError(null)
+
+    try {
+      const response = await request()
+      
+      if (response.ok) {
+        setData(response.data)
+        
+        if (notifyOnSuccess && successMessage) {
+          dispatchNotification({
+            type: 'success',
+            title: 'Успешно',
+            message: successMessage,
+          })
+        }
+        
+        onSuccess?.(response.data)
+        return response.data
+      } else {
+        // Handle API error
+        const apiError: ApiError = {
+          message: (response.data as unknown as string) || 'Request failed',
+          status: response.status,
+          type: 'client',
+          timestamp: Date.now(),
+        }
+        
+        setError(apiError)
+        
+        if (notifyOnError) {
+          dispatchErrorNotification(apiError, errorContext)
+        }
+        
+        onError?.(apiError)
+        return null
+      }
+    } catch (err) {
+      // Handle network/server errors
+      const apiError = err as ApiError
+      setError(apiError)
+      
+      if (notifyOnError) {
+        dispatchErrorNotification(apiError, errorContext)
+      }
+      
+      onError?.(apiError)
+      return null
+    } finally {
+      setIsLoading(false)
+    }
+  }, [request, notifyOnError, notifyOnSuccess, successMessage, errorContext, onSuccess, onError])
+
+  const reset = useCallback(() => {
+    setData(null)
+    setError(null)
+    setIsLoading(false)
+  }, [])
+
+  return {
+    data,
+    error,
+    isLoading,
+    isError,
+    isSuccess,
+    execute,
+    reset,
+  }
+}
+
+// Convenience hooks for common HTTP methods
+
+/**
+ * GET запрос
+ */
+export function useGet<T>(
+  url: string,
+  params?: Record<string, unknown>,
+  config: UseApiConfig<T> = {}
+): UseApiResult<T> {
+  const request = () => 
+    fetch(url, params ? { 
+      method: 'GET',
+      headers: { 'Content-Type': 'application/json' }
+    } : {})
+      .then(async (response) => {
+        const data = await response.json()
+        return { data, status: response.status, ok: response.ok } as ApiResponse<T>
+      })
+
+  return useApi(request, config)
+}
+
+/**
+ * POST запрос
+ */
+export function usePost<T>(
+  url: string,
+  data?: unknown,
+  config: UseApiConfig<T> = {}
+): UseApiResult<T> {
+  const request = () =>
+    fetch(url, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: data ? JSON.stringify(data) : undefined,
+    })
+      .then(async (response) => {
+        const responseData = await response.json()
+        return { data: responseData, status: response.status, ok: response.ok } as ApiResponse<T>
+      })
+
+  return useApi(request, config)
+}
+
+/**
+ * PUT запрос
+ */
+export function usePut<T>(
+  url: string,
+  data?: unknown,
+  config: UseApiConfig<T> = {}
+): UseApiResult<T> {
+  const request = () =>
+    fetch(url, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: data ? JSON.stringify(data) : undefined,
+    })
+      .then(async (response) => {
+        const responseData = await response.json()
+        return { data: responseData, status: response.status, ok: response.ok } as ApiResponse<T>
+      })
+
+  return useApi(request, config)
+}
+
+/**
+ * DELETE запрос
+ */
+export function useDel<T>(
+  url: string,
+  config: UseApiConfig<T> = {}
+): UseApiResult<T> {
+  const request = () =>
+    fetch(url, {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+    })
+      .then(async (response) => {
+        const responseData = await response.json()
+        return { data: responseData, status: response.status, ok: response.ok } as ApiResponse<T>
+      })
+
+  return useApi(request, config)
+}
+