docs: hooks

.vscode/settings.json

@@ -13,17 +13,17 @@
   },
 
   // Silent the stylistic rules in you IDE, but still auto fix them
-  "eslint.rules.customizations": [
-    { "rule": "style/*", "severity": "off" },
-    { "rule": "*-indent", "severity": "off" },
-    { "rule": "*-spacing", "severity": "off" },
-    { "rule": "*-spaces", "severity": "off" },
-    { "rule": "*-order", "severity": "off" },
-    { "rule": "*-dangle", "severity": "off" },
-    { "rule": "*-newline", "severity": "off" },
-    { "rule": "*quotes", "severity": "off" },
-    { "rule": "*semi", "severity": "off" }
-  ],
+  // "eslint.rules.customizations": [
+  //   { "rule": "style/*", "severity": "off" },
+  //   { "rule": "*-indent", "severity": "off" },
+  //   { "rule": "*-spacing", "severity": "off" },
+  //   { "rule": "*-spaces", "severity": "off" },
+  //   { "rule": "*-order", "severity": "off" },
+  //   { "rule": "*-dangle", "severity": "off" },
+  //   { "rule": "*-newline", "severity": "off" },
+  //   { "rule": "*quotes", "severity": "off" },
+  //   { "rule": "*semi", "severity": "off" }
+  // ],
 
   // Enable eslint for all supported languages
   "eslint.validate": [
@@ -36,6 +36,7 @@
     "markdown",
     "json",
     "jsonc",
-    "yaml"
+    "yaml",
+    "MDX"
   ]
 }

README.md

@@ -9,8 +9,8 @@
 
 [MIT](./LICENSE) License © 2023 [Riri](https://github.com/Daydreamer-riri)
 
-[npm-version-src]:https://img.shields.io/npm/v/transition-hooks?style=flat&colorA=080f12&colorB=1fa669
-[npm-version-href]:https://www.npmjs.com/package/transition-hooks
+[npm-version-src]: https://img.shields.io/npm/v/transition-hooks?style=flat&colorA=080f12&colorB=1fa669
+[npm-version-href]: https://www.npmjs.com/package/transition-hooks
 [bundle-src]: https://img.shields.io/bundlephobia/minzip/transition-hooks?style=flat&colorA=080f12&colorB=1fa669&label=minzip
 [bundle-href]: https://bundlephobia.com/result?p=transition-hooks
 [license-src]: https://img.shields.io/github/license/daydreamer-riri/transition-hooks.svg?style=flat&colorA=080f12&colorB=1fa669

docs/pages/docs/index.mdx

@@ -52,4 +52,3 @@ export function BasicUseTransition() {
 ```
 
 :::
-

docs/pages/docs/useListTransition.mdx

@@ -9,37 +9,63 @@ import { BasicUseListTransition } from "../../components/BasicUseListTransition"
 </div>
 
 ```tsx [Code]
-import { useState } from 'react'
-import { useSwitchTransition } from 'transition-hooks'
+import { useRef, useState } from 'react'
+import { useListTransition } from 'transition-hooks'
+import { startViewTransition } from 'transition-hooks/viewTransition'
 import { Button } from '../Button'
+import { shuffle } from '../utils'
 
-const texts = ['Edit', 'Save', 'Cancel']
-export function BasicUseSwitchTransition() {
-  const [count, setCount] = useState(0)
-  const text = texts[count % texts.length]
-  const { transition } = useSwitchTransition(text, { mode })
+const numbers = Array.from({ length: 5 }, (_, i) => i)
+export function BasicUseListTransition() {
+  const [list, setList] = useState(numbers)
+  const idRef = useRef(numbers.length)
+  const { transitionList } = useListTransition(
+    list,
+    { entered: false, timeout: 300, keyExtractor: i => i, viewTransition: startViewTransition },
+  )
 
   return (
-    <div style={{ position: 'relative', height: 36 }}>
-      {transition((text, { shouldEnter, status }) => (
-        <Button
-          onClick={() => setCount(count + 1)}
-          style={{
-            transition: 'all 0.3s',
-            opacity: shouldEnter ? 1 : 0,
-            transform: `translateY(${shouldEnter
-            ? 0
-            : status === 'preEnter' ? 30 : -30
-            }px)`,
-            position: 'absolute',
-          }}
-        >{text}
-        </Button>
-      ))}
+    <div>
+      <div style={{ display: 'flex', gap: 4, marginBottom: 8 }}>
+        <Button onClick={insert}>insert</Button>
+        <Button onClick={remove}>remove</Button>
+        <Button onClick={() => setList(shuffle)}>shuffle</Button>
+      </div>
+      <ul>
+        {transitionList((item, { key, simpleStatus }) => {
+          return (
+            <li
+              style={{
+                position: simpleStatus === 'exit' ? 'absolute' : 'relative',
+                opacity: simpleStatus === 'enter' ? 1 : 0,
+                transform: simpleStatus === 'enter' ? 'translateX(0)' : 'translateX(20px)',
+                transition: 'all 300ms',
+                viewTransitionName: simpleStatus === 'enter' ? `transition-list-${key}` : '',
+              }}
+            >
+              - {item}
+            </li>
+          )
+        })}
+      </ul>
+      {}
     </div>
-    // ... about select mode
   )
+  function insert() {
+    const i = Math.round(Math.random() * list.length)
+    const newList = [...list]
+    newList.splice(i, 0, idRef.current++)
+    setList(newList)
+  }
+  function remove() {
+    const i = Math.round(Math.random() * list.length - 1)
+    const newList = [...list]
+    newList.splice(i, 1)
+    setList(newList)
+  }
 }
 ```
 
-:::../../components/UseSwitchTransitionCount
+:::
+
+If you want to use `view transition`, the keyExtractor argument must be set.

docs/pages/docs/useSwitchTransition.mdx

@@ -21,16 +21,16 @@ export function BasicUseSwitchTransition() {
 
   return (
     <div style={{ position: 'relative', height: 36 }}>
-      {transition((text, { shouldEnter, status }) => (
+      {transition((text, { isEnter, status }) => (
         <Button
           onClick={() => setCount(count + 1)}
           style={{
             transition: 'all 0.3s',
-            opacity: shouldEnter ? 1 : 0,
-            transform: `translateY(${shouldEnter
-            ? 0
-            : status === 'preEnter' ? 30 : -30
-            }px)`,
+            opacity: isEnter ? 1 : 0,
+            transform: `translateY(${isEnter
+              ? 0
+              : status === 'from' ? 30 : -30
+              }px)`,
             position: 'absolute',
           }}
         >{text}
@@ -42,4 +42,31 @@ export function BasicUseSwitchTransition() {
 }
 ```
 
-:::../../components/UseSwitchTransitionCount
+:::
+
+## API
+
+### `useSwitchTransition`
+
+```ts
+function useSwitchTransition<S>(state: S, options?: SwitchTransitionOptions): ({
+  transition: (renderCallback: SwitchRenderCallback<S>) => JSX.Element[]
+  isResolved: boolean
+})
+
+```
+
+### `SwitchTransitionOptions`
+
+```ts
+interface SwitchTransitionOptions {
+  timeout?: number | { enter: number, exit: number }
+  mode: 'default' | 'in-out' | 'out-in'
+}
+```
+
+### `SwitchRenderCallback`
+
+```ts
+export type SwitchRenderCallback<S> = (state: S, statusState: StatusState & { prevState?: S, nextState?: S }) => React.ReactNode
+```

docs/pages/docs/useTransition.mdx

@@ -20,14 +20,14 @@ export function BasicUseTransition() {
 
   return (
     <div>
-      {shouldMount  // [!code focus]
+      {shouldMount // [!code focus]
         ? (
           <div
             style={{
               transition: 'opacity 0.3s',
-              opacity: (status === 'entering' || status === 'entered')  // [!code focus]
+              opacity: (status === 'entering' || status === 'entered') // [!code focus]
                 ? 1 // [!code focus]
-                : 0,  // [!code focus]
+                : 0, // [!code focus]
             }}
           >
             Hello Word
@@ -56,39 +56,32 @@ function useTransition(
 ### `StatusState`
 
 ```ts
-type StatusState = {
-    status: "preEnter" | "entering" | "entered" | "preExit" | "exiting" | "exited" | "unmounted";
-    shouldMount: boolean;
-    isEnter: boolean;
-    isResolved: boolean;
+interface StatusState {
+  status: 'entered' | 'from' | 'entering' | 'exiting' | 'exited'
+  simpleStatus: 'from' | 'enter' | 'exit'
+  shouldMount: boolean
+  isEnter: boolean
+  notExit: boolean
+  isResolved: boolean
 }
 ```
 
 ### `TransitionOptions`
 
 ```ts
-export interface TransitionOptions {
+interface TransitionOptions {
+  from?: boolean
   /**
-   * Add a 'preEnter' state immediately before 'entering',
-   * which is necessary to change DOM elements from unmounted
-   * or display: none with CSS transition (not necessary for CSS animation).
-   * @default true
-   */
-  preEnter?: boolean
-  /**
-   * Add a 'preExit' state immediately before 'exiting'
-   * @default false
-   */
-  preExit?: boolean
-  /**
-   * Set timeout in ms for transitions;
-   * you can set a single value or different values for enter and exit transitions.
+   * Set timeout in ms for transitions; you can set a single value or different values for enter and exit transitions.
    * @default 300
    */
   timeout?: number | { enter: number, exit: number }
+  /**
+   * Beginning from 'from' state
+   */
+  initialEntered?: boolean
+  entered?: boolean
   onStatusChange?: (status: Stage) => void
-  enter?: boolean
-  exit?: boolean
 }
 ```
 import { useTransition } from "react"

docs/pages/index.mdx

@@ -16,4 +16,3 @@ import { HomePage } from 'vocs/components'
     <HomePage.Button href="https://github.com/Daydreamer-riri/transition-hooks">GitHub</HomePage.Button>
   </HomePage.Buttons>
 </HomePage.Root>
-

eslint.config.js

@@ -1,4 +1,17 @@
-// @ts-check
-import ririd from '@ririd/eslint-config'
+import ririd, { markdown } from '@ririd/eslint-config'
 
-export default ririd()
+export default ririd(
+  {
+    formatters: {
+      markdown: true,
+    },
+  },
+  markdown({ files: ['**/*.mdx'] }),
+  {
+    files: ['**/*.mdx/**/*.?([cm])[jt]s?(x)'],
+    rules: {
+      'style/no-multiple-empty-lines': 'off',
+      'unused-imports/no-unused-vars': 'off',
+    },
+  },
+)

package.json

@@ -88,12 +88,12 @@
     "react": "^16.8.0  || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
-    "@ririd/eslint-config": "^1.1.0",
+    "@ririd/eslint-config": "^1.2.0",
     "@types/node": "^18.15.11",
     "@types/react": "^18.2.73",
     "@types/react-dom": "^18.2.24",
     "bumpp": "^9.4.0",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "esno": "^4.7.0",
     "lint-staged": "15.2.2",
     "react": "^18.2.0",