[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/ReleaseNotes.tsx from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { useQuery } from 'react-apollo'
import { ButtonPlain } from 'vtex.styleguide'
import { FormattedMessage } from 'react-intl'

import releaseNotes from './graphql/releaseNotes.graphql'

interface ReleseNotesQuery {
  releaseNotes: {
    __typename: string
    edges: Array<{
      cursor: string
      node: {
        id: string
        title: string
        description: string
        date: string
        markdown: string
      }
    }>
    pageInfo: {
      hasPreviousPage: boolean
      hasNextPage: boolean
      startCursor: string
      endCursor: string
    }
  }
}

const isNotLastResult = (results: any[], index: number) =>
  index !== results.length - 1

const ReleaseNotes: FC = () => {
  const { data, loading, fetchMore } = useQuery<ReleseNotesQuery>(
    releaseNotes,
    {
      fetchPolicy: 'cache-and-network',
    }
  )

  return (
    <section className="w-100 flex flex-column">
      <h1 className="t-heading-3">
        <FormattedMessage id="docs-ui/release-notes" />
      </h1>

      <p className="c-on-base lh-copy">
        <FormattedMessage id="docs-ui/release-notes-description" />
      </p>

      <ul className="w-50-ns pl6 mt0">
        {data?.releaseNotes?.edges.map((edge, index) => (
          <li
            key={edge.cursor}
            className={`${
              isNotLastResult(data!.releaseNotes.edges, index) || loading
                ? 'bb b--muted-4'
                : ''
            }`}>
            <a
              className={`link c-emphasis no-underline mv4 t-body ml-auto
                flex items-center dim`}
              href={`/docs/releases/${edge.node.id}/README`}>
              {edge.node.title.replace(
                /(VTEX IO Release Notes - |VTEX IO Highlights - )/,
                ''
              )}
            </a>
          </li>
        ))}
        {loading && <ListSkeleton />}
      </ul>

      {data?.releaseNotes?.pageInfo.hasNextPage && (
        <div className="mb6">
          <ButtonPlain
            onClick={() => {
              const after =
                data?.releaseNotes?.edges[data?.releaseNotes?.edges.length - 1]
                  .cursor
              fetchMore({
                variables: {
                  after,
                },
                updateQuery: (prev, { fetchMoreResult }) => {
                  const newEdges = fetchMoreResult!.releaseNotes!.edges
                  const { pageInfo } = fetchMoreResult!.releaseNotes!

                  return newEdges.length
                    ? {
                        releaseNotes: {
                          __typename: prev.releaseNotes.__typename,
                          edges: [...prev.releaseNotes.edges, ...newEdges],
                          pageInfo,
                        },
                      }
                    : prev
                },
              })
            }}>
            <FormattedMessage id="docs-ui/see-previous-releases" />
          </ButtonPlain>
        </div>
      )}
    </section>
  )
}

function SkeletonLine({ big = false }) {
  return (
    <li className="bb b--muted-4">
      <span className="dib bg-muted-3 o-60 t-body mv4 skeleton-shimmer transparent-text">
        {big ? 'Week 00/0000' : 'Week 00&00/0000'}
      </span>
    </li>
  )
}

function ListSkeleton() {
  return (
    <>
      {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((_, index) => (
        <SkeletonLine key={index} big={!!(index % 2)} />
      ))}
    </>
  )
}

export default ReleaseNotes

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/RecipesList.tsx from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { FormattedMessage } from 'react-intl'
import { graphql } from 'react-apollo'
import { ApolloError } from 'apollo-client'
import { branch, compose, renderComponent, renderNothing } from 'recompose'
import { withRuntimeContext, InjectedRuntime } from 'vtex.render-runtime'

import { IO_DOCUMENTATION } from './modules/constantExports'
import RecipeListItem from './components/RecipeListItem'
import EmptyDocs from './components/EmptyAppDocs'
import { slug } from './modules'
import RecipeList from './graphql/recipesList.graphql'

const RecipesList: FC<OuterProps & InjectedRuntime> = ({
  RecipeListQuery,
  runtime,
}) => {
  const {
    route: {
      params: { category },
    },
  } = runtime

  return (
    <div>
      <h1 className="t-heading-1 mb6">
        <FormattedMessage id={`docs-ui/recipes.${category}`} />
      </h1>
      <p className="t-body c-on-base w-70-ns">
        <FormattedMessage id={`docs-ui/recipes.${category}-description`} />
      </p>
      <div>
        {RecipeListQuery.recipeList.map((recipe: Recipe) => (
          <RecipeListItem
            key={slug(recipe.description)}
            title={recipe.title}
            description={recipe.description}
            link={`/docs/recipes/${getShortRecipePath(recipe.path)}`}
          />
        ))}
      </div>
    </div>
  )
}

function getShortRecipePath(path: string) {
  // the path will always be something like: dist/vtex.docs-graphql/Recipes/<locale>/<category>/<fileName>.md
  const PATH_PREFIX = 'dist/vtex.docs-graphql/Recipes/'
  // the <locale> section will always be one of 'en/', 'pt/', 'es/'
  const LOCALE_LENGTH = 3
  const FILE_EXTENSION = '.md'
  return path.substring(
    PATH_PREFIX.length + LOCALE_LENGTH,
    path.length - FILE_EXTENSION.length
  )
}

interface Recipe {
  title: string
  description: string
  path: string
}

interface OuterProps {
  RecipeListQuery: {
    recipeList: Recipe[]
    loading: boolean
    error?: ApolloError
  }
}

export default compose<any, any>(
  withRuntimeContext,
  graphql(RecipeList, {
    name: 'RecipeListQuery',
    options: (props: InjectedRuntime) => {
      const {
        route: {
          params: { category },
        },
      } = props.runtime
      const shouldFetchAllRecipes = category === 'all'

      return {
        variables: {
          category: shouldFetchAllRecipes ? '' : category,
          appName: IO_DOCUMENTATION,
          locale: 'en',
        },
      }
    },
  }),
  branch(
    ({ RecipeListQuery }: OuterProps) => RecipeListQuery.loading,
    renderNothing
  ),
  branch(
    ({ RecipeListQuery }: OuterProps) => !!RecipeListQuery.error,
    renderComponent(EmptyDocs)
  )
)(RecipesList)

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/Concept.tsx from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { Query } from 'react-apollo'
import { ApolloError } from 'apollo-client'
import { useRuntime } from 'vtex.render-runtime'

import { IO_DOCUMENTATION } from './modules/constantExports'
import DocsRenderer from './components/DocsRenderer'
import Skeleton from './components/Skeleton'
import EmptyDocs from './components/EmptyDocs'
import { maybeAddMdExtension } from './modules'
import MarkdownFile from './graphql/markdownFile.graphql'

const Concept: FC = () => {
  const {
    route: { params },
  } = useRuntime()

  return (
    <div className="w-100 center flex flex-column">
      <Query
        query={MarkdownFile}
        variables={{
          appName: IO_DOCUMENTATION,
          fileName: `Concepts/${maybeAddMdExtension(params.concept)}`,
          locale: 'en',
        }}>
        {({
          loading,
          error,
          data,
        }: {
          loading: boolean
          error?: ApolloError
          data: { markdownFile: { markdown: string; meta: MetaData } }
        }) => {
          if (loading) return <Skeleton />
          if (error) return <EmptyDocs />

          const {
            markdownFile: { markdown, meta },
          } = data

          return <DocsRenderer markdown={markdown} meta={meta} />
        }}
      </Query>
    </div>
  )
}

interface MetaData {
  title: string
  description: string
  tags: string[]
  version: string
  git: string
}

export default Concept

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/package.json from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "vtex.docs-ui",
  "version": "2.1.5",
  "scripts": {
    "lint": "tsc --noEmit && eslint --ext ts,tsx .",
    "lint:locales": "intl-equalizer",
    "test": "vtex-test-tools test"
  },
  "dependencies": {
    "@types/ramda": "^0.26.38",
    "highlight.js": "^9.16.2",
    "ramda": "^0.26.1",
    "react-anchor-link-smooth-scroll": "^1.0.12",
    "react-ga": "^2.5.7",
    "react-markdown": "^4.1.0",
    "recompose": "^0.30.0",
    "remark-emoji": "^2.0.2",
    "slugify": "^1.3.4"
  },
  "devDependencies": {
    "@types/graphql": "^0.13.3",
    "@types/highlight.js": "^9.12.3",
    "@types/jest": "^25.2.1",
    "@types/node": "^9.4.7",
    "@types/react": "^16.3.16",
    "@types/react-dom": "^16.0.5",
    "@types/react-helmet": "^5.0.5",
    "@types/react-intl": "^2.3.5",
    "@types/recompose": "^0.30.6",
    "@vtex/intl-equalizer": "^2.3.0",
    "@vtex/test-tools": "^0.3.2",
    "graphql": "^0.13.0",
    "react": "^16.8.6",
    "react-apollo": "^3.1.3",
    "react-dom": "^16.8.6",
    "react-intl": "^3.0.0",
    "typescript": "3.8.3"
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/ReleaseArticle.tsx from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { Query } from 'react-apollo'
import { ApolloError } from 'apollo-client'
import { useRuntime } from 'vtex.render-runtime'

import DocsRenderer from './components/DocsRenderer'
import Skeleton from './components/Skeleton'
import EmptyDocs from './components/EmptyDocs'
import { maybeAddMdExtension } from './modules'
import MarkdownFile from './graphql/markdownFile.graphql'

const ReleaseArticle: FC = () => {
  const {
    route: { params },
  } = useRuntime()

  return (
    <div className="w-100 center flex flex-column">
      <Query
        query={MarkdownFile}
        variables={{
          appName: 'vtex.io-release-notes@0.x',
          fileName: `${params.week}/${maybeAddMdExtension(params.article)}`,
        }}>
        {({
          loading,
          error,
          data,
        }: {
          loading: boolean
          error?: ApolloError
          data: { markdownFile: { markdown: string; meta: MetaData } }
        }) => {
          if (loading) return <Skeleton />
          if (error) return <EmptyDocs />

          const {
            markdownFile: { markdown, meta },
          } = data

          return <DocsRenderer markdown={markdown} meta={meta} />
        }}
      </Query>
    </div>
  )
}

interface MetaData {
  title: string
  description: string
  tags: string[]
  version: string
  git: string
}

export default ReleaseArticle

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/styles.global.css from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```css
/* Skeleton animation */
@keyframes shimmer-anim {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(50%, 0, 0);
  }
}

/* Limits the page width */
.wrapper {
  margin: 0 auto;
  max-width: 1100px;
  padding: 0 20px;
}

@media only screen and (min-width: 1500px) {
  .wrapper {
    max-width: 1400px;
  }
}

/* Makes the header fixed */
.navPusher {
  left: 0;
  min-height: 100%;
  padding-top: 56px;
  position: relative;
  z-index: 99;
}

@media screen and (min-width: 1024px) {
  .navPusher {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    padding-top: 56px;
  }

  .navPusher,
  .navPusher > :first-child {
    flex-grow: 1;
  }
}

/* Sidebar */
@media only screen and (min-width: 1024px) {
  .docsNavContainer {
    flex: 0 0 240px;
    height: calc(100vh - 50px);
    position: -webkit-sticky;
    position: sticky;
    overflow-y: auto;
    top: 50px;
  }
}

.t-body {
  line-height: 24px;
}

/* Main content */
.mainContainer {
  flex: 1 1 0%;
  max-width: 100%;
}

.mainContainer h1:first-of-type {
  margin-top: 0;
  margin-bottom: 16px;
}

/* On Page Nav */
@media only screen and (min-width: 1024px) {
  .onPageNav {
    align-self: flex-start;
    display: block;
    flex: 0 0 240px;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    position: -webkit-sticky;
    position: sticky;
    top: 90px;
  }
}

.shimmer {
  width: 200%;
  height: 100%;
  position: absolute;
  top: 0;
  left: -100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.35),
    rgba(255, 255, 255, 0)
  );
  background-size: 50% 100%;
  animation: shimmer-anim 0.7s linear infinite;
}

/* end Skeleton animation */

.alert-info {
  background-color: #edf4fa;
  border-color: rgb(54, 141, 247);
  border-radius: 4px;
  border-width: 0px 0px 0px 4px;
  border-style: solid;
  box-sizing: border-box;
  padding: 20px 16px;
  margin-bottom: 1rem;
  color: #0e4180;
  line-height: 1.5rem;
}

.alert-info a {
  color: #f71963;
}

.alert-info code {
  font-size: 0.9rem;
  background-color: #b6d7ff;
  padding: 4px 6px;
  border-radius: 5px;
}

.alert-warning {
  background-color: #fff6e0;
  border-color: rgb(255, 177, 0);
  border-radius: 4px;
  border-width: 0px 0px 0px 4px;
  border-style: solid;
  box-sizing: border-box;
  padding: 20px 16px;
  margin-bottom: 1rem;
  color: #804a0e;
  line-height: 1.5rem;
}

.alert-warning code {
  font-size: 0.9rem;
  background-color: #ffdd91;
  padding: 4px 6px;
  border-radius: 5px;
}

.alert-warning a {
  color: #f71963;
}

.alert-danger {
  background-color: #ffe6e6;
  border-color: rgb(255, 76, 76);
  border-radius: 4px;
  border-width: 0px 0px 0px 4px;
  border-style: solid;
  box-sizing: border-box;
  padding: 12px 16px;
  margin-bottom: 1rem;
}

.alert-danger a {
  color: #f71963;
}

.transparent-text {
  color: transparent;
}

.searchResult {
  padding-bottom: 35px;
  line-height: 150%;
}

.searchResultBorder {
  border-bottom: 1px solid #cacbcc;
}

.searchTitle {
  line-height: 150%;
}

.searchSnippet {
  color: #797979;
  letter-spacing: 0.015em;
}

/* Base16 Atelier Sulphurpool Light - Theme */
/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/sulphurpool) */
/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */

/* Atelier-Sulphurpool Comment */
.hljs-comment,
.hljs-quote {
  color: #6b7394;
}

/* Atelier-Sulphurpool Red */
.hljs-variable,
.hljs-template-variable,
.hljs-attribute,
.hljs-tag,
.hljs-name,
.hljs-regexp,
.hljs-link,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class {
  color: #c94922;
}

/* Atelier-Sulphurpool Orange */
.hljs-number,
.hljs-meta,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params {
  color: #c76b29;
}

/* Atelier-Sulphurpool Green */
.hljs-string,
.hljs-symbol,
.hljs-bullet {
  color: #ac9739;
}

/* Atelier-Sulphurpool Blue */
.hljs-title,
.hljs-section {
  color: #3d8fd1;
}

/* Atelier-Sulphurpool Purple */
.hljs-keyword,
.hljs-selector-tag {
  color: #6679cc;
}

.hljs {
  display: block;
  overflow-x: auto;
  background: #f5f7ff;
  color: #5e6687;
  padding: 1em;
  font-size: 0.9rem;
  border-radius: 4px;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

.hljs-addition {
  background: #dfd;
}

.hljs-deletion {
  background: #fdd;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/UnderConstruction.tsx from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { EmptyState } from 'vtex.styleguide'

const UnderConstruction: FC = () => (
  <div className="min-vh-100 w-100 flex justify-center items-center">
    <EmptyState title="Under Construction">
      <p>This page is still being developed.</p>
      <p>Come back in a bit and something awesome should be here!</p>
    </EmptyState>
  </div>
)

export default UnderConstruction

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/Recipe.tsx from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { Query } from 'react-apollo'
import { ApolloError } from 'apollo-client'
import { useRuntime } from 'vtex.render-runtime'

import DocsRenderer from './components/DocsRenderer'
import Skeleton from './components/Skeleton'
import EmptyDocs from './components/EmptyDocs'
import { IO_DOCUMENTATION } from './modules/constantExports'
import { maybeAddMdExtension } from './modules'
import MarkdownFile from './graphql/markdownFile.graphql'

const Recipe: FC = () => {
  const {
    route: { params },
  } = useRuntime()

  return (
    <div className="w-100 center flex flex-column">
      <Query
        query={MarkdownFile}
        variables={{
          appName: IO_DOCUMENTATION,
          fileName: `Recipes/${params.category}/${maybeAddMdExtension(
            params.recipe
          )}`,
          locale: 'en',
        }}>
        {({
          loading,
          error,
          data,
        }: {
          loading: boolean
          error?: ApolloError
          data: { markdownFile: { markdown: string; meta: MetaData } }
        }) => {
          if (loading) return <Skeleton />
          if (error) return <EmptyDocs />

          const {
            markdownFile: { markdown, meta },
          } = data

          return <DocsRenderer markdown={markdown} meta={meta} />
        }}
      </Query>
    </div>
  )
}

interface MetaData {
  title: string
  description: string
  tags: string[]
  version: string
  git: string
}

export default Recipe

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/PageLayoutContainer.tsx from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Fragment, FC } from 'react'
import { Helmet } from 'vtex.render-runtime'

import Footer from './components/Footer'
import TopNav from './components/TopNav'
import favicon from './images/favicon.png'
import SideBar from './components/SideBar'
import PageView from './components/PageView'
import { EnhancedAppVersionProvider } from './components/AppVersionContext'
import { EnhancedSideBarContentProvider } from './components/SideBarContext'

const PageLayoutContainer: FC = ({ children }) => (
  <Fragment>
    <Helmet>
      <title>VTEX IO Docs</title>
      <meta name="theme-color" content="#F71963" />
      <meta name="description" content="Documentation on VTEX IO" />
      <link rel="icon" href={favicon} />
      <meta
        name="google-site-verification"
        content="ZY7HyfLauXkjLwWBR75Ff2YSVYbosRZuuk4mFk4wjig"
      />
    </Helmet>
    <EnhancedSideBarContentProvider>
      <TopNav />
      <PageView />
      <div className="navPusher">
        <div className="wrapper w-100 flex">
          <div className="docsNavContainer" style={{ maxWidth: '280px' }}>
            <SideBar />
          </div>
          <div
            className="mainContainer pt7 pl8-l"
            style={{ scrollBehavior: 'smooth' }}>
            <main className="flex">
              <EnhancedAppVersionProvider>
                {children}
              </EnhancedAppVersionProvider>
            </main>
          </div>
        </div>
        <Footer />
      </div>
    </EnhancedSideBarContentProvider>
  </Fragment>
)

export default PageLayoutContainer

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/styles/configs/style.json from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "typeScale": [3, 2.25, 1.5, 1.25, 1, 0.875, 0.75],
  "spacing": [0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 8, 16],
  "customMedia": [
    {
      "s": 20
    },
    {
      "ns": {
        "value": 40,
        "minWidth": true
      }
    },
    {
      "m": {
        "value": 40,
        "minWidth": true
      }
    },
    {
      "l": {
        "value": 64,
        "minWidth": true
      }
    },
    {
      "xl": {
        "value": 80,
        "minWidth": true
      }
    }
  ],
  "colors": {
    "black-90": "rgba(0,0,0,.9)",
    "black-80": "rgba(0,0,0,.8)",
    "black-70": "rgba(0,0,0,.7)",
    "black-60": "rgba(0,0,0,.6)",
    "black-50": "rgba(0,0,0,.5)",
    "black-40": "rgba(0,0,0,.4)",
    "black-30": "rgba(0,0,0,.3)",
    "black-20": "rgba(0,0,0,.2)",
    "black-10": "rgba(0,0,0,.1)",
    "black-05": "rgba(0,0,0,.05)",
    "black-025": "rgba(0,0,0,.025)",
    "black-0125": "rgba(0,0,0,.0125)",
    "white-90": "rgba(255,255,255,.9)",
    "white-80": "rgba(255,255,255,.8)",
    "white-70": "rgba(255,255,255,.7)",
    "white-60": "rgba(255,255,255,.6)",
    "white-50": "rgba(255,255,255,.5)",
    "white-40": "rgba(255,255,255,.4)",
    "white-30": "rgba(255,255,255,.3)",
    "white-20": "rgba(255,255,255,.2)",
    "white-10": "rgba(255,255,255,.1)",
    "white-05": "rgba(255,255,255,.05)",
    "white-025": "rgba(255,255,255,.025)",
    "white-0125": "rgba(255,255,255,.0125)"
  },
  "semanticColors": {
    "background": {
      "base": "#ffffff",
      "base--inverted": "#142032",
      "action-primary": "#f71963",
      "action-secondary": "#eef3f7",
      "emphasis": "#f71963",
      "disabled": "#f2f4f5",
      "success": "#8bc34a",
      "success--faded": "#eafce3",
      "danger": "#ff4c4c",
      "danger--faded": "#ffe6e6",
      "warning": "#ffb100",
      "warning--faded": "#fff6e0",
      "muted-1": "#727273",
      "muted-2": "#979899",
      "muted-3": "#cacbcc",
      "muted-4": "#e3e4e6",
      "muted-5": "#f2f4f5"
    },
    "hover-background": {
      "action-primary": "#dd1659",
      "action-secondary": "#dbe9fd",
      "emphasis": "#dd1659",
      "success": "#8bc34a",
      "success--faded": "#eafce3",
      "danger": "#e13232",
      "danger--faded": "#ffe6e6",
      "warning": "#ffb100",
      "warning--faded": "#fff6e0",
      "muted-1": "#727273",
      "muted-2": "#979899",
      "muted-3": "#cacbcc",
      "muted-4": "#e3e4e6",
      "muted-5": "#f2f4f5"
    },
    "active-background": {
      "action-primary": "#0c389f",
      "action-secondary": "#dbe9fd",
      "emphasis": "#dd1659",
      "success": "#8bc34a",
      "success--faded": "#eafce3",
      "danger": "#ff4c4c",
      "danger--faded": "#ffe6e6",
      "warning": "#ffb100",
      "warning--faded": "#fff6e0",
      "muted-1": "#727273",
      "muted-2": "#979899",
      "muted-3": "#cacbcc",
      "muted-4": "#e3e4e6",
      "muted-5": "#f2f4f5"
    },
    "text": {
      "action-primary": "#134cd8",
      "action-secondary": "#eef3f7",
      "link": "#f71963",
      "emphasis": "#f71963",
      "disabled": "#979899",
      "success": "#8bc34a",
      "success--faded": "#eafce3",
      "danger": "#ff4c4c",
      "danger--faded": "#ffe6e6",
      "warning": "#ffb100",
      "warning--faded": "#fff6e0",
      "muted-1": "#142032",
      "muted-2": "#727273",
      "muted-3": "#979899",
      "muted-4": "#cacbcc",
      "muted-5": "#e3e4e6"
    },
    "visited-text": {
      "link": "#0c389f"
    },
    "hover-text": {
      "action-primary": "#072c75",
      "action-secondary": "#dbe9fd",
      "link": "#0c389f",
      "emphasis": "#dd1659",
      "success": "#8bc34a",
      "success--faded": "#eafce3",
      "danger": "#e13232",
      "danger--faded": "#ffe6e6",
      "warning": "#ffb100",
      "warning--faded": "#fff6e0"
    },
    "active-text": {
      "link": "#0c389f",
      "emphasis": "#dd1659",
      "success": "#8bc34a",
      "success--faded": "#eafce3",
      "danger": "#ff4c4c",
      "danger--faded": "#ffe6e6",
      "warning": "#ffb100",
      "warning--faded": "#fff6e0"
    },
    "border": {
      "action-primary": "#f71963",
      "action-secondary": "#eef3f7",
      "emphasis": "#f71963",
      "disabled": "#e3e4e6",
      "success": "#8bc34a",
      "success--faded": "#eafce3",
      "danger": "#ff4c4c",
      "danger--faded": "#ffe6e6",
      "warning": "#ffb100",
      "warning--faded": "#fff6e0",
      "muted-1": "#727273",
      "muted-2": "#979899",
      "muted-3": "#cacbcc",
      "muted-4": "#e3e4e6",
      "muted-5": "#f2f4f5"
    },
    "hover-border": {
      "action-primary": "#dd1659",
      "action-secondary": "#dbe9fd",
      "emphasis": "#dd1659",
      "success": "#8bc34a",
      "success--faded": "#eafce3",
      "danger": "#e13232",
      "danger--faded": "#ffe6e6",
      "warning": "#ffb100",
      "warning--faded": "#fff6e0",
      "muted-1": "#727273",
      "muted-2": "#979899",
      "muted-3": "#cacbcc",
      "muted-4": "#e3e4e6",
      "muted-5": "#f2f4f5"
    },
    "active-border": {
      "action-primary": "#0c389f",
      "action-secondary": "#dbe9fd",
      "emphasis": "#dd1659",
      "success": "#8bc34a",
      "success--faded": "#eafce3",
      "danger": "#ff4c4c",
      "danger--faded": "#ffe6e6",
      "warning": "#ffb100",
      "warning--faded": "#fff6e0",
      "muted-1": "#727273",
      "muted-2": "#979899",
      "muted-3": "#cacbcc",
      "muted-4": "#e3e4e6",
      "muted-5": "#f2f4f5"
    },
    "on": {
      "base": "#3f3f40",
      "base--inverted": "#ffffff",
      "action-primary": "#ffffff",
      "action-secondary": "#134cd8",
      "emphasis": "#ffffff",
      "disabled": "#979899",
      "success": "#ffffff",
      "success--faded": "#3f3f40",
      "danger": "#ffffff",
      "danger--faded": "#3f3f40",
      "warning": "#ffffff",
      "warning--faded": "#1a1a1a",
      "muted-1": "#ffffff",
      "muted-2": "#ffffff",
      "muted-3": "#3f3f40",
      "muted-4": "#3f3f40",
      "muted-5": "#3f3f40"
    },
    "hover-on": {
      "action-primary": "#ffffff",
      "action-secondary": "#134cd8",
      "emphasis": "#ffffff",
      "success": "#ffffff",
      "success--faded": "#3f3f40",
      "danger": "#ffffff",
      "danger--faded": "#3f3f40",
      "warning": "#ffffff",
      "warning--faded": "#1a1a1a"
    },
    "active-on": {
      "action-primary": "#ffffff",
      "action-secondary": "#134cd8",
      "emphasis": "#ffffff",
      "success": "#ffffff",
      "success--faded": "#3f3f40",
      "danger": "#ffffff",
      "danger--faded": "#3f3f40",
      "warning": "#ffffff",
      "warning--faded": "#1a1a1a"
    }
  },
  "borderWidths": [0, 0.125, 0.25, 0.5, 1, 2],
  "borderRadius": [0, 0.125, 0.25, 0.5, 1],
  "widths": [1, 2, 4, 8, 16],
  "maxWidths": [1, 2, 4, 8, 16, 32, 48, 64, 96],
  "heights": [1, 2, 4, 8, 16],
  "sizes": [
    {
      "name": "small",
      "value": 2
    },
    {
      "name": "regular",
      "value": 2.5
    },
    {
      "name": "large",
      "value": 3
    }
  ],
  "typography": {
    "measure": [30, 34, 20],
    "styles": {
      "heading-1": {
        "fontFamily": "-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol",
        "fontWeight": "600",
        "fontSize": "2rem",
        "textTransform": "initial",
        "letterSpacing": "0"
      },
      "heading-2": {
        "fontFamily": "-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol",
        "fontWeight": "600",
        "fontSize": "1.75rem",
        "textTransform": "initial",
        "letterSpacing": "0"
      },
      "heading-3": {
        "fontFamily": "-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol",
        "fontWeight": "600",
        "fontSize": "1.5rem",
        "textTransform": "initial",
        "letterSpacing": "0"
      },
      "heading-4": {
        "fontFamily": "-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol",
        "fontWeight": "600",
        "fontSize": "1.25rem",
        "textTransform": "initial",
        "letterSpacing": "0"
      },
      "heading-5": {
        "fontFamily": "-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol",
        "fontWeight": "600",
        "fontSize": "1.25rem",
        "textTransform": "initial",
        "letterSpacing": "0"
      },
      "heading-6": {
        "fontFamily": "-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol",
        "fontWeight": "600",
        "fontSize": "1.25rem",
        "textTransform": "initial",
        "letterSpacing": "0"
      },
      "body": {
        "fontFamily": "-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol",
        "fontWeight": "400",
        "fontSize": "16px",
        "textTransform": "initial",
        "letterSpacing": "normal"
      },
      "small": {
        "fontFamily": "-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol",
        "fontWeight": "400",
        "fontSize": "0.875rem",
        "textTransform": "initial",
        "letterSpacing": "0"
      },
      "mini": {
        "fontFamily": "-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol",
        "fontWeight": "normal",
        "fontSize": "0.75rem",
        "textTransform": "initial",
        "letterSpacing": "0"
      },
      "action": {
        "fontFamily": "-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol",
        "fontWeight": "500",
        "fontSize": "1rem",
        "textTransform": "uppercase",
        "letterSpacing": "0"
      },
      "action--small": {
        "fontFamily": "-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol",
        "fontWeight": "500",
        "fontSize": "0.875rem",
        "textTransform": "uppercase",
        "letterSpacing": "0"
      },
      "action--large": {
        "fontFamily": "-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol",
        "fontWeight": "500",
        "fontSize": "1.25rem",
        "textTransform": "uppercase",
        "letterSpacing": "0"
      },
      "code": {
        "fontFamily": "Consolas, monaco, monospace",
        "fontWeight": "normal",
        "fontSize": "0.9rem",
        "textTransform": "initial",
        "letterSpacing": "0"
      }
    }
  },
  "opacity": [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.05, 0.025, 0]
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/__fixtures__/markdowns.ts from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```typescript
export const markdownWithOneIgnoredSection = [
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
  // ==========================================
  // <!-- DOCS-IGNORE:start -->
  {
    key: 'html-150-1-43',
    props: {
      children: undefined,
      escapeHtml: false,
      isBlock: false,
      skipHtml: false,
      value: '<!-- DOCS-IGNORE:start -->',
    },
  },
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
  {
    key: 'html-174-1-54',
    props: {
      children: undefined,
      escapeHtml: false,
      isBlock: false,
      skipHtml: false,
      value: '<!-- DOCS-IGNORE:end -->',
    },
  },
  // <!-- DOCS-IGNORE:end -->
  // ==========================================
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
]

export const markdownWithoutIgnoredSection = [
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
]

export const markdownWithMultipleIgnoredSections = [
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
  // ==========================================
  // <!-- DOCS-IGNORE:start -->
  {
    key: 'html-150-1-43',
    props: {
      children: undefined,
      escapeHtml: false,
      isBlock: false,
      skipHtml: false,
      value: '<!-- DOCS-IGNORE:start -->',
    },
  },
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
  {
    key: 'html-174-1-54',
    props: {
      children: undefined,
      escapeHtml: false,
      isBlock: false,
      skipHtml: false,
      value: '<!-- DOCS-IGNORE:end -->',
    },
  },
  // <!-- DOCS-IGNORE:end -->
  // ==========================================
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
  // ==========================================
  // <!-- DOCS-IGNORE:start -->
  {
    key: 'html-150-1-43',
    props: {
      children: undefined,
      escapeHtml: false,
      isBlock: false,
      skipHtml: false,
      value: '<!-- DOCS-IGNORE:start -->',
    },
  },
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
  {
    key: 'html-174-1-54',
    props: {
      children: undefined,
      escapeHtml: false,
      isBlock: false,
      skipHtml: false,
      value: '<!-- DOCS-IGNORE:end -->',
    },
  },
  // <!-- DOCS-IGNORE:end -->
  // ==========================================
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
]

export const markdownWithExtraIgnoreStartToken = [
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
  // ==========================================
  // <!-- DOCS-IGNORE:start -->
  {
    key: 'html-150-1-43',
    props: {
      children: undefined,
      escapeHtml: false,
      isBlock: false,
      skipHtml: false,
      value: '<!-- DOCS-IGNORE:start -->',
    },
  },
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
  {
    key: 'html-174-1-54',
    props: {
      children: undefined,
      escapeHtml: false,
      isBlock: false,
      skipHtml: false,
      value: '<!-- DOCS-IGNORE:end -->',
    },
  },
  // <!-- DOCS-IGNORE:end -->
  // ==========================================
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
  // ==========================================
  // <!-- DOCS-IGNORE:start -->
  {
    key: 'html-150-1-43',
    props: {
      children: undefined,
      escapeHtml: false,
      isBlock: false,
      skipHtml: false,
      value: '<!-- DOCS-IGNORE:start -->',
    },
  },
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
  {
    key: 'html-174-1-54',
    props: {
      children: undefined,
      escapeHtml: false,
      isBlock: false,
      skipHtml: false,
      value: '<!-- DOCS-IGNORE:end -->',
    },
  },
  // <!-- DOCS-IGNORE:end -->
  // ==========================================
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
  // ==========================================
  // <!-- DOCS-IGNORE:start -->
  {
    key: 'html-150-1-43',
    props: {
      children: undefined,
      escapeHtml: false,
      isBlock: false,
      skipHtml: false,
      value: '<!-- DOCS-IGNORE:start -->',
    },
  },
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
  {
    key: 'heading-1-1-0',
    props: {
      children: [
        {
          key: 'text-1-3-0',
          props: {
            children: 'VTEX Store Components',
            nodeKey: 'text-1-3-0',
            value: 'VTEX Store Components',
          },
        },
      ],
      level: 1,
    },
  },
]

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/typings/jpg.d.ts from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.jpg' {
  const path: string
  export default path
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/typings/react-syntax-highlighter-prism.d.ts from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'react-syntax-highlighter/dist/styles/prism'

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/typings/png.d.ts from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.png' {
  const path: string
  export default path
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/typings/vtex.render-runtime.d.ts from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```typescript
/* eslint @typescript-eslint/no-explicit-any: 0 */
/* Typings for `render-runtime` */
declare module 'vtex.render-runtime' {
  import { Component, ReactElement } from 'react'

  export interface RenderContextProps {
    runtime: {
      account: string
    }
  }

  export interface InjectedRuntime {
    runtime: RenderRuntime
  }

  interface Pages {
    [name: string]: Page
  }

  interface Route {
    domain: string
    blockId: string
    canonicalPath?: string
    id: string
    params: Record<string, string>
    path: string
    title?: string
  }

  interface Culture {
    availableLocales: string[]
    locale: string
    language: string
    country: string
    currency: string
  }

  export interface RenderRuntime {
    account: string
    accountId: string
    appsEtag: string
    workspace: string
    disableSSR: boolean
    hints: {
      desktop: boolean
      mobile: boolean
      phone: boolean
      tablet: boolean
    }
    page: string
    route: Route
    version: string
    culture: Culture
    pages: Pages
    preview: boolean
    production: boolean
    publicEndpoint: string
    renderMajor: number
    query: {
      q?: string
    }
    start: boolean
    runtimeMeta: {
      version: string
      config?: any
    }
    settings: {
      [app: string]: any
    }
    segmentToken: string
    rootPath?: string
    workspaceCookie: string
    hasNewExtensions: boolean
    navigate: any
  }

  export const Link: any
  export const NoSSR: any
  export const RenderContextConsumer: ReactElement
  export const canUseDOM: boolean
  export const withRuntimeContext: any
  export const Helmet: any
  export const useRuntime: () => RenderRuntime
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/typings/svg.d.ts from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.svg' {
  const path: string
  export default path
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/typings/css.d.ts from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.css' {
  interface Style {
    [key: string]: string
  }
  const style: Style
  export default style
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/typings/graphql.d.ts from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.graphql' {
  import { DocumentNode } from 'graphql'

  const value: DocumentNode
  export default value
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/typings/vtex.styleguide.d.ts from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.styleguide' {
  export const Alert
  export const Button
  export const ButtonWithIcon
  export const ButtonPlain
  export const PageBlock
  export const IconCaretDown
  export const IconCaretUp
  export const IconCaretRight
  export const IconBars
  export const IconCheck
  export const IconDeny
  export const Spinner
  export const EmptyState
  export const Card
  export const Dropdown
  export const Link
  export const InputSearch
  export const IconSearch
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/components/EmptyAppDocs.tsx from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { EmptyState } from 'vtex.styleguide'
import { FormattedMessage } from 'react-intl'

const EmptyDocs: FC = () => (
  <div className="pa10 w-100 flex justify-center">
    <EmptyState title="Sorry">
      <p>
        <FormattedMessage id="docs-ui/empty-docs" />
      </p>
    </EmptyState>
  </div>
)

export default EmptyDocs

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/components/EmptyDocs.tsx from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { FormattedMessage, useIntl } from 'react-intl'
import { EmptyState } from 'vtex.styleguide'

const EmptyDocs: FC = () => {
  const intl = useIntl()

  return (
    <div className="pa7 w-100 flex justify-center">
      <EmptyState title={intl.formatMessage({ id: 'docs-ui/empty.title' })}>
        <p>
          <FormattedMessage id="docs-ui/empty-docs" />
        </p>
      </EmptyState>
    </div>
  )
}

export default EmptyDocs

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/components/LatestFeatures.tsx from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC, Fragment } from 'react'
import { useQuery } from 'react-apollo'
import { FormattedMessage, useIntl } from 'react-intl'
import { Link } from 'vtex.render-runtime'

import { slug } from '../modules'
import RightArrow from './icons/RightArrow'
import Skeleton from './Skeleton'
import LatestFeaturesQuery from '../graphql/storeFrameworkLatestFeatures.graphql'

interface LatestFeaturesQueryI {
  storeFrameworkLatestFeatures: LatestFeatureArticle[]
}

const LatestFeatures: FC = () => {
  const intl = useIntl()
  const { data, loading, error } = useQuery<LatestFeaturesQueryI>(
    LatestFeaturesQuery
  )

  return (
    <section className="mv9">
      <h2
        id={slug(intl.formatMessage({ id: 'docs-ui/latest-features' }))}
        className="t-heading-2 c-on-base mv4">
        <FormattedMessage id="docs-ui/latest-features" />
      </h2>
      <p className="c-on-base lh-copy">
        <FormattedMessage id="docs-ui/latest-features-description" />
      </p>
      <div className="list ml0 w-100">
        {loading ? (
          <Skeleton />
        ) : error ? (
          <></>
        ) : (
          <Fragment>
            {data!.storeFrameworkLatestFeatures.map(
              item =>
                item.title && (
                  <Link
                    key={item.title}
                    to={`/docs/releases/${getFileFromPath(item.path)}`}
                    className="no-underline">
                    <h4 className="t-heading-4 c-on-base mv2 dim pv6 items-center bl b--muted-3 pl5">
                      {item.title}
                    </h4>
                  </Link>
                )
            )}
          </Fragment>
        )}
      </div>
      <div className="flex items-center mv5">
        <Link
          page="docs-ui.release-notes"
          className="link no-underline c-emphasis mv5 dim">
          <span className="mr5">
            <FormattedMessage id="docs-ui/see-previous-releases" />
          </span>
          <RightArrow />
        </Link>
      </div>
    </section>
  )
}

function getFileFromPath(path: string) {
  const PATH_PREFIX = 'dist/vtex.docs-graphql/'
  const FILE_EXTENSION = '.md'
  return path.substring(PATH_PREFIX.length, path.length - FILE_EXTENSION.length)
}

interface LatestFeatureArticle {
  title: string
  description: string
  path: string
}

export default LatestFeatures

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/components/RecipeListItem.tsx from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { FormattedMessage } from 'react-intl'
import { Link } from 'vtex.render-runtime'

import RightArrow from './icons/RightArrow'

interface Props {
  title: string
  icon?: string
  description: string
  link: string
}

const RecipeListItem: FC<Props> = ({ title, description, link }) => (
  <article className="flex flex-column justify-center w-70-l mv4 no-underline">
    <h2 className="t-heading-2 mb2">{title}</h2>
    <p className="t-body c-on-base mb4">{description}</p>
    <Link
      to={link}
      className="flex items-center mb5 c-emphasis link no-underline dim">
      <span className="mr4">
        <FormattedMessage id="docs-ui/read-more" />
      </span>
      <RightArrow />
    </Link>
  </article>
)

export default RecipeListItem

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/components/Community.tsx from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { FormattedMessage, useIntl } from 'react-intl'
import { Link } from 'vtex.render-runtime'

import { slug } from '../modules'
import CommunityIcon from './icons/CommunityIcon'

const Community: FC = () => {
  const intl = useIntl()

  return (
    <section className="mv9">
      <h2
        id={slug(intl.formatMessage({ id: 'docs-ui/community-help' }))}
        className="t-heading-2 c-on-base">
        <FormattedMessage id="docs-ui/community-help" />
      </h2>
      <Link
        target="_blank"
        href="https://github.com/vtex-apps/store-discussion"
        className="link no-underline pointer">
        <div className="flex items-center">
          <div style={{ minWidth: '84px' }}>
            <CommunityIcon />
          </div>
          <div className="ml6">
            <h4 className="t-heading-4 c-on-base mt0 mb3 dim">
              <FormattedMessage id="docs-ui/community-join" />
            </h4>
            <p className="t-body c-on-base lh-copy mv0">
              <FormattedMessage id="docs-ui/community-description" />
            </p>
          </div>
        </div>
      </Link>
    </section>
  )
}

export default Community

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/components/SearchBar.tsx from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC, useState } from 'react'
import { useRuntime } from 'vtex.render-runtime'
import { InputSearch } from 'vtex.styleguide'

const SearchBar: FC = () => {
  const {
    navigate,
    query: { q: queryString },
  } = useRuntime()

  const [inputString, setInputString] = useState(queryString ?? '')

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (inputString !== '') {
      navigate({
        page: 'docs-ui.search',
        query: `q=${inputString}`,
        fetchPage: true,
      })
    }
  }

  return (
    <div className="flex items-center">
      <form onSubmit={(e: React.FormEvent) => handleSubmit(e)}>
        <InputSearch
          placeholder="Search IO Docs..."
          value={inputString}
          onChange={(e: {
            target: { value: React.SetStateAction<string> }
          }) => {
            setInputString(e.target.value)
          }}
          onSubmit={(e: React.FormEvent) => handleSubmit(e)}
          size="small"
        />
      </form>
    </div>
  )
}

export default SearchBar

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/components/CustomTags.tsx from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```tsx
/* eslint-disable react/display-name */
/* eslint @typescript-eslint/no-explicit-any: 0 */
import React, { Fragment } from 'react'
import { useRuntime } from 'vtex.render-runtime'
import { useDevice } from 'vtex.device-detector'
import { Link } from 'vtex.styleguide'

import ArticleNav from './ArticleNav'
import { slug } from '../modules'
import {
  findDocsIgnoreNodes,
  removeIgnoredNodesFromDocs,
} from '../modules/ignoreTokens'
import CodeBlock from './CodeBlock'

export const CustomRenderers = {
  root: ({ children }: { children: any[] }) => {
    /* eslint-disable react-hooks/rules-of-hooks */
    const { isMobile } = useDevice()
    const { start, end } = findDocsIgnoreNodes(children)

    const childrenWithoutIgnoredNodes = removeIgnoredNodesFromDocs(
      start,
      end,
      children
    )

    if (isMobile) {
      return (
        <div className="flex flex-column center" style={{ maxWidth: '95vw' }}>
          {childrenWithoutIgnoredNodes}
        </div>
      )
    }

    const TOCLines = childrenWithoutIgnoredNodes.reduce(
      (acc: string[], { key, props }: any) => {
        // Skip non-headings and only use H2s
        if (key.indexOf('heading') !== 0 || props.level !== 2) {
          return acc
        }

        const { value } = props.children[0].props
        return value ? acc.concat([`${value}`]) : acc
      },
      []
    )

    return (
      <div className="flex justify-between">
        <div className="flex flex-column w-80-l" style={{ maxWidth: '680px' }}>
          {childrenWithoutIgnoredNodes}
        </div>
        {TOCLines.length > 0 && (
          <div
            className="sticky h-50 bl b--muted-3 pl5"
            style={{ top: '82px', width: '240px' }}>
            <ArticleNav headings={TOCLines} />
          </div>
        )}
      </div>
    )
  },
  break: () => <br />,
  code: CodeBlock,
  emphasis: (props: any) => <em className="i">{props.children}</em>,
  heading: (props: any) => {
    const hashId = getHeadingSlug(props.children)
    const { app } = useRuntime().route.params
    const vendor = app?.split('.')[0]

    switch (props.level) {
      case 1:
        return (
          <Fragment>
            <h1
              id={hashId}
              className={`t-heading-1 c-on-base mt7 ${
                vendor !== 'vtex' ? 'mb3' : 'mb7'
              }`}>
              {props.children}
            </h1>
            {vendor && vendor !== 'vtex' ? (
              <p className="t-small c-on-base mt0 lh-copy mb6">
                This application was created by: <strong>{vendor}</strong>
              </p>
            ) : null}
          </Fragment>
        )

      case 2:
        return (
          <h2 id={hashId} className="t-heading-2 mt4 mb5 c-on-base">
            {props.children}
          </h2>
        )

      case 3:
        return (
          <h3 id={hashId} className="t-heading-3 mt7 c-on-base">
            {props.children}
          </h3>
        )

      case 4:
        return (
          <h4 id={hashId} className="t-heading-4 mt7 c-on-base">
            {props.children}
          </h4>
        )

      case 5:
        return (
          <h5 id={hashId} className="t-heading-5 mt5 mb5 c-on-base lh-copy">
            {props.children}
          </h5>
        )

      case 6:
        return (
          <h6 id={hashId} className="t-heading-6 c-on-base mv5 lh-copy">
            {props.children}
          </h6>
        )
      default:
        return <p className="c-on-base lh-copy">{props.children}</p>
    }
  },
  image: (props: any) => (
    <div className="mh0">
      <img className="shadow-4" src={props.src} alt={props.alt} />
    </div>
  ),
  inlineCode: (props: any) => (
    <span
      className="pv1 ph2 mw6 br2 bg-muted-5 ba b--muted-3 t-code c-emphasis"
      style={{ wordWrap: 'break-word' }}>
      {props.value}
    </span>
  ),
  link: (props: any) => {
    /* eslint-disable react-hooks/rules-of-hooks */
    const { route } = useRuntime()

    const isIdLink = !!props.href && props.href[0] === '#'
    const isRelativeLink = !!props.href && props.href[0] === '/'

    if (isIdLink && !!props.href) {
      return (
        <Link to={props.href.toLowerCase()} className="dim">
          {props.children}
        </Link>
      )
    }

    if (isRelativeLink) {
      return (
        <Link to={`/docs/${route.params.app}${props.href}`} className="dim">
          {props.children}
        </Link>
      )
    }

    return (
      <Link href={props.href} className="dim">
        {props.children}
      </Link>
    )
  },
  list: (props: any) => {
    if (props.ordered) {
      return (
        <ol
          start={props.start}
          className="t-body c-on-base mt0 mb6 pl6 lh-copy">
          {props.children}
        </ol>
      )
    }

    return (
      <ul className="t-body c-on-base mt0 mb6 pl6 lh-copy">{props.children}</ul>
    )
  },
  listItem: (props: any) => (
    <li className="t-body c-on-base mb4 mt0 lh-copy">{props.children}</li>
  ),
  paragraph: (props: any) => {
    if (props.children === '' || props.children.length === 0) return null
    return <p className="t-body c-on-base mt0 lh-copy mb6">{props.children}</p>
  },
  strong: (props: any) => <strong className="fw7">{props.children}</strong>,
  table: (props: any) => (
    <div className="overflow-x-auto">
      <table
        style={{ borderSpacing: '0', borderCollapse: 'collapse' }}
        className="w-100 center mv7 bb b--gray">
        {props.children}
      </table>
    </div>
  ),
  tableCell: (props: any) => {
    if (props.isHeader) {
      return (
        <th className="t-body fw5 c-muted-1 bb bw1 pa2 pb3 b--muted-3 tl">
          {props.children}
        </th>
      )
    }

    return (
      <td className="t-body pa5 lh-copy" style={{ minWidth: '10rem' }}>
        {props.children}
      </td>
    )
  },
  tableRow: (props: any) => (
    <tr className="bb b--muted-3 lh-copy">{props.children}</tr>
  ),
  thematicBreak: () => <hr className="mv7" />,
}

function getHeadingSlug(childNodes: any) {
  return (
    (childNodes[0].props.children && slug(childNodes[0].props.children)) || ''
  )
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/components/PageView.tsx from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { FC, useEffect } from 'react'
import { initialize, pageview, ga } from 'react-ga'

function pageView() {
  if (typeof ga() === 'undefined') {
    initialize('UA-150301985-1')
  }
  pageview(window.location.pathname + window.location.search)
}

const PageView: FC = () => {
  useEffect(() => pageView())

  return null
}

export default PageView

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/components/Footer.tsx from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { FormattedMessage } from 'react-intl'
import { Link } from 'vtex.render-runtime'

import VTEXWhite from './icons/VTEXWhite'
import ExternalLink from './icons/ExternalLink'

const Footer: FC = () => {
  const listItemClasses = 't-body mv3 c-muted-3'

  return (
    <footer className="bg-base pt8-l pt6 ph0-l pb0-l w-100 bg-base--inverted bt b--muted-5">
      <div className="pb8 ph7-l">
        <VTEXWhite />
      </div>
      <div className="flex-l ph4 flex-wrap justify-between w-100 ph8-l pb8-l">
        <div className="flex justify-between w-50-l w-100 pb5 pb0-l">
          <div className="list">
            <div className={listItemClasses}>
              <Link
                to="getting-started/what-is-vtex-io/1"
                className="link no-underline c-on-base--inverted dim">
                <FormattedMessage id="docs-ui/getting-started" />
              </Link>
            </div>
            <div className={listItemClasses}>
              <Link
                to="recipes/all"
                className="link no-underline c-on-base--inverted dim">
                <FormattedMessage id="docs-ui/recipes" />
              </Link>
            </div>
            <div className={listItemClasses}>
              <Link
                to="components/all"
                className="link no-underline c-on-base--inverted dim">
                <FormattedMessage id="docs-ui/our-components" />
              </Link>
            </div>
          </div>
          <div className="list">
            <div className={listItemClasses}>
              <Link
                to="https://github.com/vtex-apps/store-discussion"
                className="link no-underline c-on-base--inverted dim">
                <FormattedMessage id="docs-ui/community" />
              </Link>
            </div>
            <div className={listItemClasses}>
              <Link
                to="https://github.com/vtex-apps/release-notes"
                className="link no-underline c-on-base--inverted dim">
                <FormattedMessage id="docs-ui/latest-features" />
              </Link>
            </div>
            <div className={listItemClasses}>
              <Link
                to="https://help.vtex.com/developer-docs"
                className="link no-underline c-on-base--inverted dim">
                <FormattedMessage id="docs-ui/apis" />
              </Link>
            </div>
            <div className={listItemClasses}>
              <Link
                to="https://www.vtex.com/partner/"
                className="link no-underline c-on-base--inverted dim">
                <FormattedMessage id="docs-ui/partner" />
              </Link>
            </div>
          </div>
        </div>
      </div>
      <div
        className="flex ph4 pb6 bt b--muted-5 ph8-l"
        style={{ height: '89px' }}>
        <Link
          to="https://vtex.com"
          className="c-on-base--inverted link no-underline self-end dim">
          <FormattedMessage id="docs-ui/visit-us" /> <ExternalLink />
        </Link>
      </div>
    </footer>
  )
}

export default Footer

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/components/ComponentGridItem.tsx from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { FormattedMessage } from 'react-intl'
import { Link } from 'vtex.render-runtime'

import styles from './ComponentGridItem.css'
import RightArrow from './icons/RightArrow'

interface Props {
  title: string
  description: string
  link: string
}

const ComponentGridItem: FC<Props> = ({ title, description, link }) => (
  <article
    className={`flex flex-column justify-between mh3-l mb5 bt b--muted-1 ${styles.gridItem}`}>
    <div>
      <h2 className="t-heading-4 mv5">{title}</h2>
      <div className="t-body c-on-base lh-copy">{description}</div>
    </div>
    <Link
      to={link}
      className="flex items-center no-underline link c-emphasis dim">
      <span className="mr4 mt3 mt5-ns mv5">
        <FormattedMessage id="docs-ui/read-more" />
      </span>
      <span className="dn db-ns">
        <RightArrow />
      </span>
    </Link>
  </article>
)

export default ComponentGridItem

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/components/ArticleNav.tsx from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC, Fragment } from 'react'
import { FormattedMessage } from 'react-intl'

import { slug } from '../modules'

interface Props {
  headings: string[]
}

const ArticleNav: FC<Props> = ({ headings }) => (
  <nav className="flex-l flex-column dn">
    <div className="ttu t-small b pb3">
      <FormattedMessage id="docs-ui/article-nav" />
    </div>
    <Fragment>
      {headings.map(heading => {
        const slugifiedHeader = slug(heading)

        return (
          <a
            className="link c-muted-1 t-mini no-underline pb3 dim"
            href={`#${slugifiedHeader}`}
            key={slugifiedHeader}>
            {heading}
          </a>
        )
      })}
    </Fragment>
  </nav>
)

export default ArticleNav

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/components/SideBar.tsx from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { ReactElement, FC } from 'react'
import { FormattedMessage } from 'react-intl'
import { Link } from 'vtex.render-runtime'

import SideBarItem from './SideBarItem'
import { formatLink } from '../modules'
import { useSideBarContentState } from './SideBarContext'
import { IO_DOCUMENTATION } from '../modules/constantExports'

interface Chapter {
  title: string
  path?: string
  articles: [] | Chapter[]
}

const SideBar: FC = () => {
  const { content } = useSideBarContentState()

  return (
    <nav className="w-100 fixed static-l bg-base z-2 min-h-100-l br-l b--muted-3 flex-l flex-column">
      <div className="dn flex-l flex-column justify-between" role="menu">
        <div>{getArticles(content, 0, IO_DOCUMENTATION)}</div>
        <div
          className="bg-base sticky pa6 z3 bottom-0 w-100 bt b--muted-3"
          style={{ maxWidth: '280px', minWidth: '215px' }}>
          <div className="t-small mb2">
            <FormattedMessage id="docs-ui/did-not-find-your-answer" />
          </div>
          <Link
            to="https://github.com/vtex-apps/store-discussion"
            target="_blank"
            rel="noopener noreferrer"
            className="t-body c-emphasis no-underline dim">
            <FormattedMessage id="docs-ui/join-discussion" />
          </Link>
        </div>
      </div>
    </nav>
  )
}

function getArticles(
  chapterList: Chapter[],
  depth: number,
  app?: string
): ReactElement {
  return (
    <div
      className={`list ${depth > 0 ? 'pl0-l pr2-l pb2 mt3' : 'pv6-l pr5-l'}`}>
      {chapterList.map((chapter: Chapter) => (
        <SideBarItem
          text={chapter.title}
          link={chapter.path && formatLink(chapter.path)}
          hasArticles={chapter.articles.length > 0}
          key={chapter.title}
          depth={depth}>
          {getArticles(chapter.articles, depth + 1, app)}
        </SideBarItem>
      ))}
    </div>
  )
}

export default SideBar

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/components/SideBarItem.tsx from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useState, FC } from 'react'
import { Link, useRuntime } from 'vtex.render-runtime'

import IconCaretDown from './icons/IconCaretDown'
import IconCaretRight from './icons/IconCaretRight'
import { slug } from '../modules'

interface Props {
  text: string
  link?: string
  appName?: string
  hasArticles?: boolean
  depth: number
}

const SideBarItem: FC<Props> = ({
  text,
  link,
  depth,
  hasArticles,
  children,
}) => {
  const {
    route: { path },
  } = useRuntime()

  // all links follow this pattern: /docs/<section>/<subsection | undefined>/<filename | undefined>
  const [linkSection, linkSubsection] = link?.split('/').slice(2) ?? ''
  const [currentSection, currentSubsection] = path.split('/').slice(2)
  const isExternalLink = !!link && link.match(/((http(s)?):\/)|(www.)/)

  const isCurrentSection =
    currentSection &&
    depth === 0 &&
    (linkSection === currentSection ||
      slug(text.toLowerCase()) === currentSection)

  const isCurrentSubsection =
    currentSubsection && depth === 1 && linkSubsection === currentSubsection

  const isActive = path.includes(link!)

  const shouldBeOpen = isActive || isCurrentSection || isCurrentSubsection

  const [open, setOpen] = useState(shouldBeOpen)

  const ZeroDepthItem = () => <div className="c-on-base f5 b">{text}</div>

  const NormalItem = () => <div className="mv3 dim f6">{text}</div>

  const BaseSideBarItem = () => (
    <div
      className={`flex justify-between items-center pointer ${
        depth === 0 ? 'mt4' : ''
      }
      ${depth >= 2 ? 'pl4 bl lh-title t-small bw1 pv1' : ''} ${
        isActive ? 'b--emphasis' : 'b--muted-3'
      }`}
      onClick={() => {
        return setOpen(!open)
      }}
      onKeyPress={() => {
        return setOpen(!open)
      }}
      role="menuitem"
      tabIndex={-1}>
      {depth === 0 ? (
        <ZeroDepthItem />
      ) : (
        <div className={`${isActive ? 'c-emphasis' : 'c-muted-2'}`}>
          <NormalItem />
        </div>
      )}
      <div className="pl3 flex items-center f5">
        {hasArticles &&
          depth === 0 &&
          (open ? <IconCaretDown /> : <IconCaretRight />)}
      </div>
    </div>
  )

  return (
    <div className="link">
      {link ? (
        <Link
          to={link}
          target={isExternalLink ? '_blank' : undefined}
          className={`no-underline ${isActive ? 'c-emphasis' : 'c-muted-2'}`}>
          <BaseSideBarItem />
        </Link>
      ) : (
        <BaseSideBarItem />
      )}
      {hasArticles && <div hidden={!open}>{children}</div>}
    </div>
  )
}

export default SideBarItem

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/components/CustomCard.tsx from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'

const CustomCard: FC = ({ children }) => (
  <div
    style={{ boxShadow: '0 3px 9px 0 rgba(61, 62, 64, 0.2)' }}
    className="w-100 b2 br2 bg-base--inverted c-on-base pa5">
    {children}
  </div>
)

export default CustomCard

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/components/EmptySummary.tsx from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { EmptyState } from 'vtex.styleguide'
import { FormattedMessage } from 'react-intl'

const EmptySummary: FC = () => (
  <div className="w-100 flex justify-center">
    <EmptyState title="Something went wrong">
      <p>
        <FormattedMessage id="docs-ui/empty-summary" />
      </p>
    </EmptyState>
  </div>
)

export default EmptySummary

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/components/DocsRenderer.tsx from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC, Fragment } from 'react'
import ReactMarkdown from 'react-markdown'
import emoji from 'remark-emoji'
import { FormattedMessage } from 'react-intl'
import { Helmet } from 'vtex.render-runtime'

import { CustomRenderers } from './CustomTags'
import EmptyDocs from './EmptyDocs'

const DocsRenderer: FC<Props> = ({ markdown, meta }) => {
  const isEmptyDocs = markdown === ''

  if (isEmptyDocs) {
    return <EmptyDocs />
  }

  const title = markdown
    .split('# ')[1] // everything after the #
    .split('\n')[0] // Only the headline
    .trim()

  return (
    <Fragment>
      <Helmet>
        <meta name="robots" content="noindex" />
        <title>{title}</title>
      </Helmet>
      <article className="min-vh-100">
        <ReactMarkdown
          source={markdown}
          escapeHtml={false}
          renderers={CustomRenderers}
          plugins={[emoji]}
        />
        {meta.git && (
          <a href={meta.git} className="c-emphasis no-underline dim flex mb6">
            <FormattedMessage id="docs-ui/renderer-github" />
          </a>
        )}
      </article>
    </Fragment>
  )
}

interface MetaData {
  title: string
  description: string
  tags: string[]
  version: string
  git: string
}

interface Props {
  markdown: string
  meta: MetaData
}

export default DocsRenderer

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/components/ComponentGridItem.css from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```css
.gridItem {
  min-height: 11em;
}

@media screen and (min-width: 40em) {
  .gridItem {
    min-height: 12em;
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/components/AppVersionContext.tsx from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, {
  useContext,
  createContext,
  useReducer,
  useEffect,
  ReactNode,
  FC,
} from 'react'
import { useQuery } from 'react-apollo'
import { useRuntime } from 'vtex.render-runtime'

import EmptyAppDocs from './EmptyAppDocs'
import publishedQuery from '../graphql/published.graphql'
import { IO_DOCUMENTATION } from '../modules/constantExports'

type Action =
  | { type: 'updateMajor'; value: string }
  | { type: 'updateAvailableMajors'; value: string[] }
  | { type: 'updateAppName'; value: string }
  | { type: 'updateAppVersion'; value: string }
  | { type: 'updateAvailableVersions'; value: string[] }
type Dispatch = (action: Action) => void
interface State {
  appName: string
  major: string
  availableMajors: string[]
  version: string
  availableVersions: string[]
}

const AppVersionStateContext = createContext<State | undefined>(undefined)
const AppVersionDispatchContext = createContext<Dispatch | undefined>(undefined)

function appVersionReducer(state: State, action: Action) {
  switch (action.type) {
    case 'updateMajor': {
      return { ...state, major: action.value }
    }
    case 'updateAvailableMajors': {
      return { ...state, availableMajors: action.value }
    }
    case 'updateAppName': {
      return { ...state, appName: action.value }
    }
    case 'updateAppVersion': {
      return { ...state, major: action.value }
    }
    case 'updateAvailableVersions': {
      return { ...state, availableMajors: action.value }
    }
    default: {
      return state
    }
  }
}

function AppVersionProvider({
  children,
  publishedQueryResult,
  appName,
  appVersionFromUrl,
}: AppVersionProviderProps) {
  const {
    appMajors: { latestMajor, publishedMajors },
    appVersions: { latestStable, publishedVersions },
  } = publishedQueryResult

  const hasVersion = !!appVersionFromUrl
  const majorFromQuery = `${latestMajor}.x`

  const [versionInfo, dispatch] = useReducer(appVersionReducer, {
    major: `${hasVersion ? appVersionFromUrl : majorFromQuery}`,
    availableMajors: publishedMajors,
    version: appVersionFromUrl || latestStable,
    availableVersions: publishedVersions,
    appName,
  })

  return (
    <AppVersionStateContext.Provider value={versionInfo}>
      <AppVersionDispatchContext.Provider value={dispatch}>
        {children}
      </AppVersionDispatchContext.Provider>
    </AppVersionStateContext.Provider>
  )
}

function useAppVersionState() {
  const context = useContext(AppVersionStateContext)
  if (context === undefined) {
    throw new Error(
      'useAppVersionState must be used within a AppVersionProvider'
    )
  }
  return context
}

function useAppVersionDispatch() {
  const context = useContext(AppVersionDispatchContext)

  if (context === undefined) {
    throw new Error(
      'useAppVersionDispatch must be used within a AppVersionProvider'
    )
  }
  return context
}

const EnhancedAppVersionProvider: FC = ({ children }) => {
  const { route, navigate } = useRuntime()
  const app = route?.params?.app || IO_DOCUMENTATION
  const [appName] = app.split('@')
  const appVersionFromUrl = app?.split('@')[1]

  const { data, loading, error } = useQuery(publishedQuery, {
    variables: {
      appName,
    },
  })

  // Just a bit hacky: It always check if the url has a trailing slash, setting it if not.
  // It's useful for README's that link to other files
  useEffect(() => {
    if (!appVersionFromUrl || route.path.endsWith('/')) {
      return
    }
    navigate({
      to: `${route.path}/`,
      replace: true,
      preventRemount: true,
    })
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [route.path])

  // Always set the app's version on the URL (except io-documentation)
  useEffect(() => {
    if (!app || appVersionFromUrl || !data?.appVersions?.latestStable) {
      return
    }
    const { params: currentParams } = route
    const {
      appVersions: { latestStable },
    } = data

    const updatedApp = `${app.split('@')[0]}@${latestStable}`
    navigate({
      page: route.id,
      params: { ...currentParams, app: updatedApp },
      replace: true,
    })
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [data])

  if (loading) {
    return null
  }

  if (error) {
    return <EmptyAppDocs />
  }

  return (
    <AppVersionProvider
      key={appName}
      publishedQueryResult={data}
      appName={appName}
      appVersionFromUrl={appVersionFromUrl}>
      {children}
    </AppVersionProvider>
  )
}

interface AppVersionProviderProps {
  children: ReactNode
  publishedQueryResult: PublishedQueryResponse
  appName: string
  appVersionFromUrl: string
}

interface PublishedQueryResponse {
  appMajors: {
    latestMajor: string
    publishedMajors: string[]
  }
  appVersions: {
    latestStable: string
    publishedVersions: string[]
  }
}

export { EnhancedAppVersionProvider, useAppVersionState, useAppVersionDispatch }

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/components/VersionSelector.tsx from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC, useMemo } from 'react'
import { Dropdown } from 'vtex.styleguide'

import { useAppVersionState, useAppVersionDispatch } from './AppVersionContext'

const VersionSelector: FC = () => {
  const { major, availableMajors } = useAppVersionState()
  const setMajorInfo = useAppVersionDispatch()

  const options = useMemo(() => getDropdownOptions(availableMajors), [
    availableMajors,
  ])

  return (
    <div className="w-40 flex">
      <Dropdown
        options={options}
        value={major[0]}
        onChange={(e: Event, value: string) => {
          setMajorInfo({ type: 'updateMajor', value })
        }}
      />
    </div>
  )
}

function getDropdownOptions(originalArray: string[]) {
  return originalArray.map(item => ({ value: item[0], label: `${item}.x` }))
}

export default VersionSelector

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/components/TopNav.tsx from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { ReactElement } from 'react'
import { FormattedMessage } from 'react-intl'
import { Link } from 'vtex.render-runtime'
import { Drawer } from 'vtex.store-drawer'

import { useSideBarContentState } from './SideBarContext'
import { IO_DOCUMENTATION } from '../modules/constantExports'
import VTEXPink from './icons/VTEXPink'
import { formatLink } from '../modules'
import SideBarItem from './SideBarItem'

const navLinkClass =
  'dn flex-m items-center t-small link c-link no-underline mv3 mh5 dim'

const TopNav = () => {
  const { content } = useSideBarContentState()

  return (
    <nav className="fixed pv3 w-100 bg-base c-on-base b--muted-3 z-9999">
      <div className="flex wrapper content-center justify-between">
        <div className="flex items-center dn-l nl4">
          <Drawer>
            <div className="flex flex-column w-90 center" role="menu">
              {getArticles(content, 0, IO_DOCUMENTATION)}
            </div>
          </Drawer>
        </div>

        <div className="flex">
          <a
            href="https://help.vtex.com/developer-docs"
            className={navLinkClass}>
            <FormattedMessage id="docs-ui/nav.api" />
          </a>
          <a href="https://www.vtex.com/partner/" className={navLinkClass}>
            <FormattedMessage id="docs-ui/nav.partner" />
          </a>
        </div>
      </div>
    </nav>
  )
}

interface Chapter {
  title: string
  path?: string
  articles: [] | Chapter[]
}

function getArticles(
  chapterList: Chapter[],
  depth: number,
  app?: string
): ReactElement {
  return (
    <div
      className={`list ${depth > 0 ? 'pl0-l pr2-l pb2 mt3' : 'pv6-l pr5-l'}`}>
      {chapterList.map((chapter: Chapter) => {
        return (
          <SideBarItem
            text={chapter.title}
            link={chapter.path && formatLink(chapter.path)}
            hasArticles={chapter.articles.length > 0}
            key={chapter.title}
            depth={depth}>
            {getArticles(chapter.articles, depth + 1, app)}
          </SideBarItem>
        )
      })}
    </div>
  )
}

export default TopNav

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/components/SideBarContext.tsx from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useContext, createContext, useReducer, ReactNode } from 'react'
import { ApolloError } from 'apollo-client'
import { branch, compose, renderComponent } from 'recompose'
import { graphql } from 'react-apollo'

import { IO_DOCUMENTATION } from '../modules/constantExports'
import Skeleton from './Skeleton'
import EmptySummary from './EmptySummary'
import Summary from '../graphql/appSummary.graphql'

interface Action {
  type: 'updateContent'
  value: Chapter[]
}
type Dispatch = (action: Action) => void
interface State {
  content: Chapter[]
}

interface Chapter {
  title: string
  path?: string
  articles: [] | Chapter[]
}

const SideBarStateContext = createContext<State | undefined>(undefined)
const SideBarDispatchContext = createContext<Dispatch | undefined>(undefined)

const DEFAULT_LOCALE = 'en'

function SideBarContentReducer(state: State, action: Action) {
  switch (action.type) {
    case 'updateContent': {
      return { ...state, major: action.value }
    }
    default: {
      return state
    }
  }
}

function SideBarContentProvider({
  children,
  appSummaryQuery,
}: SideBarContentProviderProps) {
  const [sideBarContent, dispatch] = useReducer(SideBarContentReducer, {
    content: appSummaryQuery.appSummary.chapterList,
  })

  return (
    <SideBarStateContext.Provider value={sideBarContent}>
      <SideBarDispatchContext.Provider value={dispatch}>
        {children}
      </SideBarDispatchContext.Provider>
    </SideBarStateContext.Provider>
  )
}

function useSideBarContentState() {
  const context = useContext(SideBarStateContext)
  if (context === undefined) {
    throw new Error(
      'useSideBarContentState must be used within a SideBarContentProvider'
    )
  }
  return context
}

function useSideBarContentDispatch() {
  const context = useContext(SideBarDispatchContext)

  if (context === undefined) {
    throw new Error(
      'useAppVersionDispatch must be used within a SideBarContentProvider'
    )
  }
  return context
}

const EnhancedSideBarContentProvider = compose<any, any>(
  graphql(Summary, {
    name: 'appSummaryQuery',
    options: {
      variables: {
        appName: IO_DOCUMENTATION,
        locale: DEFAULT_LOCALE,
      },
    },
  }),
  branch(
    ({ appSummaryQuery }: OuterProps) => appSummaryQuery.loading,
    renderComponent(Skeleton)
  ),
  branch(
    ({ appSummaryQuery }: OuterProps) => !!appSummaryQuery.error,
    renderComponent(EmptySummary)
  )
)(SideBarContentProvider)

interface SideBarContentProviderProps {
  children: ReactNode
  appSummaryQuery: AppSummaryQueryResponse
}

interface AppSummaryQueryResponse {
  appSummary: {
    chapterList: Chapter[]
  }
}

interface OuterProps {
  appSummaryQuery: {
    data: AppSummaryQueryResponse
    loading: boolean
    error?: ApolloError
  }
}

export {
  EnhancedSideBarContentProvider,
  useSideBarContentState,
  useSideBarContentDispatch,
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/components/Skeleton.tsx from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import '../styles.global.css'

const baseSkeletonPiece = 'pa3 br2 relative overflow-hidden'

const TitleLine = () => (
  <div
    className={`${baseSkeletonPiece} bg-muted-3 w-70 mb7`}
    style={{ height: `${32}px` }}>
    <div className="skeleton-shimmer" />
  </div>
)

const LineOne = () => (
  <div
    className={`${baseSkeletonPiece} bg-muted-3 mv3 w-100 o-80`}
    style={{ height: `${20}px` }}>
    <div className="skeleton-shimmer" />
  </div>
)

const LineTwo = () => (
  <div
    className={`${baseSkeletonPiece} bg-muted-3 mv3 w-80 o-60`}
    style={{ height: `${20}px` }}>
    <div className="skeleton-shimmer" />
  </div>
)

const Skeleton = () => {
  return (
    <div className="w-100 w-80-l" style={{ maxWidth: '680px' }}>
      <TitleLine />

      <LineOne />
      <LineTwo />

      <LineOne />
      <LineTwo />

      <LineOne />
      <LineTwo />

      <LineOne />
      <LineTwo />

      <LineOne />
      <LineTwo />

      <LineOne />
      <LineTwo />

      <LineOne />
      <LineTwo />

      <LineOne />
      <LineTwo />

      <LineOne />
      <LineTwo />
    </div>
  )
}

export default Skeleton

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of docs-ui/react/components/CodeBlock.tsx from the docs-ui VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC, useRef, useEffect } from 'react'
import hljs from 'highlight.js'

interface Props {
  language: string
  value: string
}

const CodeBlock: FC<Props> = ({ language, value }) => {
  const codeBlockRef = useRef<HTMLPreElement>(null)
  useEffect(() => {
    if (codeBlockRef?.current) {
      hljs.highlightBlock(codeBlockRef.current)
    }
  }, [codeBlockRef])

  // highlight.js does not support `.jsonc` files
  const codeBlockLanguage = language === 'jsonc' ? 'json' : language

  return (
    <pre>
      <code ref={codeBlockRef} className={`language-${codeBlockLanguage}`}>
        {value}
      </code>
    </pre>
  )
}

export default CodeBlock

```