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

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

import { useAddonState, useParameter } from '@storybook/manager-api';
import { useCallback } from 'react';
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 '@codemirror/commands';
import 'prettier';
import 'prettier/parser-html';
import 'prettier/parser-typescript';
import 'prettier/parser-postcss';
import 'lz-string';
import { clearStoredCode } from '../utils/persistence-utils.js';

const usePlaygroundArgs = () => {
    const [state, setState] = useAddonState(PANEL_ID, DEFAULT_ADDON_STATE);
    const { code, selectedTab } = state;
    const { introCode } = useParameter(ADDON_ID_FOR_PARAMETERS, DEFAULT_ADDON_PARAMETERS);
    const updateCode = useCallback((newCode) => {
        const updatedCode = { ...code, [selectedTab]: newCode };
        setState((state) => ({ ...state, code: updatedCode }));
    }, [code, selectedTab, setState]);
    const resetCode = useCallback(() => {
        clearStoredCode();
        const resetValue = introCode?.[selectedTab] ?? "";
        const updatedCode = { ...code, [selectedTab]: resetValue };
        setState((state) => ({ ...state, code: updatedCode }));
    }, [code, selectedTab, setState, introCode]);
    return { updateCode, resetCode };
};

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