@piedata/pieui 1.1.1 → 1.1.3

package/src/components/Chats/ChatCard/ui/components/MessageCard.tsx

@@ -1,80 +0,0 @@
-import parse from 'html-react-parser'
-import { useState, useEffect } from 'react'
-import MarkdownRender from './Markdown'
-import UI from '../../../../UI'
-import MessageAvatar from './MessageAvatar'
-import ChatOption from './ChatOption'
-import { Message } from '../../types'
-import { SetUiAjaxConfigurationType } from '../../../../../types'
-
-const MessageCard = ({
-    message,
-    handleOptionClick,
-    setUiAjaxConfiguration,
-}: {
-    message: Message
-    handleOptionClick: (option: string) => void
-    setUiAjaxConfiguration?: SetUiAjaxConfigurationType
-}) => {
-    const [copied, setCopied] = useState(false)
-
-    useEffect(() => {
-        const timeout = setTimeout(() => {
-            if (copied) setCopied(false)
-        }, 1000)
-
-        return () => clearTimeout(timeout)
-    }, [copied])
-
-    return (
-        <div className='group w-full border-b border-black/10' id={message.id}>
-            <div
-                className={`flex gap-4 p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-3xl xl:max-w-5xl ${message.align === 'center' ? 'm-auto' : ''} ${message.align === 'right' ? 'ml-auto justify-end' : ''} ${message.align === 'left' ? 'mr-auto' : ''} `}
-            >
-                {(message.align === 'left' || message.align === 'center') && (
-                    <div className='relative flex shrink-0 flex-col items-end'>
-                        <MessageAvatar username={message.username} avatar={message.avatar} />
-                    </div>
-                )}
-                <div className='relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]'>
-                    <div
-                        className={`markdown light prose w-full break-words dark:prose-invert first:mt-0 ${message.align === 'right' ? 'flex justify-end self-end' : ''}`}
-                    >
-                        {typeof message.content === 'string' ? (
-                            message.parseMode.toLowerCase() === 'markdown' ? (
-                                <MarkdownRender key={Date.now() + Math.random()}>
-                                    {message.content}
-                                </MarkdownRender>
-                            ) : message.parseMode.toLowerCase() === 'html' ? (
-                                parse(message.content)
-                            ) : (
-                                message.content
-                            )
-                        ) : (
-                            <UI
-                                uiConfig={message.content}
-                                setUiAjaxConfiguration={setUiAjaxConfiguration}
-                            />
-                        )}
-                    </div>
-                    <div className='flex flex-row flex-wrap justify-start gap-1'>
-                        {message.options.map((option, idx) => (
-                            <ChatOption
-                                key={idx}
-                                onClickOption={handleOptionClick}
-                                option={option}
-                            />
-                        ))}
-                    </div>
-                </div>
-                {message.align === 'right' && (
-                    <div className='relative flex shrink-0 flex-col items-end'>
-                        <MessageAvatar username={message.username} avatar={message.avatar} />
-                    </div>
-                )}
-            </div>
-        </div>
-    )
-}
-
-export default MessageCard

package/src/components/Chats/ChatCard/ui/components/MessageContent.tsx

@@ -1,27 +0,0 @@
-import clsx from 'clsx'
-
-const MessageContent = ({
-    name,
-    content,
-    isSent,
-}: {
-    name: string
-    content: string
-    isSent: boolean
-}) => {
-    return (
-        <div className='px-6 py-4'>
-            <div
-                className={clsx(
-                    'text-xl font-medium text-black',
-                    isSent ? 'text-right' : 'text-left',
-                )}
-            >
-                {isSent ? 'You' : name}
-            </div>
-            <p className='text-gray-500'>{content}</p>
-        </div>
-    )
-}
-
-export default MessageContent

package/src/components/Chats/ChatCard/ui/components/MessagesBoard.tsx

@@ -1,61 +0,0 @@
-import MessageCard from './MessageCard'
-import { CSSProperties, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react'
-import { Message } from '../../types'
-import { SetUiAjaxConfigurationType } from '../../../../../types'
-
-export interface MessagesBoardHandle {
-    addMessage: (message: Message) => void
-    setMessages: (messages: Array<Message>) => void
-    scrollToBottom: () => void
-}
-
-const MessagesBoard = forwardRef<
-    MessagesBoardHandle,
-    {
-        name: string
-        handleOptionClick: (option: string) => void
-        defaultMessages: Message[]
-        sx: CSSProperties
-        setUiAjaxConfiguration?: SetUiAjaxConfigurationType
-    }
->(({ name, handleOptionClick, defaultMessages, sx, setUiAjaxConfiguration }, ref) => {
-    const [messages, setMessages] = useState<Message[]>(defaultMessages)
-    const containerRef = useRef<HTMLDivElement>(null)
-
-    const scrollToBottom = () => {
-        if (containerRef.current) {
-            containerRef.current.scrollTop = containerRef.current.scrollHeight
-        }
-    }
-
-    useEffect(() => {
-        scrollToBottom()
-    }, [messages])
-
-    useImperativeHandle(ref, () => ({
-        setMessages: (currentMessages: Array<Message>) => setMessages(currentMessages),
-        addMessage: (message: Message) =>
-            setMessages((currentMessages) => [...currentMessages, message]),
-        scrollToBottom: scrollToBottom,
-    }))
-
-    return (
-        <div
-            id={name + '_messages'}
-            className='flex flex-col items-center overflow-y-scroll'
-            style={sx}
-            ref={containerRef}
-        >
-            {messages.map((message) => (
-                <MessageCard
-                    key={message.id}
-                    message={message}
-                    handleOptionClick={handleOptionClick}
-                    setUiAjaxConfiguration={setUiAjaxConfiguration}
-                />
-            ))}
-        </div>
-    )
-})
-
-export default MessagesBoard

package/src/components/Chats/ChatCard/ui/components/Options.tsx

@@ -1,20 +0,0 @@
-import { Option } from '../../types'
-import ChatOption from './ChatOption'
-
-const Options = ({
-    options,
-    handleOptionClick,
-}: {
-    options: Option[]
-    handleOptionClick: (option: string) => void
-}) => {
-    return (
-        <div className='flex w-full flex-row flex-wrap justify-start gap-[5px]'>
-            {options.map((option: Option, idx: number) => {
-                return <ChatOption key={idx} option={option} onClickOption={handleOptionClick} />
-            })}
-        </div>
-    )
-}
-
-export default Options

package/src/components/Chats/ChatCard/ui/components/ResizableTextarea.tsx

@@ -1,59 +0,0 @@
-import {
-    DetailedHTMLProps,
-    FocusEventHandler,
-    KeyboardEventHandler,
-    TextareaHTMLAttributes,
-    useRef,
-    useState,
-} from 'react'
-
-export default function ResizableTextarea(
-    props: DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>,
-) {
-    const [canResize, setCanResize] = useState<boolean>(false)
-    const textareaRef = useRef<HTMLTextAreaElement | null>(null)
-
-    const handleKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = (e) => {
-        if (e.key === 'Enter' && e.shiftKey) {
-            setCanResize(true)
-            if (textareaRef.current && typeof window !== 'undefined') {
-                const style = window.getComputedStyle(textareaRef.current)
-                const lineHeight = parseFloat(style.lineHeight)
-                textareaRef.current.style.height =
-                    textareaRef.current.scrollHeight + lineHeight + 'px'
-            }
-        }
-        if (e.key === 'Backspace') {
-            setCanResize(true)
-            if (textareaRef.current && typeof window !== 'undefined') {
-                const style = window.getComputedStyle(textareaRef.current)
-                const lineHeight = parseFloat(style.lineHeight)
-                if (textareaRef.current.scrollHeight > lineHeight) {
-                    textareaRef.current.style.height =
-                        textareaRef.current.scrollHeight - lineHeight + 'px'
-                }
-            }
-        }
-        props.onKeyDown && props.onKeyDown(e)
-    }
-
-    const handleKeyUp: KeyboardEventHandler<HTMLTextAreaElement> = () => {
-        setCanResize(false)
-    }
-
-    const handleBlur: FocusEventHandler<HTMLTextAreaElement> = (e) => {
-        setCanResize(false)
-        props.onBlur && props.onBlur(e)
-    }
-
-    return (
-        <textarea
-            ref={textareaRef}
-            {...props}
-            onKeyUp={handleKeyUp}
-            onKeyDown={handleKeyDown}
-            onBlur={handleBlur}
-            style={{ resize: canResize ? 'vertical' : 'none', overflowY: 'auto', ...props.style }}
-        />
-    )
-}

package/src/components/Chats/ChatCard/ui/components/SendButton.tsx

@@ -1,37 +0,0 @@
-import { useRef, useCallback, MouseEventHandler } from 'react'
-import SendIcon from './icons/SendIcon'
-import { ChatButtonProps } from '../../types'
-
-
-const SendButton = ({ type = 'button', onClick, icons }: ChatButtonProps) => {
-    const buttonRef = useRef<HTMLButtonElement | null>(null)
-
-    const animateSendButton = useCallback(() => {
-        const btn = buttonRef.current
-        if (btn) {
-            btn.style.transform = 'scale(0.8)'
-            setTimeout(() => {
-                btn.style.transform = 'scale(1)'
-            }, 600)
-        }
-    }, [])
-
-    const handleClick: MouseEventHandler<HTMLButtonElement> = (e) => {
-        if (onClick) onClick(e)
-        animateSendButton()
-    }
-
-    return (
-        <button
-            ref={buttonRef}
-            type={type}
-            onClick={handleClick}
-            className='mr-1.5 rounded-md p-1 text-gray-500 ring-0 hover:bg-gray-100 disabled:opacity-40 disabled:hover:bg-transparent'
-            style={{ transition: 'transform 300ms ease' }}
-        >
-            {icons.sendIcon ? <img src={icons.sendIcon} alt='' /> : <SendIcon />}
-        </button>
-    )
-}
-
-export default SendButton

package/src/components/Chats/ChatCard/ui/components/VoiceListeningButton.tsx

@@ -1,35 +0,0 @@
-import CancelFileIcon from './icons/CancelFileIcon'
-import VoiceRecordIcon from './icons/VoiceRecordIcon'
-import { ChatIconsType } from '../../types'
-
-const VoiceListeningButton = ({
-    isListening,
-    toggleListening,
-    icons,
-}: {
-    toggleListening: () => void
-    isListening: boolean
-    icons: ChatIconsType
-}) => {
-    return (
-        <button
-            className='rounded-md p-1 text-gray-500 ring-0 hover:bg-gray-100 disabled:opacity-40 disabled:hover:bg-transparent'
-            type='button'
-            onClick={toggleListening}
-        >
-            {isListening ? (
-                icons.cancelIcon ? (
-                    <img src={icons.cancelIcon} alt='' />
-                ) : (
-                    <CancelFileIcon />
-                )
-            ) : icons.voiceRecordingIcon ? (
-                <img src={icons.voiceRecordingIcon} alt='' />
-            ) : (
-                <VoiceRecordIcon />
-            )}
-        </button>
-    )
-}
-
-export default VoiceListeningButton

package/src/components/Chats/ChatCard/ui/components/icons/AttachFileIcon.tsx

@@ -1,18 +0,0 @@
-const AttachFileIcon = () => (
-    <svg
-        xmlns='http://www.w3.org/2000/svg'
-        fill='none'
-        viewBox='0 0 24 24'
-        strokeWidth='1.5'
-        stroke='currentColor'
-        className='size-5'
-    >
-        <path
-            strokeLinecap='round'
-            strokeLinejoin='round'
-            d='M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13'
-        />
-    </svg>
-)
-
-export default AttachFileIcon

package/src/components/Chats/ChatCard/ui/components/icons/AttachedFileIcon.tsx

@@ -1,18 +0,0 @@
-const AttachedFileIcon = () => (
-    <svg
-        xmlns='http://www.w3.org/2000/svg'
-        fill='none'
-        viewBox='0 0 24 24'
-        strokeWidth='1.5'
-        stroke='currentColor'
-        className='size-5 text-gray-500'
-    >
-        <path
-            strokeLinecap='round'
-            strokeLinejoin='round'
-            d='M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z'
-        />
-    </svg>
-)
-
-export default AttachedFileIcon

package/src/components/Chats/ChatCard/ui/components/icons/CancelFileIcon.tsx

@@ -1,14 +0,0 @@
-const CancelFileIcon = () => (
-    <svg
-        xmlns='http://www.w3.org/2000/svg'
-        fill='none'
-        viewBox='0 0 24 24'
-        strokeWidth='1.5'
-        stroke='currentColor'
-        className='size-5'
-    >
-        <path strokeLinecap='round' strokeLinejoin='round' d='M6 18L18 6M6 6l12 12' />
-    </svg>
-)
-
-export default CancelFileIcon

package/src/components/Chats/ChatCard/ui/components/icons/DefaultAvatar.tsx

@@ -1,10 +0,0 @@
-const DefaultAvatarIcon = () => (
-    <svg width='30' height='30' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'>
-        <path
-            d='m 8 1 c -1.65625 0 -3 1.34375 -3 3 s 1.34375 3 3 3 s 3 -1.34375 3 -3 s -1.34375 -3 -3 -3 z m -1.5 7 c -2.492188 0 -4.5 2.007812 -4.5 4.5 v 0.5 c 0 1.109375 0.890625 2 2 2 h 8 c 1.109375 0 2 -0.890625 2 -2 v -0.5 c 0 -2.492188 -2.007812 -4.5 -4.5 -4.5 z m 0 0'
-            fill='#2e3436'
-        />
-    </svg>
-)
-
-export default DefaultAvatarIcon

package/src/components/Chats/ChatCard/ui/components/icons/SendIcon.tsx

@@ -1,18 +0,0 @@
-const SendIcon = () => (
-    <svg
-        xmlns='http://www.w3.org/2000/svg'
-        fill='none'
-        viewBox='0 0 24 24'
-        strokeWidth='1.5'
-        stroke='currentColor'
-        className='size-5'
-    >
-        <path
-            strokeLinecap='round'
-            strokeLinejoin='round'
-            d='M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5'
-        />
-    </svg>
-)
-
-export default SendIcon

package/src/components/Chats/ChatCard/ui/components/icons/VoiceRecordIcon.tsx

@@ -1,15 +0,0 @@
-const VoiceRecordIcon = () => (
-    <svg
-        xmlns='http://www.w3.org/2000/svg'
-        fill='none'
-        viewBox='0 0 24 24'
-        strokeWidth='1.5'
-        stroke='currentColor'
-        className='size-5'
-    >
-        <path d='M8 5C8 2.79086 9.79086 1 12 1C14.2091 1 16 2.79086 16 5V12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12V5Z' />
-        <path d='M6.25 11.8438V12C6.25 13.525 6.8558 14.9875 7.93414 16.0659C9.01247 17.1442 10.475 17.75 12 17.75C13.525 17.75 14.9875 17.1442 16.0659 16.0659C17.1442 14.9875 17.75 13.525 17.75 12V11.8438C17.75 11.2915 18.1977 10.8438 18.75 10.8438H19.25C19.8023 10.8438 20.25 11.2915 20.25 11.8437V12C20.25 14.188 19.3808 16.2865 17.8336 17.8336C16.5842 19.0831 14.9753 19.8903 13.25 20.1548V22C13.25 22.5523 12.8023 23 12.25 23H11.75C11.1977 23 10.75 22.5523 10.75 22V20.1548C9.02471 19.8903 7.41579 19.0831 6.16637 17.8336C4.61919 16.2865 3.75 14.188 3.75 12V11.8438C3.75 11.2915 4.19772 10.8438 4.75 10.8438H5.25C5.80228 10.8438 6.25 11.2915 6.25 11.8438Z' />
-    </svg>
-)
-
-export default VoiceRecordIcon

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

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

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

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

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

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

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

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

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

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

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

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

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

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