Adding Storybook

Author: andrerpena

.npmignore

@@ -15,4 +15,5 @@ test
 gulpfile.js
 readme.md
 tslint.json
-ts-build
+ts-build
+.storybook

.storybook/addons.js

@@ -0,0 +1 @@
+import '@storybook/addon-storysource/register';

.storybook/config.js

@@ -0,0 +1,13 @@
+import {configure} from "@storybook/react";
+import "../node_modules/draft-js/dist/Draft.css";
+import "../src/styles/react-mde-all.scss";
+import "./styles/demo.scss";
+
+function loadStories() {
+    require("./stories/layouts/VerticalLayoutStory.tsx");
+    require("./stories/layouts/HorizontalLayoutStory.tsx");
+    require("./stories/layouts/TabbedLayoutStory.tsx");
+    require("./stories/layouts/NoPreviewLayoutStory.tsx");
+}
+
+configure(loadStories, module);

.storybook/preview-head.html

@@ -0,0 +1 @@
+<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

.storybook/stories/layouts/HorizontalLayoutStory.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import * as Showdown from "showdown";
+import ReactMde, {ReactMdeTypes} from "../../../src/index";
+import {storiesOf} from "@storybook/react";
+
+interface VerticalLayoutStoryComponentState {
+    mdeState: ReactMdeTypes.MdeState;
+}
+
+class VerticalLayoutStoryComponent extends React.Component<{}, VerticalLayoutStoryComponentState> {
+    converter: Showdown.Converter;
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            mdeState: {
+                markdown: "**Hello world!**",
+            },
+        };
+        this.converter = new Showdown.Converter({
+            tables: true,
+            simplifiedAutoLink: true,
+            strikethrough: true,
+            tasklists: true,
+        });
+    }
+
+    handleValueChange = (mdeState: ReactMdeTypes.MdeState) => {
+        this.setState({mdeState});
+    }
+
+    render() {
+        return (
+            <ReactMde
+                layout="horizontal"
+                onChange={this.handleValueChange}
+                editorState={this.state.mdeState}
+                generateMarkdownPreview={(markdown) => Promise.resolve(this.converter.makeHtml(markdown))}
+            />
+        );
+    }
+}
+
+storiesOf("Layouts", module)
+    .add("horizontal", () => (
+        <VerticalLayoutStoryComponent/>
+    ));

.storybook/stories/layouts/NoPreviewLayoutStory.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import * as Showdown from "showdown";
+import ReactMde, {ReactMdeTypes} from "../../../src/index";
+import {storiesOf} from "@storybook/react";
+
+interface VerticalLayoutStoryComponentState {
+    mdeState: ReactMdeTypes.MdeState;
+}
+
+class VerticalLayoutStoryComponent extends React.Component<{}, VerticalLayoutStoryComponentState> {
+    converter: Showdown.Converter;
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            mdeState: {
+                markdown: "**Hello world!**",
+            },
+        };
+        this.converter = new Showdown.Converter({
+            tables: true,
+            simplifiedAutoLink: true,
+            strikethrough: true,
+            tasklists: true,
+        });
+    }
+
+    handleValueChange = (mdeState: ReactMdeTypes.MdeState) => {
+        this.setState({mdeState});
+    }
+
+    render() {
+        return (
+            <ReactMde
+                layout="noPreview"
+                onChange={this.handleValueChange}
+                editorState={this.state.mdeState}
+                generateMarkdownPreview={(markdown) => Promise.resolve(this.converter.makeHtml(markdown))}
+            />
+        );
+    }
+}
+
+storiesOf("Layouts", module)
+    .add("noPreview", () => (
+        <VerticalLayoutStoryComponent/>
+    ));

.storybook/stories/layouts/TabbedLayoutStory.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import * as Showdown from "showdown";
+import ReactMde, {ReactMdeTypes} from "../../../src/index";
+import {storiesOf} from "@storybook/react";
+
+interface VerticalLayoutStoryComponentState {
+    mdeState: ReactMdeTypes.MdeState;
+}
+
+class VerticalLayoutStoryComponent extends React.Component<{}, VerticalLayoutStoryComponentState> {
+    converter: Showdown.Converter;
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            mdeState: {
+                markdown: "**Hello world!**",
+            },
+        };
+        this.converter = new Showdown.Converter({
+            tables: true,
+            simplifiedAutoLink: true,
+            strikethrough: true,
+            tasklists: true,
+        });
+    }
+
+    handleValueChange = (mdeState: ReactMdeTypes.MdeState) => {
+        this.setState({mdeState});
+    }
+
+    render() {
+        return (
+            <ReactMde
+                layout="tabbed"
+                onChange={this.handleValueChange}
+                editorState={this.state.mdeState}
+                generateMarkdownPreview={(markdown) => Promise.resolve(this.converter.makeHtml(markdown))}
+            />
+        );
+    }
+}
+
+storiesOf("Layouts", module)
+    .add("tabbed", () => (
+        <VerticalLayoutStoryComponent/>
+    ));

.storybook/stories/layouts/VerticalLayoutStory.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import * as Showdown from "showdown";
+import ReactMde, {ReactMdeTypes} from "../../../src/index";
+import {storiesOf} from "@storybook/react";
+
+interface VerticalLayoutStoryComponentState {
+    mdeState: ReactMdeTypes.MdeState;
+}
+
+class VerticalLayoutStoryComponent extends React.Component<{}, VerticalLayoutStoryComponentState> {
+    converter: Showdown.Converter;
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            mdeState: {
+                markdown: "**Hello world!**",
+            },
+        };
+        this.converter = new Showdown.Converter({
+            tables: true,
+            simplifiedAutoLink: true,
+            strikethrough: true,
+            tasklists: true,
+        });
+    }
+
+    handleValueChange = (mdeState: ReactMdeTypes.MdeState) => {
+        this.setState({mdeState});
+    }
+
+    render() {
+        return (
+            <ReactMde
+                layout="vertical"
+                onChange={this.handleValueChange}
+                editorState={this.state.mdeState}
+                generateMarkdownPreview={(markdown) => Promise.resolve(this.converter.makeHtml(markdown))}
+            />
+        );
+    }
+}
+
+storiesOf("Layouts", module)
+    .add("vertical", () => (
+        <VerticalLayoutStoryComponent/>
+    ));

.storybook/styles/demo.scss

@@ -0,0 +1,6 @@
+@import 'variables.scss';
+
+body {
+    font-size: 14px;
+    font-family: sans-serif;
+}