Add input example and update types (#185)

Author: charkour

examples/web/pages/input.tsx

@@ -0,0 +1,61 @@
+import { temporal, type TemporalState } from 'zundo';
+import { useStore, createStore } from 'zustand';
+import { shallow } from 'zustand/shallow';
+
+interface MyState {
+  fontSize: number;
+  changeFontSize: (fontSize: number) => void;
+}
+
+const withZundo = temporal<MyState>((set) => ({
+  fontSize: 16,
+  changeFontSize: (fontSize) => set({ fontSize }),
+}));
+
+const originalStore = createStore(withZundo);
+
+const useBaseStore = <T extends unknown>(
+  selector: (state: MyState) => T,
+  equality?: (a: T, b: T) => boolean,
+) => useStore(originalStore, selector, equality);
+const useTemporalStore = <T extends unknown>(
+  selector: (state: TemporalState<MyState>) => T,
+  equality?: (a: T, b: T) => boolean,
+) => useStore(originalStore.temporal, selector, equality);
+
+export default function App() {
+  const { fontSize, changeFontSize } = useBaseStore((state) => state);
+  const { futureStates, pastStates, undo, resume, pause } = useTemporalStore(
+    (state) => state,
+    shallow,
+  );
+
+  return (
+    <div>
+      <h1>Web</h1>
+      <div>
+        <input
+          type="number"
+          value={fontSize}
+          onFocus={() => {
+            changeFontSize(fontSize);
+            pause();
+          }}
+          onChange={(e) => changeFontSize(e.target.valueAsNumber)}
+          onBlur={(e) => {
+            resume();
+            changeFontSize(e.target.valueAsNumber);
+          }}
+        />
+        <span>{fontSize}</span>
+        <div>
+          <h2>Future States</h2>
+          <div>{JSON.stringify(futureStates)}</div>
+          <h2>Previous States</h2>
+          <div>{JSON.stringify(pastStates)}</div>
+          <button onClick={() => undo()}>Undo</button>
+        </div>
+      </div>
+    </div>
+  );
+}

examples/web/pages/persist.tsx

@@ -1,10 +1,9 @@
 import { useMemo } from 'react';
 import { create } from 'zustand';
 import { temporal } from 'zundo';
-import { persist } from 'zustand/middleware';
+import { persist, type PersistOptions } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
 import dynamic from 'next/dynamic';
-import { PersistOptions } from 'zustand/middleware/persist';
 import merge from 'lodash.merge';
 
 interface Store {

examples/web/pages/reactive.tsx

@@ -1,5 +1,5 @@
-import { TemporalState, temporal } from 'zundo';
-import { StoreApi, useStore, create } from 'zustand';
+import { type TemporalState, temporal } from 'zundo';
+import { type StoreApi, useStore, create } from 'zustand';
 
 interface MyState {
   bears: number;