Skip to content

Commit 8ca5043

Browse files
dogmardogmar
authored
feat: Package upgrades + Improvements to Breadcrumbs, AppIcon, EmptyState, and Markdown (#550)
1 parent 48cf649 commit 8ca5043

27 files changed

+2355
-3631
lines changed

‎package.json

+42-42
Original file line numberDiff line numberDiff line change
@@ -31,74 +31,74 @@
3131
"dependencies": {
3232
"@floating-ui/react-dom-interactions": "0.13.3",
3333
"@loomhq/loom-embed": "1.5.0",
34-
"@markdoc/markdoc": "0.3.2",
35-
"@monaco-editor/react": "4.5.1",
34+
"@markdoc/markdoc": "0.4.0",
35+
"@monaco-editor/react": "4.6.0",
3636
"@react-aria/utils": "3.22.0",
3737
"@react-hooks-library/core": "0.5.1",
38+
"@react-spring/web": "^9.7.3",
3839
"@react-stately/utils": "3.9.0",
3940
"@react-types/shared": "3.22.0",
4041
"@tanstack/match-sorter-utils": "8.8.4",
4142
"@tanstack/react-table": "8.10.7",
4243
"@tanstack/react-virtual": "3.0.1",
43-
"@types/chroma-js": "2.4.0",
44-
"@types/lodash-es": "4.17.8",
44+
"@types/chroma-js": "2.4.3",
45+
"@types/lodash-es": "4.17.12",
4546
"babel-plugin-styled-components": "2.1.4",
4647
"chroma-js": "2.4.2",
4748
"classnames": "2.3.2",
48-
"grommet": "2.33.2",
49-
"highlight.js": "11.8.0",
49+
"grommet": "2.34.2",
50+
"highlight.js": "11.9.0",
5051
"honorable-recipe-mapper": "0.2.0",
5152
"immer": "10.0.3",
5253
"lodash-es": "4.17.21",
5354
"moment": "2.29.4",
5455
"prop-types": "15.8.1",
55-
"react-animate-height": "3.1.1",
56+
"react-animate-height": "3.2.3",
5657
"react-aria": "3.30.0",
57-
"react-embed": "3.6.0",
58-
"react-markdown": "8.0.7",
59-
"react-merge-refs": "2.0.2",
60-
"react-spring": "9.7.2",
58+
"react-embed": "3.7.0",
59+
"react-markdown": "9.0.1",
60+
"react-merge-refs": "2.1.1",
6161
"react-stately": "3.28.0",
6262
"react-use-measure": "2.1.1",
63-
"rehype-raw": "6.1.1",
63+
"rehype-raw": "7.0.0",
6464
"resize-observer-polyfill": "1.5.1",
6565
"styled-container-query": "1.3.5",
66-
"type-fest": "3.13.1",
66+
"type-fest": "4.8.3",
6767
"use-immer": "0.9.0",
6868
"usehooks-ts": "2.9.1"
6969
},
7070
"devDependencies": {
71-
"@babel/core": "7.23.3",
72-
"@babel/preset-env": "7.23.3",
71+
"@babel/core": "7.23.6",
72+
"@babel/preset-env": "7.23.6",
7373
"@babel/preset-react": "7.23.3",
7474
"@emotion/react": "11.11.1",
7575
"@emotion/styled": "11.11.0",
76-
"@pluralsh/eslint-config-typescript": "2.5.112",
77-
"@storybook/addon-actions": "7.6.3",
78-
"@storybook/addon-docs": "7.6.3",
79-
"@storybook/addon-essentials": "7.6.3",
80-
"@storybook/addon-interactions": "7.6.3",
81-
"@storybook/addon-links": "7.6.3",
82-
"@storybook/builder-vite": "7.6.3",
83-
"@storybook/node-logger": "7.6.3",
84-
"@storybook/react": "7.6.3",
85-
"@storybook/react-vite": "7.6.3",
76+
"@pluralsh/eslint-config-typescript": "2.5.147",
77+
"@storybook/addon-actions": "7.6.5",
78+
"@storybook/addon-docs": "7.6.5",
79+
"@storybook/addon-essentials": "7.6.5",
80+
"@storybook/addon-interactions": "7.6.5",
81+
"@storybook/addon-links": "7.6.5",
82+
"@storybook/builder-vite": "7.6.5",
83+
"@storybook/node-logger": "7.6.5",
84+
"@storybook/react": "7.6.5",
85+
"@storybook/react-vite": "7.6.5",
8686
"@storybook/testing-library": "0.2.2",
8787
"@testing-library/jest-dom": "5.17.0",
88-
"@types/react-dom": "18.2.15",
89-
"@types/react-transition-group": "4.4.9",
88+
"@types/react-dom": "18.2.17",
89+
"@types/react-transition-group": "4.4.10",
9090
"@types/styled-components": "5.1.30",
91-
"@typescript-eslint/eslint-plugin": "5.62.0",
92-
"@typescript-eslint/parser": "5.62.0",
93-
"@vitest/coverage-v8": "0.34.3",
94-
"@vitest/ui": "0.34.3",
91+
"@typescript-eslint/eslint-plugin": "6.14.0",
92+
"@typescript-eslint/parser": "6.14.0",
93+
"@vitest/coverage-v8": "1.0.4",
94+
"@vitest/ui": "1.0.4",
9595
"babel-loader": "9.1.3",
9696
"conventional-changelog-conventionalcommits": "6.1.0",
97-
"eslint": "8.51.0",
98-
"eslint-config-prettier": "9.0.0",
99-
"eslint-plugin-import": "2.28.1",
97+
"eslint": "8.55.0",
98+
"eslint-config-prettier": "9.1.0",
99+
"eslint-plugin-import": "2.29.1",
100100
"eslint-plugin-import-newlines": "1.3.4",
101-
"eslint-plugin-jsx-a11y": "6.7.1",
101+
"eslint-plugin-jsx-a11y": "6.8.0",
102102
"eslint-plugin-react": "7.33.2",
103103
"eslint-plugin-react-hooks": "4.6.0",
104104
"eslint-plugin-storybook": "0.6.15",
@@ -109,19 +109,19 @@
109109
"http-server": "14.1.1",
110110
"husky": "8.0.3",
111111
"jest-mock": "29.5.0",
112-
"jsdom": "22.1.0",
113-
"lint-staged": "14.0.1",
112+
"jsdom": "23.0.1",
113+
"lint-staged": "15.2.0",
114114
"npm-run-all": "4.1.5",
115115
"prettier": "3.0.3",
116116
"react": "18.2.0",
117117
"react-dom": "18.2.0",
118118
"react-transition-group": "4.4.5",
119-
"rimraf": "5.0.1",
120-
"storybook": "7.6.3",
119+
"rimraf": "5.0.5",
120+
"storybook": "7.6.5",
121121
"styled-components": "5.3.11",
122-
"typescript": "5.2.2",
123-
"vite": "4.5.0",
124-
"vitest": "0.34.6"
122+
"typescript": "5.3.3",
123+
"vite": "5.0.10",
124+
"vitest": "1.0.4"
125125
},
126126
"peerDependencies": {
127127
"@emotion/react": ">=11.11.0",

‎public/photo.png

-86.8 KB
Loading

‎public/user.png

467 Bytes
Loading

‎src/components/Accordion.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
useState,
1111
} from 'react'
1212
import React from 'react'
13-
import { useSpring } from 'react-spring'
13+
import { useSpring } from '@react-spring/web'
1414
import styled, { useTheme } from 'styled-components'
1515

1616
import useResizeObserver from '../hooks/useResizeObserver'

‎src/components/AnimatedDiv.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Workaround for issue with styled components `css` prop and `animated.div`
22
// https://github.com/pmndrs/react-spring/issues/1515
3-
import { animated } from 'react-spring'
3+
import { animated } from '@react-spring/web'
44
import styled from 'styled-components'
55

66
export const AnimatedDiv = styled(animated.div)<any>``

‎src/components/AppIcon.tsx

+80-39
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
1-
import { type DivProps, Flex, Img } from 'honorable'
21
import PropTypes from 'prop-types'
3-
import { type ReactNode, type Ref, forwardRef } from 'react'
2+
import {
3+
type ComponentProps,
4+
type ReactElement,
5+
type Ref,
6+
cloneElement,
7+
forwardRef,
8+
} from 'react'
49
import { last } from 'lodash-es'
510

6-
import { type DefaultTheme, useTheme } from 'styled-components'
11+
import styled, { type DefaultTheme, useTheme } from 'styled-components'
12+
13+
import { type ValueOf } from 'type-fest'
714

815
import { type styledTheme as theme } from '../theme'
916

@@ -24,18 +31,18 @@ type AppIconHue = (typeof HUES)[number]
2431
type AppIconSize = (typeof SIZES)[number]
2532
type AppIconSpacing = (typeof SPACINGS)[number]
2633

27-
type AppIconProps = Omit<DivProps, 'size'> & {
34+
type AppIconProps = {
2835
size?: AppIconSize
2936
spacing?: AppIconSpacing
3037
hue?: AppIconHue
3138
clickable?: boolean
3239
url?: string
33-
icon?: ReactNode
40+
icon?: ReactElement
3441
alt?: string
3542
name?: string
3643
initials?: string
44+
className?: string
3745
onClose?: () => void
38-
[x: string]: unknown
3946
}
4047

4148
const propTypes = {
@@ -111,6 +118,50 @@ export function toInitials(name: string) {
111118
return initials.join('')
112119
}
113120

121+
const AppIconSC = styled.div<{
122+
$color: ValueOf<typeof hueToColor>
123+
$borderColor: ValueOf<typeof hueToBorderColor>
124+
$hasBorder: boolean
125+
$boxSize: number
126+
$clickable: boolean
127+
}>(({ theme, $color, $borderColor, $hasBorder, $boxSize, $clickable }) => ({
128+
display: 'flex',
129+
alignItems: 'center',
130+
justifyContent: 'center',
131+
backgroundColor: theme.colors[$color],
132+
borderRadius: theme.borderRadiuses.medium,
133+
border: $hasBorder ? theme.borders.default : 'none',
134+
borderColor: theme.colors[$borderColor],
135+
width: $boxSize,
136+
height: $boxSize,
137+
minWidth: $boxSize,
138+
minHeight: $boxSize,
139+
cursor: $clickable ? 'pointer' : 'auto',
140+
overflow: 'hidden',
141+
_hover: $clickable ? { backgroundColor: $borderColor } : null,
142+
}))
143+
144+
const InitialsSC = styled.div<{
145+
$size: AppIconSize
146+
}>(({ theme, $size }) => ({
147+
display: 'flex',
148+
width: '100%',
149+
height: '100%',
150+
alignItems: 'center',
151+
justifyContent: 'center',
152+
userSelect: 'none',
153+
textTransform: 'uppercase',
154+
...sizeToFont($size, theme),
155+
}))
156+
157+
const ImgSC = styled.img<{
158+
$iconWidth: number
159+
}>(({ $iconWidth }) => ({
160+
width: $iconWidth,
161+
height: $iconWidth,
162+
objectFit: 'cover',
163+
}))
164+
114165
function AppIconRef(
115166
{
116167
size = 'medium',
@@ -124,63 +175,53 @@ function AppIconRef(
124175
initials,
125176
onClose,
126177
...props
127-
}: AppIconProps,
178+
}: AppIconProps & ComponentProps<typeof AppIconSC>,
128179
ref: Ref<any>
129180
) {
181+
const theme = useTheme()
130182
const parentFillLevel = useFillLevel()
131183

132184
hue = hue || parentFillLevelToHue[parentFillLevel]
133185
const boxSize = sizeToWidth[size]
134-
const iconSize =
186+
const iconWidth =
135187
spacing === 'padding' ? sizeToIconWidth[size] : sizeToWidth[size] + 1
136188
const color = hueToColor[hue]
137189
const borderColor = hueToBorderColor[hue]
138190
const hasBorder = spacing === 'padding'
139-
const theme = useTheme()
191+
192+
if (icon) {
193+
icon = cloneElement(icon, {
194+
color: theme.colors['icon-default'],
195+
width: iconWidth,
196+
...(icon?.props || {}),
197+
})
198+
}
140199

141200
return (
142-
<Flex
143-
backgroundColor={color}
144-
borderRadius="medium"
145-
border={hasBorder ? '1px solid border' : 'none'}
146-
borderColor={borderColor}
147-
width={boxSize}
148-
height={boxSize}
149-
minWidth={boxSize}
150-
minHeight={boxSize}
151-
align="center"
152-
justify="center"
153-
cursor={clickable ? 'pointer' : 'auto'}
154-
overflow="hidden"
155-
_hover={clickable ? { backgroundColor: borderColor } : null}
201+
<AppIconSC
202+
$color={color}
203+
$borderColor={borderColor}
204+
$hasBorder={hasBorder}
205+
$boxSize={boxSize}
206+
$clickable={clickable}
156207
onClick={clickable ? onClose : null}
208+
{...props}
157209
>
158210
{url ? (
159-
<Img
211+
<ImgSC
160212
ref={ref}
161213
src={url}
162214
alt={alt}
163-
width={iconSize}
164-
height={iconSize}
165-
objectFit="cover"
166-
{...props}
215+
$iconWidth={iconWidth}
167216
/>
168217
) : (
169218
icon || (
170-
<Flex
171-
width="100%"
172-
height="100%"
173-
alignItems="center"
174-
justifyContent="center"
175-
userSelect="none"
176-
textTransform="uppercase"
177-
{...sizeToFont(size, theme)}
178-
>
219+
<InitialsSC $size={size}>
179220
{initials || (name ? toInitials(name) : '')}
180-
</Flex>
221+
</InitialsSC>
181222
)
182223
)}
183-
</Flex>
224+
</AppIconSC>
184225
)
185226
}
186227

0 commit comments

Comments
 (0)