storybook-addon-grid/chromatic.js

Column guides for your stories

// src/chromatic.ts
const isChromatic = require('chromatic/isChromatic');

// src/Grids.tsx
const React2 = require('react');
const { createPortal } = require('react-dom');
const { useAddonState, useParameter } = require('@storybook/manager-api');
const { CacheProvider, createCache } = require('@storybook/theming');

// src/constants.ts
var ADDON_ID = "storybook-addon-grid";
var PARAM_KEY = "grid";

// src/ui.tsx
const React = require('react');
const { Global, styled } = require('@storybook/theming');
const { Fragment, jsx, jsxs } = require('react/jsx-runtime');
var MAX_COLUMNS = 24;
var Wrapper = styled.div({
  position: "relative",
  zIndex: 1,
  opacity: 0,
  pointerEvents: "none",
  '&[data-visible="true"]': {
    opacity: 1
  }
});
var Grid = styled.div(
  ({ gap, gutter, maxWidth, columns }) => {
    let gutterRight = "0", gutterLeft = "0";
    if (Array.isArray(gutter)) {
      [gutterLeft, gutterRight] = gutter;
    } else if (gutter != null) {
      gutterLeft = gutterRight = gutter;
    }
    return {
      position: "fixed",
      inset: "0",
      display: "grid",
      gridTemplateColumns: `repeat(min(${columns}, ${MAX_COLUMNS}), 1fr)`,
      gridTemplateRows: "100%",
      gridColumnGap: gap,
      width: "100%",
      height: "100%",
      margin: "0 auto",
      maxWidth,
      padding: `0 ${gutterRight} 0 ${gutterLeft}`,
      boxSizing: "border-box"
    };
  }
);
var Column = styled.div(({ color }) => ({
  width: "100%",
  height: "100%",
  backgroundColor: color
}));
function Grids({
  visible,
  columns = 12,
  gap = "20px",
  color = "rgba(255, 0, 0, 0.1)",
  gutter = "50px",
  maxWidth = "1024px"
}) {
  let columnDivs = React.useMemo(
    () => Array.from({
      length: typeof columns === "number" ? columns : MAX_COLUMNS
    }).map((_, index) => /* @__PURE__ */ jsx(Column, {
      color
    }, index)),
    [columns, color]
  );
  let gridNodes = /* @__PURE__ */ jsx(Grid, {
    gap,
    gutter,
    maxWidth,
    columns,
    children: columnDivs
  });
  return /* @__PURE__ */ jsxs(Fragment, {
    children: [
      /* @__PURE__ */ jsx(Global, {
        styles: {
          [`#root`]: {
            position: "relative",
            zIndex: 0
          }
        }
      }),
      /* @__PURE__ */ jsx(Wrapper, {
        "data-addon-id": ADDON_ID,
        "data-visible": visible,
        children: gridNodes
      })
    ]
  });
}

// src/Grids.tsx
const { Fragment:Fragment2, jsx:jsx2, jsxs:jsxs2 } = require('react/jsx-runtime');
function ManagerRenderedGrids() {
  let { columns, gap, color, gutter, maxWidth, disable } = useParameter(PARAM_KEY, {});
  let [state] = useAddonState(ADDON_ID);
  return /* @__PURE__ */ jsx2(Grids, {
    columns,
    color,
    gap,
    visible: disable != null ? !disable : state?.visible ?? false,
    gutter,
    maxWidth
  });
}
var styleCache = /* @__PURE__ */ new WeakMap();
var ManagerRenderedGridsContainer = React2.memo(
  function ManagerRenderedGridsContainer2() {
    let previewIframe = document.querySelector(
      "#storybook-preview-iframe"
    );
    if (!previewIframe)
      return null;
    let iframeDocument = previewIframe.contentWindow?.document;
    if (!iframeDocument)
      return null;
    let head = iframeDocument.head;
    if (!head || !iframeDocument.body)
      return null;
    if (!styleCache.has(head))
      styleCache.set(
        head,
        createCache({
          key: ADDON_ID,
          container: head
        })
      );
    return createPortal(
      /* @__PURE__ */ jsx2(CacheProvider, {
        value: styleCache.get(head),
        children: /* @__PURE__ */ jsx2(ManagerRenderedGrids, {})
      }),
      iframeDocument.body
    );
  }
);
var withGrid = (StoryFn, context) => {
  let { grid: gridParams } = context.parameters;
  return /* @__PURE__ */ jsxs2(Fragment2, {
    children: [
      StoryFn(),
      gridParams != null && gridParams.disable !== true && /* @__PURE__ */ jsx2(Grids, {
        visible: true,
        ...gridParams
      })
    ]
  });
};

// src/chromatic.ts
var parameters = {
  [PARAM_KEY]: {}
};
var decorators = isChromatic() ? [withGrid] : [];


exports.decorators = decorators;
exports.parameters = parameters;