Merge pull request #7 from vtexdocs/feat/faststore

Feat/faststore
vtexdocs · Nov 30, 2023 · ac79321 · ac79321
2 parents 1cfd3ec + 19df90c
commit ac79321
Show file tree

Hide file tree

Showing 11 changed files with 83 additions and 14 deletions.
diff --git a/dist/index.css b/dist/index.css
diff --git a/dist/index.css.map b/dist/index.css.map
diff --git a/dist/index.d.mts b/dist/index.d.mts
@@ -7,9 +7,15 @@ import { AlgoliaSearchOptions } from 'algoliasearch/lite';
 
 interface MarkdownRendererProps {
     serialized: MDXRemoteSerializeResult;
+    customComponents?: {
+        [name: string]: any;
+    };
+    scope?: {
+        [name: string]: any;
+    };
 }
 
-declare const MarkdownRenderer: ({ serialized }: MarkdownRendererProps) => react_jsx_runtime.JSX.Element;
+declare const MarkdownRenderer: ({ serialized, customComponents, scope, }: MarkdownRendererProps) => react_jsx_runtime.JSX.Element;
 
 interface SubItem {
     title: string;

diff --git a/dist/index.mjs b/dist/index.mjs
@@ -5947,7 +5947,7 @@ var Callout = ({ node, icon: icon3, ...props }) => {
     "blockquote",
     {
       className: `${styles_module_default.blockquote} ${blockquoteType === "info" ? styles_module_default.blockquoteInfo : blockquoteType === "danger" ? styles_module_default.blockquoteDanger : blockquoteType === "warning" ? styles_module_default.blockquoteWarning : blockquoteType === "success" ? styles_module_default.blockquoteSuccess : ""}`,
-      children: /* @__PURE__ */ jsx9("p", { ...props })
+      children: /* @__PURE__ */ jsx9("div", { ...props })
     }
   );
 };
@@ -6024,6 +6024,9 @@ var components_default = {
   table: ({ node, ...props }) => /* @__PURE__ */ jsx9("table", { ...props }),
   td: ({ node, ...props }) => /* @__PURE__ */ jsx9("td", { ...props }),
   img: ImageComponent,
+  text: ({ node, ...props }) => {
+    return /* @__PURE__ */ jsx9(Box5, { sx: { marginBlock: "1em" }, ...props });
+  },
   blockquote: ({ ...props }) => {
     return /* @__PURE__ */ jsx9(Callout, { ...props });
   },
@@ -6082,7 +6085,24 @@ var components_default = {
 // src/lib/markdown-renderer/MarkdownRenderer.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
 var MDXRemote2 = MDXRemote;
-var MarkdownRenderer = ({ serialized }) => /* @__PURE__ */ jsx10(Box6, { children: /* @__PURE__ */ jsx10(MDXRemote2, { components: components_default, lazy: true, ...serialized }) });
+var MarkdownRenderer = ({
+  serialized,
+  customComponents,
+  scope
+}) => {
+  if (components_default && scope) {
+    return /* @__PURE__ */ jsx10(Box6, { children: /* @__PURE__ */ jsx10(
+      MDXRemote2,
+      {
+        components: { ...components_default, ...customComponents },
+        lazy: true,
+        ...serialized,
+        scope
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx10(Box6, { children: /* @__PURE__ */ jsx10(MDXRemote2, { components: components_default, lazy: true, ...serialized }) });
+};
 var MarkdownRenderer_default = MarkdownRenderer;
 
 // src/lib/table-of-contents/TableOfContents.tsx

diff --git a/dist/index.mjs.map b/dist/index.mjs.map
diff --git a/src/lib/markdown-renderer/MarkdownRenderer.stories.tsx b/src/lib/markdown-renderer/MarkdownRenderer.stories.tsx
@@ -2,7 +2,11 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { ThemeProvider } from '@vtex/brand-ui'
 import { MarkdownRenderer } from 'index'
 import LibraryContextProvider from 'utils/context/libraryContext'
-import { exampleContextProps, serialized } from 'utils/storybook-constants'
+import {
+  TestComponent,
+  exampleContextProps,
+  serialized,
+} from 'utils/storybook-constants'
 
 const meta = {
   title: 'Example/MarkdownRenderer',
@@ -25,5 +29,6 @@ type Story = StoryObj<typeof meta>
 export const SimpleMarkdownRenderer: Story = {
   args: {
     serialized: serialized,
+    customComponents: { TestComponent },
   },
 }
diff --git a/src/lib/markdown-renderer/MarkdownRenderer.tsx b/src/lib/markdown-renderer/MarkdownRenderer.tsx
@@ -5,10 +5,29 @@ import components from './components'
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const MDXRemote2 = MDXRemote as any
 
-const MarkdownRenderer = ({ serialized }: MarkdownRendererProps) => (
-  <Box>
-    <MDXRemote2 components={components} lazy {...serialized} />
-  </Box>
-)
+const MarkdownRenderer = ({
+  serialized,
+  customComponents,
+  scope,
+}: MarkdownRendererProps) => {
+  if (components && scope) {
+    return (
+      <Box>
+        <MDXRemote2
+          components={{ ...components, ...customComponents }}
+          lazy
+          {...serialized}
+          scope={scope}
+        />
+      </Box>
+    )
+  }
+
+  return (
+    <Box>
+      <MDXRemote2 components={components} lazy {...serialized} />
+    </Box>
+  )
+}
 
 export default MarkdownRenderer
diff --git a/src/lib/markdown-renderer/MarkdownRenderer.types.ts b/src/lib/markdown-renderer/MarkdownRenderer.types.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { MDXRemoteSerializeResult } from 'next-mdx-remote'
 
 export type Component = {
@@ -8,6 +9,12 @@ export type Component = {
 
 export interface MarkdownRendererProps {
   serialized: MDXRemoteSerializeResult
+  customComponents?: {
+    [name: string]: any
+  }
+  scope?: {
+    [name: string]: any
+  }
 }
 
 export interface ObservableHeadingProps {

diff --git a/src/lib/markdown-renderer/components.tsx b/src/lib/markdown-renderer/components.tsx
@@ -72,7 +72,7 @@ const Callout = ({ node, icon, ...props }: Component) => {
           : ''
       }`}
     >
-      <p {...props} />
+      <div {...props} />
     </blockquote>
   )
 }
@@ -162,6 +162,9 @@ export default {
   table: ({ node, ...props }: Component) => <table {...props} />,
   td: ({ node, ...props }: Component) => <td {...props} />,
   img: ImageComponent,
+  text: ({ node, ...props }: Component) => {
+    return <Box sx={{ marginBlock: '1em' }} {...props} />
+  },
   blockquote: ({ ...props }: Component) => {
     return <Callout {...props} />
   },

diff --git a/src/lib/markdown-renderer/styles.module.css b/src/lib/markdown-renderer/styles.module.css
@@ -40,7 +40,7 @@ table .code {
   word-break: break-all;
 }
 
-.blockquote p{
+.blockquote p, .blockquote div{
   margin: 0px;
   grid-column: 2 / -1;
   grid-row: 1 / 1;

diff --git a/src/utils/storybook-constants.ts → src/utils/storybook-constants.tsx b/src/utils/storybook-constants.ts → src/utils/storybook-constants.tsx
@@ -1,5 +1,6 @@
 import APIGuidesIcon from 'components/icons/api-guides-icon'
 import APIReferenceIcon from 'components/icons/api-reference-icon'
+import { Component } from 'lib/markdown-renderer/MarkdownRenderer.types'
 import { serialize } from 'next-mdx-remote/serialize'
 
 export const sections = [
@@ -124,9 +125,16 @@ These are some of the features built-in our clients infrastructure:
 
 ![Clients on IO Services](https://imgur.com/i45O8MN.png)
 
+<TestComponent text="Test component prop" />
+
 Learn how to create Clients of your own by accessing [Managing Clients](https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-how-to-create-and-use-clients) documentation. 
 `
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const TestComponent = ({ node, ...props }: Component) => {
+  return <div>{props.text}</div>
+}
+
 export const serialized = await serialize(markdown_example, {
   mdxOptions: {
     development: true,