Merge pull request #105 from taifen/fix/react-tiny-popover-upgrade

Upgrade `react-tiny-popover` (Fixes an issue with react and react-dom peer dependencies)

.changeset/long-flies-hang.md

@@ -0,0 +1,5 @@
+---
+"react-view": patch
+---
+
+Updated react-tiny-popover to use React 17 and 18

CONTRIBUTING.md

@@ -5,19 +5,24 @@
 ```sh
 git clone https://github.com/uber/react-view
 cd react-view
-yarn
+pnpm install
 ```
 
-2. You can test your changes inside of the storybook:
+2. You can test your changes inside of the Ladle dev server by running:
 
 ```sh
-yarn storybook
+pnpm ladle serve
 ```
 
 3. When done, run all unit tests, e2e tests, typescript check and eslint via:
 
 ```sh
-yarn test:ci
+pnpm typecheck
+pnpm lint
+pnpm test
+
+pnpm exec playwright install
+pnpm test:e2e:dev
 ```
 
 All features and bug fixes should be covered by unit or e2e tests.

package.json

@@ -49,11 +49,11 @@
     "@babel/traverse": "^7.23.4",
     "@babel/types": "^7.23.4",
     "@miksu/prettier": "^1.18.6",
-    "@miksu/react-tiny-popover": "^3.5.1",
     "copy-to-clipboard": "^3.3.3",
     "lodash": "^4.17.21",
     "prism-react-renderer": "^2.3.0",
-    "react-simple-code-editor": "^0.13.1"
+    "react-simple-code-editor": "^0.13.1",
+    "react-tiny-popover": "^8.0.4"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.23.3",

src/ui/error.tsx

@@ -5,7 +5,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import * as React from "react";
-import Popover from "@miksu/react-tiny-popover";
+import { Popover } from "react-tiny-popover";
 import { formatBabelError, frameError, getStyles } from "../utils";
 import type { TErrorProps } from "../types";
 
@@ -17,7 +17,7 @@ const PopupError: React.FC<{ enabled: boolean; children: React.ReactNode }> = ({
   return (
     <Popover
       isOpen={enabled}
-      position={"bottom"}
+      positions={"bottom"}
       content={<div>{children}</div>}
     >
       <div />

src/ui/knob.tsx

@@ -5,7 +5,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import * as React from "react";
-import Popover from "@miksu/react-tiny-popover";
+import { Popover } from "react-tiny-popover";
 import type { TPropValue, TImportsConfig } from "../types";
 import Error from "./error";
 import Editor from "./editor";
@@ -56,11 +56,11 @@ const Label: React.FC<{
   return (
     <Popover
       isOpen={Boolean(isHover)}
-      position={"top"}
+      positions={"top"}
       content={<div>{tooltip}</div>}
+      ref={hoverRef as any}
     >
       <label
-        ref={hoverRef as any}
         style={{
           fontWeight: 500,
           lineHeight: "20px",
@@ -83,11 +83,11 @@ const BooleanKnob: React.FC<{
   return (
     <Popover
       isOpen={Boolean(isHover)}
-      position={"top"}
+      positions={"top"}
       content={<div>{tooltip}</div>}
+      ref={hoverRef as any}
     >
       <div
-        ref={hoverRef as any}
         style={{
           display: "flex",
           alignItems: "center",