create-pixi-vn 2.0.3 → 2.0.5

package/template-react-vite-muijoy-electron/src/components/ModalDialog.tsx

@@ -1,103 +0,0 @@
-import { DialogActions, DialogContent, Divider, ModalClose } from '@mui/joy';
-import Modal from '@mui/joy/Modal';
-import { default as ModalDialogJoy, ModalDialogProps } from '@mui/joy/ModalDialog';
-import { AnimatePresence, motion } from "motion/react";
-import { useEffect, useState } from 'react';
-
-export interface ModalDialogCustomProps extends ModalDialogProps {
-    open: boolean;
-    setOpen: (open: boolean) => void;
-    children?: React.ReactNode;
-    head?: string | React.ReactNode;
-    actions?: React.ReactNode;
-    canBeIgnored?: boolean;
-}
-
-export default function ModalDialogCustom(props: ModalDialogCustomProps) {
-    const {
-        open
-        , setOpen
-        , children
-        , actions
-        , head
-        , sx
-        , canBeIgnored = true
-        , ...rest
-    } = props;
-    const [internalOpen, setInternalOpen] = useState(open)
-    useEffect(() => {
-        if (open) {
-            setInternalOpen(open)
-            return
-        }
-        const timeout = setTimeout(() => {
-            setInternalOpen(open)
-        }, 400)
-        return () => {
-            clearTimeout(timeout)
-        }
-    }, [open])
-
-    return (
-        <AnimatePresence>
-            <Modal
-                keepMounted
-                open={internalOpen}
-                onClose={() => canBeIgnored && setOpen(false)}
-                component={motion.div}
-                variants={{
-                    open: {
-                        opacity: 1,
-                        pointerEvents: "auto",
-                        backdropFilter: "blur(8px)",
-                    },
-                    closed: {
-                        opacity: 0,
-                        pointerEvents: "none",
-                        backdropFilter: "blur(0px)",
-                    }
-                }}
-                initial={"closed"}
-                animate={open ? "open" : "closed"}
-                exit={"closed"}
-                transition={{
-                    duration: 0.4,
-                }}
-            >
-                <ModalDialogJoy
-                    sx={{
-                        ...sx,
-                    }}
-                    component={motion.div}
-                    variants={{
-                        open: {
-                            opacity: 1,
-                            pointerEvents: "auto",
-                        },
-                        closed: {
-                            opacity: 0,
-                            pointerEvents: "none",
-                        }
-                    }}
-                    initial={"closed"}
-                    animate={internalOpen ? "open" : "closed"}
-                    exit={"closed"}
-                    transition={{
-                        duration: 0.3,
-                    }}
-                    {...rest}
-                >
-                    {canBeIgnored && <ModalClose />}
-                    {head}
-                    {head && <Divider />}
-                    <DialogContent>
-                        {children}
-                    </DialogContent>
-                    {actions && <DialogActions>
-                        {actions}
-                    </DialogActions>}
-                </ModalDialogJoy>
-            </Modal>
-        </AnimatePresence>
-    );
-}

package/template-react-vite-muijoy-electron/src/components/NextButton.tsx

@@ -1,94 +0,0 @@
-import { StepLabelProps } from '@drincs/pixi-vn/dist/override';
-import { Button } from '@mui/joy';
-import { motion } from "motion/react";
-import { useSnackbar } from 'notistack';
-import { useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useRecoilState, useRecoilValue } from 'recoil';
-import { hideInterfaceState } from '../atoms/hideInterfaceState';
-import { nextStepLoadingState } from '../atoms/nextStepLoadingState';
-import { skipEnabledState } from '../atoms/skipEnabledState';
-import { useQueryCanGoNext } from '../use_query/useQueryInterface';
-import { useMyNavigate } from '../utilities/navigate-utility';
-
-export default function NextButton({ nextOnClick }: {
-    nextOnClick: (props: StepLabelProps) => void,
-}) {
-    const [skip, setSkip] = useRecoilState(skipEnabledState)
-    const nextStepLoading = useRecoilValue(nextStepLoadingState)
-    const { data: canGoNext = false } = useQueryCanGoNext()
-    const hideNextButton = useRecoilValue(hideInterfaceState) || !canGoNext
-    const { enqueueSnackbar } = useSnackbar();
-    const navigate = useMyNavigate();
-    const { t } = useTranslation(["ui"]);
-    const { t: tNarration } = useTranslation(["narration"]);
-    useEffect(() => {
-        window.addEventListener("keypress", onkeypress);
-        window.addEventListener("keyup", onkeyup);
-
-        return () => {
-            window.removeEventListener("keypress", onkeypress);
-            window.removeEventListener("keyup", onkeyup);
-        };
-    }, []);
-
-    function onkeypress(event: KeyboardEvent) {
-        if ((event.code == 'Enter' || event.code == 'Space')) {
-            setSkip(true)
-        }
-    }
-
-    function onkeyup(event: KeyboardEvent) {
-        if ((event.code == 'Enter' || event.code == 'Space')) {
-            setSkip(false)
-            nextOnClick({
-                t: tNarration,
-                navigate,
-                notify: (message, variant) => enqueueSnackbar(message, { variant }),
-            })
-        }
-    }
-
-    return (
-        <Button
-            variant="solid"
-            color="primary"
-            size="sm"
-            loading={nextStepLoading}
-            sx={{
-                position: "absolute",
-                bottom: 0,
-                right: 0,
-                width: { xs: 70, sm: 100, md: 150 },
-                border: 3,
-                zIndex: 100,
-            }}
-            onClick={() => {
-                if (skip) {
-                    setSkip(false)
-                }
-                nextOnClick({
-                    t: tNarration,
-                    navigate,
-                    notify: (message, variant) => enqueueSnackbar(message, { variant }),
-                })
-            }}
-            component={motion.div}
-            variants={{
-                open: {
-                    opacity: 1,
-                    pointerEvents: "auto",
-                },
-                closed: {
-                    opacity: 0,
-                    pointerEvents: "none",
-                }
-            }}
-            initial={"closed"}
-            animate={hideNextButton ? "closed" : "open"}
-            exit={"closed"}
-        >
-            {t("next")}
-        </Button>
-    );
-}

package/template-react-vite-muijoy-electron/src/components/SettingButton.tsx

@@ -1,44 +0,0 @@
-import { Card, CardContent, CardProps, Checkbox, useTheme } from "@mui/joy";
-
-export default function SettingButton({ children, checked, disabled, sx, onChange, onClick, ...rest }: {
-    checked?: boolean;
-    disabled?: boolean;
-} & CardProps) {
-    return (
-        <Card
-            sx={{
-                boxShadow: 'none',
-                '&:hover': disabled ? undefined : { bgcolor: 'background.level1' },
-                backgroundColor: disabled ? useTheme().palette.neutral[100] : undefined,
-                ...sx,
-            }}
-            onClick={disabled ? undefined : onClick}
-            {...rest}
-        >
-            <CardContent>
-                {children}
-            </CardContent>
-            <Checkbox
-                disableIcon
-                overlay
-                checked={true}
-                variant="outlined"
-                color="neutral"
-                onChange={onChange}
-                sx={{ mt: -2 }}
-                disabled={disabled}
-                slotProps={{
-                    action: {
-                        sx: {
-                            borderWidth: checked ? 2 : undefined,
-                            borderColor: checked ? useTheme().palette.primary.outlinedBorder : undefined,
-                            '&:hover': disabled ? undefined : {
-                                bgcolor: 'transparent',
-                            },
-                        },
-                    },
-                }}
-            />
-        </Card>
-    );
-}

package/template-react-vite-muijoy-electron/src/components/SliderResizer.tsx

@@ -1,53 +0,0 @@
-import { Slider, SliderProps, Stack, useTheme } from "@mui/joy";
-import { AnimationProps, motion } from "motion/react";
-
-interface SliderResizerProps extends SliderProps, AnimationProps { }
-
-export default function SliderResizer(props: SliderResizerProps) {
-    const {
-        orientation,
-        sx,
-        key,
-        ...rest
-    } = props;
-
-    return (
-        <Stack
-            key={"stack-" + key}
-            direction={orientation === "vertical" ? "row" : "column"}
-            justifyContent="center"
-            alignItems="center"
-            spacing={0}
-            sx={{
-                pointerEvents: "none",
-                width: '100%',
-                height: '100%',
-                position: "absolute",
-                left: 0,
-                right: 0,
-            }}
-        >
-            <Slider
-                key={key}
-                orientation={orientation}
-                valueLabelDisplay="auto"
-                valueLabelFormat={(index) => index + "%"}
-                sx={{
-                    position: "static",
-                    zIndex: useTheme().zIndex.table + 1,
-                    "--Slider-trackSize": "0px",
-                    "--Slider-thumbWidth": orientation === "vertical" ? "42px" : "16px",
-                    "--Slider-thumbSize": orientation === "vertical" ? "16px" : "42px",
-                    "& .MuiSlider-thumb": {
-                        cursor: orientation === "vertical" ? "row-resize" : "col-resize",
-                        pointerEvents: "auto",
-                    },
-                    ...sx,
-                    pointerEvents: "none",
-                }}
-                component={motion.div}
-                {...rest}
-            />
-        </Stack>
-    );
-}

package/template-react-vite-muijoy-electron/src/components/TextMenuButton.tsx

@@ -1,41 +0,0 @@
-import { Link, LinkProps, LinkTypeMap, Typography, useTheme } from "@mui/joy";
-
-interface TextMenuButtonProps extends LinkProps<LinkTypeMap['defaultComponent'], {
-    component?: React.ElementType;
-    focusVisible?: boolean;
-}> {
-    to?: string;
-    selected?: boolean;
-}
-
-export default function TextMenuButton(props: TextMenuButtonProps) {
-    const {
-        sx,
-        children,
-        disabled,
-        selected,
-        ...rest
-    } = props;
-
-    return (
-        <Link
-            sx={{
-                fontSize: { xs: "0.6rem", sm: "0.7rem", md: "0.8rem", lg: "1rem", xl: "1.1rem" },
-                userSelect: "none",
-                ...sx
-            }}
-            disabled={disabled}
-            {...rest}
-        >
-            <Typography
-                textColor={
-                    selected ? useTheme().palette.primary[500] :
-                        disabled ? useTheme().palette.neutral[500] :
-                            useTheme().palette.neutral[300]
-                }
-            >
-                {children}
-            </Typography>
-        </Link>
-    );
-}

package/template-react-vite-muijoy-electron/src/components/Typewriter.tsx

@@ -1,335 +0,0 @@
-import { useTheme } from "@mui/joy";
-import { motion, Variants } from "motion/react";
-import { useMemo, useRef } from "react";
-import Markdown from "react-markdown";
-import rehypeRaw from "rehype-raw";
-import remarkGfm from "remark-gfm";
-
-function TypewriterInternal({ children, letterVariants, dadElement, scrollOnLastItem }: {
-    children: any
-    letterVariants: Variants
-    dadElement: (children: JSX.Element | JSX.Element[]) => JSX.Element | JSX.Element[]
-    isRoot?: boolean
-    scrollOnLastItem?: (scrollTop: number) => void
-}) {
-    if (typeof children === "string") {
-        const spanList = children.split("").map((char, i) => {
-            const ref = useRef<HTMLSpanElement>(null);
-            return <motion.span
-                ref={ref}
-                key={`span-${char}-${i}`}
-                variants={letterVariants}
-                onAnimationComplete={scrollOnLastItem ? () => {
-                    if (ref.current?.offsetParent) {
-                        scrollOnLastItem(ref.current.offsetTop)
-                    }
-                } : undefined}
-            >
-                {char}
-            </motion.span>
-        })
-        return dadElement(spanList)
-    }
-    else if (Array.isArray(children)) {
-        const list = children.map((child) => {
-            if (typeof child === "string") {
-                let spanList = child.split("").map((char, i) => {
-                    const ref = useRef<HTMLSpanElement>(null);
-                    return <motion.span
-                        ref={ref}
-                        key={`span-${char}-${i}`}
-                        variants={letterVariants}
-                        onAnimationComplete={scrollOnLastItem ? () => {
-                            if (ref.current?.offsetParent) {
-                                scrollOnLastItem(ref.current.offsetTop)
-                            }
-                        } : undefined}
-                    >
-                        {char}
-                    </motion.span>
-                })
-                return spanList
-            }
-            return child
-        })
-        return dadElement(list)
-    }
-    return dadElement(children)
-};
-
-export default function Typewriter({ text, delay = 0, onAnimationComplete, onAnimationStart, scroll }: {
-    text: string
-    delay?: number
-    onAnimationComplete?: () => void
-    onAnimationStart?: () => void
-    scroll?: (offsetTop: number) => void
-}) {
-    const sentenceVariants: Variants = {
-        hidden: {},
-        visible: { opacity: 1, transition: { staggerChildren: delay / 1000 } },
-    };
-    const letterVariants = useMemo<Variants>(() => ({
-        hidden: { opacity: 0 },
-        visible: { opacity: 1, transition: { opacity: { duration: 0 } } },
-    }), [delay]);
-
-    return (
-        <motion.div
-            key={text}
-            variants={sentenceVariants}
-            initial="hidden"
-            animate={"visible"}
-            onAnimationStart={onAnimationStart}
-            onAnimationComplete={onAnimationComplete}
-        >
-            <Markdown
-                remarkPlugins={[remarkGfm]}
-                rehypePlugins={[rehypeRaw]}
-                components={{
-                    p: ({ children }) => {
-                        return <TypewriterInternal
-                            children={children}
-                            letterVariants={letterVariants}
-                            scrollOnLastItem={scroll}
-                            dadElement={(children) => {
-                                if (Array.isArray(children)) {
-                                    children.push(<motion.br />)
-                                    return children
-                                }
-                                return children
-                            }}
-                        />
-                    },
-                    a: ({ children, href, style }) => {
-                        return <TypewriterInternal
-                            children={children}
-                            letterVariants={letterVariants}
-                            scrollOnLastItem={scroll}
-                            dadElement={(children) => <motion.a
-                                href={href}
-                                target="_blank"
-                                style={{
-                                    ...style,
-                                    color: useTheme().palette.primary[500],
-                                }}
-                                variants={letterVariants}
-                            >
-                                {children}
-                            </motion.a>
-                            }
-                        />
-                    },
-                    code: ({ children, style }) => {
-                        return <TypewriterInternal
-                            children={children}
-                            letterVariants={letterVariants}
-                            scrollOnLastItem={scroll}
-                            dadElement={(children) => <motion.code
-                                style={{
-                                    ...style,
-                                    backgroundColor: useTheme().palette.neutral[600],
-                                    color: useTheme().palette.neutral[200],
-                                }}
-                                variants={letterVariants}
-                            >
-                                {children}
-                            </motion.code>
-                            }
-                        />
-                    },
-                    ul: ({ children, style }) => {
-                        return <TypewriterInternal
-                            children={children}
-                            letterVariants={letterVariants}
-                            scrollOnLastItem={scroll}
-                            dadElement={(children) => <motion.ul
-                                style={{
-                                    ...style,
-                                    margin: 0,
-                                }}
-                                variants={letterVariants}
-                            >
-                                {children}
-                            </motion.ul>
-                            }
-                        />
-                    },
-                    li: ({ children, style }) => {
-                        return <TypewriterInternal
-                            children={children}
-                            letterVariants={letterVariants}
-                            scrollOnLastItem={scroll}
-                            dadElement={(children) => <motion.li
-                                style={style}
-                                variants={letterVariants}
-                            >
-                                {children}
-                            </motion.li>
-                            }
-                        />
-                    },
-                    strong: ({ children, style }) => {
-                        return <TypewriterInternal
-                            children={children}
-                            letterVariants={letterVariants}
-                            scrollOnLastItem={scroll}
-                            dadElement={(children) => <motion.strong
-                                style={style}
-                                variants={letterVariants}
-                            >
-                                {children}
-                            </motion.strong>
-                            }
-                        />
-                    },
-                    em: ({ children, style }) => {
-                        return <TypewriterInternal
-                            children={children}
-                            letterVariants={letterVariants}
-                            scrollOnLastItem={scroll}
-                            dadElement={(children) => <motion.em
-                                style={style}
-                                variants={letterVariants}
-                            >
-                                {children}
-                            </motion.em>
-                            }
-                        />
-                    },
-                    hr: ({ style }) => {
-                        return <motion.hr
-                            style={style}
-                            variants={letterVariants}
-                        />
-                    },
-                    th: ({ children, style }) => {
-                        return <TypewriterInternal
-                            children={children}
-                            letterVariants={letterVariants}
-                            scrollOnLastItem={scroll}
-                            dadElement={(children) => <motion.th
-                                style={style}
-                                variants={letterVariants}
-                            >
-                                {children}
-                            </motion.th>
-                            }
-                        />
-                    },
-                    del: ({ children, style }) => {
-                        return <TypewriterInternal
-                            children={children}
-                            letterVariants={letterVariants}
-                            scrollOnLastItem={scroll}
-                            dadElement={(children) => <motion.del
-                                style={style}
-                                variants={letterVariants}
-                            >
-                                {children}
-                            </motion.del>
-                            }
-                        />
-                    },
-                    table: ({ children, style }) => {
-                        return <TypewriterInternal
-                            children={children}
-                            letterVariants={letterVariants}
-                            scrollOnLastItem={scroll}
-                            dadElement={(children) => <motion.table
-                                style={style}
-                                variants={letterVariants}
-                            >
-                                {children}
-                            </motion.table>
-                            }
-                        />
-                    },
-                    span: ({ children, style }) => {
-                        return <TypewriterInternal
-                            children={children}
-                            letterVariants={letterVariants}
-                            scrollOnLastItem={scroll}
-                            dadElement={(children) => <motion.span
-                                style={style}
-                                variants={letterVariants}
-                            >
-                                {children}
-                            </motion.span>
-                            }
-                        />
-                    },
-                    h1: ({ children, style }) => {
-                        return <TypewriterInternal
-                            children={children}
-                            letterVariants={letterVariants}
-                            scrollOnLastItem={scroll}
-                            dadElement={(children) => <motion.h1
-                                style={{
-                                    ...style,
-                                    margin: 0,
-                                }}
-                                variants={letterVariants}
-                            >
-                                {children}
-                            </motion.h1>
-                            }
-                        />
-                    },
-                    h2: ({ children, style }) => {
-                        return <TypewriterInternal
-                            children={children}
-                            letterVariants={letterVariants}
-                            scrollOnLastItem={scroll}
-                            dadElement={(children) => <motion.h2
-                                style={{
-                                    ...style,
-                                    margin: 0,
-                                }}
-                                variants={letterVariants}
-                            >
-                                {children}
-                            </motion.h2>
-                            }
-                        />
-                    },
-                    h3: ({ children, style }) => {
-                        return <TypewriterInternal
-                            children={children}
-                            letterVariants={letterVariants}
-                            scrollOnLastItem={scroll}
-                            dadElement={(children) => <motion.h3
-                                style={{
-                                    ...style,
-                                    margin: 0,
-                                }}
-                                variants={letterVariants}
-                            >
-                                {children}
-                            </motion.h3>
-                            }
-                        />
-                    },
-                    h4: ({ children, style }) => {
-                        return <TypewriterInternal
-                            children={children}
-                            letterVariants={letterVariants}
-                            scrollOnLastItem={scroll}
-                            dadElement={(children) => <motion.h4
-                                style={{
-                                    ...style,
-                                    margin: 0,
-                                }}
-                                variants={letterVariants}
-                            >
-                                {children}
-                            </motion.h4>
-                            }
-                        />
-                    },
-                }}
-            >
-                {text}
-            </Markdown>
-        </motion.div>
-    )
-};

package/template-react-vite-muijoy-electron/src/components/TypographyShadow.tsx

@@ -1,15 +0,0 @@
-import { Typography, TypographyProps, useTheme } from "@mui/joy";
-
-export default function TypographyShadow({ sx, shadowColor = useTheme().palette.neutral[900], ...rest }: TypographyProps & { shadowColor?: string }) {
-    return (
-        <Typography
-            sx={{
-                textShadow: `0 0 3px ${shadowColor}, 0 0 5px ${shadowColor}`,
-                pointerEvents: "auto",
-                color: useTheme().palette.neutral[300],
-                ...sx,
-            }}
-            {...rest}
-        />
-    );
-}