I have a storybook project that uses react + webpack, I wanna build an storybook addon

[shibisuriya]

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...