@bariskuran/base 0.0.0-stage → 0.0.2

package/src/libs/Typo/tools/useVars.js

@@ -0,0 +1,291 @@
+import { isValidElement, useMemo, useRef, useCallback, useLayoutEffect, useEffect } from "react";
+import { useExportData } from "helpers/useExportedData";
+import { colorGet } from "../../colorGet";
+import { cssNormalizeSize } from "../../cssNormalizeSize";
+import { baseStore } from "../../baseStore";
+import { getTruncatedHtml } from "./getTruncatedHtml";
+import { cssSpacingResolver } from "../../cssSpacingResolver";
+import { dedent } from "../../templateLiteralTo/dedent";
+import {
+    formatFnCallSnippetForViewer,
+    formatJsxPropsForViewer,
+} from "../../DesignSystem/CodeViewer/tools/codeFormatters.jsx";
+import { coerceToCodeText } from "../../DesignSystem/formatJsonForDisplay";
+import { useNestedBaseUiContext, NESTED_UI_TYPO_PHRASING_HOST } from "helpers/NestedBaseUi";
+import { getCssDeclarationValue, stripCssImports } from "../../@Base/styling/fontCss";
+
+const sysDefaults = {
+    as: "span",
+    weight: 400,
+    whiteSpace: "normal",
+    overflow: "visible",
+    letterSpacing: 0,
+    lineHeight: 1.7,
+};
+
+const baseSizeByTag = {
+    h1: "190%",
+    h2: "175%",
+    h3: "160%",
+    h4: "145%",
+    h5: "130%",
+    h6: "115%",
+    blockquote: "110%",
+};
+
+const getPercentNumber = (value) => {
+    if (typeof value === "number") return value;
+    if (typeof value !== "string") return null;
+
+    const trimmed = value.trim();
+    const match = /^(\d+(?:\.\d+)?)%?$/.exec(trimmed);
+    if (!match) return null;
+    return Number(match[1]);
+};
+
+const formatPercent = (value) => {
+    const rounded = Math.round(value * 10000) / 10000;
+    return `${rounded}%`;
+};
+
+const isScaleLikeSize = (value) => {
+    const pct = getPercentNumber(value);
+    if (pct == null) return false;
+
+    return (
+        (typeof value === "string" && value.trim().endsWith("%")) ||
+        (pct >= 50 && pct <= 300)
+    );
+};
+
+const resolveTypoSize = (size, baseSize) => {
+    if (size == null) return cssNormalizeSize(size);
+    if (!baseSize) return cssNormalizeSize(size);
+
+    const basePct = getPercentNumber(baseSize);
+    const sizePct = getPercentNumber(size);
+
+    if (basePct == null || sizePct == null) return cssNormalizeSize(size);
+
+    const isExplicitPercent = typeof size === "string" && size.trim().endsWith("%");
+    const isScaleLikeNumber = typeof size === "number" && sizePct >= 50 && sizePct <= 300;
+    const isScaleLikeNumericString =
+        typeof size === "string" && !size.trim().endsWith("%") && sizePct >= 50 && sizePct <= 300;
+
+    if (!isExplicitPercent && !isScaleLikeNumber && !isScaleLikeNumericString) {
+        return cssNormalizeSize(size);
+    }
+
+    if (isExplicitPercent && sizePct === basePct) return formatPercent(basePct);
+
+    return formatPercent((basePct * sizePct) / 100);
+};
+
+const resolveTypoBaseSize = ({ size, baseSize, as }) => {
+    if (baseSize) return baseSize;
+    if (!isScaleLikeSize(size)) return null;
+    return baseSizeByTag[as] || null;
+};
+
+const useVars = ({ children, content, contentGroup, ...p }) => {
+    const [theme, currentBreakpoint, fonts] = baseStore.useGlobal((s) => [
+        s.theme,
+        s._clientData.currentBreakpoint,
+        s._projectSettings?.styledSettings?.fonts,
+    ]);
+    const font = p.fontFamily ? stripCssImports(fonts?.[p.fontFamily]) : null;
+    const fontStyle = font
+        ? { fontFamily: getCssDeclarationValue(font, "font-family") }
+        : null;
+
+    const { truncatedHtml, set } = baseStore.useLocal({
+        truncatedHtml: null,
+    });
+
+    const ref = useRef(null);
+
+    const nestedUi = useNestedBaseUiContext();
+
+    const controlledProps = useMemo(() => {
+        const responsiveProps = p.responsive?.[currentBreakpoint] || {};
+        const mergedProps = { ...sysDefaults, ...p, ...responsiveProps };
+
+        const { maxWidth, size, _baseSize, color, highlight, width, full, ...restMerged } =
+            mergedProps || {};
+
+        const clr = colorGet(color || theme.foreground);
+        const highlightClr = colorGet(highlight || clr.opposite);
+        const typoBaseSize = resolveTypoBaseSize({
+            size,
+            baseSize: _baseSize,
+            as: restMerged.as,
+        });
+
+        const enableQuoteMarks = !!restMerged.enableQuoteMarks;
+
+        const resolvedWidth =
+            full === true && (width == null || width === undefined) ? "100%" : width;
+
+        return {
+            ...restMerged,
+            ellipsis: enableQuoteMarks ? false : restMerged.ellipsis,
+            clamp: enableQuoteMarks ? false : restMerged.clamp,
+            width: cssNormalizeSize(resolvedWidth),
+            maxWidth: cssNormalizeSize(maxWidth),
+            size: resolveTypoSize(size, typoBaseSize),
+            color: color ? clr.color : highlight ? highlightClr.opposite : undefined,
+            highlight: highlight ? colorGet(highlight || clr.opposite)?.color : undefined,
+        };
+    }, [p, currentBreakpoint, theme]);
+
+    const displayProps = useMemo(() => {
+        const underPhrasingHost = nestedUi?.[NESTED_UI_TYPO_PHRASING_HOST];
+        if (underPhrasingHost && controlledProps.as === "pre") {
+            return { ...controlledProps, as: "code" };
+        }
+        return controlledProps;
+    }, [controlledProps, nestedUi]);
+
+    const setTruncatedHtml = useCallback(
+        (nextHtml) => {
+            set((s) => {
+                s.truncatedHtml = nextHtml;
+            });
+        },
+        [set],
+    );
+
+    const rawFinalVisibleContent = children ?? content;
+    const finalVisibleContent = useMemo(() => {
+        const isCodeHost = displayProps.as === "pre" || displayProps.as === "code";
+        const shouldCoerce =
+            isCodeHost &&
+            rawFinalVisibleContent != null &&
+            typeof rawFinalVisibleContent !== "string" &&
+            !isValidElement(rawFinalVisibleContent) &&
+            !(Array.isArray(rawFinalVisibleContent) && rawFinalVisibleContent.some(isValidElement));
+
+        const workingContent = shouldCoerce
+            ? coerceToCodeText(rawFinalVisibleContent)
+            : rawFinalVisibleContent;
+
+        if (!controlledProps.codeFormat || typeof workingContent !== "string") {
+            return workingContent;
+        }
+
+        const base = dedent(workingContent);
+        const jsxDone =
+            controlledProps.codeFormatJsxProps === false ? base : formatJsxPropsForViewer(base);
+        if (controlledProps.codeFormatCalls === false) return jsxDone;
+        return formatFnCallSnippetForViewer(jsxDone);
+    }, [
+        rawFinalVisibleContent,
+        displayProps.as,
+        controlledProps.codeFormat,
+        controlledProps.codeFormatJsxProps,
+        controlledProps.codeFormatCalls,
+    ]);
+    const margin = cssSpacingResolver(p, "margin");
+    const padding = cssSpacingResolver(p, "padding");
+    const isEllipsisBaseFinal = controlledProps.ellipsis === "base";
+
+    const recalculateTruncation = useCallback(() => {
+        if (!isEllipsisBaseFinal || !ref.current) {
+            setTruncatedHtml(null);
+            return;
+        }
+
+        const result = getTruncatedHtml({
+            visibleRef: ref,
+            content: finalVisibleContent,
+            as: displayProps.as,
+            clamp: displayProps.clamp || 1,
+            suffix: "...",
+        });
+
+        setTruncatedHtml(result?.isTruncated ? result.html : null);
+    }, [
+        isEllipsisBaseFinal,
+        finalVisibleContent,
+        displayProps.as,
+        displayProps.clamp,
+        setTruncatedHtml,
+    ]);
+
+    useLayoutEffect(() => {
+        recalculateTruncation();
+    }, [recalculateTruncation]);
+
+    useEffect(() => {
+        if (!isEllipsisBaseFinal || !ref.current) return;
+
+        const el = ref.current;
+        const parent = el.parentElement;
+
+        let frameId = null;
+
+        const run = () => {
+            if (frameId) cancelAnimationFrame(frameId);
+            frameId = requestAnimationFrame(() => {
+                recalculateTruncation();
+            });
+        };
+
+        const observer = new ResizeObserver(run);
+
+        observer.observe(el);
+        if (parent) observer.observe(parent);
+
+        return () => {
+            observer.disconnect();
+            if (frameId) cancelAnimationFrame(frameId);
+        };
+    }, [isEllipsisBaseFinal, recalculateTruncation]);
+
+    const hasNoContent =
+        truncatedHtml == null &&
+        !finalVisibleContent &&
+        (!contentGroup || contentGroup.length === 0);
+
+    const shouldRenderChildren = !isEllipsisBaseFinal || truncatedHtml == null;
+    const shouldUseInnerHtml = isEllipsisBaseFinal && truncatedHtml != null;
+    const isOverlayCopyHost = displayProps.as === "pre" || displayProps.as === "code";
+    const hasCopy = !!p.copy;
+    const shouldUseOverlayCopy =
+        hasCopy &&
+        (controlledProps.ellipsis ||
+            controlledProps.clamp != null ||
+            shouldUseInnerHtml ||
+            isOverlayCopyHost);
+    const canUseInlineCopy = hasCopy && !shouldUseOverlayCopy && !shouldUseInnerHtml;
+    const shouldUseStackedOverlayCopy =
+        shouldUseOverlayCopy &&
+        isOverlayCopyHost &&
+        controlledProps.clamp == null &&
+        !controlledProps.ellipsis &&
+        !shouldUseInnerHtml;
+
+    return useExportData(
+        {
+            ...displayProps,
+            copy: hasCopy,
+            margin,
+            padding,
+            shouldUseOverlayCopy,
+            shouldUseStackedOverlayCopy,
+            shouldUseInnerHtml,
+            isEllipsisBase: isEllipsisBaseFinal,
+            canUseInlineCopy,
+            shouldRenderChildren,
+            font,
+            fontStyle,
+            ref,
+            truncatedHtml,
+            finalVisibleContent,
+            hasNoContent,
+        },
+        {},
+    );
+};
+
+export default useVars;

package/src/libs/TypoAnimated/_dS.jsx

@@ -0,0 +1,243 @@
+import { useState } from "react";
+import Ds from "../DesignSystem";
+import { SYS } from "../../constants/SYS";
+import { TypoAnimated } from ".";
+import { animationIds } from "./tools/animationRegistry";
+import { autoDuration } from "./tools/autoDuration";
+import { Typo } from "../Typo";
+import { Flex } from "../Flex";
+import { Button } from "../Button";
+import { Dropdown } from "../Dropdown";
+
+const shortText = "Lorem ipsum";
+const longText =
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud.";
+
+const multilineText = `Design system
+Typo animated
+scatter lines`;
+
+const stackedSample = `A Swiss Legend
+—old as time—
+a fire breathing serpent
+with the head of a cat`;
+
+const durationOptions = [
+    { label: "auto", value: "auto" },
+    { label: "600", value: 600 },
+    { label: "1200", value: 1200 },
+    { label: "2400", value: 2400 },
+    { label: "4000", value: 4000 },
+    { label: "6000", value: 6000 },
+    { label: "8000", value: 8000 },
+];
+
+const loopOptions = [
+    { label: "true", value: true },
+    { label: "false", value: false },
+];
+
+const letterDemoColors = { bgColor: "foreground", color: "background" };
+
+const Demo = ({
+    variant,
+    durationMs,
+    loop,
+    replayKey,
+    sample,
+    typoProps = {},
+    boxed = false,
+}) => {
+    const anim = (
+        <TypoAnimated
+            key={`${variant}-${durationMs ?? "auto"}-${loop}-${replayKey}`}
+            variant={variant}
+            loop={loop}
+            {...(durationMs != null ? { duration: durationMs } : {})}
+            content={sample}
+            useTimerProps={{ timerName: `typoAnim-${variant}-${sample}` }}
+            {...typoProps}
+            {...(boxed ? { color: letterDemoColors.color } : {})}
+        />
+    );
+
+    if (!boxed) return anim;
+
+    return (
+        <Flex padding={12} bgColor={letterDemoColors.bgColor}>
+            {anim}
+        </Flex>
+    );
+};
+
+const X = () => {
+    const [durationMs, setDurationMs] = useState("auto");
+    const [loop, setLoop] = useState(true);
+    const [replayKey, setReplayKey] = useState(0);
+
+    const bumpReplay = () => setReplayKey((k) => k + 1);
+
+    const resolvedDurationProp =
+        durationMs === "auto" ? undefined : durationMs;
+
+    const demoProps = {
+        durationMs: resolvedDurationProp,
+        loop,
+        replayKey,
+    };
+
+    return (
+        <Ds.page
+            title="<TypoAnimated>"
+            releasedOn="1.0.0"
+            description={{ tr: "Typo ve useTimer üzerine kurulu metin animasyonlarıdır. Tipografi propları, timer adlandırması ve yaşam döngüsü hook'ları için Typo ve useTimer dokümantasyonuna bakın. autoDuration (uzunluk ve varyant tabanlı) kullanmak için duration'ı vermeyin. Animasyon modülü için varyant seçin.", en: "Text animations built on Typo and useTimer. See the Typo and useTimer docs for typography props, timer naming, and lifecycle hooks. Omit duration to use autoDuration (length- and variant-based). Pick a variant for the animation module." }}
+        >
+            <Ds.block
+                title={{ tr: "Kontroller", en: "Controls" }}
+                example={
+                    <Flex gap={20} wrap alignItems="flex-end">
+                        <Flex.column gap={6} minWidth={160}>
+                            <Typo.span content="durationMs" />
+                            <Dropdown
+                                options={durationOptions}
+                                value={durationMs}
+                                sortBy="none"
+                                onChange={(v) => {
+                                    setDurationMs(v);
+                                    bumpReplay();
+                                }}
+                            />
+                        </Flex.column>
+                        <Flex.column gap={6} minWidth={120}>
+                            <Typo.span content="loop" />
+                            <Dropdown
+                                options={loopOptions}
+                                value={loop}
+                                sortBy="none"
+                                onChange={(v) => {
+                                    setLoop(v);
+                                    bumpReplay();
+                                }}
+                            />
+                        </Flex.column>
+                        <Button.plain label="Replay all" onClick={bumpReplay} />
+                    </Flex>
+                }
+            />
+
+            <Ds.block
+                title="typewriter"
+                description={`Short text reveals letter by letter (~55ms/char auto). Long text uses chunked steps. Auto for "${shortText}": ${autoDuration("typewriter", shortText)}ms.`}
+                code={`import { TypoAnimated } from "${SYS.basePath}";
+
+                       <TypoAnimated variant="typewriter" content="Lorem ipsum" />
+                       <TypoAnimated variant="typewriter" duration={4000} content={longText} />`}
+                example={
+                    <Flex.column gap={24}>
+                        <Demo variant="typewriter" sample={shortText} boxed {...demoProps} />
+                        <Demo variant="typewriter" sample={longText} boxed {...demoProps} />
+                    </Flex.column>
+                }
+            />
+
+            <Ds.block
+                title="scrambleReveal"
+                description='Same length throughout: random letters first, then they resolve left to right.'
+                code={`import { TypoAnimated } from "${SYS.basePath}";
+
+                       <TypoAnimated variant="scrambleReveal" content="Lorem ipsum" />`}
+                example={
+                    <Demo variant="scrambleReveal" sample={shortText} boxed {...demoProps} />
+                }
+            />
+
+            <Ds.block
+                title="animatedWriter"
+                description={{ tr: "typewriter gibidir, ancak her yeni karakter yukarıdan yaklaşık 4px düşer ve fade in olur.", en: "Like typewriter, but each new character drops ~4px from above and fades in." }}
+                code={`import { TypoAnimated } from "${SYS.basePath}";
+
+                       <TypoAnimated variant="animatedWriter" content="Lorem ipsum" />`}
+                example={
+                    <Demo variant="animatedWriter" sample={shortText} boxed {...demoProps} />
+                }
+            />
+
+            <Ds.block
+                title="scatterLines"
+                description={{ tr: "Çok satırlı içerik; kelimeler 80–120% arası font-size ile opacity üzerinden görünür. Tam yerleşim baştan ayrılır.", en: "Multi-line content; words fade in (opacity) with font-size between 80–120%. Full layout is reserved from the start." }}
+                code={`import { TypoAnimated } from "${SYS.basePath}";
+
+                       <TypoAnimated
+                        variant="scatterLines"
+                        content={\`line one\\nline two\`}
+                        color="foreground"
+                       />`}
+                example={
+                    <Flex.column gap={8} padding={12} bgColor="greys.shade30">
+                        <Demo variant="scatterLines" sample={multilineText} {...demoProps} />
+                    </Flex.column>
+                }
+            />
+
+            <Ds.block
+                title="stackedWords"
+                description={{ tr: "Poster tarzı üst üste satırlar: tüm kelimeler duration/2 boyunca eşzamanlı pulse olur, duration/2 durur, ardından yeni rastgele font-size/opacity hedefleriyle yeniden başlar. loop varsayılan olarak true'dur.", en: "Poster-style stacked lines: all words pulse in sync for duration/2, pause for duration/2, then restart with new random font-size/opacity targets. loop defaults to true." }}
+                code={`import { TypoAnimated } from "${SYS.basePath}";
+
+                       <TypoAnimated
+                        variant="stackedWords"
+                        loop
+                        content={\`A Swiss Legend\\n—old as time—\`}
+                        size={22}
+                        weight={700}
+                       />`}
+                example={
+                    <Flex.column gap={8} padding={12} bgColor="greys.shade30">
+                        <Demo
+                            variant="stackedWords"
+                            sample={stackedSample}
+                            typoProps={{ size: 22, weight: 700 }}
+                            {...demoProps}
+                        />
+                    </Flex.column>
+                }
+            />
+
+            <Ds.api
+                args="<TypoAnimated />"
+                props={{
+                    variant: {
+                        description: `Animation id: ${animationIds.map((id) => `"${id}"`).join(" | ")}.`,
+                        type: "string",
+                        defaultValue: '"typewriter"',
+                    },
+                    duration: {
+                        description:
+                            "Total animation time in ms. Omit for autoDuration (variant + text length). Letter variants ~55–70ms/step; word variants ~200ms/word.",
+                        type: "number",
+                        defaultValue: "autoDuration",
+                    },
+                    loop: {
+                        description:
+                            "When true, the animation restarts from the beginning after it finishes. Not useTimer.loop — the timer always ticks once per step.",
+                        type: "boolean",
+                        defaultValue: "true",
+                    },
+                    useTimerProps: {
+                        description:
+                            "Forwarded to useTimer (refreshTime per step is managed by the animation). See useTimer for timerName, startOnLoad, and callbacks. Do not pass loop here.",
+                        type: "object",
+                        defaultValue: "{}",
+                    },
+                    "...rest": {
+                        description:
+                            "All remaining props are forwarded to Typo unchanged (size, weight, color, lineHeight, clamp, copy, etc.).",
+                        type: "Typo props",
+                    },
+                }}
+            />
+        </Ds.page>
+    );
+};
+
+export default X;

package/src/libs/TypoAnimated/animations/animatedWriter.jsx

@@ -0,0 +1,94 @@
+import styled, { css, keyframes } from "styled-components";
+import { Typo } from "../../Typo";
+import { AnimationSlot } from "../tools/AnimationSlot";
+import {
+    buildRevealPlan,
+    getRevealCorrectCount,
+    resolveAnimatedWriterWhiteSpace,
+} from "../tools/animationUtils";
+
+const dropIn = keyframes`
+    from {
+        transform: translateY(-4px);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+`;
+
+const Char = styled.span`
+    display: inline-block;
+    vertical-align: baseline;
+    ${({ $animate, $ms, $hidden }) =>
+        $hidden
+            ? css`
+                  opacity: 0;
+              `
+            : $animate
+              ? css`
+                    animation: ${dropIn} ${$ms}ms ease forwards;
+                `
+              : css`
+                    opacity: 1;
+                `}
+`;
+
+const AnimatedWriterView = ({ text, step, plan, color, typoProps = {} }) => {
+    const correct = getRevealCorrectCount(step, plan);
+    const prevCorrect = step > 0 ? getRevealCorrectCount(step - 1, plan) : 0;
+    const stepMs = Math.max(120, Math.min(400, plan.refreshTime * 1.4));
+    const whiteSpace = resolveAnimatedWriterWhiteSpace(text);
+
+    return (
+        <Typo.span color={color} whiteSpace={whiteSpace} {...typoProps}>
+            {text.split("").map((char, index) => {
+                const hidden = index >= correct;
+                const animate = !hidden && index >= prevCorrect;
+                return (
+                    <Char
+                        key={`${index}-${step}`}
+                        $hidden={hidden}
+                        $animate={animate}
+                        $ms={stepMs}
+                    >
+                        {char}
+                    </Char>
+                );
+            })}
+        </Typo.span>
+    );
+};
+
+export default {
+    id: "animatedWriter",
+    createPlan: ({ text, duration }) => buildRevealPlan(text, duration),
+    getFrame: ({ text, step, plan, color, typoProps }) => {
+        const whiteSpace = resolveAnimatedWriterWhiteSpace(text);
+
+        return {
+            mode: "custom",
+            node: (
+                <AnimationSlot
+                    ghost={
+                        <Typo.span
+                            color={color}
+                            whiteSpace={whiteSpace}
+                            {...typoProps}
+                            content={text}
+                        />
+                    }
+                >
+                    <AnimatedWriterView
+                        text={text}
+                        step={step}
+                        plan={plan}
+                        color={color}
+                        typoProps={typoProps}
+                    />
+                </AnimationSlot>
+            ),
+        };
+    },
+};