@bariskuran/base 0.0.0-stage → 0.0.1

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

@@ -0,0 +1,373 @@
+import styled, { css } from "styled-components";
+
+const sharedStyles = ({
+    theme,
+    as,
+    $maxWidth,
+    $disableMaxWidthLock,
+    $width,
+    $size,
+    $weight,
+    $color,
+    $highlight,
+    $align,
+    $selfAlign,
+    $ellipsis,
+    $clamp,
+    $wrap,
+    $whiteSpace,
+    $overflow,
+    $unselectable,
+    $italic,
+    $bold,
+    $underline,
+    $strikethrough,
+    $uppercase,
+    $lowercase,
+    $capitalize,
+    $disabled,
+    $isManuallyHover,
+    $lineHeight,
+    $letterSpacing,
+    $margin,
+    $padding,
+    $enableQuoteMarks,
+    $fitContent,
+    $balance,
+    $inlineCopy,
+    $overlayCopyLayout,
+    $stackedOverlayCopy,
+    $font,
+}) => {
+    return css`
+        box-sizing: border-box;
+        position: relative;
+        ${$font}
+
+        ${$overlayCopyLayout &&
+        !$stackedOverlayCopy &&
+        css`
+            margin: 0;
+            width: 100%;
+            min-width: 0;
+            padding-right: 34rem;
+            box-sizing: border-box;
+        `}
+
+        ${$overlayCopyLayout &&
+        $stackedOverlayCopy &&
+        css`
+            margin: 0;
+            width: max-content;
+            max-width: 100%;
+            min-width: 0;
+            box-sizing: border-box;
+        `}
+
+        ${as === "pre" &&
+        css`
+            margin: 0;
+            ${$stackedOverlayCopy ? "" : "display: block;"}
+        `}
+        ${$maxWidth != null
+            ? `max-width: ${$maxWidth};`
+            : !as?.includes("h") && !$disableMaxWidthLock
+              ? "max-width: 600px;"
+              : as?.includes("h") && !$disableMaxWidthLock
+                ? "max-width: 800px;"
+                : ""}
+
+        ${theme.responsive.phone(css`
+            max-width: 260px;
+        `)}
+
+        ${$width != null ? `width: ${$width};` : ""}
+    ${$size != null ? `font-size: ${$size};` : ""}
+    ${$weight != null ? `font-weight: ${$weight};` : ""}
+    ${$color != null ? `color: ${$color};` : ""}
+    ${$highlight != null ? `background-color: ${$highlight};` : ""}
+    ${$align != null ? `text-align: ${$align};` : ""}
+    ${$wrap != null ? `white-space: ${$wrap};` : ""}
+    ${$whiteSpace != null ? `white-space: ${$whiteSpace};` : ""}
+    ${$overflow != null ? `overflow: ${$overflow};` : ""}
+    ${$italic ? `font-style: italic;` : ""}
+    ${$unselectable ? "user-select: none !important;" : ""}
+    ${$bold ? `font-weight: bold;` : ""}
+    ${$disabled ? `opacity: 0.5;` : ""}
+    ${$underline ? `text-decoration: underline;` : ""}
+    ${$strikethrough ? `text-decoration: line-through;` : ""}
+    ${$lineHeight ? `line-height: ${$lineHeight};` : ""}
+    ${$letterSpacing ? `letter-spacing: ${$letterSpacing};` : ""}
+    ${$margin != null ? `margin: ${$margin};` : ""}
+    ${$padding != null ? `padding: ${$padding};` : ""}
+    ${($uppercase || $lowercase || $capitalize) &&
+        css`
+            text-transform: ${$uppercase ? "uppercase" : $lowercase ? "lowercase" : "capitalize"};
+        `}
+
+    ${$inlineCopy &&
+        css`
+            display: grid;
+            grid-template-columns: 1fr auto;
+            align-items: stretch;
+            column-gap: 6rem;
+            width: 100%;
+            max-width: 100%;
+        `}
+
+    ${$fitContent &&
+        css`
+            width: fit-content;
+        `}
+
+    ${$balance &&
+        css`
+            text-wrap: balance;
+        `}
+
+    ${$selfAlign === "left" &&
+        css`
+            width: fit-content;
+            margin-left: 0;
+            margin-right: auto;
+            justify-self: start;
+            align-self: start;
+            text-align: left;
+        `}
+
+    ${$selfAlign === "center" &&
+        css`
+            width: fit-content;
+            margin-left: auto;
+            margin-right: auto;
+            justify-self: center;
+            align-self: center;
+            text-align: center;
+        `}
+
+    ${$selfAlign === "right" &&
+        css`
+            width: fit-content;
+            margin-left: auto;
+            margin-right: 0;
+            justify-self: end;
+            align-self: end;
+            text-align: right;
+        `}
+
+    ${$clamp != null &&
+        $ellipsis !== "base" &&
+        css`
+            overflow: hidden;
+            text-overflow: ellipsis;
+            width: ${$width ?? "100%"};
+            min-width: 0;
+            display: -webkit-box;
+            -webkit-line-clamp: ${$clamp};
+            -webkit-box-orient: vertical;
+        `}
+
+    ${$ellipsis &&
+        $clamp == null &&
+        $ellipsis !== "base" &&
+        css`
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            display: block;
+            width: ${$width ?? "100%"};
+            min-width: 0;
+        `}
+
+    ${$ellipsis === "base" &&
+        css`
+            overflow: hidden;
+            display: block;
+            width: ${$width ? $width : "100%"};
+        `}
+
+    ${$isManuallyHover &&
+        css`
+            &::after {
+                content: "";
+                position: absolute;
+                inset: 0;
+                background: rgba(0, 0, 0, 0.04);
+                pointer-events: none;
+            }
+        `}
+
+         ${$enableQuoteMarks &&
+        css`
+            &::before,
+            &::after {
+                font-family: "Times New Roman", serif;
+                /* Keep decorative marks independent from Typo.quote's content size. */
+                font-size: 77rem;
+                line-height: 0;
+                font-weight: 100;
+                opacity: 0.3;
+                line-height: 0;
+            }
+
+            &::before {
+                content: '"';
+                margin-right: 0.05em;
+                vertical-align: -30rem;
+            }
+
+            &::after {
+                content: '"';
+                margin-left: 0.05em;
+                display: inline-block;
+                transform: rotate(180deg);
+                transform-origin: center;
+                vertical-align: -10rem;
+            }
+        `}
+    `;
+};
+
+const OVERLAY_COPY_HOSTS = new Set(["pre", "code"]);
+
+const wrapperWidth = ({
+    $width,
+    $maxWidth,
+    $fitContent,
+    $disableMaxWidthLock,
+    $overlayCopy,
+    $stackedOverlayCopy,
+    $as,
+}) => {
+    if (!$overlayCopy) return "auto";
+    if ($stackedOverlayCopy) return "fit-content";
+    if ($width != null) return $width;
+    if ($fitContent) return "fit-content";
+    if ($maxWidth != null) return $maxWidth;
+    if (OVERLAY_COPY_HOSTS.has($as)) {
+        if ($disableMaxWidthLock) return "100%";
+        return "fit-content";
+    }
+    if (!$disableMaxWidthLock) return "min(100%, 600px)";
+    return "fit-content";
+};
+
+const S = {
+    wrapper: styled.div`
+        ${({
+            $overlayCopy,
+            $stackedOverlayCopy,
+            $maxWidth,
+            $width,
+            $fitContent,
+            $disableMaxWidthLock,
+            $as,
+        }) => css`
+            display: ${$overlayCopy
+                ? $stackedOverlayCopy
+                    ? "inline-grid"
+                    : "inline-flex"
+                : "inline-block"};
+            position: relative;
+
+            ${$stackedOverlayCopy &&
+            css`
+                grid-template-columns: max-content auto;
+                align-items: start;
+                column-gap: 8rem;
+                width: fit-content;
+                max-width: 100%;
+            `}
+
+            ${$overlayCopy &&
+            css`
+                width: ${wrapperWidth({
+                    $width,
+                    $maxWidth,
+                    $fitContent,
+                    $disableMaxWidthLock,
+                    $overlayCopy,
+                    $stackedOverlayCopy,
+                    $as,
+                })};
+                max-width: ${$stackedOverlayCopy
+                    ? "100%"
+                    : $maxWidth != null
+                      ? $maxWidth
+                      : $disableMaxWidthLock
+                        ? "none"
+                        : "min(100%, 600px)"};
+            `}
+        `}
+    `,
+    overlayCopy: styled.div`
+        ${({ $stackedOverlayCopy }) =>
+            $stackedOverlayCopy
+                ? css`
+                      grid-column: 2;
+                      grid-row: 1;
+                      align-self: start;
+                      justify-self: end;
+                      position: relative;
+                      display: flex;
+                      align-items: flex-start;
+                      justify-content: flex-end;
+                      flex-shrink: 0;
+                      margin: 0;
+                      padding: 0;
+                      line-height: 0;
+                      pointer-events: none;
+                      user-select: none;
+                      z-index: 1;
+
+                      & > * {
+                          margin: 0;
+                          pointer-events: auto;
+                      }
+                  `
+                : css`
+                      position: absolute;
+                      top: 0;
+                      right: 0;
+                      display: flex;
+                      align-items: flex-start;
+                      justify-content: flex-end;
+                      margin: 0;
+                      padding: 0;
+                      line-height: 0;
+                      pointer-events: auto;
+                      user-select: none;
+                      z-index: 2;
+
+                      & > * {
+                          margin: 0;
+                          vertical-align: top;
+                      }
+                  `}
+    `,
+
+    inlineContent: styled.span`
+        display: flex;
+        align-items: center;
+        align-self: stretch;
+        min-width: 0;
+        min-height: 100%;
+    `,
+
+    inlineCopy: styled.span`
+        display: flex;
+        align-items: center;
+        align-self: stretch;
+        flex-shrink: 0;
+        position: relative;
+        z-index: 2;
+        user-select: none;
+    `,
+
+    container: styled.div`
+        ${sharedStyles}
+        min-width: 0;
+    `,
+};
+
+export default S;

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

@@ -0,0 +1,277 @@
+import { Children, createElement, Fragment } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+
+const getLineHeightPx = (computedStyle, fallbackFontSize = 16) => {
+    const raw = computedStyle.lineHeight;
+
+    if (!raw || raw === "normal") return fallbackFontSize * 1.2;
+    if (raw.endsWith("px")) return parseFloat(raw);
+
+    const parsed = parseFloat(raw);
+    if (!Number.isNaN(parsed)) return parsed * fallbackFontSize;
+
+    return fallbackFontSize * 1.2;
+};
+
+const getAvailableWidth = (sourceEl) => {
+    if (!sourceEl) return 0;
+
+    const rect = sourceEl.getBoundingClientRect();
+    const style = window.getComputedStyle(sourceEl);
+
+    const paddingLeft = parseFloat(style.paddingLeft) || 0;
+    const paddingRight = parseFloat(style.paddingRight) || 0;
+
+    const contentWidth = rect.width - paddingLeft - paddingRight;
+
+    return Math.max(0, Math.floor(contentWidth));
+};
+
+const createSourceRoot = ({ content, as = "span" }) => {
+    const root = document.createElement(as || "span");
+    root.innerHTML = renderToStaticMarkup(
+        createElement(Fragment, null, ...Children.toArray(content)),
+    );
+    return root;
+};
+
+const createMeasurementRoot = ({ visibleEl, sourceRoot, widthPx, clamp }) => {
+    const cs = window.getComputedStyle(visibleEl);
+    const root = document.createElement(visibleEl.tagName.toLowerCase());
+
+    Object.assign(root.style, {
+        position: "absolute",
+        left: "-999999px",
+        top: "0",
+        zIndex: "-1",
+        pointerEvents: "none",
+        visibility: "hidden",
+        boxSizing: "border-box",
+
+        margin: "0",
+        padding: "0",
+        border: "0",
+
+        width: `${widthPx}px`,
+        minWidth: `${widthPx}px`,
+        maxWidth: `${widthPx}px`,
+
+        font: cs.font,
+        fontFamily: cs.fontFamily,
+        fontSize: cs.fontSize,
+        fontWeight: cs.fontWeight,
+        fontStyle: cs.fontStyle,
+        lineHeight: cs.lineHeight,
+        letterSpacing: cs.letterSpacing,
+        textTransform: cs.textTransform,
+        textIndent: cs.textIndent,
+        textAlign: cs.textAlign,
+        color: cs.color,
+
+        whiteSpace: clamp > 1 ? "normal" : "nowrap",
+        wordBreak: cs.wordBreak,
+        overflowWrap: cs.overflowWrap,
+
+        overflow: "hidden",
+        display: "block",
+    });
+
+    root.innerHTML = sourceRoot.innerHTML;
+
+    return root;
+};
+
+const getTextNodes = (root) => {
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+    const nodes = [];
+
+    let current = walker.nextNode();
+    while (current) {
+        nodes.push(current);
+        current = walker.nextNode();
+    }
+
+    return nodes;
+};
+
+const getGraphemes = (text = "") => Array.from(text);
+
+const getTotalTextLength = (root) => {
+    const textNodes = getTextNodes(root);
+    return textNodes.reduce((sum, node) => sum + getGraphemes(node.textContent || "").length, 0);
+};
+
+const removeNodesAfter = (root, startNode) => {
+    const range = document.createRange();
+    range.setStartAfter(startNode);
+    range.setEnd(root, root.childNodes.length);
+    range.deleteContents();
+};
+
+const truncateTreeAtIndex = (root, cutIndex, suffix) => {
+    const textNodes = getTextNodes(root);
+
+    if (textNodes.length === 0) {
+        root.textContent = suffix;
+        return;
+    }
+
+    if (cutIndex <= 0) {
+        root.textContent = suffix;
+        return;
+    }
+
+    let consumed = 0;
+
+    for (let i = 0; i < textNodes.length; i += 1) {
+        const node = textNodes[i];
+        const originalText = node.textContent || "";
+        const graphemes = getGraphemes(originalText);
+        const len = graphemes.length;
+        const nextConsumed = consumed + len;
+
+        if (cutIndex < nextConsumed) {
+            const localCount = cutIndex - consumed;
+            const kept = graphemes.slice(0, localCount).join("").replace(/\s+$/u, "");
+
+            node.textContent = kept + suffix;
+
+            const range = document.createRange();
+            range.setStart(node, node.textContent.length);
+            range.setEnd(root, root.childNodes.length);
+            range.deleteContents();
+
+            return;
+        }
+
+        if (cutIndex === nextConsumed) {
+            node.textContent = originalText.replace(/\s+$/u, "") + suffix;
+            removeNodesAfter(root, node);
+            return;
+        }
+
+        consumed = nextConsumed;
+    }
+
+    const lastNode = textNodes[textNodes.length - 1];
+    if (lastNode) {
+        lastNode.textContent = (lastNode.textContent || "").replace(/\s+$/u, "") + suffix;
+    }
+};
+
+const fits = ({ el, clamp, maxHeight }) => {
+    if (clamp <= 1) return el.scrollWidth <= el.clientWidth + 0.5;
+    return el.scrollHeight <= maxHeight + 0.5;
+};
+
+const buildCandidate = ({ visibleEl, sourceRoot, widthPx, clamp, cutIndex, suffix }) => {
+    const candidate = createMeasurementRoot({ visibleEl, sourceRoot, widthPx, clamp });
+    truncateTreeAtIndex(candidate, cutIndex, suffix);
+    document.body.appendChild(candidate);
+    return candidate;
+};
+
+export const getTruncatedHtml = ({
+    visibleRef,
+    content,
+    as = "span",
+    clamp = 1,
+    suffix = "...",
+}) => {
+    const visibleEl = visibleRef?.current;
+    if (!visibleEl) return null;
+
+    const sourceRoot = createSourceRoot({ content, as });
+    const widthPx = getAvailableWidth(visibleEl);
+    if (!widthPx || widthPx <= 0) return null;
+
+    const visibleStyle = window.getComputedStyle(visibleEl);
+    const lineHeightPx = getLineHeightPx(visibleStyle, parseFloat(visibleStyle.fontSize) || 16);
+    const maxHeight = lineHeightPx * Math.max(1, clamp);
+
+    const totalLength = getTotalTextLength(sourceRoot);
+
+    if (totalLength <= 0) {
+        return {
+            isTruncated: false,
+            html: sourceRoot.innerHTML,
+        };
+    }
+
+    const fullCandidate = createMeasurementRoot({
+        visibleEl,
+        sourceRoot,
+        widthPx,
+        clamp,
+    });
+    document.body.appendChild(fullCandidate);
+
+    try {
+        const fullFits = fits({
+            el: fullCandidate,
+            clamp,
+            maxHeight,
+        });
+
+        if (fullFits) {
+            return {
+                isTruncated: false,
+                html: sourceRoot.innerHTML,
+            };
+        }
+    } finally {
+        document.body.removeChild(fullCandidate);
+    }
+
+    let low = 0;
+    let high = totalLength;
+    let best = 0;
+
+    while (low <= high) {
+        const mid = Math.floor((low + high) / 2);
+
+        const candidate = buildCandidate({
+            visibleEl,
+            sourceRoot,
+            widthPx,
+            clamp,
+            cutIndex: mid,
+            suffix,
+        });
+
+        try {
+            const candidateFits = fits({
+                el: candidate,
+                clamp,
+                maxHeight,
+            });
+
+            if (candidateFits) {
+                best = mid;
+                low = mid + 1;
+            } else {
+                high = mid - 1;
+            }
+        } finally {
+            document.body.removeChild(candidate);
+        }
+    }
+
+    const finalCandidate = buildCandidate({
+        visibleEl,
+        sourceRoot,
+        widthPx,
+        clamp,
+        cutIndex: best,
+        suffix,
+    });
+
+    try {
+        return {
+            isTruncated: true,
+            html: finalCandidate.innerHTML,
+        };
+    } finally {
+        document.body.removeChild(finalCandidate);
+    }
+};

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

@@ -0,0 +1,5 @@
+
+const PHRASING_ONLY_HOST_TAGS = new Set(["p", "span", "h1", "h2", "h3", "h4", "h5", "h6"]);
+
+export const isTypoPhrasingOnlyHostTag = (as) =>
+    typeof as === "string" && PHRASING_ONLY_HOST_TAGS.has(as.toLowerCase());