Skip to content

Commit

Permalink
docs: add storybook for react-renderer (static HTML) (#1064)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ronnyroeller
ronnyroeller committed Aug 17, 2021
1 parent 3dac875 commit 3c68e61
Show file tree
Hide file tree
Showing 4 changed files with 272 additions and 0 deletions.
49 changes: 49 additions & 0 deletions packages/remirror__react-renderer/__stories__/react-renderer.stories.tsx
View file
@@ -0,0 +1,49 @@
import {
Callout,
CodeBlock,
createIFrameHandler,
createLinkHandler,
Doc,
Heading,
MarkMap,
RemirrorRenderer,
TextHandler,
ThemeProvider,
} from '@remirror/react';

import { SAMPLE_DOC } from './sample-doc';

export default { title: 'React Renderer (static HTML)' };

const typeMap: MarkMap = {
blockquote: 'blockquote',
bulletList: 'ul',
callout: Callout,
codeBlock: CodeBlock,
doc: Doc,
hardBreak: 'br',
heading: Heading,
horizontalRule: 'hr',
iframe: createIFrameHandler(),
image: 'img',
listItem: 'li',
paragraph: 'p',
orderedList: 'ol',
text: TextHandler,
};

const markMap: MarkMap = {
italic: 'em',
bold: 'strong',
code: 'code',
link: createLinkHandler({ target: '_blank' }),
underline: 'u',
};

export const Basic = (): JSX.Element => {
return (
<ThemeProvider>
<RemirrorRenderer json={SAMPLE_DOC} typeMap={typeMap} markMap={markMap} />
</ThemeProvider>
);
};
164 changes: 164 additions & 0 deletions packages/remirror__react-renderer/__stories__/sample-doc.ts
View file
@@ -0,0 +1,164 @@
import { RemirrorJSON } from '@remirror/core';

export const SAMPLE_DOC: RemirrorJSON = {
type: 'doc',
content: [
{
type: 'heading',
attrs: {
level: 1,
},
content: [
{
type: 'text',
text: 'Heading 1',
},
],
},
{
type: 'heading',
attrs: {
level: 2,
},
content: [
{
type: 'text',
text: 'Heading 2',
},
],
},
{
type: 'heading',
attrs: {
level: 3,
},
content: [
{
type: 'text',
text: 'Heading 3',
},
],
},
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'Some text. ',
},
{
type: 'text',
marks: [
{
type: 'bold',
},
],
text: 'Some bold text. ',
},
{
type: 'text',
marks: [
{
type: 'link',
attrs: {
href: 'https://www.remirror.io',
target: null,
auto: false,
},
},
],
text: 'A link',
},
],
},
{
type: 'paragraph',
},
{
type: 'iframe',
attrs: {
src: 'https://www.youtube-nocookie.com/embed/Zi7sRMcJT-o?',
allowFullScreen: 'true',
frameBorder: 0,
type: 'youtube',
width: null,
height: null,
},
},
{
type: 'paragraph',
},
{
type: 'bulletList',
content: [
{
type: 'listItem',
content: [
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'List item 1',
},
],
},
],
},
{
type: 'listItem',
content: [
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'List item 2',
},
],
},
],
},
{
type: 'listItem',
content: [
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'List item 3',
},
],
},
],
},
],
},
{
type: 'codeBlock',
attrs: { language: 'typescript', wrap: false },
content: [{ type: 'text', text: 'A code block' }],
},
{
type: 'paragraph',
},
{
type: 'callout',
attrs: {
type: 'info',
},
content: [
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'A callout',
},
],
},
],
},
],
};
56 changes: 56 additions & 0 deletions packages/remirror__react-renderer/__stories__/tsconfig.json
View file
@@ -0,0 +1,56 @@
{
"__AUTO_GENERATED__": [
"To update the configuration edit the following field.",
"`package.json > @remirror > tsconfigs > '__stories__'`",
"",
"Then run: `pnpm -w generate:ts`"
],
"extends": "../../../support/tsconfig.base.json",
"compilerOptions": {
"types": [],
"declaration": false,
"noEmit": true,
"skipLibCheck": true,
"importsNotUsedAsValues": "remove",
"paths": {
"react": [
"../../../node_modules/.pnpm/@types+react@17.0.14/node_modules/@types/react/index.d.ts"
],
"react/jsx-dev-runtime": [
"../../../node_modules/.pnpm/@types+react@17.0.14/node_modules/@types/react/jsx-dev-runtime.d.ts"
],
"react/jsx-runtime": [
"../../../node_modules/.pnpm/@types+react@17.0.14/node_modules/@types/react/jsx-runtime.d.ts"
],
"react-dom": [
"../../../node_modules/.pnpm/@types+react-dom@17.0.9/node_modules/@types/react-dom/index.d.ts"
],
"reakit": [
"../../../node_modules/.pnpm/reakit@1.3.8_react-dom@17.0.2+react@17.0.2/node_modules/reakit/ts/index.d.ts"
],
"@remirror/react": ["../../remirror__react/src/index.ts"],
"@storybook/react": [
"../../../node_modules/.pnpm/@storybook+react@6.3.4_dfad392d5450b8683a621f3ec486af19/node_modules/@storybook/react/types-6-0.d.ts"
],
"@remirror/dev": ["../../remirror__dev/src/index.ts"]
}
},
"include": ["./"],
"references": [
{
"path": "../../testing/src"
},
{
"path": "../../remirror/src"
},
{
"path": "../../remirror__core/src"
},
{
"path": "../../remirror__extension-events/src"
},
{
"path": "../../remirror__messages/src"
}
]
}
3 changes: 3 additions & 0 deletions support/root/tsconfig.json
View file
Expand Up @@ -551,6 +551,9 @@
{
"path": "packages/remirror__react-native/src"
},
{
"path": "packages/remirror__react-renderer/__stories__"
},
{
"path": "packages/remirror__react-renderer/__tests__"
},
Expand Down

1 comment on commit 3c68e61

@github-actions
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉 Published on https://remirror.io as production
🚀 Deployed on https://611b8f1ee822be00b4c7a924--remirror.netlify.app

Please sign in to comment.