storybook-vrhythm 0.0.4 → 0.2.0

package/README.md

@@ -1,81 +1,151 @@
-[![Last Commit][last-commit-badge]][last-commit]
-[![Travis][build-badge]][build]
+# 📐 storybook-vrhythm
+
 [![npm package][npm-badge]][npm]
+[![License: MIT][license-badge]][license]
+[![Bundle Size](https://img.shields.io/bundlephobia/minzip/storybook-vrhythm)](https://bundlephobia.com/package/storybook-vrhythm)
 
-[last-commit-badge]: https://img.shields.io/github/last-commit/jmlweb/storybook-vrhythm.svg
-[last-commit]: https://github.com/jmlweb/storybook-vrhythm
-[build-badge]: https://img.shields.io/travis/jmlweb/storybook-vrhythm/master.png?style=flat-square
-[build]: https://travis-ci.org/jmlweb/storybook-vrhythm
-[npm-badge]: https://img.shields.io/npm/v/storybook-vrhythm.png?style=flat-square
-[npm]: https://www.npmjs.org/package/storybook-vrhythm
+**A Storybook decorator that overlays vertical rhythm guide lines on your stories.**
+Verify that your components align to a baseline grid — with zero effort.
+
+![Vertical rhythm overlay example](storybook-vrhythm.jpg)
+
+## ✨ Features
+
+- 🎯 **Framework agnostic** — Works with React, Vue, Angular, Svelte, and any Storybook-supported framework
+- 🎨 **Fully customizable** — Color, line height, offset, and visibility per story
+- 🪶 **Lightweight** — Pure CSS overlay using `linear-gradient` (no images, no canvas)
+- 🖱️ **Non-intrusive** — Overlay doesn't interfere with pointer events
+- ⚡ **Zero config** — Works out of the box with sensible defaults
+
+## 📦 Installation
+
+<details open>
+<summary><strong>pnpm</strong></summary>
+
+```bash
+pnpm add -D storybook-vrhythm
+```
+
+</details>
+
+<details>
+<summary><strong>npm</strong></summary>
+
+```bash
+npm install --save-dev storybook-vrhythm
+```
+
+</details>
 
-# Storybook Vertical Rhythm Decorator
+<details>
+<summary><strong>yarn</strong></summary>
 
-Take an eye over the vertical rhythm of your stories with this decorator.
+```bash
+yarn add -D storybook-vrhythm
+```
+
+</details>
 
-It should work with any framework/library, however it's only tested in a React environment for the moment.
+## 🚀 Usage
 
-![](storybook-vrhythm.jpg)
+This package is a **Storybook preset addon**: you can register it in `main` (recommended) or add the decorator manually in `preview`.
 
-## Installation
+**Requirements:** Node.js 18+ and Storybook 8 or newer (see `peerDependencies` in `package.json`).
 
-`npm install storybook-vrhythm --development`
+### Register as an addon (recommended)
 
-or
+Add the package to `addons` in `.storybook/main.ts` (or `main.js`). Storybook loads the preset and applies the vertical rhythm decorator in the preview iframe.
 
-`yarn add -D storybook-rhythm`
+```typescript
+import type { StorybookConfig } from '@storybook/react-vite'; // or your framework package
 
-## Using the decorator globally
+const config = {
+  addons: ['storybook-vrhythm'],
+} satisfies StorybookConfig;
 
-```js
-import { addDecorator, addParameters } from '@storybook/react'; // or Vue, Angular...
-import StorybookVRhythm from 'storybook-vrhythm';
+export default config;
+```
 
-addDecorator(StorybookVRhythm);
+Optional defaults and overrides still use `parameters.vrhythm` in `.storybook/preview.ts`:
 
-addParameters({
+```typescript
+export const parameters = {
   vrhythm: {
-    color: 'rgba(178,86,18,0.5)',
+    color: 'rgba(178, 86, 18, 0.5)',
     lineHeight: '16px',
     offset: 0,
   },
-});
+};
 ```
 
-## Using the decorator in your stories
+### Manual decorator
+
+If you prefer not to use the preset, import the decorator in `.storybook/preview.ts`:
 
-```jsx
-const stories = storiesOf('components|MyComponent', module);
+```typescript
+import { withVRhythm } from 'storybook-vrhythm';
 
-stories.addParameters({ vrhythm: { hide: true } });
+export const decorators = [withVRhythm];
+
+export const parameters = {
+  vrhythm: {
+    color: 'rgba(178, 86, 18, 0.5)',
+    lineHeight: '16px',
+    offset: 0,
+  },
+};
 ```
 
-## Available options
+### Per-story configuration
 
-### color
+Override or hide the overlay on individual stories:
 
-Any valid color for the lines (examples: #ff0000, rgba(0,0,0,0.3))
+```typescript
+export const MyStory = {
+  parameters: {
+    vrhythm: {
+      hide: true,
+    },
+  },
+};
+```
 
-default: `'rgb(204, 204, 204)'`
+## ⚙️ Options
 
-### lineHeight
+| Option       | Type               | Default                | Description                                |
+| ------------ | ------------------ | ---------------------- | ------------------------------------------ |
+| `color`      | `string`           | `'rgb(204, 204, 204)'` | Any valid CSS color for the guide lines    |
+| `lineHeight` | `string \| number` | `'16px'`               | Baseline grid height (e.g. `16px`, `1rem`) |
+| `offset`     | `string \| number` | `0`                    | Vertical offset from the top               |
+| `hide`       | `boolean`          | `false`                | Hide the overlay for specific stories      |
 
-Any valid value for the lineHeight of your system (examples: 16px, 1rem...)
+## 💡 Why vertical rhythm?
 
-default: `16px`
+Vertical rhythm is the practice of spacing elements on a page based on a consistent baseline grid. It improves readability and creates a sense of visual harmony. This decorator lets you **see** the grid while developing, so you can catch alignment issues before they reach production.
 
-### offset
+## 🛠️ Development
 
-The offset from the top, in case your component is wrapped or whatever.
+```bash
+pnpm install    # Install dependencies
+pnpm build      # Build the package
+pnpm test       # Run tests
+pnpm lint       # Lint source code
+pnpm format     # Format with Prettier
+```
+
+## 🤝 Contributing
 
-default: `0`
+Contributions are welcome! Feel free to open an [issue](https://github.com/jmlweb/storybook-vrhythm/issues) or submit a pull request.
 
-### hide
+## 🙏 Inspiration
 
-Useful to hide the decorator in some stories
+[Baseliner](https://jpedroribeiro.com/2015/08/baseliner-my-first-chrome-extension/) — a Chrome extension by JP Ribeiro for overlaying baseline grids.
 
-default: `false`
+## 📄 License
 
-## Inspiration
+[MIT](LICENSE)
 
-[Baseliner extension](https://jpedroribeiro.com/2015/08/baseliner-my-first-chrome-extension/)
+[npm-badge]: https://img.shields.io/npm/v/storybook-vrhythm.svg
+[npm]: https://www.npmjs.org/package/storybook-vrhythm
+[license-badge]: https://img.shields.io/badge/license-MIT-blue.svg
+[license]: https://github.com/jmlweb/storybook-vrhythm/blob/master/LICENSE

package/dist/index.d.ts

@@ -1,2 +1,15 @@
-declare const _default: (...args: any) => any;
-export default _default;
+import { DecoratorFunction } from '@storybook/types';
+
+interface StyleProps {
+    color?: string;
+    lineHeight?: string | number;
+    offset?: string | number;
+}
+interface ConfigProps {
+    hide?: boolean;
+}
+
+type VRhythmParams = StyleProps & ConfigProps;
+declare const withVRhythm: DecoratorFunction;
+
+export { type ConfigProps, type StyleProps, type VRhythmParams, withVRhythm };

package/dist/index.js

@@ -1,8 +1,76 @@
+// src/constants.ts
+var DEFAULT_COLOR = "rgb(204, 204, 204)";
+var DEFAULT_LINE_HEIGHT = "16px";
+var DEFAULT_OFFSET = 0;
+var PARENT_SELECTOR = "body";
+var DIV_ID = "storybook-rhythm";
 
-'use strict'
+// src/getStyle.ts
+var getStyle = ({
+  color = DEFAULT_COLOR,
+  lineHeight = DEFAULT_LINE_HEIGHT,
+  offset = DEFAULT_OFFSET
+}) => ({
+  position: "absolute",
+  top: offset,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  background: `linear-gradient(${color} 1px, transparent 1px) left top / 1px ${lineHeight}`,
+  pointerEvents: "none"
+});
 
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./storybook-vrhythm.cjs.production.min.js')
-} else {
-  module.exports = require('./storybook-vrhythm.cjs.development.js')
+// src/utils.ts
+function createElement() {
+  const element = document.createElement("div");
+  element.setAttribute("id", DIV_ID);
+  return element;
 }
+function getOrCreateElement() {
+  const existing = document.getElementById(DIV_ID);
+  if (existing) {
+    return existing;
+  }
+  return createElement();
+}
+function removeElement() {
+  const element = document.getElementById(DIV_ID);
+  if (element) {
+    element.remove();
+  }
+}
+function injectStyle(style) {
+  const element = getOrCreateElement();
+  Object.assign(element.style, style);
+  if (!element.parentNode) {
+    const parent = document.querySelector(PARENT_SELECTOR);
+    if (parent) {
+      parent.append(element);
+    }
+  }
+}
+
+// src/index.ts
+var DEFAULT_PARAMS = {
+  hide: false,
+  color: DEFAULT_COLOR,
+  lineHeight: DEFAULT_LINE_HEIGHT,
+  offset: DEFAULT_OFFSET
+};
+var withVRhythm = (storyFn, context) => {
+  const params = {
+    ...DEFAULT_PARAMS,
+    ...context.parameters?.vrhythm
+  };
+  if (params.hide) {
+    removeElement();
+  } else {
+    const style = getStyle(params);
+    injectStyle(style);
+  }
+  return storyFn(context);
+};
+
+export { withVRhythm };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/constants.ts","../src/getStyle.ts","../src/utils.ts","../src/index.ts"],"names":[],"mappings":";AAAO,IAAM,aAAA,GAAgB,oBAAA;AACtB,IAAM,mBAAA,GAAsB,MAAA;AAC5B,IAAM,cAAA,GAAiB,CAAA;AACvB,IAAM,eAAA,GAAkB,MAAA;AACxB,IAAM,MAAA,GAAS,kBAAA;;;ACGf,IAAM,WAAW,CAAC;AAAA,EACvB,KAAA,GAAQ,aAAA;AAAA,EACR,UAAA,GAAa,mBAAA;AAAA,EACb,MAAA,GAAS;AACX,CAAA,MAA6B;AAAA,EAC3B,QAAA,EAAU,UAAA;AAAA,EACV,GAAA,EAAK,MAAA;AAAA,EACL,IAAA,EAAM,CAAA;AAAA,EACN,KAAA,EAAO,CAAA;AAAA,EACP,MAAA,EAAQ,CAAA;AAAA,EACR,UAAA,EAAY,CAAA,gBAAA,EAAmB,KAAK,CAAA,sCAAA,EAAyC,UAAU,CAAA,CAAA;AAAA,EACvF,aAAA,EAAe;AACjB,CAAA,CAAA;;;AChBA,SAAS,aAAA,GAAgC;AACvC,EAAA,MAAM,OAAA,GAAU,QAAA,CAAS,aAAA,CAAc,KAAK,CAAA;AAC5C,EAAA,OAAA,CAAQ,YAAA,CAAa,MAAM,MAAM,CAAA;AACjC,EAAA,OAAO,OAAA;AACT;AAEA,SAAS,kBAAA,GAAqC;AAC5C,EAAA,MAAM,QAAA,GAAW,QAAA,CAAS,cAAA,CAAe,MAAM,CAAA;AAC/C,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,OAAO,QAAA;AAAA,EACT;AACA,EAAA,OAAO,aAAA,EAAc;AACvB;AAEO,SAAS,aAAA,GAAsB;AACpC,EAAA,MAAM,OAAA,GAAU,QAAA,CAAS,cAAA,CAAe,MAAM,CAAA;AAC9C,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,OAAA,CAAQ,MAAA,EAAO;AAAA,EACjB;AACF;AAEO,SAAS,YAAY,KAAA,EAAuB;AACjD,EAAA,MAAM,UAAU,kBAAA,EAAmB;AACnC,EAAA,MAAA,CAAO,MAAA,CAAO,OAAA,CAAQ,KAAA,EAAO,KAAK,CAAA;AAElC,EAAA,IAAI,CAAC,QAAQ,UAAA,EAAY;AACvB,IAAA,MAAM,MAAA,GAAS,QAAA,CAAS,aAAA,CAAc,eAAe,CAAA;AACrD,IAAA,IAAI,MAAA,EAAQ;AACV,MAAA,MAAA,CAAO,OAAO,OAAO,CAAA;AAAA,IACvB;AAAA,EACF;AACF;;;ACrBA,IAAM,cAAA,GAA0C;AAAA,EAC9C,IAAA,EAAM,KAAA;AAAA,EACN,KAAA,EAAO,aAAA;AAAA,EACP,UAAA,EAAY,mBAAA;AAAA,EACZ,MAAA,EAAQ;AACV,CAAA;AAEO,IAAM,WAAA,GAAiC,CAAC,OAAA,EAAS,OAAA,KAAY;AAClE,EAAA,MAAM,MAAA,GAAkC;AAAA,IACtC,GAAG,cAAA;AAAA,IACH,GAAI,QAAQ,UAAA,EAAwD;AAAA,GACtE;AAEA,EAAA,IAAI,OAAO,IAAA,EAAM;AACf,IAAA,aAAA,EAAc;AAAA,EAChB,CAAA,MAAO;AACL,IAAA,MAAM,KAAA,GAAQ,SAAS,MAAM,CAAA;AAC7B,IAAA,WAAA,CAAY,KAAK,CAAA;AAAA,EACnB;AAEA,EAAA,OAAO,QAAQ,OAAO,CAAA;AACxB","file":"index.js","sourcesContent":["export const DEFAULT_COLOR = 'rgb(204, 204, 204)';\nexport const DEFAULT_LINE_HEIGHT = '16px';\nexport const DEFAULT_OFFSET = 0;\nexport const PARENT_SELECTOR = 'body';\nexport const DIV_ID = 'storybook-rhythm';\n","import { StyleObj, StyleProps } from './types';\nimport {\n  DEFAULT_COLOR,\n  DEFAULT_LINE_HEIGHT,\n  DEFAULT_OFFSET,\n} from './constants';\n\nexport const getStyle = ({\n  color = DEFAULT_COLOR,\n  lineHeight = DEFAULT_LINE_HEIGHT,\n  offset = DEFAULT_OFFSET,\n}: StyleProps): StyleObj => ({\n  position: 'absolute',\n  top: offset,\n  left: 0,\n  right: 0,\n  bottom: 0,\n  background: `linear-gradient(${color} 1px, transparent 1px) left top / 1px ${lineHeight}`,\n  pointerEvents: 'none',\n});\n","import { PARENT_SELECTOR, DIV_ID } from './constants';\nimport { StyleObj } from './types';\n\nfunction createElement(): HTMLDivElement {\n  const element = document.createElement('div');\n  element.setAttribute('id', DIV_ID);\n  return element;\n}\n\nfunction getOrCreateElement(): HTMLDivElement {\n  const existing = document.getElementById(DIV_ID) as HTMLDivElement | null;\n  if (existing) {\n    return existing;\n  }\n  return createElement();\n}\n\nexport function removeElement(): void {\n  const element = document.getElementById(DIV_ID);\n  if (element) {\n    element.remove();\n  }\n}\n\nexport function injectStyle(style: StyleObj): void {\n  const element = getOrCreateElement();\n  Object.assign(element.style, style);\n\n  if (!element.parentNode) {\n    const parent = document.querySelector(PARENT_SELECTOR);\n    if (parent) {\n      parent.append(element);\n    }\n  }\n}\n","import type { DecoratorFunction } from '@storybook/types';\n\nimport { getStyle } from './getStyle';\nimport { StyleProps, ConfigProps } from './types';\nimport { injectStyle, removeElement } from './utils';\nimport {\n  DEFAULT_COLOR,\n  DEFAULT_LINE_HEIGHT,\n  DEFAULT_OFFSET,\n} from './constants';\n\nexport type VRhythmParams = StyleProps & ConfigProps;\n\nconst DEFAULT_PARAMS: Required<VRhythmParams> = {\n  hide: false,\n  color: DEFAULT_COLOR,\n  lineHeight: DEFAULT_LINE_HEIGHT,\n  offset: DEFAULT_OFFSET,\n};\n\nexport const withVRhythm: DecoratorFunction = (storyFn, context) => {\n  const params: Required<VRhythmParams> = {\n    ...DEFAULT_PARAMS,\n    ...(context.parameters as { vrhythm?: VRhythmParams } | undefined)?.vrhythm,\n  };\n\n  if (params.hide) {\n    removeElement();\n  } else {\n    const style = getStyle(params);\n    injectStyle(style);\n  }\n\n  return storyFn(context);\n};\n\nexport type { StyleProps, ConfigProps } from './types';\n"]}

package/dist/preset.js

@@ -0,0 +1,11 @@
+// src/preset.ts
+import { dirname, join } from "path";
+import { fileURLToPath } from "url";
+var dir = dirname(fileURLToPath(import.meta.url));
+function previewAnnotations(entry = []) {
+  return [...entry, join(dir, "preview.js")];
+}
+export {
+  previewAnnotations
+};
+//# sourceMappingURL=preset.js.map

package/dist/preset.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/preset.ts"],"sourcesContent":["import { dirname, join } from 'node:path';\nimport { fileURLToPath } from 'node:url';\n\nconst dir = dirname(fileURLToPath(import.meta.url));\n\nexport function previewAnnotations(entry: string[] = []) {\n  return [...entry, join(dir, 'preview.js')];\n}\n"],"mappings":";AAAA,SAAS,SAAS,YAAY;AAC9B,SAAS,qBAAqB;AAE9B,IAAM,MAAM,QAAQ,cAAc,YAAY,GAAG,CAAC;AAE3C,SAAS,mBAAmB,QAAkB,CAAC,GAAG;AACvD,SAAO,CAAC,GAAG,OAAO,KAAK,KAAK,YAAY,CAAC;AAC3C;","names":[]}

package/dist/preview.d.ts

@@ -0,0 +1,5 @@
+import { ProjectAnnotations, Renderer } from '@storybook/types';
+
+declare const preview: ProjectAnnotations<Renderer>;
+
+export { preview as default };

package/dist/preview.js

@@ -0,0 +1,82 @@
+// src/constants.ts
+var DEFAULT_COLOR = "rgb(204, 204, 204)";
+var DEFAULT_LINE_HEIGHT = "16px";
+var DEFAULT_OFFSET = 0;
+var PARENT_SELECTOR = "body";
+var DIV_ID = "storybook-rhythm";
+
+// src/getStyle.ts
+var getStyle = ({
+  color = DEFAULT_COLOR,
+  lineHeight = DEFAULT_LINE_HEIGHT,
+  offset = DEFAULT_OFFSET
+}) => ({
+  position: "absolute",
+  top: offset,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  background: `linear-gradient(${color} 1px, transparent 1px) left top / 1px ${lineHeight}`,
+  pointerEvents: "none"
+});
+
+// src/utils.ts
+function createElement() {
+  const element = document.createElement("div");
+  element.setAttribute("id", DIV_ID);
+  return element;
+}
+function getOrCreateElement() {
+  const existing = document.getElementById(DIV_ID);
+  if (existing) {
+    return existing;
+  }
+  return createElement();
+}
+function removeElement() {
+  const element = document.getElementById(DIV_ID);
+  if (element) {
+    element.remove();
+  }
+}
+function injectStyle(style) {
+  const element = getOrCreateElement();
+  Object.assign(element.style, style);
+  if (!element.parentNode) {
+    const parent = document.querySelector(PARENT_SELECTOR);
+    if (parent) {
+      parent.append(element);
+    }
+  }
+}
+
+// src/index.ts
+var DEFAULT_PARAMS = {
+  hide: false,
+  color: DEFAULT_COLOR,
+  lineHeight: DEFAULT_LINE_HEIGHT,
+  offset: DEFAULT_OFFSET
+};
+var withVRhythm = (storyFn, context) => {
+  const params = {
+    ...DEFAULT_PARAMS,
+    ...context.parameters?.vrhythm
+  };
+  if (params.hide) {
+    removeElement();
+  } else {
+    const style = getStyle(params);
+    injectStyle(style);
+  }
+  return storyFn(context);
+};
+
+// src/preview.ts
+var preview = {
+  decorators: [withVRhythm]
+};
+var preview_default = preview;
+
+export { preview_default as default };
+//# sourceMappingURL=preview.js.map
+//# sourceMappingURL=preview.js.map

package/dist/preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/constants.ts","../src/getStyle.ts","../src/utils.ts","../src/index.ts","../src/preview.ts"],"names":[],"mappings":";AAAO,IAAM,aAAA,GAAgB,oBAAA;AACtB,IAAM,mBAAA,GAAsB,MAAA;AAC5B,IAAM,cAAA,GAAiB,CAAA;AACvB,IAAM,eAAA,GAAkB,MAAA;AACxB,IAAM,MAAA,GAAS,kBAAA;;;ACGf,IAAM,WAAW,CAAC;AAAA,EACvB,KAAA,GAAQ,aAAA;AAAA,EACR,UAAA,GAAa,mBAAA;AAAA,EACb,MAAA,GAAS;AACX,CAAA,MAA6B;AAAA,EAC3B,QAAA,EAAU,UAAA;AAAA,EACV,GAAA,EAAK,MAAA;AAAA,EACL,IAAA,EAAM,CAAA;AAAA,EACN,KAAA,EAAO,CAAA;AAAA,EACP,MAAA,EAAQ,CAAA;AAAA,EACR,UAAA,EAAY,CAAA,gBAAA,EAAmB,KAAK,CAAA,sCAAA,EAAyC,UAAU,CAAA,CAAA;AAAA,EACvF,aAAA,EAAe;AACjB,CAAA,CAAA;;;AChBA,SAAS,aAAA,GAAgC;AACvC,EAAA,MAAM,OAAA,GAAU,QAAA,CAAS,aAAA,CAAc,KAAK,CAAA;AAC5C,EAAA,OAAA,CAAQ,YAAA,CAAa,MAAM,MAAM,CAAA;AACjC,EAAA,OAAO,OAAA;AACT;AAEA,SAAS,kBAAA,GAAqC;AAC5C,EAAA,MAAM,QAAA,GAAW,QAAA,CAAS,cAAA,CAAe,MAAM,CAAA;AAC/C,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,OAAO,QAAA;AAAA,EACT;AACA,EAAA,OAAO,aAAA,EAAc;AACvB;AAEO,SAAS,aAAA,GAAsB;AACpC,EAAA,MAAM,OAAA,GAAU,QAAA,CAAS,cAAA,CAAe,MAAM,CAAA;AAC9C,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,OAAA,CAAQ,MAAA,EAAO;AAAA,EACjB;AACF;AAEO,SAAS,YAAY,KAAA,EAAuB;AACjD,EAAA,MAAM,UAAU,kBAAA,EAAmB;AACnC,EAAA,MAAA,CAAO,MAAA,CAAO,OAAA,CAAQ,KAAA,EAAO,KAAK,CAAA;AAElC,EAAA,IAAI,CAAC,QAAQ,UAAA,EAAY;AACvB,IAAA,MAAM,MAAA,GAAS,QAAA,CAAS,aAAA,CAAc,eAAe,CAAA;AACrD,IAAA,IAAI,MAAA,EAAQ;AACV,MAAA,MAAA,CAAO,OAAO,OAAO,CAAA;AAAA,IACvB;AAAA,EACF;AACF;;;ACrBA,IAAM,cAAA,GAA0C;AAAA,EAC9C,IAAA,EAAM,KAAA;AAAA,EACN,KAAA,EAAO,aAAA;AAAA,EACP,UAAA,EAAY,mBAAA;AAAA,EACZ,MAAA,EAAQ;AACV,CAAA;AAEO,IAAM,WAAA,GAAiC,CAAC,OAAA,EAAS,OAAA,KAAY;AAClE,EAAA,MAAM,MAAA,GAAkC;AAAA,IACtC,GAAG,cAAA;AAAA,IACH,GAAI,QAAQ,UAAA,EAAwD;AAAA,GACtE;AAEA,EAAA,IAAI,OAAO,IAAA,EAAM;AACf,IAAA,aAAA,EAAc;AAAA,EAChB,CAAA,MAAO;AACL,IAAA,MAAM,KAAA,GAAQ,SAAS,MAAM,CAAA;AAC7B,IAAA,WAAA,CAAY,KAAK,CAAA;AAAA,EACnB;AAEA,EAAA,OAAO,QAAQ,OAAO,CAAA;AACxB,CAAA;;;AC9BA,IAAM,OAAA,GAAwC;AAAA,EAC5C,UAAA,EAAY,CAAC,WAAW;AAC1B,CAAA;AAEA,IAAO,eAAA,GAAQ","file":"preview.js","sourcesContent":["export const DEFAULT_COLOR = 'rgb(204, 204, 204)';\nexport const DEFAULT_LINE_HEIGHT = '16px';\nexport const DEFAULT_OFFSET = 0;\nexport const PARENT_SELECTOR = 'body';\nexport const DIV_ID = 'storybook-rhythm';\n","import { StyleObj, StyleProps } from './types';\nimport {\n  DEFAULT_COLOR,\n  DEFAULT_LINE_HEIGHT,\n  DEFAULT_OFFSET,\n} from './constants';\n\nexport const getStyle = ({\n  color = DEFAULT_COLOR,\n  lineHeight = DEFAULT_LINE_HEIGHT,\n  offset = DEFAULT_OFFSET,\n}: StyleProps): StyleObj => ({\n  position: 'absolute',\n  top: offset,\n  left: 0,\n  right: 0,\n  bottom: 0,\n  background: `linear-gradient(${color} 1px, transparent 1px) left top / 1px ${lineHeight}`,\n  pointerEvents: 'none',\n});\n","import { PARENT_SELECTOR, DIV_ID } from './constants';\nimport { StyleObj } from './types';\n\nfunction createElement(): HTMLDivElement {\n  const element = document.createElement('div');\n  element.setAttribute('id', DIV_ID);\n  return element;\n}\n\nfunction getOrCreateElement(): HTMLDivElement {\n  const existing = document.getElementById(DIV_ID) as HTMLDivElement | null;\n  if (existing) {\n    return existing;\n  }\n  return createElement();\n}\n\nexport function removeElement(): void {\n  const element = document.getElementById(DIV_ID);\n  if (element) {\n    element.remove();\n  }\n}\n\nexport function injectStyle(style: StyleObj): void {\n  const element = getOrCreateElement();\n  Object.assign(element.style, style);\n\n  if (!element.parentNode) {\n    const parent = document.querySelector(PARENT_SELECTOR);\n    if (parent) {\n      parent.append(element);\n    }\n  }\n}\n","import type { DecoratorFunction } from '@storybook/types';\n\nimport { getStyle } from './getStyle';\nimport { StyleProps, ConfigProps } from './types';\nimport { injectStyle, removeElement } from './utils';\nimport {\n  DEFAULT_COLOR,\n  DEFAULT_LINE_HEIGHT,\n  DEFAULT_OFFSET,\n} from './constants';\n\nexport type VRhythmParams = StyleProps & ConfigProps;\n\nconst DEFAULT_PARAMS: Required<VRhythmParams> = {\n  hide: false,\n  color: DEFAULT_COLOR,\n  lineHeight: DEFAULT_LINE_HEIGHT,\n  offset: DEFAULT_OFFSET,\n};\n\nexport const withVRhythm: DecoratorFunction = (storyFn, context) => {\n  const params: Required<VRhythmParams> = {\n    ...DEFAULT_PARAMS,\n    ...(context.parameters as { vrhythm?: VRhythmParams } | undefined)?.vrhythm,\n  };\n\n  if (params.hide) {\n    removeElement();\n  } else {\n    const style = getStyle(params);\n    injectStyle(style);\n  }\n\n  return storyFn(context);\n};\n\nexport type { StyleProps, ConfigProps } from './types';\n","import type { ProjectAnnotations, Renderer } from '@storybook/types';\n\nimport { withVRhythm } from './index';\n\nconst preview: ProjectAnnotations<Renderer> = {\n  decorators: [withVRhythm],\n};\n\nexport default preview;\n"]}

package/package.json

@@ -1,24 +1,65 @@
 {
   "name": "storybook-vrhythm",
-  "version": "0.0.4",
-  "description": "Storybook Vertical Rhythm Decorator",
+  "version": "0.2.0",
+  "description": "Storybook decorator and preset addon for vertical rhythm baseline guides",
+  "license": "MIT",
+  "author": "jmlweb",
   "homepage": "https://github.com/jmlweb/storybook-vrhythm",
-  "main": "dist/index.js",
-  "umd:main": "dist/storybook-vrhythm.umd.production.js",
-  "module": "dist/storybook-vrhythm.es.production.js",
-  "typings": "dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jmlweb/storybook-vrhythm.git"
+  },
+  "keywords": [
+    "storybook-addon",
+    "style",
+    "debug",
+    "layout",
+    "baseline",
+    "vertical-rhythm",
+    "storybook",
+    "decorator"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./preview": {
+      "types": "./dist/preview.d.ts",
+      "import": "./dist/preview.js",
+      "default": "./dist/preview.js"
+    },
+    "./preset": "./dist/preset.js",
+    "./package.json": "./package.json"
+  },
   "files": [
-    "dist"
+    "dist",
+    "preset.js"
   ],
-  "scripts": {
-    "start": "tsdx watch",
-    "build": "tsdx build",
-    "test": "tsdx test --env=jsdom"
+  "engines": {
+    "node": ">=20"
+  },
+  "peerDependencies": {
+    "storybook": "^8.0.0 || ^9.0.0 || ^10.0.0"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "pretty-quick --staged"
-    }
+  "storybook": {
+    "displayName": "Vertical rhythm",
+    "supportedFrameworks": [
+      "react",
+      "vue",
+      "angular",
+      "web-components",
+      "ember",
+      "html",
+      "svelte",
+      "preact",
+      "react-native"
+    ]
   },
   "prettier": {
     "printWidth": 80,
@@ -27,16 +68,24 @@
     "trailingComma": "es5"
   },
   "devDependencies": {
-    "@types/jest": "^25.1.2",
-    "husky": "^4.2.3",
-    "prettier": "^1.19.1",
-    "pretty-quick": "^2.0.1",
-    "react": "^16.12.0",
-    "tsdx": "^0.12.3",
-    "tslib": "^1.10.0",
-    "typescript": "^3.7.5"
+    "@storybook/types": "^8.6.14",
+    "@types/node": "^25.5.0",
+    "@vitest/coverage-v8": "^4.1.2",
+    "jsdom": "^29.0.1",
+    "prettier": "^3.5.3",
+    "storybook": "^8.6.18",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.2"
   },
-  "dependencies": {
-    "@storybook/addons": "5.3.13"
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "lint": "tsc --noEmit",
+    "format": "prettier --write 'src/**/*.ts' 'test/**/*.ts'",
+    "format:check": "prettier --check 'src/**/*.ts' 'test/**/*.ts'"
   }
-}
+}

package/preset.js

@@ -0,0 +1 @@
+export * from './dist/preset.js';

package/dist/constants.d.ts

@@ -1,5 +0,0 @@
-export declare const DEFAULT_COLOR = "rgb(204, 204, 204)";
-export declare const DEFAULT_LINE_HEIGHT = "16px";
-export declare const DEFAULT_OFFSET = 0;
-export declare const PARENT_SELECTOR = "body";
-export declare const DIV_ID = "storybook-rhythm";

package/dist/getStyle.d.ts

@@ -1,3 +0,0 @@
-import { StyleObj, StyleProps } from './types';
-declare const getStyle: ({ color, lineHeight, offset, }: StyleProps) => StyleObj;
-export default getStyle;

package/dist/storybook-vrhythm.cjs.development.js

@@ -1,77 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var addons = require('@storybook/addons');
-
-var DEFAULT_COLOR = 'rgb(204, 204, 204)';
-var DEFAULT_LINE_HEIGHT = '16px';
-var DEFAULT_OFFSET = 0;
-var PARENT_SELECTOR = 'body';
-var DIV_ID = 'storybook-rhythm';
-
-var getStyle = function getStyle(_ref) {
-  var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? DEFAULT_COLOR : _ref$color,
-      _ref$lineHeight = _ref.lineHeight,
-      lineHeight = _ref$lineHeight === void 0 ? DEFAULT_LINE_HEIGHT : _ref$lineHeight,
-      _ref$offset = _ref.offset,
-      offset = _ref$offset === void 0 ? DEFAULT_OFFSET : _ref$offset;
-  return {
-    position: 'absolute',
-    top: offset,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    background: "linear-gradient(" + color + " 1px, transparent 1px) left top / 1px " + lineHeight,
-    pointerEvents: 'none'
-  };
-};
-
-function createElement() {
-  var element = document.createElement('div');
-  element.setAttribute('id', DIV_ID);
-  return element;
-}
-
-function getOrCreateElement() {
-  var elementOnDom = document.getElementById(DIV_ID);
-
-  if (elementOnDom) {
-    return elementOnDom;
-  }
-
-  return createElement();
-}
-
-function removeElement() {
-  var elementOnDom = document.getElementById(DIV_ID);
-  elementOnDom && elementOnDom.parentNode && elementOnDom.parentNode.removeChild(elementOnDom);
-}
-function injectStyle(style) {
-  var element = getOrCreateElement();
-  Object.assign(element.style, style);
-  var parent = document.querySelector(PARENT_SELECTOR);
-  parent && parent.append(element);
-}
-
-var index = /*#__PURE__*/
-addons.makeDecorator({
-  name: 'withVRhythm',
-  parameterName: 'vrhythm',
-  wrapper: function wrapper(getStory, context, _ref) {
-    var parameters = _ref.parameters;
-
-    if (parameters.hide) {
-      removeElement();
-    } else {
-      var style = getStyle(parameters);
-      injectStyle(style);
-    }
-
-    return getStory(context);
-  }
-});
-
-exports.default = index;
-//# sourceMappingURL=storybook-vrhythm.cjs.development.js.map

package/dist/storybook-vrhythm.cjs.development.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"storybook-vrhythm.cjs.development.js","sources":["../src/constants.ts","../src/getStyle.ts","../src/utils.ts","../src/index.tsx"],"sourcesContent":["export const DEFAULT_COLOR = 'rgb(204, 204, 204)';\nexport const DEFAULT_LINE_HEIGHT = '16px';\nexport const DEFAULT_OFFSET = 0;\nexport const PARENT_SELECTOR = 'body';\nexport const DIV_ID = 'storybook-rhythm';\n","import { StyleObj, StyleProps } from './types';\nimport {\n  DEFAULT_COLOR,\n  DEFAULT_LINE_HEIGHT,\n  DEFAULT_OFFSET,\n} from './constants';\n\nconst getStyle = ({\n  color = DEFAULT_COLOR,\n  lineHeight = DEFAULT_LINE_HEIGHT,\n  offset = DEFAULT_OFFSET,\n}: StyleProps): StyleObj => ({\n  position: 'absolute',\n  top: offset,\n  left: 0,\n  right: 0,\n  bottom: 0,\n  background: `linear-gradient(${color} 1px, transparent 1px) left top / 1px ${lineHeight}`,\n  pointerEvents: 'none',\n});\n\nexport default getStyle;\n","import { PARENT_SELECTOR, DIV_ID } from './constants';\nimport { StyleObj } from './types';\n\nfunction createElement() {\n  const element = document.createElement('div') as HTMLDivElement;\n  element.setAttribute('id', DIV_ID);\n  return element;\n}\n\nfunction getOrCreateElement() {\n  const elementOnDom = document.getElementById(DIV_ID);\n  if (elementOnDom) {\n    return elementOnDom;\n  }\n  return createElement();\n}\n\nexport function removeElement() {\n  const elementOnDom = document.getElementById(DIV_ID);\n  elementOnDom &&\n    elementOnDom.parentNode &&\n    elementOnDom.parentNode.removeChild(elementOnDom);\n}\n\nexport function injectStyle(style: StyleObj) {\n  const element = getOrCreateElement();\n  Object.assign(element.style, style);\n  const parent = document.querySelector(PARENT_SELECTOR);\n  parent && parent.append(element);\n}\n","import { makeDecorator } from '@storybook/addons';\n\nimport getStyle from './getStyle';\nimport { StyleProps, ConfigProps } from './types';\nimport { injectStyle, removeElement } from './utils';\n\ntype Params = StyleProps & ConfigProps;\n\nexport default makeDecorator({\n  name: 'withVRhythm',\n  parameterName: 'vrhythm',\n  wrapper: (getStory, context, { parameters }: { parameters: Params }) => {\n    if (parameters.hide) {\n      removeElement();\n    } else {\n      const style = getStyle(parameters);\n      injectStyle(style);\n    }\n    return getStory(context);\n  },\n});\n"],"names":["DEFAULT_COLOR","DEFAULT_LINE_HEIGHT","DEFAULT_OFFSET","PARENT_SELECTOR","DIV_ID","getStyle","color","lineHeight","offset","position","top","left","right","bottom","background","pointerEvents","createElement","element","document","setAttribute","getOrCreateElement","elementOnDom","getElementById","removeElement","parentNode","removeChild","injectStyle","style","Object","assign","parent","querySelector","append","makeDecorator","name","parameterName","wrapper","getStory","context","parameters","hide"],"mappings":";;;;;;AAAO,IAAMA,aAAa,GAAG,oBAAtB;AACA,IAAMC,mBAAmB,GAAG,MAA5B;AACA,IAAMC,cAAc,GAAG,CAAvB;AACA,IAAMC,eAAe,GAAG,MAAxB;AACA,IAAMC,MAAM,GAAG,kBAAf;;ACGP,IAAMC,QAAQ,GAAG,SAAXA,QAAW;AAAA,wBACfC,KADe;AAAA,MACfA,KADe,2BACPN,aADO;AAAA,6BAEfO,UAFe;AAAA,MAEfA,UAFe,gCAEFN,mBAFE;AAAA,yBAGfO,MAHe;AAAA,MAGfA,MAHe,4BAGNN,cAHM;AAAA,SAIY;AAC3BO,IAAAA,QAAQ,EAAE,UADiB;AAE3BC,IAAAA,GAAG,EAAEF,MAFsB;AAG3BG,IAAAA,IAAI,EAAE,CAHqB;AAI3BC,IAAAA,KAAK,EAAE,CAJoB;AAK3BC,IAAAA,MAAM,EAAE,CALmB;AAM3BC,IAAAA,UAAU,uBAAqBR,KAArB,8CAAmEC,UANlD;AAO3BQ,IAAAA,aAAa,EAAE;AAPY,GAJZ;AAAA,CAAjB;;ACJA,SAASC,aAAT;AACE,MAAMC,OAAO,GAAGC,QAAQ,CAACF,aAAT,CAAuB,KAAvB,CAAhB;AACAC,EAAAA,OAAO,CAACE,YAAR,CAAqB,IAArB,EAA2Bf,MAA3B;AACA,SAAOa,OAAP;AACD;;AAED,SAASG,kBAAT;AACE,MAAMC,YAAY,GAAGH,QAAQ,CAACI,cAAT,CAAwBlB,MAAxB,CAArB;;AACA,MAAIiB,YAAJ,EAAkB;AAChB,WAAOA,YAAP;AACD;;AACD,SAAOL,aAAa,EAApB;AACD;;AAED,SAAgBO;AACd,MAAMF,YAAY,GAAGH,QAAQ,CAACI,cAAT,CAAwBlB,MAAxB,CAArB;AACAiB,EAAAA,YAAY,IACVA,YAAY,CAACG,UADf,IAEEH,YAAY,CAACG,UAAb,CAAwBC,WAAxB,CAAoCJ,YAApC,CAFF;AAGD;AAED,SAAgBK,YAAYC;AAC1B,MAAMV,OAAO,GAAGG,kBAAkB,EAAlC;AACAQ,EAAAA,MAAM,CAACC,MAAP,CAAcZ,OAAO,CAACU,KAAtB,EAA6BA,KAA7B;AACA,MAAMG,MAAM,GAAGZ,QAAQ,CAACa,aAAT,CAAuB5B,eAAvB,CAAf;AACA2B,EAAAA,MAAM,IAAIA,MAAM,CAACE,MAAP,CAAcf,OAAd,CAAV;AACD;;ACrBD,YAAA;AAAegB,oBAAa,CAAC;AAC3BC,EAAAA,IAAI,EAAE,aADqB;AAE3BC,EAAAA,aAAa,EAAE,SAFY;AAG3BC,EAAAA,OAAO,EAAE,iBAACC,QAAD,EAAWC,OAAX;QAAsBC,kBAAAA;;AAC7B,QAAIA,UAAU,CAACC,IAAf,EAAqB;AACnBjB,MAAAA,aAAa;AACd,KAFD,MAEO;AACL,UAAMI,KAAK,GAAGtB,QAAQ,CAACkC,UAAD,CAAtB;AACAb,MAAAA,WAAW,CAACC,KAAD,CAAX;AACD;;AACD,WAAOU,QAAQ,CAACC,OAAD,CAAf;AACD;AAX0B,CAAD,CAA5B;;;;"}

package/dist/storybook-vrhythm.cjs.production.min.js

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@storybook/addons"),t="storybook-rhythm";exports.default=e.makeDecorator({name:"withVRhythm",parameterName:"vrhythm",wrapper:function(e,r,o){var n,a=o.parameters;return a.hide?(n=document.getElementById(t))&&n.parentNode&&n.parentNode.removeChild(n):function(e){var r=function(){var e;return document.getElementById(t)||((e=document.createElement("div")).setAttribute("id",t),e)}();Object.assign(r.style,e);var o=document.querySelector("body");o&&o.append(r)}(function(e){var t=e.color,r=e.lineHeight,o=e.offset;return{position:"absolute",top:void 0===o?0:o,left:0,right:0,bottom:0,background:"linear-gradient("+(void 0===t?"rgb(204, 204, 204)":t)+" 1px, transparent 1px) left top / 1px "+(void 0===r?"16px":r),pointerEvents:"none"}}(a)),e(r)}});
-//# sourceMappingURL=storybook-vrhythm.cjs.production.min.js.map

package/dist/storybook-vrhythm.cjs.production.min.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"storybook-vrhythm.cjs.production.min.js","sources":["../src/constants.ts","../src/index.tsx","../src/utils.ts","../src/getStyle.ts"],"sourcesContent":["export const DEFAULT_COLOR = 'rgb(204, 204, 204)';\nexport const DEFAULT_LINE_HEIGHT = '16px';\nexport const DEFAULT_OFFSET = 0;\nexport const PARENT_SELECTOR = 'body';\nexport const DIV_ID = 'storybook-rhythm';\n","import { makeDecorator } from '@storybook/addons';\n\nimport getStyle from './getStyle';\nimport { StyleProps, ConfigProps } from './types';\nimport { injectStyle, removeElement } from './utils';\n\ntype Params = StyleProps & ConfigProps;\n\nexport default makeDecorator({\n  name: 'withVRhythm',\n  parameterName: 'vrhythm',\n  wrapper: (getStory, context, { parameters }: { parameters: Params }) => {\n    if (parameters.hide) {\n      removeElement();\n    } else {\n      const style = getStyle(parameters);\n      injectStyle(style);\n    }\n    return getStory(context);\n  },\n});\n","import { PARENT_SELECTOR, DIV_ID } from './constants';\nimport { StyleObj } from './types';\n\nfunction createElement() {\n  const element = document.createElement('div') as HTMLDivElement;\n  element.setAttribute('id', DIV_ID);\n  return element;\n}\n\nfunction getOrCreateElement() {\n  const elementOnDom = document.getElementById(DIV_ID);\n  if (elementOnDom) {\n    return elementOnDom;\n  }\n  return createElement();\n}\n\nexport function removeElement() {\n  const elementOnDom = document.getElementById(DIV_ID);\n  elementOnDom &&\n    elementOnDom.parentNode &&\n    elementOnDom.parentNode.removeChild(elementOnDom);\n}\n\nexport function injectStyle(style: StyleObj) {\n  const element = getOrCreateElement();\n  Object.assign(element.style, style);\n  const parent = document.querySelector(PARENT_SELECTOR);\n  parent && parent.append(element);\n}\n","import { StyleObj, StyleProps } from './types';\nimport {\n  DEFAULT_COLOR,\n  DEFAULT_LINE_HEIGHT,\n  DEFAULT_OFFSET,\n} from './constants';\n\nconst getStyle = ({\n  color = DEFAULT_COLOR,\n  lineHeight = DEFAULT_LINE_HEIGHT,\n  offset = DEFAULT_OFFSET,\n}: StyleProps): StyleObj => ({\n  position: 'absolute',\n  top: offset,\n  left: 0,\n  right: 0,\n  bottom: 0,\n  background: `linear-gradient(${color} 1px, transparent 1px) left top / 1px ${lineHeight}`,\n  pointerEvents: 'none',\n});\n\nexport default getStyle;\n"],"names":["DIV_ID","makeDecorator","name","parameterName","wrapper","getStory","context","elementOnDom","parameters","hide","document","getElementById","parentNode","removeChild","style","element","createElement","setAttribute","getOrCreateElement","Object","assign","parent","querySelector","append","injectStyle","color","lineHeight","offset","position","top","left","right","bottom","background","pointerEvents","getStyle"],"mappings":"uGAIaA,EAAS,mCCIPC,gBAAc,CAC3BC,KAAM,cACNC,cAAe,UACfC,QAAS,SAACC,EAAUC,SCOdC,EDPyBC,IAAAA,kBACzBA,EAAWC,MCMXF,EAAeG,SAASC,eAAeX,KAE3CO,EAAaK,YACbL,EAAaK,WAAWC,YAAYN,YAGZO,OACpBC,EAhBR,eALQA,SAMeL,SAASC,eAAeX,MANvCe,EAAUL,SAASM,cAAc,QAC/BC,aAAa,KAAMjB,GACpBe,GAmBSG,GAChBC,OAAOC,OAAOL,EAAQD,MAAOA,OACvBO,EAASX,SAASY,cFxBK,QEyB7BD,GAAUA,EAAOE,OAAOR,GDZpBS,CETW,oBACfC,UACAC,eACAC,aAC2B,CAC3BC,SAAU,WACVC,eHX4B,IGY5BC,KAAM,EACNC,MAAO,EACPC,OAAQ,EACRC,0CHjB2B,6EACM,UGiBjCC,cAAe,QFHGC,CAAS3B,IAGlBH,EAASC"}

package/dist/storybook-vrhythm.esm.js

@@ -1,73 +0,0 @@
-import { makeDecorator } from '@storybook/addons';
-
-var DEFAULT_COLOR = 'rgb(204, 204, 204)';
-var DEFAULT_LINE_HEIGHT = '16px';
-var DEFAULT_OFFSET = 0;
-var PARENT_SELECTOR = 'body';
-var DIV_ID = 'storybook-rhythm';
-
-var getStyle = function getStyle(_ref) {
-  var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? DEFAULT_COLOR : _ref$color,
-      _ref$lineHeight = _ref.lineHeight,
-      lineHeight = _ref$lineHeight === void 0 ? DEFAULT_LINE_HEIGHT : _ref$lineHeight,
-      _ref$offset = _ref.offset,
-      offset = _ref$offset === void 0 ? DEFAULT_OFFSET : _ref$offset;
-  return {
-    position: 'absolute',
-    top: offset,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    background: "linear-gradient(" + color + " 1px, transparent 1px) left top / 1px " + lineHeight,
-    pointerEvents: 'none'
-  };
-};
-
-function createElement() {
-  var element = document.createElement('div');
-  element.setAttribute('id', DIV_ID);
-  return element;
-}
-
-function getOrCreateElement() {
-  var elementOnDom = document.getElementById(DIV_ID);
-
-  if (elementOnDom) {
-    return elementOnDom;
-  }
-
-  return createElement();
-}
-
-function removeElement() {
-  var elementOnDom = document.getElementById(DIV_ID);
-  elementOnDom && elementOnDom.parentNode && elementOnDom.parentNode.removeChild(elementOnDom);
-}
-function injectStyle(style) {
-  var element = getOrCreateElement();
-  Object.assign(element.style, style);
-  var parent = document.querySelector(PARENT_SELECTOR);
-  parent && parent.append(element);
-}
-
-var index = /*#__PURE__*/
-makeDecorator({
-  name: 'withVRhythm',
-  parameterName: 'vrhythm',
-  wrapper: function wrapper(getStory, context, _ref) {
-    var parameters = _ref.parameters;
-
-    if (parameters.hide) {
-      removeElement();
-    } else {
-      var style = getStyle(parameters);
-      injectStyle(style);
-    }
-
-    return getStory(context);
-  }
-});
-
-export default index;
-//# sourceMappingURL=storybook-vrhythm.esm.js.map

package/dist/storybook-vrhythm.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"storybook-vrhythm.esm.js","sources":["../src/constants.ts","../src/getStyle.ts","../src/utils.ts","../src/index.tsx"],"sourcesContent":["export const DEFAULT_COLOR = 'rgb(204, 204, 204)';\nexport const DEFAULT_LINE_HEIGHT = '16px';\nexport const DEFAULT_OFFSET = 0;\nexport const PARENT_SELECTOR = 'body';\nexport const DIV_ID = 'storybook-rhythm';\n","import { StyleObj, StyleProps } from './types';\nimport {\n  DEFAULT_COLOR,\n  DEFAULT_LINE_HEIGHT,\n  DEFAULT_OFFSET,\n} from './constants';\n\nconst getStyle = ({\n  color = DEFAULT_COLOR,\n  lineHeight = DEFAULT_LINE_HEIGHT,\n  offset = DEFAULT_OFFSET,\n}: StyleProps): StyleObj => ({\n  position: 'absolute',\n  top: offset,\n  left: 0,\n  right: 0,\n  bottom: 0,\n  background: `linear-gradient(${color} 1px, transparent 1px) left top / 1px ${lineHeight}`,\n  pointerEvents: 'none',\n});\n\nexport default getStyle;\n","import { PARENT_SELECTOR, DIV_ID } from './constants';\nimport { StyleObj } from './types';\n\nfunction createElement() {\n  const element = document.createElement('div') as HTMLDivElement;\n  element.setAttribute('id', DIV_ID);\n  return element;\n}\n\nfunction getOrCreateElement() {\n  const elementOnDom = document.getElementById(DIV_ID);\n  if (elementOnDom) {\n    return elementOnDom;\n  }\n  return createElement();\n}\n\nexport function removeElement() {\n  const elementOnDom = document.getElementById(DIV_ID);\n  elementOnDom &&\n    elementOnDom.parentNode &&\n    elementOnDom.parentNode.removeChild(elementOnDom);\n}\n\nexport function injectStyle(style: StyleObj) {\n  const element = getOrCreateElement();\n  Object.assign(element.style, style);\n  const parent = document.querySelector(PARENT_SELECTOR);\n  parent && parent.append(element);\n}\n","import { makeDecorator } from '@storybook/addons';\n\nimport getStyle from './getStyle';\nimport { StyleProps, ConfigProps } from './types';\nimport { injectStyle, removeElement } from './utils';\n\ntype Params = StyleProps & ConfigProps;\n\nexport default makeDecorator({\n  name: 'withVRhythm',\n  parameterName: 'vrhythm',\n  wrapper: (getStory, context, { parameters }: { parameters: Params }) => {\n    if (parameters.hide) {\n      removeElement();\n    } else {\n      const style = getStyle(parameters);\n      injectStyle(style);\n    }\n    return getStory(context);\n  },\n});\n"],"names":["DEFAULT_COLOR","DEFAULT_LINE_HEIGHT","DEFAULT_OFFSET","PARENT_SELECTOR","DIV_ID","getStyle","color","lineHeight","offset","position","top","left","right","bottom","background","pointerEvents","createElement","element","document","setAttribute","getOrCreateElement","elementOnDom","getElementById","removeElement","parentNode","removeChild","injectStyle","style","Object","assign","parent","querySelector","append","makeDecorator","name","parameterName","wrapper","getStory","context","parameters","hide"],"mappings":";;AAAO,IAAMA,aAAa,GAAG,oBAAtB;AACA,IAAMC,mBAAmB,GAAG,MAA5B;AACA,IAAMC,cAAc,GAAG,CAAvB;AACA,IAAMC,eAAe,GAAG,MAAxB;AACA,IAAMC,MAAM,GAAG,kBAAf;;ACGP,IAAMC,QAAQ,GAAG,SAAXA,QAAW;AAAA,wBACfC,KADe;AAAA,MACfA,KADe,2BACPN,aADO;AAAA,6BAEfO,UAFe;AAAA,MAEfA,UAFe,gCAEFN,mBAFE;AAAA,yBAGfO,MAHe;AAAA,MAGfA,MAHe,4BAGNN,cAHM;AAAA,SAIY;AAC3BO,IAAAA,QAAQ,EAAE,UADiB;AAE3BC,IAAAA,GAAG,EAAEF,MAFsB;AAG3BG,IAAAA,IAAI,EAAE,CAHqB;AAI3BC,IAAAA,KAAK,EAAE,CAJoB;AAK3BC,IAAAA,MAAM,EAAE,CALmB;AAM3BC,IAAAA,UAAU,uBAAqBR,KAArB,8CAAmEC,UANlD;AAO3BQ,IAAAA,aAAa,EAAE;AAPY,GAJZ;AAAA,CAAjB;;ACJA,SAASC,aAAT;AACE,MAAMC,OAAO,GAAGC,QAAQ,CAACF,aAAT,CAAuB,KAAvB,CAAhB;AACAC,EAAAA,OAAO,CAACE,YAAR,CAAqB,IAArB,EAA2Bf,MAA3B;AACA,SAAOa,OAAP;AACD;;AAED,SAASG,kBAAT;AACE,MAAMC,YAAY,GAAGH,QAAQ,CAACI,cAAT,CAAwBlB,MAAxB,CAArB;;AACA,MAAIiB,YAAJ,EAAkB;AAChB,WAAOA,YAAP;AACD;;AACD,SAAOL,aAAa,EAApB;AACD;;AAED,SAAgBO;AACd,MAAMF,YAAY,GAAGH,QAAQ,CAACI,cAAT,CAAwBlB,MAAxB,CAArB;AACAiB,EAAAA,YAAY,IACVA,YAAY,CAACG,UADf,IAEEH,YAAY,CAACG,UAAb,CAAwBC,WAAxB,CAAoCJ,YAApC,CAFF;AAGD;AAED,SAAgBK,YAAYC;AAC1B,MAAMV,OAAO,GAAGG,kBAAkB,EAAlC;AACAQ,EAAAA,MAAM,CAACC,MAAP,CAAcZ,OAAO,CAACU,KAAtB,EAA6BA,KAA7B;AACA,MAAMG,MAAM,GAAGZ,QAAQ,CAACa,aAAT,CAAuB5B,eAAvB,CAAf;AACA2B,EAAAA,MAAM,IAAIA,MAAM,CAACE,MAAP,CAAcf,OAAd,CAAV;AACD;;ACrBD,YAAA;AAAegB,aAAa,CAAC;AAC3BC,EAAAA,IAAI,EAAE,aADqB;AAE3BC,EAAAA,aAAa,EAAE,SAFY;AAG3BC,EAAAA,OAAO,EAAE,iBAACC,QAAD,EAAWC,OAAX;QAAsBC,kBAAAA;;AAC7B,QAAIA,UAAU,CAACC,IAAf,EAAqB;AACnBjB,MAAAA,aAAa;AACd,KAFD,MAEO;AACL,UAAMI,KAAK,GAAGtB,QAAQ,CAACkC,UAAD,CAAtB;AACAb,MAAAA,WAAW,CAACC,KAAD,CAAX;AACD;;AACD,WAAOU,QAAQ,CAACC,OAAD,CAAf;AACD;AAX0B,CAAD,CAA5B;;;;"}

package/dist/types.d.ts

@@ -1,11 +0,0 @@
-export interface StyleProps {
-    color?: string;
-    lineHeight?: string | number;
-    offset?: string | number;
-}
-export interface ConfigProps {
-    hide?: boolean;
-}
-export interface StyleObj {
-    [key: string]: string | number;
-}

package/dist/utils.d.ts

@@ -1,3 +0,0 @@
-import { StyleObj } from './types';
-export declare function removeElement(): void;
-export declare function injectStyle(style: StyleObj): void;