Restructure

2026-09-22 19:15:08 +03:00 · 2025-10-09 22:35:12 +03:00
parent b638326653
commit 32e08cdfdb
43 changed files with 205 additions and 268 deletions
@@ -0,0 +1,45 @@
+import type { Dialog as MduiDialog } from "mdui/components/dialog";
+import { useEffect, type Ref } from "react"
+import { createPortal } from "react-dom";
+import { id } from "../../utils/utils";
+import useCombinedRefs from "../hooks/useCombinedRefs";
+
+export interface BaseDialogProps {
+    onOpenChange: (value: boolean) => void;
+    ref?: Ref<MduiDialog & HTMLElement>
+}
+
+export type FullDialogProps = React.ComponentPropsWithoutRef<"mdui-dialog"> & BaseDialogProps;
+
+export function MaterialDialog(props: FullDialogProps) {
+    const [setDialogRef, dialogRef] = useCombinedRefs(props.ref);
+
+    useEffect(() => {
+        const dialog = dialogRef.current;
+        if (!dialog) return;
+
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === "attributes" && mutation.attributeName === "open") {
+                    const isOpen = dialog.hasAttribute("open");
+                    if (isOpen !== props.open) {
+                        props.onOpenChange(isOpen);
+                    }
+                }
+            });
+        });
+
+        // Start observing the dialog element for attribute changes
+        observer.observe(dialog, {
+            attributes: true,
+            attributeFilter: ["open"]
+        });
+
+        // Cleanup observer
+        return () => {
+            observer.disconnect();
+        };
+    }, [dialogRef.current, props.open, props.onOpenChange]);
+
+    return createPortal(<mdui-dialog {...props} ref={setDialogRef} />, id("root"));
+}
@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+
+export interface QuoteProps {
+    className?: string;
+    children?: ReactNode;
+    background?: "surfaceContainer" | "primaryContainer"
+}
+
+export default function Quote({ className, children, background = "primaryContainer" }: QuoteProps) {
+    return (
+        <div className={`quote bg-${background} ${className}`}>
+            <div className="quote-inner">
+                {children}
+            </div>
+        </div>
+    )
+}
@@ -0,0 +1,211 @@
+import { useEffect, useRef, useCallback, useLayoutEffect } from "react";
+
+interface RichTextAreaProps {
+    text: string;
+    onTextChange: (value: string) => void;
+    onEnter?: "newLine" | null | ((e: React.KeyboardEvent<HTMLTextAreaElement>) => void);
+    onCtrlEnter?: ((e: React.KeyboardEvent<HTMLTextAreaElement>) => void) | null;
+    placeholder?: string;
+    id?: string;
+    className?: string;
+    rows?: number;
+    autoComplete?: string;
+}
+
+export function RichTextArea({
+    text,
+    onTextChange,
+    onEnter = "newLine",
+    onCtrlEnter = null,
+    placeholder,
+    className,
+    rows = 1,
+    autoComplete = "off",
+}: RichTextAreaProps) {
+    const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+    const hiddenTextareaRef = useRef<HTMLTextAreaElement | null>(null);
+    const heightRef = useRef<number | null>(null);
+
+    function getStyleValue(computedStyle: CSSStyleDeclaration, prop: keyof CSSStyleDeclaration): number {
+        const raw = computedStyle[prop] as string | number | undefined;
+        if (raw == null) return 0;
+        const str = String(raw);
+        return str.endsWith("px") ? parseFloat(str) : parseFloat(str) || 0;
+    }
+
+    const calculateTextareaStyles = useCallback(() => {
+        const textarea = textareaRef.current;
+        const hidden = hiddenTextareaRef.current;
+        if (!textarea || !hidden) return undefined;
+
+        const computedStyle = window.getComputedStyle(textarea);
+        if (computedStyle.width === "0px") {
+            return { outerHeightStyle: 0, overflowing: false };
+        }
+
+        // Ensure hidden textarea copies width but not percentage-based anomalies from parents
+        // Normalize hidden textarea to avoid inherited constraints and copy critical metrics
+        hidden.style.position = "fixed";
+        hidden.style.top = "-9999px";
+        hidden.style.left = "-9999px";
+        hidden.style.visibility = "hidden";
+        hidden.style.height = "auto";
+        hidden.style.minHeight = "0";
+        hidden.style.maxHeight = "none";
+        hidden.style.overflow = "hidden";
+        hidden.style.boxSizing = computedStyle.boxSizing;
+        // Avoid counting vertical padding twice: keep 0 for measurement
+        hidden.style.paddingTop = "0";
+        hidden.style.paddingBottom = "0";
+        hidden.style.paddingLeft = computedStyle.paddingLeft;
+        hidden.style.paddingRight = computedStyle.paddingRight;
+        // Do not include borders in the inner scrollHeight measurement
+        hidden.style.borderTopWidth = "0";
+        hidden.style.borderBottomWidth = "0";
+        hidden.style.borderLeftWidth = computedStyle.borderLeftWidth;
+        hidden.style.borderRightWidth = computedStyle.borderRightWidth;
+        hidden.style.fontFamily = computedStyle.fontFamily;
+        hidden.style.fontSize = computedStyle.fontSize;
+        hidden.style.fontWeight = computedStyle.fontWeight;
+        hidden.style.lineHeight = computedStyle.lineHeight;
+        hidden.style.letterSpacing = computedStyle.letterSpacing;
+        hidden.style.whiteSpace = computedStyle.whiteSpace;
+        hidden.style.wordSpacing = computedStyle.wordSpacing;
+        hidden.style.textIndent = computedStyle.textIndent;
+        hidden.style.textTransform = computedStyle.textTransform;
+        hidden.style.textDecoration = computedStyle.textDecoration;
+        hidden.style.width = computedStyle.width;
+        hidden.style.maxWidth = computedStyle.width;
+        hidden.value = textarea.value || placeholder || "x";
+        if (hidden.value.slice(-1) === "\n") {
+            hidden.value += " ";
+        }
+
+        const boxSizing = computedStyle.boxSizing;
+        const padding = getStyleValue(computedStyle, "paddingBottom") + getStyleValue(computedStyle, "paddingTop");
+        const border = getStyleValue(computedStyle, "borderBottomWidth") + getStyleValue(computedStyle, "borderTopWidth");
+
+        const innerHeight = hidden.scrollHeight;
+
+        hidden.value = "x";
+        const singleRowHeight = hidden.scrollHeight;
+
+        let outerHeight = innerHeight;
+        const minRows = Number(rows || 1);
+        if (minRows) {
+            outerHeight = Math.max(minRows * singleRowHeight, outerHeight);
+        }
+        outerHeight = Math.max(outerHeight, singleRowHeight);
+
+        // Use ceil to avoid sub-pixel gaps and subtract a tiny epsilon to reduce visual gap
+        let outerHeightStyle = outerHeight + (boxSizing === "border-box" ? padding + border : 0);
+        outerHeightStyle = Math.round(outerHeightStyle); // snap to pixel to avoid half-line gaps
+        const overflowing = Math.abs(outerHeight - innerHeight) <= 1;
+        return { outerHeightStyle, overflowing };
+    }, [rows, placeholder]);
+
+    const syncHeight = useCallback(() => {
+        const textarea = textareaRef.current;
+        const styles = calculateTextareaStyles();
+        if (!textarea || !styles) return;
+        const { outerHeightStyle, overflowing } = styles;
+        if (heightRef.current !== outerHeightStyle) {
+            heightRef.current = outerHeightStyle;
+            textarea.style.height = `${outerHeightStyle}px`;
+        }
+        textarea.style.overflowY = overflowing ? "hidden" : "";
+    }, [calculateTextareaStyles]);
+
+    useLayoutEffect(() => {
+        syncHeight();
+    }, [syncHeight, text]);
+
+    useEffect(() => {
+        const textarea = textareaRef.current;
+        if (!textarea) return;
+        const onResize = () => syncHeight();
+        window.addEventListener("resize", onResize);
+        let ro: ResizeObserver | null = null;
+        if (typeof ResizeObserver !== "undefined") {
+            ro = new ResizeObserver(() => {
+                ro!.unobserve(textarea);
+                syncHeight();
+                requestAnimationFrame(() => ro && textarea && ro.observe(textarea));
+            });
+            ro.observe(textarea);
+        }
+        return () => {
+            window.removeEventListener("resize", onResize);
+            if (ro) ro.disconnect();
+        };
+    }, [syncHeight]);
+
+    function handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
+        // Keep height responsive during rapid uncontrolled input bursts
+        syncHeight();
+        onTextChange(e.target.value);
+    }
+
+    function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
+        const isCtrlEnter = e.key === "Enter" && (e.ctrlKey || e.metaKey);
+        const isPlainEnter = e.key === "Enter" && !e.ctrlKey && !e.metaKey && !e.shiftKey && !e.altKey;
+
+        if (isCtrlEnter) {
+            e.preventDefault();
+            if (typeof onCtrlEnter === "function") {
+                onCtrlEnter(e);
+            }
+            return;
+        }
+
+        if (isPlainEnter) {
+            if (onEnter === "newLine") {
+                // allow default
+                return;
+            }
+            if (onEnter === null) {
+                e.preventDefault();
+                return;
+            }
+            if (typeof onEnter === "function") {
+                e.preventDefault();
+                onEnter(e);
+                return;
+            }
+        }
+    }
+
+    return (
+        <>
+            <textarea
+                className={`rich-text-area ${className}`}
+                ref={textareaRef}
+                value={text}
+                placeholder={placeholder}
+                rows={rows}
+                autoComplete={autoComplete}
+                onChange={handleChange}
+                onKeyDown={handleKeyDown}
+            />
+            <textarea
+                aria-hidden
+                readOnly
+                tabIndex={-1}
+                ref={hiddenTextareaRef}
+                style={{
+                    position: "fixed",
+                    top: "-9999px",
+                    left: "-9999px",
+                    visibility: "hidden",
+                    paddingTop: 0,
+                    paddingBottom: 0,
+                    height: "auto",
+                    minHeight: 0,
+                    maxHeight: "none",
+                    overflow: "hidden",
+                }}
+                rows={1}
+            />
+        </>
+    );
+}
@@ -0,0 +1,9 @@
+import type { TextField } from "mdui/components/text-field";
+
+type TextFieldProps = React.ComponentPropsWithoutRef<"mdui-text-field">
+
+export function MaterialTextField(props: TextFieldProps & { ref?: React.Ref<TextField> }) {
+    return <mdui-text-field 
+        autocomplete="off" 
+        {...(props as TextFieldProps & { ref?: React.Ref<HTMLElement> })} />
+}
@@ -0,0 +1,71 @@
+import { useEffect, useState, useRef } from "react";
+import type { AnimatedPropertyProps } from "./types";
+
+export default function AnimatedHeight({ visible, duration = 0.25, onFinish, children, ...props }: AnimatedPropertyProps) {
+    const [height, setHeight] = useState("0px");
+    const [shouldRender, setShouldRender] = useState(!!visible);
+    const [isAnimating, setIsAnimating] = useState(false);
+    const measureRef = useRef<HTMLDivElement>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (visible) {
+            setShouldRender(true);
+            setIsAnimating(true);
+            // Wait for content to render, then measure
+            setTimeout(() => {
+                if (measureRef.current) {
+                    const contentHeight = measureRef.current.scrollHeight;
+                    setHeight(`${contentHeight}px`);
+                }
+                // Animation complete
+                setTimeout(() => {
+                    setHeight("auto");
+                    setIsAnimating(false);
+                }, duration * 1000);
+            }, 0);
+        } else if (shouldRender) {
+            setIsAnimating(true);
+            if (measureRef.current) {
+                const contentHeight = measureRef.current.scrollHeight;
+                setHeight(`${contentHeight}px`);
+                // Force a reflow before animating to 0
+                requestAnimationFrame(() => {
+                    // Read layout to ensure the previous height assignment is flushed
+                    if (containerRef.current) {
+                        containerRef.current.offsetHeight;
+                    }
+                    // Use a second frame to ensure the measured pixel height is applied before collapsing
+                    requestAnimationFrame(() => {
+                        setHeight("0px");
+                    });
+                });
+            }
+            // Hide content after animation completes
+            setTimeout(() => {
+                setShouldRender(false);
+                setIsAnimating(false);
+                if (onFinish) {
+                    onFinish();
+                }
+            }, duration * 1000);
+        }
+    }, [visible, shouldRender]);
+
+    return (visible || shouldRender || isAnimating) && (
+        <div
+            {...props}
+            ref={containerRef}
+            style={{
+                height,
+                transition: `height ${duration}s ease`,
+                overflow: "hidden",
+                ...props.style
+            }}
+        >
+            <div ref={measureRef} style={{ height: "auto" }}>
+                {shouldRender && children}
+            </div>
+        </div>
+    );
+}
@@ -0,0 +1,41 @@
+import { useEffect, useState } from "react";
+import type { AnimatedPropertyProps } from "./types";
+
+export default function AnimatedOpacity({ visible, duration = 0.5, onFinish, children, ...props }: AnimatedPropertyProps) {
+    const [opacity, setOpacity] = useState(visible ? 1 : 0);
+    const [shouldRender, setShouldRender] = useState(visible);
+
+    useEffect(() => {
+        if (visible) {
+            setShouldRender(true);
+            setOpacity(0);
+
+            // Wait for content to render, then animate in
+            const id = setTimeout(() => {
+                setOpacity(1);
+            }, 10);
+            return () => clearTimeout(id);
+        } else {
+            setOpacity(0);
+
+            const id = setTimeout(() => {
+                setShouldRender(false);
+                if (onFinish) {
+                    onFinish();
+                }
+            }, duration * 1000);
+            return () => clearTimeout(id);
+        }
+    }, [visible, duration, onFinish]);
+
+    return shouldRender && (
+        <div
+            {...props}
+            style={{
+                opacity,
+                transition: `opacity ${duration}s ease`,
+                ...props.style
+            }}
+        >{children}</div>
+    );
+}
@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+
+export interface BaseAnimatedPropertyProps {
+    visible: any;
+    duration?: number;
+    onFinish?: () => void
+    children?: ReactNode;
+}
+
+export type AnimatedPropertyProps = BaseAnimatedPropertyProps & React.ComponentPropsWithRef<"div">
@@ -0,0 +1,34 @@
+import { useRef, useCallback, type RefCallback, type Ref } from 'react';
+
+// Определяем тип для ref, который может быть либо функцией, либо объектом
+type PossibleRef<T> = Ref<T> | undefined;
+
+export default function useCombinedRefs<T>(...refs: PossibleRef<T>[]): [RefCallback<T>, React.RefObject<T | null>] {
+    const targetRef = useRef<T | null>(null);
+
+    const setRefs = useCallback((node: T | null) => {
+        // Обновляем внутренний ref
+        targetRef.current = node;
+
+        // Обновляем все переданные refs
+        refs.forEach((ref) => {
+            if (!ref) return;
+
+            if (typeof ref === 'function') {
+                // Если ref - это функция, вызываем её
+                ref(node);
+            } else {
+                // Если ref - это объект, обновляем его свойство .current
+                // Используем проверку, чтобы убедиться, что это действительно MutableRefObject
+                // (хотя в реальном коде это почти всегда так)
+                ref.current = node;
+            }
+        });
+        },
+        // Убедитесь, что массив зависимостей всегда актуален
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [...refs]
+    );
+
+    return [setRefs, targetRef];
+}
@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+
+export interface WindowSize {
+    width: number;
+    height: number;
+}
+
+export default function useWindowSize(): WindowSize {
+    const [width, setWidth] = useState(innerWidth);
+    const [height, setHeight] = useState(innerHeight);
+
+    useEffect(() => {
+        function listener() {
+            setWidth(innerWidth);
+            setHeight(innerHeight);
+        }
+
+        addEventListener("resize", listener);
+
+        return () => {
+            removeEventListener("resize", listener);
+        }
+    });
+
+    return {
+        width: width,
+        height: height
+    }
+}