spine-framework 0.1.61 → 1.0.0

package/src/components/AppLayout.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { useCurrentApp } from '../contexts/AppContext'
+
+interface AppLayoutProps {
+  children: React.ReactNode
+}
+
+export function AppLayout({ children }: AppLayoutProps) {
+  const app = useCurrentApp()
+
+  return (
+    <div className="spine-app-layout">
+      <header className="spine-app-header">
+        <h1>{app?.name || 'Spine App'}</h1>
+      </header>
+      <main className="spine-app-main">
+        {children}
+      </main>
+    </div>
+  )
+}

package/src/components/AuthGuard.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { useAuth } from '../contexts/AuthContext'
+
+interface AuthGuardProps {
+  children: React.ReactNode
+  fallback?: React.ReactNode
+}
+
+export function AuthGuard({ children, fallback }: AuthGuardProps) {
+  const { user, loading } = useAuth()
+
+  if (loading) {
+    return <div>Loading...</div>
+  }
+
+  if (!user) {
+    return fallback || <div>Please sign in to continue</div>
+  }
+
+  return <>{children}</>
+}

package/src/components/RoleGuard.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { useAuth } from '../contexts/AuthContext'
+
+interface RoleGuardProps {
+  children: React.ReactNode
+  roles: string | string[]
+  fallback?: React.ReactNode
+}
+
+export function RoleGuard({ children, roles, fallback }: RoleGuardProps) {
+  const { user } = useAuth()
+  
+  const requiredRoles = Array.isArray(roles) ? roles : [roles]
+  const userRoles = user?.role ? [user.role] : []
+  
+  const hasRequiredRole = requiredRoles.some(role => userRoles.includes(role))
+
+  if (!hasRequiredRole) {
+    return fallback || <div>Access denied</div>
+  }
+
+  return <>{children}</>
+}

package/src/components/index.ts

@@ -0,0 +1,3 @@
+export { AppLayout } from './AppLayout'
+export { AuthGuard } from './AuthGuard'
+export { RoleGuard } from './RoleGuard'

package/src/contexts/AppContext.tsx

@@ -0,0 +1,122 @@
+import { createContext, useContext, ReactNode, useState, useEffect } from 'react'
+import { App, AppFilters } from '../types'
+
+interface AppContextValue {
+  apps: App[]
+  currentApp: App | null
+  loading: boolean
+  listApps: (filters?: AppFilters) => Promise<App[]>
+  installApp: (appSlug: string) => Promise<void>
+  uninstallApp: (appSlug: string) => Promise<void>
+  setCurrentApp: (app: App | null) => void
+}
+
+const AppContext = createContext<AppContextValue | undefined>(undefined)
+
+interface AppProviderProps {
+  children: ReactNode
+}
+
+export function AppProvider({ children }: AppProviderProps) {
+  const [apps, setApps] = useState<App[]>([])
+  const [currentApp, setCurrentApp] = useState<App | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    // Load apps on mount
+    loadApps()
+  }, [])
+
+  const loadApps = async (_filters?: AppFilters): Promise<App[]> => {
+    setLoading(true)
+    try {
+      // Mock implementation - would call actual API
+      const mockApps: App[] = [
+        {
+          id: 'cortex-app-id',
+          slug: 'cortex',
+          name: 'Cortex',
+          description: 'Unified workspace for CRM, Support, Community, and Knowledge Base',
+          version: '1.0.0',
+          app_type: 'custom',
+          source: 'spine-framework',
+          is_active: true,
+          is_system: false,
+          min_role: 'support',
+          config: {},
+          nav_items: [],
+          route_prefix: '/cortex',
+          renderer: 'custom',
+          created_at: new Date().toISOString()
+        },
+        {
+          id: 'portal-app-id',
+          slug: 'customer-portal',
+          name: 'Customer Portal',
+          description: 'Self-service portal for customers',
+          version: '1.0.0',
+          app_type: 'custom',
+          source: 'spine-framework',
+          is_active: true,
+          is_system: false,
+          min_role: 'member',
+          config: {},
+          nav_items: [],
+          route_prefix: '/portal',
+          renderer: 'custom',
+          created_at: new Date().toISOString()
+        }
+      ]
+      setApps(mockApps)
+      return mockApps
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const listApps = async (filters?: AppFilters): Promise<App[]> => {
+    return loadApps(filters)
+  }
+
+  const installApp = async (appSlug: string): Promise<void> => {
+    // Implement actual app installation logic
+    console.log(`Installing app: ${appSlug}`)
+  }
+
+  const uninstallApp = async (appSlug: string): Promise<void> => {
+    // Implement actual app uninstallation logic
+    console.log(`Uninstalling app: ${appSlug}`)
+  }
+
+  const value: AppContextValue = {
+    apps,
+    currentApp,
+    loading,
+    listApps,
+    installApp,
+    uninstallApp,
+    setCurrentApp
+  }
+
+  return (
+    <AppContext.Provider value={value}>
+      {children}
+    </AppContext.Provider>
+  )
+}
+
+export function useApps(): Omit<AppContextValue, 'currentApp' | 'setCurrentApp'> {
+  const context = useContext(AppContext)
+  if (context === undefined) {
+    throw new Error('useApps must be used within an AppProvider')
+  }
+  return context
+}
+
+export function useCurrentApp(): App | null {
+  const context = useContext(AppContext)
+  if (context === undefined) {
+    throw new Error('useCurrentApp must be used within an AppProvider')
+  }
+  return context.currentApp
+}

package/src/contexts/AuthContext.tsx

@@ -0,0 +1,87 @@
+import { createContext, useContext, ReactNode, useState, useEffect } from 'react'
+import { User, AuthResult } from '../types'
+
+interface AuthContextValue {
+  user: User | null
+  loading: boolean
+  signIn: (email: string, password: string) => Promise<AuthResult>
+  signUp: (email: string, password: string, name?: string) => Promise<AuthResult>
+  signOut: () => Promise<void>
+}
+
+const AuthContext = createContext<AuthContextValue | undefined>(undefined)
+
+interface AuthProviderProps {
+  children: ReactNode
+}
+
+export function AuthProvider({ children }: AuthProviderProps) {
+  const [user, setUser] = useState<User | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    // Check for existing session
+    // This would be implemented with actual Supabase auth
+    setLoading(false)
+  }, [])
+
+  const signIn = async (email: string, _password: string): Promise<AuthResult> => {
+    // Implement actual sign in logic
+    const mockUser: User = {
+      id: 'mock-user-id',
+      email,
+      name: 'Mock User',
+      account_id: 'mock-account-id',
+      created_at: new Date().toISOString(),
+      updated_at: new Date().toISOString()
+    }
+    setUser(mockUser)
+    return {
+      user: mockUser,
+      session: { /* mock session */ }
+    }
+  }
+
+  const signUp = async (email: string, _password: string, name?: string): Promise<AuthResult> => {
+    // Implement actual sign up logic
+    const mockUser: User = {
+      id: 'mock-user-id',
+      email,
+      name: name || 'Mock User',
+      account_id: 'mock-account-id',
+      created_at: new Date().toISOString(),
+      updated_at: new Date().toISOString()
+    }
+    setUser(mockUser)
+    return {
+      user: mockUser,
+      session: { /* mock session */ }
+    }
+  }
+
+  const signOut = async (): Promise<void> => {
+    setUser(null)
+  }
+
+  const value: AuthContextValue = {
+    user,
+    loading,
+    signIn,
+    signUp,
+    signOut
+  }
+
+  return (
+    <AuthContext.Provider value={value}>
+      {children}
+    </AuthContext.Provider>
+  )
+}
+
+export function useAuth(): AuthContextValue {
+  const context = useContext(AuthContext)
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider')
+  }
+  return context
+}

package/src/contexts/SpineContext.tsx

@@ -0,0 +1,46 @@
+import React, { createContext, useContext, ReactNode } from 'react'
+import { SpineClient, SpineConfig } from '../types'
+
+interface SpineContextValue {
+  client: SpineClient | null
+  config: SpineConfig | null
+  loading: boolean
+}
+
+const SpineContext = createContext<SpineContextValue | undefined>(undefined)
+
+interface SpineProviderProps {
+  children: ReactNode
+  config: SpineConfig
+}
+
+export function SpineProvider({ children, config }: SpineProviderProps) {
+  const [client] = React.useState<SpineClient | null>(null)
+  const [loading, setLoading] = React.useState(true)
+
+  React.useEffect(() => {
+    // Initialize client
+    // This would be implemented with actual Supabase client setup
+    setLoading(false)
+  }, [config])
+
+  const value: SpineContextValue = {
+    client,
+    config,
+    loading
+  }
+
+  return (
+    <SpineContext.Provider value={value}>
+      {children}
+    </SpineContext.Provider>
+  )
+}
+
+export function useSpine(): SpineContextValue {
+  const context = useContext(SpineContext)
+  if (context === undefined) {
+    throw new Error('useSpine must be used within a SpineProvider')
+  }
+  return context
+}

package/src/contexts/index.ts

@@ -0,0 +1,3 @@
+export { SpineProvider, useSpine } from './SpineContext'
+export { AuthProvider, useAuth } from './AuthContext'
+export { AppProvider, useApps, useCurrentApp } from './AppContext'

package/src/hooks/index.ts

@@ -0,0 +1,4 @@
+// Core hooks for Spine Framework
+export { useItems } from './useItems'
+export { useThreads } from './useThreads'
+export { useWebSocket } from './useWebSocket'

package/src/hooks/useItems.ts

@@ -0,0 +1,78 @@
+import { useState, useEffect } from 'react'
+import { Item } from '../types'
+
+interface UseItemsOptions {
+  account_id?: string
+  type_id?: string
+  status?: string
+}
+
+export function useItems(options: UseItemsOptions = {}) {
+  const [items, setItems] = useState<Item[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    loadItems()
+  }, [options.account_id, options.type_id, options.status])
+
+  const loadItems = async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      // Mock implementation - would call actual API
+      const mockItems: Item[] = [
+        {
+          id: 'item-1',
+          type_id: 'support-ticket',
+          account_id: options.account_id || 'default-account',
+          title: 'Sample Support Ticket',
+          content: { description: 'This is a sample support ticket' },
+          status: 'open',
+          created_at: new Date().toISOString(),
+          updated_at: new Date().toISOString()
+        }
+      ]
+      setItems(mockItems)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load items')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const createItem = async (item: Omit<Item, 'id' | 'created_at' | 'updated_at'>): Promise<Item> => {
+    const newItem: Item = {
+      ...item,
+      id: `item-${Date.now()}`,
+      created_at: new Date().toISOString(),
+      updated_at: new Date().toISOString()
+    }
+    setItems(prev => [...prev, newItem])
+    return newItem
+  }
+
+  const updateItem = async (id: string, updates: Partial<Item>): Promise<Item> => {
+    const updatedItem: Item = {
+      ...items.find(item => item.id === id)!,
+      ...updates,
+      updated_at: new Date().toISOString()
+    }
+    setItems(prev => prev.map(item => item.id === id ? updatedItem : item))
+    return updatedItem
+  }
+
+  const deleteItem = async (id: string): Promise<void> => {
+    setItems(prev => prev.filter(item => item.id !== id))
+  }
+
+  return {
+    items,
+    loading,
+    error,
+    createItem,
+    updateItem,
+    deleteItem,
+    refresh: loadItems
+  }
+}

package/src/hooks/useThreads.ts

@@ -0,0 +1,73 @@
+import { useState, useEffect } from 'react'
+import { Thread } from '../types'
+
+interface UseThreadsOptions {
+  target_type?: string
+  target_id?: string
+  status?: string
+}
+
+export function useThreads(options: UseThreadsOptions = {}) {
+  const [threads, setThreads] = useState<Thread[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    loadThreads()
+  }, [options.target_type, options.target_id, options.status])
+
+  const loadThreads = async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      // Mock implementation - would call actual API
+      const mockThreads: Thread[] = [
+        {
+          id: 'thread-1',
+          target_type: options.target_type || 'support-ticket',
+          target_id: options.target_id || 'ticket-1',
+          title: 'Sample Thread',
+          visibility: 'public',
+          status: 'active',
+          created_at: new Date().toISOString(),
+          updated_at: new Date().toISOString()
+        }
+      ]
+      setThreads(mockThreads)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load threads')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const createThread = async (thread: Omit<Thread, 'id' | 'created_at' | 'updated_at'>): Promise<Thread> => {
+    const newThread: Thread = {
+      ...thread,
+      id: `thread-${Date.now()}`,
+      created_at: new Date().toISOString(),
+      updated_at: new Date().toISOString()
+    }
+    setThreads(prev => [...prev, newThread])
+    return newThread
+  }
+
+  const updateThread = async (id: string, updates: Partial<Thread>): Promise<Thread> => {
+    const updatedThread: Thread = {
+      ...threads.find(thread => thread.id === id)!,
+      ...updates,
+      updated_at: new Date().toISOString()
+    }
+    setThreads(prev => prev.map(thread => thread.id === id ? updatedThread : thread))
+    return updatedThread
+  }
+
+  return {
+    threads,
+    loading,
+    error,
+    createThread,
+    updateThread,
+    refresh: loadThreads
+  }
+}

package/src/hooks/useWebSocket.ts

@@ -0,0 +1,97 @@
+import { useState, useEffect, useRef } from 'react'
+
+interface WebSocketMessage {
+  type: string
+  data: any
+  timestamp: number
+}
+
+export function useWebSocket(url: string) {
+  const [connected, setConnected] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [lastMessage, setLastMessage] = useState<WebSocketMessage | null>(null)
+  const wsRef = useRef<WebSocket | null>(null)
+  const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+
+  const connect = () => {
+    try {
+      const ws = new WebSocket(url)
+      wsRef.current = ws
+
+      ws.onopen = () => {
+        setConnected(true)
+        setError(null)
+        console.log('WebSocket connected')
+      }
+
+      ws.onclose = () => {
+        setConnected(false)
+        console.log('WebSocket disconnected')
+        
+        // Attempt to reconnect after 3 seconds
+        reconnectTimeoutRef.current = setTimeout(() => {
+          connect()
+        }, 3000)
+      }
+
+      ws.onerror = (event) => {
+        setError('WebSocket connection error')
+        console.error('WebSocket error:', event)
+      }
+
+      ws.onmessage = (event) => {
+        try {
+          const message: WebSocketMessage = JSON.parse(event.data)
+          message.timestamp = Date.now()
+          setLastMessage(message)
+        } catch (err) {
+          console.error('Failed to parse WebSocket message:', err)
+        }
+      }
+    } catch (err) {
+      setError('Failed to create WebSocket connection')
+      console.error('WebSocket connection failed:', err)
+    }
+  }
+
+  useEffect(() => {
+    connect()
+
+    return () => {
+      if (reconnectTimeoutRef.current) {
+        clearTimeout(reconnectTimeoutRef.current)
+      }
+      if (wsRef.current) {
+        wsRef.current.close()
+      }
+    }
+  }, [url])
+
+  const sendMessage = (message: any) => {
+    if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
+      wsRef.current.send(JSON.stringify(message))
+    } else {
+      console.warn('WebSocket is not connected')
+    }
+  }
+
+  const disconnect = () => {
+    if (reconnectTimeoutRef.current) {
+      clearTimeout(reconnectTimeoutRef.current)
+      reconnectTimeoutRef.current = null
+    }
+    if (wsRef.current) {
+      wsRef.current.close()
+      wsRef.current = null
+    }
+  }
+
+  return {
+    connected,
+    error,
+    lastMessage,
+    sendMessage,
+    disconnect,
+    reconnect: connect
+  }
+}

package/src/index.ts

@@ -0,0 +1,22 @@
+export * from './components'
+export * from './hooks'
+export * from './contexts'
+export * from './utils'
+export * from './types'
+
+// Core framework exports
+export { SpineProvider, useSpine } from './contexts/SpineContext'
+export { AuthProvider, useAuth } from './contexts/AuthContext'
+export { AppProvider, useApps, useCurrentApp } from './contexts/AppContext'
+
+// Main components
+export { AppLayout } from './components/AppLayout'
+export { AuthGuard } from './components/AuthGuard'
+export { RoleGuard } from './components/RoleGuard'
+
+// Utility functions
+export { createSpineClient } from './utils/client'
+export { configureSpine } from './utils/config'
+
+// Types
+export type { SpineConfig, SpineClient, User, Account, App } from './types'