chore: add examples

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

examples/next-ts/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [["@babel/plugin-transform-runtime", { "regenerator": true }]]
+}

examples/next-ts/.eslintrc

@@ -0,0 +1,47 @@
+{
+  "root": true,
+  "env": {
+    "node": true,
+    "es6": true
+  },
+  "parserOptions": { "ecmaVersion": 8 },
+  "ignorePatterns": ["node_modules/*", ".next/*", ".out/*", "!.prettierrc.js"],
+  "extends": ["eslint:recommended"],
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "moduleDirectory": ["node_modules", "."]
+      }
+    }
+  },
+  "overrides": [
+    {
+      "files": ["**/*.ts", "**/*.tsx"],
+      "parser": "@typescript-eslint/parser",
+      "settings": { "react": { "version": "detect" } },
+      "env": {
+        "browser": true,
+        "node": true,
+        "es6": true
+      },
+      "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:react/recommended",
+        "plugin:import/errors",
+        "plugin:import/warnings",
+        "plugin:react-hooks/recommended",
+        "plugin:jsx-a11y/recommended"
+      ],
+      "rules": {
+        "import/no-unresolved": "off",
+        "react/prop-types": "off",
+        "react/react-in-jsx-scope": "off",
+        "jsx-a11y/anchor-is-valid": "off",
+        "@typescript-eslint/no-unused-vars": ["error"],
+        "@typescript-eslint/explicit-module-boundary-types": "off",
+        "@typescript-eslint/no-explicit-any": "off"
+      }
+    }
+  ]
+}

examples/next-ts/README.md

@@ -0,0 +1,55 @@
+# TypeScript Next.js example
+
+This is a really simple project that shows the usage of Next.js with TypeScript.
+
+## Deploy your own
+
+Deploy the example using
+[Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-typescript&project-name=with-typescript&repository-name=with-typescript)
+
+## How to use it?
+
+Execute
+[`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app)
+with [npm](https://docs.npmjs.com/cli/init) or
+[Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-typescript with-typescript-app
+# or
+yarn create next-app --example with-typescript with-typescript-app
+```
+
+Deploy it to the cloud with
+[Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example)
+([Documentation](https://nextjs.org/docs/deployment)).
+
+## Notes
+
+This example shows how to integrate the TypeScript type system into Next.js.
+Since TypeScript is supported out of the box with Next.js, all we have to do is
+to install TypeScript.
+
+```
+npm install --save-dev typescript
+```
+
+To enable TypeScript's features, we install the type declarations for React and
+Node.
+
+```
+npm install --save-dev @types/react @types/react-dom @types/node
+```
+
+When we run `next dev` the next time, Next.js will start looking for any `.ts`
+or `.tsx` files in our project and builds it. It even automatically creates a
+`tsconfig.json` file for our project with the recommended settings.
+
+Next.js has built-in TypeScript declarations, so we'll get autocompletion for
+Next.js' modules straight away.
+
+A `type-check` script is also added to `package.json`, which runs TypeScript's
+`tsc` CLI in `noEmit` mode to run type-checking separately. You can then include
+this, for example, in your `test` scripts.

examples/next-ts/components/state-visualizer.tsx

@@ -0,0 +1,37 @@
+import { isBrowser } from "@chakra-ui/utilities/platform-utils"
+
+export function StateVisualizer(props: {
+  state: Record<string, any>
+  style?: Record<string, any>
+  reset?: boolean
+}) {
+  const { state, style, reset } = props
+  return (
+    <pre
+      className="pre"
+      style={
+        reset
+          ? style
+          : {
+              ...style,
+              float: "right",
+              position: "absolute",
+              top: 40,
+              right: 40,
+              minWidth: 400,
+              zIndex: -1,
+            }
+      }
+    >
+      {JSON.stringify(
+        state,
+        (_, value) => {
+          return isBrowser() && value instanceof HTMLElement
+            ? value.tagName
+            : value
+        },
+        4,
+      )}
+    </pre>
+  )
+}

examples/next-ts/hooks/use-mount.ts

@@ -0,0 +1,17 @@
+import { AnyFunction } from "@chakra-ui/utilities"
+import { useId } from "@reach/auto-id"
+import { useEffect, useRef } from "react"
+
+export function useMount<T extends HTMLElement = HTMLElement>(
+  send: AnyFunction,
+) {
+  const ref = useRef<T>(null)
+  const id = useId()
+
+  useEffect(() => {
+    if (!id) return
+    send({ type: "MOUNT", doc: ref.current?.ownerDocument, id })
+  }, [send, id])
+
+  return ref
+}

examples/next-ts/next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

examples/next-ts/next.config.js

@@ -0,0 +1,2 @@
+const withPreconstruct = require("@preconstruct/next")
+module.exports = withPreconstruct({})

examples/next-ts/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "with-typescript",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "clean": "echo clean",
+    "dev": "next",
+    "build": "next build",
+    "start": "next start",
+    "lint": "tsc"
+  },
+  "dependencies": {
+    "@ui-machines/core": "0.1.0",
+    "@ui-machines/react": "0.1.0",
+    "@reach/auto-id": "^0.15.0",
+    "next": "latest",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.1"
+  },
+  "devDependencies": {
+    "@preconstruct/next": "^3.0.0",
+    "@types/node": "^12.12.21",
+    "@types/react": "^17.0.6",
+    "@types/react-dom": "^17.0.1",
+    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "typescript": "^4.2.4"
+  },
+  "license": "MIT"
+}

examples/next-ts/pages/_app.tsx

@@ -0,0 +1,6 @@
+import { AppProps } from "next/app"
+import "../styles.css"
+
+export default function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}

examples/next-ts/pages/editable.tsx

@@ -0,0 +1,47 @@
+import { useMachine } from "@ui-machines/react"
+import { connectEditableMachine, editableMachine } from "@ui-machines/dom"
+import { StateVisualizer } from "components/state-visualizer"
+import { useMount } from "hooks/use-mount"
+
+const Page = () => {
+  const [state, send] = useMachine(
+    editableMachine.withContext({
+      placeholder: "Edit me...",
+      isPreviewFocusable: true,
+    }),
+  )
+
+  const ref = useMount<HTMLInputElement>(send)
+
+  const {
+    isEditing,
+    isValueEmpty,
+    inputProps,
+    previewProps,
+    cancelButtonProps,
+    submitButtonProps,
+    editButtonProps,
+  } = connectEditableMachine(state, send)
+
+  return (
+    <div>
+      <input
+        ref={ref}
+        style={{ width: "auto", background: "transparent" }}
+        {...inputProps}
+      />
+      <span style={{ opacity: isValueEmpty ? 0.7 : 1 }} {...previewProps} />
+      {!isEditing && <button {...editButtonProps}>Edit</button>}
+      {isEditing && (
+        <>
+          <button {...submitButtonProps}>Save</button>
+          <button {...cancelButtonProps}>Cancel</button>
+        </>
+      )}
+
+      <StateVisualizer state={state} />
+    </div>
+  )
+}
+
+export default Page

examples/next-ts/pages/index.tsx

@@ -0,0 +1,73 @@
+import { createMachine } from "@ui-machines/core"
+import { useMachine } from "@ui-machines/react"
+import { StateVisualizer } from "components/state-visualizer"
+
+const timerMachine = createMachine(
+  {
+    context: {
+      duration: 3000,
+      value: 3000,
+    },
+    initial: "idle",
+    states: {
+      idle: {
+        on: {
+          DISMISS: "dismissing",
+        },
+      },
+      temp: {
+        after: {
+          0: {
+            target: "dismissing",
+            actions: console.log,
+          },
+        },
+      },
+      dismissing: {
+        every: { 10: "setValue" },
+        after: {
+          DURATION: "closed",
+        },
+        on: {
+          SET_DURATION: {
+            target: "temp",
+            actions: "setDuration",
+          },
+        },
+      },
+      closed: {
+        on: {},
+      },
+    },
+  },
+  {
+    delays: {
+      DURATION: (ctx) => ctx.duration,
+    },
+    actions: {
+      setValue(ctx) {
+        ctx.value -= 10
+      },
+      setDuration(ctx, evt) {
+        ctx.duration = evt.value
+        ctx.value = evt.value
+      },
+    },
+  },
+)
+
+const IndexPage = () => {
+  const [state, send] = useMachine(timerMachine)
+  return (
+    <div>
+      <button onClick={() => send("DISMISS")}>DISMISS</button>
+      <button onClick={() => send({ type: "SET_DURATION", value: 5000 })}>
+        Change duration (5000ms)
+      </button>
+      <div>{state.context.value}</div>
+      <StateVisualizer state={state} />
+    </div>
+  )
+}
+
+export default IndexPage

examples/next-ts/pages/menu.tsx

@@ -0,0 +1,32 @@
+import { useMachine } from "@ui-machines/react"
+import { connectMenuMachine, menuMachine } from "@ui-machines/dom"
+import { StateVisualizer } from "components/state-visualizer"
+import { useMount } from "hooks/use-mount"
+
+export default function Page() {
+  const [state, send] = useMachine(
+    menuMachine.withContext({
+      uid: "234",
+      onSelect: console.log,
+    }),
+  )
+
+  const ref = useMount<HTMLButtonElement>(send)
+
+  const { menuListProps, getMenuItemProps, menuButtonProps } =
+    connectMenuMachine(state, send)
+
+  return (
+    <div className="App">
+      <StateVisualizer state={state} />
+      <button ref={ref} {...menuButtonProps}>
+        Click me
+      </button>
+      <ul style={{ width: 300 }} {...menuListProps}>
+        <li {...getMenuItemProps({ id: "menuitem-1" })}>Edit</li>
+        <li {...getMenuItemProps({ id: "menuitem-2" })}>Duplicate</li>
+        <li {...getMenuItemProps({ id: "menuitem-3" })}>Delete</li>
+      </ul>
+    </div>
+  )
+}