storybook-addon-pseudo-states/dist/manager.js

Storybook Pseudo-states addon: Manipulate CSS pseudo states

import {
  ADDON_ID,
  PARAM_KEY,
  PSEUDO_STATES,
  TOOL_ID
} from "./_browser-chunks/chunk-FLRMKMJW.js";

// src/manager.ts
import { addons, types } from "storybook/manager-api";

// src/manager/PseudoStateTool.tsx
import React from "react";
import { Select } from "storybook/internal/components";
import { ButtonIcon } from "@storybook/icons";
import { useGlobals } from "storybook/manager-api";
var pseudoStates = Object.keys(PSEUDO_STATES).sort(), PseudoStateTool = () => {
  let [globals, updateGlobals] = useGlobals(), defaultOptions = Object.keys(globals[PARAM_KEY] || {}).filter(
    (key) => pseudoStates.includes(key)
  ), options = pseudoStates.map((option) => ({
    title: `:${PSEUDO_STATES[option]}`,
    value: option
  }));
  return React.createElement(
    Select,
    {
      resetLabel: "Reset pseudo states",
      onReset: () => updateGlobals({ [PARAM_KEY]: {} }),
      icon: React.createElement(ButtonIcon, null),
      ariaLabel: "CSS pseudo states",
      tooltip: "Apply CSS pseudo states",
      defaultOptions,
      options,
      multiSelect: !0,
      onChange: (selected) => {
        updateGlobals({
          // We know curr is a string because we are using string values in options
          [PARAM_KEY]: selected.reduce((acc, curr) => ({ ...acc, [curr]: !0 }), {})
        });
      }
    }
  );
};

// src/manager.ts
addons.register(ADDON_ID, () => {
  addons.add(TOOL_ID, {
    type: types.TOOL,
    title: "CSS pseudo states",
    match: ({ viewMode }) => viewMode === "story",
    render: PseudoStateTool
  });
});