feat!: Upgrade packages (#482)

README.md

@@ -35,7 +35,7 @@ Checklist for creating a new component:
 
 ## Contributing
 
-We use semantic pr conventions for all prs, if you want a commit to be present in a release, be sure to prefix its commit message with either `feat:` or `fix:`
+We use semantic pr conventions for all prs, if you want a commit to be present in a release, be sure to prefix its commit message with either `feat:` or `fix:`. Use `fix!:` or `feat!:` for breaking changes to trigger a major version.
 
 ## License
 

package.json

@@ -27,53 +27,38 @@
   "dependencies": {
     "@floating-ui/react-dom-interactions": "0.13.3",
     "@loomhq/loom-embed": "1.5.0",
-    "@markdoc/markdoc": "0.2.2",
-    "@monaco-editor/react": "4.4.6",
-    "@react-aria/button": "3.7.1",
-    "@react-aria/checkbox": "3.9.0",
-    "@react-aria/combobox": "3.6.0",
-    "@react-aria/focus": "3.12.0",
-    "@react-aria/interactions": "3.15.0",
-    "@react-aria/listbox": "3.9.0",
-    "@react-aria/overlays": "3.14.0",
-    "@react-aria/radio": "3.6.0",
-    "@react-aria/select": "3.10.0",
-    "@react-aria/slider": "3.4.0",
-    "@react-aria/tabs": "3.5.0",
-    "@react-aria/utils": "3.16.0",
-    "@react-aria/visually-hidden": "3.8.0",
-    "@react-stately/collections": "3.7.0",
-    "@react-stately/combobox": "3.5.0",
-    "@react-stately/overlays": "3.5.1",
-    "@react-stately/radio": "3.8.0",
-    "@react-stately/slider": "3.3.1",
-    "@react-stately/tabs": "3.4.0",
-    "@react-stately/toggle": "3.5.1",
-    "@react-types/shared": "3.18.0",
+    "@markdoc/markdoc": "0.3.0",
+    "@monaco-editor/react": "4.5.1",
+    "@react-aria/utils": "3.17.0",
+    "@react-stately/utils": "3.6.0",
+    "@react-types/shared": "3.18.1",
     "@tanstack/match-sorter-utils": "8.8.4",
     "@tanstack/react-table": "8.9.1",
     "@tanstack/react-virtual": "3.0.0-beta.54",
     "@types/chroma-js": "2.4.0",
+    "@types/lodash-es": "4.17.7",
     "chroma-js": "2.4.2",
     "classnames": "2.3.2",
-    "grommet": "2.29.1",
-    "grommet-icons": "4.9.0",
-    "highlight.js": "11.7.0",
+    "grommet": "2.32.2",
+    "grommet-icons": "4.10.0",
+    "highlight.js": "11.8.0",
     "honorable-recipe-mapper": "0.2.0",
-    "immer": "9.0.21",
+    "immer": "10.0.2",
+    "lodash-es": "4.17.21",
     "moment": "2.29.4",
     "prop-types": "15.8.1",
-    "react-animate-height": "3.1.0",
+    "react-animate-height": "3.1.1",
+    "react-aria": "3.25.0",
     "react-embed": "3.6.0",
     "react-markdown": "8.0.7",
-    "react-merge-refs": "2.0.1",
+    "react-merge-refs": "2.0.2",
     "react-spring": "9.7.1",
+    "react-stately": "3.23.0",
     "react-use-measure": "2.1.1",
-    "react-virtual": "2.10.4",
     "rehype-raw": "6.1.1",
     "resize-observer-polyfill": "1.5.1",
     "styled-container-query": "1.3.5",
-    "use-immer": "0.8.1"
+    "use-immer": "0.9.0"
   },
   "devDependencies": {
     "@babel/core": "7.22.1",
@@ -94,47 +79,47 @@
     "@storybook/testing-library": "0.1.0",
     "@types/react-dom": "18.2.4",
     "@types/react-transition-group": "4.4.6",
-    "@types/styled-components": "5.1.26",
-    "@typescript-eslint/eslint-plugin": "5.59.6",
-    "@typescript-eslint/parser": "5.59.6",
+    "@typescript-eslint/eslint-plugin": "5.59.9",
+    "@typescript-eslint/parser": "5.59.9",
     "babel-loader": "9.1.2",
-    "eslint": "8.40.0",
+    "eslint": "8.42.0",
     "eslint-config-prettier": "8.8.0",
     "eslint-plugin-import": "2.27.5",
     "eslint-plugin-import-newlines": "1.3.1",
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-storybook": "0.6.12",
-    "firebase-tools": "11.23.1",
+    "firebase-tools": "11.30.0",
     "fuse.js": "6.6.2",
     "honorable": "1.0.0-beta.17",
     "honorable-theme-default": "1.0.0-beta.5",
     "http-server": "14.1.1",
     "husky": "8.0.3",
-    "jest-mock": "29.4.3",
+    "jest-mock": "29.5.0",
     "lint-staged": "13.2.2",
     "npm-run-all": "4.1.5",
     "prettier": "2.8.8",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-transition-group": "4.4.5",
-    "rimraf": "3.0.2",
-    "storybook": "7.0.12",
-    "styled-components": "5.3.11",
+    "rimraf": "5.0.1",
+    "storybook": "7.0.18",
+    "styled-components": "6.0.0-rc.3",
     "typescript": "4.9.5",
     "usehooks-ts": "2.9.1",
     "vite": "4.3.9"
   },
   "peerDependencies": {
-    "@emotion/react": ">=11.10.6",
-    "@emotion/styled": ">=11.10.6",
+    "@emotion/react": ">=11.11.0",
+    "@emotion/styled": ">=11.11.0",
     "honorable": ">=1.0.0-beta.17",
     "honorable-theme-default": ">=1.0.0-beta.5",
-    "react": ">=16.0.0",
-    "react-dom": ">=16.0.0",
-    "react-transition-group": ">=4.4.2",
-    "styled-components": ">=5.3.5"
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0",
+    "react-transition-group": ">=4.4.5",
+    "styled-components": ">=6.0.0-rc.3",
+    "typescript": ">=4.9.5"
   },
   "packageManager": "[email protected]",
   "resolutions": {

src/GlobalStyle.tsx

@@ -16,7 +16,7 @@ const colorsToCSSVars: (colors: unknown) => any = (colors) => {
   function inner(colors: unknown, prefix = '') {
     Object.entries(colors).forEach(([key, value]) => {
       if (typeof value === 'string') {
-        cssVars[`--color-${prefix}${key}`] = value
+        ;(cssVars as any)[`--color-${prefix}${key}`] = value
       } else if (typeof value === 'object') {
         inner(value, `${prefix}${key}-`)
       }

src/components/AppIcon.tsx

@@ -1,20 +1,21 @@
 import { type DivProps, Flex, Img } from 'honorable'
 import PropTypes from 'prop-types'
 import { type ReactNode, type Ref, forwardRef } from 'react'
-import { type CSSObject } from 'styled-components'
-import last from 'lodash/last'
+import { last } from 'lodash-es'
 
 import { styledTheme as theme } from '../theme'
 
+import { type CSSObject } from '../types'
+
 import { type FillLevel, useFillLevel } from './contexts/FillLevelContext'
 
 type Hue = 'default' | 'lighter' | 'lightest'
 type Size = 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'
 
 type AppIconProps = DivProps & {
-  size?: Size | string
+  size?: Size
   spacing?: 'none' | 'padding' | string
-  hue?: 'default' | 'lighter' | 'lightest' | string
+  hue?: 'default' | 'lighter' | 'lightest'
   clickable?: boolean
   url?: string
   icon?: ReactNode
@@ -80,9 +81,11 @@ const hueToBorderColor: {
   lightest: 'border-fill-three',
 }
 
-const sizeToFont: {
-  [key in 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge']: CSSObject
-} = {
+const sizeToFont: Record<Size, CSSObject> = {
+  xxsmall: {
+    ...theme.partials.text.body2Bold,
+    fontSize: 12,
+  },
   xsmall: theme.partials.text.body2Bold,
   small: theme.partials.text.subtitle2,
   medium: theme.partials.text.subtitle1,
@@ -177,7 +180,7 @@ function AppIconRef(
 
 const AppIcon = forwardRef(AppIconRef)
 
-AppIcon.propTypes = propTypes
+AppIcon.propTypes = propTypes as any
 
 export default AppIcon
 export type { AppIconProps }

src/components/AppList.tsx

@@ -8,7 +8,7 @@ import {
   useMemo,
   useState,
 } from 'react'
-import IsEmpty from 'lodash/isEmpty'
+import { isEmpty } from 'lodash-es'
 
 import { MoreIcon, SearchIcon } from '../icons'
 
@@ -111,7 +111,7 @@ function AppListUnstyled({
 
   return (
     <div {...props}>
-      {!IsEmpty(apps) && (
+      {!isEmpty(apps) && (
         <Input
           prefix={<SearchIcon />}
           placeholder="Filter applications"
@@ -139,7 +139,7 @@ function AppListUnstyled({
           />
         ))}
 
-        {IsEmpty(filteredApps) && !IsEmpty(filter) && (
+        {isEmpty(filteredApps) && !isEmpty(filter) && (
           <div className="empty">
             <span className="empty-message">
               No applications found for "{filter}".
@@ -153,7 +153,7 @@ function AppListUnstyled({
           </div>
         )}
 
-        {IsEmpty(apps) && (
+        {isEmpty(apps) && (
           <div className="empty">
             <span className="empty-message">No applications found.</span>
           </div>

src/components/Breadcrumbs.tsx

@@ -13,7 +13,7 @@ import { Flex, type FlexProps, Nav, Ol } from 'honorable'
 import styled, { useTheme } from 'styled-components'
 import classNames from 'classnames'
 import { SwitchTransition, Transition } from 'react-transition-group'
-import { useVisuallyHidden } from '@react-aria/visually-hidden'
+import { useVisuallyHidden } from 'react-aria'
 
 import useResizeObserver from '../hooks/useResizeObserver'
 import usePrevious from '../hooks/usePrevious'
@@ -405,7 +405,7 @@ export function Breadcrumbs({
               maxLength={maxLength}
               collapsible={collapsible}
               breadcrumbs={breadcrumbs}
-              style={transitionStyles[state]}
+              style={(transitionStyles as any)[state]}
             />
           )}
         </Transition>

src/components/Callout.tsx

@@ -254,8 +254,8 @@ const CalloutWrap = styled.div<{
       '&:hover': {
         backgroundColor:
           $fillLevel >= 3
-            ? theme.colors['fill-four']
-            : theme.colors['fill-three'],
+            ? theme.colors['fill-three-hover']
+            : theme.colors['fill-two-hover'],
       },
     }),
   },
@@ -301,7 +301,7 @@ const CalloutWrap = styled.div<{
     borderBottomLeftRadius: theme.borderRadiuses.medium,
     right: 'unset',
     width: 3,
-    background: theme.colors[$borderColorKey],
+    background: (theme.colors as any)[$borderColorKey],
     zIndex: 2,
   },
   '&::after': {

src/components/Checkbox.tsx

@@ -2,10 +2,8 @@ import { type MutableRefObject, forwardRef, memo, useId, useRef } from 'react'
 import { type InputProps, Label } from 'honorable'
 import classNames from 'classnames'
 import styled from 'styled-components'
-import { useToggleState } from '@react-stately/toggle'
-import { useCheckbox } from '@react-aria/checkbox'
-import { VisuallyHidden } from '@react-aria/visually-hidden'
-import { useFocusRing } from '@react-aria/focus'
+import { useToggleState } from 'react-stately'
+import { VisuallyHidden, useCheckbox, useFocusRing } from 'react-aria'
 
 const CheckedIcon = memo(({ small }: { small: boolean }) => {
   const width = small ? 16 : 24

src/components/ChecklistItem.tsx

@@ -1,4 +1,4 @@
-import { useKeyboard } from '@react-aria/interactions'
+import { useKeyboard } from 'react-aria'
 import {
   type ComponentPropsWithRef,
   type Dispatch,

src/components/Chip.tsx

@@ -18,8 +18,8 @@ type Severity =
   | 'critical'
 
 export type ChipProps = FlexProps & {
-  size?: 'small' | 'medium' | 'large' | string
-  severity?: Severity | string
+  size?: 'small' | 'medium' | 'large'
+  severity?: Severity
   icon?: ReactElement
   loading?: boolean
   closeButton?: boolean

src/components/Code.tsx

@@ -13,7 +13,6 @@ import {
   useRef,
   useState,
 } from 'react'
-import PropTypes from 'prop-types'
 import { Button, Div, Flex } from 'honorable'
 import styled, { useTheme } from 'styled-components'
 
@@ -47,12 +46,6 @@ type CodeProps = Omit<CardProps, 'children'> & {
   onSelectedTabChange?: (key: string) => void
 }
 
-const propTypes = {
-  language: PropTypes.string,
-  showLineNumbers: PropTypes.bool,
-  showHeader: PropTypes.bool,
-}
-
 type TabInterfaceT = 'tabs' | 'dropdown'
 
 type TabsContext = {
@@ -486,7 +479,7 @@ function CodeRef(
 }
 
 const Code = styled(forwardRef(CodeRef))((_) => ({
-  [CopyButton]: {
+  [`${CopyButton}`]: {
     opacity: 0,
     pointerEvents: 'none',
     transition: 'opacity 0.2s ease',
@@ -498,7 +491,5 @@ const Code = styled(forwardRef(CodeRef))((_) => ({
   },
 }))
 
-Code.propTypes = propTypes
-
 export default Code
 export type { CodeProps }

src/components/ComboBox.tsx

@@ -11,16 +11,14 @@ import {
   useRef,
   useState,
 } from 'react'
-import { useComboBox } from '@react-aria/combobox'
+import { useComboBox } from 'react-aria'
 import {
   type ComboBoxState,
   type ComboBoxStateOptions,
   useComboBoxState,
-} from '@react-stately/combobox'
-import { type AriaButtonProps, useButton } from '@react-aria/button'
-import pick from 'lodash/pick'
-import omit from 'lodash/omit'
-import isUndefined from 'lodash/isUndefined'
+} from 'react-stately'
+import { type AriaButtonProps, useButton } from 'react-aria'
+import { isUndefined, omit, pick } from 'lodash-es'
 import styled, { useTheme } from 'styled-components'
 import { ExtendTheme, mergeTheme } from 'honorable'
 

src/components/IconFrame.tsx

@@ -7,6 +7,8 @@ import {
 import { ButtonBase, Flex, type FlexProps } from 'honorable'
 import { useTheme } from 'styled-components'
 
+import { type styledTheme } from '../theme'
+
 import Tooltip, { type TooltipProps } from './Tooltip'
 
 type Size = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'
@@ -18,7 +20,7 @@ const typeToBG: Record<Type, string> = {
   floating: 'fill-two',
 }
 
-const typeToHoverBG: Record<Type, string> = {
+const typeToHoverBG: Record<Type, keyof typeof styledTheme.colors> = {
   secondary: 'action-input-hover',
   tertiary: 'action-input-hover',
   floating: 'fill-two-hover',

src/components/InlineCode.tsx

@@ -50,7 +50,9 @@ const Code = styled.code<{ parentFillLevel: FillLevel }>(
     paddingTop: `${PADDING_EMS}em`,
     paddingBottom: `${PADDING_EMS}em`,
     color: theme.colors['text-light'],
-    borderColor: theme.colors[parentFillLevelToBorderColor[parentFillLevel]],
+    borderColor: (theme.colors as any)[
+      parentFillLevelToBorderColor[parentFillLevel]
+    ],
     backgroundColor: theme.colors['fill-one'],
     'a:any-link &': {
       color: theme.colors['action-link-inline'],