@kb-labs/studio-app 0.7.0 → 2.8.0

package/src/components/role-switcher.tsx

@@ -1,148 +0,0 @@
-/**
- * @module @kb-labs/studio-app/components/role-switcher
- * Mock authentication role switcher for demo purposes
- */
-
-import * as React from 'react';
-import {
-  UICard, UIRadio, UIRadioGroup, UISpace, UITitle, UITypographyText, UITypographyParagraph,
-  UIAlert, UIDivider, UIIcon,
-} from '@kb-labs/studio-ui-kit';
-import type { UserRole } from '@/providers/auth-provider';
-import { useAuth } from '@/providers/auth-provider';
-
-const ROLE_CONFIG: Record<
-  UserRole,
-  {
-    label: string;
-    description: string;
-    icon: React.ReactElement;
-    color: string;
-    permissions: string[];
-  }
-> = {
-  viewer: {
-    label: 'Viewer',
-    description: 'Read-only access to dashboards and reports',
-    icon: <UIIcon name="EyeOutlined" />,
-    color: '#52c41a',
-    permissions: ['View dashboards', 'View analytics', 'View workflows (read-only)'],
-  },
-  operator: {
-    label: 'Operator',
-    description: 'Standard user with execution permissions',
-    icon: <UIIcon name="ToolOutlined" />,
-    color: '#1890ff',
-    permissions: [
-      'All Viewer permissions',
-      'Execute workflows',
-      'Manage widgets',
-      'Configure settings',
-    ],
-  },
-  admin: {
-    label: 'Administrator',
-    description: 'Full access to all features and settings',
-    icon: <UIIcon name="CrownOutlined" />,
-    color: '#ff4d4f',
-    permissions: [
-      'All Operator permissions',
-      'Manage plugins',
-      'System configuration',
-      'Advanced developer tools',
-    ],
-  },
-};
-
-export function RoleSwitcher() {
-  const { role, setRole } = useAuth();
-
-  const handleRoleChange = (newRole: UserRole) => {
-    setRole(newRole);
-  };
-
-  return (
-    <div>
-      <UITitle level={4}>
-        <UIIcon name="UserOutlined" style={{ marginRight: 8 }} />
-        Mock Authentication
-      </UITitle>
-      <UITypographyParagraph type="secondary">
-        This is a demo authentication system for testing different user roles. In production, this
-        would be replaced with real authentication (OAuth, JWT, etc.).
-      </UITypographyParagraph>
-
-      <UIAlert
-        variant="info"
-        message="Demo Mode"
-        description="No real authentication is performed. Role changes take effect immediately and persist in localStorage."
-        showIcon
-        style={{ marginBottom: 24 }}
-      />
-
-      <UICard>
-        <UIRadioGroup
-          value={role}
-          onChange={(e) => handleRoleChange(e.target.value as UserRole)}
-          style={{ width: '100%' }}
-        >
-          <UISpace direction="vertical" size="large" style={{ width: '100%' }}>
-            {(Object.entries(ROLE_CONFIG) as [UserRole, (typeof ROLE_CONFIG)[UserRole]][]).map(
-              ([roleId, config]) => (
-                <UICard
-                  key={roleId}
-                  hoverable
-                  style={{
-                    borderColor: role === roleId ? config.color : undefined,
-                    borderWidth: role === roleId ? 2 : 1,
-                  }}
-                  onClick={() => handleRoleChange(roleId)}
-                >
-                  <UIRadio value={roleId} style={{ marginBottom: 8 }}>
-                    <UISpace>
-                      <span style={{ color: config.color, fontSize: 18 }}>{config.icon}</span>
-                      <UITypographyText strong style={{ fontSize: 16 }}>
-                        {config.label}
-                      </UITypographyText>
-                      {role === roleId && (
-                        <UITypographyText type="success" style={{ fontSize: 12 }}>
-                          (Current)
-                        </UITypographyText>
-                      )}
-                    </UISpace>
-                  </UIRadio>
-                  <UITypographyParagraph type="secondary" style={{ marginLeft: 24, marginBottom: 8 }}>
-                    {config.description}
-                  </UITypographyParagraph>
-                  <UIDivider style={{ margin: '12px 0' }} />
-                  <div style={{ marginLeft: 24 }}>
-                    <UITypographyText type="secondary" style={{ fontSize: 12 }}>
-                      Permissions:
-                    </UITypographyText>
-                    <ul style={{ marginTop: 8, marginBottom: 0, paddingLeft: 20 }}>
-                      {config.permissions.map((permission, idx) => (
-                        <li key={idx}>
-                          <UITypographyText type="secondary" style={{ fontSize: 12 }}>
-                            {permission}
-                          </UITypographyText>
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-                </UICard>
-              )
-            )}
-          </UISpace>
-        </UIRadioGroup>
-      </UICard>
-
-      <UIAlert
-        variant="success"
-        message="Try it out!"
-        description="Switch between roles and navigate through the app to see how different permissions affect the UI and available features."
-        showIcon
-        style={{ marginTop: 24 }}
-      />
-    </div>
-  );
-}

package/src/components/run-badge.tsx

@@ -1,13 +0,0 @@
-import { UIBadge } from '@kb-labs/studio-ui-kit';
-
-export function RunBadge({ status }: { status: 'pending' | 'ok' | 'warn' | 'fail' }) {
-  const variantMap = {
-    ok: 'success' as const,
-    warn: 'warning' as const,
-    fail: 'error' as const,
-    pending: 'info' as const,
-  };
-
-  return <UIBadge variant={variantMap[status]}>{status.toUpperCase()}</UIBadge>;
-}
-

package/src/components/ui/icons.tsx

@@ -1,509 +0,0 @@
-/**
- * Icon utilities for rendering Ant Design icons by name
- *
- * This module provides a curated set of ~100 icons for plugin developers.
- * All icons are tree-shaken properly and only included if used.
- */
-
-import * as React from 'react';
-
-// Import curated icon set for plugin developers
-import {
-  // Navigation & Layout
-  HomeOutlined,
-  DashboardOutlined,
-  MenuOutlined,
-  AppstoreOutlined,
-  LayoutOutlined,
-  SettingOutlined,
-  UnorderedListOutlined,
-  OrderedListOutlined,
-
-  // Actions & Controls
-  PlayCircleOutlined,
-  PauseCircleOutlined,
-  StopOutlined,
-  ReloadOutlined,
-  SyncOutlined,
-  PlusOutlined,
-  MinusOutlined,
-  CloseOutlined,
-  CheckOutlined,
-  EditOutlined,
-  DeleteOutlined,
-  SaveOutlined,
-  DownloadOutlined,
-  UploadOutlined,
-  ExportOutlined,
-  ImportOutlined,
-  CopyOutlined,
-  SearchOutlined,
-  FilterOutlined,
-  ArrowUpOutlined,
-  ArrowDownOutlined,
-  ArrowLeftOutlined,
-  ArrowRightOutlined,
-
-  // Status & Alerts
-  CheckCircleOutlined,
-  CloseCircleOutlined,
-  ExclamationCircleOutlined,
-  InfoCircleOutlined,
-  WarningOutlined,
-  QuestionCircleOutlined,
-  LoadingOutlined,
-  SyncOutlined as SpinOutlined,
-
-  // Files & Folders
-  FileOutlined,
-  FileTextOutlined,
-  FileImageOutlined,
-  FilePdfOutlined,
-  FileWordOutlined,
-  FileExcelOutlined,
-  FolderOutlined,
-  FolderOpenOutlined,
-
-  // Development & Code
-  CodeOutlined,
-  BugOutlined,
-  ApiOutlined,
-  ConsoleSqlOutlined,
-  FunctionOutlined,
-  DeploymentUnitOutlined,
-  BranchesOutlined,
-  NodeIndexOutlined,
-
-  // Git & Version Control
-  GithubOutlined,
-  GitlabOutlined,
-  PullRequestOutlined,
-  MergeCellsOutlined,
-
-  // Data & Analytics
-  DatabaseOutlined,
-  TableOutlined,
-  BarChartOutlined,
-  LineChartOutlined,
-  PieChartOutlined,
-  AreaChartOutlined,
-  DotChartOutlined,
-
-  // Communication
-  MailOutlined,
-  MessageOutlined,
-  CommentOutlined,
-  NotificationOutlined,
-  BellOutlined,
-
-  // Users & Teams
-  UserOutlined,
-  TeamOutlined,
-  UsergroupAddOutlined,
-  ContactsOutlined,
-
-  // Time & Calendar
-  ClockCircleOutlined,
-  CalendarOutlined,
-  HistoryOutlined,
-  FieldTimeOutlined,
-
-  // Media & Visual
-  PictureOutlined,
-  CameraOutlined,
-  VideoCameraOutlined,
-  EyeOutlined,
-  EyeInvisibleOutlined,
-
-  // Network & Cloud
-  CloudOutlined,
-  CloudDownloadOutlined,
-  CloudUploadOutlined,
-  GlobalOutlined,
-  WifiOutlined,
-  ApiOutlined as LinkOutlined,
-
-  // Security
-  LockOutlined,
-  UnlockOutlined,
-  SafetyOutlined,
-  SafetyCertificateOutlined,
-  KeyOutlined,
-
-  // Tools & Utilities
-  ToolOutlined,
-  BuildOutlined,
-  ExperimentOutlined,
-  RocketOutlined,
-  RobotOutlined,
-  ThunderboltOutlined,
-  FireOutlined,
-  BulbOutlined,
-
-  // Misc
-  StarOutlined,
-  HeartOutlined,
-  TrophyOutlined,
-  GiftOutlined,
-  AimOutlined,
-  FlagOutlined,
-  TagOutlined,
-  BookOutlined,
-  MoreOutlined,
-  EllipsisOutlined,
-  RightOutlined,
-  LeftOutlined,
-  UpOutlined,
-  DownOutlined,
-} from '@ant-design/icons';
-
-/**
- * Registry of all available icons for plugin developers.
- * This is the complete list of icons that can be used in plugin manifests.
- */
-export const AVAILABLE_ICONS: Record<string, React.ComponentType<any>> = {
-  // Navigation & Layout
-  HomeOutlined,
-  DashboardOutlined,
-  MenuOutlined,
-  AppstoreOutlined,
-  LayoutOutlined,
-  SettingOutlined,
-  UnorderedListOutlined,
-  OrderedListOutlined,
-
-  // Actions & Controls
-  PlayCircleOutlined,
-  PauseCircleOutlined,
-  StopOutlined,
-  ReloadOutlined,
-  SyncOutlined,
-  PlusOutlined,
-  MinusOutlined,
-  CloseOutlined,
-  CheckOutlined,
-  EditOutlined,
-  DeleteOutlined,
-  SaveOutlined,
-  DownloadOutlined,
-  UploadOutlined,
-  ExportOutlined,
-  ImportOutlined,
-  CopyOutlined,
-  SearchOutlined,
-  FilterOutlined,
-  ArrowUpOutlined,
-  ArrowDownOutlined,
-  ArrowLeftOutlined,
-  ArrowRightOutlined,
-
-  // Status & Alerts
-  CheckCircleOutlined,
-  CloseCircleOutlined,
-  ExclamationCircleOutlined,
-  InfoCircleOutlined,
-  WarningOutlined,
-  QuestionCircleOutlined,
-  LoadingOutlined,
-  SpinOutlined,
-
-  // Files & Folders
-  FileOutlined,
-  FileTextOutlined,
-  FileImageOutlined,
-  FilePdfOutlined,
-  FileWordOutlined,
-  FileExcelOutlined,
-  FolderOutlined,
-  FolderOpenOutlined,
-
-  // Development & Code
-  CodeOutlined,
-  BugOutlined,
-  ApiOutlined,
-  ConsoleSqlOutlined,
-  FunctionOutlined,
-  DeploymentUnitOutlined,
-  BranchesOutlined,
-  NodeIndexOutlined,
-
-  // Git & Version Control
-  GithubOutlined,
-  GitlabOutlined,
-  PullRequestOutlined,
-  MergeCellsOutlined,
-
-  // Data & Analytics
-  DatabaseOutlined,
-  TableOutlined,
-  BarChartOutlined,
-  LineChartOutlined,
-  PieChartOutlined,
-  AreaChartOutlined,
-  DotChartOutlined,
-
-  // Communication
-  MailOutlined,
-  MessageOutlined,
-  CommentOutlined,
-  NotificationOutlined,
-  BellOutlined,
-
-  // Users & Teams
-  UserOutlined,
-  TeamOutlined,
-  UsergroupAddOutlined,
-  ContactsOutlined,
-
-  // Time & Calendar
-  ClockCircleOutlined,
-  CalendarOutlined,
-  HistoryOutlined,
-  FieldTimeOutlined,
-
-  // Media & Visual
-  PictureOutlined,
-  CameraOutlined,
-  VideoCameraOutlined,
-  EyeOutlined,
-  EyeInvisibleOutlined,
-
-  // Network & Cloud
-  CloudOutlined,
-  CloudDownloadOutlined,
-  CloudUploadOutlined,
-  GlobalOutlined,
-  WifiOutlined,
-  LinkOutlined,
-
-  // Security
-  LockOutlined,
-  UnlockOutlined,
-  SafetyOutlined,
-  SafetyCertificateOutlined,
-  KeyOutlined,
-
-  // Tools & Utilities
-  ToolOutlined,
-  BuildOutlined,
-  ExperimentOutlined,
-  RocketOutlined,
-  RobotOutlined,
-  ThunderboltOutlined,
-  FireOutlined,
-  BulbOutlined,
-
-  // Misc
-  StarOutlined,
-  HeartOutlined,
-  TrophyOutlined,
-  GiftOutlined,
-  AimOutlined,
-  FlagOutlined,
-  TagOutlined,
-  BookOutlined,
-  MoreOutlined,
-  EllipsisOutlined,
-  RightOutlined,
-  LeftOutlined,
-  UpOutlined,
-  DownOutlined,
-};
-
-/**
- * Get icon component by name.
- * Only icons from AVAILABLE_ICONS registry are supported.
- *
- * @param iconName - Icon name from the available icons list
- * @returns Icon component or null if not found
- *
- * @example
- * ```tsx
- * const IconComponent = getIconComponent('HomeOutlined');
- * if (IconComponent) {
- *   return <IconComponent />;
- * }
- * ```
- */
-export function getIconComponent(iconName?: string): React.ComponentType<any> | null {
-  if (!iconName) {return null;}
-
-  const icon = AVAILABLE_ICONS[iconName];
-  if (!icon) {
-    console.warn(`Icon "${iconName}" is not available. Check AVAILABLE_ICONS registry.`);
-    return null;
-  }
-
-  return icon;
-}
-
-/**
- * Render icon by name.
- *
- * @param iconName - Icon name from the available icons list
- * @param props - Icon props (style, className, etc.)
- * @returns Rendered icon element or null if not found
- *
- * @example
- * ```tsx
- * // Simple usage
- * {renderIcon('HomeOutlined')}
- *
- * // With props
- * {renderIcon('SettingOutlined', { style: { fontSize: 20 } })}
- * ```
- */
-export function renderIcon(iconName?: string, props?: any): React.ReactElement | null {
-  const IconComponent = getIconComponent(iconName);
-  if (!IconComponent) {return null;}
-  return <IconComponent {...props} />;
-}
-
-/**
- * Get list of all available icon names.
- * Useful for documentation and validation.
- */
-export function getAvailableIconNames(): string[] {
-  return Object.keys(AVAILABLE_ICONS).sort();
-}
-
-// Re-export all icons for direct import
-export {
-  // Navigation & Layout
-  HomeOutlined,
-  DashboardOutlined,
-  MenuOutlined,
-  AppstoreOutlined,
-  LayoutOutlined,
-  SettingOutlined,
-  UnorderedListOutlined,
-  OrderedListOutlined,
-
-  // Actions & Controls
-  PlayCircleOutlined,
-  PauseCircleOutlined,
-  StopOutlined,
-  ReloadOutlined,
-  SyncOutlined,
-  PlusOutlined,
-  MinusOutlined,
-  CloseOutlined,
-  CheckOutlined,
-  EditOutlined,
-  DeleteOutlined,
-  SaveOutlined,
-  DownloadOutlined,
-  UploadOutlined,
-  ExportOutlined,
-  ImportOutlined,
-  CopyOutlined,
-  SearchOutlined,
-  FilterOutlined,
-  ArrowUpOutlined,
-  ArrowDownOutlined,
-  ArrowLeftOutlined,
-  ArrowRightOutlined,
-
-  // Status & Alerts
-  CheckCircleOutlined,
-  CloseCircleOutlined,
-  ExclamationCircleOutlined,
-  InfoCircleOutlined,
-  WarningOutlined,
-  QuestionCircleOutlined,
-  LoadingOutlined,
-
-  // Files & Folders
-  FileOutlined,
-  FileTextOutlined,
-  FileImageOutlined,
-  FilePdfOutlined,
-  FileWordOutlined,
-  FileExcelOutlined,
-  FolderOutlined,
-  FolderOpenOutlined,
-
-  // Development & Code
-  CodeOutlined,
-  BugOutlined,
-  ApiOutlined,
-  ConsoleSqlOutlined,
-  FunctionOutlined,
-  DeploymentUnitOutlined,
-  BranchesOutlined,
-
-  // Git & Version Control
-  GithubOutlined,
-  GitlabOutlined,
-  PullRequestOutlined,
-  MergeCellsOutlined,
-
-  // Data & Analytics
-  DatabaseOutlined,
-  TableOutlined,
-  BarChartOutlined,
-  LineChartOutlined,
-  PieChartOutlined,
-  AreaChartOutlined,
-  DotChartOutlined,
-
-  // Communication
-  MailOutlined,
-  MessageOutlined,
-  CommentOutlined,
-  NotificationOutlined,
-  BellOutlined,
-
-  // Users & Teams
-  UserOutlined,
-  TeamOutlined,
-  UsergroupAddOutlined,
-  ContactsOutlined,
-
-  // Time & Calendar
-  ClockCircleOutlined,
-  CalendarOutlined,
-  HistoryOutlined,
-  FieldTimeOutlined,
-
-  // Media & Visual
-  PictureOutlined,
-  CameraOutlined,
-  VideoCameraOutlined,
-  EyeOutlined,
-  EyeInvisibleOutlined,
-
-  // Network & Cloud
-  CloudOutlined,
-  CloudDownloadOutlined,
-  CloudUploadOutlined,
-  GlobalOutlined,
-  WifiOutlined,
-
-  // Security
-  LockOutlined,
-  UnlockOutlined,
-  SafetyOutlined,
-  SafetyCertificateOutlined,
-  KeyOutlined,
-
-  // Tools & Utilities
-  ToolOutlined,
-  BuildOutlined,
-  ExperimentOutlined,
-  RocketOutlined,
-  RobotOutlined,
-  ThunderboltOutlined,
-  FireOutlined,
-  BulbOutlined,
-
-  // Misc
-  StarOutlined,
-  HeartOutlined,
-  TrophyOutlined,
-  GiftOutlined,
-  AimOutlined,
-  FlagOutlined,
-  TagOutlined,
-  BookOutlined,
-};

package/src/components/ui/index.ts

@@ -1,25 +0,0 @@
-// Theme & Config
-export { KBConfigProvider, useKBTheme, type ThemeMode, type KBConfigProviderProps } from './kb-config-provider';
-export { ThemeTransitionOverlay, type ThemeTransitionOverlayProps } from './theme-transition-overlay';
-export { KBThemeToggle } from './kb-theme-toggle';
-
-// Layout Components
-export { KBHeader, type KBHeaderProps } from './kb-header';
-export { KBSidebar, type KBSidebarProps, type NavigationItem } from './kb-sidebar';
-export { KBPageLayout, type KBPageLayoutProps } from './kb-page-layout';
-
-// Status & Notification Components
-export { KBStatusBar, StatusBarItem, StatusBarPresets, type KBStatusBarProps, type StatusBarItemProps } from './kb-status-bar';
-export { KBSystemHealthIndicator, type KBSystemHealthIndicatorProps, type SystemHealthData } from './kb-system-health-indicator';
-export { KBNotificationBell, type KBNotificationBellProps, type LogNotification } from './kb-notification-bell';
-
-// Search & UI Components
-export { KBQuickSearch, type KBQuickSearchProps, type SearchableItem } from './kb-quick-search';
-
-// Page & Section Components
-export { KBStatCard, type KBStatCardProps } from './kb-stat-card';
-export { KBStatGrid, type KBStatGridProps } from './kb-stat-grid';
-
-// Icons & Utils
-export * from './icons';
-export { cn } from './utils';