Essentials: Add measure and outline addons

[winkerVSbecks]

Issue:

What I did

Added the Measure and Outline addons to @storybook/addon-essentials

How to test

Build @storybook/addon-essentials and load up any of the example Storybooks

• Is this testable with Jest or Chromatic screenshots?
  No

• Does this need a new example in the kitchen sink apps?
  No

• Does this need an update to the documentation?
  Yes, should add Measure and Outline to the list of essential addons

If your answer is yes to any of these, please make sure to include it in your PR.

[nx-cloud]

Nx Cloud Report

CI ran the following commands for commit d302502. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

Status	Command
	nx run-many --target=prepare --all --parallel --max-parallel=15

---

Sent with 💌 from NxCloud.

[yannbf]

This is super awesome! The only concern I have, which I don't really know if it's a valid one, is that now with these addons, out of the box, Storybook already contains 5 toolbar icons. As soon as people start adding a couple more addons, it gets really crowded. Example of a crowded toolbar (3 from essentials, 3 custom):

I'm unsure whether having too many items there becomes a challenging UI for the user. I guess it is, when people access via mobile. What are your thoughts?

[winkerVSbecks]

@yannbf the user always has the option to disable essential addons that they are not using. But, I think in the long term we need a tweak to the toolbar to support more addons.

[shilman]

A couple minor issues

[winkerVSbecks]

@shilman updated, could you take another look please

[shilman]

@winkerVSbecks There are a couple issues here.

• the PnP tests are failing because addon-outline uses ts-dedent but doesn't declare it as a dependency in package.json. Adding it & republishing the addon should fix it.
• Chromatic is failing on some measure-related error

Home stretch!

[shilman]

Looking good! I checked the perf and there is a slight uptick in install size & manager bundle size, which is to be expected. Merging & will release later today.

[IanVS]

It might be good to update the docs (or at least readme) too, it seems there are a few more essentials than are indicated on https://storybook.js.org/addons/tag/essentials/ and https://github.com/storybookjs/storybook/tree/next/addons/essentials#contents.

[shilman]

Thanks @IanVS. We'll be sure to update everything as part of the 6.3 release cc @winkerVSbecks @jonniebigodes

[hckhanh]

Why this cool feature is disabled in rc.0 version?

[shilman]

@hckhanh it's enabled in rc.0. screenshot from a fresh install:

[hckhanh]

Hi @shilman, I don't know why but when I upgrade from beta.12 to rc.0. The Measure and Outline tools are disappeared. I leave my configurations bellow:

main.js

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app",
  ],
  core: {
    // builder: 'webpack5',
  },
};

manager.js

import { addons } from "@storybook/addons";
import { themes } from "@storybook/theming";

addons.setConfig({
  theme: themes.dark,
});

preview.js

import { themes as storybookThemes } from "@storybook/theming";
import { ThemeProvider } from "styled-components";
import themes, { GlobalStyles } from "../src/themes";

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  docs: {
    theme: storybookThemes.dark,
  },
};

export const decorators = [
  (Story) => (
    <ThemeProvider theme={themes}>
      <GlobalStyles />
      <Story />
    </ThemeProvider>
  ),
];

[shilman]

@hckhanh Did you try removing node_modules and/or lockfiles and reinstalling?

[hckhanh]

Ops I am using Yarn 2 with plug'nplay