Storybook docs

.gitignore

@@ -0,0 +1,5 @@
+*.log
+.DS_Store
+node_modules
+.cache
+dist

.storybook/main.ts

@@ -0,0 +1,36 @@
+const path = require('path');
+
+module.exports = {
+  stories: [
+    '../docs/Intro.stories.mdx',
+    '../docs/Flowchart.stories.tsx',
+    // '../docs/Sequence.stories.mdx',
+    // '../docs/ClassDiagram.stories.mdx',
+    // '../docs/StateDiagram.stories.mdx',
+    // '../docs/GanttChart.stories.mdx',
+    // '../docs/PieChart.stories.mdx',
+  ],
+  addons: [
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addon-docs',
+  ],
+  webpackFinal: config => {
+    config.module.rules.push({
+      test: /\.tsx?$/,
+      use: [
+        {
+          loader: require.resolve('ts-loader'),
+          options: {
+            reportFiles: ['docs/**/*.{ts|tsx}'],
+          },
+        },
+      ],
+    });
+    config.resolve.extensions.push('.ts', '.tsx');
+    config.resolve.alias = Object.assign(config.resolve.alias, {
+      '@': path.resolve(__dirname, '..'),
+    });
+    return config;
+  },
+};

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Mermaid.js
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

docs/Flowchart.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Mermaid } from '@';
+
+export default {
+  title: 'Flowchart',
+};
+
+export const TD = () => (
+  <Mermaid>{`
+    graph TD
+    A[Client] --> B[Load Balancer]
+    B --> C[Server01]
+    B --> D[Server02]
+  `}</Mermaid>
+);

docs/Intro.stories.mdx

@@ -0,0 +1,180 @@
+import { Meta, Preview } from '@storybook/addon-docs/blocks';
+import { Mermaid } from '@';
+
+<Meta title="Mermaid for React" component={Mermaid} />
+
+# Mermaid for React
+
+---
+
+Mermaid for React lets you generate great-looking diagrams from markdown-like text.
+
+<Preview>
+  <Mermaid>{`
+    graph LR
+    C[Client] <--> LB{{Load Balancer}}
+    LB --> A[Server A]
+    LB --> B[Server B]
+  `}</Mermaid>
+</Preview>
+
+Mermaid for React is a wrapper for the [Mermaid](https://mermaid-js.github.io/mermaid/) diagramming library. It supports all mermaid diagrams including [flowcharts](#flowcharts), [sequence diagrams](#sequence-diagrams), [gantt charts](#gantt-charts), [class diagrams](#class-diagrams), [state diagrams](#state-diagrams) and [more](#pie-charts). It was developed to add diagram support to [Storybook Docs](https://www.npmjs.com/package/@storybook/addon-docs), but it can be used inside _any_ React project.
+
+## Flowcharts
+
+Mermaid's `graph` directive is a powerful way to show everything from simple flowcharts to complex topologies. Here's a simple example to start:
+
+<Preview>
+  <Story name="Flow">
+    <Mermaid>{`
+      graph LR
+        A[Hard] -->|Text| B(Round)
+        B --> C{Decision}
+        C -->|One| D[Result 1]
+        C -->|Two| E[Result 2]
+    `}</Mermaid>
+  </Story>
+</Preview>
+
+Here's a directed acyclic graph:
+
+<Preview>
+  <Story name="DAG">
+    <Mermaid>{`
+      graph LR
+        a --> b & c--> d
+    `}</Mermaid>
+  </Story>
+</Preview>
+
+Here's a more complex example with subgraphs:
+
+<Preview>
+  <Story name="Subgraphs">
+    <Mermaid>{`
+      graph TB
+        c1-->a2
+        subgraph one
+        a1-->a2
+        end
+        subgraph two
+        b1-->b2
+        end
+        subgraph three
+        c1-->c2
+        end
+    `}</Mermaid>
+  </Story>
+</Preview>
+
+The `graph` directive supports a variety of shapes, layout options, and formats. For full documentation, see Mermaid's [flowchart documentation](https://mermaid-js.github.io/mermaid/#/flowchart).
+
+## Sequence diagrams
+
+Mermaid's `sequenceDiagram` visualizes interactions between entities over time. It can be very simple:
+
+<Preview>
+  <Story name="Sequence">
+    <Mermaid>{`
+      sequenceDiagram
+        Alice->>+John: Hey, how are you?
+        Alice->>+John: Can you hear me?
+        John-->>-Alice: Alice, I hear you!
+        John-->>-Alice: I feel great!
+    `}</Mermaid>
+  </Story>
+</Preview>
+
+And can also have complex self-loops, notes, and numbered events:
+
+<Preview>
+  <Story name="Complex Sequence">
+    <Mermaid>{`
+      sequenceDiagram
+        autonumber
+        Alice->>John: Hey, how are you?
+        loop Reflecting
+          John->>John: 
+        end
+        John-->>Alice: Great!
+        John->>Bob: How about you?
+        Note right of Bob: Go Bob! 🚀
+        Bob-->>John: Jolly good!
+    `}</Mermaid>
+  </Story>
+</Preview>
+
+The `sequenceDiagram` directive supports a variety of shapes, options, and interactions. For full documentation, see Mermaid's [sequence documentation](https://mermaid-js.github.io/mermaid/#/sequence).
+
+## Gantt charts
+
+<Preview>
+  <Story name="Gantt">
+    <Mermaid>{`
+      gantt
+        title Storybook release plan
+        dateFormat  YYYY-MM-DD
+        section Doc blocks
+        Depdendencies :done,   a1, 2020-01-05, 15d
+        Mermaid       :active, a2, after a1,   10d
+        Code sandbox  :, after a2,   20d
+        section Composition
+        Basics          :active, 2020-01-12, 24d
+        Authentication  : 12d
+    `}</Mermaid>
+  </Story>
+</Preview>
+
+## Class diagrams
+
+<Preview>
+  <Story name="Class">
+    <Mermaid>{`
+      classDiagram
+        classA <|-- classB
+        classC o-- classD
+        classE <.. classF
+        classG *.. classH
+        classI .. classJ
+    `}</Mermaid>
+  </Story>
+</Preview>
+
+## State diagrams
+
+<Preview>
+  <Story name="State">
+    <Mermaid>{`
+      stateDiagram
+        [*] --> Still
+        Still --> [*]
+        Still --> Moving
+        Moving --> Still
+        Moving --> [*]
+    `}</Mermaid>
+  </Story>
+</Preview>
+
+## Git graph (experimental)
+
+<Preview>
+  <Story name="Git">
+    <Mermaid>{`
+gitGraph:
+options
+{
+  "nodeSpacing": 120,
+  "nodeRadius": 10
+}
+end
+commit
+branch newbranch
+checkout newbranch
+commit
+commit
+checkout master
+commit
+merge newbranch
+    `}</Mermaid>
+  </Story>
+</Preview>

package.json

@@ -0,0 +1,56 @@
+{
+  "version": "0.0.1",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "start": "tsdx watch",
+    "build": "tsdx build",
+    "test": "tsdx test --passWithNoTests",
+    "lint": "tsdx lint",
+    "prepare": "tsdx build",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  },
+  "peerDependencies": {
+    "react": ">=16"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "tsdx lint"
+    }
+  },
+  "prettier": {
+    "printWidth": 80,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "es5"
+  },
+  "name": "mermaid-react",
+  "module": "dist/mermaid-react.esm.js",
+  "devDependencies": {
+    "@babel/core": "^7.8.4",
+    "@storybook/addon-actions": "^5.3.18",
+    "@storybook/addon-docs": "^5.3.18",
+    "@storybook/addon-links": "^5.3.18",
+    "@storybook/addons": "^5.3.18",
+    "@storybook/react": "^5.3.18",
+    "@types/jest": "^25.1.3",
+    "@types/react": "^16.9.23",
+    "@types/react-dom": "^16.9.5",
+    "babel-loader": "^8.0.6",
+    "husky": "^4.2.3",
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0",
+    "ts-loader": "^6.2.1",
+    "tsdx": "^0.12.3",
+    "tslib": "^1.11.0",
+    "typescript": "^3.8.2"
+  },
+  "dependencies": {
+    "mermaid": "^8.4.8"
+  }
+}

src/index.tsx

@@ -0,0 +1,60 @@
+import React, { FC, useEffect } from 'react';
+import mermaid from 'mermaid';
+
+const DEFAULT_CONFIG = {
+  startOnLoad: true,
+  theme: 'forest',
+  logLevel: 'fatal',
+  securityLevel: 'strict',
+  arrowMarkerAbsolute: false,
+  flowchart: {
+    htmlLabels: true,
+    curve: 'linear',
+  },
+  sequence: {
+    diagramMarginX: 50,
+    diagramMarginY: 10,
+    actorMargin: 50,
+    width: 120,
+    height: 30,
+    boxMargin: 10,
+    boxTextMargin: 5,
+    noteMargin: 10,
+    messageMargin: 35,
+    mirrorActors: true,
+    bottomMarginAdj: 1,
+    useMaxWidth: true,
+    rightAngles: false,
+    showSequenceNumbers: false,
+  },
+  gantt: {
+    titleTopMargin: 25,
+    barHeight: 16,
+    barGap: 4,
+    topPadding: 50,
+    leftPadding: 75,
+    gridLineStartPadding: 35,
+    fontSize: 11,
+    fontFamily: '"Open-Sans", "sans-serif"',
+    numberSectionStyles: 4,
+    axisFormat: '%Y-%m-%d',
+  },
+};
+
+export interface MermaidProps {
+  name?: any;
+}
+
+export const Mermaid: FC<MermaidProps> = ({ children }) => {
+  mermaid.initialize(DEFAULT_CONFIG);
+
+  useEffect(() => {
+    mermaid.contentLoaded();
+  }, [children]);
+
+  return (
+    <div className="mermaid" style={{ textAlign: 'center' }}>
+      {children}
+    </div>
+  );
+};

src/typings.d.ts

@@ -0,0 +1 @@
+declare module 'mermaid';