@piedata/pieui 1.0.1 → 1.1.1

package/src/components/PieTelegramRoot/index.tsx

@@ -0,0 +1,161 @@
+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

@@ -0,0 +1,70 @@
+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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1,52 @@
+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

package/src/types/index.ts

@@ -0,0 +1,139 @@
+import {ComponentType, ReactNode} from "react";
+
+export type WebAppUser = {
+    id: string
+    username: string
+    photo_url: string
+}
+
+export type MainButtonType = {
+    show: () => void
+    onClick: (callback: () => void) => void
+    offClick: (callback: () => void) => void
+    setText: (text: string) => void
+    hide: () => void
+}
+
+export type BackButtonType = {
+    show: () => void
+    onClick: (callback: () => void) => void
+    hide: () => void
+}
+
+export type WebAppInitData = {
+    user: WebAppUser
+    start_param?: string
+    chat_type?: 'sender' | 'private' | 'group' | 'supergroup' | 'channel'
+    chat_instance?: string
+    auth_date: number
+    hash: string
+}
+
+export type WebApp = {
+    sendData: (data: string) => void
+    showAlert: (message: string) => void
+    MainButton: MainButtonType
+    BackButton: BackButtonType
+    initDataUnsafe: WebAppInitData
+    initData: string
+    ready: () => void
+    close: () => void
+    openLink: (link: string, option: string) => void
+    platform: 'ios' | 'android' | 'web'
+    expand: () => void
+}
+
+export type Telegram = {
+    WebApp: WebApp
+}
+
+export type InitDataUnsafe = {
+    user?: WebAppUser
+}
+
+export type InitData = string
+
+
+export interface UIConfigType {
+    card: string
+    data: any
+    content: UIConfigType | Array<UIConfigType>
+}
+
+export interface UIEventType {
+    name: string
+    data: Record<any, any>
+}
+
+export type SetUiAjaxConfigurationType =
+    | ((content: UIConfigType | null) => void)
+    | ((events: Array<UIEventType> | null) => void)
+
+export interface PieEvent {
+    cardName: string
+    name: string
+    eventName: string
+    data: any
+}
+
+export type PieEventEmitter = (event: PieEvent) => void
+
+declare global {
+    interface Window {
+        sid: string
+        Telegram: Telegram
+    }
+}
+
+
+export interface ComponentMetadata {
+    author?: string
+    version?: string
+    description?: string
+    tags?: string[]
+}
+
+
+export interface PieComplexContainerComponentProps<TData = unknown> {
+    data: TData
+    content: Array<UIConfigType>
+    setUiAjaxConfiguration?: SetUiAjaxConfigurationType
+}
+
+export interface PieContainerComponentProps<TData = unknown> {
+    data: TData
+    content: UIConfigType
+    setUiAjaxConfiguration?: SetUiAjaxConfigurationType
+}
+
+export interface PieComplexComponentProps<TData = unknown> {
+    data: TData
+    setUiAjaxConfiguration?: SetUiAjaxConfigurationType
+}
+
+export interface PieSimpleComponentProps<TData = unknown> {
+    data: TData
+}
+
+export type PieComponentProps<TData = unknown> =
+    | PieSimpleComponentProps<TData>
+    | PieContainerComponentProps<TData>
+    | PieComplexContainerComponentProps<TData>
+
+
+export interface ComponentRegistration<TProps> {
+    name: string
+    component?: ComponentType<TProps>
+    fallback?: ReactNode
+    loader?: () => Promise<{ default: ComponentType<TProps> }>
+    metadata?: ComponentMetadata
+    isLazy?: boolean
+}
+
+
+export interface PieConfig {
+    apiServer: string
+    centrifugeServer?: string
+    enableRenderingLog?: boolean
+    pageProcessor?: string
+}

package/src/util/ajaxCommonUtils.ts

@@ -0,0 +1,137 @@
+import {getApiServer, isRenderingLogEnabled} from './pieConfig'
+import '../types'
+import { SetUiAjaxConfigurationType, UIEventType } from '../types'
+import waitForSidAvailable from './waitForSidAvailable'
+
+
+export const getAjaxSubmit = (
+    setUiAjaxConfiguration?: SetUiAjaxConfigurationType,
+    kwargs: Record<string, any> = {},
+    depsNames: Array<string> = [],
+    pathname?: string,
+) => {
+    const renderingLogEnabled = isRenderingLogEnabled()
+
+    if (renderingLogEnabled) {
+        console.log('Registering AJAX: ', pathname, kwargs, depsNames)
+    }
+
+    if (!pathname || !setUiAjaxConfiguration) {
+        if (renderingLogEnabled) {
+            console.warn('Registration FAILED: pathname or setUiAjaxConfiguration is missing!')
+        }
+        return () => {}
+    }
+
+    return async (extraKwargs: Record<string, any> = {}) => {
+        if (typeof window === 'undefined' || typeof document === 'undefined') {
+            if (renderingLogEnabled) {
+                console.warn('getAjaxSubmit called on server, skipping DOM-dependent logic')
+            }
+            return
+        }
+
+        if (depsNames.includes('sid')) {
+            await waitForSidAvailable()
+        }
+
+        const data = new FormData()
+        for (const [key, value] of Object.entries({ ...kwargs, ...extraKwargs })) {
+            data.append(key, value)
+        }
+
+        for (const depName of depsNames) {
+            if (depName === 'sid') {
+                if (!window.sid) throw new Error("SocketIO isn't initialized properly")
+                data.append('sid', window.sid)
+            } else {
+                const inputs = document.getElementsByName(depName)
+                if (!inputs.length) {
+                    if (renderingLogEnabled) {
+                        console.warn(`No input found with name ${depName}`)
+                    }
+                    continue
+                }
+                const input = inputs[0]
+                if (input instanceof HTMLInputElement) {
+                    if (input.type === 'file' && input.files) {
+                        Array.from(input.files).forEach((file) => data.append(depName, file))
+                    } else {
+                        data.append(depName, input.value)
+                    }
+                } else if (input instanceof HTMLTextAreaElement) {
+                    data.append(depName, input.value)
+                }
+            }
+        }
+
+        const apiEndpoint = getApiServer() + 'api/ajax_content' + pathname
+
+        setUiAjaxConfiguration(null)
+        return await fetch(apiEndpoint, {
+            method: 'POST',
+            body: data,
+        })
+            .then(async (response) => {
+                const contentType = response.headers.get('content-type') || ''
+                const isJson = contentType.includes('application/json')
+                const isStream = !!response.body?.getReader && !isJson
+
+                if (isStream) {
+                    const reader = response.body!.getReader()
+                    const decoder = new TextDecoder()
+                    let buffer = ''
+
+                    // eslint-disable-next-line no-constant-condition
+                    while (true) {
+                        const { done, value } = await reader.read()
+                        if (done) break
+                        buffer += decoder.decode(value, { stream: true })
+
+                        const lines = buffer.split('\n')
+                        buffer = lines.pop() ?? ''
+
+                        for (const line of lines) {
+                            const trimmed = line.trim()
+                            if (!trimmed) continue
+                            try {
+                                const currentEvent = JSON.parse(trimmed) as UIEventType
+                                ;(setUiAjaxConfiguration as (events: UIEventType[]) => void)([
+                                    currentEvent,
+                                ])
+                            } catch (err) {
+                                if (renderingLogEnabled) {
+                                    console.warn('Failed to parse streamed line:', trimmed)
+                                }
+                            }
+                        }
+                    }
+
+                    if (buffer.trim()) {
+                        try {
+                            const currentEvent = JSON.parse(buffer) as UIEventType
+                            ;(setUiAjaxConfiguration as (events: UIEventType[]) => void)([
+                                currentEvent,
+                            ])
+                        } catch (err) {
+                            if (renderingLogEnabled) {
+                                console.warn('Failed to parse final streamed line:', buffer)
+                            }
+                        }
+                    }
+                    return {}
+                } else {
+                    const data = await response.json()
+                    setUiAjaxConfiguration(data)
+                    return data
+                }
+            })
+            .catch((err) => {
+                if (renderingLogEnabled) {
+                    console.error('AJAX request failed:', err)
+                }
+                setUiAjaxConfiguration(null)
+                return err
+            })
+    }
+}

package/src/util/centrifuge.ts

@@ -0,0 +1,33 @@
+import { createContext } from 'react'
+import { Centrifuge } from 'centrifuge'
+
+
+export const getCentrifuge = (apiServer: string, centrifugeServer?: string) => {
+
+    async function getToken() {
+        const res = await fetch(apiServer + 'api/centrifuge/gen_token')
+        if (!res.ok) {
+            if (res.status === 403) {
+                throw new Centrifuge.UnauthorizedError('Backend is not answering')
+            }
+            throw new Error(`Unexpected status code ${res.status}`)
+        }
+        const data = await res.json()
+        return data.token
+    }
+
+    return centrifugeServer ?
+        new Centrifuge(centrifugeServer || '', {
+            getToken,
+        }): null
+}
+
+
+// export const centrifuge =
+//     getCentrifugeServer() ?
+//     new Centrifuge(getCentrifugeServer() || '', {
+//         getToken,
+//     }): null
+
+const CentrifugeIOContext = createContext<Centrifuge | null>(null)
+export default CentrifugeIOContext

package/src/util/fallback.tsx

@@ -0,0 +1,6 @@
+import {createContext, ReactNode} from "react";
+
+
+const FallbackContext = createContext<ReactNode>(<></>)
+
+export default FallbackContext