Security News
JavaScript Leaders Demand Oracle Release the JavaScript Trademark
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
@chromaui/addon-visual-tests
Advanced tools
Visual Testing addon with Chromatic
yarn start
runs babel in watch mode and starts Storybookyarn build
build and package your addon codeDon't want to use TypeScript? We offer a handy eject command: yarn eject-ts
This will convert all code to JS. It is a destructive process, so we recommended running this before you start writing any code.
The addon code lives in src
. It demonstrates all core addon related concepts. The three UI paradigms
src/Tool.tsx
src/Panel.tsx
src/Tab.tsx
Which, along with the addon itself, are registered in src/manager.ts
.
Managing State and interacting with a story:
src/withGlobals.ts
& src/Tool.tsx
demonstrates how to use useGlobals
to manage global state and modify the contents of a Story.src/withRoundTrip.ts
& src/Panel.tsx
demonstrates two-way communication using channels.src/Tab.tsx
demonstrates how to use useParameter
to access the current story's parameters.Your addon might use one or more of these patterns. Feel free to delete unused code. Update src/manager.ts
and src/preview.ts
accordingly.
Lastly, configure you addon name in src/constants.ts
.
Storybook addons are listed in the catalog and distributed via npm. The catalog is populated by querying npm's registry for Storybook-specific metadata in package.json
. This project has been configured with sample data. Learn more about available options in the Addon metadata docs.
This project is configured to use auto for release management. It generates a changelog and pushes it to both GitHub and npm. Therefore, you need to configure access to both:
NPM_TOKEN
Create a token with both Read and Publish permissions.GH_TOKEN
Create a token with the repo
scope.Then open your package.json
and edit the following fields:
name
author
repository
To use auto
locally create a .env
file at the root of your project and add your tokens to it:
GH_TOKEN=<value you just got from GitHub>
NPM_TOKEN=<value you just got from npm>
Lastly, create labels on GitHub. You’ll use these labels in the future when making changes to the package.
npx auto create-labels
If you check on GitHub, you’ll now see a set of labels that auto
would like you to use. Use these to tag future pull requests.
This template comes with GitHub actions already set up to publish your addon anytime someone pushes to your repository.
Go to Settings > Secrets
, click New repository secret
, and add your NPM_TOKEN
.
To create a release locally you can run the following command, otherwise the GitHub action will make the release for you.
yarn release
That will:
FAQs
Visual Testing addon with Chromatic
We found that @chromaui/addon-visual-tests demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 12 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.