chore(demo): updated demo structure (#484)

.storybook/preview.ts

@@ -1,7 +1,7 @@
 import type {Preview} from '@storybook/react';
 import {MINIMAL_VIEWPORTS} from '@storybook/addon-viewport';
-
-import {withThemeProvider, withLang} from '../demo/utils/preview';
+import {withThemeProvider} from '../demo/hocs/withThemeProvider';
+import {withLang} from '../demo/hocs/withLang';
 
 const preview: Preview = {
     decorators: [withThemeProvider, withLang],
@@ -12,12 +12,12 @@ const preview: Preview = {
         },
         options: {
             storySort: {
-                order: ['Markdown Editor', ['Playground', '*'], '*'],
-            }
+                order: ['Markdown Editor', ['Playground', 'Presets', '*'], '*'],
+            },
         },
         controls: {
-            exclude: ['withDefaultInitialContent', 'initial']
-        }
+            exclude: ['withDefaultInitialContent', 'initial'],
+        },
     },
     globalTypes: {
         theme: {

demo/PMSelection.tsx → demo/components/PMSelection.tsx

@@ -9,7 +9,7 @@ import {
     isNodeSelection,
     isTextSelection,
     isWholeSelection,
-} from '../src';
+} from '../../src';
 
 export type WysiwygSelectionProps = ClassNameProps & {
     editor: MarkdownEditorInstance;

demo/playground/Playground.scss → demo/components/Playground.scss

@@ -1,4 +1,4 @@
-@import '~@gravity-ui/uikit/styles/mixins.scss';
+@import '../../node_modules/@gravity-ui/uikit/styles/mixins';
 
 .playground {
     max-width: 1296px;

demo/playground/Playground.tsx → demo/components/Playground.tsx

@@ -30,17 +30,17 @@ import {getSanitizeYfmHtmlBlock} from '../../src/extensions/additional/YfmHtmlBl
 import {cloneDeep} from '../../src/lodash';
 import {CodeEditor} from '../../src/markup';
 import {VERSION} from '../../src/version';
-// ---
-import {WysiwygSelection} from '../PMSelection';
-import {WysiwygDevTools} from '../ProseMirrorDevTools';
-import {SplitModePreview} from '../SplitModePreview';
-import {block} from '../cn';
-import {plugins} from '../constants/md-plugins';
-import {randomDelay} from '../delay';
+import {plugins} from '../defaults/md-plugins';
 import useYfmHtmlBlockStyles from '../hooks/useYfmHtmlBlockStyles';
+import {block} from '../utils/cn';
+import {randomDelay} from '../utils/delay';
 import {parseInsertedUrlAsImage} from '../utils/imageUrl';
 import {debouncedUpdateLocation as updateLocation} from '../utils/location';
 
+import {WysiwygSelection} from './PMSelection';
+import {WysiwygDevTools} from './ProseMirrorDevTools';
+import {SplitModePreview} from './SplitModePreview';
+
 import './Playground.scss';
 
 const b = block('playground');

demo/ProseMirrorDevTools.tsx → demo/components/ProseMirrorDevTools.tsx

@@ -4,7 +4,7 @@ import {applyDevTools, removeDevTools} from 'prosemirror-dev-toolkit';
 import {EditorView} from 'prosemirror-view';
 import {useEffectOnce, useUpdate} from 'react-use';
 
-import type {MarkdownEditorInstance} from '../src';
+import type {MarkdownEditorInstance} from '../../src';
 
 export type WysiwygDevToolsProps = {
     editor: MarkdownEditorInstance;

demo/SplitModePreview.tsx → demo/components/SplitModePreview.tsx

@@ -3,15 +3,14 @@ import React, {useEffect, useMemo, useRef, useState} from 'react';
 import transform from '@diplodoc/transform';
 import {useThemeValue} from '@gravity-ui/uikit';
 
-import {MarkupString, colorClassName} from '../src';
-import {debounce} from '../src/lodash';
-import {YfmStaticView} from '../src/view/components/YfmHtml';
-import {withLatex} from '../src/view/hocs/withLatex';
-import {MermaidConfig, withMermaid} from '../src/view/hocs/withMermaid';
-import {withYfmHtmlBlock} from '../src/view/hocs/withYfmHtml';
-
-import {LATEX_RUNTIME, MERMAID_RUNTIME, YFM_HTML_BLOCK_RUNTIME} from './constants/md-plugins';
-import useYfmHtmlBlockStyles from './hooks/useYfmHtmlBlockStyles';
+import {MarkupString, colorClassName} from '../../src';
+import {debounce} from '../../src/lodash';
+import {YfmStaticView} from '../../src/view/components/YfmHtml';
+import {withLatex} from '../../src/view/hocs/withLatex';
+import {MermaidConfig, withMermaid} from '../../src/view/hocs/withMermaid';
+import {withYfmHtmlBlock} from '../../src/view/hocs/withYfmHtml';
+import {LATEX_RUNTIME, MERMAID_RUNTIME, YFM_HTML_BLOCK_RUNTIME} from '../defaults/md-plugins';
+import useYfmHtmlBlockStyles from '../hooks/useYfmHtmlBlockStyles';
 
 const ML_ATTR = 'data-ml';
 const mermaidConfig: MermaidConfig = {theme: 'forest'};

demo/constants/default-args.ts → demo/defaults/args.ts

@@ -1,8 +1,8 @@
 import {Meta} from '@storybook/react';
 
-import {PlaygroundMiniProps} from '../playground/PlaygroundMini';
+import {PlaygroundMiniProps} from '../components/PlaygroundMini';
 
-export const defaultArgs: Meta<PlaygroundMiniProps>['args'] = {
+export const args: Meta<PlaygroundMiniProps>['args'] = {
     initialEditor: 'wysiwyg',
     settingsVisible: true,
     allowHTML: true,

demo/constants/md-content.ts → demo/defaults/content.ts

@@ -1,4 +1,4 @@
-export const initialMdContent = `
+export const markup = `
  
 
 Welcome to the editor! Start typing the character \`/\`

demo/utils/preview.tsx → demo/hocs/withLang.tsx

@@ -1,20 +1,12 @@
 import React from 'react';
 
-import {ThemeProvider, configure} from '@gravity-ui/uikit';
+import {configure} from '@gravity-ui/uikit';
 import type {Decorator} from '@storybook/react';
 
 import {configure as configureYfmEditor} from '../../src';
 
 import '@gravity-ui/uikit/styles/styles.scss';
 
-export const withThemeProvider: Decorator = (StoryItem, context) => {
-    return (
-        <ThemeProvider theme={context.globals.theme}>
-            <StoryItem {...context} />
-        </ThemeProvider>
-    );
-};
-
 export const withLang: Decorator = (StoryItem, context) => {
     const lang = context.globals.lang;
     configure({lang});

demo/hocs/withThemeProvider.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import {ThemeProvider} from '@gravity-ui/uikit';
+import type {Decorator} from '@storybook/react';
+
+import '@gravity-ui/uikit/styles/styles.scss';
+
+export const withThemeProvider: Decorator = (StoryItem, context) => {
+    return (
+        <ThemeProvider theme={context.globals.theme}>
+            <StoryItem {...context} />
+        </ThemeProvider>
+    );
+};