storybook-addon-playground/dist/hooks/useShare.js

A playground to enable consumers learn how to use the component library or to reproduce bugs

import { useState, useMemo, useCallback } from 'react';
import 'prettier';
import 'prettier/parser-html';
import 'prettier/parser-typescript';
import 'prettier/parser-postcss';
import { compressAndEncode } from '../utils/encode-decode-utils.js';
import { ADDON_ID_FOR_PARAMETERS } from '../consts/addon-consts.js';
import { DEFAULT_ADDON_PARAMETERS } from '../consts/parameter-consts.js';
import { SNIPPET_SHARE_QUERY_ID } from '../consts/editor-consts.js';
import usePlaygroundState from './usePlaygroundState.js';
import { useParameter } from '@storybook/manager-api';

const useShare = (code) => {
    const { playgroundStoryBaseUrl } = usePlaygroundState();
    const { share: enableShare } = useParameter(ADDON_ID_FOR_PARAMETERS, DEFAULT_ADDON_PARAMETERS);
    const [isShareCopied, setShareCopied] = useState(false);
    const shouldAllowShare = useMemo(() => Boolean(code?.jsx || code?.css) && enableShare, [code?.css, code?.jsx, enableShare]);
    const onShare = useCallback(async () => {
        if (!shouldAllowShare) {
            return;
        }
        const encoded = compressAndEncode(code);
        const url = new URL(await playgroundStoryBaseUrl);
        url.searchParams.append(SNIPPET_SHARE_QUERY_ID, encoded);
        navigator.clipboard.writeText(url.href);
        setShareCopied(true);
        setTimeout(() => setShareCopied(false), 2000);
    }, [code, playgroundStoryBaseUrl, shouldAllowShare]);
    return { onShare, isShareCopied, shouldAllowShare };
};

export { useShare as default };
//# sourceMappingURL=useShare.js.map