storybookjs / addon-measure

⚠️ MOVED: This addon was moved to the Storybook monorepo

Storybook Addon Measure (moved)

Storybook addon for inspecting layouts and visualizing the box model.

1. Hold down the m key:

2. Hover over a DOM node

3. Storybook will display the dimensions of the selected element—margin, padding, border, width and height—in pixels.

Usage

1. This addon requires Storybook 6.3 or later. Install the latest with npx sb upgrade --prerelease

2. Install the addon:

npm i -D @storybook/addon-measure

3. Add "@storybook/addon-measure" to the addons array in your .storybook/main.js:

module.exports = {
  addons: ["@storybook/addon-measure"],
};

Inspiration

• Inspx by Rauno Freiberg
• Aaron Westbrook's script
• Visbug from the Chrome team

Contributing

Development scripts

Clone the repository and install dependencies.

yarn

• yarn start runs babel in watch mode and starts Storybook
• yarn build build and package your addon code

Release Management

Setup

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.

Add them to the .env file at the root of your project:

GH_TOKEN=<value you just got from GitHub>
NPM_TOKEN=<value you just got from npm>

Creating a releasing

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:

• Build and package the addon code
• Bump the version
• Push a release to GitHub and npm
• Push a changelog to GitHub

addon-measure's Issues

[Feature] Distribute ESM bundle

Describe the bug

This addon is not compatible with the vite builder, because it does not expose es modules.

Steps to reproduce the behavior

Use addon-essentials with https://github.com/eirslett/storybook-builder-vite, and observe the error message in the console

Expected behavior

I expect this to work correctly with modern storybook builders like vite.

Mobile availability

Any plans on making it available for mobile? 😃

Don't trigger when pressing option/alt in combination with other keys (e.g. cmd / shift key)

The addon shouldn't trigger when pressing option/alt in combination with other keys (e.g. cmd / shift key)

[Bug] Spurious globals URL parameter

Describe the bug

Enabling the measure addon causes a spurious &globals=measureEnabled:false query parameter when you navigate between stories. This should be the default value & should be provided to the story store so that it only shows in the URL when the value becomes true.

This could also be a bug in Storybook core.

[Bug] fork and run

Describe the bug

A clear and concise description of what the bug is.

Steps to reproduce the behavior

1. Clone the repo
2. Change new package.json's name (@storybook/addon-measure2)
3. yarn
4. yarn build
5. add the cloned add-on in .storybook/main.js add-on section such as addons: ["@storybook/addon-measure2", ...]
6. yarn storybook

Expected behavior

It should work just fine

Screenshots and/or logs

info => Loading presets
ERR! Addon value should end in /register OR it should be a valid preset https://storybook.js.org/docs/react/addons/writing-presets/
ERR! @storybook/addon-measure2

Additional context

I'm running both in parallel (the addon and a separate storybook build) in a yarn workspaces monorepo.

upload images

[Bug] Icon not showing up in storybook toolbar

Hello,

The icon for this addon is not showing up in my toolbar. I have pasted the screenshot below. The feature is working as expected, it is just that the icon is missing.

Thanks

Show measures when pressing alt/option key

Right now measure are only shown after having moved the mouse from one element to another but not directly when pressing the alt/option key.

CleanShot.2021-06-24.at.11.39.02.mp4

[Bug] Measure addon triggers extra render

Measure is causing an extra render, which is messing up CSF3's setup (=> play) function.

How to reproduce

In the Storybook monorepo:

cd examples/react-ts
yarn storybook
open http://localhost:9011/?path=/story/demo-accountform--standard

Then click on the Standard Failed Hover story and you should see an error screen.

What's happening

  setup: async () => {
    await StandardPasswordFailed.setup();
    await sleep(100);
    await userEvent.hover(screen.getByTestId('password-error-info'));
  }

This code runs the StandardPasswordFailed setup function, which fills out the form incorrectly, and then sleeps for a bit to give validation a chance to kick in and the validation error to show.

However, due to the extra render triggered by a "globals change event", the sleep(100) yields and the story is re-rendered, clearing the form, and causing the screen.getByTestId('password-error-info') call to fail.

If you disable the measure addon and try the same thing, it succeeds:

// main.ts
const config = {
  addons: [
    {
      name: '@storybook/addon-essentials',
      options: { measure: false },
    },
    ...
  ],
}

Initially, I thought this was related to #19. But, curiously, the Outline addon has a similar problem with the URL parameters, but it doesn't trigger any re-renders.

[Bug] addon-measure breaks alt functionality on Windows

Describe the bug

The plugin breaks the original alt-key functionality - ie. displaying the browser menu on Windows. Another related issue is that the plugin gets activated when alt-tabbing to a different window and stays activated when returning back, which makes it incredibly annoying.

Expected behavior

Use a different key. At least on Windows.

Environment

• OS: Windows 10
• Browser (if applicable): Chrome
• Browser version (if applicable): 91
• Storybook: 6.3.0 with addon-essentials

Workaround

Replace this in .storybook/main.js:

addons: [
  '@storybook/addon-essentials',
]

With this:

addons: [
  {
    name: '@storybook/addon-essentials',
    options: { measure: false },
  },
]

[Bug] addon icon not visible in nuxt js storybook

'addon-measure' icon not visible in nuxt.js

The add-on is working but not showing its icon on top in addon navbar

Steps to reproduce the behavior

1. install add-on yarn add -D @storybook/addon-measure
2. add it in storybook options in nuxt.config.js

  storybook: {
    addons: [
      '@storybook/addon-notes',
      'storybook-dark-mode',
      "@storybook/addon-measure",
      'storybook-addon-outline'
    ]
  },

3. run storybook with the configured command to run it, on my app, 'yarn run storybook`
4. then look up on the storybook web panel, on add on navbar

Expected behavior

add-on measure the icon should be visible

Screenshots and/or logs

Environment

• OS: Windows 10 Pro, build: 21390.1, version: Dev
• Node.js version: v14.16.1
• NPM version: 7.12.0
• Yarn version : 1.22.10
• Browser : Google Chrome
• Browser version : Version 91.0.4472.77 (Official Build) (64-bit)
• Device : Hp laptop

Additional context

Add any other context about the problem here.