Storybook/Docs: Add mdx boilerplate.

NordcomInc · Sep 24, 2024 · d1158d7 · d1158d7
1 parent 53bfc8b
commit d1158d7
Show file tree

Hide file tree

Showing 12 changed files with 1,274 additions and 38 deletions.
diff --git a/docs/next.config.mjs b/docs/next.config.mjs
@@ -1,18 +1,33 @@
+import createMDX from '@next/mdx';
 import createVercelToolbar from '@vercel/toolbar/plugins/next';
 
+import remarkGfm from 'remark-gfm';
+
 const withVercelToolbar = createVercelToolbar();
 
+const withMDX = createMDX({
+    options: {
+        remarkPlugins: [remarkGfm],
+        rehypePlugins: []
+    }
+});
+
 /** @type {import('next').NextConfig} */
 let config = {
+    pageExtensions: ['ts', 'tsx', 'md', 'mdx'],
     poweredByHeader: false,
     reactStrictMode: true,
     trailingSlash: true,
     swcMinify: true,
     productionBrowserSourceMaps: true,
+    transpilePackages: ['next-mdx-remote'],
     compress: true,
     experimental: {
         appNavFailHandling: true,
         caseSensitiveRoutes: true,
+        mdxRs: {
+            mdxType: 'gfm'
+        },
         optimizePackageImports: [],
         optimizeServerReact: true,
         parallelServerBuildTraces: true,
@@ -70,4 +85,4 @@ let config = {
     }
 };
 
-export default withVercelToolbar(config);
+export default withVercelToolbar(withMDX(config));
diff --git a/docs/package.json b/docs/package.json
@@ -10,7 +10,7 @@
     ],
     "scripts": {
         "build": "next build",
-        "dev": "next dev",
+        "dev": "next dev --turbo",
         "clean": "rm -rf dist coverage storybook-static .turbo .next *.tsbuildinfo *.log",
         "start": "next start -p $PORT",
         "typecheck": "tsc --noEmit",
@@ -49,15 +49,23 @@
     },
     "homepage": "https://nordstar.dev/",
     "dependencies": {
+        "@mdx-js/loader": "3.0.1",
+        "@mdx-js/react": "3.0.1",
+        "@next/mdx": "14.2.13",
         "@nordcom/nordstar": "workspace:*",
         "@vercel/toolbar": "0.1.20",
         "geist": "1.3.1",
+        "next-mdx-remote": "5.0.0",
         "next": "14.2.13",
         "react-dom": "18.3.1",
-        "react": "18.3.1"
+        "react": "18.3.1",
+        "remark-gfm": "4.0.0"
     },
     "devDependencies": {
         "@nordcom/prettier": "0.1.1",
+        "@types/mdx": "2.0.13",
+        "@types/react-dom": "18.3.0",
+        "@types/react": "18.3.8",
         "autoprefixer": "10.4.20",
         "concurrently": "9.0.1",
         "eslint-config-next": "14.2.13",

diff --git a/docs/src/mdx-components.tsx b/docs/src/mdx-components.tsx
@@ -0,0 +1,7 @@
+import { MDXComponents } from 'mdx/types';
+
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+    return {
+        ...components
+    };
+}
diff --git a/packages/components/input/src/input.stories.tsx b/packages/components/input/src/input.stories.tsx
@@ -1,4 +1,5 @@
-import { Input } from '@nordcom/nordstar-input';
+import Input from '@nordcom/nordstar-input/input';
+
 import type { Meta, StoryObj } from '@storybook/react';
 
 const story: Meta<typeof Input> = {

diff --git a/packages/storybook/.storybook/documentation-template.mdx b/packages/storybook/.storybook/documentation-template.mdx
@@ -0,0 +1,13 @@
+import { Meta, Title, Primary, Controls, Stories } from '@storybook/blocks';
+
+<Meta isTemplate />
+
+<Title />
+
+<Primary />
+
+<Controls />
+
+---
+
+<Stories />
diff --git a/packages/storybook/.storybook/main.ts b/packages/storybook/.storybook/main.ts
@@ -1,9 +1,7 @@
 import { StorybookConfig } from '@storybook/react-vite';
-import path from 'node:path';
-
 const config: StorybookConfig = {
     stories: ['../../**/src/**/*.mdx', '../../**/src/**/*.stories.@(ts|tsx)'],
-    staticDirs: ['../public'],
+    staticDirs: [],
     addons: [
         {
             name: '@storybook/addon-essentials',
@@ -26,14 +24,14 @@ const config: StorybookConfig = {
     typescript: {
         reactDocgen: 'react-docgen-typescript',
         reactDocgenTypescriptOptions: {
-            shouldExtractLiteralValuesFromEnum: true,
-            propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
-            tsconfigPath: path.resolve(path.join(process.cwd().split('/packages')[0], 'tsconfig.json'))
-        }
+            shouldExtractLiteralValuesFromEnum: true
+            //tsconfigPath: path.resolve(path.join(process.cwd().split('/packages')[0], 'tsconfig.json'))
+        },
+        check: true
     },
     docs: {
-        defaultName: 'Overview',
-        docsMode: false
+        defaultName: 'Documentation',
+        docsMode: true
     },
     core: {
         disableTelemetry: true,

diff --git a/packages/storybook/.storybook/manager-head.html b/packages/storybook/.storybook/manager-head.html
@@ -0,0 +1 @@
+<meta name="robots" content="noindex" />
diff --git a/packages/storybook/.storybook/preview-body.html b/packages/storybook/.storybook/preview-body.html
@@ -1 +1,13 @@
+<style>
+    :root {
+        --font-sans: Montserrat, sans-serif;
+        --font-fallback: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, Cantarell,
+            'Helvetica Neue', sans-serif;
+    }
 
+    body {
+        font-family: 'Montserrat', sans-serif;
+        font-size: 16px;
+        font-optical-sizing: auto;
+    }
+</style>
diff --git a/packages/storybook/.storybook/preview-head.html b/packages/storybook/.storybook/preview-head.html
@@ -1,17 +1,4 @@
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
-
-<style>
-    :root {
-        --font-sans: Montserrat, sans-serif;
-        --font-fallback: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, Cantarell,
-            'Helvetica Neue', sans-serif;
-    }
 
-    body {
-        font-family: 'Montserrat', sans-serif;
-        font-size: 16px;
-        font-optical-sizing: auto;
-    }
-</style>
+<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
diff --git a/packages/storybook/.storybook/preview.tsx b/packages/storybook/.storybook/preview.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { NordstarProvider, View } from '@nordcom/nordstar';
 import { addons } from '@storybook/manager-api';
 import type { Preview } from '@storybook/react';
+import DocTemplate from './documentation-template.mdx';
 import { darkTheme, lightTheme } from './manager';
 
 import './globals.css';
@@ -74,9 +75,19 @@ const parameters: Preview['parameters'] = {
         cellSize: currentTheme.gridCellSize
     },
     docs: {
+        page: DocTemplate,
+        toc: {
+            contentSelector: '.sbdocs-content',
+            headingSelector: 'h1, h2, h3',
+            ignoreSelector: '#primary',
+            title: 'Table of Contents',
+            disable: false,
+            unsafeTocbotOptions: {
+                orderedList: false
+            }
+        },
         inlineStories: true,
         theme: currentTheme,
-        toc: true,
         story: {
             inline: true,
             //iframeHeight: 145,

diff --git a/packages/storybook/public/.gitkeep b/packages/storybook/public/.gitkeep