feat(website): improve component preview load time

chakra-ui · May 16, 2024 · d76a161 · d76a161
1 parent 429d5a8
commit d76a161
Show file tree

Hide file tree

Showing 16 changed files with 100 additions and 106 deletions.
diff --git a/website/src/components/component-preview.tsx b/website/src/components/component-preview.tsx
@@ -1,4 +1,3 @@
-'use client'
 import dynamic from 'next/dynamic'
 import { Flex } from 'styled-system/jsx'
 
@@ -10,6 +9,7 @@ export const ComponentPreview = (props: Props) => {
   const { id } = props
   // @ts-expect-error
   const Demo = dynamic(() => import('~/demos').then((mod) => mod[id]).catch(() => null))
+
   return (
     <Flex
       minH="40"

diff --git a/website/src/components/ui/pin-input.tsx b/website/src/components/ui/pin-input.tsx
@@ -1,3 +1,4 @@
+'use client'
 import { PinInput as ArkPinInput, type PinInputRootProps } from '@ark-ui/react/pin-input'
 import { type ReactNode, forwardRef } from 'react'
 import { css, cx } from 'styled-system/css'

diff --git a/website/src/components/ui/rating-group.tsx b/website/src/components/ui/rating-group.tsx
@@ -1,3 +1,4 @@
+'use client'
 import {
   RatingGroup as ArkRatingGroup,
   type RatingGroupRootProps,

diff --git a/website/src/components/ui/slider.tsx b/website/src/components/ui/slider.tsx
@@ -1,3 +1,4 @@
+'use client'
 import { Slider as ArkSlider, type SliderRootProps } from '@ark-ui/react/slider'
 import { type ReactNode, forwardRef } from 'react'
 import { css, cx } from 'styled-system/css'

diff --git a/website/src/demos/color-picker.demo.tsx b/website/src/demos/color-picker.demo.tsx
@@ -1,3 +1,4 @@
+'use client'
 import { PipetteIcon } from 'lucide-react'
 import { HStack, Stack } from 'styled-system/jsx'
 import { ColorPicker, IconButton, Input, Text } from '~/components/ui'

diff --git a/website/src/demos/date-picker.demo.tsx b/website/src/demos/date-picker.demo.tsx
@@ -1,3 +1,4 @@
+'use client'
 import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'
 import { Button, DatePicker, IconButton, Input } from '~/components/ui'
 

diff --git a/website/src/demos/dialog.demo.tsx b/website/src/demos/dialog.demo.tsx
@@ -1,4 +1,3 @@
-import { Portal } from '@ark-ui/react'
 import { XIcon } from 'lucide-react'
 import { Stack } from 'styled-system/jsx'
 import { Button, Dialog, IconButton } from '~/components/ui'
@@ -9,32 +8,30 @@ export const Demo = (props: Dialog.RootProps) => {
       <Dialog.Trigger asChild>
         <Button variant="outline">Open dialog</Button>
       </Dialog.Trigger>
-      <Portal>
-        <Dialog.Backdrop />
-        <Dialog.Positioner>
-          <Dialog.Content>
-            <Stack gap="8" p="6">
-              <Stack gap="1">
-                <Dialog.Title>Dialog Title</Dialog.Title>
-                <Dialog.Description>Dialog Description</Dialog.Description>
-              </Stack>
-              <Stack gap="3" direction="row" width="full">
-                <Dialog.CloseTrigger asChild>
-                  <Button variant="outline" width="full">
-                    Cancel
-                  </Button>
-                </Dialog.CloseTrigger>
-                <Button width="full">Confirm</Button>
-              </Stack>
+      <Dialog.Backdrop />
+      <Dialog.Positioner>
+        <Dialog.Content>
+          <Stack gap="8" p="6">
+            <Stack gap="1">
+              <Dialog.Title>Dialog Title</Dialog.Title>
+              <Dialog.Description>Dialog Description</Dialog.Description>
             </Stack>
-            <Dialog.CloseTrigger asChild position="absolute" top="2" right="2">
-              <IconButton aria-label="Close Dialog" variant="ghost" size="sm">
-                <XIcon />
-              </IconButton>
-            </Dialog.CloseTrigger>
-          </Dialog.Content>
-        </Dialog.Positioner>
-      </Portal>
+            <Stack gap="3" direction="row" width="full">
+              <Dialog.CloseTrigger asChild>
+                <Button variant="outline" width="full">
+                  Cancel
+                </Button>
+              </Dialog.CloseTrigger>
+              <Button width="full">Confirm</Button>
+            </Stack>
+          </Stack>
+          <Dialog.CloseTrigger asChild position="absolute" top="2" right="2">
+            <IconButton aria-label="Close Dialog" variant="ghost" size="sm">
+              <XIcon />
+            </IconButton>
+          </Dialog.CloseTrigger>
+        </Dialog.Content>
+      </Dialog.Positioner>
     </Dialog.Root>
   )
 }
diff --git a/website/src/demos/editable.demo.tsx b/website/src/demos/editable.demo.tsx
@@ -1,3 +1,4 @@
+'use client'
 import { Button, Editable, FormLabel } from '~/components/ui'
 
 export const Demo = (props: Editable.RootProps) => {

diff --git a/website/src/demos/file-upload.demo.tsx b/website/src/demos/file-upload.demo.tsx
@@ -1,3 +1,4 @@
+'use client'
 import { Trash2Icon } from 'lucide-react'
 import { Button, FileUpload, IconButton } from '~/components/ui'
 

diff --git a/website/src/demos/nested-menu.demo.tsx b/website/src/demos/nested-menu.demo.tsx
@@ -1,4 +1,3 @@
-import { Portal } from '@ark-ui/react'
 import {
   ChevronRightIcon,
   CreditCardIcon,
@@ -62,31 +61,29 @@ export const Demo = (props: Menu.RootProps) => {
                 </HStack>
                 <ChevronRightIcon />
               </Menu.TriggerItem>
-              <Portal>
-                <Menu.Positioner>
-                  <Menu.Content>
-                    <Menu.Item value="email">
-                      <HStack gap="2">
-                        <MailIcon />
-                        Email
-                      </HStack>
-                    </Menu.Item>
-                    <Menu.Item value="message">
-                      <HStack gap="2">
-                        <MessageSquareIcon />
-                        Message
-                      </HStack>
-                    </Menu.Item>
-                    <Menu.Separator />
-                    <Menu.Item value="other">
-                      <HStack gap="2">
-                        <PlusCircleIcon />
-                        More Options...
-                      </HStack>
-                    </Menu.Item>
-                  </Menu.Content>
-                </Menu.Positioner>
-              </Portal>
+              <Menu.Positioner>
+                <Menu.Content>
+                  <Menu.Item value="email">
+                    <HStack gap="2">
+                      <MailIcon />
+                      Email
+                    </HStack>
+                  </Menu.Item>
+                  <Menu.Item value="message">
+                    <HStack gap="2">
+                      <MessageSquareIcon />
+                      Message
+                    </HStack>
+                  </Menu.Item>
+                  <Menu.Separator />
+                  <Menu.Item value="other">
+                    <HStack gap="2">
+                      <PlusCircleIcon />
+                      More Options...
+                    </HStack>
+                  </Menu.Item>
+                </Menu.Content>
+              </Menu.Positioner>
             </Menu.Root>
             <Menu.Separator />
             <Menu.Item value="logout">

diff --git a/website/src/demos/pin-input.demo.tsx b/website/src/demos/pin-input.demo.tsx
@@ -2,7 +2,7 @@ import { PinInput, type PinInputProps } from '~/components/ui/pin-input'
 
 export const Demo = (props: PinInputProps) => {
   return (
-    <PinInput placeholder="0" onValueComplete={(e) => alert(e.valueAsString)} {...props}>
+    <PinInput placeholder="0" {...props}>
       Pin Input
     </PinInput>
   )

diff --git a/website/src/demos/popover.demo.tsx b/website/src/demos/popover.demo.tsx
@@ -1,34 +1,31 @@
-import { Portal } from '@ark-ui/react'
 import { XIcon } from 'lucide-react'
 import { Box, Stack } from 'styled-system/jsx'
 import { Button, IconButton, Popover } from '~/components/ui'
 
 export const Demo = (props: Popover.RootProps) => (
-  <Popover.Root portalled {...props}>
+  <Popover.Root {...props}>
     <Popover.Trigger asChild>
       <Button variant="outline">Open Popover</Button>
     </Popover.Trigger>
-    <Portal>
-      <Popover.Positioner>
-        <Popover.Content>
-          <Popover.Arrow>
-            <Popover.ArrowTip />
-          </Popover.Arrow>
-          <Stack gap="1">
-            <Popover.Title>Favorite Framework</Popover.Title>
-            <Popover.Description>
-              Tell us what is your favorite framework and why you love to use it.
-            </Popover.Description>
-          </Stack>
-          <Box position="absolute" top="1" right="1">
-            <Popover.CloseTrigger asChild>
-              <IconButton aria-label="Close Popover" variant="ghost" size="sm">
-                <XIcon />
-              </IconButton>
-            </Popover.CloseTrigger>
-          </Box>
-        </Popover.Content>
-      </Popover.Positioner>
-    </Portal>
+    <Popover.Positioner>
+      <Popover.Content>
+        <Popover.Arrow>
+          <Popover.ArrowTip />
+        </Popover.Arrow>
+        <Stack gap="1">
+          <Popover.Title>Favorite Framework</Popover.Title>
+          <Popover.Description>
+            Tell us what is your favorite framework and why you love to use it.
+          </Popover.Description>
+        </Stack>
+        <Box position="absolute" top="1" right="1">
+          <Popover.CloseTrigger asChild>
+            <IconButton aria-label="Close Popover" variant="ghost" size="sm">
+              <XIcon />
+            </IconButton>
+          </Popover.CloseTrigger>
+        </Box>
+      </Popover.Content>
+    </Popover.Positioner>
   </Popover.Root>
 )
diff --git a/website/src/demos/select.demo.tsx b/website/src/demos/select.demo.tsx
@@ -1,4 +1,3 @@
-import { Portal } from '@ark-ui/react'
 import { CheckIcon, ChevronsUpDownIcon } from 'lucide-react'
 import { Select } from '~/components/ui'
 
@@ -19,23 +18,21 @@ export const Demo = (props: Omit<Select.RootProps, 'items'>) => {
           <ChevronsUpDownIcon />
         </Select.Trigger>
       </Select.Control>
-      <Portal>
-        <Select.Positioner>
-          <Select.Content>
-            <Select.ItemGroup>
-              <Select.ItemGroupLabel>Framework</Select.ItemGroupLabel>
-              {items.map((item) => (
-                <Select.Item key={item.value} item={item}>
-                  <Select.ItemText>{item.label}</Select.ItemText>
-                  <Select.ItemIndicator>
-                    <CheckIcon />
-                  </Select.ItemIndicator>
-                </Select.Item>
-              ))}
-            </Select.ItemGroup>
-          </Select.Content>
-        </Select.Positioner>
-      </Portal>
+      <Select.Positioner>
+        <Select.Content>
+          <Select.ItemGroup>
+            <Select.ItemGroupLabel>Framework</Select.ItemGroupLabel>
+            {items.map((item) => (
+              <Select.Item key={item.value} item={item}>
+                <Select.ItemText>{item.label}</Select.ItemText>
+                <Select.ItemIndicator>
+                  <CheckIcon />
+                </Select.ItemIndicator>
+              </Select.Item>
+            ))}
+          </Select.ItemGroup>
+        </Select.Content>
+      </Select.Positioner>
     </Select.Root>
   )
 }
diff --git a/website/src/demos/tags-input.demo.tsx b/website/src/demos/tags-input.demo.tsx
@@ -1,3 +1,4 @@
+'use client'
 import { XIcon } from 'lucide-react'
 import { Button, IconButton, TagsInput } from '~/components/ui'
 

diff --git a/website/src/demos/toast.demo.tsx b/website/src/demos/toast.demo.tsx
@@ -1,4 +1,5 @@
-import { Toaster, createToaster } from '@ark-ui/react'
+'use client'
+import { Toaster, createToaster } from '@ark-ui/react/toast'
 import { XIcon } from 'lucide-react'
 import { Button, Toast } from '~/components/ui'
 

diff --git a/website/src/demos/tooltip.demo.tsx b/website/src/demos/tooltip.demo.tsx
@@ -1,16 +1,13 @@
-import { Portal } from '@ark-ui/react'
 import { Tooltip } from '~/components/ui'
 
 export const Demo = (props: Tooltip.RootProps) => (
   <Tooltip.Root {...props}>
     <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
-    <Portal>
-      <Tooltip.Positioner>
-        <Tooltip.Arrow>
-          <Tooltip.ArrowTip />
-        </Tooltip.Arrow>
-        <Tooltip.Content>I am a Tooltip!</Tooltip.Content>
-      </Tooltip.Positioner>
-    </Portal>
+    <Tooltip.Positioner>
+      <Tooltip.Arrow>
+        <Tooltip.ArrowTip />
+      </Tooltip.Arrow>
+      <Tooltip.Content>I am a Tooltip!</Tooltip.Content>
+    </Tooltip.Positioner>
   </Tooltip.Root>
 )