feat: Package upgrades + Improvements to Breadcrumbs, AppIcon, EmptyS…

…tate, and Markdown (#550)

package.json

@@ -31,74 +31,74 @@
   "dependencies": {
     "@floating-ui/react-dom-interactions": "0.13.3",
     "@loomhq/loom-embed": "1.5.0",
-    "@markdoc/markdoc": "0.3.2",
-    "@monaco-editor/react": "4.5.1",
+    "@markdoc/markdoc": "0.4.0",
+    "@monaco-editor/react": "4.6.0",
     "@react-aria/utils": "3.22.0",
     "@react-hooks-library/core": "0.5.1",
+    "@react-spring/web": "^9.7.3",
     "@react-stately/utils": "3.9.0",
     "@react-types/shared": "3.22.0",
     "@tanstack/match-sorter-utils": "8.8.4",
     "@tanstack/react-table": "8.10.7",
     "@tanstack/react-virtual": "3.0.1",
-    "@types/chroma-js": "2.4.0",
-    "@types/lodash-es": "4.17.8",
+    "@types/chroma-js": "2.4.3",
+    "@types/lodash-es": "4.17.12",
     "babel-plugin-styled-components": "2.1.4",
     "chroma-js": "2.4.2",
     "classnames": "2.3.2",
-    "grommet": "2.33.2",
-    "highlight.js": "11.8.0",
+    "grommet": "2.34.2",
+    "highlight.js": "11.9.0",
     "honorable-recipe-mapper": "0.2.0",
     "immer": "10.0.3",
     "lodash-es": "4.17.21",
     "moment": "2.29.4",
     "prop-types": "15.8.1",
-    "react-animate-height": "3.1.1",
+    "react-animate-height": "3.2.3",
     "react-aria": "3.30.0",
-    "react-embed": "3.6.0",
-    "react-markdown": "8.0.7",
-    "react-merge-refs": "2.0.2",
-    "react-spring": "9.7.2",
+    "react-embed": "3.7.0",
+    "react-markdown": "9.0.1",
+    "react-merge-refs": "2.1.1",
     "react-stately": "3.28.0",
     "react-use-measure": "2.1.1",
-    "rehype-raw": "6.1.1",
+    "rehype-raw": "7.0.0",
     "resize-observer-polyfill": "1.5.1",
     "styled-container-query": "1.3.5",
-    "type-fest": "3.13.1",
+    "type-fest": "4.8.3",
     "use-immer": "0.9.0",
     "usehooks-ts": "2.9.1"
   },
   "devDependencies": {
-    "@babel/core": "7.23.3",
-    "@babel/preset-env": "7.23.3",
+    "@babel/core": "7.23.6",
+    "@babel/preset-env": "7.23.6",
     "@babel/preset-react": "7.23.3",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
-    "@pluralsh/eslint-config-typescript": "2.5.112",
-    "@storybook/addon-actions": "7.6.3",
-    "@storybook/addon-docs": "7.6.3",
-    "@storybook/addon-essentials": "7.6.3",
-    "@storybook/addon-interactions": "7.6.3",
-    "@storybook/addon-links": "7.6.3",
-    "@storybook/builder-vite": "7.6.3",
-    "@storybook/node-logger": "7.6.3",
-    "@storybook/react": "7.6.3",
-    "@storybook/react-vite": "7.6.3",
+    "@pluralsh/eslint-config-typescript": "2.5.147",
+    "@storybook/addon-actions": "7.6.5",
+    "@storybook/addon-docs": "7.6.5",
+    "@storybook/addon-essentials": "7.6.5",
+    "@storybook/addon-interactions": "7.6.5",
+    "@storybook/addon-links": "7.6.5",
+    "@storybook/builder-vite": "7.6.5",
+    "@storybook/node-logger": "7.6.5",
+    "@storybook/react": "7.6.5",
+    "@storybook/react-vite": "7.6.5",
     "@storybook/testing-library": "0.2.2",
     "@testing-library/jest-dom": "5.17.0",
-    "@types/react-dom": "18.2.15",
-    "@types/react-transition-group": "4.4.9",
+    "@types/react-dom": "18.2.17",
+    "@types/react-transition-group": "4.4.10",
     "@types/styled-components": "5.1.30",
-    "@typescript-eslint/eslint-plugin": "5.62.0",
-    "@typescript-eslint/parser": "5.62.0",
-    "@vitest/coverage-v8": "0.34.3",
-    "@vitest/ui": "0.34.3",
+    "@typescript-eslint/eslint-plugin": "6.14.0",
+    "@typescript-eslint/parser": "6.14.0",
+    "@vitest/coverage-v8": "1.0.4",
+    "@vitest/ui": "1.0.4",
     "babel-loader": "9.1.3",
     "conventional-changelog-conventionalcommits": "6.1.0",
-    "eslint": "8.51.0",
-    "eslint-config-prettier": "9.0.0",
-    "eslint-plugin-import": "2.28.1",
+    "eslint": "8.55.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-import": "2.29.1",
     "eslint-plugin-import-newlines": "1.3.4",
-    "eslint-plugin-jsx-a11y": "6.7.1",
+    "eslint-plugin-jsx-a11y": "6.8.0",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-storybook": "0.6.15",
@@ -109,19 +109,19 @@
     "http-server": "14.1.1",
     "husky": "8.0.3",
     "jest-mock": "29.5.0",
-    "jsdom": "22.1.0",
-    "lint-staged": "14.0.1",
+    "jsdom": "23.0.1",
+    "lint-staged": "15.2.0",
     "npm-run-all": "4.1.5",
     "prettier": "3.0.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-transition-group": "4.4.5",
-    "rimraf": "5.0.1",
-    "storybook": "7.6.3",
+    "rimraf": "5.0.5",
+    "storybook": "7.6.5",
     "styled-components": "5.3.11",
-    "typescript": "5.2.2",
-    "vite": "4.5.0",
-    "vitest": "0.34.6"
+    "typescript": "5.3.3",
+    "vite": "5.0.10",
+    "vitest": "1.0.4"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.11.0",

src/components/Accordion.tsx

@@ -10,7 +10,7 @@ import {
   useState,
 } from 'react'
 import React from 'react'
-import { useSpring } from 'react-spring'
+import { useSpring } from '@react-spring/web'
 import styled, { useTheme } from 'styled-components'
 
 import useResizeObserver from '../hooks/useResizeObserver'

src/components/AnimatedDiv.tsx

@@ -1,6 +1,6 @@
 // Workaround for issue with styled components `css` prop and `animated.div`
 // https://github.com/pmndrs/react-spring/issues/1515
-import { animated } from 'react-spring'
+import { animated } from '@react-spring/web'
 import styled from 'styled-components'
 
 export const AnimatedDiv = styled(animated.div)<any>``

src/components/AppIcon.tsx

@@ -1,9 +1,16 @@
-import { type DivProps, Flex, Img } from 'honorable'
 import PropTypes from 'prop-types'
-import { type ReactNode, type Ref, forwardRef } from 'react'
+import {
+  type ComponentProps,
+  type ReactElement,
+  type Ref,
+  cloneElement,
+  forwardRef,
+} from 'react'
 import { last } from 'lodash-es'
 
-import { type DefaultTheme, useTheme } from 'styled-components'
+import styled, { type DefaultTheme, useTheme } from 'styled-components'
+
+import { type ValueOf } from 'type-fest'
 
 import { type styledTheme as theme } from '../theme'
 
@@ -24,18 +31,18 @@ type AppIconHue = (typeof HUES)[number]
 type AppIconSize = (typeof SIZES)[number]
 type AppIconSpacing = (typeof SPACINGS)[number]
 
-type AppIconProps = Omit<DivProps, 'size'> & {
+type AppIconProps = {
   size?: AppIconSize
   spacing?: AppIconSpacing
   hue?: AppIconHue
   clickable?: boolean
   url?: string
-  icon?: ReactNode
+  icon?: ReactElement
   alt?: string
   name?: string
   initials?: string
+  className?: string
   onClose?: () => void
-  [x: string]: unknown
 }
 
 const propTypes = {
@@ -111,6 +118,50 @@ export function toInitials(name: string) {
   return initials.join('')
 }
 
+const AppIconSC = styled.div<{
+  $color: ValueOf<typeof hueToColor>
+  $borderColor: ValueOf<typeof hueToBorderColor>
+  $hasBorder: boolean
+  $boxSize: number
+  $clickable: boolean
+}>(({ theme, $color, $borderColor, $hasBorder, $boxSize, $clickable }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  backgroundColor: theme.colors[$color],
+  borderRadius: theme.borderRadiuses.medium,
+  border: $hasBorder ? theme.borders.default : 'none',
+  borderColor: theme.colors[$borderColor],
+  width: $boxSize,
+  height: $boxSize,
+  minWidth: $boxSize,
+  minHeight: $boxSize,
+  cursor: $clickable ? 'pointer' : 'auto',
+  overflow: 'hidden',
+  _hover: $clickable ? { backgroundColor: $borderColor } : null,
+}))
+
+const InitialsSC = styled.div<{
+  $size: AppIconSize
+}>(({ theme, $size }) => ({
+  display: 'flex',
+  width: '100%',
+  height: '100%',
+  alignItems: 'center',
+  justifyContent: 'center',
+  userSelect: 'none',
+  textTransform: 'uppercase',
+  ...sizeToFont($size, theme),
+}))
+
+const ImgSC = styled.img<{
+  $iconWidth: number
+}>(({ $iconWidth }) => ({
+  width: $iconWidth,
+  height: $iconWidth,
+  objectFit: 'cover',
+}))
+
 function AppIconRef(
   {
     size = 'medium',
@@ -124,63 +175,53 @@ function AppIconRef(
     initials,
     onClose,
     ...props
-  }: AppIconProps,
+  }: AppIconProps & ComponentProps<typeof AppIconSC>,
   ref: Ref<any>
 ) {
+  const theme = useTheme()
   const parentFillLevel = useFillLevel()
 
   hue = hue || parentFillLevelToHue[parentFillLevel]
   const boxSize = sizeToWidth[size]
-  const iconSize =
+  const iconWidth =
     spacing === 'padding' ? sizeToIconWidth[size] : sizeToWidth[size] + 1
   const color = hueToColor[hue]
   const borderColor = hueToBorderColor[hue]
   const hasBorder = spacing === 'padding'
-  const theme = useTheme()
+
+  if (icon) {
+    icon = cloneElement(icon, {
+      color: theme.colors['icon-default'],
+      width: iconWidth,
+      ...(icon?.props || {}),
+    })
+  }
 
   return (
-    <Flex
-      backgroundColor={color}
-      borderRadius="medium"
-      border={hasBorder ? '1px solid border' : 'none'}
-      borderColor={borderColor}
-      width={boxSize}
-      height={boxSize}
-      minWidth={boxSize}
-      minHeight={boxSize}
-      align="center"
-      justify="center"
-      cursor={clickable ? 'pointer' : 'auto'}
-      overflow="hidden"
-      _hover={clickable ? { backgroundColor: borderColor } : null}
+    <AppIconSC
+      $color={color}
+      $borderColor={borderColor}
+      $hasBorder={hasBorder}
+      $boxSize={boxSize}
+      $clickable={clickable}
       onClick={clickable ? onClose : null}
+      {...props}
     >
       {url ? (
-        <Img
+        <ImgSC
           ref={ref}
           src={url}
           alt={alt}
-          width={iconSize}
-          height={iconSize}
-          objectFit="cover"
-          {...props}
+          $iconWidth={iconWidth}
         />
       ) : (
         icon || (
-          <Flex
-            width="100%"
-            height="100%"
-            alignItems="center"
-            justifyContent="center"
-            userSelect="none"
-            textTransform="uppercase"
-            {...sizeToFont(size, theme)}
-          >
+          <InitialsSC $size={size}>
             {initials || (name ? toInitials(name) : '')}
-          </Flex>
+          </InitialsSC>
         )
       )}
-    </Flex>
+    </AppIconSC>
   )
 }