Merge pull request #3470 from quantified-uncertainty/storybook-fixes

Storybook fix + React 19 everywhere
quantified-uncertainty · Dec 27, 2024 · b6d36be · b6d36be
2 parents dfcb095 + 4f8afb5
commit b6d36be
Show file tree

Hide file tree

Showing 22 changed files with 1,189 additions and 1,393 deletions.
diff --git a/apps/hub/package.json b/apps/hub/package.json
@@ -46,13 +46,13 @@
     "next-safe-action": "^7.9.9",
     "nodemailer": "^6.9.13",
     "pako": "^2.1.0",
-    "react": "19.0.0-rc-66855b96-20241106",
-    "react-dom": "19.0.0-rc-66855b96-20241106",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-hook-form": "^7.53.2",
     "react-icons": "^5.2.1",
     "react-loading-skeleton": "^3.4.0",
     "react-markdown": "^9.0.1",
-    "react-select": "^5.8.0",
+    "react-select": "^5.9.0",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.0",
     "server-only": "^0.0.1",
@@ -67,7 +67,7 @@
     "@types/lodash": "^4.14.202",
     "@types/node": "^20.12.7",
     "@types/pako": "^2.0.3",
-    "@types/react": "^18.3.3",
+    "@types/react": "^19.0.2",
     "dotenv-cli": "^7.4.2",
     "esbuild": "^0.20.2",
     "eslint": "^9.16.0",

diff --git a/apps/website/package.json b/apps/website/package.json
@@ -31,8 +31,8 @@
     "katex": "^0.16.11",
     "next": "^15.1.3",
     "pako": "^2.1.0",
-    "react": "19.0.0-rc-cae764ce-20241025",
-    "react-dom": "19.0.0-rc-cae764ce-20241025",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-icons": "^5.2.1",
     "rehype-katex": "^7.0.1",
     "rehype-pretty-code": "^0.14.0",
@@ -47,7 +47,7 @@
     "@quri/squiggle-textmate-grammar": "workspace:*",
     "@types/mdx": "^2.0.13",
     "@types/pako": "^2.0.3",
-    "@types/react": "^18.3.3",
+    "@types/react": "^19.0.2",
     "autoprefixer": "^10.4.19",
     "eslint": "^9.16.0",
     "eslint-config-next": "^15.0.4",

diff --git a/internal-packages/versioned-components/package.json b/internal-packages/versioned-components/package.json
@@ -43,20 +43,20 @@
     "@types/json-diff": "^1.0.3",
     "@types/lodash": "^4.14.202",
     "@types/node": "^22.10.2",
-    "@types/react": "^18.3.3",
+    "@types/react": "^19.0.2",
     "@typescript-eslint/eslint-plugin": "^8.17.0",
     "@typescript-eslint/parser": "^8.17.0",
     "eslint": "^9.16.0",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "tailwindcss": "^3.4.14",
     "typescript": "^5.6.3"
   },
   "peerDependencies": {
-    "react": "^18",
-    "react-dom": "^18"
+    "react": "^18 | ^19",
+    "react-dom": "^18 | ^19"
   },
   "type": "module",
   "exports": {

diff --git a/package.json b/package.json
@@ -17,7 +17,8 @@
   },
   "pnpm": {
     "overrides": {
-      "@headlessui/react": "^2.2.0"
+      "@headlessui/react": "^2.2.0",
+      "react-reconciler": "^0.31.0"
     },
     "patchedDependencies": {
       "react-select": "patches/react-select.patch"

diff --git a/packages/components/.storybook/preview.tsx b/packages/components/.storybook/preview.tsx
@@ -1,7 +1,6 @@
 import "../src/styles/full.css";
 
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
     matchers: {
       color: /(background|color)$/i,

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -51,10 +51,10 @@
     "@lezer/highlight": "^1.2.1",
     "@lezer/lr": "^1.4.2",
     "@quri/configs": "workspace:*",
-    "@storybook/addon-essentials": "^8.1.6",
-    "@storybook/addon-links": "^8.1.6",
-    "@storybook/react": "^8.1.6",
-    "@storybook/react-vite": "^8.1.6",
+    "@storybook/addon-essentials": "8.4.7",
+    "@storybook/addon-links": "8.4.7",
+    "@storybook/react": "8.4.7",
+    "@storybook/react-vite": "8.4.7",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -63,8 +63,8 @@
     "@types/jest": "^29.5.12",
     "@types/lodash": "^4.14.202",
     "@types/node": "^20.12.7",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
     "@types/unist": "^3.0.2",
     "@typescript-eslint/eslint-plugin": "^8.17.0",
     "@typescript-eslint/parser": "^8.17.0",
@@ -79,17 +79,17 @@
     "jsdom": "^25.0.1",
     "postcss": "^8.4.38",
     "postcss-cli": "^11.0.0",
-    "react": "19.0.0-rc-66855b96-20241106",
-    "react-dom": "19.0.0-rc-66855b96-20241106",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "rollup-plugin-node-builtins": "^2.1.2",
-    "storybook": "^8.1.6",
+    "storybook": "8.4.7",
     "tailwindcss": "^3.4.3",
     "typescript": "5.6.3",
     "vite": "^5.2.10"
   },
   "peerDependencies": {
-    "react": "^18",
-    "react-dom": "^18"
+    "react": "^18 | ^19",
+    "react-dom": "^18 | ^19"
   },
   "scripts": {
     "start": "pnpm dev",

diff --git a/packages/components/src/components/SquigglePlayground/ResizableTwoPanelLayout.tsx b/packages/components/src/components/SquigglePlayground/ResizableTwoPanelLayout.tsx
@@ -84,7 +84,8 @@ export const ResizableTwoPanelLayout: FC<Props> = ({
       <div className={clsx("relative", !width && "w-1/2")} style={{ width }}>
         {renderLeft()}
         <DraggableCore
-          nodeRef={handleRef}
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          nodeRef={handleRef as any} // react-draggable is old and its types are wrong
           onStop={resizeHandler("onResizeStop")}
           onStart={resizeHandler("onResizeStart")}
           onDrag={resizeHandler("onResize")}

diff --git a/packages/components/src/components/SquiggleViewer/ValueViewer/Title.tsx b/packages/components/src/components/SquiggleViewer/ValueViewer/Title.tsx
@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import compact from "lodash/compact.js";
-import { FC, useMemo } from "react";
+import { FC, ReactElement, useMemo } from "react";
 
 import { SqValue, SqValuePath } from "@quri/squiggle-lang";
 import { CodeBracketIcon } from "@quri/ui";
@@ -30,7 +30,7 @@ type StandardProps = {
   color?: string;
   textSize?: string;
   font?: string;
-  icon?: JSX.Element;
+  icon?: ReactElement;
   showColon?: boolean;
   isFocusEnabled?: boolean;
 };

diff --git a/packages/components/src/components/ui/Alert.tsx b/packages/components/src/components/ui/Alert.tsx
@@ -4,16 +4,16 @@ import {
   XCircleIcon,
 } from "@heroicons/react/solid/esm/index.js";
 import { clsx } from "clsx";
-import * as React from "react";
+import { Children, ComponentProps, FC, ReactElement, ReactNode } from "react";
 
-export const Alert: React.FC<{
+export const Alert: FC<{
   heading: string;
   backgroundColor: string;
   headingColor: string;
   bodyColor: string;
-  icon: (props: React.ComponentProps<"svg">) => JSX.Element;
+  icon: (props: ComponentProps<"svg">) => ReactElement;
   iconColor: string;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }> = ({
   heading = "Error",
   backgroundColor,
@@ -37,7 +37,7 @@ export const Alert: React.FC<{
           <header className={clsx("text-sm font-medium", headingColor)}>
             {heading}
           </header>
-          {children && React.Children.count(children) ? (
+          {children && Children.count(children) ? (
             <div className={clsx("mt-1 text-sm", bodyColor)}>{children}</div>
           ) : null}
         </div>
@@ -46,9 +46,9 @@ export const Alert: React.FC<{
   );
 };
 
-export const ErrorAlert: React.FC<{
+export const ErrorAlert: FC<{
   heading: string;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }> = (props) => (
   <Alert
     {...props}
@@ -60,9 +60,9 @@ export const ErrorAlert: React.FC<{
   />
 );
 
-export const MessageAlert: React.FC<{
+export const MessageAlert: FC<{
   heading: string;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }> = (props) => (
   <Alert
     {...props}
@@ -74,9 +74,9 @@ export const MessageAlert: React.FC<{
   />
 );
 
-export const SuccessAlert: React.FC<{
+export const SuccessAlert: FC<{
   heading: string;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }> = (props) => (
   <Alert
     {...props}

diff --git a/packages/components/src/components/ui/PanelWithToolbar/ToolbarItem.tsx b/packages/components/src/components/ui/PanelWithToolbar/ToolbarItem.tsx
@@ -1,6 +1,6 @@
 "use client";
 import { clsx } from "clsx";
-import { ComponentType, FC, ReactNode } from "react";
+import { ComponentType, FC, ReactElement, ReactNode } from "react";
 
 import { TextTooltip } from "@quri/ui";
 
@@ -23,7 +23,7 @@ export const ToolbarItem: FC<Props> = ({
   tooltipText,
   children,
 }) => {
-  const withTooltip = (jsx: JSX.Element) => (
+  const withTooltip = (jsx: ReactElement) => (
     <TextTooltip text={tooltipText || ""} placement="bottom" offset={5}>
       {jsx}
     </TextTooltip>

diff --git a/packages/components/src/components/ui/Toggle.tsx b/packages/components/src/components/ui/Toggle.tsx
@@ -1,8 +1,8 @@
 import { RefreshIcon } from "@heroicons/react/solid/esm/index.js";
 import { clsx } from "clsx";
-import React from "react";
+import { ComponentProps, FC, ReactElement } from "react";
 
-type IconType = (props: React.ComponentProps<"svg">) => JSX.Element;
+type IconType = (props: ComponentProps<"svg">) => ReactElement;
 
 type Props = {
   status: boolean;
@@ -12,7 +12,7 @@ type Props = {
   spinIcon?: boolean;
 };
 
-export const Toggle: React.FC<Props> = ({
+export const Toggle: FC<Props> = ({
   status,
   onChange,
   texts: [onText, offText],

diff --git a/packages/components/src/stories/SquigglePlayground.stories.tsx b/packages/components/src/stories/SquigglePlayground.stories.tsx
@@ -187,11 +187,6 @@ export x=1`,
 export const ManyTypes: Story = {
   name: "Many types",
   args: {
-    linker,
-    onOpenExport: (sourceId, varName) => {
-      // eslint-disable-next-line no-console
-      console.log("Clicked Export with params", sourceId, varName);
-    },
     defaultCode: `import "hub:source1" as s1  
 import "source2" as s2
 
@@ -231,6 +226,16 @@ export varScatter = Plot.scatter({
 `,
     height: 800,
   },
+  render: (args) => (
+    <Component
+      {...args}
+      linker={linker}
+      onOpenExport={(sourceId, varName) => {
+        // eslint-disable-next-line no-console
+        console.log("Clicked Export with params", sourceId, varName);
+      }}
+    />
+  ),
 };
 
 export const SpecialList: Story = {

diff --git a/packages/components/src/stories/SquiggleViewer.stories.tsx b/packages/components/src/stories/SquiggleViewer.stories.tsx
@@ -15,10 +15,12 @@ type Story = StoryObj<typeof meta>;
 
 const output = await run("[1, { dist: 2 to 3 }]");
 
-if (!output.result.ok) {
-  throw new Error("Expected an ok result");
-}
-
 export const Basic: Story = {
-  args: { value: output.result.value.result },
+  render: () => {
+    if (!output.result.ok) {
+      throw new Error("Expected an ok result");
+    }
+
+    return <Component value={output.result.value.result} />;
+  },
 };
diff --git a/packages/components/src/widgets/LambdaWidget/FunctionChart/DistFunctionChart.tsx b/packages/components/src/widgets/LambdaWidget/FunctionChart/DistFunctionChart.tsx
@@ -212,7 +212,7 @@ function useDrawDistFunctionChart({
   const d3ref = useRef<{
     frame: CartesianFrame;
     xScale: d3.ScaleContinuousNumeric<number, number, never>;
-  }>();
+  }>(null);
 
   // Convert canvas coordinates to plot coordniates
   const cursorX: number | undefined = useMemo(() => {

diff --git a/packages/squiggle-lang/package.json b/packages/squiggle-lang/package.json
@@ -41,7 +41,6 @@
     "jstat": "^1.9.6",
     "lodash": "^4.17.21",
     "open": "^10.1.0",
-    "react": "^18.2.0",
     "web-worker": "^1.2.0"
   },
   "devDependencies": {
@@ -55,7 +54,7 @@
     "@types/jest": "^29.5.12",
     "@types/lodash": "^4.14.202",
     "@types/node": "^20.12.7",
-    "@types/react": "^18.3.3",
+    "@types/react": "^19.0.2",
     "@typescript-eslint/eslint-plugin": "^8.17.0",
     "@typescript-eslint/parser": "^8.17.0",
     "codecov": "^3.8.3",
@@ -66,9 +65,15 @@
     "jest": "^29.7.0",
     "peggy": "^4.0.2",
     "prettier": "^3.3.3",
+    "react": "^19.0.0",
+    "react-reconciler": "^0.31.0",
     "ts-node": "^10.9.2",
     "typescript": "^5.6.3"
   },
+  "peerDependencies": {
+    "react": "^18 | ^19",
+    "react-reconciler": "^0.31.0"
+  },
   "files": [
     "dist",
     "bin",

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -46,9 +46,9 @@
     "@floating-ui/react": "^0.26.16",
     "@headlessui/react": "^2.2.0",
     "clsx": "^2.1.1",
-    "framer-motion": "^11.0.3",
+    "framer-motion": "^11.15.0",
     "react-colorful": "^5.6.1",
-    "react-select": "^5.8.0",
+    "react-select": "^5.9.0",
     "react-textarea-autosize": "8.5.4",
     "react-use": "^17.5.0"
   },
@@ -64,8 +64,8 @@
     "@storybook/testing-library": "^0.2.2",
     "@tailwindcss/forms": "^0.5.7",
     "@types/node": "^20.17.6",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
     "@typescript-eslint/eslint-plugin": "^8.17.0",
     "@typescript-eslint/parser": "^8.17.0",
     "autoprefixer": "^10.4.19",
@@ -75,8 +75,8 @@
     "postcss-cli": "^11.0.0",
     "prettier": "^3.3.3",
     "prop-types": "^15.8.1",
-    "react": "19.0.0-rc-66855b96-20241106",
-    "react-dom": "19.0.0-rc-66855b96-20241106",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-hook-form": "^7.53.2",
     "rollup-plugin-node-builtins": "^2.1.2",
     "storybook": "^8.4.7",