@the-story/standard-core 1.0.3 → 1.0.5

package/README.md

@@ -12,13 +12,13 @@ During development, we use yalc for local linking (a lightweight alternative to
    - In PyCharm, use the already added Run configurations: "build", "yalc:publish" (optionally also "yalc:push").
    - Run "yalc:publish".
 2. In the consuming application:
-   - Use the existing project configuration that adds the package via yalc (e.g., "yalc:add" or a "Shell Script" configuration with: yalc add @thestory/standard-core).
+   - Use the existing project configuration that adds the package via yalc (e.g., "yalc:add" or a "Shell Script" configuration with: yalc add @the-story/standard-core).
    - Run the prepared configuration that installs dependencies (e.g., NPM "install"/"yarn install").
    - Start the application using its dedicated Run configuration and verify it works.
 3. Updating when the library changes:
    - In the library: run "yalc:publish" to push the update to all consumers.
    - In the app: run the "yalc:update" configuration to update the package; optionally restart the dev server.
-4. Removing the yalc package in the app: run the existing configuration that removes the package (e.g., a "Shell Script" with: yalc remove @thestory/standard-core).
+4. Removing the yalc package in the app: run the existing configuration that removes the package (e.g., a "Shell Script" with: yalc remove @the-story/standard-core).
 
 Note: Eventually the package may be published to an npm registry (public or private). yalc is intended only for local development.
 
@@ -28,6 +28,7 @@ We use Storybook to build and preview components. Every component MUST have at l
 
 - Launching Storybook: in PyCharm run the existing NPM configuration "storybook" from the Run toolbar.
 - Building a static version: in PyCharm run the existing NPM configuration "build-storybook".
+- Hosted Storybook: https://standard-core.storyline.cloud
 
 Guidelines:
 - In this project, stories live in the `src/stories` directory, grouped into categories (e.g., `Atoms`, `Molecules`) and mirroring component structure, e.g., `src/stories/Atoms/Button/Button.stories.tsx`.

package/dist/atoms/Button/Button.d.ts

@@ -1,21 +1,7 @@
-import type { ButtonOwnProps } from "@mui/material/Button";
-import type { SxProps, Theme } from "@mui/material/styles";
-import type { APIString } from "@the-story/standard-core/types";
-import type { ButtonHTMLAttributes, ElementType, ReactNode } from "react";
-declare const Button: ({ type, href, target, children, variant, color, size, disabled, onClick, onMouseEnter, component, endIcon, startIcon, sx, }: {
-    type?: ButtonHTMLAttributes<HTMLButtonElement>["type"];
-    href?: APIString;
-    target?: string;
-    children?: ReactNode;
-    variant?: ButtonOwnProps["variant"];
-    color?: ButtonOwnProps["color"];
-    size?: ButtonOwnProps["size"];
-    disabled?: boolean;
-    onClick?: (e: any) => void;
-    onMouseEnter?: (e: any) => void;
-    component?: ElementType;
-    endIcon?: ReactNode;
-    startIcon?: ReactNode;
-    sx?: SxProps<Theme>;
-}) => import("react/jsx-runtime").JSX.Element;
+import type { ButtonProps as MuiButtonProps } from "@mui/material/Button";
+import type { HTMLAttributeAnchorTarget } from "react";
+type ButtonProps = MuiButtonProps & {
+    target?: HTMLAttributeAnchorTarget;
+};
+declare const Button: ({ type, href, target, children, variant, color, size, disabled, onClick, onMouseEnter, component, endIcon, startIcon, sx, }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default Button;

package/dist/atoms/Button/Button.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import MuiButton from "@mui/material/Button";
 import { LocalizedLink } from "@the-story/standard-core/config/navigation";
 var Button = function (_a) {
-    var _b = _a.type, type = _b === void 0 ? "button" : _b, href = _a.href, target = _a.target, children = _a.children, _c = _a.variant, variant = _c === void 0 ? "contained" : _c, _d = _a.color, color = _d === void 0 ? "primary" : _d, _e = _a.size, size = _e === void 0 ? "large" : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.onClick, onClick = _g === void 0 ? function (e) { } : _g, _h = _a.onMouseEnter, onMouseEnter = _h === void 0 ? function (e) { } : _h, _j = _a.component, component = _j === void 0 ? LocalizedLink : _j, _k = _a.endIcon, endIcon = _k === void 0 ? null : _k, _l = _a.startIcon, startIcon = _l === void 0 ? null : _l, sx = _a.sx;
+    var _b = _a.type, type = _b === void 0 ? "button" : _b, href = _a.href, target = _a.target, children = _a.children, _c = _a.variant, variant = _c === void 0 ? "contained" : _c, _d = _a.color, color = _d === void 0 ? "primary" : _d, _e = _a.size, size = _e === void 0 ? "large" : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, _g = _a.component, component = _g === void 0 ? LocalizedLink : _g, _h = _a.endIcon, endIcon = _h === void 0 ? null : _h, _j = _a.startIcon, startIcon = _j === void 0 ? null : _j, sx = _a.sx;
     return (_jsx(MuiButton, { type: type, href: href || undefined, component: href ? component : "button", target: target, variant: variant, color: color, size: size, disabled: disabled, onClick: onClick, onMouseEnter: onMouseEnter, sx: sx, endIcon: endIcon, startIcon: startIcon, children: children }));
 };
 export default Button;

package/dist/atoms/CtaButton/CtaButton.d.ts

@@ -8,5 +8,5 @@ export interface CtaButtonProps {
         sx?: SxProps;
     } | APINullable;
 }
-declare const CtaButton: ({ button }: CtaButtonProps) => APINullable | import("react/jsx-runtime").JSX.Element;
+declare const CtaButton: ({ button }: CtaButtonProps) => import("react/jsx-runtime").JSX.Element | APINullable;
 export default CtaButton;

package/dist/config/navigation.d.ts

@@ -87,7 +87,7 @@ export declare const LocalizedLink: import("react").ForwardRefExoticComponent<Om
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "off" | "on" | undefined;
-    inputMode?: "none" | "search" | "decimal" | "email" | "text" | "tel" | "url" | "numeric" | undefined;
+    inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     popover?: "" | "auto" | "manual" | undefined;
     popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
@@ -108,7 +108,7 @@ export declare const LocalizedLink: import("react").ForwardRefExoticComponent<Om
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "date" | "time" | "page" | "step" | "true" | "false" | "location" | undefined;
+    "aria-current"?: boolean | "page" | "time" | "step" | "true" | "false" | "location" | "date" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
@@ -135,7 +135,7 @@ export declare const LocalizedLink: import("react").ForwardRefExoticComponent<Om
     "aria-posinset"?: number | undefined;
     "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
     "aria-readonly"?: boolean | "true" | "false" | undefined;
-    "aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-relevant"?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
     "aria-required"?: boolean | "true" | "false" | undefined;
     "aria-roledescription"?: string | undefined;
     "aria-rowcount"?: number | undefined;

package/dist/exports.d.ts

@@ -4,3 +4,4 @@ export * from "./utils/exports";
 export * from "./config";
 export * from "./ThemeInheritor";
 export * from "./NextIntlClientInheritor";
+export * from "./hooks";

package/dist/exports.js

@@ -4,3 +4,4 @@ export * from "./utils/exports";
 export * from "./config";
 export * from "./ThemeInheritor";
 export * from "./NextIntlClientInheritor";
+export * from "./hooks";

package/dist/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./useMaskedPhoneReveal";
+export * from "./useInfiniteSlides";

package/dist/hooks/index.js

@@ -0,0 +1,2 @@
+export * from "./useMaskedPhoneReveal";
+export * from "./useInfiniteSlides";

package/dist/hooks/useInfiniteSlides.d.ts

@@ -0,0 +1,4 @@
+export declare function useInfiniteSlides<T>(slideWidth: number, slideMargin: number, items?: any[] | null | undefined): {
+    slides: T[];
+    slideTotalWidth: number;
+};

package/dist/hooks/useInfiniteSlides.js

@@ -0,0 +1,19 @@
+import { useMemo } from "react";
+export function useInfiniteSlides(slideWidth, slideMargin, items) {
+    if (items === void 0) { items = []; }
+    var slideTotalWidth = useMemo(function () { return slideWidth + slideMargin; }, [slideWidth, slideMargin]);
+    // SSR-safe viewport width
+    var viewportWidth = typeof window !== "undefined" ? window.innerWidth : 1440;
+    var MIN_SLIDES = useMemo(function () {
+        // Ensure a large pool to keep loop smooth
+        var perView = Math.ceil(viewportWidth / slideTotalWidth);
+        return Math.max(perView, 12);
+    }, [viewportWidth, slideTotalWidth]);
+    var slides = useMemo(function () {
+        if (!items || items.length === 0)
+            return [];
+        var duplicationsNeeded = Math.ceil((MIN_SLIDES * 3) / items.length);
+        return Array.from({ length: duplicationsNeeded }, function () { return items; }).flat();
+    }, [items, MIN_SLIDES]);
+    return { slides: slides, slideTotalWidth: slideTotalWidth };
+}

package/dist/hooks/useMaskedPhoneReveal.d.ts

@@ -0,0 +1,20 @@
+import type { APIString } from "@the-story/standard-core/types";
+export type UseMaskedPhoneRevealOptions = {
+    maskDigits?: number;
+    maskChar?: string;
+};
+export type UseMaskedPhoneRevealReturn = {
+    revealed: boolean;
+    masked: APIString;
+    reveal: () => void;
+};
+/**
+ * Masks the last N numeric digits of a phone-like string, preserving
+ * spacing and non-digit symbols. Only digits are replaced by maskChar.
+ */
+export declare const maskLastDigits: (phone: APIString, { maskDigits, maskChar }?: UseMaskedPhoneRevealOptions) => APIString;
+/**
+ * Reusable hook providing masked phone text and a handler to reveal it.
+ * Useful anywhere you want to hide part of the phone number until user action.
+ */
+export declare const useMaskedPhoneReveal: (phone: APIString, options?: UseMaskedPhoneRevealOptions) => UseMaskedPhoneRevealReturn;

package/dist/hooks/useMaskedPhoneReveal.js

@@ -0,0 +1,32 @@
+"use client";
+import { useCallback, useMemo, useState } from "react";
+/**
+ * Masks the last N numeric digits of a phone-like string, preserving
+ * spacing and non-digit symbols. Only digits are replaced by maskChar.
+ */
+export var maskLastDigits = function (phone, _a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.maskDigits, maskDigits = _c === void 0 ? 6 : _c, _d = _b.maskChar, maskChar = _d === void 0 ? "*" : _d;
+    if (!phone)
+        return phone;
+    var toMask = Math.max(0, maskDigits);
+    var chars = String(phone).split("");
+    for (var i = chars.length - 1; i >= 0 && toMask > 0; i--) {
+        var ch = chars[i];
+        if (/\d/.test(ch)) {
+            chars[i] = maskChar;
+            toMask--;
+        }
+    }
+    return chars.join("");
+};
+/**
+ * Reusable hook providing masked phone text and a handler to reveal it.
+ * Useful anywhere you want to hide part of the phone number until user action.
+ */
+export var useMaskedPhoneReveal = function (phone, options) {
+    if (options === void 0) { options = {}; }
+    var _a = useState(false), revealed = _a[0], setRevealed = _a[1];
+    var masked = useMemo(function () { return maskLastDigits(phone, options); }, [phone, options]);
+    var reveal = useCallback(function () { return setRevealed(true); }, []);
+    return { revealed: revealed, masked: masked, reveal: reveal };
+};

package/dist/molecules/LanguageSelector/LanguageSelector.js

@@ -3,11 +3,10 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp";
 import Button from "@mui/material/Button";
-import Link from "@mui/material/Link";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
+import { Link } from "@the-story/standard-core/atoms/Link";
 import { locales } from "@the-story/standard-core/config/i18n";
-import { LocalizedLink } from "@the-story/standard-core/config/navigation";
 import { useLocale } from "next-intl";
 import { usePathname, useSearchParams } from "next/navigation";
 import { useEffect, useMemo, useState } from "react";
@@ -24,9 +23,10 @@ var getAlternateLanguages = function () {
     return alternateLanguages;
 };
 var LanguageSelector = function (_a) {
+    var _b;
     var color = _a.color;
     var lang = useLocale();
-    var _b = useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
+    var _c = useState(null), anchorEl = _c[0], setAnchorEl = _c[1];
     var open = Boolean(anchorEl);
     var handleClick = function (event) {
         setAnchorEl(event.currentTarget);
@@ -34,24 +34,43 @@ var LanguageSelector = function (_a) {
     var handleClose = function () {
         setAnchorEl(null);
     };
-    var _c = useState([]), alternateLanguages = _c[0], setAlternateLanguages = _c[1];
+    var _d = useState([]), alternateLanguages = _d[0], setAlternateLanguages = _d[1];
     var pathname = usePathname();
     useEffect(function () {
         var alternateLanguagesData = getAlternateLanguages();
         setAlternateLanguages(alternateLanguagesData);
     }, [pathname]);
-    var getHrefForLocale = useMemo(function () { return function (l) {
-        var _a;
-        if (alternateLanguages) {
-            var href = (_a = alternateLanguages === null || alternateLanguages === void 0 ? void 0 : alternateLanguages.find(function (lang) { return lang.hreflang === l; })) === null || _a === void 0 ? void 0 : _a.href;
-            if (href)
-                return href;
-        }
-        return "/";
-    }; }, [alternateLanguages]);
     var searchParams = useSearchParams();
-    var pathnameWithoutLang = pathname === null || pathname === void 0 ? void 0 : pathname.replace(/^\/[a-z]{2}(?=\/|$)/, "");
-    var currentUrl = pathnameWithoutLang + "?" + (searchParams === null || searchParams === void 0 ? void 0 : searchParams.toString());
+    var pathnameWithoutLang = (_b = pathname === null || pathname === void 0 ? void 0 : pathname.replace(/^\/[a-z]{2}(?=\/|$)/, "")) !== null && _b !== void 0 ? _b : "/";
+    var queryString = searchParams === null || searchParams === void 0 ? void 0 : searchParams.toString();
+    var currentUrl = pathnameWithoutLang;
+    if (queryString)
+        currentUrl += "?".concat(queryString);
+    var getHrefForLocale = useMemo(function () {
+        var normalizeHref = function (href) {
+            try {
+                var url = new URL(href, window.location.origin);
+                var path = url.pathname.replace(/^\/[a-z]{2}(?=\/|$)/, "");
+                if (path === "")
+                    path = "/";
+                return url.search ? "".concat(path).concat(url.search) : path;
+            }
+            catch (_a) {
+                // If it's not a valid URL, fallback to currentUrl which is already normalized
+                return currentUrl;
+            }
+        };
+        return function (l) {
+            var _a;
+            if (alternateLanguages && alternateLanguages.length > 0) {
+                var href = (_a = alternateLanguages.find(function (lang) { return lang.hreflang === l; })) === null || _a === void 0 ? void 0 : _a.href;
+                if (href)
+                    return normalizeHref(href);
+            }
+            // Fallback to current page path/query without any locale prefix
+            return currentUrl;
+        };
+    }, [alternateLanguages, currentUrl]);
     if (locales.length <= 1)
         return null;
     return (_jsxs(_Fragment, { children: [_jsx(Button, { id: "language-selector-button", "aria-controls": open ? "language-menu" : undefined, "aria-haspopup": "true", "aria-expanded": open ? "true" : undefined, onClick: handleClick, size: "small", endIcon: open ? _jsx(ArrowDropUpIcon, {}) : _jsx(ArrowDropDownIcon, {}), sx: {
@@ -76,7 +95,7 @@ var LanguageSelector = function (_a) {
                         : getHrefForLocale
                             ? getHrefForLocale(l)
                             : "/";
-                    return (_jsx(MenuItem, { selected: lang === l, children: _jsx(Link, { component: LocalizedLink, underline: "none", href: href, locale: l, onClick: handleClose, px: "4px", children: l.toUpperCase() }) }, "lang-".concat(l)));
+                    return (_jsx(MenuItem, { selected: lang === l, children: _jsx(Link, { underline: "none", href: href, locale: l, onClick: handleClose, px: "4px", children: l.toUpperCase() }) }, "lang-".concat(l)));
                 }) })] }));
 };
 export default LanguageSelector;

package/dist/molecules/MaskedPhoneNumber/MaskedPhoneNumber.d.ts

@@ -0,0 +1,9 @@
+import type { APIString } from "@the-story/standard-core/types";
+export interface MaskedPhoneNumberProps {
+    officePhoneNumber: APIString;
+    showPhoneButtonLabelTranslations?: string;
+    maskDigits?: number;
+    maskChar?: string;
+}
+declare const MaskedPhoneNumber: ({ officePhoneNumber, showPhoneButtonLabelTranslations, maskDigits, maskChar, }: MaskedPhoneNumberProps) => import("react/jsx-runtime").JSX.Element | null;
+export default MaskedPhoneNumber;

package/dist/molecules/MaskedPhoneNumber/MaskedPhoneNumber.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import Link from "@mui/material/Link";
+import Typography from "@mui/material/Typography";
+import { useMaskedPhoneReveal } from "@the-story/standard-core/hooks";
+var MaskedPhoneNumber = function (_a) {
+    var officePhoneNumber = _a.officePhoneNumber, showPhoneButtonLabelTranslations = _a.showPhoneButtonLabelTranslations, _b = _a.maskDigits, maskDigits = _b === void 0 ? 6 : _b, _c = _a.maskChar, maskChar = _c === void 0 ? "*" : _c;
+    var _d = useMaskedPhoneReveal(officePhoneNumber, { maskDigits: maskDigits, maskChar: maskChar }), showFullPhone = _d.revealed, maskedPhone = _d.masked, reveal = _d.reveal;
+    if (!officePhoneNumber)
+        return null;
+    return (_jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [showFullPhone ? (_jsx(Link, { href: "tel:".concat(officePhoneNumber), children: officePhoneNumber })) : (_jsx(Typography, { variant: "body1", children: maskedPhone })), !showFullPhone && (_jsx(Link, { onClick: function (e) {
+                    e.preventDefault();
+                    reveal();
+                }, sx: { cursor: "pointer" }, children: showPhoneButtonLabelTranslations || "show" }))] }));
+};
+export default MaskedPhoneNumber;

package/dist/molecules/MaskedPhoneNumber/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MaskedPhoneNumber } from "./MaskedPhoneNumber";
+export type { MaskedPhoneNumberProps } from "./MaskedPhoneNumber";

package/dist/molecules/MaskedPhoneNumber/index.js

@@ -0,0 +1 @@
+export { default as MaskedPhoneNumber } from "./MaskedPhoneNumber";

package/dist/molecules/exports.d.ts

@@ -1,2 +1,3 @@
 export * from "./Crumbs";
 export * from "./LanguageSelector";
+export * from "./MaskedPhoneNumber";

package/dist/molecules/exports.js

@@ -1,2 +1,3 @@
 export * from "./Crumbs";
 export * from "./LanguageSelector";
+export * from "./MaskedPhoneNumber";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@the-story/standard-core",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Standard landing boilerplate",
   "main": "./dist/exports.js",
   "module": "./dist/exports.js",
@@ -250,6 +250,18 @@
       "import": "./dist/exports.js",
       "require": "./dist/exports.js"
     },
+    "./hooks": {
+      "import": "./dist/hooks/index.js",
+      "require": "./dist/hooks/index.js"
+    },
+    "./hooks/useInfiniteSlides": {
+      "import": "./dist/hooks/useInfiniteSlides.js",
+      "require": "./dist/hooks/useInfiniteSlides.js"
+    },
+    "./hooks/useMaskedPhoneReveal": {
+      "import": "./dist/hooks/useMaskedPhoneReveal.js",
+      "require": "./dist/hooks/useMaskedPhoneReveal.js"
+    },
     "./molecules/Crumbs/Crumbs": {
       "import": "./dist/molecules/Crumbs/Crumbs.js",
       "require": "./dist/molecules/Crumbs/Crumbs.js"
@@ -266,6 +278,14 @@
       "import": "./dist/molecules/LanguageSelector/index.js",
       "require": "./dist/molecules/LanguageSelector/index.js"
     },
+    "./molecules/MaskedPhoneNumber/MaskedPhoneNumber": {
+      "import": "./dist/molecules/MaskedPhoneNumber/MaskedPhoneNumber.js",
+      "require": "./dist/molecules/MaskedPhoneNumber/MaskedPhoneNumber.js"
+    },
+    "./molecules/MaskedPhoneNumber": {
+      "import": "./dist/molecules/MaskedPhoneNumber/index.js",
+      "require": "./dist/molecules/MaskedPhoneNumber/index.js"
+    },
     "./molecules": {
       "import": "./dist/molecules/exports.js",
       "require": "./dist/molecules/exports.js"
@@ -318,16 +338,16 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "4.1.1",
+    "@chromatic-com/storybook": "4.1.3",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@hookform/resolvers": "^3.3.4",
     "@imgproxy/imgproxy-node": "^1.0.6",
     "@mui/icons-material": "^6.4.1",
     "@mui/material": "^6.4.1",
-    "@storybook/addon-docs": "9.1.10",
-    "@storybook/addon-onboarding": "9.1.10",
-    "@storybook/nextjs": "9.1.10",
+    "@storybook/addon-docs": "10.1.4",
+    "@storybook/addon-onboarding": "10.1.4",
+    "@storybook/nextjs": "10.1.4",
     "@strapi/blocks-react-renderer": "^1.0.0",
     "@strapi/strapi": "5.27.0",
     "@trivago/prettier-plugin-sort-imports": "^5.2.1",
@@ -340,7 +360,7 @@
     "eslint-config-next": "14.2.5",
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-prettier": "^5.2.3",
-    "eslint-plugin-storybook": "^9.1.10",
+    "eslint-plugin-storybook": "^10.1.4",
     "motion": "^12.0.0",
     "next": "14.2.33",
     "next-intl": "^3.10.0",
@@ -351,7 +371,7 @@
     "rimraf": "^6.0.1",
     "schema-dts": "^1.1.2",
     "slugify": "^1.6.6",
-    "storybook": "9.1.10",
+    "storybook": "10.1.4",
     "typescript": "^5.4.5",
     "zod": "^3.22.4"
   },