refactor: timer machine

chakra-ui · Sep 12, 2024 · f079c60 · f079c60
1 parent 7db581b
commit f079c60
Show file tree

Hide file tree

Showing 23 changed files with 328 additions and 172 deletions.
diff --git a/.changeset/hip-pots-perform.md b/.changeset/hip-pots-perform.md
@@ -0,0 +1,51 @@
+---
+"@zag-js/timer": minor
+---
+
+- Introduces new area and control parts for better anatomy and structure.
+- [BREAKING] Move `role"timer` to new area part.
+- Automatically hide the action triggers based on the action prop passed.
+
+**BEFORE:**
+
+```tsx
+<div>
+  <div {...api.getRootProps()}>
+    <div {...api.getItemProps({ type: "days" })}>{api.formattedTime.days}</div>
+    <div {...api.getSeparatorProps()}>:</div>
+    <div {...api.getItemProps({ type: "hours" })}>{api.formattedTime.hours}</div>
+    <div {...api.getSeparatorProps()}>:</div>
+    <div {...api.getItemProps({ type: "minutes" })}>{api.formattedTime.minutes}</div>
+    <div {...api.getSeparatorProps()}>:</div>
+    <div {...api.getItemProps({ type: "seconds" })}>{api.formattedTime.seconds}</div>
+  </div>
+  <div>
+    <button {...api.getActionTriggerProps({ action: "start" })}>START</button>
+    <button {...api.getActionTriggerProps({ action: "pause" })}>PAUSE</button>
+    <button {...api.getActionTriggerProps({ action: "resume" })}>RESUME</button>
+    <button {...api.getActionTriggerProps({ action: "reset" })}>RESET</button>
+  </div>
+</div>
+```
+
+**AFTER:**
+
+```tsx
+<div {...api.getRootProps()}>
+  <div {...api.getAreaProps()}>
+    <div {...api.getItemProps({ type: "days" })}>{api.formattedTime.days}</div>
+    <div {...api.getSeparatorProps()}>:</div>
+    <div {...api.getItemProps({ type: "hours" })}>{api.formattedTime.hours}</div>
+    <div {...api.getSeparatorProps()}>:</div>
+    <div {...api.getItemProps({ type: "minutes" })}>{api.formattedTime.minutes}</div>
+    <div {...api.getSeparatorProps()}>:</div>
+    <div {...api.getItemProps({ type: "seconds" })}>{api.formattedTime.seconds}</div>
+  </div>
+  <div {...api.getControlProps()}>
+    <button {...api.getActionTriggerProps({ action: "start" })}>START</button>
+    <button {...api.getActionTriggerProps({ action: "pause" })}>PAUSE</button>
+    <button {...api.getActionTriggerProps({ action: "resume" })}>RESUME</button>
+    <button {...api.getActionTriggerProps({ action: "reset" })}>RESET</button>
+  </div>
+</div>
+```
diff --git a/examples/next-ts/pages/timer-countdown.tsx b/examples/next-ts/pages/timer-countdown.tsx
@@ -23,20 +23,22 @@ export default function Page() {
     <>
       <main className="timer">
         <div {...api.getRootProps()}>
-          <div {...api.getItemProps({ type: "days" })}>{api.formattedTime.days}</div>
-          <div {...api.getSeparatorProps()}>:</div>
-          <div {...api.getItemProps({ type: "hours" })}>{api.formattedTime.hours}</div>
-          <div {...api.getSeparatorProps()}>:</div>
-          <div {...api.getItemProps({ type: "minutes" })}>{api.formattedTime.minutes}</div>
-          <div {...api.getSeparatorProps()}>:</div>
-          <div {...api.getItemProps({ type: "seconds" })}>{api.formattedTime.seconds}</div>
+          <div {...api.getAreaProps()}>
+            <div {...api.getItemProps({ type: "days" })}>{api.formattedTime.days}</div>
+            <div {...api.getSeparatorProps()}>:</div>
+            <div {...api.getItemProps({ type: "hours" })}>{api.formattedTime.hours}</div>
+            <div {...api.getSeparatorProps()}>:</div>
+            <div {...api.getItemProps({ type: "minutes" })}>{api.formattedTime.minutes}</div>
+            <div {...api.getSeparatorProps()}>:</div>
+            <div {...api.getItemProps({ type: "seconds" })}>{api.formattedTime.seconds}</div>
+          </div>
         </div>
 
-        <div style={{ display: "flex", gap: "4px" }}>
-          <button onClick={api.start}>START</button>
-          <button onClick={api.pause}>PAUSE</button>
-          <button onClick={api.resume}>RESUME</button>
-          <button onClick={api.reset}>RESET</button>
+        <div {...api.getControlProps()}>
+          <button {...api.getActionTriggerProps({ action: "start" })}>START</button>
+          <button {...api.getActionTriggerProps({ action: "pause" })}>PAUSE</button>
+          <button {...api.getActionTriggerProps({ action: "resume" })}>RESUME</button>
+          <button {...api.getActionTriggerProps({ action: "reset" })}>RESET</button>
         </div>
       </main>
 

diff --git a/examples/next-ts/pages/timer-stopwatch.tsx b/examples/next-ts/pages/timer-stopwatch.tsx
@@ -18,20 +18,22 @@ export default function Page() {
     <>
       <main className="timer">
         <div {...api.getRootProps()}>
-          <div {...api.getItemProps({ type: "days" })}>{api.formattedTime.days}</div>
-          <div {...api.getSeparatorProps()}>:</div>
-          <div {...api.getItemProps({ type: "hours" })}>{api.formattedTime.hours}</div>
-          <div {...api.getSeparatorProps()}>:</div>
-          <div {...api.getItemProps({ type: "minutes" })}>{api.formattedTime.minutes}</div>
-          <div {...api.getSeparatorProps()}>:</div>
-          <div {...api.getItemProps({ type: "seconds" })}>{api.formattedTime.seconds}</div>
-        </div>
+          <div {...api.getAreaProps()}>
+            <div {...api.getItemProps({ type: "days" })}>{api.formattedTime.days}</div>
+            <div {...api.getSeparatorProps()}>:</div>
+            <div {...api.getItemProps({ type: "hours" })}>{api.formattedTime.hours}</div>
+            <div {...api.getSeparatorProps()}>:</div>
+            <div {...api.getItemProps({ type: "minutes" })}>{api.formattedTime.minutes}</div>
+            <div {...api.getSeparatorProps()}>:</div>
+            <div {...api.getItemProps({ type: "seconds" })}>{api.formattedTime.seconds}</div>
+          </div>
 
-        <div style={{ display: "flex", gap: "4px" }}>
-          <button onClick={api.start}>START</button>
-          <button onClick={api.pause}>PAUSE</button>
-          <button onClick={api.resume}>RESUME</button>
-          <button onClick={api.reset}>RESET</button>
+          <div {...api.getControlProps()}>
+            <button {...api.getActionTriggerProps({ action: "start" })}>START</button>
+            <button {...api.getActionTriggerProps({ action: "pause" })}>PAUSE</button>
+            <button {...api.getActionTriggerProps({ action: "resume" })}>RESUME</button>
+            <button {...api.getActionTriggerProps({ action: "reset" })}>RESET</button>
+          </div>
         </div>
       </main>
 

diff --git a/examples/nuxt-ts/pages/timer-countdown.vue b/examples/nuxt-ts/pages/timer-countdown.vue
@@ -21,19 +21,21 @@ const api = computed(() => timer.connect(state.value, send, normalizeProps))
 <template>
   <main class="timer">
     <div v-bind="api.getRootProps()">
-      <div v-bind="api.getItemProps({ type: 'days' })">{{ api.formattedTime.days }}</div>
-      <div v-bind="api.getSeparatorProps()">:</div>
-      <div v-bind="api.getItemProps({ type: 'hours' })">{{ api.formattedTime.hours }}</div>
-      <div v-bind="api.getSeparatorProps()">:</div>
-      <div v-bind="api.getItemProps({ type: 'minutes' })">{{ api.formattedTime.minutes }}</div>
-      <div v-bind="api.getSeparatorProps()">:</div>
-      <div v-bind="api.getItemProps({ type: 'seconds' })">{{ api.formattedTime.seconds }}</div>
-    </div>
-    <div style="display: flex; gap: 4px">
-      <button @click="api.start">START</button>
-      <button @click="api.pause">PAUSE</button>
-      <button @click="api.resume">RESUME</button>
-      <button @click="api.reset">RESET</button>
+      <div v-bind="api.getAreaProps()">
+        <div v-bind="api.getItemProps({ type: 'days' })">{{ api.formattedTime.days }}</div>
+        <div v-bind="api.getSeparatorProps()">:</div>
+        <div v-bind="api.getItemProps({ type: 'hours' })">{{ api.formattedTime.hours }}</div>
+        <div v-bind="api.getSeparatorProps()">:</div>
+        <div v-bind="api.getItemProps({ type: 'minutes' })">{{ api.formattedTime.minutes }}</div>
+        <div v-bind="api.getSeparatorProps()">:</div>
+        <div v-bind="api.getItemProps({ type: 'seconds' })">{{ api.formattedTime.seconds }}</div>
+      </div>
+      <div v-bind="api.getControlProps()">
+        <button v-bind="api.getActionTriggerProps({ action: 'start' })">START</button>
+        <button v-bind="api.getActionTriggerProps({ action: 'pause' })">PAUSE</button>
+        <button v-bind="api.getActionTriggerProps({ action: 'resume' })">RESUME</button>
+        <button v-bind="api.getActionTriggerProps({ action: 'reset' })">RESET</button>
+      </div>
     </div>
   </main>
 

diff --git a/examples/nuxt-ts/pages/timer-stopwatch.vue b/examples/nuxt-ts/pages/timer-stopwatch.vue
@@ -16,19 +16,21 @@ const api = computed(() => timer.connect(state.value, send, normalizeProps))
 <template>
   <main class="timer">
     <div v-bind="api.getRootProps()">
-      <div v-bind="api.getItemProps({ type: 'days' })">{{ api.formattedTime.days }}</div>
-      <div v-bind="api.getSeparatorProps()">:</div>
-      <div v-bind="api.getItemProps({ type: 'hours' })">{{ api.formattedTime.hours }}</div>
-      <div v-bind="api.getSeparatorProps()">:</div>
-      <div v-bind="api.getItemProps({ type: 'minutes' })">{{ api.formattedTime.minutes }}</div>
-      <div v-bind="api.getSeparatorProps()">:</div>
-      <div v-bind="api.getItemProps({ type: 'seconds' })">{{ api.formattedTime.seconds }}</div>
-    </div>
-    <div style="display: flex; gap: 4px">
-      <button @click="api.start">START</button>
-      <button @click="api.pause">PAUSE</button>
-      <button @click="api.resume">RESUME</button>
-      <button @click="api.reset">RESET</button>
+      <div v-bind="api.getAreaProps()">
+        <div v-bind="api.getItemProps({ type: 'days' })">{{ api.formattedTime.days }}</div>
+        <div v-bind="api.getSeparatorProps()">:</div>
+        <div v-bind="api.getItemProps({ type: 'hours' })">{{ api.formattedTime.hours }}</div>
+        <div v-bind="api.getSeparatorProps()">:</div>
+        <div v-bind="api.getItemProps({ type: 'minutes' })">{{ api.formattedTime.minutes }}</div>
+        <div v-bind="api.getSeparatorProps()">:</div>
+        <div v-bind="api.getItemProps({ type: 'seconds' })">{{ api.formattedTime.seconds }}</div>
+      </div>
+      <div v-bind="api.getControlProps()">
+        <button v-bind="api.getActionTriggerProps({ action: 'start' })">START</button>
+        <button v-bind="api.getActionTriggerProps({ action: 'pause' })">PAUSE</button>
+        <button v-bind="api.getActionTriggerProps({ action: 'resume' })">RESUME</button>
+        <button v-bind="api.getActionTriggerProps({ action: 'reset' })">RESET</button>
+      </div>
     </div>
   </main>
 

diff --git a/examples/solid-ts/package.json b/examples/solid-ts/package.json
@@ -88,10 +88,10 @@
     "form-serialize": "0.7.2",
     "lucide-solid": "0.428.0",
     "match-sorter": "6.3.4",
-    "solid-js": "1.8.21",
+    "solid-js": "1.8.22",
     "vinxi": "0.4.1"
   },
   "engines": {
     "node": ">=18"
   }
-}
+}
diff --git a/examples/solid-ts/src/routes/timer-countdown.tsx b/examples/solid-ts/src/routes/timer-countdown.tsx
@@ -23,16 +23,18 @@ export default function Page() {
     <>
       <main class="timer">
         <div {...api().getRootProps()}>
-          <div {...api().getItemProps({ type: "days" })}>{api().formattedTime.days}</div>
-          <div {...api().getSeparatorProps()}>:</div>
-          <div {...api().getItemProps({ type: "hours" })}>{api().formattedTime.hours}</div>
-          <div {...api().getSeparatorProps()}>:</div>
-          <div {...api().getItemProps({ type: "minutes" })}>{api().formattedTime.minutes}</div>
-          <div {...api().getSeparatorProps()}>:</div>
-          <div {...api().getItemProps({ type: "seconds" })}>{api().formattedTime.seconds}</div>
+          <div {...api().getAreaProps()}>
+            <div {...api().getItemProps({ type: "days" })}>{api().formattedTime.days}</div>
+            <div {...api().getSeparatorProps()}>:</div>
+            <div {...api().getItemProps({ type: "hours" })}>{api().formattedTime.hours}</div>
+            <div {...api().getSeparatorProps()}>:</div>
+            <div {...api().getItemProps({ type: "minutes" })}>{api().formattedTime.minutes}</div>
+            <div {...api().getSeparatorProps()}>:</div>
+            <div {...api().getItemProps({ type: "seconds" })}>{api().formattedTime.seconds}</div>
+          </div>
         </div>
 
-        <div style={{ display: "flex", gap: "4px" }}>
+        <div {...api().getControlProps()}>
           <button onClick={api().start}>START</button>
           <button onClick={api().pause}>PAUSE</button>
           <button onClick={api().resume}>RESUME</button>

diff --git a/examples/solid-ts/src/routes/timer-stopwatch.tsx b/examples/solid-ts/src/routes/timer-stopwatch.tsx
@@ -18,16 +18,18 @@ export default function Page() {
     <>
       <main class="timer">
         <div {...api().getRootProps()}>
-          <div {...api().getItemProps({ type: "days" })}>{api().formattedTime.days}</div>
-          <div {...api().getSeparatorProps()}>:</div>
-          <div {...api().getItemProps({ type: "hours" })}>{api().formattedTime.hours}</div>
-          <div {...api().getSeparatorProps()}>:</div>
-          <div {...api().getItemProps({ type: "minutes" })}>{api().formattedTime.minutes}</div>
-          <div {...api().getSeparatorProps()}>:</div>
-          <div {...api().getItemProps({ type: "seconds" })}>{api().formattedTime.seconds}</div>
+          <div {...api().getAreaProps()}>
+            <div {...api().getItemProps({ type: "days" })}>{api().formattedTime.days}</div>
+            <div {...api().getSeparatorProps()}>:</div>
+            <div {...api().getItemProps({ type: "hours" })}>{api().formattedTime.hours}</div>
+            <div {...api().getSeparatorProps()}>:</div>
+            <div {...api().getItemProps({ type: "minutes" })}>{api().formattedTime.minutes}</div>
+            <div {...api().getSeparatorProps()}>:</div>
+            <div {...api().getItemProps({ type: "seconds" })}>{api().formattedTime.seconds}</div>
+          </div>
         </div>
 
-        <div style={{ display: "flex", gap: "4px" }}>
+        <div {...api().getControlProps()}>
           <button onClick={api().start}>START</button>
           <button onClick={api().pause}>PAUSE</button>
           <button onClick={api().resume}>RESUME</button>

diff --git a/examples/svelte-ts/src/routes/timer-countdown.svelte b/examples/svelte-ts/src/routes/timer-countdown.svelte
@@ -21,20 +21,22 @@
 
 <main class="timer">
   <div {...api.getRootProps()}>
-    <div {...api.getItemProps({ type: "days" })}>{api.formattedTime.days}</div>
-    <div {...api.getSeparatorProps()}>:</div>
-    <div {...api.getItemProps({ type: "hours" })}>{api.formattedTime.hours}</div>
-    <div {...api.getSeparatorProps()}>:</div>
-    <div {...api.getItemProps({ type: "minutes" })}>{api.formattedTime.minutes}</div>
-    <div {...api.getSeparatorProps()}>:</div>
-    <div {...api.getItemProps({ type: "seconds" })}>{api.formattedTime.seconds}</div>
-  </div>
+    <div {...api.getAreaProps()}>
+      <div {...api.getItemProps({ type: "days" })}>{api.formattedTime.days}</div>
+      <div {...api.getSeparatorProps()}>:</div>
+      <div {...api.getItemProps({ type: "hours" })}>{api.formattedTime.hours}</div>
+      <div {...api.getSeparatorProps()}>:</div>
+      <div {...api.getItemProps({ type: "minutes" })}>{api.formattedTime.minutes}</div>
+      <div {...api.getSeparatorProps()}>:</div>
+      <div {...api.getItemProps({ type: "seconds" })}>{api.formattedTime.seconds}</div>
+    </div>
 
-  <div style="display:flex; gap: 4px">
-    <button onclick={api.start}>START</button>
-    <button onclick={api.pause}>PAUSE</button>
-    <button onclick={api.resume}>RESUME</button>
-    <button onclick={api.reset}>RESET</button>
+    <div {...api.getControlProps()}>
+      <button {...api.getActionTriggerProps({ action: "start" })}>START</button>
+      <button {...api.getActionTriggerProps({ action: "pause" })}>PAUSE</button>
+      <button {...api.getActionTriggerProps({ action: "resume" })}>RESUME</button>
+      <button {...api.getActionTriggerProps({ action: "reset" })}>RESET</button>
+    </div>
   </div>
 </main>
 

diff --git a/examples/svelte-ts/src/routes/timer-stopwatch.svelte b/examples/svelte-ts/src/routes/timer-stopwatch.svelte
@@ -16,20 +16,22 @@
 
 <main class="timer">
   <div {...api.getRootProps()}>
-    <div {...api.getItemProps({ type: "days" })}>{api.formattedTime.days}</div>
-    <div {...api.getSeparatorProps()}>:</div>
-    <div {...api.getItemProps({ type: "hours" })}>{api.formattedTime.hours}</div>
-    <div {...api.getSeparatorProps()}>:</div>
-    <div {...api.getItemProps({ type: "minutes" })}>{api.formattedTime.minutes}</div>
-    <div {...api.getSeparatorProps()}>:</div>
-    <div {...api.getItemProps({ type: "seconds" })}>{api.formattedTime.seconds}</div>
-  </div>
+    <div {...api.getAreaProps()}>
+      <div {...api.getItemProps({ type: "days" })}>{api.formattedTime.days}</div>
+      <div {...api.getSeparatorProps()}>:</div>
+      <div {...api.getItemProps({ type: "hours" })}>{api.formattedTime.hours}</div>
+      <div {...api.getSeparatorProps()}>:</div>
+      <div {...api.getItemProps({ type: "minutes" })}>{api.formattedTime.minutes}</div>
+      <div {...api.getSeparatorProps()}>:</div>
+      <div {...api.getItemProps({ type: "seconds" })}>{api.formattedTime.seconds}</div>
+    </div>
 
-  <div style="display:flex; gap: 4px">
-    <button onclick={api.start}>START</button>
-    <button onclick={api.pause}>PAUSE</button>
-    <button onclick={api.resume}>RESUME</button>
-    <button onclick={api.reset}>RESET</button>
+    <div {...api.getControlProps()}>
+      <button {...api.getActionTriggerProps({ action: "start" })}>START</button>
+      <button {...api.getActionTriggerProps({ action: "pause" })}>PAUSE</button>
+      <button {...api.getActionTriggerProps({ action: "resume" })}>RESUME</button>
+      <button {...api.getActionTriggerProps({ action: "reset" })}>RESET</button>
+    </div>
   </div>
 </main>
 

diff --git a/packages/machines/timer/package.json b/packages/machines/timer/package.json
@@ -37,6 +37,7 @@
   },
   "dependencies": {
     "@zag-js/anatomy": "workspace:*",
+    "@zag-js/dom-query": "workspace:*",
     "@zag-js/core": "workspace:*",
     "@zag-js/types": "workspace:*",
     "@zag-js/utils": "workspace:*"
@@ -46,4 +47,4 @@
   },
   "clean-package": "../../../clean-package.config.json",
   "main": "src/index.ts"
-}
+}
diff --git a/packages/machines/timer/src/index.ts b/packages/machines/timer/src/index.ts
@@ -8,6 +8,7 @@ export type {
   MachineApi as Api,
   UserDefinedContext as Context,
   ItemProps,
+  ElementIds,
   MachineState,
   Service,
   TickDetails,

diff --git a/packages/machines/timer/src/timer.anatomy.ts b/packages/machines/timer/src/timer.anatomy.ts
@@ -2,6 +2,8 @@ import { createAnatomy } from "@zag-js/anatomy"
 
 export const anatomy = createAnatomy("timer").parts(
   "root",
+  "area",
+  "control",
   "item",
   "itemValue",
   "itemLabel",