drops custom useComponentId hook and React 16/17 support

Author: AnyRoad

package.json

@@ -37,15 +37,14 @@
     "build-storybook": "storybook build"
   },
   "peerDependencies": {
-    "react": "^16.13.1 || ^17.0.0 || ^18.0.0"
+    "react": "^18.0.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.24.7",
     "@chromatic-com/storybook": "^1.9.0",
     "@storybook/addon-essentials": "^8.3.3",
     "@storybook/addon-interactions": "^8.3.3",
     "@storybook/addon-links": "^8.3.3",
-    "@storybook/addon-onboarding": "^8.3.3",
     "@storybook/blocks": "^8.3.3",
     "@storybook/react": "^8.3.3",
     "@storybook/react-vite": "^8.3.3",

src/DataRenderer.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as DataTypeDetection from './DataTypeDetection';
-import { useBool, useComponentId } from './hooks';
+import { useBool } from './hooks';
 
 export interface StyleProps {
   container: string;
@@ -80,7 +80,7 @@ function ExpandableObject({
 
   const expanderIconStyle = expanded ? style.collapseIcon : style.expandIcon;
   const ariaLabel = expanded ? 'collapse JSON' : 'expand JSON';
-  const contentsId = useComponentId();
+  const contentsId = React.useId();
   const childLevel = level + 1;
   const lastIndex = data.length - 1;
 

src/hooks.test.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { useBool, useComponentId } from './hooks';
+import { useBool } from './hooks';
 
 import { render } from '@testing-library/react';
-import { act } from 'react-dom/test-utils';
 
 describe('useBool', () => {
   it('should use initial value creator function', async () => {
@@ -31,13 +30,13 @@ describe('useBool', () => {
     };
 
     render(<HookComponent />);
-    act(() => {
+    React.act(() => {
       toggle();
     });
 
     expect(value!).toBe(false);
 
-    act(() => {
+    React.act(() => {
       toggle();
     });
     expect(value!).toBe(true);
@@ -53,45 +52,15 @@ describe('useBool', () => {
     };
 
     render(<HookComponent />);
-    act(() => {
+    React.act(() => {
       setValue(false);
     });
 
     expect(value!).toBe(false);
 
-    act(() => {
+    React.act(() => {
       setValue(true);
     });
     expect(value!).toBe(true);
   });
 });
-
-describe('useComponentId', () => {
-  let id1 = '';
-  let id1AfterFirstRender = '';
-
-  let id2 = '';
-  let id2AfterFirstRender = '';
-
-  const HookComponent1 = ({ text }: { text: string }) => {
-    id1 = useComponentId();
-    return <div>{text}</div>;
-  };
-
-  const HookComponent2 = ({ text }: { text: string }) => {
-    id2 = useComponentId();
-    return <div>{text}</div>;
-  };
-
-  const { rerender: rerender1 } = render(<HookComponent1 text={'component1'} />);
-  id1AfterFirstRender = id1;
-  rerender1(<HookComponent1 text={'component1 second render'} />);
-
-  const { rerender: rerender2 } = render(<HookComponent2 text={'component2'} />);
-  id2AfterFirstRender = id2;
-  rerender2(<HookComponent2 text={'component2 second render'} />);
-
-  expect(id1).toBe(id1AfterFirstRender);
-  expect(id2).toBe(id2AfterFirstRender);
-  expect(id1).not.toBe(id2);
-});

src/hooks.ts

@@ -1,4 +1,4 @@
-import { useState, useRef } from 'react';
+import { useState } from 'react';
 
 export function useBool(
   initialValueCreator: () => boolean
@@ -9,14 +9,3 @@ export function useBool(
 
   return [value, tooggle, setValue];
 }
-
-let componentId = 1;
-const generateNextId = () => componentId++;
-
-export function useComponentId() {
-  const componentId = useRef<string>();
-  if (componentId.current === undefined) {
-    componentId.current = `:jsnvw:${generateNextId()}:`;
-  }
-  return componentId.current;
-}

yarn.lock

@@ -2943,17 +2943,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-onboarding@npm:^8.3.3":
-  version: 8.3.3
-  resolution: "@storybook/addon-onboarding@npm:8.3.3"
-  dependencies:
-    react-confetti: ^6.1.0
-  peerDependencies:
-    storybook: ^8.3.3
-  checksum: 5b5a07cf946c213c8a4eaea55fca497b9e4d0f452acef2cf2b4a0241ec32a042b03c4c889dc64dcedc84cbb22fda041d5104af1f6e257ae4c5e2e09cfa19a1e2
-  languageName: node
-  linkType: hard
-
 "@storybook/addon-outline@npm:8.3.3":
   version: 8.3.3
   resolution: "@storybook/addon-outline@npm:8.3.3"
@@ -14296,7 +14285,6 @@ __metadata:
     "@storybook/addon-essentials": ^8.3.3
     "@storybook/addon-interactions": ^8.3.3
     "@storybook/addon-links": ^8.3.3
-    "@storybook/addon-onboarding": ^8.3.3
     "@storybook/blocks": ^8.3.3
     "@storybook/react": ^8.3.3
     "@storybook/react-vite": ^8.3.3
@@ -14335,7 +14323,7 @@ __metadata:
     storybook: ^8.3.3
     typescript: 5.5.4
   peerDependencies:
-    react: ^16.13.1 || ^17.0.0 || ^18.0.0
+    react: ^18.0.0
   languageName: unknown
   linkType: soft