chore(deps): update dependencies and configuration options (#16)

BREAKING CHANGE: require Storybook v6 (v5 compatibility possible, but not guaranteed)

.eslintrc

@@ -23,11 +23,10 @@
   "rules": {
     "@typescript-eslint/explicit-function-return-type": "off",
     "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-use-before-define": "error",
     "import/extensions": ["error", "ignorePackages", { "tsx": "never" }],
-    "import/no-extraneous-dependencies": [
-      "error",
-      { "devDependencies": ["example/**/*.js"] }
-    ],
+    "import/prefer-default-export": "off",
+    "no-use-before-define": "off",
     "react/jsx-filename-extension": [
       "error",
       { "extensions": [".js", ".tsx"] }

.github/workflows/main.yml

@@ -18,7 +18,7 @@ jobs:
         run: npm ci
 
       - name: Install example
-        run: npm ci --prefix example
+        run: npm i --prefix example
 
       - name: Build
         run: npm run build

README.md

@@ -17,92 +17,52 @@ A [Storybook](https://storybook.js.org) addon to add different paddings to your
 npm install --save-dev storybook-addon-paddings
 ```
 
-within `.storybook/main.js`:
+within [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project):
 
 ```js
 module.exports = {
   addons: ['storybook-addon-paddings'],
 };
 ```
 
-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
 
-The addon can be configured globally and per story with the `paddings` parameter.
-
-### Global configuration
+The paddings toolbar comes with small, medium and large options by default, but you can configure your own set of paddings via the `paddings` [parameter](https://storybook.js.org/docs/react/writing-stories/parameters).
 
-To add paddings to all stories, call `addParameters` in `.storybook/preview.js`:
+To configure for all stories, set the `paddings` parameter in [`.storybook/preview.js`](https://storybook.js.org/docs/react/configure/overview#configure-story-rendering):
 
 ```js
-import { addParameters } from '@storybook/react';
-import { withPaddings } from 'storybook-addon-paddings';
-
-addDecorator(withPaddings);
-
-addParameters({
+export const parameters = {
   paddings: [
     { name: 'Small', value: '16px' },
     { name: 'Medium', value: '32px', default: true },
     { name: 'Large', value: '64px' },
   ],
-});
+};
 ```
 
-### Per-story configuration
-
-To configure/override paddings for a single story or a set of stories, add the `paddings` parameter:
+You can also configure on per-story or per-component basis using [parameter inheritance](https://storybook.js.org/docs/react/writing-stories/parameters#component-parameters):
 
 ```js
-export default {
-  title: 'Stories',
-  parameters: {
-    paddings: [
-      { name: 'Small', value: '16px' },
-      { name: 'Medium', value: '32px', default: true },
-      { name: 'Large', value: '64px' },
-    ],
-  },
-};
+// Button.stories.js
 
-export const myStory = () => '<h1>Hello World</h1>';
-myStory.story = {
+// Set padding options for all Button stories
+export default {
+  title: 'Button',
   parameters: {
     paddings: [
       { name: 'Small', value: '16px' },
-      { name: 'Medium', value: '32px', default: true },
-      { name: 'Large', value: '64px' },
+      { name: 'Medium', value: '32px' },
+      { name: 'Large', value: '64px', default: true },
     ],
   },
 };
-```
-
-### Disabling the addon
-
-To disable paddings for a story, set the `paddings` parameter to `[]`, or use `{ disable: true }` to skip the addon:
-
-```js
-export default {
-  title: 'Stories',
-  parameters: {
-    paddings: [],
-  },
-};
 
-export const myStory = () => '<h1>Hello World</h1>';
-myStory.story = {
-  parameters: {
-    paddings: { disabled: true },
-  },
+// Disable addon in Button/Large story only
+export const Large = Template.bind({});
+Large.parameters = {
+  paddings: [],
 };
 ```

example/.eslintrc

@@ -0,0 +1,10 @@
+{
+  "extends": "../.eslintrc",
+  "rules": {
+    "import/no-extraneous-dependencies": [
+      "error",
+      { "devDependencies": ["**/*.js"] }
+    ],
+    "react/jsx-props-no-spreading": "off"
+  }
+}

example/.npmrc

@@ -0,0 +1 @@
+package-lock=false

example/.storybook/main.js

@@ -1,6 +1,6 @@
 module.exports = {
   addons: [
-    '@storybook/addon-actions',
+    '@storybook/addon-essentials',
     '@storybook/addon-links',
     'storybook-addon-paddings',
   ],