[Docs] Migrate with-xstate to typescript (#39974)

## Changes

- Update packages
- Migrate to Typescript
- Refactor Component structure
- Normalize Code style

## Documentation / Examples

- [x] Make sure the linting passes by running `pnpm lint`
- [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)

examples/with-xstate/components/Counter.tsx

@@ -0,0 +1,18 @@
+import { useMachine } from '@xstate/react'
+import { counterMachine } from '../machines/counter'
+
+export default function Counter({ counter = {} }) {
+  const [current, send] = useMachine(counterMachine, {
+    context: { count: 999 },
+  })
+  return (
+    <section>
+      <h2>
+        Count: <span>{current.context.count}</span>
+      </h2>
+      <button onClick={() => send('DEC')}>-1</button>
+      <button onClick={() => send('INC')}>+1</button>
+      <button onClick={() => send('RESET')}>Reset</button>
+    </section>
+  )
+}

examples/with-xstate/components/Toggle.tsx

@@ -0,0 +1,14 @@
+import { useMachine } from '@xstate/react'
+import { toggleMachine } from '../machines/toggle'
+
+export default function Toggle() {
+  const [current, send] = useMachine(toggleMachine)
+  return (
+    <div>
+      <h2>
+        Toogle status: <span>{current.matches('active') ? 'On' : 'Off'}</span>
+      </h2>
+      <button onClick={() => send('TOGGLE')}>Toggle</button>
+    </div>
+  )
+}

examples/with-xstate/machines/counter.ts

@@ -0,0 +1,26 @@
+import { createMachine, assign } from 'xstate'
+
+type CounterContext = {
+  count: number
+}
+
+type CounterEvents = {
+  type: 'INC' | 'DEC' | 'RESET'
+}
+
+export const counterMachine = createMachine<CounterContext, CounterEvents>({
+  predictableActionArguments: true,
+  initial: 'active',
+  context: {
+    count: 0,
+  },
+  states: {
+    active: {
+      on: {
+        INC: { actions: assign({ count: (context) => context.count + 1 }) },
+        DEC: { actions: assign({ count: (context) => context.count - 1 }) },
+        RESET: { actions: assign({ count: 0 }) },
+      },
+    },
+  },
+})

examples/with-xstate/machines/toggleMachine.js → examples/with-xstate/machines/toggle.ts

@@ -1,6 +1,15 @@
 import { createMachine } from 'xstate'
 
-export const toggleMachine = createMachine({
+type ToggleContext = {
+  value: 'inactive' | 'active'
+}
+
+type ToggleEvents = {
+  type: 'TOGGLE'
+}
+
+export const toggleMachine = createMachine<ToggleContext, ToggleEvents>({
+  predictableActionArguments: true,
   id: 'toggle',
   initial: 'inactive',
   states: {

examples/with-xstate/package.json

@@ -6,10 +6,15 @@
     "start": "next start"
   },
   "dependencies": {
-    "@xstate/react": "^1.3.1",
-    "next": "latest",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "xstate": "^4.17.0"
+    "@xstate/react": "^3.0.1",
+    "next": "12.2.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "xstate": "^4.33.3"
+  },
+  "devDependencies": {
+    "@types/node": "18.7.13",
+    "@types/react": "16.9.17",
+    "typescript": "4.6.3"
   }
 }

examples/with-xstate/pages/index.tsx

@@ -0,0 +1,13 @@
+import Counter from '../components/Counter'
+import Toggle from '../components/Toggle'
+
+export default function IndexPage() {
+  return (
+    <>
+      <h1>XState Example</h1>
+      <Counter />
+      <hr />
+      <Toggle />
+    </>
+  )
+}

examples/with-xstate/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}