Update to Storybook 6.x

onwidget · May 7, 2022 · 6b27aa9 · 6b27aa9
1 parent 1ae6143
commit 6b27aa9
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 30 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,9 +1,11 @@
 {
   "presets": [
-    "@babel/preset-env",
-    "@babel/preset-react"
+    ["@babel/preset-env", { "loose": true }],
+    ["@babel/preset-react", { "loose": true }]
   ],
   "plugins": [
-    "@babel/plugin-proposal-class-properties"
+    ["@babel/plugin-proposal-class-properties", { "loose": true }],
+    ["@babel/plugin-proposal-private-methods", { "loose": true }],
+    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
   ]
 }
diff --git a/example/.storybook/.babelrc b/example/.storybook/.babelrc
@@ -1,9 +1,11 @@
 {
   "presets": [
-    "@babel/preset-env",
-    "@babel/preset-react"
+    ["@babel/preset-env", { "loose": true }],
+    ["@babel/preset-react", { "loose": true }]
   ],
   "plugins": [
-    "@babel/plugin-proposal-class-properties"
+    ["@babel/plugin-proposal-class-properties", { "loose": true }],
+    ["@babel/plugin-proposal-private-methods", { "loose": true }],
+    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
   ]
 }
diff --git a/example/.storybook/main.js b/example/.storybook/main.js
@@ -4,5 +4,8 @@ module.exports = {
   ],
   addons: [
     __dirname + "/../../register",
-  ]
+  ],
+  features: {
+    postcss: false,
+  },
 }
diff --git a/example/stories/amp-accordion.stories.js b/example/stories/amp-accordion.stories.js
@@ -1,8 +1,10 @@
 import React from 'react';
 
-import {storiesOf} from '@storybook/react';
+export default {
+  title: 'Components/amp-accordion',
+};
 
-storiesOf('Components/amp-accordion', module).add('default', () => (
+export const Base = () => (
   <amp-accordion>
     <section expanded="">
       <h4>Section 1</h4>
@@ -20,4 +22,6 @@ storiesOf('Components/amp-accordion', module).add('default', () => (
       <p>Bunch of awesome content.</p>
     </section>
   </amp-accordion>
-));
+);
+
+Base.storyName = 'default';
diff --git a/example/stories/amp-autocomplete.stories.js b/example/stories/amp-autocomplete.stories.js
@@ -1,8 +1,10 @@
 import React from 'react';
 
-import {storiesOf} from '@storybook/react';
+export default {
+  title: 'Components/amp-autocomplete',
+};
 
-storiesOf('Components/amp-autocomplete', module).add('default', () => (
+export const Base = () => (
   <form
     className="sample-form"
     method="post"
@@ -21,4 +23,6 @@ storiesOf('Components/amp-autocomplete', module).add('default', () => (
       />
     </amp-autocomplete>
   </form>
-));
+);
+
+Base.storyName = 'default';
diff --git a/example/stories/amp-carousel.stories.js b/example/stories/amp-carousel.stories.js
@@ -1,8 +1,11 @@
 import React from 'react';
 
-import {storiesOf} from '@storybook/react';
+export default {
+  title: 'Components/amp-carousel',
+};
 
-storiesOf('Components/amp-carousel', module).add('default', () => (
+
+export const Base = () => (
   <amp-carousel height="300" layout="fixed-height" type="slides">
     <div>
       <div style={{ backgroundImage: 'url(/coffee-beans.jpg)', height: 300 }} />
@@ -17,4 +20,6 @@ storiesOf('Components/amp-carousel', module).add('default', () => (
       <div style={{ backgroundColor: 'green', height: 300  }}>This is a green box.</div>
     </div>
   </amp-carousel>
-));
+);
+
+Base.storyName = 'default';
diff --git a/package.json b/package.json
@@ -1,14 +1,16 @@
 {
   "name": "storybook-amp",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "Storybook addon that allows you to display AMP HTML components generated with react in your stories",
+  "author": "prototypearea",
   "license": "MIT",
   "keywords": [
-    "storybook",
-    "addon",
-    "react",
+    "storybook-addons",
     "amp",
-    "amp-html"
+    "amp-html",
+    "react",
+    "storybook",
+    "addon"
   ],
   "homepage": "https://github.com/prototypearea/storybook-amp",
   "bugs": {
@@ -30,18 +32,20 @@
     "build-storybook": "build-storybook -c ./example/.storybook -s example/public"
   },
   "dependencies": {
-    "@storybook/addons": "^5.3.0",
-    "@storybook/components": "^5.3.0",
-    "@storybook/core-events": "^5.3.0"
+    "@storybook/addons": "^6.2.9",
+    "@storybook/components": "^6.2.9",
+    "@storybook/core-events": "^6.2.9",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.5.0",
-    "@babel/core": "^7.5.0",
+    "@babel/cli": "^7.13.16",
+    "@babel/core": "^7.14.2",
     "@babel/plugin-proposal-class-properties": "^7.3.0",
-    "@babel/preset-env": "^7.5.0",
-    "@babel/preset-react": "^7.0.0",
-    "@storybook/react": "^5.3.0",
-    "babel-loader": "^8.0.6"
+    "@babel/preset-env": "^7.14.2",
+    "@babel/preset-react": "^7.13.13",
+    "@storybook/react": "^6.2.9",
+    "babel-loader": "^8.2.2"
   },
   "peerDependencies": {
     "react": "*",
@@ -52,5 +56,11 @@
   },
   "engines": {
     "node": ">=10.15.0"
+  },
+  "storybook": {
+    "displayName": "Storybook AMP",
+    "unsupportedFrameworks": [],
+    "supportedFrameworks": ["react"],
+    "icon": "https://raw.githubusercontent.com/prototypearea/storybook-amp/master/amp-logo.png"
   }
 }