Merge pull request #87 from reuters-graphics/mdx

Mdx

.storybook/main.ts

@@ -1,10 +1,29 @@
 import type { StorybookConfig } from '@storybook/svelte-vite';
+import remarkGfm from 'remark-gfm';
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
   addons: [
     '@storybook/addon-links',
-    '@storybook/addon-essentials',
+    '@storybook/addon-actions',
+    '@storybook/addon-viewport',
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        csfPluginOptions: null,
+        jsxOptions: {},
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
+    '@storybook/addon-controls',
+    '@storybook/addon-backgrounds',
+    '@storybook/addon-toolbars',
+    '@storybook/addon-measure',
+    '@storybook/addon-outline',
     '@storybook/addon-interactions',
     '@storybook/addon-svelte-csf',
   ],

.vscode/extensions.json

@@ -1,3 +1,5 @@
 {
-  "recommendations": ["silvenon.mdx"]
+  "recommendations": [
+    "unifiedjs.vscode-mdx"
+  ]
 }

package.json

@@ -70,6 +70,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-syntax-highlighter": "^15.5.0",
+    "remark-gfm": "^3.0.1",
     "rimraf": "^5.0.0",
     "sass": "^1.63.0",
     "storybook": "^7.0.20",
@@ -245,4 +246,4 @@
     ".": "./dist/index.js"
   },
   "svelte": "./dist/index.js"
-}
+}