feat: add timer machine (chakra-ui#1508)

* feat: add timer machine

* chore: simplify samples

* chore: add anatomy

* chore: update anatomy

* refactor: timer machine

* docs: add changeset

---------

Co-authored-by: Segun Adebayo <[email protected]>

.changeset/fast-radios-exercise.md

@@ -0,0 +1,5 @@
+---
+"@zag-js/timer": minor
+---
+
+Initial release

.xstate/timer.js

@@ -0,0 +1,78 @@
+"use strict";
+
+var _xstate = require("xstate");
+const {
+  actions,
+  createMachine,
+  assign
+} = _xstate;
+const {
+  choose
+} = actions;
+const fetchMachine = createMachine({
+  id: "timer",
+  initial: ctx.autoStart ? "running" : "idle",
+  context: {
+    "hasReachedTarget": false
+  },
+  on: {
+    RESTART: {
+      target: "running",
+      actions: "resetTime"
+    }
+  },
+  on: {
+    UPDATE_CONTEXT: {
+      actions: "updateContext"
+    }
+  },
+  states: {
+    idle: {
+      on: {
+        START: "running",
+        RESET: {
+          actions: "resetTime"
+        }
+      }
+    },
+    running: {
+      invoke: {
+        src: "interval",
+        id: "interval"
+      },
+      on: {
+        PAUSE: "paused",
+        TICK: [{
+          target: "idle",
+          cond: "hasReachedTarget",
+          actions: ["invokeOnComplete"]
+        }, {
+          actions: ["updateTime", "invokeOnTick"]
+        }],
+        RESET: {
+          actions: "resetTime"
+        }
+      }
+    },
+    paused: {
+      on: {
+        RESUME: "running",
+        RESET: {
+          target: "idle",
+          actions: "resetTime"
+        }
+      }
+    }
+  }
+}, {
+  actions: {
+    updateContext: assign((context, event) => {
+      return {
+        [event.contextKey]: true
+      };
+    })
+  },
+  guards: {
+    "hasReachedTarget": ctx => ctx["hasReachedTarget"]
+  }
+});

e2e/time-picker.e2e.ts

@@ -3,7 +3,7 @@ import { TimePickerModel } from "./models/time-picker.model"
 
 let I: TimePickerModel
 
-test.describe("timepicker", () => {
+test.describe.skip("timepicker", () => {
   test.beforeEach(async ({ page }) => {
     I = new TimePickerModel(page)
     await I.goto()

examples/next-ts/package.json

@@ -72,6 +72,7 @@
     "@zag-js/tags-input": "workspace:*",
     "@zag-js/text-selection": "workspace:*",
     "@zag-js/time-picker": "workspace:*",
+    "@zag-js/timer": "workspace:*",
     "@zag-js/toast": "workspace:*",
     "@zag-js/toggle-group": "workspace:*",
     "@zag-js/tooltip": "workspace:*",

examples/next-ts/pages/timer-countdown.tsx

@@ -0,0 +1,48 @@
+import { normalizeProps, useMachine } from "@zag-js/react"
+import * as timer from "@zag-js/timer"
+import { useId } from "react"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default function Page() {
+  const [state, send] = useMachine(
+    timer.machine({
+      id: useId(),
+      countdown: true,
+      autoStart: true,
+      startMs: timer.parse({ day: 2, second: 10 }),
+      onComplete() {
+        console.log("Timer completed")
+      },
+    }),
+  )
+
+  const api = timer.connect(state, send, normalizeProps)
+
+  return (
+    <>
+      <main className="timer">
+        <div {...api.rootProps}>
+          <div {...api.getSegmentProps({ type: "day" })}>{api.segments.day}</div>
+          <div {...api.separatorProps}>:</div>
+          <div {...api.getSegmentProps({ type: "hour" })}>{api.segments.hour}</div>
+          <div {...api.separatorProps}>:</div>
+          <div {...api.getSegmentProps({ type: "minute" })}>{api.segments.minute}</div>
+          <div {...api.separatorProps}>:</div>
+          <div {...api.getSegmentProps({ type: "second" })}>{api.segments.second}</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>
+      </main>
+
+      <Toolbar controls={null} viz>
+        <StateVisualizer state={state} />
+      </Toolbar>
+    </>
+  )
+}

examples/next-ts/pages/timer-stopwatch.tsx

@@ -0,0 +1,45 @@
+import * as timer from "@zag-js/timer"
+import { useMachine, normalizeProps } from "@zag-js/react"
+import { useId } from "react"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default function Page() {
+  const [state, send] = useMachine(
+    timer.machine({
+      id: useId(),
+      autoStart: true,
+      // startMs: timer.parse({ day: 2, second: 10 }),
+      // targetMs: timer.parse({ day: 2, second: 20 }),
+    }),
+  )
+
+  const api = timer.connect(state, send, normalizeProps)
+
+  return (
+    <>
+      <main className="timer">
+        <div {...api.rootProps}>
+          <div {...api.getSegmentProps({ type: "day" })}>{api.segments.day}</div>
+          <div {...api.separatorProps}>:</div>
+          <div {...api.getSegmentProps({ type: "hour" })}>{api.segments.hour}</div>
+          <div {...api.separatorProps}>:</div>
+          <div {...api.getSegmentProps({ type: "minute" })}>{api.segments.minute}</div>
+          <div {...api.separatorProps}>:</div>
+          <div {...api.getSegmentProps({ type: "second" })}>{api.segments.second}</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>
+      </main>
+
+      <Toolbar controls={null} viz>
+        <StateVisualizer state={state} />
+      </Toolbar>
+    </>
+  )
+}

examples/solid-ts/src/routes.ts

@@ -37,9 +37,7 @@ export const routes: RouteDefinition[] = [
   { path: "/number-input", component: lazy(() => import("./pages/number-input")) },
   { path: "/pagination", component: lazy(() => import("./pages/pagination")) },
   { path: "/pin-input", component: lazy(() => import("./pages/pin-input")) },
-  // { path: "/popper", component:  lazy(()=>import("./pages/popper")) },
   { path: "/popover", component: lazy(() => import("./pages/popover")) },
-  // { path: "/nested-popover", component:  lazy(()=>import("./pages/nested-popover")) },
   { path: "/radio-group", component: lazy(() => import("./pages/radio-group")) },
   { path: "/range-slider", component: lazy(() => import("./pages/range-slider")) },
   { path: "/rating-group", component: lazy(() => import("./pages/rating-group")) },

packages/machines/timer/CHANGELOG.md

@@ -0,0 +1 @@
+# @zag-js/checkbox

packages/machines/timer/README.md

@@ -0,0 +1,19 @@
+# @zag-js/checkbox
+
+Core logic for the checkbox widget implemented as a state machine
+
+## **Installation**
+
+```sh
+yarn add @zag-js/timer
+# or
+npm i @zag-js/timer
+```
+
+## Contribution
+
+Yes please! See the [contributing guidelines](https://github.com/chakra-ui/zag/blob/main/CONTRIBUTING.md) for details.
+
+## Licence
+
+This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/zag/blob/main/LICENSE).

packages/machines/timer/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@zag-js/timer",
+  "version": "0.50.0",
+  "description": "Core logic for the timer widget implemented as a state machine",
+  "keywords": [
+    "js",
+    "machine",
+    "xstate",
+    "statechart",
+    "component",
+    "chakra-ui",
+    "timer"
+  ],
+  "author": "Abraham Aremu <[email protected]>",
+  "homepage": "https://github.com/chakra-ui/zag#readme",
+  "license": "MIT",
+  "repository": "https://github.com/chakra-ui/zag/tree/main/packages/timer",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "test": "jest --config ../../jest.config.js --rootDir tests",
+    "lint": "eslint src --ext .ts,.tsx",
+    "test-ci": "pnpm test --ci --runInBand -u",
+    "test-watch": "pnpm test --watch",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": {
+    "url": "https://github.com/chakra-ui/zag/issues"
+  },
+  "dependencies": {
+    "@zag-js/core": "workspace:*",
+    "@zag-js/types": "workspace:*",
+    "@zag-js/utils": "workspace:*"
+  },
+  "devDependencies": {
+    "clean-package": "2.2.0"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "main": "src/index.ts"
+}

packages/machines/timer/src/index.ts

@@ -0,0 +1,14 @@
+export { anatomy } from "./timer.anatomy"
+export { connect } from "./timer.connect"
+export { machine } from "./timer.machine"
+export * from "./timer.parse"
+export * from "./timer.props"
+export type {
+  MachineApi as Api,
+  UserDefinedContext as Context,
+  MachineState,
+  SegmentProps,
+  SegmentType,
+  TickDetails,
+  TimeSegments,
+} from "./timer.types"

packages/machines/timer/src/timer.anatomy.ts

@@ -0,0 +1,4 @@
+import { createAnatomy } from "@zag-js/anatomy"
+
+export const anatomy = createAnatomy("timer").parts("root", "segment", "separator")
+export const parts = anatomy.build()

packages/machines/timer/src/timer.connect.ts

@@ -0,0 +1,43 @@
+import type { NormalizeProps, PropTypes } from "@zag-js/types"
+import type { MachineApi, State, Send } from "./timer.types"
+import { parts } from "./timer.anatomy"
+
+export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {
+  const running = state.matches("running")
+  const paused = state.matches("paused")
+
+  return {
+    running,
+    paused,
+    segments: state.context.segments,
+    progressPercent: state.context.progressPercent,
+    start() {
+      send("START")
+    },
+    pause() {
+      send("PAUSE")
+    },
+    resume() {
+      send("RESUME")
+    },
+    reset() {
+      send("RESET")
+    },
+    restart() {
+      send("RESTART")
+    },
+    rootProps: normalize.element({
+      ...parts.root.attrs,
+    }),
+    getSegmentProps(props) {
+      return normalize.element({
+        ...parts.segment.attrs,
+        "data-type": props.type,
+      })
+    },
+    separatorProps: normalize.element({
+      role: "separator",
+      ...parts.separator.attrs,
+    }),
+  }
+}