@wix/headless-stores 0.0.34 → 0.0.35

package/cjs/dist/react/SocialSharing.js

@@ -1,170 +0,0 @@
-import React from "react";
-import { useService } from "@wix/services-manager-react";
-import { SocialSharingServiceDefinition, } from "../services/social-sharing-service.js";
-import { SignalsServiceDefinition } from "@wix/services-definitions/core-services/signals";
-/**
- * Headless component for social sharing root
- *
- * @component
- * @example
- * ```tsx
- * import { SocialSharing } from '@wix/stores/components';
- *
- * function ShareProduct() {
- *   const productUrl = 'https://example.com/product/123';
- *   const productTitle = 'Amazing Product';
- *
- *   return (
- *     <SocialSharing.Root>
- *       {({ platforms, shareCount, shareFacebook, shareTwitter, copyLink, shareNative }) => (
- *         <div>
- *           <p>Share this product ({shareCount} shares)</p>
- *           <div className="share-buttons">
- *             <button onClick={() => shareFacebook(productUrl, productTitle)}>
- *               Share on Facebook
- *             </button>
- *             <button onClick={() => shareTwitter(productUrl, `Check out ${productTitle}!`)}>
- *               Share on Twitter
- *             </button>
- *             <button onClick={() => copyLink(productUrl)}>
- *               Copy Link
- *             </button>
- *             <button onClick={() => shareNative({
- *               title: productTitle,
- *               text: 'Check this out!',
- *               url: productUrl
- *             })}>
- *               Share
- *             </button>
- *           </div>
- *         </div>
- *       )}
- *     </SocialSharing.Root>
- *   );
- * }
- * ```
- */
-export const Root = (props) => {
-    const service = useService(SocialSharingServiceDefinition);
-    const signalsService = useService(SignalsServiceDefinition);
-    const [platforms, setPlatforms] = React.useState([]);
-    const [shareCount, setShareCount] = React.useState(0);
-    const [lastShared, setLastShared] = React.useState(null);
-    React.useEffect(() => {
-        const effects = [
-            signalsService.effect(() => {
-                setPlatforms(service.availablePlatforms.get());
-            }),
-            signalsService.effect(() => {
-                setShareCount(service.shareCount.get());
-            }),
-            signalsService.effect(() => {
-                setLastShared(service.lastSharedPlatform.get());
-            }),
-        ];
-        return () => effects.forEach((dispose) => dispose());
-    }, [service, signalsService]);
-    return props.children({
-        platforms,
-        shareCount,
-        lastShared,
-        shareFacebook: service.shareToFacebook,
-        shareTwitter: service.shareToTwitter,
-        shareLinkedIn: service.shareToLinkedIn,
-        shareWhatsApp: service.shareToWhatsApp,
-        shareEmail: service.shareToEmail,
-        copyLink: service.copyToClipboard,
-        shareNative: service.shareNative,
-    });
-};
-/**
- * Headless component for individual social platform
- *
- * @component
- * @example
- * ```tsx
- * import { SocialSharing } from '@wix/stores/components';
- *
- * function SocialButton({ platform, onClick }) {
- *   return (
- *     <SocialSharing.Platform platform={platform} onClick={onClick}>
- *       {({ platform, onSelect }) => (
- *         <button
- *           onClick={onSelect}
- *           className={`social-btn social-btn-${platform.name.toLowerCase()}`}
- *         >
- *           <span className="icon">{platform.icon}</span>
- *           Share on {platform.name}
- *         </button>
- *       )}
- *     </SocialSharing.Platform>
- *   );
- * }
- * ```
- */
-export const Platform = (props) => {
-    const { platform, onClick } = props;
-    return props.children({
-        platform,
-        onSelect: onClick,
-    });
-};
-/**
- * Headless component for social sharing platforms with logic
- *
- * @component
- * @example
- * ```tsx
- * import { SocialSharing } from '@wix/stores/components';
- *
- * function SocialShareButtons() {
- *   return (
- *     <SocialSharing.Platforms
- *       url="https://example.com/product/123"
- *       title="Amazing Product"
- *       description="Check out this amazing product!"
- *       hashtags={['product', 'amazing']}
- *     >
- *       {({ platforms, shareFacebook, shareTwitter, shareLinkedIn, copyLink, shareNative }) => (
- *         <div className="social-platforms">
- *           <button onClick={shareFacebook}>Share on Facebook</button>
- *           <button onClick={shareTwitter}>Share on Twitter</button>
- *           <button onClick={shareLinkedIn}>Share on LinkedIn</button>
- *           <button onClick={() => copyLink()}>Copy Link</button>
- *           <button onClick={() => shareNative()}>Share</button>
- *         </div>
- *       )}
- *     </SocialSharing.Platforms>
- *   );
- * }
- * ```
- */
-export const Platforms = (props) => {
-    const { url, title, description = "", hashtags = [] } = props;
-    const service = useService(SocialSharingServiceDefinition);
-    const signalsService = useService(SignalsServiceDefinition);
-    const [platforms, setPlatforms] = React.useState([]);
-    React.useEffect(() => {
-        const dispose = signalsService.effect(() => {
-            setPlatforms(service.availablePlatforms.get());
-        });
-        return dispose;
-    }, [service, signalsService]);
-    const shareFacebook = () => service.shareToFacebook(url, title, description);
-    const shareTwitter = () => service.shareToTwitter(url, title, hashtags);
-    const shareLinkedIn = () => service.shareToLinkedIn(url, title, description);
-    const shareWhatsApp = () => service.shareToWhatsApp(url, `${title} - ${description}`);
-    const shareEmail = () => service.shareToEmail(url, title, description);
-    const copyLink = () => service.copyToClipboard(url);
-    const shareNative = () => service.shareNative({ title, text: description, url });
-    return props.children({
-        platforms,
-        shareFacebook,
-        shareTwitter,
-        shareLinkedIn,
-        shareWhatsApp,
-        shareEmail,
-        copyLink,
-        shareNative,
-    });
-};

package/cjs/dist/services/social-sharing-service.d.ts

@@ -1,34 +0,0 @@
-import { type Signal } from "@wix/services-definitions/core-services/signals";
-export interface SharingPlatform {
-    name: string;
-    icon: string;
-    color: string;
-    shareUrl: string;
-}
-export interface SocialSharingServiceAPI {
-    availablePlatforms: Signal<SharingPlatform[]>;
-    shareCount: Signal<number>;
-    lastSharedPlatform: Signal<string | null>;
-    shareToFacebook: (url: string, title: string, description?: string) => void;
-    shareToTwitter: (url: string, text: string, hashtags?: string[]) => void;
-    shareToLinkedIn: (url: string, title: string, summary?: string) => void;
-    shareToWhatsApp: (url: string, text: string) => void;
-    shareToEmail: (url: string, subject: string, body: string) => void;
-    copyToClipboard: (url: string) => Promise<boolean>;
-    shareNative: (data: {
-        title: string;
-        text: string;
-        url: string;
-    }) => Promise<boolean>;
-    trackShare: (platform: string) => void;
-}
-export declare const SocialSharingServiceDefinition: string & {
-    __api: SocialSharingServiceAPI;
-    __config: {};
-    isServiceDefinition?: boolean;
-} & SocialSharingServiceAPI;
-export declare const SocialSharingService: import("@wix/services-definitions").ServiceFactory<string & {
-    __api: SocialSharingServiceAPI;
-    __config: {};
-    isServiceDefinition?: boolean;
-} & SocialSharingServiceAPI, {}>;

package/cjs/dist/services/social-sharing-service.js

@@ -1,129 +0,0 @@
-import { defineService, implementService } from "@wix/services-definitions";
-import { SignalsServiceDefinition, } from "@wix/services-definitions/core-services/signals";
-import { SocialPlatform, SocialPlatformShareUrl, } from "../enums/social-platform-enums.js";
-export const SocialSharingServiceDefinition = defineService("socialSharing");
-export const SocialSharingService = implementService.withConfig()(SocialSharingServiceDefinition, ({ getService }) => {
-    const signalsService = getService(SignalsServiceDefinition);
-    // Platform metadata is handled in components layer, only business logic here
-    const availablePlatforms = signalsService.signal([
-        {
-            name: "Facebook",
-            icon: "facebook",
-            color: "#1877F2",
-            shareUrl: SocialPlatformShareUrl.FACEBOOK,
-        },
-        {
-            name: "Twitter",
-            icon: "twitter",
-            color: "#1DA1F2",
-            shareUrl: SocialPlatformShareUrl.TWITTER,
-        },
-        {
-            name: "LinkedIn",
-            icon: "linkedin",
-            color: "#0A66C2",
-            shareUrl: SocialPlatformShareUrl.LINKEDIN,
-        },
-        {
-            name: "WhatsApp",
-            icon: "whatsapp",
-            color: "#25D366",
-            shareUrl: SocialPlatformShareUrl.WHATSAPP,
-        },
-        {
-            name: "Email",
-            icon: "mail",
-            color: "#EA4335",
-            shareUrl: SocialPlatformShareUrl.EMAIL,
-        },
-    ]);
-    const shareCount = signalsService.signal(0);
-    const lastSharedPlatform = signalsService.signal(null);
-    const openShareWindow = (url, platform) => {
-        const width = 600;
-        const height = 400;
-        const left = (window.screen.width - width) / 2;
-        const top = (window.screen.height - height) / 2;
-        window.open(url, `share-${platform}`, `width=${width},height=${height},left=${left},top=${top},scrollbars=yes,resizable=yes`);
-        trackShare(platform);
-    };
-    const shareToFacebook = (url, title, description) => {
-        const shareUrl = new URL(SocialPlatformShareUrl.FACEBOOK);
-        shareUrl.searchParams.set("u", url);
-        shareUrl.searchParams.set("quote", `${title}${description ? ` - ${description}` : ""}`);
-        openShareWindow(shareUrl.toString(), SocialPlatform.FACEBOOK);
-    };
-    const shareToTwitter = (url, text, hashtags) => {
-        const shareUrl = new URL(SocialPlatformShareUrl.TWITTER);
-        shareUrl.searchParams.set("url", url);
-        shareUrl.searchParams.set("text", text);
-        if (hashtags && hashtags.length > 0) {
-            shareUrl.searchParams.set("hashtags", hashtags.join(","));
-        }
-        openShareWindow(shareUrl.toString(), SocialPlatform.TWITTER);
-    };
-    const shareToLinkedIn = (url, title, summary) => {
-        const shareUrl = new URL(SocialPlatformShareUrl.LINKEDIN);
-        shareUrl.searchParams.set("url", url);
-        shareUrl.searchParams.set("title", title);
-        if (summary) {
-            shareUrl.searchParams.set("summary", summary);
-        }
-        openShareWindow(shareUrl.toString(), SocialPlatform.LINKEDIN);
-    };
-    const shareToWhatsApp = (url, text) => {
-        const message = `${text} ${url}`;
-        const shareUrl = `${SocialPlatformShareUrl.WHATSAPP}?text=${encodeURIComponent(message)}`;
-        openShareWindow(shareUrl, SocialPlatform.WHATSAPP);
-    };
-    const shareToEmail = (url, subject, body) => {
-        const emailBody = `${body}\n\n${url}`;
-        const mailtoUrl = `${SocialPlatformShareUrl.EMAIL}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(emailBody)}`;
-        window.location.href = mailtoUrl;
-        trackShare(SocialPlatform.EMAIL);
-    };
-    const copyToClipboard = async (url) => {
-        try {
-            await navigator.clipboard.writeText(url);
-            trackShare(SocialPlatform.CLIPBOARD);
-            return true;
-        }
-        catch (err) {
-            console.error("Failed to copy to clipboard:", err);
-            return false;
-        }
-    };
-    const shareNative = async (data) => {
-        try {
-            if (navigator.share) {
-                await navigator.share(data);
-                trackShare(SocialPlatform.NATIVE);
-                return true;
-            }
-            return false;
-        }
-        catch (err) {
-            console.error("Failed to share natively:", err);
-            return false;
-        }
-    };
-    const trackShare = (platform) => {
-        const currentCount = shareCount.get();
-        shareCount.set(currentCount + 1);
-        lastSharedPlatform.set(platform);
-        console.log(`Shared to ${platform} - Total shares: ${currentCount + 1}`);
-    };
-    return {
-        availablePlatforms,
-        shareCount,
-        lastSharedPlatform,
-        shareToFacebook,
-        shareToTwitter,
-        shareToLinkedIn,
-        shareToWhatsApp,
-        shareToEmail,
-        copyToClipboard,
-        shareNative,
-        trackShare,
-    };
-});

package/dist/react/SocialSharing.d.ts

@@ -1,194 +0,0 @@
-import React from "react";
-import { type SharingPlatform } from "../services/social-sharing-service.js";
-/**
- * Props for Root headless component
- */
-export interface RootProps {
-    /** Render prop function that receives sharing data */
-    children: (props: RootRenderProps) => React.ReactNode;
-}
-/**
- * Render props for Root component
- */
-export interface RootRenderProps {
-    /** Available sharing platforms */
-    platforms: SharingPlatform[];
-    /** Total share count */
-    shareCount: number;
-    /** Last shared platform */
-    lastShared: string | null;
-    /** Share to Facebook */
-    shareFacebook: (url: string, title: string, description?: string) => void;
-    /** Share to Twitter */
-    shareTwitter: (url: string, text: string, hashtags?: string[]) => void;
-    /** Share to LinkedIn */
-    shareLinkedIn: (url: string, title: string, summary?: string) => void;
-    /** Share to WhatsApp */
-    shareWhatsApp: (url: string, text: string) => void;
-    /** Share via Email */
-    shareEmail: (url: string, subject: string, body: string) => void;
-    /** Copy to clipboard */
-    copyLink: (url: string) => Promise<boolean>;
-    /** Native share API */
-    shareNative: (data: {
-        title: string;
-        text: string;
-        url: string;
-    }) => Promise<boolean>;
-}
-/**
- * Headless component for social sharing root
- *
- * @component
- * @example
- * ```tsx
- * import { SocialSharing } from '@wix/stores/components';
- *
- * function ShareProduct() {
- *   const productUrl = 'https://example.com/product/123';
- *   const productTitle = 'Amazing Product';
- *
- *   return (
- *     <SocialSharing.Root>
- *       {({ platforms, shareCount, shareFacebook, shareTwitter, copyLink, shareNative }) => (
- *         <div>
- *           <p>Share this product ({shareCount} shares)</p>
- *           <div className="share-buttons">
- *             <button onClick={() => shareFacebook(productUrl, productTitle)}>
- *               Share on Facebook
- *             </button>
- *             <button onClick={() => shareTwitter(productUrl, `Check out ${productTitle}!`)}>
- *               Share on Twitter
- *             </button>
- *             <button onClick={() => copyLink(productUrl)}>
- *               Copy Link
- *             </button>
- *             <button onClick={() => shareNative({
- *               title: productTitle,
- *               text: 'Check this out!',
- *               url: productUrl
- *             })}>
- *               Share
- *             </button>
- *           </div>
- *         </div>
- *       )}
- *     </SocialSharing.Root>
- *   );
- * }
- * ```
- */
-export declare const Root: (props: RootProps) => React.ReactNode;
-/**
- * Props for Platform headless component
- */
-export interface PlatformProps {
-    /** Platform data */
-    platform: SharingPlatform;
-    /** Click handler */
-    onClick: () => void;
-    /** Render prop function that receives platform data */
-    children: (props: PlatformRenderProps) => React.ReactNode;
-}
-/**
- * Render props for Platform component
- */
-export interface PlatformRenderProps {
-    /** Platform data */
-    platform: SharingPlatform;
-    /** Platform click handler */
-    onSelect: () => void;
-}
-/**
- * Headless component for individual social platform
- *
- * @component
- * @example
- * ```tsx
- * import { SocialSharing } from '@wix/stores/components';
- *
- * function SocialButton({ platform, onClick }) {
- *   return (
- *     <SocialSharing.Platform platform={platform} onClick={onClick}>
- *       {({ platform, onSelect }) => (
- *         <button
- *           onClick={onSelect}
- *           className={`social-btn social-btn-${platform.name.toLowerCase()}`}
- *         >
- *           <span className="icon">{platform.icon}</span>
- *           Share on {platform.name}
- *         </button>
- *       )}
- *     </SocialSharing.Platform>
- *   );
- * }
- * ```
- */
-export declare const Platform: (props: PlatformProps) => React.ReactNode;
-/**
- * Props for Platforms headless component
- */
-export interface PlatformsProps {
-    /** URL to share */
-    url: string;
-    /** Share title */
-    title: string;
-    /** Share description */
-    description?: string;
-    /** Hashtags for sharing */
-    hashtags?: string[];
-    /** Render prop function that receives platforms data */
-    children: (props: PlatformsRenderProps) => React.ReactNode;
-}
-/**
- * Render props for Platforms component
- */
-export interface PlatformsRenderProps {
-    /** Available platforms */
-    platforms: SharingPlatform[];
-    /** Share to Facebook */
-    shareFacebook: () => void;
-    /** Share to Twitter */
-    shareTwitter: () => void;
-    /** Share to LinkedIn */
-    shareLinkedIn: () => void;
-    /** Share to WhatsApp */
-    shareWhatsApp: () => void;
-    /** Share via Email */
-    shareEmail: () => void;
-    /** Copy link to clipboard */
-    copyLink: () => Promise<boolean>;
-    /** Share natively */
-    shareNative: () => Promise<boolean>;
-}
-/**
- * Headless component for social sharing platforms with logic
- *
- * @component
- * @example
- * ```tsx
- * import { SocialSharing } from '@wix/stores/components';
- *
- * function SocialShareButtons() {
- *   return (
- *     <SocialSharing.Platforms
- *       url="https://example.com/product/123"
- *       title="Amazing Product"
- *       description="Check out this amazing product!"
- *       hashtags={['product', 'amazing']}
- *     >
- *       {({ platforms, shareFacebook, shareTwitter, shareLinkedIn, copyLink, shareNative }) => (
- *         <div className="social-platforms">
- *           <button onClick={shareFacebook}>Share on Facebook</button>
- *           <button onClick={shareTwitter}>Share on Twitter</button>
- *           <button onClick={shareLinkedIn}>Share on LinkedIn</button>
- *           <button onClick={() => copyLink()}>Copy Link</button>
- *           <button onClick={() => shareNative()}>Share</button>
- *         </div>
- *       )}
- *     </SocialSharing.Platforms>
- *   );
- * }
- * ```
- */
-export declare const Platforms: (props: PlatformsProps) => React.ReactNode;

package/dist/react/SocialSharing.js

@@ -1,170 +0,0 @@
-import React from "react";
-import { useService } from "@wix/services-manager-react";
-import { SocialSharingServiceDefinition, } from "../services/social-sharing-service.js";
-import { SignalsServiceDefinition } from "@wix/services-definitions/core-services/signals";
-/**
- * Headless component for social sharing root
- *
- * @component
- * @example
- * ```tsx
- * import { SocialSharing } from '@wix/stores/components';
- *
- * function ShareProduct() {
- *   const productUrl = 'https://example.com/product/123';
- *   const productTitle = 'Amazing Product';
- *
- *   return (
- *     <SocialSharing.Root>
- *       {({ platforms, shareCount, shareFacebook, shareTwitter, copyLink, shareNative }) => (
- *         <div>
- *           <p>Share this product ({shareCount} shares)</p>
- *           <div className="share-buttons">
- *             <button onClick={() => shareFacebook(productUrl, productTitle)}>
- *               Share on Facebook
- *             </button>
- *             <button onClick={() => shareTwitter(productUrl, `Check out ${productTitle}!`)}>
- *               Share on Twitter
- *             </button>
- *             <button onClick={() => copyLink(productUrl)}>
- *               Copy Link
- *             </button>
- *             <button onClick={() => shareNative({
- *               title: productTitle,
- *               text: 'Check this out!',
- *               url: productUrl
- *             })}>
- *               Share
- *             </button>
- *           </div>
- *         </div>
- *       )}
- *     </SocialSharing.Root>
- *   );
- * }
- * ```
- */
-export const Root = (props) => {
-    const service = useService(SocialSharingServiceDefinition);
-    const signalsService = useService(SignalsServiceDefinition);
-    const [platforms, setPlatforms] = React.useState([]);
-    const [shareCount, setShareCount] = React.useState(0);
-    const [lastShared, setLastShared] = React.useState(null);
-    React.useEffect(() => {
-        const effects = [
-            signalsService.effect(() => {
-                setPlatforms(service.availablePlatforms.get());
-            }),
-            signalsService.effect(() => {
-                setShareCount(service.shareCount.get());
-            }),
-            signalsService.effect(() => {
-                setLastShared(service.lastSharedPlatform.get());
-            }),
-        ];
-        return () => effects.forEach((dispose) => dispose());
-    }, [service, signalsService]);
-    return props.children({
-        platforms,
-        shareCount,
-        lastShared,
-        shareFacebook: service.shareToFacebook,
-        shareTwitter: service.shareToTwitter,
-        shareLinkedIn: service.shareToLinkedIn,
-        shareWhatsApp: service.shareToWhatsApp,
-        shareEmail: service.shareToEmail,
-        copyLink: service.copyToClipboard,
-        shareNative: service.shareNative,
-    });
-};
-/**
- * Headless component for individual social platform
- *
- * @component
- * @example
- * ```tsx
- * import { SocialSharing } from '@wix/stores/components';
- *
- * function SocialButton({ platform, onClick }) {
- *   return (
- *     <SocialSharing.Platform platform={platform} onClick={onClick}>
- *       {({ platform, onSelect }) => (
- *         <button
- *           onClick={onSelect}
- *           className={`social-btn social-btn-${platform.name.toLowerCase()}`}
- *         >
- *           <span className="icon">{platform.icon}</span>
- *           Share on {platform.name}
- *         </button>
- *       )}
- *     </SocialSharing.Platform>
- *   );
- * }
- * ```
- */
-export const Platform = (props) => {
-    const { platform, onClick } = props;
-    return props.children({
-        platform,
-        onSelect: onClick,
-    });
-};
-/**
- * Headless component for social sharing platforms with logic
- *
- * @component
- * @example
- * ```tsx
- * import { SocialSharing } from '@wix/stores/components';
- *
- * function SocialShareButtons() {
- *   return (
- *     <SocialSharing.Platforms
- *       url="https://example.com/product/123"
- *       title="Amazing Product"
- *       description="Check out this amazing product!"
- *       hashtags={['product', 'amazing']}
- *     >
- *       {({ platforms, shareFacebook, shareTwitter, shareLinkedIn, copyLink, shareNative }) => (
- *         <div className="social-platforms">
- *           <button onClick={shareFacebook}>Share on Facebook</button>
- *           <button onClick={shareTwitter}>Share on Twitter</button>
- *           <button onClick={shareLinkedIn}>Share on LinkedIn</button>
- *           <button onClick={() => copyLink()}>Copy Link</button>
- *           <button onClick={() => shareNative()}>Share</button>
- *         </div>
- *       )}
- *     </SocialSharing.Platforms>
- *   );
- * }
- * ```
- */
-export const Platforms = (props) => {
-    const { url, title, description = "", hashtags = [] } = props;
-    const service = useService(SocialSharingServiceDefinition);
-    const signalsService = useService(SignalsServiceDefinition);
-    const [platforms, setPlatforms] = React.useState([]);
-    React.useEffect(() => {
-        const dispose = signalsService.effect(() => {
-            setPlatforms(service.availablePlatforms.get());
-        });
-        return dispose;
-    }, [service, signalsService]);
-    const shareFacebook = () => service.shareToFacebook(url, title, description);
-    const shareTwitter = () => service.shareToTwitter(url, title, hashtags);
-    const shareLinkedIn = () => service.shareToLinkedIn(url, title, description);
-    const shareWhatsApp = () => service.shareToWhatsApp(url, `${title} - ${description}`);
-    const shareEmail = () => service.shareToEmail(url, title, description);
-    const copyLink = () => service.copyToClipboard(url);
-    const shareNative = () => service.shareNative({ title, text: description, url });
-    return props.children({
-        platforms,
-        shareFacebook,
-        shareTwitter,
-        shareLinkedIn,
-        shareWhatsApp,
-        shareEmail,
-        copyLink,
-        shareNative,
-    });
-};