From e9c7d05d7581f191f852bad99de492b91d8b7467 Mon Sep 17 00:00:00 2001 From: Riri Date: Mon, 8 Apr 2024 20:41:10 +0800 Subject: [PATCH] docs: components --- docs/pages/docs/ListTransition.mdx | 32 ++++++++++++++++++++++ docs/pages/docs/SwitchTransition.mdx | 30 +++++++++++++++++++++ docs/pages/docs/Transition.mdx | 32 ++++++++++++++++++++++ docs/pages/docs/useListTransition.mdx | 36 +++++++++++++++++++++++++ docs/pages/docs/useSwitchTransition.mdx | 10 ++++++- eslint.config.js | 2 ++ package.json | 2 +- src/components/ListTransition.tsx | 6 ++--- src/components/SwitchTransition.tsx | 2 +- src/index.ts | 2 ++ vocs.config.ts | 26 ++++++++++++++++++ 11 files changed, 174 insertions(+), 6 deletions(-) create mode 100644 docs/pages/docs/ListTransition.mdx create mode 100644 docs/pages/docs/SwitchTransition.mdx create mode 100644 docs/pages/docs/Transition.mdx diff --git a/docs/pages/docs/ListTransition.mdx b/docs/pages/docs/ListTransition.mdx new file mode 100644 index 0000000..4af1269 --- /dev/null +++ b/docs/pages/docs/ListTransition.mdx @@ -0,0 +1,32 @@ +# ListTransition + +## Example + +```tsx + +``` + +## Type + +```ts +function ListTransition(props: ListTransitionProps): JSX.Element + +``` diff --git a/docs/pages/docs/SwitchTransition.mdx b/docs/pages/docs/SwitchTransition.mdx new file mode 100644 index 0000000..cc357d8 --- /dev/null +++ b/docs/pages/docs/SwitchTransition.mdx @@ -0,0 +1,30 @@ +# SwitchTransition + +## Example + +```tsx + + {(state, { simpleStatus }) => ( +

+ {state} {simpleStatus} hello +

+ )} + +``` + +## Type + +```ts +function SwitchTransition(props: SwitchTransitionProps): JSX.Element + +``` diff --git a/docs/pages/docs/Transition.mdx b/docs/pages/docs/Transition.mdx new file mode 100644 index 0000000..305a6e8 --- /dev/null +++ b/docs/pages/docs/Transition.mdx @@ -0,0 +1,32 @@ +# Transition + +## Example + +```tsx +const [onOff, setOnOff] = useState(true) + +return ( +
+ + + {({ simpleStatus, shouldMount }) => shouldMount && ( +

+ I'm fading +

+ )} + +
+) + +``` + +## Type + +```ts +function Transition(props: TransitionProps): React.ReactNode + +``` diff --git a/docs/pages/docs/useListTransition.mdx b/docs/pages/docs/useListTransition.mdx index cdb9995..1cb3ced 100644 --- a/docs/pages/docs/useListTransition.mdx +++ b/docs/pages/docs/useListTransition.mdx @@ -69,3 +69,39 @@ export function BasicUseListTransition() { ::: If you want to use `view transition`, the keyExtractor argument must be set. + +## API + +### `useListTransition` + +```ts +function useListTransition(list: Array, options?: ListTransitionOptions): { + transitionList: (renderCallback: ListRenderCallback) => JSX.Element[] + isResolved: boolean +} +``` + +### `ListTransitionOptions` + +```ts +interface ListTransitionOptions { + timeout: Timeout + entered?: boolean + keyExtractor?: (item: Item) => string | number + viewTransition?: (fn: () => void) => void +} +``` + +### `ListRenderCallback` + +```ts +export type ListRenderCallback = ( + item: Item, + stage: StatusState & { key: string | number } +) => React.ReactNode + +``` + +### `StatusState` + +See [useTransition#StatusState](/docs/useTransition#statusstate) diff --git a/docs/pages/docs/useSwitchTransition.mdx b/docs/pages/docs/useSwitchTransition.mdx index 2e740fc..bbd89d6 100644 --- a/docs/pages/docs/useSwitchTransition.mdx +++ b/docs/pages/docs/useSwitchTransition.mdx @@ -68,5 +68,13 @@ interface SwitchTransitionOptions { ### `SwitchRenderCallback` ```ts -export type SwitchRenderCallback = (state: S, statusState: StatusState & { prevState?: S, nextState?: S }) => React.ReactNode +export type SwitchRenderCallback = ( + state: S, + statusState: StatusState & { prevState?: S, nextState?: S } +) => React.ReactNode + ``` + +### `StatusState` + +See [useTransition#StatusState](/docs/useTransition#statusstate) diff --git a/eslint.config.js b/eslint.config.js index c7a8483..29b67c7 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -12,6 +12,8 @@ export default ririd( rules: { 'style/no-multiple-empty-lines': 'off', 'unused-imports/no-unused-vars': 'off', + 'react-hooks/rules-of-hooks': 'off', + 'react/no-unescaped-entities': 'off', }, }, ) diff --git a/package.json b/package.json index 68b09cd..b12218f 100644 --- a/package.json +++ b/package.json @@ -81,7 +81,7 @@ "release": "bumpp && npm publish", "typecheck": "tsc --noEmit", "docs:dev": "vocs dev", - "docs:build": "vocs build", + "docs:build": "npm run build && vocs build", "docs:preview": "vocs preview" }, "peerDependencies": { diff --git a/src/components/ListTransition.tsx b/src/components/ListTransition.tsx index 7cedc13..cf3e205 100644 --- a/src/components/ListTransition.tsx +++ b/src/components/ListTransition.tsx @@ -1,14 +1,14 @@ import type { ListRenderCallback, ListTransitionOptions } from '../hooks/useListTransition' import { useListTransition } from '../hooks/useListTransition' -interface SwitchTransitionProps { +interface ListTransitionProps { list: T[] transitionOptions?: ListTransitionOptions children: ListRenderCallback } -export function SwitchTransition(props: SwitchTransitionProps) { +export function ListTransition(props: ListTransitionProps) { const { transitionList } = useListTransition(props.list, props.transitionOptions) - return transitionList(props.children) + return <>{transitionList(props.children)} } diff --git a/src/components/SwitchTransition.tsx b/src/components/SwitchTransition.tsx index 8338918..902eccc 100644 --- a/src/components/SwitchTransition.tsx +++ b/src/components/SwitchTransition.tsx @@ -10,5 +10,5 @@ interface SwitchTransitionProps { export function SwitchTransition(props: SwitchTransitionProps) { const { transition } = useSwitchTransition(props.state, props.transitionOptions) - return transition(props.children) + return <>{transition(props.children)} } diff --git a/src/index.ts b/src/index.ts index 42d8142..fd09351 100644 --- a/src/index.ts +++ b/src/index.ts @@ -4,5 +4,7 @@ export type { Mode, SwitchRenderCallback, SwitchTransitionOptions } from './hook export { useListTransition } from './hooks/useListTransition' export type { ListRenderCallback, ListTransitionOptions } from './hooks/useListTransition' export { Transition } from './components/Transition' +export { SwitchTransition } from './components/SwitchTransition' +export { ListTransition } from './components/ListTransition' export * from './types' export { getSimpleStatus } from './status' diff --git a/vocs.config.ts b/vocs.config.ts index 9c4ab9f..14c2877 100644 --- a/vocs.config.ts +++ b/vocs.config.ts @@ -7,6 +7,15 @@ export default defineConfig({ pattern: 'https://github.com/Daydreamer-riri/transition-hooks/edit/main/docs/pages/:path', text: 'Suggest changes to this page', }, + socials: [ + { + icon: 'github', + link: 'https://github.com/Daydreamer-riri/transition-hooks', + }, + ], + topNav: [ + { text: 'Guide & API', link: '/docs', match: '/docs' }, + ], sidebar: [ { text: 'Getting Started', @@ -34,5 +43,22 @@ export default defineConfig({ }, ], }, + { + text: 'Components', + items: [ + { + text: 'Transition', + link: '/docs/Transition', + }, + { + text: 'SwitchTransition', + link: '/docs/SwitchTransition', + }, + { + text: 'ListTransition', + link: '/docs/ListTransition', + }, + ], + }, ], })