wip: upgrade to storybook 7

.eslintrc.js

@@ -5,7 +5,7 @@ module.exports = {
     sourceType: 'module',
   },
   plugins: ['@typescript-eslint', 'prettier'],
-  extends: ['plugin:@typescript-eslint/recommended', 'prettier'],
+  extends: ['plugin:@typescript-eslint/recommended', 'prettier', 'plugin:storybook/recommended'],
   rules: {
     'prettier/prettier': ['error'],
     '@typescript-eslint/ban-ts-comment': 'warn',

.storybook/main.js

@@ -1,6 +1,10 @@
-module.exports = {
-  stories: ['../stories/*.*'],
-  core: {
-    builder: 'webpack5'
+export default {
+  stories: ['../src/stories/*.stories.*'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {}
+  },
+  docs: {
+    autodocs: true
   }
-};
+};

karma.conf.js

@@ -15,7 +15,7 @@ var webpackConfig = {
   },
 };
 
-module.exports = function(config) {
+module.exports = function (config) {
   config.set({
     // base path that will be used to resolve all patterns (eg. files, exclude)
     basePath: '',
@@ -41,12 +41,7 @@ module.exports = function(config) {
       'test/index.js': ['webpack'], // run the test bundle through webpack plugin
     },
 
-    plugins: [
-      'karma-jasmine',
-      'karma-phantomjs-launcher',
-      'karma-firefox-launcher',
-      require('karma-webpack'),
-    ],
+    plugins: ['karma-jasmine', 'karma-phantomjs-launcher', 'karma-firefox-launcher', require('karma-webpack')],
 
     // test results reporter to use
     // possible values: 'dots', 'progress'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-inspector",
-  "version": "6.0.1",
+  "version": "6.0.2",
   "description": "Power of Browser DevTools inspectors right inside your React app",
   "keywords": [
     "devtools",
@@ -52,20 +52,19 @@
   ],
   "scripts": {
     "build": "tsup",
-    "build-storybook": "build-storybook",
+    "build-storybook": "storybook build",
     "chromatic": "chromatic --project-token=17yeg4lpa7q",
-    "lint": "eslint src stories",
+    "lint": "eslint src",
     "prerelease": "npm run lint && npm run test && npm run build",
     "release": "npm publish . --access public",
-    "storybook": "start-storybook -p 9001",
+    "storybook": "storybook dev -p 9001",
     "test": "jest src"
   },
   "devDependencies": {
     "@babel/core": "^7.11.6",
     "@babel/plugin-proposal-class-properties": "^7.10.4",
     "@babel/plugin-proposal-do-expressions": "^7.10.4",
     "@babel/plugin-proposal-logical-assignment-operators": "^7.11.0",
-
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
     "@babel/plugin-proposal-object-rest-spread": "^7.11.0",
     "@babel/plugin-proposal-optional-chaining": "^7.11.0",
@@ -76,28 +75,29 @@
     "@babel/preset-react": "^7.10.4",
     "@babel/preset-typescript": "^7.18.6",
     "@babel/register": "^7.11.5",
-    "@storybook/builder-webpack5": "^6.5.9",
-    "@storybook/manager-webpack5": "^6.5.9",
-    "@storybook/react": "^6.5.9",
+    "@storybook/react": "^7.0.18",
+    "@storybook/react-vite": "^7.0.18",
     "@types/is-dom": "^1.1.0",
     "@types/react": "^16",
     "@typescript-eslint/eslint-plugin": "^5.30.4",
     "@typescript-eslint/parser": "^5.30.4",
     "babel-loader": "^8.1.0",
     "chromatic": "^6.7.0",
     "eslint": "^8.19.0",
+    "vite": "^4.3.9",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-storybook": "^0.6.12",
     "expect": "^26.4.2",
     "is-dom": "^1.1.0",
     "jest": "^26.4.2",
     "prettier": "^2.1.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-test-renderer": "^16.13.1",
+    "storybook": "^7.0.18",
     "tsup": "^6.1.3",
-    "typescript": "^4.7.4",
-    "webpack": "^5"
+    "typescript": "^4.7.4"
   },
   "peerDependencies": {
     "react": "^16.8.4 || ^17.0.0 || ^18.0.0"

src/stories/arrays.stories.jsx

@@ -0,0 +1,48 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import React from 'react';
+
+import { Inspector } from '..';
+
+export default {
+  title: 'Arrays',
+};
+
+export const EmptyArray = () => <Inspector data={[]} />;
+
+export const EmptyArrayShowNonEnumerableProperties = {
+  render: () => <Inspector showNonenumerable data={[]} />,
+  name: 'Empty Array (show non-enumerable properties)',
+};
+
+export const BasicArray = () => <Inspector data={['cold', 'ice']} />;
+
+export const ArrayWithDifferentTypesOfElements = {
+  render: () => <Inspector data={['a', 1, {}]} />,
+  name: 'Array with different types of elements',
+};
+
+export const LongArray = {
+  render: () => <Inspector data={new Array(1000).fill(0).map((x, i) => i + '')} />,
+  name: 'Long array',
+};
+
+export const ArrayWithBigObjects = {
+  render: () => (
+    <Inspector
+      data={new Array(100).fill(0).map((x, i) => ({
+        key: i,
+        name: `John #${i}`,
+        dateOfBirth: new Date(i * 10e8),
+        address: `${i} Main Street`,
+        zip: 90210 + i,
+      }))}
+    />
+  ),
+
+  name: 'Array with big objects',
+};
+
+export const _Uint32Array = {
+  render: () => <Inspector data={new Uint32Array(1000)} />,
+  name: 'Uint32Array',
+};

src/stories/bigints.stories.jsx

@@ -0,0 +1,23 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import React from 'react';
+
+import { Inspector } from '..';
+
+export default {
+  title: 'BigInts',
+};
+
+export const Positive = {
+  render: () => <Inspector data={42n} />,
+  name: 'positive',
+};
+
+export const Zero = {
+  render: () => <Inspector data={0n} />,
+  name: 'zero',
+};
+
+export const Negative = {
+  render: () => <Inspector data={-1n} />,
+  name: 'negative',
+};

src/stories/booleans.stories.jsx

@@ -0,0 +1,18 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import React from 'react';
+
+import { Inspector } from '..';
+
+export default {
+  title: 'Booleans',
+};
+
+export const True = {
+  render: () => <Inspector data={true} />,
+  name: 'true',
+};
+
+export const False = {
+  render: () => <Inspector data={false} />,
+  name: 'false',
+};

src/stories/dom-inspector.stories.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Inspector } from '..';
+
+export default {
+  title: 'DOM Node',
+};
+
+export const ElementNodeBody = {
+  render: () => <Inspector data={document.body} />,
+  name: 'Element Node: body',
+};
+
+export const ElementNodeDiv = {
+  render: () => <Inspector data={document.createElement('div')} />,
+  name: 'Element Node: div',
+};
+
+export const ElementNodeDivWithDataAttributes = {
+  render: () => {
+    const div = document.createElement('div');
+    div.setAttribute('data-test', 'test');
+    // div.dataset
+    return <Inspector data={div} />;
+  },
+
+  name: 'Element Node: div with data attributes',
+};
+
+export const ElementNodeDivWithClassAndStyle = {
+  render: () => {
+    const div = document.createElement('div');
+    div.setAttribute('class', 'test');
+    div.setAttribute('style', 'font-weight: bold;');
+    return <Inspector data={div} />;
+  },
+
+  name: 'Element Node: div with class and style',
+};
+
+export const ElementNodeDivWithChildren = {
+  render: () => {
+    const div = document.createElement('div');
+    const span = document.createElement('span');
+    span.textContent = 'hello';
+    div.appendChild(span);
+    return <Inspector data={div} />;
+  },
+
+  name: 'Element Node: div with children',
+};
+
+export const CommentNode = () => <Inspector data={document.createComment('this is a comment')} />;
+export const TextNode = () => <Inspector data={document.createTextNode('this is a text node')} />;
+
+export const ProcessingInstructionNode = () => {
+  var docu = new DOMParser().parseFromString('<xml></xml>', 'application/xml');
+  var pi = docu.createProcessingInstruction('xml-stylesheet', 'href="mycss.css" type="text/css"');
+  return <Inspector data={pi} />;
+};
+
+export const DocumentTypeNode = () => {
+  return <Inspector data={document.childNodes[0]} />;
+};
+
+export const DocumentNode = () => <Inspector expandLevel={2} data={document} />;
+export const DocumentFragmentNode = () => <Inspector data={document.createElement('template').content} />;

src/stories/functions.stories.jsx

@@ -0,0 +1,29 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import React from 'react';
+
+import { Inspector } from '..';
+
+export default {
+  title: 'Functions',
+};
+
+export const FunctionsAnonymousFunction = {
+  render: () => <Inspector data={function () {}} />,
+  name: 'Functions: anonymous function',
+};
+
+export const FunctionsAnonymousArrowFunction = {
+  render: () => <Inspector data={() => {}} />,
+  name: 'Functions: anonymous arrow function',
+};
+
+export const FunctionsNamedFunction = {
+  render: () => <Inspector data={namedFunction} />,
+  name: 'Functions: named function',
+};
+
+export const FunctionsNamedFunctionShowNonEnumerableProperties = {
+  render: () => <Inspector showNonenumerable data={namedFunction} />,
+
+  name: 'Functions: named function (show non-enumerable properties)',
+};