Styleguide

VTEX Styleguide React components (Docs)

• Usage
• Developing
  • Setup
  • Running
  • Snapshots
• Developing using npm link
• Publishing
• Docs

Usage

VTEX IO Apps

Add the styleguide to dependencies on manifest.json:

"dependencies": {
  "vtex.styleguide": "5.x"
},

Importing components:

import { Button } from 'vtex.styleguide'

Other Projects

yarn add @vtex/styleguide --exact
# or
npm install @vtex/styleguide --save-exact

Importing components:

import Button from '@vtex/styleguide/lib/Button'

Developing

Setup

yarn install

Running

yarn styleguide

Snapshots

To save the components snapshots use:

yarn snap:test

Check the snapshots and to approve the changes use:

yarn snap:approve

You can use the option --filter to just test or approve a specific component. Example:

yarn snap:approve --filter "Button"

Developing using npm link

Run this in this repo:

yarn develop

In your project run:

npm link @vtex/styleguide

Import (case a <Button> component in lib):

import Button from '@vtex/styleguide/lib/Button'

Publishing

We use releasy to publish our styleguide. To publish on both npm and render(VTEX IO), execute the command below:

releasy --stable --npm 

Also, if you want to post the changelog on Github Release Notes, is required to configure a Personal Token. See more here. When you have the environment set, add a --notes flag, For example:

releasy --stable --npm --notes

Docs

To update the docs:

yarn deploy

Known issues

• Your project has to run with webpack >= 2. Here's a guide for upgrading Webpack to v2.