@piedata/pieui 1.0.1 → 1.1.1

package/src/components/Containers/AjaxGroupCard/types/index.ts

@@ -0,0 +1,17 @@
+import {PieContainerComponentProps} from "../../../../types";
+
+
+export interface AjaxGroupCardData {
+    name: string
+    noReturn: boolean
+    returnType: 'content' | 'events'
+    useLoader: boolean
+
+    useSocketioSupport?: boolean
+    useCentrifugeSupport?: boolean
+    useMittSupport?: boolean
+    centrifugeChannel?: string
+}
+
+
+export interface AjaxGroupCardProps extends PieContainerComponentProps<AjaxGroupCardData> {}

package/src/components/Containers/AjaxGroupCard/ui/AjaxGroupCard.tsx

@@ -0,0 +1,96 @@
+import {ReactNode, useContext, useEffect, useRef, useState} from 'react'
+import UI from '../../../UI'
+import { AjaxGroupCardProps } from '../types'
+import { UIConfigType, UIEventType } from '../../../../types'
+import PieCard from '../../../PieCard'
+import MittContext from '../../../../util/mitt'
+import FallbackContext from '../../../../util/fallback'
+import { registerPieComponent } from '../../../../util/registry'
+import Radium from "radium";
+
+
+const AjaxGroupCard = ({
+    data,
+    content,
+}: AjaxGroupCardProps) => {
+    const {
+        useLoader,
+        noReturn,
+        returnType,
+        useSocketioSupport,
+        useCentrifugeSupport,
+        useMittSupport,
+        centrifugeChannel,
+    } = data
+    const Fallback: ReactNode = useContext(FallbackContext)
+    const [isLoading, setIsLoading] = useState<boolean>(false)
+    const [uiAjaxConfiguration, setUiAjaxConfiguration] = useState<UIConfigType | null>(null)
+    const lastValidUiConfigRef = useRef<UIConfigType>(content)
+    const mitt = useContext(MittContext)
+
+    const setUiAjaxConfigurationForContentWrapper = (content: UIConfigType | null) => {
+        if (content === null) {
+            setIsLoading(true)
+        } else {
+            setIsLoading(false)
+            if (!noReturn) {
+                lastValidUiConfigRef.current = content
+            }
+        }
+        if (!noReturn) {
+            setUiAjaxConfiguration(content)
+        }
+    }
+
+    const onChangeContent = (event: any) => {
+        lastValidUiConfigRef.current = event.content
+        setUiAjaxConfiguration(event.content)
+    }
+
+    const setUiAjaxConfigurationForEventsWrapper = (events: Array<UIEventType> | null) => {
+        if (events === null) {
+            setIsLoading(true)
+        } else {
+            setIsLoading(false)
+            if (!noReturn) {
+                for (const ev of events) {
+                    mitt.emit(ev.name, ev.data)
+                }
+            }
+        }
+    }
+
+    useEffect(() => {
+        setUiAjaxConfiguration(content)
+        setIsLoading(false)
+    }, [content])
+
+    if (!uiAjaxConfiguration && useLoader) {
+        return Fallback
+    }
+
+    return (
+        <PieCard
+            card={'AjaxGroupCard'}
+            data={data}
+            methods={{
+                changeContent: onChangeContent,
+            }}
+            useSocketioSupport={useSocketioSupport}
+            useCentrifugeSupport={useCentrifugeSupport}
+            useMittSupport={useMittSupport}
+            centrifugeChannel={centrifugeChannel}
+        >
+            <UI
+                uiConfig={uiAjaxConfiguration ?? lastValidUiConfigRef.current}
+                setUiAjaxConfiguration={
+                    returnType === 'events'
+                        ? setUiAjaxConfigurationForEventsWrapper
+                        : setUiAjaxConfigurationForContentWrapper
+                }
+            />
+        </PieCard>
+    )
+}
+
+export default Radium(AjaxGroupCard)

package/src/components/Containers/SequenceCard/index.ts

@@ -0,0 +1 @@
+export { default } from './ui/SequenceCard'

package/src/components/Containers/SequenceCard/types/index.ts

@@ -0,0 +1,10 @@
+import { CSSProperties } from 'react'
+import {PieComplexContainerComponentProps} from "../../../../types";
+
+export interface SequenceCardData {
+    name: string
+    sx: CSSProperties
+}
+
+
+export interface SequenceCardProps extends PieComplexContainerComponentProps<SequenceCardData> {}

package/src/components/Containers/SequenceCard/ui/SequenceCard.tsx

@@ -0,0 +1,32 @@
+import { UIConfigType } from '../../../../types'
+import {SequenceCardProps} from '../types'
+import PieCard from '../../../PieCard'
+import UI from '../../../UI'
+import Radium from "radium";
+import {sx2radium} from "../../../../util/sx2radium.ts";
+
+const SequenceCard = ({
+    data,
+    content,
+    setUiAjaxConfiguration,
+}: SequenceCardProps) => {
+    const { name, sx } = data
+    return (
+        <PieCard card={name} data={data}>
+            <div style={sx2radium(sx)} id={name}>
+                {content.map((obj: UIConfigType, i: number) => {
+                    return (
+                        <UI
+                            key={`children-${i}`}
+                            uiConfig={obj}
+                            setUiAjaxConfiguration={setUiAjaxConfiguration}
+                        />
+                    )
+                })}
+            </div>
+        </PieCard>
+    )
+}
+
+
+export default Radium(SequenceCard)

package/src/components/Containers/UnionCard/index.ts

@@ -0,0 +1 @@
+export { default } from './ui/UnionCard'

package/src/components/Containers/UnionCard/types/index.ts

@@ -0,0 +1,8 @@
+import {PieComplexContainerComponentProps} from "../../../../types";
+
+
+export interface UnionCardData {
+    name: string
+}
+
+export interface UnionCardProps extends PieComplexContainerComponentProps<UnionCardData> {}

package/src/components/Containers/UnionCard/ui/UnionCard.tsx

@@ -0,0 +1,27 @@
+import { UIConfigType } from '../../../../types'
+import {UnionCardProps} from '../types'
+import PieCard from '../../../PieCard'
+import UI from '../../../UI'
+
+const UnionCard = ({
+    data,
+    content,
+    setUiAjaxConfiguration,
+}: UnionCardProps) => {
+    const { name } = data
+    return (
+        <PieCard card={name} data={data}>
+            {content.map((obj: UIConfigType, i: number) => {
+                return (
+                    <UI
+                        key={`children-${i}`}
+                        uiConfig={obj}
+                        setUiAjaxConfiguration={setUiAjaxConfiguration}
+                    />
+                )
+            })}
+        </PieCard>
+    )
+}
+
+export default UnionCard

package/src/components/PieCard/index.tsx

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

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

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

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