feat: ArticleRender

.storybook/main.ts

@@ -1,9 +1,45 @@
 import type { StorybookConfig } from '@storybook/react-vite'
+import fs from 'fs'
 import path from 'path'
-import { mergeConfig } from 'vite'
+import { mergeConfig, type Plugin } from 'vite'
 
 const srcPath = path.resolve(__dirname, '../src')
 const mocksPath = path.resolve(__dirname, 'mocks')
+const mdxExamplePath = path.resolve(__dirname, 'mdx-example.md')
+
+const VIRTUAL_MDX_ID = 'virtual:storybook-mdx'
+const RESOLVED_VIRTUAL_MDX_ID = `\0${VIRTUAL_MDX_ID}`
+
+// `next-mdx-remote` picks the JSX runtime from NODE_ENV when it evaluates the
+// compiled source: `jsx-dev-runtime` only exposes `jsxDEV`, while
+// `jsx-runtime` exposes `jsx`/`jsxs`. Compiling for the other mode makes the
+// generated code destructure a function that isn't there.
+const nodeEnv = process.env.NODE_ENV || 'development'
+
+// `next-mdx-remote/serialize` runs the whole MDX compiler and only works in
+// Node, so the example content is serialized here and shipped to the browser
+// as plain data.
+const serializedMdxPlugin = (): Plugin => ({
+  name: 'storybook-serialized-mdx',
+  resolveId: (id) => (id === VIRTUAL_MDX_ID ? RESOLVED_VIRTUAL_MDX_ID : null),
+  load: async (id) => {
+    if (id !== RESOLVED_VIRTUAL_MDX_ID) return null
+
+    const { serialize } = await import('next-mdx-remote/serialize')
+    const serialized = await serialize(fs.readFileSync(mdxExamplePath, 'utf8'), {
+      mdxOptions: { development: nodeEnv === 'development' },
+    })
+
+    return `export default ${JSON.stringify(serialized)}`
+  },
+  handleHotUpdate: ({ file, server }) => {
+    if (file !== mdxExamplePath) return
+
+    const mod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_MDX_ID)
+
+    if (mod) server.moduleGraph.invalidateModule(mod)
+  },
+})
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
@@ -31,9 +67,10 @@ const config: StorybookConfig = {
   }),
   viteFinal: async (config) =>
     mergeConfig(config, {
+      plugins: [serializedMdxPlugin()],
       define: {
         'process.env': JSON.stringify({
-          NODE_ENV: process.env.NODE_ENV || 'development',
+          NODE_ENV: nodeEnv,
           NEXT_PUBLIC_ALGOLIA_APP_ID:
             process.env.NEXT_PUBLIC_ALGOLIA_APP_ID || '',
           NEXT_PUBLIC_ALGOLIA_SEARCH_KEY:
@@ -51,9 +88,11 @@ const config: StorybookConfig = {
           'next/image.js': path.join(mocksPath, 'next-image.tsx'),
           'next/link.js': path.join(mocksPath, 'next-link.tsx'),
           'next/router.js': path.join(mocksPath, 'next-router.ts'),
+          'next/head.js': path.join(mocksPath, 'next-head.tsx'),
           'next/image': path.join(mocksPath, 'next-image.tsx'),
           'next/link': path.join(mocksPath, 'next-link.tsx'),
           'next/router': path.join(mocksPath, 'next-router.ts'),
+          'next/head': path.join(mocksPath, 'next-head.tsx'),
         },
       },
     }),

.storybook/mdx-example.md

@@ -0,0 +1,20 @@
+# Clients
+
+Systems are meant to solve real problems by communicating to the needed services. A delivery app, for example, solves the issue of the desire to eat by communicating with a local restaurant service.
+
+On VTEX IO architecture, the communication made by a system to request a service is so crucial that a whole concept was built for it: **Clients**.
+
+In other words, Clients are configurations to be set up in a given system to **abstract its communications to the needed services**.
+
+When building software, you can tackle complexities by setting up clients and then optimizing your code. Some standard clients are already into the VTEX IO. Check them [here](https://github.com/vtex/node-vtex-api/blob/ccf4d8f8d3208007c4bfd558baf979df8d825af8/src/clients/IOClients.ts).
+
+These are some of the features built-in our clients infrastructure:
+
+- Cache;
+- Native metrics support;
+- Retry and timeout options;
+- Billing tracking.
+
+![Clients on IO Services](https://imgur.com/i45O8MN.png)
+
+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.

.storybook/mocks/next-head.tsx

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react'
+
+const Head = (_props: { children?: ReactNode }) => null
+
+export default Head

dist/index.d.mts

@@ -105,8 +105,6 @@ type FeedbackModalPayload = {
     url: string;
 };
 interface FeedbackModalProps {
-    isOpen: boolean;
-    onClose: () => void;
     /**
      * Canonical page URL prefilled in the Article field.
      * Defaults to `window.location.href` so Help Center and Developer Portal
@@ -121,8 +119,10 @@ interface FeedbackModalProps {
     feedbackEndpoint?: string;
     /** Override the default POST. */
     sendFeedback?: (payload: FeedbackModalPayload) => Promise<void>;
+    /** Open the modal on first render. Useful for Storybook. */
+    defaultOpen?: boolean;
 }
-declare const FeedbackModal: ({ isOpen, onClose, pageUrl, initialMessage, feedbackEndpoint, sendFeedback, }: FeedbackModalProps) => react_jsx_runtime.JSX.Element;
+declare const FeedbackModal: ({ pageUrl, initialMessage, feedbackEndpoint, sendFeedback, defaultOpen, }: FeedbackModalProps) => react_jsx_runtime.JSX.Element;
 
 declare const Search: () => react_jsx_runtime.JSX.Element;
 
@@ -470,6 +470,72 @@ type TimeToReadProps = {
 };
 declare const TimeToRead: ({ minutes }: TimeToReadProps) => react_jsx_runtime.JSX.Element;
 
+type DateTextProps = {
+    createdAt: Date;
+    updatedAt: Date;
+};
+declare const DateText: ({ createdAt, updatedAt }: DateTextProps) => react_jsx_runtime.JSX.Element;
+
+type ArticlePaginationDoc = {
+    slug: string | null;
+    name: string | null;
+};
+type ArticlePaginationData = {
+    previousDoc: ArticlePaginationDoc;
+    nextDoc: ArticlePaginationDoc;
+};
+type ArticlePaginationProps = {
+    pagination: ArticlePaginationData;
+    hidePaginationPrevious?: boolean;
+    hidePaginationNext?: boolean;
+};
+declare const ArticlePagination: ({ pagination, hidePaginationNext, hidePaginationPrevious, }: ArticlePaginationProps) => react_jsx_runtime.JSX.Element;
+
+type InsertAccountNameProps = {
+    id: string;
+};
+declare const InsertAccountName: ({ id }: InsertAccountNameProps) => react_jsx_runtime.JSX.Element;
+
+type SuggestEditsProps = {
+    /** GitHub edit URL for the current documentation file. */
+    urlToEdit: string;
+    /** Compact size used next to the table of contents. */
+    small?: boolean;
+    sx?: SxStyleProp;
+};
+declare const SuggestEdits: ({ urlToEdit, small, sx, }: SuggestEditsProps) => react_jsx_runtime.JSX.Element;
+
+type ArticleRenderProps = {
+    serialized: MDXRemoteSerializeResult;
+    breadcrumbList: BreadcrumbItem[];
+    slug: string;
+    path: string;
+    type: string;
+    pageUrl: string;
+    urlToEdit: string;
+    rawContentBaseUrl: string;
+    contributors?: ContributorsType[];
+    headings?: Item[];
+    headingList?: Item[];
+    pagination?: ArticlePaginationData;
+    children?: ReactNode;
+    seeAlso?: ReactNode;
+    customComponents?: MarkdownRendererProps['customComponents'];
+    scope?: MarkdownRendererProps['scope'];
+    /** Wrap the markdown output without remounting it on parent re-renders. */
+    renderMarkdown?: (markdown: ReactNode) => ReactNode;
+    showReadingTime?: boolean;
+    showAskAIMenu?: boolean;
+    showAuthor?: boolean;
+    showContributors?: boolean;
+    showFeedbackSection?: boolean;
+    showSuggestEdits?: boolean;
+    showArticlePagination?: boolean;
+    showTableOfContents?: boolean;
+    showDateText?: boolean;
+};
+declare const ArticleRender: ({ serialized, headings, headingList, breadcrumbList, contributors, path, pagination, slug, type, pageUrl, urlToEdit, rawContentBaseUrl, children, seeAlso, customComponents, scope, renderMarkdown, showReadingTime, showAskAIMenu, showAuthor, showContributors, showFeedbackSection, showSuggestEdits, showArticlePagination, showTableOfContents, showDateText, }: ArticleRenderProps) => react_jsx_runtime.JSX.Element;
+
 type TroubleshootingItem = {
     slug: string;
     title: string;
@@ -742,4 +808,4 @@ declare const LikeIcon: (props: IconProps) => react_jsx_runtime.JSX.Element;
 
 declare const LikeSelectedIcon: (props: IconProps) => react_jsx_runtime.JSX.Element;
 
-export { APIGuidesIcon, APIReferenceIcon, AddedIcon, type AlgoliaConfig, AnnouncementBar, type AnnouncementBarAction, type AnnouncementBarProps, type AnnouncementBarType, AnnouncementIcon, AppDevelopmentIcon, ArrowLeftIcon, ArrowRightIcon, AskAIMenu, type AskAIMenuProps, type AskAIProvider, AskAssistant, type AskAssistantExampleCategory, type AskAssistantFeedback, type AskAssistantProps, type AssistantStreamEvent, type AssistantStreamHandler, Author, type AuthorProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, CaretIcon, ChatGPTIcon, type ChatMessage, CheckboxIcon, ChipFilter, type ChipFilterCategory, type ChipFilterProps, ClaudeIcon, CloseFilterIcon, CloseIcon, CollapseIcon, CommunityIcon, Contributors, type ContributorsProps, type ContributorsType, CookieBar, CopilotIcon, CopyButton, type CopyButtonProps, CopyHeadingLink, type CopyHeadingLinkProps, CopyIcon, CopyLinkButton, DEFAULT_ASK_ASSISTANT_EXAMPLES, DeprecatedIcon, DeveloperPortalIcon, type DocPath, DocumentationUpdatesIcon, DropdownMenu, type DropdownMenuProps, EditIcon, EmailIcon, ExpandIcon, ExpandedResultsIcon, FAQIcon, FacebookCircleIcon, FacebookIcon, FeedbackModal, type FeedbackModalPayload, type FeedbackModalProps, FeedbackSection, type FeedbackSectionProps, ListingFilter as Filter, type FilterGroup, FilterIcon, type FilterOption, FixedIcon, Footer, type FooterLink, type FooterProps, type FooterVariant, GearTroubleshootingIcon, GeminiIcon, GithubIcon, GraphIcon, GridIcon, HamburgerMenu, Header, type HeaderProps, type HeaderVariant, HelpCenterIcon, type HistoryConversation, type HybridSearchConfig, ImprovedIcon, InfoIcon, Input, IgIcon as InstagramIcon, type Item, KnownIssueIcon as KnownIssuesIcon, LibraryContext, LibraryContextProvider, LikeIcon, LikeSelectedIcon, LinkIcon, LinkedinCircleIcon, LinkedinIcon, ListingFilter, type ListingFilterLabels, type ListingFilterProps, type ListingFilterSelection, LongArrowIcon, MarkdownRenderer, MegaphoneIcon, MenuIcon, MobileSearch, type MobileSearchProps, NewChatIcon, NewIcon, OnThisPage, type OnThisPageProps, PaperIcon, type ProcessStep, RefreshIcon, ReleaseNotesIcon, RemovedIcon, ResizeIcon, Search, type SearchBackendConfig, SearchConfig, SearchIcon, SearchInput, type SearchInputProps, type Section, SendIcon, ShareButton, ShareIcon, SideBarToggleIcon, Sidebar, SparkleIcon, StartHereIcon, StorefrontDevelopmentIcon, SubscriptionList, TableOfContents, Tag, type TagColor, type TagProps, TimeToRead, type TimeToReadProps, Tooltip, TrashcanIcon, TroubleshootingCard, type TroubleshootingCardProps, type TroubleshootingCardVariant, type TroubleshootingFilterState, TroubleshootingIcon, type TroubleshootingItem, TutorialsIcon, TwitterCircleIcon, TwitterIcon, VTEXDevPortalIcon, VTEXHelpCenterIcon, VTEXIOAppsIcon, VTEXLogoFooter, WarningIcon, WhatsNextCard, type WhatsNextDataElement, YoutubeIcon, collectTroubleshootingFilterOptions, filterTroubleshootingItems, getDaysElapsed };
+export { APIGuidesIcon, APIReferenceIcon, AddedIcon, type AlgoliaConfig, AnnouncementBar, type AnnouncementBarAction, type AnnouncementBarProps, type AnnouncementBarType, AnnouncementIcon, AppDevelopmentIcon, ArrowLeftIcon, ArrowRightIcon, ArticlePagination, type ArticlePaginationData, type ArticlePaginationDoc, type ArticlePaginationProps, ArticleRender, type ArticleRenderProps, AskAIMenu, type AskAIMenuProps, type AskAIProvider, AskAssistant, type AskAssistantExampleCategory, type AskAssistantFeedback, type AskAssistantProps, type AssistantStreamEvent, type AssistantStreamHandler, Author, type AuthorProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, CaretIcon, ChatGPTIcon, type ChatMessage, CheckboxIcon, ChipFilter, type ChipFilterCategory, type ChipFilterProps, ClaudeIcon, CloseFilterIcon, CloseIcon, CollapseIcon, CommunityIcon, Contributors, type ContributorsProps, type ContributorsType, CookieBar, CopilotIcon, CopyButton, type CopyButtonProps, CopyHeadingLink, type CopyHeadingLinkProps, CopyIcon, CopyLinkButton, DEFAULT_ASK_ASSISTANT_EXAMPLES, DateText, type DateTextProps, DeprecatedIcon, DeveloperPortalIcon, type DocPath, DocumentationUpdatesIcon, DropdownMenu, type DropdownMenuProps, EditIcon, EmailIcon, ExpandIcon, ExpandedResultsIcon, FAQIcon, FacebookCircleIcon, FacebookIcon, FeedbackModal, type FeedbackModalPayload, type FeedbackModalProps, FeedbackSection, type FeedbackSectionProps, ListingFilter as Filter, type FilterGroup, FilterIcon, type FilterOption, FixedIcon, Footer, type FooterLink, type FooterProps, type FooterVariant, GearTroubleshootingIcon, GeminiIcon, GithubIcon, GraphIcon, GridIcon, HamburgerMenu, Header, type HeaderProps, type HeaderVariant, HelpCenterIcon, type HistoryConversation, type HybridSearchConfig, ImprovedIcon, InfoIcon, Input, InsertAccountName, type InsertAccountNameProps, IgIcon as InstagramIcon, type Item, KnownIssueIcon as KnownIssuesIcon, LibraryContext, LibraryContextProvider, LikeIcon, LikeSelectedIcon, LinkIcon, LinkedinCircleIcon, LinkedinIcon, ListingFilter, type ListingFilterLabels, type ListingFilterProps, type ListingFilterSelection, LongArrowIcon, MarkdownRenderer, MegaphoneIcon, MenuIcon, MobileSearch, type MobileSearchProps, NewChatIcon, NewIcon, OnThisPage, type OnThisPageProps, PaperIcon, type ProcessStep, RefreshIcon, ReleaseNotesIcon, RemovedIcon, ResizeIcon, Search, type SearchBackendConfig, SearchConfig, SearchIcon, SearchInput, type SearchInputProps, type Section, SendIcon, ShareButton, ShareIcon, SideBarToggleIcon, Sidebar, SparkleIcon, StartHereIcon, StorefrontDevelopmentIcon, SubscriptionList, SuggestEdits, type SuggestEditsProps, TableOfContents, Tag, type TagColor, type TagProps, TimeToRead, type TimeToReadProps, Tooltip, TrashcanIcon, TroubleshootingCard, type TroubleshootingCardProps, type TroubleshootingCardVariant, type TroubleshootingFilterState, TroubleshootingIcon, type TroubleshootingItem, TutorialsIcon, TwitterCircleIcon, TwitterIcon, VTEXDevPortalIcon, VTEXHelpCenterIcon, VTEXIOAppsIcon, VTEXLogoFooter, WarningIcon, WhatsNextCard, type WhatsNextDataElement, YoutubeIcon, collectTroubleshootingFilterOptions, filterTroubleshootingItems, getDaysElapsed };