docs: add storybook for react-renderer (static HTML) (remirror#1064)

sandzone · Aug 17, 2021 · 3c68e61 · 3c68e61
1 parent 3dac875
commit 3c68e61
Show file tree

Hide file tree

Showing 4 changed files with 272 additions and 0 deletions.
diff --git a/packages/remirror__react-renderer/__stories__/react-renderer.stories.tsx b/packages/remirror__react-renderer/__stories__/react-renderer.stories.tsx
@@ -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>
+  );
+};
diff --git a/packages/remirror__react-renderer/__stories__/sample-doc.ts b/packages/remirror__react-renderer/__stories__/sample-doc.ts
@@ -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',
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
diff --git a/packages/remirror__react-renderer/__stories__/tsconfig.json b/packages/remirror__react-renderer/__stories__/tsconfig.json
@@ -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/@[email protected]/node_modules/@types/react/index.d.ts"
+      ],
+      "react/jsx-dev-runtime": [
+        "../../../node_modules/.pnpm/@[email protected]/node_modules/@types/react/jsx-dev-runtime.d.ts"
+      ],
+      "react/jsx-runtime": [
+        "../../../node_modules/.pnpm/@[email protected]/node_modules/@types/react/jsx-runtime.d.ts"
+      ],
+      "react-dom": [
+        "../../../node_modules/.pnpm/@[email protected]/node_modules/@types/react-dom/index.d.ts"
+      ],
+      "reakit": [
+        "../../../node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/reakit/ts/index.d.ts"
+      ],
+      "@remirror/react": ["../../remirror__react/src/index.ts"],
+      "@storybook/react": [
+        "../../../node_modules/.pnpm/@[email protected]_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"
+    }
+  ]
+}
diff --git a/support/root/tsconfig.json b/support/root/tsconfig.json
@@ -551,6 +551,9 @@
     {
       "path": "packages/remirror__react-native/src"
     },
+    {
+      "path": "packages/remirror__react-renderer/__stories__"
+    },
     {
       "path": "packages/remirror__react-renderer/__tests__"
     },
-Original file line number
+Diff line change
@@ 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 @@