Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
@storybook/addon-measure
Advanced tools
Inspect layouts by visualizing the box model
The @storybook/addon-measure npm package is a Storybook addon used for measuring and inspecting elements in a Storybook UI. This tool is particularly useful for developers and designers to ensure precise visual consistency directly within the Storybook environment. It allows users to measure dimensions, spacing, and alignment of components during the development process.
Element Measurement
This feature allows users to measure the dimensions and spacing of components. By adding the withMeasure decorator, users can toggle measurement tools in the Storybook UI to inspect the component presented in the story.
import { withMeasure } from '@storybook/addon-measure';
export default {
title: 'Your Component',
decorators: [withMeasure]
};
export const YourStory = () => <YourComponent />;
Alignment Inspection
This feature enables users to check the alignment of elements within components. The decorator adds visual guides that help in aligning text, icons, or other elements accurately within the component.
import { withMeasure } from '@storybook/addon-measure';
export default {
title: 'Another Component',
decorators: [withMeasure]
};
export const AnotherStory = () => <AnotherComponent />;
Similar to @storybook/addon-measure, @storybook/addon-outline provides visual tools to enhance UI development in Storybook. While @storybook/addon-measure focuses on measuring and spacing, @storybook/addon-outline helps by drawing outlines around components, which is useful for visual debugging of layout and container boundaries.
This addon is used to embed Figma or Sketch designs next to your Storybook stories, facilitating a side-by-side comparison between design files and implemented components. Unlike @storybook/addon-measure, which is more focused on in-story measurements, storybook-addon-designs bridges the gap between design and development by directly integrating design visuals.
Storybook addon for inspecting layouts and visualizing the box model.
Hover over a DOM node
Storybook will display the dimensions of the selected element—margin, padding, border, width and height—in pixels.
Install the addon:
npm i -D @storybook/addon-measure
Then, add "@storybook/addon-measure"
to the addons array in your .storybook/main.js
:
module.exports = {
addons: ["@storybook/addon-measure"],
};
Clone the repository and install dependencies.
yarn
yarn start
runs babel in watch mode and starts Storybookyarn build
build and package your addon codeThis 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.
npm run release
That will:
FAQs
Inspect layouts by visualizing the box model
The npm package @storybook/addon-measure receives a total of 4,041,121 weekly downloads. As such, @storybook/addon-measure popularity was classified as popular.
We found that @storybook/addon-measure demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 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
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.