feat(*): update snippets to match ark v4 (#452)

cschroeter · Nov 3, 2024 · e89e029 · e89e029
1 parent 53235fb
commit e89e029
Show file tree

Hide file tree

Showing 41 changed files with 371 additions and 247 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/components/react/package.json b/components/react/package.json
@@ -4,28 +4,29 @@
   "private": true,
   "scripts": {
     "prepare": "panda codegen --silent",
+    "dev": "storybook dev -p 6006",
     "lint": "biome lint ./src",
     "storybook": "storybook dev -p 6006",
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@ark-ui/react": "3.6.2",
-    "@pandacss/dev": "0.44.0",
+    "@ark-ui/react": "4.2.0",
+    "@pandacss/dev": "0.46.1",
     "@park-ui/panda-preset": "workspace:*",
-    "@storybook/addon-a11y": "8.2.6",
-    "@storybook/addon-essentials": "8.2.6",
-    "@storybook/addon-themes": "8.2.6",
-    "@storybook/react-vite": "8.2.6",
-    "@storybook/react": "8.2.6",
-    "@types/react": "18.3.3",
-    "@types/react-dom": "18.3.0",
-    "@vitejs/plugin-react": "4.3.1",
-    "lucide-react": "0.417.0",
+    "@storybook/addon-a11y": "8.4.1",
+    "@storybook/addon-essentials": "8.4.1",
+    "@storybook/addon-themes": "8.4.1",
+    "@storybook/react-vite": "8.4.1",
+    "@storybook/react": "8.4.1",
+    "@types/react": "18.3.11",
+    "@types/react-dom": "18.3.1",
+    "@vitejs/plugin-react": "4.3.2",
+    "lucide-react": "0.452.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "storybook": "8.2.6",
-    "typescript": "5.5.4",
-    "vite": "5.3.5",
-    "vite-tsconfig-paths": "4.3.2"
+    "storybook": "8.4.1",
+    "typescript": "5.6.3",
+    "vite": "5.4.9",
+    "vite-tsconfig-paths": "5.0.1"
   }
 }
diff --git a/components/react/src/components/stories/button.stories.tsx b/components/react/src/components/stories/button.stories.tsx
@@ -1,4 +1,6 @@
 import type { Meta } from '@storybook/react'
+import { DiamondIcon } from 'lucide-react'
+import { Stack } from 'styled-system/jsx'
 import { Button } from '~/components/ui/button'
 
 const meta: Meta = {
@@ -8,7 +10,32 @@ const meta: Meta = {
 export default meta
 
 export const Base = () => <Button>Park UI</Button>
-export const Loading = () => <Button loading>Park UI</Button>
+
+export const Sizes = () => (
+  <Stack alignItems="start">
+    <Button size="xs">
+      <DiamondIcon /> Label
+    </Button>
+    <Button size="sm">
+      <DiamondIcon /> Label
+    </Button>
+    <Button size="md">
+      <DiamondIcon /> Label
+    </Button>
+    <Button size="lg">
+      <DiamondIcon /> Label
+    </Button>
+    <Button size="xl">
+      <DiamondIcon /> Label
+    </Button>
+    <Button size="2xl">
+      <DiamondIcon />
+      Label
+    </Button>
+  </Stack>
+)
+export const Loading = () => <Button loading>Label</Button>
+
 export const LoadingText = () => (
   <Button loading loadingText="Loading...">
     Park UI

diff --git a/components/react/src/components/stories/combobox.stories.tsx b/components/react/src/components/stories/combobox.stories.tsx
@@ -1,3 +1,4 @@
+import { createListCollection } from '@ark-ui/react/combobox'
 import type { Meta } from '@storybook/react'
 import { CheckIcon, ChevronsUpDownIcon } from 'lucide-react'
 import { useState } from 'react'
@@ -11,24 +12,26 @@ const meta: Meta = {
 
 export default meta
 
+const data = [
+  { label: 'React', value: 'react' },
+  { label: 'Solid', value: 'solid' },
+  { label: 'Svelte', value: 'svelte', disabled: true },
+  { label: 'Vue', value: 'vue' },
+]
+
 export const Base = () => {
-  const data = [
-    { label: 'React', value: 'react' },
-    { label: 'Solid', value: 'solid' },
-    { label: 'Svelte', value: 'svelte', disabled: true },
-    { label: 'Vue', value: 'vue' },
-  ]
   const [items, setItems] = useState(data)
+  const collection = createListCollection({
+    items: data,
+  })
 
-  const handleChange = (e: Combobox.InputValueChangeDetails) => {
-    const filtered = data.filter((item) =>
-      item.label.toLowerCase().includes(e.inputValue.toLowerCase()),
+  const handleInputChange = (details: Combobox.InputValueChangeDetails) => {
+    setItems(
+      items.filter((item) => item.value.toLowerCase().includes(details.inputValue.toLowerCase())),
     )
-    setItems(filtered.length > 0 ? filtered : data)
   }
-
   return (
-    <Combobox.Root width="2xs" onInputValueChange={handleChange} items={items}>
+    <Combobox.Root width="2xs" onInputValueChange={handleInputChange} collection={collection}>
       <Combobox.Label>Framework</Combobox.Label>
       <Combobox.Control>
         <Combobox.Input placeholder="Select a Framework" asChild>
@@ -44,7 +47,7 @@ export const Base = () => {
         <Combobox.Content>
           <Combobox.ItemGroup>
             <Combobox.ItemGroupLabel>Frameworks</Combobox.ItemGroupLabel>
-            {items.map((item) => (
+            {collection.items.map((item) => (
               <Combobox.Item key={item.value} item={item}>
                 <Combobox.ItemText>{item.label}</Combobox.ItemText>
                 <Combobox.ItemIndicator>

diff --git a/components/react/src/components/stories/select.stories.tsx b/components/react/src/components/stories/select.stories.tsx
@@ -1,3 +1,4 @@
+import { createListCollection } from '@ark-ui/react/collection'
 import type { Meta } from '@storybook/react'
 import { CheckIcon, ChevronsUpDownIcon } from 'lucide-react'
 import { Select } from '~/components/ui/select'
@@ -9,15 +10,17 @@ const meta: Meta = {
 export default meta
 
 export const Base = () => {
-  const items = [
-    { label: 'React', value: 'react' },
-    { label: 'Solid', value: 'solid' },
-    { label: 'Svelte', value: 'svelte', disabled: true },
-    { label: 'Vue', value: 'vue' },
-  ]
+  const collection = createListCollection({
+    items: [
+      { label: 'React', value: 'react' },
+      { label: 'Solid', value: 'solid' },
+      { label: 'Svelte', value: 'svelte', disabled: true },
+      { label: 'Vue', value: 'vue' },
+    ],
+  })
 
   return (
-    <Select.Root positioning={{ sameWidth: true }} items={items}>
+    <Select.Root positioning={{ sameWidth: true }} collection={collection}>
       <Select.Label>Framework</Select.Label>
       <Select.Control>
         <Select.Trigger>
@@ -29,7 +32,7 @@ export const Base = () => {
         <Select.Content>
           <Select.ItemGroup>
             <Select.ItemGroupLabel>Framework</Select.ItemGroupLabel>
-            {items.map((item) => (
+            {collection.items.map((item) => (
               <Select.Item key={item.value} item={item}>
                 <Select.ItemText>{item.label}</Select.ItemText>
                 <Select.ItemIndicator>

diff --git a/components/react/src/components/ui/button.tsx b/components/react/src/components/ui/button.tsx
@@ -35,6 +35,12 @@ Button.displayName = 'Button'
 
 const ButtonSpinner = () => (
   <Center inline position="absolute" transform="translate(-50%, -50%)" top="50%" insetStart="50%">
-    <Spinner colorPalette="gray" />
+    <Spinner
+      width="1.1em"
+      height="1.1em"
+      borderWidth="1.5px"
+      borderTopColor="fg.disabled"
+      borderRightColor="fg.disabled"
+    />
   </Center>
 )
diff --git a/components/react/src/components/ui/combobox.tsx b/components/react/src/components/ui/combobox.tsx
@@ -1 +1,2 @@
+export { createListCollection } from '@ark-ui/react/combobox'
 export * as Combobox from './styled/combobox'
diff --git a/components/react/src/components/ui/select.tsx b/components/react/src/components/ui/select.tsx
@@ -1 +1,2 @@
+export { createListCollection } from '@ark-ui/react/select'
 export * as Select from './styled/select'
diff --git a/components/react/src/demos/combobox.demo.tsx b/components/react/src/demos/combobox.demo.tsx
@@ -1,29 +1,44 @@
 'use client'
 import { CheckIcon, ChevronsUpDownIcon } from 'lucide-react'
 import { useState } from 'react'
-import { Combobox } from '~/components/ui/combobox'
+import { Combobox, createListCollection } from '~/components/ui/combobox'
 import { IconButton } from '~/components/ui/icon-button'
 import { Input } from '~/components/ui/input'
 
-const data = [
-  { label: 'React', value: 'react' },
-  { label: 'Solid', value: 'solid' },
-  { label: 'Svelte', value: 'svelte', disabled: true },
-  { label: 'Vue', value: 'vue' },
-]
+const initialCollection = createListCollection({
+  items: [
+    { label: 'React', value: 'react' },
+    { label: 'Solid', value: 'solid' },
+    { label: 'Vue', value: 'vue' },
+    { label: 'Svelte', value: 'svelte', disabled: true },
+  ],
+})
 
 export const Demo = (props: Combobox.RootProps) => {
-  const [items, setItems] = useState(data)
+  const [collection, setCollection] = useState(initialCollection)
 
-  const handleChange = (e: Combobox.InputValueChangeDetails) => {
-    const filtered = data.filter((item) =>
-      item.label.toLowerCase().includes(e.inputValue.toLowerCase()),
+  const handleInputChange = ({ inputValue }: Combobox.InputValueChangeDetails) => {
+    const filtered = initialCollection.items.filter((item) =>
+      item.label.toLowerCase().includes(inputValue.toLowerCase()),
     )
-    setItems(filtered.length > 0 ? filtered : data)
+
+    setCollection(
+      filtered.length > 0 ? createListCollection({ items: filtered }) : initialCollection,
+    )
+  }
+
+  const handleOpenChange = () => {
+    setCollection(initialCollection)
   }
 
   return (
-    <Combobox.Root width="2xs" onInputValueChange={handleChange} {...props} items={items}>
+    <Combobox.Root
+      {...props}
+      width="2xs"
+      collection={collection}
+      onInputValueChange={handleInputChange}
+      onOpenChange={handleOpenChange}
+    >
       <Combobox.Label>Framework</Combobox.Label>
       <Combobox.Control>
         <Combobox.Input placeholder="Select a Framework" asChild>
@@ -39,7 +54,7 @@ export const Demo = (props: Combobox.RootProps) => {
         <Combobox.Content>
           <Combobox.ItemGroup>
             <Combobox.ItemGroupLabel>Frameworks</Combobox.ItemGroupLabel>
-            {items.map((item) => (
+            {collection.items.map((item) => (
               <Combobox.Item key={item.value} item={item}>
                 <Combobox.ItemText>{item.label}</Combobox.ItemText>
                 <Combobox.ItemIndicator>

diff --git a/components/react/src/demos/select.demo.tsx b/components/react/src/demos/select.demo.tsx
@@ -1,16 +1,18 @@
 import { CheckIcon, ChevronsUpDownIcon } from 'lucide-react'
-import { Select } from '~/components/ui/select'
+import { Select, createListCollection } from '~/components/ui/select'
 
-export const Demo = (props: Select.RootProps) => {
-  const items = [
+const collection = createListCollection({
+  items: [
     { label: 'React', value: 'react' },
     { label: 'Solid', value: 'solid' },
-    { label: 'Svelte', value: 'svelte', disabled: true },
     { label: 'Vue', value: 'vue' },
-  ]
+    { label: 'Svelte', value: 'svelte', disabled: true },
+  ],
+})
 
+export const Demo = (props: Select.RootProps) => {
   return (
-    <Select.Root positioning={{ sameWidth: true }} width="2xs" {...props} items={items}>
+    <Select.Root positioning={{ sameWidth: true }} width="2xs" {...props} collection={collection}>
       <Select.Label>Framework</Select.Label>
       <Select.Control>
         <Select.Trigger>
@@ -22,7 +24,7 @@ export const Demo = (props: Select.RootProps) => {
         <Select.Content>
           <Select.ItemGroup>
             <Select.ItemGroupLabel>Framework</Select.ItemGroupLabel>
-            {items.map((item) => (
+            {collection.items.map((item) => (
               <Select.Item key={item.value} item={item}>
                 <Select.ItemText>{item.label}</Select.ItemText>
                 <Select.ItemIndicator>

diff --git a/components/react/src/plus b/components/react/src/plus
diff --git a/components/solid/package.json b/components/solid/package.json
@@ -9,22 +9,22 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@ark-ui/solid": "3.6.2",
-    "@pandacss/dev": "0.44.0",
+    "@ark-ui/solid": "4.2.1",
+    "@pandacss/dev": "0.46.1",
     "@park-ui/panda-preset": "workspace:*",
-    "@storybook/addon-a11y": "8.2.6",
-    "@storybook/addon-essentials": "8.2.6",
-    "@storybook/addon-themes": "8.2.6",
-    "@storybook/docs-tools": "8.2.6",
-    "lucide-solid": "0.417.0",
+    "@storybook/addon-a11y": "8.4.1",
+    "@storybook/addon-essentials": "8.4.1",
+    "@storybook/addon-themes": "8.4.1",
+    "@storybook/docs-tools": "8.4.1",
+    "lucide-solid": "0.452.0",
     "solid-icons": "1.1.0",
-    "solid-js": "1.8.19",
-    "storybook": "8.2.6",
+    "solid-js": "1.9.2",
+    "storybook": "8.4.1",
     "storybook-solidjs": "1.0.0-beta.2",
     "storybook-solidjs-vite": "1.0.0-beta.2",
-    "typescript": "5.5.4",
-    "vite": "5.3.5",
+    "typescript": "5.6.3",
+    "vite": "5.4.9",
     "vite-plugin-solid": "2.10.2",
-    "vite-tsconfig-paths": "4.3.2"
+    "vite-tsconfig-paths": "5.0.1"
   }
 }
diff --git a/components/solid/src/components/stories/button.stories.tsx b/components/solid/src/components/stories/button.stories.tsx
@@ -1,4 +1,6 @@
+import { DiamondIcon } from 'lucide-solid'
 import type { Meta } from 'storybook-solidjs'
+import { Stack } from 'styled-system/jsx'
 import { Button } from '~/components/ui/button'
 
 const meta: Meta = {
@@ -8,9 +10,34 @@ const meta: Meta = {
 export default meta
 
 export const Base = () => <Button>Park UI</Button>
-export const Loading = () => <Button loading>Park UI</Button>
+
+export const Sizes = () => (
+  <Stack alignItems="start">
+    <Button size="xs">
+      <DiamondIcon /> Label
+    </Button>
+    <Button size="sm">
+      <DiamondIcon /> Label
+    </Button>
+    <Button size="md">
+      <DiamondIcon /> Label
+    </Button>
+    <Button size="lg">
+      <DiamondIcon /> Label
+    </Button>
+    <Button size="xl">
+      <DiamondIcon /> Label
+    </Button>
+    <Button size="2xl">
+      <DiamondIcon /> Label
+    </Button>
+  </Stack>
+)
+
+export const Loading = () => <Button loading>Label</Button>
+
 export const LoadingText = () => (
   <Button loading loadingText="Loading...">
-    Park UI
+    Label
   </Button>
 )