Update all dependencies to their latest version + remove all workarou…

…nd we had for react-aria-components prior to version 1.2 (#255)
gsoft-inc · May 7, 2024 · b6fee7a · b6fee7a
2 parents 49f0615 + 43374e6
commit b6fee7a
Show file tree

Hide file tree

Showing 33 changed files with 3,985 additions and 4,879 deletions.
diff --git a/apps/docs/app/pages/landing/page.tsx b/apps/docs/app/pages/landing/page.tsx
@@ -2,12 +2,11 @@
 
 import { Button as HopperButton, HopperProvider } from "@hopper-ui/components";
 import Image from "next/image";
-import { AccessibleIcon, ArrowIcon, DarkModeIcon, FontSizeIcon, InternationalIcon, LineHeightIcon, MarginIcon, SelectArrowIcon, TypescriptIcon } from "../../../components/icon/index";
 import { type ColorScheme, ThemeContext } from "@/context/theme/ThemeProvider.tsx";
 import { useContext } from "react";
 import Button from "@/components/button/Button";
 import Tag from "@/components/tag/Tag";
-import { ExternalLinkIcon, Icon } from "@/components/icon";
+import { ExternalLinkIcon, Icon, AccessibleIcon, ArrowIcon, DarkModeIcon, FontSizeIcon, InternationalIcon, LineHeightIcon, MarginIcon, SelectArrowIcon, TypescriptIcon } from "@/components/icon";
 
 // eslint-disable-next-line max-len
 import { CalendarIcon, ChartBarIcon, CheckmarkIcon, DeleteIcon, EyeVisibleIcon, FilterIcon, FocusIcon, ItalicIcon, LightbulbIcon, LockIcon, MailIcon, NotebookIcon, PinIcon, ProfileIcon, ReactionIcon, RecurringIcon, RewindIcon, SearchIcon, ShareIcon, StarIcon, StickyIcon, SyncIcon, TeamIcon, ThumbsUpIcon, UnarchiveIcon, WarningIcon } from "@hopper-ui/icons";

diff --git a/apps/docs/next.config.js b/apps/docs/next.config.js
@@ -5,7 +5,7 @@ const nextConfig = {
     reactStrictMode: true,
     swcMinify: true,
     pageExtensions: ["ts", "tsx", "js", "jsx", "md", "mdx"],
-    transpilePackages: ["@hopper-ui"],
+    transpilePackages: ["@hopper-ui", "shiki"],
     images: {
         unoptimized: true,
         remotePatterns: [

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -15,45 +15,45 @@
         "build:componentData": "tsx scripts/generateComponentData.mts"
     },
     "dependencies": {
-        "clsx": "2.1.0",
+        "clsx": "2.1.1",
         "contentlayer": "0.3.4",
-        "next": "14.1.4",
+        "next": "14.2.3",
         "next-contentlayer": "0.3.4",
         "next-mdx-remote": "^4.4.1",
-        "react": "18.2.0",
-        "react-aria-components": "1.1.1",
-        "react-dom": "18.2.0",
+        "react": "18.3.1",
+        "react-aria-components": "1.2.0",
+        "react-dom": "18.3.1",
         "react-toggle": "4.1.3",
         "rehype-parse": "^9.0.0",
-        "rehype-pretty-code": "0.13.0",
+        "rehype-pretty-code": "0.13.1",
         "rehype-react": "^8.0.0",
         "unified": "11.0.4",
         "unist-util-visit": "5.0.0"
     },
     "devDependencies": {
-        "@codesandbox/sandpack-react": "^2.13.5",
+        "@codesandbox/sandpack-react": "^2.13.10",
         "@hopper-ui/components": "workspace:*",
         "@hopper-ui/icons": "workspace:*",
         "@hopper-ui/tokens": "workspace:*",
-        "@storybook/addon-essentials": "8.0.2",
-        "@storybook/addon-interactions": "8.0.2",
-        "@storybook/addon-links": "8.0.2",
-        "@storybook/blocks": "8.0.2",
-        "@storybook/nextjs": "8.0.2",
-        "@storybook/react": "8.0.2",
+        "@storybook/addon-essentials": "8.0.10",
+        "@storybook/addon-interactions": "8.0.10",
+        "@storybook/addon-links": "8.0.10",
+        "@storybook/blocks": "8.0.10",
+        "@storybook/nextjs": "8.0.10",
+        "@storybook/react": "8.0.10",
         "@storybook/testing-library": "0.2.2",
         "@svgr/webpack": "8.1.0",
-        "@types/node": "20.11.30",
-        "@types/react": "18.2.67",
-        "@types/react-dom": "18.2.22",
+        "@types/node": "20.12.10",
+        "@types/react": "18.3.1",
+        "@types/react-dom": "18.3.0",
         "eslint": "8.57.0",
-        "eslint-config-next": "14.1.4",
+        "eslint-config-next": "14.2.3",
         "eslint-plugin-storybook": "0.8.0",
         "react-docgen-typescript": "^2.2.2",
-        "shiki": "^1.3.0",
-        "storybook": "8.0.2",
+        "shiki": "^1.4.0",
+        "storybook": "8.0.10",
         "tsconfig-paths-webpack-plugin": "4.1.0",
-        "typescript": "5.4.2"
+        "typescript": "5.4.5"
     },
     "browser": {
         "fs": false

diff --git a/package.json b/package.json
@@ -12,13 +12,12 @@
         "type": "git",
         "url": "git+https://github.com/gsoft-inc/wl-hopper.git"
     },
-    "packageManager": "[email protected]",
     "scripts": {
         "doc:start": "pnpm --filter=docs dev",
         "doc:storybook": "pnpm --filter=docs storybook",
         "doc:build": "pnpm --filter=docs build",
         "test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest",
-        "build": "pnpm -r build",
+        "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 pnpm -r build",
         "test-storybook": "test-storybook",
         "build:tokens": "pnpm --filter=\"@hopper-ui/tokens\" build",
         "build:pkg": "cross-env NODE_OPTIONS=--max-old-space-size=8192 pnpm -r --filter \"{packages/**}\" build ",
@@ -37,52 +36,53 @@
         "storybook-nolazy": "cross-env STORYBOOK_NO_LAZY=true pnpm run storybook",
         "build-storybook": "storybook build",
         "list-outdated-deps": "pnpm outdated -r --format list",
-        "update-outdated-deps": "pnpm update -r --latest",
+        "update-outdated-deps": "pnpm update -r --latest \"!eslint\"",
         "plop": "plop"
     },
     "devDependencies": {
         "@changesets/cli": "2.27.1",
-        "@chromatic-com/storybook": "1.2.24",
+        "@chromatic-com/storybook": "1.3.4",
         "@hopper-ui/tokens": "workspace:*",
-        "@internationalized/string-compiler": "3.2.2",
-        "@netlify/plugin-nextjs": "4.41.3",
-        "@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
-        "@storybook/addon-a11y": "8.0.2",
-        "@storybook/addon-essentials": "8.0.2",
-        "@storybook/addon-interactions": "8.0.2",
-        "@storybook/addon-links": "8.0.2",
-        "@storybook/addon-mdx-gfm": "8.0.2",
+        "@internationalized/string-compiler": "3.2.3",
+        "@netlify/plugin-nextjs": "5.2.1",
+        "@pmmmwh/react-refresh-webpack-plugin": "0.5.13",
+        "@storybook/addon-a11y": "8.0.10",
+        "@storybook/addon-essentials": "8.0.10",
+        "@storybook/addon-interactions": "8.0.10",
+        "@storybook/addon-links": "8.0.10",
+        "@storybook/addon-mdx-gfm": "8.0.10",
         "@storybook/addon-webpack5-compiler-swc": "1.0.2",
-        "@storybook/blocks": "8.0.2",
-        "@storybook/react": "8.0.2",
-        "@storybook/react-webpack5": "8.0.2",
-        "@storybook/test": "8.0.2",
+        "@storybook/blocks": "8.0.10",
+        "@storybook/react": "8.0.10",
+        "@storybook/react-webpack5": "8.0.10",
+        "@storybook/test": "8.0.10",
         "@storybook/test-runner": "0.17.0",
         "@types/jest": "29.5.12",
-        "@types/node": "20.11.30",
-        "@workleap/eslint-plugin": "3.1.0",
+        "@types/node": "20.12.10",
+        "@workleap/eslint-plugin": "3.2.2",
         "@workleap/stylelint-configs": "2.0.3",
         "@workleap/typescript-configs": "3.0.2",
         "axe-playwright": "2.0.1",
         "cross-env": "7.0.3",
+        "eslint": "8.57.0",
         "eslint-plugin-hopper-monorepo": "workspace:*",
         "eslint-plugin-storybook": "0.8.0",
         "jest": "29.7.0",
         "plop": "4.0.1",
         "prettier": "3.2.5",
         "prop-types": "15.8.1",
-        "react": "18.2.0",
-        "react-dom": "18.2.0",
-        "react-refresh": "0.14.0",
-        "react-router-dom": "6.22.3",
-        "storybook": "8.0.2",
-        "stylelint": "16.3.1",
+        "react": "18.3.1",
+        "react-dom": "18.3.1",
+        "react-refresh": "0.14.2",
+        "react-router-dom": "6.23.0",
+        "storybook": "8.0.10",
+        "stylelint": "16.5.0",
         "stylelint-config-clean-order": "5.4.2",
         "stylelint-use-logical": "2.1.2",
         "ts-jest": "29.1.2",
         "ts-node": "10.9.2",
         "tsconfig-paths-webpack-plugin": "4.1.0",
-        "tsx": "4.7.1"
+        "tsx": "4.9.3"
     },
     "bugs": {
         "url": "https://github.com/gsoft-inc/wl-hopper/issues"

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -44,39 +44,41 @@
         "react-dom": "^18"
     },
     "dependencies": {
-        "@hopper-ui/icons": "*",
-        "@react-aria/utils": "^3.23.2",
-        "clsx": "^2.1.0"
+        "@hopper-ui/icons": "^1.10.1",
+        "@react-aria/utils": "^3.24.0",
+        "@react-types/shared": "^3.23.0",
+        "clsx": "^2.1.1"
     },
     "devDependencies": {
         "@hopper-ui/icons": "workspace:*",
         "@hopper-ui/styled-system": "workspace:*",
-        "@swc/core": "1.4.8",
-        "@swc/helpers": "0.5.7",
+        "@swc/core": "1.5.3",
+        "@swc/helpers": "0.5.11",
         "@swc/jest": "0.2.36",
-        "@testing-library/jest-dom": "6.4.2",
-        "@testing-library/react": "15.0.2",
+        "@testing-library/jest-dom": "6.4.5",
+        "@testing-library/react": "15.0.7",
         "@testing-library/user-event": "14.5.2",
         "@types/jest": "29.5.12",
-        "@types/react": "18.2.67",
-        "@types/react-dom": "18.2.22",
-        "@types/react-test-renderer": "18.0.7",
-        "@workleap/eslint-plugin": "3.1.0",
+        "@types/react": "18.3.1",
+        "@types/react-dom": "18.3.0",
+        "@types/react-test-renderer": "18.3.0",
+        "@workleap/eslint-plugin": "3.2.2",
         "@workleap/swc-configs": "2.2.3",
-        "@workleap/tsup-configs": "3.0.4",
+        "@workleap/tsup-configs": "3.0.6",
         "@workleap/typescript-configs": "3.0.2",
+        "eslint": "8.57.0",
         "identity-obj-proxy": "3.0.0",
         "jest": "29.7.0",
         "jest-environment-jsdom": "29.7.0",
         "jest-fail-on-console": "3.2.0",
         "jest-fetch-mock": "3.0.3",
-        "react": "18.2.0",
-        "react-aria": "3.32.1",
-        "react-aria-components": "1.1.1",
-        "react-dom": "18.2.0",
-        "react-test-renderer": "18.2.0",
+        "react": "18.3.1",
+        "react-aria": "3.33.0",
+        "react-aria-components": "1.2.0",
+        "react-dom": "18.3.1",
+        "react-test-renderer": "18.3.1",
         "ts-jest": "29.1.2",
         "tsup": "8.0.2",
-        "typescript": "5.4.2"
+        "typescript": "5.4.5"
     }
 }
diff --git a/packages/components/src/HopperProvider/src/HopperProvider.tsx b/packages/components/src/HopperProvider/src/HopperProvider.tsx
@@ -1,4 +1,5 @@
 import { StyledSystemProvider, type StyledSystemProviderProps } from "@hopper-ui/styled-system";
+import type { Href, RouterOptions } from "@react-types/shared";
 import clsx from "clsx";
 import { forwardRef, type ForwardedRef } from "react";
 import { I18nProvider, RouterProvider } from "react-aria-components";
@@ -14,8 +15,39 @@ export interface HopperProviderProps extends StyledSystemProviderProps {
 
     /**
      * Set this up once in the root of your app, and any Hopper component with the href prop will automatically navigate using your router.
+     * This prop should be set to a function received from your router for performing a client side navigation programmatically.
+     * @example
+     * import {RouterProvider} from 'react-aria-components';
+     * import {useNavigate, useHref} from 'your-router';
+     *
+     * function App() {
+     *   let navigate = useNavigate();
+     *
+     *   return (
+     *     <RouterProvider navigate={navigate} useHref={useHref}>
+     *         // ...
+     *     </RouterProvider>
+     *   );
+     * }
      */
-    navigate?: (path: string) => void;
+    navigate?: (path: Href, routerOptions: RouterOptions | undefined) => void;
+    /**
+     * useHref is an optional prop that converts a router-specific href to a native HTML href, e.g. prepending a base path.
+     * @example
+     * import {RouterProvider} from 'react-aria-components';
+     * import {useNavigate, useHref} from 'your-router';
+     *
+     * function App() {
+     *   let navigate = useNavigate();
+     *
+     *   return (
+     *     <RouterProvider navigate={navigate} useHref={useHref}>
+     *         // ...
+     *     </RouterProvider>
+     *   );
+     * }
+     */
+    useHref?: (href: Href) => string;
 }
 
 const HopperProvider = (props:HopperProviderProps, ref: ForwardedRef<HTMLDivElement>) => {
@@ -27,6 +59,7 @@ const HopperProvider = (props:HopperProviderProps, ref: ForwardedRef<HTMLDivElem
         withCssVariables = true,
         className,
         navigate,
+        useHref,
         ...rest
     } = props;
 
@@ -37,7 +70,7 @@ const HopperProvider = (props:HopperProviderProps, ref: ForwardedRef<HTMLDivElem
 
     let content = children;
     if (navigate) {
-        content = <RouterProvider navigate={navigate}>{children}</RouterProvider>;
+        content = <RouterProvider navigate={navigate} useHref={useHref}>{children}</RouterProvider>;
     }
 
     return (

diff --git a/packages/components/src/IconList/src/IconList.tsx b/packages/components/src/IconList/src/IconList.tsx
@@ -13,9 +13,6 @@ import styles from "./IconList.module.css";
 
 export const GlobalIconListCssSelector = "hop-IconList";
 
-// Won't be needed in next react-aria-components release: https://github.com/adobe/react-spectrum/pull/5850
-const DefaultIconListSlot = "icon";
-
 export interface IconListProps extends StyledSystemProps, BaseComponentProps {
     /**
     * The size of the icon.
@@ -24,7 +21,7 @@ export interface IconListProps extends StyledSystemProps, BaseComponentProps {
 }
 
 function IconList(props:IconListProps, ref: ForwardedRef<HTMLSpanElement>) {
-    [props, ref] = useContextProps({ ...props, slot: props.slot || DefaultIconListSlot }, ref, IconListContext);
+    [props, ref] = useContextProps(props, ref, IconListContext);
 
     const { stylingProps, ...ownProps } = useStyledSystem(props);
     const { children, style, className, slot, size, ...otherProps } = ownProps;

diff --git a/packages/components/src/Label/src/Label.tsx b/packages/components/src/Label/src/Label.tsx
@@ -12,9 +12,6 @@ import styles from "./Label.module.css";
 
 export const GlobalLabelCssSelector = "hop-Label";
 
-// Won't be needed in next react-aria-components release: https://github.com/adobe/react-spectrum/pull/5850
-const DefaultLabelSlot = "label";
-
 export type RACLabelPropsToOmit = "elementType";
 
 // TODO: Add necessityIndicator and required Props
@@ -27,7 +24,7 @@ export interface LabelProps extends StyledComponentProps<Omit<RACLabelProps, RAC
 }
 
 function Label(props:LabelProps, ref: ForwardedRef<HTMLLabelElement>) {
-    [props, ref] = useContextProps({ ...props, slot: props.slot || DefaultLabelSlot }, ref, LabelContext);
+    [props, ref] = useContextProps(props, ref, LabelContext);
     const { stylingProps, ...ownProps } = useStyledSystem(props);
     const { className, size: sizeProp, children, style, ...otherProps } = ownProps;
 

diff --git a/packages/components/src/Link/src/Link.tsx b/packages/components/src/Link/src/Link.tsx
@@ -2,7 +2,7 @@ import { IconContext, type IconProps } from "@hopper-ui/icons";
 import { useResponsiveValue, useStyledSystem } from "@hopper-ui/styled-system";
 import type { StyledComponentProps, ResponsiveProp } from "@hopper-ui/styled-system";
 import { forwardRef, type ForwardedRef } from "react";
-import { useContextProps, type LinkProps as RACLinkProps, composeRenderProps, Link as RACLink } from "react-aria-components";
+import { useContextProps, type LinkProps as RACLinkProps, composeRenderProps, Link as RACLink, DEFAULT_SLOT } from "react-aria-components";
 
 import { IconListContext } from "../../IconList/index.ts";
 import { Text, TextContext } from "../../Text/index.ts";
@@ -14,9 +14,6 @@ import styles from "./Link.module.css";
 
 export const GlobalLinkCssSelector = "hop-Link";
 
-// Won't be needed in next react-aria-components release: https://github.com/adobe/react-spectrum/pull/5850
-const DefaultLinkSlot = "link";
-
 export interface LinkProps extends StyledComponentProps<RACLinkProps>{
     /**
      * The visual style of the link.
@@ -51,7 +48,7 @@ const LinkToIconSizeAdapter = {
 } as const satisfies SizeAdapter<LinkProps["size"], IconProps["size"]>;
 
 function Link(props:LinkProps, ref: ForwardedRef<HTMLAnchorElement>) {
-    [props, ref] = useContextProps({ ...props, slot: props.slot ?? DefaultLinkSlot }, ref, LinkContext);
+    [props, ref] = useContextProps(props, ref, LinkContext);
     const { stylingProps, ...ownProps } = useStyledSystem(props);
     const {
         className,
@@ -103,7 +100,7 @@ function Link(props:LinkProps, ref: ForwardedRef<HTMLAnchorElement>) {
             values={[
                 [IconListContext, {
                     slots: {
-                        icon: {
+                        [DEFAULT_SLOT]: {
                             color: "inherit",
                             size: iconSize,
                             className: styles["hop-Link__icon-list"]
@@ -117,7 +114,7 @@ function Link(props:LinkProps, ref: ForwardedRef<HTMLAnchorElement>) {
                 }],
                 [IconContext, {
                     slots: {
-                        icon: {
+                        [DEFAULT_SLOT]: {
                             color: "inherit",
                             size: iconSize,
                             className: styles["hop-Link__icon"]