chore: fix documentation in storybook

Author: tenphi

.storybook/main.js

@@ -1,4 +1,5 @@
 // @ts-check
+import remarkGfm from 'remark-gfm';
 
 /** @type {import('@storybook/core-common').StorybookConfig} */
 const config = {
@@ -18,7 +19,7 @@ const config = {
     modernInlineRender: true,
   },
 
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.docs.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
 
   addons: [
     '@storybook/addon-links',
@@ -32,6 +33,16 @@ const config = {
         },
       },
     },
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
   ],
 
   docs: {

package.json

@@ -79,6 +79,7 @@
     "react-stately": "^3.35.0",
     "react-transition-group": "^4.4.5",
     "react-types": "^0.1.0",
+    "remark-gfm": "^4.0.1",
     "tiny-invariant": "^1.3.3",
     "usehooks-ts": "^3.1.0",
     "valid-url": "^1.0.9"

pnpm-lock.yaml

@@ -73,4 +73,7 @@ function ActiveZone(
 }
 
 const _ActiveZone = forwardRef(ActiveZone);
+
+_ActiveZone.displayName = 'ActiveZone';
+
 export { _ActiveZone as ActiveZone };

src/components/content/ActiveZone/ActiveZone.tsx

@@ -233,4 +233,6 @@ function CopyPasteBlock(
 
 const _CopyPasteBlock = forwardRef(CopyPasteBlock);
 
+_CopyPasteBlock.displayName = 'CopyPasteBlock';
+
 export { _CopyPasteBlock as CopyPasteBlock };

src/components/content/CopyPasteBlock/CopyPasteBlock.tsx

@@ -265,4 +265,6 @@ const _CopySnippet = Object.assign(
   },
 );
 
+_CopySnippet.displayName = 'CopySnippet';
+
 export { _CopySnippet as CopySnippet };

src/components/content/CopySnippet/CopySnippet.tsx

@@ -21,6 +21,7 @@ const HeaderElement = tasty({
     display: 'block',
     gridArea: 'header',
     flow: 'column',
+    boxSizing: 'border-box',
   },
 });
 

src/components/content/Header.tsx

@@ -102,4 +102,7 @@ function PrismCode(props: CubePrismCodeProps, ref) {
  * Code block with syntax highlighting
  */
 const _PrismCode = forwardRef(PrismCode);
+
+_PrismCode.displayName = 'PrismCode';
+
 export { _PrismCode as PrismCode };

src/components/content/PrismCode/PrismCode.tsx

@@ -223,4 +223,6 @@ function Result(props: CubeResultProps, ref) {
 
 const _Result = forwardRef(Result);
 
+_Result.displayName = 'Result';
+
 export { _Result as Result };

src/components/content/Result/Result.tsx

@@ -131,4 +131,7 @@ function Tag(allProps: CubeTagProps, ref) {
 }
 
 const _Tag = forwardRef(Tag);
+
+_Tag.displayName = 'Tag';
+
 export { _Tag as Tag };