From 773d9a7a67a76a40b5a107604ff06413c5a71a78 Mon Sep 17 00:00:00 2001 From: Aleksandar Toplek Date: Sun, 10 Sep 2023 22:51:34 +0200 Subject: [PATCH 1/6] Update theme.config.tsx --- apps/docs/theme.config.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/docs/theme.config.tsx b/apps/docs/theme.config.tsx index b9817c94..02040cce 100644 --- a/apps/docs/theme.config.tsx +++ b/apps/docs/theme.config.tsx @@ -65,7 +65,6 @@ const config: DocsThemeConfig = { /> - Date: Mon, 11 Sep 2023 00:16:55 +0200 Subject: [PATCH 2/6] feat: Added changelogs and changelog to generator --- packages/hooks/changes/Added useDebounce hook | 0 .../hooks/changes/Added useIsomorphicLayoutEffect hook | 0 packages/hooks/changes/Added useResizeObserver hook | 0 packages/ui/changes/Added DropdownButton component | 0 packages/ui/changes/Added PageDrawer component | 0 turbo/generators/config.ts | 10 ++++++++++ 6 files changed, 10 insertions(+) create mode 100644 packages/hooks/changes/Added useDebounce hook create mode 100644 packages/hooks/changes/Added useIsomorphicLayoutEffect hook create mode 100644 packages/hooks/changes/Added useResizeObserver hook create mode 100644 packages/ui/changes/Added DropdownButton component create mode 100644 packages/ui/changes/Added PageDrawer component diff --git a/packages/hooks/changes/Added useDebounce hook b/packages/hooks/changes/Added useDebounce hook new file mode 100644 index 00000000..e69de29b diff --git a/packages/hooks/changes/Added useIsomorphicLayoutEffect hook b/packages/hooks/changes/Added useIsomorphicLayoutEffect hook new file mode 100644 index 00000000..e69de29b diff --git a/packages/hooks/changes/Added useResizeObserver hook b/packages/hooks/changes/Added useResizeObserver hook new file mode 100644 index 00000000..e69de29b diff --git a/packages/ui/changes/Added DropdownButton component b/packages/ui/changes/Added DropdownButton component new file mode 100644 index 00000000..e69de29b diff --git a/packages/ui/changes/Added PageDrawer component b/packages/ui/changes/Added PageDrawer component new file mode 100644 index 00000000..e69de29b diff --git a/turbo/generators/config.ts b/turbo/generators/config.ts index 90d3991d..6fc42112 100644 --- a/turbo/generators/config.ts +++ b/turbo/generators/config.ts @@ -41,6 +41,11 @@ export default function generator(plop: PlopTypes.NodePlopAPI): void { type: "add", path: "apps/docs/pages/ui/components/{{kebabCase name}}.mdx", templateFile: "templates/componentDocsPage.hbs", + }, + // Changelog + { + type: "add", + path: "apps/docs/pages/hooks/hooks/Added {{pascalCase name}} component", } ], }); @@ -71,6 +76,11 @@ export default function generator(plop: PlopTypes.NodePlopAPI): void { type: "add", path: "apps/docs/pages/hooks/hooks/{{kebabCase name}}.mdx", templateFile: "templates/hookDocsPage.hbs", + }, + // Changelog + { + type: "add", + path: "apps/docs/pages/hooks/hooks/Added {{camelCase name}} hook", } ], }); From 717cec607149dc59f7e94cbf163d254662050db1 Mon Sep 17 00:00:00 2001 From: Aleksandar Toplek Date: Mon, 11 Sep 2023 00:17:38 +0200 Subject: [PATCH 3/6] Update config.ts --- turbo/generators/config.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/turbo/generators/config.ts b/turbo/generators/config.ts index 6fc42112..fbb4c755 100644 --- a/turbo/generators/config.ts +++ b/turbo/generators/config.ts @@ -45,7 +45,7 @@ export default function generator(plop: PlopTypes.NodePlopAPI): void { // Changelog { type: "add", - path: "apps/docs/pages/hooks/hooks/Added {{pascalCase name}} component", + path: "packages/ui/changes/Added {{pascalCase name}} component", } ], }); @@ -80,7 +80,7 @@ export default function generator(plop: PlopTypes.NodePlopAPI): void { // Changelog { type: "add", - path: "apps/docs/pages/hooks/hooks/Added {{camelCase name}} hook", + path: "packages/changes/Added {{camelCase name}} hook", } ], }); From aa089bc1968b1cf393de67dc7bf483c0d34847a9 Mon Sep 17 00:00:00 2001 From: Aleksandar Toplek Date: Mon, 11 Sep 2023 00:17:56 +0200 Subject: [PATCH 4/6] Update config.ts --- turbo/generators/config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/turbo/generators/config.ts b/turbo/generators/config.ts index fbb4c755..7f08bb88 100644 --- a/turbo/generators/config.ts +++ b/turbo/generators/config.ts @@ -80,7 +80,7 @@ export default function generator(plop: PlopTypes.NodePlopAPI): void { // Changelog { type: "add", - path: "packages/changes/Added {{camelCase name}} hook", + path: "packages/hooks/changes/Added {{camelCase name}} hook", } ], }); From e88019e951495e36687816e6b1fe5c2e0caf33f3 Mon Sep 17 00:00:00 2001 From: Aleksandar Toplek Date: Mon, 11 Sep 2023 03:13:18 +0200 Subject: [PATCH 5/6] feat: Added component description pulled from TS docs --- apps/docs/components/docs/ComponentDocs.tsx | 72 +++++++++++++++++++ apps/docs/components/docs/Mdx.tsx | 20 ++++++ apps/docs/package.json | 4 ++ apps/docs/pages/hooks/hooks/use-debounce.mdx | 15 +++- .../hooks/hooks/use-debounced-effect.mdx | 22 ++++++ .../hooks/use-isomorphic-layout-effect.mdx | 15 +++- .../pages/hooks/hooks/use-resize-observer.mdx | 15 +++- .../pages/ui/components/dropdown-button.mdx | 12 ++++ apps/docs/pages/ui/components/page-drawer.mdx | 14 +++- .../changes/Added useDebouncedEffect hook | 0 packages/hooks/hooks/useDebounce.ts | 15 +--- packages/hooks/hooks/useDebouncedEffect.ts | 18 +++++ .../hooks/hooks/useIsomorphicLayoutEffect.ts | 4 +- packages/hooks/hooks/useResizeObserver.ts | 2 +- packages/hooks/index.ts | 1 + packages/hooks/temp/hooks.api.md | 3 + packages/ui/index.tsx | 2 + pnpm-lock.yaml | 19 ++++- turbo/generators/templates/hookDocsPage.hbs | 2 +- 19 files changed, 231 insertions(+), 24 deletions(-) create mode 100644 apps/docs/components/docs/ComponentDocs.tsx create mode 100644 apps/docs/components/docs/Mdx.tsx create mode 100644 apps/docs/pages/hooks/hooks/use-debounced-effect.mdx create mode 100644 packages/hooks/changes/Added useDebouncedEffect hook create mode 100644 packages/hooks/hooks/useDebouncedEffect.ts diff --git a/apps/docs/components/docs/ComponentDocs.tsx b/apps/docs/components/docs/ComponentDocs.tsx new file mode 100644 index 00000000..cc3962b9 --- /dev/null +++ b/apps/docs/components/docs/ComponentDocs.tsx @@ -0,0 +1,72 @@ +import { parse as parseJsDoc } from 'comment-parser'; +import { Mdx } from './Mdx'; +import { Fragment } from 'react'; +import hooksApi from '@enterwell/hooks/dist/hooks.api.json'; +import uiApi from '@enterwell/ui/dist/ui.api.json'; + +type ComponentDocsProps = { + component: React.FunctionComponent; +}; + +const api = [ + ...hooksApi.members.find((m: any) => m.kind === "EntryPoint")?.members ?? [], + ...uiApi.members.find((m: any) => m.kind === "EntryPoint")?.members ?? [] +]; + +function componentMember(component: React.FunctionComponent) { + return api?.find((m: any) => m.name === component.name); +} + +function componentComment(component: React.FunctionComponent) { + const member = componentMember(component); + const comments = member ? parseJsDoc(member.docComment) : undefined; + return comments?.at(0); +} + +export function ComponentDescription({ component }: ComponentDocsProps) { + const comment = componentComment(component); + const { description } = comment || {}; + + return ( + {description} + ) +} + +export function ComponentParameters({ component }: ComponentDocsProps) { + const member = componentMember(component); + const comment = componentComment(component); + const params = member?.parameters?.map((param) => ({ + name: param.parameterName, + description: comment?.tags?.find((tag) => tag.tag === 'param' && tag.name === param.parameterName)?.description, + optional: param.isOptional, + type: member.excerptTokens.slice(param.parameterTypeTokenRange.startIndex, param.parameterTypeTokenRange.endIndex).map(t => t.text).join(' '), + })); + + if (!params?.length) { + return ( +
+

No parameters

+
+ ); + }; + + return ( +
+ {params?.map((param: any) => ( + +
+ {param.name} +
+
+ {param.type && {param.type}} + {param.optional && (optional)} +
+
+ {param.description?.trim().slice(1)} +
+
+ + ))} +
+ ) +} diff --git a/apps/docs/components/docs/Mdx.tsx b/apps/docs/components/docs/Mdx.tsx new file mode 100644 index 00000000..b4a17ad3 --- /dev/null +++ b/apps/docs/components/docs/Mdx.tsx @@ -0,0 +1,20 @@ +import { evaluateSync } from "@mdx-js/mdx"; +import * as provider from "@mdx-js/react"; +import { useMDXComponents } from "nextra/mdx"; +import React from "react"; +import * as runtime from "react/jsx-runtime"; + +export function Mdx({ children }: { children?: string }) { + if (!children) return null; + + const { default: MDXContent } = evaluateSync(children, { + ...runtime, + ...provider, + useMDXComponents, + format: "mdx", + development: false, + Fragment: React.Fragment + }); + + return ; +} \ No newline at end of file diff --git a/apps/docs/package.json b/apps/docs/package.json index 99175090..f9733ede 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -21,11 +21,15 @@ "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", + "@enterwell/hooks": "workspace:*", "@enterwell/ui": "workspace:*", + "@mdx-js/mdx": "^2.3.0", + "@mdx-js/react": "^2.3.0", "@mui/icons-material": "5.14.8", "@mui/lab": "5.0.0-alpha.143", "@mui/material": "^5.14.8", "classix": "^2.1.34", + "comment-parser": "^1.4.0", "next": "13.4.19", "nextra": "latest", "nextra-theme-docs": "latest", diff --git a/apps/docs/pages/hooks/hooks/use-debounce.mdx b/apps/docs/pages/hooks/hooks/use-debounce.mdx index ee309bee..a66918e0 100644 --- a/apps/docs/pages/hooks/hooks/use-debounce.mdx +++ b/apps/docs/pages/hooks/hooks/use-debounce.mdx @@ -1,8 +1,19 @@ +import { useDebounce } from '@enterwell/hooks'; +import { ComponentDescription, ComponentParameters } from '../../../components/docs/ComponentDocs'; + # useDebounce -Use `useDebounce` to debounce a value. +## Description + + + +### Parameters + + + +## Example -```ts filename="demo.ts" {2} +```ts filename="example.ts" {4} import { useDebounce } from '@enterwell/hooks'; const [value, setValue] = useState(0); diff --git a/apps/docs/pages/hooks/hooks/use-debounced-effect.mdx b/apps/docs/pages/hooks/hooks/use-debounced-effect.mdx new file mode 100644 index 00000000..d718f5ab --- /dev/null +++ b/apps/docs/pages/hooks/hooks/use-debounced-effect.mdx @@ -0,0 +1,22 @@ +import { useDebouncedEffect } from '@enterwell/hooks'; +import { ComponentDescription, ComponentParameters } from '../../../components/docs/ComponentDocs'; + +# useDebouncedEffect + +## Description + + + +### Parameters + + + +## Example + +```ts filename="example.ts" {3-5} +import { useDebouncedEffect } from '@enterwell/hooks'; + +useDebouncedEffect(() => { + // Do effect stuff here +}, [], 500); +``` \ No newline at end of file diff --git a/apps/docs/pages/hooks/hooks/use-isomorphic-layout-effect.mdx b/apps/docs/pages/hooks/hooks/use-isomorphic-layout-effect.mdx index add60419..c3125cdc 100644 --- a/apps/docs/pages/hooks/hooks/use-isomorphic-layout-effect.mdx +++ b/apps/docs/pages/hooks/hooks/use-isomorphic-layout-effect.mdx @@ -1,10 +1,19 @@ +import { useIsomorphicLayoutEffect } from '@enterwell/hooks'; +import { ComponentDescription, ComponentParameters } from '../../../components/docs/ComponentDocs'; + # useIsomorphicLayoutEffect -Use `useIsomorphicLayoutEffect` to run layout effects in both the server and the client. +## Description + + + +### Parameters + + -This hook runs `useLayoutEffect` on the client and `useEffect` on the server. +## Example -```ts filename="demo.ts" {3-6} +```ts filename="example.ts" {3-6} import { useIsomorphicLayoutEffect } from '@enterwell/hooks'; useIsomorphicLayoutEffect(() => { diff --git a/apps/docs/pages/hooks/hooks/use-resize-observer.mdx b/apps/docs/pages/hooks/hooks/use-resize-observer.mdx index 7bb2e0d6..36d26dfd 100644 --- a/apps/docs/pages/hooks/hooks/use-resize-observer.mdx +++ b/apps/docs/pages/hooks/hooks/use-resize-observer.mdx @@ -1,6 +1,17 @@ -# useDebounce +import { useResizeObserver } from '@enterwell/hooks'; +import { ComponentDescription, ComponentParameters } from '../../../components/docs/ComponentDocs'; + +# useResizeObserver + +## Description + + + +### Parameters + + -Use `useResizeObserver` to observe the size of an element. The hook returns a ref that you need to attach to the element you want to observe. The callback function is called with the element and the `ResizeObserverEntry` object. +## Example ```tsx filename="demo.ts" {3-6,9-11} import { useResizeObserver } from '@enterwell/hooks'; diff --git a/apps/docs/pages/ui/components/dropdown-button.mdx b/apps/docs/pages/ui/components/dropdown-button.mdx index 22069112..8766e1e9 100644 --- a/apps/docs/pages/ui/components/dropdown-button.mdx +++ b/apps/docs/pages/ui/components/dropdown-button.mdx @@ -1,6 +1,18 @@ +import { DropdownButton } from '@enterwell/ui'; import { ComponentWithSource } from '../../../components/docs/ComponentWithSource.tsx'; import { ExampleDropdownButton } from '../../../components/ExampleDropdownButton.tsx'; +import { ComponentDescription, ComponentParameters } from '../../../components/docs/ComponentDocs'; # DropdownButton +## Description + + + +### Parameters + + + +## Example + diff --git a/apps/docs/pages/ui/components/page-drawer.mdx b/apps/docs/pages/ui/components/page-drawer.mdx index 9ba73083..bfa49e46 100644 --- a/apps/docs/pages/ui/components/page-drawer.mdx +++ b/apps/docs/pages/ui/components/page-drawer.mdx @@ -1,6 +1,18 @@ +import { PageDrawer } from '@enterwell/ui'; import { ComponentWithSource } from '../../../components/docs/ComponentWithSource.tsx'; import { ExamplePageDrawer } from '../../../components/ExamplePageDrawer.tsx'; +import { ComponentDescription, ComponentParameters } from '../../../components/docs/ComponentDocs'; -# PageDrawer +# DropdownButton + +## Description + + + +### Parameters + + + +## Example diff --git a/packages/hooks/changes/Added useDebouncedEffect hook b/packages/hooks/changes/Added useDebouncedEffect hook new file mode 100644 index 00000000..e69de29b diff --git a/packages/hooks/hooks/useDebounce.ts b/packages/hooks/hooks/useDebounce.ts index 71997893..a1b16eb4 100644 --- a/packages/hooks/hooks/useDebounce.ts +++ b/packages/hooks/hooks/useDebounce.ts @@ -1,4 +1,5 @@ -import { useState, useEffect } from 'react'; +import { useState } from 'react'; +import { useDebouncedEffect } from './useDebouncedEffect'; /** * Debounce hook. @@ -9,16 +10,6 @@ import { useState, useEffect } from 'react'; */ export function useDebounce(value: T, delay: number) { const [debouncedValue, setDebouncedValue] = useState(value); - - useEffect(() => { - const handler = setTimeout(() => { - setDebouncedValue(value); - }, delay); - - return () => { - clearTimeout(handler); - }; - }, [value, delay]); - + useDebouncedEffect(setDebouncedValue, [value, delay], delay); return debouncedValue; } diff --git a/packages/hooks/hooks/useDebouncedEffect.ts b/packages/hooks/hooks/useDebouncedEffect.ts new file mode 100644 index 00000000..5d66c16a --- /dev/null +++ b/packages/hooks/hooks/useDebouncedEffect.ts @@ -0,0 +1,18 @@ +import { useEffect } from "react"; + +/** + * Hook that provides the debouncing functionality with a given callback. + * + * @param effect - Effect function to call on debounce + * @param deps - Effect dependencies + * @param delay - Debounce delay + * @public + */ +export function useDebouncedEffect(effect: Function, deps: unknown[], delay: number) { + useEffect(() => { + const handler = setTimeout(() => effect(), delay); + + return () => clearTimeout(handler); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [...(deps || []), delay]); +} \ No newline at end of file diff --git a/packages/hooks/hooks/useIsomorphicLayoutEffect.ts b/packages/hooks/hooks/useIsomorphicLayoutEffect.ts index ff495331..c8ae4ad7 100644 --- a/packages/hooks/hooks/useIsomorphicLayoutEffect.ts +++ b/packages/hooks/hooks/useIsomorphicLayoutEffect.ts @@ -1,7 +1,9 @@ import { useEffect, useLayoutEffect } from 'react' /** - * Isomorphic layout effect hook. + * Use `useIsomorphicLayoutEffect` to run layout effects in both the server and the client. + * + * This hook runs `useLayoutEffect` on the client and `useEffect` on the server. * @public */ export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect \ No newline at end of file diff --git a/packages/hooks/hooks/useResizeObserver.ts b/packages/hooks/hooks/useResizeObserver.ts index ddb05e03..1c88190f 100644 --- a/packages/hooks/hooks/useResizeObserver.ts +++ b/packages/hooks/hooks/useResizeObserver.ts @@ -2,7 +2,7 @@ import { useRef } from 'react'; import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'; /** - * The resize observer hook. + * Use `useResizeObserver` to observe the size of an element. The hook returns a ref that you need to attach to the element you want to observe. The callback function is called with the element and the `ResizeObserverEntry` object. * @param callback - The callback. * @returns The ref. * @public diff --git a/packages/hooks/index.ts b/packages/hooks/index.ts index 192fb14b..a905f144 100644 --- a/packages/hooks/index.ts +++ b/packages/hooks/index.ts @@ -1,4 +1,5 @@ // hook exports +export * from "./hooks/useDebouncedEffect"; export * from "./hooks/useDebounce"; export * from "./hooks/useIsomorphicLayoutEffect"; export * from "./hooks/useResizeObserver"; \ No newline at end of file diff --git a/packages/hooks/temp/hooks.api.md b/packages/hooks/temp/hooks.api.md index 8b0570e9..a6c5e63e 100644 --- a/packages/hooks/temp/hooks.api.md +++ b/packages/hooks/temp/hooks.api.md @@ -10,6 +10,9 @@ import { useEffect } from 'react'; // @public export function useDebounce(value: T, delay: number): T; +// @public +export function useDebouncedEffect(effect: Function, deps: unknown[], delay: number): void; + // @public export const useIsomorphicLayoutEffect: typeof useEffect; diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx index ff65c01a..379329af 100644 --- a/packages/ui/index.tsx +++ b/packages/ui/index.tsx @@ -1,3 +1,5 @@ +'use client'; + // component exports export * from "./DropdownButton"; export * from "./PageDrawer"; \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 487328a5..bfcf780e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -29,9 +29,18 @@ importers: '@emotion/styled': specifier: ^11.11.0 version: 11.11.0(@emotion/react@11.11.1)(@types/react@18.2.21)(react@18.2.0) + '@enterwell/hooks': + specifier: workspace:* + version: link:../../packages/hooks '@enterwell/ui': specifier: workspace:* version: link:../../packages/ui + '@mdx-js/mdx': + specifier: ^2.3.0 + version: 2.3.0 + '@mdx-js/react': + specifier: ^2.3.0 + version: 2.3.0(react@18.2.0) '@mui/icons-material': specifier: 5.14.8 version: 5.14.8(@mui/material@5.14.8)(@types/react@18.2.21)(react@18.2.0) @@ -44,6 +53,9 @@ importers: classix: specifier: ^2.1.34 version: 2.1.34 + comment-parser: + specifier: ^1.4.0 + version: 1.4.0 next: specifier: 13.4.19 version: 13.4.19(react-dom@18.2.0)(react@18.2.0) @@ -560,7 +572,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.22.15 + '@babel/runtime': 7.21.5 '@emotion/babel-plugin': 11.11.0 '@emotion/is-prop-valid': 1.2.1 '@emotion/react': 11.11.1(@types/react@18.2.5)(react@18.2.0) @@ -2757,6 +2769,11 @@ packages: dev: true optional: true + /comment-parser@1.4.0: + resolution: {integrity: sha512-QLyTNiZ2KDOibvFPlZ6ZngVsZ/0gYnE6uTXi5aoDg8ed3AkJAz4sEje3Y8a29hQ1s6A99MZXe47fLAXQ1rTqaw==} + engines: {node: '>= 12.0.0'} + dev: false + /compute-scroll-into-view@3.0.3: resolution: {integrity: sha512-nadqwNxghAGTamwIqQSG433W6OADZx2vCo3UXHNrzTRHK/htu+7+L0zhjEoaeaQVNAi3YgqWDv8+tzf0hRfR+A==} dev: false diff --git a/turbo/generators/templates/hookDocsPage.hbs b/turbo/generators/templates/hookDocsPage.hbs index f29c0e37..d271bdf4 100644 --- a/turbo/generators/templates/hookDocsPage.hbs +++ b/turbo/generators/templates/hookDocsPage.hbs @@ -1,6 +1,6 @@ # {{ camelCase name }} -```ts filename="demo.ts" {2} +```ts filename="example.ts" import { {{ camelCase name }} } from '@enterwell/hooks'; {{ camelCase name }}(); From 18fb0c04c81d91838f2e1c7fbb1729a278083a92 Mon Sep 17 00:00:00 2001 From: Aleksandar Toplek Date: Mon, 11 Sep 2023 03:16:26 +0200 Subject: [PATCH 6/6] chore: Updated generators with new docs components --- turbo/generators/templates/componentDocsPage.hbs | 14 +++++++++++++- turbo/generators/templates/hookDocsPage.hbs | 13 +++++++++++++ 2 files changed, 26 insertions(+), 1 deletion(-) diff --git a/turbo/generators/templates/componentDocsPage.hbs b/turbo/generators/templates/componentDocsPage.hbs index 92d81e00..5ce785e4 100644 --- a/turbo/generators/templates/componentDocsPage.hbs +++ b/turbo/generators/templates/componentDocsPage.hbs @@ -1,6 +1,18 @@ +import { {{ pascalCase name }} } from '@enterwell/ui'; import { ComponentWithSource } from '../../../components/docs/ComponentWithSource.tsx'; import { Example{{ pascalCase name }} } from '../../../components/Example{{ pascalCase name }}.tsx'; +import { ComponentDescription, ComponentParameters } from '../../../components/docs/ComponentDocs'; -# {{ pascalCase name }} +# DropdownButton + +## Description + + + +### Parameters + + + +## Example diff --git a/turbo/generators/templates/hookDocsPage.hbs b/turbo/generators/templates/hookDocsPage.hbs index d271bdf4..d9651520 100644 --- a/turbo/generators/templates/hookDocsPage.hbs +++ b/turbo/generators/templates/hookDocsPage.hbs @@ -1,5 +1,18 @@ +import { {{ camelCase name }} } from '@enterwell/hooks'; +import { ComponentDescription, ComponentParameters } from '../../../components/docs/ComponentDocs'; + # {{ camelCase name }} +## Description + + + +### Parameters + + + +## Example + ```ts filename="example.ts" import { {{ camelCase name }} } from '@enterwell/hooks';