From 48b9fc7525176d38d592a72d1cd025a6c02f8d86 Mon Sep 17 00:00:00 2001 From: Yuriy Demidov Date: Tue, 4 Jun 2024 20:35:04 +0300 Subject: [PATCH] docs(demo): add more stories to storybook playground (#262) Added stories showing individual features of the editor --- .storybook/preview.ts | 7 +- demo/Markdown.stories.tsx | 281 ++++++++++++++++++++++ demo/PlaygroundEditorInEditor.stories.tsx | 2 +- demo/YFM.stories.tsx | 243 +++++++++++++++++++ demo/utils/preview.tsx | 7 - 5 files changed, 531 insertions(+), 9 deletions(-) create mode 100644 demo/Markdown.stories.tsx create mode 100644 demo/YFM.stories.tsx diff --git a/.storybook/preview.ts b/.storybook/preview.ts index b33f8c46..8d2f4f4e 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -1,7 +1,7 @@ import type {Preview} from '@storybook/react'; import {MINIMAL_VIEWPORTS} from '@storybook/addon-viewport'; -import {withThemeProvider, withLang, backgrounds} from '../demo/utils/preview'; +import {withThemeProvider, withLang} from '../demo/utils/preview'; const preview: Preview = { decorators: [withThemeProvider, withLang], @@ -10,6 +10,11 @@ const preview: Preview = { viewport: { viewports: MINIMAL_VIEWPORTS, }, + options: { + storySort: { + order: ['Markdown Editor', ['Playground', '*'], '*'], + } + }, }, globalTypes: { theme: { diff --git a/demo/Markdown.stories.tsx b/demo/Markdown.stories.tsx new file mode 100644 index 00000000..588a7d10 --- /dev/null +++ b/demo/Markdown.stories.tsx @@ -0,0 +1,281 @@ +import React from 'react'; + +// eslint-disable-next-line import/no-extraneous-dependencies +import type {Meta, StoryFn} from '@storybook/react'; + +import {Playground as PlaygroundComponent, PlaygroundProps} from './Playground'; + +export default { + title: 'Markdown Editor / Markdown examples', +} as Meta; + +const markup = { + heading: ` +# h1 Heading +## h2 Heading +### h3 Heading +#### h4 Heading +##### h5 Heading +###### h6 Heading +`.trim(), + + blockquote: ` +## Blockquotes + + +> Blockquotes can also be nested... +>> ...by using additional greater-than signs right next to each other... +> > > ...or with spaces between arrows. +`.trim(), + + emphasis: ` +## Emphasis + +**This is bold text** + +__This is bold text__ + +*This is italic text* + +_This is italic text_ + +~~Strikethrough~~ + +### Additional: + +++Inserted text++ + +==Marked text== +`.trim(), + + horizontalRules: ` +## Horizontal Rules + +___ + +--- + +*** +`.trim(), + + lists: ` +## Lists + +Unordered + ++ Create a list by starting a line with \`+\`, \`-\`, or \`*\` ++ Sub-lists are made by indenting 2 spaces: + - Marker character change forces new list start: + * Ac tristique libero volutpat at + + Facilisis in pretium nisl aliquet + - Nulla volutpat aliquam velit ++ Very easy! + +Ordered + +1. Lorem ipsum dolor sit amet +2. Consectetur adipiscing elit +3. Integer molestie lorem at massa + + +1. You can use sequential numbers... +1. ...or keep all the numbers as \`1.\` + +Start numbering with offset: + +57. foo +1. bar +`.trim(), + + code: ` +## Code + +Inline \`code\` + +Indented code + + // Some comments + line 1 of code + line 2 of code + line 3 of code + + +Block code "fences" + +\`\`\` +Sample text here... +\`\`\` + +Syntax highlighting + +\`\`\` js +var foo = function (bar) { + return bar++; +}; + +console.log(foo(5)); +\`\`\` +`.trim(), + + tables: ` +## Tables + +| Option | Description | +| ------ | ----------- | +| data | path to data files to supply the data that will be passed into templates. | +| engine | engine to be used for processing templates. Handlebars is the default. | +| ext | extension to be used for dest files. | + +Right aligned columns + +| Option | Description | +| ------:| -----------:| +| data | path to data files to supply the data that will be passed into templates. | +| engine | engine to be used for processing templates. Handlebars is the default. | +| ext | extension to be used for dest files. | +`.trim(), + + links: ` +## Links + +[link text](https://gravity-ui.com) + +[link with title](https://gravity-ui.com/libraries "title text!") + +Autoconverted link https://gravity-ui.com/components (linkify must be enabled) +`.trim(), + + images: ` +## Images + +![Minion](https://octodex.github.com/images/minion.png) +![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat") + +![Dojocat](https://octodex.github.com/images/dojocat.jpg "The Dojocat") +`.trim(), + + subAndSub: ` +## Subscript & Superscript (additional feature) + +- 19^th^ +- H~2~O +`.trim(), + + emojies: ` +## Emojies (additional feature) + +:wink: :cry: :laughing: :yum: +`.trim(), + + deflist: ` +## Definition list (additional feature) + +Term 1 + +: Definition 1 +with lazy continuation. + +Term 2 with **inline markup** + +: Definition 2 + + { some code, part of Definition 2 } + + Third paragraph of definition 2. +`.trim(), +}; + +type PlaygroundStoryProps = Pick< + PlaygroundProps, + | 'initialEditor' + | 'settingsVisible' + | 'breaks' + | 'allowHTML' + | 'linkify' + | 'linkifyTlds' + | 'sanitizeHtml' + | 'prepareRawMarkup' + | 'splitModeOrientation' + | 'stickyToolbar' + | 'initialSplitModeEnabled' + | 'renderPreviewDefined' + | 'height' +>; + +const args: Partial = { + initialEditor: 'wysiwyg', + settingsVisible: true, + allowHTML: true, + breaks: true, + linkify: true, + linkifyTlds: [], + sanitizeHtml: false, + prepareRawMarkup: false, + splitModeOrientation: 'horizontal', + stickyToolbar: true, + initialSplitModeEnabled: false, + renderPreviewDefined: true, + height: 'initial', +}; + +export const Heading: StoryFn = (props) => ( + +); + +export const Blockquote: StoryFn = (props) => ( + +); + +export const Emphasis: StoryFn = (props) => ( + +); + +export const HorizontalRules: StoryFn = (props) => ( + +); + +export const Lists: StoryFn = (props) => ( + +); + +export const Code: StoryFn = (props) => ( + +); + +export const Tables: StoryFn = (props) => ( + +); + +export const Links: StoryFn = (props) => ( + +); + +export const Images: StoryFn = (props) => ( + +); + +export const SubSup: StoryFn = (props) => ( + +); + +export const Emojies: StoryFn = (props) => ( + +); + +export const DefinitionList: StoryFn = (props) => ( + +); + +Heading.args = args; +Blockquote.args = args; +Emphasis.args = args; +HorizontalRules.args = args; +Lists.args = args; +Code.args = args; +Tables.args = args; +Links.args = args; +Images.args = args; +SubSup.args = args; +SubSup.storyName = 'Subscript & Superscript'; +Emojies.args = args; +DefinitionList.args = args; diff --git a/demo/PlaygroundEditorInEditor.stories.tsx b/demo/PlaygroundEditorInEditor.stories.tsx index 13316cbe..2f00ec47 100644 --- a/demo/PlaygroundEditorInEditor.stories.tsx +++ b/demo/PlaygroundEditorInEditor.stories.tsx @@ -6,7 +6,7 @@ import type {ComponentMeta, Story} from '@storybook/react'; import {PlaygroundEditorInEditor} from './editor-in-editor'; export default { - title: 'Editor-in-Editor', + title: 'Experiments / Editor-in-Editor', component: PlaygroundEditorInEditor, } as ComponentMeta; diff --git a/demo/YFM.stories.tsx b/demo/YFM.stories.tsx new file mode 100644 index 00000000..3bfe64d3 --- /dev/null +++ b/demo/YFM.stories.tsx @@ -0,0 +1,243 @@ +import React from 'react'; + +// eslint-disable-next-line import/no-extraneous-dependencies +import type {Meta, StoryFn} from '@storybook/react'; + +import {Playground as PlaygroundComponent, PlaygroundProps} from './Playground'; + +export default { + title: 'Markdown Editor / YFM examples', +} as Meta; + +const markup = { + textMarks: ` +## YFM text marks + +##Monospaced text## +`.trim(), + + yfmNotes: ` +## YFM Notes + +{% note info %} + +This is info. + +{% endnote %} + +{% note tip %} + +This is a tip. + +{% endnote %} + +{% note warning %} + +This is a warning. + +{% endnote %} + +{% note alert %} + +This is an alert. + +{% endnote %} + + +`.trim(), + + yfmCut: ` +## YFM Cut + +{% cut "Cut header" %} + +Content displayed when clicked. + +{% endcut %} +`.trim(), + + yfmTabs: ` +## YFM Tabs + +{% list tabs %} + +- The name of tab1 + + The text of tab1. + + * You can use lists. + * And **other** markup. + +- The name of tab2 + + The text of tab2. + +{% endlist %} +`.trim(), + + yfmFile: ` +## YFM File + +File: {% file src="data:text/plain;base64,Cg==" name="empty.txt" %} +`.trim(), + + yfmTable: ` +## YFM Table + +### Simple table + +#| +|| **Header1** | **Header2** || +|| Text | Text || +|# + +### Multiline content + +#| +||Text +on two lines +| +- Potatoes +- Carrot +- Onion +- Cucumber|| +|# + +### Nested tables + +#| +|| 1 +| + +Text before other table + +#| +|| 5 +| 6|| +|| 7 +| 8|| +|# + +Text after other table|| +|| 3 +| 4|| +|# +`.trim(), + + tasklist: ` +## Task lists (additional feature) + +- [x] ~~Write the press release~~ +- [ ] Update the website +- [ ] Contact the media +`.trim(), + + latexFormulas: ` +## LaTeX Formulas (optional feature) + +Inline formula: $\\sqrt{3x-1}+(1+x)^2$ + +Block formula: + +$$ +f(\\relax{x}) = \\int_{-\\infty}^\\infty + \\hat f(\\xi)\\,e^{2 \\pi i \\xi x} + \\,d\\xi +$$ +`.trim(), + + mermaidDiagram: ` +## Mermaid diagram (optional feature) + +\`\`\`mermaid +sequenceDiagram + Alice->>Bob: Hi Bob + Bob->>Alice: Hi Alice +\`\`\` +`.trim(), +}; + +type PlaygroundStoryProps = Pick< + PlaygroundProps, + | 'initialEditor' + | 'settingsVisible' + | 'breaks' + | 'allowHTML' + | 'linkify' + | 'linkifyTlds' + | 'sanitizeHtml' + | 'prepareRawMarkup' + | 'splitModeOrientation' + | 'stickyToolbar' + | 'initialSplitModeEnabled' + | 'renderPreviewDefined' + | 'height' +>; + +const args: Partial = { + initialEditor: 'wysiwyg', + settingsVisible: true, + allowHTML: true, + breaks: true, + linkify: true, + linkifyTlds: [], + sanitizeHtml: false, + prepareRawMarkup: false, + splitModeOrientation: 'horizontal', + stickyToolbar: true, + initialSplitModeEnabled: false, + renderPreviewDefined: true, + height: 'initial', +}; + +export const TextMarks: StoryFn = (props) => ( + +); + +export const Tasklist: StoryFn = (props) => ( + +); + +export const YfmNote: StoryFn = (props) => ( + +); + +export const YfmCut: StoryFn = (props) => ( + +); + +export const YfmTabs: StoryFn = (props) => ( + +); + +export const YfmFile: StoryFn = (props) => ( + +); + +export const YfmTable: StoryFn = (props) => ( + +); + +export const LaTeXFormulas: StoryFn = (props) => ( + +); + +export const MermaidDiagram: StoryFn = (props) => ( + +); + +TextMarks.args = args; +YfmNote.args = args; +YfmNote.storyName = 'YFM Note'; +YfmCut.args = args; +YfmCut.storyName = 'YFM Cut'; +YfmTabs.args = args; +YfmTabs.storyName = 'YFM Tabs'; +YfmFile.args = args; +YfmFile.storyName = 'YFM File'; +YfmTable.args = args; +YfmTable.storyName = 'YFM Table'; +Tasklist.args = args; +LaTeXFormulas.args = args; +LaTeXFormulas.storyName = 'LaTeX Formulas'; +MermaidDiagram.args = args; diff --git a/demo/utils/preview.tsx b/demo/utils/preview.tsx index 50146f28..187d0dd5 100644 --- a/demo/utils/preview.tsx +++ b/demo/utils/preview.tsx @@ -7,13 +7,6 @@ import {configure as configureYfmEditor} from '../../src'; import '@gravity-ui/uikit/styles/styles.scss'; -const light = {name: 'light', value: '#FFFFFF'}; -const dark = {name: 'dark', value: '#2D2C33'}; -export const backgrounds = { - defaultValue: '#FFFFFF', - values: [light, dark], -}; - export const withThemeProvider: Decorator = (StoryItem, context) => { return (