Skip to content
The VTEX Design System and React component library.
Branch: master
Clone or download
Latest commit 1c50cf4 Jul 18, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Add github pull request template May 10, 2019
assets Replaces GA with Tag Manager May 23, 2019
codemod chmod files Feb 1, 2019
docs Add chore as branch's allowed type Jun 6, 2019
react Fix prettier Jul 18, 2019
scripts
.babelrc chmod files Feb 1, 2019
.editorconfig chmod files Feb 1, 2019
.eslintignore
.eslintrc chmod files Feb 1, 2019
.gitignore Add .orig files to gitignore Mar 1, 2019
.prettierrc chmod files Feb 1, 2019
.vtexignore chmod files Feb 1, 2019
CHANGELOG.md Release v8.66.0 Jul 18, 2019
CODEOWNERS Disable component specific codeowners Jul 18, 2019
README.md Update readme Jun 13, 2019
_releasy.json chmod files Feb 1, 2019
google7c6328087fc392d0.html
manifest.json Release v8.66.0 Jul 18, 2019
package.json Release v8.66.0 Jul 18, 2019
robots.txt chmod files Feb 1, 2019
setupTests.js chmod files Feb 1, 2019
styleguide.config.js README update and styleguide config changes Jul 16, 2019
styleguide.styles.js chmod files Feb 1, 2019
yarn.lock

README.md

Styleguide

VTEX Styleguide React components (Docs)

Usage

For instructions on how to use the Styleguide in your project refer to the page itself: https://vtex.github.io/styleguide/.

Developing

Setup

yarn install

Running

yarn styleguide

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'

Testing

Developing new tests

To add tests to a component, just add a test file with the .test.js extension next to the component implementation.

Example:

react/components/Alert/
├── README.md
├── index.js
└── index.test.js

We use react-testing-library to test our components.

Running tests

To run the test use:

yarn test

You can also pass the --watch flag:

yarn test --watch

Publishing


IMPORTANT

Styleguide is currently being developped for two major versions at the same time, 8.x and 9.x. This means that after a merge of a feature to the master branch, 9.x branch has to be updated to stay at the same version level.

Example:

If 8.52.1 just got released, the update on 9.x should update the version to 9.52.1.

Follow those steps for a clean update. In case of doubt, ask one of the top contributors.


To post the changelog on Github Release Notes, is required to configure a Personal Token. See more here

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

releasy --stable

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.

  • VTEX Styleguide is a project built to run on top of either npm or VTEX IO. To make this viable, we currently use two package.json files, one in the top repository folder for npm, and one inside the react folder for VTEX IO. We are looking into how we can improve this architecture, but for now we have to live with duplicated dependencies in these package.json files.

    For more info, please refer to https://github.com/vtex/styleguide/issues/483

You can’t perform that action at this time.