Skip to content

Commit 1856a84

Browse files
segunadebayosegunadebayo
committed
chore: upgrade ark-ui
1 parent 50f6161 commit 1856a84

28 files changed

+1319
-1131
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@
7070
"git add --all packages/studio/"
7171
]
7272
},
73-
"packageManager": "pnpm@9.1.0",
73+
"packageManager": "pnpm@10.9.0",
7474
"pnpm": {
7575
"overrides": {
7676
"@swc/helpers@~0.4": "0.4.36"

‎packages/studio/styled-system/styles.css

+9-3
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
box-sizing: border-box;
2020
border-width: 0px;
2121
border-style: solid;
22-
border-color: var(--global-color-border, currentColor);
22+
border-color: var(--global-color-border, currentcolor);
2323
}
2424

2525
hr {
@@ -77,10 +77,16 @@
7777

7878
::placeholder {
7979
opacity: 1;
80-
--placeholder-fallback: color-mix(in srgb, currentColor 50%, transparent);
80+
--placeholder-fallback: rgba(0, 0, 0, 0.5);
8181
color: var(--global-color-placeholder, var(--placeholder-fallback));
8282
}
8383

84+
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
85+
::placeholder {
86+
--placeholder-fallback: color-mix(in oklab, currentcolor 50%, transparent);
87+
}
88+
}
89+
8490
textarea {
8591
resize: vertical;
8692
}
@@ -1421,4 +1427,4 @@
14211427
padding-inline: var(--spacing-8);
14221428
}
14231429
}
1424-
}
1430+
}

‎playground/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
},
2121
"dependencies": {
2222
"@ark-ui/anatomy": "2.2.0",
23-
"@ark-ui/react": "2.1.1",
23+
"@ark-ui/react": "5.7.0",
2424
"@monaco-editor/react": "4.6.0",
2525
"@pandacss/config": "workspace:*",
2626
"@pandacss/generator": "workspace:*",

‎playground/seo.config.ts

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import type { Metadata } from 'next'
33
const defineMetadata = <T extends Metadata>(metadata: T) => metadata
44

55
const seoConfig = defineMetadata({
6+
metadataBase: new URL('https://play.panda-css.com'),
67
title: {
78
template: '%s - Panda Playground',
89
default: 'Panda Playground',

‎playground/src/components/ASTViewer.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,14 @@ import { hstack } from '@/styled-system/patterns'
44
import type { ResultItem } from '@pandacss/types'
55
import { useTheme } from 'next-themes'
66
import { usePanda } from '../hooks/usePanda'
7-
7+
import * as React from 'react'
88
import dynamic from 'next/dynamic'
99

1010
const ResultItemRowJson = dynamic(() => import('./ASTViewer-row'))
1111

12-
export const ASTViewer = (props: { parserResult: ReturnType<typeof usePanda>['parserResult'] }) => {
12+
export const ASTViewer = React.memo(function ASTViewer(props: {
13+
parserResult: ReturnType<typeof usePanda>['parserResult']
14+
}) {
1315
if (!props.parserResult) return null
1416

1517
return (
@@ -19,7 +21,7 @@ export const ASTViewer = (props: { parserResult: ReturnType<typeof usePanda>['pa
1921
})}
2022
</Stack>
2123
)
22-
}
24+
})
2325

2426
const resultType = cva({
2527
base: {

‎playground/src/components/ArtifactsPanel.tsx

+6-4
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@ import { usePanda } from '@/src/hooks/usePanda'
44
import { css, cva, cx } from '@/styled-system/css'
55
import { Flex, panda } from '@/styled-system/jsx'
66
import { segmentGroup } from '@/styled-system/recipes'
7-
import { SegmentGroup, Splitter } from '@ark-ui/react'
8-
import React from 'react'
7+
import { SegmentGroup } from '@ark-ui/react/segment-group'
8+
import { Splitter } from '@ark-ui/react/splitter'
9+
import * as React from 'react'
910
import { ChevronUpIcon } from './icons'
1011

1112
type ArtifactsPanelType = {
@@ -23,7 +24,7 @@ const tabs = [
2324
},
2425
]
2526

26-
export function ArtifactsPanel(props: ArtifactsPanelType) {
27+
export const ArtifactsPanel = React.memo(function ArtifactsPanel(props: ArtifactsPanelType) {
2728
const [open, setOpen] = React.useState(false)
2829
const [activeTab, setActiveTab] = React.useState<'ast' | 'generated'>('ast')
2930

@@ -94,6 +95,7 @@ export function ArtifactsPanel(props: ArtifactsPanelType) {
9495
{option.label}
9596
</SegmentGroup.ItemText>
9697
<SegmentGroup.ItemControl />
98+
<SegmentGroup.ItemHiddenInput />
9799
</SegmentGroup.Item>
98100
))}
99101
</SegmentGroup.Root>
@@ -112,7 +114,7 @@ export function ArtifactsPanel(props: ArtifactsPanelType) {
112114
</Splitter.Panel>
113115
</>
114116
)
115-
}
117+
})
116118

117119
const artifactsPanel = cva({
118120
base: {

‎playground/src/components/Editor.tsx

+11-9
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,24 @@ import { FormatCode, LoaderIcon, WrapText } from '@/src/components/icons'
22
import { css, cva, cx } from '@/styled-system/css'
33
import { Flex } from '@/styled-system/jsx'
44
import { segmentGroup } from '@/styled-system/recipes'
5-
import { SegmentGroup } from '@ark-ui/react'
5+
import { SegmentGroup } from '@ark-ui/react/segment-group'
66
import MonacoEditor, { DiffEditor } from '@monaco-editor/react'
77
import { PandaEditorProps, defaultEditorOptions, useEditor } from '../hooks/useEditor'
8+
import { memo } from 'react'
89

910
const tabs = [
1011
{ id: 'code', label: 'Code' },
1112
{ id: 'css', label: 'CSS' },
1213
{ id: 'config', label: 'Config' },
1314
]
1415

15-
export const Editor = (props: PandaEditorProps) => {
16+
const editorPaths = {
17+
code: 'code.tsx',
18+
css: 'custom.css',
19+
config: 'config.ts',
20+
}
21+
22+
export const Editor = memo(function Editor(props: PandaEditorProps) {
1623
const {
1724
activeTab,
1825
setActiveTab,
@@ -24,12 +31,6 @@ export const Editor = (props: PandaEditorProps) => {
2431
onToggleWrap,
2532
} = useEditor(props)
2633

27-
const editorPaths = {
28-
code: 'code.tsx',
29-
css: 'custom.css',
30-
config: 'config.ts',
31-
}
32-
3334
return (
3435
<Flex flex="1" direction="column" align="flex-start" minW="0">
3536
<div className={css({ flex: '1', width: 'full', display: 'flex', flexDirection: 'column' })}>
@@ -57,6 +58,7 @@ export const Editor = (props: PandaEditorProps) => {
5758
<SegmentGroup.Item key={id} value={option.id} aria-label={option.label}>
5859
<SegmentGroup.ItemControl />
5960
<SegmentGroup.ItemText className={css({ px: 2 })}>{option.label}</SegmentGroup.ItemText>
61+
<SegmentGroup.ItemHiddenInput />
6062
</SegmentGroup.Item>
6163
))}
6264

@@ -116,7 +118,7 @@ export const Editor = (props: PandaEditorProps) => {
116118
</div>
117119
</Flex>
118120
)
119-
}
121+
})
120122

121123
const actionButton = cva({
122124
base: {

‎playground/src/components/Examples/index.tsx

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { EXAMPLES, Example } from '@/src/components/Examples/data'
22
import { button, menu } from '@/styled-system/recipes'
3-
import { Menu, MenuContent, MenuItem, MenuPositioner, MenuTrigger } from '@ark-ui/react'
3+
import { Menu } from '@ark-ui/react/menu'
44

55
type ExamplesProps = {
66
setExample: (_example: Example) => void
@@ -14,20 +14,20 @@ export const Examples = (props: ExamplesProps) => {
1414
props.setExample(value as Example)
1515
}}
1616
>
17-
<MenuTrigger asChild>
17+
<Menu.Trigger asChild>
1818
<button title="Try out some examples" className={button()}>
1919
Examples
2020
</button>
21-
</MenuTrigger>
22-
<MenuPositioner className={menu()}>
23-
<MenuContent>
21+
</Menu.Trigger>
22+
<Menu.Positioner className={menu()}>
23+
<Menu.Content>
2424
{EXAMPLES.map((example) => (
25-
<MenuItem key={example.id} id={example.id}>
25+
<Menu.Item key={example.id} value={example.id}>
2626
{example.label}
27-
</MenuItem>
27+
</Menu.Item>
2828
))}
29-
</MenuContent>
30-
</MenuPositioner>
29+
</Menu.Content>
30+
</Menu.Positioner>
3131
</Menu.Root>
3232
)
3333
}

‎playground/src/components/GeneratedCss.tsx

+18-9
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,37 @@
11
import { defaultEditorOptions } from '@/src/hooks/useEditor'
22
import { css } from '@/styled-system/css'
33
import { Stack } from '@/styled-system/jsx'
4-
import { SegmentGroup } from '@ark-ui/react'
4+
import { SegmentGroup } from '@ark-ui/react/segment-group'
55
import MonacoEditor from '@monaco-editor/react'
6+
import { format } from '@projectwallace/format-css'
7+
import * as React from 'react'
68
import { useState } from 'react'
79
import { useReadLocalStorage } from 'usehooks-ts'
8-
import { CssFileArtifact } from '../hooks/usePanda'
9-
import { format } from '@projectwallace/format-css'
10+
import type { CssFileArtifact } from '../hooks/usePanda'
1011

11-
export const GeneratedCss = ({ cssArtifacts, visible }: { cssArtifacts: CssFileArtifact[]; visible: boolean }) => {
12+
export const GeneratedCss = React.memo(function GeneratedCss({
13+
cssArtifacts,
14+
visible,
15+
}: {
16+
cssArtifacts: CssFileArtifact[]
17+
visible: boolean
18+
}) {
1219
const [activeTab, setActiveTab] = useState(cssArtifacts[0]?.file ?? 'styles.css')
1320

1421
const wordWrap = useReadLocalStorage<'off' | 'on' | undefined>('wordWrap') ?? undefined
1522

16-
const content = cssArtifacts.find((file) => file.file === activeTab)?.code ?? ''
17-
18-
const pretty = format(content)
23+
const pretty = React.useMemo(() => {
24+
const content = cssArtifacts.find((file) => file.file === activeTab)?.code ?? ''
25+
return format(content)
26+
}, [cssArtifacts, activeTab])
1927

2028
return (
2129
<Stack
2230
h="full"
2331
overflow="auto"
2432
hidden={!visible}
2533
css={{
26-
'&[hidden]': { display: 'none ' },
34+
'&[hidden]': { display: 'none' },
2735
}}
2836
>
2937
<SegmentGroup.Root
@@ -82,6 +90,7 @@ export const GeneratedCss = ({ cssArtifacts, visible }: { cssArtifacts: CssFileA
8290
{artifact.file === 'index.css' ? artifact.dir?.slice(1).concat(artifact.file)?.join('/') : artifact.file}
8391
</SegmentGroup.ItemText>
8492
<SegmentGroup.ItemControl />
93+
<SegmentGroup.ItemHiddenInput />
8594
</SegmentGroup.Item>
8695
))}
8796
</SegmentGroup.Root>
@@ -94,4 +103,4 @@ export const GeneratedCss = ({ cssArtifacts, visible }: { cssArtifacts: CssFileA
94103
/>
95104
</Stack>
96105
)
97-
}
106+
})

‎playground/src/components/LayoutControl.tsx

+9-6
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@ import { HorizontalSplit, PreviewLayout, ResponsiveLayout, VerticalSplit } from
33
import { UseResponsiveView } from '@/src/hooks/useResponsiveView'
44
import { css, cx } from '@/styled-system/css'
55
import { button, segmentGroup } from '@/styled-system/recipes'
6-
import { SegmentGroup } from '@ark-ui/react'
6+
import { SegmentGroup } from '@ark-ui/react/segment-group'
77

88
export type Layout = 'horizontal' | 'vertical' | 'preview' | 'responsive'
9+
910
export type LayoutControlProps = {
1011
value: Layout
1112
onChange: (layout: Layout) => void
@@ -14,13 +15,14 @@ export type LayoutControlProps = {
1415
isResponsive: boolean
1516
}
1617

18+
const options = [
19+
{ id: 'horizontal', label: 'Horizontal', icon: <HorizontalSplit /> },
20+
{ id: 'vertical', label: 'Vertical', icon: <VerticalSplit /> },
21+
{ id: 'preview', label: 'Preview', icon: <PreviewLayout /> },
22+
]
23+
1724
export const LayoutControl = (props: LayoutControlProps) => {
1825
const { value, onChange, setResponsiveSize, breakpoints, isResponsive } = props
19-
const options = [
20-
{ id: 'horizontal', label: 'Horizontal', icon: <HorizontalSplit /> },
21-
{ id: 'vertical', label: 'Vertical', icon: <VerticalSplit /> },
22-
{ id: 'preview', label: 'Preview', icon: <PreviewLayout /> },
23-
]
2426
return (
2527
<SegmentGroup.Root
2628
className={cx(
@@ -55,6 +57,7 @@ export const LayoutControl = (props: LayoutControlProps) => {
5557
>
5658
<SegmentGroup.ItemText>{option.icon}</SegmentGroup.ItemText>
5759
<SegmentGroup.ItemControl />
60+
<SegmentGroup.ItemHiddenInput />
5861
</SegmentGroup.Item>
5962
))}
6063
<div

‎playground/src/components/PlaygroundContent.tsx

+4-6
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useResponsiveView } from '@/src/hooks/useResponsiveView'
66
import { css, cx } from '@/styled-system/css'
77
import { flex } from '@/styled-system/patterns'
88
import { button, splitter } from '@/styled-system/recipes'
9-
import { Splitter } from '@ark-ui/react'
9+
import { Splitter } from '@ark-ui/react/splitter'
1010
import { ArtifactsPanel } from './ArtifactsPanel'
1111
import { Editor } from './Editor'
1212
import { Examples } from './Examples'
@@ -112,13 +112,11 @@ export const PlaygroundContent = (props: Props) => {
112112
isResponsive={isResponsive}
113113
/>
114114
</Toolbar>
115-
<Splitter.Root size={panels} onSizeChange={onResizePanels} orientation={layout} className={splitter()}>
115+
<Splitter.Root panels={panels} onResize={onResizePanels} orientation={layout} className={splitter()}>
116116
<Splitter.Panel id="left">
117117
<Splitter.Root
118-
size={[
119-
{ id: 'editor', size: 50, minSize: 5 },
120-
{ id: 'artifacts', size: 50 },
121-
]}
118+
panels={[{ id: 'editor', minSize: 5 }, { id: 'artifacts' }]}
119+
defaultSize={[50, 50]}
122120
orientation="vertical"
123121
className={splitter()}
124122
>

‎playground/src/components/Preview/BreakpointControl.tsx

+10-10
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { ChevronDownIcon } from '@/src/components/icons'
22
import { UseResponsiveView } from '@/src/hooks/useResponsiveView'
33
import { css, cx } from '@/styled-system/css'
44
import { button, menu } from '@/styled-system/recipes'
5-
import { Menu, MenuContent, MenuItem, MenuPositioner, MenuTrigger } from '@ark-ui/react'
5+
import { Menu } from '@ark-ui/react/menu'
66

77
type BreakpointControlProps = {
88
setResponsiveSize: UseResponsiveView['setResponsiveSize']
@@ -16,7 +16,7 @@ export const BreakpointControl = ({ setResponsiveSize, breakpoints }: Breakpoint
1616

1717
return (
1818
<Menu.Root positioning={{ placement: 'bottom-end' }} onSelect={({ value }) => onSelectBreakpoint(value)}>
19-
<MenuTrigger asChild>
19+
<Menu.Trigger asChild>
2020
<button
2121
title="Select a breakpoint"
2222
className={cx(
@@ -32,22 +32,22 @@ export const BreakpointControl = ({ setResponsiveSize, breakpoints }: Breakpoint
3232
>
3333
<ChevronDownIcon />
3434
</button>
35-
</MenuTrigger>
36-
<MenuPositioner className={menu()}>
37-
<MenuContent>
35+
</Menu.Trigger>
36+
<Menu.Positioner className={menu()}>
37+
<Menu.Content>
3838
{Object.keys(breakpoints).map((breakpoint) => (
39-
<MenuItem
39+
<Menu.Item
4040
className={css({
4141
color: 'text.complementary',
4242
})}
4343
key={breakpoint}
44-
id={breakpoint}
44+
value={breakpoint}
4545
>
4646
{breakpoint}
47-
</MenuItem>
47+
</Menu.Item>
4848
))}
49-
</MenuContent>
50-
</MenuPositioner>
49+
</Menu.Content>
50+
</Menu.Positioner>
5151
</Menu.Root>
5252
)
5353
}

0 commit comments

Comments
 (0)