refactor: starter components

chakra-ui · Feb 1, 2024 · d89aaa3 · d89aaa3
1 parent 005bd57
commit d89aaa3
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 36 deletions.
diff --git a/examples/next-app/components/color-picker.tsx b/examples/next-app/components/color-picker.tsx
@@ -25,20 +25,22 @@ interface Props extends Omit<colorPicker.Context, "id"> {
 }
 
 export function ColorPicker(props: Props) {
-  const { defaultOpen, defaultValue, ...contextProps } = props
+  const { defaultOpen, defaultValue, open, value, ...contextProps } = props
 
   const [state, send] = useMachine(
     colorPicker.machine({
       id: useId(),
       name: "color",
       format: "hsla",
       value: colorPicker.parse("hsl(0, 100%, 50%)"),
+      open: open ?? defaultOpen,
     }),
     {
       context: {
         ...contextProps,
-        open: Boolean(contextProps.open ?? defaultOpen),
-        value: contextProps.value ?? defaultValue,
+        __controlled: open !== undefined,
+        open: open ?? defaultOpen,
+        value: value ?? defaultValue,
       },
     },
   )

diff --git a/examples/next-app/components/date-range-picker.tsx b/examples/next-app/components/date-range-picker.tsx
@@ -9,19 +9,26 @@ interface Props extends Omit<datePicker.Context, "id" | "__controlled"> {
 }
 
 export function DateRangePicker(props: Props) {
-  const { defaultOpen, defaultValue, ...contextProps } = props
+  const { defaultOpen, defaultValue, value, open, ...contextProps } = props
 
-  const [state, send] = useMachine(datePicker.machine({ id: useId() }), {
-    context: {
-      ...contextProps,
-      selectionMode: "range",
-      locale: "en",
-      numOfMonths: 2,
-      __controlled: contextProps.open !== undefined,
-      open: Boolean(contextProps.open ?? defaultOpen),
-      value: contextProps.value ?? defaultValue,
+  const [state, send] = useMachine(
+    datePicker.machine({
+      id: useId(),
+      value: value ?? defaultValue,
+      open: open ?? defaultOpen,
+    }),
+    {
+      context: {
+        locale: "en",
+        numOfMonths: 2,
+        ...contextProps,
+        selectionMode: "range",
+        __controlled: open !== undefined,
+        open: open ?? defaultOpen,
+        value: value ?? defaultValue,
+      },
     },
-  })
+  )
 
   const api = datePicker.connect(state, send, normalizeProps)
 

diff --git a/examples/next-app/components/dialog.tsx b/examples/next-app/components/dialog.tsx
@@ -2,22 +2,26 @@ import * as dialog from "@zag-js/dialog"
 import { useMachine, normalizeProps, Portal } from "@zag-js/react"
 import { useId } from "react"
 
-interface Props {
-  open: boolean
+interface Props extends Omit<dialog.Context, "__controlled" | "id"> {
   defaultOpen?: boolean
-  onOpenChange?: dialog.Context["onOpenChange"]
 }
 
 export function Dialog(props: Props) {
-  const { open, defaultOpen, onOpenChange } = props
+  const { open, defaultOpen, ...context } = props
 
-  const [state, send] = useMachine(dialog.machine({ id: useId() }), {
-    context: {
-      __controlled: open !== undefined,
-      open: Boolean(open ?? defaultOpen),
-      onOpenChange: onOpenChange,
+  const [state, send] = useMachine(
+    dialog.machine({
+      id: useId(),
+      open: open ?? defaultOpen,
+    }),
+    {
+      context: {
+        ...context,
+        __controlled: open !== undefined,
+        open: open ?? defaultOpen,
+      },
     },
-  })
+  )
 
   const api = dialog.connect(state, send, normalizeProps)
 

diff --git a/examples/next-app/components/popover.tsx b/examples/next-app/components/popover.tsx
@@ -2,22 +2,26 @@ import * as popover from "@zag-js/popover"
 import { useMachine, normalizeProps, Portal } from "@zag-js/react"
 import { useId } from "react"
 
-interface Props {
-  open: boolean
+interface Props extends Omit<popover.Context, "__controlled" | "id"> {
   defaultOpen?: boolean
-  onOpenChange?: popover.Context["onOpenChange"]
 }
 
 export function Popover(props: Props) {
-  const { open, defaultOpen, onOpenChange } = props
+  const { open, defaultOpen, ...context } = props
 
-  const [state, send] = useMachine(popover.machine({ id: useId() }), {
-    context: {
-      __controlled: open !== undefined,
-      open: Boolean(open ?? defaultOpen),
-      onOpenChange: onOpenChange,
+  const [state, send] = useMachine(
+    popover.machine({
+      id: useId(),
+      open: open ?? defaultOpen,
+    }),
+    {
+      context: {
+        ...context,
+        __controlled: open !== undefined,
+        open: open ?? defaultOpen,
+      },
     },
-  })
+  )
 
   const api = popover.connect(state, send, normalizeProps)
 

diff --git a/examples/next-app/components/tooltip.tsx b/examples/next-app/components/tooltip.tsx
@@ -9,7 +9,7 @@ interface Props extends Omit<tooltip.Context, "id" | "__controlled"> {
 }
 
 export function Tooltip(props: Props) {
-  const { defaultOpen, label, open, children, ...rest } = props
+  const { defaultOpen, label, open, children, ...context } = props
 
   const [state, send] = useMachine(
     tooltip.machine({
@@ -18,7 +18,7 @@ export function Tooltip(props: Props) {
     }),
     {
       context: {
-        ...rest,
+        ...context,
         open: open ?? defaultOpen,
         __controlled: open !== undefined,
       },