@piedata/pieui 1.1.2 → 1.1.4

package/src/components/PieCard/index.tsx

@@ -1,149 +0,0 @@
-import { useContext, useEffect } from 'react';
-import { isRenderingLogEnabled } from '../../util/pieConfig';
-import CentrifugeIOContext from '../../util/centrifuge';
-import SocketIOContext from '../../util/socket';
-import MittContext from '../../util/mitt';
-import {PieCardProps} from './types';
-
-
-const PieCard = ({
-    card,
-    data,
-    children,
-    useSocketioSupport = false,
-    useCentrifugeSupport = false,
-    useMittSupport = false,
-    centrifugeChannel = undefined,
-    methods = undefined,
-}: PieCardProps) => {
-    const renderingLogEnabled = isRenderingLogEnabled()
-    // const name = data.name;
-    if (renderingLogEnabled) {
-        console.log('[PieCard] Rendering card:', card)
-        console.log('[PieCard] Card data:', data)
-        console.log('[PieCard] Component name:', data?.name)
-        console.log('[PieCard] Real-time support:', {
-            socketio: useSocketioSupport,
-            centrifuge: useCentrifugeSupport,
-            mitt: useMittSupport,
-            centrifugeChannel
-        })
-        console.log('[PieCard] Methods:', methods ? Object.keys(methods) : 'none')
-        console.log('[PieCard] Has children:', !!children)
-    }
-
-    const socket = useContext(SocketIOContext)
-    const centrifuge = useContext(CentrifugeIOContext)
-    const mitt = useContext(MittContext)
-
-    useEffect(() => {
-        if (!socket || !useSocketioSupport || !methods || !data.name) {
-            if (renderingLogEnabled && useSocketioSupport) {
-                console.log('[PieCard] Socket.IO setup skipped:', {
-                    hasSocket: !!socket,
-                    useSocketioSupport,
-                    hasMethods: !!methods,
-                    hasDataName: !!data?.name
-                })
-            }
-            return
-        }
-        Object.entries(methods).forEach(([methodName, methodHandler]) => {
-            const eventName = `pie${methodName}_${data.name}`
-            if (renderingLogEnabled) {
-                console.log(`[PieCard] Socket.IO registering event: ${eventName}`)
-            }
-            socket.on(eventName, methodHandler)
-        })
-        return () => {
-            Object.entries(methods).forEach(([methodName, methodHandler]) => {
-                const eventName = `pie${methodName}_${data.name}`
-                if (renderingLogEnabled) {
-                    console.log(`[PieCard] Socket.IO unregistering event: ${eventName}`)
-                }
-                socket.off(eventName, methodHandler)
-            })
-        }
-    }, [socket, methods, data.name])
-
-    useEffect(() => {
-        if (!centrifuge || !useCentrifugeSupport || !centrifugeChannel || !methods || !data.name) {
-            if (renderingLogEnabled && useCentrifugeSupport) {
-                console.log('[PieCard] Centrifuge setup skipped:', {
-                    hasCentrifuge: !!centrifuge,
-                    useCentrifugeSupport,
-                    hasCentrifugeChannel: !!centrifugeChannel,
-                    hasMethods: !!methods,
-                    hasDataName: !!data?.name
-                })
-            }
-            return
-        }
-
-        const subscriptions = Object.entries(methods).map(([methodName, methodHandler]) => {
-            const channelName = `pie${methodName}_${data.name}_${centrifugeChannel}`
-            if (renderingLogEnabled) {
-                console.log(`[PieCard] Centrifuge subscribing to channel: ${channelName}`)
-            }
-            const subscription = centrifuge.newSubscription(channelName)
-            subscription.on('publication', (ctx) => {
-                if (renderingLogEnabled) {
-                    console.log(`[PieCard] Centrifuge received data on ${channelName}:`, ctx.data)
-                }
-                methodHandler(ctx.data)
-            })
-            subscription.subscribe()
-            return subscription
-        })
-
-        return () => {
-            subscriptions.forEach((subscription) => {
-                if (renderingLogEnabled) {
-                    console.log(`[PieCard] Centrifuge unsubscribing from channel`)
-                }
-                subscription.unsubscribe()
-                centrifuge.removeSubscription(subscription)
-            })
-        }
-    }, [centrifuge, centrifugeChannel, methods, data.name])
-
-    useEffect(() => {
-        if (!mitt || !useMittSupport || !methods || !data.name) {
-            if (renderingLogEnabled && useMittSupport) {
-                console.log('[PieCard] Mitt setup skipped:', {
-                    hasMitt: !!mitt,
-                    useMittSupport,
-                    hasMethods: !!methods,
-                    hasDataName: !!data?.name
-                })
-            }
-            return
-        }
-
-        Object.entries(methods).forEach(([methodName, methodHandler]) => {
-            const eventName = `pie${methodName}_${data.name}`
-            if (renderingLogEnabled) {
-                console.log(`[PieCard] Mitt registering event: ${eventName}`)
-            }
-            mitt.on(eventName, methodHandler)
-        })
-
-        return () => {
-            Object.entries(methods).forEach(([methodName, methodHandler]) => {
-                const eventName = `pie${methodName}_${data.name}`
-                if (renderingLogEnabled) {
-                    console.log(`[PieCard] Mitt unregistering event: ${eventName}`)
-                }
-                mitt.off(eventName, methodHandler)
-            })
-        }
-    }, [mitt, methods, data.name])
-
-    if (renderingLogEnabled) {
-        console.log('[PieCard] Rendering complete, returning children')
-    }
-
-    return children
-}
-
-export default PieCard

package/src/components/PieCard/types/index.ts

@@ -1,18 +0,0 @@
-import {ReactNode} from "react";
-
-
-export interface PieCardData {
-    name: string
-    [key: string]: any
-}
-
-export interface PieCardProps {
-    card: string
-    data: PieCardData
-    children: ReactNode
-    useSocketioSupport?: boolean
-    useCentrifugeSupport?: boolean
-    useMittSupport?: boolean
-    centrifugeChannel?: string
-    methods?: Record<string, (data: any) => void>
-}

package/src/components/PieRoot/index.tsx

@@ -1,154 +0,0 @@
-import {useEffect, useMemo} from 'react'
-import {QueryClient, QueryClientProvider, useQuery} from '@tanstack/react-query'
-
-import Radium from "radium";
-import {PieRootProps} from './types'
-
-import MittContext, {emitter} from "../../util/mitt"
-import SocketIOContext, {getSocket} from "../../util/socket"
-import CentrifugeIOContext, { getCentrifuge } from "../../util/centrifuge"
-
-import SocketIOInitProvider from "../../providers/SocketIOInitProvider"
-import CentrifugeIOInitProvider from "../../providers/CentrifugeIOInitProvider"
-import FallbackContext from "../../util/fallback";
-import {UIConfigType} from "../../types";
-import {AxiosError} from "axios";
-import UI from "../UI";
-import { createAxiosDateTransformer } from "axios-date-transformer";
-import {initializePieComponents, isPieComponentsInitialized} from "../../util/initializeComponents.ts";
-import {
-    getApiServer,
-    isRenderingLogEnabled,
-    getCentrifugeServer,
-    PieConfigContext
-} from "../../util/pieConfig";
-
-
-const PieRootContent = ({ location, fallback, onError, initializePie }: PieRootProps) => {
-    const apiServer = getApiServer()
-    const centrifugeServer = getCentrifugeServer()
-    const renderingLogEnabled = isRenderingLogEnabled()
-
-    useEffect(() => {
-        if (isPieComponentsInitialized()) {
-            return
-        }
-        initializePieComponents()
-        initializePie()
-    }, [])
-
-    const axiosInstance = useMemo(() => createAxiosDateTransformer({
-        baseURL: apiServer,
-    }), [])
-
-    if (renderingLogEnabled) {
-        console.log('[PieRoot] Rendering with location:', location)
-        console.log('[PieRoot] API_SERVER:', apiServer)
-        console.log('[PieRoot] Fallback provided:', !!fallback)
-    }
-
-    if (!apiServer) {
-        throw Error("Set PIE_API_SERVER and PIE_CENTRIFUGE_SERVER")
-    }
-
-    // if (!isPieComponentsInitialized()) {
-    //     throw Error("Pie components are not initialized. Use initializePieComponents() at the top of page file")
-    // }
-
-    const {
-        data: uiConfiguration,
-        isLoading,
-        error,
-    } = useQuery<UIConfigType, AxiosError>({
-        queryKey: ['uiConfig', location.pathname + location.search, isPieComponentsInitialized()],
-        queryFn: async () => {
-            if (!isPieComponentsInitialized()) {
-                return
-            }
-            const apiEndpoint = '/api/content' + location.pathname + location.search
-            if (renderingLogEnabled) {
-                console.log('[PieRoot] Fetching UI configuration from:', apiEndpoint)
-            }
-            const response = await axiosInstance.get(apiEndpoint, {
-                headers: {
-                    'Access-Control-Allow-Origin': '*',
-                    'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,PATCH,OPTIONS',
-                    'Content-type': 'application/json',
-                },
-                withCredentials: true,
-            })
-            if (renderingLogEnabled) {
-                console.log('[PieRoot] Received UI configuration:', response.data)
-            }
-            return response.data
-        },
-        staleTime: Infinity,
-        gcTime: Infinity,
-        refetchOnWindowFocus: false,
-        refetchOnMount: false,
-        refetchOnReconnect: false,
-        retry: true,
-        retryDelay: (attempt) => Math.min(1000 * 2 ** attempt, 30000),
-    })
-
-    if (error) {
-        if (renderingLogEnabled) {
-            console.error('[PieRoot] Error fetching UI configuration:', error)
-            console.error('[PieRoot] Error details:', {
-                message: error.message,
-                status: error.response?.status,
-                data: error.response?.data
-            })
-        }
-        onError?.()
-        return fallback
-    }
-
-
-    if (isLoading || !uiConfiguration) {
-        if (renderingLogEnabled) {
-            console.log('[PieRoot] Loading state:', { isLoading, hasUiConfiguration: !!uiConfiguration })
-        }
-        return fallback
-    }
-
-    if (renderingLogEnabled) {
-        console.log('[PieRoot] UI configuration loaded successfully:', uiConfiguration)
-        console.log('[PieRoot] Rendering UI with configuration')
-    }
-
-    return (
-        <MittContext.Provider value={emitter}>
-            <SocketIOContext.Provider value={getSocket(apiServer)}>
-                <CentrifugeIOContext.Provider value={getCentrifuge(apiServer, centrifugeServer)}>
-                    <FallbackContext.Provider value={fallback ?? <></>}>
-                        <SocketIOInitProvider>
-                            <CentrifugeIOInitProvider>
-
-                                <Radium.StyleRoot>
-                                    <UI uiConfig={uiConfiguration} />
-                                </Radium.StyleRoot>
-
-                            </CentrifugeIOInitProvider>
-                        </SocketIOInitProvider>
-                    </FallbackContext.Provider>
-                </CentrifugeIOContext.Provider>
-            </SocketIOContext.Provider>
-        </MittContext.Provider>
-    )
-}
-
-
-const PieRoot = (props: PieRootProps) => {
-    const queryClient = new QueryClient()
-    return (
-        <PieConfigContext.Provider value={props.config}>
-            <QueryClientProvider client={queryClient}>
-                <PieRootContent {...props} />
-            </QueryClientProvider>
-        </PieConfigContext.Provider>
-    )
-}
-
-
-export default PieRoot

package/src/components/PieRoot/types/index.ts

@@ -1,14 +0,0 @@
-import { ReactNode } from "react";
-import {PieConfig} from "../../../types";
-
-
-export interface PieRootProps {
-    location: {
-        pathname: string;
-        search: string;
-    },
-    fallback?: ReactNode
-    onError?: () => void
-    config: PieConfig
-    initializePie: () => void
-}

package/src/components/PieTelegramRoot/index.tsx

@@ -1,161 +0,0 @@
-import React, {useEffect, useMemo} from 'react'
-import {QueryClient, QueryClientProvider, useQuery} from '@tanstack/react-query'
-
-import Radium from "radium";
-import {PieRootProps} from '../PieRoot/types'
-
-import MittContext, {emitter} from "../../util/mitt"
-import SocketIOContext, {getSocket} from "../../util/socket"
-import CentrifugeIOContext, {getCentrifuge} from "../../util/centrifuge"
-
-import SocketIOInitProvider from "../../providers/SocketIOInitProvider"
-import CentrifugeIOInitProvider from "../../providers/CentrifugeIOInitProvider"
-import FallbackContext from "../../util/fallback";
-import {UIConfigType} from "../../types";
-import {AxiosError} from "axios";
-import UI from "../UI";
-import { createAxiosDateTransformer } from "axios-date-transformer";
-import {
-    getApiServer,
-    isRenderingLogEnabled,
-    getCentrifugeServer,
-    PieConfigContext
-} from "../../util/pieConfig";
-import {initializePieComponents, isPieComponentsInitialized} from "../../util/initializeComponents.ts";
-import {useWebApp} from "../../util/useWebApp.ts";
-
-
-const PieTelegramRootContent: React.FC<PieRootProps> = ({ location, fallback, onError, initializePie }) => {
-    const apiServer = getApiServer()
-    const centrifugeServer = getCentrifugeServer()
-    const renderingLogEnabled = isRenderingLogEnabled()
-
-    useEffect(() => {
-        if (isPieComponentsInitialized()) {
-            return
-        }
-        initializePieComponents()
-        initializePie()
-    }, [])
-
-    const axiosInstance = useMemo(() => createAxiosDateTransformer({
-        baseURL: apiServer,
-    }), [])
-    
-    if (renderingLogEnabled) {
-        console.log('[PieRoot] Rendering with location:', location)
-        console.log('[PieRoot] API_SERVER:', apiServer)
-        console.log('[PieRoot] Fallback provided:', !!fallback)
-    }
-
-    if (!apiServer) {
-        throw Error("Set PIE_API_SERVER and PIE_CENTRIFUGE_SERVER")
-    }
-
-    // if (!isPieComponentsInitialized()) {
-    //     throw Error("Pie components are not initialized. Use initializePieComponents() at the top of page file")
-    // }
-
-    const webApp = useWebApp()
-
-    const {
-        data: uiConfiguration,
-        isLoading,
-        error,
-    } = useQuery<UIConfigType, AxiosError>({
-        queryKey: ['uiConfig', location.pathname + location.search, webApp?.initData, isPieComponentsInitialized()],
-        queryFn: async () => {
-            if (!isPieComponentsInitialized()) {
-                return
-            }
-            const querySymbol = location.search ? '&' : '?'
-            const initData = webApp?.initData
-                ? `${querySymbol}initData=${encodeURIComponent(webApp.initData)}`
-                : ''
-            const apiEndpoint = '/api/content' + location.pathname + location.search + initData
-
-            if (renderingLogEnabled) {
-                console.log('[PieRoot] Fetching UI configuration from:', apiEndpoint)
-            }
-            const response = await axiosInstance.get(apiEndpoint, {
-                headers: {
-                    'Access-Control-Allow-Origin': '*',
-                    'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,PATCH,OPTIONS',
-                    'Content-type': 'application/json',
-                },
-                withCredentials: true,
-            })
-            if (renderingLogEnabled) {
-                console.log('[PieRoot] Received UI configuration:', response.data)
-            }
-            return response.data
-        },
-        staleTime: Infinity,
-        gcTime: Infinity,
-        refetchOnWindowFocus: false,
-        refetchOnMount: false,
-        refetchOnReconnect: false,
-        retry: true,
-        retryDelay: (attempt) => Math.min(1000 * 2 ** attempt, 30000),
-    })
-
-    if (error && renderingLogEnabled) {
-        console.error('[PieRoot] Error fetching UI configuration:', error)
-        console.error('[PieRoot] Error details:', {
-            message: error.message,
-            status: error.response?.status,
-            data: error.response?.data
-        })
-        onError?.()
-        return fallback
-    }
-
-
-    if (isLoading || !uiConfiguration) {
-        if (renderingLogEnabled) {
-            console.log('[PieRoot] Loading state:', { isLoading, hasUiConfiguration: !!uiConfiguration })
-        }
-        return fallback
-    }
-
-    if (renderingLogEnabled) {
-        console.log('[PieRoot] UI configuration loaded successfully:', uiConfiguration)
-        console.log('[PieRoot] Rendering UI with configuration')
-    }
-
-    return (
-        <MittContext.Provider value={emitter}>
-            <SocketIOContext.Provider value={getSocket(apiServer)}>
-                <CentrifugeIOContext.Provider value={getCentrifuge(apiServer, centrifugeServer)}>
-                    <FallbackContext.Provider value={fallback ?? <></>}>
-                        <SocketIOInitProvider>
-                            <CentrifugeIOInitProvider>
-
-                                <Radium.StyleRoot>
-                                    <UI uiConfig={uiConfiguration} />
-                                </Radium.StyleRoot>
-
-                            </CentrifugeIOInitProvider>
-                        </SocketIOInitProvider>
-                    </FallbackContext.Provider>
-                </CentrifugeIOContext.Provider>
-            </SocketIOContext.Provider>
-        </MittContext.Provider>
-    )
-}
-
-
-
-const PieTelegramRoot: React.FC<PieRootProps> = (props) => {
-    const queryClient = new QueryClient()
-    return (
-        <PieConfigContext.Provider value={props.config}>
-            <QueryClientProvider client={queryClient}>
-                <PieTelegramRootContent {...props} />
-            </QueryClientProvider>
-        </PieConfigContext.Provider>
-    )
-}
-
-
-export default PieTelegramRoot

package/src/components/UI/index.tsx

@@ -1,70 +0,0 @@
-import { UIConfigType, SetUiAjaxConfigurationType } from '../../types'
-import { getRegistryEntry } from "../../util/registry";
-import {Suspense, useContext, ReactNode} from "react";
-import FallbackContext from "../../util/fallback";
-import { isRenderingLogEnabled } from '../../util/pieConfig';
-
-
-function UI({
-    uiConfig,
-    setUiAjaxConfiguration,
-}: {
-    uiConfig: UIConfigType
-    setUiAjaxConfiguration?: SetUiAjaxConfigurationType
-}) {
-    const Fallback: ReactNode = useContext(FallbackContext)
-    const renderingLogEnabled = isRenderingLogEnabled()
-
-    if (renderingLogEnabled) {
-        console.log('[UI] Rendering component:', uiConfig.card)
-        console.log('[UI] Component data:', uiConfig.data)
-        console.log('[UI] Component content:', uiConfig.content)
-        console.log('[UI] Has setUiAjaxConfiguration:', !!setUiAjaxConfiguration)
-    }
-
-    const entry = getRegistryEntry(uiConfig.card)
-    if (!entry?.component) {
-        if (renderingLogEnabled) {
-            console.warn(`[UI] Component not found in registry: ${uiConfig.card}`)
-            console.log('[UI] Returning fallback component')
-        }
-        return Fallback
-    }
-
-    if (renderingLogEnabled) {
-        console.log('[UI] Found component in registry:', {
-            name: entry.name,
-            isLazy: entry.isLazy,
-            hasMetadata: !!entry.metadata
-        })
-    }
-
-    const Component = entry.component
-
-    const node = (
-        <Component
-            data={uiConfig.data}
-            content={uiConfig.content}
-            setUiAjaxConfiguration={setUiAjaxConfiguration}
-        />
-    )
-
-    if (entry.isLazy) {
-        if (renderingLogEnabled) {
-            console.log('[UI] Rendering lazy component with Suspense:', entry.name)
-        }
-        return (
-            <Suspense key={`${entry.name}`} fallback={entry.fallback ?? Fallback}>
-                {node}
-            </Suspense>
-        )
-    }
-
-    if (renderingLogEnabled) {
-        console.log('[UI] Rendering component directly:', entry.name)
-    }
-
-    return node
-}
-
-export default UI

package/src/components/index.ts

@@ -1,6 +0,0 @@
-export { default as PieCard } from './PieCard';
-export { default as UI } from './UI';
-export { default as ChatCard } from './Chats/ChatCard';
-export { default as AjaxButtonCard } from './Buttons/AjaxButtonCard'
-export { default as SequenceCard } from './Containers/SequenceCard'
-export { default as UnionCard } from './Containers/UnionCard'

package/src/index.ts

@@ -1,15 +0,0 @@
-export { default as UI } from './components/UI'
-export { default as PieRoot } from './components/PieRoot'
-export { default as PieTelegramRoot } from './components/PieTelegramRoot'
-export { default as PieCard } from './components/PieCard'
-export { registerPieComponent } from './util/registry'
-export { initializePieComponents, isPieComponentsInitialized } from './util/initializeComponents'
-
-export type {
-    PieSimpleComponentProps,
-    PieComplexComponentProps,
-    PieContainerComponentProps,
-    PieComplexContainerComponentProps,
-    PieConfig
-} from './types'
-

package/src/providers/CentrifugeIOInitProvider.tsx

@@ -1,42 +0,0 @@
-import { ReactNode, useContext, useEffect } from 'react'
-import CentrifugeIOContext from '../util/centrifuge'
-import { useIsSupported } from '../util/useIsSupported'
-import { getApiServer } from "../util/pieConfig";
-
-
-const CentrifugeIOInitProvider = ({ children }: { children: ReactNode }) => {
-    const centrifuge = useContext(CentrifugeIOContext)
-    const apiServer = getApiServer()
-
-    const isCentrifugeSupported = useIsSupported(apiServer, 'centrifuge')
-
-    useEffect(() => {
-        if (!centrifuge) {
-            return
-        }
-
-        const onConnectEvent = () => {
-            console.log('Centrifuge connected')
-        }
-
-        const onDisconnectEvent = (event: any) => {
-            console.log(`Centrifuge disconnected:`, event)
-        }
-
-        if (isCentrifugeSupported) {
-            centrifuge.on('connected', onConnectEvent)
-            centrifuge.on('disconnected', onDisconnectEvent)
-            centrifuge.connect()
-        }
-
-        return () => {
-            if (isCentrifugeSupported) {
-                centrifuge.disconnect()
-            }
-        }
-    }, [centrifuge, isCentrifugeSupported])
-
-    return children
-}
-
-export default CentrifugeIOInitProvider

package/src/providers/SocketIOInitProvider.tsx

@@ -1,52 +0,0 @@
-import { ReactNode, useContext, useEffect } from 'react'
-import SocketIOContext from '../util/socket'
-import { useIsSupported } from '../util/useIsSupported'
-import { Socket } from 'socket.io-client'
-import { getApiServer } from "../util/pieConfig";
-
-
-const SocketIOInitProvider = ({ children }: { children: ReactNode }) => {
-    const socket: Socket | null = useContext(SocketIOContext)
-    const apiServer = getApiServer()
-    const isSocketIOSupported = useIsSupported(apiServer, 'socketIO')
-
-    const onPieInitEvent = (event: any) => {
-        if (typeof window !== 'undefined') {
-            window.sid = event.sid
-            console.log(`SocketIO initialized: ${window.sid}`)
-        }
-    }
-
-    useEffect(() => {
-        if (!socket) {
-            return
-        }
-        const onConnectEvent = () => {
-            console.log('SocketIO connected')
-        }
-
-        const onDisconnectEvent = (event: any) => {
-            console.log(`SocketIO disconnected: ${event}`)
-            socket.connect()
-        }
-
-        if (isSocketIOSupported) {
-            socket.on(`pieinit`, onPieInitEvent)
-            socket.on('connect', onConnectEvent)
-            socket.on('disconnect', onDisconnectEvent)
-            socket.connect()
-        }
-        return () => {
-            if (isSocketIOSupported) {
-                socket.off(`pieinit`, onPieInitEvent)
-                socket.off('connect', onConnectEvent)
-                socket.off('disconnect', onDisconnectEvent)
-                socket.disconnect()
-            }
-        }
-    }, [socket, isSocketIOSupported])
-
-    return children
-}
-
-export default SocketIOInitProvider