wix-storybook-utils/dist/es/src/Playground/index.js

Utilities for automated component documentation within Storybook

import { __assign, __rest } from "tslib";
import React from 'react';
import * as queryString from 'query-string';
import UploadExportSmall from '../icons/UploadExportSmall';
import LiveCodeExample from '../LiveCodeExample';
import TextButton from '../TextButton';
import { formatCode } from '../LiveCodeExample/doctor-code';
import styles from './styles.scss';
import { previewWarning } from './preview-warning';
import { saveSnippet, loadSnippet } from './snippet';
import { SaveSuccess } from './save-success';
var getView = function (views, view) { return (views[view] || views[0 /* ViewState.Idle */])(); };
var dirty = false;
var Playground = function (_a) {
    var _b, _c;
    var _d = _a.initialCode, initialCode = _d === void 0 ? '' : _d, formatSnippetUrl = _a.formatSnippetUrl, snippetDatastoreUrl = _a.snippetDatastoreUrl, rest = __rest(_a, ["initialCode", "formatSnippetUrl", "snippetDatastoreUrl"]);
    var initialState = {
        editorCode: formatCode(initialCode),
        loadedCode: formatCode(initialCode),
        viewState: 0 /* ViewState.Idle */,
        snippetId: '',
        showPreviewWarning: false,
    };
    var _e = React.useReducer(function (currentState, newState) { return (__assign(__assign({}, currentState), newState)); }, initialState), state = _e[0], setState = _e[1];
    React.useEffect(function () {
        var snippetId = queryString.parse(window.location.search).snippet || null;
        if (snippetId) {
            setState({ viewState: 1 /* ViewState.Loading */ });
            loadSnippet(snippetId, snippetDatastoreUrl)
                .then(function (loaded) {
                return setState({
                    loadedCode: formatCode(loaded.code),
                    viewState: 0 /* ViewState.Idle */,
                    showPreviewWarning: !loaded.isSafe,
                    snippetId: snippetId,
                });
            })
                .catch(function (error) {
                console.log(error);
                setState({ viewState: 5 /* ViewState.LoadFailure */, snippetId: snippetId });
            });
        }
        var onBeforeUnload = function (event) {
            if (dirty) {
                event.returnValue = 'Sure you want to leave?';
            }
        };
        window.addEventListener('beforeunload', onBeforeUnload);
        return function () { return window.removeEventListener('beforeunload', onBeforeUnload); };
    }, []);
    var memoizedLiveCodeExample = React.useMemo(function () { return (React.createElement(LiveCodeExample, __assign({ initialCode: state.loadedCode, previewWarning: state.showPreviewWarning ? previewWarning : null, onChange: function (editorCode) {
            var formatted = formatCode(editorCode);
            dirty = formatted !== state.loadedCode;
            setState({
                editorCode: formatted,
            });
        }, previewProps: { className: styles.overflowPreview }, title: "Playground-component", storyName: "Playground", storage: window.localStorage, forceInitialCode: !!state.snippetId }, rest))); }, [state.loadedCode]);
    var headerViews = (_b = {},
        _b[0 /* ViewState.Idle */] = function () { return (React.createElement(TextButton, { onClick: function () {
                setState({ viewState: 2 /* ViewState.Saving */ });
                saveSnippet(state.editorCode, snippetDatastoreUrl)
                    .then(function (snippetId) {
                    return setState({ snippetId: snippetId, viewState: 3 /* ViewState.SaveSuccess */ });
                })
                    .catch(function (error) {
                    console.error('Unable to save snippet', error);
                    setState({ viewState: 4 /* ViewState.SaveFailure */ });
                });
            }, disabled: state.editorCode === state.loadedCode, prefixIcon: React.createElement(UploadExportSmall, null) }, "Save")); },
        _b[3 /* ViewState.SaveSuccess */] = function () { return (React.createElement(SaveSuccess, { snippetId: state.snippetId, formatUrl: formatSnippetUrl, onClose: function () { return setState({ viewState: 0 /* ViewState.Idle */ }); } })); },
        _b[2 /* ViewState.Saving */] = function () { return 'Saving...'; },
        // don't render anything in header if loading failed
        _b[5 /* ViewState.LoadFailure */] = function () { return null; },
        _b[4 /* ViewState.SaveFailure */] = function () { return (React.createElement(React.Fragment, null,
            "Unable to save sippet :(",
            React.createElement(TextButton, { onClick: function () { return setState({ viewState: 0 /* ViewState.Idle */ }); } }, "Try again"))); },
        _b);
    var views = (_c = {},
        _c[0 /* ViewState.Idle */] = function () { return memoizedLiveCodeExample; },
        _c[1 /* ViewState.Loading */] = function () { return 'Loading saved code snippet...'; },
        _c[5 /* ViewState.LoadFailure */] = function () { return (React.createElement("div", { className: styles.previewWarning },
            React.createElement("h3", null, "Error!"),
            React.createElement("p", null,
                "Tried to load snippet ID ",
                React.createElement("strong", null, state.snippetId),
                " but did not find it."),
            React.createElement("button", { className: styles.previewConfirmButton, onClick: function () { return setState({ viewState: 0 /* ViewState.Idle */ }); } }, "Reset Editor"))); },
        _c);
    return (React.createElement(React.Fragment, null,
        React.createElement("div", { className: styles.header }, getView(headerViews, state.viewState)),
        getView(views, state.viewState)));
};
export default Playground;
//# sourceMappingURL=index.js.map