chore(dev-deps): upgrade storybook monorepo to v7

.babelrc.json

@@ -0,0 +1,14 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ]
+  ],
+  "plugins": []
+}

.storybook/main.js

@@ -1,4 +1,11 @@
 module.exports = {
   stories: ['../stories/**/*.stories.@(js|mdx)'],
-  addons: ['@storybook/addon-essentials'],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-mdx-gfm'],
+  framework: {
+    name: '@storybook/html-webpack5',
+    options: {},
+  },
+  docs: {
+    autodocs: true,
+  },
 };

package.json

@@ -31,8 +31,8 @@
     "test": "tape 'test/**/*-test.js' && eslint src",
     "prepublishOnly": "rm -rf dist && npm test",
     "postpublish": "zip -j dist/${npm_package_name}.zip -- LICENSE README.md dist/${npm_package_name}.js dist/${npm_package_name}.min.js",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "format:fix": "pretty-quick --staged",
     "format:fixall": "pretty-quick"
   },
@@ -43,19 +43,26 @@
   },
   "devDependencies": {
     "@babel/core": "7.15.5",
-    "@storybook/addon-essentials": "6.5.12",
-    "@storybook/html": "6.5.12",
+    "@babel/preset-env": "^7.21.5",
+    "@storybook/addon-essentials": "7.0.11",
+    "@storybook/addon-mdx-gfm": "^7.0.11",
+    "@storybook/html": "7.0.11",
+    "@storybook/html-webpack5": "^7.0.11",
     "babel-loader": "8.2.2",
     "d3-format": "2.0.0",
     "d3-shape": "2.0.0",
     "d3-time-format": "3.0.0",
     "eslint": "7.32.0",
+    "eslint-plugin-storybook": "^0.6.12",
     "husky": "4.3.0",
     "jsdom": "16.7.0",
     "prettier": "2.7.1",
     "pretty-quick": "3.1.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rollup": "2.56.3",
     "rollup-plugin-terser": "7.0.2",
+    "storybook": "^7.0.11",
     "tape": "5.3.1"
   },
   "dependencies": {

stories/basic-functionality.stories.js

@@ -17,7 +17,7 @@ export default {
 };
 
 export const Simple = () => {
-  const div = document.createElement('div');
+  const div = window.document.createElement('div');
 
   const data = [0, 0.005, 0.01, 0.015, 0.02, 0.025];
 
@@ -42,7 +42,7 @@ export const Simple = () => {
 };
 
 export const SimpleTop = () => {
-  const div = document.createElement('div');
+  const div = window.document.createElement('div');
 
   const data = [0, 0.005, 0.01, 0.015, 0.02, 0.025];
 
@@ -67,7 +67,7 @@ export const SimpleTop = () => {
 };
 
 export const Step = () => {
-  const div = document.createElement('div');
+  const div = window.document.createElement('div');
 
   const data = [0, 0.005, 0.01, 0.015, 0.02, 0.025];
 
@@ -93,7 +93,7 @@ export const Step = () => {
 };
 
 export const Time = () => {
-  const div = document.createElement('div');
+  const div = window.document.createElement('div');
 
   const data = range(0, 10).map(function (d) {
     return new Date(1995 + d, 10, 3);
@@ -121,7 +121,7 @@ export const Time = () => {
 };
 
 export const Fill = () => {
-  const div = document.createElement('div');
+  const div = window.document.createElement('div');
 
   const data = [0, 0.005, 0.01, 0.015, 0.02, 0.025];
 
@@ -148,7 +148,7 @@ export const Fill = () => {
 };
 
 export const Range = () => {
-  const div = document.createElement('div');
+  const div = window.document.createElement('div');
 
   const data = [0, 0.005, 0.01, 0.015, 0.02, 0.025];
   const defaultValue = [0.015, 0.02];
@@ -192,7 +192,7 @@ export const Range = () => {
 };
 
 export const Vertical = () => {
-  const div = document.createElement('div');
+  const div = window.document.createElement('div');
 
   const data1 = [0, 0.005, 0.01, 0.015, 0.02, 0.025];
 
@@ -217,7 +217,7 @@ export const Vertical = () => {
 };
 
 export const VerticalRange = () => {
-  const div = document.createElement('div');
+  const div = window.document.createElement('div');
 
   const data1 = [0, 0.005, 0.01, 0.015, 0.02, 0.025];
 
@@ -242,7 +242,7 @@ export const VerticalRange = () => {
 };
 
 export const VerticalRight = () => {
-  const div = document.createElement('div');
+  const div = window.document.createElement('div');
 
   const data1 = [0, 0.005, 0.01, 0.015, 0.02, 0.025];
 
@@ -267,7 +267,7 @@ export const VerticalRight = () => {
 };
 
 export const Padding = () => {
-  const div = document.createElement('div');
+  const div = window.document.createElement('div');
 
   const data = [0, 0.005, 0.01, 0.015, 0.02, 0.025];
 

stories/demos/color-picker.stories.js

@@ -25,7 +25,7 @@ export const Demo = () => {
   let rgb = [100, 0, 0];
   const colors = ['red', 'green', 'blue'];
 
-  const div = document.createElement('div');
+  const div = window.document.createElement('div');
 
   const g = select(div)
     .append('svg')

stories/demos/music-player-controls.stories.js

@@ -19,14 +19,14 @@ const timeFormat = (seconds) => {
 };
 
 export const Demo = () => {
-  const playerControlsDiv = document.createElement('div');
+  const playerControlsDiv = window.document.createElement('div');
   playerControlsDiv.classList.add('player-controls');
 
-  const playerControlsButtonsDiv = document.createElement('div');
+  const playerControlsButtonsDiv = window.document.createElement('div');
   playerControlsButtonsDiv.classList.add('player-controls__buttons');
   playerControlsDiv.append(playerControlsButtonsDiv);
 
-  const playbackBarDiv = document.createElement('div');
+  const playbackBarDiv = window.document.createElement('div');
   playbackBarDiv.classList.add('playback-bar');
   playerControlsDiv.append(playbackBarDiv);
 

stories/demos/new-york-times.stories.js

@@ -13,7 +13,7 @@ export default {
 };
 
 export const Demo = () => {
-  const div = document.createElement('div');
+  const div = window.document.createElement('div');
 
   const width = 565;
   const height = 120;

stories/extended-functionality.stories.js

@@ -13,7 +13,7 @@ export default {
 };
 
 export const AlternativeHandle = () => {
-  const div = document.createElement('div');
+  const div = window.document.createElement('div');
 
   const data1 = [0, 0.005, 0.01, 0.015, 0.02, 0.025];
 
@@ -39,7 +39,7 @@ export const AlternativeHandle = () => {
 };
 
 export const Transition = () => {
-  const div = document.createElement('div');
+  const div = window.document.createElement('div');
 
   const data = [0, 0.005, 0.01, 0.015, 0.02, 0.025];
 
@@ -70,7 +70,7 @@ export const Transition = () => {
 };
 
 export const DynamicMaxAndMin = () => {
-  const div = document.createElement('div');
+  const div = window.document.createElement('div');
 
   const slider = sliderBottom().min(2).max(15).width(300).step(1).default(5);
 
@@ -94,7 +94,7 @@ export const DynamicMaxAndMin = () => {
 };
 
 export const Marks = () => {
-  const div = document.createElement('div');
+  const div = window.document.createElement('div');
 
   const data = [
     new Date(1995, 1, 3),