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

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

import { useMemo, useEffect } from 'react';
import { useStorybookApi, useAddonState, useParameter } from '@storybook/manager-api';
import { PANEL_ID, ADDON_ID_FOR_PARAMETERS } from '../consts/addon-consts.js';
import { DEFAULT_ADDON_PARAMETERS } from '../consts/parameter-consts.js';
import { DEFAULT_ADDON_STATE } from '../consts/state-consts.js';
import { SNIPPET_SHARE_QUERY_ID } from '../consts/editor-consts.js';
import 'prettier';
import 'prettier/parser-html';
import 'prettier/parser-typescript';
import 'prettier/parser-postcss';
import { decodeAndDecompress } from '../utils/encode-decode-utils.js';
import { loadCodeFromStorage } from '../utils/persistence-utils.js';

const useInitialCode = () => {
    const { getQueryParam } = useStorybookApi();
    const [state, setState] = useAddonState(PANEL_ID, DEFAULT_ADDON_STATE);
    const { hasInitialCodeLoaded } = state;
    const { introCode, share: enableShare } = useParameter(ADDON_ID_FOR_PARAMETERS, DEFAULT_ADDON_PARAMETERS);
    const sharedCode = useMemo(() => {
        const shared = getQueryParam(SNIPPET_SHARE_QUERY_ID);
        if (!shared) {
            return null;
        }
        return decodeAndDecompress(shared);
    }, [getQueryParam]);
    const persistedCode = useMemo(() => {
        return loadCodeFromStorage();
    }, []);
    const initialCodeToSet = useMemo(() => {
        if (enableShare && hasValidCode(sharedCode)) {
            return sharedCode;
        }
        if (hasValidCode(persistedCode)) {
            return persistedCode;
        }
        if (hasValidCode(introCode)) {
            return introCode;
        }
        return DEFAULT_ADDON_STATE.code;
    }, [enableShare, sharedCode, persistedCode, introCode]);
    useEffect(() => {
        if (hasInitialCodeLoaded || introCode === null) {
            return;
        }
        setState((state) => ({
            ...state,
            code: initialCodeToSet,
            hasInitialCodeLoaded: true,
        }));
    }, [hasInitialCodeLoaded, introCode, setState, initialCodeToSet]);
};
function hasValidCode(code) {
    return code && Object.values(code).some(Boolean);
}

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