Minor improvements to the storybook

Author: stuarthendren

src/useDebounce/useDebounce.stories.tsx

@@ -13,10 +13,10 @@ import React from 'react'
 import useSwr from 'swr'
 import { useDebounce } from '.'
 
-export interface UseDebounceDocsProps {
-  /** The callback to be called */
-  callback: (() => void) | null
-  /** The time between calls (ms) */
+export interface UseDebounceDocsProps<T> {
+  /** The value to debounce updates for */
+  value: T
+  /** The time to delay updates by (ms) */
   delay: number | null
 }
 
@@ -30,7 +30,7 @@ export interface UseDebounceDocsProps {
  * Adapted from <https://usehooks.com/>, if more functionality or control is required use [use-debounce](https://github.com/xnimorz/use-debounce).
  *
  */
-export const UseDebounceDocs: React.FC<UseDebounceDocsProps> = () => null
+export const UseDebounceDocs: React.FC<UseDebounceDocsProps<any>> = () => null
 
 export default {
   title: 'Hooks/useDebounce',
@@ -40,10 +40,13 @@ export default {
     delay: {
       control: { type: 'range', min: 0, max: 1000, step: 100 },
     },
+    value: {
+      control: null,
+    },
   },
 } as Meta
 
-const Template: Story<Omit<UseDebounceDocsProps, 'callback'>> = ({ delay }) => {
+const Template: Story<UseDebounceDocsProps<string>> = ({ delay }) => {
   const [text, setText] = React.useState('Change me!')
   const [debounced] = useDebounce(text, delay)
   return (

src/useDebounce/useDebounce.ts

@@ -8,6 +8,9 @@ import { useEffect, useState } from 'react'
  * A set function is also returned so the value can be forced or flushed, say on dismount.
  *
  * Adapted from <https://usehooks.com/>.
+ *
+ * @param value The value to debounce updates for
+ * @param delay The time to delay updates by (ms)
  */
 export function useDebounce<T>(
   value: T,

src/useEventListener/useEventListener.stories.tsx

@@ -44,6 +44,7 @@ export default {
         options: ['click', 'dblclick', 'auxclick', 'mouseenter', 'mouseout'],
       },
     },
+    handler: {},
     element: { control: { type: 'none' } },
   },
 } as Meta

src/useInterval/useInterval.stories.tsx

@@ -23,6 +23,7 @@ export default {
   component: UseIntervalDocs,
   excludeStories: ['UseIntervalDocs'],
   argTypes: {
+    callback: {},
     delay: {
       control: { type: 'range', min: 0, max: 1000, step: 100 },
     },

src/usePoll/usePoll.stories.tsx

@@ -29,6 +29,7 @@ export default {
   component: UsePollDocs,
   excludeStories: ['UsePollDocs'],
   argTypes: {
+    callback: {},
     delay: {
       control: { type: 'range', min: 0, max: 1000, step: 100 },
     },

src/useTimeout/useTimeout.stories.tsx

@@ -23,13 +23,14 @@ export default {
   component: UseTimeoutDocs,
   excludeStories: ['UseTimeoutDocs'],
   argTypes: {
+    callback: {},
     delay: {
       control: { type: 'range', min: 0, max: 1000, step: 100 },
     },
   },
 } as Meta
 
-const Template: Story<Omit<UseTimeoutDocsProps, 'callback'>> = ({ delay }) => {
+const Template: Story<UseTimeoutDocsProps> = ({ delay }) => {
   const [message, setMessage] = React.useState('Computing...')
   useTimeout(() => setMessage('Done!'), delay)
   return <Typography>{message}</Typography>

stories/introduction.stories.mdx

@@ -24,6 +24,22 @@ They will be updated as we continue to improve and evolve our use of react.
 yarn add @committed/hooks
 ```
 
+Each hook can be imported from the package directly or the matching names folder e.g..
+
+```typescript
+import { useEventListener } form '@committed/hooks'
+```
+
+or
+
+```typescript
+import { useEventListener } form '@committed/hooks/useEventListener'
+```
+
+The later may help with tree-shaking depending on your setup.
+
+## Links
+
 Here are a few helpful links for getting started with hooks:
 
 - [Tutorial](https://reactjs.org/docs/hooks-overview.html) Learn about react hooks.