I am working on this.

Hi @kdavidenkovmware ,

I’ve been working on a workaround for the issue regarding passing React hooks as components in Storybook. Here’s a solution that I’ve found effective:

Solution Overview

The workaround involves creating a custom Storybook configuration to handle TypeScript types and JSDoc documentation for React hooks. This approach allows you to use hooks in Storybook while ensuring they are properly documented and tested. The solution includes updating your Storybook setup and writing the hook with appropriate JSDoc comments.

Detailed Steps

Here’s an example of a React hook with JSDoc comments:

import { useState } from 'react';

/**
 * A custom hook for managing text state.
 * @returns An array containing the current text and a function to update it.
 * @example
 * const [text, setText] = useExampleHook('initial text');
 * setText('new text');
 */
export function useExampleHook(initialText: string): [string, (text: string) => void] {
  const [text, setText] = useState(initialText);

  return [text, setText];
}

Add a Story for the Hook

Create a story for the custom hook in Storybook:

import type { Meta, StoryObj } from '@storybook/react';
import { useExampleHook } from './useExampleHook';

const meta: Meta<typeof useExampleHook> = {
  title: 'Example/UseExampleHook',
  component: useExampleHook,
  tags: ['autodocs'],
  parameters: {
    layout: 'fullscreen',
  },
};

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {
  render: () => {
    const [text, setText] = useExampleHook('Hello, world!');
    return (
      <div>
        <p>Current text: {text}</p>
        <button onClick={() => setText('New text')}>Change Text</button>
      </div>
    );
  },
};

Additional Notes

Testing: After updating the configuration and creating the story, I tested it by running Storybook and verifying that the custom hook’s documentation was displayed correctly.

Feedback: I’d appreciate feedback on this workaround and any additional suggestions for improvements.

Feel free to test this workaround and let me know if you encounter any issues or have further questions. I’m happy to assist with any clarifications needed.

Best,
Daniel Mart