Is your feature request related to a problem? Please describe.
There needs to be a footer on the documentation theme

Describe the solution you'd like
Add a footer to the theme and show it on the pages created with MDX
Something like this

Is your feature request related to a problem? Please describe.
It's necessary to have a Sidebar to be able to navigate in the documentation of the ttheme

Describe the solution you'd like
Add a Sidebar to browse the pages created in mdx

Is your feature request related to a problem? Please describe.
With the Gatsby theme created, I want to use it

Describe the solution you'd like
add andromedocs-theme as a plugin in /Docs and be able to render the mdx files created there

Guidelines

Description

The Guidelines component describes how a component is expected to be used (Dos) or not (Don'ts).

Usage

Basic Example

import { Guidelines } from '@vtex/andromedocs'

const BasicExample = () => (
  <Guidelines>
    <Guidelines.Dos icon={<IconDo />} title="Dos">
      <li>Do this!</li>
      <li>Do that!</li>
    </Guidelines.Dos>
    <Guidelines.Donts icon={<IconDont />} title="Dont's">
      <li>NEVER do this!</li>
      <li>NEVER do that!</li>
    </Guidelines.Donts>
  </Guidelines>
)

Props

Guidelines.Dos

Guidelines.Donts

CodeBlock

Description

Illustrate how a component can be used.

Usage

Display ways the component should be used in a code context when it's implemented.

Props

Provide a table describing the props supported by the component.
If the component has composites, you should document the props for each one of them.

Example:

Is your feature request related to a problem? Please describe.
The andromedocs will have some components to help document their design systems. So we need a package that contains these components.

Describe the solution you'd like
...

Describe alternatives you've considered

• yarn init
• https://github.com/vtex/create-react-library

Describe the solution you'd like
Setup configuration to release app to npm and update changelog.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Is your feature request related to a problem? Please describe.
There needs to be a header on the documentation theme

Describe the solution you'd like
Add the header to the theme and show it on the pages created with MDX
Something like this

Also include:

• Theme UI plugin

Status Tag

Description

A badge that displays the current status of the component. We can use Theme UI's Badge as the base for this component! Figma

Usage

<StatusTag variant="stable">Stable</StatusTag>

Props

StatusTagVariant = 'stable' | 'experimental' | 'deprecated'

Is your feature request related to a problem? Please describe.
The andromedocs will be a gatsby theme that the user can install and use.

Describe the solution you'd like
Something like this

Also include:

• MDX plugin
• Route/path fronttmatter attribute

LiveCode

Description

Allow editing with changes in real-time.

Usage

import StatusTag from '...';

const Example = () => (
  <LiveCode scope={{ StatusTag }} code={`<StatusTag variant="stable" />`} />
);

Implementation

We can use react-live to create this component 🥺

Props

Example:

Check the react-live docs for more details!

Is your feature request related to a problem? Please describe.
Our code style quality isn't being ensured when sending commits.

Describe the solution you'd like
We can add a configuration of lint-staged + husky to create Git to help enforce the code style.

Describe alternatives you've considered

1. Add lint-staged and husky as dev dependencies (yarn add -D husky lint-staged);
2. Add a format script to package.json to run prettier: ("format": "prettier --write \"**/*.{ts,js,json,tsx}\"");
3. Add husky and lint-staged configs to package.json:

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,js,tsx,jsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.json": [
      "prettier --write"
    ]
  }

PropsTable

Description

A table with descriptions of each prop accepted by a component.

Usage

Display ways the component should be used in a code context when it's implemented.

Props

Provide a table describing the props supported by the component.
If the component has composites, you should document the props for each one of them.

Example:

Is your feature request related to a problem? Please describe.
The /docs directory is an example of a site that uses our Gatsby theme locally

Describe the solution you'd like
Setup a folder with the Gatsby dependencies and the theme created in #6
Something like this