storybookjs / addon-kit Goto Github PK

Thanks for making this template! I am trying it out with https://github.com/hydrosquall/storybook-addon-datadog-rum

I was wondering whether there's a recommended path for passing in configuration parameters into an addon.

I looked at the google-analytics plugin as an example, and noticed it is configured using assignments to the global window in preview.js

https://github.com/storybookjs/storybook/tree/a33ec342b56009ad17bfa9a64a0cb45e8eda96cf/addons/google-analytics

This works, but it seems risky (e.g. naming collisions, other programs could overwrite this, and associated dangers of putting things on the global namespace).

Is there a recommended way / example plugin which would let me pass in "addon configuration" as a parameter that would show up in the registration callback instead? Ideally I would like to pass these into storybook/.main.js, similar to how babel plugins are configurable (e.g. you can pass just the name, or a 2-item array containing the name in the first slot, and the options in the second slot). Wasn't sure if this is already possible, or a feature request to file for the core storybook repo.

https://github.com/storybookjs/storybook/blob/a33ec342b56009ad17bfa9a64a0cb45e8eda96cf/addons/google-analytics/src/register.ts#L7

Describe the bug

It is impossible to publish the forked repo without removing the postinstall script - it hangs on the welcome.js script.
I think it would be good to auto-remove this script after it has run successfully, or add a relevant note in the readme.

Steps to reproduce the behavior

1. Create a new repo from template
2. Add secrets
3. ...
4. Push a commit

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots and/or logs

Environment

• git actions

Describe the Feature

It is important for modern build tools (like the storybook vite builder) to expose an ESM build. The official addon-kit should enable this by default, to ensure that the ecosystem of storybook plugins uses this best-practice.

It sounds like varun from discord is working on this currently, but I thought it might be good to have an issue to track it.

Describe the bug

I've cloned the repo. I've installed dependencies with yarn. Yarn start doesn't work and it throws an error 'unknown quite flag', but removing the flag works. I've tried a simple modification to the PanelContent.tsx by
import { useArgs } from "@storybook/manager-api";
and later
const [args, updateArgs,resetArgs] = useArgs();
which throws an error in the browser - "Uncaught TypeError: Cannot read properties of undefined (reading 'type')
at useArgs (chunk-QQ57T6RI.mjs:53:34107)"

I've taken a look at the controls addon - specifically (https://github.com/storybookjs/storybook/blob/next/code/addons/controls/src/ControlsPanel.tsx) and I use the useArgs method in the same way. I'm attaching a screenshot of the error message and code for PanelContent.tsx.

Modified PanelContent.tsx from this repo:
`
import React, { Fragment,useEffect, useState } from "react";
import { styled, themes, convert } from "@storybook/theming";
import { TabsState, Placeholder, Button } from "@storybook/components";
import { useArgs } from "@storybook/manager-api";
import { List } from "./List";

export const RequestDataButton = styled(Button)({
marginTop: "1rem",
});

type Results = {
danger: any[];
warning: any[];
};

interface PanelContentProps {
results: Results;
fetchData: () => void;
clearData: () => void;
}

/**

• Checkout https://github.com/storybookjs/storybook/blob/next/code/addons/jest/src/components/Panel.tsx
• for a real world example
  */
  export const PanelContent: React.FC = ({
  results,
  fetchData,
  clearData,
  }) => {
  const [args, updateArgs,resetArgs] = useArgs();
  console.log(args)
  return(
  <TabsState
  initial="overview"
  backgroundColor={convert(themes.normal).background.hoverable}

<div
  id="overview"
  title="Overview"
  color={convert(themes.normal).color.positive}
>
  <Placeholder>
    <Fragment>
      Addons can gather details about how a story is rendered. This is panel
      uses a tab pattern. Click the button below to fetch data for the other
      two tabs.
    </Fragment>
    <Fragment>
      <RequestDataButton
        secondary
        small
        onClick={fetchData}
        style={{ marginRight: 16 }}
      >
        Request data
      </RequestDataButton>

      <RequestDataButton outline small onClick={clearData}>
        Clear data
      </RequestDataButton>
      <Button onClick={()=>{
        console.log('test')
      }}>Test</Button>
    </Fragment>
  </Placeholder>
</div>
<div
  id="danger"
  title={`${results.danger.length} Danger`}
  color={convert(themes.normal).color.negative}
>
  <List items={results.danger} />
</div>
<div
  id="warning"
  title={`${results.warning.length} Warning`}
  color={convert(themes.normal).color.warning}
>
  <List items={results.warning} />
</div>

`

Steps to reproduce the behavior

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots and/or logs

If applicable, add screenshots and/or logs to help explain your problem.

Environment

• OS: Windows 10
• Node.js version: v16.18.1
• NPM version: 8.19.2
• Browser (if applicable): chrome
• Browser version (if applicable): [e.g. 22]
• Device (if applicable): [e.g. iPhone6]

Additional context

Add any other context about the problem here.

Describe the bug

First of all I'd like to say that I've made my addon, published it to npm and installed it to a few other projects and it's working. I've done it by building the project and running npm publish - prior to that run npm adduser if you haven't done that already.

The yarn release command is not working. It passes the yarn build but fails at yarn auto shipit
I have the GitHub and NPM toknes generated with all the required permissions as described in this article - https://storybook.js.org/docs/react/addons/writing-addons#publishing-to-npm

I've also tried publishing the package using the CI automation as described in the article and it doesn't work.

The error message I get is:
`
Error: Running command 'npm' with args [version, 0.2.1, --no-commit-hooks, -m, 'Bump version to: %s [skip ci]'] failed

npm ERR! code EUSAGE
npm ERR!
npm ERR! Bump a package version
npm ERR!
npm ERR! Usage:
npm ERR! npm version [ | major | minor | patch | premajor | preminor | prepatch | prerelease | from-git]
npm ERR!
npm ERR! Options:
npm ERR! [--allow-same-version] [--no-commit-hooks] [--no-git-tag-version] [--json]
npm ERR! [--preid prerelease-id] [--sign-git-tag]
npm ERR! [-w|--workspace [-w|--workspace ...]]
npm ERR! [-ws|--workspaces] [--no-workspaces-update] [--include-workspace-root]
npm ERR!
npm ERR! alias: verison
npm ERR!
npm ERR! Run "npm help version" for more info
`

There isn't much information out there on the internet and I haven't spent a significant amount of time debugging this, since there are easier way to publish the package as stated above.
However I did take a look at a couple of issues one of them being intuit/auto#1509
All the commands work on their own both on windows and wsl - so I'm not sure what's the problem.

Just wanted to let you guys know and if anyone else encounters problems, try publishing directly - that worked for me.

I have a storybook project that uses react + webpack, I wanna build a storybook addon, can't I just add 2 files into my existing project?

// register.js

import React from "react";
import { addons, types } from "@storybook/addons";

import { ADDON_ID } from "./constants";
import { RefreshAddon } from "./refresh_addon.js";

addons.register(ADDON_ID, () => {
  addons.add(ADDON_ID, {
    title: "Outline",
    type: types.TOOL,
    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
    render: () => <RefreshAddon />
  });
});

and

// refresh_addon.js

import React, { useState, memo } from "react";
import { Icons, IconButton } from "@storybook/components";

export const OutlineSelector = memo(() => {
  const [outline, setOutline] = useState(false);
  const toggleOutline = () => setOutline(!outline);

  return (
    <button onClick={toggleOutline}>Cringe</button>
    // <IconButton
    //   key="outline"
    //   title="Apply outlines to the preview"
    //   onClick={toggleOutline}
    // >
    // </IconButton>
  );
});

And in main.js file, I register.

{
addons: ['./register.js']
}

I don't want to write a separate npm package for a single storybook addon...

Hello,

I have created a atorybook addon using this addon kit as a starter. I now want to upgrade my addon to make it compatible with storybook 7 beta. Would it be possible to make this starter template compatible with storybook 7 so that I can look at the changes necessary to upgrade my own addon?

I understand storybook 7 is still in beta but it would be nice if we had a way to upgrade our addons before the official release. maybe a separate branch so that people creating addons now still have something compatible with the current version of storybook.

thanks

Is there a way to support SB 6 and 7 with the same package?
Or do I need to make a breaking change version?

Describe the question

I started from here:

ff79441

and created just for a test:

preset.js

function config(entry = []) {
  return [...entry, require.resolve("./preview")];
}

function managerEntries(entry = []) {
  return [...entry, require.resolve("./register")];
}

module.exports = { managerEntries, config }

preview.js

export const globalTypes = {
  theme: {
    name: "Theme",
    description: "Global theme for components",
    toolbar: {
      icon: "circlehollow",
      title: "Theme",
      items: [
        { value: "light", icon: "circlehollow", title: "light" },
        { value: "dark", icon: "circle", title: "dark" },
        { value: "side-by-side", icon: "sidebar", title: "side by side" },
        { value: "stacked", icon: "bottombar", title: "stacked" },
      ],
    },
  },
};

register.js

import React from 'react';

import { addons, types } from '@storybook/addons';

import { AddonPanel } from '@storybook/components';
import { useParameter } from '@storybook/api';

const ADDON_ID = 'myaddon';
const PANEL_ID = `${ADDON_ID}/panel`;

const PARAM_KEY = 'myAddon';

const MyPanel = () => {
  const value = useParameter(PARAM_KEY, null);
  const item = value ? value.data : 'No story parameter defined';
  return <div>{item}</div>;
};

addons.register(ADDON_ID, (api) => {
  addons.add(PANEL_ID, {
    type: types.PANEL,
    title: 'My Addon',
    render: ({ active, key }) => (
      <AddonPanel active={active} key={key}>
        <MyPanel />
      </AddonPanel>
    ),
  });
});

If I add this "addon" to my storybook main.js

1. the Panel and function is available
2. The theme Button is not available

What I am doing wrong or have missunderstood?

Thanks for a short help again.

Tom

Describe the bug

After forking the repo and executing yarn, the command yarn start fails.
I use [email protected] btw.

Steps to reproduce the behavior

1. Fork the repo and clone it locally
2. yarn
3. yarn start
4. See error

Expected behavior

Should start without problem.

Screenshots and/or logs

 % yarn start                            
[0] [0] babel:
[0] [0]   --watch does not exist
[0] [0] yarn buildBabel:esm -- --watch exited with code 2
[0] [1] error TS5023: Unknown compiler option '--'.
[0] [1] yarn buildTsc -- --watch exited with code 1
[0] yarn build:watch exited with code 1
[1] info @storybook/react v6.4.0
[1] info 
[1] info => Loading presets
[1] ERR! Error: Cannot find module './dist/esm/preset/preview'
[1] ERR! Require stack:
ERR! - /Users/jonathan/IdeaProjects/storybook-addon-react-router-v6/preset.js
[1] ERR! - /Users/jonathan/IdeaProjects/storybook-addon-react-router-v6/node_modules/@storybook/core-common/dist/cjs/presets.js
[1] ERR! - /Users/jonathan/IdeaProjects/storybook-addon-react-router-v6/node_modules/@storybook/core-common/dist/cjs/index.js
ERR! - /Users/jonathan/IdeaProjects/storybook-addon-react-router-v6/node_modules/@storybook/core-server/dist/cjs/index.js
[1] ERR! - /Users/jonathan/IdeaProjects/storybook-addon-react-router-v6/node_modules/@storybook/core/dist/cjs/server.js
[1] ERR! - /Users/jonathan/IdeaProjects/storybook-addon-react-router-v6/node_modules/@storybook/core/server.js
[1] ERR! - /Users/jonathan/IdeaProjects/storybook-addon-react-router-v6/node_modules/@storybook/react/dist/cjs/server/index.js
[1] ERR! - /Users/jonathan/IdeaProjects/storybook-addon-react-router-v6/node_modules/@storybook/react/bin/index.js
ERR!     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:815:15)
[1] ERR!     at Function.resolve (internal/modules/cjs/helpers.js:80:19)
[1] ERR!     at Object.config (/Users/jonathan/IdeaProjects/storybook-addon-react-router-v6/preset.js:2:29)
ERR!     at /Users/jonathan/IdeaProjects/storybook-addon-react-router-v6/node_modules/@storybook/core-common/dist/cjs/presets.js:279:28
[1] ERR!     at processTicksAndRejections (internal/process/task_queues.js:97:5)
[1] ERR!     at async _default (/Users/jonathan/IdeaProjects/storybook-addon-react-router-v6/node_modules/@storybook/builder-webpack4/dist/cjs/preview/iframe-webpack.config.js:75:22)
[1] ERR!     at async Object.start (/Users/jonathan/IdeaProjects/storybook-addon-react-router-v6/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:91:16)
[1] ERR!     at async Promise.all (index 0)
[1] ERR!     at async storybookDevServer (/Users/jonathan/IdeaProjects/storybook-addon-react-router-v6/node_modules/@storybook/core-server/dist/cjs/dev-server.js:126:28)
[1] ERR!     at async buildDevStandalone (/Users/jonathan/IdeaProjects/storybook-addon-react-router-v6/node_modules/@storybook/core-server/dist/cjs/build-dev.js:115:31)
ERR!     at async buildDev (/Users/jonathan/IdeaProjects/storybook-addon-react-router-v6/node_modules/@storybook/core-server/dist/cjs/build-dev.js:161:5)
[1] ERR!  Error: Cannot find module './dist/esm/preset/preview'
[1] ERR! Require stack:
[1] ERR! - /Users/jonathan/IdeaProjects/storybook-addon-react-router-v6/preset.js
[1] ERR! - /Users/jonathan/IdeaProjects/storybook-addon-react-router-v6/node_modules/@storybook/core-common/dist/cjs/presets.js
[1] ERR! - /Users/jonathan/IdeaProjects/storybook-addon-react-router-v6/node_modules/@storybook/core-common/dist/cjs/index.js
[1] ERR! - /Users/jonathan/IdeaProjects/storybook-addon-react-router-v6/node_modules/@storybook/core-server/dist/cjs/index.js
[1] ERR! - /Users/jonathan/IdeaProjects/storybook-addon-react-router-v6/node_modules/@storybook/core/dist/cjs/server.js
[1] ERR! - /Users/jonathan/IdeaProjects/storybook-addon-react-router-v6/node_modules/@storybook/core/server.js
[1] ERR! - /Users/jonathan/IdeaProjects/storybook-addon-react-router-v6/node_modules/@storybook/react/dist/cjs/server/index.js
[1] ERR! - /Users/jonathan/IdeaProjects/storybook-addon-react-router-v6/node_modules/@storybook/react/bin/index.js
[1] ERR!     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:815:15)
[1] ERR!     at Function.resolve (internal/modules/cjs/helpers.js:80:19)
[1] ERR!     at Object.config (/Users/jonathan/IdeaProjects/storybook-addon-react-router-v6/preset.js:2:29)
[1] ERR!     at /Users/jonathan/IdeaProjects/storybook-addon-react-router-v6/node_modules/@storybook/core-common/dist/cjs/presets.js:279:28
[1] ERR!     at processTicksAndRejections (internal/process/task_queues.js:97:5)
[1] ERR!     at async _default (/Users/jonathan/IdeaProjects/storybook-addon-react-router-v6/node_modules/@storybook/builder-webpack4/dist/cjs/preview/iframe-webpack.config.js:75:22)
[1] ERR!     at async Object.start (/Users/jonathan/IdeaProjects/storybook-addon-react-router-v6/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:91:16)
[1] ERR!     at async Promise.all (index 0)
[1] ERR!     at async storybookDevServer (/Users/jonathan/IdeaProjects/storybook-addon-react-router-v6/node_modules/@storybook/core-server/dist/cjs/dev-server.js:126:28)
[1] ERR!     at async buildDevStandalone (/Users/jonathan/IdeaProjects/storybook-addon-react-router-v6/node_modules/@storybook/core-server/dist/cjs/build-dev.js:115:31)
[1] ERR!     at async buildDev (/Users/jonathan/IdeaProjects/storybook-addon-react-router-v6/node_modules/@storybook/core-server/dist/cjs/build-dev.js:161:5) {
[1] ERR!   code: 'MODULE_NOT_FOUND',
[1] ERR!   requireStack: [
[1] ERR!     '/Users/jonathan/IdeaProjects/storybook-addon-react-router-v6/preset.js',
[1] ERR!     '/Users/jonathan/IdeaProjects/storybook-addon-react-router-v6/node_modules/@storybook/core-common/dist/cjs/presets.js',
[1] ERR!     '/Users/jonathan/IdeaProjects/storybook-addon-react-router-v6/node_modules/@storybook/core-common/dist/cjs/index.js',
[1] ERR!     '/Users/jonathan/IdeaProjects/storybook-addon-react-router-v6/node_modules/@storybook/core-server/dist/cjs/index.js',
[1] ERR!     '/Users/jonathan/IdeaProjects/storybook-addon-react-router-v6/node_modules/@storybook/core/dist/cjs/server.js',
[1] ERR!     '/Users/jonathan/IdeaProjects/storybook-addon-react-router-v6/node_modules/@storybook/core/server.js',
[1] ERR!     '/Users/jonathan/IdeaProjects/storybook-addon-react-router-v6/node_modules/@storybook/react/dist/cjs/server/index.js',
[1] ERR!     '/Users/jonathan/IdeaProjects/storybook-addon-react-router-v6/node_modules/@storybook/react/bin/index.js'
[1] ERR!   ]
[1] ERR! }
[1] WARN Broken build, fix the error above.
[1] WARN You may need to refresh the browser.
[1] 
[1] 
[1] yarn storybook -- --no-manager-cache --quiet exited with code 1

Environment

• OS: macOS Monterey 12.3.1 (intel processor)
• Node.js version: 17.9.0
• NPM version: 8.5.5
• Yarn version: 3.1.1

Describe the bug

When user runs Storybook on vite ESM exports config (.mjs) makes it are not capable to build.

Steps to reproduce the behavior

1. Set up vite based storybook
2. Install [email protected]
3. Run build-storybook
4. Error happens.

Expected behavior

Should work

Screenshots and/or logs

Available here morewings/storybook-addon-theme-provider#11

Additional context

I managed to fix it by removing exports config from package.json and using only cjs build. Not sure if it's the best way.

Storybook 6.5 added support for React 18, but the peerDependencies only supports ^16.8.0 || ^17.0.0. Please update this to include || ^18.0.0.

The line reference fails due to it not being an id when in docs mode. See

My simple recommendation:

• Update line 12 to use #root instead of root
• Update line 21 to use querySelector instead of getElementById

I will try to get a PR open if I can find time.

• Add SB monorepo inspired TS support
• Convert to yarn
• Finalize a good boilerplate tsconfig (how?)
• Convert all code to .ts U
• Update docs
• Potentially provide an "eject" path to convert from TS to JS? https://babeljs.io/docs/en/babel-preset-typescript

Describe the bug

The APIs used to register the manager-specific parts of the addon is deprecated and using some properties that TypeScript says are wrong. I don't have the full picture of how wrong it actually is, or what the non-deprecated APIs to migrate to would be, but we should probably change it.

This is also in the documentation, so what ever we figure out we should remember to update the docs as well.

Screenshots and/or logs

These are screenshots from just opening manager.ts from this repo. https://github.com/storybookjs/addon-kit/blob/main/src/manager.ts

deprecated types import

Tool definition

Panel definition

Tab definition

Describe the bug

eject-ts script not working

Steps to reproduce the behavior

1. Use addon-kit template
2. yarn install
3. yarn eject-ts
4. Error happens.

Expected behavior

Should eject smoothly.

Screenshots and/or logs

➜  demo-case git:(main) yarn eject-ts
yarn run v1.22.19
$ zx scripts/eject-typescript.mjs
$ cp -r ./src ./srcTS
$ rm -rf ./src
$ mkdir ./src
$ babel --no-babelrc --presets @babel/preset-typescript ./srcTS -d ./src --extensions ".js,.jsx,.ts,.tsx" --ignore "./srcTS/typings.d.ts"
/bin/bash: babel: command not found
Error: /bin/bash: babel: command not found
    at file:///Users/dima/Dev/demo-case/scripts/eject-typescript.mjs:9:8
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Environment

• OS: macOS 12.6.4
• Node.js version: v18.12.1
• NPM version: [email protected]
• Browser (if applicable): n/a
• Browser version (if applicable): n/a
• Device (if applicable): macbook

Describe the bug

When using the template for preview.ts, the preview decorators will not load into a consuming storybook app. It does work locally using the local-preset.js files.

Version: 7.0.4 for both developing the addon and the consuming app

What Didn't Work

import type { Renderer, ProjectAnnotations } from '@storybook/types';
import { PARAM_KEY } from './constants';
import withTheme from './withTheme';
import withBGStyle from './withBGStyle';

const preview: ProjectAnnotations<Renderer> = {
    decorators: [withBGStyle, withTheme],
    globals: {
        [PARAM_KEY]: false,
    },
};

export default preview;

What Worked

import type { Renderer, ProjectAnnotations } from '@storybook/types';
import { PARAM_KEY } from './constants';
import withTheme from './withTheme';
import withBGStyle from './withBGStyle';

export const decorators: ProjectAnnotations<Renderer>['decorators'] = [withBGStyle, withTheme];

export const globals: ProjectAnnotations<Renderer>['globals'] = {
    [PARAM_KEY]: false,
}

Expected behavior

Either for the default export to work or for the docs/template to be updated

I'm really curious about the purpose of this code, can you say more?

Describe the bug

Watch mode (aka live reload) is broken for me. My setup: macOS 12.6.3, Node v16.14.0. When I change the code, Storybook in browser doesn't show the change.

Steps to reproduce the behavior

1. Clone this repo on macOS 12.6.3, Node v16.14.0.
2. Run yarn install
3. Run yarn start
4. Change any displayable value in src/Tool.tsx
5. Save file
6. Elevator music playing
7. Nothing is changed in browser.

Expected behavior

Watch mode should work normally. So the changes in the code are reflected in running Storybook instance.

Environment

• OS: macOS 12.6.3
• Node.js version: v16.14.0
• NPM version: 9.2.0
• Browser (if applicable): chrome, safari, firefox
• Browser version (if applicable): n/a
• Device (if applicable): MacBook Pro 2015

Additional context

No other context. Thanks for your work, colleagues.

We recently noticed a browser warning in our storybook addon at Lullabot/storybook-drupal-addon#27.

storybook/drupal-addon was loaded twice, this could have bad side-effects

It seems like this export isn't required at all for addons to work: https://github.com/storybookjs/addon-kit/blob/main/preset.js#L5-L7

In our case, we've removed it, but it did come from this repository template. Is there some other reason it is required or useful? If not, can it be removed, or left in place commented as an example with details on why it's useful?

Hi guys. So I have a question, is there any specific reason you use tsup? The build can be done with just vite. One config less for you. Will you accept PR with this change?