Feat: upgrade repo and examples

.babelrc.js

@@ -0,0 +1,23 @@
+const ignore = process.env.IGNORE_FILES ? ['**/*.test.ts', '**/*.d.ts'] : [];
+
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { targets: { node: 'current' } }],
+    '@babel/preset-typescript',
+    '@babel/preset-react',
+  ],
+  env: {
+    esm: {
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            modules: false,
+            targets: { node: 'current' },
+          },
+        ],
+      ],
+    },
+  },
+  ignore,
+};

.eslintignore

@@ -0,0 +1,2 @@
+dist/**/*.js
+storybook-static/**/*.js

.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  extends: ['@storybook/eslint-config-storybook'],
+  overrides: [
+    {
+      files: ['**/*.tsx'],
+      rules: {
+        'react/prop-types': 'off',
+        'react/require-default-props': 'off',
+        'react/default-props-match-prop-types': 'off',
+        'import/no-unresolved': 'off',
+      },
+    },
+  ],
+  parserOptions: {
+    project: ['tsconfig.json'],
+  },
+};

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,23 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,19 @@
+Issue: #
+
+## What Changed
+
+<!-- Insert a description below. -->
+
+## How to test
+
+<!-- Add an explanation below for the reviewers to help them test your changes. -->
+
+## Change Type
+
+<!-- Indicate the type of change your pull request is: -->
+
+- [ ] `maintenance`
+- [ ] `documentation`
+- [ ] `patch`
+- [ ] `minor`
+- [ ] `major`

.github/workflows/release.yml

@@ -0,0 +1,28 @@
+name: Release
+
+on: [push]
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')"
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Prepare repository
+        run: git fetch --unshallow --tags
+
+      - name: Use Node.js 14.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 14.x
+
+      - name: Install dependencies
+        uses: bahmutov/npm-install@v1
+
+      - name: Create Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: |
+          yarn release

.github/workflows/test.yml

@@ -0,0 +1,26 @@
+name: Test
+
+on: [push]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Use Node.js 14.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 14.x
+
+      - name: Install dependencies
+        uses: bahmutov/npm-install@v1
+
+      - name: Run lint
+        run: |
+          yarn lint
+
+      - name: Run tests
+        run: |
+          yarn test
+

.storybook/main.ts

@@ -3,31 +3,19 @@ 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',
+    '../docs/Customizing.stories.mdx',
+    // '../docs/Flowchart.stories.tsx',
   ],
   addons: [
-    '@storybook/addon-actions',
-    '@storybook/addon-links',
-    '@storybook/addon-docs',
+    {
+      name: '@storybook/addon-essentials',
+      options: {
+        controls: false,
+        actions: false,
+      },
+    },
   ],
-  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');
+  webpackFinal: (config: any) => {
     config.resolve.alias = Object.assign(config.resolve.alias, {
       '@': path.resolve(__dirname, '..'),
     });

.storybook/preview.ts

@@ -0,0 +1,7 @@
+export const parameters = {
+  docs: {
+    source: {
+      state: 'open',
+    },
+  },
+};

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Mermaid.js
+Copyright (c) 2022 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

docs/Customizing.stories.mdx

@@ -0,0 +1,21 @@
+import { Meta, Canvas } from '@storybook/addon-docs';
+import { Mermaid } from '../src';
+
+<Meta title="Recipes/Customization" component={Mermaid} />
+
+# Mermaid for React
+
+---
+
+Mermaid for React accepts [mermaid configs](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/mermaid/mermaidAPI.d.ts#L199) as props so you can fully customize your graphs.
+
+Here's an example of overriding the theme (options: "default" | "forest" | "dark" | "neutral")
+
+<Canvas>
+  <Mermaid theme="dark">{`
+    graph LR
+    C[Client] <--> LB{{Load Balancer}}
+    LB --> A[Server A]
+    LB --> B[Server B]
+  `}</Mermaid>
+</Canvas>

docs/Flowchart.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Mermaid } from '@';
+import { Mermaid } from '../src';
 
 export default {
   title: 'Flowchart',