wix-storybook-utils
Version:
Utilities for automated component documentation within Storybook
96 lines • 6.4 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var queryString = tslib_1.__importStar(require("query-string"));
var UploadExportSmall_1 = tslib_1.__importDefault(require("../icons/UploadExportSmall"));
var LiveCodeExample_1 = tslib_1.__importDefault(require("../LiveCodeExample"));
var TextButton_1 = tslib_1.__importDefault(require("../TextButton"));
var doctor_code_1 = require("../LiveCodeExample/doctor-code");
var styles_scss_1 = tslib_1.__importDefault(require("./styles.scss"));
var preview_warning_1 = require("./preview-warning");
var snippet_1 = require("./snippet");
var save_success_1 = require("./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 = tslib_1.__rest(_a, ["initialCode", "formatSnippetUrl", "snippetDatastoreUrl"]);
var initialState = {
editorCode: (0, doctor_code_1.formatCode)(initialCode),
loadedCode: (0, doctor_code_1.formatCode)(initialCode),
viewState: 0 /* ViewState.Idle */,
snippetId: '',
showPreviewWarning: false,
};
var _e = react_1.default.useReducer(function (currentState, newState) { return (tslib_1.__assign(tslib_1.__assign({}, currentState), newState)); }, initialState), state = _e[0], setState = _e[1];
react_1.default.useEffect(function () {
var snippetId = queryString.parse(window.location.search).snippet || null;
if (snippetId) {
setState({ viewState: 1 /* ViewState.Loading */ });
(0, snippet_1.loadSnippet)(snippetId, snippetDatastoreUrl)
.then(function (loaded) {
return setState({
loadedCode: (0, doctor_code_1.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_1.default.useMemo(function () { return (react_1.default.createElement(LiveCodeExample_1.default, tslib_1.__assign({ initialCode: state.loadedCode, previewWarning: state.showPreviewWarning ? preview_warning_1.previewWarning : null, onChange: function (editorCode) {
var formatted = (0, doctor_code_1.formatCode)(editorCode);
dirty = formatted !== state.loadedCode;
setState({
editorCode: formatted,
});
}, previewProps: { className: styles_scss_1.default.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_1.default.createElement(TextButton_1.default, { onClick: function () {
setState({ viewState: 2 /* ViewState.Saving */ });
(0, snippet_1.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_1.default.createElement(UploadExportSmall_1.default, null) }, "Save")); },
_b[3 /* ViewState.SaveSuccess */] = function () { return (react_1.default.createElement(save_success_1.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_1.default.createElement(react_1.default.Fragment, null,
"Unable to save sippet :(",
react_1.default.createElement(TextButton_1.default, { 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_1.default.createElement("div", { className: styles_scss_1.default.previewWarning },
react_1.default.createElement("h3", null, "Error!"),
react_1.default.createElement("p", null,
"Tried to load snippet ID ",
react_1.default.createElement("strong", null, state.snippetId),
" but did not find it."),
react_1.default.createElement("button", { className: styles_scss_1.default.previewConfirmButton, onClick: function () { return setState({ viewState: 0 /* ViewState.Idle */ }); } }, "Reset Editor"))); },
_c);
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: styles_scss_1.default.header }, getView(headerViews, state.viewState)),
getView(views, state.viewState)));
};
exports.default = Playground;
//# sourceMappingURL=index.js.map