feat(deps)!: migrate to Storybook 7.0 (#36)

.github/workflows/main.yml

@@ -18,20 +18,14 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
 
       - name: Install
         run: npm ci
 
-      - name: Install example
-        run: npm i --prefix example
-
       - name: Build
         run: npm run build
 
-      - name: Lint
-        run: npm run lint
-
       - name: Format-check
         run: npm run format-check
 

.gitignore

@@ -1,5 +1,7 @@
+dist/
+node_modules/
+storybook-static/
 .DS_Store
+.env
 .vscode
-dist
-node_modules
-storybook-static
+build-storybook.log

.lintstagedrc.json

@@ -0,0 +1,3 @@
+{
+  "*": "prettier --ignore-unknown --write"
+}

.nvmrc

@@ -1 +1 @@
-16
+18

.prettierrc → .prettierrc.json

@@ -1,4 +1,6 @@
 {
+  "arrowParens": "avoid",
+  "semi": false,
   "singleQuote": true,
   "trailingComma": "all"
 }

.storybook/local-preset.js

@@ -0,0 +1,12 @@
+function previewAnnotations(entry = []) {
+  return [...entry, require.resolve('../dist/preview.mjs')]
+}
+
+function managerEntries(entry = []) {
+  return [...entry, require.resolve('../dist/manager.mjs')]
+}
+
+module.exports = {
+  managerEntries,
+  previewAnnotations,
+}

.storybook/main.ts

@@ -0,0 +1,15 @@
+import type { StorybookConfig } from '@storybook/react-vite'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['./local-preset.js'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+}
+
+export default config

example/.storybook/manager.js → .storybook/manager.ts

@@ -1,9 +1,9 @@
-import { addons } from '@storybook/addons';
-import { create } from '@storybook/theming/create';
+import { addons } from '@storybook/manager-api'
+import { create } from '@storybook/theming/create'
 
 addons.setConfig({
   theme: create({
     base: 'light',
     brandTitle: 'Storybook Paddings Addon',
   }),
-});
+})

.storybook/preview.ts

@@ -0,0 +1,9 @@
+import type { Preview } from '@storybook/react'
+
+const preview: Preview = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+}
+
+export default preview

README.md

@@ -1,7 +1,7 @@
 # Storybook Paddings Addon
 
 [![npm package version](https://img.shields.io/npm/v/storybook-addon-paddings)](https://www.npmjs.com/package/storybook-addon-paddings)
-[![Build status](https://img.shields.io/github/workflow/status/rbardini/storybook-addon-paddings/Main)](https://github.com/rbardini/storybook-addon-paddings/actions)
+[![Build status](https://img.shields.io/github/actions/workflow/status/rbardini/storybook-addon-paddings/main.yml)](https://github.com/rbardini/storybook-addon-paddings/actions)
 [![Dependencies status](https://img.shields.io/librariesio/release/npm/storybook-addon-paddings)](https://libraries.io/npm/storybook-addon-paddings)
 
 🔲 A [Storybook](https://storybook.js.org) addon to add different paddings to your preview. Useful for checking how components behave when surrounded with white space.
@@ -16,15 +16,19 @@
 npm install --save-dev storybook-addon-paddings
 ```
 
-within [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project):
-
 ```js
-module.exports = {
+// .storybook/main.js
+export default {
   addons: ['storybook-addon-paddings'],
-};
-```
+}
 
-See [`example`](example) for a minimal working setup.
+// .storybook/preview.js
+export default {
+  parameters: {
+    layout: 'fullscreen', // remove default Storybook padding
+  },
+}
+```
 
 ## Configuration
 
@@ -42,7 +46,7 @@ export const parameters = {
     ],
     default: 'Medium',
   },
-};
+}
 ```
 
 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):
@@ -53,6 +57,7 @@ You can also configure on per-story or per-component basis using [parameter inhe
 // Set padding options for all Button stories
 export default {
   title: 'Button',
+  component: Button,
   parameters: {
     paddings: {
       values: [
@@ -63,11 +68,14 @@ export default {
       default: 'Large',
     },
   },
-};
+}
 
 // Disable addon in Button/Large story only
-export const Large = Template.bind({});
-Large.parameters = {
-  paddings: { disable: true },
-};
+export const Large {
+  parameters: {
+    paddings: { disable: true },
+  },
+}
 ```
+
+See other [story examples](./src/stories/Card.stories.ts).

manager.js

@@ -0,0 +1 @@
+export * from './dist/manager'

netlify.toml

@@ -1,3 +1,3 @@
 [build]
-  command = "npm i --prefix example && npm run build-example"
-  publish = "example/storybook-static"
+  command = "npm i && npm run build && npm run build-storybook"
+  publish = "storybook-static"