• Stars
    star
    288
  • Rank 143,818 (Top 3 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 5 years ago
  • Updated 3 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Chromatic CLI: `npx chromatic`

Chromatic CLI

Publishes your Storybook to Chromatic and kicks off tests if they're enabled.

Published on npm Tested with Chromatic

Documentation

๐Ÿ‘‰ Read the Chromatic CLI docs

๐Ÿ“ View the Changelog

Using a next version

From time to time we pre-publish a next version of the package to test new features. To use the next branch you can either:

Using npx

Change your script to use the next dist-tag:

npx chromatic@next --project-token ...

Using a dependency in package.json

Update to the latest next version with:

yarn add --dev chromatic@next

# or
npm i --save-dev chromatic@next

Using the github action

Use our chromatic-next action:

- uses: chromaui/action-next@v1

Contributing

Contributions of any kind are welcome! We're available to chat via the Intercom widget on the documentation site.

Compatibility & versioning

Compatibility is guaranteed between this package and Chromatic like so:

  • Production Chromatic ensures itโ€™s compatible with whatโ€™s on npm
  • What's on the main branch is equal to what's published on npm
  • This package ensures itโ€™s compatible with production Chromatic

To facilitate upgrading in the future, removing and adding features, this is the process:

  • Any new features will have to be on Chromatic production before they could be used in this package
  • We can add feature flags to be able to test new functionality
  • Chromatic production can not remove any features this package depends on until after the usage has been removed from this package in addition to a grace period to allow users to upgrade

Building and running locally

  1. Ensure all dependencies are installed with yarn install
  2. Build + watch the code locally: yarn dev
  3. Run a build of all the CLI's stories against a Chromatic project: yarn chromatic -t <token>.

Running against staging

CHROMATIC_INDEX_URL=https://index.staging-chromatic.com yarn chromatic -t 253df72b53d2

Running against development

To test against a local development version of the Chromatic stack, use

CHROMATIC_INDEX_URL=https://index.dev-chromatic.com yarn chromatic -t <token>

To only test a small number of test stories as a smoke test, use:

SMOKE_TEST=1 CHROMATIC_INDEX_URL=https://index.dev-chromatic.com yarn chromatic -t <token>

Publishing a new version to npm

Before publishing, make sure you've done the following:

  • Updated CHANGELOG.md
  • Committed and pushed everything (clean working directory)
  • Decide on the proper semver bump (major/minor/patch)
  • Decide on the proper tag (canary/next/latest)

We have three types of releases:

  • canary releases are intended for testing purposes and should not be used in production, as they may only work against a staging or dev environment.
  • next releases should be valid, working releases that can potentially be used by early adopters of new features, for example to handle a support request.
  • latest releases are the general audience production releases, used by most people.

For GitHub Actions, we publish chromaui/action-canary and chromaui/action-next, which contain the latest canary or next release, respectively. A latest release will also automatically update chromaui/action-next (besides chromaui/action), in order to keep users who happen to depend on chromaui/action-next up to date with the latest release.

A script is provided to create new releases:

yarn release <major|minor|patch> <canary|next|latest> [--dry-run]

This script ensures the version is bumped properly, the tag is set correctly and the corresponding GitHub Action is updated.

Examples:

yarn release patch canary

Releases e.g. 6.6.1-canary.0.

yarn release major latest

Releases e.g. 7.0.0.

More Repositories

1

learnstorybook.com

Static site and content for Storybook tutorials
JavaScript
2,400
star
2

learnstorybook-code

Code for Learn Storybook
JavaScript
390
star
3

action

GitHub Action for publishing your Storybook to Chromatic
132
star
4

storybook-addon-pseudo-states

CSS pseudo-classes for Storybook
TypeScript
86
star
5

learnstorybook-design-system

JavaScript
73
star
6

intro-storybook-react-template

Boilerplate template for the Intro to Storybook tutorial for React
CSS
26
star
7

ui-testing-guide-code

JavaScript
22
star
8

addon-visual-tests

Visual Tests addon for Storybook
TypeScript
21
star
9

react-chromatic

Visual Regression Testing for React
JavaScript
21
star
10

learnstorybook-design-system-example-app

JavaScript
17
star
11

learnstorybook-design-system-template

Boilerplate template for the Design Systems for Developers tutorial
JavaScript
15
star
12

storybook-addon-outline

A storybook addon for visually debugging CSS layout and alignment
JavaScript
15
star
13

intro-storybook-react-native-template

Boilerplate template for the Intro to Storybook tutorial for React Native
JavaScript
13
star
14

intro-storybook-vue-template

Boilerplate template for the Intro to Storybook tutorial for Vue
Vue
10
star
15

intro-storybook-svelte-template

About Boilerplate template for the Intro to Storybook tutorial for Svelte
CSS
10
star
16

intro-storybook-angular-template

Boilerplate template for the Intro to Storybook tutorial for Angular
HTML
9
star
17

shapes

Demo Storybook showcasing shapes
TypeScript
8
star
18

chromatic-e2e

Archive end-to-end tests to be replayed in Storybook and Chromatic
TypeScript
8
star
19

tetra

Style Guide + UI Library for Chromatic and Storybook marketing sites
TypeScript
7
star
20

storybook-chromatic

JavaScript
5
star
21

learnstorybook-visual-testing-code

Code repository for the Visual Testing handbook
JavaScript
3
star
22

simple-app

JavaScript
3
star
23

intro-storybook-ember-template

Boilerplate template for the Intro to Storybook tutorial for Ember
CSS
3
star
24

ng-storybook-workshop

TypeScript
2
star
25

task-completed-checker-action

โœ…โŒ A GitHub action that checks if all tasks are completed in the pull requests.
TypeScript
2
star
26

storybook-chroma

JavaScript
2
star
27

gitlab-webhook-proxy

JavaScript
2
star
28

storybook-template-react

JavaScript
2
star
29

vite-project

A repro to test out Vite features and the vite-plugin-turbosnap package
TypeScript
1
star
30

chromatic-runtime-api-example

JavaScript
1
star
31

modes-demo

TypeScript
1
star
32

interactive-demo

JavaScript
1
star
33

test-next-app-mar-3-21

JavaScript
1
star
34

signed-webhook-examples

Go
1
star
35

github-webhook-proxy

JavaScript
1
star
36

ui-testing-handbook-react-template

Boilerplate template for the UI Testing Handbook for React
CSS
1
star