docs: init

docs/components/BasicUseTransition/index.tsx

@@ -0,0 +1,27 @@
+import { useState } from 'react'
+import { useTransition } from 'transition-hooks'
+import { Button } from '../Button'
+
+export function BasicUseTransition() {
+  const [show, setShow] = useState(false)
+  const { status, shouldMount } = useTransition(show)
+
+  return (
+    <div>
+      {shouldMount
+        ? (
+          <div
+            style={{
+              transition: 'opacity 0.3s',
+              opacity: status === 'entering' || status === 'entered' ? 1 : 0,
+            }}
+          >
+            Hello Word
+          </div>
+          )
+        : null}
+      <Button onClick={() => setShow(!show)}>toggle</Button>
+      <p>status: { status }</p>
+    </div>
+  )
+}

docs/components/Button.tsx

@@ -0,0 +1,4 @@
+export function Button(props: React.HTMLProps<HTMLButtonElement>) {
+  const { type: _, ...rest } = props
+  return <button {...rest} className="vocs_Button_button vocs_Link vocs_Link_styleless" />
+}

docs/pages/docs/index.mdx

@@ -0,0 +1,55 @@
+# Introduction
+
+Transition hooks is a headless UI utility for transition scene in React.
+It is simpler and easier to use than react-transition-group, And because it is state-driven, it can be used with react-dom and react-native
+
+## Status
+
+The heart of transition-hooks is the state machine.
+
+### Status graph
+
+![status graph](/status.png)
+
+Here is just a quick example to get you started:
+
+import { BasicUseTransition } from "../../components/BasicUseTransition"
+
+:::code-group
+<div data-title="Preview">
+  <BasicUseTransition />
+</div>
+
+```tsx [BasicUseTransition.tsx]
+import { useState } from 'react'
+import { useTransition } from 'transition-hooks'
+
+export function BasicUseTransition() {
+  const [show, setShow] = useState(false)
+  const { status, shouldMount } = useTransition(show)
+
+  return (
+    <div>
+      {shouldMount
+        ? (
+          <div
+            style={{
+              transition: 'opacity 0.3s',
+              opacity: (status === 'entering' || status === 'entered')
+                ? 1
+                : 0,
+            }}
+          >
+            Hello Word
+          </div>
+          )
+        : null}
+      <button onClick={() => setShow(!show)}>toggle</button>
+      <p>{ status }</p>
+    </div>
+  )
+}
+```
+
+:::
+

docs/pages/docs/useTransition.mdx

@@ -0,0 +1,94 @@
+# useTransition
+
+This hook transforms a boolean state into transition status, and unmount the component after timeout.
+
+import { BasicUseTransition } from "../../components/BasicUseTransition"
+
+:::code-group
+
+<div data-title="Preview">
+  <BasicUseTransition />
+</div>
+
+```tsx [Code]
+import { useState } from 'react'
+import { useTransition } from 'transition-hooks'
+
+export function BasicUseTransition() {
+  const [show, setShow] = useState(false) // [!code focus]
+  const { status, shouldMount } = useTransition(show) // [!code focus]
+
+  return (
+    <div>
+      {shouldMount  // [!code focus]
+        ? (
+          <div
+            style={{
+              transition: 'opacity 0.3s',
+              opacity: (status === 'entering' || status === 'entered')  // [!code focus]
+                ? 1 // [!code focus]
+                : 0,  // [!code focus]
+            }}
+          >
+            Hello Word
+          </div>
+          )
+        : null}
+      <button onClick={() => setShow(!show)}>toggle</button>
+      <p>{ status }</p>
+    </div>
+  )
+}
+```
+:::
+
+## API
+
+### `useTransition`
+```ts
+function useTransition(
+  state: boolean,
+  transitionOptions?: TransitionOptions
+): StatusState
+
+```
+
+### `StatusState`
+
+```ts
+type StatusState = {
+    status: "preEnter" | "entering" | "entered" | "preExit" | "exiting" | "exited" | "unmounted";
+    shouldMount: boolean;
+    isEnter: boolean;
+    isResolved: boolean;
+}
+```
+
+### `TransitionOptions`
+
+```ts
+export interface TransitionOptions {
+  /**
+   * 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.
+   * @default 300
+   */
+  timeout?: number | { enter: number, exit: number }
+  onStatusChange?: (status: Stage) => void
+  enter?: boolean
+  exit?: boolean
+}
+```
+import { useTransition } from "react"

docs/pages/index.mdx

@@ -0,0 +1,19 @@
+---
+title: Transition Hooks
+showLogo: false
+layout: landing
+---
+
+import { HomePage } from 'vocs/components'
+
+<HomePage.Root>
+  <HomePage.Logo />
+  <HomePage.Tagline>☄️ An extremely light-weight react transition hook which is simpler and easier to use than react-transition-group</HomePage.Tagline>
+  <HomePage.InstallPackage name="transition-hooks" type="init" />
+  {/* <HomePage.Description>Vocs is a minimal static documentation generator designed to supercharge your documentation workflow, built with modern web technologies.</HomePage.Description> */}
+  <HomePage.Buttons>
+    <HomePage.Button href="/docs" variant="accent">Get started</HomePage.Button>
+    <HomePage.Button href="https://github.com/Daydreamer-riri/transition-hooks">GitHub</HomePage.Button>
+  </HomePage.Buttons>
+</HomePage.Root>
+

eslint.config.js

@@ -1,8 +1,4 @@
+// @ts-check
 import ririd from '@ririd/eslint-config'
 
-export default ririd(
-  {
-    ignores: [
-    ],
-  },
-)
+export default ririd()

package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "version": "0.0.1",
   "packageManager": "[email protected]",
-  "description": "☄️ An extremely light-weight react transition animation hook which is simpler and easier to use than react-transition-group",
+  "description": "☄️ An extremely light-weight react transition hook which is simpler and easier to use than react-transition-group",
   "author": "Riri <[email protected]>",
   "license": "MIT",
   "homepage": "https://github.com/Daydreamer-riri/transition-hooks#readme",
@@ -69,6 +69,7 @@
     "react": "^18.2.0",
     "rimraf": "5.0.5",
     "simple-git-hooks": "^2.11.1",
+    "transition-hooks": "workspace:*",
     "typescript": "^5.4.3",
     "unbuild": "^2.0.0",
     "vite": "^5.2.7",

src/hooks/useTransition.ts

@@ -7,6 +7,7 @@ import {
   setAnimationFrameTimeout,
 } from '../helpers/setAnimationFrameTimeout'
 import { getTimeout } from '../helpers/getTimeout'
+import type { StatusState } from '../status'
 import { STATUS, getEndStatus, getState } from '../status'
 import type { Stage, TransitionOptions } from '../types'
 import useMemoizedFn from '../helpers/useMemorizeFn'
@@ -79,5 +80,5 @@ export function useTransition(state: boolean, transitionOptions?: TransitionOpti
   useEffect(() =>
     () => clearAnimationFrameTimeout(timer.current), [])
 
-  return statusState
+  return statusState as StatusState
 }

src/types.ts

@@ -3,10 +3,22 @@ import type { STATUS } from './status'
 export type Stage = keyof typeof STATUS
 
 export interface TransitionOptions {
+  /**
+   * 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
-  enter?: boolean
-  exit?: boolean
+  /**
+   * 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 }
   onStatusChange?: (status: Stage) => void
+  enter?: boolean
+  exit?: boolean
 }

vocs.config.ts

@@ -1,7 +1,30 @@
 import { defineConfig } from 'vocs'
 
 export default defineConfig({
-  description: `Build reliable apps & libraries with lightweight,
-    composable, and type-safe modules that interface with Ethereum.`,
-  title: 'Viem',
+  description: `☄️ An extremely light-weight react transition hook which is simpler and easier to use than react-transition-group.`,
+  title: 'Transition-hooks',
+  editLink: {
+    pattern: 'https://github.com/Daydreamer-riri/transition-hooks/edit/main/docs/pages/:path',
+    text: 'Suggest changes to this page',
+  },
+  sidebar: [
+    {
+      text: 'Getting Started',
+      items: [
+        {
+          text: 'Introduction',
+          link: '/docs',
+        },
+      ],
+    },
+    {
+      text: 'Hooks',
+      items: [
+        {
+          text: 'useTransition',
+          link: '/docs/useTransition',
+        },
+      ],
+    },
+  ],
 })