storybook-addon-playground
Version:
A playground to enable consumers learn how to use the component library or to reproduce bugs
67 lines (64 loc) • 3.52 kB
JavaScript
import React__default, { useRef, useMemo, Suspense } from 'react';
import Editor from '../Editor/Editor.js';
import EditorToolbar from '../Editor/EditorToolbar.js';
import '../Editor/EditorTab.js';
import '../Editor/EditorTabs.module.css.js';
import usePlaygroundArgs from '../../hooks/usePlaygroundArgs.js';
import { useParameter, useAddonState } from '@storybook/manager-api';
import '@storybook/addon-links';
import { ADDON_ID_FOR_PARAMETERS, PANEL_ID } from '../../consts/addon-consts.js';
import { DEFAULT_ADDON_PARAMETERS } from '../../consts/parameter-consts.js';
import { DEFAULT_ADDON_STATE } from '../../consts/state-consts.js';
import { EDITOR_STATE_FIELDS } from '../../consts/editor-consts.js';
import 'prettier';
import 'prettier/parser-html';
import 'prettier/parser-typescript';
import 'prettier/parser-postcss';
import 'lz-string';
import useInitialCode from '../../hooks/useInitialCode.js';
import useAutoOpenPlayground from '../../hooks/useAutoOpenPlayground.js';
import useBroadcastEditorChanges from '../../hooks/useBroadcastEditorChanges.js';
import '@storybook/preview-api';
import useEditorTheme from '../../hooks/useEditorTheme.js';
import usePersistence from '../../hooks/usePersistence.js';
import { AddonPanel } from '@storybook/components';
import { keymap } from '@uiw/react-codemirror';
import { langs } from '@uiw/codemirror-extensions-langs';
import styles from './Panel.module.css.js';
import playgroundAutocompletion from '../../codemirror/extensions/autocomplete.js';
import playgroundKeymaps from '../../codemirror/keymaps/index.js';
const Panel = ({ active }) => {
const editorRef = useRef(null);
useInitialCode();
useBroadcastEditorChanges();
useAutoOpenPlayground();
usePersistence();
const theme = useEditorTheme();
const { updateCode } = usePlaygroundArgs();
const { autocompletions } = useParameter(ADDON_ID_FOR_PARAMETERS, DEFAULT_ADDON_PARAMETERS);
const [state] = useAddonState(PANEL_ID, DEFAULT_ADDON_STATE);
const extensions = useMemo(() => ({
jsx: [
playgroundAutocompletion(autocompletions),
keymap.of(playgroundKeymaps),
langs.javascript({ jsx: true, typescript: true }),
],
css: [langs.css()],
}), [autocompletions]);
const { code, selectedTab, hasInitialCodeLoaded, editorState } = state;
const editorInitialState = useMemo(() => ({
json: editorState[selectedTab],
fields: EDITOR_STATE_FIELDS,
}), [editorState, selectedTab]);
return (React__default.createElement(AddonPanel, { active: active },
React__default.createElement("div", { className: styles.panel },
React__default.createElement(EditorToolbar, { editorRef: editorRef }),
React__default.createElement("div", { className: styles.editorWrapper },
React__default.createElement("div", { className: styles.editor },
React__default.createElement(Suspense, { fallback: "Loading Editor..." },
React__default.createElement(Editor, { key: selectedTab, ref: editorRef, loading: !hasInitialCodeLoaded, placeholder: `Insert your ${selectedTab.toUpperCase()} code here`, code: code[selectedTab], theme: theme, extensions: extensions[selectedTab], style: { fontSize: 13 }, onChange: updateCode, initialState: editorInitialState, setup: {
foldGutter: false,
} })))))));
};
export { Panel as default };
//# sourceMappingURL=Panel.js.map