Pad preview document body instead of iframe element

.eslintrc

@@ -23,17 +23,22 @@
   },
   "plugins": [
     "react",
+    "react-hooks",
     "@typescript-eslint"
   ],
   "rules": {
     "@typescript-eslint/explicit-function-return-type": "off",
     "import/extensions": ["error", "ignorePackages", { "tsx": "never" }],
-    "react/jsx-filename-extension": ["error", { "extensions": [".tsx"] }]
+    "import/no-extraneous-dependencies": ["error", {"devDependencies": ["example/**/*.js"]}],
+    "react/jsx-filename-extension": ["error", { "extensions": [".js", ".tsx"] }],
+    "react/prop-types": "off",
+    "react-hooks/exhaustive-deps": "warn",
+    "react-hooks/rules-of-hooks": "error"
   },
   "settings": {
     "import/resolver": {
       "node": {
-        "extensions": [".tsx"]
+        "extensions": [".js", ".tsx"]
       }
     }
   }

.github/workflows/main.yml

@@ -17,6 +17,9 @@ jobs:
       - name: Install
         run: npm ci
 
+      - name: Install example
+        run: npm ci --prefix example
+
       - name: Build
         run: npm run build
 

README.md

@@ -25,6 +25,15 @@ module.exports = {
 }
 ```
 
+within `.storybook/preview.js`:
+
+```js
+import { addDecorator } from '@storybook/react';
+import { withPaddings } from 'storybook-addon-paddings';
+
+addDecorator(withPaddings);
+```
+
 See [`example`](example) for a minimal working setup.
 
 ## Configuration
@@ -36,7 +45,10 @@ The addon can be configured globally and per story with the `paddings` parameter
 To add paddings to all stories, call `addParameters` in `.storybook/preview.js`:
 
 ```js
-import { addParameters } from '@storybook/html'; // or your Storybook framework
+import { addParameters } from '@storybook/react';
+import { withPaddings } from 'storybook-addon-paddings';
+
+addDecorator(withPaddings);
 
 addParameters({
   paddings: [

example/.storybook/main.js

@@ -1,4 +1,8 @@
 module.exports = {
-  addons: ['storybook-addon-paddings'],
+  addons: [
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    'storybook-addon-paddings',
+  ],
   stories: ['../stories/**/*.stories.js'],
 };

example/.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<style>
+  body { margin: 0 }
+</style>

example/.storybook/preview.js

@@ -1,4 +1,7 @@
-import { addParameters } from '@storybook/html';
+import { addDecorator, addParameters } from '@storybook/react';
+import { withPaddings } from 'storybook-addon-paddings';
+
+addDecorator(withPaddings);
 
 addParameters({
   paddings: [