storybook-addon-react-runner/dist/esm/Panel.js

Storybook addon to provide react live preview powered by react-runner

import React from "react";
import { addons } from "@storybook/addons";
import { useParameter } from "@storybook/api";
import { AddonPanel } from "@storybook/components";
import { EVENTS, PARAM_KEY, SOURCE_KEY } from "./constants";
import { CodeEditor } from "./components/CodeEditor";

var handleChange = function handleChange(code) {
  addons.getChannel().emit(EVENTS.SET_CODE, code);
};

var stopPropagation = function stopPropagation(event) {
  return event.stopPropagation();
};

export var Panel = function Panel(props) {
  var _useParameter;

  var source = ((_useParameter = useParameter(SOURCE_KEY)) === null || _useParameter === void 0 ? void 0 : _useParameter.source) || "";
  var options = useParameter(PARAM_KEY);
  return /*#__PURE__*/React.createElement(AddonPanel, props, !!source && /*#__PURE__*/React.createElement(CodeEditor, {
    key: source,
    theme: options === null || options === void 0 ? void 0 : options.theme,
    language: options === null || options === void 0 ? void 0 : options.language,
    readOnly: options === null || options === void 0 ? void 0 : options.readOnly,
    padding: "1rem",
    defaultValue: source,
    onChange: handleChange // prevent sidebar stories navigation
    ,
    onKeyDown: stopPropagation
  }));
};