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

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

import { useStorybookApi, useParameter, useStorybookState } from '@storybook/manager-api';
import { hrefTo } from '@storybook/addon-links';
import { useMemo } from 'react';
import { ADDON_ID_FOR_PARAMETERS } from '../consts/addon-consts.js';
import { DEFAULT_ADDON_PARAMETERS } from '../consts/parameter-consts.js';
import '@codemirror/commands';
import 'prettier';
import 'prettier/parser-html';
import 'prettier/parser-typescript';
import 'prettier/parser-postcss';
import { getStoryId } from '../utils/storybook-utils.js';
import 'lz-string';

const usePlaygroundState = () => {
    const { resolveStory } = useStorybookApi();
    const { storyId } = useParameter(ADDON_ID_FOR_PARAMETERS, DEFAULT_ADDON_PARAMETERS);
    const { storyId: currentStoryId, previewInitialized } = useStorybookState();
    const playgroundStoryBaseUrl = useMemo(async () => {
        return await hrefTo(storyId, "");
    }, [storyId]);
    const playgroundStoryId = useMemo(() => {
        if (!previewInitialized) {
            return null;
        }
        const resolved = resolveStory(storyId);
        if (!resolved) {
            throw new Error(`[Playground Error]: Could not resolve playground story with id ${storyId}. 
        Make sure you passed storyId in your preview.ts file, and that a story file with that name exists.
        See example in docs for more info.`);
        }
        return getStoryId(resolved);
    }, [previewInitialized, resolveStory, storyId]);
    const isPlaygroundStorySelected = useMemo(() => {
        if (!previewInitialized) {
            return false;
        }
        return currentStoryId === playgroundStoryId;
    }, [previewInitialized, currentStoryId, playgroundStoryId]);
    return {
        playgroundStoryBaseUrl,
        playgroundStoryId,
        isPlaygroundStorySelected,
    };
};

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